/* ══════════ Nombres Clave · estilos ══════════ */
:root{
  --bg:#0d1418; --bg-2:#121c21; --ink:#eef3f2; --muted:#8ea3a8;
  --cream:#e9dcbe; --cream-2:#d9c8a3; --line:rgba(255,255,255,.09);
  --red:#d4462f; --red-d:#8f2b1c; --red-l:#ff7a5e;
  --blue:#2f74d4; --blue-d:#1b4485; --blue-l:#6fa8ff;
  --neutral:#c3ae83; --neutral-d:#8e7c58;
  --black:#14161a;
  --shadow:0 12px 30px rgba(0,0,0,.45);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(1100px 700px at 15% -10%, #1c3038 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #2a1a1f 0%, transparent 55%),
    var(--bg);
  min-height:100vh; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; z-index:0;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
}
.screen{position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column}
[hidden]{display:none !important}
button,input,select{font:inherit; color:inherit}

/* ── tipografía ── */
.logo{
  font-family:"Barlow Condensed",Impact,sans-serif; font-weight:700; letter-spacing:.06em;
  font-size:clamp(38px,7vw,72px); line-height:.92; margin:0 0 6px;
  text-transform:uppercase; color:var(--cream);
}
.logo span{display:block; color:var(--red); text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.logo.small{font-size:22px; line-height:1; display:flex; gap:.35em; align-items:baseline}
.logo.small span{display:inline; color:var(--blue-l)}
.muted{color:var(--muted)} .small{font-size:12.5px}
.warn{color:#ffb27a; font-size:13px; min-height:18px; margin:6px 0}

/* ── botones ── */
.btn{
  border:1px solid var(--line); background:#1b262c; color:var(--ink);
  padding:11px 16px; border-radius:11px; cursor:pointer; font-weight:600;
  transition:transform .12s ease, filter .12s ease, background .12s ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px); filter:brightness(1.12)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-primary{background:linear-gradient(180deg,var(--cream),var(--cream-2)); color:#20262c; border-color:transparent}
.btn-red{background:linear-gradient(180deg,var(--red),var(--red-d)); border-color:transparent}
.btn-blue{background:linear-gradient(180deg,var(--blue),var(--blue-d)); border-color:transparent}
.btn-ghost{background:transparent}

/* ── inicio ── */
#screen-home{align-items:center; justify-content:center; padding:24px; gap:22px; flex-flow:row wrap}
.home-art{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(212,70,47,.22), transparent 70%),
    radial-gradient(600px 300px at 50% 100%, rgba(47,116,212,.22), transparent 70%);
}
.home-card{
  width:min(460px,100%); background:rgba(18,28,33,.86); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--shadow); text-align:center;
}
.tagline{color:var(--muted); margin:0 0 22px}
.field{display:block; text-align:left; margin-bottom:14px}
.field>span{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px}
.field.row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.field.row>span{margin:0}
input,select{
  width:100%; padding:12px 14px; border-radius:11px; background:#0e171b;
  border:1px solid var(--line); outline:none;
}
select{width:auto; min-width:130px}
input:focus,select:focus{border-color:var(--cream-2); box-shadow:0 0 0 3px rgba(233,220,190,.12)}
#btn-create{width:100%}
.or{display:flex; align-items:center; gap:12px; color:var(--muted); margin:18px 0; font-size:12px}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.join-row{display:flex; gap:10px}
#in-code{text-transform:uppercase; letter-spacing:.35em; text-align:center; font-weight:800}
.home-note{color:var(--muted); font-size:12.5px; margin:20px 0 0}

/* ── salas abiertas ── */
.rooms-panel{
  width:min(360px,100%); background:rgba(18,28,33,.86); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:var(--shadow);
  max-height:min(560px,70vh); overflow:auto;
}
.rooms-panel h2{
  font-family:"Barlow Condensed",sans-serif; font-size:20px; text-transform:uppercase;
  letter-spacing:.1em; margin:0 0 14px; color:var(--muted);
}
.rooms{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.room{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.045); border:1px solid var(--line);
}
.room-code{font-family:"Barlow Condensed",sans-serif; font-size:23px; line-height:1; letter-spacing:.18em; color:var(--cream)}
.room-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.room-info b{font-size:12.5px; font-weight:600}
.room-info span{font-size:11.5px; color:var(--muted)}
.room .btn{margin-left:auto; padding:8px 14px; font-size:13.5px}
.room .live{display:inline-flex; align-items:center; gap:5px}
.room .live::before{content:""; width:7px; height:7px; border-radius:50%; background:#5ad07a}
.room.playing .live::before{background:#e8b33c}
.room-info i{font-style:normal; font-weight:700}
.room-info .t-red{color:var(--red-l)} .room-info .t-blue{color:var(--blue-l)}
.rooms-empty{color:var(--muted); font-size:13px; margin:0}

/* ── barra superior ── */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 18px; border-bottom:1px solid var(--line); background:rgba(10,17,20,.7);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(6px);
}
.code-chip{
  background:#16232a; border:1px solid var(--line); color:var(--ink);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:13px;
}
.code-chip b{letter-spacing:.25em; color:var(--cream)}
.code-chip.mini{cursor:default; font-size:12px; padding:6px 10px}
.copy-hint{color:var(--muted); font-size:11px; margin-left:6px}
.top-right{display:flex; align-items:center; gap:10px}
.timer{
  font-family:"Barlow Condensed",sans-serif; font-size:24px; font-weight:700;
  background:#16232a; border:1px solid var(--line); border-radius:10px; padding:2px 12px;
}
.timer.urgent{color:#ff8a6b; border-color:rgba(255,122,94,.5); animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}

/* ── marcador ── */
.scoreboard{display:flex; align-items:center; gap:16px}
.sb{display:flex; align-items:center; gap:8px; font-family:"Barlow Condensed",sans-serif}
.sb b{font-size:34px; line-height:1}
.sb-label{font-size:13px; letter-spacing:.14em; opacity:.8}
.sb.red{color:var(--red-l)} .sb.blue{color:var(--blue-l)}
.sb-round{font-size:13px; color:var(--muted); border-left:1px solid var(--line); border-right:1px solid var(--line); padding:0 16px}

/* ── sala de espera ── */
.lobby{display:grid; grid-template-columns:1fr 300px; gap:22px; padding:22px; max-width:1180px; margin:0 auto; width:100%}
.lobby-teams{display:grid; grid-template-columns:1fr .8fr 1fr; gap:14px; align-items:start}
.team-card{background:rgba(18,28,33,.7); border:1px solid var(--line); border-radius:var(--radius); padding:16px; min-height:250px; display:flex; flex-direction:column}
.team-card h2{font-family:"Barlow Condensed",sans-serif; font-size:22px; margin:0 0 10px; letter-spacing:.05em; text-transform:uppercase}
.team-card.red{border-top:3px solid var(--red)} .team-card.red h2{color:var(--red-l)}
.team-card.blue{border-top:3px solid var(--blue)} .team-card.blue h2{color:var(--blue-l)}
.team-card.neutral{border-top:3px solid var(--neutral-d)}
.team-head{display:flex; justify-content:space-between; align-items:flex-start}
.team-spy{width:56px; opacity:.9; margin-top:-8px}
.roster{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; flex:1}
.roster li{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); padding:7px 10px; border-radius:9px; font-size:14px}
.roster li.me{outline:1px solid var(--cream-2)}
.roster li.off{opacity:.45}
.roster .tag{margin-left:auto; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; background:rgba(233,220,190,.16); color:var(--cream)}
.roster .tag.boss{background:var(--cream); color:#1b2126; font-weight:700}
.lobby-side{background:rgba(18,28,33,.7); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px}
.lobby-side h3{margin:0 0 4px; font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.rules{font-size:12.5px; color:var(--muted); line-height:1.55; border-top:1px solid var(--line); padding-top:12px}
.rules b{color:var(--cream)}

/* ── mesa de juego ── */
#screen-game{height:100vh; overflow:hidden}
.table{display:grid; grid-template-columns:150px minmax(0,1fr) 150px; gap:16px; padding:14px 16px; flex:1; min-height:0; max-width:1280px; margin:0 auto; width:100%}
.side{display:flex; flex-direction:column; gap:10px}
.side-top{display:flex; align-items:center; justify-content:space-between; background:rgba(18,28,33,.7); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; position:relative; overflow:hidden}
.side.red .side-top{border-left:4px solid var(--red)} .side.blue .side-top{border-left:4px solid var(--blue)}
.cards-left{font-family:"Barlow Condensed",sans-serif; font-size:44px; font-weight:700; line-height:1}
.side.red .cards-left{color:var(--red-l)} .side.blue .cards-left{color:var(--blue-l)}
.side-spy{width:58px; opacity:.95}
.side.active .side-top{box-shadow:0 0 0 2px var(--cream) inset, 0 0 24px rgba(233,220,190,.18)}
.roster.compact li{font-size:12.5px; padding:6px 9px}

/* ── tablero ── */
.center{display:flex; flex-direction:column; gap:12px; min-width:0; min-height:0}
.board{display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:10px; flex:1; min-height:0}
.card{
  position:relative; min-height:0; border:0; cursor:default; padding:6px;
  border-radius:10px; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%); color:#2a2118;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.03em;
  font-size:clamp(13px,1.55vw,21px); text-transform:uppercase; line-height:1.05;
  box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08);
  transition:transform .14s ease, box-shadow .14s ease, background .3s ease, color .3s ease;
  overflow:hidden; word-break:break-word;
}
.card::after{
  content:""; position:absolute; inset:0; opacity:.25; pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.25) 1px, transparent 1px); background-size:5px 5px;
}
.card.clickable{cursor:pointer}
.card.clickable:hover{transform:translateY(-3px); box-shadow:0 8px 0 rgba(0,0,0,.35), 0 0 0 2px var(--cream) inset}
/* pista del operador (cartas sin destapar) */
.card.peek-red{background:linear-gradient(180deg,#eab9a9,#dc9d89); box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 0 0 3px var(--red)}
.card.peek-blue{background:linear-gradient(180deg,#a9c6ea,#8aaedd); box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 0 0 3px var(--blue)}
.card.peek-neutral{box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 0 0 3px var(--neutral-d)}
.card.peek-assassin{background:linear-gradient(180deg,#3b3b3f,#232326); color:var(--cream); box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 0 0 3px #000}
/* destapadas */
.card.done{cursor:default; transform:none; animation:flip .45s ease}
@keyframes flip{0%{transform:rotateX(0)}45%{transform:rotateX(88deg) scale(.96)}100%{transform:rotateX(0)}}
.card.done.red{background:linear-gradient(180deg,var(--red),var(--red-d)); color:#ffe9e2}
.card.done.blue{background:linear-gradient(180deg,var(--blue),var(--blue-d)); color:#e6f0ff}
.card.done.neutral{background:linear-gradient(180deg,var(--neutral),var(--neutral-d)); color:#33291a}
.card.done.assassin{background:linear-gradient(180deg,#2a2b30,#0a0b0d); color:#ff8a76; box-shadow:0 0 24px rgba(255,80,60,.35)}
.card.done .word{opacity:.92; font-size:.82em}
.card .badge{position:absolute; right:5px; bottom:4px; width:26px; opacity:.85}
.card.armed{box-shadow:0 8px 0 rgba(0,0,0,.35), 0 0 0 3px #fff inset; transform:translateY(-3px)}
.card .confirm{
  position:absolute; inset:auto 0 0; background:rgba(0,0,0,.72); color:#fff;
  font-size:11px; letter-spacing:.1em; padding:3px 0; font-family:Inter,sans-serif;
}

/* ── barra de acción ── */
.actionbar{
  background:rgba(18,28,33,.8); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-height:70px;
}
.actionbar.red-turn{border-left:4px solid var(--red)} .actionbar.blue-turn{border-left:4px solid var(--blue)}
.turn-label{font-family:"Barlow Condensed",sans-serif; font-size:19px; text-transform:uppercase; letter-spacing:.06em}
.turn-label.red{color:var(--red-l)} .turn-label.blue{color:var(--blue-l)}
.clue-pill{
  display:flex; align-items:center; gap:10px; background:var(--cream); color:#20262c;
  padding:8px 16px; border-radius:999px; font-family:"Barlow Condensed",sans-serif;
  font-size:26px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.clue-pill .n{background:#20262c; color:var(--cream); border-radius:999px; min-width:34px; text-align:center; padding:0 8px; font-size:20px}
.clue-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.clue-form input{width:220px; text-transform:uppercase}
.clue-form select{min-width:80px}
.hint{color:var(--muted); font-size:13px}
.spacer{flex:1}

/* ── registro ── */
.log{
  max-width:1280px; margin:0 auto 12px; max-height:56px; overflow:hidden; width:calc(100% - 32px); display:flex; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted);
}
.log .entry{background:rgba(255,255,255,.045); border-radius:8px; padding:5px 10px; border-left:3px solid transparent}
.log .entry.red{border-color:var(--red)} .log .entry.blue{border-color:var(--blue)}
.log .entry.clue{color:var(--cream)}

/* ── modal ── */
.overlay{position:fixed; inset:0; background:rgba(5,9,11,.82); backdrop-filter:blur(6px); display:grid; place-items:center; z-index:40; padding:20px; animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:min(560px,100%); background:linear-gradient(180deg,#16232a,#101a1f); border:1px solid var(--line);
  border-radius:20px; padding:26px; text-align:center; box-shadow:var(--shadow); max-height:90vh; overflow:auto;
}
.modal-art{width:120px; margin:0 auto 6px; display:block}
.modal h2{font-family:"Barlow Condensed",sans-serif; font-size:38px; margin:0 0 6px; text-transform:uppercase; letter-spacing:.04em}
.modal h2.red{color:var(--red-l)} .modal h2.blue{color:var(--blue-l)}
.modal-sub{color:var(--muted); margin:0 0 18px}
.modal-points{display:flex; justify-content:center; gap:26px; margin-bottom:18px}
.pt{background:rgba(255,255,255,.05); border-radius:12px; padding:12px 20px; min-width:120px}
.pt .t{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.pt .v{font-family:"Barlow Condensed",sans-serif; font-size:38px; line-height:1.1}
.pt .d{font-size:12px; color:var(--muted)}
.pt.red .v{color:var(--red-l)} .pt.blue .v{color:var(--blue-l)}
.history{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:18px}
.history th,.history td{padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; color:var(--muted)}
.history th{text-transform:uppercase; font-size:10.5px; letter-spacing:.08em}
.history td.win-red{color:var(--red-l)} .history td.win-blue{color:var(--blue-l)}
.modal-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* ── avisos ── */
.toasts{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:60}
.toast{background:#20303a; border:1px solid var(--line); padding:10px 16px; border-radius:11px; box-shadow:var(--shadow); animation:rise .25s ease}
.toast.bad{border-color:rgba(255,122,94,.5); color:#ffb9a5}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}

/* ── responsive ── */
@media (max-width:820px){
  #screen-home{flex-direction:column}
  .rooms-panel{max-height:none}
}
@media (max-width:1000px), (max-height:620px){
  #screen-game{height:auto; overflow:visible}
  .board{grid-template-rows:none} .card{aspect-ratio:1.4/1}
  .log{max-height:none}
  .lobby{grid-template-columns:1fr}
  .lobby-teams{grid-template-columns:1fr}
  .table{grid-template-columns:1fr; gap:12px; padding:12px}
  .side{flex-direction:row; align-items:center; gap:10px}
  .side .roster{flex-direction:row; flex-wrap:wrap}
  .side-top{min-width:120px}
  .scoreboard{gap:10px} .sb b{font-size:26px} .sb-round{padding:0 8px}
  .card{aspect-ratio:1.35/1; font-size:clamp(11px,3vw,16px)}
  .topbar{padding:10px 12px; flex-wrap:wrap}
}
@media (max-width:560px){
  .board{gap:6px} .card{border-radius:8px; padding:3px; font-size:clamp(9px,2.7vw,15px); letter-spacing:0}
  .card .badge{width:16px; right:2px; bottom:2px; opacity:.6}
  .card.done .word{font-size:1em}
  .clue-form input{width:100%}
  .logo.small{font-size:17px}
}