/* ============================================================
   INWO — New World Order · Hoja de estilo consolidada v20
   Estética: expediente clasificado / sello dorado / terminal tipewriter
   Paleta: navy profundo · oro ámbar · cyan vigilancia · hueso
   ============================================================ */
:root {
  --navy0: #070B1A;
  --navy: #0B1026;
  --panel: #131A3A;
  --panel2: #17204A;
  --gold: #FFB03A;
  --gold-hi: #FFC96B;
  --cyan: #35C4D9;
  --bone: #F5F7FF;
  --muted: #8A93B8;
  --red: #E5484D;
  --green: #4ADE80;
  --violet: #A78BFA;
  --line: rgba(255, 176, 58, .28);
  --hairline: rgba(245, 247, 255, .09);
  --f-disp: 'Cinzel', Georgia, serif;
  --f-type: 'Special Elite', Consolas, monospace;
  --f-ui: 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--f-ui);
  color: var(--bone);
  background:
    radial-gradient(1100px 700px at 50% -8%, rgba(53, 196, 217, .07), transparent 60%),
    radial-gradient(900px 600px at 85% 110%, rgba(167, 139, 250, .05), transparent 60%),
    repeating-linear-gradient(45deg, rgba(245, 247, 255, .014) 0 2px, transparent 2px 16px),
    var(--navy);
  min-height: 100vh;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3); }
::-webkit-scrollbar-thumb { background: #2a3466; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim, #8a6520); }

img { display: block; }

/* ---------- CABECERA ---------- */
#app > header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 22px;
  background: linear-gradient(180deg, #10173a, #0b1026);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
#app > header h1 {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 176, 58, .25);
}
#app > header h1::after {
  content: 'NEW WORLD ORDER';
  display: block;
  font-size: 9px; letter-spacing: .55em; color: var(--muted);
  font-family: var(--f-type);
}
#hdrInfo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.hpill {
  font-family: var(--f-type);
  font-size: 12px; letter-spacing: .06em;
  padding: 4px 11px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: rgba(0, 0, 0, .35);
  color: var(--bone);
}
.hpill b { color: var(--gold); }
.hpill.p { color: var(--cyan); border-color: rgba(53, 196, 217, .4); }
.hpill.w { color: var(--gold-hi); border-color: var(--line); }
.hpill.atk, .hpill .atk, span.atk {
  color: #fff; background: var(--red);
  border-color: transparent;
  animation: blinkAtk 1s steps(2) infinite;
}
@keyframes blinkAtk { 50% { opacity: .55; } }

.btnrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

#helpBtn {
  width: 32px; height: 32px; border-radius: 50%;
  font-family: var(--f-disp); font-weight: 700; font-size: 15px;
}
button {
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--bone);
  background: linear-gradient(180deg, #131b42, #0e1434);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 6px 13px;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
button:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(255, 176, 58, .12);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(255, 176, 58, .15);
}
button:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.5); }
button.primary {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #14100a;
  font-weight: 700;
  border-color: var(--gold);
}
button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffd98f, var(--gold-hi)); box-shadow: 0 4px 18px rgba(255, 176, 58, .4); }
button.danger { border-color: rgba(229, 72, 77, .5); color: #ffb3b5; }
button.danger:hover { background: rgba(229, 72, 77, .15); border-color: var(--red); }
button.on { border-color: var(--cyan); color: var(--cyan); box-shadow: inset 0 0 12px rgba(53, 196, 217, .12); }

/* ---------- LAYOUT PRINCIPAL ---------- */
main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 14px;
  padding: 14px 18px;
  max-width: 1780px;
  margin: 0 auto;
}
#board { display: contents; }

.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .35), 0 4px 22px rgba(0, 0, 0, .4);
  padding: 12px;
  min-width: 0;
}
.panel::after {
  content: '';
  position: absolute; inset: 5px;
  border: 1px solid rgba(255, 176, 58, .10);
  pointer-events: none;
}
#board .panel:first-of-type { grid-area: 1 / 1 / 2 / 2; }
#board .panel:last-of-type { grid-area: 1 / 2 / 2 / 3; }

