/* ————————————————————————————————————————————
   VELVET HOUR — noir · cabaret · burlesque
   ———————————————————————————————————————————— */

:root{
  --ink:        #17111a;   /* near-black aubergine   */
  --ink-2:      #211826;
  --ink-3:      #2c2033;
  --velvet:     #3a1f2e;   /* deep wine velvet       */
  --wine:       #6e2440;
  --rose:       #c98a9c;   /* dusty rose             */
  --rose-soft:  #e7c3cd;
  --gold:       #c9a45c;   /* brushed brass          */
  --gold-hi:    #eed9a4;
  --cream:      #f3e9db;
  --smoke:      #a99bb0;
  --danger:     #b0455a;
  --ok:         #7ba05b;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Avenir Next", "Segoe UI", sans-serif;

  --radius: 14px;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family:var(--sans);
  color:var(--cream);
  background:
    radial-gradient(1200px 700px at 20% -10%, #35213f 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #3d1c2b 0%, transparent 55%),
    var(--ink);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* the room reddens as the heat climbs */
body[data-heat="3"]{
  background:
    radial-gradient(1200px 700px at 20% -10%, #3d2142 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #4c1d30 0%, transparent 55%),
    #1a1219;
}
body[data-heat="4"]{
  background:
    radial-gradient(1200px 700px at 20% -10%, #46203f 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #5c1c30 0%, transparent 55%),
    radial-gradient(700px 500px at 50% 120%, rgba(110,36,64,.35), transparent 70%),
    #1b0f15;
}
body[data-heat="5"]{
  background:
    radial-gradient(1200px 700px at 20% -10%, #51203c 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #6e1c30 0%, transparent 55%),
    radial-gradient(800px 550px at 50% 120%, rgba(150,40,60,.4), transparent 70%),
    #1e0d11;
}
body[data-heat="6"]{
  background:
    radial-gradient(1200px 700px at 20% -10%, #5c1e38 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #85182e 0%, transparent 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(190,45,65,.42), transparent 70%),
    #200a0d;
}

/* faint smoke drift */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px 300px at 70% 20%, rgba(201,164,92,.05), transparent 70%),
    radial-gradient(500px 400px at 15% 80%, rgba(201,138,156,.05), transparent 70%);
}

/* champagne glitter, twinkling slowly */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(238,217,164,.9), transparent 60%),
    radial-gradient(1px 1px     at 28% 64%, rgba(238,217,164,.7), transparent 60%),
    radial-gradient(2px 2px     at 46% 12%, rgba(231,195,205,.8), transparent 60%),
    radial-gradient(1px 1px     at 61% 48%, rgba(238,217,164,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 74% 80%, rgba(238,217,164,.8), transparent 60%),
    radial-gradient(1px 1px     at 86% 30%, rgba(231,195,205,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 88%,  rgba(238,217,164,.7), transparent 60%),
    radial-gradient(1px 1px     at 93% 66%, rgba(238,217,164,.8), transparent 60%);
  animation:twinkle 8s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.12; } 50%{ opacity:.42; } }

/* stage curtains
   Real traveller curtains don't slide offstage — the fabric GATHERS, folds
   compressing into a dense stack at each side. We animate scaleX from the
   outer edge so the pleat pattern visibly bunches up, with a fabric lean
   while moving and a soft settle at the end. */
:root{ --curtain-scale:.18; }   /* how much fabric remains stacked at rest */

.curtain-valance{ position:fixed; top:0; left:0; right:0; height:34px; z-index:6; pointer-events:none;
  background: linear-gradient(180deg, #2c1019, #4a1f31 65%, transparent);
  box-shadow: 0 6px 20px rgba(0,0,0,.55);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
body:not(.curtain-closed) .curtain-valance{ opacity:0; transform:translateY(-100%); }

.curtain{ position:fixed; top:0; bottom:0; width:50vw; z-index:5; pointer-events:none;
  opacity:.55;   /* at rest the drapes recede into ambience so content reads */
  will-change: transform, opacity;
  /* fine pleats + broad velvet folds + top-lit sheen fading to a heavy hem */
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.38) 0 5px, rgba(0,0,0,0) 5px 14px,
      rgba(255,220,190,.06) 14px 19px, rgba(0,0,0,0) 19px 30px),
    repeating-linear-gradient(90deg,
      #241017 0 18px, #3a1626 18px 42px, #55253a 42px 58px,
      #6b2f47 58px 68px, #4a1f31 68px 92px, #2c1019 92px 112px),
    linear-gradient(180deg, #4a1f31, #2c1019 70%, #1c0a10);
  box-shadow: inset 0 -60px 60px -40px rgba(0,0,0,.7);
}
.curtain-l{ left:0; transform-origin:left center;
  border-right:1px solid rgba(201,164,92,.25);
  transform: scaleX(var(--curtain-scale));
  animation: curtain-draw-l 3s cubic-bezier(.45,.05,.35,1) both;
}
.curtain-r{ right:0; transform-origin:right center;
  border-left:1px solid rgba(201,164,92,.25);
  transform: scaleX(var(--curtain-scale));
  animation: curtain-draw-r 3s cubic-bezier(.45,.05,.35,1) .12s both;
}

/* closed: panels meet at centre stage; no animation while held shut */
body.curtain-closed .curtain{ animation:none; transform:scaleX(1) skewX(0deg); opacity:1; }

/* heavy hem lags behind the track (skew), fabric over-gathers then relaxes,
   then the settled drapes fade back into ambience */
@keyframes curtain-draw-l{
  0%  { transform: scaleX(1) skewX(0deg); opacity:1; }
  35% { transform: scaleX(.62) skewX(1.6deg); opacity:1; }
  62% { transform: scaleX(calc(var(--curtain-scale)*.86)) skewX(.9deg); opacity:1; }
  76% { transform: scaleX(calc(var(--curtain-scale)*1.22)) skewX(-.35deg); opacity:1; }
  88% { transform: scaleX(calc(var(--curtain-scale)*.95)) skewX(.12deg); opacity:.85; }
  100%{ transform: scaleX(var(--curtain-scale)) skewX(0deg); opacity:.55; }
}
@keyframes curtain-draw-r{
  0%  { transform: scaleX(1) skewX(0deg); opacity:1; }
  35% { transform: scaleX(.62) skewX(-1.6deg); opacity:1; }
  62% { transform: scaleX(calc(var(--curtain-scale)*.86)) skewX(-.9deg); opacity:1; }
  76% { transform: scaleX(calc(var(--curtain-scale)*1.22)) skewX(.35deg); opacity:1; }
  88% { transform: scaleX(calc(var(--curtain-scale)*.95)) skewX(-.12deg); opacity:.85; }
  100%{ transform: scaleX(var(--curtain-scale)) skewX(0deg); opacity:.55; }
}

@media (max-width:640px){
  :root{ --curtain-scale:.012; }  /* gathers away to a sliver on phones */
}

@media (prefers-reduced-motion: reduce){
  .curtain{ animation:none; }
  .curtain-valance{ transition:none; }
}

#app{
  position:relative; z-index:2;
  max-width:960px; margin:0 auto;
  padding:clamp(16px,4vw,44px) clamp(14px,5vw,34px) 90px;
  min-height:100dvh;
}

/* ————— typography ————— */
h1,h2,h3,.display{ font-family:var(--serif); font-weight:600; letter-spacing:.02em; }
h1{ font-size:clamp(2.4rem,7vw,4.2rem); color:var(--gold-hi); line-height:1.05; }
h2{ font-size:clamp(1.5rem,4vw,2.2rem); color:var(--gold); }
h3{ font-size:1.25rem; color:var(--rose-soft); }
p{ line-height:1.6; }
.muted{ color:var(--smoke); }
.small{ font-size:.85rem; }
.center{ text-align:center; }

.kicker{
  font-family:var(--sans); font-weight:500; font-size:.78rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--rose);
}

.deco-rule{
  display:flex; align-items:center; gap:14px; margin:14px auto; max-width:420px;
  color:var(--gold);
}
.deco-rule::before,.deco-rule::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.deco-rule::after{ background:linear-gradient(90deg, var(--gold), transparent); }

/* ————— buttons ————— */
.btn{
  font-family:var(--sans); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  font-size:.82rem; cursor:pointer; border-radius:999px;
  padding:14px 28px; border:1px solid var(--gold);
  color:var(--gold-hi); background:linear-gradient(180deg, rgba(201,164,92,.16), rgba(201,164,92,.05));
  transition:all .22s ease; user-select:none;
}
.btn:hover{ background:linear-gradient(180deg, rgba(201,164,92,.3), rgba(201,164,92,.12)); box-shadow:0 0 24px rgba(201,164,92,.25); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.btn-primary{
  background:linear-gradient(180deg, #d8b268, #a97f37); color:#241a08; border-color:#e9cf90;
  font-weight:600; position:relative; overflow:hidden;
}
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; width:45%; left:-70%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  animation:sheen 3.6s ease-in-out infinite;
}
@keyframes sheen{ 0%,55%{ left:-70%; } 100%{ left:140%; } }
.btn-primary:hover{ background:linear-gradient(180deg, #ecc87d, #bd9146); box-shadow:0 0 34px rgba(233,207,144,.35); }
.btn-ghost{ border-color:rgba(201,164,92,.4); background:transparent; color:var(--smoke); }
.btn-rose{ border-color:var(--rose); color:var(--rose-soft); background:linear-gradient(180deg, rgba(201,138,156,.16), rgba(201,138,156,.04)); }
.btn-sm{ padding:9px 18px; font-size:.72rem; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:18px; }

/* ————— cards / panels ————— */
.panel{
  background:linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border:1px solid rgba(201,164,92,.28);
  border-radius:var(--radius);
  padding:clamp(18px,4vw,30px);
  box-shadow:var(--shadow);
  position:relative;
}
.panel + .panel{ margin-top:18px; }
.panel-deco::before{
  content:"❦"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--ink-2); padding:0 14px; color:var(--gold); font-size:1.1rem;
  border-radius:8px;
}

/* menu tiles */
.tiles{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:26px; }
.tile{
  text-align:left; cursor:pointer; border-radius:var(--radius);
  border:1px solid rgba(201,164,92,.3);
  background:linear-gradient(160deg, var(--ink-2) 0%, var(--velvet) 130%);
  padding:22px; transition:all .25s ease; color:var(--cream); font-family:var(--sans);
}
.tile:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 22px rgba(201,164,92,.14); }
.tile .t-icon{ font-size:1.7rem; }
.tile .t-name{ font-family:var(--serif); font-size:1.35rem; color:var(--gold-hi); margin:8px 0 4px; }
.tile .t-desc{ font-size:.86rem; color:var(--smoke); line-height:1.5; }

/* ————— forms ————— */
label.f-label{ display:block; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--rose); margin:16px 0 7px; }
input[type=text], input[type=number], textarea, select{
  width:100%; padding:13px 16px; border-radius:10px;
  border:1px solid rgba(201,164,92,.35); background:rgba(0,0,0,.3);
  color:var(--cream); font-family:var(--sans); font-size:1rem;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,164,92,.15); }
textarea{ min-height:80px; resize:vertical; }
select option{ background:var(--ink-2); }

.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  cursor:pointer; user-select:none; border-radius:999px; padding:9px 18px; font-size:.85rem;
  border:1px solid rgba(169,155,176,.4); color:var(--smoke); background:rgba(0,0,0,.25);
  transition:all .18s ease;
}
.chip.on{ border-color:var(--rose); color:var(--rose-soft); background:rgba(201,138,156,.14); box-shadow:0 0 14px rgba(201,138,156,.18); }
.chip.gold.on{ border-color:var(--gold); color:var(--gold-hi); background:rgba(201,164,92,.14); }

/* explicit on/off toggle chips */
.chip.tog.on{ border-color:var(--ok); color:#c8dcb4; background:rgba(123,160,91,.14); box-shadow:0 0 12px rgba(123,160,91,.16); }
.chip.tog:not(.on):not(.ex){ opacity:.55; }
.chip.tog.ex{
  border-color:var(--danger); color:#e0a4b0; background:rgba(176,69,90,.16);
  text-decoration:line-through; text-decoration-color:rgba(224,164,176,.6);
}
.token-chip.taken{ opacity:.28; cursor:not-allowed; filter:grayscale(.7); }

.name-row{ display:flex; gap:10px; align-items:center; }
.name-row input{ flex:1; }
.name-row .btn{ flex-shrink:0; }

/* mood dial */
.mood-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.mood{
  cursor:pointer; text-align:center; padding:16px 6px; border-radius:12px;
  border:1px solid rgba(169,155,176,.35); background:rgba(0,0,0,.25); transition:all .2s ease;
}
.mood .m-flame{ font-size:1.5rem; }
.mood .m-name{ font-family:var(--serif); font-size:1.05rem; color:var(--cream); margin-top:4px; }
.mood .m-sub{ font-size:.72rem; color:var(--smoke); }
.mood.on{ border-color:var(--gold); background:linear-gradient(180deg, rgba(201,164,92,.2), rgba(110,36,64,.25)); box-shadow:0 0 20px rgba(201,164,92,.22); }
@media(max-width:560px){ .mood-row{ grid-template-columns:repeat(2,1fr);} }

/* ————— play layout: board + side column ————— */
.play-grid{ display:grid; gap:18px; margin-top:6px; }
@media (min-width:900px){
  .play-grid{ grid-template-columns:minmax(0,1fr) 264px; align-items:start; }
  .side-col .playerbar{ grid-template-columns:1fr; margin-top:0; }
  .side-col .legend{ margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
}

/* ————— board ————— */
.board{
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  /* keep the whole board on screen: it's roughly square, so cap width by viewport height */
  width:min(100%, calc(100dvh - 265px));
  min-width:min(100%, 320px);
  margin:0 auto;
}
.sq{
  aspect-ratio:1; border-radius:10px; position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(169,155,176,.22); background:rgba(0,0,0,.3);
}
.sq .sq-icon{ font-size:clamp(1.15rem, 4.2vw, 2rem); line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.sq .sq-n{ position:absolute; top:2px; left:5px; font-size:.55rem; color:rgba(169,155,176,.45); }
.sq-truth   { background:rgba(90,110,140,.18);  border-color:rgba(120,150,190,.35); }
.sq-tease   { background:rgba(201,138,156,.14); border-color:rgba(201,138,156,.4); }
.sq-dare    { background:rgba(176,69,90,.16);   border-color:rgba(176,69,90,.45); }
.sq-heat    { background:rgba(110,36,64,.3);    border-color:rgba(201,90,120,.5); }
.sq-game    { background:rgba(201,164,92,.13);  border-color:rgba(201,164,92,.4); }
.sq-sip     { background:rgba(123,160,91,.12);  border-color:rgba(123,160,91,.35); }
.sq-wardrobe{ background:rgba(150,110,190,.14); border-color:rgba(150,110,190,.4); }
.sq-toybox  { background:rgba(190,120,60,.14);  border-color:rgba(190,120,60,.4); }
.sq-wild    { background:rgba(230,220,170,.1);  border-color:rgba(230,220,170,.35); }
.sq-milestone{ background:linear-gradient(160deg, rgba(201,164,92,.3), rgba(110,36,64,.4)); border-color:var(--gold); }
.sq-start,.sq-finale{ background:linear-gradient(160deg, var(--wine), var(--velvet)); border-color:var(--gold); font-size:1.1rem; }
.sq.here{ outline:2px solid var(--gold-hi); outline-offset:2px; box-shadow:0 0 18px rgba(238,217,164,.4); }

/* playing pieces */
.pawn{
  position:absolute; z-index:3; width:58%; aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(.95rem, 3.4vw, 1.5rem); line-height:1;
  background:radial-gradient(circle at 35% 30%, rgba(60,40,66,.95), rgba(15,10,18,.95));
  box-shadow:0 6px 14px rgba(0,0,0,.65);
  animation:pawnIn .4s cubic-bezier(.2,.9,.3,1.4);
}
.pawn-0{ top:-9px; left:-9px; border:2px solid var(--rose); box-shadow:0 6px 14px rgba(0,0,0,.65), 0 0 12px rgba(201,138,156,.55); }
.pawn-1{ bottom:-9px; right:-9px; border:2px solid var(--gold); box-shadow:0 6px 14px rgba(0,0,0,.65), 0 0 12px rgba(201,164,92,.55); }
@keyframes pawnIn{ from{ transform:scale(.3); opacity:0; } to{ transform:scale(1); opacity:1; } }
.pawn.no-anim{ animation:none; }
.p-token{ font-size:1.15em; margin-right:2px; }

.legend{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:12px; font-size:1rem; color:var(--rose-soft); }
.legend span{ white-space:nowrap; }

/* route chevrons along the serpentine */
.sq .route{
  position:absolute; z-index:2; font-size:.72rem; line-height:1;
  color:rgba(238,217,164,.75); text-shadow:0 0 6px rgba(0,0,0,.8);
  pointer-events:none;
}
.route-right{ right:-6px; top:50%; transform:translateY(-50%); }
.route-left { left:-6px;  top:50%; transform:translateY(-50%) scaleX(-1); }
.route-down { bottom:-6px; left:50%; transform:translateX(-50%) rotate(90deg); }

/* ————— fixed action bar ————— */
.actionbar{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:12px; white-space:nowrap;
  background:rgba(23,17,26,.92); border:1px solid rgba(201,164,92,.5);
  border-radius:999px; padding:9px 18px;
  backdrop-filter:blur(10px); box-shadow:var(--shadow), 0 0 26px rgba(201,164,92,.15);
}
.actionbar .ab-token{ font-size:1.4rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

/* ————— stage overlay: cards float above the board ————— */
.stage-overlay{
  position:fixed; inset:0; z-index:44; overflow-y:auto;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,6,12,.72); backdrop-filter:blur(6px);
  animation:fade .3s ease;
}
.stage-overlay .playcard{ margin:auto; width:100%; }

/* ————— 3D die ————— */
.dice-stage{ text-align:center; transition:opacity .45s ease, transform .45s ease; }
.dice-stage.dice-exit{ opacity:0; transform:scale(.72) translateY(14px); }
.dice-label{
  margin-top:34px; font-family:var(--serif); font-size:1.3rem; color:var(--gold-hi);
  font-style:italic;
}
.dice-scene{ width:110px; height:110px; margin:0 auto; perspective:520px; }
.dice{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transform:rotateX(-24deg) rotateY(28deg);
  transition:transform 1.15s cubic-bezier(.18,.85,.25,1.02);
}
.dice .face{
  position:absolute; inset:0; border-radius:16px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(150deg,#f7efe2,#cfbd9b);
  border:1px solid #a08c62;
  box-shadow:inset 0 0 14px rgba(0,0,0,.18);
  display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); padding:14px;
}
.dice .pip{
  width:16px; height:16px; border-radius:50%; align-self:center; justify-self:center;
  background:radial-gradient(circle at 35% 30%, #4a3550, #17111a);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.5);
}
.pip.p1{grid-area:1/1} .pip.p2{grid-area:1/2} .pip.p3{grid-area:1/3}
.pip.p4{grid-area:2/1} .pip.p5{grid-area:2/2} .pip.p6{grid-area:2/3}
.pip.p7{grid-area:3/1} .pip.p8{grid-area:3/2} .pip.p9{grid-area:3/3}
.face.f1{ transform:translateZ(55px); }
.face.f6{ transform:rotateY(180deg) translateZ(55px); }
.face.f3{ transform:rotateY(90deg) translateZ(55px); }
.face.f4{ transform:rotateY(-90deg) translateZ(55px); }
.face.f2{ transform:rotateX(90deg) translateZ(55px); }
.face.f5{ transform:rotateX(-90deg) translateZ(55px); }

/* projection room media */
.media-frame{
  margin:16px auto 4px; max-width:420px; border-radius:12px; overflow:hidden;
  border:1px solid var(--gold); box-shadow:0 12px 30px rgba(0,0,0,.5);
  background:#000;
}
.media-frame img, .media-frame video{ display:block; width:100%; max-height:340px; object-fit:contain; background:#000; }

/* house suggestion on cards */
.prop-line{
  margin:10px auto 2px; font-size:.95rem; color:var(--gold-hi);
  font-style:italic; font-family:var(--serif);
}
.prop-line b{ color:var(--rose-soft); }

/* inventory chips */
.prop-chip{ cursor:default; }
.prop-chip .prop-x{ cursor:pointer; margin-left:8px; opacity:.6; }
.prop-chip .prop-x:hover{ opacity:1; color:var(--danger); }

/* boudoir reel */
.reel{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.reel-item{ position:relative; }
.reel-item .btn{ position:absolute; top:6px; right:6px; padding:3px 10px; background:rgba(0,0,0,.6); }
.reel-thumb{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px;
  border:1px solid rgba(201,164,92,.4); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
}
.reel-video{ background:rgba(0,0,0,.4); font-size:1.6rem; color:var(--smoke); text-align:center; padding:6px; overflow:hidden; }

/* house-rules flip cards */
.rule-card{
  cursor:pointer; user-select:none;
  margin:18px auto 0; max-width:400px; min-height:230px;
  border:1px solid var(--gold); border-radius:18px; position:relative;
  background:linear-gradient(160deg, #2a1b2f 0%, #401f31 100%);
  box-shadow:var(--shadow), 0 0 30px rgba(201,164,92,.1);
  padding:30px 26px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:cardIn .38s cubic-bezier(.2,.9,.3,1.2);
  transition:transform .2s ease;
}
.rule-card:hover{ transform:translateY(-2px); }
.rule-card::before{
  content:""; position:absolute; inset:7px; border:1px solid rgba(201,164,92,.35);
  border-radius:13px; pointer-events:none;
}
.rule-card .r-icon{ font-size:2.6rem; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.rule-card .r-title{
  font-family:var(--serif); font-size:1.5rem; color:var(--gold-hi); margin:12px 0 8px;
}
.rule-card .r-text{ color:var(--rose-soft); line-height:1.6; font-size:1.02rem; max-width:32ch; }

.dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.dot{
  width:9px; height:9px; border-radius:50%; cursor:pointer;
  background:rgba(169,155,176,.35); transition:all .2s ease;
}
.dot.on{ background:var(--gold-hi); box-shadow:0 0 8px rgba(238,217,164,.6); transform:scale(1.25); }

/* token picker */
.token-row .token-chip{ font-size:1.25rem; padding:8px 13px; }

/* the settled die shown on the drawn card */
.mini-die{
  position:absolute; top:14px; right:14px; z-index:2;
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(150deg,#f7efe2,#cfbd9b);
  border:1px solid #a08c62;
  box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 0 6px rgba(0,0,0,.15);
  display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); padding:6px;
  animation:dieSettle .45s cubic-bezier(.2,.9,.3,1.35);
}
.mini-die .pip{
  width:6px; height:6px; border-radius:50%;
  background:#241a08; align-self:center; justify-self:center;
}
@keyframes dieSettle{ from{ transform:scale(1.7) rotate(-14deg); opacity:0; } to{ transform:scale(1) rotate(0); opacity:1; } }

/* HUD */
.hud{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:14px;
}
.hud .who{ font-family:var(--serif); font-size:1.4rem; color:var(--gold-hi); }
.badges{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{
  font-size:.74rem; padding:6px 13px; border-radius:999px; letter-spacing:.06em;
  border:1px solid rgba(201,164,92,.35); color:var(--gold-hi); background:rgba(0,0,0,.3);
}
.badge.rose{ border-color:rgba(201,138,156,.5); color:var(--rose-soft); }

.playerbar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.pcard{
  border-radius:12px; padding:12px 16px; border:1px solid rgba(169,155,176,.25);
  background:rgba(0,0,0,.28); transition:all .3s ease;
}
.pcard.turn{ border-color:var(--gold); box-shadow:0 0 20px rgba(201,164,92,.2); background:linear-gradient(180deg, rgba(201,164,92,.12), rgba(0,0,0,.3)); }
.pcard .p-name{ font-family:var(--serif); font-size:1.2rem; color:var(--cream); }
.pcard .p-meta{ font-size:.78rem; color:var(--smoke); margin-top:2px; }

/* art-deco sunburst behind the marquee title */
.marquee-title{ position:relative; z-index:0; }
.marquee-title::before{
  content:""; position:absolute; inset:-90px -180px; z-index:-1; pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(201,164,92,.09) 0deg 5deg, transparent 5deg 12deg);
  -webkit-mask:radial-gradient(closest-side, #000 20%, transparent 72%);
  mask:radial-gradient(closest-side, #000 20%, transparent 72%);
  animation:raysSpin 90s linear infinite;
}
@keyframes raysSpin{ to{ transform:rotate(360deg); } }

/* ————— the drawn card ————— */
.playcard{
  margin:22px auto 0; max-width:520px; border-radius:18px; position:relative;
  border:1px solid var(--gold);
  background:
    linear-gradient(160deg, #2a1b2f 0%, #401f31 100%);
  box-shadow:var(--shadow), 0 0 40px rgba(201,164,92,.12);
  padding:30px 26px 26px; text-align:center;
  animation:cardIn .5s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes cardIn{ from{ transform:translateY(26px) rotate(-1.5deg); opacity:0; } to{ transform:none; opacity:1; } }
.playcard::before{
  content:""; position:absolute; inset:7px; border:1px solid rgba(201,164,92,.35); border-radius:13px; pointer-events:none;
}
.playcard::after{
  content:"💋"; position:absolute; bottom:10px; right:14px; font-size:2.6rem;
  opacity:.1; transform:rotate(-14deg); pointer-events:none;
}
/* fate's twist ribbon */
.twist{
  border:1px dashed rgba(238,217,164,.6); border-radius:10px;
  background:linear-gradient(120deg, rgba(201,164,92,.14), rgba(110,36,64,.2), rgba(201,164,92,.14));
  background-size:200% 100%;
  padding:10px 14px; margin-bottom:14px;
  font-size:.92rem; color:var(--gold-hi); line-height:1.5;
  animation:twistIn .6s cubic-bezier(.2,.9,.3,1.3), shimmer 3.5s linear infinite;
}
.twist .twist-k{
  display:block; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rose); margin-bottom:3px;
}
@keyframes twistIn{ from{ transform:scale(.85) rotate(-1.5deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes shimmer{ from{ background-position:0% 0; } to{ background-position:200% 0; } }
.playcard.twisted{ border-color:var(--gold-hi); box-shadow:var(--shadow), 0 0 46px rgba(238,217,164,.22); }

.playcard .c-icon{ font-size:2.1rem; line-height:1; margin-bottom:8px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.playcard .c-type{ font-size:.95rem; letter-spacing:.32em; text-transform:uppercase; color:var(--rose); }
.playcard .c-heat{ margin-top:6px; font-size:.95rem; letter-spacing:.2em; color:var(--gold); }
.playcard .c-text{
  font-family:var(--serif); font-size:clamp(1.3rem,3.4vw,1.7rem); line-height:1.45;
  color:var(--cream); margin:18px 4px 8px;
}
.playcard .c-tags{ font-size:.88rem; color:var(--smoke); letter-spacing:.1em; text-transform:uppercase; }
.playcard .card-timer{ font-size:2.1rem; margin:10px 0 0; }

/* spark award */
.spark-row{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }

/* ————— dice ————— */
.die{
  width:74px; height:74px; margin:18px auto 6px; border-radius:16px;
  background:linear-gradient(160deg,#f3e9db,#cbb896); color:#241a08;
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; font-weight:700; font-family:var(--serif);
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 -4px 8px rgba(0,0,0,.18);
}
.die.rolling{ animation:tumble .45s ease infinite; }
@keyframes tumble{ 0%{transform:rotate(-7deg) scale(1.02);} 50%{transform:rotate(7deg) scale(.97);} 100%{transform:rotate(-7deg) scale(1.02);} }

/* ————— timer ————— */
.timer-face{
  font-family:var(--serif); font-size:3.4rem; color:var(--gold-hi); text-align:center; margin:10px 0;
  font-variant-numeric:tabular-nums;
}
.timer-face.urgent{
  color:#ff9f9f; text-shadow:0 0 24px rgba(255,110,110,.55);
  animation:urgentPulse 1s ease-in-out infinite;
}
@keyframes urgentPulse{ 50%{ transform:scale(1.09); } }

.hourglass{
  font-size:3.6rem; line-height:1; text-align:center; margin:14px auto 0;
  width:fit-content; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
  animation:hgFlip 4s ease-in-out infinite;
}
@keyframes hgFlip{
  0%, 40%  { transform:rotate(0deg); }
  50%, 90% { transform:rotate(180deg); }
  100%     { transform:rotate(360deg); }
}
.hourglass.done{ animation:none; opacity:.45; transform:rotate(180deg); }

/* ————— modal ————— */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,6,12,.78); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:18px;
  animation:fade .25s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal{
  width:min(560px,100%); max-height:88dvh; overflow-y:auto;
  background:linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border:1px solid var(--gold); border-radius:18px; padding:28px 24px;
  box-shadow:var(--shadow);
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink-2); border:1px solid var(--gold); color:var(--gold-hi);
  border-radius:999px; padding:12px 26px; font-size:.9rem; z-index:80;
  opacity:0; pointer-events:none; transition:all .3s ease; max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* photo */
.snap-img{ max-width:100%; border-radius:12px; border:1px solid var(--gold); margin-top:14px; }

/* deck studio list */
.deck-item{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  border-bottom:1px dashed rgba(169,155,176,.25); padding:10px 2px; font-size:.92rem;
}
.deck-item .d-meta{ font-size:.72rem; color:var(--smoke); }

/* room code display */
.room-code{
  font-family:var(--serif); font-size:3rem; letter-spacing:.35em; text-align:center;
  color:var(--gold-hi); text-shadow:0 0 30px rgba(238,217,164,.4); margin:10px 0 4px;
}

/* pass-device veil */
.veil{
  text-align:center; padding:60px 20px;
}

/* age gate */
.agegate h1{ margin-bottom:6px; }

/* utility */
.mt{ margin-top:18px; } .mt-sm{ margin-top:10px; }
.hidden{ display:none !important; }
a{ color:var(--rose-soft); }
hr.soft{ border:none; border-top:1px dashed rgba(169,155,176,.3); margin:18px 0; }

@media (max-width:640px){
  .playerbar{ grid-template-columns:1fr; }
}