/* ═══════════════ EL SISTEMA (2026-09-26) — Etapa 2 del brief visual (Docs/PromptMaestroVisual.md) ═══════════════
   Medido antes de escribir esto (tools: inventario sobre tema/*.css): 94 tamaños de letra, 448 sombras distintas,
   1.023 colores hex, 79 duraciones, 40 z-index, 122 radios, 21 familias, 1.890 !important. Cuatro capas se pisan
   sobre la portada (base → casa-del-15 → inicio → experiencia-premium). Eso es la mitad de la sensación de «hecho
   por varias personas».

   Acá vive UNA sola escalera para todo: color (OKLCH, con respaldo hex), UNA luz (arriba a la izquierda: toda
   sombra cae abajo a la derecha, todo brillo asoma arriba a la izquierda), cinco niveles de elevación con su
   sombra Y su superficie, espacio de 4 px, tipografía modular con clamp(), radios (la escalera que ya existía),
   duraciones y curvas declaradas. Y cinco MATERIALES —grafito, cuero, paño, oro, madera— que son los del mundo del
   juego: boliche argentino, cuero, oro viejo, paño. Lo que no está en esta hoja no es «diseño»: es un valor suelto.

   La portada (#menu) es la pantalla de muestra: se aprueba acá y recién después se extiende, pantalla por pantalla,
   retirando las capas viejas. Los mazos y el emblema no se tocan: se ILUMINAN mejor, nada más. */

:root {
  /* ── color: identidad (los valores aprobados) en OKLCH, y derivados con color-mix ── */
  --c-grafito: #131517;      --c-grafito-2: #1c1f22;      --c-grafito-3: #26292d;
  --c-cuero: #3a210a;        --c-cuero-2: #5a3413;        --c-cuero-3: #7a4a1c;
  --c-pano: #175d3d;         --c-pano-hondo: #0c3a24;     --c-pano-luz: #23784f;
  --c-oro: #e8c34a;          --c-oro-hondo: #b8912a;      --c-oro-luz: #fff0ad;     --c-oro-sombra: #6b4a16;
  --c-madera: #5d3a1a;       --c-madera-hondo: #2e1a0a;
  --c-crema: #f7f2e4;        --c-crema-2: #d7c3a1;        --c-tinta: #1a120d;
  --c-oro-tinta: #33200e;    /* la tinta sobre oro: AA sobre --c-oro (7,9:1) */
  --c-copa: #c0392b; --c-espada: #2e5fa3; --c-basto: #2e7d32; --c-palo-oro: #d4a929;
  /* ── la luz: UNA, arriba a la izquierda. Las sombras salen de acá; el brillo también. ── */
  --luz-x: 1; --luz-y: 1.4;                       /* dirección de la sombra (la luz viene del lado opuesto) */
  --brillo-borde: inset 0 1px 0 rgba(255, 243, 215, .22);
  /* ── elevación: sombra + superficie, cinco niveles ── */
  --e0: none;
  --e1: 0 calc(1px * var(--luz-y)) 2px rgba(0,0,0,.45), 0 calc(2px * var(--luz-y)) 6px rgba(0,0,0,.30);
  --e2: 0 calc(2px * var(--luz-y)) 4px rgba(0,0,0,.45), 0 calc(6px * var(--luz-y)) 16px rgba(0,0,0,.36);
  --e3: 0 calc(3px * var(--luz-y)) 8px rgba(0,0,0,.50), 0 calc(12px * var(--luz-y)) 32px rgba(0,0,0,.42);
  --e4: 0 calc(6px * var(--luz-y)) 14px rgba(0,0,0,.55), 0 calc(24px * var(--luz-y)) 56px rgba(0,0,0,.48);
  /* ── espacio: 4·8·12·16·24·32·48·64·96 ── */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* ── tipografía: dos familias (Trocchi para nombrar, Alegreya para leer; Sigmar sólo la marca) y una escala ── */
  --f-display: 'Trocchi', Georgia, serif;
  --f-texto: 'Alegreya', Georgia, serif;
  --t-12: clamp(12px, .72rem + .15vw, 13px);  --t-14: clamp(13.5px, .82rem + .2vw, 14.5px);
  --t-16: clamp(15px, .92rem + .25vw, 16.5px); --t-18: clamp(17px, 1rem + .35vw, 18.5px);
  --t-21: clamp(19px, 1.1rem + .5vw, 22px);   --t-26: clamp(23px, 1.3rem + .8vw, 27px);
  --t-34: clamp(28px, 1.6rem + 1.4vw, 35px);  --t-44: clamp(34px, 1.9rem + 2.2vw, 46px);
  /* ── radios: la escalera que ya existía, más el chico ── */
  --r-chico: 8px;
  /* ── movimiento: duraciones y curvas con nombre. Nada de `ease` por defecto. ── */
  --d-rapido: 120ms; --d-base: 200ms; --d-pausado: 320ms; --d-escena: 520ms;
  --c-entrada: cubic-bezier(.2, .7, .2, 1);
  --c-salida: cubic-bezier(.4, 0, 1, 1);
  --c-enfasis: cubic-bezier(.2, .9, .3, 1.25);
  --c-resorte: linear(0, .008 1.1%, .03 2.2%, .13 4.6%, .43 9.2%, .68 13.6%, .86 17.5%, 1.02 22.4%, 1.07 26.2%, 1.08 29.8%, 1.06 34.4%, 1 41.4%, .98 49.5%, 1 62.7%, 1);
}
@supports (color: oklch(50% 0 0)) {
  :root {
    --c-grafito: oklch(17% .006 250); --c-grafito-2: oklch(21% .007 250); --c-grafito-3: oklch(25% .008 250);
    --c-cuero: oklch(26% .065 58);   --c-cuero-2: oklch(34% .085 60);  --c-cuero-3: oklch(42% .10 62);
    --c-pano: oklch(41% .095 160);   --c-pano-hondo: oklch(30% .075 160); --c-pano-luz: oklch(50% .11 160);
    --c-oro: oklch(83% .145 92);     --c-oro-hondo: oklch(67% .13 85);   --c-oro-luz: oklch(95% .07 95);  --c-oro-sombra: oklch(42% .09 80);
    --c-madera: oklch(35% .08 55);   --c-madera-hondo: oklch(22% .06 50);
    --c-crema: oklch(96% .015 90);   --c-crema-2: oklch(82% .045 85);    --c-tinta: oklch(16% .02 60);
  }
}

/* ═══════════ LA PORTADA ═══════════ */
/* El fondo: EL GRAN SALÓN (dueño, 2026-09-27: «no me gusta mucho el fondo grafito… ponele de nuevo el gran salón»).
   El grafito del 26/09 se fue: esta hoja ya no pinta el fondo de la portada, y vuelve a mandar el salón de La Casa
   del 15 (tema/casa-del-15.css: salon-mobile.webp en el teléfono, salon-desktop.webp en la compu), tal cual se veía
   hasta ese día. El motor de materiales tampoco pinta fondo en la portada (juego.js, fondo 2): sólo las piezas y sus
   sombras, sobre el salón. */