.phead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px dashed var(--line);
  position: relative;
}
.phead::before {
  content: 'EXPEDIENTE CLASIFICADO · NIVEL 5 OJOS UNICAMENTE';
  position: absolute; top: -7px; right: 0;
  font-family: var(--f-type);
  font-size: 8.5px; letter-spacing: .28em;
  color: rgba(255, 176, 58, .55);
  background: var(--panel);
  padding: 0 6px;
}
.phead img.thumb { width: 46px; height: auto; border-radius: 2px; }
.phead .nname, .phead b { font-family: var(--f-disp); letter-spacing: .1em; color: var(--gold-hi); font-size: 15px; }
.cnt { font-family: var(--f-type); font-size: 12px; color: var(--cyan); }
.handbadge {
  font-family: var(--f-type); font-size: 11px;
  color: var(--muted);
  border-left: 1px solid var(--hairline);
  padding-left: 8px; margin-left: auto;
}
.tok { color: var(--gold); font-size: 11px; letter-spacing: 2px; }

/* Árbol de poder */
.tree { padding-left: 4px; }
.kids { display: flex; gap: 10px; flex-wrap: wrap; padding-left: 14px; border-left: 1px dashed rgba(74, 222, 128, .35); margin-top: 6px; }
.kids.root { padding-left: 0; border-left: none; }
.node {
  position: relative;
  display: inline-block;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 6px;
  background: rgba(0, 0, 0, .28);
  transition: border-color .15s, box-shadow .15s;
}
.node img.thumb, .node > img { width: 104px; height: auto; border-radius: 2px; }
.nname { display: block; font-size: 11.5px; color: var(--bone); max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node small { color: var(--muted); font-family: var(--f-type); font-size: 10px; }
.node.par { outline: 2px dotted var(--violet); }
.node.zap { outline: 2px dotted var(--cyan); }
.node.dev { outline: 2px dotted var(--red); filter: grayscale(.6); }
.node.pick { outline: 2px dashed var(--green); cursor: pointer; animation: pickGlow 1.1s ease-in-out infinite alternate; }
.node.pickT { outline: 2px dashed var(--red); cursor: crosshair; animation: pickGlowR 1.1s ease-in-out infinite alternate; }
.node.dim { opacity: .3; pointer-events: none; filter: grayscale(1); }
.node.selatt { outline: 2px solid var(--cyan); box-shadow: 0 0 14px rgba(53, 196, 217, .5); }
@keyframes pickGlow { from { box-shadow: 0 0 4px rgba(74, 222, 128, .3); } to { box-shadow: 0 0 16px rgba(74, 222, 128, .75); } }
@keyframes pickGlowR { from { box-shadow: 0 0 4px rgba(229, 72, 77, .3); } to { box-shadow: 0 0 16px rgba(229, 72, 77, .75); } }
.slot {
  display: block; margin-top: 5px;
  border: 1px dashed rgba(74, 222, 128, .45);
  border-radius: 3px;
  color: var(--green);
  font-family: var(--f-type); font-size: 11px;
  text-align: center; padding: 3px 6px;
  cursor: pointer;
}
.slot:hover { background: rgba(74, 222, 128, .12); }
.dropTag {
  display: block; margin-top: 3px;
  font-style: normal;
  font-family: var(--f-type); font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--green);
}
.role {
  display: block; margin-top: 2px;
  font-style: normal;
  font-family: var(--f-type); font-size: 9.5px;
  color: var(--muted); letter-spacing: .05em;
}

