/* CORDONS © Adonis — capa P26 (tokens, glass, motion, a11y). Hybrid mood: verde menta + ámbar (P44). */
:root {
  --bg-0: #07090e; --bg-1: #0c1018; --bg-2: #11161f;
  --glass: rgba(18, 24, 36, .72); --glass-brd: rgba(120, 160, 255, .14);
  --tx: #e8eefc; --tx-dim: #93a0b8; --tx-faint: #5a6a80;
  --accent: #58e6b0; --accent-2: #ffb35c;  /* híbrido P44 */
  --accent-deep: #1d8a63; --accent2-deep: #b3651a;
  --danger: #ff6b6b; --gold: #ffd700;
  --r-s: 10px; --r-m: 16px; --r-l: 24px;
  --t-fast: 140ms; --t-med: 280ms; --t-slow: 520ms;
  --e-out: cubic-bezier(.22,1,.36,1); --e-spring: cubic-bezier(.34,1.56,.64,1);
  --shadow-1: 0 2px 10px rgba(0,0,0,.35); --shadow-2: 0 10px 40px rgba(0,0,0,.5);
  --glow-a: 0 0 24px rgba(88,230,176,.25);
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  background: radial-gradient(1200px 800px at 70% -10%, #10233b 0%, var(--bg-0) 60%) fixed, var(--bg-0);
  color:var(--tx); font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow:hidden; -webkit-tap-highlight-color: transparent;
}
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- pantallas ---------- */
.screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto; }
.card {
  width:min(520px, 94vw); background:var(--glass); backdrop-filter:blur(18px);
  border:1px solid var(--glass-brd); border-radius:var(--r-l); box-shadow:var(--shadow-2);
  padding:28px; animation:pop var(--t-med) var(--e-spring);
}
@keyframes pop { from { opacity:0; transform:scale(.94) translateY(8px);} to { opacity:1; transform:none; } }
.card h1 { font-size:26px; letter-spacing:.5px; margin-bottom:4px; }
.card h1 .usdc { color:var(--accent); }
.card .sub { color:var(--tx-dim); font-size:13px; margin-bottom:20px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; color:var(--tx-dim); margin-bottom:6px; letter-spacing:.4px; }
.field input {
  width:100%; padding:12px 14px; border-radius:var(--r-s); border:1px solid var(--glass-brd);
  background:rgba(0,0,0,.3); color:var(--tx); font-size:15px; transition:border var(--t-fast) var(--e-out);
}
.field input:focus { border-color:var(--accent); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 18px; border-radius:var(--r-s); font-weight:700; letter-spacing:.3px;
  background:linear-gradient(135deg, var(--accent-deep), var(--accent)); color:#04140c;
  transition:transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast) var(--e-out), filter var(--t-fast);
  box-shadow:var(--glow-a);
}
.btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.btn:active { transform:translateY(0) scale(.98); }
.btn.alt { background:linear-gradient(135deg, var(--accent2-deep), var(--accent-2)); color:#1a0e02; box-shadow:0 0 24px rgba(255,179,92,.22); }
.btn.ghost { background:transparent; border:1px solid var(--glass-brd); color:var(--tx-dim); box-shadow:none; }
.btn.ghost:hover { color:var(--tx); border-color:var(--accent); }
.err { color:var(--danger); font-size:13px; min-height:18px; margin:8px 0; }
.tabs { display:flex; gap:8px; margin-bottom:18px; }
.tabs button {
  flex:1; padding:10px; border-radius:var(--r-s); color:var(--tx-dim); font-weight:600;
  border:1px solid transparent; transition:all var(--t-fast) var(--e-out);
}
.tabs button.on { color:var(--tx); background:rgba(88,230,176,.08); border-color:var(--glass-brd); }

/* ---------- lobby ---------- */
#lobby { align-items:stretch; justify-content:stretch; padding:0; }
.lobby-wrap { max-width:1080px; margin:0 auto; padding:26px 18px 60px; width:100%; overflow:auto; }
.lobby-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.lobby-head h1 { font-size:22px; }
.balchip {
  padding:8px 16px; border-radius:999px; background:rgba(88,230,176,.1); border:1px solid rgba(88,230,176,.35);
  font-weight:800; color:var(--accent); box-shadow:var(--glow-a); font-variant-numeric:tabular-nums;
}
.rooms { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.room {
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-m); padding:18px;
  cursor:pointer; transition:transform var(--t-fast) var(--e-spring), border var(--t-fast), box-shadow var(--t-fast);
  position:relative; overflow:hidden;
}
.room:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-1), var(--glow-a); }
.room .rn { font-size:15px; font-weight:800; display:flex; align-items:center; gap:10px; }
.room .rn::before {
  content:attr(data-tier); display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:10px; background:rgba(88,230,176,.12); color:var(--accent); font-weight:900; font-size:14px;
}
.room.t-mid .rn::before { background:rgba(255,179,92,.1); color:var(--accent-2); }
.room.t-max .rn::before { background:rgba(255,215,0,.1); color:var(--gold); }
.room .rstake { color:var(--tx-dim); font-size:12.5px; margin-top:8px; font-variant-numeric:tabular-nums; }
.room .rmeta { display:flex; gap:14px; margin-top:12px; font-size:12px; color:var(--tx-dim); }
.room .rmeta b { color:var(--tx); font-variant-numeric:tabular-nums; }
.room .potlive { position:absolute; top:14px; right:14px; font-size:11.5px; color:var(--accent-2); font-weight:700; }
.lobby-note { margin-top:22px; color:var(--tx-dim); font-size:12.5px; line-height:1.7; }
.lobby-note b { color:var(--tx); }

