/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */
/* Partida en PC. El carril de capas va arriba a la izquierda, siempre en una
   columna, y la clave de color abajo a la izquierda, encima del credito del
   mapa. Entre los dos no hay altura fija: si la ventana es baja, la lista del
   carril se recorta y se desplaza por dentro, asi que nunca se pisan. Antes
   cada uno tenia su alto fijo y por debajo de 650 px el carril pasaba a dos y
   tres columnas. */
.game-signal-column { position: absolute; top: 66px; left: 16px; bottom: 44px; width: 302px; z-index: 6; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.game-rail-slot { flex: 0 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.game-layer-rail { box-sizing: border-box; min-height: 0; pointer-events: auto; }
.game-layer-list { flex: 0 1 auto !important; min-height: 0; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(247, 240, 223, 0.35) transparent; }
.game-layer-row { box-sizing: border-box; flex: none; }
.game-key-slot { flex: none; min-width: 0; margin-top: auto; pointer-events: auto; }
.game-key-slot:empty { display: none; }
.game-base-label { position: absolute; left: 336px; top: 66px; max-width: calc(100% - 410px); z-index: 5; background: var(--color-academy-panel); color: var(--color-cream); border: 1px solid var(--color-glass-rule); border-radius: var(--radius-control); padding: var(--space-xs) var(--space-sm); font: 750 var(--text-xs)/1.4 var(--font-body); }
.game-base-label > span { color: var(--color-glass-muted); font: 500 var(--text-xs)/1.4 var(--font-mono); }
.game-mobile-rail-slot { flex: none; position: relative; z-index: 5; }
.game-mobile-fold-toggle { min-height: 32px; }
.game-mobile-layer { box-sizing: border-box; grid-column: auto !important; min-height: 54px !important; padding-block: 4px !important; }
.game-mobile-key-anchor { position: relative; flex: none; z-index: 7; }
.game-mobile-key-anchor[data-reserve="true"] { min-height: 78px; display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-height: 800px) and (min-width: 760px) {
  .game-layer-sub { display: none; }
  .game-layer-row { padding-block: 5px !important; min-height: 44px; }
  .game-layer-list { gap: 5px !important; padding-bottom: 8px !important; }
}
@media (max-height: 560px) and (min-width: 760px) {
  .game-layer-row { padding-block: 3px !important; min-height: 38px; }
  .game-layer-icon { width: 26px !important; height: 26px !important; }
  .game-layer-rail > div:first-child { padding-block: 7px !important; }
}

@media (max-height: 500px) and (min-width: 600px) {
  .game-mobile-controls .game-mobile-rail-slot { position: absolute; left: 10px; top: 66px; width: 290px; }
  .game-mobile-controls .game-mobile-key-anchor { position: absolute; left: 10px; top: 254px; width: 290px; }
  .game-mobile-controls .game-mobile-guess { position: absolute !important; bottom: 10px; right: 10px; width: min(280px, calc(100% - 330px)); }
  .game-mobile-zoom { position: absolute !important; top: 66px; right: 10px; }
  .game-mobile-hint { display: none !important; }
}
@media (max-height: 360px) and (min-width: 600px) {
  .game-mobile-controls .game-mobile-key-anchor { top: 210px; }
  .game-mobile-rail-slot > [data-tut] { gap: 4px !important; padding: 4px !important; }
  .game-mobile-layer { height: 44px; min-height: 44px !important; padding: 1px !important; gap: 1px !important; }
  .game-mobile-layer svg { width: 13px; height: 13px; }
  .game-mobile-layer > span { font-size: 10px !important; line-height: 1.1 !important; }
  .game-mobile-fold-toggle { min-height: 24px; }
}

@media (max-width: 359px) { .game-hud { left: 10px !important; right: 10px !important; gap: 4px !important; } }

/* Mismo vidrio en todas las piezas de la partida (tokens.css, --glass-hud). */
.game-layer-rail, .game-mobile-rail-slot > div, .game-mobile-hint { background: var(--glass-hud) !important; }

/* Partida en movil vertical: la foto manda. Antes pista, carril de 3 x 2, boton de
   plegar y clave se comian mas de la mitad de la pantalla. Ahora las seis capas van
   en una fila (icono y precio; el nombre lo dice la clave y queda para el lector de
   pantalla), el zoom flota sobre la foto a la derecha y pista y clave se compactan. */
@media (orientation: portrait) {
  .game-mobile-controls { gap: 6px !important; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
  .game-mobile-zoom { position: absolute !important; right: 10px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 8px !important; padding: 0 !important; }
  .game-mobile-hint { font-size: 11px !important; line-height: 1.3 !important; padding: 5px 10px !important; border-radius: 10px !important; }
  .game-mobile-rail-slot > [data-tut="rail"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 4px !important; padding: 5px !important; border-radius: 14px !important; }
  .game-mobile-layer { min-height: 50px !important; padding: 6px 1px 5px !important; gap: 3px !important; border-radius: 10px !important; justify-content: center; }
  .game-mobile-layer > span:first-of-type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .game-mobile-layer > span:last-of-type { font-size: 9px !important; letter-spacing: 0.02em; white-space: nowrap; }
  .game-mobile-rail-slot > [data-tut="rail"] > .game-mobile-fold-toggle { display: none !important; }
  .game-mobile-key-anchor[data-reserve="true"] { min-height: 0; }
  .game-mobile-key { padding: 7px 10px 7px; border-radius: 14px; }
  .game-mobile-key .eo-legend-title { min-height: 22px; font-size: 12px; gap: 7px; }
  .game-mobile-key .eo-legend-icon { width: 22px; height: 22px; border-radius: 7px; }
  .game-mobile-key .eo-legend-icon svg { width: 12px; height: 12px; }
  .game-mobile-key .eo-legend-scale { margin-top: 5px; gap: 2px; }
  .game-mobile-key .eo-legend-extremes { display: none; }
  .game-mobile-key .eo-legend-ticks { height: 15px; font-size: 10px; }
  .game-mobile-key .eo-legend-credit { margin-top: 4px; padding-top: 4px; font-size: 8.5px; -webkit-line-clamp: 1; line-clamp: 1; }
  .game-mobile-guess { height: 50px !important; }
}
@media (orientation: portrait) { .game-mobile-layer { position: relative; } }
/* Con la ficha de la revelacion abierta el carril no sirve y la ficha lo tapaba a medias. */
.game-signal-column { transition: opacity var(--dur-short) ease; }
.game-signal-column[data-revela="true"] { opacity: 0; pointer-events: none; }