:root{
  /* classic card-room — green felt, white cards, ivory + casino-gold, suit red/blue */
  --bg:#0d3b25; --bg2:#0a2e1c;
  --panel:rgba(6,28,18,.58); --panel-solid:#103225; --panel-2:rgba(255,255,255,.06);
  --line:rgba(240,232,205,.16); --line-strong:rgba(240,232,205,.34);
  --ink:#f2efe1; --muted:#a7c0ac;
  --primary:#d9b35c; --primary-d:#bf9636; --primary-l:#edca78;   /* casino gold accent */
  --gold:#d9b35c; --gold2:#edca78;
  --attack:#d8455c; --defense:#6a90c8; --info:#4cae7a; --disruption:#9a6ad0; --jealousy:#0f9b8e;
  --love:#d8455c; --devotion:#d9b35c; --heart:#d8455c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  background:radial-gradient(120% 100% at 50% -5%, #1c6a44 0%, var(--bg) 52%, #07271a 100%) fixed;
  color:var(--ink); font-family:"Segoe UI",system-ui,-apple-system,sans-serif; min-height:100%;
}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;margin:0;}
.muted{color:var(--muted);} .small{font-size:13px;} .center{text-align:center;}
.gold{color:var(--primary);} .pink{color:var(--attack);}

/* top bar */
#topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(8,40,26,.8);backdrop-filter:blur(8px);z-index:30;}
.brand{display:flex;align-items:center;gap:8px;cursor:pointer;}
.brand .mark{font-size:22px;}
.brand .bn{font-family:Georgia,serif;font-size:20px;color:var(--primary);letter-spacing:1px;font-weight:700;}
.brand .bs{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}
.mute-btn,.link-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--primary);border-radius:9px;padding:6px 12px;font-size:13px;cursor:pointer;}
.link-btn{color:var(--ink);}

#app{max-width:720px;margin:0 auto;padding:16px 14px 48px;}