/* ---------- juego ---------- */
#game { display:none; position:fixed; inset:0; }
#cv { position:absolute; inset:0; width:100%; height:100%; display:block; background:var(--bg-0); cursor:crosshair; }
.hud { position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; gap:10px; pointer-events:none; flex-wrap:wrap; }
.hudchip {
  pointer-events:auto; background:var(--glass); border:1px solid var(--glass-brd); backdrop-filter:blur(10px);
  border-radius:12px; padding:8px 14px; font-size:13px; font-variant-numeric:tabular-nums;
}
.hudchip b { color:var(--accent); }
.hudchip.gold b { color:var(--accent-2); }
#potchip b { color:var(--accent-2); }
.winbar { position:absolute; left:50%; top:14px; transform:translateX(-50%); width:min(420px,70vw); height:8px;
  border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; opacity:0; transition:opacity var(--t-med) var(--e-out); }
.winbar.on { opacity:1; }
.winbar i { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width 120ms linear; }
.toast {
  position:absolute; left:50%; bottom:86px; transform:translateX(-50%);
  background:var(--glass); border:1px solid var(--glass-brd); backdrop-filter:blur(12px);
  padding:12px 22px; border-radius:999px; font-weight:700; box-shadow:var(--shadow-1);
  animation:toastin var(--t-med) var(--e-spring); white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis;
}
.toast.win { border-color:var(--gold); color:var(--gold); box-shadow:0 0 30px rgba(255,215,0,.25); }
.toast.bad { border-color:var(--danger); color:var(--danger); }
@keyframes toastin { from { opacity:0; transform:translateX(-50%) translateY(14px) scale(.9);} to { opacity:1; transform:translateX(-50%);} }
.deathbox {
  position:absolute; inset:0; display:none; place-items:center; background:rgba(4,6,10,.72); backdrop-filter:blur(6px);
  z-index:5;
}
.deathbox.on { display:grid; }
.deathbox .inner { text-align:center; animation:pop var(--t-med) var(--e-spring); }
.deathbox h2 { color:var(--danger); font-size:24px; margin-bottom:8px; }
.deathbox p { color:var(--tx-dim); margin-bottom:18px; max-width:340px; }
.btnrow { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btnrow .btn { width:auto; min-width:170px; }

/* overlay protegido */
#protbadge {
  position:absolute; top:64px; left:50%; transform:translateX(-50%);
  padding:8px 18px; border-radius:999px; font-weight:800; font-size:13px; letter-spacing:.5px;
  background:rgba(255,215,0,.12); border:1px solid var(--gold); color:var(--gold);
  box-shadow:0 0 26px rgba(255,215,0,.3); display:none;
}
#protbadge.on { display:block; animation:pop var(--t-med) var(--e-spring); }

/* modal billetera */
.wallet { position:fixed; inset:0; display:none; place-items:center; background:rgba(4,6,10,.6); z-index:20; padding:18px; }
.wallet.on { display:grid; }
.wallet .card { max-height:86vh; overflow:auto; }
.wallet h2 { font-size:20px; margin-bottom:4px; }
.wallet .dim { color:var(--tx-dim); font-size:12.5px; }
.paybox {
  background:rgba(0,0,0,.35); border:1px dashed var(--glass-brd); border-radius:var(--r-s);
  padding:14px; margin:12px 0; font-size:13px; line-height:1.7; word-break:break-all;
}
.paybox b { color:var(--accent); }
.payid { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.payid span {
  background:rgba(88,230,176,.08); border:1px solid rgba(88,230,176,.3); color:var(--accent);
  padding:8px 12px; border-radius:8px; font-weight:800; font-variant-numeric:tabular-nums;
}
.hist { margin-top:14px; font-size:12px; }
.hist .hrow { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.hist .pos { color:var(--accent); } .hist .neg { color:var(--danger); }
.hist .k { color:var(--tx-faint, #5a6a80); font-size:11px; }

.kbd-hint { color:var(--tx-faint,#5a6a80); font-size:11.5px; margin-top:14px; text-align:center; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media (max-width: 480px) {
  .card { padding:20px; }
  .lobby-wrap { padding:18px 12px 40px; }
  .rooms { grid-template-columns:1fr 1fr; gap:10px; }
  .room { padding:14px; }
  .hudchip { font-size:11.5px; padding:6px 10px; }
}
@media (max-width: 360px) { .rooms { grid-template-columns:1fr; } }