/* Shared controller chrome stays in document flow, including native dialogs. */
:root { --ka-visible-viewport-height: 100dvh; }
.ka-fullscreen-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; max-width: 100%; flex: 0 0 auto;
  padding: 8px 12px; border: 1px solid currentColor; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.25;
  color: inherit; background: transparent; cursor: pointer; touch-action: manipulation;
}
.ka-fullscreen-button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.ka-fullscreen-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px; }
.ka-fullscreen-status {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip-path: inset(50%); white-space: nowrap; border: 0 !important;
}
/* Only controller-owned stages become fixed. Page games, including Orchard,
   retain their existing body and dialog layout in native and viewport modes. */
html.ka-immersive .ka-immersive-target:not(body) {
  box-sizing: border-box; position: fixed; inset: 0; z-index: 1000;
  width: 100%; max-width: none; height: var(--ka-visible-viewport-height); max-height: none;
  margin: 0; overflow: auto; overscroll-behavior: contain;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
html.ka-immersive, html.ka-immersive body {
  position: fixed; inset: 0; width: 100%; height: var(--ka-visible-viewport-height); overflow: hidden;
}
/* Allow a newly added flow control to wrap, without touching map/art geometry. */
:is(.entrance-actions, .masthead, .map-header):has(> .ka-fullscreen-button) { flex-wrap: wrap; }

body[data-ka-fullscreen-route="orchard-pour"] .masthead:has(.ka-fullscreen-button) {
  height: auto; min-height: 58px; padding-block: 4px;
}
body[data-ka-fullscreen-route="orchard-pour"] :is(.home-button, .round-button, .music-bar button) { min-width: 44px; min-height: 44px; }
@media (max-width: 600px) {
  body[data-ka-fullscreen-route="orchard-pour"] .masthead:has(.ka-fullscreen-button) {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 2px 8px;
  }
  body[data-ka-fullscreen-route="orchard-pour"] .masthead #home { grid-column: 1; grid-row: 1 / 3; }
  body[data-ka-fullscreen-route="orchard-pour"] .masthead .brand { grid-column: 2; grid-row: 1; font-size: 9px; }
  body[data-ka-fullscreen-route="orchard-pour"] .masthead #pause { grid-column: 3; grid-row: 1 / 3; }
  body[data-ka-fullscreen-route="orchard-pour"] .masthead .ka-fullscreen-button { grid-column: 2; grid-row: 2; justify-self: center; padding: 6px 10px; }
}
@media (min-width: 600px) and (min-height: 541px) {
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] .game-shell { width: min(100%, 650px, calc(100dvh - 380px)); }
}
@media (max-width: 600px) and (max-height: 700px) {
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] .scene { width: min(100%, 264px); margin-inline: auto; }
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] .masthead { padding-block: 2px; gap: 0 8px; }
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] .scene-heading { padding-top: 2px; }
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] .scene-heading h1 { font-size: 24px; margin-block: 0; }
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] :is(.level-detail, .subinstruction) { display: none; }
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] .paper-footer { padding-bottom: 6px; }
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] .instruction { margin-bottom: 4px; }
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] .tools button { min-height: 44px; padding-block: 5px; }
  html.ka-immersive body[data-ka-fullscreen-route="orchard-pour"] .music-bar { margin-top: 4px; }
}
/* Hex has a fixed one-row toolbar: wrap only the new label, not the toolbar. */
@media (max-width: 600px) {
  body[data-ka-fullscreen-route="arcade/sausi-7-hex-puzzle"] #toolbar { gap: 4px; }
  body[data-ka-fullscreen-route="arcade/sausi-7-hex-puzzle"] #toolbar .ka-fullscreen-button { width: 76px; padding: 4px; font-size: 12px; white-space: normal; }
}

/* C0236 authoring adapter. Load AFTER each game's existing styles.
   Only the five named, direct-board games match. Orchard and imported games do not.
   Both existing element fullscreen/fallback and the shared ka-immersive root work.
   Intrinsic canvas ratios are preserved; controls never shrink below 44px. */

