:root{
  /* Dark, low-fatigue "scientific" palette */
  --bg:#0b1220;
  --paper:#0f1b2d;
  --ink:#e6edf3;
  --muted:#9aa4b2;
  --line:rgba(92, 200, 255, .95);
  --line2:rgba(92, 200, 255, .95);
  --hard:#ffffff;

  /* Teams */
  --defFill:#0a0f18;
  --defStroke:#c7d0dc;

  --atkFill:#13223a;
  --atkStroke:#e6edf3;

  /* Accents / focus */
  --accent:#5cc8ff;

  /* Board sizing (fluid): auto-scales on small devices */
  --cell: clamp(18px, 5.2vw, 34px);
  --label: clamp(16px, 4.2vw, 26px);
  --gap:0px;
}
/* ===== Ball color (muted red) ===== */
/* ===== BALL: square, red ===== */
.ball{
  border-radius: 50%;
  position:absolute;
  width:12px;
  height:12px;
  border:2px solid var(--ink);
  background:#ff3b6b;
  right:auto;
  top:auto;
}

/* Ball on a player: bottom-left corner (inside the piece) */
.piece .ball{
  left:-6px;
  bottom:-6px;
  transform:none;
}

/* Ball on ground: centered in the cell */
.ball--ground{
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  transform:translate(-50%,-50%);
}

/* Legend chip */
.chip--ball{
  width:12px;
  height:12px;
  background:#ff3b6b !important;
  border:1px solid var(--ink);
  position:relative;
}

/* Remove laces */
.ball::after,
.chip--ball::after{
  content:none !important;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);    
  font-family: sans-serif;
  letter-spacing: .02em;
}

a{color:inherit}
code{font-family:inherit}

.top{
  position:sticky; top:0; z-index: 9999;
  background:rgba(11,18,32,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(6px);
}
.top__inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:16px;
}
.brand{
  display:flex;
  
  flex-direction: row;
  align-items:center;
  gap:25px;
  min-width:220px;
}
.brand__mark{
  width:42px;height:42px;
  border:2px solid var(--ink);
  display:grid;place-items:center;
  font-weight:800;
}
.brand__name{font-weight:900; letter-spacing:.12em}
.brand__tag{font-size:12px; color:var(--muted)}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex:1;
}
.nav a{
  text-decoration:none;
  font-size:13px;
  padding:6px 8px;
  border:1px solid transparent;
}
.nav a:hover{border-color:var(--line); background:var(--paper)}
.nav__buy{
  border:1px solid var(--ink) !important;
}

.langs{
  display:flex; gap:6px;
}
.lang{
  color: white;
  border:1px solid var(--ink);
  background:transparent;
  padding:6px 8px;
  font-size:12px;
  cursor:pointer;
}
.lang.is-on{
  background:var(--ink);
  color:var(--paper);
}

.hero{
  border-bottom:1px solid var(--line);
}
.hero__inner{
  max-width:1200px;
  margin:0 auto;
  padding:34px 16px 26px;
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:18px;
  align-items:start;
}
.hero h1{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.15;
  letter-spacing:.04em;
}
.hero p{margin:0 0 16px; color:var(--muted); max-width:70ch}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap}

.btn{
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  padding:10px 12px;
  cursor:pointer;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn--ghost{
  background:transparent;
  color:var(--ink);
}
.btn--danger{
  background:transparent;
  color:var(--ink);
  border-color:#ff5c7a;
}
.btn--thin{padding:8px 10px; font-size:12px}

.stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.stat{
  background:var(--paper);
  border:1px solid var(--line);
  padding:10px;
}
.stat__k{font-weight:900}
.stat__l{font-size:12px; color:var(--muted); margin-top:4px}

.hero__panel{
  background:var(--paper);
  border:1px solid var(--line);
  padding:12px;
}
.panel__title{font-weight:900; margin-bottom:8px}
.panel__list{
  margin:0; padding-left:18px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.sim{
  padding:26px 0 10px;
}
.sim__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.sim__head h2{margin:0 0 8px}
.muted{color:var(--muted); font-size:12px; line-height:1.5}

.sim__layout{
  margin-top:14px;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:14px;
  align-items:start;
}

.hud{
  background:var(--paper);
  border:1px solid var(--line);
  padding:10px;
}
.hud__block{
  border:1px solid var(--line2);
  padding:10px;
  margin-bottom:10px;
}
.hud__title{font-weight:900; margin-bottom:8px}
.hud__row{
  display:flex; justify-content:space-between;
  padding:4px 0;
  border-bottom:1px dashed var(--line2);
  font-size:12px;
}
.hud__row:last-child{border-bottom:none}
.hud__label{display:block; font-size:12px; color:var(--muted)}
.hud__select{
  margin-top:6px;
  width:100%;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  padding:8px;
  font-family:inherit;
  font-size:12px;
}
.hud__hint{
  margin-top:20px;
  font-size:12px;
  color:var(--muted);
  border-left:2px solid var(--ink);
  padding-left:10px;
}
.hud__btns{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:20px;
}
.log{
  max-height:220px;
  overflow:auto;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  border:1px solid var(--line2);
  padding:8px;
  white-space:pre-wrap;
}

.log__line{
  display:flex;
  gap:10px;
  padding:2px 0;
}

.log__ts{
  color:var(--muted);
  opacity:.9;
  min-width:78px;
  flex:0 0 auto;
}

.log__msg{
  color:var(--muted);
  white-space:pre-wrap;
  flex:1 1 auto;
}

.log__line--err .log__ts,
.log__line--err .log__msg{
  color:#ff5c7a;
  font-weight:700;
}

/* Contenedor principal */
#log {
    scrollbar-width: thin;
    scrollbar-color: #55585d #1a222f;
}

#log::-webkit-scrollbar { width: 8px; }
#log::-webkit-scrollbar-track { background: #1a222f; border-radius: 0px; }
#log::-webkit-scrollbar-thumb { background: #55585d; border-radius: 0px; border: 1px solid #1a222f; }
#log::-webkit-scrollbar-thumb:hover { background: #71757c; }

.boardWrap{
  height: 100%;
  background:var(--paper);
  border:1px solid var(--line);
  padding:10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.board{
  width:max-content;
  margin:0 auto;
  display:grid;
  grid-template-columns: var(--label) repeat(13, var(--cell)) var(--label);
  grid-template-rows: var(--label) repeat(17, var(--cell)) var(--label);
  gap:var(--gap);
  user-select:none;
}

.axis{
  font-size:11px;
  color:var(--muted);
  display:grid;
  place-items:center;
}

.cell{
  width:var(--cell);
  height:var(--cell);
  border:1px solid transparent;
  background:transparent;
  padding:0;
  position:relative;
  cursor:pointer;
}
.cell--void{ cursor:not-allowed; }
.cell--play{
  border:1px solid var(--line2);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.08) 0px,
      rgba(255,255,255,.08) 1px,
      rgba(255,255,255,0) 1px,
      rgba(255,255,255,0) 6px);
}
.cell--end{ outline:1px solid rgba(255,255,255,.14); }