#menu {
  color: var(--c-crema);
  font: 400 var(--t-18)/1.45 var(--f-texto);
}
#menu::after { background: none !important; box-shadow: inset 0 0 120px rgba(0,0,0,.55) !important; }
/* (26/09, dueño: «al scrollear todo se corre») el lienzo es parte del contenido: absoluto, del alto scrolleable, y
   scrollea con él en el compositor. El alto lo pone el motor. */
#menu > #materiales {
  position: absolute !important; top: 0 !important; left: 0 !important; z-index: 0 !important; width: 100%;
  max-width: 100%; /* El ancho en píxeles del motor puede conservar la medida anterior hasta el próximo redibujo. */
  display: block; pointer-events: none;
  /* SIN grid-column: un hijo absoluto de una grilla con lugar asignado se mide contra su celda, no contra la caja
     del contenedor, y el lienzo (que mide el ancho entero) desbordaba a la derecha (responsive-total lo cazó). */
  grid-column: auto !important; grid-row: auto !important;
}
#menu > :not(.hudtop):not(#materiales) { position: relative; z-index: 1; }
#menu .logo15 .crest { filter: drop-shadow(0 calc(10px * var(--luz-y)) 18px rgba(0,0,0,.7)) !important; }
#menu .logo15 .promesa { color: var(--c-crema-2) !important; font: 400 var(--t-18)/1.45 var(--f-texto) !important; letter-spacing: .02em; }

/* Los controles de la portada: tipografía y radios de la escalera, foco visible, movimiento sólo en transform. */
#menu .menupanel :is(> button, > .jugarfila > button, > .modosfila > button):not(#homeCamino) {
  font-family: var(--f-display) !important; border-radius: var(--r-med) !important;
  transition: transform var(--d-rapido) var(--c-salida), filter var(--d-rapido) var(--c-salida), border-color var(--d-rapido) var(--c-salida);
}
#menu .menupanel :is(> button, > .jugarfila > button, > .modosfila > button):focus-visible { outline: 3px solid var(--c-oro-luz); outline-offset: 3px; }

/* ORO — un solo botón de oro en la pantalla: JUGAR AHORA. Bisel con la luz de arriba a la izquierda, base oscura
   abajo (el botón tiene espesor), y un reflejo que se corre con la inclinación del teléfono (--px, la lámpara). */
#menu .menupanel :is(> button, > .jugarfila > button).primary,
#menu .menupanel > .jugarfila > #menuConfig.ajustarmesa {
  color: var(--c-oro-tinta) !important; letter-spacing: .06em !important; font-size: var(--t-21) !important;
  border: 1px solid #fff2c4 !important;
  background:
    radial-gradient(70% 140% at calc(28% + var(--px, 0) * 22%) -10%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(172deg, var(--c-oro-luz) 0%, var(--c-oro) 42%, var(--c-oro-hondo) 100%) !important;
  box-shadow:
    inset 0 1px 0 #fffbe6, inset 0 -2px 0 rgba(120, 88, 20, .55),
    0 calc(4px * var(--luz-y)) 0 var(--c-oro-sombra), var(--e2) !important;
  text-shadow: 0 1px 0 rgba(255, 246, 200, .7) !important;
}
#menu .menupanel > .jugarfila > #menuPlay { border-radius: var(--r-med) 0 0 var(--r-med) !important; min-height: 68px; }
#menu .menupanel > .jugarfila > #menuConfig.ajustarmesa {
  border-left: 1px solid rgba(90, 60, 10, .35) !important; border-radius: 0 var(--r-med) var(--r-med) 0 !important;
  width: 64px; min-height: 68px;
}
#menu .menupanel > .jugarfila > #menuConfig.ajustarmesa svg { stroke: var(--c-oro-tinta) !important; fill: none; stroke-width: 1.7; }
#menu .menupanel :is(> button, > .jugarfila > button).primary:active,
#menu .menupanel > .jugarfila > #menuConfig.ajustarmesa:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fffbe6, inset 0 -1px 0 rgba(120,88,20,.55), 0 calc(2px * var(--luz-y)) 0 var(--c-oro-sombra), var(--e1) !important; }

/* PAÑO — la mesa. Con una partida abierta, «Seguir la partida» toma el oro (es LA acción) y JUGAR AHORA baja a
   paño; el engranaje sigue SIEMPRE el material de su botón (antes quedaba de oro pegado a un botón verde). */
#menu .menupanel > .jugarfila > #menuPlay:not(.primary),
#menu .menupanel > .jugarfila:has(> #menuPlay:not(.primary)) > #menuConfig.ajustarmesa {
  color: var(--c-crema) !important; letter-spacing: .06em !important; font-size: var(--t-18) !important;
  border: 1px solid rgba(232, 195, 74, .55) !important;
  background:
    radial-gradient(80% 120% at calc(28% + var(--px, 0) * 22%) 0%, rgba(255,255,255,.12), transparent 60%),
    var(--felt-tex), linear-gradient(170deg, var(--c-pano-luz), var(--c-pano) 45%, var(--c-pano-hondo)) !important;
  box-shadow: var(--brillo-borde), inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -3px 8px rgba(0,0,0,.35), 0 calc(3px * var(--luz-y)) 0 #06261a, var(--e2) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6) !important;
}
#menu .menupanel > .jugarfila:has(> #menuPlay:not(.primary)) > #menuConfig.ajustarmesa { border-left-color: rgba(0,0,0,.35) !important; }
#menu .menupanel > .jugarfila:has(> #menuPlay:not(.primary)) > #menuConfig.ajustarmesa svg { stroke: var(--c-oro-luz) !important; }

/* (Dueño, 2026-09-27) EL ENGRANAJE ES NARANJA, pegado al botón que sea (oro o paño): «el fondo del botón de ajustes no
   tiene que ser verde, tiene que ser naranja, un naranja hermoso». Mismo bisel, misma luz que sigue al teléfono y
   mismo espesor que el oro; el ícono, en tinta oscura. Va después de las dos reglas de arriba para ganarles. */
#menu .menupanel > .jugarfila > #menuConfig.ajustarmesa,
#menu .menupanel > .jugarfila:has(> #menuPlay:not(.primary)) > #menuConfig.ajustarmesa {
  border: 1px solid #ffd6a8 !important; border-left: 1px solid rgba(110, 45, 0, .45) !important;
  background:
    radial-gradient(70% 140% at calc(28% + var(--px, 0) * 22%) -10%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    linear-gradient(172deg, #ffb45e 0%, #f5841f 45%, #c55a0c 100%) !important;
  box-shadow:
    inset 0 1px 0 #ffe8cc, inset 0 -2px 0 rgba(120, 50, 0, .55),
    0 calc(4px * var(--luz-y)) 0 #7a3406, var(--e2) !important;
}
#menu .menupanel > .jugarfila > #menuConfig.ajustarmesa svg,
#menu .menupanel > .jugarfila:has(> #menuPlay:not(.primary)) > #menuConfig.ajustarmesa svg { stroke: #3b1800 !important; }
#menu .menupanel > .jugarfila > #menuConfig.ajustarmesa:active,
#menu .menupanel > .jugarfila:has(> #menuPlay:not(.primary)) > #menuConfig.ajustarmesa:active {
  box-shadow: inset 0 1px 0 #ffe8cc, inset 0 -1px 0 rgba(120, 50, 0, .55), 0 calc(2px * var(--luz-y)) 0 #7a3406, var(--e1) !important;
}