/* Zona neutral — cuarentena */
.neutral {
  grid-area: 2 / 1 / 3 / 3;
  border: 1px solid rgba(229, 72, 77, .45) !important;
  background:
    repeating-linear-gradient(-45deg, rgba(229, 72, 77, .07) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #1a1030, var(--panel));
}
.neutral h3, .neutral .lbl { color: #ff9a9d; }
.neutral .cardChip { width: 54px; }
.cardChip {
  display: inline-block;
  width: 54px; border-radius: 2px;
  border: 1px solid var(--hairline);
  transition: transform .12s;
}
.cardChip img { width: 100%; height: auto; border-radius: 2px; }
.cardChip:hover { transform: translateY(-2px); border-color: var(--gold); }
.neutral .cardChip.pickT { outline: 2px dashed var(--red); animation: pickGlowR 1s infinite alternate; }

.expRow, .resRow { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.resRow .cardChip, .expRow .cardChip { width: 44px; }

/* Rotación Illuminati (PNG verticales con arte horizontal) */
img[src*="Illuminati/"] { transform: rotate(90deg) scale(.735); }

/* Tamaños de miniatura por contexto */
img.thumb { width: 88px; height: auto; }
img.sm { width: 46px; height: auto; }
.dbig { width: 170px; height: auto; float: left; margin-right: 12px; border-radius: 3px; border: 1px solid var(--line); }


/* ---------- BARRA DE MANO + ACCIONES ---------- */
#handBar {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; flex-wrap: wrap;
  gap: 10px; align-items: flex-start;
  padding: 10px 18px 12px;
  background: linear-gradient(180deg, #10173a, #0a0f24);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -6px 26px rgba(0, 0, 0, .6);
}
#actionBtns { order: 2; flex: 0 1 34%; min-width: 300px; max-height: 240px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
#handCards { order: 1; flex: 1 1 60%; min-width: 320px; max-height: 240px; overflow-y: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; border-right: 1px solid var(--hairline); padding-right: 12px; }
#actionHint { order: 3; flex-basis: 100%; }
#handCards .handCard {
  width: 96px; flex: none; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 3px;
  background: rgba(0, 0, 0, .3);
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
#handCards .handCard img { width: 100%; height: auto; border-radius: 3px 3px 0 0; }
#handCards .handCard:hover { transform: translateY(-6px) scale(1.04); border-color: var(--gold); box-shadow: 0 10px 24px rgba(255, 176, 58, .25); z-index: 5; position: relative; }
#handCards .handCard:active { transform: scale(.94); }

.bgrp {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%;
  font-family: var(--f-type); font-size: 10.5px; letter-spacing: .18em;
  color: rgba(255, 176, 58, .65);
}
.bgrp::before { content: '◆'; color: var(--gold); margin-right: 2px; }
.bigbtn { font-size: 17px; padding: 10px 20px; font-weight: 700; width: 100%; text-align: center; }
.pulse { animation: pulseA 1.4s ease-in-out infinite; }
.pulse.big { animation-duration: 1s; }
@keyframes pulseA {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 176, 58, .25); }
  50% { box-shadow: 0 0 22px rgba(255, 176, 58, .75), 0 0 44px rgba(255, 176, 58, .25); }
}
.aiwait {
  font-family: var(--f-type); letter-spacing: .14em;
  color: var(--gold);
  border: 1px dashed var(--line);
  border-radius: 3px;
  padding: 9px 18px;
  background: repeating-linear-gradient(-45deg, rgba(255, 176, 58, .05) 0 8px, transparent 8px 16px);
  animation: blinkAtk 1.6s steps(2) infinite;
}
.hsortbar { display: inline-flex; gap: 4px; margin-left: auto; }
.hicon { color: var(--gold); font-style: normal; }
.canc { color: var(--red); font-style: normal; }

/* Barra de info al pasar el ratón */
#cardInfo {
  font-size: 13px;
  color: var(--bone);
  background: rgba(7, 11, 26, .92);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--cyan);
  border-radius: 3px;
  padding: 7px 12px;
  max-height: 84px; overflow-y: auto;
}
.ci-meta { color: var(--cyan); font-family: var(--f-type); font-size: 11.5px; letter-spacing: .06em; }
.ci-text { color: #cfd6ef; margin-top: 3px; line-height: 1.35; }
.ci-none { color: var(--muted); font-style: italic; margin-top: 3px; }
.ci-tip { color: var(--muted); font-style: italic; }

/* ---------- ATAQUE ---------- */
.atkBar {
  display: block !important;
  grid-area: auto;
  margin: 0 0 10px;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(255, 176, 58, .16), rgba(255, 176, 58, .06));
  border: 1px solid var(--gold);
  border-left: 5px solid var(--red);
  border-radius: 3px;
  font-family: var(--f-disp);
  letter-spacing: .08em;
  box-shadow: 0 0 24px rgba(255, 176, 58, .18);
}

