/* Deliberately quiet: each game's existing colour and typographic identity stays. */
.ux-ready { font-size:16px }
.ux-ready [hidden], .ux-superseded { display:none!important }
.ux-home { padding-top:clamp(24px,4vw,56px)!important; padding-bottom:32px!important; min-height:0!important }
.ux-home h1 { font-size:clamp(2rem,4.3vw,3.8rem)!important; line-height:1.08!important; letter-spacing:-.035em!important; max-width:22ch!important; margin-block:12px 18px!important }
.ux-home h1 + p { max-width:62ch!important; font-size:1.0625rem!important; line-height:1.65!important; margin-bottom:24px!important }
.ux-home :is(.hero-map,.hero-instrument,.hero-case,.triptych) { max-height:300px; overflow:hidden; pointer-events:none }
.ux-home .hero-instrument { max-height:none; overflow:visible }
.ux-home .dial { width:min(30vw,360px) }
.ux-ready .resume-strip { margin-top:16px; position:relative }
.ux-ready :is(.passport-home-actions,.status-actions) { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 }
.ux-ready :is(.passport-home-actions,.status-actions) button { min-height:44px }
.ux-home :is(.floor-preview,.tide-ribbon,.mini-frame,.conveyor-preview) { display:none }
.ux-entry { display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; padding:0!important; margin:18px 0 14px; border:0; background:none; color:inherit; text-align:left; width:100%; max-width:70ch; grid-column:1/-1 }
.ux-entry p { margin:0!important; color:inherit!important }
.ux-entry .ux-entry-copy { flex:1 1 100%; font-size:1.0625rem!important; line-height:1.55!important }
.ux-entry .ux-entry-note { flex:1 1 100%; font-size:.875rem!important; line-height:1.5!important; opacity:.8 }
.ux-button, .ux-header-help, .ux-inline-lesson { font:700 1rem/1.35 system-ui,sans-serif; cursor:pointer; min-height:44px; padding:12px 18px; border:1px solid currentColor; border-radius:6px; white-space:normal }
.ux-button { background:transparent!important; color:inherit!important; display:inline-block; width:auto; border-color:currentColor }
.ux-learned .ux-entry .ux-button { opacity:.85 }
.ux-header-help, .ux-inline-lesson { background:transparent; color:inherit; font-size:.875rem; padding:8px 12px }
.ux-menu-toggle { display:none }
/* A home drawn by app.mjs is empty at first paint; hold its space so the sections below never jump up. */
.ux-ready main:not(:has(> :not(noscript, .static-intro))) { min-height:100vh; min-height:100svh }
/* Play state: the page header folds to one compact row so the board gets the screen. */
:root { --ux-play-h:calc(100vh - var(--ux-header-h,56px)); --ux-play-h:calc(100svh - var(--ux-header-h,56px)) }
.ux-playing header { min-height:0!important; height:auto!important; padding-block:4px!important; position:relative!important; top:auto!important }
.ux-playing header small { display:none!important }
.ux-playing header :is(button,a) { min-height:44px }
.ux-modes { display:flex!important; flex-wrap:wrap; gap:12px!important; margin:14px 0 24px!important; width:100%; align-items:stretch }
.ux-modes > button { flex:1 1 220px; min-height:88px!important; padding:16px!important; text-align:left; border-radius:6px!important }
.ux-modes > button :is(b,strong) { font-size:1.1rem!important; line-height:1.35!important }
.ux-modes > button small { font-size:.875rem!important; line-height:1.5!important; margin-top:6px!important }
.ux-modes > .ux-disclosure { flex-basis:100%; margin:0!important }
.ux-modes > .ux-disclosure button { margin:12px; padding:16px; max-width:calc(100% - 24px) }
.ux-disclosure { border-top:1px solid color-mix(in srgb,currentColor 22%,transparent); margin:18px auto; max-width:1400px; text-align:left; grid-column:1/-1 }
.ux-disclosure > summary { cursor:pointer; min-height:48px; padding:14px 12px; font:650 1rem/1.4 system-ui,sans-serif; color:inherit }
.ux-disclosure > summary:hover { text-decoration:underline; text-underline-offset:4px }
.ux-disclosure > :not(summary) { margin-block:12px; max-width:100% }
.ux-disclosure > .more-games { border:0; padding-top:0 }
.ux-play-help { display:flex; align-items:center; flex-wrap:wrap; gap:0 20px; padding:2px 14px; margin:0 0 10px; border:1px solid var(--ux-accent); border-radius:6px; background:var(--ux-paper); color:var(--ux-ink); text-align:left; grid-column:1/-1 }
.ux-play-help .ux-goal { font:400 .9375rem/1.4 system-ui,sans-serif; margin:0; color:inherit; flex:1 1 320px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ux-play-help .ux-goal-full { display:none; margin:0 0 4px; font:400 .9375rem/1.5 system-ui,sans-serif }
.ux-play-help:has(.ux-rules[open]) .ux-goal { white-space:normal }
.ux-play-help .ux-goal strong { margin-right:.5rem }
.ux-help-actions { display:flex; align-items:flex-start; flex-wrap:nowrap; gap:4px 20px; flex:0 1 auto }
.ux-play-help:has(.ux-rules[open]) .ux-help-actions { flex-basis:100% }
.ux-help-actions details { flex:1; min-width:0 }
.ux-help-actions summary { min-height:44px; padding:10px 0 }
.ux-find-start { font:650 .9375rem/1.5 system-ui,sans-serif; color:inherit; background:transparent; border:0; padding:10px 0; min-height:44px; text-align:left; cursor:pointer; text-decoration:underline; text-underline-offset:4px }
.ux-focus-target { outline:3px solid var(--ux-accent)!important; outline-offset:5px!important; scroll-margin:160px 0 }
.ux-play-help summary { cursor:pointer; font:400 1rem/1.5 system-ui,sans-serif }
.ux-play-help summary strong { margin-right:.5rem }
.ux-play-help ol, .ux-recap { padding-left:1.5rem; font-size:1rem; line-height:1.6 }
.ux-play-help li, .ux-recap li { margin:10px 0 }
.ux-play-help .ux-guide-links { display:flex; align-items:center; flex-wrap:wrap; gap:12px }
.ux-guide-links a { display:inline-flex; align-items:center; min-height:44px }
.ux-find-start { flex:none }
.ux-help-actions:has(details[open]) { flex-wrap:wrap }
.ux-help-actions details[open] { flex-basis:100% }
.ux-play-help :is(.coach,.coach-card) { position:static!important; width:auto!important; max-width:none!important; transform:none!important; margin:16px 0 0!important; box-shadow:none!important }
.ux-clock-note { font-size:.875rem; margin:12px 0 }
.ux-ready .update-prompt { position:relative; inset:auto; width:calc(100% - 24px); max-width:960px; margin:12px auto; box-sizing:border-box; box-shadow:none; flex-direction:row; align-items:center; flex-wrap:wrap; animation:none }
.ux-ready .update-prompt-text { flex:1 1 220px }
.ux-play-help a { color:inherit; font-size:.9375rem; text-underline-offset:3px }
.ux-lesson { box-sizing:border-box; width:min(600px,calc(100% - 24px)); max-width:600px; max-height:calc(100dvh - 24px); overflow-y:auto; padding:clamp(20px,4vw,32px); background:var(--ux-paper); color:var(--ux-ink); border:1px solid var(--ux-accent); border-radius:12px; box-shadow:0 24px 90px #0006; font:400 1rem/1.6 system-ui,sans-serif }
.ux-lesson::backdrop { background:#07101cbb; backdrop-filter:blur(3px) }
.ux-lesson * { box-sizing:border-box }
.ux-lesson-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.875rem }
.ux-close { flex:0 0 44px; width:44px; min-height:44px; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; cursor:pointer; font-size:1.5rem }
.ux-progress { display:flex; gap:6px; margin:18px 0 24px }
.ux-progress span { height:4px; flex:1; background:color-mix(in srgb,var(--ux-ink) 20%,transparent); border-radius:2px }
.ux-progress .is-current { background:var(--ux-accent) }
.ux-lesson .ux-kicker { font-size:.875rem; font-weight:700; margin:0 0 8px; color:inherit }
.ux-lesson h2 { font:750 clamp(1.5rem,4vw,2rem)/1.2 ui-serif,Georgia,serif; margin:0 0 20px; color:inherit; letter-spacing:-.02em }
.ux-example { padding:16px 20px; border:1px solid color-mix(in srgb,var(--ux-ink) 25%,transparent); border-left:4px solid var(--ux-accent); border-radius:4px; margin-bottom:20px }
.ux-example p { margin:4px 0 10px; font-size:1rem; line-height:1.6; color:inherit }
.ux-example p:last-child { margin-bottom:0 }
.ux-lesson h3.ux-question { font-size:1rem; font-weight:700; margin:0 0 12px; color:inherit }
.ux-choices { display:grid; gap:10px }
.ux-choices button { font:600 1rem/1.5 system-ui,sans-serif; text-align:left; min-height:52px; padding:12px 16px; color:inherit; border:1px solid color-mix(in srgb,var(--ux-ink) 40%,transparent); background:transparent; border-radius:6px; cursor:pointer; white-space:normal; width:100% }
.ux-choices button:hover:enabled { border-color:var(--ux-accent); background:color-mix(in srgb,var(--ux-accent) 10%,transparent) }
.ux-choices button:disabled { opacity:.55; cursor:default }
.ux-choices button.ux-correct { opacity:1; border:2px solid var(--ux-accent) }
.ux-feedback { min-height:1.6em; font-size:1rem!important; line-height:1.6; margin:16px 0; color:inherit!important }
.ux-feedback.ux-success { font-weight:600 }
.ux-lesson .ux-reassurance { font-size:.875rem; margin:16px 0 0; color:inherit; opacity:.85 }
.ux-lesson :focus-visible,.ux-entry :focus-visible,.ux-disclosure > summary:focus-visible,.ux-header-help:focus-visible,.ux-menu-toggle:focus-visible,.ux-menu-panel :focus-visible,.ux-play-help :focus-visible { outline:3px solid var(--ux-accent); outline-offset:4px }
/* Every control shows where keyboard focus is, even where a game style removed the outline. */
:where(.ux-ready) :where(main,header,footer,dialog) :where(button,a[href],summary,input,select,textarea,[tabindex]):focus-visible { outline:3px solid currentColor; outline-offset:2px }
@media(max-width:700px) {
  .ux-home :is(.hero-map,.hero-instrument,.hero-case,.triptych) { display:none!important }
  .ux-home:is(.hero,.home-hero) { display:block!important }
  .ux-home h1 { max-width:24ch!important }
  .ux-modes > button { flex-basis:100%; min-height:64px!important }
  .ux-disclosure { margin-inline:12px }
  .ux-home .ux-disclosure { margin-inline:0 }
  .ux-header-help { font-size:.9375rem; padding:8px 12px }
  .ux-ready header { height:auto!important; min-height:56px; flex-wrap:nowrap!important; gap:8px; padding-block:6px!important }
  .ux-ready header small { display:none!important }
  .ux-ready header > :first-child { min-width:0; flex:0 1 auto }
  .ux-ready header .ux-menu-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none; margin-left:auto; min-width:64px; min-height:44px; padding:8px 14px; font:650 .9375rem/1 system-ui,sans-serif; color:inherit; background:transparent; border:1px solid currentColor; border-radius:6px; cursor:pointer }
  .ux-ready header .ux-menu-toggle { order:3 }
  .ux-ready header .ux-menu-panel { order:2; display:flex!important; flex:none; flex-wrap:nowrap!important; margin-left:auto; gap:0 }
  .ux-ready header .ux-menu-toggle { margin-left:8px }
  .ux-ready header:not(.ux-menu-open) .ux-menu-panel > :not([data-ux-keep]) { display:none!important }
  .ux-ready header .ux-menu-panel > [data-ux-keep] { min-height:44px; min-width:44px }
  .ux-ready header > :first-child { overflow:hidden }
  .ux-ready header.ux-menu-open .ux-menu-panel { display:flex!important; flex-direction:column; align-items:stretch; gap:4px; position:absolute; top:calc(100% + 4px); right:8px; left:auto; width:min(280px,calc(100vw - 16px)); z-index:60; margin:0; padding:8px; background:var(--ux-paper); color:var(--ux-ink); border:1px solid var(--ux-accent); border-radius:8px; box-shadow:0 12px 40px #0004 }
  .ux-ready header.ux-menu-open .ux-menu-panel > * { display:flex; align-items:center; width:100%; min-height:44px; margin:0; padding:8px 12px; text-align:left; justify-content:flex-start; color:inherit; background:transparent; border:1px solid color-mix(in srgb,currentColor 25%,transparent); border-radius:6px; font-size:.9375rem; box-sizing:border-box }
  .ux-ready header.ux-menu-open .ux-menu-panel > span { border:0; min-height:0; padding:4px 12px; font-size:.8125rem; opacity:.8 }
  .ux-play-help { padding:2px 12px; gap:0 }
  /* On a phone the goal opens with How to play, so the strip stays one row above the board. */
  .ux-play-help .ux-goal { display:none }
  .ux-play-help .ux-goal-full { display:block }
  .ux-help-actions { gap:4px 20px }
  .ux-play-help :is(summary,.ux-find-start) { font-size:.875rem }
  .ux-ready :is(.chapter-line,.case-top,.shift-head,.case-head,.watch-head,.frame-head,.game-head,.flight-head,.dispatch-head,.bench-head) h1, .ux-ready :is(.chapter-line,.case-top,.shift-head,.case-head,.watch-head,.frame-head,.game-head,.flight-head,.dispatch-head,.bench-head) h2.h1 { font-size:clamp(1.5rem,6vw,2rem); line-height:1.15; letter-spacing:-.025em }
}
@media(prefers-reduced-motion:reduce) { .ux-ready { scroll-behavior:auto } }
/* Confirm in words (save-guard.mjs): Cancel first and focused; the named action second. */
.ux-confirm { box-sizing:border-box; width:min(460px,calc(100% - 24px)); padding:clamp(18px,4vw,26px); background:var(--ux-paper); color:var(--ux-ink); border:1px solid var(--ux-accent); border-radius:12px; box-shadow:0 24px 90px #0006; font:400 1rem/1.55 system-ui,sans-serif }
.ux-confirm::backdrop { background:#07101cbb }
.ux-confirm .ux-confirm-text { margin:0 0 18px!important; color:inherit!important; font:400 1rem/1.55 system-ui,sans-serif!important; text-transform:none!important; letter-spacing:normal!important; max-width:none!important }
.ux-confirm-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end }
.ux-confirm .ux-button { background:transparent!important; color:inherit!important }
.ux-confirm .ux-confirm-go { border-width:2px; border-color:var(--ux-accent) }
.ux-confirm :focus-visible { outline:3px solid var(--ux-accent); outline-offset:3px }
/* Storage blocked outright: one quiet line under the header. */
.ux-storage-note { margin:0; padding:6px 16px; font:400 .8125rem/1.45 system-ui,sans-serif; text-align:center; opacity:.85 }