/* (Dueño, 2026-09-27) «EN PARTIDA NUEVA HAY UNA LÍNEA QUE RECUBRE EL BOTÓN, PERO EL BOTÓN ES MÁS GORDO». Lo era: el
   espesor del paño (una franja dura de 4 px) caía POR FUERA del filete dorado, y el botón de la segunda acción medía
   68 px contra los 55 de «Seguir la partida», la primera. Ahora el espesor va adentro (sombra interior abajo), el
   filete abraza el botón entero, y la segunda acción tiene el alto de la primera. Con JUGAR de oro no cambia nada. */
#menu .menupanel > .jugarfila > #menuPlay:not(.primary),
#menu .menupanel > .jugarfila:has(> #menuPlay:not(.primary)) > #menuConfig.ajustarmesa { min-height: 55px !important; }
#menu .menupanel > .jugarfila > #menuPlay:not(.primary) {
  box-shadow: var(--brillo-borde), inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -4px 0 rgba(0,0,0,.3),
    inset 0 -3px 8px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.35) !important;
}
#menu .menupanel > .jugarfila:has(> #menuPlay:not(.primary)) > #menuConfig.ajustarmesa {
  box-shadow: inset 0 1px 0 #ffe8cc, inset 0 -4px 0 rgba(110, 40, 0, .5), 0 2px 4px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.35) !important;
}
#menu .menupanel > .jugarfila:has(> #menuPlay:not(.primary)) > #menuConfig.ajustarmesa:active {
  box-shadow: inset 0 1px 0 #ffe8cc, inset 0 -2px 0 rgba(110, 40, 0, .5), 0 1px 3px rgba(0,0,0,.45) !important;
}

/* CUERO — los modos con gente y las placas: cuero con costura (la orla punteada, medida a 7 px del borde) y
   filete de oro fino. El medallón se hunde en el cuero. */
#menu .menupanel > .modosfila > button.modo.aux,
#menu #homeCamino,
#menu .menupanel .misioncard,
#menu #tileCofre {
  color: var(--c-crema) !important;
  border: 1px solid rgba(232, 195, 74, .38) !important; border-radius: var(--r-med) !important;
  background:
    radial-gradient(90% 100% at 0% 0%, rgba(255, 220, 150, .14), transparent 55%),
    var(--leather-tex), linear-gradient(160deg, var(--c-cuero-2), var(--c-cuero) 70%, #2a1608) !important;
  box-shadow: var(--brillo-borde), inset 0 0 0 1px rgba(0,0,0,.4), var(--e2) !important;
  outline: 1px dashed rgba(232, 195, 74, .28); outline-offset: -7px;
}
#menu .menupanel > .modosfila > button.modo.aux { font-size: var(--t-16) !important; }
#menu .menupanel > .modosfila > button.modo.aux .modo-copy b { font: 400 var(--t-18)/1.15 var(--f-display); color: var(--c-oro-luz); letter-spacing: .02em; }
#menu .menupanel > .modosfila > button.modo.aux .modo-copy small { font: 400 var(--t-14)/1.3 var(--f-texto); color: var(--c-crema-2); }
#menu .menupanel > .modosfila > button.modo.aux .modo-arte {
  border: 1px solid rgba(232, 195, 74, .45); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4e2d12, #1e1006 70%);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,230,170,.18), 0 1px 0 rgba(255,230,170,.12);
}
#menu #homeCamino { padding: var(--s4) !important; }
#menu .ep-nivel { border-color: rgba(232,195,74,.55); background: linear-gradient(150deg, var(--c-cuero-3), var(--c-cuero)); box-shadow: inset 0 0 0 3px #1c0f06, inset 0 0 0 4px rgba(232,195,74,.35), var(--e1); }
#menu .ep-rango { font: 400 var(--t-21)/1.15 var(--f-display); color: var(--c-oro-luz); }
#menu .ep-overline { color: var(--c-crema-2); font-size: var(--t-12); letter-spacing: .12em; }
#menu .ep-camino-datos { font-size: var(--t-14); }
#menu .ep-progreso { border-color: rgba(232,195,74,.35); background: #0d0806; }
#menu .ep-progreso > i { background: linear-gradient(90deg, var(--c-oro-hondo), var(--c-oro-luz)); transition: width var(--d-pausado) var(--c-entrada); }

/* Los títulos de sección: la escalera, sin adjetivos. */
#menu .ep-seccion h2 { font: 400 var(--t-26)/1.2 var(--f-display) !important; color: var(--c-crema); letter-spacing: -.01em; text-wrap: balance; }
#menu .ep-seccion > span { color: var(--c-crema-2); font: 400 var(--t-14)/1.4 var(--f-texto); }

/* MADERA — las puertas de la Casa (Tienda, Gira, Amigos, Ranking, Perfil): su arte queda; el marco es el mismo
   para todas, con la luz de la lámpara arriba y la sombra que las despega del fondo. */
#menu #homeDestinos > .menutile {
  border: 1px solid rgba(232, 195, 74, .40) !important; border-radius: var(--r-med) !important;
  box-shadow: var(--brillo-borde), inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 40px rgba(0,0,0,.35), var(--e3) !important;
  transition: transform var(--d-base) var(--c-entrada), border-color var(--d-base) var(--c-salida) !important;
}
#menu #homeDestinos > .menutile .tname { font: 400 var(--t-26)/1.1 var(--f-display) !important; color: var(--c-crema) !important; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
#menu #homeDestinos #tileGira .tname { font-size: var(--t-34) !important; }
#menu #homeDestinos > .menutile .tsub { font: 400 var(--t-14)/1.3 var(--f-texto) !important; color: var(--c-crema-2) !important; }
#menu #homeDestinos > .menutile svg { border-color: rgba(232,195,74,.5) !important; background: rgba(20, 12, 4, .8) !important; box-shadow: var(--brillo-borde), var(--e1) !important; }
#menu #tileCofre .tname { font: 400 var(--t-26)/1.1 var(--f-display) !important; color: var(--c-oro-luz); }
#menu #tileCofre .tsub { font: 400 var(--t-16)/1.3 var(--f-texto) !important; color: var(--c-crema-2); }
#menu #tileCofre .cofre-art { filter: drop-shadow(0 calc(8px * var(--luz-y)) 10px rgba(0,0,0,.6)); }

