/* J-1002-TYPING-ULTRAWIDE (dev, 2026-10-02). Driven by js/fit-scaler.js, which adds
   .stage-wide to .app (and sets --stage-w / --stage-card-w / --stage-card-h) only on
   screens with room to spare. Then the combat stage widens up to the full 16:9
   hallway art (never past it) and the zoom fills the window height. The in-stage UI
   (HUD, treasure, panels) is anchored to the stage edges, so it moves outward and
   scales with the game; the board keeps its usual gap beside the stage.
   Anything left over is plain page.
   The fullscreen-button rules at the end apply everywhere.
   Without .stage-wide the stage rules do not apply (phones and normal laptops unchanged).
   Rollback: remove the <link> to this file (fit-scaler then still fixes the
   ultrawide lineup, but keeps the old 960px stage width). */
.app.layout-combat.stage-wide { width: calc(100% - 1.25rem); padding-bottom: 0; }
.app.layout-combat.stage-wide .dungeon-layout {
  grid-template-columns: var(--stage-card-w) minmax(280px, 420px);
  justify-content: center; align-items: start; width: 100%;
}
.app.layout-combat.stage-wide:not(.combat-side-by-side) .dungeon-layout { grid-template-columns: var(--stage-card-w); }
.app.layout-combat.stage-wide .play-card { width: var(--stage-card-w); box-sizing: border-box; }
.app.layout-combat.stage-wide #screen-dungeon .viewport { width: var(--stage-w); max-width: none; }
.app.layout-combat.stage-wide.combat-side-by-side .scoreboard-side { max-height: var(--stage-card-h, calc(100vh - 2rem)); overflow-y: auto; }

/* J-1002-TYPING-FULLSCREEN: icon + "Full Screen" toggle right of Sound in the top bar,
   sized like the Sound button (36px tall, 0.78rem; 30px / 0.62rem during a run). */
.topbar .btn-fullscreen { min-height: 36px; padding: 0.2rem 0.7rem; font-size: 0.78rem; margin-left: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap; }
.topbar .btn-fullscreen[hidden] { display: none; }
.topbar .btn-fullscreen { position: relative; overflow: visible; }
.topbar .btn-fullscreen > svg:not(.fs-crackle) { position: relative; z-index: 1; display: block; width: 1.25em; height: 1.25em; flex: none; }
.topbar .btn-fullscreen .fs-label { position: relative; z-index: 1; }
.topbar .btn-fullscreen .fs-crackle { position: absolute; z-index: 0; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); display: block; overflow: visible; pointer-events: none; color: #83ddff; opacity: 0; filter: drop-shadow(0 0 2px rgba(92, 213, 255, .95)); animation: fullscreen-crackle-burst 4.8s steps(1, end) infinite; }
.topbar .btn-fullscreen .fs-exit, .topbar .btn-fullscreen.is-fullscreen .fs-enter { display: none; }
.topbar .btn-fullscreen.is-fullscreen .fs-exit { display: block; }
@keyframes fullscreen-crackle-burst {
  0%, 100% { opacity: 0; }
  7% { opacity: .95; }
  8% { opacity: .12; }
  9% { opacity: .82; }
  11% { opacity: 0; }
  13% { opacity: .68; }
  15% { opacity: 0; }
}
/* The top bar is hidden in fullscreen; keep the effect explicitly dormant too. */
.app:fullscreen .topbar .btn-fullscreen .fs-crackle { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .topbar .btn-fullscreen .fs-crackle { animation: none; opacity: 0; } }
@media (min-width: 641px) and (max-width: 1023px) { /* same step-down the Sound button gets during a run */
  body:has(#screen-dungeon.active) .topbar .btn-fullscreen { min-height: 30px; padding-inline: 0.35rem; font-size: 0.62rem; gap: 0.25rem; }
}
/* J-1005-2: Full Screen is a combat control. Landing, how-to, results, and
   the win screen do not show it. The button stays in the top bar, above
   the stage, so it does not cover the word box or the fighters. */
body:not(:has(#screen-dungeon.active)) #btn-fullscreen { display: none !important; }
@media (max-width: 640px) {
  body:has(#screen-dungeon.active) .topbar #btn-fullscreen:not([hidden]) {
    display: inline-flex;
    min-height: 34px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    gap: 0.25rem;
    flex: 0 0 auto;
  }
  body:has(#screen-dungeon.active) .topbar #btn-fullscreen .fs-crackle { display: none; }
}
/* J-1004-TYPING-FS-SCALE2: fullscreen keeps normal stage geometry, then the
   fit scaler enlarges the complete stage so art and overlays stay proportional. */
.app:fullscreen {
  width: 100%; max-width: none; height: 100%; margin: 0; padding: 0;
  box-sizing: border-box; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, #2a1f55 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, #1a3a2a 0%, transparent 45%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
.app:fullscreen::backdrop { background: #06080e; }
.app:fullscreen > .topbar, .app:fullscreen #daily-banner, .app:fullscreen .scoreboard-side { display: none !important; }
.app.layout-combat:fullscreen { overflow: hidden; }
.app.layout-combat:fullscreen #screen-dungeon { width: 100%; max-width: none; margin: 0; }
.app.layout-combat:fullscreen .dungeon-layout { zoom: var(--fit-scale, 1); }
.app.layout-combat:fullscreen .dungeon-layout,
.app.layout-combat:fullscreen .dungeon-row { margin-inline: auto; }
.app.layout-combat:fullscreen .dungeon-layout:not(.combat-side-by-side) { width: min(100%, 960px); }
.app.layout-combat:fullscreen .dungeon-layout.combat-side-by-side { width: 100%; }
.app.layout-combat:fullscreen .play-card {
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.app.layout-combat:fullscreen #screen-dungeon .viewport { border: 0; border-radius: 0; }
/* results / death / win screens keep their usual 1920px-wide column in fullscreen */
.app.layout-menu:fullscreen { padding-inline: max(0.625rem, calc(50% - 960px)); }
.app.layout-combat.stage-wide:fullscreen { width: 100%; padding-bottom: 0; }
.fs-corner-exit { display: none; }
.app.layout-combat:fullscreen .fs-corner-exit:not([hidden]) {
  display: inline-flex; align-items: center; gap: 0.35rem; position: absolute;
  left: 50%; right: auto; top: 0.55rem; bottom: auto; transform: translateX(-50%); z-index: 1001;
  min-height: 30px; padding: 0.2rem 0.6rem; border-radius: 8px; cursor: pointer;
  font: 600 0.72rem/1 var(--font); white-space: nowrap;
  color: #f5e6c4; background: rgba(10, 12, 22, 0.62); border: 1px solid rgba(245, 197, 66, 0.45);
  opacity: 0.55; transition: opacity 0.15s;
}
.app.layout-combat:fullscreen .fs-corner-exit svg { width: 1.2em; height: 1.2em; display: block; }
.app.layout-combat:fullscreen .fs-corner-exit:hover, .app.layout-combat:fullscreen .fs-corner-exit:focus-visible { opacity: 1; }
/* J-1004-TYPING-HPBARS-C: hit line ("Sword Swing! -19") clears the Exit Full Screen pill. */
.app.layout-combat:fullscreen #combat-flash {
  top: calc(0.55rem + 30px + 0.5rem);
}