/* ============ FASTCARD — casino felt theme ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --navy:#081527; --navy2:#0c2038; --panel:#0d1f38; --line:#1d3b5f;
  --gold:#f5b32b; --gold2:#ffd761; --gold-deep:#a86f0a;
  --cyan:#22b8f0; --cyan-deep:#0a5e8a;
  --green:#2fe07a; --red:#ff3b5c;
  --text:#eaf2fb; --muted:#8fa8c4;
}
html,body{ height:100%; }
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:#03080f; color:var(--text); overflow:hidden;
  user-select:none; -webkit-user-select:none;
}

/* felt background + vignette */
#felt{ position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(38,120,190,.35), transparent 55%),
    radial-gradient(90% 60% at 50% 45%, #123a63 0%, #0b2440 45%, #050f1d 100%);
}
#felt::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(75% 55% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%);
}
#felt::after{ content:''; position:absolute; left:50%; top:16%; width:130vmin; height:130vmin;
  transform:translateX(-50%); border-radius:50%;
  border:2vmin solid rgba(245,179,43,.10); box-shadow:0 0 8vmin rgba(245,179,43,.06) inset;
  pointer-events:none;
}

#app{ position:relative; z-index:1; height:100%; max-width:500px; margin:0 auto;
  display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,.6); }

.hidden{ display:none !important; }
.muted{ color:var(--muted); font-size:12px; }
.screen{ position:absolute; inset:0; display:flex; flex-direction:column; }

/* ============ logo ============ */
.logo{ display:flex; align-items:center; gap:8px; font-style:italic; font-weight:900; letter-spacing:1px; }
.logo .spade{ position:relative; color:#0a1424; background:linear-gradient(160deg,#3d6bd8,#12264f 70%);
  border:2px solid var(--gold); border-radius:50%; width:54px; height:54px;
  display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--gold2);
  text-shadow:0 0 10px rgba(245,179,43,.8); font-style:normal; flex:0 0 auto; }
