/* Pitch Panic css bundle v022 — concatenation (same order) of: app.css, decks-polish-v001.css, deck-border-even-v001.css, countdown-v005.css, howto-v005.css, deck-gestures-v005-r003.css, deck-details-v005.css, sound-toast-v008.css, scroll-control-gestures-v006-r002.css, layout-headers-v007-r007.css, player-name-v008-r002.css, lookfeel-v009.css, lookfeel-v010.css, lookfeel-v011.css, lookfeel-v012.css, lookfeel-v013.css, lookfeel-v014.css, lookfeel-v015.css, lookfeel-v016.css, lookfeel-v017.css, lookfeel-v018.css, lookfeel-v019.css, lookfeel-v020.css, lookfeel-v021.css, lookfeel-v022.css */
/* ===== app.css ===== */
/* Pitch Panic — bold party style. Mobile-first, safe-area aware, no page scroll/zoom. */
:root {
--bg0: #1a0630; --bg1: #3b0d5c; --bg2: #ff3d8b; --ink: #fff8fe; --muted: #d9c6ea;
--accent: #ffe36e; --accent-ink: #2a0b4a; --accent-deep: #d9a92a; --pop: #ff52cc; --pop-deep: #b8268f; --cool: #5cf2c8;
--card: rgba(30, 10, 52, .72); --line: rgba(255, 255, 255, .14);
--font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
--col: min(100%, 560px);
}
[data-theme="birthday"] { --bg0: #2a0a3d; --bg1: #6a1b9a; --bg2: #ff9ec7; --pop: #ff6fb5; --pop-deep: #c23d83; --accent: #fff176; --cool: #80deea; }
[data-theme="holiday"] { --bg0: #07210f; --bg1: #0f4d2a; --bg2: #d62839; --pop: #ff4d5e; --pop-deep: #a3192a; --accent: #ffe07a; --cool: #b9f6ca; --card: rgba(6, 34, 18, .74); }
[data-theme="spooky"] { --bg0: #0d0612; --bg1: #2b0f3a; --bg2: #ff7a1a; --pop: #ff7a1a; --pop-deep: #b84f06; --accent: #c6ff4d; --accent-deep: #8bbf1f; --cool: #b388ff; --card: rgba(20, 8, 26, .78); }
[data-theme="office"] { --bg0: #061a2e; --bg1: #0d3b66; --bg2: #2ec4b6; --pop: #3fa7ff; --pop-deep: #1f6fb8; --accent: #ffd166; --cool: #9be7ff; --card: rgba(6, 26, 46, .76); }
[data-theme="summer"] { --bg0: #08243a; --bg1: #0b6e8a; --bg2: #ffb347; --pop: #ff6b6b; --pop-deep: #c44545; --accent: #fff06a; --cool: #7cf5d0; --card: rgba(6, 40, 60, .72); }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg0); color: var(--ink); font-family: var(--font); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: fixed; inset: 0; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
.hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* background */
#bg { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, var(--bg1) 0%, var(--bg0) 62%); transition: background .6s; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 22s ease-in-out infinite alternate; }
.b1 { width: 60vmax; height: 60vmax; background: var(--pop); left: -25vmax; top: -20vmax; opacity: .32; }
.b2 { width: 50vmax; height: 50vmax; background: var(--bg2); right: -22vmax; bottom: -18vmax; animation-duration: 28s; opacity: .3; }
.b3 { width: 30vmax; height: 30vmax; background: var(--cool); left: 40%; top: 45%; animation-duration: 34s; opacity: .14; }
@keyframes drift { to { transform: translate(6vmax, 8vmax) scale(1.15); } }
#floaters span { position: absolute; bottom: -60px; opacity: .22; animation: floatUp linear infinite; filter: saturate(1.2); }
@keyframes floatUp { from { transform: translateY(0) rotate(0); } to { transform: translateY(-120vh) rotate(260deg); } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
/* loader */
.loader { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: calc(var(--sat) + 20px) 24px calc(var(--sab) + 20px); background: radial-gradient(110% 70% at 50% 35%, var(--bg1), var(--bg0) 70%); transition: opacity .45s, transform .45s; }
.loader.leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, 420px); text-align: center; }
.logo-mark img { width: 132px; height: 132px; border-radius: 30px; box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.08); animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%,100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.05); } }
.wordmark { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: .86; font-weight: 900; letter-spacing: .02em; font-size: clamp(54px, 15vw, 76px); }
.wordmark span:first-child { color: var(--ink); text-shadow: 0 5px 0 var(--pop-deep), 0 10px 26px rgba(0,0,0,.4); }
.wordmark span:last-child { color: var(--accent); text-shadow: 0 5px 0 var(--accent-deep), 0 10px 26px rgba(0,0,0,.4); transform: rotate(-3deg); }
.wordmark.big { font-size: clamp(64px, 19vw, 112px); }
.loader-tag { margin: 4px 0 10px; color: var(--muted); font-weight: 700; font-size: 17px; }
.progress { width: 100%; height: 14px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
#loadbar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pop), var(--accent)); transition: width .25s ease; }
.loader-msg { margin: 0; min-height: 22px; color: var(--muted); font-weight: 700; font-size: 15px; }
#tapstart { margin-top: 10px; animation: pulse 1.4s ease-in-out infinite, popIn .4s ease-out; }
/* app frame */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; padding: var(--sat) var(--sar) 0 var(--sal); }
.topbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: var(--col); margin: 0 auto; padding: 8px 14px 4px; }
.topbar-title { font-weight: 900; font-size: 13px; letter-spacing: .14em; color: var(--muted); text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar.minimal #homebtn, .topbar.minimal .topbar-title { visibility: hidden; }
.icon-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: rgba(255,255,255,.1); font-size: 20px; display: grid; place-items: center; }
.icon-btn:active { transform: scale(.92); }
.screen-host { flex: 1; min-height: 0; position: relative; overflow: hidden; outline: none; }
.view { height: 100%; width: var(--col); margin: 0 auto; padding: 8px 18px calc(var(--sab) + 18px); display: flex; flex-direction: column; align-items: stretch; gap: 14px; animation: viewIn .35s cubic-bezier(.2,.9,.3,1.2); }
.view.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 0; }
@keyframes viewIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
/* buttons */
.btn { border: 0; border-radius: 20px; padding: 14px 20px; font-weight: 900; font-size: 18px; letter-spacing: .03em; transition: transform .08s, box-shadow .08s, filter .2s; position: relative; line-height: 1.15; }
.btn small { display: block; font-size: 12px; font-weight: 800; opacity: .75; letter-spacing: .04em; margin-top: 2px; }
.btn-primary { background: linear-gradient(180deg, #fff3a8, var(--accent)); color: var(--accent-ink); box-shadow: 0 6px 0 var(--accent-deep), 0 12px 24px rgba(0,0,0,.35); }
.btn-secondary { background: linear-gradient(180deg, #ff86dd, var(--pop)); color: #fff; box-shadow: 0 6px 0 var(--pop-deep), 0 12px 24px rgba(0,0,0,.3); text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.btn-ghost { background: rgba(255,255,255,.1); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.btn-danger { background: #ff4d6d; color: #fff; box-shadow: 0 5px 0 #a3203a; }
.btn:not(:disabled):active { transform: translateY(5px); box-shadow: 0 1px 0 var(--accent-deep), 0 4px 10px rgba(0,0,0,.3); }
.btn-ghost:not(:disabled):active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.btn:disabled { filter: grayscale(.7) brightness(.75); opacity: .6; }
.btn-xl { font-size: clamp(20px, 5.6vw, 26px); padding: 20px 22px; border-radius: 24px; width: 100%; }
.btn-lg { font-size: 19px; padding: 17px 20px; width: 100%; }
.btn-block { width: 100%; }
.btn-small { font-size: 14px; padding: 9px 14px; border-radius: 14px; box-shadow: 0 4px 0 var(--accent-deep); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* home */
.home { justify-content: center; gap: 18px; }
.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-badge { font-size: 11px; font-weight: 900; letter-spacing: .14em; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.1); color: var(--muted); }
.tagline { margin: 4px 0 0; font-size: clamp(20px, 5.6vw, 26px); font-weight: 800; line-height: 1.2; }
.tagline em { font-style: normal; color: var(--accent); }
.menu { display: flex; flex-direction: column; gap: 14px; }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.tile { border: 0; border-radius: 20px; padding: 14px 6px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line), 0 8px 20px rgba(0,0,0,.2); display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; }
.tile:active { transform: scale(.95); }
.tile-ico { font-size: 28px; }
.resume-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 20px; background: linear-gradient(90deg, rgba(92,242,200,.22), rgba(92,242,200,.08)); box-shadow: inset 0 0 0 2px rgba(92,242,200,.5); text-align: left; }
.resume-card b { display: block; font-size: 17px; } .resume-card small { color: var(--muted); font-weight: 700; }
.rc-emoji { font-size: 26px; } .rc-arrow { margin-left: auto; font-size: 28px; color: var(--cool); }
.foot { text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; opacity: .8; margin: 6px 0 16px; line-height: 1.5; }
.install-hint { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px var(--line); animation: popIn .4s ease-out; position: relative; }
.install-hint p { margin: 0; font-size: 14px; line-height: 1.35; flex: 1; } .ih-ico { font-size: 26px; }
.ih-close { border: 0; background: none; font-size: 16px; opacity: .7; padding: 8px; }
.share-glyph { display: inline-block; padding: 0 5px; border-radius: 6px; background: rgba(255,255,255,.18); font-weight: 900; }
/* common text */
.screen-title { margin: 6px 0 0; font-size: clamp(26px, 7vw, 36px); font-weight: 900; line-height: 1.1; text-align: center; }
.sub { margin: 0; text-align: center; color: var(--muted); font-weight: 600; font-size: 15px; line-height: 1.4; }
.eyebrow { margin: 0; text-align: center; font-size: 15px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card { background: var(--card); border-radius: 22px; padding: 14px; box-shadow: inset 0 0 0 1.5px var(--line), 0 10px 26px rgba(0,0,0,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 17px; }
.hint { font-size: 12px; color: var(--muted); font-weight: 700; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sticky-cta { position: sticky; bottom: 0; margin-top: auto; padding: 14px 0 calc(var(--sab) + 16px); background: linear-gradient(180deg, transparent, var(--bg0) 38%); z-index: 2; }
.bottom-cta { margin-top: auto; padding-bottom: 4px; }
/* how to */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: 18px; padding: 12px 14px; box-shadow: inset 0 0 0 1.5px var(--line); animation: viewIn .4s backwards; animation-delay: calc(var(--i) * 60ms); }
.step-ico { font-size: 30px; width: 44px; text-align: center; flex: none; }
.step b { font-size: 17px; } .step p { margin: 2px 0 0; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.35; }
.callout { padding: 14px; border-radius: 18px; background: rgba(255,227,110,.14); box-shadow: inset 0 0 0 2px rgba(255,227,110,.4); font-size: 15px; line-height: 1.4; font-weight: 600; }
.example { padding: 14px; border-radius: 18px; background: rgba(255,82,204,.14); font-size: 16px; line-height: 1.4; font-weight: 600; text-align: center; }
.ex-label { display: block; font-size: 11px; letter-spacing: .14em; font-weight: 900; color: var(--muted); margin-bottom: 4px; }
.ex-twist { display: block; margin-top: 6px; color: var(--accent); font-weight: 800; }
/* setup */
.players { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.player-row { display: flex; align-items: center; gap: 8px; animation: viewIn .3s backwards; animation-delay: calc(var(--i) * 25ms); }
.pnum { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--pop); color: #fff; font-weight: 900; font-size: 15px; }
.pinput { flex: 1; min-width: 0; height: 48px; border-radius: 14px; border: 0; padding: 0 14px; font: 800 18px var(--font); color: var(--ink); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); outline: none; }
.pinput::placeholder { color: rgba(255,255,255,.4); }
.pinput:focus { box-shadow: inset 0 0 0 2.5px var(--accent); background: rgba(255,255,255,.14); }
.pinput.code { width: 100%; text-align: center; letter-spacing: .12em; margin: 8px 0; }
.premove { width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 15px; }
.premove:disabled { opacity: .25; }
.chips { display: flex; gap: 8px; flex-wrap: nowrap; } .chips.wrap { flex-wrap: wrap; }
.chip { border: 0; border-radius: 14px; padding: 10px 14px; min-height: 44px; flex: 1; font-weight: 800; font-size: 15px; background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); white-space: nowrap; }
.chips.wrap .chip { flex: 0 1 auto; }
.chip.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 0 var(--accent-deep); }
.chip:disabled { opacity: .3; }
.deck-chip.on { background: var(--accent); }
.deck-chip.locked { opacity: .75; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.chip small { font-size: 10px; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-btn { border: 0; border-radius: 16px; padding: 12px; text-align: left; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.seg-btn b { display: block; font-size: 15px; } .seg-btn small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.seg-btn.on { box-shadow: inset 0 0 0 3px var(--accent); background: rgba(255,227,110,.12); }
/* in-game */
.pills { display: flex; justify-content: center; gap: 8px; }
.pill { font-size: 12px; font-weight: 900; letter-spacing: .12em; padding: 7px 12px; border-radius: 99px; background: var(--pop); color: #fff; }
.pill-dim { background: rgba(255,255,255,.12); color: var(--muted); }
.handoff { text-align: center; justify-content: flex-start; }
.handoff-phone { margin: auto auto 0; width: 120px; height: 120px; border-radius: 36px; display: grid; place-items: center; font-size: 66px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 3px var(--line); animation: passing 1.8s ease-in-out infinite; }
@keyframes passing { 0%,100% { transform: translateX(-14px) rotate(-8deg); } 50% { transform: translateX(14px) rotate(8deg); } }
.big-name { margin: 0; font-size: clamp(46px, 14vw, 84px); font-weight: 900; line-height: 1; text-align: center; color: var(--accent); text-shadow: 0 5px 0 var(--accent-deep), 0 14px 30px rgba(0,0,0,.45); word-break: break-word; animation: popIn .45s cubic-bezier(.2,.9,.3,1.4); }
.big-name.win, .big-name.champ { color: var(--ink); text-shadow: 0 5px 0 var(--pop-deep), 0 14px 30px rgba(0,0,0,.45); }
.secret { margin: 0 auto auto; max-width: 360px; padding: 14px 16px; border-radius: 18px; background: rgba(0,0,0,.25); font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--muted); }
.secret span { font-size: 22px; }
.prompt { justify-content: flex-start; }
.prompt-card, .pitch-card { border-radius: 28px; padding: 22px 20px; text-align: center; background: linear-gradient(160deg, #fff, #ffeefa); color: #2a0b4a; box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 22px 44px rgba(0,0,0,.4); }
.prompt-card { margin: auto 0 0; }
.flip-in { animation: flipIn .6s cubic-bezier(.2,.9,.3,1.2); }
@keyframes flipIn { from { transform: perspective(800px) rotateY(80deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.pc-label { display: block; font-size: 12px; font-weight: 900; letter-spacing: .18em; color: #a4339a; }
.pc-text { margin: 6px 0 4px; font-size: clamp(28px, 8.4vw, 40px); font-weight: 900; line-height: 1.08; }
.pc-text.sm { font-size: clamp(21px, 6vw, 30px); margin-bottom: 10px; }
.pc-text.cust { color: #7b1fa2; }
.pc-divider { display: inline-block; margin: 10px 0 4px; padding: 4px 14px; border-radius: 99px; background: #2a0b4a; color: var(--accent); font-weight: 900; font-size: 14px; letter-spacing: .2em; }
.twist-teaser { margin: 0 0 auto; text-align: center; padding: 14px; border-radius: 18px; background: rgba(255,227,110,.12); box-shadow: inset 0 0 0 2px rgba(255,227,110,.35); font-weight: 700; font-size: 16px; }
.pitching { gap: 12px; }
.timer-wrap { position: relative; width: min(46vw, 34vh, 220px); aspect-ratio: 1; margin: 0 auto; flex: none; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: rgba(0,0,0,.25); stroke: rgba(255,255,255,.12); stroke-width: 12; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; transition: stroke .3s; filter: drop-shadow(0 0 8px var(--accent)); }
.ring-mid { fill: var(--pop); transform-origin: 64px 64px; transform: rotate(180deg); }
.timer-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(64px, 20vw, 110px); font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 5px 0 rgba(0,0,0,.3); }
.timer-num.bump { animation: bump .3s ease-out; }
@keyframes bump { 0% { transform: scale(1.2); } 100% { transform: scale(1); } }
.timer-wrap.urgent .ring-fg { stroke: #ff4d6d; filter: drop-shadow(0 0 12px #ff4d6d); }
.timer-wrap.urgent .timer-num { color: #ff8fa3; animation: bump .3s ease-out, shakeX .3s; }
.pitch-card { padding: 16px 18px 8px; }
.twist-slot { min-height: 96px; }
.twist-locked { height: 96px; display: grid; place-items: center; border-radius: 22px; border: 3px dashed rgba(255,255,255,.25); color: var(--muted); font-weight: 900; font-size: 18px; letter-spacing: .06em; animation: pulse 1.2s ease-in-out infinite; }
.twist-locked span { font-size: 24px; }
.twist-card { border-radius: 22px; padding: 14px 18px; text-align: center; background: linear-gradient(135deg, var(--pop), #ff8a3d); color: #fff; box-shadow: 0 6px 0 var(--pop-deep), 0 0 40px rgba(255,82,204,.55); }
.twist-card .pc-label { color: #fff3a8; }
.twist-card h3 { margin: 6px 0 2px; font-size: clamp(21px, 6vw, 30px); font-weight: 900; line-height: 1.12; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.twist-card.reveal { animation: slam .55s cubic-bezier(.2,.9,.3,1.5); }
@keyframes slam { from { transform: scale(2.2) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* flash overlays */
.flash { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: calc(var(--sat) + 20px) 22px calc(var(--sab) + 20px); text-align: center; }
.flash.countdown { background: rgba(20, 4, 36, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.count-num { font-size: min(52vw, 260px); font-weight: 900; color: var(--accent); text-shadow: 0 10px 0 var(--accent-deep), 0 20px 60px rgba(0,0,0,.5); animation: countIn .7s cubic-bezier(.2,.9,.3,1.3) both; }
.count-num.go { color: var(--cool); text-shadow: 0 10px 0 #1f9e7e; font-size: min(36vw, 200px); }
@keyframes countIn { 0% { transform: scale(2.6); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 80% { transform: scale(.9); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } }
.flash.twist { background: radial-gradient(circle at 50% 50%, rgba(255,82,204,.95), rgba(60, 6, 80, .96) 70%); animation: flashIn .5s ease-out; }
@keyframes flashIn { 0% { background: #fff; } 100% {} }
.twist-burst { max-width: 560px; animation: slam .6s cubic-bezier(.2,.9,.3,1.5); }
.tb-label { font-size: clamp(30px, 10vw, 54px); font-weight: 900; color: var(--accent); text-shadow: 0 5px 0 var(--accent-deep); letter-spacing: .04em; animation: shakeX .5s .5s; }
.tb-text { margin: 18px 0 14px; font-size: clamp(30px, 9vw, 52px); font-weight: 900; line-height: 1.1; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.tb-sub { font-size: 16px; font-weight: 800; opacity: .85; }
.flash.timeup { background: rgba(255, 50, 90, .88); }
.stamp { font-size: min(34vw, 190px); font-weight: 900; color: #fff; border: 12px solid #fff; border-radius: 30px; padding: 0 24px; transform: rotate(-8deg); animation: stamp .45s cubic-bezier(.2,.9,.3,1.5); }
@keyframes stamp { from { transform: rotate(-8deg) scale(3); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
body.shake .app { animation: shake .55s; }
@keyframes shake { 10%,90% { transform: translate(-2px, 1px); } 20%,80% { transform: translate(5px, -2px); } 30%,50%,70% { transform: translate(-8px, 3px); } 40%,60% { transform: translate(8px, -3px); } }
@keyframes shakeX { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* voting */
.vote-list { display: flex; flex-direction: column; gap: 10px; }
.vote-opt { border: 0; border-radius: 20px; padding: 14px 16px; text-align: left; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); display: flex; flex-direction: column; gap: 4px; transition: transform .1s, box-shadow .15s, background .15s; }
.vote-opt:active { transform: scale(.98); }
.vote-opt.on { background: rgba(255,227,110,.16); box-shadow: inset 0 0 0 3px var(--accent), 0 0 24px rgba(255,227,110,.25); }
.vo-name { font-size: 20px; font-weight: 900; color: var(--accent); }
.vo-pitch { font-size: 16px; font-weight: 600; line-height: 1.3; }
.vo-twist { font-size: 14px; font-weight: 700; color: var(--muted); }
.drumroll { justify-content: center; }
.drum { text-align: center; } .drum-ico { font-size: 110px; animation: drumHit .22s ease-in-out infinite alternate; }
@keyframes drumHit { from { transform: scale(1) rotate(-5deg); } to { transform: scale(1.12) rotate(5deg); } }
/* results */
.result, .final { text-align: center; }
.winner-burst, .trophy { font-size: 92px; margin-top: 8px; animation: popIn .6s cubic-bezier(.2,.9,.3,1.6), floaty 3s 0.6s ease-in-out infinite; }
.trophy { font-size: 120px; filter: drop-shadow(0 0 30px rgba(255,227,110,.6)); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.win-pitch { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.1); text-align: center; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 30%) 1fr 28px; align-items: center; gap: 10px; margin: 6px 0; text-align: left; font-weight: 800; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 16px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--pop); animation: grow .8s cubic-bezier(.2,.9,.3,1) both; transform-origin: left; }
.bar-row.win .bar span { background: var(--accent); }
@keyframes grow { from { transform: scaleX(0); } }
.scores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.scores li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.07); font-weight: 800; font-size: 17px; text-align: left; }
.scores li.lead { background: linear-gradient(90deg, rgba(255,227,110,.3), rgba(255,227,110,.08)); box-shadow: inset 0 0 0 2px rgba(255,227,110,.55); }
.rank { width: 32px; color: var(--muted); } .sname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spts { font-size: 22px; font-weight: 900; color: var(--accent); }
.potn { padding: 18px; border-radius: 24px; background: linear-gradient(140deg, rgba(255,82,204,.35), rgba(167,139,250,.25)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }
.potn-label { font-size: 13px; font-weight: 900; letter-spacing: .14em; color: var(--accent); }
.potn p { margin: 8px 0 0; font-size: 18px; line-height: 1.35; font-weight: 600; }
.potn-twist { color: #ffd0ef; font-weight: 800 !important; font-size: 16px !important; }
.potn-meta { display: block; margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .08em; }
.highlights { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.35; }
.highlights li { display: flex; gap: 10px; }
.hl-r { flex: none; font-weight: 900; color: var(--pop); width: 28px; }
.final-actions { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 calc(var(--sab) + 22px); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* decks */
.deck-list { display: flex; flex-direction: column; gap: 10px; }
.deck-card { border: 0; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line), inset 6px 0 0 var(--accent); text-align: left; }
.dc-ico { font-size: 36px; width: 48px; text-align: center; flex: none; } .dc-ico.big { font-size: 64px; width: auto; display: block; }
.dc-body { flex: 1; display: flex; flex-direction: column; gap: 2px; } .dc-body b { font-size: 18px; } .dc-body small { color: var(--muted); font-weight: 600; font-size: 13px; }
.dc-count { color: var(--ink) !important; opacity: .7; }
.badge { flex: none; font-size: 10px; font-weight: 900; letter-spacing: .1em; padding: 5px 9px; border-radius: 99px; background: rgba(255,255,255,.14); }
.badge.ok { background: rgba(92,242,200,.25); color: var(--cool); } .badge.soon { background: rgba(255,255,255,.12); color: var(--muted); }
.badge.buy { background: var(--accent); color: var(--accent-ink); font-size: 13px; } .badge.adult { background: #ff4d6d; color: #fff; vertical-align: middle; }
/* sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .2s; }
.sheet { position: relative; width: min(100%, 560px); max-height: 88%; overflow-y: auto; padding: 10px 20px calc(var(--sab) + 22px); border-radius: 28px 28px 0 0; background: linear-gradient(180deg, var(--bg1), var(--bg0)); box-shadow: 0 -10px 40px rgba(0,0,0,.5); transform: translateY(100%); transition: transform .25s cubic-bezier(.2,.9,.3,1.05); text-align: center; overscroll-behavior: contain; }
.sheet-wrap.open .sheet { transform: none; } .sheet-wrap.open .sheet-backdrop { opacity: 1; }
.sheet-grip { width: 44px; height: 5px; border-radius: 9px; background: rgba(255,255,255,.3); margin: 0 auto 12px; }
.sheet h3 { margin: 4px 0 8px; font-size: 24px; font-weight: 900; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.samples { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; text-align: left; }
.sample { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); font-size: 15px; line-height: 1.35; font-weight: 600; }
.sample span { display: block; color: var(--accent); font-weight: 700; margin-top: 3px; font-size: 14px; }
.sheet-ok { font-weight: 800; color: var(--cool); }
.linkish { border: 0; background: none; color: var(--muted); text-decoration: underline; font-weight: 700; padding: 8px; }
.demo { color: var(--accent); }
.ios-steps { text-align: left; font-size: 17px; line-height: 1.5; font-weight: 600; padding-left: 22px; }
.ios-steps li { margin: 8px 0; }
/* settings */
.toggle-row { width: 100%; border: 0; background: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; text-align: left; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row b { display: block; font-size: 17px; } .toggle-row small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; margin-top: 2px; }
.switch { width: 54px; height: 32px; flex: none; border-radius: 99px; background: rgba(255,255,255,.18); position: relative; transition: background .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.switch.on { background: var(--cool); } .switch.on i { transform: translateX(22px); }
/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--sab) + 24px); transform: translate(-50%, 40px); opacity: 0; z-index: 90; padding: 12px 18px; border-radius: 16px; background: #fff; color: #2a0b4a; font-weight: 800; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .25s, opacity .25s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* short phones */
@media (max-height: 700px) {
.handoff-phone { width: 90px; height: 90px; font-size: 48px; }
.wordmark.big { font-size: clamp(54px, 16vw, 80px); }
.home { gap: 12px; } .tile { padding: 10px 6px; }
.twist-slot, .twist-locked { min-height: 80px; height: auto; }
}
/* tablet / desktop */
@media (min-width: 700px) {
:root { --col: min(100%, 680px); }
.view { padding-left: 28px; padding-right: 28px; gap: 18px; }
.grid2 { grid-template-columns: 1fr 1fr; }
.btn-lg { font-size: 22px; padding: 20px; }
.pc-text { font-size: 46px; } .pc-text.sm { font-size: 34px; }
.twist-card h3 { font-size: 34px; }
.vo-pitch { font-size: 18px; }
.handoff-phone { width: 150px; height: 150px; font-size: 84px; }
}
@media (min-width: 1100px) and (min-height: 760px) {
.timer-wrap { width: 230px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
#floaters { display: none; }
}
/* ============================================================
v002 polish layer — "late-night game show" art direction:
spotlit stage, glossy candy buttons, gold-and-neon accents,
tighter type hierarchy, depth, motion and juicier moments.
============================================================ */
:root {
--spring: cubic-bezier(.2, 1.1, .3, 1.25); --out: cubic-bezier(.16, 1, .3, 1);
--gold-a: #fff6c4; --gold-b: #ffd84d; --gold-c: #e5a21b;
--rim: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.05) 40%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.18));
--base: color-mix(in srgb, var(--bg0) 72%, var(--bg1));
--shadow-lg: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 40px -12px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.25);
}
body { font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .screen-title, .big-name, .pc-text, .tb-text { text-wrap: balance; }
p, .sub { text-wrap: pretty; }
/* --- stage background: beams, floor glow, film grain, vignette --- */
#bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 38% at 50% 0%, rgba(255,255,255,.10), transparent 70%); pointer-events: none; }
.beam { position: absolute; top: -10vh; width: 46vmax; height: 120vh; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 75%); filter: blur(18px); transform-origin: 50% 0; opacity: .5; mix-blend-mode: screen; }
.beam-l { left: -12vmax; transform: rotate(-24deg); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); animation: sweepL 14s ease-in-out infinite alternate; }
.beam-r { right: -12vmax; transform: rotate(24deg); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); animation: sweepR 17s ease-in-out infinite alternate; }
@keyframes sweepL { from { transform: rotate(-30deg); } to { transform: rotate(-12deg); } }
@keyframes sweepR { from { transform: rotate(30deg); } to { transform: rotate(14deg); } }
.stage-floor { position: absolute; left: -10%; right: -10%; bottom: -18vh; height: 42vh; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--pop) 38%, transparent), transparent 70%); filter: blur(10px); opacity: .6; }
.grain { position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55)); }
#floaters span { opacity: .16; filter: blur(.4px) saturate(1.2); }
/* --- loader --- */
.loader { background: radial-gradient(90% 60% at 50% 32%, color-mix(in srgb, var(--bg1) 85%, var(--pop)), var(--bg0) 72%); }
.loader::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 32%, rgba(255,255,255,.05) 0 8deg, transparent 8deg 22deg); animation: spin 40s linear infinite; mask: radial-gradient(60% 50% at 50% 32%, #000, transparent 75%); -webkit-mask: radial-gradient(60% 50% at 50% 32%, #000, transparent 75%); }
.loader-inner { position: relative; }
.logo-mark { position: relative; }
.lm-glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pop) 70%, transparent), transparent 65%); filter: blur(10px); animation: breathe 2.4s ease-in-out infinite; }
.logo-mark img { position: relative; box-shadow: 0 22px 50px -10px rgba(0,0,0,.6), 0 0 0 1.5px rgba(255,255,255,.22), 0 0 0 7px rgba(255,255,255,.05); }
@keyframes breathe { 0%,100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.progress { height: 12px; background: rgba(0,0,0,.35); box-shadow: inset 0 2px 5px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.1); }
#loadbar { background: linear-gradient(90deg, var(--pop), var(--accent)), var(--pop); position: relative; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }
#loadbar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 8px, transparent 8px 16px); animation: stripes .8s linear infinite; }
@keyframes stripes { to { background-position: 22.6px 0; } }
.loader-msg { font-size: 14px; letter-spacing: .02em; opacity: .9; }
/* --- wordmark: extruded, lit from above --- */
.wordmark { letter-spacing: -.01em; filter: drop-shadow(0 16px 24px rgba(0,0,0,.45)); }
.wordmark span:first-child { color: #fff; text-shadow: 0 1px 0 color-mix(in srgb, var(--pop) 60%, #fff), 0 2px 0 var(--pop-deep), 0 3px 0 var(--pop-deep), 0 4px 0 var(--pop-deep), 0 5px 0 var(--pop-deep), 0 6px 0 color-mix(in srgb, var(--pop-deep) 70%, #000), 0 0 34px color-mix(in srgb, var(--pop) 55%, transparent); }
.wordmark span:last-child { color: var(--gold-b); text-shadow: 0 -1px 0 var(--gold-a), 0 2px 0 var(--gold-c), 0 3px 0 var(--gold-c), 0 4px 0 var(--gold-c), 0 5px 0 var(--gold-c), 0 6px 0 color-mix(in srgb, var(--gold-c) 60%, #000), 0 0 34px rgba(255,216,77,.45); transform: rotate(-3deg); animation: markTilt 5s ease-in-out infinite; }
@keyframes markTilt { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(-1deg) scale(1.02); } }
.hero .wordmark { animation: heroIn .7s var(--spring) both; }
@keyframes heroIn { from { transform: translateY(-20px) scale(.85); opacity: 0; } }
.hero-badge { font-size: 10.5px; letter-spacing: .2em; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-badge::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 8px #ff4d6d; vertical-align: 1px; animation: onAir 1.6s ease-in-out infinite; }
@keyframes onAir { 50% { opacity: .35; } }
.tagline { font-weight: 800; letter-spacing: -.005em; animation: viewIn .6s .12s var(--out) both; }
.tagline em { color: var(--accent); text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }
.menu { animation: viewIn .6s .2s var(--out) both; }
/* --- top bar --- */
.topbar { padding: 8px 14px 6px; }
.topbar-title { font-size: 12px; letter-spacing: .22em; color: color-mix(in srgb, var(--muted) 85%, transparent); }
.icon-btn { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -6px rgba(0,0,0,.5); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .12s var(--spring), background .2s; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.muted { color: #ff8fa3; background: rgba(255,77,109,.14); box-shadow: inset 0 0 0 1px rgba(255,120,150,.4); }
.icon-btn:active { transform: scale(.88); background: rgba(255,255,255,.16); }
/* --- screen transitions --- */
.screen-host { isolation: isolate; }
.view { animation: viewIn .42s var(--out) both; }
.view.leaving { position: absolute; inset: 0; margin: 0 auto; pointer-events: none; animation: viewOut .24s ease-in forwards; z-index: 0; }
@keyframes viewIn { from { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes viewOut { to { opacity: 0; transform: translateY(-14px) scale(1.02); filter: blur(3px); } }
/* --- buttons: glossy candy with real press depth --- */
.btn { isolation: isolate; overflow: hidden; letter-spacing: .04em; transition: transform .1s var(--spring), box-shadow .1s, filter .2s; -webkit-user-select: none; }
.btn::before { content: ""; position: absolute; left: 6%; right: 6%; top: 3px; height: 46%; border-radius: 16px 16px 40% 40% / 16px 16px 12px 12px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; z-index: -1; opacity: .7; }
.btn-ghost::before { opacity: .12; }
.btn-primary { background: linear-gradient(180deg, var(--gold-a), var(--gold-b) 55%, color-mix(in srgb, var(--gold-b) 80%, var(--gold-c))); color: #2a0b4a; box-shadow: 0 6px 0 var(--gold-c), 0 7px 0 color-mix(in srgb, var(--gold-c) 60%, #000), 0 16px 30px -6px rgba(0,0,0,.5), 0 0 30px -6px rgba(255,216,77,.5); text-shadow: 0 1px 0 rgba(255,255,255,.45); }
[data-theme="spooky"] .btn-primary { background: linear-gradient(180deg, #eaffb0, var(--accent)); box-shadow: 0 6px 0 var(--accent-deep), 0 16px 30px -6px rgba(0,0,0,.5); }
.btn-secondary { box-shadow: 0 6px 0 var(--pop-deep), 0 7px 0 color-mix(in srgb, var(--pop-deep) 60%, #000), 0 16px 30px -8px rgba(0,0,0,.5); }
.btn-ghost { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-xl.btn-primary::after, #tapstart::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg); animation: sheen 3.6s 1s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 70% { left: -50%; } 100% { left: 130%; } }
.btn:not(:disabled):active { transform: translateY(5px) scale(.985); box-shadow: 0 1px 0 var(--gold-c), 0 2px 0 color-mix(in srgb, var(--gold-c) 60%, #000), 0 6px 12px -4px rgba(0,0,0,.5); filter: brightness(1.04); }
.btn-secondary:not(:disabled):active { box-shadow: 0 1px 0 var(--pop-deep), 0 6px 12px -4px rgba(0,0,0,.5); }
.btn-ghost:not(:disabled):active { transform: scale(.97); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); background: rgba(255,255,255,.14); }
.btn-danger:not(:disabled):active { box-shadow: 0 1px 0 #a3203a; }
.btn:disabled { filter: saturate(.3) brightness(.7); opacity: .55; }
.btn:disabled::after { display: none; }
.tile { background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, var(--rim) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-lg); transition: transform .14s var(--spring), background .2s; }
.tile-ico { filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); transition: transform .2s var(--spring); }
.tile:active { transform: scale(.94) translateY(2px); } .tile:active .tile-ico { transform: scale(1.15) rotate(-8deg); }
.chip, .seg-btn, .vote-opt, .deck-card, .toggle-row, .resume-card, .premove { transition: transform .12s var(--spring), background .18s, box-shadow .18s, color .18s; }
.chip:not(:disabled):active, .seg-btn:active, .deck-card:active, .premove:not(:disabled):active { transform: scale(.95); }
.chip.on { background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); color: #2a0b4a; box-shadow: 0 3px 0 var(--gold-c), 0 6px 14px -4px rgba(255,216,77,.55); animation: chipOn .28s var(--spring); }
@keyframes chipOn { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } }
/* --- surfaces --- */
.card { background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, var(--rim) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-lg); border-radius: 24px; padding: 16px; }
.card-head { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.card-head b { font-weight: 900; color: var(--ink); }
.card-head .hint { letter-spacing: .02em; text-transform: none; }
.screen-title { font-size: clamp(28px, 7.4vw, 38px); letter-spacing: -.015em; text-shadow: 0 4px 0 rgba(0,0,0,.2), 0 10px 26px rgba(0,0,0,.35); }
.eyebrow { font-size: 12.5px; letter-spacing: .24em; color: color-mix(in srgb, var(--accent) 55%, var(--muted)); }
.sub { font-size: 15px; }
.pinput { background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 2px 6px rgba(0,0,0,.3); transition: box-shadow .15s, background .15s; }
.pinput:focus { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.pnum { background: linear-gradient(160deg, color-mix(in srgb, var(--pop) 80%, #fff), var(--pop-deep)); box-shadow: 0 3px 0 color-mix(in srgb, var(--pop-deep) 60%, #000); }
.seg-btn.on { box-shadow: inset 0 0 0 2.5px var(--accent), 0 0 24px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.sticky-cta { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg0) 92%, transparent) 42%); }
.install-hint { background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, var(--rim) border-box; border: 1px solid transparent; box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tip { margin: 8px 4px 2px; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.4; }
/* --- avatars --- */
.av { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; margin-right: 8px; vertical-align: middle; font-size: 14px; font-weight: 900; color: #2a0b4a; text-shadow: none; letter-spacing: 0; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--av) 40%, #fff), var(--av) 60%, color-mix(in srgb, var(--av) 70%, #000)); box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1.5px rgba(255,255,255,.35); }
.av-sm { width: 24px; height: 24px; font-size: 12px; }
.av-xl { width: 66px; height: 66px; font-size: 32px; margin: 0 0 10px; box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.12), 0 0 40px color-mix(in srgb, var(--av) 60%, transparent); animation: avPop .55s .05s var(--spring) both; }
@keyframes avPop { from { transform: scale(0) rotate(-30deg); } }
.big-name { display: flex; flex-direction: column; align-items: center; letter-spacing: -.02em; }
/* --- handoff --- */
.handoff-phone { position: relative; background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.03)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, var(--rim) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-lg); }
.hp-ring { position: absolute; inset: -10px; border-radius: 44px; border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); animation: ringOut 1.8s ease-out infinite; }
@keyframes ringOut { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.secret { background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* --- prompt + pitch cards: paper "dossier" with a stamp --- */
.prompt-card, .pitch-card { position: relative; background: radial-gradient(120% 80% at 20% 0%, #fff, #fff4fb 60%, #ffe6f6), #fff; box-shadow: 0 2px 0 #fff inset, 0 8px 0 color-mix(in srgb, var(--pop-deep) 55%, #2a0b4a), 0 26px 50px -10px rgba(0,0,0,.6); }
.prompt-card::after, .pitch-card::after { content: ""; position: absolute; inset: 8px; border-radius: 22px; border: 1.5px dashed rgba(164,51,154,.22); pointer-events: none; }
.pc-stamp { position: absolute; top: 12px; right: -6px; transform: rotate(12deg); padding: 4px 10px; border: 2.5px solid #e2335f; border-radius: 8px; color: #e2335f; font-size: 11px; font-weight: 900; letter-spacing: .14em; opacity: .85; background: rgba(255,255,255,.6); animation: stampIn .5s .45s var(--spring) both; }
@keyframes stampIn { from { transform: rotate(12deg) scale(2.4); opacity: 0; } }
.pc-text { letter-spacing: -.015em; }
.pc-divider { background: linear-gradient(180deg, #3a1260, #22073c); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.twist-teaser { background: linear-gradient(rgba(255,227,110,.1), rgba(255,227,110,.1)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, linear-gradient(120deg, rgba(255,227,110,.7), rgba(255,227,110,.1), rgba(255,227,110,.6)) border-box; border: 1.5px solid transparent; box-shadow: 0 0 30px -10px rgba(255,227,110,.5); }
/* --- timer --- */
.timer-wrap { filter: drop-shadow(0 16px 30px rgba(0,0,0,.45)); }
.timer-wrap::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.14), rgba(0,0,0,.25) 70%); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -10px 30px rgba(0,0,0,.35); }
.ring-bg { fill: none; stroke: rgba(0,0,0,.35); stroke-width: 13; }
.ring-fg { stroke: url(#rg); stroke-width: 11; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.rg-a { stop-color: var(--gold-a); } .rg-b { stop-color: var(--accent); }
.ring-tick { stroke: rgba(255,255,255,.28); stroke-width: 1.4; stroke-linecap: round; }
.ring-tick.half { stroke: var(--pop); stroke-width: 3; }
.ring-mid { display: none; }
.timer-num { letter-spacing: -.04em; text-shadow: 0 4px 0 rgba(0,0,0,.3), 0 0 30px rgba(255,255,255,.18); }
.timer-wrap.urgent .ring-fg { stroke: #ff4d6d; }
.timer-wrap.urgent { animation: heartbeat 1s ease-in-out infinite; }
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.06); } 25% { transform: scale(1.03); } }
body.urgent #bg .vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(255,30,70,.45)); animation: redPulse 1s ease-in-out infinite; }
@keyframes redPulse { 50% { opacity: .55; } }
.twist-locked { border: 2px dashed rgba(255,255,255,.28); background: repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px); }
.twist-slot.charging .twist-locked { animation: charge .12s linear infinite; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 30px -4px color-mix(in srgb, var(--accent) 70%, transparent); }
@keyframes charge { 0%, 100% { transform: translate(0); } 25% { transform: translate(-2px, 1px); } 75% { transform: translate(2px, -1px); } }
.twist-card { background: linear-gradient(135deg, var(--pop), #ff8a3d 70%, #ffb84d); box-shadow: 0 6px 0 var(--pop-deep), 0 0 0 2px rgba(255,255,255,.25) inset, 0 0 46px color-mix(in srgb, var(--pop) 60%, transparent); position: relative; overflow: hidden; }
.twist-card::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); animation: sheen 2.6s .6s ease-in-out 2; }
/* --- countdown --- */
.flash.countdown { background: radial-gradient(circle, rgba(40,8,64,.78), rgba(10,2,20,.92)); }
.count-ring { position: absolute; width: min(60vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--accent); animation: countRing .7s ease-out both; }
.count-ring.go { border-color: var(--cool); }
@keyframes countRing { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
/* --- twist slam: white flash, spinning rays, shockwave, chromatic headline --- */
.flash.twist { overflow: hidden; background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--pop) 95%, #fff), color-mix(in srgb, var(--bg0) 92%, var(--pop)) 72%); animation: flashIn .45s ease-out; }
@keyframes flashIn { 0% { background: #fff; } 100% { } }
.tb-rays { position: absolute; left: 50%; top: 48%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(rgba(255,255,255,.14) 0 9deg, transparent 9deg 22deg); animation: spin 9s linear infinite, raysIn .5s ease-out; mask: radial-gradient(circle, #000 0, transparent 45%); -webkit-mask: radial-gradient(circle, #000 0, transparent 45%); }
@keyframes raysIn { from { opacity: 0; } }
.tb-shock { position: absolute; left: 50%; top: 48%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 10px solid rgba(255,255,255,.85); animation: shock .7s ease-out forwards; }
@keyframes shock { to { transform: scale(30); opacity: 0; border-width: 1px; } }
.twist-burst { position: relative; animation: slam .55s var(--spring) both; }
@keyframes slam { 0% { transform: scale(3) rotate(-8deg); opacity: 0; filter: blur(8px); } 55% { transform: scale(.94) rotate(1deg); opacity: 1; filter: none; } 100% { transform: none; } }
.tb-label { color: var(--gold-b); text-shadow: 0 2px 0 var(--gold-c), 0 4px 0 var(--gold-c), 0 6px 0 color-mix(in srgb, var(--gold-c) 50%, #000), -3px 0 0 rgba(0,240,255,.55), 3px 0 0 rgba(255,0,140,.55); }
.tb-text { text-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 40px rgba(255,255,255,.35); animation: viewIn .5s .25s var(--out) both; }
.tb-sub { display: inline-block; padding: 8px 14px; border-radius: 99px; background: rgba(0,0,0,.25); animation: viewIn .5s .45s var(--out) both; }
body.shake .app { animation: shake .6s; }
@keyframes shake { 10%,90% { transform: translate(-3px, 1px) rotate(-.3deg); } 20%,80% { transform: translate(7px, -3px) rotate(.4deg); } 30%,50%,70% { transform: translate(-11px, 4px) rotate(-.6deg); } 40%,60% { transform: translate(11px, -4px) rotate(.6deg); } }
/* --- TIME! + vote lock stamps --- */
.flash.timeup { background: radial-gradient(circle, rgba(255,70,110,.9), rgba(140,10,50,.95)); }
.stamp { text-shadow: 0 6px 0 rgba(0,0,0,.2); box-shadow: 0 10px 0 rgba(0,0,0,.18); }
.flash.locked { background: rgba(10,2,20,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn .15s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.lock-stamp { font-size: clamp(34px, 11vw, 64px); font-weight: 900; color: var(--cool); border: 8px solid var(--cool); border-radius: 22px; padding: 6px 20px; transform: rotate(-7deg); text-shadow: 0 4px 0 rgba(0,0,0,.3); box-shadow: 0 0 40px -6px var(--cool), inset 0 0 30px -10px var(--cool); animation: stamp .4s var(--spring) both; }
@keyframes stamp { from { transform: rotate(-7deg) scale(3); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: 1; } }
/* --- voting --- */
.vote-opt { position: relative; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, var(--rim) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-lg); animation: viewIn .4s var(--out) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); padding: 14px 16px 14px 16px; }
.vo-name { display: flex; align-items: center; font-size: 20px; letter-spacing: -.01em; }
.vo-check { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 16px; font-weight: 900; color: #2a0b4a; background: var(--accent); transform: scale(0); transition: transform .25s var(--spring); }
.vote-opt.on { background: linear-gradient(rgba(255,227,110,.16), rgba(255,227,110,.08)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, linear-gradient(140deg, var(--gold-a), var(--gold-c)) border-box; border: 2.5px solid transparent; box-shadow: 0 0 34px -6px rgba(255,216,77,.55), var(--shadow-lg); transform: translateY(-2px) scale(1.01); }
.vote-opt.on .vo-check { transform: scale(1); }
.vote-opt:active { transform: scale(.97); }
/* --- drumroll --- */
.drumroll { position: relative; }
.spot { position: absolute; left: 50%; top: -10%; width: 70%; height: 120%; margin-left: -35%; background: radial-gradient(50% 30% at 50% 78%, rgba(255,255,255,.28), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.14), transparent 80%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); transform-origin: 50% 0; animation: spotSweep 1.35s ease-in-out both; pointer-events: none; }
@keyframes spotSweep { 0% { transform: rotate(-28deg); } 35% { transform: rotate(22deg); } 70% { transform: rotate(-10deg); } 100% { transform: rotate(0); } }
.drum { position: relative; }
.drum-ico { filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: dot .6s ease-in-out infinite alternate; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { to { transform: translateY(-10px); opacity: .4; } }
/* --- results + winner --- */
.winner-burst, .trophy { position: relative; display: grid; place-items: center; animation: none; margin: 4px auto 0; }
.winner-burst > span, .trophy > span { position: relative; display: block; animation: popIn .6s cubic-bezier(.2,.9,.3,1.6), floaty 3s .6s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)) drop-shadow(0 0 26px rgba(255,216,77,.55)); }
.rays { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,227,110,.32) 0 10deg, transparent 10deg 30deg); mask: radial-gradient(circle, #000 10%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 10%, transparent 68%); animation: spin 14s linear infinite, raysIn .8s ease-out; }
.trophy .rays { width: 340px; height: 340px; }
.big-name.win, .big-name.champ { color: #fff; }
.big-name.champ { color: var(--gold-b); text-shadow: 0 -1px 0 var(--gold-a), 0 2px 0 var(--gold-c), 0 4px 0 var(--gold-c), 0 6px 0 color-mix(in srgb, var(--gold-c) 55%, #000), 0 0 40px rgba(255,216,77,.5); animation: champIn .8s .1s var(--spring) both; }
@keyframes champIn { 0% { transform: scale(.2); opacity: 0; letter-spacing: .3em; } 100% { transform: none; opacity: 1; } }
.plus-one { align-self: center; margin-top: -4px; padding: 6px 14px; border-radius: 99px; font-weight: 900; font-size: 15px; letter-spacing: .06em; color: #2a0b4a; background: linear-gradient(180deg, #b7ffe9, var(--cool)); box-shadow: 0 4px 0 #1f9e7e, 0 0 24px -4px var(--cool); animation: plusOne 1.2s .55s var(--spring) both; }
@keyframes plusOne { 0% { transform: translateY(14px) scale(.4); opacity: 0; } 40% { transform: translateY(0) scale(1.12); opacity: 1; } 100% { transform: none; } }
.win-pitch { background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, var(--rim) border-box; border: 1.5px solid transparent; }
.win-pitch .vo-name { justify-content: center; } .win-pitch .vo-check { display: none; }
.bar { height: 14px; background: rgba(0,0,0,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.bar span { background: linear-gradient(90deg, var(--pop-deep), var(--pop)); animation-delay: .4s; }
.bar-row.win .bar span { background: linear-gradient(90deg, var(--gold-c), var(--gold-a)); box-shadow: 0 0 12px rgba(255,216,77,.6); }
.bar-name { display: flex; align-items: center; }
.scores li { animation: viewIn .4s var(--out) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); gap: 6px; }
.scores li .av { margin-right: 4px; }
.scores li.lead { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(255,216,77,.32), rgba(255,216,77,.08)); box-shadow: inset 0 0 0 1.5px rgba(255,216,77,.6), 0 0 26px -8px rgba(255,216,77,.6); }
.scores li.lead::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: sheen 3s 1.2s ease-in-out infinite; }
.spts { text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.potn { position: relative; overflow: hidden; background: linear-gradient(140deg, color-mix(in srgb, var(--pop) 38%, transparent), rgba(167,139,250,.22)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, linear-gradient(140deg, var(--gold-a), rgba(255,255,255,.1), var(--pop)) border-box; border: 2px solid transparent; box-shadow: 0 20px 40px -14px rgba(0,0,0,.6), 0 0 40px -12px color-mix(in srgb, var(--pop) 60%, transparent); animation: viewIn .6s .5s var(--out) both; }
.potn::before { content: "“"; position: absolute; left: 10px; top: -18px; font-size: 110px; font-weight: 900; color: rgba(255,255,255,.1); line-height: 1; }
/* --- sheets + toast --- */
.sheet { background: linear-gradient(180deg, color-mix(in srgb, var(--bg1) 92%, #fff), var(--bg0)); box-shadow: 0 -1px 0 rgba(255,255,255,.2) inset, 0 -16px 50px rgba(0,0,0,.55); }
.sheet-backdrop { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.toast { border-radius: 99px; padding: 12px 20px; box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.05); transition: transform .3s var(--spring), opacity .25s; }
/* --- safe areas: notch, Dynamic Island, home indicator, landscape --- */
.flash { padding-left: calc(var(--sal) + 22px); padding-right: calc(var(--sar) + 22px); }
.sheet { padding-left: calc(var(--sal) + 20px); padding-right: calc(var(--sar) + 20px); }
@media (orientation: landscape) and (max-height: 500px) { .view { padding-left: max(18px, var(--sal)); padding-right: max(18px, var(--sar)); } }
@media (max-height: 700px) { .av-xl { width: 48px; height: 48px; font-size: 24px; margin-bottom: 6px; } .rays { width: 200px; height: 200px; } }
/* --- reduced motion: keep the look, drop the movement --- */
@media (prefers-reduced-motion: reduce) {
.beam, .loader::before, .tb-rays, .rays, .grain, .tb-shock, .count-ring, .hp-ring, .spot { animation: none !important; }
.tb-shock, .count-ring, .hp-ring { display: none; }
body.shake .app, .timer-wrap.urgent, body.urgent #bg .vignette, .twist-slot.charging .twist-locked { animation: none !important; }
.view.leaving { display: none; }
}
.view.same { animation: none; }
.view.same .vote-opt, .view.same .tagline, .view.same .menu, .view.same .wordmark { animation: none; }
.potn, .btn, .twist-card, .plus-one { flex-shrink: 0; } /* overflow:hidden must not let flex squash them */
/* ===================== v003 layer ===================== */
/* --- haptic switch overlays (iOS): invisible covering each control; see haptics.js --- */
.hx { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; -webkit-appearance: switch; appearance: auto; opacity: 0; z-index: 3; cursor: inherit; border-radius: inherit; }
:disabled > .hx, html.hx-off .hx { pointer-events: none; }
/* --- home: hero + menu centred, pill/footer anchored at the bottom --- */
.view.home { gap: 0; justify-content: flex-start; padding-top: 4px; padding-bottom: calc(var(--sab) + 12px); }
.home-main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3.4vh, 34px); padding: 4px 0 12px; }
.home-main .hero { gap: clamp(6px, 1.4vh, 14px); }
.home-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.home-foot #install-slot { width: 100%; } .home-foot #install-slot:empty { display: none; }
.home-foot .hero-badge { animation: viewIn .6s .3s var(--out) both; }
.home-foot .foot { margin: 0; font-size: 12px; opacity: .7; }
/* --- voting: header / scrollable cards / anchored CTA --- */
.view.vote { gap: 8px; padding-bottom: 0; overflow: hidden; }
.vote-head { flex: none; display: flex; flex-direction: column; gap: 4px; }
.vote-head .screen-title { margin: 0; }
.vote-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; margin: 0 -8px; padding: 10px 8px 16px;
-webkit-mask-image: linear-gradient(transparent, #000 12px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(transparent, #000 12px, #000 calc(100% - 16px), transparent); }
.vote-list > :first-child { margin-top: auto; } .vote-list > :last-child { margin-bottom: auto; } /* centre when few, safe when scrolling */
.vote-opt { flex: 1 1 auto; max-height: 190px; min-height: min-content; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 14px 16px 15px; text-align: left; border-radius: 22px; }
.vote-list[data-n="2"] .vote-opt { max-height: 250px; } .vote-list[data-n="3"] .vote-opt { max-height: 210px; }
.vo-head { display: flex; align-items: center; gap: 0; min-width: 0; }
.vo-head .av { margin-right: 8px; }
.vo-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.vo-radio { flex: none; width: 26px; height: 26px; margin-left: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.32); display: grid; place-items: center; transition: background .18s, box-shadow .18s, transform .25s var(--spring); }
.vo-radio::after { content: "✓"; font-style: normal; font-size: 15px; font-weight: 900; color: #2a0b4a; transform: scale(0); transition: transform .25s var(--spring); }
.vo-product { font-size: 20px; font-weight: 900; line-height: 1.16; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.vo-product::first-letter { text-transform: uppercase; }
.vo-cust { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.vo-cust em { font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--muted)); margin-right: 4px; }
.vo-twist { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px 7px 7px; border-radius: 12px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.tw-kind { flex: none; padding: 3px 7px; border-radius: 8px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #22082f; background: var(--kc, #ffd54d); white-space: nowrap; margin-top: 1px; }
.tw-text { flex: 1; min-width: 0; }
.k-catch { --kc: #ffb347; } .k-secret { --kc: #c9a7ff; } .k-plot { --kc: #5cf2c8; } .k-feature { --kc: #7cc8ff; } .k-rule { --kc: #ff8fc8; }
.vote-opt.on { background: linear-gradient(rgba(255,227,110,.17), rgba(255,227,110,.06)) padding-box, linear-gradient(var(--base), var(--base)) padding-box, linear-gradient(140deg, var(--gold-a), var(--gold-c)) border-box; border: 2.5px solid transparent; box-shadow: 0 0 0 4px rgba(255,216,77,.12), 0 0 34px -6px rgba(255,216,77,.6), var(--shadow-lg); transform: none; }
.vote-opt.on .vo-radio { background: linear-gradient(140deg, var(--gold-a), var(--gold-c)); box-shadow: 0 0 14px rgba(255,216,77,.6); transform: scale(1.08); }
.vote-opt.on .vo-radio::after { transform: scale(1); }
.vote-list.has-pick .vote-opt:not(.on) { opacity: .58; filter: saturate(.75); }
.vote-list.has-pick .vote-opt:not(.on):active { opacity: .8; }
.vote-cta { flex: none; margin: 0 -18px; padding: 12px 18px calc(var(--sab) + 14px); background: color-mix(in srgb, var(--bg0) 78%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid rgba(255,255,255,.1); position: relative; z-index: 2; }
.cta-name { display: inline-block; max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.vote-list:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]) .vote-opt { padding: 11px 14px 12px; gap: 5px; }
.vote-list:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]) .vo-product { font-size: 17.5px; }
.win-pitch { text-align: left; gap: 7px; padding: 14px 16px; border-radius: 22px; }
.win-pitch .vo-radio { display: none; }
.twist-card.reveal .pc-label, .tb-label { color: var(--kc, var(--accent)); }
/* --- rotate-your-phone overlay: phones in landscape only (iPad landscape stays playable) --- */
.rotate { display: none; position: fixed; inset: 0; z-index: 200; place-items: center; align-content: center; gap: 8px; text-align: center; padding: 20px max(24px, var(--sar)) 20px max(24px, var(--sal)); background: radial-gradient(90% 120% at 50% 40%, var(--bg1), var(--bg0) 75%); }
.rot-phone { width: 44px; height: 74px; border-radius: 12px; box-shadow: inset 0 0 0 4px var(--ink), 0 0 30px color-mix(in srgb, var(--pop) 55%, transparent); position: relative; margin-bottom: 14px; animation: rotPhone 2.6s var(--out) infinite; }
.rot-phone i { position: absolute; left: 50%; top: 7px; width: 12px; height: 4px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); }
.rot-title { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.01em; }
.rot-sub { margin: 0; max-width: 34ch; font-size: 15px; font-weight: 600; color: var(--muted); line-height: 1.4; }
@keyframes rotPhone { 0%, 18% { transform: rotate(-90deg); } 48%, 82% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
.rotate { display: grid; }
html:not([data-device="ipad"]) :is(.app, .loader, .flash, .sheet-wrap, .toast) { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .rot-phone { animation: none; } }
/* --- short phones (iPhone SE 375x667 etc.) --- */
@media (max-height: 700px) {
.home-main { gap: 12px; }
.home-foot .foot { display: none; }
.vote-head .screen-title { font-size: 26px; }
.vote-head .eyebrow { font-size: 11px; }
.vote-opt { gap: 5px; padding: 11px 14px 12px; }
.vo-product { font-size: 17.5px; }
.vo-cust { font-size: 14px; } .vo-twist { font-size: 12.5px; padding: 6px 8px 6px 6px; }
.vote-list { gap: 10px; }
.vote-cta { padding-top: 10px; padding-bottom: calc(var(--sab) + 10px); }
}
/* iPad / tablets: roomier vote cards */
@media (min-width: 700px) and (min-height: 600px) {
.vote-opt { max-height: 230px; padding: 18px 22px; } .vo-product { font-size: 24px; } .vo-cust { font-size: 17px; } .vo-twist { font-size: 15px; }
.vote-cta { margin: 0; border-radius: 22px 22px 0 0; }
}
.home-foot .hero-badge { width: max-content; max-width: 100%; white-space: nowrap; letter-spacing: .14em; font-size: clamp(9.5px, 2.75vw, 10.5px); }
.vote-opt { animation-fill-mode: backwards; }
@media (min-height: 880px) and (max-width: 600px) {
.vote-list[data-n="2"] .vote-opt { max-height: 300px; } .vote-list[data-n="3"] .vote-opt { max-height: 228px; }
.vote-list[data-n="2"] .vo-product, .vote-list[data-n="3"] .vo-product { font-size: 22px; }
}
/* wide landscape tablets: ballots in two columns so 4–9 pitches fit without hunting */
@media (min-width: 900px) and (orientation: landscape) {
.view.vote { width: min(94vw, 980px); }
.vote-list:not([data-n="2"]) { display: grid; grid-template-columns: 1fr 1fr; align-content: safe center; }
.vote-list:not([data-n="2"]) > .vote-opt { margin: 0 !important; max-height: none; }
.vote-cta { width: min(100%, 560px); margin-left: auto; margin-right: auto; }
}
/* ===================== v004 polish layer ===================== */
/* --- results: winner burst lives fully inside its own box (no clipping by the scroller), soft radial fade, no hard edges --- */
.result .winner-burst, .final .trophy { --burst: 196px; width: 100%; height: var(--burst); margin: 0 auto calc(var(--burst) * -.24); flex: none; overflow: visible; pointer-events: none; }
.final .trophy { --burst: 248px; }
.winner-burst > span { font-size: 88px; line-height: 1; }
.final .trophy > span { font-size: 116px; line-height: 1; }
.result .rays, .final .rays { width: var(--burst); height: var(--burst); left: 50%; top: 0; margin-left: calc(var(--burst) / -2);
background: repeating-conic-gradient(from 0deg, rgba(255,227,110,.34) 0 9deg, transparent 9deg 24deg);
-webkit-mask: radial-gradient(closest-side, #000 22%, rgba(0,0,0,.55) 58%, transparent 100%); mask: radial-gradient(closest-side, #000 22%, rgba(0,0,0,.55) 58%, transparent 100%); }
.result .winner-burst::before, .final .trophy::before { content: ""; position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,216,77,.38), transparent); }
.result .eyebrow, .result .big-name, .final .eyebrow, .final .big-name { position: relative; }
@media (max-height: 700px) { .result .winner-burst { --burst: 160px; } .final .trophy { --burst: 200px; } .winner-burst > span { font-size: 72px; } .final .trophy > span { font-size: 92px; } }
/* --- results: pinned CTA gets a real backing so nothing shows through or below it --- */
.view.result, .view.final { padding-bottom: 0; }
.result .sticky-cta { margin: auto -18px 0; padding: 30px 18px calc(var(--sab) + 16px);
background: linear-gradient(180deg, color-mix(in srgb, var(--bg0) 0%, transparent) 0, color-mix(in srgb, var(--bg0) 86%, transparent) 26px, var(--bg0) 48px); }
.result > .card:last-of-type { margin-bottom: 4px; }
/* --- full-screen stamps / popups: always inside the viewport + safe areas, even mid-animation --- */
.flash { overflow: hidden; padding: calc(var(--sat) + 20px) calc(var(--sar) + 20px) calc(var(--sab) + 20px) calc(var(--sal) + 20px); }
.flash > * { max-width: 100%; }
.stamp { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: min(19vw, 112px); line-height: 1.02; letter-spacing: -.01em; white-space: nowrap;
border: max(7px, .085em) solid #fff; border-radius: .26em; padding: .06em .26em .02em; transform: rotate(-7deg); animation: stampIn .5s var(--spring) both; }
.stamp > span { display: block; }
.lock-stamp { box-sizing: border-box; max-width: 100%; font-size: min(10.4vw, 60px); white-space: nowrap; border-width: max(5px, .12em); padding: .1em .38em; animation: stampIn .42s var(--spring) both; }
@keyframes stampIn { 0% { transform: rotate(-7deg) scale(1.16); opacity: 0; filter: blur(6px); } 55% { transform: rotate(-7deg) scale(.95); opacity: 1; filter: none; } 100% { transform: rotate(-7deg) scale(1); opacity: 1; } }
.flash.timeup .stamp { box-shadow: 0 10px 0 rgba(0,0,0,.18), 0 0 60px rgba(255,255,255,.25); }
.twist-burst { box-sizing: border-box; width: 100%; max-width: min(540px, calc(100vw - var(--sal) - var(--sar) - 64px)); animation: slam .55s var(--spring) both; }
@keyframes slam { 0% { transform: scale(1.12) rotate(-3deg); opacity: 0; filter: blur(8px); } 55% { transform: scale(.96) rotate(.5deg); opacity: 1; filter: none; } 100% { transform: none; } }
.tb-label { font-size: clamp(26px, 8.6vw, 50px); overflow-wrap: anywhere; }
.tb-text { font-size: clamp(26px, 8vw, 48px); overflow-wrap: anywhere; }
.count-num { font-size: min(44vw, 230px); line-height: 1; }
.count-num.go { font-size: min(30vw, 180px); }
@keyframes countIn { 0% { transform: scale(1.22); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 80% { transform: scale(.92); opacity: 1; } 100% { transform: scale(.7); opacity: 0; } }
.count-ring { width: min(56vw, 280px); }
@keyframes countRing { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.toast { box-sizing: border-box; max-width: calc(100vw - var(--sal) - var(--sar) - 32px); width: max-content; text-align: center; white-space: normal; text-wrap: balance; line-height: 1.3; }
/* --- rotate overlay copy: only mention "paused" while a pitch timer is actually running --- */
.rot-live { display: none; }
body.timer-live .rot-live { display: inline; } body.timer-live .rot-idle { display: none; }
/* --- avatars: default "Player N" names show their number --- */
.av-num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* --- voting: header hierarchy --- */
.vote-head { align-items: center; gap: 6px; padding-top: 2px; }
.vh-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 14px 4px 4px; border-radius: 99px; font-size: 11.5px; letter-spacing: .16em; line-height: 1;
color: color-mix(in srgb, var(--accent) 60%, var(--muted)); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.vh-pill .av { margin: 0; width: 24px; height: 24px; font-size: 12px; }
.vh-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 1px; }
.vh-text b { color: var(--ink); font-weight: 900; }
.vh-dot { margin: 0 .45em; opacity: .6; }
.vote-head .screen-title { font-size: clamp(27px, 7.6vw, 34px); line-height: 1.08; }
/* --- voting: cards — block layout (WebKit-safe), check pinned top-right, tight rhythm --- */
.vote-list { gap: 10px; }
.vote-opt { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; flex: none; max-height: none; min-height: 0; display: block; position: relative; overflow: hidden;
padding: 14px 16px 14px; border-radius: 22px; text-align: left; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
transition: transform .22s var(--spring), opacity .2s ease, filter .2s ease, box-shadow .2s ease; }
.vote-opt > * { display: block; }
.vote-opt > .vo-head { display: flex; align-items: center; min-height: 26px; padding-right: 40px; }
.vo-head .av { margin: 0 8px 0 0; }
.vo-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; letter-spacing: .16em; line-height: 1.2; }
.vote-opt > .vo-radio { position: absolute; top: 13px; right: 14px; width: 28px; height: 28px; margin: 0; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(255,255,255,.34); background: rgba(255,255,255,.04); z-index: 1; pointer-events: none; }
.vo-radio::after { font-size: 15px; line-height: 1; }
.vo-product { margin-top: 7px; font-size: 19px; line-height: 1.18; }
.vo-cust { margin-top: 3px; font-size: 14.5px; line-height: 1.32; }
.vo-cust em { margin-right: 5px; }
.vote-opt > .vo-twist { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 9px; margin-top: 10px; padding: 7px 10px 8px 7px; font-size: 13.5px; line-height: 1.32; }
.tw-kind { align-self: baseline; margin: 0; padding: 3px 7px 2px; font-size: 10px; line-height: 1.3; display: inline-flex; align-items: baseline; gap: 4px; }
.tw-text { display: block; }
/* press feedback + selection */
.vote-opt:active { transform: scale(.972); }
.vote-opt.on { transform: none; }
.vote-opt.on:active { transform: scale(.985); }
.vote-opt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px rgba(255,216,77,.9), 0 0 0 0 rgba(255,216,77,.5); }
.vote-opt.on::before { animation: pickPulse .55s var(--out); }
@keyframes pickPulse { 0% { opacity: 1; box-shadow: inset 0 0 0 3px rgba(255,216,77,.95), inset 0 0 40px rgba(255,216,77,.35); } 100% { opacity: 0; box-shadow: inset 0 0 0 1px rgba(255,216,77,0), inset 0 0 0 rgba(255,216,77,0); } }
.vote-opt.on .vo-radio { transform: none; animation: radioPop .42s var(--spring); }
@keyframes radioPop { 0% { transform: scale(.55); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.vote-opt.on .vo-name { color: var(--gold-b, var(--accent)); }
/* unselected after a pick: gentle de-emphasis that stays readable */
.vote-list.has-pick .vote-opt:not(.on) { opacity: .84; filter: saturate(.85); }
.vote-list.has-pick .vote-opt:not(.on) .vo-product { color: color-mix(in srgb, var(--ink) 86%, var(--muted)); }
.vote-list.has-pick .vote-opt:not(.on):active { opacity: .95; }
.win-pitch .vo-head { display: flex; align-items: center; }
/* density tiers */
.vote-list[data-n="2"] .vote-opt, .vote-list[data-n="3"] .vote-opt { padding: 16px 18px 16px; }
.vote-list[data-n="2"] .vo-product, .vote-list[data-n="3"] .vo-product { font-size: 21px; }
.vote-list[data-n="2"] .vo-radio, .vote-list[data-n="3"] .vo-radio { top: 15px; right: 16px; }
.vote-list:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]) .vote-opt { padding: 11px 14px 12px; }
.vote-list:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]) .vo-radio { top: 10px; right: 12px; width: 26px; height: 26px; }
.vote-list:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]) .vo-product { margin-top: 5px; font-size: 17px; }
.vote-list:not([data-n="2"]):not([data-n="3"]):not([data-n="4"]) .vo-twist { margin-top: 8px; font-size: 12.5px; }
@media (max-height: 700px) {
.vh-pill { font-size: 10.5px; } .vote-head .screen-title { font-size: 25px; }
.vote-opt { padding: 11px 14px 12px; } .vo-radio { top: 10px !important; right: 12px !important; }
.vo-product { margin-top: 5px; font-size: 17px !important; } .vo-cust { font-size: 13.5px; } .vote-opt > .vo-twist { margin-top: 8px; font-size: 12.5px; }
}
@media (min-width: 700px) and (min-height: 600px) { .vote-opt { padding: 18px 22px; } .vote-opt > .vo-radio { top: 17px; right: 20px; } .vo-product { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .vote-opt.on::before, .vote-opt.on .vo-radio { animation: none; } .stamp, .lock-stamp, .twist-burst { animation-duration: .01s; } }
.lock-stamp { font-size: min(8.6vw, 52px); }
.toast { transform: translate(-50%, 14px) scale(.96); }
.toast.show { transform: translate(-50%, 0); }
/* v004: 2–3 options grow toward a target height (no empty void) but never below their content (no clipping); an explicit
one-column grid keeps content centred and full-width on iOS Safari; radio stays absolutely pinned top-right */
.vote-list[data-n="2"] > .vote-opt, .vote-list[data-n="3"] > .vote-opt { flex: 0 1 var(--card-h); min-height: -webkit-min-content; min-height: min-content; max-height: none; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: stretch; gap: 0; }
.vote-list[data-n="2"] { --card-h: 250px; } .vote-list[data-n="3"] { --card-h: 210px; }
@media (min-height: 880px) and (max-width: 600px) { .vote-list[data-n="2"] { --card-h: 300px; } .vote-list[data-n="3"] { --card-h: 228px; } }
@media (min-width: 700px) and (min-height: 600px) { .vote-list[data-n="2"], .vote-list[data-n="3"] { --card-h: 230px; } }
@media (max-height: 700px) { .vote-list[data-n="2"] { --card-h: 200px; } .vote-list[data-n="3"] { --card-h: 150px; } }
@media (min-width: 900px) and (orientation: landscape) { .vote-list[data-n="3"] > .vote-opt, .vote-list[data-n="4"] > .vote-opt { min-height: 212px; } }
/* ===================== v005 — real-iPhone pass ===================== */
/* 1) Full height: the page canvas itself carries the backdrop, so if iOS (standalone or collapsed toolbar)
ever reports a short viewport there is no flat band — and the fixed layers are sized to the LARGE viewport. */
/* (v007: the v005 -webkit-fill-available / max(100%,100dvh) sizing was replaced by the Tower Takeout root chain at the end of this file) */
canvas#confetti { max-width: 100vw; }
/* 2) No sideways movement anywhere: nothing may create horizontal scroll, and scrollers only pan vertically. */
html, body { overflow-x: hidden; max-width: 100%; overscroll-behavior: none; }
@supports (overflow: clip) { html, body, .screen-host { overflow-x: clip; } }
.screen-host { overflow-x: hidden; }
.view { overflow-x: hidden; max-width: 100%; }
.view.scroll { overflow-x: hidden; overscroll-behavior-x: none; overscroll-behavior-y: contain; touch-action: pan-y; }
.view > *, .card, .deck-card, .toggle-row, .sb-row, .scoreboard, .winner-burst, .podium, .sticky-cta { min-width: 0; max-width: 100%; }
.result .sticky-cta, .final .sticky-cta { max-width: none; }
.winner-burst, .trophy-wrap, .final-hero { overflow-x: clip; }
.view h1, .view h2, .view h3, .big-name { overflow-wrap: anywhere; }
/* 3) Shared header for menu screens */
.scr-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 6px; }
.scr-head .screen-title { margin: 0; }
.scr-head .sub { max-width: 32ch; }
.set-label { display: flex; align-items: center; gap: 8px; margin: 14px 6px -2px; font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
color: color-mix(in srgb, var(--accent) 50%, var(--muted)); }
.set-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.18), transparent); }
.set-label span { font-size: 11px; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.1); color: var(--muted); }
/* 4) Decks */
.view.decks, .view.settings { gap: 10px; }
.deck-list { display: flex; flex-direction: column; gap: 10px; }
.deck-card { display: block; width: 100%; padding: 0; border: 1.5px solid transparent; border-radius: 22px; text-align: left; color: var(--ink); position: relative; overflow: hidden; overflow: clip;
background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 24%, var(--base)) 0%, var(--base) 58%) padding-box,
linear-gradient(150deg, color-mix(in srgb, var(--accent) 70%, #fff) 0%, rgba(255,255,255,.06) 45%, color-mix(in srgb, var(--accent) 30%, transparent) 100%) border-box;
box-shadow: var(--shadow-lg), 0 12px 32px -18px var(--accent); }
.deck-card::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent); }
.dc-in { display: grid; grid-template-columns: 64px minmax(0, 1fr) 14px; align-items: center; gap: 14px; padding: 14px 14px 14px 14px; position: relative; z-index: 1; }
.dc-art { width: 64px; height: 64px; border-radius: 19px; display: grid; place-items: center; position: relative;
background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent) 85%, #fff) 0%, var(--accent) 38%, color-mix(in srgb, var(--accent) 55%, #000) 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -6px 14px rgba(0,0,0,.22) inset, 0 10px 22px -8px var(--accent); }
.dc-art::before { content: ""; position: absolute; inset: 4px 8px auto; height: 40%; border-radius: 14px 14px 40% 40%; background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0)); }
.dc-art .dc-ico { font-size: 34px; width: auto; line-height: 1; position: relative; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.dc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dc-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dc-title b { font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.dc-tag { color: var(--muted) !important; font-weight: 600; font-size: 13px; line-height: 1.35; }
.dc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.dc-count { font-size: 12px !important; font-weight: 800 !important; color: var(--ink) !important; opacity: .75; letter-spacing: .02em; }
.dc-count::before { content: "🃏 "; }
.dc-chev { font-size: 26px; font-weight: 700; color: rgba(255,255,255,.4); line-height: 1; text-align: right; }
.deck-card .badge { font-size: 10px; letter-spacing: .12em; padding: 5px 9px; border-radius: 99px; white-space: nowrap; }
.deck-card .badge.ok { background: color-mix(in srgb, var(--cool) 20%, transparent); color: var(--cool); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cool) 45%, transparent); }
.deck-card .badge.soon { background: rgba(0,0,0,.25); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.deck-card .badge.buy { background: linear-gradient(180deg, var(--gold-a), var(--gold-b) 45%, var(--gold-c)); color: var(--accent-ink); font-size: 12px; }
.deck-card .dc-title .badge.adult { font-size: 9.5px; padding: 3px 7px; background: #ff4d6d; color: #fff; }
.deck-list.mine .deck-card { box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 16px 40px -14px var(--accent); }
.deck-list.mine .dc-in { grid-template-columns: 76px minmax(0, 1fr) 14px; padding: 16px; }
.deck-list.mine .dc-art { width: 76px; height: 76px; border-radius: 23px; }
.deck-list.mine .dc-art .dc-ico { font-size: 42px; }
.deck-list.mine .dc-title b { font-size: 20px; }
.deck-card.st-coming-soon .dc-art { filter: saturate(.75); }
.deck-card:active { transform: scale(.97); }
@media (hover: hover) { .deck-card:hover { transform: translateY(-2px); } }
/* 5) Settings — grouped lists, icon tiles, iOS-grade switches, segmented control, theme tiles */
.set-group { padding: 4px 14px; }
.set-group.pad { padding: 14px; }
.settings .toggle-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--ink); }
.settings .toggle-row:last-child { border-bottom: 0; }
.set-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; line-height: 1;
background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 10px -4px rgba(0,0,0,.5); }
.toggle-row[data-k="sound"] .set-ico { background: linear-gradient(160deg, #ff7ad9, #b8268f); }
.toggle-row[data-k="music"] .set-ico { background: linear-gradient(160deg, #a78bfa, #5b2bb5); }
.toggle-row[data-k="haptics"] .set-ico { background: linear-gradient(160deg, #6ff7d4, #12a37f); }
.toggle-row[data-k="familyMode"] .set-ico { background: linear-gradient(160deg, #7cc8ff, #2d6fd1); }
.toggle-row.link .set-ico { background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); }
.toggle-row.danger b { color: #ff9db2; }
.tr-txt { min-width: 0; }
.settings .toggle-row b { font-size: 16.5px; font-weight: 800; }
.settings .toggle-row small { font-size: 12.5px; line-height: 1.35; }
.chev { font-size: 24px; color: rgba(255,255,255,.4); font-weight: 700; line-height: 1; }
.settings .switch { width: 51px; height: 31px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.settings .switch i { width: 27px; height: 27px; top: 2px; left: 2px; transition: transform .25s var(--spring); box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 0 .5px rgba(0,0,0,.05); }
.settings .switch.on { background: linear-gradient(180deg, #74ffd9, #22c99c); box-shadow: 0 0 18px -4px var(--cool); }
.settings .switch.on i { transform: translateX(20px); }
.set-caption { margin: 2px 12px 0; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--muted); opacity: .78; }
.set-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 12px; }
.set-sub b { font-size: 16.5px; font-weight: 800; } .set-sub small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.segctl { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px; border-radius: 16px;
background: rgba(0,0,0,.28); box-shadow: inset 0 1px 3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08); }
.segctl-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 12px; transform: translateX(calc(100% * var(--k)));
background: linear-gradient(180deg, var(--gold-a), var(--gold-b) 45%, var(--gold-c)); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 16px -6px var(--gold-c); transition: transform .3s var(--spring); }
.segctl-btn { position: relative; z-index: 1; border: 0; background: none; padding: 10px 0; font-size: 17px; font-weight: 900; color: var(--muted); border-radius: 12px; }
.segctl-btn small { font-size: 11px; font-weight: 800; margin-left: 1px; opacity: .8; }
.segctl-btn.on { color: var(--accent-ink); }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.theme-tile { border: 1.5px solid transparent; border-radius: 18px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink);
background: linear-gradient(var(--base), var(--base)) padding-box, var(--rim) border-box; box-shadow: var(--shadow-lg); transition: transform .12s var(--spring), box-shadow .18s; }
.tt-emo { font-size: 28px; line-height: 1; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
.tt-name { font-size: 12.5px; font-weight: 800; text-align: center; line-height: 1.2; }
.theme-tile.on { background: linear-gradient(color-mix(in srgb, var(--accent) 16%, var(--base)), color-mix(in srgb, var(--accent) 6%, var(--base))) padding-box, linear-gradient(160deg, var(--gold-a), var(--gold-c)) border-box;
box-shadow: var(--shadow-lg), 0 0 24px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.theme-tile:active, .segctl-btn:active, .settings .toggle-row:active { transform: scale(.97); }
@media (max-width: 340px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dc-in { grid-template-columns: 52px minmax(0, 1fr) 12px; gap: 11px; } .dc-art { width: 52px; height: 52px; border-radius: 16px; } .dc-art .dc-ico { font-size: 28px; }
.deck-list.mine .dc-in { grid-template-columns: 60px minmax(0, 1fr) 12px; } .deck-list.mine .dc-art { width: 60px; height: 60px; } .deck-list.mine .dc-art .dc-ico { font-size: 34px; } }
/* 6) One stamp family: TIME! and VOTE LOCKED share the exact slam (stampIn), rotation, border, glow, timing.
Only the ink colour differs (hot pink for time, cool mint for a locked vote). */
.flash.stamp-flash { background: rgba(10, 2, 20, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn .15s ease-out; padding: max(16px, var(--sat)) max(16px, var(--sar)) max(16px, var(--sab)) max(16px, var(--sal)); overflow: hidden; }
.flash.timeup.stamp-flash { background: radial-gradient(circle at 50% 50%, rgba(120, 8, 48, .62), rgba(10, 2, 20, .8) 70%); }
.pp-stamp { --ink-c: var(--cool); box-sizing: border-box; display: inline-block; max-width: 100%; white-space: nowrap; font-weight: 900; line-height: 1.05; letter-spacing: .01em;
font-size: min(8.6vw, 52px); color: var(--ink-c); border: .12em solid var(--ink-c); border-radius: .42em; padding: .1em .38em;
transform: rotate(-7deg); text-shadow: 0 4px 0 rgba(0,0,0,.3); box-shadow: 0 0 40px -6px var(--ink-c), inset 0 0 30px -10px var(--ink-c);
animation: stampIn .42s var(--spring) both; }
.pp-stamp.hot { --ink-c: #ff6b9a; font-size: min(15vw, 92px); }
.flash.timeup .pp-stamp { box-shadow: 0 0 40px -6px var(--ink-c), inset 0 0 30px -10px var(--ink-c); }
@media (orientation: landscape) and (max-height: 500px) { .pp-stamp { font-size: min(6vw, 13vh, 44px); } .pp-stamp.hot { font-size: min(10vw, 24vh, 80px); } }
@media (prefers-reduced-motion: reduce) { .pp-stamp { animation-duration: .01s; } }
/* v005: equal-width chip rows can shrink on 320px screens instead of pushing the card sideways */
.chips:not(.wrap) > .chip { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
.card > *, .chips { min-width: 0; }
.card-head { flex-wrap: wrap; gap: 2px 8px; }
.bar-name, .sname, .vo-name, .vh-text, .cta-name { overflow: hidden; overflow: clip; }
/* v005: non-scrolling views can't be panned even programmatically (sub-pixel overflow from animating headlines) */
@supports (overflow: clip) { .view:not(.scroll) { overflow: clip; } }
/* ===================== v006 ===================== */
/* 1) Bottom band. Any pixel iOS shows outside our layout viewport is the root canvas colour: make it the colour the
scene already has at its bottom edge (was near-black --bg0), so any strip blends with the scene. */
:root { --bg-edge: #2a0c3d; }
/* 2) One rubber stamp for TIME! and VOTE LOCKED (shared .pp-slam/.pp-stamp; only ink colour + text differ).
0–42%: falls from 2.8x (mostly transparent while oversized, blurred, tilted -16deg) accelerating into the paper;
42% (176ms) = IMPACT: squash, ink/dust burst, shake, thud + haptic (JS fires at STAMP_IMPACT); then overshoot + settle. */
.pp-slam { --ink-c: var(--cool); position: relative; display: grid; place-items: center; max-width: 100%;
filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ink-c) 55%, transparent)) drop-shadow(0 5px 0 rgba(0, 0, 0, .35));
animation: ppShake .3s linear .176s both; }
.pp-slam.hot { --ink-c: #ff6b9a; }
.pp-slam > .pp-stamp { grid-area: 1 / 1; position: relative; z-index: 1; color: var(--ink-c); border-color: var(--ink-c); box-shadow: none;
text-shadow: none; background: color-mix(in srgb, var(--ink-c) 9%, transparent);
-webkit-mask-image: url(../icons/stamp-grain.png); mask-image: url(../icons/stamp-grain.png); -webkit-mask-size: 6.5em; mask-size: 6.5em;
transform-origin: 50% 60%; animation: ppSlam .42s linear both; }
.pp-slam > .pp-stamp.hot { font-size: min(13.5vw, 84px); }
@keyframes ppSlam {
0% { transform: rotate(-16deg) scale(2.8); opacity: 0; filter: blur(5px); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
25% { transform: rotate(-12deg) scale(1.9); opacity: .15; filter: blur(3px); animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
36% { transform: rotate(-8.5deg) scale(1.2); opacity: .45; filter: blur(1px); animation-timing-function: linear; }
42% { transform: rotate(-7deg) scale(1.08, .84); opacity: 1; filter: none; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
56% { transform: rotate(-7deg) scale(.95, 1.06); animation-timing-function: ease-in-out; }
72% { transform: rotate(-7deg) scale(1.03, .98); animation-timing-function: ease-in-out; }
86% { transform: rotate(-7deg) scale(.99, 1.01); }
100% { transform: rotate(-7deg) scale(1); opacity: 1; filter: none; }
}
.pp-ink { grid-area: 1 / 1; position: relative; width: 100%; height: 100%; pointer-events: none; }
.pp-ink i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--ink-c);
opacity: 0; animation: ppInk .56s cubic-bezier(.12, .8, .3, 1) .176s forwards; }
.pp-ink i:nth-child(3n) { width: 7px; height: 7px; margin: -3.5px; border-radius: 40% 60% 55% 45%; }
.pp-ink i:nth-child(4n) { background: rgba(255, 255, 255, .8); }
.pp-ring { position: absolute; inset: 0; border: 3px solid var(--ink-c); border-radius: .42em; font-size: min(8.6vw, 52px); transform: rotate(-7deg); opacity: 0;
animation: ppRing .5s cubic-bezier(.1, .7, .3, 1) .176s forwards; }
@keyframes ppInk { 0% { transform: translate(0, 0) scale(var(--s)); opacity: .95; } 100% { transform: translate(var(--dx), var(--dy)) scale(.15); opacity: 0; } }
@keyframes ppRing { 0% { transform: rotate(-7deg) scale(.96); opacity: .7; } 100% { transform: rotate(-7deg) scale(1.22, 1.32); opacity: 0; } }
@keyframes ppShake { 0% { transform: translate(0, 0); } 15% { transform: translate(-5px, 4px); } 30% { transform: translate(5px, -3px); } 45% { transform: translate(-3px, 2px); }
60% { transform: translate(2px, -1px); } 80% { transform: translate(-1px, 1px); } 100% { transform: none; } }
@media (orientation: landscape) and (max-height: 500px) { .pp-slam > .pp-stamp.hot { font-size: min(10vw, 24vh, 80px); } }
@media (prefers-reduced-motion: reduce) { .pp-slam, .pp-slam > .pp-stamp, .pp-ink i, .pp-ring { animation-duration: .01s; animation-delay: 0s; } }
/* 3) Scroll room + calmer press states on scrolling lists (the tap-vs-scroll guard lives in main.js) */
html, body, button, a, .deck-card, .vote-opt, .toggle-row, .theme-tile { -webkit-tap-highlight-color: transparent; }
/* (v007: the v006 +56px / ::after bottom scroll room was removed — see the v007 gutter block at the end) */
.view.scroll .deck-card:active, .view.scroll .toggle-row:active, .view.scroll .chip:active { transition-delay: 90ms; }
.hx { touch-action: pan-y; }
/* 4) Pitching / prompt breathing room: smaller ring on short screens, even rhythm ring → card → twist → button,
button anchored above the home indicator, clearer label/body hierarchy. */
.view.pitching, .view.prompt { gap: clamp(12px, 2.4vh, 24px); padding-bottom: calc(var(--sab) + 16px); }
.pitching .timer-wrap { width: min(46vw, 27vh, 210px); margin-top: auto; }
.pitching .twist-slot { margin-bottom: auto; }
.pitching .timer-wrap { container-type: inline-size; } .pitching .timer-num { font-size: 42cqw; }
.pitching .pitch-card { padding: clamp(14px, 2.2vh, 20px) 18px; }
.pitching .pc-label, .prompt .pc-label { font-size: 11px; letter-spacing: .22em; opacity: .85; }
.pitching .pc-text.sm { font-size: clamp(20px, 5.9vw, 28px); line-height: 1.14; margin: 4px 0 8px; }
.pitching .pc-text.sm.cust { margin-bottom: 0; }
.pitching .twist-slot { min-height: 0; flex: none; }
.pitching .twist-locked { height: clamp(58px, 9vh, 80px); min-height: 0; display: flex; gap: 10px; justify-content: center; align-items: center; font-size: 15px; letter-spacing: .08em; }
.pitching .twist-locked span { font-size: 20px; }
.pitching .bottom-cta, .prompt .bottom-cta { margin-top: auto; padding: 6px 0 0; }
@media (max-height: 700px) {
.pitching .timer-wrap { width: min(34vw, 22vh, 150px); }
.view.pitching, .view.prompt { gap: 16px; padding-top: 4px; }
.pitching .pc-text.sm { font-size: clamp(19px, 5.4vw, 23px); margin-bottom: 6px; }
.prompt .pc-text { font-size: clamp(24px, 7vw, 30px); } .prompt .prompt-card { padding: 18px 18px; }
.pitching .twist-locked { height: 54px; }
}
/* ===================== v007 — fit the iPhone screen the way Tower Takeout does ===================== */
/* Copied from Tower Takeout versions/v2.3.3/css/style.css lines 9-25 and Blink & Seek v007/app/style.css lines 536-561:
root chain 100% -> 100dvh -> (Home-Screen app) 100lvh; body and EVERY full-screen layer top:0 + bottom:auto +
height:var(--app-h) (set by __ppFit in ). No full-screen layer is anchored to the (possibly short) viewport bottom,
so iOS paints our layers - not a sampled flat colour - down to the bottom of the glass. */
:root { --app-h: 100dvh; --dead-b: 0px; --sab-env: env(safe-area-inset-bottom, 0px); --sab: max(var(--sab-env), var(--dead-b)); }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg-edge); background-color: var(--bg-edge); }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
@media (display-mode: standalone) { html, body { height: 100lvh; } }
@media (display-mode: fullscreen) { html, body { height: 100lvh; } }
html.standalone { height: 100lvh; }
body { position: fixed; left: 0; right: 0; top: 0; bottom: auto; height: var(--app-h); min-height: 0; }
.app, .loader, .flash, .sheet-wrap, .rotate, #confetti { top: 0 !important; bottom: auto !important; height: var(--app-h); }
#bg { top: 0; bottom: auto; height: calc(var(--app-h) + 160px); }
#bg .stage-floor { bottom: calc(-18vh + 160px); }
/* v007 — Decks / Settings: a non-clickable swipe gutter on BOTH sides of the button column (Michael: "more scroll room on
the left and right sides of the clickable area, not beneath it"). The view itself is the scroller, so a finger on the
gutter scrolls without touching a button. 18px view padding + --gut => ~32px each side at 390pt (31.5 @375, 33.5 @430). */
.view.decks, .view.settings { --gut: clamp(10px, 3.6vw, 22px); padding-bottom: calc(var(--sab) + 20px); }
.view.decks .deck-list, .view.settings .set-group, .view.settings .theme-grid { margin-left: var(--gut); margin-right: var(--gut); }
.view.decks .set-label, .view.settings .set-label { margin-left: calc(var(--gut) + 6px); margin-right: calc(var(--gut) + 6px); }
.view.settings .set-caption { margin-left: calc(var(--gut) + 12px); margin-right: calc(var(--gut) + 12px); }
.view.decks .foot, .view.settings .foot { margin-bottom: 0; }
/* ===================== v007 — countdown polish (same design: ring + big centred number) ===================== */
@property --cr-p { syntax: ""; inherits: false; initial-value: 100%; }
.flash.countdown { --cc: var(--accent); --cc-deep: var(--accent-deep); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cc) 14%, rgba(40,8,64,.8)) 0%, rgba(26,5,44,.86) 45%, rgba(8,2,16,.94) 100%); }
.flash.countdown[data-n="2"] { --cc: color-mix(in srgb, var(--accent) 45%, #ff9a3c); --cc-deep: #c96a1c; }
.flash.countdown[data-n="1"] { --cc: #ff6b8b; --cc-deep: #b8264a; }
.flash.countdown[data-n="GO"] { --cc: var(--cool); --cc-deep: #1f9e7e; }
.count-ring { border: 0; border-radius: 50%; width: min(56vw, 280px); aspect-ratio: 1; position: absolute; animation: crIn .7s cubic-bezier(.2,.9,.3,1.15) both;
box-shadow: 0 0 46px -8px color-mix(in srgb, var(--cc) 70%, transparent), inset 0 0 36px -14px color-mix(in srgb, var(--cc) 60%, transparent); }
.count-ring > i { position: absolute; inset: 0; border-radius: 50%; --w: 9px;
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - .5px), #000 calc(100% - var(--w))); mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - .5px), #000 calc(100% - var(--w))); }
.cr-track { background: rgba(255,255,255,.1); }
.cr-arc { background: conic-gradient(from 0deg, color-mix(in srgb, var(--cc) 70%, #fff) 0, var(--cc) var(--cr-p), transparent var(--cr-p)); animation: crDrain .7s linear both; }
.count-ring.go .cr-arc { animation: none; }
.flash.countdown[data-n="1"] .count-ring > i { --w: 11px; }
.flash.countdown[data-n="1"] .count-ring { animation: crIn .7s cubic-bezier(.2,.9,.3,1.15) both, crPulse .35s ease-out .05s; }
@keyframes crIn { 0% { transform: scale(.82); opacity: 0; } 22% { transform: scale(1.02); opacity: 1; } 34% { transform: scale(1); } 82% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.14); opacity: 0; } }
@keyframes crDrain { 0%, 12% { --cr-p: 100%; } 100% { --cr-p: 0%; } }
@keyframes crPulse { 0% { filter: brightness(1.6); } 100% { filter: none; } }
.count-num { position: relative; color: var(--cc); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
text-shadow: 0 2px 0 color-mix(in srgb, var(--cc) 55%, #fff), 0 8px 0 var(--cc-deep), 0 9px 0 color-mix(in srgb, var(--cc-deep) 60%, #000), 0 18px 34px rgba(0,0,0,.55), 0 0 60px color-mix(in srgb, var(--cc) 45%, transparent);
animation: countIn .7s cubic-bezier(.2,.9,.3,1) both; }
.count-num.go { color: var(--cc); }
@keyframes countIn { 0% { transform: scale(1.34); opacity: 0; filter: blur(6px); } 18% { transform: scale(.95); opacity: 1; filter: none; } 30% { transform: scale(1.02); } 40% { transform: scale(1); }
82% { transform: scale(.97); opacity: 1; } 100% { transform: scale(.78); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .count-ring { display: block !important; animation: none !important; } .cr-arc { animation: none !important; } .count-num { animation-duration: .01s; } }
/* pitch timer: same ring + number, cleaner glow, springier per-second tick, amber "low" stage before the red last-5 */
.timer-wrap { --tc: var(--accent); }
.timer-wrap::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; z-index: -1; box-shadow: 0 0 44px -6px color-mix(in srgb, var(--tc) 55%, transparent); transition: box-shadow .4s; }
.ring-fg { transition: stroke .35s, filter .35s; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tc) 65%, transparent)); }
.timer-num.bump { animation: tickPop .34s cubic-bezier(.2,.9,.3,1) both; }
@keyframes tickPop { 0% { transform: scale(1.16); opacity: .55; } 45% { transform: scale(.97); opacity: 1; } 100% { transform: scale(1); } }
.timer-wrap.low { --tc: #ffb347; } .timer-wrap.low .ring-fg { stroke: #ffb347; } .timer-wrap.low .timer-num { color: #ffe1b0; }
.timer-wrap.urgent { --tc: #ff4d6d; }
.timer-wrap.urgent .timer-num { animation: tickPop .34s cubic-bezier(.2,.9,.3,1) both, shakeX .3s; }
@media (prefers-reduced-motion: reduce) { .timer-num.bump, .timer-wrap.urgent .timer-num { animation: none; } }
.flash.countdown[data-n="GO"] .count-ring { width: min(66vw, 320px); } /* GO! is wider than a digit: give it the same breathing room inside the ring */
/* ===== v008 polish pass (light, low-risk) ===== */
/* vote dock: full-bleed like the results dock, so the CTA lines up with the cards and the blur backing reaches both edges */
.view > .vote-cta { max-width: none; }
/* toast: rise above pinned CTA docks instead of covering their buttons */
body:has(.view.vote:not(.leaving)) .toast { bottom: calc(var(--sab) + 96px); }
body:has(.view.result:not(.leaving)) .toast { bottom: calc(var(--sab) + 96px); }
body:has(.view.final:not(.leaving)) .toast { bottom: calc(var(--sab) + 150px); }
/* tiny chips: nudge 9.5–10px labels up to a readable minimum */
.deck-card .badge, .badge { font-size: 10.5px; }
.deck-card .dc-title .badge.adult { font-size: 10px; }
.tw-kind { font-size: 10.5px; }
/* =====================================================================
v009 — ONE BUTTON SYSTEM
primary 52px · secondary / ghost / danger 46px · one radius · one type style
width capped + centred (no edge-to-edge slabs) · one depth model (4px lip + soft drop)
===================================================================== */
:root { --btn-r: 16px; --btn-h1: 52px; --btn-h2: 46px; --btn-max: 300px; --btn-gap: 12px; --btn-lip: 4px; --btn-drop: 0 12px 22px -10px rgba(0,0,0,.55); }
.btn, .btn.btn-xl, .btn.btn-lg, .btn.btn-block {
display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
width: 100%; max-width: var(--btn-max); margin-left: auto; margin-right: auto;
min-height: var(--btn-h2); padding: 0 24px; border-radius: var(--btn-r);
font-size: 15px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; line-height: 1.1; white-space: nowrap; }
.btn.btn-primary { min-height: var(--btn-h1); font-size: 16px; }
.btn::before { left: 10%; right: 10%; top: 2px; height: 44%; border-radius: 12px 12px 40% 40% / 12px 12px 10px 10px; opacity: .55; }
.btn small { display: inline; margin: 0 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: none; opacity: .8; }
.btn small::before { content: "· "; }
/* depth: every solid button = 4px lip in its own deep tone + the same soft drop */
.btn-primary { --lip: var(--gold-c); } [data-theme="spooky"] .btn-primary { --lip: var(--accent-deep); }
.btn-secondary { --lip: var(--pop-deep); }
.btn-danger { --lip: #a3203a; background: linear-gradient(180deg, #ff7088, #ff4d6d 55%, #f23a5c); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.btn.btn-primary, .btn.btn-secondary, .btn.btn-danger { box-shadow: 0 var(--btn-lip) 0 var(--lip), var(--btn-drop); }
.btn.btn-primary:not(:disabled):active, .btn.btn-secondary:not(:disabled):active, .btn.btn-danger:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lip), 0 4px 10px -4px rgba(0,0,0,.5); filter: brightness(1.04); }
.btn.btn-ghost { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.12); color: var(--ink); }
.btn.btn-ghost:not(:disabled):active { transform: scale(.97); }
.btn.btn-small { width: auto; max-width: none; min-height: 34px; padding: 0 14px; font-size: 13px; border-radius: 12px; margin: 0; --lip: var(--gold-c); box-shadow: 0 3px 0 var(--lip); }
.btn.btn-primary.btn-xl::after { animation-duration: 4.8s; }
/* stacks: same gap everywhere */
.sheet-actions, .final-actions, .menu { display: flex; flex-direction: column; gap: var(--btn-gap); width: 100%; max-width: var(--btn-max); margin-left: auto; margin-right: auto; }
.final-actions .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 0; }
.final-actions .row2 .btn { padding: 0 12px; }
.sticky-cta, .bottom-cta, .vote-cta { display: flex; flex-direction: column; align-items: stretch; }
/* loader TAP TO PLAY = home PLAY (same class, size, sheen; no pulse or focus ring) */
#tapstart { animation: popIn .4s ease-out; margin-top: 14px; }
#tapstart, #tapstart:focus, #tapstart:focus-visible { outline: none; }
.loader .progress { width: 100%; max-width: var(--btn-max); }
/* home menu tiles = tertiary: glass, same radius, compact */
.menu-grid { gap: 10px; margin-top: 2px; }
.menu .tile { min-height: 72px; padding: 10px 4px; gap: 5px; border-radius: var(--btn-r); font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
background: rgba(255,255,255,.06); border: 0; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.1), 0 10px 20px -12px rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.menu .tile-ico { font-size: 22px; }
.home .resume-card { max-width: var(--btn-max); margin-left: auto; margin-right: auto; width: 100%; }
/* =====================================================================
v009 — DECKS refinement (gutters + bottom fix above are untouched)
one icon-tile size · calm card surface · tidy meta row · even section rhythm
===================================================================== */
.view.decks { gap: 0; }
.view.decks .scr-head { margin: 2px 0 4px; }
.view.decks .scr-head .sub { font-size: 14px; line-height: 1.4; opacity: .9; }
.view.decks .set-label { margin-top: 22px; margin-bottom: 10px; font-size: 11px; letter-spacing: .16em; }
.view.decks .deck-list { gap: 10px; }
.view.decks .deck-card { border-radius: 20px; border: 0;
background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 14%, var(--base)) 0%, var(--base) 55%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px -18px rgba(0,0,0,.7); }
.view.decks .deck-card::after { display: none; }
.view.decks .deck-list.mine .deck-card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,.1)), inset 0 1px 0 rgba(255,255,255,.1), 0 16px 34px -18px var(--accent); }
.view.decks .dc-in, .view.decks .deck-list.mine .dc-in { grid-template-columns: 56px minmax(0, 1fr) 10px; gap: 14px; padding: 14px 16px 14px 14px; }
.view.decks .dc-art, .view.decks .deck-list.mine .dc-art { width: 56px; height: 56px; border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -4px 10px rgba(0,0,0,.2), 0 8px 16px -8px color-mix(in srgb, var(--accent) 80%, #000); }
.view.decks .dc-art::before { inset: 3px 7px auto; border-radius: 12px 12px 40% 40%; opacity: .7; }
.view.decks .dc-art .dc-ico, .view.decks .deck-list.mine .dc-art .dc-ico { font-size: 30px; }
.view.decks .dc-body { gap: 2px; }
.view.decks .dc-title b, .view.decks .deck-list.mine .dc-title b { font-size: 17px; font-weight: 900; letter-spacing: -.005em; }
.view.decks .dc-tag { font-size: 13px; line-height: 1.35; }
.view.decks .dc-meta { justify-content: flex-start; gap: 8px; margin-top: 8px; }
.view.decks .dc-count { font-size: 11.5px !important; font-weight: 800 !important; opacity: .6; letter-spacing: .02em; }
.view.decks .dc-count::before { content: none; }
.view.decks .deck-card .badge { order: -1; font-size: 10px; letter-spacing: .1em; line-height: 1; padding: 5px 8px 4px; border-radius: 6px; box-shadow: none; }
.view.decks .deck-card .badge.ok { background: color-mix(in srgb, var(--cool) 16%, transparent); color: var(--cool); }
.view.decks .deck-card .badge.soon { background: rgba(255,255,255,.08); color: var(--muted); }
.view.decks .deck-card .badge.buy { font-size: 11px; }
.view.decks .dc-title .badge.adult { order: 0; border-radius: 6px; padding: 3px 6px 2px; font-size: 10px; }
.view.decks .dc-chev { font-size: 22px; color: rgba(255,255,255,.3); }
.view.decks .deck-card.st-coming-soon .dc-art { filter: saturate(.8) brightness(.92); }
.view.decks .foot { margin-top: 18px; }
@media (max-width: 340px) { .view.decks .dc-in, .view.decks .deck-list.mine .dc-in { grid-template-columns: 48px minmax(0, 1fr) 10px; gap: 11px; } .view.decks .dc-art, .view.decks .deck-list.mine .dc-art { width: 48px; height: 48px; border-radius: 14px; } }
.menu .tile > span:not(.tile-ico) { text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: .07em; white-space: nowrap; }
/* v009: home "live" dot follows the theme primary (--accent), glow included */
.hero-badge { --live-dot: var(--accent); }
.hero-badge::before { background: var(--live-dot); box-shadow: 0 0 8px var(--live-dot); animation: onAirTheme 1.6s ease-in-out infinite; }
@keyframes onAirTheme { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--live-dot) 70%, transparent), 0 0 8px var(--live-dot); } 50% { opacity: .45; box-shadow: 0 0 0 5px color-mix(in srgb, var(--live-dot) 0%, transparent), 0 0 3px var(--live-dot); } }
/* v010: QUICK START label only; players · timer as a caption beneath */
.menu .quick-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin-bottom: 6px; } /* v011: 16px layout gap - 4px lip = ~12px visible */
.menu .quick-cap { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.2; color: var(--muted); opacity: .9; text-align: center; }
/* ===== decks-polish-v001.css ===== */
/* Pitch Panic preview: deck-library presentation and requested home caption.
Add after app.css. Existing markup, actions, deck data and state stay intact. */
.view.decks {
gap: 0;
scroll-padding-top: 12px;
scroll-padding-bottom: calc(var(--sab) + 24px);
}
.view.decks > * { flex-shrink: 0; }
.view.decks .scr-head { margin: 4px 0 2px; }
.view.decks .scr-head .eyebrow { margin-bottom: 8px; }
.view.decks .screen-title { margin-bottom: 8px; }
.view.decks .scr-head .sub {
max-width: 30em;
margin-left: auto;
margin-right: auto;
color: var(--muted);
opacity: 1;
font-size: 14px;
line-height: 1.5;
text-wrap: pretty;
}
.view.decks .set-label {
margin-top: 24px;
margin-bottom: 12px;
font-size: 11px;
letter-spacing: .13em;
line-height: 1.5;
}
.view.decks .set-label span {
min-width: 22px;
padding: 2px 7px;
text-align: center;
color: var(--ink);
background: rgba(255,255,255,.1);
}
.view.decks .deck-list { gap: 12px; }
.view.decks .deck-card {
border: 1px solid rgba(255,255,255,.17);
border-radius: 21px;
background: linear-gradient(115deg,
color-mix(in srgb, var(--accent) 10%, var(--base)) 0%,
color-mix(in srgb, var(--base) 96%, #fff) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 22px -16px rgba(0,0,0,.7);
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.view.decks .deck-list.mine .deck-card {
border-color: color-mix(in srgb, var(--accent) 48%, rgba(255,255,255,.2));
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, transparent),
inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px -20px var(--accent);
}
.view.decks .deck-card:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 3px;
}
.view.decks .dc-in,
.view.decks .deck-list.mine .dc-in {
grid-template-columns: 50px minmax(0,1fr) 10px;
gap: 12px;
min-height: 126px;
padding: 16px 14px;
}
.view.decks .dc-art,
.view.decks .deck-list.mine .dc-art {
width: 50px;
height: 50px;
border-radius: 15px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -4px 10px rgba(0,0,0,.18),
0 7px 14px -10px color-mix(in srgb, var(--accent) 75%, #000);
}
.view.decks .dc-art::before { opacity: .65; }
.view.decks .dc-art .dc-ico,
.view.decks .deck-list.mine .dc-art .dc-ico { font-size: 29px; }
.view.decks .dc-body { gap: 5px; }
.view.decks .dc-title { gap: 6px; }
.view.decks .dc-title b,
.view.decks .deck-list.mine .dc-title b {
font-size: 17px;
font-weight: 900;
line-height: 1.24;
letter-spacing: -.01em;
}
.view.decks .dc-tag {
color: var(--muted) !important;
font-size: 13px;
font-weight: 600;
line-height: 1.45;
}
.view.decks .dc-meta {
justify-content: flex-start;
align-items: center;
gap: 6px 9px;
margin-top: 5px;
}
.view.decks .dc-count {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0;
line-height: 1.4;
color: var(--muted) !important;
opacity: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.view.decks .deck-card .badge {
order: -1;
padding: 4px 6px;
border-radius: 6px;
font-size: 9.5px;
font-weight: 900;
letter-spacing: .065em;
line-height: 1.3;
box-shadow: none;
}
.view.decks .deck-card .badge.ok {
color: #89f4d7;
background: rgba(92,242,200,.12);
}
.view.decks .deck-card .badge.soon {
color: #e3d8ed;
background: rgba(255,255,255,.085);
}
.view.decks .dc-title .badge.adult {
order: 0;
padding: 3px 5px;
color: #fff;
background: #ae254c;
font-size: 9px;
}
.view.decks .dc-chev {
color: color-mix(in srgb, var(--muted) 75%, transparent);
font-size: 24px;
}
.view.decks .deck-card.st-coming-soon .dc-art { filter: saturate(.88); }
.view.decks .foot { margin-top: 23px; font-size: 12px; line-height: 1.55; }
/* The existing pressed state drives this visual treatment. No state is added. */
.view.setup .deck-chip {
min-height: 46px;
white-space: normal;
line-height: 1.35;
text-align: left;
background: rgba(255,255,255,.075);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
color: var(--ink);
}
.view.setup .deck-chip.on {
background: color-mix(in srgb, var(--accent) 85%, #fff);
box-shadow: inset 0 0 0 2px rgba(255,255,255,.32), 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000);
color: #220d31;
}
.view.setup .deck-chip.on::after { content: ' ✓'; font-weight: 900; }
.view.setup .deck-chip.locked {
opacity: 1;
color: var(--muted);
background: rgba(255,255,255,.035);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.view.setup .deck-chip small { opacity: 1; }
/* Owner requested the home Quick Start caption removed visually.
Keep its accessible description and all underlying game configuration. */
.view.home #quick-cap {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.view.home .menu .quick-wrap { gap: 0; }
@media (max-width: 359px) {
.view.decks .dc-in, .view.decks .deck-list.mine .dc-in {
grid-template-columns: 44px minmax(0,1fr) 9px;
gap: 10px;
padding: 14px 12px;
}
.view.decks .dc-art, .view.decks .deck-list.mine .dc-art {
width: 44px; height: 44px; border-radius: 13px;
}
.view.decks .dc-art .dc-ico { font-size: 26px; }
.view.decks .dc-title b, .view.decks .deck-list.mine .dc-title b { font-size: 16px; }
.view.decks .dc-tag { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.view.decks .deck-card { transition: none; }
}
/* ===== deck-border-even-v001.css ===== */
/* Owner-approved final correction: remove the Starter Deck left accent only. */
.view.decks .deck-list.mine .deck-card {
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px -20px var(--accent);
}
/* ===== countdown-v005.css ===== */
/* Preview candidate: load after app.css. Timing and game logic stay in main.js. */
.flash.countdown {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
}
.flash.countdown > .count-ring,
.flash.countdown > .count-num {
grid-area: 1 / 1;
place-self: center;
position: relative;
transform-origin: 50% 50%;
}
.flash.countdown > .count-num {
/* Each state is centered by its ink; tabular advances are unnecessary here.
Normal spacing also keeps Canvas TextMetrics and DOM shaping identical. */
font-variant-numeric: normal;
letter-spacing: 0;
white-space: pre;
direction: ltr;
unicode-bidi: isolate;
}
.flash.countdown .count-glyph {
position: relative;
left: var(--count-optical-x, 0px);
top: var(--count-optical-y, 0px);
}
@media (prefers-reduced-motion: reduce) {
.flash.countdown > .count-num {
animation: none !important;
transform: none;
filter: none;
opacity: 1;
}
}
/* GO stays inside the existing large-screen ring; phone sizes are retained. */
.flash.countdown > .count-num.go { font-size: min(26vw, 128px); }
/* ===== howto-v005.css ===== */
/* Pitch Panic v005 preview — How to Play presentation only.
Load after the existing styles. Content, actions and shared tokens are unchanged. */
.view.howto {
--howto-cta-clearance: calc(var(--btn-h1, 52px) + var(--sab) + 42px);
gap: 18px;
padding-top: 12px;
padding-bottom: 0;
scroll-padding-top: 16px;
scroll-padding-bottom: var(--howto-cta-clearance);
}
.view.howto > * { flex-shrink: 0; }
.view.howto > .screen-title {
margin: 2px 0 4px;
font-size: clamp(28px, 7.4vw, 36px);
line-height: 1.14;
}
.view.howto .steps {
counter-reset: howto-step;
gap: 12px;
}
.view.howto .step {
counter-increment: howto-step;
display: grid;
grid-template-columns: 22px 44px minmax(0, 1fr);
align-items: start;
gap: 10px;
padding: 16px 14px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 20px;
background: linear-gradient(125deg,
color-mix(in srgb, var(--pop) 8%, var(--base)),
color-mix(in srgb, var(--base) 97%, #fff));
box-shadow: inset 0 1px 0 rgba(255,255,255,.045),
0 8px 20px -16px rgba(0,0,0,.65);
}
.view.howto .step::before {
content: counter(howto-step, decimal-leading-zero);
display: grid;
place-items: center;
width: 22px;
min-height: 24px;
margin-top: 1px;
color: var(--muted);
font-size: 11px;
font-weight: 900;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: .025em;
}
.view.howto .step-ico {
display: grid;
place-items: center;
width: 44px;
min-height: 44px;
border-radius: 13px;
background: linear-gradient(145deg,
color-mix(in srgb, var(--pop) 15%, var(--base)),
color-mix(in srgb, var(--base) 94%, #fff));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.09),
inset 0 1px 0 rgba(255,255,255,.08);
font-size: 27px;
line-height: 1;
}
.view.howto .step > div { min-width: 0; }
.view.howto .step b {
display: block;
color: var(--ink);
font-size: 16px;
font-weight: 900;
line-height: 1.3;
letter-spacing: -.012em;
overflow-wrap: anywhere;
}
.view.howto .step p {
margin: 6px 0 0;
color: var(--muted);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
text-wrap: pretty;
}
.view.howto .callout {
padding: 17px 18px;
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: 20px;
background: color-mix(in srgb, var(--accent) 8%, var(--base));
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
color: var(--muted);
font-size: 14px;
font-weight: 600;
line-height: 1.55;
}
.view.howto .callout > b {
display: block;
margin-bottom: 7px;
color: var(--accent);
font-size: 14px;
font-weight: 900;
}
.view.howto .callout i { color: var(--ink); font-style: normal; font-weight: 800; }
.view.howto .example {
margin-bottom: 4px;
padding: 19px 18px;
border: 1px solid color-mix(in srgb, var(--pop) 30%, transparent);
border-radius: 20px;
background: color-mix(in srgb, var(--pop) 9%, var(--base));
box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
color: var(--muted);
text-align: left;
font-size: 15px;
font-weight: 600;
line-height: 1.55;
}
.view.howto .example b { color: var(--ink); font-weight: 900; }
.view.howto .ex-label {
margin-bottom: 9px;
color: var(--muted);
font-size: 10.5px;
font-weight: 900;
letter-spacing: .13em;
}
.view.howto .ex-twist {
margin-top: 13px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.13);
color: var(--accent);
font-size: 14px;
line-height: 1.45;
}
.view.howto .sticky-cta {
position: sticky;
bottom: 0;
z-index: 3;
margin-top: 0;
padding: 14px 0 calc(var(--sab) + 18px);
background: linear-gradient(180deg,
color-mix(in srgb, var(--bg0) 0%, transparent) 0,
color-mix(in srgb, var(--bg0) 97%, transparent) 13px,
var(--bg0) 100%);
}
.view.howto .sticky-cta .btn { flex-shrink: 0; }
@media (max-width: 359px) {
.view.howto { gap: 16px; }
.view.howto .step {
grid-template-columns: 18px 36px minmax(0, 1fr);
gap: 8px;
padding: 14px 12px;
border-radius: 18px;
}
.view.howto .step::before { width: 18px; font-size: 10px; }
.view.howto .step-ico {
width: 36px;
min-height: 38px;
border-radius: 11px;
font-size: 24px;
}
.view.howto .step b { font-size: 15px; }
.view.howto .step p { font-size: 13.5px; }
.view.howto .callout, .view.howto .example { padding: 16px; }
}
@media (min-width: 760px) and (min-height: 620px) {
.view.howto .steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
.view.howto .step {
grid-template-columns: 20px 38px minmax(0, 1fr);
gap: 8px;
padding: 16px 12px;
}
.view.howto .step-ico { width: 38px; min-height: 40px; font-size: 25px; }
}
/* v005-r003 — hide only the How to Play scroller's visual scrollbar.
Keep overflow-y:auto, touch-action and all keyboard/navigation behavior intact.
CSS Scrollbars standard: https://drafts.csswg.org/css-scrollbars/#scrollbar-width */
.view.howto { scrollbar-width: none; }
.view.howto::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* ===== deck-gestures-v005-r003.css ===== */
/* Explicitly keep the complete deck button on the native vertical-pan surface. */
.view.decks .deck-card[data-action="deck-info"] { touch-action: pan-y; }
/* Defensive for stale markup; haptics.js excludes these overlays at creation. */
.view.decks .deck-card[data-action="deck-info"] > .hx { display: none; }
/* ===== deck-details-v005.css ===== */
/* Pitch Panic v005 preview — Coming Soon deck details only.
The existing disabled noop button identifies the existing status.
No new classes, scripts, content, pricing or purchase behavior are added. */
.sheet:has(> .sheet-deck > .sheet-actions > [data-action="noop"][disabled]) {
width: min(100%, 580px);
max-height: min(92%, calc(var(--app-h, 100dvh) - var(--sat) - 12px));
padding: 12px calc(var(--sar) + 18px) calc(var(--sab) + 20px) calc(var(--sal) + 18px);
border: 1px solid rgba(255,255,255,.16);
border-bottom: 0;
border-radius: 28px 28px 0 0;
background: radial-gradient(100% 80% at 10% 0%, color-mix(in srgb, var(--pop) 16%, transparent), transparent 72%),
linear-gradient(165deg, color-mix(in srgb, var(--bg1) 87%, #111), var(--bg0) 88%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 -18px 56px rgba(0,0,0,.5);
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.24) transparent;
scroll-padding: 16px 0 calc(var(--sab) + 20px);
}
.sheet:has(> .sheet-deck > .sheet-actions > [data-action="noop"][disabled]) > .sheet-grip {
width: 36px;
height: 4px;
margin: 0 auto 19px;
background: rgba(255,255,255,.28);
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
column-gap: 14px;
row-gap: 7px;
text-align: left;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) > .dc-ico.big {
grid-column: 1;
grid-row: 1 / 3;
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin: 0;
border: 1px solid color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,.1));
border-radius: 19px;
background: radial-gradient(100% 110% at 25% 10%, color-mix(in srgb, var(--accent) 30%, var(--base)), var(--base));
box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 9px 20px -15px var(--accent);
font-size: 40px;
line-height: 1;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) > h3 {
grid-column: 2;
grid-row: 1;
align-self: end;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
min-width: 0;
margin: 1px 0 0;
color: var(--ink);
font-size: clamp(23px, 6vw, 28px);
line-height: 1.18;
font-weight: 900;
letter-spacing: -.02em;
text-wrap: balance;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) > h3 .badge.adult {
padding: 4px 6px;
border-radius: 6px;
background: #ae254c;
color: #fff;
font-size: 10px;
line-height: 1.2;
letter-spacing: .04em;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) > p.sub {
grid-column: 1 / -1;
margin: 5px 0 0;
text-align: left;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) > h3 + p.sub {
grid-column: 2;
grid-row: 2;
align-self: start;
margin: 0;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .samples {
grid-column: 1 / -1;
display: grid;
gap: 10px;
margin-top: 13px;
counter-reset: deck-example;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sample {
counter-increment: deck-example;
min-width: 0;
padding: 13px 14px 14px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 17px;
background: color-mix(in srgb, var(--base) 95%, var(--accent));
box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
color: var(--muted);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
overflow-wrap: anywhere;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sample::before {
content: counter(deck-example, decimal-leading-zero);
display: block;
margin-bottom: 6px;
color: var(--muted);
opacity: .8;
font-size: 10px;
font-weight: 900;
line-height: 1.2;
font-variant-numeric: tabular-nums;
letter-spacing: .1em;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sample b {
color: var(--ink);
font-weight: 900;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sample > span {
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid rgba(255,255,255,.1);
color: color-mix(in srgb, var(--accent) 75%, #fff);
font-size: 13px;
font-weight: 800;
line-height: 1.45;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sheet-actions {
grid-column: 1 / -1;
width: 100%;
max-width: var(--btn-max, 300px);
margin: 15px auto 0;
gap: 12px;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sheet-actions > [data-action="noop"][disabled] {
width: 100%;
max-width: none;
min-height: 44px;
padding: 0 16px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 14px;
background: rgba(255,255,255,.055);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
color: var(--muted);
font-size: 13px;
letter-spacing: .1em;
text-shadow: none;
filter: none;
opacity: 1;
cursor: default;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sheet-actions > [data-action="noop"][disabled]::before,
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sheet-actions > [data-action="noop"][disabled]::after {
display: none;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sheet-actions > p.sub {
margin: 0;
text-align: center;
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sheet-actions > [data-action="close-sheet"] {
width: 100%;
max-width: none;
min-height: 48px;
border: 1px solid color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,.25));
border-radius: 14px;
background: rgba(255,255,255,.065);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 18px -14px rgba(0,0,0,.8);
color: var(--ink);
font-size: 14px;
letter-spacing: .09em;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sheet-actions > [data-action="close-sheet"]::before {
display: none;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sheet-actions > [data-action="close-sheet"]:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 3px;
}
@media (max-width: 359px) {
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) {
grid-template-columns: 54px minmax(0, 1fr);
column-gap: 12px;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) > .dc-ico.big {
width: 54px; height: 58px; border-radius: 16px; font-size: 35px;
}
.sheet-deck:has(> .sheet-actions > [data-action="noop"][disabled]) .sample { padding: 12px; }
}
/* ===== sound-toast-v008.css ===== */
/* Sound notices only: clear the safe area, top controls and Home footer. */
#toast[data-sound-notice="true"] {
top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 68px);
bottom: auto;
padding: 10px 12px;
font-size: 14px;
pointer-events: none;
transition: opacity .25s;
transform: translate(-50%, 0);
}
#toast[data-sound-notice="true"].show {
transform: translate(-50%, 0);
}
/* Compact Home starts its wordmark immediately below the header. Use its
otherwise empty header space, leaving the 44px mute target plus 16px gap.
Other screens retain the below-header notice so Home/back stays clear. */
@media (max-width: 359px), (max-height: 500px) {
body[data-screen="home"] #toast[data-sound-notice="true"] {
top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 8px);
left: calc(var(--sal, env(safe-area-inset-left, 0px)) + 16px);
max-width: calc(100vw - var(--sal, 0px) - var(--sar, 0px) - 88px);
transform: none;
transform-origin: left top;
}
body[data-screen="home"] #toast[data-sound-notice="true"].show {
transform: none;
}
}
/* Compact screens: the sound button already communicates the state.
Include the rotated small-phone case; leave every unrelated toast intact. */
@media (max-width: 359px), (max-height: 359px) {
#toast[data-sound-notice="true"] { display: none; }
}
/* ===== scroll-control-gestures-v006-r002.css ===== */
/* Native vertical pan across setup/settings buttons; player inputs stay untouched. */
.view.setup.scroll button[data-action], .view.settings.scroll button[data-action] { touch-action: pan-y; }
/* Defensive for stale markup; the haptics attach filter avoids creating these. */
.view.setup.scroll button[data-action] > .hx, .view.settings.scroll button[data-action] > .hx { display: none; }
/* ===== layout-headers-v007-r007.css ===== */
/* Pitch Panic v007 — scoped dock edges and voting alignment only. */
.view.setup, .view.howto {
--dock-inset-left: 18px;
--dock-inset-right: 18px;
}
@media (min-width: 700px) {
.view.setup, .view.howto { --dock-inset-left: 28px; --dock-inset-right: 28px; }
}
@media (orientation: landscape) and (max-height: 500px) {
.view.setup, .view.howto {
--dock-inset-left: max(18px, var(--sal));
--dock-inset-right: max(18px, var(--sar));
}
}
/* Undo the child-width cap when a background deliberately spans the view padding.
Equal padding restores the button's existing content width and 300px cap. */
.view.setup > .sticky-cta, .view.howto > .sticky-cta {
max-width: none;
margin-left: calc(-1 * var(--dock-inset-left));
margin-right: calc(-1 * var(--dock-inset-right));
padding-left: var(--dock-inset-left);
padding-right: var(--dock-inset-right);
}
/* Keep this full-width dock clear of a classic scrollbar strip, like How to Play.
Only the scrollbar paint is hidden; native scrolling and focus remain enabled. */
.view.setup { scrollbar-width: none; }
.view.setup::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* The list has symmetric -8px margins. Let it regain the intended 16px width;
keep classic scrollbar paint from reserving width on only the right. */
.view.vote > .vote-list { max-width: none; scrollbar-width: none; }
.view.vote > .vote-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Deck Library / Preferences now use the existing centered header slot. */
body:is([data-screen="decks"], [data-screen="settings"], [data-screen="howto"]) .topbar-title { color: var(--accent); }
@media (orientation: landscape) and (max-height: 500px) {
/* Mirror notch clearance so voting boxes retain equal side spacing. */
.view.vote { padding-left: max(18px, var(--sal), var(--sar)); padding-right: max(18px, var(--sal), var(--sar)); }
/* The app frame already excludes side safe areas. Offset only these three
labels by half that asymmetry to keep their text centered in the viewport. */
body:is([data-screen="decks"], [data-screen="settings"], [data-screen="howto"]) .topbar-title {
text-indent: calc(var(--sar) - var(--sal));
}
}
/* ===== player-name-v008-r002.css ===== */
/* Pitch Panic v008 — keep the active player label centered between equal controls. */
body[data-screen="pitching"] .topbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
body[data-screen="pitching"] .topbar-title { min-width: 0; text-align: center; text-indent: .22em; }
body[data-screen="pitching"] .topbar .icon-btn { width: 44px; min-width: 44px; }
/* Center the visible letters by compensating for the final .22em tracking advance.
Existing ellipsis retains the full accessible name without touching saved data. */
/* ===== lookfeel-v009.css ===== */
/* =====================================================================
Pitch Panic v009 — LOOK & FEEL polish (presentation only, loaded last).
No gameplay, timing, audio, deck or fit logic is touched. Every full-screen
layer keeps the v007 top-anchored --app-h fit from app.css.
1 tokens · 2 calmer stage · 3 loader · 4 button hierarchy · 5 home
6 sheets/menus · 7 toast · 8 shared chrome (headers, cards, pills)
===================================================================== */
/* 1 — tokens */
:root {
--lf-r: 18px; /* one radius for buttons, tiles, inputs */
--lf-card-r: 22px; /* one radius for cards & sheets */
--lf-glass: rgba(255,255,255,.065);
--lf-glass-hi: rgba(255,255,255,.11);
--lf-hair: rgba(255,255,255,.14);
--lf-hair-strong: rgba(255,255,255,.24);
--lf-shadow: 0 18px 36px -18px rgba(0,0,0,.7);
--btn-r: var(--lf-r); --btn-h1: 56px; --btn-h2: 48px; --btn-max: 320px; --btn-gap: 12px;
}
/* 2 — calmer stage: fewer moving things competing with the content */
#floaters span { opacity: .07 !important; filter: blur(.6px) saturate(.9); }
.beam { opacity: .3; }
.blob { opacity: .4; }
/* 3 — loader: centred logo → wordmark → tagline → (progress | PLAY). Even rhythm, no overlap. */
.loader-inner { gap: 0; width: min(100%, 360px); }
.loader::before { opacity: .55; }
.logo-mark { margin-bottom: clamp(18px, 3.2vh, 28px); }
.logo-mark img { width: clamp(104px, 30vw, 128px); height: auto; aspect-ratio: 1; border-radius: 28%;
animation: lfFloat 4.8s ease-in-out infinite; }
@keyframes lfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.loader .wordmark { font-size: clamp(52px, 14.5vw, 70px); }
.loader-tag { margin: clamp(14px, 2.4vh, 20px) 0 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--muted); opacity: .9; }
.loader .progress { height: 6px; max-width: 220px; margin-top: clamp(28px, 5vh, 44px); background: rgba(255,255,255,.1); box-shadow: none; transition: opacity .3s, height .3s, margin .3s; }
#loadbar { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
#loadbar::after { display: none; } /* no candy stripes: a clean fill reads as premium */
.loader-msg { margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; opacity: .75; min-height: 18px; }
#tapstart { margin-top: clamp(28px, 5vh, 44px); }
/* 4 — button hierarchy: PRIMARY (solid gold, lip) > SECONDARY (tonal glass, accent rim) > GHOST (outline) */
.btn::before { display: none; } /* drop the dated glossy streak */
.btn.btn-primary, .btn.btn-danger { background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%), var(--lf-fill); }
.btn.btn-primary { --lf-fill: linear-gradient(180deg, var(--gold-a) -30%, var(--gold-b) 60%, color-mix(in srgb, var(--gold-b) 82%, var(--gold-c)));
color: #24093f; text-shadow: none; letter-spacing: .08em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 var(--btn-lip) 0 var(--lip), 0 16px 30px -14px color-mix(in srgb, var(--gold-b) 70%, #000); }
.btn.btn-danger { --lf-fill: linear-gradient(180deg, #ff7088, #ff4d6d 55%, #f23a5c); }
.btn.btn-xl.btn-primary::after, #tapstart::after { opacity: .45; animation-duration: 7s; } /* sheen: slower, quieter */
.btn.btn-secondary { background: color-mix(in srgb, var(--pop) 16%, rgba(255,255,255,.04)); color: var(--ink); text-shadow: none;
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pop) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.12), var(--lf-shadow);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.btn-secondary:not(:disabled):active { transform: scale(.97); filter: none; background: color-mix(in srgb, var(--pop) 26%, rgba(255,255,255,.05));
box-shadow: inset 0 0 0 1.5px var(--pop), var(--lf-shadow); }
.btn.btn-ghost { background: var(--lf-glass); box-shadow: inset 0 0 0 1.5px var(--lf-hair-strong); }
.btn.btn-ghost:not(:disabled):active { background: var(--lf-glass-hi); }
.btn:focus-visible, .tile:focus-visible, .icon-btn:focus-visible, .chip:focus-visible, .toggle-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn.btn-small { min-height: 44px; border-radius: 14px; } /* install pill: still ≥44px to tap */
/* 5 — home: wordmark + tagline, ONE primary action, quiet secondary, compact 3-up utility bar */
.view.home .home-main { gap: clamp(26px, 5vh, 48px); }
.view.home .hero { gap: clamp(10px, 1.8vh, 16px); }
.view.home .tagline { font-size: clamp(18px, 5vw, 22px); line-height: 1.3; font-weight: 800; color: var(--ink); }
.view.home .tagline em { text-shadow: none; }
.view.home .menu { gap: 14px; }
.view.home .menu .quick-wrap { margin-bottom: 0; }
.view.home .menu-grid { margin-top: 10px; gap: 0; border-radius: var(--lf-r); overflow: hidden;
background: var(--lf-glass); box-shadow: inset 0 0 0 1px var(--lf-hair), var(--lf-shadow);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.view.home .menu .tile { min-height: 64px; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
gap: 7px; padding: 12px 4px 10px; color: var(--muted); transition: background .18s, color .18s, transform .12s var(--spring); position: relative; }
.view.home .menu .tile + .tile::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--lf-hair); }
.view.home .menu .tile:active { transform: none; background: var(--lf-glass-hi); color: var(--ink); }
.view.home .menu .tile > span:not(.tile-ico) { font-size: 11px; letter-spacing: .12em; }
/* line icons instead of emoji: cleaner, consistent stroke, tinted by theme */
.view.home .menu .tile-ico { font-size: 0; width: 22px; height: 22px; filter: none; background: var(--accent); opacity: .95;
-webkit-mask: var(--lf-ico) center / contain no-repeat; mask: var(--lf-ico) center / contain no-repeat; }
.view.home .menu .tile:active .tile-ico { transform: none; }
.view.home .menu-grid > .tile:nth-child(1) { /* v011: keyed by position, not data-action (stripped from the leaving view) */ --lf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 0 1 5.2 1c0 1.9-2.6 2.4-2.6 4'/%3E%3Ccircle cx='12' cy='17.6' r='.6' fill='%23000'/%3E%3C/svg%3E"); }
.view.home .menu-grid > .tile:nth-child(2) { /* v011: keyed by position, not data-action (stripped from the leaving view) */ --lf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='7.5' y='3.5' width='12' height='16' rx='2.5'/%3E%3Cpath d='M4.6 7.2 4.1 17a2.5 2.5 0 0 0 2.4 2.6l1 .1' stroke-linecap='round'/%3E%3Cpath d='m13.5 8.6 1 2.1 2.2.3-1.6 1.5.4 2.2-2-1-2 1 .4-2.2-1.6-1.5 2.2-.3z' stroke-width='1.6'/%3E%3C/svg%3E"); }
.view.home .menu-grid > .tile:nth-child(3) { /* v011: keyed by position, not data-action (stripped from the leaving view) */ --lf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2.2'/%3E%3Ccircle cx='9' cy='17' r='2.2'/%3E%3C/svg%3E"); }
/* footer: one quiet line, no pill chrome */
.view.home .home-foot { gap: 6px; padding-top: 8px; }
.view.home .home-foot .hero-badge { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 4px 0; opacity: .75; }
.view.home .home-foot .foot { opacity: .5; }
.view.home .resume-card { border-radius: var(--lf-r); }
/* install hint: same glass card language */
.install-hint { border-radius: var(--lf-r); }
/* 6 — sheets / menus: one centred card language, clear title, calm actions */
.sheet { border-radius: 26px 26px 0 0; padding-top: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg1) 70%, var(--bg0)), var(--bg0));
box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 -20px 60px rgba(0,0,0,.6); }
.sheet-backdrop { background: rgba(8,2,16,.6); }
.sheet-grip { width: 38px; height: 4px; background: rgba(255,255,255,.22); margin-bottom: 18px; }
.sheet h3 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 8px; }
.sheet > .sub, .sheet-deck > .sub { font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 34ch; margin-left: auto; margin-right: auto; }
.sheet-actions { margin-top: 22px; gap: 10px; }
.sheet .sample { border-radius: 16px; }
@media (min-width: 700px) and (min-height: 600px) {
.sheet-wrap { align-items: center; }
.sheet { border-radius: 26px; max-width: 480px; padding-bottom: 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.6); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .25s var(--out), opacity .2s; }
.sheet-wrap.open .sheet { opacity: 1; transform: none; }
.sheet-grip { display: none; }
.sheet { padding-top: 26px; }
}
/* 7 — toast: dark glass pill, matches the app instead of a white slab */
.toast { background: color-mix(in srgb, var(--bg0) 82%, #000); color: var(--ink); font-size: 14.5px; font-weight: 800;
box-shadow: inset 0 0 0 1px var(--lf-hair-strong), 0 16px 36px -10px rgba(0,0,0,.7);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* 8 — shared chrome: headers, cards, pills, chips — one coherent app */
.topbar-title { font-size: 11.5px; letter-spacing: .24em; }
.icon-btn { border-radius: 14px; }
.screen-title { text-shadow: 0 6px 24px rgba(0,0,0,.35); }
.card { border-radius: var(--lf-card-r); }
.pill { font-size: 11px; letter-spacing: .14em; padding: 6px 12px; }
.pill-dim { background: var(--lf-glass-hi); }
.chip.on { box-shadow: 0 3px 0 var(--gold-c), 0 8px 16px -8px rgba(255,216,77,.6); }
.pinput { border-radius: 14px; }
.sticky-cta { padding-top: 18px; }
.set-label { opacity: .9; }
/* short phones: keep the rhythm without crowding */
@media (max-height: 700px) {
.view.home .home-main { gap: 22px; }
.view.home .menu-grid { margin-top: 4px; }
.logo-mark { margin-bottom: 14px; }
.loader .progress, #tapstart { margin-top: 24px; }
}
/* landscape phones / very short: everything still on one screen */
@media (max-height: 500px) {
.logo-mark img { width: 72px; }
.loader .wordmark { font-size: 44px; }
.loader .progress, #tapstart { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .logo-mark img { animation: none; } }
/* install-hint dismiss: full 44px target, same footprint visually */
.ih-close { min-width: 44px; min-height: 44px; margin: -6px -8px -6px 0; display: grid; place-items: center; border-radius: 12px; }
.ih-close:active { background: var(--lf-glass-hi); }
/* ===== lookfeel-v010.css ===== */
/* =====================================================================
Pitch Panic v010 — look & feel pass 2 (presentation only, loaded last).
A. LOADING RESTORED: the progress bar + status line stay visible through the
whole launch sequence and remain on screen (full bar, "Ready when you are!")
when PLAY appears. v009's rules that hid them were removed from lookfeel-v009.css.
B. buttons: clearer disabled state · C. setup rows · D. in-game notes
E. home & menus refinements. No JS, gameplay, audio, deck or __ppFit changes.
===================================================================== */
/* A — loader: logo → wordmark → tagline → BAR → status → PLAY (when ready) */
.loader .progress { display: block; opacity: 1; height: 8px; width: 100%; max-width: 260px; margin: clamp(26px, 4.6vh, 40px) auto 0;
border-radius: 99px; overflow: hidden; position: relative;
background: rgba(255,255,255,.12); box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.08); }
#loadbar { position: relative; min-width: 8px; border-radius: inherit; transition: width .35s cubic-bezier(.2,.8,.3,1);
background: linear-gradient(90deg, var(--pop), var(--accent));
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
/* soft travelling highlight while loading (replaces the old candy stripes) */
#loadbar::after { display: block; content: ""; position: absolute; inset: 0; border-radius: inherit; animation: lfLoadGlint 1.1s linear infinite;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%) no-repeat; background-size: 40% 100%; }
@keyframes lfLoadGlint { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.loader-msg { display: block; margin-top: 12px; min-height: 18px; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); opacity: .85; transition: color .3s, opacity .3s; }
/* ready: bar stays (full, settled), status turns to the accent, PLAY rises in beneath */
.loader:has(#tapstart:not(.hidden)) #loadbar::after { animation: none; opacity: 0; }
.loader:has(#tapstart:not(.hidden)) .loader-msg { color: var(--accent); opacity: 1; }
#tapstart { margin-top: clamp(22px, 3.8vh, 32px); animation: none; opacity: 1; transform: none; visibility: visible;
transition: opacity .45s var(--out), transform .45s var(--out), visibility 0s; }
/* reserve PLAY's slot during loading so the logo/title/bar never jump when it appears */
#tapstart.hidden { display: flex !important; visibility: hidden; opacity: 0; transform: translateY(10px); pointer-events: none; transition: none; }
@media (max-height: 700px) { .loader .progress { margin-top: 22px; } #tapstart { margin-top: 20px; } .logo-mark img { width: 96px; } .loader .wordmark { font-size: 54px; } }
@media (max-height: 500px) { .loader .progress { margin-top: 14px; } #tapstart { margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { #loadbar::after { animation: none; opacity: 0; } #tapstart { transition: none; } }
/* B — buttons: a disabled primary reads as "not yet", not as a muddy gold slab */
.btn.btn-primary:disabled { filter: none; opacity: 1; background: rgba(255,255,255,.07); color: color-mix(in srgb, var(--ink) 55%, transparent);
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); text-shadow: none; }
.btn.btn-ghost:disabled { filter: none; opacity: .45; }
.btn { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.btn.btn-primary:not(:disabled):hover { filter: brightness(1.04); }
@media (hover: hover) { .view.home .menu .tile:hover, .btn.btn-ghost:not(:disabled):hover { background: var(--lf-glass-hi); } }
/* C — setup: tidy player rows, 44px remove targets, calmer number badges */
.player-row { gap: 10px; }
.pnum { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; box-shadow: none; }
.premove { width: 44px; height: 44px; border-radius: 14px; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--lf-hair); font-size: 14px; }
.premove:not(:disabled):active { background: rgba(255,77,109,.16); color: #ff8fa3; }
.premove:disabled { opacity: .3; }
.card-head .hint { opacity: .8; font-size: 12px; }
.view.setup .card { padding: 16px; }
/* D — in-game notes: one quiet caption style instead of competing boxes */
.secret { text-align: center; font-size: 15px; font-weight: 700; padding: 12px 16px; border-radius: 16px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.secret span { font-size: 18px; margin-right: 4px; vertical-align: -1px; }
.twist-teaser { font-size: 15px; border-radius: 16px; padding: 12px 16px; }
.pills .pill { box-shadow: none; }
/* E — home & menus */
.view.home .menu .tile > span:not(.tile-ico) { color: color-mix(in srgb, var(--ink) 82%, var(--muted)); }
.view.home .resume-card { background: color-mix(in srgb, var(--cool) 12%, rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cool) 55%, transparent), var(--lf-shadow);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); min-height: 60px; }
.view.home .resume-card .rc-arrow { font-size: 24px; opacity: .6; margin-left: auto; }
.sheet .sheet-actions .btn-ghost { color: var(--muted); }
.sheet .linkish { min-height: 44px; }
.toggle-row { min-height: 56px; }
/* ===== lookfeel-v011.css ===== */
/* =====================================================================
Pitch Panic v011 — glitch fixes + look & feel pass 3 (presentation only, loaded last).
ROOT CAUSE of the "squares inside buttons on first tap":
main.js render() keeps the old screen on top for a 240ms fade-out and, to make it inert,
strips every [data-action] and [id] from it. v009 keyed the Home bar's mask icons on
.tile[data-action="…"], so the moment a Home button was tapped the leaving copy lost its
icon (mask: none) and each 22px icon box painted as a solid square. The same stripping
un-hid the "#quick-cap" caption. Fixes: icons keyed by position (lookfeel-v009.css),
caption hidden by class (below), and the old/new screens no longer overlap (below), which
also stops Home showing through the Deck Library.
===================================================================== */
/* 1 — icon masks can never fall back to a solid box: no mask image = no paint */
.view.home .menu .tile-ico { -webkit-mask-image: var(--lf-ico, linear-gradient(transparent, transparent)); mask-image: var(--lf-ico, linear-gradient(transparent, transparent)); }
/* Quick Start caption stays visually hidden in the leaving copy too (its id is stripped) */
.view.home .quick-cap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* text glyphs in buttons (▶ ⚡ ↻ ⌂) stay as text, never swap to a late-loading emoji face mid-press */
.btn { font-variant-emoji: text; }
/* 2 — screen change = clean hand-off, no see-through overlap:
the old screen fades out fast (140ms) and the new one starts once it is gone. */
.view.leaving { animation: lfViewOut .14s ease-in forwards; }
@keyframes lfViewOut { to { opacity: 0; transform: translateY(-8px); } }
.view.leaving ~ .view:not(.leaving) { animation-delay: .12s; }
/* belt and braces: any stray leaving copy is never visible under a scrolling list screen */
.view.leaving ~ .view.scroll:not(.leaving) { position: relative; z-index: 1; }
.view.leaving:has(~ .view.scroll:not(.leaving)) { visibility: hidden; animation: none; }
/* 3 — twist tip on the prompt screen: one line at every phone width (keeps gold rim + ⚡) */
.prompt .twist-teaser { white-space: nowrap; font-size: clamp(11.5px, 3.25vw, 15px); letter-spacing: -.005em; padding: 12px 10px; margin-left: -6px; margin-right: -6px; line-height: 1.25; }
.prompt .twist-teaser b { font-weight: 900; color: var(--accent); }
@media (max-width: 340px) { .prompt .twist-teaser { white-space: normal; } }
/* the pitch screen's "Twist incoming…" slot uses the same shape language */
.pitching .twist-locked { border-radius: 16px; border-width: 1.5px; }
/* 4 — polish */
/* Home bar: clear press feedback that is a full-cell tint, never an inner shape */
.view.home .menu .tile { overflow: hidden; }
.view.home .menu .tile:active { background: rgba(255,255,255,.1); }
.view.home .menu .tile:active .tile-ico { opacity: 1; }
/* primary/secondary press: no transform jump on the sheen layer */
.btn:active::after { animation-play-state: paused; }
/* prompt screen rhythm */
.prompt .eyebrow { margin-top: 2px; }
.prompt .pills { margin-bottom: 2px; }
/* sheets: actions a touch roomier, ghost reads as tertiary */
.sheet-actions { gap: 12px; }
/* topbar icon buttons: same radius as the app's controls */
.icon-btn { border-radius: 14px; min-width: 44px; min-height: 44px; }
/* install-hint pill: a real (small) primary, not a grey slab */
.install-hint .btn.btn-small { background: linear-gradient(180deg, var(--gold-a) -30%, var(--gold-b) 60%); color: #24093f; text-shadow: none; }
/* ===== lookfeel-v012.css ===== */
/* =====================================================================
Pitch Panic v012 — last polish pass (presentation only, loaded last).
1 LOADING: choreographed entrance (logo pop → PITCH drops → PANIC slams → tagline → bar
grows → status), sparkles around the logo, breathing rays, glowing bar head, a "done"
flash when ready. Bar + status stay visible the whole time; PLAY's slot stays reserved.
2 TWIST HEADERS: the kind label ("THE CATCH", "NEW FEATURE"…) sits on a dark pill so its
colour always reads on the pink→orange twist card.
===================================================================== */
/* ---------- 1. loading ---------- */
.loader::before { opacity: .7; animation: spin 48s linear infinite, lfRaysBreathe 4.5s ease-in-out infinite; }
@keyframes lfRaysBreathe { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }
/* soft spotlight pool behind the logo/title */
.loader::after { content: ""; position: absolute; left: 50%; top: 30%; width: min(120vw, 620px); aspect-ratio: 1; transform: translate(-50%, -50%);
background: radial-gradient(circle, color-mix(in srgb, var(--pop) 26%, transparent) 0%, transparent 62%); pointer-events: none; animation: lfPool 5s ease-in-out infinite; }
@keyframes lfPool { 0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.loader-inner { z-index: 1; }
/* entrance choreography */
.loader .logo-mark { animation: lfLogoIn .7s cubic-bezier(.2, 1.3, .35, 1) both; }
@keyframes lfLogoIn { 0% { opacity: 0; transform: scale(.55) rotate(-10deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.loader .wordmark span:first-child { animation: lfDropIn .5s .08s cubic-bezier(.2, 1.25, .35, 1) both; }
@keyframes lfDropIn { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
.loader .wordmark span:last-child { animation: lfSlamIn .55s .16s cubic-bezier(.2, 1.4, .35, 1) both, markTilt 5s 1.2s ease-in-out infinite; }
@keyframes lfSlamIn { 0% { opacity: 0; transform: scale(1.9) rotate(-9deg); filter: blur(4px); } 55% { opacity: 1; filter: none; } 100% { opacity: 1; transform: rotate(-3deg); } }
.loader .loader-tag { animation: lfFadeUp .45s .26s var(--out) both; }
.loader .progress { transform-origin: 50% 50%; animation: lfGrow .45s .1s var(--out) both; }
@keyframes lfGrow { from { opacity: .6; transform: scaleX(.35); } to { opacity: 1; transform: none; } } /* bar is on screen from the first frame */
.loader .loader-msg { animation: lfFadeUp .35s .12s var(--out) both; }
@keyframes lfFadeUp { from { opacity: 0; transform: translateY(8px); } to { transform: none; } }
/* sparkles orbiting the logo */
.logo-mark::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; pointer-events: none; z-index: 2;
background:
radial-gradient(circle at 12% 30%, #fff 0 1.6px, transparent 2.6px),
radial-gradient(circle at 88% 18%, var(--accent) 0 2.2px, transparent 3.4px),
radial-gradient(circle at 92% 74%, #fff 0 1.4px, transparent 2.4px),
radial-gradient(circle at 20% 86%, var(--accent) 0 1.8px, transparent 3px),
radial-gradient(circle at 50% 2%, #fff 0 1.2px, transparent 2.2px);
animation: lfOrbit 14s linear infinite, lfTwinkle 2.2s ease-in-out infinite; }
@keyframes lfOrbit { to { transform: rotate(360deg); } }
@keyframes lfTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* bar: glowing head that rides the fill, and a quick flash when loading completes */
#loadbar::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 10px; border-radius: 99px; z-index: 1;
background: #fff; box-shadow: 0 0 10px 3px color-mix(in srgb, var(--accent) 80%, transparent); opacity: .9; }
.loader:has(#tapstart:not(.hidden)) #loadbar::before { opacity: 0; transition: opacity .4s .3s; }
.loader:has(#tapstart:not(.hidden)) .progress { animation: lfDone .7s ease-out both; }
@keyframes lfDone { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); filter: brightness(1.6); } 100% { box-shadow: 0 0 0 10px transparent; filter: none; } }
.loader-msg { letter-spacing: .03em; }
.loader:has(#tapstart:not(.hidden)) .loader-msg { animation: lfFadeUp .35s var(--out) both; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
.loader::after, .logo-mark::before, .loader .logo-mark, .loader .wordmark span, .loader .loader-tag, .loader .progress, .loader .loader-msg { animation: none !important; }
.loader .wordmark span:last-child { transform: rotate(-3deg); }
}
/* ---------- 2. twist headers: always-readable kind label ---------- */
.twist-card .pc-label, .pitching .twist-card .pc-label {
display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 5px 12px 4px; border-radius: 99px;
background: rgba(30, 6, 46, .74); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 10px -4px rgba(0,0,0,.45);
color: var(--kc, #ffe36e); opacity: 1; font-size: 11.5px; font-weight: 900; letter-spacing: .16em; line-height: 1.2; text-shadow: none;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.twist-card h3 { margin-top: 8px; }
/* the full-screen twist flash label: same colour, a dark outline so it never melts into a bright frame */
.tb-label { -webkit-text-stroke: 1px rgba(30, 6, 46, .55); paint-order: stroke fill; }
/* ===== lookfeel-v013.css ===== */
/* =====================================================================
Pitch Panic v013 — smooth launch, longer loading, roomier twist tip, squarer corners.
Presentation only (plus the boot timing in main.js and the launch bridge in index.html).
===================================================================== */
/* ---------- 1. launch bridge: intro (= iOS launch image) → morph → loader ---------- */
/* the splash's own background, laid over the loader's rays; it fades away during the morph */
.loader .intro-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(120% 80% at 50% 35%, #4a1170 0%, #2a0a45 55%, #1a0630 100%);
opacity: 0; transition: opacity .9s ease; }
.loader::before, .loader::after { z-index: -1; }
.loader-inner { z-index: 1; }
/* the splash's "PITCH PANIC" caption, same font/size/tracking/position as the launch image */
.loader .intro-cap { position: absolute; left: 0; right: 0; top: var(--cap-top, 60%); z-index: 2; margin: 0; pointer-events: none; text-align: center;
font: 900 var(--cap-size, 27px)/1.1 -apple-system, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .12em; color: #fff8fe;
opacity: 0; transition: opacity .35s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.loader .intro-cap span { color: #ffe36e; }
/* the loader's logo is moved/scaled onto the splash logo; everything else waits at frame 0 */
.loader .logo-mark { animation: none; transition: transform .8s cubic-bezier(.22,.9,.24,1); }
.loader.intro .intro-bg, .loader.intro .intro-cap { opacity: 1; transition: none; }
.loader.intro .logo-mark { transform: translateY(var(--intro-dy, 0px)) scale(var(--intro-s, 1)); transition: none; }
.loader.intro .logo-mark img { animation: none; box-shadow: none; }
.loader.intro .lm-glow, .loader.intro .logo-mark::before { visibility: hidden; }
.loader.intro .loader-inner > :not(.logo-mark) { visibility: hidden; }
.loader.intro *, .loader.intro::before, .loader.intro::after { animation-play-state: paused !important; }
/* morph: caption lifts + fades, glow/sparkles come up, title/tagline/bar/status play their entrances */
.loader.morph .intro-cap { transform: translateY(-14px) scale(.96); }
.lm-glow, .logo-mark::before { transition: opacity .8s .25s ease; }
.loader.morph .wordmark span:first-child { animation-delay: .32s; }
.loader.morph .wordmark span:last-child { animation-delay: .44s, 1.4s; }
.loader.morph .loader-tag { animation-delay: .58s; }
.loader.morph .progress { animation: lfGrowM .5s .62s var(--out) both; }
@keyframes lfGrowM { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: none; } }
.loader.morph:has(#tapstart:not(.hidden)) .progress { animation: lfDone .7s ease-out both; }
.loader.morph .loader-msg { animation-delay: .7s; }
/* status line: each new message eases in instead of snapping */
.loader-msg.msg-in { animation: lfMsgIn .35s var(--out) both !important; }
@keyframes lfMsgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: .9; transform: none; } }
.loader:has(#tapstart:not(.hidden)) .loader-msg.msg-in { animation: lfMsgReady .35s var(--out) both !important; }
@keyframes lfMsgReady { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
#loadbar { transition: width .5s cubic-bezier(.3,.7,.3,1); }
/* hand-off to Home: a soft fade instead of a zoom pop */
.loader.leaving { transition: opacity .55s ease, transform .55s ease; transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) { .loader .logo-mark, .loader .intro-cap, .loader .intro-bg { transition: none; } }
/* ---------- 2. twist tip: shorter copy, larger type, room around the ⚡, still one line ---------- */
.prompt .twist-teaser { display: flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap;
font-size: clamp(14px, 4.05vw, 16.5px); letter-spacing: 0; padding: 13px 16px; margin-left: 0; margin-right: 0; }
.prompt .twist-teaser .tt-ico { font-size: 1.15em; line-height: 1; flex: none; }
.prompt .twist-teaser .tt-txt { min-width: 0; }
@media (max-width: 340px) { .prompt .twist-teaser { white-space: normal; text-align: center; } }
/* ---------- 3. squarer corners: one radius scale app-wide ---------- */
:root { --r-xs: 6px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-sheet: 20px; --btn-r: var(--r-md); --lf-r: var(--r-md); --lf-card-r: var(--r-lg); }
/* controls */
.btn, .btn.btn-xl, .btn.btn-lg, .btn.btn-block, .view.home .menu-grid, .view.home .resume-card, .resume-card, .install-hint, .toast, .secret, .twist-teaser,
.seg-btn, .segctl, .theme-tile, .sample, .sheet .sample, .vo-twist, .callout, .example, .step, .view.howto .step, .view.howto .callout, .view.howto .example,
.pitching .twist-locked, .twist-locked, .scores li, .dc-art, .view.decks .dc-art, .view.decks .deck-list.mine .dc-art, .deck-list.mine .dc-art { border-radius: var(--r-md) !important; }
.chip, .icon-btn, .pinput, .premove, .btn.btn-small, .btn-small, .ih-close, .segctl-btn, .segctl-thumb, .set-ico, .pnum, .view.howto .step-ico, .vote-cta .btn { border-radius: var(--r-sm) !important; }
.vote-cta .btn { border-radius: var(--r-md) !important; }
/* surfaces */
.card, .deck-card, .view.decks .deck-card, .vote-opt, .win-pitch, .twist-card, .potn, .prompt-card, .pitch-card { border-radius: var(--r-lg) !important; }
.prompt-card::after, .pitch-card::after { border-radius: 10px !important; }
.sheet { border-radius: var(--r-sheet) var(--r-sheet) 0 0 !important; }
@media (min-width: 700px) and (min-height: 600px) { .sheet { border-radius: var(--r-sheet) !important; } }
.vote-cta { border-radius: var(--r-lg) var(--r-lg) 0 0; }
/* pills & badges: rounded-square tags (tracks, switches, dots, avatars stay round) */
.pill, .hero-badge, .vh-pill, .badge, .deck-card .badge, .pc-divider, .plus-one, .tb-sub, .set-label span,
.twist-card .pc-label, .pitching .twist-card .pc-label { border-radius: 8px !important; }
.tw-kind, .pc-stamp, .view.decks .deck-card .badge, .view.decks .dc-title .badge.adult { border-radius: var(--r-xs) !important; }
.logo-mark img { border-radius: 24%; }
.handoff-phone { border-radius: 28px; }
/* ---------- 4. light polish ---------- */
.view.home .menu-grid .tile + .tile::before { top: 16px; bottom: 16px; }
.card-head { margin-bottom: 12px; }
.prompt .eyebrow { margin-bottom: 2px; }
.pills { gap: 6px; }
/* ===== lookfeel-v014.css ===== */
/* Pitch Panic look & feel v014 — paid deck UI (playtest stub), copy cleanup, refinement of
Deck Library, Settings and Instructions. Additive; uses v013 radius tokens. */
/* ---------- Deck Library ---------- */
.view.decks .scr-head .sub { max-width: 30ch; margin-inline: auto; line-height: 1.45; opacity: .82; }
.view.decks .set-label { margin-top: 22px; margin-bottom: 10px; }
.view.decks .deck-list { gap: 12px; }
.deck-card .dc-in { gap: 14px; align-items: center; }
.deck-card .dc-title b { letter-spacing: -.01em; }
.deck-card .dc-tag { line-height: 1.38; opacity: .8; margin-top: 3px; }
.deck-card .dc-meta { gap: 8px; margin-top: 9px; align-items: center; }
.deck-card .dc-count { opacity: .72; font-variant-numeric: tabular-nums; }
.badge.pack { background: rgba(255, 227, 110, .1); color: #ffe9a6; border: 1px solid rgba(255, 227, 110, .28);
font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 7px; border-radius: var(--r-xs, 6px) !important; }
.dc-buy { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 64px; min-height: 48px; padding: 6px 10px; border-radius: var(--r-md, 12px);
background: linear-gradient(180deg, #fff1a1, #ffd54a 55%, #f4b62a); color: #3a1300;
font-weight: 900; font-size: 15px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.05;
box-shadow: 0 3px 0 #b57a12, 0 8px 18px rgba(255, 196, 40, .22), inset 0 1px 0 rgba(255, 255, 255, .7);
transition: transform .12s ease, box-shadow .12s ease; }
.dc-buy small { font-size: 9.5px; font-weight: 900; letter-spacing: .14em; opacity: .72; margin-bottom: 2px; }
.deck-card:active .dc-buy { transform: translateY(2px); box-shadow: 0 1px 0 #b57a12, 0 4px 10px rgba(255, 196, 40, .18), inset 0 1px 0 rgba(255, 255, 255, .7); }
.deck-card.st-locked { border-color: rgba(255, 227, 110, .16) !important; }
.view.decks .foot { margin-top: 26px; line-height: 1.55; max-width: 32ch; margin-inline: auto; }
.foot-note { opacity: .7; font-size: .92em; }
/* setup chips: price instead of padlock */
.chip-price { margin-left: 4px; padding: 1px 6px; border-radius: var(--r-xs, 6px); background: rgba(255, 227, 110, .16);
color: #ffe36e; font-weight: 800; font-size: 11px; font-variant-numeric: tabular-nums; }
/* deck sheet + confirm sheet */
.sheet-deck .buy-note, .sheet-buy .sub { line-height: 1.45; }
.sheet-deck .buy-note { margin-top: 8px; font-size: 13px; opacity: .78; text-align: center; }
.sheet-buy { text-align: center; }
.sheet-buy .dc-ico.big { font-size: 54px; display: block; margin: 4px auto 8px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }
.sheet-buy h3 { margin-bottom: 8px; text-wrap: balance; }
.sheet-buy .sub { max-width: 32ch; margin: 0 auto 12px; }
.stub-note { display: inline-block; margin: 2px auto 16px; padding: 8px 12px; border-radius: var(--r-sm, 10px);
background: rgba(79, 195, 247, .1); border: 1px dashed rgba(79, 195, 247, .45); color: #bfe9ff; font-size: 13px; font-weight: 700; }
/* ---------- Settings ---------- */
.view.settings .set-label { margin-top: 24px; margin-bottom: 10px; }
.view.settings .set-label:first-of-type { margin-top: 10px; }
.view.settings .set-group { padding-block: 4px; }
.view.settings .toggle-row { min-height: 64px; gap: 14px; padding-block: 12px; }
.view.settings .toggle-row .tr-txt b { font-size: 16.5px; letter-spacing: -.005em; }
.view.settings .toggle-row .tr-txt small { margin-top: 3px; line-height: 1.38; opacity: .74; }
.view.settings .set-ico { width: 40px; height: 40px; flex: none; }
.view.settings .set-caption { margin: 10px auto 0; max-width: 34ch; text-align: center; font-size: 12.5px; line-height: 1.45; opacity: .72; }
.view.settings .set-group.pad { padding: 16px; }
.view.settings .set-sub { margin-bottom: 12px; align-items: baseline; }
.view.settings .set-sub small { opacity: .68; }
.view.settings .theme-grid { gap: 10px; }
.view.settings .foot { margin-top: 26px; line-height: 1.6; opacity: .7; }
/* ---------- Instructions ---------- */
.view.howto .steps { gap: 10px; }
.view.howto .step { padding: 16px 16px 16px 14px; gap: 14px; align-items: flex-start; }
.view.howto .step b { font-size: 17px; letter-spacing: -.01em; line-height: 1.25; }
.view.howto .step p { margin-top: 4px; line-height: 1.45; opacity: .8; }
.view.howto .step-ico { flex: none; }
.view.howto .callout { margin-top: 18px; padding: 16px 18px; line-height: 1.5; border-left: 3px solid #ffe36e !important;
background: linear-gradient(90deg, rgba(255, 227, 110, .1), rgba(255, 227, 110, .03)) !important; }
.view.howto .callout b { display: block; margin-bottom: 4px; letter-spacing: .01em; }
.view.howto .callout i { font-style: normal; font-weight: 800; color: #fff; }
.view.howto .example { margin-top: 14px; padding: 16px 18px; line-height: 1.5; }
.view.howto .ex-label { letter-spacing: .16em; font-size: 10.5px; opacity: .7; margin-bottom: 6px; }
.view.howto .ex-twist { margin-top: 12px; padding-top: 12px; }
/* locked deck cards: third grid column holds the price button */
.view.decks .deck-card.st-locked .dc-in { grid-template-columns: 56px minmax(0, 1fr) auto !important; gap: 12px; }
@media (max-width: 340px) { .view.decks .deck-card.st-locked .dc-in { grid-template-columns: 48px minmax(0, 1fr) auto !important; } .dc-buy { min-width: 56px; padding-inline: 8px; font-size: 14px; } }
/* ===== lookfeel-v015.css ===== */
/* Pitch Panic look & feel v015 — stationary launch logo, one Deck Library card template,
Settings/Instructions refinement. Additive; v013 radius tokens. */
/* ---------- 1. launch: the logo never moves ---------- */
/* no glide (v013), no pop (v012), no float/wobble (v009/app): the logo is laid out at the splash spot from frame 1 */
.loader .logo-mark, .loader.intro .logo-mark, .loader.morph .logo-mark { transform: none !important; transition: none !important; animation: none !important; }
.loader .logo-mark img { animation: none !important; transform: none !important; }
.loader.intro .logo-mark img { box-shadow: none; }
.loader .logo-mark img { transition: box-shadow .8s .2s ease; }
.loader.fixlogo { display: block; }
.loader.fixlogo .loader-inner { position: absolute; left: 0; right: 0; top: var(--stack-top, 30%); margin: 0 auto; padding: 0; }
.loader.fixlogo .logo-mark { margin-top: 0 !important; }
.loader.fixlogo .logo-mark img { width: var(--logo-px, 132px) !important; height: var(--logo-px, 132px) !important; }
.loader.fixlogo.tight .logo-mark { margin-bottom: 10px !important; }
.loader.fixlogo.tight .wordmark { font-size: 46px !important; }
.loader.fixlogo.tight .loader-tag { margin-top: 8px !important; }
.loader.fixlogo.tight .progress { margin-top: 16px !important; }
.loader.fixlogo.tight #tapstart { margin-top: 12px !important; }
.loader:not(.fixlogo) .intro-cap { display: none; }
/* the splash caption simply fades where it is (no lift) while the real title fades in below the logo */
.loader.morph .intro-cap { transform: none !important; }
.loader.morph .wordmark span:first-child { animation: lfFadeUp .55s .3s var(--out) both !important; }
.loader.morph .wordmark span:last-child { animation: lfPanicIn .6s .42s var(--out) both, markTilt 5s 1.4s ease-in-out infinite !important; }
@keyframes lfPanicIn { from { opacity: 0; transform: rotate(-3deg) scale(1.08); } to { opacity: 1; transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .loader.morph .wordmark span { animation: none !important; } }
/* ---------- 2. Deck Library: one card template ---------- */
/* icon | title / tagline (2 lines reserved) / badge row / combos row | fixed 64px action column */
.view.decks .deck-card .dc-in, .view.decks .deck-list.mine .deck-card .dc-in, .view.decks .deck-card.st-locked .dc-in {
grid-template-columns: 56px minmax(0, 1fr) 64px !important; gap: 14px !important; align-items: center;
min-height: 0 !important; padding: 16px 14px 16px 16px !important; }
.view.decks .deck-card .dc-art { width: 56px !important; height: 56px !important; align-self: center; }
.view.decks .deck-card .dc-body { display: flex; flex-direction: column; min-width: 0; }
.view.decks .deck-card .dc-title { min-height: 22px; align-items: center; }
.view.decks .deck-card .dc-tag { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
min-height: calc(2 * 1.38em); margin-top: 4px; }
.view.decks .deck-card .dc-meta { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-top: 10px !important; }
.view.decks .deck-card .dc-badges { display: flex; gap: 6px; min-height: 20px; align-items: center; flex-wrap: nowrap; }
.view.decks .deck-card .dc-badges .badge { margin: 0 !important; white-space: nowrap; }
.view.decks .deck-card .dc-count { margin: 0 !important; line-height: 1.2; }
.view.decks .deck-card .dc-chev { justify-self: center; text-align: center !important; width: 100%; }
.view.decks .deck-card .dc-buy { justify-self: stretch; min-width: 0; width: 64px; }
.badge.test { background: rgba(79, 195, 247, .14); color: #bfe9ff; border: 1px solid rgba(79, 195, 247, .35);
font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 7px; border-radius: var(--r-xs, 6px) !important; }
.view.decks .badge.ok, .view.decks .badge.pack, .view.decks .badge.adult { font-size: 10px; letter-spacing: .08em; padding: 3px 7px; line-height: 1.3; }
/* mine vs more differ only in tint, never in size */
.view.decks .deck-list .deck-card { min-height: 0; }
@media (max-width: 340px) {
.view.decks .deck-card .dc-in, .view.decks .deck-list.mine .deck-card .dc-in, .view.decks .deck-card.st-locked .dc-in { grid-template-columns: 46px minmax(0, 1fr) 58px !important; gap: 10px !important; }
.view.decks .deck-card .dc-art { width: 46px !important; height: 46px !important; }
.view.decks .deck-card .dc-buy { width: 58px; }
}
/* ---------- 3. Settings ---------- */
.view.settings .set-group { padding: 2px 16px !important; }
.view.settings .toggle-row { min-height: 66px; padding-block: 13px; }
.view.settings .toggle-row + .toggle-row, .view.settings .gp-timer + .toggle-row { border-top: 1px solid rgba(255, 255, 255, .08); }
.view.settings .gp-timer { padding-bottom: 14px; }
.view.settings .gp-head { min-height: 0 !important; padding-bottom: 12px !important; pointer-events: none; }
.view.settings .gp-head:active { transform: none !important; }
.view.settings .gp-timer .segctl { margin: 0; }
.view.settings .set-caption { margin-top: 12px; }
.view.settings .set-label { margin-top: 28px !important; }
.view.settings .set-label:first-of-type { margin-top: 10px !important; }
/* ---------- 4. Instructions ---------- */
.view.howto { gap: 14px; }
.view.howto .steps { gap: 10px; }
/* number rides on the icon instead of taking its own column */
.view.howto .step, .view.howto .step:nth-child(n) { grid-template-columns: 46px minmax(0, 1fr) !important; gap: 14px !important; padding: 16px 18px 16px 16px !important; align-items: center !important; }
.view.howto .step::before { position: absolute; left: 10px; top: 10px; z-index: 2; width: 20px !important; min-height: 20px !important; margin: 0 !important;
border-radius: 6px; background: #ffe36e; color: #3a1300 !important; font-size: 10px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.view.howto .step { position: relative; }
.view.howto .step-ico { width: 46px !important; min-height: 46px !important; font-size: 26px !important; }
.view.howto .step b { font-size: 16.5px !important; }
.view.howto .step p { margin-top: 3px !important; font-size: 14px; line-height: 1.45 !important; }
.view.howto .callout { margin-top: 10px; padding: 18px !important; border-left-width: 1px !important; border-left-color: color-mix(in srgb, #ffe36e 30%, transparent) !important;
background: linear-gradient(160deg, rgba(255, 227, 110, .12), rgba(255, 227, 110, .03)) !important; }
.view.howto .co-head { display: block; margin: 0 0 12px !important; color: #ffe36e !important; font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; }
.view.howto .co-flow { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; counter-reset: co; }
.view.howto .co-flow li { counter-increment: co; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-sm, 10px);
background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--ink); font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.view.howto .co-flow li::before { content: counter(co); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #ffe36e; color: #3a1300; font-size: 10.5px; font-weight: 900; }
.view.howto .co-flow li i { font-style: normal; }
.view.howto .co-txt { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.view.howto .example { padding: 18px !important; }
.view.howto .ex-label { display: block; margin-bottom: 10px !important; font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; }
.view.howto .ex-line { margin: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline; line-height: 1.4; font-size: 15px; }
.view.howto .ex-line + .ex-line { margin-top: 6px; }
.view.howto .ex-k { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: .8; }
.view.howto .ex-twist { display: grid !important; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline; margin-top: 14px !important; padding-top: 12px !important; }
.view.howto .ex-twist .ex-k { color: #ffe36e; opacity: .85; }
@media (max-width: 359px) { .view.howto .co-flow li { padding: 6px 8px; font-size: 12.5px; } }
/* spotlight + backdrop glow centred on the (stationary) logo */
.loader.fixlogo::after { top: var(--logo-y, 30%); }
.loader.fixlogo { background: radial-gradient(90% 60% at 50% var(--logo-y, 32%), color-mix(in srgb, var(--bg1) 85%, var(--pop)), var(--bg0) 72%); }
/* step number tucks onto the icon's top-left corner (icon is vertically centred) */
.view.howto .step::before { left: 8px !important; top: calc(50% - 31px) !important; }
/* deck cards: a slimmer action column leaves the tagline two full lines */
.view.decks .deck-card .dc-in, .view.decks .deck-list.mine .deck-card .dc-in, .view.decks .deck-card.st-locked .dc-in { grid-template-columns: 56px minmax(0, 1fr) 58px !important; gap: 12px !important; padding-right: 12px !important; }
.view.decks .deck-card .dc-buy { width: 58px; padding-inline: 6px; }
.view.decks .deck-card .dc-tag { font-size: 13px; }
@media (max-width: 400px) {
.view.decks .deck-card .dc-in, .view.decks .deck-list.mine .deck-card .dc-in, .view.decks .deck-card.st-locked .dc-in { grid-template-columns: 50px minmax(0, 1fr) 54px !important; gap: 11px !important; padding-left: 14px !important; padding-right: 11px !important; }
.view.decks .deck-card .dc-art { width: 50px !important; height: 50px !important; }
.view.decks .deck-card .dc-buy { width: 54px; font-size: 14px; }
}
.view.decks .deck-card { border: 0 !important; }
/* ===== lookfeel-v016.css ===== */
/* Pitch Panic look & feel v016 — raised launch stack, no scrollbars, roomier Settings + Deck Library.
Additive layer after lookfeel-v015.css; v013 radius tokens untouched. */
/* ---------- 1. launch: splash + loader rest higher (phones, portrait) ---------- */
/* the position itself comes from the index.html launch bridge (SHIFT*H, matching splash/v016); here only the
splash backdrop follows it so the first paint equals the new iOS launch image */
.loader .intro-bg { background: radial-gradient(120% 80% at 50% var(--intro-bg-y, 35%), #4a1170 0%, #2a0a45 55%, #1a0630 100%); }
/* ---------- 2. no visible scrollbars on scrolling menus (scrolling, momentum + keyboard unchanged) ---------- */
.view.scroll, .view.settings, .view.decks, .sheet, .vote-list,
.sheet:has(> .sheet-deck > .sheet-actions > [data-action="noop"][disabled]) { scrollbar-width: none !important; -ms-overflow-style: none; }
.view.scroll::-webkit-scrollbar, .view.settings::-webkit-scrollbar, .view.decks::-webkit-scrollbar,
.sheet::-webkit-scrollbar, .vote-list::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; background: transparent; }
/* ---------- 3. Settings: more air between sections and inside rows ---------- */
.view.settings .set-label { margin-top: 34px !important; margin-bottom: 14px !important; }
.view.settings .set-label:first-of-type { margin-top: 14px !important; }
.view.settings .set-group { padding: 4px 18px !important; }
.view.settings .toggle-row { min-height: 76px; padding-block: 16px; gap: 14px; }
.view.settings .toggle-row .tr-txt { gap: 4px; }
.view.settings .toggle-row .tr-txt small { line-height: 1.4; }
.view.settings .gp-timer { padding-top: 4px; padding-bottom: 18px; }
.view.settings .gp-head { padding-bottom: 14px !important; }
.view.settings .gp-timer .segctl { margin-top: 2px; }
.view.settings .set-caption { margin: 14px 8px 0; line-height: 1.5; }
.view.settings .theme-grid { gap: 12px; }
.view.settings > .foot { margin-top: 30px; }
/* ---------- 4. Deck Library: same one-template card, more breathing room ---------- */
.view.decks .scr-head { margin-bottom: 6px; }
.view.decks .set-label { margin-top: 30px !important; margin-bottom: 14px !important; }
.view.decks .set-label:first-of-type { margin-top: 18px !important; }
.view.decks .deck-list { gap: 14px !important; }
.view.decks .deck-card .dc-in, .view.decks .deck-list.mine .deck-card .dc-in, .view.decks .deck-card.st-locked .dc-in { padding-top: 20px !important; padding-bottom: 20px !important; }
.view.decks .deck-card .dc-tag { margin-top: 6px; line-height: 1.42; min-height: calc(2 * 1.42em); }
.view.decks .deck-card .dc-meta { margin-top: 12px !important; gap: 7px !important; }
.view.decks > .foot { margin-top: 26px; }
/* TEST chip is never shown to players (main.js no longer emits it; this guards stale markup) */
.view.decks .badge.test { display: none !important; }
/* ===== lookfeel-v017.css ===== */
/* Pitch Panic look & feel v017 — premium Deck Library cards, unbroken bottom CTA docks, calmer loader backdrop.
Additive layer after lookfeel-v016.css; v013 radius tokens (xs 6 / sm 10 / md 12 / lg 16) untouched. */
/* =====================================================================
1. BOTTOM STICKY CTA DOCKS (How to play, Game Setup, Round results)
Bug (Michael's screenshot): scrolled to the end, iOS rubber-bands the scroller, the sticky dock rides up with the
content and its fade stops, so the bright stage background shows under the button.
Fix = three layers that all reach the very bottom of the screen:
a) the scroller itself paints a fixed (non-scrolling) dark floor behind its content — anything revealed by a
bounce is that floor, never the stage;
b) the dock's scrim casts a solid "skirt" (outer box-shadow, no layout/scroll size impact) below itself;
c) overscroll-behavior-y:none stops the bottom bounce where iOS supports it (16+).
The scrim is also a smoother eased fade that ends in solid --bg0 through the home-indicator safe area.
===================================================================== */
.view.scroll:has(> .sticky-cta) {
overscroll-behavior-y: none;
background-image: linear-gradient(to top, var(--bg0) 0, var(--bg0) calc(var(--sab) + 56px),
color-mix(in srgb, var(--bg0) 70%, transparent) calc(var(--sab) + 92px), transparent calc(var(--sab) + 150px));
background-repeat: no-repeat; background-attachment: scroll; background-position: 0 100%; background-size: 100% 100%;
}
.view.scroll > .sticky-cta {
padding-top: 34px !important;
padding-bottom: calc(var(--sab) + 18px) !important;
background: linear-gradient(to bottom,
color-mix(in srgb, var(--bg0) 0%, transparent) 0,
color-mix(in srgb, var(--bg0) 10%, transparent) 9%,
color-mix(in srgb, var(--bg0) 28%, transparent) 18%,
color-mix(in srgb, var(--bg0) 52%, transparent) 27%,
color-mix(in srgb, var(--bg0) 74%, transparent) 36%,
color-mix(in srgb, var(--bg0) 90%, transparent) 45%,
var(--bg0) 56%, var(--bg0) 100%) !important;
box-shadow: 0 140px 0 60px var(--bg0);
}
/* the button sits on the solid part of the dock, never on the fade edge */
.view.scroll > .sticky-cta .btn { position: relative; }
/* Round results: same dock, its own side bleed stays */
.view.result.scroll > .sticky-cta { padding-top: 34px !important; }
/* =====================================================================
2. DECK LIBRARY — one premium card template
header: icon | title + tagline (2 lines reserved) footer: status chip · combos ········ action (BUY or ›)
===================================================================== */
.view.decks .scr-head { margin-bottom: 2px; }
.view.decks .set-label { margin-top: 36px !important; margin-bottom: 14px !important; font-size: 11.5px !important; letter-spacing: .16em !important;
gap: 10px !important; line-height: 20px; }
.view.decks .set-label:first-of-type { margin-top: 22px !important; }
.view.decks .set-label span { min-width: 22px; height: 20px; padding: 0 7px !important; display: inline-grid; place-items: center;
border-radius: var(--r-xs) !important; font-size: 11px; font-weight: 800; letter-spacing: 0; color: var(--ink); background: rgba(255,255,255,.09) !important; }
.view.decks .set-label::after { background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0)) !important; }
.view.decks .deck-list { gap: 14px !important; }
.view.decks .deck-card.dk {
display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; min-height: 0; padding: 18px 18px 14px !important;
border: 1px solid rgba(255,255,255,.09) !important; border-radius: var(--r-lg) !important;
background:
radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--accent) 17%, transparent) 0%, transparent 55%),
linear-gradient(180deg, rgba(48,18,76,.86) 0%, rgba(32,10,54,.9) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(0,0,0,.25), 0 18px 34px -24px rgba(0,0,0,.85) !important;
transition: transform .14s var(--out, ease), border-color .2s ease, box-shadow .2s ease !important;
}
.view.decks .deck-card.dk::after, .view.decks .deck-card.dk::before { display: none !important; }
.view.decks .deck-list.mine .deck-card.dk { border-color: color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,.1)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 38px -26px var(--accent), 0 18px 34px -24px rgba(0,0,0,.8) !important; }
.view.decks .deck-card.dk.st-locked { border-color: rgba(255,255,255,.085) !important; }
.view.decks .deck-card.dk:active { transform: scale(.985) !important; }
@media (hover: hover) { .view.decks .deck-card.dk:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,.12)) !important; } }
.view.decks .deck-card.dk:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dk-main { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px; align-items: start; }
.dk-art { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; position: relative; overflow: hidden;
background: radial-gradient(120% 120% at 28% 18%, color-mix(in srgb, var(--accent) 80%, #fff) 0%, var(--accent) 42%, color-mix(in srgb, var(--accent) 55%, #12001f) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -5px 12px rgba(0,0,0,.2), 0 10px 20px -12px color-mix(in srgb, var(--accent) 85%, #000), 0 0 0 1px rgba(0,0,0,.18); }
.dk-art::before { content: ""; position: absolute; inset: 2px 6px auto; height: 42%; border-radius: 12px 12px 50% 50%; background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,0)); opacity: .7; }
.dk-ico { position: relative; font-size: 31px; line-height: 1; filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
.dk-text { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.dk-title { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.dk-title b { font-size: 18px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-adult { flex: none; padding: 3px 6px 2px; border-radius: var(--r-xs); background: #b3264f; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .04em; line-height: 1.2; }
.dk-tag { margin-top: 5px; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.42; min-height: calc(2 * 1.42em);
display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: pretty; }
.dk-foot { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 16px; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.075); }
.dk-chip { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-xs);
font-size: 10.5px; font-weight: 900; letter-spacing: .08em; line-height: 1; white-space: nowrap; }
.dk-chip.ok { color: #8ff5d9; background: rgba(92,242,200,.1); box-shadow: inset 0 0 0 1px rgba(92,242,200,.24); }
.dk-chip.pack { color: #ffe9a6; background: rgba(255,227,110,.08); box-shadow: inset 0 0 0 1px rgba(255,227,110,.26); }
.dk-chip.soon { color: #e3d8ed; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.dk-chip.adult { color: #fff; background: #b3264f; }
.dk-count { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 2px; line-height: 1; white-space: nowrap; }
.dk-count b { color: var(--ink); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; opacity: .94; }
.dk-count small { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.dk-buy { flex: none; margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; height: 40px; padding: 0 14px; align-items: center; border-radius: var(--r-sm);
background: linear-gradient(180deg, #fff2a6 0%, #ffd84f 52%, #f6b92c 100%); color: #3a1300;
box-shadow: 0 3px 0 #b57a12, 0 10px 18px -8px rgba(255,190,40,.45), inset 0 1px 0 rgba(255,255,255,.75);
transition: transform .12s ease, box-shadow .12s ease; }
.dk-buy small { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; opacity: .7; }
.dk-buy b { font-size: 16px; font-weight: 900; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.deck-card.dk:active .dk-buy { transform: translateY(2px); box-shadow: 0 1px 0 #b57a12, 0 4px 10px -6px rgba(255,190,40,.4), inset 0 1px 0 rgba(255,255,255,.75); }
.dk-chev { flex: none; margin-left: auto; width: 40px; height: 40px; border-radius: var(--r-sm); position: relative;
background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.dk-chev::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -6px;
border-top: 2.25px solid currentColor; border-right: 2.25px solid currentColor; border-radius: 1px; transform: rotate(45deg); color: rgba(255,255,255,.72); }
.deck-list.mine .dk-chev { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent); }
@media (max-width: 359px) {
.view.decks .deck-card.dk { padding: 16px 14px 12px !important; }
.dk-main { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
.dk-art { width: 52px; height: 52px; border-radius: 12px; } .dk-ico { font-size: 27px; }
.dk-title b { font-size: 16.5px; } .dk-tag { font-size: 12.5px; }
.dk-foot { gap: 8px; } .dk-chip { padding: 0 7px; font-size: 9.5px; } .dk-count b { font-size: 12px; } .dk-count small { font-size: 9px; letter-spacing: .1em; }
.dk-buy { padding: 0 10px; gap: 4px; } .dk-buy b { font-size: 15px; }
}
.view.decks > .foot { margin-top: 30px !important; }
/* =====================================================================
3. LOADER BACKDROP — smoother, centred on the (stationary) logo. Background-only motion; the logo never moves.
v016 problems: the rays layer rotated about the screen centre while its conic origin sat at 32% (rays swung),
hard-edged ray stripes shimmered while turning, the sparkle ring spun as one rigid wheel, lower half was flat.
===================================================================== */
.loader::before { display: none !important; animation: none !important; } /* replaced by .lf-rays */
.loader .logo-mark::before { display: none !important; animation: none !important; } /* replaced by .sp twinkles */
.lf-amb { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --u: min(1px, calc(100vw / 390)); }
.lf-amb > * { position: absolute; display: block; will-change: transform, opacity; }
/* rays: soft-edged beams that turn about the logo itself */
.lf-rays { left: 50%; top: var(--logo-y, 32%); width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; border-radius: 50%;
background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.075) 5deg, rgba(255,255,255,0) 10deg, rgba(255,255,255,0) 20deg);
-webkit-mask: radial-gradient(closest-side, rgba(0,0,0,0) 9%, #000 20%, rgba(0,0,0,.55) 42%, rgba(0,0,0,0) 72%);
mask: radial-gradient(closest-side, rgba(0,0,0,0) 9%, #000 20%, rgba(0,0,0,.55) 42%, rgba(0,0,0,0) 72%);
animation: lfRaysTurn 120s linear infinite, lfRaysGlow 9s ease-in-out infinite; }
@keyframes lfRaysTurn { to { transform: rotate(360deg); } }
@keyframes lfRaysGlow { 0%, 100% { opacity: .62; } 50% { opacity: .95; } }
/* aurora: three big soft colour fields drifting very slowly */
.au { width: 110vmax; height: 110vmax; border-radius: 50%; opacity: .62; }
.au1 { left: -55vmax; top: -40vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--pop) 34%, transparent), transparent 70%); animation: lfAu1 26s ease-in-out infinite alternate; }
.au2 { right: -60vmax; top: 18%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cool) 18%, transparent), transparent 70%); animation: lfAu2 31s ease-in-out infinite alternate; }
.au3 { left: -30vmax; bottom: -75vmax; background: radial-gradient(closest-side, color-mix(in srgb, #7c3aed 40%, transparent), transparent 70%); animation: lfAu3 23s ease-in-out infinite alternate; }
@keyframes lfAu1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vw, 6vh, 0) scale(1.08); } }
@keyframes lfAu2 { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-12vw, 10vh, 0) scale(.95); } }
@keyframes lfAu3 { from { transform: translate3d(0, 0, 0) scale(.96); } to { transform: translate3d(18vw, -6vh, 0) scale(1.06); } }
/* stage floor: a low warm glow so the lower half has depth */
.lf-floor { left: -20%; right: -20%; bottom: -12%; height: 46%; border-radius: 50%;
background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--pop) 34%, transparent) 0%, color-mix(in srgb, var(--pop) 10%, transparent) 55%, transparent 75%);
animation: lfFloor 8s ease-in-out infinite; }
@keyframes lfFloor { 0%, 100% { opacity: .65; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.06); } }
/* motes: soft specks rising slowly through the light */
.mo { bottom: -12px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--c), var(--a)) 0%, rgba(var(--c), 0) 70%);
animation-name: lfRise; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes lfRise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 70% { opacity: .8; }
100% { transform: translate3d(var(--dx), -78vh, 0); opacity: 0; } }
/* twinkles: four-point stars that bloom and fade one at a time around the logo (they don't orbit) */
.sp { margin: -6px 0 0 -6px; background: var(--c); opacity: 0;
clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
filter: drop-shadow(0 0 4px var(--c)); animation: lfTwinkle2 4.2s ease-in-out infinite; }
@keyframes lfTwinkle2 { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 18% { opacity: 1; transform: scale(1) rotate(25deg); } 40% { opacity: 0; transform: scale(.4) rotate(55deg); } }
/* spotlight pool: slower, gentler breathing */
.loader::after { animation: lfPool2 7s ease-in-out infinite !important; }
@keyframes lfPool2 { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
/* while the splash-matched intro holds, everything waits (v013 pauses .loader.intro *); fade the layer up with the morph */
.lf-amb { opacity: 1; transition: opacity 1.1s ease; }
.loader.intro .lf-amb { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .lf-amb > * { animation: none !important; } .mo, .sp { display: none; } }
.lf-amb .m1 { left: 4.1%; width: 9.1px; height: 9.1px; --dx: 13px; --a: 0.82; --c: 255,227,110; animation-duration: 18.7s; animation-delay: -5.4s; }
.lf-amb .m2 { left: 9.6%; width: 9.1px; height: 9.1px; --dx: 30px; --a: 0.79; --c: 255,82,204; animation-duration: 14.4s; animation-delay: -12.4s; }
.lf-amb .m3 { left: 20.8%; width: 6.6px; height: 6.6px; --dx: -14px; --a: 0.8; --c: 255,255,255; animation-duration: 19.0s; animation-delay: -1.2s; }
.lf-amb .m4 { left: 25.4%; width: 9.0px; height: 9.0px; --dx: -32px; --a: 0.71; --c: 255,255,255; animation-duration: 16.5s; animation-delay: -5.5s; }
.lf-amb .m5 { left: 31.2%; width: 4.6px; height: 4.6px; --dx: -31px; --a: 0.77; --c: 255,227,110; animation-duration: 18.5s; animation-delay: -8.8s; }
.lf-amb .m6 { left: 41.3%; width: 9.8px; height: 9.8px; --dx: -34px; --a: 0.75; --c: 255,255,255; animation-duration: 11.1s; animation-delay: -4.1s; }
.lf-amb .m7 { left: 43.8%; width: 7.0px; height: 7.0px; --dx: 17px; --a: 0.5; --c: 92,242,200; animation-duration: 15.6s; animation-delay: -0.1s; }
.lf-amb .m8 { left: 51.8%; width: 5.6px; height: 5.6px; --dx: -18px; --a: 0.53; --c: 255,255,255; animation-duration: 18.7s; animation-delay: -1.1s; }
.lf-amb .m9 { left: 61.2%; width: 7.5px; height: 7.5px; --dx: 21px; --a: 0.58; --c: 255,255,255; animation-duration: 15.4s; animation-delay: -2.0s; }
.lf-amb .m10 { left: 66.7%; width: 9.8px; height: 9.8px; --dx: -11px; --a: 0.75; --c: 255,82,204; animation-duration: 15.6s; animation-delay: -4.3s; }
.lf-amb .m11 { left: 73.9%; width: 7.0px; height: 7.0px; --dx: -19px; --a: 0.55; --c: 92,242,200; animation-duration: 13.2s; animation-delay: -8.4s; }
.lf-amb .m12 { left: 83.3%; width: 8.5px; height: 8.5px; --dx: -22px; --a: 0.64; --c: 255,255,255; animation-duration: 14.9s; animation-delay: -9.3s; }
.lf-amb .m13 { left: 91.6%; width: 10.1px; height: 10.1px; --dx: 14px; --a: 0.72; --c: 255,227,110; animation-duration: 17.5s; animation-delay: -3.2s; }
.lf-amb .m14 { left: 98.4%; width: 4.5px; height: 4.5px; --dx: 20px; --a: 0.47; --c: 255,82,204; animation-duration: 18.8s; animation-delay: -5.7s; }
.lf-amb .s1 { left: calc(50% + var(--u, 1px) * -104); top: calc(var(--logo-y, 32%) + var(--u, 1px) * -58); width: 9px; height: 9px; --c: #fff; animation-delay: 0s; }
.lf-amb .s2 { left: calc(50% + var(--u, 1px) * 98); top: calc(var(--logo-y, 32%) + var(--u, 1px) * -74); width: 11px; height: 11px; --c: #ffe36e; animation-delay: 0.9s; }
.lf-amb .s3 { left: calc(50% + var(--u, 1px) * 112); top: calc(var(--logo-y, 32%) + var(--u, 1px) * 40); width: 8px; height: 8px; --c: #fff; animation-delay: 1.8s; }
.lf-amb .s4 { left: calc(50% + var(--u, 1px) * -96); top: calc(var(--logo-y, 32%) + var(--u, 1px) * 62); width: 10px; height: 10px; --c: #ffe36e; animation-delay: 2.6s; }
.lf-amb .s5 { left: calc(50% + var(--u, 1px) * -30); top: calc(var(--logo-y, 32%) + var(--u, 1px) * -112); width: 7px; height: 7px; --c: #fff; animation-delay: 3.4s; }
.lf-amb .s6 { left: calc(50% + var(--u, 1px) * 44); top: calc(var(--logo-y, 32%) + var(--u, 1px) * 118); width: 7px; height: 7px; --c: #ff9be0; animation-delay: 1.3s; }
/* ===== lookfeel-v018.css ===== */
/* Pitch Panic look & feel v018 — final polish pass. Additive layer after lookfeel-v017.css.
Michael (t79u): keep refining the deck cards; yellow BUY buttons less 3D / chunky / bubbly.
Scope: Deck Library cards, deck detail + unlock sheets, commerce CTAs, small global consistency. No logic changes. */
/* =====================================================================
1. DECK LIBRARY CARDS — lighter, more editorial; same two-part layout + uniform height as v017
===================================================================== */
.view.decks .deck-list { gap: 12px !important; }
.view.decks .deck-card.dk {
padding: 18px 18px 14px 18px !important;
border: 1px solid rgba(255,255,255,.08) !important; border-radius: var(--r-lg) !important;
background:
radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 60%),
linear-gradient(180deg, rgba(44,16,70,.84) 0%, rgba(30,9,50,.9) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 28px -22px rgba(0,0,0,.9) !important;
}
.view.decks .deck-list.mine .deck-card.dk { border-color: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.08)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 30px -24px var(--accent), 0 14px 28px -22px rgba(0,0,0,.85) !important; }
/* icon tile: flatter, less glossy — a calm coloured square with a hairline, no bubble highlight */
.dk-main { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; }
.dk-art { width: 56px; height: 56px; border-radius: 13px;
background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 48%, color-mix(in srgb, var(--accent) 72%, #1a0530) 100%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.32), 0 8px 16px -12px color-mix(in srgb, var(--accent) 80%, #000); }
.dk-art::before { display: none; }
.dk-ico { font-size: 29px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)); }
/* type: slightly lighter title weight, calmer tagline */
.dk-title { gap: 8px; min-height: 22px; }
.dk-title b { font-size: 17.5px; font-weight: 800; letter-spacing: -.005em; }
.dk-tag { margin-top: 4px; font-size: 13.5px; font-weight: 600; line-height: 1.4; min-height: calc(2 * 1.4em); color: color-mix(in srgb, var(--muted) 92%, #fff); }
/* 18+ tag: a refined outlined tag instead of a hot red pill */
.dk-adult { padding: 0 6px; height: 18px; display: inline-grid; place-items: center; border-radius: 5px;
background: rgba(255,92,138,.14); color: #ff9dbb; box-shadow: inset 0 0 0 1px rgba(255,120,160,.45);
font-size: 10px; font-weight: 900; letter-spacing: .06em; line-height: 1; }
/* footer: hairline, chip + combos left, action right, all centred on one line */
.dk-foot { gap: 12px; min-height: 38px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.065); }
.dk-chip { height: 22px; padding: 0 8px; border-radius: 5px; font-size: 10px; letter-spacing: .1em; }
.dk-chip.pack { color: #f3d98a; background: rgba(255,214,90,.07); box-shadow: inset 0 0 0 1px rgba(255,214,90,.2); }
.dk-chip.ok { color: #8eecd2; background: rgba(92,242,200,.08); box-shadow: inset 0 0 0 1px rgba(92,242,200,.2); }
.dk-count { gap: 3px; padding-left: 0; }
.dk-count b { font-size: 13px; font-weight: 800; opacity: .9; }
.dk-count small { font-size: 9px; letter-spacing: .14em; opacity: .62; }
/* BUY: flat gold pill — no lip, no bevel, no glow; still the clear primary action on the card */
.dk-buy { height: 36px; padding: 0 14px; gap: 6px; border-radius: 9px;
background: linear-gradient(180deg, #ffe07a 0%, #ffd04f 100%); color: #2e1000;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.28);
transition: transform .12s ease, filter .12s ease; }
.dk-buy small { font-size: 10px; font-weight: 800; letter-spacing: .12em; opacity: .62; }
.dk-buy b { font-size: 15px; font-weight: 800; letter-spacing: 0; }
.deck-card.dk:active .dk-buy { transform: scale(.97); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); filter: brightness(.97); }
@media (hover: hover) { .view.decks .deck-card.dk:hover .dk-buy { filter: brightness(1.04); } }
/* chevron tile matches the BUY pill's height so the action column reads the same on every card */
.dk-chev { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.dk-chev::before { width: 7px; height: 7px; margin: -3.5px 0 0 -5px; border-width: 2px !important; color: rgba(255,255,255,.66); }
/* section headers: quieter count chip, consistent rhythm */
.view.decks .set-label { margin-top: 32px !important; margin-bottom: 12px !important; color: color-mix(in srgb, var(--muted) 85%, #fff); }
.view.decks .set-label:first-of-type { margin-top: 20px !important; }
.view.decks .set-label span { background: rgba(255,255,255,.07) !important; color: color-mix(in srgb, var(--ink) 85%, transparent); font-size: 10.5px; height: 18px; min-width: 20px; padding: 0 6px !important; }
.view.decks > .foot { margin-top: 28px !important; line-height: 1.5; }
@media (max-width: 359px) {
.dk-main { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
.dk-art { width: 50px; height: 50px; border-radius: 12px; } .dk-ico { font-size: 26px; }
.dk-title b { font-size: 16px; } .dk-buy { padding: 0 10px; gap: 4px; } .dk-buy b { font-size: 14px; }
}
/* =====================================================================
2. DECK DETAIL + UNLOCK SHEETS — same language as the list cards
===================================================================== */
.sheet .sd { display: flex; flex-direction: column; align-items: center; }
.sheet .sd-art { width: 64px; height: 64px; border-radius: 15px; margin: 8px auto 14px; flex: none; }
.sheet .sd-art .dk-ico { font-size: 34px; }
.sheet .sd > h3 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
.sheet .sd > h3 .dk-adult { font-size: 10px; }
.sheet .sd > p.sub { margin: 0 auto; font-size: 14.5px; line-height: 1.45; }
.sd-meta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.sd-combos { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.sd-combos b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.sd-label { align-self: stretch; margin: 20px 2px 8px; text-align: left; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); opacity: .85; }
.sheet .sd .samples { align-self: stretch; margin-top: 0; gap: 8px; }
.sheet .sd .sample { position: relative; padding: 12px 14px 12px 16px; border-radius: var(--r-md); font-size: 14px; line-height: 1.4; font-weight: 600;
background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sheet .sd .sample::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: .8; }
.sheet .sd .sample b { color: var(--ink); font-weight: 800; }
.sheet .sd .sample span { margin-top: 5px; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.sheet .sd > p.sub:not(:first-of-type) { margin-top: 12px; font-size: 13px; }
.sheet .sd .sheet-actions { align-self: stretch; margin-top: 20px; }
.sheet .sd .sheet-actions .sub, .sheet-deck .buy-note { font-size: 12px; line-height: 1.45; opacity: .85; margin: 2px auto 4px; }
.sheet .sd .sheet-ok { margin: 4px 0 2px; }
/* unlock confirm */
.sheet .sheet-buy.sd > h3 { font-size: 21px; }
.sheet .sheet-buy .stub-note { margin: 14px auto 0; padding: 8px 12px; border-radius: var(--r-sm); font-size: 13px; background: rgba(92,242,200,.07); box-shadow: inset 0 0 0 1px rgba(92,242,200,.18); color: #b9f5e4; }
/* commerce CTAs (BUY · $x, UNLOCK LOCALLY, I'M 18 OR OLDER): flat gold to match the card pill — no thick lip */
.sheet .btn.btn-primary[data-action="buy"], .sheet .btn.btn-primary[data-action="unlock-local"], .sheet .btn.btn-primary[data-action="age-ok"] {
background-image: linear-gradient(180deg, #ffe27e 0%, #ffd04f 100%) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 1px 0 rgba(150,90,0,.55), 0 10px 22px -14px rgba(255,200,60,.55) !important;
text-shadow: none !important; border-radius: var(--r-md); letter-spacing: .06em; }
.sheet .btn.btn-primary[data-action="buy"]::after, .sheet .btn.btn-primary[data-action="unlock-local"]::after, .sheet .btn.btn-primary[data-action="age-ok"]::after { display: none !important; }
.sheet .btn.btn-primary[data-action="buy"]:not(:disabled):active, .sheet .btn.btn-primary[data-action="unlock-local"]:not(:disabled):active, .sheet .btn.btn-primary[data-action="age-ok"]:not(:disabled):active {
transform: scale(.985) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) !important; filter: brightness(.97); }
/* =====================================================================
3. GAME SETUP — deck chip price tags flat to match
===================================================================== */
.view.setup .deck-chip .chip-price { box-shadow: inset 0 0 0 1px rgba(255,214,90,.28) !important; background: rgba(255,214,90,.12) !important; color: #f6dc8a !important; text-shadow: none !important; }
/* =====================================================================
4. GLOBAL — balanced short copy (no single-word orphans in notes / subs)
===================================================================== */
.sheet .sub, .sheet .buy-note, .view .scr-head .sub, .view.decks > .foot, .view.settings > .foot, .home-foot { text-wrap: balance; }
.sheet .sd .sample { overflow: hidden; }
/* ===== lookfeel-v019.css ===== */
/* =====================================================================
Pitch Panic look & feel v019 — first-launch polish (Michael t80u).
1 BOTTOM BAND: on a cold Home-Screen launch iOS's first web frames come up with a viewport that does not yet reach
the glass (our layers are top-anchored at --app-h until __ppFit's resize pass corrects it). Everything below was
the root canvas colour --bg-edge #2a0c3d — a lighter, more saturated purple than the splash/loader bottom
(#1b0631) — so a flat "padding box" flashed under the home indicator for ~0.3s (Michael's screenshot; video
frames 0.20–0.50s sampled #2b0a3f vs #1c0531 above it). While the loader exists the canvas is the splash's own
bottom colour, and the loader carries a solid skirt below its box, so any uncovered strip is the same shade.
2 HANDOFF: the splash-matched intro dissolves into the loader more slowly and in layers (background → beams/
particles → title → tagline → bar → status) instead of everything arriving within ~0.3s. Logo untouched (0px).
3 BAR: width is driven per animation frame by main-v019.js, so the CSS width transition is removed (it re-eased
every 80ms tick = the stepwise surges); the bar fades in without the scaleX grow so the fill reads steady.
===================================================================== */
/* ---------- 1. bottom band: one colour from splash to loader ---------- */
:root { --bg-launch: #1b0631; } /* = splash/v016/*.png bottom row (27,6,49) and .intro-bg's outer stop */
html:has(#loader), html:has(#loader) body { background: var(--bg-launch) !important; background-color: var(--bg-launch) !important; }
.loader { box-shadow: 0 240px 0 0 var(--bg-launch); } /* skirt below the loader box (no layout impact) */
.loader .intro-bg { background: radial-gradient(120% 80% at 50% var(--intro-bg-y, 35%), #4a1170 0%, #2a0a45 55%, var(--bg-launch) 100%) var(--bg-launch); }
/* ---------- 2. softer splash → loader handoff (the logo never moves: v015 rules stay in force) ---------- */
.loader .intro-bg { transition: opacity 1.5s cubic-bezier(.45, 0, .25, 1); }
.loader .intro-cap { transition: opacity .55s cubic-bezier(.4, 0, .2, 1); }
.lf-amb { transition: opacity 1.8s .35s cubic-bezier(.4, 0, .2, 1); }
.loader.intro .lf-amb { transition: none; }
.lm-glow, .loader .logo-mark::before { transition: opacity 1.2s .45s ease; }
.loader .logo-mark img { transition: box-shadow 1.2s .4s ease; }
.loader.morph .wordmark span:first-child { animation: lfFadeUp19 .7s .4s cubic-bezier(.2, .7, .2, 1) both !important; }
.loader.morph .wordmark span:last-child { animation: lfPanicIn19 .75s .55s cubic-bezier(.2, .7, .2, 1) both, markTilt 5s 1.6s ease-in-out infinite !important; }
.loader.morph .loader-tag { animation: lfFadeUp19 .6s .72s cubic-bezier(.2, .7, .2, 1) both !important; }
.loader.morph .progress { animation: lfBarIn19 .55s .3s cubic-bezier(.4, 0, .2, 1) both; }
.loader.morph:has(#tapstart:not(.hidden)) .progress { animation: lfDone .7s ease-out both; }
.loader.morph .loader-msg:not(.msg-in) { animation: lfFadeUp19 .5s .55s cubic-bezier(.2, .7, .2, 1) both !important; }
@keyframes lfFadeUp19 { from { opacity: 0; transform: translateY(6px); } to { transform: none; } }
@keyframes lfPanicIn19 { from { opacity: 0; transform: rotate(-3deg) scale(1.05); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes lfBarIn19 { from { opacity: 0; } to { opacity: 1; } }
/* ---------- 3. bar: per-frame width, no re-easing between ticks ---------- */
#loadbar { transition: none !important; will-change: width; }
@media (prefers-reduced-motion: reduce) {
.loader .intro-bg, .loader .intro-cap, .lf-amb { transition: none; }
.loader.morph .wordmark span, .loader.morph .loader-tag, .loader.morph .progress, .loader.morph .loader-msg { animation: none !important; }
}
/* ===== lookfeel-v020.css ===== */
/* =====================================================================
Pitch Panic look & feel v020 (Michael t81u). Additive layer after lookfeel-v019.css.
1 LAUNCH: phone launch images are now logo-only (splash/v020) — the plain-sans "PITCH PANIC" caption that iOS
painted, then swapped for the chunky in-app wordmark, is gone. The in-app caption never paints (inline rule in
index.html); the stylised title/tagline/bar/status ease in under the stationary logo. Bar fades in empty (0%).
2 HEADERS: eyebrow (topbar title) optically centred — its .24em tracking trailed the last letter, so the ink sat
~1.4px left of the title/screen centre. Settings + Decks share one header block (title + subtitle, same margins).
3 SETTINGS + DECKS: calmer, lighter grouped cards, flatter icon tiles, roomier rows, quieter section labels.
4 THEME FX: palette colours are registered (@property) and ease on during a change; a soft light bloom from
the tapped tile plays inside the background layer (behind the UI); floaters cross-fade; chosen tile gets a halo.
===================================================================== */
/* ---------- 1. launch ---------- */
.loader .intro-cap { display: none !important; }
.loader.morph .wordmark span:first-child { animation: lfRise20 .9s .25s cubic-bezier(.22, .61, .36, 1) both !important; }
.loader.morph .wordmark span:last-child { animation: lfRisePanic20 .95s .38s cubic-bezier(.22, .61, .36, 1) both, markTilt 5s 1.6s ease-in-out infinite !important; }
.loader.morph .loader-tag { animation: lfRise20 .8s .6s cubic-bezier(.22, .61, .36, 1) both !important; }
.loader.morph .progress { animation: lfBarIn20 .5s .15s cubic-bezier(.4, 0, .2, 1) both; }
.loader.morph:has(#tapstart:not(.hidden)) .progress { animation: lfDone .7s ease-out both; }
.loader.morph .loader-msg:not(.msg-in) { animation: lfRise20 .7s .7s cubic-bezier(.22, .61, .36, 1) both !important; }
@keyframes lfRise20 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lfRisePanic20 { from { opacity: 0; transform: translateY(8px) rotate(-3deg); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes lfBarIn20 { from { opacity: 0; } to { opacity: 1; } }
/* ---------- 2. header alignment ---------- */
.topbar-title { text-indent: .24em; } /* balance the trailing letter-spacing → ink centred */
@media (orientation: landscape) and (max-height: 500px) {
body:is([data-screen="decks"], [data-screen="settings"], [data-screen="howto"]) .topbar-title { text-indent: calc(.24em + var(--sar) - var(--sal)); }
}
.view:is(.decks, .settings) .scr-head { margin: 4px 0 0 !important; gap: 8px !important; }
.view:is(.decks, .settings) .scr-head .screen-title { margin: 0 !important; text-indent: -.015em; }
.view:is(.decks, .settings) .scr-head .sub { margin: 0 auto !important; max-width: 30ch; font-size: 14px !important; line-height: 1.45 !important;
font-weight: 600; opacity: 1 !important; color: color-mix(in srgb, var(--muted) 78%, transparent); text-wrap: balance; }
:root { --lf20-card-a: color-mix(in srgb, color-mix(in srgb, var(--bg1) 46%, var(--bg0)) 80%, transparent); /* party = approx. the v018 card top */
--lf20-card-b: color-mix(in srgb, color-mix(in srgb, var(--bg1) 16%, var(--bg0)) 88%, transparent); } /* theme-aware card fill */
/* ---------- 3a. shared section labels ---------- */
.view:is(.decks, .settings) .set-label { font-size: 11px !important; letter-spacing: .18em !important; font-weight: 900;
color: color-mix(in srgb, var(--accent) 62%, var(--muted)) !important; margin-left: 4px !important; margin-right: 4px !important; }
.view:is(.decks, .settings) .set-label::after { background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,0)) !important; }
/* Settings' view is a flex column with a 10px gap (Decks has none): margins compensate so both pages share one rhythm —
header → first label 28px, card → next label 36px, label → card 12px (measured: first label top 178.3px on both at 390) */
.view.decks .set-label { margin-top: 36px !important; margin-bottom: 12px !important; }
.view.decks .set-label:first-of-type { margin-top: 28px !important; }
.view.settings .set-label { margin-top: 26px !important; margin-bottom: 2px !important; min-height: 20px; }
.view.settings .set-label:first-of-type { margin-top: 18px !important; }
/* ---------- 3b. settings: lighter grouped cards ---------- */
.view.settings .set-group { padding: 2px 18px !important; border-radius: var(--r-lg, 16px) !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: linear-gradient(180deg, var(--lf20-card-a) 0%, var(--lf20-card-b) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 28px -22px rgba(0,0,0,.9) !important; }
.view.settings .toggle-row { gap: 14px !important; padding-block: 16px !important; border-bottom-color: rgba(255,255,255,.065) !important; }
.view.settings .set-ico { width: 38px !important; height: 38px !important; border-radius: 10px !important; font-size: 19px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -10px rgba(0,0,0,.8) !important; }
.view.settings .toggle-row b { font-size: 16.5px !important; font-weight: 800 !important; letter-spacing: -.005em; }
.view.settings .toggle-row small { margin-top: 2px; font-size: 13px !important; line-height: 1.4 !important; font-weight: 600;
color: color-mix(in srgb, var(--muted) 86%, transparent) !important; }
.view.settings .set-caption { margin: 14px 12px 0 !important; font-size: 12.5px !important; opacity: .62 !important; }
.view.settings .segctl { margin-bottom: 4px; }
/* theme tiles: same card language; chosen tile = accent ring, not a heavy gold slab */
.view.settings .theme-grid { gap: 10px !important; }
.view.settings .theme-tile { min-height: 84px; padding: 14px 6px 12px !important; gap: 8px !important; border-radius: var(--r-md, 12px) !important;
background: linear-gradient(180deg, var(--lf20-card-a), var(--lf20-card-b)) padding-box, linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)) border-box !important;
border: 1px solid transparent !important; box-shadow: 0 12px 24px -20px rgba(0,0,0,.9) !important; }
.view.settings .theme-tile.on { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--lf20-card-a)), var(--lf20-card-b)) padding-box,
linear-gradient(160deg, color-mix(in srgb, var(--accent) 90%, #fff), color-mix(in srgb, var(--accent) 55%, transparent)) border-box !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 14px 26px -18px color-mix(in srgb, var(--accent) 60%, #000) !important; }
.view.settings .tt-emo { font-size: 27px !important; }
.view.settings .tt-name { font-size: 12.5px !important; font-weight: 800 !important; color: color-mix(in srgb, var(--ink) 88%, transparent); }
.view.settings .theme-tile.on .tt-name { color: var(--ink); }
/* ---------- 3c. deck library ---------- */
.view.decks .deck-list { gap: 14px !important; }
.view.decks .deck-card.dk { padding: 18px 18px 14px !important;
background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 60%),
linear-gradient(180deg, var(--lf20-card-a) 0%, var(--lf20-card-b) 100%) !important; }
.view.decks .dk-tag { color: color-mix(in srgb, var(--muted) 86%, transparent) !important; }
.view.decks .dk-foot { border-top-color: rgba(255,255,255,.06) !important; }
.view.decks .set-label span, .view.settings .set-label span { background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
/* ---------- 4. theme change: palette crossfade + localised bloom ---------- */
@property --bg0 { syntax: ''; inherits: true; initial-value: #1a0630; }
@property --bg1 { syntax: ''; inherits: true; initial-value: #3b0d5c; }
@property --bg2 { syntax: ''; inherits: true; initial-value: #ff3d8b; }
@property --pop { syntax: ''; inherits: true; initial-value: #ff52cc; }
@property --pop-deep { syntax: ''; inherits: true; initial-value: #b8268f; }
@property --accent { syntax: ''; inherits: true; initial-value: #ffe36e; }
@property --accent-deep { syntax: ''; inherits: true; initial-value: #d9a92a; }
@property --cool { syntax: ''; inherits: true; initial-value: #5cf2c8; }
@property --card { syntax: ''; inherits: true; initial-value: rgba(30, 10, 52, .72); }
html.theme-fx { transition: --bg0 .9s cubic-bezier(.4, 0, .2, 1), --bg1 .9s cubic-bezier(.4, 0, .2, 1), --bg2 1s cubic-bezier(.4, 0, .2, 1),
--pop .8s cubic-bezier(.4, 0, .2, 1), --pop-deep .8s cubic-bezier(.4, 0, .2, 1), --accent .55s cubic-bezier(.4, 0, .2, 1),
--accent-deep .55s cubic-bezier(.4, 0, .2, 1), --cool .9s cubic-bezier(.4, 0, .2, 1), --card .8s cubic-bezier(.4, 0, .2, 1); }
#bg .theme-bloom { position: absolute; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--bg2) 42%, transparent) 0%, color-mix(in srgb, var(--pop) 18%, transparent) 38%, transparent 72%);
mix-blend-mode: screen; opacity: 0; transform: scale(.08); animation: themeBloom20 1.25s cubic-bezier(.22, .61, .36, 1) forwards; }
@keyframes themeBloom20 { 0% { opacity: 0; transform: scale(.08); } 22% { opacity: .55; } 100% { opacity: 0; transform: scale(1); } }
#floaters.fx-in { animation: floatersIn20 1s ease both; }
@keyframes floatersIn20 { from { opacity: 0; } to { opacity: 1; } }
.theme-tile.fx-on, .chip.fx-on { animation: tileHalo20 .9s cubic-bezier(.22, .61, .36, 1); }
.theme-tile.fx-on .tt-emo { animation: emoPop20 .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes tileHalo20 { 0% { filter: drop-shadow(0 0 0 transparent); } 30% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 55%, transparent)); } 100% { filter: drop-shadow(0 0 0 transparent); } }
@keyframes emoPop20 { 0% { transform: scale(.86); } 55% { transform: scale(1.14); } 100% { transform: none; } }
/* ---------- 5. bottom sheets fit the phone (Michael t82u) ----------
Root cause: .sheet was max-height 88% of the glass with the CTAs at the END of its scroll — a deck sheet (icon, meta,
3 sample rounds, BUY, note, CLOSE) is 770–860px tall, so on a 390x844 iPhone CLOSE sat under the home indicator
(-7px) and on 375x667 it was 150px off-screen until you scrolled. Now: the sheet keeps clear of the status bar
(safe-area top + 16px), its body scrolls internally, and the action group is a sticky dock pinned to the sheet's
bottom with the home-indicator inset + 16px below CLOSE; a soft fade above the dock hides scrolling content. */
.sheet { max-height: calc(100% - max(var(--sat), 12px) - 16px) !important; overflow-x: hidden; overscroll-behavior: contain;
padding-bottom: 0 !important; scroll-padding-bottom: 150px; }
.sheet-grip { margin-bottom: 14px !important; flex: none; }
.sheet .sheet-actions { position: sticky; bottom: 0; z-index: 3; margin-top: 18px !important; gap: 10px !important;
padding: 16px 0 calc(max(var(--sab), 10px) + 16px); isolation: isolate; }
.sheet .sheet-actions::before { content: ""; position: absolute; z-index: -1; inset: -22px -100vw 0; pointer-events: none;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg0) 0%, transparent) 0px, color-mix(in srgb, var(--bg0) 94%, transparent) 26px, var(--bg0) 46px); }
.sheet .sheet-actions .btn-lg { min-height: 52px; padding-block: 13px; }
.sheet .sheet-actions .btn-ghost { min-height: 46px; padding-block: 11px; }
.sheet .sheet-actions > .sub, .sheet .sheet-actions > .buy-note { margin: -2px auto 2px !important; }
/* denser, calmer deck sheet body */
.sheet .sd-art { width: 56px !important; height: 56px !important; border-radius: 13px !important; margin: 2px auto 10px !important; }
.sheet .sd-art .dk-ico { font-size: 30px !important; }
.sheet .sd > h3 { font-size: 21px !important; margin-bottom: 4px !important; }
.sheet .sd > p.sub { font-size: 14px !important; }
.sd-meta { margin-top: 10px !important; }
.sd-label { margin: 18px 2px 8px !important; }
.sheet .sd .samples { gap: 6px !important; }
.sheet .sd .sample { padding: 10px 12px 10px 15px !important; font-size: 13.5px !important; line-height: 1.38 !important; }
.sheet .sd .sample::before { top: 10px !important; bottom: 10px !important; }
.sheet .sd .sample span { margin-top: 4px !important; font-size: 12.5px !important; }
.sheet .sheet-buy .stub-note { margin-top: 12px !important; }
@media (max-height: 700px) {
.sheet .sd-art { width: 48px !important; height: 48px !important; border-radius: 12px !important; margin-bottom: 8px !important; }
.sheet .sd-art .dk-ico { font-size: 26px !important; }
.sheet .sd > h3 { font-size: 20px !important; }
.sd-label { margin-top: 14px !important; }
}
/* tablet/desktop centred modal: no safe-area dock padding needed */
@media (min-width: 700px) and (min-height: 600px) {
.sheet { max-height: min(88%, 760px) !important; }
.sheet .sheet-actions { padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
html.theme-fx { transition: none; }
#bg .theme-bloom { display: none; }
#floaters.fx-in, .theme-tile.fx-on, .chip.fx-on, .theme-tile.fx-on .tt-emo { animation: none !important; }
.loader.morph .wordmark span, .loader.morph .loader-tag, .loader.morph .progress, .loader.morph .loader-msg { animation: none !important; }
}
/* ===== lookfeel-v021.css ===== */
/* =====================================================================
Pitch Panic look & feel v021 (Michael t83u). Additive layer after lookfeel-v020.css.
1 THEMES: Holiday + Summer BBQ rebuilt. Root cause of the "murk": both themes put a hot red/coral blob (--pop) and
a second warm blob (--bg2) over a mid-saturation green/teal base, plus a mint (--cool) blob in the middle; blurred
at 30-40% they mixed into brown (Holiday) and teal-grey (Summer). Now:
Holiday = deep evergreen night, warm candle-gold glow from below, crimson only as a faint ribbon accent,
snow-cream floaters/ink, gold labels. No red-over-green mixing.
Summer BBQ = deep dusk navy sky over a sunset horizon (amber -> coral glow from the bottom), peach/amber accents.
Card fills follow (--lf20-card-a/b are derived from --bg0/--bg1), so cards are clean and high-contrast.
The horizon glow + muted/ink tints are registered colours, so the v020 soft theme-change crossfade still eases.
2 HEADER: "Decks" optically centred under the DECK LIBRARY eyebrow. Both ink boxes were already geometrically
centred (Michael's screenshot: eyebrow -0.29px, title 0.00px), but the heavy "D" stem pulls the title's visual mass
2.4px left while the eyebrow's mass sits 0.85px left; the title is nudged right so both ink centroids share one axis.
===================================================================== */
/* ---------- 1. themes ---------- */
@property --lf21-glow { syntax: ''; inherits: true; initial-value: rgba(0, 0, 0, 0); }
@property --lf21-glow2 { syntax: ''; inherits: true; initial-value: rgba(0, 0, 0, 0); }
@property --muted { syntax: ''; inherits: true; initial-value: #d9c6ea; }
@property --ink { syntax: ''; inherits: true; initial-value: #fff8fe; }
html.theme-fx { transition: --bg0 .9s cubic-bezier(.4, 0, .2, 1), --bg1 .9s cubic-bezier(.4, 0, .2, 1), --bg2 1s cubic-bezier(.4, 0, .2, 1),
--pop .8s cubic-bezier(.4, 0, .2, 1), --pop-deep .8s cubic-bezier(.4, 0, .2, 1), --accent .55s cubic-bezier(.4, 0, .2, 1),
--accent-deep .55s cubic-bezier(.4, 0, .2, 1), --cool .9s cubic-bezier(.4, 0, .2, 1), --card .8s cubic-bezier(.4, 0, .2, 1),
--lf21-glow 1s cubic-bezier(.4, 0, .2, 1), --lf21-glow2 1s cubic-bezier(.4, 0, .2, 1), --muted .7s ease, --ink .7s ease; }
[data-theme="holiday"] {
--bg0: #03170e; --bg1: #0f4d2e; --bg2: #d9a441; --pop: #d8283f; --pop-deep: #8e1526;
--accent: #f7d27a; --accent-deep: #b8892e; --cool: #fff1d2; --card: rgba(4, 28, 16, .84);
--muted: #cfe1d3; --ink: #fffaf0;
--lf21-glow: rgba(255, 196, 110, .16); --lf21-glow2: rgba(0, 0, 0, 0);
}
[data-theme="summer"] {
--bg0: #0a1022; --bg1: #22305e; --bg2: #ff8f3f; --pop: #ff6a4b; --pop-deep: #c4432b;
--accent: #ffc95a; --accent-deep: #d6942a; --cool: #ffd3a3; --card: rgba(11, 16, 36, .84);
--muted: #e9dccd; --ink: #fff8f0;
--lf21-glow: rgba(255, 172, 72, .62); --lf21-glow2: rgba(255, 118, 58, .22);
}
/* background: a horizon glow from the visible bottom edge (#bg is app-h + 160px tall, so it is anchored 130px above its end) (transparent for the other four themes → their look is unchanged) */
#bg { background:
radial-gradient(150% 52% at 50% calc(100% - 130px), var(--lf21-glow) 0%, var(--lf21-glow2) 46%, transparent 74%),
radial-gradient(120% 80% at 50% 0%, var(--bg1) 0%, var(--bg0) 62%) !important; }
.blob { transition: opacity .9s ease; }
/* the stock vignette darkens the bottom 55% → it smothered the warm horizon; centre it lower on these two themes */
:is([data-theme="holiday"], [data-theme="summer"]) .vignette { background: radial-gradient(130% 85% at 50% 68%, transparent 52%, rgba(0, 0, 0, .5)); }
/* Holiday: no red-over-green mixing. Crimson only as a faint ribbon glow high on the right; gold candle-light
below; the mint/snow blob nearly off. Stage floor = warm gold. */
[data-theme="holiday"] .b1 { opacity: .10; background: var(--pop); left: auto; right: -30vmax; top: -26vmax; }
[data-theme="holiday"] .b2 { opacity: .07; background: var(--bg2); }
[data-theme="holiday"] .b3 { opacity: .05; }
[data-theme="holiday"] .stage-floor { background: radial-gradient(50% 50% at 50% 50%, rgba(255, 206, 130, .16), transparent 70%); }
[data-theme="holiday"] #floaters span { opacity: .14; }
/* Summer BBQ: navy dusk sky, sunset at the horizon. Coral blob low-key at the top, amber blob warms the bottom. */
[data-theme="summer"] .b1 { opacity: .12; background: var(--accent); }
[data-theme="summer"] .b2 { opacity: .26; }
[data-theme="summer"] .b3 { opacity: .05; }
[data-theme="summer"] .stage-floor { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--bg2) 40%, transparent), transparent 70%); opacity: .7; }
/* clearer cards on the two warm themes: a touch more opaque, a hairline that reads against the glow */
:is([data-theme="holiday"], [data-theme="summer"]) {
--lf20-card-a: color-mix(in srgb, color-mix(in srgb, var(--bg1) 42%, var(--bg0)) 88%, transparent);
--lf20-card-b: color-mix(in srgb, color-mix(in srgb, var(--bg1) 12%, var(--bg0)) 92%, transparent);
}
:is([data-theme="holiday"], [data-theme="summer"]) .view.settings .set-group,
:is([data-theme="holiday"], [data-theme="summer"]) .view.decks .deck-card.dk { border-color: rgba(255, 255, 255, .10) !important; }
[data-theme="holiday"] .view:is(.decks, .settings) .set-label { color: color-mix(in srgb, var(--accent) 82%, var(--muted)) !important; }
[data-theme="summer"] .view:is(.decks, .settings) .set-label { color: color-mix(in srgb, var(--accent) 78%, var(--muted)) !important; }
[data-theme="holiday"] .view.settings .theme-tile.on { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--lf20-card-a)), var(--lf20-card-b)) padding-box,
linear-gradient(160deg, color-mix(in srgb, var(--accent) 92%, #fff), color-mix(in srgb, var(--pop) 60%, transparent)) border-box !important; }
/* ---------- 2. Deck Library header: optical centring ---------- */
.view.decks .scr-head .screen-title { translate: .05em 0; }
/* warm the stage beams so they read as candle-light (Holiday) / late sun (Summer BBQ), not cold white haze */
[data-theme="holiday"] .beam { background: linear-gradient(180deg, rgba(255, 228, 160, .16), rgba(255, 228, 160, 0) 75%); }
[data-theme="summer"] .beam { background: linear-gradient(180deg, rgba(255, 206, 150, .17), rgba(255, 206, 150, 0) 75%); }
/* Holiday: a string of warm fairy lights swagged across the top + a few soft gold/crimson bokeh orbs (static art,
gentle twinkle). Painted on #bg::before (below blobs/floaters/UI); faded out on every other theme. */
#bg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 160px); pointer-events: none;
opacity: 0; transition: opacity .9s ease; background:
radial-gradient(circle at 4.0% 7.5%, rgba(255,214,120,.95) 0 1.6px, rgba(255,214,120,.28) 3px, transparent 9px),
radial-gradient(circle at 11.7% 8.9%, rgba(255,236,190,.95) 0 1.6px, rgba(255,236,190,.28) 3px, transparent 9px),
radial-gradient(circle at 19.3% 10.2%, rgba(230,60,80,.95) 0 1.6px, rgba(230,60,80,.28) 3px, transparent 9px),
radial-gradient(circle at 27.0% 11.4%, rgba(255,214,120,.95) 0 1.6px, rgba(255,214,120,.28) 3px, transparent 9px),
radial-gradient(circle at 34.7% 12.3%, rgba(120,220,150,.95) 0 1.6px, rgba(120,220,150,.28) 3px, transparent 9px),
radial-gradient(circle at 42.3% 12.8%, rgba(255,214,120,.95) 0 1.6px, rgba(255,214,120,.28) 3px, transparent 9px),
radial-gradient(circle at 50.0% 13.0%, rgba(255,236,190,.95) 0 1.6px, rgba(255,236,190,.28) 3px, transparent 9px),
radial-gradient(circle at 57.7% 12.8%, rgba(230,60,80,.95) 0 1.6px, rgba(230,60,80,.28) 3px, transparent 9px),
radial-gradient(circle at 65.3% 12.3%, rgba(255,214,120,.95) 0 1.6px, rgba(255,214,120,.28) 3px, transparent 9px),
radial-gradient(circle at 73.0% 11.4%, rgba(120,220,150,.95) 0 1.6px, rgba(120,220,150,.28) 3px, transparent 9px),
radial-gradient(circle at 80.7% 10.2%, rgba(255,214,120,.95) 0 1.6px, rgba(255,214,120,.28) 3px, transparent 9px),
radial-gradient(circle at 88.3% 8.9%, rgba(255,236,190,.95) 0 1.6px, rgba(255,236,190,.28) 3px, transparent 9px),
radial-gradient(circle at 96.0% 7.5%, rgba(230,60,80,.95) 0 1.6px, rgba(230,60,80,.28) 3px, transparent 9px),
radial-gradient(circle at 14% 22%, rgba(255,214,120,0.1) 0, transparent 34px),
radial-gradient(circle at 84% 18%, rgba(230,60,80,0.08) 0, transparent 40px),
radial-gradient(circle at 70% 34%, rgba(255,236,190,0.07) 0, transparent 26px),
radial-gradient(circle at 24% 48%, rgba(230,60,80,0.05) 0, transparent 30px),
radial-gradient(circle at 88% 58%, rgba(255,214,120,0.06) 0, transparent 36px); }
[data-theme="holiday"] #bg::before { opacity: 1; animation: lf21Twinkle 4.5s ease-in-out infinite alternate; }
@keyframes lf21Twinkle { from { opacity: .78; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-theme="holiday"] #bg::before { animation: none; } }
/* ===== lookfeel-v022.css ===== */
/* =====================================================================
Pitch Panic — lookfeel v022 (Michael t84u)
1. Confirm sheets (Pause the game? / Reset everything? / Re-lock / Age check): one compact template
2. Launch: dark colour-scheme so nothing defaults to a light canvas
3. Light polish
===================================================================== */
/* ---------- 1. confirm sheets ----------
Before: the deck-sheet dock (v020) applied to 2–3 button confirms — a 46px fade band painted a visible seam under
the note (lighter top half, darker bottom), buttons were the chunky lipped style (gold 4px lip, pink-outlined
secondary, full red DISCARD with lip) all at similar weight, and the sheet had no anchor above the title.
Now: uniform sheet fill (no seam), icon chip, tighter title/note, flat buttons in three clear weights:
go (flat gold, or flat coral when the action IS the destructive confirm) › alt (glass + hairline) › quiet danger
(text-weight coral, no fill), and the stack sits 16px above the home indicator. */
.sheet.cf { padding-top: 8px !important; text-align: center;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg1) 88%, #fff 4%) 0%, color-mix(in srgb, var(--bg1) 55%, var(--bg0)) 70%, var(--bg0) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 -18px 48px -8px rgba(0,0,0,.55) !important; }
.sheet.cf .sheet-grip { width: 36px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.24); margin: 0 auto 16px !important; }
.sheet.cf .cf-ico { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 13px; display: grid; place-items: center;
color: var(--cf-c); background: color-mix(in srgb, var(--cf-c) 14%, rgba(255,255,255,.03));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cf-c) 34%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--cf-c) 70%, transparent); }
.sheet.cf .cf-ico svg { width: 22px; height: 22px; display: block; }
.sheet.cf .cf-ico b { font-size: 16px; font-weight: 900; letter-spacing: .02em; }
.sheet.cf .cf-gold { --cf-c: #ffd04f; }
.sheet.cf .cf-danger { --cf-c: #ff6f8a; }
.sheet.cf h3 { font-size: 22px !important; line-height: 1.15; font-weight: 900; letter-spacing: -.01em; margin: 0 0 8px !important; text-wrap: balance; }
.sheet.cf > .sub { font-size: 14.5px; line-height: 1.45; max-width: 34ch; margin: 0 auto; color: color-mix(in srgb, var(--ink) 68%, transparent); text-wrap: balance; }
.sheet.cf .sheet-actions.cf-actions { position: static; margin-top: 20px !important; gap: 10px !important; max-width: 340px;
padding: 0 0 calc(max(var(--sab), 8px) + 14px) !important; }
.sheet.cf .sheet-actions.cf-actions::before { display: none !important; } /* the deck-dock fade = the seam */
.sheet.cf .cf-actions .btn { width: 100%; border-radius: var(--r-md, 12px) !important; font-size: 15px !important; font-weight: 900; letter-spacing: .07em;
text-shadow: none !important; transform: none; transition: transform .12s ease, filter .15s ease, background-color .15s ease; }
.sheet.cf .cf-actions .btn::before, .sheet.cf .cf-actions .btn::after { display: none !important; }
.sheet.cf .cf-actions .btn:not(:disabled):active { transform: scale(.985) !important; filter: brightness(.96); }
/* go: flat gold (same language as BUY / UNLOCK) */
.sheet.cf .cf-actions .btn.cf-go { min-height: 52px !important; padding-block: 13px !important; color: #2a0b4a;
background: linear-gradient(180deg, #ffe27e 0%, #ffd04f 100%) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 1px 0 rgba(150,90,0,.55), 0 12px 24px -14px rgba(255,200,60,.6) !important; }
/* go when the confirm itself is destructive: flat coral, same weight as gold */
.sheet.cf .cf-actions .btn.cf-go.cf-destroy { color: #fff;
background: linear-gradient(180deg, #ff6f8a 0%, #f2486a 100%) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 1px 0 rgba(140,20,50,.6), 0 12px 24px -14px rgba(255,80,110,.65) !important; }
.sheet.cf .cf-actions .btn.cf-go:not(:disabled):active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) !important; }
/* alt: glass + hairline */
.sheet.cf .cf-actions .btn.cf-alt { min-height: 48px !important; padding-block: 11px !important; color: var(--ink);
background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.17) !important;
backdrop-filter: none; -webkit-backdrop-filter: none; }
.sheet.cf .cf-actions .btn.cf-alt:not(:disabled):active { background: rgba(255,255,255,.11) !important; }
/* quiet danger: present, readable, but clearly not the default */
.sheet.cf .cf-actions .btn.cf-quiet-danger { min-height: 44px !important; padding-block: 10px !important; margin-top: 0; font-size: 14px !important;
color: #ff8aa0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sheet.cf .cf-actions .btn.cf-quiet-danger:not(:disabled):active { background: rgba(255,111,138,.1) !important; }
/* softer backdrop behind any sheet */
.sheet-backdrop { background: rgba(10,2,22,.5) !important; backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px) saturate(.9); }
/* short phones */
@media (max-height: 700px) {
.sheet.cf .cf-ico { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; }
.sheet.cf .cf-ico svg { width: 20px; height: 20px; }
.sheet.cf h3 { font-size: 21px !important; }
.sheet.cf .sheet-actions.cf-actions { margin-top: 18px !important; }
}
/* tablet / desktop centred modal */
@media (min-width: 700px) and (min-height: 600px) {
.sheet.cf { max-width: 420px; padding-top: 28px !important; }
.sheet.cf .sheet-actions.cf-actions { padding-bottom: 24px !important; }
}
/* ---------- 2. launch: dark colour scheme everywhere ---------- */
:root { color-scheme: dark; }
/* ---------- 3. light polish ----------
Restore/redeem + Add to Home Screen sheets use the same compact template + flat buttons (no icon chip). */
.sheet.cf .ios-steps { text-align: left; max-width: 34ch; margin: 12px auto 0; }
.sheet.cf .pinput.code { margin-top: 16px; text-align: center; letter-spacing: .08em; }
.sheet.cf > .sheet-grip + h3 { margin-top: 4px !important; }
/* =====================================================================================================================
lookfeel-v023 — Settings / Decks / How to play polish, Leopanto Labs intro handoff
Goal: balanced, not crammed. ONE column for headers, labels and cards (view padding 18px + --gut, ~32px at 390pt),
one spacing scale (4 · 8 · 12 · 16 · 24 · 32 · 40), one moderate button size app-wide.
header title → sub 8 · header → first section 32 · label → its card 12 · section → section 32
caption → its card 12 · rich-card stack 16 · compact-card stack 12 · card padding 16 · row content gap 12
===================================================================================================================== */
/* ---------- 1. buttons: back to the moderate v009 sizes, everywhere (Home PLAY = loader PLAY = GOT IT = sheets) ---------- */
:root { --btn-h1: 52px; --btn-h2: 46px; --btn-max: 300px; }
/* ---------- 2. shared column + rhythm ---------- */
.view.col23 { --gut: clamp(10px, 3.6vw, 22px); --c23-card: color-mix(in srgb, var(--bg0) 62%, rgba(255,255,255,.07));
--c23-hair: rgba(255,255,255,.1); --c23-gold: var(--accent); gap: 0 !important; padding-top: 16px !important; padding-bottom: calc(var(--sab) + 40px) !important; }
.view.view.col23.col23 > * { flex-shrink: 0 !important; margin-left: var(--gut) !important; margin-right: var(--gut) !important; }
.view.col23.is-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); mask-image: linear-gradient(180deg, transparent 0, #000 22px); }
/* v024: page header back to the original build — centred title + subtitle (original type/size), only the v023 rhythm kept:
header → first section 32px */
.view.col23 .scr-head { margin-top: 0 !important; margin-bottom: 32px !important; }
.view.view.howto.col23 > .screen-title { margin-top: 0 !important; margin-bottom: 32px !important; }
.view.col23 .set-label { margin-top: 32px !important; margin-bottom: 12px !important; padding: 0 !important; font-size: 11.5px !important; font-weight: 900 !important; letter-spacing: .16em !important; line-height: 1.2 !important; color: color-mix(in srgb, var(--accent) 72%, var(--muted)) !important; opacity: 1 !important; }
.view.col23 .scr-head + .set-label { margin-top: 0 !important; }
.view.col23 .set-label::after { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent) !important; }
.view.col23 .set-label span { padding: 2px 8px !important; border-radius: 99px !important; font-size: 11px !important; letter-spacing: .02em !important; color: var(--ink) !important; background: rgba(255,255,255,.1) !important; }
/* top bar: v024 keeps the original fixed gold label; only a hairline when content is beneath (with the v023 fade) */
.topbar { position: relative; z-index: 5; transition: box-shadow .2s; }
.topbar.tb-scrim { box-shadow: 0 1px 0 rgba(255,255,255,.06); }
/* ---------- 3. one card surface + one icon tile (gold line glyph on plum, hairline) ---------- */
.view.col23 :is(.set-group, .deck-card, .theme-tile, .step, .callout, .example) {
background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)), var(--c23-card) !important;
border: 1px solid var(--c23-hair) !important; border-radius: 16px !important;
box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 32px -22px rgba(0,0,0,.75) !important; }
.view.col23 :is(.set-ico, .step-ico) { flex: none !important; display: grid !important; place-items: center !important; width: 36px !important; height: 36px !important; min-height: 36px !important;
border-radius: 10px !important; font-size: 0 !important; color: var(--c23-gold) !important;
background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.view.col23 :is(.set-ico, .step-ico) svg { width: 20px; height: 20px; display: block; }
.view.col23 .toggle-row.danger .set-ico { color: #ff8fa6 !important; background: linear-gradient(160deg, rgba(255,92,124,.2), rgba(255,92,124,.06)) !important; box-shadow: inset 0 0 0 1px rgba(255,120,150,.3) !important; }
/* ---------- 4. Settings ---------- */
.view.col23 .set-group { padding: 0 !important; overflow: hidden; }
.view.col23 .set-group .toggle-row { min-height: 0 !important; padding: 16px !important; gap: 12px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; position: relative; }
.view.col23 .set-group > .toggle-row + .toggle-row::before, .view.col23 .gp-group > .toggle-row::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--c23-hair); }
.view.col23 .toggle-row .tr-txt { gap: 3px !important; min-width: 0; }
.view.col23 .toggle-row .tr-txt b { font-size: 16px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -.005em !important; }
.view.col23 .toggle-row .tr-txt small { font-size: 13px !important; line-height: 1.35 !important; color: var(--muted) !important; opacity: .78 !important; }
.view.col23 .toggle-row.danger .tr-txt b { color: #ffb3c2 !important; }
.view.col23 .chev { display: grid !important; place-items: center !important; width: 20px !important; height: 20px !important; color: var(--muted) !important; opacity: .7 !important; font-size: 0 !important; }
.view.col23 .chev svg { width: 18px; height: 18px; }
/* switch: gold track when on (party primary), quiet plum when off */
.view.col23 .switch { width: 50px !important; height: 30px !important; background: rgba(255,255,255,.13) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important; transition: background .2s, box-shadow .2s !important; }
.view.col23 .switch i { top: 2px !important; left: 2px !important; width: 26px !important; height: 26px !important; box-shadow: 0 2px 6px rgba(0,0,0,.35) !important; }
.view.col23 .switch.on { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 100%, #fff 18%), color-mix(in srgb, var(--accent) 80%, #b37400)) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 16px -6px var(--accent) !important; }
.view.col23 .switch.on i { transform: translateX(20px) !important; }
/* timer: heading row + segmented control inside the same card, on the card's padding */
.view.col23 .gp-timer { padding: 0 0 16px !important; margin: 0 !important; border: 0 !important; }
.view.col23 .gp-head { padding-bottom: 12px !important; }
.view.col23 .segctl { margin: 0 16px !important; height: 44px !important; min-height: 44px !important; padding: 3px !important; border-radius: 12px !important;
background: rgba(0,0,0,.24) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
.view.col23 .segctl-thumb { top: 3px !important; bottom: 3px !important; left: 3px !important; width: calc((100% - 6px) / var(--n)) !important; border-radius: 9px !important; }
.view.col23 .segctl-btn { min-height: 38px !important; height: 38px !important; border-radius: 9px !important; font-size: 15px !important; font-weight: 900 !important; }
.view.col23 .segctl-btn small { font-size: 11px !important; font-weight: 800 !important; opacity: .7; margin-left: 1px; }
.view.col23 .gp-group > .toggle-row { border-top: 0 !important; }
/* theme tiles */
.view.col23 .theme-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.view.col23 .theme-tile { min-height: 84px !important; padding: 14px 6px !important; gap: 8px !important; }
.view.col23 .theme-tile .tt-name { font-size: 13px !important; font-weight: 800 !important; }
.view.col23 .theme-tile.on { border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)), var(--c23-card) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 12px 28px -20px var(--accent) !important; }
.view.col23 .foot { margin-top: 32px !important; text-align: center !important; font-size: 12px !important; line-height: 1.6 !important; opacity: .7 !important; }
/* ---------- 5. Decks ---------- */
.view.col23 .deck-list { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.view.col23 .deck-card.dk { padding: 16px !important; margin: 0 !important; }
.view.col23 .dk-main { gap: 12px !important; align-items: center !important; }
.view.col23 .dk-art { width: 52px !important; height: 52px !important; border-radius: 14px !important;
background: radial-gradient(120% 100% at 30% 15%, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.2) !important; }
.view.col23 .dk-text { gap: 4px !important; }
.view.col23 .dk-title b { font-size: 17px !important; letter-spacing: -.01em !important; }
.view.col23 .dk-tag { font-size: 13.5px !important; line-height: 1.4 !important; opacity: .78 !important; }
.view.col23 .dk-foot { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 16px !important; padding-top: 12px !important; border-top: 1px solid var(--c23-hair) !important; }
.view.col23 .dk-chip { display: inline-flex !important; align-items: center !important; height: 24px !important; padding: 0 10px !important; border-radius: 99px !important; font-size: 10.5px !important;
font-weight: 900 !important; letter-spacing: .08em !important; line-height: 1 !important; white-space: nowrap !important; border: 0 !important; }
.view.col23 .dk-chip.ok { color: #8ff5d6 !important; background: rgba(92,242,200,.12) !important; box-shadow: inset 0 0 0 1px rgba(92,242,200,.28) !important; }
.view.col23 .dk-chip.pack { color: var(--c23-gold) !important; background: color-mix(in srgb, var(--c23-gold) 13%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c23-gold) 34%, transparent) !important; }
.view.col23 .dk-count { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; white-space: nowrap !important; line-height: 1.15 !important; text-align: left !important; }
.view.col23 .dk-count b { font-size: 13.5px !important; font-weight: 900 !important; font-variant-numeric: tabular-nums; }
.view.col23 .dk-count small { font-size: 12px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--muted) !important; opacity: .75 !important; }
.view.col23 .dk-chev { flex: none !important; display: grid !important; place-items: center !important; width: 32px !important; height: 32px !important; border-radius: 99px !important; color: var(--muted) !important;
background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px var(--c23-hair) !important; border: 0 !important; }
.view.col23 .dk-chev::before, .view.col23 .dk-chev::after { content: none !important; }
.view.col23 .dk-chev svg { width: 16px; height: 16px; }
.view.col23 .dk-buy { flex: none !important; display: inline-flex !important; align-items: baseline !important; gap: 6px !important; height: 34px !important; min-height: 34px !important; padding: 0 14px !important; align-items: center !important;
border-radius: var(--r-sm) !important; color: #2a1000 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--c23-gold) 100%, #fff 20%), color-mix(in srgb, var(--c23-gold) 82%, #c27a00)) !important;
box-shadow: 0 3px 0 color-mix(in srgb, var(--c23-gold) 45%, #5a2a00), 0 8px 18px -10px var(--c23-gold) !important; border: 0 !important; }
.view.col23 .dk-buy small { font-size: 10px !important; font-weight: 900 !important; letter-spacing: .1em !important; opacity: .7 !important; }
.view.col23 .dk-buy b { font-size: 14.5px !important; font-weight: 900 !important; font-variant-numeric: tabular-nums; }
/* ---------- 6. How to play ---------- */
.view.view.howto.col23 > .steps { display: flex !important; flex-direction: column !important; gap: 12px !important; margin: 0 var(--gut) !important; padding: 0 !important; width: auto !important; }
.view.howto.col23 .step { position: relative !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 16px !important; width: auto !important; margin: 0 !important; }
.view.howto.col23 .step::before { position: absolute !important; top: 11px !important; left: 11px !important; z-index: 1; width: 18px !important; height: 18px !important; min-height: 18px !important; margin: 0 !important; border-radius: 99px !important;
font-size: 9.5px !important; font-weight: 900 !important; color: #2a1000 !important; background: var(--accent) !important; box-shadow: 0 0 0 2px var(--bg0) !important; letter-spacing: 0 !important; }
.view.howto.col23 .step b { display: block !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.3 !important; }
.view.howto.col23 .step p { margin: 4px 0 0 !important; font-size: 13.5px !important; line-height: 1.45 !important; color: var(--muted) !important; opacity: .85 !important; }
.view.howto.col23 .step > div { padding-top: 1px; }
.view.view.howto.col23 > .callout.qs { margin-top: 32px !important; padding: 16px !important; border-left: 1px solid color-mix(in srgb, var(--accent) 34%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 34%, transparent) !important;
background: radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)), var(--c23-card) !important; }
.view.howto.col23 .co-head { display: block !important; margin: 0 0 16px !important; font-size: 11.5px !important; font-weight: 900 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--accent) !important; }
.view.howto.col23 .qs-flow { position: relative !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; flex-wrap: nowrap !important; }
.view.howto.col23 .qs-flow::before { content: ""; position: absolute; top: 14px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; border-radius: 2px;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent) 60%, transparent)); }
.view.howto.col23 .qs-flow li { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important;
margin: 0 !important; padding: 0 4px !important; background: none !important; border: 0 !important; box-shadow: none !important; text-align: center !important; }
.view.howto.col23 .qs-flow li::before, .view.howto.col23 .qs-flow li::after { content: none !important; }
.view.howto.col23 .qs-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; font-size: 14px; font-weight: 900; color: #2a1000;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 100%, #fff 22%), color-mix(in srgb, var(--accent) 84%, #c27a00)); box-shadow: 0 0 0 4px var(--c23-card), 0 6px 14px -6px var(--accent); }
.view.howto.col23 .qs-t { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); white-space: nowrap; }
.view.howto.col23 .qs-t i { font-style: normal; font-weight: 900; color: var(--accent); }
.view.howto.col23 .co-txt { margin: 16px 0 0 !important; padding-top: 12px !important; border-top: 1px solid var(--c23-hair) !important; font-size: 13.5px !important; line-height: 1.45 !important; color: var(--muted) !important; text-align: center !important; }
.view.view.howto.col23 > .example.ex23 { margin-top: 16px !important; padding: 16px !important; }
.view.howto.col23 .ex-label { display: block !important; margin: 0 0 12px !important; font-size: 11.5px !important; font-weight: 900 !important; letter-spacing: .16em !important; color: color-mix(in srgb, var(--accent) 72%, var(--muted)) !important; opacity: 1 !important; text-transform: uppercase !important; }
.view.howto.col23 .ex-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 10px; row-gap: 8px; margin: 0; align-items: start; }
.view.howto.col23 .ex-grid dt { margin: 0; line-height: 21px; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: .72; }
.view.howto.col23 .ex-grid dd { margin: 0; font-size: clamp(13.5px, 3.6vw, 15.5px); font-weight: 800; line-height: 21px; color: var(--ink); text-wrap: balance; }
.view.howto.col23 .ex-grid .ex-tk, .view.howto.col23 .ex-grid .ex-tv { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--c23-hair); }
.view.howto.col23 .ex-grid .ex-tk { color: var(--accent); opacity: 1; margin-right: -10px; padding-right: 10px; }
.view.howto.col23 .ex-grid .ex-tv { font-weight: 700; color: color-mix(in srgb, var(--ink) 88%, var(--accent)); }
/* slim dock: the standard button, a short fade, no tall gradient slab */
.view.howto.col23 > .sticky-cta { margin: 32px -18px 0 !important; padding: 24px calc(18px + var(--gut)) calc(var(--sab) + 16px) !important; min-height: 0 !important; align-items: center !important;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg0) 94%, transparent) 46%) !important; box-shadow: none !important; border: 0 !important; }
.view.howto.col23 > .sticky-cta::before, .view.howto.col23 > .sticky-cta::after { content: none !important; }
.view.howto.col23 { padding-bottom: 0 !important; }
.view.howto.col23 > .sticky-cta .btn { width: 100% !important; max-width: var(--btn-max) !important; }
/* v023: Decks/Settings end padding kept within the v007 rule (scroll room comes from the side gutters, not from space below) */
.view.decks.col23, .view.settings.col23 { padding-bottom: calc(var(--sab) + 24px) !important; }
/* ---------- v024 light polish ---------- */
/* no orphan words: short descriptions wrap into even lines (Settings rows, deck taglines, notes, footer) */
.view.col23 :is(.tr-txt small, .lr-txt small, .set-row small, .dk-tag, .co-txt, .foot) { text-wrap: balance; }
.view.col23 .step p { text-wrap: pretty; }
/* ---------- v024 GAME SETUP ('Who's playing?') — joins the shared v023 column, cards and dock ---------- */
body[data-screen="setup"] .topbar-title { color: var(--accent); }
.view.view.setup.col23 > .screen-title { margin-top: 0 !important; margin-bottom: 32px !important; }
.view.view.setup.col23 > .card { margin-top: 0 !important; margin-bottom: 16px !important; padding: 16px !important;
background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)), var(--c23-card) !important;
border: 1px solid var(--c23-hair) !important; border-radius: 16px !important;
box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 32px -22px rgba(0,0,0,.75) !important; }
.view.setup.col23 .card-head { display: flex !important; align-items: baseline !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 12px !important; margin: 0 0 12px !important; }
.view.setup.col23 .card-head b { font-size: 11.5px !important; font-weight: 900 !important; letter-spacing: .16em !important; line-height: 1.2 !important; color: color-mix(in srgb, var(--accent) 72%, var(--muted)) !important; }
.view.setup.col23 .card-head .hint { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .01em !important; line-height: 1.2 !important; color: var(--muted) !important; opacity: .8 !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* players: plum tile + gold numeral · one input surface · a small round ✕ inside a 44px tap target */
.view.setup.col23 .players { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.view.setup.col23 .player-row { gap: 12px !important; align-items: center !important; }
.view.setup.col23 .pnum { width: 30px !important; height: 30px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 900 !important; font-variant-numeric: tabular-nums;
color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.04)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent) !important; text-shadow: none !important; }
.view.setup.col23 .pinput { height: 48px !important; min-height: 48px !important; padding: 0 14px !important; border-radius: 12px !important; font-size: 17px !important; font-weight: 800 !important;
background: rgba(0,0,0,.2) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 2px 6px rgba(0,0,0,.22) !important; }
.view.setup.col23 .pinput::placeholder { color: rgba(255,255,255,.42); }
.view.setup.col23 .pinput:focus { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent) !important; background: rgba(0,0,0,.26) !important; }
.view.setup.col23 .premove { position: relative !important; display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; min-height: 44px !important;
margin: 0 -7px 0 -6px !important; padding: 0 !important; border: 0 !important; border-radius: 99px !important; background: none !important; box-shadow: none !important; color: var(--muted) !important; font-size: 0 !important; }
.view.setup.col23 .premove::before { content: ""; position: absolute; inset: 7px; border-radius: 99px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .15s, box-shadow .15s; }
.view.setup.col23 .premove svg { position: relative; width: 13px; height: 13px; display: block; }
.view.setup.col23 .premove:not(:disabled):active::before { background: rgba(255,92,124,.18); box-shadow: inset 0 0 0 1px rgba(255,120,150,.4); }
.view.setup.col23 .premove:not(:disabled):active { color: #ffb3c2 !important; }
.view.setup.col23 .premove:disabled { opacity: .32 !important; }
.view.setup.col23 .sk-add { display: flex !important; width: 100% !important; max-width: var(--btn-max) !important; min-height: var(--btn-h2) !important; height: var(--btn-h2) !important; margin: 16px auto 0 !important; font-size: 14px !important; letter-spacing: .1em !important; }
/* decks: even full-width rows — icon tile · name + combos · gold check / price tag; selected = gold hairline + soft gold wash */
.view.setup.col23 .sk-list { display: flex; flex-direction: column; gap: 8px; }
.view.setup.col23 .sk { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 10px 12px 10px 10px; border: 0; border-radius: 14px; text-align: left; color: var(--ink); font: inherit;
background: rgba(0,0,0,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background .18s, box-shadow .18s, transform .12s; -webkit-tap-highlight-color: transparent; }
.view.setup.col23 .sk:active { transform: scale(.98); }
.view.setup.col23 .sk.on { background: color-mix(in srgb, var(--accent) 10%, rgba(0,0,0,.12)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 62%, transparent); }
.view.setup.col23 .sk-art { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 21px; line-height: 1;
background: linear-gradient(160deg, color-mix(in srgb, var(--dk, var(--accent)) 24%, transparent), color-mix(in srgb, var(--dk, var(--accent)) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk, var(--accent)) 30%, rgba(255,255,255,.1)); }
.view.setup.col23 .sk-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.view.setup.col23 .sk-txt b { font-size: 15.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view.setup.col23 .sk-txt small { font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--muted); opacity: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.view.setup.col23 .sk.locked .sk-txt small { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); opacity: 1; }
.view.setup.col23 .sk-check { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); transition: background .18s, color .18s, box-shadow .18s; }
.view.setup.col23 .sk-check svg { width: 15px; height: 15px; display: block; }
.view.setup.col23 .sk.on .sk-check { color: #2a1000; background: var(--accent); box-shadow: 0 0 0 0 transparent, 0 4px 12px -4px var(--accent); }
.view.setup.col23 .sk-price, .view.setup.col23 .sk-tag { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 13px; font-weight: 900; letter-spacing: .02em; font-variant-numeric: tabular-nums;
color: var(--c23-gold); background: color-mix(in srgb, var(--c23-gold) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c23-gold) 34%, transparent); }
.view.setup.col23 .sk-tag { font-size: 10.5px; letter-spacing: .1em; color: var(--muted); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
/* the other setup chips keep their look; only the column, card surface and spacing change */
.view.setup.col23 .grid2 { gap: 16px !important; }
/* slim dock = the GOT IT dock: standard button, short fade, and room below the last card so it scrolls fully clear */
.view.setup.col23 { padding-bottom: 0 !important; }
.view.view.setup.col23 > .sticky-cta { margin: 24px -18px 0 !important; padding: 24px calc(18px + var(--gut)) calc(var(--sab) + 16px) !important; min-height: 0 !important; align-items: center !important;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg0) 94%, transparent) 46%) !important; box-shadow: none !important; border: 0 !important; }
.view.setup.col23 > .sticky-cta::before, .view.setup.col23 > .sticky-cta::after { content: none !important; }
.view.setup.col23 > .sticky-cta .btn { width: 100% !important; max-width: var(--btn-max) !important; }
/* occasion theme: the narrower shared column made the chips wrap raggedly → an even 2-column grid, same chip look */
.view.setup.col23 .chips.wrap { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
.view.setup.col23 .chips.wrap > .chip { width: 100% !important; min-width: 0 !important; margin: 0 !important; justify-content: center !important; white-space: nowrap !important; }
.view.setup.col23 .chips.wrap > .chip { padding-left: 8px !important; padding-right: 8px !important; font-size: clamp(13.5px, 3.7vw, 15.5px) !important; gap: 6px !important; }
/* ---------- v025: Instructions — Quick Start label + Example Round centred (labels stacked above values) ---------- */
.view.howto.col23 .co-head { text-align: center !important; text-indent: .16em; }
.view.howto.col23 .ex-label { text-align: center !important; text-indent: .16em; }
.view.howto.col23 .ex-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; justify-items: center; text-align: center; }
.view.howto.col23 .ex-grid dt { margin: 0 0 2px; line-height: 16px; text-indent: .14em; }
.view.howto.col23 .ex-grid dd { margin: 0 0 12px; max-width: 30ch; }
.view.howto.col23 .ex-grid dd:last-child { margin-bottom: 0; }
.view.howto.col23 .ex-grid .ex-tk { justify-self: stretch; margin: 0 0 2px; padding: 12px 0 0; border-top: 1px solid var(--c23-hair); }
.view.howto.col23 .ex-grid .ex-tv { margin-top: 0; padding-top: 0; border-top: 0; }
/* ---------- v025: Settings — 'Reset all data' row: one tight, vertically centred text block ---------- */
.view.view.settings.col23 .toggle-row.link.danger { grid-template-columns: 36px minmax(0, 1fr) 20px !important; column-gap: 12px !important; align-items: center !important; padding: 16px !important; }
.view.view.settings.col23 .toggle-row.link.danger .tr-txt { display: grid !important; grid-auto-rows: auto; row-gap: 2px; align-self: center !important; align-content: center; margin: 0 !important; padding: 0 !important; text-align: left; }
.view.view.settings.col23 .toggle-row.link.danger .tr-txt b { font-size: 16px !important; font-weight: 800 !important; line-height: 20px !important; margin: 0 !important; }
.view.view.settings.col23 .toggle-row.link.danger .tr-txt small { margin: 0 !important; line-height: 18px !important; }
.view.view.settings.col23 .toggle-row.link.danger .set-ico, .view.view.settings.col23 .toggle-row.link.danger .chev { align-self: center !important; margin: 0 !important; }
/* ---------- v025: deck preview sheet — tinted sample cards, even header stack, label on the card column ---------- */
.sheet .sheet-actions::before { left: calc(-20px - var(--sal, 0px)) !important; right: calc(-20px - var(--sar, 0px)) !important; }
.sheet .sd > .sd-art { margin: 2px auto 12px !important; }
.sheet .sd > h3 { margin: 0 0 4px !important; line-height: 1.2 !important; }
.sheet .sd > p.sub { margin: 0 auto !important; max-width: 32ch; text-wrap: balance; line-height: 1.4 !important; }
.sheet .sd > .sd-meta { margin-top: 12px !important; }
.sheet .sd > .sd-label { margin: 24px 0 8px !important; padding-left: 0 !important; text-indent: .16em; }
.sheet .sd .samples { gap: 8px !important; }
.sheet .sd .sample { padding: 12px 14px !important; line-height: 1.4 !important; font-size: 13.5px !important; overflow: visible !important; text-wrap: pretty;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, rgba(255,255,255,.05)), color-mix(in srgb, var(--accent) 4%, rgba(255,255,255,.025))) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.06)) !important; border: 0 !important; }
.sheet .sd .sample::before { content: none !important; display: none !important; }
.sheet .sd .sample span { display: block !important; margin-top: 6px !important; font-size: 12.5px !important; line-height: 1.4 !important; text-wrap: pretty; }
/* ---------- v025: secret vote · round results · final — shared column, gold label, plum/gold badges, docked CTA ---------- */
body[data-screen="vote"] .topbar-title, body[data-screen="result"] .topbar-title, body[data-screen="final"] .topbar-title { color: var(--accent) !important; opacity: 1 !important; }
.view.view.vote, .view.view.result, .view.view.final { --gut: clamp(10px, 3.6vw, 22px); }
/* numbered player badges: plum tile + gold numeral (Game Setup) */
.view.view:is(.vote, .result, .final) .av.av-num { color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.04)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent) !important; border-radius: 8px !important; text-shadow: none !important; font-weight: 900 !important; }
.view.view.vote .vh-pill .av.av-num { border-radius: 50% !important; }
/* pitch summary: SOLD TO label above a balanced value; twist pill stacked above its text */
.view.view:is(.vote, .result, .final) .vo-cust { display: block !important; margin-top: 8px !important; line-height: 1.38 !important; text-wrap: balance; }
.view.view:is(.vote, .result, .final) .vo-cust em { display: block !important; margin: 0 0 2px !important; line-height: 14px !important; }
.view.view:is(.vote, .result, .final) .vo-product { text-wrap: balance; }
.view.view:is(.vote, .result, .final) .vo-twist { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-top: 12px !important; padding: 10px 12px !important; text-align: left; }
.view.view:is(.vote, .result, .final) .vo-twist .tw-kind { margin: 0 !important; }
.view.view:is(.vote, .result, .final) .vo-twist .tw-text { line-height: 1.38 !important; text-wrap: pretty; }
/* vote: cards sized to content, on the shared column, even padding, radio aligned with the name row */
.view.view.vote > .vote-list { padding: 12px calc(8px + var(--gut)) 40px !important; gap: 16px !important; justify-content: flex-start !important; }
.view.view.vote > .vote-list > .vote-opt { flex: none !important; min-height: 0 !important; max-height: none !important; align-content: start !important; padding: 16px !important; }
.view.view.vote > .vote-list > .vote-opt > .vo-radio { top: 15px !important; right: 16px !important; }
.view.view.vote > .vote-list > .vote-opt > .vo-head { min-height: 26px; padding-right: 40px !important; }
.view.view.vote > .vote-list > .vote-opt > .vo-product { margin-top: 8px !important; }
.view.view.vote > .vote-list > .vote-opt.on { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.06)), color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.03))) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 16px 32px -22px rgba(0,0,0,.75) !important; }
.view.view.vote > .vote-list > .vote-opt.on .vo-radio { background: var(--accent) !important; border-color: var(--accent) !important; color: #2a0b4a !important; box-shadow: none !important; }
.view.view.vote > .vote-cta { position: relative; z-index: 2; margin: -32px -18px 0 !important; padding: 24px calc(18px + var(--gut)) calc(var(--sab) + 16px) !important; align-items: center !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg0) 94%, transparent) 46%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.view.view.vote > .vote-cta::before, .view.view.vote > .vote-cta::after { content: none !important; }
.view.view.vote > .vote-cta .btn { width: 100% !important; max-width: var(--btn-max, 300px) !important; }
/* round results + final: content on the shared column, GOT IT-style dock with end clearance */
.view.view:is(.result, .final) > :is(.win-pitch, .card, section, .potn) { margin-left: var(--gut) !important; margin-right: var(--gut) !important; }
.view.view.result > .win-pitch { margin-top: 24px !important; margin-bottom: 16px !important; padding: 16px !important; }
.view.view.result > .card { margin-bottom: 16px !important; }
.view.view:is(.result, .final) > .sticky-cta { margin: 16px -18px 0 !important; padding: 24px calc(18px + var(--gut)) calc(var(--sab) + 16px) !important; min-height: 0 !important; align-items: center !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg0) 94%, transparent) 46%) !important; }
.view.view:is(.result, .final) > .sticky-cta::before, .view.view:is(.result, .final) > .sticky-cta::after { content: none !important; }
.view.view:is(.result, .final) > .sticky-cta .btn { width: 100% !important; max-width: var(--btn-max, 300px) !important; }
.view.view.result .bar-row { grid-template-columns: minmax(96px, 36%) minmax(0, 1fr) 24px !important; }
/* v025: Settings rows declared a 34px icon column for a 36px tile, so the visual text gap was 10px; one true 36px column + 12px gap on every row keeps all titles on one line */
.view.view.settings.col23 .toggle-row[data-action="toggle-setting"] { grid-template-columns: 36px minmax(0, 1fr) 50px !important; }
.view.view.settings.col23 .toggle-row.gp-head { grid-template-columns: 36px minmax(0, 1fr) 0px !important; }
.view.view.settings.col23 .toggle-row.link { grid-template-columns: 36px minmax(0, 1fr) 20px !important; }
/* ---------- v026: polish pass ---------- */
/* deck preview sheet dock: the BUY/CLOSE fade used to end in solid --bg0 over a sheet whose own gradient is still lighter at that
height, and it stopped 20px outside the 300px button column → a faint darker rectangle with hard side edges. Now the sheet's
gradient settles into --bg0 before the dock zone and the fade spans the full sheet width (container units), so it is seamless. */
.sheet:has(.sheet-actions:not(.cf-actions)) { container-type: inline-size;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg1) 92%, #fff) 0, var(--bg0) calc(100% - 280px), var(--bg0) 100%) !important; }
@supports (width: 1cqw) {
.sheet .sheet-actions:not(.cf-actions)::before { left: calc((100% - 100cqw) / 2 - 20px - var(--sal, 0px)) !important; right: calc((100% - 100cqw) / 2 - 20px - var(--sar, 0px)) !important; }
}
/* v026: in-game top labels gold, same as vote/result/final */
body[data-screen] .topbar-title, body[data-screen] #toptitle { color: var(--accent) !important; }
/* v026: no stranded words in centred notes, the twist flash and the vote-mode captions */
.secret, .secret *, .tb-text, .tb-label, .tb-sub, .twist-burst, .sheet .sub, .confirm .sub { text-wrap: balance; }
.tb-text { hyphens: manual; -webkit-hyphens: manual; }
/* v026: the TOP SECRET stamp stays inside the prompt card */
.prompt-card .pc-stamp, .pc-stamp { right: 8px !important; }
/* v026: idle twist teaser breathes (opacity), not scale, so it keeps the card's gutters */
@keyframes ppBreathe { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
.twist-slot:not(.charging) .twist-locked { animation: ppBreathe 1.6s ease-in-out infinite !important; transform: none !important; }
/* v026: result dock can't shrink, so the button sits fully inside it above the safe area */
.view .sticky-cta, .view .vote-cta, .view .bottom-cta { flex-shrink: 0 !important; }
/* v026: handoff button lines up with prompt/pitch/vote buttons */
.view.handoff .bottom-cta { padding: 6px 0 0 !important; }
@media (prefers-reduced-motion: reduce) { .twist-slot:not(.charging) .twist-locked { animation: none !important; } }
.seg-btn small { text-wrap: balance; }
/* v026: random prompt text never leaves one word on the last line (prompt card headlines, final highlights) */
.pc-text, .twist-card h3, .potn p { text-wrap: balance; }
.final li, .view.final li, .vo-product, .vo-cust, .tw-text { text-wrap: pretty; }
/* v026: 375-wide phones keep "🤫 Secret ballot" on one line, like "🙌 Group pick" */
@media (max-width: 389px) { .seg-btn { padding-inline: 10px !important; } .seg-btn b { font-size: min(15px, 3.95vw) !important; white-space: nowrap; } }
@media (max-width: 350px) { .seg-btn b { white-space: normal; } }
/* v026: vote twist lines and final highlights balance so one word never sits alone */
.view.view:is(.vote, .result, .final) .vo-twist .tw-text, .final li, .view.final li, .highlights li { text-wrap: balance !important; }