.cell.is-enemy{
  border-radius: 50%;
  outline:2px solid #ff3b6b;
  outline-offset:-2px;
}
.cell.is-land{
  border-radius: 50%;
  outline:2px dashed rgba(92,200,255,.75);
  outline-offset:-2px;
}
.cell.is-hot{
  border-radius: 50%;
  outline:2px solid #ffd254;
  outline-offset:-2px;
}
.cell.is-path::after{
  border-radius: 50%;
  content:"";
  position:absolute; inset:0;
  border:1px dashed rgba(230,237,243,.35);
}

/* Ghost previews */
.ghost{
  border-radius: 50%;
  position:absolute;
  inset:6px;
  border:2px dashed rgba(230,237,243,.35);
  display:grid;
  place-items:center;
  font-size:clamp(10px, 2.6vw, 12px);
  font-weight:900;
  opacity:.35;
  pointer-events:none;
  background:rgba(15,27,45,.25);
}
.ghost--def{
  border-color: rgba(0,0,0,.35);
  color: rgba(0,0,0,.75);
  background: rgba(230,237,243,.22);
}
.ghost--atk{
  border-color: rgba(230,237,243,.35);
  color: rgba(230,237,243,.75);
  background: rgba(19,34,58,.22);
}

.piece{
  border-radius: 50%;
  position:absolute;
  inset:4px;
  border:2px solid var(--ink);
  display:grid;
  place-items:center;
  font-size:clamp(10px, 2.6vw, 12px);
  font-weight:900;
  background:var(--paper);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
}
.piece--def{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--bg);
}
.piece--atk{
  background:var(--atkFill);
  color:var(--atkStroke);
  border-color:var(--atkStroke);
}
.piece.is-selected{
  outline:2px dashed var(--ink);
  outline-offset:2px;
}

/* Apilado (TOP): ligera rotación a la derecha para distinguirlo del "girado" (bloqueado) */
.piece.is-stacked{
  transform: rotate(7deg);
  /*border:2px solid #ff3b6b !important;*/
}

/* Bajo apilado (UNDER): borde rojo tipo balón para que se vea claramente que está bloqueado/protegido */
.piece.is-under{
  border-color:#ff3b6b !important;
  box-shadow:
    0 0 0 2px rgba(255,59,107,.22) inset,
    6px 6px 0 rgba(0,0,0,.9);
}

.piece.is-tackled{
  filter: contrast(1.1);
  border-color:#ff3b6b !important;
  box-shadow: 0 0 0 2px rgba(255,59,107,.35), 6px 6px 0 rgba(0,0,0,.9);
  transform: rotate(-7deg);
}
.piece.is-tackled::before{
  content:"⟂";
  position:absolute;
  left:6px; top:4px;
  font-size:11px;
  opacity:.9;
}

.piece__meta{
  display: none;
  position:absolute;
  bottom:2px;
  left:0; right:0;
  text-align:center;
  font-size:clamp(8px, 2.2vw, 10px);
  line-height:1;
  color:var(--muted);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 2px;
}

.stackBadge{
  color: white;
  position:absolute;
  text-align: center;
  top:-22px;
  font-size:10px;
  padding:2px 4px;
  /*border:1px solid rgba(230,237,243,.25);
  background:rgba(15,27,45,.92);*/
}

