:root{
  --bg:#0d1410; --panel:#16201a; --panel2:#1f2c24; --ink:#ece7d8; --muted:#9fb0a4;
  --accent:#6fae5a; --accent2:#e0b93a; --danger:#c0563f; --line:#2e3d34;
  --wood:#7c4a1e; --clay:#c05a2b; --metal:#5a7d9e; --point:#e6c14a;
  --radius:12px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink)}
a{color:var(--accent)}
.hidden{display:none!important}
button{font-size:15px}

/* ============ LOBBY ============ */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:#0a100c;border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:18px}
.topbar nav a{margin-left:16px;text-decoration:none;color:var(--muted)}
.topbar nav a:hover{color:var(--ink)}
.lobby-wrap{display:flex;justify-content:center;padding:40px 16px;
  background:radial-gradient(1000px 520px at 50% -10%,#1c2a21,var(--bg));min-height:calc(100vh - 50px)}
.lobby-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);max-width:520px;width:100%;padding:26px;height:fit-content}
.lobby-card h1{margin:0 0 6px;font-size:30px}
.sub{color:var(--muted);margin:0 0 18px}
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tab{background:var(--panel2);border:1px solid var(--line);color:var(--muted);padding:8px 12px;border-radius:8px;cursor:pointer}
.tab.active{color:var(--ink);border-color:var(--accent);background:#243026}
label{display:block;margin:10px 0;color:var(--muted);font-size:14px}
input,select{width:100%;margin-top:4px;padding:9px 10px;background:#101711;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:15px}
.names{display:grid;gap:6px}
.pslot{display:flex;gap:6px;align-items:center}
.pslot input{flex:1;margin-top:0}
.pslot .pkind{width:auto;flex:0 0 auto;max-width:54%;margin-top:0}
.pslot.is-bot input{border-color:var(--accent)}
.primary{width:100%;margin-top:14px;padding:12px;background:var(--accent);color:#0e140f;border:none;border-radius:10px;font-weight:700;cursor:pointer}
.primary:hover{filter:brightness(1.08)}
.ghost{background:rgba(10,16,12,.55);border:1px solid var(--line);color:var(--muted);padding:7px 12px;border-radius:8px;cursor:pointer;backdrop-filter:blur(6px)}
.ghost:hover{color:var(--ink)}
.info{margin-top:14px;background:#101711;border:1px dashed var(--accent);border-radius:8px;padding:12px}
.code{font-size:26px;letter-spacing:3px;font-weight:800;color:var(--accent2)}

/* ============ JUEGO 3D ============ */
#game{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;inset:0}
#stage canvas{display:block}

#hudTop{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;pointer-events:none;z-index:10}
#hudTop>*{pointer-events:auto}
#statusline{background:rgba(10,16,12,.66);backdrop-filter:blur(8px);border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;font-size:14.5px}
#statusline b{color:var(--accent2)}
.hud-right{display:flex;gap:8px;align-items:center}
#codeBadge{background:rgba(10,16,12,.66);backdrop-filter:blur(8px);border:1px solid var(--line);padding:7px 11px;border-radius:8px;color:var(--accent2);font-weight:700}

/* vista previa grande, flotante sobre la carta señalada (por encima del modal) */
#preview{position:fixed;left:0;top:0;width:280px;z-index:60;pointer-events:none;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.65))}
#preview canvas{width:100%;height:auto;border-radius:12px;display:block}
#previewTitle{margin-top:6px;text-align:center;font-size:13px;color:var(--ink);
  background:rgba(10,16,12,.7);border-radius:8px;padding:5px 8px}
#previewTitle:empty{display:none}

/* banner de turno */
#turnBanner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) scale(1);z-index:25;
  font-size:clamp(28px,5vw,52px);font-weight:800;color:#ffd766;letter-spacing:1px;
  text-shadow:0 4px 18px rgba(0,0,0,.85),0 0 40px rgba(224,185,58,.35);pointer-events:none;
  animation:bannerIn .45s cubic-bezier(.2,1.4,.4,1)}
#turnBanner.out{opacity:0;transition:opacity .5s}
/* banner de ronda nueva: más grande, con subtítulo "RONDA N" y color aguamarina */
#turnBanner.round{display:flex;flex-direction:column;align-items:center;color:#7fe9d0;
  text-shadow:0 4px 18px rgba(0,0,0,.9),0 0 44px rgba(80,220,190,.4)}
#turnBanner.round .rb-sub{font-size:.42em;letter-spacing:6px;color:#cfeee7;opacity:.9;margin-bottom:2px}
@keyframes bannerIn{from{transform:translate(-50%,-50%) scale(.4);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* cubilete */
.cup{flex:1;padding:14px!important;font-size:16px!important;font-weight:800;
  background:linear-gradient(180deg,#7a4b22,#57351a)!important;border:2px solid #a86a30!important;
  color:#ffe9c9!important;border-radius:12px!important;cursor:grab;user-select:none;touch-action:none}
.cup.shaking{animation:cupShake .12s infinite;cursor:grabbing}
@keyframes cupShake{0%{transform:translate(-3px,1px) rotate(-3deg)}25%{transform:translate(3px,-2px) rotate(3deg)}50%{transform:translate(-2px,-1px) rotate(-2deg)}75%{transform:translate(2px,2px) rotate(2deg)}}

/* popup de construcción con cartas */
.build-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.bcard{cursor:pointer;border:2px solid transparent;border-radius:10px;overflow:hidden;position:relative;transition:transform .1s}
.bcard:hover{transform:translateY(-4px);border-color:var(--accent)}
.bcard img{width:100%;display:block;border-radius:8px}
.bcard canvas{width:100%;height:auto;display:block;border-radius:8px}
.bcard .bcost{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:rgba(10,16,12,.85);
  border-radius:8px;padding:3px 9px;font-size:13px;white-space:nowrap}
.bcard.off{filter:grayscale(1) brightness(.5);cursor:not-allowed}
.bcard.off:hover{transform:none;border-color:transparent}

/* carta revelada al explorar */
.reveal{text-align:center}
.reveal-card{width:min(320px,70vw);border-radius:14px;display:block;margin:0 auto 14px;cursor:pointer;
  animation:revealIn .5s cubic-bezier(.2,1.3,.4,1);box-shadow:0 18px 50px rgba(0,0,0,.7)}
@keyframes revealIn{from{transform:scale(.3) rotateY(90deg);opacity:0}to{transform:scale(1) rotateY(0);opacity:1}}

/* panel de acciones */
#actionsHud{position:absolute;left:14px;top:60px;width:250px;display:flex;flex-direction:column;gap:8px;z-index:10;
  background:rgba(10,16,12,.6);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:12px;
  max-height:calc(100vh - 260px);overflow:auto}
#actionsHud h3{margin:0 0 4px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.act{display:flex;gap:7px}
.act button{flex:1;padding:9px;background:rgba(31,44,36,.9);border:1px solid var(--line);color:var(--ink);border-radius:9px;cursor:pointer;font-size:13.5px}
.act button:hover:not(:disabled){border-color:var(--accent)}
.act button:disabled{opacity:.38;cursor:not-allowed}
.act select{flex:1.4;font-size:13px}
.primary-sm{background:var(--accent)!important;color:#0e140f!important;font-weight:700}
.hint{color:var(--muted);font-size:12.5px;line-height:1.35}

/* combate: arriba, con la carta de la criatura EN GRANDE (el cubilete se renderiza en su propia capa, por encima) */
#combatHud{position:absolute;left:50%;transform:translateX(-50%);top:46px;z-index:16;width:min(540px,94vw);
  background:rgba(16,10,8,.82);backdrop-filter:blur(10px);border:1px solid var(--danger);border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;max-height:calc(100vh - 150px);overflow:auto}
#combatCard{width:min(280px,56vw);height:auto;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.65);display:block}
/* cabecera GRANDE del combate: "Tu ejército ⚔4 VS ⚔3 Serpientes Gigantes" */
.combat-who{font-size:12.5px;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.8px}
.combat-vs{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:23px;font-weight:800;line-height:1.15;text-align:center;margin:2px 0 4px;
  text-shadow:0 2px 10px rgba(0,0,0,.8)}
.combat-vs b{font-size:30px}
.combat-vs .ico{width:30px;height:30px;vertical-align:-5px}
.combat-vs .cv-me{color:#a8e6a0}
.combat-vs .cv-cr{color:#ff9d8f}
.combat-vs .cv-x{font-size:32px;font-style:italic;color:var(--accent2);
  text-shadow:0 0 18px rgba(255,215,102,.45)}
.combat-cols{display:flex;gap:14px;align-items:flex-start}
.combat-info{flex:1;display:flex;flex-direction:column;gap:6px;font-size:14px}
.dice-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:14px}
.die{display:inline-flex;width:30px;height:30px;border-radius:7px;align-items:center;justify-content:center;font-weight:800;border:1px solid #0008;background:#e9e4d4;color:#222}
.die.miss{background:#4a4038;color:#cbbfae}
.die.hit{background:#6fae5a;color:#10240f}
.die.cr{border:2px solid #93312b}
.die.pick{cursor:pointer}
.die.pick.sel{outline:3px solid var(--accent2)}
#combatHud .act{margin-top:10px}
#combatHud .act button{background:rgba(31,26,22,.92)}

/* pila abajo-izquierda: efectos activos + registro */
#leftStack{position:absolute;left:14px;bottom:14px;width:340px;z-index:10;display:flex;flex-direction:column;gap:8px}
#effectsPanel{background:rgba(10,16,12,.66);backdrop-filter:blur(8px);border:1px solid var(--accent2);border-radius:12px;padding:8px 12px}
.fx-head{font-size:12px;color:var(--accent2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;font-weight:700}
.fx-item{font-size:13px;padding:3px 0;border-bottom:1px solid #1c2620}
.fx-item:last-child{border-bottom:none}

/* botón de continuar la partida a medias (tras F5, cierre o reinicio) */
.resume-box{background:rgba(35,52,38,.65);border:1px solid var(--accent2);border-radius:12px;
  padding:12px 14px;margin-bottom:16px;display:flex;align-items:center;gap:12px;justify-content:space-between}
.resume-box button{width:auto;padding:9px 18px}

/* registro */
#logPanel{background:rgba(10,16,12,.6);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;overflow:hidden}
#logHead{padding:8px 12px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
#log{max-height:150px;overflow:auto;padding:0 12px 8px;font-size:12.5px;color:var(--muted)}
#log div{padding:2.5px 0;border-bottom:1px solid #1c2620}
#logPanel.folded #log{display:none}

/* iconos de recursos / espada (PNG en assets/cards/ico) */
.ico{width:19px;height:19px;vertical-align:-4px;object-fit:contain}
.ico.big{width:26px;height:26px;vertical-align:-6px}

/* barra inferior: info del jugador activo + recursos + acciones */
#bottomBar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:15;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:rgba(10,16,12,.74);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:10px 16px;max-width:96vw}
#bbInfo{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
#bbInfo .bb-name{color:var(--accent2)}
#bbInfo .bb-pts{color:#ffd766}
#bbInfo .bb-army{color:var(--muted)}
#bbInfo .bb-hand{color:var(--muted);font-weight:700}
#bbInfo .bb-hand.warn{color:var(--accent2)}
#bbInfo .bb-hand.full{color:#e0563f}
#bbResources{display:flex;gap:12px;align-items:center;font-size:16px;padding:0 8px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
#bbResources .bb-res{display:inline-flex;align-items:center;gap:4px;font-weight:700}
#bbActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#bbActions button{padding:10px 12px;background:rgba(31,44,36,.92);border:1px solid var(--line);color:var(--ink);border-radius:10px;
  cursor:pointer;font-size:14px;display:inline-flex;align-items:center;gap:6px}
#bbActions button:hover:not(:disabled){border-color:var(--accent)}
#bbActions button:disabled{opacity:.4;cursor:not-allowed}
#bbActions .hint{padding:6px 4px}
.badge{background:var(--accent);color:#0e140f;border-radius:20px;padding:0 7px;font-weight:800;font-size:12.5px;min-width:18px;text-align:center}
.badge.zero{background:#4a4038;color:#cbbfae}
.cost{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;color:var(--muted)}

/* elegir qué recursos pierdes al morir un peón (icono = botón; nº elevado) */
.lose-picker{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0;flex-wrap:wrap}
.lpool,.lchosen{display:flex;gap:10px;align-items:center;min-height:70px}
.lchosen{min-width:96px;justify-content:center;border-left:1px dashed var(--line);padding-left:16px}
.larrow{font-size:26px;color:var(--danger)}
.lchip{position:relative;background:#101711;border:2px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .08s,border-color .1s}
.lchip:hover:not(:disabled){border-color:var(--danger);transform:translateY(-3px)}
.lchip:disabled{opacity:.3;cursor:not-allowed}
.lchip small{color:var(--muted);font-size:11px;font-weight:700}
.lchip.sel{border-color:var(--danger);background:#2a1512}
.lchip sup{position:absolute;top:3px;right:6px;font-size:15px;font-weight:800;color:#ffd766;text-shadow:0 1px 3px #000}
.lchip .ico.big{width:34px;height:34px}

/* mercadito de intercambio */
.market-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0}
.market-sel{display:flex;flex-direction:column;align-items:center;gap:8px}
.market-sel .ml{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:210px}
.mtile{cursor:pointer;border:2px solid var(--line);border-radius:10px;padding:8px;background:#101711;
  display:flex;flex-direction:column;align-items:center;gap:3px;width:70px}
.mtile:hover{border-color:var(--accent)}
.mtile.sel{border-color:var(--accent2);background:#243026}
.mtile small{color:var(--muted);font-size:11px}
.mtile.off{opacity:.4;cursor:not-allowed}
.market-arrow{font-size:30px;color:var(--accent)}

/* marcador de jugadores (abajo a la derecha) */
#scoreboard{position:absolute;right:14px;bottom:14px;z-index:14;display:flex;flex-direction:column;gap:6px;
  background:rgba(10,16,12,.74);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:180px}
.sb-row{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 4px;border-radius:8px}
.sb-row.active{background:rgba(111,174,90,.18);outline:1px solid var(--accent)}
.sb-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.sb-name{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.sb-stat{display:inline-flex;align-items:center;gap:3px;color:var(--muted)}
.sb-stat b{color:var(--ink)}
.sb-pts{color:#ffd766;font-weight:800}

/* banner de resultado (victoria/derrota/…) */
#resultBanner{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:26;text-align:center;pointer-events:none;
  font-size:clamp(26px,5vw,50px);font-weight:800;text-shadow:0 4px 18px rgba(0,0,0,.85);animation:bannerIn .4s cubic-bezier(.2,1.4,.4,1)}
#resultBanner.out{opacity:0;transition:opacity .55s}

/* modal + toast */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:45}
.modal-box{background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:20px;max-width:600px;width:92%;max-height:86vh;overflow:auto}
.modal h3{margin-top:0}
.cards-row{display:flex;gap:8px;flex-wrap:wrap}
.cards-row .card{width:128px;background:#0f140f;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer}
.cards-row .card:hover{border-color:var(--accent)}
.cards-row .card img{width:100%;display:block}
.cards-row .card .cname{font-size:11px;padding:4px 6px;text-align:center}
.valbtn,.opt,.act-seat{padding:9px 12px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:8px;cursor:pointer}
.valbtn:hover,.opt:hover,.act-seat:hover{border-color:var(--accent)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--danger);color:#fff;padding:10px 16px;border-radius:8px;z-index:40}
.winner{text-align:center;padding:20px}
.winner .big{font-size:44px}

@media(max-width:900px){
  #actionsHud{width:200px}
  #preview{width:210px}
  #leftStack{width:260px}
}