:root{
  --bg:#121212; --panel:#1c1c1e; --panel-2:#222326; --text:#e9eaee; --muted:#9aa0a6; --line:#2b2c30;
  --primary:#2d77ff; --primary-600:#2367df; --warn:#ff7a2b; --warn-600:#e5691d; --success:#2ecc71;
  --pill:#2a2b2f; --radius-xl:18px; --radius-lg:14px; --shadow-1:0 6px 24px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.5);
  --shadow-card:0 6px 14px rgba(0,0,0,.45); --gap:16px;
}

*{box-sizing:border-box} html,body{height:100%}
body.lc{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.4 'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* header */
.lc-header{display:grid;grid-template-columns:1fr minmax(240px,520px) 1fr;align-items:center;gap:clamp(8px,2vw,20px);padding:14px clamp(12px,3vw,28px);background:#18181a;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.lc-header__left,.lc-header__right{display:flex;align-items:center;gap:10px}
.lc-header__center{display:flex;justify-content:center}
.notes{width:100%;max-width:520px;height:38px;padding:0 16px;border-radius:100px;border:1px solid #33363b;background:#1d1e21;color:var(--muted);outline:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.02)}

/* layout */
.lc-main{padding:20px clamp(12px,3vw,28px) 28px;display:grid;gap:var(--gap);grid-template-columns:280px 1fr 260px;grid-template-areas:"players discard draw" "hand hand hand"}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);padding:14px;box-shadow:var(--shadow-1);min-height:140px}
.panel__title{font-weight:600;color:#cfd3da;margin:2px 4px 12px;display:flex;align-items:center;justify-content:space-between}
.panel--players{grid-area:players} .panel--discard{grid-area:discard;display:flex;flex-direction:column}
.panel--draw{grid-area:draw;display:flex;align-items:center;justify-content:center}
.panel--hand{grid-area:hand;padding:18px}
.panel--hand.is-your-turn{outline:3px solid #33d17a;box-shadow:0 0 0 3px rgba(51,209,122,.25),var(--shadow-1)}

/* players */
.players{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.player{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:96px;padding:8px 12px;border-radius:999px;background:#2a2b2f;color:#d9dde6;font-weight:600;border:1px solid #33363b}
.player.is-active .pill{background:#16396f;border-color:#2356a8;color:#e7efff;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.player.is-waiting .pill{opacity:.6}
.dot{width:10px;height:10px;border-radius:50%;background:#6b7280;display:inline-block}
.dot--green{background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.2)}

/* lobby + countdown */
.lobby-line{margin-top:12px}
.copy-btn{display:inline-flex;align-items:center;gap:8px;background:#232427;color:#e1e6f0;border:1px solid #33363b;border-radius:999px;padding:8px 12px;cursor:pointer}
.copy-btn:hover{filter:brightness(1.05)} .copy-btn svg{width:16px;height:16px;opacity:.9}
.copy-btn.copied{box-shadow:inset 0 0 0 2px rgba(45,119,255,.35)}
.lobby-code{font-size:.95rem}
.pregame{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:#27282b;border:1px solid #33363b;border-radius:999px;padding:6px 10px;color:#eaeef7}

/* current pile */
.discard{position:relative;display:flex;align-items:center;justify-content:center;min-height:220px;border:1px dashed #2b2c30;border-radius:var(--radius-lg);background:var(--panel-2);overflow:hidden}
.card--stack{position:absolute;left:50%;top:50%;width:160px;height:auto;transform:translate(-50%,-50%) rotate(-4deg);filter:drop-shadow(var(--shadow-card))}
.stack-b1{transform:translate(calc(-50% - 8px),calc(-50% - 12px)) rotate(-12deg);opacity:.9}
.stack-b2{transform:translate(calc(-50% + 10px),calc(-50% - 16px)) rotate(-18deg);opacity:.8}
.stack-b3{transform:translate(calc(-50% - 14px),calc(-50% + 8px)) rotate(-24deg);opacity:.7}
.stack-b4{transform:translate(calc(-50% + 16px),calc(-50% + 12px)) rotate(-30deg);opacity:.6}
.forced-suit{margin-top:10px;padding:6px 10px;border-radius:8px;background:#27282b;border:1px solid #33363b;color:#eaeef7}
.hidden{display:none}

/* draw area */
.draw-area{display:flex;flex-direction:column;align-items:center;gap:14px}
.card--deck{width:150px;height:auto;filter:drop-shadow(var(--shadow-card));user-select:none}
.pickup{display:flex;align-items:center;gap:10px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:#213a6d;color:#eaf1ff;font-weight:700;border:1px solid #2a4c94}

/* hand */
.hand{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:14px 16px;padding:12px;background:#17181a;border-radius:var(--radius-lg);border:1px solid #2b2c30;min-height:160px}
.card-btn{background:transparent;border:none;padding:0;cursor:pointer}
.card{width:120px;max-width:100%;height:auto;border-radius:12px;filter:drop-shadow(var(--shadow-card));transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.card-btn:hover .card{transform:translateY(-4px);filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}

/* buttons + timer */
.btn{border:none;cursor:pointer;user-select:none;padding:10px 16px;border-radius:999px;font-weight:700;color:#e8ecf6;background:#2b2f36;border:1px solid #3a3d44}
.btn:hover{filter:brightness(1.06)} .btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.btn-pill{background:#2f3238} .btn-ghost{background:transparent;border:1px solid #3a3d44}
.btn-primary{background:var(--primary);border-color:var(--primary-600)} .btn-warn{background:var(--warn);border-color:var(--warn-600)}
.btn-inline-pick{margin-right:10px}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid #3a3d44;background:#232427;color:#cdd2dd;font-weight:700;cursor:pointer}
.timer{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:84px;padding:0 12px;margin-left:10px;border-radius:14px;background:#2a2b2f;color:#d8dde7;font-weight:700;border:1px solid #3a3d44}

/* modals */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);z-index:50}
.modal__box{width:min(640px,92vw);background:#1b1c1f;border:1px solid #32343a;border-radius:16px;padding:18px;box-shadow:var(--shadow-1)}
.modal__box h3{margin:6px 0 14px} .modal__close{margin-top:12px}
.suits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.suit{border:none;border-radius:12px;padding:12px 14px;cursor:pointer;font-weight:700;background:#27292d;color:#e8ecf6;border:1px solid #34363c}
.suit--hearts,.suit--diamonds{color:#ec6a5d} .suit--clubs,.suit--spades{color:#dfe3ec}
.modal[hidden]{display:none !important}
.help-body{color:#d7dbe5;line-height:1.45}

/* placement modal bits */
.placement-body{display:grid;place-items:center;gap:8px}
.placement-rank{font-size:48px;font-weight:800;letter-spacing:.5px}

/* footer */
.lc-footer{padding:12px 22px 24px;color:var(--muted)} .statusline{display:flex;justify-content:space-between;font-size:.92rem}

/* responsive */
@media (max-width:1120px){
  .lc-main{grid-template-columns:1fr 1fr;grid-template-areas:"players draw" "discard discard" "hand hand"}
}
@media (max-width:760px){
  .lc-header{grid-template-columns:1fr 1fr auto}
  .lc-main{grid-template-columns:1fr;grid-template-areas:"players" "draw" "discard" "hand"}
  .hand{grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
  .card{width:100px} .card--deck{width:120px}
}