.boardLegend{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}
.legendRow{display:flex; align-items:center; gap:8px}
.chip{
  width:18px; height:12px;
  border:1px solid var(--ink);
  background:transparent;
}
.chip--def{background:var(--ink); border-color:var(--bg)}
.chip--atk{background:var(--atkFill); border-color:var(--atkStroke)}
.chip--ball{background:#ff3b6b; border-color:var(--ink); position:relative}
.chip--ball::after{content:none}
.chip--tackled{background:var(--paper); border: 1px solid #ff3b6b;}
/* Clase principal del cuadro */
.chip--stack {
  position: relative; /* Necesario para posicionar el reborde respecto al cuadro */
  z-index: 9999;         /* Asegura que el cuadro principal esté arriba */
}

/* El reborde inferior (efecto stack) */
.chip--stack::after {
  content: "";
  position: absolute;
  top: 3px;           /* Desplazamiento hacia abajo */
  right: 3px;          /* Desplazamiento hacia la derecha */
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ff3b6b;
  border-left: 1px solid #ff3b6b;
  opacity: 1;       /* Opcional: para darle ese toque de transparencia */
  z-index: -1;        /* Lo coloca por detrás del cuadro principal */
  pointer-events: none; /* Evita que interfiera con clics */
}

.sim__notes{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.note{
  background:var(--paper);
  border:1px solid var(--line);
  padding:10px;
}
.note__t{font-weight:900; margin-bottom:6px}
.note__b{font-size:12px; color:var(--muted); line-height:1.5}

.media, .rules, .tournaments{
  padding:22px 0;
  border-top:1px solid var(--line);
}
.media__inner, .rules__inner, .tournaments__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

.gallery{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.ph{
  aspect-ratio: 1 / 1;
  border:1px solid var(--line);
  background:var(--paper);
  padding:0;
  cursor:pointer;
  overflow:hidden;
}
.ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: grayscale(1) contrast(1.05);
  transition: transform .18s linear;
}
.ph:hover img{transform: scale(1.03)}

.video{margin-top:14px}
.video__frame{
  border:1px solid var(--line);
  background:var(--paper);
  padding:10px;
}
.video__frame iframe{
  width:100%;
  aspect-ratio: 16/9;
  border:0;
  display:block;
}

.rulesGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.ruleCard{
  background:var(--paper);
  border:1px solid var(--line);
  padding:10px;
}
.ruleCard__t{font-weight:900; margin-bottom:6px}
.ruleCard__b{font-size:12px; color:var(--muted); line-height:1.5}

.tournaments__box{
  margin-top:12px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:12px;
  display:flex;
  justify-content:space-between;
  flex-wrap: wrap;
  gap:10px;
  align-items:center;
}
.tournaments__b{color:var(--muted); font-size:12px; line-height:1.5}

.foot{
  border-top:1px solid var(--line);
  padding:16px 0;
}
.foot__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}

.modal{
  position:fixed;
  inset:0;
  display:none;
}
.modal.is-open{display:block}
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}
.modal__panel{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(1100px, 92vw);
  height:min(78vh, 820px);
  background:var(--paper);
  border:1px solid var(--ink);
  display:flex;
  flex-direction:column;
}
.modal__top{
  padding:10px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.modal__title{font-weight:900}
.modal__tools{display:flex; gap:8px; align-items:center}
.modal__body{
  position:relative;
  flex:1;
  overflow:hidden;
  background:#fff;
}
.modal__body img{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) scale(1);
  transform-origin: center;
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  user-select:none;
  cursor:grab;
}
.modal__body img:active{cursor:grabbing}
.modal__foot{
  padding:8px 10px;
  border-top:1px solid var(--line);
}

#hudTeam, #hudPhase, #hudPA, #hudTurn {color:rgb(255, 92, 122);}
#hudPE_DEF, #hudPE_ATK {color:#ffd254;}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr; }
  .sim__layout{grid-template-columns: 1fr;}
  .gallery{grid-template-columns: repeat(2, minmax(0,1fr));}
  .rulesGrid{grid-template-columns: repeat(2, minmax(0,1fr));}
  .sim__notes{grid-template-columns: 1fr;}
  .nav{display:none;}
}
@media (max-width: 520px){
  .boardWrap{ padding:6px; }
}

/* Ultra-small devices: keep it readable and avoid text bleed */
@media (max-width: 380px){
  .piece__meta{ display:none; }
}

/* ===== Rules / Quickstart (accordion) ===== */
.rulesGrid--3{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){
  .rulesGrid--3{ grid-template-columns: 1fr; }
}

.panel__note{
  list-style: none;
  margin-top: 10px;
  padding-left: 0;
  border-left: 2px solid #ff3b6b;
  padding-left: 10px;
  color: var(--ink);
}

.rulesAcc{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.acc{
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0;
}

.acc > summary{
  cursor: pointer;
  list-style: none;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}
.acc > summary::-webkit-details-marker{ display:none; }

.acc__meta{
  color: var(--muted);
  font-size: 12px;
}

.acc__body{
  border-top: 1px solid var(--line);
  padding: 10px 12px 12px;
}

.acc__list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.rulesSEO{
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px;
}
.rulesSEO h3{
  margin: 0 0 8px;
  font-size: 14px;
}


/* ===== WalkThrough (learn-by-doing) ===== */
.hud__mode{ margin-bottom: 6px; }
.hud__modeBtns{ display:flex; gap:8px; flex-wrap:wrap; }
.btn.is-active{ outline: 2px solid var(--ink); }

.boardWrap{ position: relative; }

.tourPanel{
  position:fixed;
  right:20px;
  top:20px;
  width:min(420px, 92vw);
  max-height:min(78vh, 760px);
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(0,0,0,.55);
  display:none;
  z-index: 9999;
}
.tourPanel.is-on{ display:flex; flex-direction:column; }
.tourPanel__head{
  padding:10px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tourPanel__kicker{ font-weight:900; letter-spacing:.08em; }
.tourPanel__body{ padding:12px 12px 6px; overflow:auto; }
.tourPanel__title{ font-weight:900; font-size:15px; margin-bottom:8px; }
.tourPanel__text{ font-size:13px; color:var(--ink); line-height:1.55; white-space:pre-wrap; }
.tourPanel__hint{ margin-top:20px; border-left:2px solid #ffd254; padding-left:10px; }
.tourPanel__foot{
  padding:10px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tourPanel__btns{ display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width: 720px){
  .tourPanel{ left:10px; right:20px; width:auto; }
}

/* Lock non-essential HUD controls during tour (board stays interactive) */
body.tour-mode #actionSelect,
body.tour-mode #btnPhase,
body.tour-mode #btnEnd,
body.tour-mode #btnReset{
  pointer-events:none;
  opacity:.55;
}

/* Permitir pulsar botones cuando el paso del WalkThrough lo requiera */
body.tour-mode.tour-allow-end #btnEnd{
  pointer-events:auto;
  opacity:1;
}
body.tour-mode.tour-allow-phase #btnPhase{
  pointer-events:auto;
  opacity:1;
}
body.tour-mode.tour-allow-reset #btnReset{
  pointer-events:auto;
  opacity:1;
}