/* buttons */
.btn{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--ink);border-radius:13px;padding:13px 16px;font-size:15px;font-weight:600;cursor:pointer;width:100%;transition:transform .05s,filter .15s,box-shadow .15s;}
.btn:active{transform:translateY(1px);}
.btn:hover{filter:brightness(1.12);}
.btn.primary{background:linear-gradient(180deg,var(--primary-l),var(--primary));color:#2a2008;border-color:var(--primary-d);font-weight:800;box-shadow:0 5px 16px rgba(0,0,0,.32);}
.btn.ghost{background:transparent;}
.btn.sm{padding:8px 14px;font-size:13px;width:auto;}
.btn.big{padding:16px;font-size:17px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* home */
.hero{text-align:center;padding:30px 10px 16px;}
.hero .logo{font-size:54px;filter:drop-shadow(0 5px 12px rgba(0,0,0,.45));}
.hero .title{font-size:46px;letter-spacing:3px;color:var(--primary);margin-top:4px;}
.hero .subtitle{font-size:13px;letter-spacing:6px;color:var(--muted);margin-top:2px;}
.hero .tagline{color:var(--muted);margin-top:14px;font-style:italic;}
.menu{display:flex;flex-direction:column;gap:11px;margin-top:8px;}
.count-row{display:flex;align-items:center;gap:12px;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:10px;}
.stepper{display:flex;align-items:center;gap:12px;}
.stepper button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--primary);font-size:20px;font-weight:700;cursor:pointer;}
.foot{text-align:center;color:#7f9a88;font-size:11px;letter-spacing:.5px;margin-top:22px;}

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0;backdrop-filter:blur(6px);box-shadow:0 8px 26px rgba(0,0,0,.28);}
.roomcode{font-family:Georgia,serif;font-size:42px;letter-spacing:8px;color:var(--primary);margin:6px 0;}
.seatlist{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.seatline{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;}
.seatline.you{border-color:var(--primary);background:rgba(217,179,92,.12);}
.seatline .si{font-size:22px;} .seatline .sn{font-weight:600;}
.hosttag{font-size:10px;background:rgba(217,179,92,.22);color:var(--primary-l);border-radius:5px;padding:1px 5px;letter-spacing:1px;}
.ai-badge{font-size:10px;letter-spacing:1px;color:#9fc0a8;border:1px solid var(--line-strong);border-radius:5px;padding:0 4px;}
.waiting{padding:40px 16px;}
.spinner{font-size:46px;animation:spin 3s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* setup chooser */
.char-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0;}
.char-opt{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer;}
.char-opt.on{border-color:var(--primary);background:rgba(217,179,92,.14);}
.char-opt .ci{font-size:24px;} .char-opt .cn{font-size:12px;font-weight:700;margin-top:2px;} .char-opt .cp{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.2;}
.picker{display:flex;flex-direction:column;gap:8px;margin:8px 0;}
.pick{display:flex;align-items:center;gap:10px;text-align:left;}
.pick.on{border-color:var(--primary);background:rgba(217,179,92,.14);}
.pick .bi{font-size:20px;}

/* table */
.table-status{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:4px 4px 0;}
.turnnow{color:var(--primary-l);font-weight:700;}
.table-wrap{padding:44px 12px 28px;overflow:visible;}
.felt{position:relative;width:100%;height:min(50vh,420px);min-height:300px;border-radius:50%;
  background:radial-gradient(115% 115% at 50% 38%,#1f7a4d 0%,#14572f 52%,#0a3320 100%);
  border:13px solid #3c2a18;box-shadow:inset 0 0 0 4px #6b4a22, inset 0 0 70px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.5);}
.felt::before{content:'';position:absolute;inset:9%;border:2px solid rgba(255,255,255,.12);border-radius:50%;pointer-events:none;}
.felt::after{content:'♥';position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);font-size:120px;color:rgba(255,255,255,.05);pointer-events:none;line-height:1;}
.table-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72%;text-align:center;}
.piles{display:flex;gap:16px;justify-content:center;}
.pile{width:56px;height:78px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:30px;position:relative;}
.pile.deck{color:#fff;border:2px solid #e8eef6;
  background:radial-gradient(circle at 50% 42%, rgba(120,160,220,.4), transparent 62%),repeating-linear-gradient(45deg,#1c3f72,#1c3f72 5px,#244c86 5px,#244c86 10px);
  box-shadow:0 4px 10px rgba(0,0,0,.4), 3px 3px 0 -1px #16335c, 6px 6px 0 -2px #112748;}
.pile.deck::after{content:'♦';font-size:22px;color:rgba(255,255,255,.55);}
.pile.deck .pc{position:absolute;top:3px;right:5px;font-size:13px;font-weight:800;color:#fff;background:rgba(0,0,0,.4);border-radius:6px;padding:0 5px;}
.pile.disc{background:linear-gradient(160deg,#ffffff,#f4f6ef);color:#2b211a;border:1px solid #cfd3c4;box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 0 0 2px #fff;animation:discflip .34s ease-out;}
.pile.disc .corner{position:absolute;top:4px;left:6px;font-size:12px;}
.pile .pl{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:1px;color:#cfe6d6;text-transform:uppercase;}
.talk{margin-top:26px;font-size:11.5px;color:#e6f1ea;min-height:30px;line-height:1.35;max-width:240px;margin-left:auto;margin-right:auto;}
@keyframes discflip{from{transform:rotateY(90deg);opacity:.3;}to{transform:rotateY(0);opacity:1;}}
/* opponent hand — a small fan of face-down card-backs */
.minihand{display:flex;justify-content:center;align-items:center;height:16px;margin-bottom:1px;}
.minihand .mb{width:10px;height:14px;border-radius:2px;margin-left:-5px;border:1px solid #cdd9ee;
  background:repeating-linear-gradient(45deg,#1c3f72,#1c3f72 2px,#244c86 2px,#244c86 4px);box-shadow:0 1px 2px rgba(0,0,0,.5);}
.minihand .mb:first-child{margin-left:0;}
.minihand .mhc{font-size:9px;color:#cfe6d6;margin-left:5px;}

.chip-pos{position:absolute;transform:translate(-50%,-50%);width:86px;z-index:3;}
.chip{text-align:center;}
.chip .avatar{width:52px;height:52px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:25px;position:relative;background:radial-gradient(circle at 50% 32%,#fbf7ec,#e7ddc6);border:2px solid #fff;box-shadow:0 3px 9px rgba(0,0,0,.5);}
.chip .avatar .hs{position:absolute;bottom:-5px;right:-6px;font-size:16px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));}
@keyframes seatpulse{0%,100%{box-shadow:0 0 0 3px var(--primary),0 0 14px rgba(217,179,92,.55);}50%{box-shadow:0 0 0 3px var(--primary-l),0 0 26px rgba(217,179,92,1);}}
.chip.active .avatar{border-color:var(--primary);animation:seatpulse 1.5s ease-in-out infinite;}
.chip.active .cnm{color:var(--primary-l);}
.chip.broken{opacity:.5;filter:grayscale(.5);}
.chip .cnm{font-size:12px;font-weight:700;margin-top:4px;white-space:nowrap;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);}
.chip .loveline{display:flex;gap:1px;justify-content:center;margin-top:3px;}
.chip .loveline .st{font-size:13px;filter:grayscale(1) opacity(.4);transition:filter .2s, transform .2s;}
.chip .loveline .st.lit{filter:none;transform:scale(1.12);}
.chip .loveline .st.commit{margin-left:3px;}
@keyframes readyPulse{0%,100%{filter:none;transform:scale(1.05);}50%{filter:drop-shadow(0 0 5px var(--primary));transform:scale(1.25);}}
.chip .loveline .st.commit.ready{filter:none;animation:readyPulse 1.1s ease-in-out infinite;}
.chip.won .loveline .st{filter:none;}
.chip.won .avatar{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary),0 0 18px rgba(217,179,92,.8);}
.chip .badges{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;margin-top:2px;min-height:14px;}
.chip .bdg{font-size:10px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:0 4px;line-height:1.4;color:#fff;}
.chip .bdg.dim{opacity:.4;}
.chip.frozen .avatar{border-color:#9fb0a6;filter:grayscale(.3);}

/* ============================================================
   HAND + CARDS — redesigned for clarity
   • Each card: name + tone chip (top), big art (mid), 1-line effect (bottom)
   • Family colour drives the border + the icon glow
   • Long description hidden behind the data-tip tooltip
   ============================================================ */
.hand-area{ margin-top: 6px; }
.hand-area.idle{ opacity: .82; }

/* THE LOVE BAR — visible progress toward winning, replaces the old strip.
   Pips + filled track + commit medal at the end. */
.love-bar{
  max-width: 520px; margin: 0 auto 10px;
  background:
    linear-gradient(180deg, rgba(40,18,42,.55), rgba(20,8,22,.55));
  border: 1px solid rgba(217,179,92,.5);
  border-radius: 14px;
  padding: 8px 12px 10px;
  box-shadow: inset 0 1px 0 rgba(255,235,168,.12);
}
.love-bar .lb-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size: 11px; letter-spacing:1px; color:#b6a3b0;
  margin-bottom: 6px;
}
.love-bar .lb-secret{ display:inline-flex; align-items:center; gap:6px; color:#ffe9a8; font-weight:600; }
.love-bar .lb-secret b{ color:#fff; font-weight:700; letter-spacing:.5px; }
.love-bar .lb-stage{ color:#e0a458; font-family:Georgia,serif; font-size:13px; font-weight:700; letter-spacing:.5px; }
.love-bar .lb-track{
  position: relative; height: 26px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(217,179,92,.25);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
}
.love-bar .lb-fill{
  position:absolute; top:0; left:0; bottom:0;
  background:
    linear-gradient(90deg, #e85c86 0%, #ff8aae 60%, #ffd2dd 100%);
  border-radius: 999px;
  transition: width .55s cubic-bezier(.2,.9,.25,1.15);
  box-shadow: 0 0 14px rgba(232,92,134,.55);
}
.love-bar .lb-pip{
  position: absolute; top: 50%;
  width: 22px; height: 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 13px;
  background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
  filter: grayscale(.4) brightness(.7);
  transform: translateY(-50%);
}
.love-bar .lb-pip:nth-child(2){ left: calc(33% - 11px); }   /* ✨ */
.love-bar .lb-pip:nth-child(3){ left: calc(66% - 11px); }   /* 🌹 */
.love-bar .lb-pip:nth-child(4){ left: calc(100% - 26px); }  /* 💋 */
.love-bar .lb-pip.commit{ right: 4px; left: auto; background: linear-gradient(180deg, rgba(217,179,92,.3), rgba(120,80,30,.5)); }
.love-bar .lb-pip.lit{ filter: none; background: linear-gradient(180deg, #fff5d0, #d9b35c); border-color: #6b4d18; box-shadow: 0 0 14px rgba(255,235,168,.7); }
.love-bar .lb-pip.ready{
  animation: pipReady 1.2s ease-in-out infinite;
  background: linear-gradient(180deg, #fff5d0, #d9b35c); border-color: #6b4d18;
}
@keyframes pipReady{ 0%,100%{ box-shadow: 0 0 0 0 rgba(217,179,92,.0);} 50%{ box-shadow: 0 0 0 8px rgba(217,179,92,.45), 0 0 18px rgba(255,235,168,.9);} }
.love-bar .lb-confess{
  margin-top: 6px; text-align: center;
  font-size: 12px; font-weight: 700;
  color: #2a2008;
  background: linear-gradient(180deg, #fff5d0, #d9b35c);
  border-radius: 999px; padding: 4px 10px;
  animation: pipReady 1.2s ease-in-out infinite;
}

/* The fan */
.hand{ position:relative; height:204px; margin-top:2px; overflow:visible; }

/* CARDS — new clean face */
.pcard{
  position:absolute; top:18px; left:0;
  width: 116px; height: 174px;
  border-radius: 12px;
  cursor: pointer;
  color: #2b211a;
  background:
    linear-gradient(165deg, #fffaf0 0%, #f4ecd8 65%, #ead9b0 100%);
  border: 1px solid #cab885;
  box-shadow:
    0 6px 14px rgba(0,0,0,.4),
    inset 0 0 0 3px #fffaf0,
    inset 0 0 0 4px var(--cardedge, #e6c592);
  display:flex; flex-direction:column;
  padding: 8px 8px 8px;
  transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0px));
  transform-origin: bottom center;
  z-index: var(--z, 1);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pcard:hover{ transform: translateY(-30px) rotate(0deg) scale(1.07); z-index: 60; box-shadow: 0 18px 32px rgba(0,0,0,.55); }
.pcard.sel{ transform: translateY(-34px) rotate(0deg) scale(1.1); z-index: 61; box-shadow: 0 20px 36px rgba(0,0,0,.6), 0 0 0 3px var(--primary), 0 0 26px rgba(217,179,92,.5); }
.hand-area.idle .pcard{ cursor: default; }
.hand-area.idle .pcard:hover{ transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0px)); z-index: var(--z, 1); box-shadow: 0 6px 14px rgba(0,0,0,.4); }

/* New: top row — card name + tone chip */
.pcard .pc-top{
  display:flex; justify-content:space-between; align-items:center;
  font-size: 11px; padding: 1px 2px 4px;
  border-bottom: 1px dashed rgba(0,0,0,.12);
  margin-bottom: 4px;
}
.pcard .pc-name{
  font-family: 'Cinzel', Georgia, serif; font-weight: 800;
  font-size: 12.5px; letter-spacing: .5px;
  color: #2b211a;
  text-transform: uppercase;
}
.pcard .pc-tone{
  display:inline-flex; align-items:center; gap: 2px;
  padding: 1px 5px; border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
  background: rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12);
  color: #45382a;
}
.pcard .pc-tone .tic{ font-size: 11px; }
.pcard .pc-tone.self  { background: rgba(217,179,92,.18); border-color: rgba(176,122,32,.5); color: #6b4d18; }
.pcard .pc-tone.attack{ background: rgba(216,69,92,.16);  border-color: rgba(176,40,60,.55); color: #8a1a32; }
.pcard .pc-tone.info  { background: rgba(76,174,122,.18); border-color: rgba(40,130,80,.55); color: #1e5a3e; }

/* Middle: art panel with a coloured glow behind the icon */
.pcard .pc-art{
  position: relative;
  height: 78px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 50%, var(--cardglow, rgba(217,179,92,.35)) 0%, transparent 70%),
    linear-gradient(180deg, #fff9ec 0%, #f0e3c2 100%);
  border: 1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.pcard .pc-glow{
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(0,0,0,.025) 7px 8px);
  pointer-events: none;
}
.pcard .pc-icon{
  font-size: 40px; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
  transform: rotate(-3deg);
  z-index: 1;
}

/* Bottom: effect headline + small italic flavour */
.pcard .pc-effect{
  text-align: center;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700;
  font-size: 11px; color: #2b211a;
  margin-top: 6px; line-height: 1.2;
  padding: 0 2px;
}
.pcard .pc-tag{
  text-align: center;
  font-size: 9px; font-style: italic;
  color: #8a7350; margin-top: 2px;
}

/* Family colour assignments — drive the inner border AND the art glow */
.f-attack   { --cardedge:#e89aa6; --cardglow: rgba(216,69,92,.28); }
.f-defense  { --cardedge:#a8bce0; --cardglow: rgba(106,144,200,.28); }
.f-info     { --cardedge:#9fd9be; --cardglow: rgba(76,174,122,.28); }
.f-disruption{ --cardedge:#cbb0e8; --cardglow: rgba(154,106,208,.28); }
.f-love     { --cardedge:#f0a8b8; --cardglow: rgba(232,92,134,.32); }
.f-devotion { --cardedge:#e8c878; --cardglow: rgba(217,179,92,.32); }
.f-self     { --cardedge:#f0a8b8; --cardglow: rgba(232,92,134,.32); }
.f-self2    { --cardedge:#d6a0e0; --cardglow: rgba(180,90,210,.28); }
.f-block    { --cardedge:#a8bce0; --cardglow: rgba(106,144,200,.32); }
.f-block2   { --cardedge:#9fd9be; --cardglow: rgba(76,174,122,.28); }
.f-jealousy { --cardedge:#7bd1bf; --cardglow: rgba(15,155,142,.32); }
.f-win      { --cardedge:#e8c878; --cardglow: rgba(217,179,92,.45); }

.f-love     .pc-icon, .f-love     .pc-name{ color: #c2225a; }
.f-attack   .pc-icon, .f-attack   .pc-name{ color: #aa1a32; }
.f-info     .pc-icon, .f-info     .pc-name{ color: #1f6a44; }
.f-self2    .pc-icon, .f-self2    .pc-name{ color: #6a2a8a; }
.f-block    .pc-icon, .f-block    .pc-name{ color: #2e4f7d; }
.f-block2   .pc-icon, .f-block2   .pc-name{ color: #1f6a44; }
.f-jealousy .pc-icon, .f-jealousy .pc-name{ color: #0a6e62; }
.f-devotion .pc-icon, .f-devotion .pc-name{ color: #8a5e10; }

.f-win{ box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 0 0 3px #fff, inset 0 0 0 4px var(--cardedge), 0 0 22px rgba(217,179,92,.6); }
.f-win .pc-name{ color: #8a5e10; }
@keyframes dealin{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
.hint-line{text-align:center;font-size:11px;color:var(--muted);margin-top:5px;}

/* aiming: tap a card → seats become targets */
.aim-banner{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(0,0,0,.4);border:1px solid var(--primary);border-radius:12px;padding:8px 14px;margin:6px 0;font-size:14px;color:var(--ink);}
.aim-banner b{color:var(--primary-l);}
.aim-banner button{margin-left:8px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:4px 12px;font-size:12px;cursor:pointer;}
.table-wrap.aiming .chip-pos:not(.targetable){opacity:.45;}
.chip-pos.targetable{cursor:pointer;}
.chip-pos.targetable .avatar{border-color:#7fe0b0;animation:targetpulse 1.1s ease-in-out infinite;}
.chip-pos.targetable:hover .avatar{transform:scale(1.1);}
.chip-pos.targetable .cnm{color:#aef0cf;}
@keyframes targetpulse{0%,100%{box-shadow:0 0 0 3px #2fae80,0 0 12px rgba(95,224,176,.5);}50%{box-shadow:0 0 0 3px #5fe0a8,0 0 22px rgba(95,224,176,.95);}}

/* bottom action sheet */
.sheet-overlay{align-items:flex-end;padding:0;}
.sheet{width:100%;max-width:600px;margin:0 auto;background:var(--panel-solid);border:1px solid var(--line);border-top:3px solid var(--primary);border-radius:18px 18px 0 0;padding:16px 16px 24px;display:flex;flex-direction:column;gap:9px;animation:sheetup .22s ease;box-shadow:0 -8px 30px rgba(0,0,0,.4);}
@keyframes sheetup{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-title{font-family:Georgia,serif;font-weight:700;font-size:18px;text-align:center;margin-bottom:2px;}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.btn.pick.fool{flex-direction:column;gap:3px;text-align:center;padding:12px 6px;}
.btn.pick.fool .fic{font-size:24px;}

/* log */
.log{margin-top:12px;border-top:1px solid var(--line);padding-top:8px;}
.log .e{font-size:12.5px;color:var(--muted);padding:3px 0;border-bottom:1px dotted rgba(255,255,255,.07);}

/* reveal */
.bigseat{font-size:48px;}
.pairline{font-size:18px;margin:4px 0;}
.revealline{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin:6px 0;}
.revealline .si{font-size:22px;} .rl-main{flex:1;} .rl-score{font-size:18px;font-weight:800;color:var(--primary-l);}

/* leaderboard */
table.lb{width:100%;border-collapse:collapse;margin-top:8px;}
table.lb th,table.lb td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;}
table.lb th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:1px;}

/* auth + modal */
.tabs{display:flex;gap:6px;margin:10px 0;}
.tab{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:8px;font-weight:700;cursor:pointer;}
.tab.on{background:var(--primary);color:#2a2008;border-color:var(--primary-d);}
.inp{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line-strong);color:var(--ink);border-radius:10px;padding:12px;font-size:15px;margin:6px 0;}
.inp::placeholder{color:#8aa494;}
.err{color:var(--attack);font-size:13px;margin-top:6px;text-align:center;}
.overlay{position:fixed;inset:0;background:rgba(4,18,11,.66);display:flex;align-items:center;justify-content:center;padding:18px;z-index:100;backdrop-filter:blur(3px);}
.modal{background:var(--panel-solid);border:1px solid var(--line);border-radius:18px;padding:18px;max-width:460px;width:100%;max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:8px;box-shadow:0 20px 50px rgba(0,0,0,.5);}
.modal h3{margin-bottom:4px;}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#103225;border:1px solid var(--primary);color:var(--ink);padding:10px 16px;border-radius:12px;font-size:14px;z-index:200;box-shadow:0 8px 28px rgba(0,0,0,.5);}
.hidden{display:none !important;}

/* desktop: the layout is phone-first, so rein it in on wide screens */
@media (min-width:700px){
  #app{max-width:600px;}
  .felt{height:min(44vh,360px);}
  .hero .title{font-size:40px;}
  .hero .logo{font-size:46px;}
}

/* =========================================================
   Animations & micro-interactions for the auth flow + modals
   ========================================================= */
.overlay{ animation: fadeIn .18s ease-out; }
.modal{ animation: popIn .26s cubic-bezier(.2,.9,.3,1.15); transform-origin:center; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes popIn  { from { opacity:0; transform:scale(.92) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* Step-slide for register flow (added by JS as a class on the modal) */
.modal.slide-in-right { animation: slideInR .28s ease-out; }
.modal.slide-in-left  { animation: slideInL .28s ease-out; }
@keyframes slideInR { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInL { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }

/* Inputs glow on focus */
.auth-input{
  width:100%; box-sizing:border-box; margin:6px 0;
  padding:11px 12px; background:#160d1a;
  border:1px solid #3c2a42; color:#f3e9df; border-radius:10px; font-size:15px;
  outline:none; transition:border-color .15s, box-shadow .2s, background .15s;
}
.auth-input:focus{
  border-color:#e0a458; background:#1c1020;
  box-shadow: 0 0 0 3px rgba(224,164,88,.18);
}

/* Buttons — gentle press + glow */
.btn.primary{ transition:transform .08s, box-shadow .2s, filter .15s; }
.btn.primary:hover{ box-shadow: 0 6px 18px rgba(224,164,88,.28); }
.btn.primary:active{ transform:translateY(1px) scale(.99); }

/* Eye & reroll inside password input */
.pw-iconbtn{
  background:transparent; border:0; color:#b6a3b0; font-size:18px; cursor:pointer;
  transition:transform .25s ease, color .15s;
  padding:4px; border-radius:6px;
}
.pw-iconbtn:hover{ color:#e0a458; }
.pw-iconbtn.spin{ animation: rerollSpin .55s ease-in-out; }
@keyframes rerollSpin { from { transform:rotate(0); } to { transform:rotate(360deg); } }
.pw-iconbtn.eye-shown{ transform: rotateY(180deg); }

/* Inline validation hint colour pulse */
.hint{ transition: color .2s; font-size:12px; }
.hint.ok{ color:#3a9a6a; }

/* Welcome celebration (after register) */
.welcome-burst{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:14px 8px;
  animation: bounceIn .6s cubic-bezier(.2,.9,.3,1.4);
}
.welcome-burst .heart{
  font-size:72px;
  animation: heartBeat 1.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 24px rgba(232,67,106,.55));
}
.welcome-burst h2{
  font-family:Georgia,serif; font-size:26px; color:#e0a458; letter-spacing:.5px; margin:0;
  animation: fadeUp .5s .15s both ease-out;
}
.welcome-burst .who{ color:#f3e9df; font-size:18px; animation: fadeUp .5s .25s both ease-out; }
.welcome-burst .sub{ color:#b6a3b0; font-size:13px; animation: fadeUp .5s .35s both ease-out; }
@keyframes bounceIn { from { opacity:0; transform:scale(.6); } 60% { opacity:1; transform:scale(1.06); } to { transform:scale(1); } }
@keyframes heartBeat {
  0%,100% { transform:scale(1); }
  25% { transform:scale(1.12); }
  40% { transform:scale(.98); }
  70% { transform:scale(1.08); }
}
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Confetti hearts around the burst */
.confetti{ position:absolute; pointer-events:none; font-size:22px; opacity:0; animation: confettiFall 1.6s ease-out forwards; }
@keyframes confettiFall {
  0%   { opacity:0; transform:translate(0,0) rotate(0); }
  20%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--cx,0), var(--cy,120px)) rotate(var(--cr,360deg)); }
}

/* Greeting card on home when signed in */
.home-greeting{
  background:linear-gradient(135deg, rgba(224,164,88,.18), rgba(232,92,134,.10));
  border:1px solid rgba(224,164,88,.35);
  border-radius:14px; padding:14px 16px; margin:10px 0 14px;
  display:flex; align-items:center; gap:12px;
  animation: fadeUp .35s ease-out;
}
.home-greeting .gi{ font-size:30px; }
.home-greeting .gtxt{ flex:1; }
.home-greeting .gtxt .hi{ font-size:13px; color:#b6a3b0; letter-spacing:1px; text-transform:uppercase; }
.home-greeting .gtxt .nm{ font-family:Georgia,serif; font-size:22px; color:#e0a458; }
.home-greeting .badge{ font-size:11px; color:#3a9a6a; background:rgba(58,154,106,.12); padding:3px 8px; border-radius:999px; border:1px solid rgba(58,154,106,.35); }

/* ============================================================
   HOME PAGE ANIMATIONS — make the table feel alive
   ============================================================ */

/* Floating hearts that drift up behind the menu — pure decoration. */
.floaters{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.floaters .h{
  position:absolute; bottom:-40px; font-size:18px; opacity:0;
  animation: floatUp linear infinite;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
  will-change: transform, opacity;
}
@keyframes floatUp{
  0%   { transform: translate(0, 0) rotate(0deg) scale(.7); opacity: 0; }
  10%  { opacity: .55; }
  50%  { transform: translate(var(--sway, 30px), -50vh) rotate(180deg) scale(1); }
  90%  { opacity: .55; }
  100% { transform: translate(calc(var(--sway, 30px) * -1), -100vh) rotate(360deg) scale(.8); opacity: 0; }
}

/* Make sure the actual content sits above the floaters. */
#app, .hero, .menu, .home-greeting, .foot{ position:relative; z-index:1; }

/* Greeting card — slide down + breathing emoji */
.home-greeting{ animation: greetingIn .55s cubic-bezier(.2,.9,.25,1.15) both; }
.home-greeting .gi{ display:inline-block; animation: emojiPulse 2.8s ease-in-out infinite; transform-origin: 50% 60%; }
.home-greeting .badge{ animation: onlinePulse 2.2s ease-in-out infinite; }
@keyframes greetingIn{ from{opacity:0; transform:translateY(-14px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes emojiPulse{ 0%,100%{transform:scale(1) rotate(0);} 35%{transform:scale(1.18) rotate(-6deg);} 60%{transform:scale(.95) rotate(4deg);} }
@keyframes onlinePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(58,154,106,0);} 50%{box-shadow:0 0 0 6px rgba(58,154,106,.10);} }

/* Hero — staggered entry, beating heart, shimmering title */
.hero .logo{ animation: heartThump 1.6s ease-in-out infinite, logoIn .6s cubic-bezier(.2,.9,.25,1.15) both; }
.hero .title{
  background: linear-gradient(90deg, #d9b35c 0%, #ffe9a8 25%, #d9b35c 50%, #ffe9a8 75%, #d9b35c 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: titleShimmer 6s linear infinite, titleIn .55s .1s cubic-bezier(.2,.9,.25,1.15) both;
}
.hero .subtitle{ animation: fadeUp .55s .2s both ease-out; }
.hero .tagline { animation: fadeUp .55s .32s both ease-out; }
@keyframes heartThump{
  0%,100% { transform: scale(1); filter:drop-shadow(0 5px 12px rgba(0,0,0,.45)); }
  18%     { transform: scale(1.18); filter:drop-shadow(0 5px 18px rgba(232,92,134,.55)); }
  32%     { transform: scale(.96); }
  46%     { transform: scale(1.10); filter:drop-shadow(0 5px 16px rgba(232,92,134,.4)); }
  60%     { transform: scale(1); }
}
@keyframes logoIn { from{opacity:0; transform:scale(.4) rotate(-12deg);} to{opacity:1; transform:scale(1) rotate(0);} }
@keyframes titleIn { from{opacity:0; transform:translateY(10px) letter-spacing:8px;} to{opacity:1; transform:translateY(0);} }
@keyframes titleShimmer{ to { background-position: -200% 0; } }

/* Menu — every item slides up one after the other */
.menu > *{ animation: fadeUp .5s both cubic-bezier(.2,.9,.25,1.15); }
.menu > *:nth-child(1){ animation-delay:.30s; }
.menu > *:nth-child(2){ animation-delay:.40s; }
.menu > *:nth-child(3){ animation-delay:.50s; }
.menu > *:nth-child(4){ animation-delay:.60s; }
.menu > *:nth-child(5){ animation-delay:.70s; }
.menu > *:nth-child(6){ animation-delay:.80s; }

/* Every button: gentle lift + glow on hover, press-down on active. */
.btn{ transition: transform .15s ease, box-shadow .18s ease, filter .15s ease; }
.btn:hover{ transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 22px rgba(217,179,92,.22); }
.btn:active{ transform: translateY(0) scale(.98); }
.btn.primary:hover{ box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 28px rgba(217,179,92,.45); }

/* The invite-a-friend button gets its own attention loop — heartbeat pulse
   so the user sees there's a way to bring someone in. */
#invite-friend{
  animation: invitePulse 2.4s ease-in-out infinite, fadeUp .5s .4s both cubic-bezier(.2,.9,.25,1.15);
  position:relative; overflow:hidden;
}
#invite-friend::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,224,232,.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: inviteSheen 3.2s ease-in-out infinite;
}
@keyframes invitePulse{
  0%,100% { box-shadow: 0 0 0 0 rgba(232,92,134,.55), 0 6px 18px rgba(0,0,0,.35); }
  50%     { box-shadow: 0 0 0 10px rgba(232,92,134,0), 0 8px 24px rgba(232,92,134,.45); }
}
@keyframes inviteSheen{
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Stepper number bounce when the count changes (toggled by JS). */
#cval{ display:inline-block; transition: color .2s; }
#cval.bumped{ animation: countBump .35s cubic-bezier(.2,.9,.25,1.6); }
@keyframes countBump{ 0%{transform:scale(1);} 40%{transform:scale(1.4); color:#ffe9a8;} 100%{transform:scale(1);} }

/* Top-bar logo: a quiet pulse */
.topbar .brand .logo{ display:inline-block; animation: heartThump 1.8s ease-in-out infinite; }

/* ============================================================
   USER AVATARS — gradient circle + face emoji, used everywhere
   a player is identified (top bar, greeting card, leaderboard,
   lobby seats, account menu).
   ============================================================ */
.user-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  box-shadow: 0 4px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.18);
  line-height:1;
  flex-shrink:0;
  vertical-align: middle;
  user-select: none;
  text-align:center;
  overflow:hidden;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.user-avatar.ring{
  box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 3px rgba(217,179,92,.65), inset 0 0 0 1px rgba(0,0,0,.2);
}
.user-avatar.clickable{ cursor:pointer; transition: transform .2s ease, box-shadow .2s ease; }
.user-avatar.clickable:hover{ transform: scale(1.08) rotate(-6deg); box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 0 3px rgba(255,224,232,.7), inset 0 0 0 1px rgba(0,0,0,.2); }
.user-avatar.clickable:active{ transform: scale(.94); }

/* Top bar — small avatar replacing the 👤 prefix. */
#who{ display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 5px; }
#who .who-name{ font-weight:600; }

/* Home greeting now has an 'reroll hint' line under the username. */
.home-greeting .reroll-hint{ font-size:11px; color:#b6a3b0; margin-top:3px; letter-spacing:.5px; }

/* Account modal head */
.account-head{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0 14px; }
.account-head .account-name{ font-family:Georgia,serif; font-size:24px; color:#e0a458; }

/* Leaderboard rows — avatar + name pair */
.lb-player{ display:inline-flex; align-items:center; gap:8px; }
.lb td:nth-child(2){ text-align:left; }

/* Lobby seat lines — avatar on the left, seat icon on the right. */
.seatline{ display:flex; align-items:center; gap:10px; }
.seatline .sn{ flex:1; }
.seatline .si.right{ font-size:20px; opacity:.65; }

/* ============================================================
   HOME — stats card + mini leaderboard
   ============================================================ */
.stats-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
  margin:10px 0 6px;
  animation: fadeUp .5s .15s both ease-out;
}
.stats-card{
  background: linear-gradient(180deg, rgba(40,18,42,.55), rgba(20,10,22,.55));
  border:1px solid rgba(217,179,92,.22);
  border-radius:14px;
  padding:12px 14px;
  position:relative;
}
.stats-card .stats-title{
  font-size:10px; letter-spacing:1.5px; color:#b6a3b0;
  text-transform:uppercase; margin-bottom:8px;
}
.stats-card.mine .stats-grid{ display:flex; gap:14px; align-items:baseline; }
.stats-card.mine .stat{ flex:1; text-align:center; }
.stats-card.mine .stat .v{ font-family:Georgia,serif; font-size:24px; color:#e0a458; line-height:1; }
.stats-card.mine .stat .k{ font-size:10px; color:#b6a3b0; letter-spacing:.6px; text-transform:uppercase; margin-top:4px; }
.stats-card.mine .stat.full{ text-align:left; }
.stats-card.mine .stat.full .v{ font-size:16px; }

.mini-lb{ display:flex; flex-direction:column; gap:6px; }
.mini-row{ display:flex; align-items:center; gap:8px; font-size:13px; }
.mini-row .rank{ font-size:14px; width:20px; text-align:center; }
.mini-row .who{ flex:1; color:#f3e9df; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-row .w{ color:#e0a458; font-weight:700; }

/* ============================================================
   THE FLOOR — casino-style table browser
   ============================================================ */
.floor-panel{ position:relative; }
.floor-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.floor-head h3{ margin:0; }
.floor-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px; margin-top:14px;
}

/* Each table card. The "felt" inside is a green oval that looks like a real
   casino table top-down, with seat dots evenly spaced around it. */
.table-card{
  background: linear-gradient(180deg, rgba(40,18,42,.7), rgba(20,10,22,.7));
  border:2px solid rgba(217,179,92,.35);
  border-radius:16px;
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
  position:relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.table-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.4); border-color: rgba(217,179,92,.65); }
.table-card.disabled{ filter: grayscale(.4) brightness(.85); }
.table-card.locked{ border-color: #5c4a2a; }
.table-card.in-game{ border-color: rgba(232,92,134,.5); }
.table-card.full{ border-color: rgba(120,120,120,.5); }

/* The mini felt. Pointer-free decoration. */
.felt{
  position:relative; width:100%; aspect-ratio: 16 / 10;
  background: radial-gradient(ellipse at 50% 50%, #1b6f4a 0%, #0d3924 60%, #07271b 100%);
  border-radius:50% / 32%;
  border: 6px solid #3a2614;
  box-shadow: inset 0 0 22px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.45);
  overflow:hidden;
}
.felt::before{
  /* subtle highlight band so the felt has a gloss */
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 28%, rgba(255,255,255,.08), transparent 55%);
}
.felt-inner{ position:absolute; inset:0; }
.felt-code{
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  color: rgba(255, 235, 195, .25);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 20px; letter-spacing: 3px; font-weight:700;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* Seat dots — placed around the oval via per-seat CSS angle. */
.felt-dots{ position:absolute; inset:0; }
.seat-dot{
  position:absolute; left:50%; top:50%; width:30px; height:30px;
  /* angle: 360/seats * n, starting at the top */
  --angle: calc((360deg / var(--seats, 7)) * var(--n, 0) + 270deg);
  /* radius inside the felt oval (in % of the half-width). The oval is 16:10,
     so we use 38% horizontal / 36% vertical for the seat ring. */
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(78px) rotate(calc(-1 * var(--angle)));
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.seat-dot.empty{
  width:14px; height:14px;
  background: rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.18); border-radius:50%;
}
.seat-dot.ai{
  width:28px; height:28px; background:#2a1f33; border:2px solid #6a4f7a; border-radius:50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

.table-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.table-host{ display:flex; align-items:center; gap:6px; font-size:13px; color:#f3e9df; }
.table-host span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:110px; }
.table-status{ font-size:11px; padding:3px 8px; border-radius:999px; letter-spacing:.4px; }
.table-status.open   { color:#a8f0c4; background:rgba(58,154,106,.15); border:1px solid rgba(58,154,106,.45); }
.table-status.locked { color:#ffd87a; background:rgba(217,179,92,.12); border:1px solid rgba(217,179,92,.45); }
.table-status.in-game{ color:#ffb0c2; background:rgba(232,92,134,.12); border:1px solid rgba(232,92,134,.45); }
.table-status.full   { color:#cdcdcd; background:rgba(120,120,120,.12); border:1px solid rgba(120,120,120,.4); }

.btn.locked-btn{
  background: linear-gradient(180deg, rgba(217,179,92,.18), rgba(120,80,30,.25));
  border:1px solid rgba(217,179,92,.6);
  color:#ffd87a;
}
.btn.locked-btn:hover{ box-shadow: 0 0 0 3px rgba(217,179,92,.25); }

.floor-empty{
  grid-column: 1 / -1;
  text-align:center; padding:40px 0; color:#b6a3b0;
}
.floor-empty .big{ font-size:48px; margin-bottom:8px; }

/* ============================================================
   LOBBY — visibility toggle + pending-at-the-door panel
   ============================================================ */
#vis-toggle{
  background: linear-gradient(180deg, rgba(58,154,106,.18), rgba(20,80,50,.25));
  border:1px solid rgba(58,154,106,.55);
  color:#dff8e8;
}
#vis-toggle.ghost{
  background: linear-gradient(180deg, rgba(217,179,92,.15), rgba(120,80,30,.20));
  border:1px solid rgba(217,179,92,.5);
  color:#ffd87a;
}

.pending-panel{
  border:1px dashed rgba(217,179,92,.55) !important;
  background: linear-gradient(180deg, rgba(60,40,20,.4), rgba(40,25,15,.4)) !important;
  animation: pendingGlow 2.2s ease-in-out infinite;
}
@keyframes pendingGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(217,179,92,.0);} 50%{ box-shadow:0 0 0 6px rgba(217,179,92,.15);} }
.pending-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.pending-row{ display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:10px; background:rgba(255,255,255,.03); }
.pending-row .pending-name{ flex:1; font-family:Georgia,serif; font-size:17px; color:#e0a458; }

/* Waiting-for-host screen */
.big-emoji{ font-size:56px; }
.spinner.inline{ display:inline-block; margin:14px 0; font-size:24px; animation: spin 2s linear infinite; }

/* ============================================================
   CASINO ROOM — atmosphere overhaul
   Goal: less "page with buttons", more "you walked into a card
   room". Felt grain, dim vignette, gold filigree corners,
   marquee bulbs around the title, chip-like buttons, ornate
   plaques for the stat cards.
   ============================================================ */

/* Felt grain — a layered repeating noise made out of tiny radial
   dots, painted onto the body. Pure CSS so there's no extra image. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
}
/* Soft vignette so the eye lands in the middle. */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 90% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
}
/* Gold filigree corner ornaments — pure CSS scrollwork using
   layered radial gradients. Decoration, fixed in viewport corners. */
.filigree{
  position:fixed; pointer-events:none; z-index:2;
  width:120px; height:120px; opacity:.55;
}
.filigree.tl{ top:48px; left:8px; }
.filigree.tr{ top:48px; right:8px; transform: scaleX(-1); }
.filigree.bl{ bottom:8px; left:8px; transform: scaleY(-1); }
.filigree.br{ bottom:8px; right:8px; transform: scale(-1, -1); }
.filigree::before, .filigree::after{
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
}
.filigree::before{
  background:
    radial-gradient(circle at 22px 22px, transparent 8px, rgba(217,179,92,.65) 9px, rgba(217,179,92,.65) 10px, transparent 11px),
    radial-gradient(circle at 22px 22px, transparent 15px, rgba(217,179,92,.40) 16px, rgba(217,179,92,.40) 17px, transparent 18px),
    linear-gradient(135deg, rgba(217,179,92,.7) 0 1px, transparent 1px) no-repeat,
    linear-gradient(45deg,  rgba(217,179,92,.5) 0 1px, transparent 1px) no-repeat;
  background-size: auto, auto, 60px 60px, 50px 50px;
  background-position: 0 0, 0 0, 0 0, 0 0;
}
.filigree::after{
  background:
    radial-gradient(circle at 8px 8px, rgba(217,179,92,.85) 2.5px, transparent 3px),
    radial-gradient(circle at 38px 8px, rgba(217,179,92,.75) 2px, transparent 2.5px),
    radial-gradient(circle at 8px 38px, rgba(217,179,92,.75) 2px, transparent 2.5px),
    radial-gradient(circle at 58px 22px, rgba(217,179,92,.6) 1.5px, transparent 2px),
    radial-gradient(circle at 22px 58px, rgba(217,179,92,.6) 1.5px, transparent 2px);
}

/* Topbar — promote to a velvet bar with gold trim. */
#topbar{
  border-bottom: 1px solid rgba(217,179,92,.35);
  background: linear-gradient(180deg, rgba(20,60,40,.92), rgba(8,30,20,.92));
  box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 -1px 0 rgba(217,179,92,.15);
  z-index: 40;
}
#topbar .brand .bn{
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 18px rgba(217,179,92,.35);
}

/* HERO — marquee around the PYAAR title, with bulbs around the edge */
.hero{ position:relative; padding:42px 10px 22px; }
.hero::before, .hero::after{
  /* dim gold rule above & below the title block */
  content:""; position:absolute; left:18%; right:18%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(217,179,92,.65), transparent);
}
.hero::before{ top:18px; }
.hero::after { bottom:6px; }
.hero .logo{
  font-size:60px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(232,92,134,.35));
}
.hero .title{
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-size: 56px; letter-spacing: 6px; font-weight: 800;
  text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 6px 24px rgba(217,179,92,.45);
}
/* Marquee bulb halo: a thin ring of dots beneath the title.
   8 dots, evenly spaced, dim-glow, pulsing in sequence. */
.hero .marquee{
  display:flex; justify-content:center; gap:14px; margin: 4px auto 0; width:fit-content;
}
.hero .marquee .bulb{
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, #ffe9a8 0%, #d9b35c 60%, #6b4d18 100%);
  box-shadow: 0 0 8px rgba(255,235,168,.65), inset 0 0 2px rgba(255,255,255,.5);
  animation: bulb 1.4s ease-in-out infinite;
}
.hero .marquee .bulb:nth-child(1){ animation-delay: 0.0s; }
.hero .marquee .bulb:nth-child(2){ animation-delay: 0.15s; }
.hero .marquee .bulb:nth-child(3){ animation-delay: 0.30s; }
.hero .marquee .bulb:nth-child(4){ animation-delay: 0.45s; }
.hero .marquee .bulb:nth-child(5){ animation-delay: 0.60s; }
.hero .marquee .bulb:nth-child(6){ animation-delay: 0.75s; }
.hero .marquee .bulb:nth-child(7){ animation-delay: 0.90s; }
.hero .marquee .bulb:nth-child(8){ animation-delay: 1.05s; }
@keyframes bulb{ 0%,100%{ box-shadow:0 0 4px rgba(255,235,168,.3), inset 0 0 1px rgba(255,255,255,.3); transform: scale(.85);} 50%{ box-shadow:0 0 12px rgba(255,235,168,.95), 0 0 22px rgba(232,92,134,.4), inset 0 0 2px #fff; transform: scale(1.15);} }

/* Stats cards → ornate gold-trim plaques */
.stats-card{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(217,179,92,.10), transparent 60%),
    linear-gradient(180deg, rgba(40,18,42,.7), rgba(20,10,22,.7));
  border:1px solid rgba(217,179,92,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,235,168,.12),
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 6px 18px rgba(0,0,0,.45);
  position:relative;
}
.stats-card::before, .stats-card::after{
  /* small gold corner caps so the plaque feels framed */
  content:""; position:absolute; width:10px; height:10px;
  border:1.5px solid rgba(217,179,92,.7);
}
.stats-card::before{ top:4px; left:4px; border-right:none; border-bottom:none; }
.stats-card::after{ bottom:4px; right:4px; border-left:none; border-top:none; }
.stats-card .stats-title{ color:#d9b35c; font-weight:700; }

/* Buttons → casino chips. Beveled face, soft inner highlight, gold rim. */
.btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 50%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(20,60,40,.6), rgba(10,30,20,.6));
  border:1px solid rgba(217,179,92,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,235,168,.18),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.btn.primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--primary-l), var(--primary) 60%, var(--primary-d));
  border:1px solid #8a6a1c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 8px 22px rgba(217,179,92,.35), 0 4px 8px rgba(0,0,0,.4);
  color:#2a2008;
}
.btn.ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
  border:1px solid rgba(217,179,92,.25);
  box-shadow: inset 0 1px 0 rgba(255,235,168,.07);
}

/* The home menu gets a velvet panel under it so the buttons feel grouped */
.menu{
  background: linear-gradient(180deg, rgba(8,30,20,.5), rgba(8,30,20,.25));
  border:1px solid rgba(217,179,92,.2);
  border-radius: 18px;
  padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.3);
  position:relative;
}
.menu::before{
  /* small label tag like a card-room shingle */
  content: "TABLES & SEATS"; position:absolute; top:-9px; left:50%; transform: translateX(-50%);
  background:#0a2e1c; color:#d9b35c; padding:2px 12px;
  font-size:10px; letter-spacing:2px; border:1px solid rgba(217,179,92,.45); border-radius:999px;
}
.count-row{
  background: rgba(0,0,0,.25);
  border:1px solid rgba(217,179,92,.18);
  border-radius:12px;
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
}
.count-row .stepper{ display:flex; align-items:center; gap:10px; }
.count-row .stepper button{
  width:34px; height:34px; border-radius:50%;
  background: radial-gradient(circle, var(--primary-l), var(--primary-d));
  border:1px solid #6b4d18; color:#2a2008; font-weight:800; font-size:18px; cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.4);
}
#cval{ font-family:Georgia,serif; font-size:24px; color:#ffe9a8; min-width:24px; text-align:center; }

/* Home greeting card — give it a real velvet gold-trimmed plaque feel */
.home-greeting{
  background:
    radial-gradient(ellipse at 0% 0%, rgba(232,92,134,.18), transparent 60%),
    linear-gradient(135deg, rgba(60,30,55,.55), rgba(30,15,30,.55));
  border:1px solid rgba(217,179,92,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,235,168,.18),
    0 8px 22px rgba(0,0,0,.4);
}

/* ============================================================
   IN-GAME — show the exposed crush as a pulsing green pill
   under the chip, and a big center-stage banner the moment
   Jealousy lands.
   ============================================================ */
.chip .exposed{
  margin-top:4px; font-size:11px;
  color:#dff8d8; background: linear-gradient(180deg, rgba(15,155,142,.35), rgba(10,90,75,.45));
  border:1px solid rgba(95,224,176,.55);
  border-radius:999px; padding:3px 8px;
  letter-spacing:.3px;
  animation: exposedPulse 2s ease-in-out infinite;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; margin-left:auto; margin-right:auto;
}
@keyframes exposedPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(95,224,176,.0);} 50%{ box-shadow:0 0 0 4px rgba(95,224,176,.18);} }
.chip.exposed-chip .avatar{
  border-color:#5fe0a8 !important;
  box-shadow: 0 0 0 3px rgba(95,224,176,.4), 0 0 18px rgba(95,224,176,.5) !important;
}

/* Center-stage "EXPOSED" flash banner */
.expose-flash{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:1200; pointer-events:none;
  animation: efIn .4s cubic-bezier(.2,.9,.25,1.4) both;
}
.expose-flash.out{ animation: efOut .45s ease-out both; }
@keyframes efIn{ from{ opacity:0; transform: scale(.85);} to{ opacity:1; transform: scale(1);} }
@keyframes efOut{ to{ opacity:0; transform: scale(.95) translateY(-12px);} }
.expose-flash .expose-card{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(15,155,142,.55), transparent 65%),
    linear-gradient(180deg, rgba(10,40,30,.95), rgba(6,20,14,.95));
  border:2px solid #5fe0a8;
  border-radius:18px;
  padding:18px 22px;
  text-align:center;
  box-shadow: 0 0 0 6px rgba(95,224,176,.18), 0 20px 60px rgba(0,0,0,.6);
  min-width:280px;
  animation: efShake .55s ease-in-out;
}
@keyframes efShake{ 0%,100%{ transform: translateX(0);} 20%{ transform: translateX(-6px);} 40%{ transform: translateX(6px);} 60%{ transform: translateX(-4px);} 80%{ transform: translateX(4px);} }
.expose-flash .ef-title{
  font-family: 'Cinzel', Georgia, serif; font-weight:900;
  font-size:22px; letter-spacing:4px; color:#a8f0c4;
  text-shadow: 0 0 18px rgba(95,224,176,.65);
}
.expose-flash .ef-row{ display:flex; align-items:center; justify-content:center; gap:18px; margin:14px 0 6px; }
.expose-flash .ef-who{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.expose-flash .ef-name{ font-family:Georgia,serif; color:#f3e9df; font-size:14px; }
.expose-flash .ef-arrow{ font-size:32px; color:#5fe0a8; text-shadow: 0 0 12px rgba(95,224,176,.7); }
.expose-flash .ef-sub{ font-family:Georgia,serif; font-style:italic; color:#dff8d8; font-size:14px; }

/* ============================================================
   HOME v2 — A REAL LOBBY: felt table + play chip + friends + tabs
   ============================================================ */

/* Tighter hero — title + marquee, no big logo block */
.hero.compact{ padding:18px 10px 10px; }
.hero.compact .title{ font-size:48px; letter-spacing:5px; margin-bottom:0; }
.hero.compact .subtitle{ font-size:11px; letter-spacing:5px; margin-top:6px; }

/* THE TABLE — central felt with 7 seats arranged in a ring */
.lobby-table-wrap{
  padding: 18px 10px 8px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.lobby-table{
  position:relative;
  width: min(440px, 92%);
  aspect-ratio: 5 / 4;
  border-radius: 50% / 42%;
  border: 14px solid #3a2614;
  background:
    radial-gradient(ellipse at 50% 38%, #25a06a 0%, #128048 35%, #075a32 70%, #042818 100%);
  box-shadow:
    inset 0 12px 38px rgba(0,0,0,.55),
    inset 0 -6px 24px rgba(0,0,0,.5),
    inset 0 0 0 5px rgba(217,179,92,.55),       /* gold inner rail */
    inset 0 0 0 8px rgba(0,0,0,.35),
    0 22px 50px rgba(0,0,0,.55);
  animation: tableIn .6s cubic-bezier(.2,.9,.25,1.15) both;
}
@keyframes tableIn{ from{ opacity:0; transform: scale(.92) translateY(20px);} to{ opacity:1; transform: scale(1) translateY(0);} }
/* faint felt grain inside the oval */
.lobby-felt{
  position:absolute; inset:0; border-radius:inherit; overflow:visible;
}
.lobby-felt::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: auto, 4px 4px;
  pointer-events:none;
}
.felt-rail{
  /* the gold-dot perimeter — a ring of bulbs around the table edge */
  position:absolute; inset:-4px; border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,235,168,.9) 1.5px, transparent 2px) 50% 0/24px 8px repeat-x,
    radial-gradient(circle at 50% 100%, rgba(255,235,168,.9) 1.5px, transparent 2px) 50% 100%/24px 8px repeat-x;
}

/* Seat ring — 7 chips placed at angles around the felt */
.seat-ring{ position:absolute; inset:0; }
.ring-seat{
  position:absolute; top:50%; left:50%;
  --r: 46%;
  --angle: calc((360deg / var(--of, 7)) * var(--n, 0) - 90deg);
  /* The chips sit just inside the rail, so we use a radial offset */
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(min(38vw, 168px))
    rotate(calc(-1 * var(--angle)));
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:64px;
}
.ring-seat .ring-name{
  font-size:10px; letter-spacing:.5px; color:#f3e9df;
  max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.ring-seat.you .ring-name{ color:#ffe9a8; font-weight:700; }
.ring-seat.empty .ring-blank{
  width:38px; height:38px; border-radius:50%;
  background: rgba(0,0,0,.35); border:2px dashed rgba(255,255,255,.18);
  color: rgba(255,255,255,.35); font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.ring-seat.bot{
  animation: botBob 4s ease-in-out infinite;
}
.ring-seat.bot:nth-child(2){ animation-delay: .3s; }
.ring-seat.bot:nth-child(3){ animation-delay: .9s; }
.ring-seat.bot:nth-child(4){ animation-delay: 1.5s; }
@keyframes botBob{ 0%,100%{ transform:
    translate(-50%, -50%) rotate(var(--angle)) translate(min(38vw, 168px)) rotate(calc(-1 * var(--angle))) translateY(0);}
  50%{ transform:
    translate(-50%, -50%) rotate(var(--angle)) translate(min(38vw, 168px)) rotate(calc(-1 * var(--angle))) translateY(-3px);} }

/* Centre of the table — a faint card-stack + the play chip */
.table-center{
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:2;
}
.card-stack{ position:relative; width:48px; height:64px; margin-bottom:-22px; }
.card-stack .csc{
  position:absolute; width:36px; height:50px; border-radius:5px;
  background: linear-gradient(135deg, #6c0a23 0%, #3c0814 100%);
  border:1.5px solid #f7e6c8;
  box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 0 0 2px rgba(217,179,92,.4);
}
.card-stack .c1{ top:6px; left:0;  transform: rotate(-8deg); }
.card-stack .c2{ top:3px; left:6px; transform: rotate(0deg); }
.card-stack .c3{ top:0;   left:12px; transform: rotate(8deg); }

/* THE PLAY CHIP — the only primary CTA on the home */
.play-chip{
  appearance:none; cursor:pointer;
  width:128px; height:128px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 32%, #fff5d0 0%, #ffe19a 30%, #d9b35c 60%, #8a6a1c 100%);
  border: 4px dashed #6b4d18;
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    inset 0 4px 0 rgba(255,255,255,.55),
    inset 0 -6px 14px rgba(0,0,0,.35),
    0 0 0 6px rgba(0,0,0,.18),
    0 0 0 7px rgba(217,179,92,.6),
    0 0 30px rgba(255,235,168,.35);
  color:#2a2008; font-weight:900;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative;
  animation: chipPulse 2.6s ease-in-out infinite;
  transition: transform .12s ease;
}
.play-chip:hover{ transform: scale(1.05); }
.play-chip:active{ transform: scale(.96); }
@keyframes chipPulse{ 0%,100%{ box-shadow:
    0 10px 26px rgba(0,0,0,.55), inset 0 4px 0 rgba(255,255,255,.55), inset 0 -6px 14px rgba(0,0,0,.35),
    0 0 0 6px rgba(0,0,0,.18), 0 0 0 7px rgba(217,179,92,.6),
    0 0 30px rgba(255,235,168,.3);}
  50%{ box-shadow:
    0 10px 26px rgba(0,0,0,.55), inset 0 4px 0 rgba(255,255,255,.55), inset 0 -6px 14px rgba(0,0,0,.35),
    0 0 0 6px rgba(0,0,0,.18), 0 0 0 7px rgba(217,179,92,.85),
    0 0 50px rgba(255,235,168,.65);} }
.play-chip .pc-ic{ font-size:28px; line-height:1; }
.play-chip .pc-lbl{ font-family:'Cinzel', Georgia, serif; font-size:18px; letter-spacing:3px; line-height:1.1; margin-top:2px; }
.play-chip .pc-sub{ font-size:10px; letter-spacing:1px; color:#4a3408; margin-top:2px; }
.play-chip::before{
  /* tiny notches around the chip edge, like a real casino chip */
  content:""; position:absolute; inset:-1px; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(0,0,0,.22) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%, #000 62%, transparent 63%);
          mask: radial-gradient(circle, transparent 56%, #000 57%, #000 62%, transparent 63%);
  pointer-events:none;
}

/* Seat counter sits below the table — small, ornate, not a button row */
.seat-counter{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border:1px solid rgba(217,179,92,.35);
  border-radius:999px;
  padding:6px 8px;
}
.seat-pm{
  width:32px; height:32px; border-radius:50%;
  background: radial-gradient(circle, var(--primary-l), var(--primary-d));
  border:1px solid #6b4d18; color:#2a2008; font-weight:900; font-size:18px; cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.4);
}
.seat-counter-mid b{ font-family:Georgia,serif; color:#ffe9a8; font-size:20px; }

/* FRIENDS STRIP — horizontal scroll of round avatar bubbles */
.friends-strip{
  margin: 18px 4px 8px;
  background: linear-gradient(180deg, rgba(8,30,20,.45), rgba(8,30,20,.20));
  border:1px solid rgba(217,179,92,.22);
  border-radius:16px;
  padding:10px 4px;
}
.friends-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 2px 12px 8px;
}
.friends-head .fh-label{ font-size:10px; letter-spacing:2px; color:#d9b35c; font-weight:700; }
.friends-row{
  display:flex; gap:10px; overflow-x:auto; overflow-y:hidden;
  padding: 4px 10px 8px; scrollbar-width: thin;
  scroll-snap-type: x mandatory;
}
.friends-row::-webkit-scrollbar{ height:6px; }
.friends-row::-webkit-scrollbar-thumb{ background: rgba(217,179,92,.35); border-radius:6px; }
.friend-bubble{
  appearance:none; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:4px; min-width:62px; max-width:72px;
  position:relative; scroll-snap-align: start;
  transition: transform .12s;
}
.friend-bubble:hover{ transform: translateY(-3px); }
.friend-bubble:active{ transform: scale(.94); }
.friend-bubble .fb-name{
  font-size:11px; color:#f3e9df; max-width:68px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.friend-bubble .fb-dot{
  position:absolute; top:0; right:6px; width:10px; height:10px; border-radius:50%;
  background:#3ee08a; border:2px solid #062818;
  box-shadow: 0 0 6px rgba(62,224,138,.7);
  animation: onlineDot 2s ease-in-out infinite;
}
@keyframes onlineDot{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.15);} }
.friend-bubble.add{
  border:2px dashed rgba(217,179,92,.55);
  border-radius:14px;
  background: rgba(0,0,0,.25);
  padding: 4px 6px;
}
.friend-bubble.add .fb-plus{
  width:52px; height:52px; border-radius:50%;
  background: rgba(217,179,92,.18);
  display:flex; align-items:center; justify-content:center;
  color:#ffe9a8; font-size:26px; font-weight:700;
}
.friends-empty{ padding: 10px 12px; color:#b6a3b0; flex:1; min-width:0; }
.friends-empty .big{ font-size:24px; margin-bottom:4px; }

/* Mini stats pills above the tab bar */
.mini-stats{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin: 6px 4px 76px;            /* extra bottom margin to clear the fixed tab bar */
}
.ms-pill{
  background: linear-gradient(180deg, rgba(217,179,92,.22), rgba(120,80,30,.20));
  border:1px solid rgba(217,179,92,.45);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px; color:#ffe9a8;
}
.ms-pill.ghost{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.15); color:#f3e9df; }
.ms-pill b{ color:#ffe9a8; }

/* BOTTOM TAB BAR — fixed, 5 icons, the new navigation */
.tab-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around;
  background: linear-gradient(180deg, rgba(8,30,20,.92), rgba(4,18,12,.97));
  border-top: 1px solid rgba(217,179,92,.45);
  box-shadow: 0 -8px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(217,179,92,.18);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: blur(10px);
}
.tab{
  appearance:none; background:transparent; border:none; cursor:pointer;
  flex:1; padding:6px 0; color:#b6a3b0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition: color .15s, transform .12s;
  font-size:11px; letter-spacing:.4px;
  position:relative;
}
.tab .ic{ font-size:22px; line-height:1; }
.tab:hover{ color:#ffe9a8; transform: translateY(-2px); }
.tab.active{ color:#ffe9a8; }
.tab.active::before{
  content:""; position:absolute; top:0; left:30%; right:30%; height:2px;
  background: linear-gradient(90deg, transparent, #d9b35c, transparent);
}
.tab.tab-plus .ic{
  /* the centre + tab is a small gold chip */
  width:38px; height:38px; border-radius:50%;
  background: radial-gradient(circle at 50% 30%, #fff5d0, #d9b35c 60%, #8a6a1c);
  color:#2a2008; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
  font-size:24px;
}
.tab.tab-plus{ margin-top:-12px; }

/* Bottom sheet — "Open a table" rows */
.nt-list{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.nt-row{
  appearance:none; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  padding:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.15));
  border:1px solid rgba(217,179,92,.35); border-radius:14px;
  color:#f3e9df;
  text-align:left;
  transition: transform .12s, border-color .15s;
}
.nt-row:hover{ transform: translateY(-2px); border-color: rgba(217,179,92,.7); }
.nt-row .nt-ic{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
  box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.nt-row .nt-txt{ display:flex; flex-direction:column; gap:2px; }
.nt-row .nt-txt b{ color:#ffe9a8; font-size:15px; }
.nt-row .nt-txt span{ font-size:12px; color:#b6a3b0; }

/* Phone-size tweaks so the table never overflows */
@media (max-width: 480px){
  .lobby-table{ width: 96%; }
  .ring-seat{ width:54px; }
  .ring-seat .ring-name{ font-size:9px; max-width:54px; }
  .ring-seat.empty .ring-blank{ width:32px; height:32px; font-size:16px; }
  .play-chip{ width:108px; height:108px; }
  .play-chip .pc-lbl{ font-size:16px; letter-spacing:2px; }
  .hero.compact .title{ font-size:38px; letter-spacing:4px; }
}

/* ============================================================
   TUTORIAL — spotlight tour overlay + bubble + persistent tooltips
   ============================================================ */

/* The dark overlay covers the screen; the spot uses an oversized
   box-shadow to paint the dim area, with its own rectangle clear.
   Result: a soft "spotlight" on the target. */
#tour-host{ position:fixed; inset:0; z-index:9000; pointer-events:none; }
.tour-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  animation: tourFade .25s ease-out both;
  pointer-events:auto;
}
@keyframes tourFade{ from{opacity:0;} to{opacity:1;} }
.tour-spot{
  position:fixed;
  border-radius: 14px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.55),
    0 0 0 3px rgba(217,179,92,.85),
    0 0 0 7px rgba(217,179,92,.25),
    0 0 30px rgba(255,235,168,.5);
  transition: top .35s cubic-bezier(.2,.9,.25,1.15), left .35s cubic-bezier(.2,.9,.25,1.15), width .35s cubic-bezier(.2,.9,.25,1.15), height .35s cubic-bezier(.2,.9,.25,1.15);
  pointer-events:none;
}
.tour-bubble{
  position:fixed;
  max-width: 320px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(40,80,60,.96), rgba(8,30,20,.96));
  border: 2px solid rgba(217,179,92,.7);
  border-radius: 16px;
  color: #f3e9df;
  box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,235,168,.18);
  pointer-events:auto;
  z-index: 9002;
  animation: bubbleIn .28s cubic-bezier(.2,.9,.25,1.4) both;
}
@keyframes bubbleIn{ from{ opacity:0; transform: translateY(8px) scale(.96);} to{ opacity:1; transform: translateY(0) scale(1);} }
.tour-bubble.center{
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, 92vw) !important;
  max-width: 92vw;
}
/* Arrow pointing at the spot */
.tour-bubble::before{
  content:""; position:absolute; width:14px; height:14px;
  background: inherit;
  border-left: 2px solid rgba(217,179,92,.7);
  border-top: 2px solid rgba(217,179,92,.7);
  transform: rotate(45deg);
}
.tour-bubble.above::before{ bottom: -8px; left: 50%; margin-left: -8px; transform: rotate(225deg); border-left: 2px solid rgba(217,179,92,.7); border-top: 2px solid rgba(217,179,92,.7); }
.tour-bubble.below::before{ top: -8px; left: 50%; margin-left: -8px; }
.tour-bubble.center::before{ display:none; }

.tour-bubble .tb-step{
  font-size:10px; letter-spacing:2px; color:#d9b35c;
  text-transform: uppercase; font-weight:700;
}
.tour-bubble .tb-title{
  font-family:'Cinzel', Georgia, serif;
  font-size:18px; color:#ffe9a8; margin: 4px 0 6px;
  letter-spacing: 1px;
}
.tour-bubble .tb-body{
  font-size:13.5px; line-height:1.45; color:#f3e9df;
}
.tour-bubble .tb-body b{ color:#ffe9a8; }
.tour-bubble .tb-actions{
  display:flex; align-items:center; gap:8px;
  margin-top: 12px; flex-wrap:wrap;
}
.tour-bubble .tb-actions .btn{ width:auto; flex:0 0 auto; padding: 6px 12px; font-size:12px; }
.tour-bubble .tb-actions .btn.primary{ margin-left:auto; }
.tour-bubble .tb-actions #tb-prev{ }

/* While the tour is active, prevent the body from scrolling away from the
   target. Spotlight uses fixed positioning so it stays aligned. */
body.tour-active{ overflow: hidden; }

/* ============================================================
   TOOLTIPS — single JS-positioned bubble that works on touch
   (The CSS-::after hover-only approach was unreachable on mobile.)
   ============================================================ */
.tip-bubble{
  position: fixed; z-index: 9500;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(40,80,60,.97), rgba(8,30,20,.97));
  color: #ffe9a8;
  border: 1px solid rgba(217,179,92,.65);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(4px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  max-width: 240px;
  white-space: normal;
}
.tip-bubble.show{ opacity: 1; transform: translateY(0) scale(1); }
.tip-bubble::after{
  content:""; position: absolute; left: 50%; bottom: -6px;
  margin-left: -6px; width: 0; height: 0;
  border: 6px solid transparent; border-top-color: rgba(217,179,92,.65);
}
.tip-bubble.below::after{ bottom: auto; top: -6px; border-top-color: transparent; border-bottom-color: rgba(217,179,92,.65); }

/* In-game header — Help (🎓) button */
.table-status .help-btn{
  appearance:none; background: rgba(217,179,92,.15);
  border: 1px solid rgba(217,179,92,.55);
  color: #ffe9a8; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 14px; display: inline-flex; align-items:center; justify-content:center;
  margin-left: 8px;
  transition: transform .12s, background .15s;
}
.table-status .help-btn:hover{ transform: scale(1.1); background: rgba(217,179,92,.3); }

/* The "tour the home / play" button row at the top of the Rules modal */
.rules-tour-row{ display:flex; gap:8px; margin: 8px 0 12px; flex-wrap: wrap; }
.rules-tour-row .btn{ width:auto; flex: 1 1 140px; }

/* Mobile — tooltips on the bottom edge could clip off-screen; let them
   span the chip width instead of dropping above. */
@media (max-width: 480px){
  .tour-bubble{ max-width: 92vw; }
}

/* ============================================================
   RESPONSIVE PASS — phone-first audit
   ============================================================ */

/* Default app padding is forgiving on big screens; tighten on phones. */
@media (max-width: 640px){
  #app{ padding: 12px 10px 92px; }
  /* Card hand is the most-used element — give it room to breathe */
  .pcard{ width: 102px; height: 158px; }
  .pcard .pc-name{ font-size: 11px; }
  .pcard .pc-icon{ font-size: 34px; }
  .pcard .pc-effect{ font-size: 10.5px; }
  .pcard .pc-tag{ font-size: 8.5px; }
  .pcard .pc-art{ height: 64px; }
}

/* Small phones (older iPhones, narrow Android) */
@media (max-width: 380px){
  .hero.compact .title{ font-size: 34px; letter-spacing: 3px; }
  .hero.compact .subtitle{ font-size: 10px; letter-spacing: 4px; }
  .lobby-table{ border-width: 10px; }
  .ring-seat{ width: 48px; }
  .ring-seat .ring-name{ font-size: 9px; max-width: 48px; }
  .ring-seat.empty .ring-blank{ width: 28px; height: 28px; font-size: 14px; }
  .play-chip{ width: 96px; height: 96px; }
  .play-chip .pc-lbl{ font-size: 14px; letter-spacing: 2px; }
  .play-chip .pc-sub{ font-size: 9px; }
  .friend-bubble{ min-width: 56px; max-width: 64px; }
  .stats-row{ grid-template-columns: 1fr; }   /* stack the plaques */
  .pcard{ width: 92px; height: 142px; padding: 6px; }
  .pcard .pc-name{ font-size: 10px; }
  .pcard .pc-art{ height: 56px; }
  .pcard .pc-icon{ font-size: 30px; }
  .table-card{ padding: 10px; }
  .tab .lbl{ font-size: 10px; }
  .modal{ padding: 14px; }
}

/* Touch devices — disable the card "lift on hover" so it doesn't get stuck
   on tap, and bump up minimum tap-target sizes everywhere. */
@media (hover: none){
  .pcard:hover{ transform: rotate(var(--rot,0deg)) translateY(var(--ty,0px)); z-index: var(--z,1); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
  .pcard.sel{ transform: translateY(-22px) rotate(0deg) scale(1.08); }
  .friend-bubble:hover{ transform: none; }
  .table-card:hover{ transform: none; }
  .btn:hover{ filter: none; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
  .nt-row:hover{ transform: none; }
  /* Ensure every button is at least 44×44 for thumbs */
  .btn.sm{ min-height: 38px; }
  .tab{ min-height: 48px; }
  .seat-pm{ width: 40px; height: 40px; }
}

/* Floor cards adapt to phone widths */
@media (max-width: 480px){
  .floor-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .felt-code{ font-size: 16px; }
  .seat-dot{ width: 24px; height: 24px; }
  .seat-dot.empty{ width: 12px; height: 12px; }
}

/* Game table — chips around the felt and the central piles */
@media (max-width: 480px){
  .table-status{ font-size: 12px; gap: 6px; flex-wrap: wrap; }
  .table-status .help-btn{ width: 26px; height: 26px; font-size: 12px; }
  .love-bar{ padding: 6px 10px 8px; }
  .love-bar .lb-head{ font-size: 10px; }
  .love-bar .lb-track{ height: 22px; }
  .love-bar .lb-pip{ width: 18px; height: 18px; font-size: 11px; }
  .pile{ font-size: 12px; }
  /* Tour bubbles need to fit narrow screens */
  .tour-bubble{ max-width: 88vw; padding: 12px; }
  .tour-bubble .tb-title{ font-size: 16px; }
  .tour-bubble .tb-body{ font-size: 13px; }
  .tip-bubble{ max-width: 84vw; font-size: 11.5px; }
}

/* Avoid horizontal scroll anywhere — common phone bug source */
html, body{ overflow-x: hidden; max-width: 100vw; }

/* Accessibility — kill expensive motion if the user opted out. */
@media (prefers-reduced-motion: reduce){
  .floaters{ display:none; }
  .hero .logo, .home-greeting .gi, #invite-friend, .topbar .brand .logo,
  .hero .title, .home-greeting .badge, #invite-friend::after,
  .hero .marquee .bulb, .expose-flash .expose-card, .chip .exposed,
  .ring-seat.bot, .play-chip, .friend-bubble .fb-dot, .lobby-table,
  .love-bar .lb-fill, .love-bar .lb-pip.ready, .love-bar .lb-confess{
    animation: none !important;
    transition: none !important;
  }
  .menu > *{ animation: fadeUp .25s both; animation-delay:0s !important; }
  .tour-spot{ transition: none !important; }
}