/* Keep session actions above play and away from movement controls in every mode. */
[data-fullscreen-region="head"]:has(> #start),
.runner-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
[data-fullscreen-region="head"] > #start { flex: 0 1 auto; max-width: 100%; min-height: 44px; margin: 0; padding: 10px 14px; font-size: 12px; white-space: normal; }
[data-fullscreen-region="head"] > .game-utilities { margin-left: auto; }
[data-fullscreen-region="head"]:has(> #start) > [data-fullscreen-hide],
.wordsearch-arena [data-fullscreen-region="head"] > #category { flex-basis: 100%; }
.runner-top { min-width: 0; background: #17231d; }
.runner-actions { padding: 6px 12px; }
.runner-actions #runner-start { min-height: 44px; padding: 8px 12px; font-size: 12px; }
.runner-game:has(#runner-overlay[hidden]) #runner-start { display: none; }


/* One presentation for normal, native fullscreen and full-window modes. */
.game-fullscreen-open { overflow: hidden; }
.game-fullscreen-fallback { position: fixed !important; inset: 0 !important; z-index: 1000 !important; }
:is(.game-fullscreen-active, .game-layout) {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  width: 100% !important; max-width: none !important; height: 100dvh !important; min-height: 0 !important;
  box-sizing: border-box; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
  gap: 4px !important; overflow: hidden !important; background: #101722;
  scroll-margin-top: 0;
}
.game-layout:not(.game-fullscreen-active) { width: 100vw !important; margin-inline: calc(50% - 50vw) !important; }
.memory-shell:has(> .game-layout) { display: block; }
.game-layout:not(:has([data-fullscreen-region="input"])) { padding-bottom: calc(24px + max(4px, env(safe-area-inset-bottom))) !important; }
:is(.game-fullscreen-active, .game-layout) .runner-top { display: contents !important; }
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region] { grid-column: auto !important; grid-row: auto !important; box-sizing: border-box; }
:is(:fullscreen, .game-fullscreen-fallback, .game-layout) [data-fullscreen-hide],
:is(.game-fullscreen-active, .game-layout) :is(.league-session, [data-fullscreen-region="actions"], #save-status, #runner-save-status, #runner-result-status, .account-notice, .asteroid-overlay, .drift-intro, .hook-intro, .crusader-intro, .runner-overlay, .runner-leave),
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="input"] :is(p, small, button > span:not([data-i18n])) { display: none !important; }
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="head"] {
  display: flex !important; flex: 0 0 44px !important; order: -3; align-items: center !important;
  justify-content: space-between !important; flex-wrap: nowrap !important; min-width: 0 !important;
  width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; gap: 6px !important;
  position: static !important; background: transparent !important;
}
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="head"] > :is(#start, #runner-start) {
  flex: 1 1 auto !important; min-width: 0 !important; min-height: 44px !important; max-width: min(280px, calc(100% - 100px)) !important;
  margin: 0 !important; padding: 8px 10px !important; font-size: 12px !important; letter-spacing: normal !important; white-space: nowrap !important;
  justify-content: center;
}
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="head"] button { transform: none !important; }
:is(.game-fullscreen-active, .game-layout) #runner-start { display: flex !important; }
:is(.game-fullscreen-active, .game-layout) .game-utilities { flex: 0 0 auto !important; margin-left: auto; gap: 6px !important; }
:is(.game-fullscreen-active, .game-layout) .game-utilities > button {
  display: inline-grid !important; place-items: center; width: 44px !important; min-width: 44px !important; height: 44px !important;
  min-height: 44px !important; flex: 0 0 44px !important; padding: 0 !important; border: 1px solid #758097; border-radius: 8px;
  background: #141c2a; color: #e6ff9b;
}
:is(.game-fullscreen-active, .game-layout) .game-utilities > [data-fullscreen-target] { position: relative; font-size: 0 !important; line-height: 0; text-decoration: none; }
:is(.game-fullscreen-active, .game-layout) .game-utilities > [data-fullscreen-target]::before {
  content: '' !important; position: absolute; inset: 50% auto auto 50%; width: 24px; height: 24px; margin: 0;
  transform: translate(-50%, -50%); background: currentColor;
  -webkit-mask: url('assets/game-fullscreen.svg') center / contain no-repeat;
  mask: url('assets/game-fullscreen.svg') center / contain no-repeat;
}
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="hud"] {
  display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: minmax(0, 1fr) !important;
  flex: 0 0 auto !important; order: -2; width: 100% !important; max-width: none !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important; gap: 6px !important; align-self: stretch !important; border: 0 !important;
}
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="hud"] > :is(div, span) {
  display: block !important; grid-column: auto !important; grid-row: 1 !important; min-width: 0 !important; max-width: none !important;
  align-self: stretch !important; height: auto !important; gap: 0 !important;
  margin: 0 !important; padding: 6px 8px !important; border: 1px solid #344657 !important; border-radius: 7px; background: #182331 !important; color: #dbe4ee;
  font-size: 8px !important; letter-spacing: 0 !important; line-height: 1.15 !important;
}
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="hud"] > div > span { display: block; min-height: 0 !important; font-size: 8px !important; letter-spacing: 0 !important; margin: 0 !important; line-height: 1.15; }
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="hud"] strong {
  display: block !important; font-size: clamp(16px, 3vw, 24px) !important; line-height: 1.15 !important;
  white-space: nowrap; margin: 2px 0 0 !important; font-variant-numeric: tabular-nums;
}
:is(.game-fullscreen-active, .game-layout) .drift-hud strong { font-size: clamp(9px, 2.65vw, 22px) !important; }
:is(.game-fullscreen-active, .game-layout) .drift-hud > div { padding: 4px 3px !important; }
:is(.game-fullscreen-active, .game-layout) .drift-hud { gap: 3px !important; }
:is(.game-fullscreen-active, .game-layout) #lap-best { font-size: clamp(8px, 2.5vw, 22px) !important; }
:is(.game-fullscreen-active, .game-layout) .drift-distance strong > small { display: block; white-space: nowrap; }
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="hud"] small { font-size: 7px !important; }
:is(.game-fullscreen-active, .game-layout) #runner-speed { position: static !important; font-size: 8px !important; }
.runner-hud .runner-time-value { display: contents; font: inherit; letter-spacing: inherit; }
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="stage"] {
  flex: 1 1 0 !important; order: 0; min-width: 0 !important; min-height: 0 !important; width: 100% !important;
  max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; align-self: stretch !important; overflow: hidden; position: relative;
}
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="stage"]:has(> canvas) { display: grid !important; place-items: center; container-type: size; }
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="stage"] > canvas {
  width: min(100cqw, calc(100cqh * var(--fullscreen-ratio))) !important;
  height: min(100cqh, calc(100cqw / var(--fullscreen-ratio))) !important;
  max-width: 100% !important; max-height: 100% !important; min-height: 0 !important; aspect-ratio: var(--fullscreen-ratio) !important;
  display: block; object-fit: contain; margin: auto; align-self: center; justify-self: center;
}
:is(.game-fullscreen-active, .game-layout) [data-game-camera] > canvas { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; }
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="input"] {
  display: flex !important; flex: 0 0 auto !important; order: 2; justify-content: center !important; align-items: center !important;
  flex-direction: row !important; flex-wrap: nowrap !important;
  min-height: 0 !important; min-width: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 6px 4px 24px !important; gap: 10px !important; background: transparent;
}
:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="input"] button {
  flex: 0 1 auto; min-width: 56px !important; min-height: 64px !important; height: 64px !important;
  padding: 8px 4px !important; font-size: 14px !important; line-height: 1.2 !important; margin: 0 !important; justify-content: center;
}
:is(.game-fullscreen-active, .game-layout) :is(.runner-movement-controls, .breakout-pad, .egg-pad) { display: grid !important; width: min(100%, 760px) !important; gap: 10px !important; margin: 0 !important; }
:is(.game-fullscreen-active, .game-layout) .runner-movement-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.game-fullscreen-active, .game-layout) .breakout-pad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.game-fullscreen-active, .game-layout) .egg-pad { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: auto !important; }
:is(.game-fullscreen-active, .game-layout) :is(.egg-pad, .breakout-pad) button { grid-area: auto !important; width: auto !important; }
:is(.game-fullscreen-active, .game-layout) :is(.drift-steer, .asteroid-controls > div) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; width: min(calc(100% - 76px), 500px) !important; margin: 0 !important; }
:is(.game-fullscreen-active, .game-layout) :is(.drift-steer, .asteroid-controls > div) button { width: 100% !important; }
:is(.game-fullscreen-active, .game-layout) .runner-controls .button { min-width: 0 !important; }
:is(.game-fullscreen-active, .game-layout) :is(.egg-pad, .breakout-pad, .asteroid-controls) button { font-size: 24px !important; }
:is(.game-fullscreen-active, .game-layout) .crusader-trigger { width: auto !important; }
/* Directly manipulated boards use the same flexible stage without empty control rows. */
:is(.game-fullscreen-active, .game-layout) .memory-board { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; }
:is(.game-fullscreen-active, .game-layout) .memory-card { min-width: 0 !important; min-height: 0 !important; aspect-ratio: auto !important; padding: 0 !important; }
:is(.game-fullscreen-active, .game-layout) .memory-card svg { width: 65%; height: 65%; max-height: 90px; }
:is(.game-fullscreen-active, .game-layout) .wordsearch-stage { display: flex !important; flex-direction: column; gap: 3px; }
:is(.game-fullscreen-active, .game-layout) #category { flex: 0 0 auto; font-size: 8px; text-align: center; margin: 0; }
:is(.game-fullscreen-active, .game-layout) .wordsearch-words { display: flex !important; flex: 0 0 auto; flex-wrap: nowrap; justify-content: center; width: 100%; min-width: 0; gap: 4px; margin: 0 !important; padding: 0; }
:is(.game-fullscreen-active, .game-layout) .wordsearch-words li { min-width: 0; font-size: clamp(9px, 2vw, 12px); padding: 3px 2px; border-radius: 3px; }
:is(.game-fullscreen-active, .game-layout) .wordsearch-grid-space { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
:is(.game-fullscreen-active, .game-layout) .wordsearch-board { width: min(100cqw, 100cqh) !important; height: min(100cqw, 100cqh) !important; max-width: none !important; margin: 0 !important; align-self: center !important; padding: 3px; gap: 2px; box-sizing: border-box; grid-template-rows: repeat(9, minmax(0, 1fr)); }
:is(.game-fullscreen-active, .game-layout) .letter { min-height: 0; aspect-ratio: auto; font-size: clamp(9px, 3cqh, 20px); }
@media (orientation: landscape) {
  :is(.game-fullscreen-active, .game-layout) .memory-board { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-height: 540px) and (orientation: landscape) {
  :is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="input"] button { min-height: 56px !important; height: 56px !important; }
}

:is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="hud"] > .breakout-effects:empty { display: none !important; }
:is(.game-fullscreen-active, .game-layout) .crusader-weather strong { font-size: 9px !important; white-space: normal; }
:is(.game-fullscreen-active, .game-layout) #basket, :is(.game-fullscreen-active, .game-layout) #basket small { font-size: 0 !important; }
:is(.game-fullscreen-active, .game-layout) #basket::before { content: attr(data-white) ' ' attr(data-white-label); display: block; font-size: 12px; }
:is(.game-fullscreen-active, .game-layout) #basket::after { content: attr(data-gold) ' ' attr(data-gold-label); display: block; font-size: 12px; }
:is(.game-fullscreen-active, .game-layout) .wordsearch-grid-space { font-size: min(3cqh, 20px); }