/* tourPanel--draggable */
.tourPanel{
  user-select:none;
}
.tourPanel__head{
  cursor: move;
}
.tourPanel.is-dragging{
  opacity:.95;
}

/* Mode block */
.hud__modeBlock .hud__modeBtns{ padding-top:2px; }


/* Visible warning if app.js did not boot (helps when opening via file:///). */
.bootError{
  position: fixed;
  z-index: 9999;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,90,120,.35);
  background: rgba(20, 30, 45, .95);
  color: #fff;
  border-radius: 0px;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  font-size: 14px;
}
.bootError code{opacity:.9}
.bootError kbd{
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.25);
  border-bottom-width: 2px;
  border-radius: 0px;
  background: rgba(255,255,255,.06);
}
/* =========================================================
   WALKTHROUGH ADD-ONS (PARTE 2)
   - Permitir selector de acción por paso (tour-allow-action)
   - Máscara global de casillas jugables (tour-show-playable)
   - Casillas apiladas visibles (cell--stacked)
   - Pulso amarillo “latiente” en ficha requerida (is-tour-pulse)
   ========================================================= */

/* Permitir cambiar la acción SOLO cuando el paso del WalkThrough lo requiera */
body.tour-mode.tour-allow-action #actionSelect{
  pointer-events:auto;
  opacity:1;
}

/* --- Máscara “casillas jugables” (Paso 3 nuevo) --- */
/* Atenúa lo no jugable y resalta lo jugable del tablero completo */
body.tour-mode.tour-show-playable .cell--void{
  opacity:.14;
  filter:grayscale(1);
}

/* Resalta casillas jugables */
body.tour-mode.tour-show-playable .cell--play{
  outline:2px solid rgba(255,210,84,.45);
  outline-offset:-2px;
  filter:brightness(1.05) saturate(1.05);
}

/* Endzones siguen destacadas */
body.tour-mode.tour-show-playable .cell--end{
  outline:2px solid rgba(92,200,255,.35);
  outline-offset:-2px;
}

/* Opcional: “velo” suave encima del wrap para sensación de máscara (NO bloquea clicks) */
body.tour-mode.tour-show-playable .boardWrap::after{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  background: radial-gradient(circle at 50% 35%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.12) 55%,
    rgba(0,0,0,.28) 100%);
  border-radius:0px;
}

/* --- Casilla apilada (bloqueo/protección visible) --- */
.cell.cell--stacked{
  box-shadow: inset 0 0 0 1px rgba(255,59,107,1);
  border-radius: 50%;
}
.cell.cell--stacked::after{
  /*content:"⧉";*/
  content:"";
  position:absolute;
  top:3px;
  right:5px;
  font-size:11px;
  opacity:.85;
  color:rgba(255,59,107,.9);
  pointer-events:none;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

/* --- Pulso amarillo alrededor de una ficha (para “selecciona este jugador”) --- */
@keyframes tourPulseRing{
  0%   { transform:scale(1);   opacity:.70; }
  55%  { transform:scale(1.10); opacity:.12; }
  100% { transform:scale(1);   opacity:.70; }
}
.piece.is-tour-pulse{
  z-index: 10; /* que se vea por encima en apilados */
}
.piece.is-tour-pulse::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:999px;
  border:2px solid rgba(255,210,84,.9);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.55) inset,
    0 0 18px rgba(255,210,84,.35);
  animation: tourPulseRing 1.05s ease-in-out infinite;
  pointer-events:none;
}

/* Si una pieza está seleccionada y además “pulse”, no pierdas el seleccionado */
.piece.is-selected.is-tour-pulse{
  outline-color: rgba(255,210,84,.95);
}
/* =========================================================
   MARKETING PAPER: “Matemáticas / Estrategia”
   - Contenido de venta sin humo (explicación verificable)
   ========================================================= */
.math{
  padding:22px 0;
  border-top:1px solid var(--line);
}
.math__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.math__head h2{ margin:0 0 8px; }
.math__head .muted{ max-width: 90ch; }

.paperGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.paperCard{
  background:var(--paper);
  border:1px solid var(--line);
  padding:12px;
}
.paperCard__kicker{
  font-size:11px;
  letter-spacing:.14em;
  font-weight:900;
  color:rgba(92,200,255,.95);
  margin-bottom:6px;
}
.paperCard__t{ font-weight:900; margin-bottom:8px; }
.paperCard__b{ font-size:12px; color:var(--muted); line-height:1.55; }

