/* Dos Play on the web. Confetti Rush, same tokens as the landing page:
   paper and ink, 3px ink borders, hard offset shadows, tilted stickers, confetti. */

:root{
  --paper:#FFFDF4; --shade:#F4F1E4; --ink:#101223;
  --cobalt:#2A46F0; --pink:#FF4D8D; --sun:#FFC633; --mint:#2FD6A8;
  --sky:#B7E3FF; --blush:#FFD6E5; --butter:#FFEDB8; --mint-tint:#C2F5E4;
  --peach:#FFD9C2; --lilac:#E2D2FA; --red:#FFB3B3;
  --soft:#3a3b48; --muted:#5c5d6a; --faint:#6a6b78;
  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --border:3px; --shadow:6px;
  --ease-pop:cubic-bezier(.2,1.5,.45,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
html.modal-lock{overflow:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;min-height:100vh;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
img{display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.display{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.92;text-transform:uppercase}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);margin:0 0 10px}
.sub{font-size:1.06rem;color:var(--soft);max-width:58ch;margin:12px 0 0}
.note{font-size:.85rem;color:var(--faint);margin:0}

:focus{outline:none}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:10px}
/* Headings and panels that only receive focus so screen readers land in the right place. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.btn-pink:focus-visible,.btn-cobalt:focus-visible,.curtain :focus-visible,.fill-cobalt :focus-visible,.fill-pink :focus-visible{outline-color:var(--sun)}

.icon{display:inline-grid;place-items:center;width:1.25em;height:1.25em;flex:none}
.icon svg{width:100%;height:100%;display:block}

/* ------------------------------------------------------------ Confetti */
.confetti,.burst{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.confetti{z-index:0}
.burst{z-index:300}
.cf{position:absolute;top:-16vh;animation:cf-fall linear infinite}
.cf-sway{display:block;animation:cf-sway ease-in-out infinite alternate}
.cf-bit{display:block;border-radius:2px;animation:cf-spin linear infinite}
@keyframes cf-fall{to{transform:translate3d(0,132vh,0)}}
@keyframes cf-sway{from{transform:translateX(calc(var(--sway) * -1))}to{transform:translateX(var(--sway))}}
@keyframes cf-spin{to{transform:rotate3d(var(--ax),var(--ay),.4,360deg)}}
.bf{position:fixed;border-radius:2px;animation:cf-pop var(--pop) cubic-bezier(.15,.72,.35,1) forwards}
@keyframes cf-pop{from{transform:translate3d(0,0,0) rotate(0);opacity:1}to{transform:translate3d(var(--bx),var(--by),0) rotate(var(--br));opacity:0}}
body.is-playing .confetti{opacity:.55}
@media (max-width:640px){.cf:nth-child(2n){display:none}}

/* ------------------------------------------------------------ Shell */
#app-shell{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;padding-bottom:40px}
main:focus{outline:none}

.topbar{position:relative;z-index:5;min-height:76px;display:flex;align-items:center}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);border-radius:12px}
.logo img{width:40px;height:40px;border-radius:10px;border:2.5px solid var(--ink)}
.logo .name,.foot-brand .name{font-family:var(--display);font-size:1.45rem;text-transform:uppercase;line-height:1}
.logo .name em,.foot-brand .name em{font-style:normal;color:var(--pink)}
.top-actions{display:flex;align-items:center;gap:10px}
.names-chip{display:flex;align-items:center;gap:4px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);padding:4px 12px 4px 5px;box-shadow:3px 3px 0 var(--ink);font-weight:800;font-size:.82rem;max-width:230px}
.names-chip .dot{width:26px;height:26px;border-radius:999px;border:2px solid var(--ink);display:grid;place-items:center;font-size:.72rem}
.names-chip .dot.seat-0{background:var(--sky)}
.names-chip .dot.seat-1{background:var(--blush);margin-left:-9px}
.names-text{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:44px;height:44px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;padding:0;transition:transform .08s,box-shadow .08s}
.icon-btn .icon{width:22px;height:22px}
.top-btn{display:inline-flex;align-items:center;gap:8px;height:44px;border:2.5px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);padding:0 16px;font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);transition:transform .08s,box-shadow .08s}
.top-btn .icon{width:20px;height:20px}
.top-shop{background:var(--sun)}
.top-link.is-linked{background:var(--mint-tint)}
.icon-btn:hover,.top-btn:hover,.names-chip:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.icon-btn:active,.top-btn:active,.names-chip:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