/* ---------- REGISTRO (terminal tipewriter) ---------- */
#logPanel {
  max-width: 1780px; margin: 0 auto; width: calc(100% - 36px);
  height: 225px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0a0f24, #070b1a);
  border: 1px solid var(--hairline);
  border-top: 1px solid var(--line);
}
@media (min-width: 1241px) { #logPanel { height: 235px; } }
#logPanel h3 {
  font-family: var(--f-type); font-size: 11px; font-weight: normal;
  letter-spacing: .3em; color: rgba(53, 196, 217, .8);
  padding: 7px 14px 5px;
  border-bottom: 1px dashed var(--hairline);
}
#logLines { flex: 1; overflow-y: auto; padding: 8px 14px; font-family: var(--f-type); font-size: 12.5px; line-height: 1.55; }
.logline { color: #b9c2e0; padding-left: 10px; border-left: 2px solid transparent; margin-bottom: 2px; }
.logline.ll-sys { color: var(--muted); }
.logline.ll-atk { color: #ffd28f; border-left-color: var(--gold); }
.logline.ll-good { color: var(--green); border-left-color: var(--green); }
.logline.ll-warn { color: #ff9a9d; border-left-color: var(--red); }

/* ---------- VICTORIA / METAS ---------- */
.victoryWrap { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.vg { min-width: 190px; flex: 1; }
.vname { font-family: var(--f-disp); font-size: 11.5px; letter-spacing: .12em; color: var(--bone); text-transform: uppercase; }
.vbar {
  height: 7px; margin: 4px 0 3px;
  background: rgba(0, 0, 0, .5);
  border: 1px solid var(--hairline);
  border-radius: 3px; overflow: hidden;
}
.vbar i { display: block; height: 100%; background: linear-gradient(90deg, #8a5a12, var(--gold)); transition: width .4s; }
.vsub { font-family: var(--f-type); font-size: 10.5px; color: var(--cyan); }

/* ---------- OVERLAYS GENÉRICOS ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 7, 17, .88);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  padding: 30px 14px;
}
.box {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 80px rgba(0, 0, 0, .4), 0 20px 70px rgba(0, 0, 0, .7);
  padding: 26px 30px;
  max-width: 640px; width: 100%;
  position: relative;
}
.box::before {
  content: '';
  position: absolute; inset: 6px;
  border: 1px solid rgba(255, 176, 58, .18);
  pointer-events: none;
}
.box.wide { max-width: 900px; }
.box h2 { font-family: var(--f-disp); letter-spacing: .2em; color: var(--gold); text-transform: uppercase; margin-bottom: 12px; font-size: 21px; }
.box p.big { font-size: 17px; line-height: 1.5; }
.curtain { text-align: center; }
.curtain .box { text-align: center; }
.muted, p.muted { color: var(--muted); }

/* ---------- PANTALLA DE INICIO ---------- */
.overlay.setup {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 34px 20px 50px;
}
.setup-hero { text-align: center; position: relative; margin-bottom: 20px; }
.setup-hero .eye { font-size: 54px; filter: drop-shadow(0 0 22px rgba(255, 176, 58, .45)); }
.setup-hero h2 { margin-top: 4px; }
.setup-hero h2 .t1 {
  display: block;
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(38px, 6vw, 64px);
  letter-spacing: .3em; color: var(--bone);
  text-shadow: 0 0 34px rgba(53, 196, 217, .3);
}
.setup-hero h2 .t2 {
  display: block;
  font-family: var(--f-type);
  font-size: clamp(13px, 2vw, 19px);
  letter-spacing: .62em; color: var(--gold);
  margin-top: 2px;
}
.stamp {
  position: absolute; top: -8px; right: -70px;
  transform: rotate(-9deg);
  font-family: var(--f-type); font-weight: bold;
  font-size: 13px; letter-spacing: .2em; line-height: 1.5;
  color: var(--red);
  border: 3px double var(--red);
  padding: 6px 12px;
  border-radius: 4px;
  opacity: .85;
  animation: stampIn .5s cubic-bezier(.2, 2.2, .4, 1) both;
  pointer-events: none;
}
@keyframes stampIn { from { transform: rotate(-9deg) scale(2.6); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: .85; } }
.setup-sub { color: var(--muted); margin-top: 10px; font-size: 14px; }
.seg { display: inline-flex; gap: 8px; margin: 14px auto 6px; flex-wrap: wrap; justify-content: center; }
.seg button.on { border-color: var(--gold); color: var(--gold); background: rgba(255, 176, 58, .1); }
.kindbtn {
  font-family: var(--f-disp); font-weight: 700; letter-spacing: .1em;
  font-size: 13px;
  border-radius: 20px; padding: 7px 20px;
}
.kindbtn.ai { border-color: rgba(167, 139, 250, .5); color: var(--violet); }
.kindbtn.ai:hover { border-color: var(--violet); background: rgba(167, 139, 250, .1); }
.langpill {
  position: absolute; top: -6px; right: -8px;
  font-family: var(--f-type); font-size: 12px;
  border-radius: 16px; padding: 5px 14px;
  border-color: rgba(53, 196, 217, .5); color: var(--cyan);
}
.langpill:hover { border-color: var(--cyan); background: rgba(53, 196, 217, .1); }
.setup-cols { display: flex; gap: 18px; width: 100%; max-width: 1150px; margin-top: 8px; flex-wrap: wrap; }
.setup-col { flex: 1; min-width: 330px; }
.setup-col h3 {
  font-family: var(--f-disp); letter-spacing: .16em;
  font-size: 15px; color: var(--gold-hi);
  margin-bottom: 8px;
}
.setup-col h3 em { font-style: normal; color: var(--green); font-family: var(--f-type); font-size: 12px; letter-spacing: .04em; }
.pickGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.pickCard {
  cursor: pointer; text-align: center;
  border: 1px solid var(--hairline); border-radius: 4px;
  padding: 7px 5px 8px;
  background: rgba(0, 0, 0, .3);
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.pickCard img.thumb { width: 100%; }
.pickCard span { display: block; font-size: 11px; color: var(--bone); margin-top: 4px; }
.pickCard .pst { font-family: var(--f-type); font-size: 10px; color: var(--cyan); }
.pickCard .tl { font-size: 10px; color: var(--muted); }
.pickCard:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 8px 22px rgba(53, 196, 217, .18); }
.pickCard.picked { border: 2px solid var(--gold); box-shadow: 0 0 20px rgba(255, 176, 58, .35); background: rgba(255, 176, 58, .07); }
.startBig { font-size: 19px; padding: 13px 42px; margin-top: 18px; letter-spacing: .1em; font-family: var(--f-disp); font-weight: 700; }
.setup-tip { margin-top: 12px; font-size: 13px; }
#illuDetail {
  width: 100%; max-width: 900px;
  min-height: 74px;
  margin-top: 14px;
  border: 1px dashed var(--hairline); border-radius: 4px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, .32);
  overflow: hidden;
}
#illuDetail::after { content: ''; display: block; clear: both; }
.dtxt h4 { font-family: var(--f-disp); letter-spacing: .14em; color: var(--gold-hi); margin-bottom: 6px; }
.drow { font-size: 12.5px; margin-bottom: 3px; color: #cfd6ef; }
.drow i {
  font-style: normal;
  display: inline-block; min-width: 108px;
  font-family: var(--f-type); font-size: 10.5px; letter-spacing: .18em;
  color: var(--muted);
}
.drow.win i { color: var(--green); }
.drow.good i { color: var(--cyan); }
.drow.bad i { color: var(--red); }
.dmuted { color: var(--muted); font-style: italic; }

/* ---------- ENCICLOPEDIA / AYUDA ---------- */
.howto ol { margin: 10px 0 10px 22px; line-height: 1.8; }
.howto li b { color: var(--gold); }
.goal {
  margin-top: 12px; padding: 10px 14px;
  border: 1px dashed var(--green);
  border-radius: 4px;
  background: rgba(74, 222, 128, .06);
  font-size: 14px;
}
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tabbtn { font-family: var(--f-type); letter-spacing: .1em; font-size: 12.5px; }
.tabbtn.on { border-color: var(--cyan); color: var(--cyan); background: rgba(53, 196, 217, .08); }
.tabpanel { max-height: 62vh; overflow-y: auto; padding-right: 6px; line-height: 1.55; font-size: 13.5px; }
.tabpanel table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tabpanel th, .tabpanel td { border: 1px solid var(--hairline); padding: 6px 9px; text-align: left; font-size: 12.5px; }
.tabpanel th { font-family: var(--f-type); letter-spacing: .1em; color: var(--gold); font-weight: normal; background: rgba(255, 176, 58, .05); }
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.gitem {
  border: 1px solid var(--hairline); border-left: 3px solid var(--cyan);
  border-radius: 3px; padding: 8px 11px;
  background: rgba(0, 0, 0, .25);
  font-size: 12px;
}
.gitem b { display: block; font-family: var(--f-disp); letter-spacing: .1em; color: var(--cyan); margin-bottom: 3px; }
.about p { margin-bottom: 10px; line-height: 1.6; }
.legendbox {
  border: 3px double var(--red);
  transform: rotate(-.8deg);
  padding: 12px 16px; margin: 14px 0;
  background: rgba(229, 72, 77, .05);
}
.legendbox b { color: var(--red); font-family: var(--f-disp); letter-spacing: .1em; }

/* Tooltips de glosario */
.gterm {
  border-bottom: 1px dashed var(--green);
  cursor: help;
  position: relative;
}
.gterm::after {
  content: attr(data-tip);
  position: absolute; bottom: 135%; left: 50%;
  transform: translateX(-50%) scale(.85);
  width: 250px;
  background: #07122b;
  border: 1px solid var(--green);
  border-radius: 4px;
  color: var(--bone);
  font-size: 11.5px; line-height: 1.4;
  padding: 8px 10px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
  z-index: 300;
  white-space: normal;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .6);
}
.gterm:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ---------- PREVIEW FLOTANTE ---------- */
#cardPreview {
  display: none;
  position: fixed; z-index: 200;
  width: 340px;
  background: linear-gradient(180deg, #17204a, #10173a);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .75);
  pointer-events: none;
  max-height: 78vh; overflow-y: auto;
}
#cardPreview img { max-width: 170px; float: left; margin: 0 10px 8px 0; border-radius: 3px; border: 1px solid var(--hairline); }
.cp-n { font-family: var(--f-disp); letter-spacing: .1em; color: var(--gold-hi); font-size: 15px; }
.cp-meta { font-family: var(--f-type); font-size: 10.5px; letter-spacing: .1em; color: var(--cyan); margin: 3px 0; }
.cp-t { clear: both; font-size: 12px; color: #cfd6ef; line-height: 1.45; margin-top: 6px; }

/* ---------- FLASH ÉXITO/FALLO ---------- */
.fxflash {
  position: fixed; top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 400;
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(44px, 8vw, 96px);
  letter-spacing: .24em;
  pointer-events: none;
  animation: fxIn .75s ease-out both;
  text-shadow: 0 0 50px currentColor;
}
.fxflash.ok { color: var(--green); }
.fxflash.miss { color: var(--red); }
@keyframes fxIn {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* ---------- RESPONSIVE (escala Windows 125% → breakpoint real ~1024px CSS) ---------- */
@media (max-width: 1024px) {
  main { grid-template-columns: 1fr; grid-template-areas: "p1" "neutral" "p2"; }
  #board .panel:first-of-type { grid-area: p1; }
  #board .panel:last-of-type { grid-area: p2; }
  .neutral { grid-area: neutral; }
  #handBar { position: static; }
  #handCards, #actionBtns { max-height: none; flex-basis: 100%; border-right: none; }
  .stamp { right: -30px; font-size: 11px; }
  .langpill { top: 0; right: 0; }
}


/* ============ v21 — ESPECTADOR IA vs IA ============ */
.spdbtn {
  font-family: var(--f-type); font-size: 12px; letter-spacing: .08em;
  color: var(--cyan); background: rgba(53,196,217,.08);
  border: 1px solid rgba(53,196,217,.45); border-radius: 3px;
  padding: 5px 10px; cursor: pointer; margin-right: 8px;
}
.spdbtn:hover { background: rgba(53,196,217,.18); box-shadow: 0 0 8px rgba(53,196,217,.35); }
body.spectate #handBar { display: none !important; }
body.spectate #logPanel { max-height: none; }
@media (max-width: 1024px) {
  body.spectate #logPanel {
    position: fixed; right: 10px; bottom: 10px;
    width: min(430px, 92vw); max-height: 44vh;
    z-index: 60; overflow: hidden; display: flex; flex-direction: column;
    background: rgba(7,11,26,.97); border: 1px solid var(--gold);
    box-shadow: 0 6px 30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,176,58,.15) inset;
  }
  body.spectate #logLines { flex: 1; overflow-y: auto; }
}

/* ============ v22 — TARJETA FIN DE JUEGO ============ */
.gameover { text-align: center; }
.go-stamp {
  display: inline-block; font-family: var(--f-type); font-size: 13px; letter-spacing: .3em;
  color: var(--red); border: 2px solid var(--red); padding: 6px 18px;
  transform: rotate(-4deg); margin-bottom: 14px; opacity: .9;
  text-shadow: 0 0 10px rgba(229,72,77,.5);
}
.gameover h3 {
  font-family: var(--f-disp); font-size: 26px; color: var(--gold);
  letter-spacing: .12em; margin: 0 0 12px;
}
.go-winner {
  display: flex; gap: 20px; align-items: center; justify-content: center;
  text-align: left; max-width: 560px; margin: 0 auto 16px;
  padding: 16px; border: 1px solid rgba(255,176,58,.35); border-radius: 4px;
  background: linear-gradient(160deg, rgba(255,176,58,.06), transparent 60%);
}
.go-winner .dbig { width: 150px; flex: 0 0 150px; }
.gotable {
  margin: 8px auto 18px; border-collapse: collapse; font-family: var(--f-type);
  font-size: 13px; min-width: min(480px, 90%);
}
.gotable th, .gotable td { border: 1px solid rgba(245,247,255,.15); padding: 7px 14px; }
.gotable th { color: var(--gold); letter-spacing: .15em; font-weight: normal; background: rgba(255,176,58,.07); }
.gotable td:first-child { color: var(--bone); }

/* ============ v23 — FIX SETUP: idioma fuera del sello + ocultar registro pre-juego ============ */
.overlay.setup .langpill { top: auto !important; bottom: 20px; right: 24px; }
body:not(.ingame) #app main { display: none !important; }
body:not(.ingame) #handBar { display: none !important; }

/* ============ v24 — GAMEOVER CERRABLE + BOTON NUEVO JUEGO ============ */
.box.wide.gameover { position: relative; }
.goclose {
  position: absolute; top: 10px; right: 14px; cursor: pointer;
  font-size: 22px; color: var(--muted); line-height: 1; padding: 4px 8px;
}
.goclose:hover { color: var(--red); }
.ngbtn { margin-left: 10px; }