.paper{
  margin-top:10px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:12px;
}
.paper h3{
  margin: 0 0 8px;
  font-size: 14px;
}
.paper h3 + .tableWrap{ margin-top: 10px; }
.paper p{ margin: 0 0 10px; }

.tableWrap{
  overflow:auto;
  border:1px solid var(--line2);
  background: rgba(0,0,0,.12);
  padding:10px;
}
.mathTable{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: var(--paper);
  /*border:1px solid var(--line);*/
}
.mathTable th,
.mathTable td{
  border-bottom:1px solid var(--line2);
  padding:10px 10px;
  vertical-align: top;
  font-size:12px;
  line-height:1.45;
}
.mathTable th{
  text-align:left;
  font-weight:900;
  color: var(--ink);
  background: rgba(255,255,255,.03);
}
.mathTable td:first-child{
  font-weight:800;
  color: rgba(255,255,255,.92);
  width: 18%;
}

.formula{
  margin: 8px 0 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
}
.formula code{
  font-weight:900;
  letter-spacing:.02em;
}

.rigor{
  margin-top: 10px;
  border-left: 2px solid #ff3b6b;
  padding-left: 10px;
}
.rigor__t{ font-weight:900; margin-bottom:6px; }
.rigor__b{ font-size:12px; color: var(--muted); line-height:1.55; }

.copyBank{
  margin-top: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px;
}
.copyBank__head h3{ margin: 0 0 6px; font-size: 14px; }
.copyBank__head p{ margin: 0 0 10px; }

.chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.chipTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.9);
}

.copyCols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.copyCol{
  border: 1px solid var(--line2);
  background: rgba(0,0,0,.10);
  padding: 10px;
}
.copyCol__t{
  font-weight: 900;
  margin-bottom: 6px;
  font-size: 12px;
}
.copyCol__b{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 980px){
  .paperGrid{ grid-template-columns: 1fr; }
  .copyCols{ grid-template-columns: 1fr; }
  .mathTable{ min-width: 620px; }
}
/* ===========================
   Marketing matemático (BALL)
   =========================== */
.math{
  padding:22px 0;
  border-top:1px solid var(--line);
}
.math__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.math__head{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.math__kpis{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}

.kpi{
  background:var(--paper);
  border:1px solid var(--line);
  padding:12px;
}
.kpi__k{
  font-size:12px;
  color:var(--muted);
}
.kpi__v{
  margin-top:6px;
  font-weight:900;
  font-size:22px;
  letter-spacing:.2px;
}
.kpi__s{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}
.math__kpis .kpi:nth-child(4) .kpi__v{
  font-size:18px;
}

.math__grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:12px;
  align-items:start;
}

.mathCard{
  background:var(--paper);
  border:1px solid var(--line);
  padding:12px;
}
.mathCard h3{
  margin:0 0 10px;
  font-weight:900;
}
.mathCard--wide{ grid-column: 1 / -1; }

.tableWrap{
  border:1px solid var(--line2);
  overflow:auto;
}

.mathTable{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  min-width: 640px;
}
.mathTable th,
.mathTable td{
  padding:10px 10px;
  border-bottom:1px solid var(--line2);
  vertical-align:top;
}
.mathTable thead th{
  position:sticky;
  top:0;
  background:rgba(15,27,45,.92);
  backdrop-filter: blur(6px);
  text-align:left;
  font-weight:900;
}
.mathTable tr:last-child td{ border-bottom:0; }

.mathTable--compact{ min-width: 0; }
.mathTable--compact th,
.mathTable--compact td{ padding:8px 10px; }

.mathTag{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--line2);
  border-radius:999px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}
.mathMono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

.mathNote{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.mathList{
  margin:6px 0 0;
  padding-left:16px;
  color:var(--muted);
  line-height:1.55;
}

.acc--inCard{
  margin-top:10px;
}
.acc--inCard > summary{ padding:10px 10px; }
.acc--inCard .acc__body{ padding:0 10px 10px; }

@media (max-width: 980px){
  .math__grid{ grid-template-columns: 1fr; }
  .math__kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mathTable{ min-width: 520px; }
}
@media (max-width: 560px){
  .math__kpis{ grid-template-columns: 1fr; }
  .mathTable{ min-width: 460px; }
}
/* ==========================================
   Tablas "stack" en móvil (vertical/cards)
   Requiere data-label="" en cada <td>
   ========================================== */
@media (max-width: 720px){
  /* Evita scroll horizontal: en móvil las tablas se vuelven tarjetas */
  .tableWrap{ overflow: visible; }

  .mathTable--stack{
    min-width: 0 !important;
    border: 0;
  }
  .mathTable--stack thead{ display: none; }

  .mathTable--stack,
  .mathTable--stack tbody,
  .mathTable--stack tr,
  .mathTable--stack td{
    display: block;
    width: 100%;
  }

  .mathTable--stack tr{
    margin: 0 0 10px;
    border: 1px solid var(--line2);
    border-radius: 0px;
    overflow: hidden;
    background: rgba(0,0,0,.10);
  }

  .mathTable--stack td{
    border-bottom: 1px solid var(--line2);
    padding: 10px 12px;
  }
  .mathTable--stack td:last-child{ border-bottom: 0; }

  /* Etiqueta de columna encima del contenido */
  .mathTable--stack td::before{
    content: attr(data-label);
    display: block;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(92,200,255,.92);
    margin-bottom: 6px;
  }

  /* Evita reglas de ancho fijo */
  .mathTable td:first-child{ width: auto; }

  /* Listas dentro de celdas */
  .mathTable--stack td ul{ margin: 6px 0 0; padding-left: 16px; }
}
/* marketing.css */
/* Extiende tu styles.css sin romperlo. Mantiene estética “científica” y añade enfoque de venta. */

.decisionBar{
  border-bottom:1px solid var(--line);
  background: rgba(15,27,45,.85);
  backdrop-filter: blur(6px);
}
.decisionBar__inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.decisionBar__txt{
  color: rgba(230,237,243,.92);
  font-size:12px;
  line-height:1.45;
}
.decisionBar__cta{
  white-space:nowrap;
}

.hero--buy .hero__inner{
  padding-top: 26px;
}
.hero__kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 6px 10px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.03);
  border-radius: 0px;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 900;
  color: rgba(92,200,255,.95);
  margin-bottom: 10px;
}
.hero__lead{
  font-size:13px;
  line-height:1.65;
  color: var(--muted);
  max-width: 78ch;
}