.logo .crown{ position:absolute; top:-16px; right:-10px; font-size:18px; transform:rotate(15deg); }
.logo .word{ font-size:34px; color:#fff; text-shadow:0 2px 0 #123,0 0 18px rgba(60,140,255,.5); }
.logo .word em{ font-style:italic; color:var(--gold); text-shadow:0 2px 0 var(--gold-deep),0 0 16px rgba(245,179,43,.55); }
.logo.small .word{ font-size:26px; } .logo.small .spade{ width:42px;height:42px;font-size:22px; }
.logo.xs .word{ font-size:19px; } .logo.xs .spade{ width:32px;height:32px;font-size:17px; }
.logo.xs .crown{ top:-11px; right:-7px; font-size:12px; }
.tagline{ color:var(--muted); letter-spacing:3px; font-size:11px; font-weight:600; }

/* ============ start / lobby ============ */
#startScreen,#lobbyScreen{ align-items:center; justify-content:center; padding:24px; }
.start-box{ width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; gap:14px;
  background:rgba(8,20,38,.82); border:1px solid var(--line); border-radius:22px; padding:30px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(34,184,240,.06) inset; }
.lobby-title{ font-size:18px; color:var(--gold2); }
#nameInput{ width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--line);
  background:#0a1830; color:var(--text); font-size:16px; text-align:center; outline:none; }
#nameInput:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,179,43,.15); }
.btn{ width:100%; padding:13px; border-radius:12px; border:none; font-size:16px; font-weight:800;
  cursor:pointer; letter-spacing:.5px; transition:transform .08s; }
.btn:active{ transform:scale(.97); }
.btn.gold{ background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,#d18d13); color:#241600;
  box-shadow:0 4px 0 var(--gold-deep),0 8px 20px rgba(245,179,43,.3); }
.btn.outline{ background:transparent; color:var(--gold2); border:2px solid var(--gold); }
.btn.dark{ background:#12263f; color:var(--text); border:1px solid var(--line); }
.btn.sm{ width:auto; padding:9px 16px; font-size:14px; }
.error{ color:var(--red); min-height:18px; font-size:13px; }
.lobby-list{ list-style:none; width:100%; max-height:260px; overflow-y:auto; }
.lobby-list li{ padding:9px 12px; border-bottom:1px solid var(--line); font-weight:600; }
.countdown{ color:var(--gold2); font-weight:700; }

/* ============ header ============ */
#topbar{ display:flex; align-items:center; gap:7px; padding:10px 10px 6px; }
#topbar .logo{ margin-right:auto; }
.icon-btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:rgba(13,31,56,.85); color:var(--text); font-size:20px; cursor:pointer; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; line-height:1; }
.hdr-pill{ display:flex; align-items:center; gap:6px; background:rgba(13,31,56,.9); border:1px solid var(--line);
  border-radius:20px; padding:7px 11px; color:var(--text); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.hdr-pill .chev{ color:var(--muted); font-size:10px; }
.timer-pill{ cursor:default; border-color:rgba(47,224,122,.45); }
.timer-pill .stopwatch{ color:var(--green); font-size:16px; }
.timer-pill .tcol{ display:flex; flex-direction:column; line-height:1.05; }
.timer-pill b{ font-size:15px; }
.timer-pill i{ font-style:normal; color:var(--green); font-size:9px; font-weight:700; }

/* ============ table ============ */
#table{ flex:1; display:flex; flex-direction:column; padding:2px 8px; min-height:0; }
.piles-row{ position:relative; display:flex; justify-content:center; gap:34px; padding-top:26px; }
.pile-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; width:118px; }

.top-pill{ min-width:62px; text-align:center; padding:4px 12px; border-radius:14px; font-weight:900; font-size:17px;
  background:#0b1c33; border:1px solid var(--line); visibility:hidden; }
.pile-wrap.cyan .top-pill{ color:#bfeaff; border-color:var(--cyan); box-shadow:0 0 14px rgba(34,184,240,.55); visibility:visible; }
.pile-wrap.gold .top-pill{ color:var(--gold2); border-color:var(--gold); box-shadow:0 0 14px rgba(245,179,43,.55); visibility:visible; }

.pedestal{ padding:9px; border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.35)); }
.pile-wrap.cyan .pedestal{ box-shadow:0 0 26px 4px rgba(34,184,240,.55),0 14px 30px rgba(0,0,0,.5),0 0 0 2px rgba(34,184,240,.5); }
.pile-wrap.gold .pedestal{ box-shadow:0 0 26px 4px rgba(245,179,43,.55),0 14px 30px rgba(0,0,0,.5),0 0 0 2px rgba(245,179,43,.5); }
.pile{ width:96px; height:138px; }

/* playing card */
.card{ position:relative; background:linear-gradient(180deg,#ffffff,#eef1f5); border-radius:10px;
  box-shadow:0 3px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.15);
  color:#141b26; font-weight:800; }
.card.red{ color:#e01f3d; }
.pile .card{ width:96px; height:138px; }
.corner{ position:absolute; text-align:center; line-height:.95; font-size:15px; }
.corner.tl{ top:5px; left:6px; }
.corner.br{ bottom:5px; right:6px; transform:rotate(180deg); }
.corner .s{ display:block; font-size:13px; }
.pip-grid{ position:absolute; inset:20px 14px; display:grid; grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(4,1fr); align-items:center; justify-items:center; font-size:17px; }
.pip-grid .flip{ transform:rotate(180deg); }
.pip-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:52px; }
.face-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:40px; font-weight:900; flex-direction:column; }
.face-label .s{ font-size:26px; }

/* target pills under piles */
.targets{ display:flex; align-items:center; gap:5px; background:rgba(6,14,26,.85);
  border:1px solid var(--line); border-radius:20px; padding:4px 8px; font-size:13px; font-weight:800; }
.targets .mid{ color:var(--muted); font-size:11px; letter-spacing:1px; }
.targets .t-pill{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.pile-wrap.cyan .t-pill{ background:radial-gradient(circle at 35% 30%,#8ff5c4,#1fbf66); color:#04230f; box-shadow:0 0 8px rgba(47,224,122,.7); }
.pile-wrap.gold .t-pill{ background:radial-gradient(circle at 35% 30%,#ffe79a,#e8a417); color:#2a1a00; box-shadow:0 0 8px rgba(245,179,43,.7); }

/* deck widget */
#deckCard{ position:absolute; right:0; top:44px; width:74px; padding:10px 6px 8px; text-align:center;
  background:rgba(13,31,56,.9); border:1px solid var(--line); border-radius:16px; }
.deck-stack{ position:relative; height:40px; margin-bottom:4px; }
.deck-stack i{ position:absolute; left:50%; top:4px; width:26px; height:34px; border-radius:5px;
  background:linear-gradient(160deg,#3d6bd8,#16294d); border:1.5px solid #6f9be0; }
.deck-stack i:nth-child(1){ transform:translateX(-90%) rotate(-12deg); }
.deck-stack i:nth-child(2){ transform:translateX(-70%) rotate(-4deg); }
.deck-stack i:nth-child(3){ transform:translateX(-45%) rotate(4deg); }
.deck-stack i:nth-child(4){ transform:translateX(-25%) rotate(12deg); }
.deck-label{ font-size:11px; color:var(--muted); font-weight:700; }
.deck-num{ font-size:22px; font-weight:900; }
.deck-sub{ font-size:10px; color:var(--muted); }

/* rules button */
#btnRules{ position:absolute; left:0; top:44px; width:64px; padding:10px 4px; border-radius:16px;
  background:rgba(13,31,56,.9); border:1px solid var(--line); color:var(--text);
  font-size:12px; font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; }
.rules-ico{ font-size:20px; color:var(--gold2); }

#lastMove{ min-height:18px; text-align:center; font-size:12px; color:var(--muted); margin-top:6px; }

#hintBar{ margin:4px auto 0; text-align:center; font-size:12.5px; color:var(--text);
  background:rgba(8,18,34,.75); border:1px solid var(--line); border-radius:18px; padding:8px 14px; max-width:94%; }
#hintBar .hi{ color:var(--gold2); } #hintBar .lo{ color:var(--cyan); }

/* stuck banner */
#stuckBanner{ display:flex; align-items:center; gap:10px; margin:8px 4px 0; padding:10px 12px;
  background:rgba(10,20,38,.92); border:1px solid var(--line); border-radius:16px; }
.stuck-ico{ font-size:26px; color:var(--gold2); }
.stuck-body{ flex:1; }
.stuck-title{ font-weight:800; font-size:13.5px; }
.stuck-sub{ font-size:11px; color:var(--muted); margin-bottom:5px; }
.bar{ height:7px; border-radius:4px; background:#1a2c47; overflow:hidden; }
#stuckFill{ height:100%; width:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); border-radius:4px; }
.stuck-time{ font-size:17px; font-weight:900; color:var(--gold2); white-space:nowrap; }

/* ============ me + hand ============ */
#meZone{ padding:8px 10px 0; }
#meBar{ display:flex; align-items:center; gap:9px; position:relative; }
.avatar{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:20px; flex:0 0 auto; }
.avatar.gold{ background:radial-gradient(circle at 35% 30%,#ffe79a,var(--gold) 65%); color:#241600;
  box-shadow:0 0 12px rgba(245,179,43,.6); border:2px solid #ffe79a; }
.me-info{ display:flex; flex-direction:column; line-height:1.15; }
.me-info b{ font-size:15px; }
.online-dot{ position:absolute; left:32px; top:32px; width:11px; height:11px; border-radius:50%;
  background:var(--green); box-shadow:0 0 8px var(--green); border:2px solid #06121f; }

#hand{ display:flex; justify-content:center; margin-top:8px; min-height:104px; padding:4px 0 2px; }
#hand .card{ width:56px; height:82px; border-radius:8px; margin-left:-14px; cursor:default;
  transition:transform .12s, box-shadow .12s; }
#hand .card:first-child{ margin-left:0; }
#hand .card .corner{ font-size:12px; } #hand .card .corner .s{ font-size:10px; }
#hand .card .corner.tl{ top:3px; left:4px; } #hand .card .corner.br{ bottom:3px; right:4px; }
#hand .card .pip-grid{ inset:16px 9px; font-size:11px; }
#hand .card .pip-center{ font-size:26px; }
#hand .card .face-label{ font-size:22px; } #hand .card .face-label .s{ font-size:15px; }
#hand .card.playable{ cursor:pointer; box-shadow:0 0 12px 2px rgba(47,224,122,.85),0 3px 8px rgba(0,0,0,.45);
  border:1.5px solid var(--green); transform:translateY(-6px); }
#hand .card.playable:hover{ transform:translateY(-12px); }
#hand .card.dim{ filter:brightness(.55) saturate(.6); cursor:pointer; }
#hand.frozen .card{ filter:grayscale(.7) brightness(.6); cursor:not-allowed; transform:none; }

/* ============ bottom bar ============ */
#bottomBar{ display:flex; align-items:center; gap:10px; padding:8px 12px calc(10px + env(safe-area-inset-bottom)); }
.fab{ display:flex; flex-direction:column; align-items:center; gap:1px; border:1px solid var(--line);
  background:rgba(13,31,56,.9); color:var(--text); border-radius:14px; padding:8px 10px;
  font-size:11px; font-weight:700; cursor:pointer; }
.fab .chat-ico{ font-size:19px; }
#statusPill{ flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg,#20395c,#13263f); border:1px solid var(--line);
  border-radius:26px; padding:13px 10px; font-weight:700; font-size:14px; color:#cfe0f2; }
.tap-ico{ font-size:18px; }
#freezeBadge{ display:flex; align-items:center; gap:8px; background:linear-gradient(180deg,#ff5d78,#e0123a);
  border:1px solid #ff8ba0; border-radius:16px; padding:9px 13px;
  box-shadow:0 0 18px rgba(255,59,92,.55); }
#freezeBadge .snow{ font-size:24px; }
.fz-txt{ display:flex; flex-direction:column; line-height:1.15; }
.fz-txt b{ font-size:12.5px; } .fz-txt i{ font-style:normal; font-size:11px; opacity:.9; }

/* ============ drawers ============ */
#scrim{ position:fixed; inset:0; background:rgba(2,6,12,.5); z-index:20; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(330px,86vw); z-index:21;
  background:rgba(9,19,36,.97); border-left:1px solid var(--line); box-shadow:-18px 0 50px rgba(0,0,0,.6);
  display:flex; flex-direction:column; animation:slideIn .18s ease-out; }
@keyframes slideIn{ from{ transform:translateX(40px); opacity:.4; } }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px;
  font-size:17px; font-weight:800; border-bottom:1px solid var(--line); }
.x{ background:none; border:none; color:var(--muted); font-size:17px; cursor:pointer; }
#playersList{ list-style:none; flex:1; overflow-y:auto; padding:6px 10px; }
#playersList li{ display:flex; align-items:center; gap:10px; padding:10px 6px; border-bottom:1px solid rgba(29,59,95,.5); }
.rank-badge{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; flex:0 0 auto; color:#0b1524; background:#22344f; color:#93a9c6; }
.rank-badge.r1{ background:radial-gradient(circle at 35% 30%,#ffe79a,#d99a12); color:#241600; }
.rank-badge.r2{ background:radial-gradient(circle at 35% 30%,#f2f6fb,#9fb2c8); color:#1c2733; }
.rank-badge.r3{ background:radial-gradient(circle at 35% 30%,#f0b183,#a35a1f); color:#2a1200; }
.p-avatar{ position:relative; width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#3ec6a0,#0f6e56); color:#eafff6;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:17px; }
.p-avatar .od{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  background:var(--green); border:2px solid #09131f; box-shadow:0 0 6px var(--green); }
.p-avatar .od.off{ background:#5b6b7d; box-shadow:none; }
.p-name{ flex:1; font-weight:600; font-size:14.5px; }
.p-cards{ font-size:13px; color:var(--muted); font-weight:700; }
.p-cards.lead{ color:var(--green); }
.view-all{ margin:12px; padding:13px; border-radius:14px; border:1px solid var(--line);
  background:#12263f; color:var(--text); font-weight:700; font-size:14px; cursor:pointer;
  display:flex; justify-content:center; gap:6px; }

/* chat */
#chatMsgs{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:7px; }
#chatMsgs .msg{ background:#12263f; border:1px solid var(--line); border-radius:10px; padding:7px 10px; font-size:13.5px; }
#chatMsgs .msg b{ color:var(--gold2); }
.chat-input-row{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); }
#chatInput{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:#0a1830; color:var(--text); outline:none; }

/* ============ modals ============ */
.modal{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,12,.72); backdrop-filter:blur(3px); }
.modal-card{ width:min(350px,90vw); background:linear-gradient(180deg,#10253f,#0a1729);
  border:1px solid var(--line); border-radius:20px; padding:24px 20px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 40px rgba(245,179,43,.08); }
.modal-card h3{ font-size:20px; margin-bottom:12px; color:#fff; }
.modal-card h3 em{ color:var(--gold); font-style:italic; }
.rules-list{ list-style:none; text-align:left; display:flex; flex-direction:column; gap:9px;
  font-size:13.5px; color:#c9d9ec; margin-bottom:18px; }
.rules-list b{ color:var(--gold2); }
.modal-card.winner .trophy{ font-size:52px; filter:drop-shadow(0 0 18px rgba(245,179,43,.8)); }
#winnerText{ margin:8px 0 4px; color:var(--gold2); text-shadow:0 0 20px rgba(245,179,43,.5); }
#winnerReason{ color:var(--muted); font-size:13px; margin-bottom:16px; }

@media (min-width:520px){
  #hand .card{ width:62px; height:90px; }
  .pile{ width:104px; height:150px; }
  .pile .card{ width:104px; height:150px; }
}