#phone-banner{position:relative;z-index:6}
.phone-banner{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 14px;background:var(--ink);color:var(--paper);font-size:.84rem;font-weight:700}
.phone-banner img{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--paper)}
.pb-text{flex:1;line-height:1.25}
.pb-cta{background:var(--pink);color:var(--paper);text-decoration:none;border:2px solid var(--paper);border-radius:999px;padding:5px 12px;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.pb-close{width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:var(--paper);padding:0}
.pb-close .icon{width:18px;height:18px}

.site-foot{position:relative;z-index:2;border-top:var(--border) solid var(--ink);padding:26px 0 34px;background:var(--paper)}
.foot{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:center}
.foot-brand{display:flex;flex-direction:column;gap:4px}
.foot-brand .small{font-size:.8rem;color:var(--faint)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:.86rem}
.foot-link{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2.5px solid var(--pink)}
.foot-lang{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.lang-btn{border:0;background:var(--paper);padding:5px 12px;font-weight:800;font-size:.76rem}
.lang-btn.on{background:var(--ink);color:var(--paper)}
body.is-playing .site-foot{display:none}

/* ------------------------------------------------------------ Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:var(--border) solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);
  padding:14px 24px;font-weight:800;font-size:.98rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;
  text-decoration:none;color:var(--ink);background:var(--sun);
  transition:transform .08s ease,box-shadow .08s ease,background .15s;
}
.btn .icon{width:20px;height:20px}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn[disabled]{cursor:progress}
.btn-pink{background:var(--pink);color:var(--paper)}
.btn-sun{background:var(--sun)}
.btn-mint{background:var(--mint)}
.btn-cobalt{background:var(--cobalt);color:var(--paper)}
.btn-paper{background:var(--paper)}
.btn-small{padding:10px 16px;font-size:.8rem;border-radius:13px;box-shadow:4px 4px 0 var(--ink)}
.btn-small:active{transform:translate(4px,4px)}
.btn-big{padding:18px 24px;font-size:1.08rem;border-radius:18px}
.btn-stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.btn-stack small{font-size:.74rem;font-weight:600;letter-spacing:0;text-transform:none;opacity:.8}
.btn.busy{opacity:.85}
.btn-link{border:0;background:none;padding:2px 0;font-weight:800;font-size:.9rem;color:var(--ink);text-decoration:none;border-bottom:2.5px solid var(--pink);border-radius:0;line-height:1.3}
.btn-link:hover{border-bottom-color:var(--cobalt)}
.btn-link.danger{border-bottom-color:var(--pink);color:#b0184f}
.btn-quiet{border:0;background:none;padding:10px 8px;font-weight:700;font-size:.9rem;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.btn-quiet:hover{color:var(--ink)}

.key{
  display:inline-grid;place-items:center;min-width:2.05em;height:2.05em;padding:0 .4em;
  border:2.5px solid var(--ink);border-radius:9px;background:var(--paper);box-shadow:0 3px 0 var(--ink);
  font:800 .86rem/1 var(--body);text-transform:uppercase;color:var(--ink);transform:translateY(-1px);flex:none;
}
.key-small{font-size:.7rem;border-width:2px;box-shadow:0 2px 0 var(--ink);border-radius:7px}

.pill{
  display:inline-flex;align-items:center;gap:6px;border:var(--border) solid var(--ink);border-radius:999px;
  box-shadow:4px 4px 0 var(--ink);padding:7px 16px;background:var(--paper);
  font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
}
.pill.tilt{transform:rotate(-4deg)}
.pill-mint{background:var(--mint)}
.pill-sun{background:var(--sun)}
.pill-pink{background:var(--pink);color:var(--paper)}
.pill-sky{background:var(--sky)}
.pill-paper{background:var(--shade)}
.pill-tiny{padding:2px 8px;font-size:.6rem;border-width:2px;box-shadow:2px 2px 0 var(--ink)}

.spinner{width:34px;height:34px;border-radius:999px;border:4px solid var(--shade);border-top-color:var(--pink);border-right-color:var(--cobalt);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.loading{min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:40px 24px;font-weight:700;color:var(--muted)}

.field{
  width:100%;border:var(--border) solid var(--ink);border-radius:14px;background:var(--paper);
  padding:13px 14px;font-size:1.05rem;font-weight:700;box-shadow:inset 0 3px 0 rgba(16,18,35,.06);
}
.field::placeholder{color:#a3a4ae;font-weight:600}
.field:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.field-msg{min-height:1.4em;margin:0;color:#b0184f;font-weight:700;font-size:.9rem}

.seat-avatar{
  width:38px;height:38px;flex:none;border-radius:12px;border:2.5px solid var(--ink);display:grid;place-items:center;
  font-weight:800;font-size:1rem;box-shadow:3px 3px 0 var(--ink);background:var(--paper);
}
.seat-avatar.small{width:26px;height:26px;border-radius:8px;font-size:.72rem;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
.seat-0 .seat-avatar,.seat-avatar.seat-0{background:var(--sky)}
.seat-1 .seat-avatar,.seat-avatar.seat-1{background:var(--blush)}

.enter{animation:enter .34s var(--ease-out) both}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

.stamp{
  position:absolute;top:16px;right:14px;z-index:1;pointer-events:none;
  font-family:var(--display);text-transform:uppercase;font-size:1.05rem;letter-spacing:.04em;line-height:1;
  color:var(--pink);border:3px solid var(--pink);border-radius:8px;padding:6px 10px 5px;
  transform:rotate(9deg);background:rgba(255,253,244,.88);box-shadow:inset 0 0 0 2px rgba(255,253,244,.9),inset 0 0 0 4px var(--pink);
}
.stamp-big{position:static;display:inline-block;font-size:1.5rem;padding:9px 16px 7px;transform:rotate(-5deg);margin-bottom:18px}

/* ------------------------------------------------------------ Segmented */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg-opt{
  flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
  border:2.5px solid var(--ink);border-radius:12px;background:var(--shade);padding:10px 12px;
  font-weight:800;font-size:.82rem;box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .15s;
}
.seg-opt[aria-checked="true"]{background:var(--cobalt);color:var(--paper)}
.seg-opt:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.seg-icon{width:26px;height:26px}
.seg-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2}
.seg-detail{font-size:.72rem;font-weight:600;opacity:.8;margin-top:2px}
.seg-cards .seg-opt{justify-content:flex-start;padding:12px 14px;border-radius:14px}
.seg-cards .seg-opt[aria-checked="true"]{background:var(--sky);color:var(--ink);box-shadow:4px 4px 0 var(--cobalt)}
.seg-small .seg-opt{padding:6px 10px;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;border-width:2px;box-shadow:2px 2px 0 var(--ink);border-radius:10px;white-space:nowrap}
.seg-small .seg-icon{width:20px;height:20px}
.seg-small .seg-opt[aria-checked="true"]{background:var(--ink);color:var(--paper)}

/* ------------------------------------------------------------ Setup */
.setup{display:flex;justify-content:center;padding-top:10px}
.setup-card{
  width:min(640px,100%);background:var(--paper);border:var(--border) solid var(--ink);border-radius:28px;
  box-shadow:10px 10px 0 var(--ink);padding:36px 36px 30px;transform:rotate(-.6deg);display:flex;flex-direction:column;gap:18px;
}
.setup-title{font-size:clamp(2.6rem,7vw,4.2rem);margin:-6px 0 0}
.setup-sub{margin:-6px 0 0;color:var(--soft);font-size:1.05rem}
.setup-names{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.name-field{display:flex;flex-direction:column;gap:8px;padding:14px;border:2.5px solid var(--ink);border-radius:18px}
.name-field.seat-0{background:var(--sky)}
.name-field.seat-1{background:var(--blush)}
.name-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.name-label{font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.name-keys{display:flex;gap:4px}
.setup-lang{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.setup-lang-label{font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.setup-lang .seg{flex:1;max-width:320px}
.setup-go{align-self:stretch;justify-content:space-between}

/* ------------------------------------------------------------ Shelf */
.shelf-head{padding:14px 0 28px}
.shelf-head h1{font-size:clamp(2.8rem,6.4vw,4.6rem);margin:0}
.shelf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 26px}
.game-card{
  position:relative;display:flex;flex-direction:column;gap:8px;min-height:246px;
  background:var(--card,var(--paper));border:var(--border) solid var(--ink);border-radius:24px;
  box-shadow:6px 6px 0 var(--ink);padding:22px 22px 18px;
  transform:rotate(var(--tilt,0deg));transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out);
  animation:deal .5s var(--ease-pop) both;animation-delay:calc(var(--i,0) * 45ms);
}
@keyframes deal{from{opacity:0;transform:translateY(18px) rotate(calc(var(--tilt,0deg) * 3))}to{opacity:1;transform:rotate(var(--tilt,0deg))}}
.game-card:nth-child(3n+1){--tilt:-.9deg}
.game-card:nth-child(3n+2){--tilt:.6deg}
.game-card:nth-child(3n){--tilt:-.4deg}
.game-card:hover{transform:rotate(0deg) translate(-2px,-3px);box-shadow:9px 9px 0 var(--ink)}
.game-card:focus-within{transform:rotate(0deg)}
.g-whos-more-likely-to{--card:var(--sky);--accent:var(--cobalt)}
.g-this-or-that{--card:var(--butter);--accent:var(--sun)}
.g-would-you-rather{--card:var(--mint-tint);--accent:var(--mint)}
.g-never-have-i-ever{--card:var(--blush);--accent:var(--pink)}
.g-red-flag-green-flag{--card:var(--peach);--accent:#FF7A3D}
.g-truth-or-dare{--card:var(--lilac);--accent:#9B5DE5}
.g-couples-match-quiz{--card:#FFE3B8;--accent:var(--sun)}
.gc-icon,.start-icon{width:58px;height:58px;border:var(--border) solid var(--ink);border-radius:17px;background:var(--paper);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
.gc-icon .icon,.start-icon .icon{width:36px;height:36px}
.gc-title{font-family:var(--display);font-weight:400;font-size:1.95rem;text-transform:uppercase;line-height:.95;margin:10px 0 0}
.gc-link{text-decoration:none;color:inherit}
.gc-link::after{content:"";position:absolute;inset:0;border-radius:22px;z-index:0}
.gc-link:focus-visible{outline:none}
.gc-link:focus-visible::after{outline:3px solid var(--cobalt);outline-offset:4px}
.gc-tagline{margin:0;color:var(--soft);font-size:.95rem;line-height:1.35}
.gc-meta{margin:2px 0 0;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gc-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fresh{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.8rem}
.fresh-bar{display:inline-block;width:62px;height:12px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--paper);flex:none}
.fresh-bar i{display:block;height:100%;background:var(--mint);border-right:2px solid var(--ink);transition:width .4s var(--ease-out)}
.fresh-bar.wide{width:auto;flex:1;min-width:60px;max-width:180px}
.lock-badge{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;
  border:2px solid var(--ink);border-radius:999px;background:var(--paper);padding:5px 11px 5px 8px;
  font-weight:800;font-size:.74rem;box-shadow:2px 2px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .15s;
}
.lock-badge .icon{width:16px;height:16px}
.lock-badge:hover{background:var(--sun);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.game-card.is-played .fresh{color:var(--muted)}

.tile{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:246px;
  border:var(--border) dashed var(--ink);border-radius:24px;padding:22px;background:rgba(255,253,244,.8);
  animation:deal .5s var(--ease-pop) both;animation-delay:300ms;
}
.tile p{margin:0;color:var(--soft);font-size:.95rem;line-height:1.4}
.tile .btn{margin-top:auto}
.tile-icon{width:54px;height:54px;border:var(--border) solid var(--ink);border-radius:16px;background:var(--sun);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink)}
.tile-icon .icon{width:32px;height:32px}
.tile-appicon{width:54px;height:54px;border-radius:14px;border:var(--border) solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.tile-title{font-family:var(--display);font-weight:400;font-size:1.6rem;text-transform:uppercase;line-height:1;margin:6px 0 0}
.tile-shop{background:var(--butter);border-style:solid;box-shadow:6px 6px 0 var(--ink);transform:rotate(.7deg)}


/* ------------------------------------------------------------ Start screen */
.back-link{display:inline-flex;align-items:center;gap:8px;margin:4px 0 18px;font-weight:800;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.back-link .icon{width:18px;height:18px}
.back-link:hover span{border-bottom:2.5px solid var(--pink)}
.start-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.start-left{display:flex;flex-direction:column;gap:22px;padding-top:6px}
.start-headline{font-size:clamp(3.2rem,7.5vw,5.6rem);margin:0}
.start .start-icon{background:var(--card,var(--paper))}
.howto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:520px}
.howto li{display:flex;align-items:center;gap:14px;background:var(--shade);border:2.5px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:3px 3px 0 var(--ink);font-size:.98rem;line-height:1.35}
.howto-n{width:30px;height:30px;flex:none;border-radius:999px;border:2.5px solid var(--ink);background:var(--card,var(--sun));display:grid;place-items:center;font-weight:800;font-size:.85rem}
.start-right{
  display:flex;flex-direction:column;gap:18px;background:var(--paper);border:var(--border) solid var(--ink);
  border-radius:26px;box-shadow:8px 8px 0 var(--ink);padding:24px;
}
.deckstrip{display:flex;flex-direction:column;gap:10px}
.deck-top{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.92rem}
.deck-icon{width:22px;height:22px}
.deck-line{white-space:nowrap}
.deck-teaser{
  display:flex;align-items:center;gap:8px;width:100%;border:2px dashed var(--ink);border-radius:12px;background:var(--shade);
  padding:9px 12px;font-weight:800;font-size:.84rem;text-align:left;transition:background .15s;
}
.deck-teaser .icon{width:18px;height:18px}
.deck-teaser > span:not(.icon){flex:1}
.deck-teaser:hover{background:var(--butter)}
.lowdeck,.lastfresh{
  display:flex;align-items:center;gap:14px;background:var(--sun);border:var(--border) solid var(--ink);border-radius:18px;
  box-shadow:5px 5px 0 var(--ink);padding:14px 14px 14px 16px;transform:rotate(-1deg);animation:wiggle-in .6s var(--ease-pop) both;
}
@keyframes wiggle-in{0%{opacity:0;transform:scale(.9) rotate(-4deg)}60%{opacity:1;transform:scale(1.03) rotate(.5deg)}100%{transform:rotate(-1deg)}}
.lowdeck-top{display:none}
.lowdeck-icon{width:44px;height:44px;flex:none;border:2.5px solid var(--ink);border-radius:13px;background:var(--paper);display:grid;place-items:center}
.lowdeck-icon .icon{width:28px;height:28px}
.lowdeck-text{flex:1;display:flex;flex-direction:column;gap:2px;line-height:1.3;font-size:.92rem}
.lowdeck-text strong{font-size:1rem}
.lowdeck .btn{flex:none}
.option-group{display:flex;flex-direction:column;gap:8px}
.option-label{margin:0;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.option-detail{margin:0;font-size:.8rem;color:var(--muted)}
.btn-deal{justify-content:space-between;width:100%;margin-top:4px}
.btn-deal .icon{width:24px;height:24px}

/* ------------------------------------------------------------ Wall */
.wall-hero{text-align:center;max-width:780px;margin:0 auto 30px;display:flex;flex-direction:column;align-items:center}
.wall-hero .start-icon{background:var(--card,var(--paper));margin-bottom:18px}
.wall-title{font-size:clamp(2.3rem,5.6vw,4rem);margin:0}
.wall-sub{font-size:1.08rem;color:var(--soft);margin:14px 0 0;max-width:52ch}
.wall .notice-gated{max-width:820px;margin:0 auto 22px}
.wall-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:980px;margin:0 auto}
.wall-offers .offer-best{grid-column:1 / -1}
.wall-offers.odd .offer-best{grid-column:auto}
.wall-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;margin:28px auto 0;text-align:center}
.wall-replay{display:flex;justify-content:center;margin-top:30px}
.replay-link{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:8px 6px;font-weight:700;font-size:.86rem;color:var(--faint)}
.replay-link .icon{width:17px;height:17px}
.replay-link:hover{color:var(--ink);text-decoration:underline}
.shop-promise{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:700;font-size:.9rem}
.shop-promise .icon{width:20px;height:20px;color:#0d8f6b}

/* ------------------------------------------------------------ Offers (shop + wall) */
.offers{display:grid;gap:20px}
.offer{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;align-items:start;
  background:var(--paper);border:var(--border) solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:20px;
}
.offer-best{background:var(--butter);box-shadow:7px 7px 0 var(--ink)}
.offer-owned{background:var(--shade);box-shadow:3px 3px 0 var(--ink)}
.offer-owned .offer-title,.offer-owned .offer-pitch{opacity:.7}
.accent-pink{--accent:var(--pink)}
.accent-cobalt{--accent:var(--sky)}
.accent-mint{--accent:var(--mint-tint)}
.accent-sun{--accent:var(--sun)}
.badge-best{
  position:absolute;top:-15px;right:20px;background:var(--pink);color:var(--paper);border:var(--border) solid var(--ink);
  border-radius:999px;padding:5px 13px;font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(4deg);box-shadow:3px 3px 0 var(--ink);
}
.offer-head{display:flex;align-items:flex-start;gap:14px}
.offer-icon{width:50px;height:50px;border:2.5px solid var(--ink);border-radius:14px;background:var(--accent,var(--sun));display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);flex:none}
.offer-icon svg{width:32px;height:32px}
.accent-pink .offer-icon{color:var(--ink)}
.offer-title{font-family:var(--display);font-weight:400;font-size:1.55rem;text-transform:uppercase;line-height:1;margin:2px 0 0}
.here{display:inline-block;vertical-align:.15em;margin-left:10px;font-family:var(--body);font-weight:800;font-size:.72rem;letter-spacing:.06em;background:var(--mint);border:2px solid var(--ink);border-radius:999px;padding:3px 9px;box-shadow:2px 2px 0 var(--ink);transform:rotate(-3deg);white-space:nowrap}
.offer-pitch{margin:6px 0 0;color:var(--soft);font-size:.93rem;line-height:1.4}
.offer-count{margin:12px 0 0;font-weight:800;font-size:.84rem;line-height:1.35}
.offer-value{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:4px 12px 4px 6px;font-weight:800;font-size:.8rem}
.offer-value .icon{width:18px;height:18px}
.offer-samples{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.sample{background:rgba(244,241,228,.9);border:2px dashed rgba(16,18,35,.4);border-radius:13px;padding:9px 12px;font-size:.9rem;line-height:1.35;display:flex;flex-direction:column;gap:2px}
.offer-best .sample{background:rgba(255,253,244,.75)}
.sample-game{font-weight:800;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sample-text::before{content:"“"}
.sample-text::after{content:"”"}
.sample-tag{align-self:flex-start;margin-top:4px;font-weight:800;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--blush);border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px}
.sample-opts{font-weight:800;font-size:.8rem}
.sample-opts i{font-style:normal;opacity:.5}
.offer-buy{display:flex;align-items:center}
.btn-price{min-width:118px;font-size:1.05rem}
.btn-price.busy .price-label{font-size:.72rem}
.owned-badge{display:inline-flex;align-items:center;gap:6px;border:2.5px solid var(--ink);border-radius:999px;background:var(--mint);padding:7px 14px;font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.owned-badge .icon{width:18px;height:18px}
.in-app{display:inline-flex;align-items:center;border:2px dashed var(--ink);border-radius:999px;padding:7px 14px;font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);white-space:nowrap}

.notice{border:var(--border) solid var(--ink);border-radius:20px;padding:18px 20px;box-shadow:5px 5px 0 var(--ink);background:var(--paper)}
.notice p{margin:6px 0 0;color:var(--soft);line-height:1.45}
.notice-title{font-family:var(--display);font-weight:400;font-size:1.45rem;text-transform:uppercase;margin:0;line-height:1}
.notice-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:14px}
.notice-gated{background:var(--sky)}
.notice-soon{background:var(--blush);animation:wiggle-in .5s var(--ease-pop) both}
.notice-soft{background:var(--butter);box-shadow:3px 3px 0 var(--ink);font-weight:700;margin:0 0 16px}
.notice .apple{width:15px;height:18px}

/* ------------------------------------------------------------ Modals */
.modal-overlay{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(16,18,35,.58);opacity:0;transition:opacity .18s ease;
}
.modal-overlay.in{opacity:1}
.modal-overlay.out{opacity:0}
.modal{
  position:relative;width:min(540px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;
  background:var(--paper);border:var(--border) solid var(--ink);border-radius:28px;box-shadow:10px 10px 0 var(--ink);
  padding:32px 30px 28px;transform:translateY(14px) scale(.97);transition:transform .24s var(--ease-pop);
}
.modal-overlay.in .modal{transform:none}
.modal-wide{width:min(900px,100%)}
.modal-x{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:13px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);padding:0}
.modal-x .icon{width:20px;height:20px}
.modal-x:active{transform:translate(3px,3px);box-shadow:none}
.modal-title{font-family:var(--display);font-weight:400;font-size:2rem;text-transform:uppercase;line-height:.98;margin:0 48px 0 0}
.modal-body{color:var(--soft);font-size:1rem;margin:12px 0 0;line-height:1.5}
.confirm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:24px}
.modal-confirm{width:min(480px,100%)}

.shop-head{display:flex;align-items:center;gap:16px;margin:0 48px 22px 0}
.shop-icon{width:62px;height:62px;flex:none;border:var(--border) solid var(--ink);border-radius:18px;background:var(--sun);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);transform:rotate(-4deg)}
.shop-icon .icon{width:38px;height:38px}
.shop-title{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.4vw,2.8rem);text-transform:uppercase;line-height:.95;margin:0}
.shop-sub{margin:6px 0 0;color:var(--soft)}
.shop .notice{margin-bottom:22px}
.shop-notices:empty{display:none}
.shop-empty{display:flex;align-items:center;gap:10px;font-weight:800;background:var(--mint-tint);border:2.5px solid var(--ink);border-radius:16px;padding:14px 16px;margin:0}
.shop-empty .icon{width:22px;height:22px}
.shop-foot{margin-top:24px;padding-top:18px;border-top:2.5px dashed rgba(16,18,35,.35);display:flex;flex-direction:column;gap:12px}
.shop-links{display:flex;flex-wrap:wrap;gap:10px 22px}

.purchase{text-align:center;display:flex;flex-direction:column;align-items:center;padding:6px 0}
.purchase .modal-title{margin:14px 0 0}
.purchase .spinner{width:46px;height:46px}
.purchase-icon{width:76px;height:76px;border:var(--border) solid var(--ink);border-radius:22px;background:var(--sun);display:grid;place-items:center;box-shadow:5px 5px 0 var(--ink);transform:rotate(-6deg);animation:pop-in .5s var(--ease-pop) both}
.purchase-icon .icon{width:46px;height:46px}
@keyframes pop-in{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(-6deg);opacity:1}}
.purchase-done .modal-title{font-size:clamp(2.2rem,6vw,3rem)}
.purchase-count{font-weight:800;font-size:1.15rem;color:var(--ink)}
.purchase .confirm-actions{justify-content:center}

.link{display:flex;flex-direction:column;gap:4px}
.link-icon{width:58px;height:58px;border:var(--border) solid var(--ink);border-radius:17px;background:var(--sky);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);margin-bottom:12px;transform:rotate(-4deg)}
.link-icon .icon{width:34px;height:34px}
.link-icon.ok{background:var(--mint);animation:pop-in .5s var(--ease-pop) both}
.link-form{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.code{border:0;margin:0;padding:0;min-width:0}
.code-legend{font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding:0}
.code-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.code-box{
  width:100%;aspect-ratio:4 / 5;min-height:54px;text-align:center;border:var(--border) solid var(--ink);border-radius:14px;background:var(--paper);
  font-family:var(--display);font-size:clamp(1.6rem,6vw,2.2rem);text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);
  padding:0;caret-color:var(--pink);
}
.code-box:focus-visible{outline:none;background:var(--butter);box-shadow:3px 3px 0 var(--cobalt);border-color:var(--cobalt)}
.code-boxes.bad{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
.code-boxes.bad .code-box{border-color:#d11d5c}
.link-submit{justify-content:space-between}
.link-status{min-height:1.4em;margin:0;font-weight:700;color:#b0184f;line-height:1.4}
.link-app{margin:18px 0 0;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.link-done{align-items:center;text-align:center}
.link-done .modal-title{margin:4px 0 0}

.account{display:flex;flex-direction:column;gap:18px}
.acct-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;border:2.5px solid var(--ink);border-radius:18px;padding:16px;background:var(--shade)}
.acct-card.is-linked{background:var(--mint-tint)}
.acct-status{display:flex;align-items:flex-start;gap:12px}
.acct-status h3{margin:0;font-size:1.05rem}
.acct-status p{margin:4px 0 0;color:var(--soft);font-size:.92rem}
.acct-dot{width:36px;height:36px;flex:none;border:2.5px solid var(--ink);border-radius:11px;background:var(--paper);display:grid;place-items:center}
.acct-dot .icon{width:22px;height:22px}
.acct-section h3{margin:0 0 10px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:6px 13px;font-size:.85rem;font-weight:700;background:var(--butter)}
.names-inline{display:flex;flex-direction:column;gap:10px}
.names-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.names-inline .btn{align-self:flex-start}

/* ------------------------------------------------------------ Toasts */
.toasts{position:fixed;left:0;right:0;bottom:22px;z-index:400;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;padding:0 16px}
.toast{
  pointer-events:auto;max-width:520px;background:var(--ink);color:var(--paper);border:var(--border) solid var(--ink);
  border-radius:16px;box-shadow:5px 5px 0 rgba(16,18,35,.25);padding:12px 18px;font-weight:700;font-size:.95rem;
  transform:translateY(20px);opacity:0;transition:transform .25s var(--ease-pop),opacity .2s;
}
.toast.in{transform:none;opacity:1}
.toast.out{transform:translateY(10px);opacity:0}
.toast-mint{background:var(--mint);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}

/* ------------------------------------------------------------ Playing */
.play{display:flex;flex-direction:column;gap:18px;padding:0 24px;max-width:1140px;margin:0 auto}
.gamebar{
  display:flex;align-items:center;gap:14px;background:var(--paper);border:var(--border) solid var(--ink);border-radius:18px;
  box-shadow:4px 4px 0 var(--ink);padding:8px 10px 8px 8px;min-height:60px;
}
.bar-leave{width:40px;height:40px;flex:none;border:2.5px solid var(--ink);border-radius:12px;background:var(--shade);display:grid;place-items:center;padding:0}
.bar-leave .icon{width:18px;height:18px}
.bar-leave:hover{background:var(--blush)}
.bar-title{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.1}
.bar-game{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-progress{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-height:1.1em}
.bar-score{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.points{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.86rem;background:var(--mint-tint);border:2px solid var(--ink);border-radius:999px;padding:4px 12px 4px 7px}
.points .icon{width:18px;height:18px}
.hearts{display:inline-flex;align-items:center;gap:2px;font-weight:800;font-size:.8rem}
.hearts-name{margin-right:5px;max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heart{font-size:1.05rem;line-height:1;transition:transform .3s var(--ease-pop),opacity .3s}
.hearts.seat-0 .heart.on{color:var(--cobalt)}
.hearts.seat-1 .heart.on{color:var(--pink)}
.heart.off{color:#c9c9d3;transform:scale(.75)}
.score-chip{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--ink);border-radius:999px;padding:3px 12px 3px 4px;background:var(--paper);font-size:1rem;opacity:.6;transition:opacity .2s,transform .2s}
.score-chip.active{opacity:1;transform:translateY(-1px);box-shadow:2px 2px 0 var(--ink)}
.score-chip.seat-0.active{background:var(--sky)}
.score-chip.seat-1.active{background:var(--blush)}
.bar-mode{flex:none;width:auto;flex-wrap:nowrap}
.bar-mode .seg-opt{flex:0 0 auto}
.stage{min-height:520px}

.prompt-card{
  position:relative;max-width:900px;margin:0 auto;background:var(--paper);border:var(--border) solid var(--ink);border-radius:26px;
  box-shadow:8px 8px 0 var(--ink);padding:22px 34px 26px;text-align:center;transform:rotate(-.5deg);
}
.tone-calm .prompt-card{transform:none;border-radius:24px}
.prompt-eyebrow{margin:0;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.prompt-text{margin:8px 0 0;font-weight:800;font-size:clamp(1.3rem,.9rem + 1.5vw,2.05rem);line-height:1.22;text-wrap:balance}
.prompt-text:focus{outline:none}
.prompt-card.small{padding:14px 20px 16px;box-shadow:5px 5px 0 var(--ink)}
.prompt-card.small .prompt-text{font-size:clamp(1.05rem,.9rem + .7vw,1.35rem)}

.keys-stage{display:flex;flex-direction:column;gap:22px}
.seats{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.seat{
  position:relative;display:flex;flex-direction:column;gap:14px;background:var(--tint);border:var(--border) solid var(--ink);
  border-radius:24px;box-shadow:6px 6px 0 var(--ink);padding:16px 18px 14px;transition:background .3s;
}
.seat-0{--tint:var(--sky);--tone:var(--cobalt);--wash:#E6F4FF}
.seat-1{--tint:var(--blush);--tone:var(--pink);--wash:#FFEDF3}
.seat{background:var(--wash)}
.seat-head{display:flex;align-items:center;gap:12px;min-width:0}
.seat-name{
  font-family:var(--display);font-size:1.55rem;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  background:var(--tint);border:2.5px solid var(--ink);border-radius:12px;padding:6px 12px 5px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg);
}
.seat-1 .seat-name{transform:rotate(1.5deg)}
.seat-keys{margin-left:auto;display:flex;gap:6px}
.seat-body{display:grid;min-height:152px}
.seat-options,.seat .pick-card{grid-area:1 / 1}
.seat-options{display:grid;gap:12px;align-content:center;transition:opacity .18s,transform .18s}
.opt{
  display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:12px 16px;
  border:var(--border) solid var(--ink);border-radius:16px;background:var(--fill,var(--paper));box-shadow:4px 4px 0 var(--ink);
  font-weight:800;font-size:1.02rem;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;text-align:left;
  transition:transform .08s,box-shadow .08s;
}
.opt:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.opt:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.opt .key{background:rgba(255,253,244,.85)}
.opt-label{flex:1;min-width:0;overflow-wrap:anywhere}
.seat.locked .seat-options{opacity:0;transform:scale(.96);pointer-events:none}
.seat-status{margin:0;min-height:1.3em;text-align:center;font-weight:700;font-size:.84rem;color:var(--soft)}

.pick-card{perspective:1000px;opacity:0;transform:scale(.85) rotate(-3deg);pointer-events:none;transition:opacity .2s,transform .35s var(--ease-pop)}
.seat.locked .pick-card{opacity:1;transform:rotate(-1.5deg)}
.seat-1.locked .pick-card{transform:rotate(1.5deg)}
.pick-inner{position:relative;width:100%;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.35,.5,1)}
.revealed .pick-inner{transform:rotateY(180deg)}
.pick-back,.pick-face{
  position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:var(--border) solid var(--ink);border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:5px 5px 0 var(--ink);padding:14px;text-align:center;
}
.pick-back{color:var(--paper);background-color:var(--tone);background-image:repeating-linear-gradient(-45deg,rgba(255,253,244,.13) 0 10px,transparent 10px 20px)}
.pick-lock{width:44px;height:44px}
.pick-locked{font-family:var(--display);font-size:1.7rem;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.pick-face{transform:rotateY(180deg);background:var(--fill,var(--paper));color:var(--ink)}
.pick-label{font-family:var(--display);font-size:clamp(1.6rem,1rem + 1.8vw,2.5rem);text-transform:uppercase;line-height:1;overflow-wrap:anywhere}
.ribbon-slot{min-height:64px;display:flex;justify-content:center;align-items:center}
.ribbon{
  display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border:var(--border) solid var(--ink);border-radius:999px;
  box-shadow:5px 5px 0 var(--ink);font-weight:800;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;
  animation:slam .5s var(--ease-pop) both;
}
.ribbon .icon{width:22px;height:22px}
.ribbon-good{background:var(--mint)}
.ribbon-bad{background:var(--pink);color:var(--paper)}
.ribbon-warn{background:var(--sun)}
@keyframes slam{from{opacity:0;transform:scale(1.7) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(-2deg)}}
.keys-hint{margin:-10px 0 0;text-align:center;font-size:.84rem;color:var(--faint)}

/* take turns */
.curtain{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
  min-height:min(560px,calc(100vh - 230px));min-height:min(560px,calc(100dvh - 230px));
  border:var(--border) solid var(--ink);border-radius:30px;box-shadow:8px 8px 0 var(--ink);padding:34px 24px;
  background:var(--tone);color:var(--paper);overflow:hidden;
}
.curtain::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(-45deg,rgba(255,253,244,.08) 0 14px,transparent 14px 28px);pointer-events:none}
.curtain>*{position:relative}
.curtain-avatar{width:96px;height:96px;border:var(--border) solid var(--ink);border-radius:28px;background:var(--tint);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:2.6rem;box-shadow:5px 5px 0 var(--ink);transform:rotate(-5deg)}
.curtain-title{font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,1.4rem + 4vw,4rem);text-transform:uppercase;line-height:.95;margin:4px 0 0;max-width:16ch}
.curtain-body{margin:0;font-size:1.02rem;max-width:36ch;opacity:.92}
.curtain-progress{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.hold{
  position:relative;overflow:hidden;width:min(100%,380px);height:62px;border:var(--border) solid var(--ink);border-radius:999px;
  background:var(--paper);box-shadow:5px 5px 0 var(--ink);font-weight:800;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.hold-fill{position:absolute;inset:0;background:var(--sun);transform:scaleX(0);transform-origin:left center}
.hold-text{position:relative}
.hold.holding{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.turn-pick{display:flex;flex-direction:column;gap:20px;max-width:720px;margin:0 auto}
.turn-who{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.turn-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.opt-big{min-height:92px;justify-content:center;text-align:center;font-size:1.12rem;border-radius:20px;box-shadow:5px 5px 0 var(--ink)}
.turn-reveal{display:flex;flex-direction:column;gap:18px;max-width:720px;margin:0 auto}
.reveal-rows{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.reveal-row{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:10px 10px;align-items:center;background:var(--tint);border:var(--border) solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:14px}
.reveal-name{font-family:var(--display);font-size:1.35rem;text-transform:uppercase;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-small{grid-column:1 / -1;min-height:120px;opacity:1;transform:none}
.pick-small .pick-label{font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem)}
.pick-small .pick-lock{width:34px;height:34px}

/* interlude */
.interlude{
  position:relative;max-width:760px;margin:0 auto;border:var(--border) solid var(--ink);border-radius:30px;box-shadow:8px 8px 0 var(--ink);
  padding:36px 28px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;
}
.fill-pink{background:var(--pink);color:var(--paper)}
.fill-mint{background:var(--mint)}
.fill-sun{background:var(--sun)}
.fill-cobalt{background:var(--cobalt);color:var(--paper)}
.interlude-title{font-family:var(--display);font-weight:400;font-size:clamp(3rem,2rem + 5vw,5.4rem);text-transform:uppercase;line-height:.9;margin:0;transform:rotate(-2deg)}
.tone-calm .interlude-title{font-family:var(--body);font-weight:800;text-transform:none;font-size:clamp(2.1rem,1.5rem + 3vw,3.3rem);transform:none;letter-spacing:-.01em}
.interlude-detail{margin:0;max-width:44ch;font-size:1.02rem;opacity:.9}
.said-rows{display:grid;gap:10px;width:min(100%,520px)}
.said{display:flex;align-items:center;gap:12px;background:var(--paper);color:var(--ink);border:var(--border) solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);padding:10px 14px;text-align:left}
.said-name{flex:1;font-size:.95rem}
.said-pick{font-weight:800;text-transform:uppercase;letter-spacing:.03em;text-align:right}
.countdown{position:relative;width:118px;height:118px;display:grid;place-items:center}
.countdown svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:rgba(255,253,244,.5);stroke:var(--ink);stroke-width:5}
.ring-fg{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.count{position:relative;font-family:var(--display);font-size:3.2rem;line-height:1;color:var(--ink)}
.interlude-go{min-width:220px;justify-content:space-between}

/* results */
.results{max-width:780px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.results-hero{display:flex;flex-direction:column;align-items:center;gap:12px}
.results-hero:focus{outline:none}
.results-hero>.pill{margin-bottom:10px}
.big-number{font-family:var(--display);font-size:clamp(5.5rem,4rem + 8vw,9rem);line-height:.9;letter-spacing:.01em;animation:pop-num .6s var(--ease-pop) both}
@keyframes pop-num{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.big-name{font-family:var(--display);font-size:clamp(3rem,2rem + 5vw,5rem);text-transform:uppercase;line-height:.95}
.verdict{margin:0;font-weight:800;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);max-width:30ch;line-height:1.3}
.results .muted{margin:0}
.results-avatar{width:96px;height:96px;border:var(--border) solid var(--ink);border-radius:28px;display:grid;place-items:center;font-weight:800;font-size:2.6rem;box-shadow:5px 5px 0 var(--ink);transform:rotate(-5deg);animation:pop-in .6s var(--ease-pop) both}
.results-avatar.seat-0{background:var(--sky)}
.results-avatar.seat-1{background:var(--blush)}
.tallies{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(100%,460px);margin-top:6px}
.tally{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--tint);border:var(--border) solid var(--ink);border-radius:20px;box-shadow:5px 5px 0 var(--ink);padding:16px 12px}
.tally-name{font-weight:800;font-size:.9rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tally-count{font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1}
.tally-caption{font-size:.78rem;color:var(--soft)}
.results-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:4px}
.lastfresh{width:min(100%,620px);text-align:left;transform:rotate(.6deg)}
.debates{width:100%;text-align:left;display:flex;flex-direction:column;gap:12px}
.section-title{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.debate{background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;box-shadow:3px 3px 0 var(--ink);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.debate-q{margin:0;font-weight:700}
.debate-row{margin:0;display:flex;align-items:center;gap:8px;font-size:.88rem;text-transform:uppercase}

/* couples match quiz */
.quiz-keys{gap:16px}
.quiz-hint{margin:0;text-align:center;font-size:.9rem;color:var(--soft)}
.quiz-seat{gap:10px;min-height:360px}
.quiz-phase{background:var(--paper);margin-left:auto}
.quiz-phase.is-guess{background:var(--sun)}
.quiz-count{margin:2px 0 0;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.quiz-prompt{margin:0;font-size:clamp(1.15rem,.9rem + .8vw,1.45rem);line-height:1.25;min-height:2.5em;text-wrap:balance}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.quiz-opt{min-height:74px;font-size:.9rem;letter-spacing:.01em;align-items:center}
.quiz-seat.pulse{animation:quiz-pulse .35s var(--ease-pop)}
@keyframes quiz-pulse{0%{transform:scale(.985)}60%{transform:scale(1.01)}100%{transform:none}}
.quiz-seat.is-done{justify-content:flex-start}
.quiz-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:700;color:var(--soft)}
.quiz-done strong{font-family:var(--display);font-weight:400;font-size:1.9rem;text-transform:uppercase;color:var(--ink)}
.quiz-done-icon{width:64px;height:64px;border:var(--border) solid var(--ink);border-radius:18px;background:var(--mint);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);transform:rotate(-4deg)}
.quiz-done-icon .icon{width:38px;height:38px}
.quiz-turn{max-width:640px}
.quiz-turn .quiz-seat{min-height:0}
.quiz-bridge{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:620px;margin:0 auto;padding:34px 24px;background:var(--tint);border:var(--border) solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--ink)}
.quiz-bridge p{margin:0;font-size:1.05rem;max-width:40ch}
.quiz-bridge-title{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,1.6rem + 3vw,3.4rem);text-transform:uppercase;line-height:.95;margin:0}
.quiz-recap .quiz-row{flex-wrap:wrap;text-transform:none;gap:6px 10px}
.quiz-said strong,.quiz-guess strong{text-transform:uppercase}
.quiz-guess{display:inline-flex;align-items:center;gap:6px;margin-left:auto;border:2px solid var(--ink);border-radius:999px;padding:2px 10px 2px 4px;font-size:.8rem}
.quiz-guess .icon{width:16px;height:16px}
.quiz-guess.hit{background:var(--mint-tint)}
.quiz-guess.miss{background:var(--blush)}

/* truth or dare */
.tod-choose{display:flex;flex-direction:column;align-items:center;gap:24px;padding:26px 20px 30px;border:var(--border) solid var(--ink);border-radius:30px;box-shadow:8px 8px 0 var(--ink);background:var(--tint);max-width:820px;margin:0 auto}
.tod-turn.seat-0{background:var(--paper)}
.tod-turn.seat-1{background:var(--paper)}
.tod-question{font-family:var(--display);font-weight:400;font-size:clamp(3rem,2rem + 5vw,5.2rem);text-transform:uppercase;line-height:.9;margin:0;text-align:center}
.tod-question:focus{outline:none}
.tod-choices{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%}
.tod-choice{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:150px;border:var(--border) solid var(--ink);
  border-radius:24px;box-shadow:6px 6px 0 var(--ink);transition:transform .08s,box-shadow .08s;
}
.tod-choice.truth{background:var(--sky);transform:rotate(-1.2deg)}
.tod-choice.dare{background:var(--pink);color:var(--paper);transform:rotate(1.2deg)}
.tod-choice:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.tod-choice:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.tod-choice-label{font-family:var(--display);font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem);text-transform:uppercase;line-height:1}
.tod-card{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:820px;margin:0 auto;padding:22px 24px 26px;border:var(--border) solid var(--ink);border-radius:30px;box-shadow:8px 8px 0 var(--ink);text-align:center}
.tod-card.is-truth{background:#DDF1FF}
.tod-card.is-dare{background:#FFE3EC}
.tod-card-head{display:flex;align-items:center;justify-content:space-between;width:100%}
.tod-card-name{font-weight:800;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.tod-text{margin:6px 0 0;font-weight:800;font-size:clamp(1.4rem,1rem + 1.7vw,2.3rem);line-height:1.22;max-width:30ch;text-wrap:balance}
.tod-text:focus{outline:none}
.tod-clock .ring-bg{fill:rgba(255,253,244,.8)}
.tod-clock .ring-fg{stroke:var(--pink);transition:none}
.tod-clock .count{font-size:2.8rem;margin-top:-10px}
.clock-label{position:absolute;bottom:24px;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tod-clock.done{animation:shake .5s both}
.tod-clock.done .count{color:#b0184f}
.tod-judge{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(100%,440px)}
.tod-did{width:100%;justify-content:space-between}

/* ------------------------------------------------------------ Responsive */
@media (max-width:980px){
  .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .start-grid{grid-template-columns:1fr;gap:26px}
  .names-text{display:none}
  .names-chip{padding-right:6px}
}
@media (max-width:760px){
  .wall-offers{grid-template-columns:1fr}
  .seats{grid-template-columns:1fr;gap:16px}
  .seat-body{min-height:128px}
  .opt{min-height:54px}
  .gamebar{flex-wrap:wrap}
  .bar-mode{order:5;width:100%}
  .top-label{display:none}
  .top-btn{padding:0;width:44px;justify-content:center}
}
@media (max-width:640px){
  :root{--shadow:5px}
  .wrap,.play{padding-left:16px;padding-right:16px}
  .topbar{min-height:64px}
  .topbar-inner{padding-top:10px;padding-bottom:10px}
  .logo img{width:34px;height:34px}
  .logo .name{font-size:1.25rem}
  .top-actions{gap:7px}
  .icon-btn,.top-btn{width:40px;height:40px;border-radius:12px}
  .names-chip{display:none}
  .shelf-head{padding:4px 0 20px}
  .shelf-grid{grid-template-columns:1fr;gap:20px}
  .game-card,.tile{min-height:0}
  .setup-card{padding:26px 20px 22px;transform:none;box-shadow:6px 6px 0 var(--ink);border-radius:24px}
  .setup-names{grid-template-columns:1fr}
  .start-right{padding:18px;border-radius:22px;box-shadow:6px 6px 0 var(--ink)}
  .start-headline{font-size:clamp(2.6rem,12.5vw,3.3rem)}
  .start-left{gap:16px}
  .start .start-icon{width:48px;height:48px;border-radius:14px}
  .start .start-icon .icon{width:30px;height:30px}
  .howto{gap:10px}
  .howto li{padding:10px 12px;font-size:.93rem}
  .back-link{margin-bottom:12px}
  .lowdeck{flex-wrap:wrap}
  .lowdeck .btn{width:100%}
  .lowdeck-top{display:flex}
  .lowdeck-side{display:none}
  /* The deal button stays in reach while the instructions scroll by. */
  .btn-deal{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));z-index:3}
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{width:100%;border-radius:26px 26px 0 0;border-bottom:0;box-shadow:0 -4px 0 var(--ink);max-height:92vh;max-height:92dvh;padding:26px 18px calc(22px + env(safe-area-inset-bottom));transform:translateY(40px)}
  .modal-title{font-size:1.7rem}
  .offer{grid-template-columns:1fr;padding:16px}
  .offer-buy .btn{width:100%}
  .offer-buy{display:block}
  .shop-head{gap:12px}
  .shop-icon{width:52px;height:52px}
  .gamebar{padding:6px 8px 6px 6px;gap:10px;border-radius:16px}
  .bar-game{font-size:1.1rem}
  .bar-score{gap:8px}
  .hearts-name{display:none}
  .play{gap:14px}
  .prompt-card{padding:16px 18px 18px;border-radius:22px;box-shadow:5px 5px 0 var(--ink)}
  .turn-options{grid-template-columns:1fr}
  .quiz-options{grid-template-columns:1fr}
  .quiz-opt{min-height:58px}
  .quiz-guess{margin-left:0}
  .opt-big{min-height:74px}
  .reveal-rows{gap:10px}
  .reveal-row{padding:10px;border-radius:18px;gap:8px}
  .reveal-name{font-size:1.1rem}
  .reveal-row .seat-avatar{width:30px;height:30px;font-size:.8rem;border-radius:9px}
  .pick-small{min-height:92px}
  .pick-small .pick-label{font-size:1.25rem}
  .ribbon{font-size:.84rem;padding:10px 16px;gap:8px;letter-spacing:.04em;text-align:left;line-height:1.25}
  .ribbon .icon{width:18px;height:18px}
  .ribbon-slot{min-height:56px}
  .bar-score:has(.hearts){order:4;width:100%;justify-content:space-between;padding:2px 4px 0}
  .bar-score:has(.hearts) .hearts-name{display:inline}
  .interlude{padding:26px 16px 22px;border-radius:24px}
  .said{padding:8px 10px}
  .tod-choose{padding:20px 14px 22px;border-radius:24px}
  .tod-choices{gap:12px}
  .tod-choice{min-height:120px}
  .tod-card{padding:18px 16px 22px;border-radius:24px}
  .curtain{border-radius:24px;padding:26px 18px}
  .stage{min-height:0}
  .toasts{bottom:14px}
}
@media (max-width:330px){
  .reveal-rows{grid-template-columns:1fr}
}
@media (hover:none){
  .game-card:hover,.btn:hover,.opt:hover,.tod-choice:hover{transform:rotate(var(--tilt,0deg));box-shadow:var(--shadow) var(--shadow) 0 var(--ink)}
  .btn:hover{transform:none;box-shadow:5px 5px 0 var(--ink)}
  .opt:hover{transform:none;box-shadow:4px 4px 0 var(--ink)}
  .tod-choice.truth:hover{transform:rotate(-1.2deg)}
  .tod-choice.dare:hover{transform:rotate(1.2deg)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .revealed .pick-inner{transform:none}
  .revealed .pick-back{visibility:hidden}
  .pick-face{transform:none}
  .pick-card .pick-face{visibility:hidden}
  .revealed .pick-face{visibility:visible}
}