/* Las placas de premios (misiones, pase, objetivo): cuero, y adentro la lectura con la escalera. */
#menu .menupanel .misioncard { padding: var(--s5) !important; }
#menu .menupanel .misioncard :is(.mhead, .hf-tit) { font: 400 var(--t-21)/1.2 var(--f-display) !important; color: var(--c-oro-luz) !important; }
#menu #misionList .mname { font-size: var(--t-16); }
#menu #misionList .mreward { font-size: var(--t-14); color: var(--c-oro); font-variant-numeric: tabular-nums; }
#menu #misionList .mision { border-top-color: rgba(232,195,74,.18); }
#menu #objetivoCard { background: radial-gradient(90% 100% at 0% 0%, rgba(255,255,255,.08), transparent 55%), var(--felt-tex), linear-gradient(160deg, var(--c-pano-luz), var(--c-pano) 60%, var(--c-pano-hondo)) !important; }
#menu #mananaCard { background: linear-gradient(160deg, var(--c-grafito-3), var(--c-grafito-2)) !important; outline: none; }
#menu .misioncard :is(.mbar, .pasebarra, .obarra) { border-color: rgba(232,195,74,.35) !important; background: #0d0806; }

/* Toda cifra que cambia, con dígitos tabulares: el saldo y los puntos ya no bailan. */
#menu :is(#walletN, #starN, .ep-xp, .mreward, #paseCardTxt) { font-variant-numeric: tabular-nums; }

@media (hover: hover) and (pointer: fine) {
  #menu #homeDestinos > .menutile:hover { transform: translateY(-2px) !important; border-color: rgba(232,195,74,.7) !important; }
  #menu .menupanel > .modosfila > button.modo.aux:hover { border-color: rgba(232,195,74,.65) !important; filter: brightness(1.06); }
  #menu .menupanel :is(> button, > .jugarfila > button).primary:hover { filter: brightness(1.04); }
}
@media (forced-colors: active) {
  #menu .menupanel > .modosfila > button.modo.aux, #menu #homeCamino, #menu .menupanel .misioncard, #menu #tileCofre,
  #menu .menupanel > .jugarfila > #menuPlay, #menu .menupanel :is(> button, > .jugarfila > button).primary {
    background: ButtonFace !important; color: ButtonText !important; border-color: ButtonText !important; box-shadow: none !important; outline: none;
  }
}

/* ═══════════ CON EL MOTOR DE MATERIALES (dueño, 2026-09-26: «ve por ahí») ═══════════
   Cuando la placa de video pinta las piezas (#menu.materiales, ver juego.js), las piezas se vuelven transparentes:
   el material —oro, cuero, paño, madera— ya no es CSS, es luz calculada. Lo de arriba queda como respaldo sin WebGL.
   Las puertas conservan su arte, metido adentro del marco de madera (background-clip: content-box). */
#menu.materiales .menupanel :is(> #menuResume, > .jugarfila > button, > #menuAprender, > .modosfila > button.modo),
#menu.materiales #homeCamino, #menu.materiales #homeCamino .ep-nivel, #menu.materiales #tileCofre, #menu.materiales .menupanel .misioncard {
  background: none !important; border-color: transparent !important; box-shadow: none !important; outline: none !important;
}
/* El material reemplaza la superficie, pero el foco sigue perteneciendo al control. */
#menu.materiales :is(#menuResume, #menuPlay, #menuConfig, #menuAprender, #menuAmigo, #menuRapida, #homeCamino, #tileCofre):focus-visible {
  outline: 3px solid var(--c-oro-luz) !important; outline-offset: 3px !important;
}
@media (forced-colors: active) {
  #menu.materiales :is(#menuResume, #menuPlay, #menuConfig, #menuAprender, #menuAmigo, #menuRapida, #homeCamino, #tileCofre):focus-visible { outline-color: Highlight !important; }
}
#menu.materiales #tileCofre { background: none !important; }
#menu.materiales #homeDestinos > .menutile {
  border-color: transparent !important; box-shadow: none !important; padding: 14px 14px 12px !important;
  background-clip: content-box, content-box !important; background-origin: content-box, content-box !important;
}
#menu.materiales #homeDestinos > .menutile::before { content: none !important; }
#menu.materiales #homeDestinos > .menutile :is(.tname, .tsub, svg) { margin-left: 8px; }
#menu.materiales #homeDestinos > .menutile svg { margin-top: 6px; }
#menu.materiales .menupanel > .modosfila > button.modo.aux .modo-arte {
  background: radial-gradient(circle at 35% 30%, #3a2210, #140a04 70%);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,230,170,.14);
}

/* ═══════════ LA MESA CON EL MOTOR DE MATERIALES (2026-09-26) ═══════════
   La placa pinta el salón de fondo, las barandas de madera (la fila del rival y la mano), las pastillas y los mandos
   de cuero, y le tira la sombra al paño. El PAÑO NO LO PINTA: es un artículo de la tienda (19 paños con su dibujo) y
   queda tal cual, como los naipes. CANTAR conserva su oro CSS porque respira con transform (la placa lee las cajas
   sólo cuando algo cambia y ese latido no es un cambio). El latido del turno de la pastilla también queda en CSS. */
.board > #materialesMesa {
  position: absolute !important; top: 0 !important; left: 0 !important; z-index: 0 !important; width: 100%;   /* la caja del tablero, no la pantalla: en computadora el tablero es una columna */
  display: block; pointer-events: none;
}
.board.materiales { background: none !important; box-shadow: none !important; border-inline-color: transparent !important; }
.board.materiales .hudchip { background: none !important; box-shadow: none !important; }
.board.materiales .hudchip:not(.turno) { border-color: transparent !important; }
.board.materiales .hudchip::before { content: none !important; }
.board.materiales :is(.rivalrow, .myrow) .hbtn { background: none !important; border-color: transparent !important; box-shadow: none !important; }
.board.materiales > .cantobar { background: none !important; border-color: transparent !important; box-shadow: none !important; }
.board.materiales .mesa { box-shadow: inset 0 0 0 5px rgba(56,17,7,.76), inset 0 0 0 7px rgba(241,202,95,.32), inset 0 20px 45px rgba(255,255,255,.035) !important; }

/* ═══════════ LA GIRA CON EL MOTOR DE MATERIALES (2026-09-26) ═══════════
   El paisaje de cada destino (arte del dueño) queda de fondo: la placa pinta en modo transparente sólo las fichas de
   cuero —rivales, placa del destino, flechas, volver— con su sombra cayendo sobre el paisaje. La ficha actual conserva
   su borde de oro CSS (es la señal de «te toca éste»); las bloqueadas, su candado y su gris. */
#gira > #materialesGira {
  position: absolute !important; top: 0 !important; left: 0 !important; z-index: 0 !important; width: 100%;
  display: block; pointer-events: none;
}
#gira.materiales > :not(#materialesGira) { position: relative; z-index: 1; }
#gira.materiales :is(.gplaca, .tr-ruta, .grival, .gflecha, #giraBack, .gdestinoestado, .gregla) { background: none !important; box-shadow: none !important; }
#gira.materiales :is(.gplaca, .tr-ruta, .grival:not(.actual), .gflecha, #giraBack, .gdestinoestado, .gregla) { border-color: transparent !important; }
#gira.materiales .grival::before, #gira.materiales .gplaca::before { content: none !important; }
#gira.materiales .grival.bloqueado { background: none !important; }