body:is([data-ka-fullscreen-route="suntrail-rally"], [data-ka-fullscreen-route="prism-passage"], [data-ka-fullscreen-route="arcade-rally"]) #fullscreen {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; flex: 0 0 auto;
}
body[data-ka-fullscreen-route="penalty"] .match-tools #full { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
body[data-ka-fullscreen-route="penalty"] :is(.match-header, .match-tools) { flex-wrap: wrap; }
body:is([data-ka-fullscreen-route="suntrail-rally"], [data-ka-fullscreen-route="arcade-rally"]) .topbar,
body[data-ka-fullscreen-route="prism-passage"] .masthead {
  flex-wrap: wrap; height: auto; min-height: 48px;
}
body[data-ka-fullscreen-route="suntrail-rally"] .topbar nav,
body[data-ka-fullscreen-route="arcade-rally"] .top-actions,
body[data-ka-fullscreen-route="prism-passage"] .settings { flex-wrap: wrap; }
body:is([data-ka-fullscreen-route="suntrail-rally"], [data-ka-fullscreen-route="prism-passage"], [data-ka-fullscreen-route="arcade-rally"]) :is(#pause, #sound, #motion) { min-width: 44px; min-height: 44px; }
@media (max-width: 600px) {
  body[data-ka-fullscreen-route="suntrail-rally"] .topbar { gap: 4px; padding-block: 6px; }
  body[data-ka-fullscreen-route="suntrail-rally"] .topbar nav { width: 100%; justify-content: flex-end; }
  body[data-ka-fullscreen-route="suntrail-rally"] #hud { top: 120px; }
  body[data-ka-fullscreen-route="suntrail-rally"] #overlay { padding-top: 120px; }
  body[data-ka-fullscreen-route="prism-passage"] .masthead { padding-block: 6px; gap: 4px; }
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) {
  --ka-board-ratio: .75; --ka-chrome: 272px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])):has(#game[aria-label="Cloudbreak game"]) {
  --ka-board-ratio: .7692307692; --ka-chrome: 248px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])):has(#game[aria-label="Comet Catchers game"]) {
  --ka-chrome: 302px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])):has(#game[aria-label="River Rally game"]) {
  --ka-chrome: 330px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])):has(#game[aria-label="Sky Stack game"]) {
  --ka-chrome: 206px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) body {
  margin: 0;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) body > header, :is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) main > .intro {
  display: none;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) main {
  display: block; width: 100%; max-width: none; margin: 0; padding: 0;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game {
  box-sizing: border-box; position: fixed; inset: 0; z-index: 20;
  width: 100%; max-width: none; height: 100vh; height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; overflow: auto; background: var(--cream, #fff7e7);
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .board {
  box-sizing: content-box; flex: 0 0 auto; min-width: 0; min-height: 0;
  width: min(calc(100% - 10px), calc((100dvh - var(--ka-chrome) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ka-board-ratio)));
  height: auto; max-width: none; aspect-ratio: auto; margin: 0;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game canvas {
  display: block; width: 100%; height: auto; max-width: 100%;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game :is(.hud, .controls, .buttons, .music-controls, .light-help) {
  flex: 0 0 auto; width: min(100%, 580px); margin: 0;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .hud {
  gap: 6px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .hud > span {
  min-width: 0;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game :is(button, summary) {
  min-width: 44px; min-height: 44px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .music-controls {
  padding: 0 !important; justify-content: center;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game :is(.steering-row, .river-actions) {
  margin-top: 6px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game #status {
  min-height: 0; margin: 6px 0 0; font-size: 12px; line-height: 1.4;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game #bonuses {
  margin: 0;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .light-help {
  min-height: 44px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .sound-body {
  position: absolute; z-index: 30; right: 0; top: auto; bottom: 44px;
  max-width: calc(100vw - 24px); max-height: min(300px, calc(100dvh - 100px)); overflow: auto;
}

@media (orientation: landscape) and (min-width: 700px) {
:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game {
  display: grid; grid-template-columns: auto minmax(260px, 460px); grid-template-rows: repeat(7, auto);
  justify-content: center; align-content: center; align-items: center; column-gap: clamp(12px, 3vw, 36px); row-gap: 6px;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .board {
  grid-column: 1; grid-row: 1 / 8; align-self: center;
  width: calc((100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ka-board-ratio)); height: auto;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game > *:not(.board) {
  grid-column: 2; width: 100%;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .music-controls {
  grid-row: 1;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .hud {
  grid-row: 2;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game :is(.controls, .buttons) {
  grid-row: 3;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game #bonuses {
  grid-row: 4;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game > #status {
  grid-row: 5;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .light-help {
  grid-row: 6;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game > #art-note {
  grid-row: 7;
}

:is(html.ka-immersive, html:has(#game:fullscreen, #game.expanded)):has(#game:is([aria-label="Cloudbreak game"], [aria-label="Comet Catchers game"], [aria-label="Meadow Dash game"], [aria-label="River Rally game"], [aria-label="Sky Stack game"])) #game .sound-body {
  top: 44px; bottom: auto;
}
}