:root{
  --bg:#091018;
  --card:#121c27;
  --card2:#172332;
  --line:#243449;
  --text:#f4f8fb;
  --muted:#9aaec0;
  --accent:#6be3a4;
  --accent2:#7db3ff;
  --danger:#ff6b6b;
  --warn:#ffd166;
  --shadow: 0 12px 30px rgba(0,0,0,.28);
  --radius: 22px;
  --card-white:#fefefe;
  --card-border:#d9e2ee;
  --card-red:#d94040;
  --card-black:#18212f;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body.bg{
  margin:0;
  background: radial-gradient(1200px 700px at 50% -10%, #162238 0%, var(--bg) 48%, #06090d 100%);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.app-shell{
  width:min(100%, 760px);
  margin:0 auto;
  padding:16px 14px 30px;
}
.hero{padding:14px 4px 6px}
.hero h1{margin:8px 0 6px;font-size:34px;line-height:1.05}
.hero p, .footnote, .small-help, .msg, .meta{color:var(--muted);line-height:1.5}
.badge, .tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 12px;border-radius:999px;background:rgba(107,227,164,.13);
  color:var(--accent);font-size:12px;font-weight:700;border:1px solid rgba(107,227,164,.25)
}
.tag{background:rgba(125,179,255,.12); color:var(--accent2); border-color:rgba(125,179,255,.22)}
.card, .panel{
  background:linear-gradient(180deg, rgba(24,34,49,.97), rgba(18,26,36,.98));
  border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-top:14px;
}
.stack{display:grid; gap:10px}
.row{display:flex; align-items:center}
.between{justify-content:space-between}
.gap{gap:10px}
.wrap{flex-wrap:wrap}
.hidden{display:none !important}
input, select{
  width:100%; background:#0b1117; color:var(--text); border:1px solid #2a3950;
  border-radius:14px; padding:14px 14px; font-size:16px; outline:none;
}
input::placeholder{color:#607089}
.btn{
  appearance:none; border:none; border-radius:14px; background:#253247; color:var(--text);
  padding:13px 16px; font-weight:700; font-size:15px; cursor:pointer;
}
.btn.primary{background:linear-gradient(135deg, #67d79f, #5ea2ff); color:#0a1015}
.btn.small{padding:10px 12px; font-size:13px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:4px 0 8px}
.room-code{font-size:22px;font-weight:900;letter-spacing:1px}
.small-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.player-list{display:grid;gap:8px}
.player-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:11px 12px;
}
.player-item .left{display:flex;gap:10px;align-items:center}
.pill{
  min-width:34px;height:34px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(125,179,255,.12);color:var(--accent2);font-weight:800
}
.pill.host{background:rgba(107,227,164,.13); color:var(--accent)}
.pill.spectator{background:rgba(255,209,102,.12); color:var(--warn)}
.player-actions{display:flex;gap:8px}
.mini{font-size:12px;color:var(--muted)}
.grid2{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width: 760px){ .grid2{grid-template-columns:1fr 1fr} }
.table-zone{margin-top:14px}
.table-cards{min-height:120px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.event-feed{display:grid;gap:8px;margin:10px 0 0}
.event-pill{
  padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  color:var(--muted);font-size:13px;animation:pop .25s ease-out
}
.event-pill.reveal{border-color:rgba(255,209,102,.35);color:#ffe6a3;background:rgba(255,209,102,.08)}
.card-core, .card-chip, .hand-card{
  position:relative;
  border:1px solid var(--card-border);
  background:linear-gradient(180deg, #fff, #f5f8fc);
  color:var(--card-black);
  border-radius:18px; padding:10px 12px; min-width:72px; text-align:left; box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.card-core, .card-chip{min-height:106px; width:82px}
.hand{display:flex;gap:8px;flex-wrap:wrap;padding-top:8px}
.hand-card, .card-core{
  min-width:76px; min-height:108px; padding:10px 10px; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between;
  appearance:none; border-radius:18px; text-align:left;
}
.hand-card.playable{border-color:rgba(107,227,164,.65); box-shadow:0 0 0 1px rgba(107,227,164,.18), 0 10px 20px rgba(0,0,0,.18); transform:translateY(-1px)}
.hand-card.disabled{opacity:.38}
.hand-card.red, .card-chip.red, .card-core.red{color:var(--card-red)}
.hand-card.black, .card-chip.black, .card-core.black{color:var(--card-black)}
.card-chip .corner, .hand-card .corner, .card-core .corner{
  display:flex; justify-content:space-between; font-weight:900; font-size:16px; line-height:1;
}
.card-chip .center, .hand-card .center, .card-core .center{
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; margin:8px 0 4px;
}
.card-chip .meta, .hand-card .meta, .card-core .meta{font-size:10px; color:#6f7f90; font-weight:700; text-align:center}
.card-chip.winner{animation:winnerPulse 3s ease-in-out}
.card-core{border:1px solid var(--card-border); background:linear-gradient(180deg, #fff, #f5f8fc); color:var(--card-black)}
.card-core.playable{border-color:rgba(107,227,164,.65); box-shadow:0 0 0 1px rgba(107,227,164,.18), 0 10px 20px rgba(0,0,0,.18); transform:translateY(-1px)}
.card-core.disabled{opacity:.38}
.card-core.winner{animation:winnerPulse 3s ease-in-out}
@keyframes winnerPulse{
  0%{transform:scale(1)} 20%{transform:scale(1.06)} 50%{transform:scale(1.02)} 100%{transform:scale(1)}
}
.score-board{display:grid;gap:8px}
.score-item{
  display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05)
}
.score-item.lead{border-color:rgba(107,227,164,.4)}
.score-item.team{border-color:rgba(125,179,255,.4)}
.score-item.reveal{animation:revealGlow .9s ease-out}
@keyframes revealGlow{
  0%{transform:translateY(0); box-shadow:none}
  35%{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,209,102,.18), 0 0 20px rgba(255,209,102,.12)}
  100%{transform:translateY(0); box-shadow:none}
}
.result-box{
  margin-top:14px; padding:14px; border-radius:20px; background:linear-gradient(135deg, rgba(107,227,164,.14), rgba(125,179,255,.15));
  border:1px solid rgba(255,255,255,.08); animation: pop .35s ease-out;
}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}}
.flash{animation: flash 3s ease-in-out}
@keyframes flash{0%{transform:scale(1)}20%{transform:scale(1.03)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
.mini-title{font-weight:800;color:#dbe6f0}
.row.gap.wrap input{flex:1 1 180px}

.card-core{border:none; width:76px}
.card-core:disabled{cursor:not-allowed}