/* ═══════════ LAS VENTANAS CON EL MOTOR DE MATERIALES (2026-09-26) ═══════════
   Un solo lienzo se muda a la ventana abierta (.banner.show). El telón oscuro queda; la caja se vuelve transparente y
   la placa la pinta en cuero; adentro, las secciones de la tienda en madera y las fichas (estadísticas, cantos,
   medallas, filas del ranking, retratos) en cuero hundido. Los botones de oro y las fichas de artículos (.sw, .vitem)
   conservan su CSS: tienen estados (elegido, bloqueado) y arte propio. La guarda pampa de la caja se queda. */
#materialesVentanas { display: none; }
/* El contenedor puede encogerse antes de que el motor actualice el ancho en píxeles del lienzo. */
#materialesMesa, #materialesGira, #materialesVentanas { max-width: 100%; }
.banner.materiales > #materialesVentanas { display: block; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; pointer-events: none; }
.banner.materiales > .box { position: relative; z-index: 1; }
.banner.materiales > .box[data-pintada] { background: none !important; border-color: transparent !important; box-shadow: none !important; }
.banner.materiales :is(.esec, #vidriera, .pstat, .pcanto, .medalla, .retrato-ficha)[data-pintada] { background: none !important; box-shadow: none !important; border-color: transparent !important; }
.banner.materiales .rfila[data-pintada] { background: none !important; box-shadow: none !important; }
.banner.materiales .rfila[data-pintada]:not(.rsoy) { border-color: transparent !important; }
.banner.materiales .esec[data-pintada]::before { content: none !important; }

/* Ajustes: lectura en caja baja y controles parejos, con el oro reservado a la opción elegida.
   Sólo cambia la presentación; las clases .primary/.on siguen viniendo del estado existente. */
#settingsBanner .menurow {
  padding: 12px 14px !important; gap: 8px !important;
  background: linear-gradient(145deg, var(--c-grafito-3), var(--c-grafito-2)) !important;
  border-color: rgba(215, 195, 161, .24) !important; border-radius: var(--r-chico) !important;
}
#settingsBanner .menurow label {
  color: var(--c-crema) !important; font: 400 var(--t-18)/1.35 var(--f-texto) !important;
  letter-spacing: .01em !important; text-transform: none !important; text-align: left;
}
#settingsBanner .seg {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--r-chico) !important; background: #12100f !important;
}
#settingsBanner .seg button {
  min-height: 48px; padding: 8px 6px;
  font: 600 var(--t-18)/1.2 var(--f-texto) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--c-crema-2) !important;
  transition: color var(--d-rapido) var(--c-entrada), background-color var(--d-rapido) var(--c-entrada), transform var(--d-rapido) var(--c-entrada);
}
#settingsBanner .seg button:is(.on, .primary) {
  color: var(--c-oro-tinta) !important;
  background: linear-gradient(165deg, var(--c-oro-luz), var(--c-oro)) !important;
  border-color: var(--c-oro-luz) !important; box-shadow: var(--brillo-borde), var(--e1) !important;
}
#settingsBanner .seg button:focus-visible { outline: 2px solid var(--c-oro-luz) !important; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  #settingsBanner .seg button:not(.on):not(.primary):not(:disabled):hover { background: #ffffff12 !important; color: var(--c-crema) !important; }
}
@media (forced-colors: active) {
  #settingsBanner .menurow, #settingsBanner .seg { background: Canvas !important; border-color: CanvasText !important; }
  #settingsBanner .menurow label { color: CanvasText !important; }
  #settingsBanner .seg button { color: ButtonText !important; }
  /* Colores del sistema explícitos: evita la placa blanca que Chromium coloca detrás del texto. */
  #settingsBanner .seg button:is(.on, .primary) { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; border-color: Highlight !important; box-shadow: none !important; }
  #settingsBanner .seg button:focus-visible { outline-color: Highlight !important; }
}

/* ═══════════ LA TRANSICIÓN CONTINUA (Etapa 4, 2026-09-26) ═══════════
   Al abrir una pantalla (tienda, perfil, Gira, ajustes, ranking, amigos, cofre, pase, volver al Hogar) el navegador
   funde la anterior en la nueva con las curvas del sistema: la vieja se va rápido, la nueva entra pausada y apenas
   más grande, como si se acercara. Mientras dura la transición, el fundido propio de la ventana se apaga (sería
   doble). Con «reducir movimiento» no hay transición. */
@keyframes vt-sale { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: scale(1.015); } }
::view-transition-old(root) { animation: var(--d-base) var(--c-salida) both vt-sale; }
::view-transition-new(root) { animation: var(--d-pausado) var(--c-entrada) both vt-entra; }
html.vt .banner.show { animation: none !important; }