/* Reclaim vertical space on short landscape screens without shrinking HUD text. */
@media (max-height: 540px) and (orientation: landscape) {
  :is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="head"] {
    flex-basis: 31px !important;
    min-height: 31px !important;
  }
  :is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="head"] > :is(#start, #runner-start) {
    height: 31px !important;
    min-height: 31px !important;
    padding-block: 4px !important;
  }
  :is(.game-fullscreen-active, .game-layout) .game-utilities > button {
    height: 31px !important;
    min-height: 31px !important;
    border-radius: 6px;
  }
  :is(.game-fullscreen-active, .game-layout) .game-utilities > [data-fullscreen-target]::before {
    width: 22px;
    height: 22px;
  }
  :is(.game-fullscreen-active, .game-layout) .game-utilities > [data-game-music] { font-size: 22px; }
  :is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="hud"] > :is(div, span) {
    padding-block: 2px !important;
  }
  :is(.game-fullscreen-active, .game-layout) .drift-hud > div { padding-block: 0 !important; }
  :is(.game-fullscreen-active, .game-layout) [data-fullscreen-region="hud"] strong { margin-top: 0 !important; }
  :is(.game-fullscreen-active, .game-layout) .runner-time-value {
    display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; white-space: nowrap;
  }
}

/* Saving failures stay actionable without replacing the final scene. */
.game-save-state { display: none !important; }
.game-save-state:not([hidden]) {
  display: flex !important; flex: 0 0 auto; order: 3; align-items: center; gap: 8px;
  max-height: 20%; overflow: auto; margin: 0; padding: 4px 6px;
  background: #172331; color: #edf2fa; font-size: 12px;
}
.game-save-state form { flex: 0 0 auto; margin: 0; }
.game-save-state form:not([data-save-retry]) { display: none !important; }
.game-save-state button { min-height: 31px; margin: 0; padding: 6px 10px; font-size: 12px; }
:is(.game-fullscreen-active, .game-layout) .game-save-state :is(#save-status, #runner-result-status) {
  display: block !important; margin: 0; color: #edf2fa; font-size: 12px; line-height: 1.3;
}
.game-save-state #runner-save-status { display: none !important; }