/* ===================== TABLERO ===================== */
:root{
      --bg:#000;
      --panel:#050505;
      --panel-2:#0c0c0c;
      --panel-3:#111;
      --line:#242424;
      --line-red:#3a090d;
      --red-2:#9d1d27;
      --text:#c8beb4;
      --text-soft:#aaa29a;
      --muted:#8f8680;
      --gold:#d6a94f;
      --shadow:rgba(0,0,0,.78);
      --radius:7px;
      --wod-panel-height:240px;
      --center-bar-gap:7px;
    }

    body.forja-tablero-mode{
      --red:#6f1119;
      color:var(--text);
    }
    body.forja-tablero-mode::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:50;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 50% 50%, transparent 38%, rgba(0,0,0,.42));
      opacity:.28;
      mix-blend-mode:screen;
    }
    /* Diseño exacto anterior del tablero, aislado al modo tablero.
       Antes estas reglas eran globales; ahora se aplican a todos los botones/campos
       visibles en partida sin contaminar el menú principal. */
    body.forja-tablero-mode button,
    body.forja-tablero-mode input,
    body.forja-tablero-mode select{font:inherit;}
    body.forja-tablero-mode button{
      min-height:30px;
      border:1px solid var(--line);
      border-radius:3px;
      color:var(--text-soft);
      background:linear-gradient(180deg,#0f0f0f 0%,#050505 100%);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.66), inset 0 1px rgba(255,255,255,.035);
      text-shadow:0 1px 2px #000;
      cursor:pointer;
    }
    body.forja-tablero-mode button:hover{filter:brightness(1.12); border-color:#4d1016;}
    body.forja-tablero-mode input,
    body.forja-tablero-mode select{
      background:#050505;
      color:var(--text);
      border:1px solid #2a2a2a;
      border-radius:3px;
      outline:none;
    }

    .page-frame{
      /* Lienzo fijo del tablero: todo se escala como una sola pieza.
         Se centra con posición absoluta para que pantallas pequeñas no lo recorten
         por el tamaño de layout sin transformar. */
      position:absolute;
      left:50%;
      top:50%;
      width:var(--forja-board-width,2013.333px);
      height:var(--forja-board-height,1080px);
      transform:translate(-50%,-50%) scale(var(--forja-board-scale,.9));
      transform-origin:center center;
      flex:0 0 auto;
      display:grid;
      grid-template-rows:75px minmax(0,1fr) 46px;
      gap:6px;
      background:#000;
      overflow:visible;
    }

    .top-test-bar,
    .bottom-test-bar,
    .ornate{
      border:1px solid #171717;
      outline:1px solid rgba(115,24,32,.28);
      border-radius:var(--radius);
      background:linear-gradient(180deg,#101010 0%,#050505 100%);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.82), inset 0 0 22px rgba(0,0,0,.70), 0 8px 18px rgba(0,0,0,.42);
      overflow:hidden;
      position:relative;
    }
    .ornate::after{
      content:"";
      position:absolute;
      inset:3px;
      border:1px solid rgba(111,17,25,.28);
      border-radius:4px;
      pointer-events:none;
      z-index:5;
    }