/* CLÁSICO · salón de grafito, nogal y latón. El arte se ve entero dentro de marcos más finos. */
/* (2026-09-27) El estilo clásico tampoco pinta el fondo de la portada: se ve el Gran Salón de tema/casa-del-15.css. */
body.estilo-clasico #menu .hudtop {
  background: linear-gradient(110deg, #241d17, #141618 64%) !important;
  border-bottom: 1px solid #c7a36666;
  box-shadow: 0 8px 24px #05070866, inset 0 -1px #080909;
}
body.estilo-clasico #menu .hudtop .walletchip {
  background: linear-gradient(#2b2a24, #191b19) !important;
  border-color: #b49b6866 !important; box-shadow: inset 0 1px #ffebc21f, 0 2px 5px #0005 !important;
}
body.estilo-clasico #menu .ep-seccion h2 { color: #fff2d5; letter-spacing: -.025em; }
body.estilo-clasico #menu #homeDestinos > .menutile {
  background-clip: border-box !important; background-origin: border-box !important;
  border: 1px solid #b89a64 !important; border-radius: 16px !important;
  box-shadow: inset 0 0 0 3px #151413, inset 0 0 0 4px #d7b87855, 0 6px 16px #0006 !important;
  padding: 22px !important;
}
body.estilo-clasico #menu #homeDestinos > .menutile .tname {
  font-size: 25px !important; line-height: 1.15 !important; letter-spacing: -.035em;
  text-shadow: 0 2px 4px #000, 0 0 18px #000;
}
body.estilo-clasico #menu #homeDestinos #tileGira .tname { font-size: 34px !important; }
body.estilo-clasico #menu #homeDestinos > .menutile .tsub {
  color: #fff0cf !important; background: #101512d9;
  padding: 4px 8px; border-left: 2px solid #d8b978; border-radius: 0 5px 5px 0;
  width: fit-content; max-width: 100%; text-shadow: none !important;
}
body.estilo-clasico #menu #homeDestinos > .menutile .clasico-icon {
  width: 44px !important; height: 44px !important; padding: 10px !important;
  background: linear-gradient(145deg, #454031, #181d19) !important;
  border: 1px solid #c7a366 !important; border-radius: 50% !important;
  color: #f7dfa1; stroke: #f7dfa1 !important;
  box-shadow: inset 0 0 0 3px #141913, 0 2px 7px #0008 !important;
}
body.estilo-clasico #menu :is(.ep-overline, .ep-camino-datos) { color: #eee0c7; }
body.estilo-clasico > .banner:where(:not(#duenoBanner)) {
  --camera-wood: linear-gradient(145deg, #353128, #191d1c 75%) #191d1c;
  --camera-leather: linear-gradient(115deg, #503b27, #292721);
  --collection-text: #fff2d8; --collection-muted: #e0d0b4;
  background: radial-gradient(ellipse at 30% 0, #4b3b25c9, #090d0fee) !important;
}
body.estilo-clasico > .banner:where(:not(#duenoBanner)) > .box:is(.ornate, :not(.ornate)) {
  background: var(--camera-wood) !important; border-color: #b79b68 !important;
  box-shadow: inset 0 1px #fff0cc4d, inset 0 0 0 4px #181b19, inset 0 0 0 5px #b3945440,
    0 12px 36px #0009 !important;
}
body.estilo-clasico > .banner:where(:not(#duenoBanner)) .screen-heading {
  background: var(--camera-leather) !important; border-bottom: 1px solid #c3a26b !important;
  box-shadow: inset 0 1px #ffe3a838, 0 6px 16px #090c0d55;
}
body.estilo-clasico > .banner:where(:not(#duenoBanner)) .screen-heading h3 {
  font-size: 23px !important; letter-spacing: .015em !important; color: #fff2d8 !important;
}
body.estilo-clasico > :is(#themeBanner, #perfilBanner)[data-coleccion-premium] > .box { background: var(--camera-wood) !important; }
body.estilo-clasico #themeBanner[data-coleccion-premium] .collection-nav {
  background: #202520; border-bottom-color: #b49b6855;
}
body.estilo-clasico #themeBanner[data-coleccion-premium] .collection-nav button {
  background: linear-gradient(#34392f, #23271f); border-color: #b49b6877;
  border-radius: 8px; color: #f4e6cb; box-shadow: inset 0 1px #f3e1b91a;
}
body.estilo-clasico #themeBanner[data-coleccion-premium] #mazoGrid .sw.mazo {
  background: radial-gradient(ellipse at 50% 5%, #b59b6833, transparent 65%), #222722 !important;
  border-color: #b79b6866 !important;
}
body.estilo-clasico #themeBanner[data-coleccion-premium] #mazoGrid .sw.mazo.on {
  border-color: #efd498 !important; box-shadow: inset 0 0 0 1px #efd49855, 0 5px 16px #0005 !important;
}
body.estilo-clasico #perfilBanner[data-coleccion-premium] :is(.collection-fold, .collection-portraits) {
  background: #222822; border-color: #b59b6855;
}
body.estilo-clasico #settingsBanner :is(.menurow, #setNombre),
body.estilo-clasico #partidaBanner .menurow {
  background: #171d19 !important; border-color: #aa946a77 !important; color: #f8ebd0 !important;
}
body.estilo-clasico .board :is(.pname, .rango-nombre) { color: #fff0ce; text-shadow: 0 1px 3px #100a04; }
body.estilo-clasico .board .pscore { font-variant-numeric: tabular-nums; }

/* Ambos acabados dejan el mismo espacio para el pulgar en teléfonos bajos. */
@media (max-width: 700px) and (max-height: 700px) {
  body.estilo-clasico #menu .menupanel > .jugarfila > :is(#menuPlay, #menuConfig) { min-height: 58px; }
  body.estilo-clasico #menu .menupanel > .jugarfila > #menuPlay { padding-block: 10px !important; }
}
@media (max-width: 400px) {
  body.estilo-clasico #menu #homeDestinos > .menutile { padding: 16px !important; }
  body.estilo-clasico #menu #homeDestinos > .menutile .tname { font-size: 23px !important; }
}
@media (forced-colors: active) {
  body.estilo-clasico #menu, body.estilo-clasico > .banner:where(:not(#duenoBanner)),
  body.estilo-clasico > .banner:where(:not(#duenoBanner)) > .box:is(.ornate, :not(.ornate)),
  body.estilo-clasico > .banner:where(:not(#duenoBanner)) .screen-heading,
  body.estilo-clasico #themeBanner[data-coleccion-premium] #mazoGrid .sw.mazo,
  body.estilo-clasico #settingsBanner :is(.menurow, #setNombre), body.estilo-clasico #partidaBanner .menurow {
    background: Canvas !important; border-color: CanvasText !important; color: CanvasText !important; box-shadow: none !important;
  }
  body.estilo-clasico #menu #homeDestinos > .menutile .tsub { background: Canvas !important; color: CanvasText !important; }
}

/* MESA CLÁSICA: sombras exteriores; ningún dibujo equipable recibe una capa nueva. */
body.estilo-clasico .board {
  --sombra-naipe: 1px 2px 2px #0007, 5px 8px 12px #0006;
  --sombra-vuelo: 9px 18px 23px #0007;
}
body.estilo-clasico .board .cardbox:not(.dragging)::before {
  box-shadow: 0 1px 0 #c9c4b7, var(--sombra-naipe);
}
body.estilo-clasico .ghostbox.flightlayer {
  filter: none; border-radius: 9px; box-shadow: 9px 18px 23px #0007;
}
/* La lámpara queda en el marco y en el salón. El centro conserva el paño comprado. */
body.estilo-clasico .board.materiales .mesa {
  box-shadow: inset 0 0 0 5px #381107c2, inset 0 0 0 7px #f1ca5f52,
    6px 12px 24px #0007 !important;
}
body.estilo-clasico :is(.pscore, .pending, .live, .escn, .sumbadge, .cq, .cp, #dealInfo, #dealInfoPausa) {
  font-variant-numeric: lining-nums tabular-nums;
}
body.estilo-clasico .board .pscore b { color: #fff0ce; background: #112b21; }
body.estilo-clasico .board :is(.ptitulo, .pextras) { color: #e4d3af; }
body.estilo-clasico .sumbadge {
  font-family: var(--f-display); color: #fff0ce !important;
  background: linear-gradient(145deg, #49321c, #15281e) !important;
  border-color: #c8aa70 !important; box-shadow: var(--brillo-borde), var(--e2) !important;
}
body.estilo-clasico .escobaword .wrap {
  background: linear-gradient(145deg, #304b37, #10251c 75%);
  border-color: #b89b62; box-shadow: var(--brillo-borde), var(--e3);
}
body.estilo-clasico .escobaword .word { font-family: var(--f-display); color: #ffebba; }
body.estilo-clasico .escobaword .quien { font-family: var(--f-texto); color: #fff2d8; }
body.estilo-clasico #cantoBanner :is(.ctitle, .cname),
body.estilo-clasico #winBanner :is(.ctitle, .cname) { font-family: var(--f-display); }
@media (forced-colors: active) {
  body.estilo-clasico :is(.sumbadge, .escobaword .wrap) { background: Canvas !important; color: CanvasText !important; box-shadow: none !important; }
}

/* COMPUTADORA: el tablero ocupa el ancho disponible sin estirar las cartas. */
@media (min-width: 1024px) {
  body.estilo-clasico .board { width: 100%; max-width: min(1240px, 72vw, calc(100vw - 64px)); }
  body.estilo-clasico #menu { padding-inline: max(32px, calc((100vw - 1480px) / 2)) !important; }
  body.estilo-clasico #menu.show { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) !important; column-gap: clamp(32px, 4vw, 64px) !important; }
  body.estilo-clasico #menu .logo15 { min-width: 0; }
  body.estilo-clasico #menu .logo15 .crest { max-width: 100%; }
  body.estilo-clasico #menu #homeDestinos { gap: 20px; }
  body.estilo-clasico .board .mesa { margin-inline: 8px; }
}

/* VIDRIERA: el marco rodea la muestra y los rótulos viven debajo del material. */
body.estilo-clasico #themeBanner[data-coleccion-premium] > .box { container: vidriera / inline-size; }
body.estilo-clasico #themeBanner[data-coleccion-premium] .esec {
  content-visibility: auto; contain-intrinsic-size: auto 640px;
}
body.estilo-clasico #themeBanner[data-coleccion-premium] .esec > h4 {
  font: 400 22px/1.3 var(--f-display) !important; padding: 12px 0;
  border-bottom: 1px solid #ad8c51; color: #ffedbf !important;
}
body.estilo-clasico #themeBanner[data-coleccion-premium] #mazoGrid .sw.mazo {
  background: radial-gradient(ellipse at 18% 0, #b59b6826, transparent 60%), #1b241e !important;
  box-shadow: inset 0 1px #ecd2a044, 4px 8px 18px #0005 !important;
}
body.estilo-clasico #themeBanner :is(#themeSwatches, #cueroGrid) {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px;
}
body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero) {
  height: 152px; padding: 0 0 54px; overflow: hidden;
  background-clip: content-box !important; background-origin: content-box !important;
  border: 6px ridge #7e6039 !important; border-radius: 22px;
  box-shadow: 4px 7px 10px #0007 !important; filter: none;
}
body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero) .dashes { display: none; }
body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero) .swname {
  bottom: 25px; min-height: 28px; padding: 3px 4px;
  background: #18211b; color: #fff2d8; font: 600 13px/1.2 var(--f-texto);
  letter-spacing: 0; display: grid; place-items: center;
}
body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero) .precio { bottom: 3px; right: 4px; font-variant-numeric: tabular-nums; }
body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero).on { border-color: #e9c985 !important; }
body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero) .tick { top: auto; bottom: 1px; right: 6px; }
/* Un rótulo distingue posesión y uso sin depender del color ni cubrir la muestra. */
body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero):not(.bloq)::after {
  content: 'Tuyo'; position: absolute; bottom: 5px; left: 8px;
  font: 600 12px/1.2 var(--f-texto); color: #e5d5b3;
}
body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero).on::after { content: 'Puesto'; color: #ffe6a2; }
html:lang(en) body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero):not(.bloq)::after { content: 'Owned'; }
html:lang(en) body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero).on::after { content: 'Equipped'; }
@container vidriera (min-width: 620px) {
  body.estilo-clasico #themeBanner :is(#themeSwatches, #cueroGrid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (forced-colors: active) {
  body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero) { border-color: ButtonText !important; }
  body.estilo-clasico #themeBanner :is(.sw.pano, .sw.cuero).on { border-color: Highlight !important; }
}
/* El precio incluye una chinche táctil de 44 px: necesita su franja completa. */
body.estilo-clasico #themeBanner[data-coleccion-premium] .sw:is(.pano, .cuero):has(.precio, .condicion) {
  height: 184px; padding-bottom: 86px;
}
body.estilo-clasico #themeBanner[data-coleccion-premium] .sw:is(.pano, .cuero):has(.precio, .condicion) .swname { bottom: 52px; }
body.estilo-clasico #themeBanner[data-coleccion-premium] .sw:is(.pano, .cuero) .precio {
  left: 4px; right: 4px; transform: none; max-width: none; justify-content: center; padding-inline: 3px; gap: 2px;
}