.stats--buy .stat{
  border-radius: 0px;
}

.hero__panel--buy{
  border-radius: 0px;
}
.panel__list--buy{
  font-size:12px;
  line-height:1.55;
}
.buyBox{
  margin-top: 12px;
  border-top:1px solid var(--line2);
  padding-top: 12px;
}
.buyBox__t{
  font-weight:900;
  margin-bottom: 8px;
}
.buyBox__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 10px;
}
.buyBox__cta{
  width:100%;
  justify-content:center;
}
.buyBox__note{
  margin-top: 8px;
}

/* Proof strip */
.proofStrip{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.proofStrip__item{
  background: rgba(0,0,0,.10);
  border:1px solid var(--line2);
  border-radius: 0px;
  padding: 10px;
}
.proofStrip__t{
  font-weight: 900;
  margin-bottom: 6px;
  font-size: 12px;
}
.proofStrip__b{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}

/* WHY */
.why{
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.why__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.why__head h2{ margin: 0 0 8px; }
.why__head .muted{ max-width: 92ch; }

.whyGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  align-items: stretch;
}
.whyCard{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0px;
  padding: 12px;
}
.whyCard__t{
  font-weight: 900;
  margin-bottom: 8px;
}
.whyCard__b{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.whyCard--cta{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  border-color: var(--line2);
  background: linear-gradient(180deg, rgba(200,200,255,.06), rgba(0,0,0,.08));
}

/* CARDS */
.cards{
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.cards__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.cards__head h2{ margin: 0 0 8px; }
.cardsGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.cardShow{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0px;
  overflow:hidden;
  display:grid;
  grid-template-columns: 240px 1fr;
  min-height: 220px;
}
.cardShow--wide{
  grid-column: 1 / -1;
}
.cardShow__img{
  background: rgba(0,0,0,.18);
  border-right: 1px solid var(--line2);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
}
.cardShow__img img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 0px;
  border: 1px solid rgba(255,255,255,.08);
}
.cardShow__body{
  padding: 12px;
}
.cardShow__tag{
  display:inline-flex;
  padding: 4px 10px;
  border-radius: 0px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  color: rgba(92,200,255,.95);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.cardShow h3{
  margin: 0 0 8px;
  font-size: 14px;
}
.formula--mini{
  margin-top: 10px;
  padding: 8px 10px;
}

/* BUY STRIP */
.buyStrip{
  margin-top: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0px;
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.buyStrip__t{ font-weight: 900; }
.buyStrip__b{ color: var(--muted); font-size: 12px; line-height: 1.55; }
.buyStrip--football{
  margin-top: 14px;
}

/* FOOTBALL SECTION */
.football{
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.football__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}
.football h2{ margin:0 0 8px; }

/* FAQ */
.faq{
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.faq__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* FINAL CTA */
.finalCTA{
  margin-top: 12px;
  background: linear-gradient(180deg, rgba(255,59,107,.08), rgba(0,0,0,.10));
  border: 1px solid rgba(255,59,107,.28);
  border-radius: 0px;
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.finalCTA__t{
  font-weight: 900;
  margin-bottom: 6px;
}
.finalCTA__b{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}
.finalCTA__btn{
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 980px){
  .decisionBar__inner{ flex-direction: column; align-items: stretch; }
  .proofStrip{ grid-template-columns: 1fr; }
  .whyGrid{ grid-template-columns: 1fr; }
  .cardsGrid{ grid-template-columns: 1fr; }
  .cardShow{ grid-template-columns: 1fr; }
  .cardShow__img{ border-right: 0; border-bottom: 1px solid var(--line2); }
}

/* ===================================================================
   V7 (simulator-first) — DOCK + TOPBAR + SIM CLARITY
   - Mantiene IDs/hooks del simulador (app.js)
   - Mejora legibilidad, separación y responsive
   =================================================================== */

:root{
  /* V7 vibe: monocromo elegante con contraste real */
  --bg:#09080b;
  --paper:#08070a;
  --ink:rgba(255, 255, 255, 0.9);
  --muted:rgba(255, 255, 255, 0.8);
  --line:rgba(255, 255, 255, 0.1);
  --line2:rgba(255, 255, 255, 0.4);
  --hard:#ffffff;
  --accent:#ffffff;

  /* Layout tokens */
  --dock-w: 320px;
  --topbar-h: 62px;
  --pad: 16px;
  --pad2: 24px;
  --cell: clamp(18px, 5.0vw, 38px);
  --label: clamp(16px, 4.6vw, 26px);

}

html{ scroll-behavior: smooth; }

body{
  background:var(--bg) !important;
  color:var(--ink) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  letter-spacing: .02em;
}

/* ---------- Topbar (móvil + desktop) ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index: 20000;
  height: var(--topbar-h);
  background: rgba(6,6,7,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.topbar__inner{
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 0 var(--pad);
}
.topbar__menu{
  display:none;
  padding: 10px 12px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  cursor:pointer;
  user-select:none;
}
.brand{ min-width: 0; display:flex; flex-direction:row; gap:25px; }
.brand__mark{
  border: 1px solid var(--ink);
  padding: 8px 10px;
  font-weight: 900;
  letter-spacing: .22em;
}
.brand__sub{ font-size: 11px; color: var(--muted); letter-spacing: .10em; }

.topbar__right{ display:flex; align-items:center; gap: 10px; }

/* Mobile portrait: topbar en 2 filas (sin solapes) */
@media (max-width: 640px){
  :root{ --topbar-h: auto; }
  .topbar{ height: auto; }
  .topbar__inner{
    height: auto;
    padding: 10px var(--pad);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-auto-rows: auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
  }
  .topbar__menu{ display:inline-block; padding: 10px 10px; font-size: 11px; letter-spacing: .14em; }
  .brand{ align-items:center; text-align:center; }
  .brand__mark{ padding: 8px 10px; font-size: 12px; }
  .brand__sub{ display:none; }

  /* Aplana topbar__right para poder colocar langs y CTA en celdas distintas */
  .topbar__right{ display: contents; }
  .cta{
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    padding: 10px 12px;
    font-size: 11px;
    letter-spacing: .12em;
  }
  .langs{
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .langs .lang{ padding: 10px 10px; font-size: 11px; }
}

/* Mobile landscape (poca altura): una fila compacta */
@media (max-width: 980px) and (max-height: 480px){
  :root{ --topbar-h: 48px; }
  .topbar{ height: var(--topbar-h); }
  .topbar__inner{ height: var(--topbar-h); padding: 0 12px; }
  .brand__sub{ display:none; }
  .topbar__menu{ padding: 8px 10px; font-size: 10px; }
  .brand__mark{ padding: 7px 9px; font-size: 12px; }
  .langs .lang{ padding: 8px 8px; font-size: 10px; }
  .cta{ padding: 8px 10px; font-size: 10px; letter-spacing: .10em; }
}

/* Lang buttons become segmented */
.langs{ display:flex; align-items:stretch; }
.langs .lang{
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  padding: 10px 10px;
  font-weight: 800;
  letter-spacing: .10em;
  cursor:pointer;
  border-radius:0;
  margin:0;
  line-height:1;
}
.langs .lang + .lang{ margin-left: -1px; }
.langs .lang:hover,
.langs .lang:focus{ color: var(--ink); position:relative; z-index:2; }
.langs .lang.is-on{ color: var(--bg); background: var(--ink); border-color: var(--ink); }

.cta{
  text-decoration:none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing: .14em;
}
.cta:hover{ filter: brightness(1.05); }

/* ---------- Dock (desktop fijo / móvil offcanvas) ---------- */
.dock{
  position: fixed;
  left: 0;
  top: var(--topbar-h);
  bottom: 0;
  width: var(--dock-w);
  background: var(--paper);
  border-right: 1px solid var(--line);
  z-index: 0; /*15000;*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.dock__inner{ min-height: 100%; display:flex; flex-direction:column; }
.dock__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
}
.dock__title{ font-weight: 900; letter-spacing: .22em; }
.dock__close{ display:none; border: 1px solid var(--line2); padding: 4px 10px; cursor:pointer; user-select:none; }

.dock__nav{ display:flex; flex-direction:column; }
.dock__item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
  text-decoration:none;
  color: var(--ink);
}
.dock__item:hover{ background: rgba(255,255,255,.03); }
.dock__k{ color: var(--muted); font-weight: 900; letter-spacing: .10em; min-width: 30px; }
.dock__t{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal; /* permite salto por espacios, NO corta palabras */
  overflow: visible;
  text-overflow: unset;
  word-break: normal;
  overflow-wrap: normal;
}

.dock__foot{ margin-top:auto; padding: 14px var(--pad); border-top: 1px solid var(--line); display:flex; flex-direction:column; gap: 10px; }
.dock__note{ color: var(--muted); font-size: 12px; letter-spacing: .10em; }
.dock__buy{ text-decoration:none; border: 1px solid var(--ink); padding: 10px 12px; font-weight: 900; letter-spacing: .10em; background: transparent; }
.dock__buy:hover{ background: var(--ink); color: var(--bg); }

.dockScrim{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 14000;
}

.content{
  margin-left: var(--dock-w);
  min-height: 100vh;
}

@media (max-width: 980px){
  :root{ --dock-w: 320px; }
  .topbar__menu{ display:inline-block; }
  /* Topbar compacta para tablets/móviles (evita wraps feos) */
  .topbar__inner{ padding: 0 12px; }
  .brand__sub{ display:none; }
  .brand__mark{ padding: 7px 9px; font-size: 12px; }
  .langs .lang{ padding: 9px 9px; font-size: 11px; }
  .cta{ padding: 9px 11px; font-size: 11px; letter-spacing: .12em; }
  .dock{
    top: 0;
    width: min(var(--dock-w), 92vw);
    transform: translateX(-105%);
    transition: transform .18s ease-out;
    z-index: 30000;
  }
  .dock__close{ display:inline-block; }
  .content{ margin-left: 0; }
  #dockToggle:checked ~ .dock{ transform: translateX(0); }
  #dockToggle:checked ~ .dockScrim{ display:block; }
}

/* ---------- De-APIÑAR: espaciado general sin “márgenes raros” ---------- */
.hero__inner,
.sim__inner,
.cards__inner,
.why__inner,
.math__inner,
.football__inner,
.rules__inner,
.faq__inner,
.foot__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Decision bar: ya no “aprieta” y no se monta */
.decisionBar{
  position: relative;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.decisionBar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.decisionBar__txt{ color: var(--muted); font-size: 12px; line-height: 1.4; }

/* ---------- Botones: segmentados y sin “borde cortado” ---------- */
.btn,
button.btn{
  border-radius: 0 !important;
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.btn:hover{ background: rgba(255,255,255,.04); position:relative; z-index:2; }
.btn--ghost{ background: transparent; }
.btn--danger{ border-color: rgba(255,90,120,.5); }

/* Fix: cuando están en fila, que no se “coman” el borde */
.hud__modeBtns,
.hud__btns,
.tourPanel__btns{ display:flex; align-items:stretch; flex-wrap:wrap; gap:0; overflow:visible; }
.hud__modeBtns .btn + .btn,
.hud__btns .btn + .btn,
.tourPanel__btns .btn + .btn{ margin-left: -1px; }

/* ---------- SIMULADOR: más claro y responsive ---------- */
.sim{
  border-top: 1px solid var(--line);
}
.sim__head h2{ letter-spacing: .10em; text-transform: uppercase; }

.sim__layout{
  display:grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

@media (max-width: 980px){
  .sim__layout{ grid-template-columns: 1fr; }
  .hud{ order: 2; }
  .boardWrap{ order: 1; }
}

.hud{
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0;
}
.hud__block{
  /*border-bottom: 1px solid var(--line);*/
  margin: 0;
  padding: 12px 12px;
}
/*.hud__block:last-child{ border-bottom: 0; }*/
.hud__title{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.hud__row{ display:flex; justify-content:space-between; gap:10px; font-size: 12px; }
.hud__row strong{ color: var(--ink); }

.hud__label{ display:flex; flex-direction:column; gap: 8px; font-size: 12px; color: var(--muted); }

/* Select que cuadra con el HUD */
.hud__select,
#actionSelect{
  width: 100%;
  border-radius:0;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 800;
  letter-spacing: .06em;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 2.5em;
  background-repeat: no-repeat;
}
.hud__select:focus{ outline: 2px solid rgba(255,255,255,.20); outline-offset: 2px; }

/* Hints */
.hud__hint{ color: var(--muted); font-size: 12px; line-height: 1.45; border-left: 2px solid rgba(255,255,255,.18); padding-left: 10px; margin-top: 10px; }

/* Log: claro y con altura estable */
.log{
  background: rgba(0,0,0,.22);
  border: 1px solid var(--line2);
  padding: 10px;
  max-height: 260px;
  overflow: auto;
}

/* BoardWrap: fondo sólido + borde + padding coherente */
.boardWrap{
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px;
  overflow: auto;
  align-items: center;
}

/* Fix visual: el tablero no “desborda” su fondo */
#board.board{
  background: transparent;
  padding: 0;
}

/* Casillas jugables con más contraste (claridad) */
.cell--play{
  border-color: rgba(255,255,255,.22);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.12) 0px,
      rgba(255,255,255,.12) 1px,
      rgba(255,255,255,0) 1px,
      rgba(255,255,255,0) 6px);
}

/* Leyenda más compacta y legible */
.boardLegend{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); gap: 14px; }
.chip{ border-radius: 0; border-color: rgba(255,255,255,.35); }

/* Tour panel siempre por encima del spotlight */
.tourPanel{ z-index: 99999 !important; }

/* En tour-show-playable el velo no tapa botones */
body.tour-mode.tour-show-playable .boardWrap::after{ z-index: 1; }


/* Patch: reordenar simulador en móvil (tablero primero) */
.sim__layout{ grid-template-areas: "hud board"; }
.sim__layout > .hud{ grid-area: hud; }
.sim__layout > .boardWrap{ grid-area: board; }
@media (max-width: 980px){
  .sim__layout{ grid-template-areas: "board" "hud"; }
}

/* Dock: evitar scroll horizontal */
.dock{ overflow-x: hidden; }
/* =========================================
   SELECT + OPTIONS: blanco sobre negro
   (dropdown menu incluido)
   ========================================= */

/* Global (si quieres que afecte a TODOS los <select>) */
select{
  background:#000 !important;
  color:#fff !important;
  color-scheme: dark;
}
select option,
select optgroup{
  background:#000 !important;
  color:#fff !important;
}

/* Extra: por si algún estilo específico estaba pisando en el HUD */
.hud__select,
#actionSelect{
  background:#000 !important;
  color:#fff !important;
  color-scheme: dark;
}
.hud__select option,
#actionSelect option,
.hud__select optgroup,
#actionSelect optgroup{
  background:#000 !important;
  color:#fff !important;
}