/* css/overlays.css — Aviso de girar el teléfono, elección de refuerzo y utilidades varias. */
/* ---------- Aviso de orientación horizontal ---------- */
#rotate-overlay{
  display:none; position:fixed; inset:0; z-index:100;
  background:#050302; color:var(--text);
  flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:24px;
}
#rotate-overlay .spin-icon{font-size:2.6rem; animation:rotPulse 1.6s ease-in-out infinite;}
#rotate-overlay .rot-title{font-size:1.1rem; color:var(--ember3); letter-spacing:0.04em;}
#rotate-overlay .rot-sub{font-size:0.8rem; color:var(--text-dim); max-width:280px;}
@keyframes rotPulse{ 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(90deg);} }
@media (orientation: portrait){
  #rotate-overlay{ display:flex; }
  #stage{ visibility:hidden; }
}

/* ---------- Buff choice ---------- */
#buffscreen{z-index:25;}
.buff-cards{display:flex; gap:14px; width:100%; max-width:420px; flex-wrap:wrap; justify-content:center;}
/* cartas con el mismo marco pixel que el resto de los paneles (antes redondeadas y en Georgia) */
.buff-card{
  flex:1; min-width:140px; background:linear-gradient(160deg, var(--panel), #0f0805);
  border:2px solid var(--panel-b); border-radius:2px; padding:14px 12px; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,160,80,0.08), 4px 4px 0 #000; transition:border-color .12s, transform .12s;
}
.buff-card:hover{border-color:#8a4a22;}
.buff-card:active{border-color:var(--ember1); transform:translateY(1px);}
.buff-card .ico{font-size:1.6rem; margin-bottom:6px;}
.buff-name{font-family:var(--font-retro); font-size:1.3rem; line-height:1.05; color:var(--ember3); margin-bottom:4px; letter-spacing:0.02em;}
.buff-desc{font-family:var(--font-retro); font-size:1.05rem; color:var(--text-dim); line-height:1.1;}
/* celular acostado: las tres cartas en una fila (antes la tercera caía sola abajo) */
@media (max-height:500px) and (min-aspect-ratio:4/3){
  #buff-title{ font-size:1.35rem; margin-bottom:12px; }
  .buff-cards{ max-width:min(760px, 94vw); flex-wrap:nowrap; }
  .buff-card{ padding:12px 10px; }
}

/* Refuerzos que TRANSFORMAN una habilidad (js/systems/boons.js): marco del color de la rareza,
   ícono pixel de la habilidad con el halo del efecto, rótulo de rareza/mejora y línea de dúo. */
.buff-card.boon{position:relative;}
.buff-card.boon.rar-comun{border-color:#6a5e48;}
.buff-card.boon.rar-raro{border-color:#2f6aa8; box-shadow:inset 0 0 0 1px rgba(95,176,255,0.18), 4px 4px 0 #000;}
.buff-card.boon.rar-epico{border-color:#7a3fb0; box-shadow:inset 0 0 0 1px rgba(199,125,255,0.22), 4px 4px 0 #000;}
.buff-card.boon.duo{border-color:#b08a2e; box-shadow:inset 0 0 0 1px rgba(255,215,106,0.3), 0 0 10px rgba(255,200,80,0.25), 4px 4px 0 #000;}
.buff-card .boon-ico{width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  background:var(--boon-c); box-shadow:0 0 0 2px #000, 0 0 0 3px var(--boon-g); margin:0 auto 6px; image-rendering:pixelated;}
.buff-card .boon-ico-img{width:32px; height:32px; object-fit:contain; image-rendering:pixelated;}
.boon-tag{font-family:var(--font-retro); font-size:0.95rem; letter-spacing:0.06em; text-transform:uppercase; line-height:1;}
.boon-skill{font-family:var(--font-retro); font-size:0.95rem; color:#b8a890; line-height:1.05; margin-bottom:3px;}
.boon-skill b{color:#e8d8b8; font-weight:400;}
.boon-duo{font-family:var(--font-retro); font-size:0.9rem; color:#d8b860; margin-top:4px; line-height:1.05;}
#boon-owned{font-family:var(--font-retro); font-size:0.95rem; color:var(--text-dim); margin-top:10px; max-width:min(760px, 94vw); text-align:center; line-height:1.15;}
@media (max-height:500px) and (min-aspect-ratio:4/3){
  .buff-card .boon-ico{width:28px; height:28px;} .buff-card .boon-ico-img{width:24px; height:24px;}
  .boon-duo, .boon-skill{font-size:0.85rem;} #boon-owned{margin-top:6px; font-size:0.85rem;}
}

/* ---------- misc ---------- */
#vote-note{font-size:0.7rem; color:var(--text-dim); margin-top:16px; max-width:340px;}

/* ---------- Pantalla previa a la partida: el Hechicero (run-intro.js) ---------- */
#run-intro{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; gap:2vw; padding:12px 16px;
  background:radial-gradient(ellipse at 50% 50%, #1c1712, #070605 75%); cursor:pointer;}
#run-intro .ri-art, #run-intro .ri-card{animation:riIn .45s ease-out;} /* el fundido es del arte y la tarjeta: "Saltar ▸▸" se ve desde el primer cuadro */
#run-intro.hidden{display:none;}
#run-intro .ri-card{max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); overflow-y:auto; -webkit-overflow-scrolling:touch;}
/* página del prólogo (primera partida): solo el relato, sin la ficha */
#run-intro.ri-prologue .ri-row{display:none;}
#run-intro.ri-prologue .ri-say{font-size:1.2rem; line-height:1.12;}
@media (max-height:500px){ #run-intro.ri-prologue .ri-say{font-size:0.98rem; line-height:1.04;} }
@keyframes riIn{from{opacity:0} to{opacity:1}}
#run-intro .ri-art{flex:0 0 42%; height:min(92vh, 520px); height:min(92dvh, 520px); max-width:520px; background:transparent !important; position:static !important; width:auto;}
#run-intro .ri-card{flex:1 1 auto; max-width:560px; background:linear-gradient(180deg, rgba(34,22,12,0.92), rgba(14,9,6,0.94));
  border:2px solid #b08a4a; border-radius:8px; padding:12px 14px; box-shadow:0 0 22px rgba(255,200,110,0.25);}
#run-intro .ri-who{font-family:'Press Start 2P',monospace; font-size:0.55rem; letter-spacing:3px; color:#ffd98a;}
#run-intro .ri-arena{font-family:'Press Start 2P',monospace; font-size:0.95rem; color:#fff3d6; margin:6px 0 6px; text-shadow:0 0 10px rgba(255,210,120,0.6);}
#run-intro .ri-say{font-family:'VT323',monospace; font-size:1.25rem; line-height:1.05; color:#ffe9c2; font-style:italic; margin-bottom:8px;}
#run-intro .ri-row{display:flex; flex-direction:column; gap:1px; margin:5px 0; font-family:'VT323',monospace; font-size:1.12rem; line-height:1.02; color:#eadcc6;}
#run-intro .ri-k{font-family:'Press Start 2P',monospace; font-size:0.5rem; letter-spacing:1px;}
#run-intro .ri-k.kill{color:#ff7a5c;} #run-intro .ri-k.help{color:#7fe0a0;} #run-intro .ri-k.goal{color:#ffd24a;}
#run-intro .ri-k.cr{color:#bfe8ff;}
#run-intro .ri-crystals{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid rgba(176,138,74,0.35); padding-top:5px;}
#run-intro .cr-gems{display:flex; align-items:center; gap:7px;}
#run-intro .cr-gems em{font-style:normal; color:#bfe8ff; margin-left:3px;}
.cr-gem{display:inline-block; width:13px; height:19px; clip-path:polygon(50% 0,100% 32%,82% 78%,50% 100%,18% 78%,0 32%);
  background:#2a2520; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); opacity:0.55;}
.cr-gem.on{background:linear-gradient(135deg, var(--l) 0 28%, var(--c) 28% 62%, rgba(0,0,0,0.35) 62%), var(--c); opacity:1;
  filter:drop-shadow(0 0 5px var(--c)); animation:crPulse 2.4s ease-in-out infinite;}
@keyframes crPulse{50%{filter:drop-shadow(0 0 9px var(--c));}}
/* Resonancia: elegir qué cristal llevás (crystal-resonance.js) */
#run-intro .res-wrap{width:100%; display:flex; flex-direction:column; gap:4px;}
#run-intro .res-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
#run-intro .res-picks{display:flex; flex-wrap:wrap; gap:5px;}
#run-intro .res-pick{display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:4px 9px; border-radius:6px; border:1px solid rgba(191,232,255,0.35);
  background:rgba(20,26,36,0.7); color:#dfefff; font:inherit; font-size:0.68rem; cursor:pointer; touch-action:manipulation;}
#run-intro .res-pick .cr-gem{width:9px; height:13px; animation:none;}
#run-intro .res-pick.on{border-color:var(--c, #bfe8ff); background:rgba(60,80,110,0.8); box-shadow:0 0 8px var(--c, rgba(191,232,255,0.5)); color:#fff;}
#run-intro .res-desc{font-size:0.68rem; color:#cfe6f5; line-height:1.3;}
#run-intro .res-desc b{color:#fff;}
#run-intro .ri-go{margin-top:10px; width:100%; font-size:0.8rem; padding:10px; background:linear-gradient(180deg,#c9922e,#8a5a14); border-color:#ffd98a; color:#fff8e6;
  text-shadow:0 1px 0 #3a2206, 1px 0 0 #3a2206, 0 -1px 0 #3a2206, -1px 0 0 #3a2206; letter-spacing:1px;} /* texto claro sobre dorado: con contorno se lee */
#run-intro .ri-tap{text-align:center; font-family:'VT323',monospace; font-size:0.95rem; color:#a8916a; margin-top:4px;}
@media (max-height: 500px){
  #run-intro{gap:10px; padding:6px 12px;}
  #run-intro .ri-art{flex-basis:36%; height:94vh; height:94dvh;}
  #run-intro .ri-card{padding:7px 10px;}
  #run-intro .ri-arena{font-size:0.72rem; margin:4px 0;}
  #run-intro .ri-say{font-size:1.02rem; margin-bottom:4px;}
  #run-intro .ri-row{font-size:0.95rem; margin:3px 0;}
  #run-intro .ri-k{font-size:0.42rem;}
  #run-intro .ri-go{margin-top:5px; padding:7px; font-size:0.66rem;}
  #run-intro .ri-tap{display:none;}
}
/* Android acostado con barra de direcciones (~320-340 px de alto): la figura del Hechicero se quedaba con casi
   todo el ancho (su ancho mínimo sale del alto) y la ficha quedaba de una palabra por renglón */
@media (max-height: 340px){
  #run-intro .ri-art{min-width:0; flex-basis:34%;}
}
@media (max-width: 640px) and (orientation: portrait){
  #run-intro{flex-direction:column;}
  #run-intro .ri-art{flex:0 0 38vh; width:100%; height:38vh;}
}

/* Prólogo en cooperativo: en la primera pantalla de refuerzos (campaign-story.js) */
#buff-story{ max-width:620px; margin:0 auto 10px; padding:8px 12px; border:2px solid #b08a4a; border-radius:6px;
  background:linear-gradient(180deg, rgba(34,22,12,0.92), rgba(14,9,6,0.94)); text-align:left; }
#buff-story.hidden{ display:none; }
#buff-story .bs-who{ font-family:'Press Start 2P',monospace; font-size:0.5rem; letter-spacing:2px; color:#ffd98a; margin-bottom:4px; }
#buff-story .bs-say{ font-family:'VT323',monospace; font-size:1.05rem; line-height:1.08; color:#ffe9c2; font-style:italic; }
/* ---------- Diálogo propio del juego (game-dialog.js): reemplaza confirm()/alert() nativos ---------- */
/* z-index 130: por encima de #run-intro / #net-toast (60), .loot-overlay (80) y #item-preview (120),
   que también abre avisos (mejorar objeto, comprar desde la ficha). */
#game-dialog{
  position:fixed; inset:0; z-index:130;
  display:flex; align-items:center; justify-content:center;
  padding: calc(10px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
  box-sizing:border-box;
  background: radial-gradient(ellipse at 50% 45%, rgba(60,20,8,0.55), rgba(0,0,0,0.82) 70%);
  animation: gdFade .14s ease-out;
  touch-action:manipulation; overscroll-behavior:contain;
}
#game-dialog .gd-panel{
  position:relative; width:100%; max-width:480px; max-height:100%;
  display:flex; flex-direction:column; box-sizing:border-box;
  padding:14px 18px 16px;
  background:linear-gradient(160deg, var(--panel), #0f0805);
  border:3px solid #000; border-radius:0;
  box-shadow: inset 2px 2px 0 rgba(255,180,120,0.18), inset -2px -2px 0 rgba(0,0,0,0.5), 0 0 0 2px var(--panel-b), 6px 6px 0 #000, 0 0 28px rgba(255,122,46,0.18);
  color:var(--text); text-align:center;
  animation: gdPop .16s ease-out;
}
#game-dialog .gd-panel::before{ /* filo de brasa arriba */
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--ember1), var(--ember3), var(--ember1), transparent);
}
#game-dialog .gd-title{
  font-family:var(--font-retro); font-size:1.15rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ember3); text-shadow:2px 2px 0 #000; margin:2px 0 6px; flex:0 0 auto;
}
#game-dialog .gd-msg{
  font-family:var(--font-retro); font-size:1.35rem; line-height:1.18; color:var(--text);
  white-space:pre-line; overflow-wrap:anywhere; word-break:normal;
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y;
  padding:4px 4px 2px; margin-bottom:14px;
}
#game-dialog .gd-actions{ display:flex; gap:14px; justify-content:center; flex:0 0 auto; }
#game-dialog .gd-btn{
  flex:1 1 0; min-width:120px; max-width:220px; min-height:48px;
  font-size:1.35rem; padding:8px 14px; line-height:1.1;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
#game-dialog .gd-btn.secondary{ font-size:1.25rem; }
#game-dialog .gd-btn:focus{ outline:none; }
#game-dialog .gd-btn:focus-visible{ outline:2px solid var(--ember3); outline-offset:2px; }
#game-dialog.gd-alert .gd-btn{ max-width:260px; }
/* acción peligrosa (abandonar, cerrar la sala, decisiones permanentes) */
#game-dialog.gd-danger .gd-panel{ box-shadow: inset 2px 2px 0 rgba(255,140,110,0.18), inset -2px -2px 0 rgba(0,0,0,0.5), 0 0 0 2px #5a1a10, 6px 6px 0 #000, 0 0 30px rgba(255,61,31,0.25); }
#game-dialog.gd-danger .gd-panel::before{ background:linear-gradient(90deg, transparent, var(--ember2), #ff9a6a, var(--ember2), transparent); }
#game-dialog.gd-danger .gd-title{ color:#ff9a6a; }
#game-dialog.gd-danger .gd-ok{ background:linear-gradient(180deg, #7a1c10, #3e0c06); color:#ffe0d0; }
@keyframes gdFade{ from{opacity:0;} to{opacity:1;} }
@keyframes gdPop{ from{transform:scale(0.94); opacity:0;} to{transform:scale(1); opacity:1;} }
/* iPhone acostado (844x390): más compacto pero con botones de 44px o más */
@media (orientation: landscape) and (max-height: 520px){
  #game-dialog .gd-panel{ max-width:560px; padding:10px 16px 12px; }
  #game-dialog .gd-title{ font-size:1.05rem; margin:2px 0 4px; }
  #game-dialog .gd-msg{ font-size:1.25rem; line-height:1.12; margin-bottom:10px; }
  #game-dialog .gd-btn{ min-height:46px; font-size:1.3rem; padding:6px 12px; }
  #game-dialog .gd-btn.secondary{ font-size:1.2rem; padding:6px 12px; }
}
@media (orientation: portrait){ #game-dialog{ visibility:hidden; } } /* el aviso de girar el teléfono manda */

/* Pausa: volumen de música y efectos */
.pause-audio{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:6px 0 10px; font-family:var(--font-retro); color:var(--text); font-size:0.9rem; }
.pause-audio label{ display:flex; align-items:center; gap:6px; }
.pause-audio input[type=range]{ width:150px; height:28px; accent-color:var(--ember1); }
.pause-audio .pause-motion{ min-height:40px; cursor:pointer; }
.pause-audio input[type=checkbox]{ width:24px; height:24px; accent-color:var(--ember1); margin:0; }

/* ---------- Invitado: la partida arrancó y todavía baja el arte de la arena (net-game.js: netGuestHoldStart) ---------- */
#net-loading{position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:24px; text-align:center; background:rgba(5,3,2,0.9); color:var(--text);}
#net-loading .nl-title{font-family:var(--font-pixel); font-size:0.8rem; color:var(--ember3); letter-spacing:0.04em;}
#net-loading .nl-pct{font-family:var(--font-retro); font-size:1.5rem; color:#ffe9c2;}
#net-loading .nl-sub{font-size:0.8rem; color:var(--text-dim); max-width:360px;}

/* ===== Briefing pre-arena (js/ui/arena-briefing.js) ===== */
#run-intro .abr-img{height:64px; margin:-4px -4px 6px; border-radius:8px; background-size:cover; background-position:center 40%;
  box-shadow:inset 0 -24px 24px rgba(14,9,6,0.85); border:1px solid rgba(255,210,140,0.25);}
#run-intro .abr-img.hidden, #run-intro .abr.hidden{display:none;}
#run-intro .abr{margin-top:4px; border-top:1px solid rgba(255,210,140,0.18); padding-top:4px;}
#run-intro .abr-row{display:flex; flex-direction:column; gap:1px; margin:5px 0; font-family:'VT323',monospace; font-size:1.06rem; line-height:1.02; color:#eadcc6; overflow-wrap:anywhere;}
#run-intro .abr-row i{color:#c9b39a;}
#run-intro .abr-k{font-family:'VT323 Texto','Press Start 2P',monospace; font-size:15px; line-height:1; letter-spacing:1px;}
#run-intro .abr-k.mech{color:#ffcf5c;} #run-intro .abr-k.haz{color:#ff7a5c;} #run-intro .abr-k.boss{color:#e0a0ff;}
#run-intro .abr-k.loot{color:#5ce39a;} #run-intro .abr-k.tut{color:#5cf0ff;}
#run-intro .abr-pieces{display:flex; flex-wrap:wrap; gap:3px; margin:2px 0;}
#run-intro .abr-piece{font-size:0.95rem; padding:0 5px; border-radius:6px; border:1px solid; text-transform:capitalize;}
#run-intro .abr-piece.own{color:#7fe39a; border-color:#3f8a55; background:rgba(40,90,55,0.35);}
#run-intro .abr-piece.miss{color:#c9b39a; border-color:#5a4632; border-style:dashed;}
#run-intro .abr-where{font-size:0.95rem; color:#bfa98f;}
@media (max-height:500px){ #run-intro .abr-img{height:44px;} #run-intro .abr-row{font-size:0.98rem; margin:3px 0;} }
#run-intro .abr-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px;}
#run-intro .abr-cell{display:flex; flex-direction:column; gap:1px; padding:4px 6px; border-radius:6px; background:rgba(0,0,0,0.28);
  border:1px solid rgba(255,210,140,0.16); font-family:'VT323',monospace; line-height:1.02; min-width:0; overflow-wrap:anywhere;}
#run-intro .abr-t{font-size:1.05rem; color:#fff1d6;}
#run-intro .abr-s{font-size:0.92rem; color:#c9b39a;}
#run-intro .abr-tut{margin-top:4px; font-family:'VT323',monospace; font-size:0.98rem; color:#5cf0ff;}
@media (max-width:700px){ #run-intro .abr-grid{grid-template-columns:1fr;} }
#run-intro .ri-goalrow{border:1px solid #ffcf5c;background:rgba(60,40,6,.55);border-radius:6px;padding:2px 4px;}
#run-intro .ri-goalrow .ri-k{white-space:normal; letter-spacing:0; overflow-wrap:anywhere;} /* tarjeta angosta: sin espaciado entre letras "Objetivo" no se sale */
#run-intro .ri-goalrow .ri-k .pxi{display:none;} /* tarjeta angosta: "Objetivo" ya dice qué es; sin el ícono entra en una línea */
#run-intro .ri-goalrow .ri-goal{color:#ffe9a8;}