/* TRES VOCES: títulos Trocchi, texto Alegreya, cifras Alegreya tabular. */
body.estilo-clasico { --f-numeros: 'Alegreya', Georgia, serif; }
body.estilo-clasico :is(#menu, #gira, .board, .banner:not(#duenoBanner)) { font-family: var(--f-texto); }
body.estilo-clasico :is(h2, h3, .ctitle, .pausatit, .gprov, .mazonombre, .mhead, .vsvs, .winlabel, .cofretit, .pase-nivel) {
  font-family: var(--f-display) !important;
}
body.estilo-clasico :is(.pscore, .cpts, .cnum, .rpos, .rdato, .precio, .winsaldo, .ep-nivel-numero, .walletchip b) {
  font-family: var(--f-numeros); font-variant-numeric: lining-nums tabular-nums;
}
body.estilo-clasico > .banner:where(:not(#duenoBanner)) .screen-heading {
  min-height: 76px; background: linear-gradient(120deg, #4b3927, #24291f) !important;
  border-bottom: 1px solid #b99a63 !important;
}
body.estilo-clasico > .banner:where(:not(#duenoBanner)) .screen-heading h3 {
  font: 400 clamp(20px, 2vw, 25px)/1.25 var(--f-display) !important;
  letter-spacing: .015em; text-shadow: 1px 2px 2px #0009;
}
/* La selección se lee en verde y crema; el oro queda para la acción principal. */
body.estilo-clasico #settingsBanner .seg button:is(.on, .primary),
body.estilo-clasico #partidaBanner .seg button:is(.on, .primary),
body.estilo-clasico #amigoBanner .seg button.primary {
  background: #244b38 !important; color: #fff2d8 !important;
  border-color: #bad0b0 !important; box-shadow: inset 0 -3px #b5c7a6 !important;
}
body.estilo-clasico :is(#menu, #gira, .banner:not(#duenoBanner)) :is(button, [role="button"], summary):focus-visible,
body.estilo-clasico .board :is(button, [role="button"]):focus-visible {
  outline: 3px solid #fff0ad !important; outline-offset: 3px !important;
}
/* La misma grilla 24 y el mismo buril de 1,5 para las piezas dibujadas a mano. */
body.estilo-clasico :is(#homeDestinos .clasico-icon, .hbtn .icono-laton) {
  stroke-width: 1.5 !important; stroke-linecap: round; stroke-linejoin: round;
  fill: none; color: #f7dfa1; stroke: currentColor !important;
}
body.estilo-clasico #homeDestinos .clasico-icon { padding: 8px !important; }
@media (forced-colors: active) {
  body.estilo-clasico #settingsBanner .seg button:is(.on, .primary),
  body.estilo-clasico #partidaBanner .seg button:is(.on, .primary),
  body.estilo-clasico #amigoBanner .seg button.primary { background: Highlight !important; color: HighlightText !important; border-color: Highlight !important; box-shadow: none !important; }
  body.estilo-clasico :is(#menu, #gira, .board, .banner) :focus-visible { outline-color: Highlight !important; }
}
body.estilo-clasico #gira .gprov,
body.estilo-clasico #pauseOverlay .pausatit { font-family: var(--f-display) !important; }
body.estilo-clasico .myrow .pilebtn { min-height: 44px; }

/* PREMIO Y CIERRE: la misma lámpara sobre el marco, cifras con lugar reservado. */
body.estilo-clasico :is(#cofreBanner, #paseBanner, #winBanner) {
  --premio-superficie: linear-gradient(140deg, #3a3928, #18241c 72%);
}
body.estilo-clasico #cofreEscena { min-height: 180px; }
body.estilo-clasico #cofreTexto { font: 400 17px/1.4 var(--f-texto) !important; color: #eee0c4 !important; }
body.estilo-clasico #cofreCuenta { font-family: var(--f-numeros); font-variant-numeric: tabular-nums; min-height: 24px; }
body.estilo-clasico #paseBanner .pescalon {
  background: var(--premio-superficie); border-color: #9e815044;
  box-shadow: inset 0 1px #e7d1a426, 3px 6px 12px #0004;
}
body.estilo-clasico #paseBanner .pescalon.actual { border-color: #dcc18c; }
body.estilo-clasico #winBanner :is(.cscore, .winsaldo),
body.estilo-clasico .premio-contador {
  background: linear-gradient(140deg, #3a3928, #18241c 72%) !important;
  border: 1px solid #b99a63 !important; color: #fff0ce;
  box-shadow: var(--brillo-borde), var(--e2) !important;
}
body.estilo-clasico #winBanner #winTitle {
  color: #ffebbb; font: 400 clamp(26px, 6vw, 38px)/1.15 var(--f-display) !important;
  text-shadow: 2px 3px 3px #0009; text-wrap: balance;
}
body.estilo-clasico #winBanner .cnum { color: #fff0ce; font-variant-numeric: tabular-nums; }
body.estilo-clasico #winSaldoN { display: inline-block; min-width: 5ch; text-align: right; }
body.estilo-clasico :is(.premio-contador, #winSaldo) .pieza-oro { aspect-ratio: 1; flex: none; }
body.estilo-clasico #winMedalla { aspect-ratio: 3 / 2; object-fit: contain; }
body.estilo-clasico :is(#cofBase, #cofTapa) { aspect-ratio: 1; object-fit: contain; }
@media (forced-colors: active) {
  body.estilo-clasico #winBanner :is(.cscore, .winsaldo), body.estilo-clasico .premio-contador {
    background: Canvas !important; color: CanvasText !important; border-color: CanvasText !important; box-shadow: none !important;
  }
}
body.estilo-clasico #winBanner > .box.wincierre {
  background: var(--camera-wood) !important;
}
body.estilo-clasico :is(#winRevancha, #cofreAbrir) {
  background: linear-gradient(145deg, #f0d69a, #c79e51) !important; color: #30220f !important;
  border-color: #f4dbaa !important; box-shadow: var(--brillo-borde), var(--e2) !important;
}

/* FLUIDEZ: Cantar conserva el halo y el texto que exigen sus redes visuales. */
body.estilo-clasico #menu .ep-progreso > i { transition: none; }
body.estilo-clasico #menu #homeDestinos > .menutile,
body.estilo-clasico #settingsBanner .seg button,
body.estilo-clasico #themeBanner .sw { transition-property: transform, opacity !important; }

/* INGLÉS Y PANTALLAS CHICAS: el rótulo largo puede crecer dentro de su propia fila. */
body.estilo-clasico #gira :is(.gdesc, .ghist, .gcuenta, .goficio, .gorden, .gsub) {
  color: #fff0d2 !important; line-height: 1.45;
}
body.estilo-clasico #gira .tr-ruta { color: #fff0d2; }
body.estilo-clasico #menu .menupanel .misioncard .costura { font-family: var(--f-texto) !important; }
@media (max-width: 400px) {
  body.estilo-clasico #themeBanner .collection-nav button { padding-inline: 4px; font-size: 15px; }
  body.estilo-clasico #gira .gprov { font-size: clamp(22px, 7vw, 28px) !important; }
  body.estilo-clasico #gira .gsub { max-width: 23ch; margin-inline: auto; }
  body.estilo-clasico #themeBanner .sw:is(.pano, .cuero) .swname { overflow-wrap: anywhere; }
}
@media (forced-colors: active) {
  body.estilo-clasico #gira :is(.gdesc, .ghist, .gcuenta, .goficio, .gorden, .gsub, .tr-ruta) { color: CanvasText !important; }
}
/* La mesa conserva sus medidas bajo la portada/cortina, pero sus capas no se pintan. */
body:has(#menu.show, #cortina) .board,
body:has(#menu.show, #cortina) .board #singBtn.show,
body:has(#menu.show, #cortina) > .repartoGhost { visibility: hidden !important; }
/* Jugar y Partida nueva comparten la misma caja de texto durante la carga. */
body.estilo-clasico #menu .menupanel > .jugarfila > #menuPlay {
  display: flex; align-items: center; justify-content: center;
  padding-block: 12px !important; line-height: 24px !important;
}
/* Conserva la geometría y el foco inerte durante la intro; aparece bajo su fundido. */
body:has(#cortina:not(.ya)) #menu { opacity: 0 !important; }

/* Dos jugadores: las dos barandas dejan el mismo aire alrededor de la pastilla. */
body:not(.mesa-de-mas) { --fila-rival-h:64px; --fila-mia-h:64px; }
/* La baranda crece hacia ambos lados sin desplazar los mandos ya calibrados. */
body:not(.mesa-de-mas) .rivalrow { position:relative; top:-2px; }
body:not(.mesa-de-mas) :is(.rivalrow,.myrow) .hudchip {
  height:60px; align-items:center; gap:4px; padding:3px 4px 3px 3px;
}
body:not(.mesa-de-mas) :is(.rivalrow,.myrow) .avatar { align-self:center; }
/* El turno ilumina el contorno por dentro; no agranda la silueta de la placa. */
body:not(.mesa-de-mas) .hudchip.turno::after {
  box-shadow:inset 0 0 0 1px #ffe691,0 0 8px #ffc43c66;
}
body:not(.mesa-de-mas) .hudchip.apuro::after {
  box-shadow:inset 0 0 0 1px #f27e6e,0 0 8px #be241b66;
}