@charset "UTF-8";
:root {
  color-scheme: dark;
  --ink: #08161b;
  --cream: #fffdf5;
  --muted: #bdcdd0;
  --gold: #d5b473;
  --line: #c4a2674d;
  --room: 172px;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --display: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cream);
  background: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 8%, #233a3b 0, #0d2027 38%, #061217 85%);
  overscroll-behavior: none;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: repeating-linear-gradient(115deg, #a7b6a702 0 1px, transparent 1px 5px);
}
button, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .48; }
button, canvas { touch-action: manipulation; }
button:focus-visible, a:focus-visible, canvas:focus-visible, select:focus-visible { outline: 2px solid #f5d799; outline-offset: 4px; }
[hidden] { display: none !important; }
.wrap {
  width: min(1280px, calc(var(--game-viewport-width, 100vw) - 56px), calc((100svh - var(--room)) * 1.777778));
  margin: 0 auto; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; gap: 17px; padding: 24px 0;
}
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { display: flex; width: 27px; height: 34px; color: #bea373; filter: drop-shadow(0 1px 4px #000a); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { display: block; font: 750 13px/1.25 var(--display); letter-spacing: .7px; color: #f1eee4; }
.brand-caption { display: block; margin-top: 5px; font-size: 11px; font-weight: 550; letter-spacing: .6px; color: #bdced0; }
.toolbar { display: flex; align-items: center; gap: 5px; }
.tool-btn {
  color: #e3ebe7; padding: 8px 13px; min-height: 35px; border: 1px solid #b0bda223; border-radius: 3px;
  background: linear-gradient(#24383bd9, #152a2de6); font-size: 12px; font-weight: 650;
  box-shadow: inset 0 1px #f3e5bb06; transition: border-color .16s, color .16s, background .16s;
}
.tool-btn:hover:not(:disabled) { color: var(--cream); border-color: #c4a26780; background: #283f3f; }
.tool-btn[aria-pressed="true"] { color: #e6c586; }
.back-to-games { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; text-decoration: none; white-space: nowrap; touch-action: manipulation; }
.back-to-games svg { width: 18px; height: 18px; flex: 0 0 18px; }
.game-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; flex-shrink: 0; overflow: hidden;
  border-radius: 4px; border: 1px solid #ac8a534f; isolation: isolate; container-type: inline-size;
  box-shadow: 0 26px 70px #0009, 0 0 0 4px #07161b, 0 0 0 5px #baa3751f;
}
.game-stage::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 8;
  background: linear-gradient(#d7bd88aa, #d7bd88aa) 0 0 / 25px 1px no-repeat,
    linear-gradient(#d7bd88aa, #d7bd88aa) 0 0 / 1px 25px no-repeat,
    linear-gradient(#d7bd88aa, #d7bd88aa) 100% 0 / 25px 1px no-repeat,
    linear-gradient(#d7bd88aa, #d7bd88aa) 100% 0 / 1px 25px no-repeat,
    linear-gradient(#d7bd88aa, #d7bd88aa) 0 100% / 25px 1px no-repeat,
    linear-gradient(#d7bd88aa, #d7bd88aa) 0 100% / 1px 25px no-repeat,
    linear-gradient(#d7bd88aa, #d7bd88aa) 100% 100% / 25px 1px no-repeat,
    linear-gradient(#d7bd88aa, #d7bd88aa) 100% 100% / 1px 25px no-repeat;
  opacity: .65;
}
#game { display: block; width: 100%; height: 100%; background: #142c30; outline-offset: -5px; }
.start-screen {
  position: absolute; inset: 0; z-index: 5; display: grid; grid-template-rows: 1fr auto;
  align-items: center; padding: 5.5% 5.7% 4.5%; text-align: left; gap: 22px;
  background: linear-gradient(90deg, #06151aea 0%, #06151ab8 28%, #07171b3b 62%, #07171b08 100%),
    linear-gradient(0deg, #041219f5 0%, #05171b73 28%, #08222908 70%),
    url("assets/optimized-v10/landscape.webp") center 48% / cover,
    #102a33;
  transition: opacity .3s, visibility .3s;
}
.start-screen.hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.start-heading { align-self: center; justify-self: start; max-width: 70%; padding: 19px 23px; border-left: 2px solid #e7c784; border-radius: 3px; background: linear-gradient(100deg, #04121aeb, #04121aba); box-shadow: 0 12px 34px #0003; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 15px; font-size: 12px; font-weight: 700; letter-spacing: .8px; color: #f1d492; }
.start-heading .eyebrow { justify-content: start; font-size: 12px; letter-spacing: .7px; margin-bottom: 14px; color: #f4d896; }
.eyebrow span { width: 24px; height: 1px; background: currentColor; opacity: .75; }
h1 { margin: 0; font: 800 clamp(38px, 6.5cqw, 83px)/.98 var(--display); letter-spacing: -1.5px; color: #fffdf5; text-shadow: 0 2px 10px #0006; }
.title-prefix { display: block; margin-bottom: 9px; font: 700 18px/1.2 var(--display); letter-spacing: .2px; color: #f5d695; }
.title-name { display: block; }
.start-intro { margin: 18px 0 0; font-size: clamp(13px, 1.15cqw, 15px); line-height: 1.55; color: #e7efed; font-weight: 500; }
.realm-label { position: absolute; top: 7%; right: 5.7%; display: grid; justify-items: end; gap: 7px; padding: 11px 13px; color: #f4f1e6; font-size: 12px; font-weight: 700; letter-spacing: .8px; background: #07171be0; border-top: 1px solid #d8c39566; text-shadow: 0 1px 5px #000a; }
.realm-label span { color: #f2d695; font-size: 12px; letter-spacing: .8px; }
.realm-label i { display: block; width: 33px; height: 1px; background: #c6b78275; margin-top: 5px; }
.start-panel { display: grid; grid-template-columns: minmax(190px, 240px) 1fr; gap: 26px; width: 100%; align-items: center; padding: 15px 18px; background: #061720ed; border: 1px solid #a7b8aa40; border-radius: 4px; box-shadow: 0 10px 30px #0003; }
.start-actions { order: 1; }
.quest-points { order: 2; display: flex; justify-content: space-between; list-style: none; gap: 16px; padding: 0; margin: 0; }
.quest-points li { display: flex; flex-direction: column; align-items: start; gap: 10px; text-align: left; flex: 1; }
.quest-icon { font-size: 22px; height: 23px; line-height: 1; color: #d6b878; text-shadow: 0 1px 8px #d8a25525; }
.heart-icon { font-size: 19px; color: #d69c87; }
.flag-icon { font-size: 26px; color: #aebca0; }
.quest-points strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; color: #fff9e8; }
.quest-points small { display: block; font-size: 12px; line-height: 1.4; color: #c9d6d3; margin-top: 4px; }
.primary-btn {
  position: relative; min-width: 190px; padding: 14px 23px; min-height: 46px; border: 1px solid #d9bd82; border-radius: 3px;
  background: linear-gradient(165deg, #e2c991 0%, #c5a165 54%, #b59054 100%); color: #19292a;
  font-size: 13px; font-weight: 750; letter-spacing: .5px;
  box-shadow: inset 0 1px #fff3c88f, inset 0 -2px #785c3280, 0 5px 18px #0005;
  transition: filter .16s, transform .16s, box-shadow .16s;
}
.primary-btn:hover:not(:disabled) { filter: brightness(1.12); box-shadow: inset 0 1px #fff6d7bf, 0 7px 23px #0007, 0 0 19px #caae651c; transform: translateY(-1px); }
.primary-btn:active:not(:disabled) { transform: translateY(1px); }
.start-btn { width: 100%; min-width: 0; }
.secondary-btn { border: 1px solid #b49c6257; border-radius: 3px; padding: 11px 21px; background: #0b1d23e6; color: #e9efea; font-size: 13px; transition: border-color .16s, background .16s; }
.secondary-btn:hover { border-color: #ddbb78bd; color: #f1e3c4; background: #223638; }
.space-replay-btn { width: 100%; margin-top: 9px; }
.loading-status { min-height: 16px; margin: 10px 0 0; font-size: 12px; line-height: 1.35; color: #d2e0dc; }
.medal-shelf { margin: 6px 0 0; color: #f0d59b; font-size: 12px; line-height: 1.4; }
.art-credit { display: none; }
.game-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px; color: #849d9c; }
.keyboard-controls { display: flex; flex-wrap: wrap; gap: 14px; }
.keyboard-controls > span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
kbd { font: 10px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 3px 5px; color: #acbcb0; background: #97b6b008; border: 1px solid #a4b29724; border-bottom-width: 2px; border-radius: 3px; }
.best-run { text-align: right; font-size: 10px; line-height: 1.5; color: #b09c76; }

/* Status lives outside the scaled canvas on small screens. */
.mobile-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 6px 11px; background: linear-gradient(110deg, #183237, #102329); border: 1px solid #b29d633d; border-radius: 3px; box-shadow: inset 0 1px #e4d6a208; }
.hud-item { display: flex; align-items: center; gap: 5px; font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.hud-label { color: #9bb3aa; font-size: 12px; font-weight: 400; }
.hud-hearts { font-size: 23px; letter-spacing: 2px; line-height: 1; color: #da9d8b; text-shadow: 0 1px 6px #ce6d4333; }
.hud-hearts.low-health { color: #ff9580; }
.hud-symbol { color: #dac080; font-size: 20px; }
.tutorial-card, .boss-notice { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border: 1px solid #8b9a783a; border-left: 2px solid #b29963; background: linear-gradient(105deg, #1c3438f0, #10242bef); border-radius: 3px; min-height: 64px; box-shadow: inset 0 1px #ffffe503, 0 5px 16px #0002; }
.tutorial-card > div, .boss-notice > div { min-width: 0; flex: 1; }
.tutorial-card strong, .boss-notice strong { display: block; font-size: 14px; font-weight: 600; color: #ddd2b6; line-height: 1.3; letter-spacing: .15px; }
.tutorial-card p, .boss-notice p { margin: 4px 0 0; color: #a5b9b3; font-size: 13px; line-height: 1.4; }
.tutorial-emblem { display: grid; place-items: center; width: 34px; height: 37px; flex: 0 0 34px; font-size: 29px; color: #bba36a; border: 1px solid #c6b07835; border-radius: 50% 50% 3px 3px; background: #bba36a08; }
.boss-notice { border-color: #957ba44a; border-left-color: #9f83b5; background: linear-gradient(105deg, #302d3cf0, #17202def); }
.boss-notice strong { color: #e2cde7; letter-spacing: .65px; }
.boss-notice.is-warning { border-color: #b875434f; border-left-color: #e4a064; background: linear-gradient(105deg, #422d27f5, #241f25f0); }
.boss-notice.is-warning strong { color: #ffe0ab; }
.boss-notice.is-vulnerable { border-color: #89a26a5c; border-left-color: #b9d17e; background: linear-gradient(105deg, #2b3c33f0, #142a2aef); }
.boss-notice.is-vulnerable strong { color: #e0edb7; }

/* Tactile controls retain generous hit areas and their held states. */
.touch-controls { display: none; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.touch-group { display: flex; gap: 7px; }
.touch-btn { height: 48px; min-width: 48px; padding: 0 14px; border-radius: 4px; border: 1px solid #afaa7963; background: linear-gradient(150deg, #2b4245, #142b31); color: #d2d3bd; touch-action: none; user-select: none; -webkit-user-select: none; font-size: 12px; font-weight: 650; box-shadow: inset 0 1px #e7dba319, inset 0 -3px #0718205e, 0 4px 9px #0002; }
.direction-btn { font-size: 22px; }
.jump-btn { color: #202d2c; background: linear-gradient(150deg, #d5bc83, #b89458); border-color: #d4b67b; }
.touch-btn:active, .touch-btn.is-pressed, .touch-btn.pressed, .touch-btn.held { transform: translateY(2px); background: #405e58; border-color: #d5bc89; box-shadow: inset 0 1px 5px #0718208c; }
.jump-btn:active, .jump-btn.is-pressed, .jump-btn.pressed, .jump-btn.held { background: #e8ce96; }
.control-settings { display: none; align-items: center; justify-content: center; gap: 9px; min-height: 32px; color: #9db1a9; font-size: 12px; }
.control-settings select { color: #cfc1a0; background: #173037; border: 1px solid #b0a47340; border-radius: 3px; padding: 6px 25px 6px 8px; min-height: 34px; font-size: 12px; }
.touch-tip { margin-left: auto; font-size: 12px; color: #a0b3a9; }

/* Pause and rewards share a restrained, illuminated brass frame. */
.modal-screen { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse, #0c222dcc, #020d13f0); backdrop-filter: blur(9px) saturate(.65); }
.modal-panel { position: relative; width: min(460px, 100%); text-align: center; padding: 35px 30px; border: 1px solid #bba46b70; border-radius: 4px; background: radial-gradient(ellipse at 50% 0, #294347aa, transparent 65%), linear-gradient(155deg, #182e36fa, #0a1c25fa); box-shadow: 0 24px 75px #0008, 0 0 0 4px #091a22, 0 0 0 5px #ad95652e, inset 0 1px #dbc8890f; }
.modal-emblem { display: block; color: #c4aa74; font: 36px var(--serif); margin-bottom: 18px; text-shadow: 0 0 22px #d5a24f40; }
.modal-panel .eyebrow { font-size: 12px; letter-spacing: .7px; margin-bottom: 12px; }
h2 { margin: 0 0 14px; color: #fffdf5; font: 750 30px/1.15 var(--display); letter-spacing: -.4px; }
.modal-panel > p:not(.eyebrow) { margin: 0 0 25px; color: #d1dfdd; font-size: 13px; line-height: 1.65; }
.modal-hint { display: block; margin-top: 20px; font-size: 12px; color: #c4d6d2; }
.modal-hint kbd { margin-left: 3px; }
.win-stats { white-space: pre-line; }
.medal-results { display: grid; gap: 7px; margin: 0 0 11px; text-align: left; }
.medal-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #839b8530; border-radius: 3px; background: linear-gradient(90deg, #16303880, #0a1e2980); }
.medal-badge { display: grid; place-items: center; flex: 0 0 34px; height: 36px; font-size: 27px; text-align: center; color: #708d86; border: 1px solid #81947630; border-radius: 50% 50% 4px 4px; background: #90a47507; }
.medal-result > div { flex: 1; }
.medal-result strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; color: #c4d0bf; }
.medal-result p { margin: 2px 0 0; color: #c9d8d2; font-size: 12px; line-height: 1.4; }
.medal-outcome { width: 91px; color: #c2d5cd; font-size: 12px; line-height: 1.4; text-align: right; }
.medal-result.earned { border-color: #b49a576b; background: linear-gradient(100deg, #6654344a, #2632314d); }
.medal-result.earned .medal-badge { color: #e0c083; border-color: #c0a36663; background: linear-gradient(#b99a6424, #c0a46808); text-shadow: 0 1px 12px #d1a45233; }
.medal-result.earned .medal-outcome { color: #d9bf8a; }
.medal-result.earned strong { color: #eddbb5; }
.medal-result.collected:not(.earned) .medal-badge { color: #a6bd8d; }
.modal-panel.win-panel { width: min(560px, 100%); padding: 22px 25px; max-height: 100%; overflow-y: auto; }
.win-panel .modal-emblem { margin-bottom: 7px; font-size: 28px; }
.win-panel h2 { font-size: 30px; margin-bottom: 10px; }
.win-panel > p.win-stats { margin-bottom: 14px; font-size: 13px; line-height: 1.4; color: #c2cbb3; }
.win-panel > p.medal-saved { margin: 0 0 15px; font-size: 12px; color: #c9d8ce; line-height: 1.4; }
.win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.win-actions .primary-btn { min-width: 150px; padding: 11px 18px; }
.win-actions .secondary-btn { padding: 10px 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@container (max-width: 850px) {
  .start-screen { padding: 4.7% 5.4% 4%; gap: 13px; }
  .start-heading .eyebrow { font-size: 12px; margin-bottom: 11px; }
  .start-intro { margin-top: 13px; font-size: 13px; }
  .start-panel { grid-template-columns: 190px 1fr; gap: 25px; }
  .quest-points { padding: 0; gap: 10px; }
  .quest-points li { gap: 6px; }
  .quest-points strong { font-size: 13px; }
  .quest-points small { font-size: 12px; }
  .primary-btn { padding: 12px 19px; }
  .art-credit { display: none; }
}
@container (max-width: 680px) {
  .quest-points { display: none; }
  .start-panel { display: block; width: 230px; }
  .start-screen { grid-template-columns: 1fr 230px; grid-template-rows: 1fr; }
  .start-heading { max-width: 100%; }
  .start-heading .eyebrow { display: none; }
  .start-intro { font-size: 12px; }
  h1 { font-size: 8cqw; }
  .realm-label { display: none; }
}

/* Compact dialogs use the viewport, never text scaled down with the canvas. */
body.is-compact .game-stage { container-type: normal; }
body.is-compact .modal-screen { position: fixed; inset: 0; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow-y: auto; z-index: 20; }
body.is-compact .modal-panel { padding: 24px 20px; max-height: 100%; overflow-y: auto; }
body.is-compact .modal-panel .eyebrow { font-size: 12px; line-height: 1.4; letter-spacing: 1px; }
body.is-compact .modal-panel h2 { font-size: 28px; }
body.is-compact .modal-panel > p { font-size: 13px; }
body.is-compact .modal-panel .primary-btn, body.is-compact .modal-panel .secondary-btn { min-height: 44px; font-size: 13px; }

/* Full screen keeps browser controls and the playfield together. */
#fullscreenBtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
#fullscreenBtn svg { flex: 0 0 16px; width: 16px; height: 16px; }
.mobile-screen-tip { display: none; margin: 0; color: #c0d1ce; font-size: 12px; line-height: 1.4; text-align: center; }
body.is-fullscreen, body.is-expanded { background: #061217; }
body.is-expanded { position: fixed; inset: 0; width: 100%; height: var(--game-viewport-height, 100dvh); overflow: auto; }
body:is(.is-fullscreen, .is-expanded) .wrap {
  width: min(1920px, calc(var(--game-viewport-width, 100vw) - 32px), calc((var(--game-viewport-height, 100dvh) - 180px) * 1.777778));
  min-height: var(--game-viewport-height, 100dvh); gap: 10px; padding: 12px 0;
}
body:is(.is-fullscreen, .is-expanded) .game-footer { display: none; }

@media (pointer: coarse), (max-width: 760px) {
  .wrap {
    width: min(1280px, calc(var(--game-viewport-width, 100vw) - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))));
    min-height: var(--game-viewport-height, 100dvh); justify-content: center; gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
  }
  .game-header { gap: 8px; }
  .brand { gap: 7px; }
  .brand-name { font-size: 11px; letter-spacing: .4px; }
  .brand-caption { display: none; }
  .brand-mark { width: 23px; height: 28px; }
  .toolbar { gap: 4px; }
  .tool-btn { min-width: 44px; min-height: 44px; padding: 8px; font-size: 12px; }
  .toolbar .back-to-games { flex: 0 0 44px; width: 44px; padding: 8px; }
  .back-to-games span { display: none; }
  .game-stage { border-radius: 6px; box-shadow: 0 12px 35px #0006; }
  #game { touch-action: none; }
  .touch-controls { display: flex; gap: 8px; min-height: 64px; }
  .touch-group { gap: 4px; }
  .touch-btn {
    height: 64px; min-width: 56px; padding: 0 8px; font-size: 13px; border-radius: 12px;
    color: #e6eee7; border-color: #b6c5a969; background: linear-gradient(155deg, #35555a, #193039);
    box-shadow: inset 0 1px #d9e4c92b, inset 0 -4px #0718206e, 0 5px 12px #0004;
  }
  .direction-btn { font-size: 27px; }
  .jump-btn { color: #152428; background: linear-gradient(150deg, #efd398, #c6a366); border-color: #efd092; }
  body[data-control-size="large"] .touch-btn { height: 76px; min-width: 56px; }
  body[data-control-size="large"] .direction-btn { font-size: 30px; }
  .control-settings { display: flex; min-height: 44px; color: #c0d1ce; }
  .control-settings select { min-height: 44px; color: #f0e4c9; border-color: #c0b58565; font-size: 13px; }
  .keyboard-controls, .touch-tip { display: none; }
  .game-footer { justify-content: center; }
  .best-run { font-size: 12px; text-align: center; }
  .hud-label { display: none; }
  .hud-progress .hud-label { display: inline; }
  .mobile-hud { min-height: 38px; padding: 5px 9px; }
  .tutorial-card, .boss-notice { padding: 8px 10px; gap: 9px; min-height: 60px; }
  .tutorial-card strong, .boss-notice strong { font-size: 13px; color: #f1e7cf; }
  .tutorial-card p, .boss-notice p { font-size: 12px; color: #c3d6cf; }
  .tutorial-emblem { display: none; }
  .mobile-screen-tip { display: block; }
  body[data-game-mode="title"] .game-stage { aspect-ratio: auto; }
  body[data-game-mode="title"] #game { display: none; }
  body[data-game-mode="title"] .start-screen {
    position: relative; min-height: 490px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto;
    gap: 20px; padding: 24px 16px 20px;
    background: linear-gradient(90deg, #06151acc, #06151a2e), linear-gradient(0deg, #041219fa 0%, #05171b73 50%, #08222908 100%),
      url("assets/optimized-v10/landscape.webp") 58% center / cover,
      #102a33;
  }
  body[data-game-mode="title"] .start-heading { max-width: 100%; width: 100%; padding: 18px 16px; }
  body[data-game-mode="title"] .start-heading .eyebrow { display: flex; font-size: 12px; letter-spacing: .4px; margin-bottom: 16px; }
  body[data-game-mode="title"] h1 { font-size: clamp(38px, 10.8vw, 66px); letter-spacing: -1.2px; }
  body[data-game-mode="title"] .title-prefix { margin-bottom: 9px; font-size: 18px; }
  body[data-game-mode="title"] .start-intro { font-size: 14px; margin: 17px 0 0; max-width: 32ch; line-height: 1.5; }
  body[data-game-mode="title"] .start-panel { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 16px; padding: 14px; }
  body[data-game-mode="title"] .start-actions { width: 100%; }
  body[data-game-mode="title"] .quest-points { display: flex; order: 1; padding: 0 0 13px; margin: 0; gap: 12px; border-bottom: 1px solid #adbda63d; }
  body[data-game-mode="title"] .start-actions { order: 2; }
  body[data-game-mode="title"] .quest-points li { gap: 8px; }
  body[data-game-mode="title"] .quest-points strong { font-size: 13px; }
  body[data-game-mode="title"] .quest-points small { display: none; }
  body[data-game-mode="title"] .primary-btn { min-height: 48px; font-size: 14px; padding: 11px 20px; }
  body[data-game-mode="title"] .space-replay-btn { display: block; min-height: 44px; font-size: 13px; }
  body[data-game-mode="title"] .loading-status, body[data-game-mode="title"] .medal-shelf { font-size: 12px; text-align: center; }
  body[data-game-mode="title"] .realm-label, body[data-game-mode="title"] .art-credit { display: none; }
  body[data-game-mode="title"] :is(.touch-controls, .control-settings, .mobile-screen-tip) { display: none; }
  body:is(.is-fullscreen, .is-expanded) .wrap { width: calc(var(--game-viewport-width, 100vw) - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))); }
}

/* Portrait puts the action near both thumbs and preserves the scene's proportions. */
@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (max-width: 760px) {
  body:is([data-game-mode="playing"], [data-game-mode="paused"]) { overflow: hidden; }
  body:not([data-game-mode="title"]) .wrap {
    height: var(--game-viewport-height, 100dvh); min-height: 0; display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px 44px minmax(0, 1fr) auto 44px 17px;
    align-content: start; gap: 8px;
  }
  body:not([data-game-mode="title"]) .game-header { grid-row: 1; }
  body:not([data-game-mode="title"]) .mobile-hud { grid-row: 2; }
  body:not([data-game-mode="title"]) .game-stage { grid-row: 3; aspect-ratio: auto; width: 100%; height: 100%; min-height: 0; max-height: calc((var(--game-viewport-width, 100vw) - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))) * 1.125); max-width: 100%; justify-self: center; align-self: center; }
  body:not([data-game-mode="title"]) .touch-controls { grid-row: 4; }
  body:not([data-game-mode="title"]) .control-settings { grid-row: 5; }
  body:not([data-game-mode="title"]) .mobile-screen-tip { grid-row: 6; }
  body:not([data-game-mode="title"]) .game-footer { display: none; }
  .touch-controls { padding: 8px 0 0; border-top: 1px solid #a6c5b529; }
}
@media (max-width: 760px) {
  .game-header .brand { display: none; }
  .toolbar { width: 100%; justify-content: space-between; }
  .tool-btn { flex: 1 1 auto; }
}
@media (max-width: 350px) {
  .fullscreen-label { display: none; }
  .hud-progress { display: none; }
  .touch-btn { padding: 0 6px; }
  .medal-outcome { width: 72px; }
  body[data-game-mode="title"] .start-screen { padding-left: 12px; padding-right: 12px; }
  body[data-game-mode="title"] .start-heading { padding: 16px 12px; }
}
@media (orientation: portrait) and (max-height: 650px) and (max-width: 760px) {
  body:not([data-game-mode="title"]) .wrap { grid-template-rows: 44px 44px minmax(0, 1fr) auto 44px; gap: 5px; }
  body:not([data-game-mode="title"]) .mobile-screen-tip { display: none; }
  .mobile-hud { min-height: 32px; padding-top: 3px; padding-bottom: 3px; }
  .hud-hearts { font-size: 21px; }
  .tutorial-card, .boss-notice { min-height: 54px; padding: 6px 8px; }
  .tutorial-card p, .boss-notice p { line-height: 1.3; margin-top: 2px; }
  .touch-controls { padding-top: 5px; min-height: 61px; }
  .touch-btn { height: 56px; }
  body[data-control-size="large"] .touch-btn { height: 72px; }
  .control-settings, .control-settings select { min-height: 44px; }
  body[data-game-mode="title"] .start-screen { min-height: 450px; padding-top: 16px; padding-bottom: 16px; gap: 14px; }
  body[data-game-mode="title"] .start-heading .eyebrow { margin-bottom: 12px; }
  body[data-game-mode="title"] .quest-points { display: none; }
}
@media (min-width: 761px) and (pointer: fine) {
  body[data-game-mode="playing"]:not(.is-fullscreen):not(.is-expanded) .wrap, body[data-game-mode="paused"]:not(.is-fullscreen):not(.is-expanded) .wrap {
    width: min(1280px, calc(var(--game-viewport-width, 100vw) - 56px), calc((100svh - 240px) * 1.777778));
  }
}

/* The landscape camera widens to fit this stage. Controls occupy their own row. */
@media (max-height: 600px) and (orientation: landscape), (pointer: coarse) and (max-height: 900px) and (orientation: landscape) {
  body.is-compact:not([data-game-mode="title"]) {
    --touch-height: 64px;
    --safe-top: max(6px, env(safe-area-inset-top));
    --safe-bottom: calc(max(6px, env(safe-area-inset-bottom)) + var(--dock-shift));
    --stage-height: min(calc(var(--game-viewport-height, 100dvh) - 44px - var(--touch-height) - 12px - var(--safe-top) - var(--safe-bottom)), calc((var(--game-viewport-width, 100vw) - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))) * .5625));
    overflow: hidden;
  }
  body.is-compact[data-control-size="large"]:not([data-game-mode="title"]) { --touch-height: 76px; }
  body.is-compact:not([data-game-mode="title"]) .wrap {
    width: calc(var(--game-viewport-width, 100vw) - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)));
    height: var(--game-viewport-height, 100dvh); min-height: 0; display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 44px minmax(0, 1fr) var(--touch-height);
    align-content: start; align-items: center; gap: 6px;
    padding: var(--safe-top) 0 var(--safe-bottom);
  }
  body.is-compact:not([data-game-mode="title"]) .game-header { grid-column: 7 / -1; grid-row: 1; justify-content: end; min-width: 0; }
  body.is-compact:not([data-game-mode="title"]) .brand,
  body.is-compact:not([data-game-mode="title"]) .fullscreen-label { display: none; }
  body.is-compact:not([data-game-mode="title"]) .toolbar { gap: 3px; width: 100%; justify-content: end; }
  body.is-compact:not([data-game-mode="title"]) .tool-btn { min-width: 44px; min-height: 44px; padding: 6px; font-size: 12px; flex: 1 1 auto; }
  body.is-compact:not([data-game-mode="title"]) .mobile-hud { grid-column: 1 / 5; grid-row: 1; min-height: 40px; padding: 5px 8px; gap: 6px; }
  body.is-compact:not([data-game-mode="title"]) .hud-hearts { font-size: 21px; letter-spacing: 1px; }
  body.is-compact:not([data-game-mode="title"]) .hud-item { font-size: 12px; gap: 4px; }
  body.is-compact:not([data-game-mode="title"]) .hud-progress { display: none; }
  body.is-compact:not([data-game-mode="title"]) .game-stage {
    grid-column: 1 / -1; grid-row: 2; justify-self: center; aspect-ratio: auto; height: var(--stage-height);
    width: min(100%, calc(var(--stage-height) * 3.555556)); max-width: none; border-radius: 5px;
  }
  body.is-compact:not([data-game-mode="title"]) .touch-controls { display: contents; }
  body.is-compact:not([data-game-mode="title"]) .movement-controls { grid-column: 1 / 5; grid-row: 3; justify-self: start; }
  body.is-compact:not([data-game-mode="title"]) .action-controls { grid-column: 10 / -1; grid-row: 3; justify-self: end; }
  body.is-compact:not([data-game-mode="title"]) .touch-btn { height: var(--touch-height); min-width: 56px; padding: 0 8px; }
  body.is-compact:not([data-game-mode="title"]) .tutorial-card,
  body.is-compact:not([data-game-mode="title"]) .boss-notice { min-height: 0; height: 100%; padding: 5px 8px; gap: 6px; }
  body.is-compact:not([data-game-mode="title"]) .tutorial-card strong,
  body.is-compact:not([data-game-mode="title"]) .boss-notice strong { font-size: 12px; line-height: 1.2; }
  body.is-compact:not([data-game-mode="title"]) .tutorial-card p,
  body.is-compact:not([data-game-mode="title"]) .boss-notice p { font-size: 12px; line-height: 1.2; margin-top: 3px; }
  body.is-compact:not([data-game-mode="title"]) .control-settings { grid-column: 5 / 7; grid-row: 1; min-width: 0; min-height: 44px; justify-content: center; }
  body.is-compact:not([data-game-mode="title"]) .control-settings label { display: none; }
  body.is-compact:not([data-game-mode="title"]) .control-settings select { min-height: 44px; max-width: 100%; width: 132px; padding: 6px 16px 6px 7px; font-size: 12px; }
  body.is-compact:not([data-game-mode="title"]) :is(.game-footer, .mobile-screen-tip) { display: none; }
  body[data-game-mode="title"] .wrap { gap: 6px; padding: max(6px, env(safe-area-inset-top)) 0 max(6px, env(safe-area-inset-bottom)); }
  body[data-game-mode="title"] .game-footer { display: none; }
  body[data-game-mode="title"] .start-screen { min-height: 265px; padding: 20px 24px; gap: 22px; grid-template-columns: 1fr 220px; grid-template-rows: 1fr; }
  body[data-game-mode="title"] .start-heading { padding: 13px 16px; }
  body[data-game-mode="title"] .start-heading .eyebrow { display: none; }
  body[data-game-mode="title"] h1 { font-size: clamp(32px, 4.8vw, 48px); }
  body[data-game-mode="title"] .title-prefix { font-size: 17px; margin-bottom: 9px; }
  body[data-game-mode="title"] .start-panel { display: block; }
  body[data-game-mode="title"] .quest-points { display: none; }
  body[data-game-mode="title"] .start-intro { font-size: 12px; margin-top: 12px; }
  body.is-compact .modal-panel { padding: 12px 16px; }
  body.is-compact .modal-panel .modal-emblem, body.is-compact .modal-panel > .eyebrow { display: none; }
  body.is-compact .modal-panel h2 { font-size: 24px; margin-bottom: 7px; }
  body.is-compact .win-panel > p.win-stats { margin-bottom: 9px; }
  body.is-compact .win-panel > p.medal-saved { margin-bottom: 9px; }
  body.is-compact .medal-result { padding: 6px 10px; }
}
/* Short phones show the immediate combat instruction without clipping it. */
@media (orientation: landscape) and (max-width: 700px) {
  body.is-compact:not([data-game-mode="title"]) .boss-notice p { display: none; }
  body.is-compact:not([data-game-mode="title"]) .boss-notice strong { letter-spacing: 0; }
}
/* Saved adventures, progress, and preferences share one readable settings panel. */
:root { --dock-shift: 0px; }
body[data-touch-dock="middle"] { --dock-shift: 24px; }
body[data-touch-dock="high"] { --dock-shift: 48px; }
.continue-btn { margin-bottom: 8px; }
.saved-run-status { margin: 0 0 12px; color: #f0d59b; font-size: 12px; line-height: 1.45; }
.start-actions:has(.continue-btn:not([hidden])) #startBtn { color: #f0eee1; background: #19343d; border-color: #8ca7a36b; box-shadow: none; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.hud-journey-btn { border: 0; background: transparent; color: #fffdf5; padding: 0 4px; min-height: 44px; cursor: pointer; border-radius: 5px; }
.hud-journey-btn:hover { background: #d9c79217; }
.hud-journey-btn::after { content: "›"; margin-left: 3px; color: #d8bf81; font-size: 18px; }
.control-adjust-btn { min-height: 44px; padding: 8px 15px; border: 1px solid #b0bba54a; border-radius: 6px; background: #162f38; color: #d5e2dc; font-size: 12px; }
.control-adjust-btn:hover { border-color: #d6bd7c; }
.settings-dialog {
  position: fixed; inset: 0; width: min(620px, calc(var(--game-viewport-width, 100vw) - 24px)); max-height: calc(var(--game-viewport-height, 100dvh) - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  margin: auto; padding: 24px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #b9a87680; border-radius: 12px;
  color: #f7f5e9; background: #0c2029; box-shadow: 0 24px 90px #000b; scrollbar-color: #68796e #112c34;
}
.settings-dialog:not([open]) { display: none; }
.settings-dialog::backdrop { background: #020e17d9; backdrop-filter: blur(8px); }
.settings-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; position: sticky; top: -24px; margin-top: -24px; padding-top: 24px; padding-bottom: 8px; background: #0c2029; z-index: 2; }
.settings-heading .eyebrow { display: block; text-align: left; font-size: 10px; margin-bottom: 9px; }
.settings-heading h2 { font-size: 27px; margin-bottom: 0; }
.settings-close { flex: 0 0 44px; min-width: 44px; height: 44px; border: 1px solid #9fb0a950; border-radius: 8px; color: #f6f0df; background: #213a42; font-size: 28px; }
.settings-intro { color: #c7d7d5; margin: 5px 0 24px; font-size: 13px; line-height: 1.5; }
.settings-section { padding-top: 20px; margin-top: 20px; border-top: 1px solid #9fb6aa30; scroll-margin-top: 88px; }
.settings-section h3 { font: 700 17px/1.3 var(--display); margin: 0 0 14px; color: #f2d59a; }
.settings-fields { display: grid; gap: 10px; }
.settings-fields label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 1.3fr); gap: 14px; align-items: center; font-size: 13px; line-height: 1.4; }
.settings-fields select { min-height: 44px; width: 100%; max-width: 100%; padding: 9px 12px; color: #f3f3e9; background: #19343e; border: 1px solid #a6b8a957; border-radius: 6px; font-size: 13px; }
.settings-note { margin: 12px 0 0; color: #bdd0cf; font-size: 12px; line-height: 1.6; }
.volume-setting { margin: 12px 0; }
.volume-setting label { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.volume-setting output { font-size: 12px; font-variant-numeric: tabular-nums; color: #f0d49a; }
.volume-setting input { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: #e0bd77; cursor: pointer; }
.section-progress { display: grid; gap: 9px; margin-top: 15px; }
.journey-section { padding: 12px; background: #19333b; border: 1px solid #789b9733; border-radius: 6px; }
.journey-section > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.journey-section strong { font-size: 13px; line-height: 1.4; }
.journey-section span { flex-shrink: 0; color: #c3d4cf; font-size: 12px; }
.journey-section progress { width: 100%; height: 6px; display: block; margin-top: 10px; border: 0; border-radius: 4px; accent-color: #e0bd77; background: #05171e; overflow: hidden; }
.journey-section progress::-webkit-progress-bar { background: #05171e; }
.journey-section progress::-webkit-progress-value { background: #dfbb77; }
.journey-section.is-complete span { color: #c5e2a3; }
.settings-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.settings-actions button { min-height: 44px; }
body.settings-open .touch-controls { pointer-events: none; }
@media (pointer: coarse), (max-width: 760px) {
  .mobile-hud { min-height: 44px; padding: 0 9px; }
  body[data-handedness="left"] .touch-controls { flex-direction: row-reverse; }
  .settings-dialog { padding: 18px; }
  .settings-heading { top: -18px; margin-top: -18px; padding-top: 18px; }
  .settings-heading h2 { font-size: 24px; }
}
@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (max-width: 760px) {
  body:not([data-game-mode="title"]) .wrap { padding-bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--dock-shift)); }
}
@media (max-width: 400px) {
  .settings-fields label { grid-template-columns: 1fr; gap: 5px; }
  .settings-actions { flex-direction: column; }
  .settings-actions .primary-btn { width: 100%; }
}
@media (max-height: 600px) and (orientation: landscape), (pointer: coarse) and (max-height: 900px) and (orientation: landscape) {
  body.is-compact:not([data-game-mode="title"]) .mobile-hud { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  body.is-compact[data-handedness="left"]:not([data-game-mode="title"]) .movement-controls { grid-column: 9 / -1; justify-self: end; }
  body.is-compact[data-handedness="left"]:not([data-game-mode="title"]) .action-controls { grid-column: 1 / 4; justify-self: start; }
  body.is-compact:not([data-game-mode="title"]) .control-adjust-btn { max-width: 100%; padding: 6px 8px; white-space: normal; font-size: 12px; }
  body.is-compact:not([data-game-mode="title"]) .boss-notice { align-items: flex-start; }
}
@media (orientation: landscape) and (max-width: 700px) {
  /* Control preferences remain available through Settings in the toolbar. */
  body.is-compact:not([data-game-mode="title"]) .mobile-hud { grid-column: 1 / 7; }
  body.is-compact:not([data-game-mode="title"]) .control-settings { display: none; }
  body.is-compact:not([data-game-mode="title"]) .boss-notice p { display: block; }
}

/* Touching the scene keeps the adventure visible and browser gestures out of play. */
.wrap, .wrap button, .wrap canvas, .wrap svg {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.wrap img, .wrap svg { -webkit-user-drag: none; }
.settings-dialog button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.settings-dialog { touch-action: pan-y; }
.settings-dialog :is(input, select, textarea) { -webkit-user-select: auto; user-select: auto; }
.scene-duck-btn, .scene-guide { display: none; }
.scene-instructions { margin-top: 15px; padding: 14px 15px; border: 1px solid #8eaa9c38; border-radius: 7px; background: #152f38; }
.scene-instructions ul { margin: 0 0 14px; padding-left: 18px; color: #cbdbd7; font-size: 13px; line-height: 1.6; }
.scene-instructions li + li { margin-top: 7px; }
.scene-instructions strong { color: #f3e6bf; }
.scene-instructions button { min-height: 44px; }
.classic-control-preferences { margin-top: 15px; }
body:is(.is-fullscreen, .is-expanded) .game-header { position: sticky; top: max(6px, env(safe-area-inset-top)); z-index: 30; }
body:is(.is-fullscreen, .is-expanded) .tool-btn { min-width: 44px; min-height: 44px; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) { overflow: hidden; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .wrap {
  position: fixed; top: var(--game-viewport-offset-top, 0px); left: var(--game-viewport-offset-left, 0px); right: auto; bottom: auto;
  width: var(--game-viewport-width, 100vw); height: var(--game-viewport-height, 100dvh);
  min-height: 0; max-width: none; margin: 0; padding: 0; display: block; overflow: hidden;
}
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .game-stage {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; max-width: none;
  aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none;
}
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .game-stage::after { display: none; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) #game { touch-action: none; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) :is(.touch-controls, .control-settings, .mobile-screen-tip, .game-footer) { display: none; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .game-header {
  position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); left: auto;
  width: auto; max-width: calc(100% - 20px); z-index: 30; display: flex;
}
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .brand { display: none; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .toolbar { width: auto; gap: 4px; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .tool-btn {
  flex: 0 0 auto; min-width: 44px; height: 44px; min-height: 44px; padding: 8px 11px; border-radius: 8px;
  border-color: #dac79755; color: #faf5e5; background: #091d27de; box-shadow: 0 2px 12px #0003; backdrop-filter: blur(6px);
}
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .fullscreen-label { display: none; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .mobile-hud {
  position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 50px); left: max(10px, env(safe-area-inset-left)); right: auto;
  width: auto; max-width: calc(100% - 20px); min-height: 44px; height: 44px; padding: 0 10px; gap: 13px; z-index: 10;
  border: 1px solid #dac79745; border-radius: 8px; background: #091d27d9; box-shadow: 0 2px 12px #0003; backdrop-filter: blur(6px);
}
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .hud-hearts { font-size: 20px; letter-spacing: 1px; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .hud-item { font-size: 13px; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) :is(.hud-label, .hud-progress) { display: none; }
body.is-compact[data-input-mode="scene"]:not([data-game-mode="title"]) .scene-duck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; position: absolute;
  right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 12;
  height: 44px; min-width: 56px; padding: 8px 10px; border: 1px solid #dac79765; border-radius: 9px; color: #f8edd3;
  background: #0a202bdc; box-shadow: 0 3px 15px #0004; font-size: 12px; font-weight: 650; touch-action: none;
}
body.is-compact[data-input-mode="scene"]:not([data-game-mode="title"]) .scene-duck-btn:is(:active, .is-pressed, .pressed, .held) { background: #766640; color: #fff8e7; }
body.is-compact[data-input-mode="scene"][data-game-mode="playing"] .scene-guide {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; position: absolute;
  top: calc(max(8px, env(safe-area-inset-top)) + 106px); left: max(10px, env(safe-area-inset-left));
  width: min(360px, calc(100% - 20px)); padding: 11px 12px; border: 1px solid #dbbc784d; border-radius: 9px;
  background: #071d26e8; box-shadow: 0 8px 24px #0003; color: #fff3d6; z-index: 11; pointer-events: none;
}
.scene-guide strong { display: block; font-size: 13px; line-height: 1.3; margin-bottom: 5px; }
.scene-guide p { margin: 2px 0; font-size: 12px; line-height: 1.35; color: #d5e2dc; }
.scene-guide p.is-learned { color: #c5dda2; }
.scene-guide p.is-learned::before { content: "✓ "; }
.scene-guide button { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 7px 9px; border: 1px solid #d2bc805e; border-radius: 6px; background: #29423f; color: #fff2cb; font-size: 12px; font-weight: 650; pointer-events: auto; touch-action: manipulation; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .tutorial-card { display: flex; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .boss-notice {
  height: auto; min-height: 44px; align-items: center; padding: 7px 11px; background: #17232ced; border-radius: 8px;
}
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .boss-notice strong { font-size: 13px; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .boss-notice p { font-size: 12px; line-height: 1.3; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .modal-screen { padding-top: max(66px, calc(env(safe-area-inset-top) + 58px)); }
body.settings-open #sceneDuckBtn { pointer-events: none; }
@media (orientation: landscape) {
  body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .mobile-hud { top: max(8px, env(safe-area-inset-top)); gap: 9px; }
  body.is-compact[data-input-mode="scene"][data-game-mode="playing"] .scene-guide { top: calc(max(8px, env(safe-area-inset-top)) + 52px); width: min(400px, calc(100% - 100px)); }
  body.is-compact[data-input-mode="scene"]:not([data-game-mode="title"]) .scene-duck-btn { bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (orientation: landscape) and (max-width: 660px) {
  body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .tool-btn { padding-left: 8px; padding-right: 8px; }
  body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .hud-item:has(#hudTime) { display: none; }
}

/* Contextual help stays in Settings; the trail shows only its current action. */
.tutorial-visual { display: block; flex: 0 0 48px; width: 48px; color: #f0ce83; }
.tutorial-visual svg { display: block; width: 100%; height: 48px; }
.tutorial-visual text { font: 650 7px var(--display); stroke: none; fill: currentColor; letter-spacing: .2px; }
.gesture-motion { animation: gesture-cue 1.6s ease-in-out infinite; }
@keyframes gesture-cue { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .tutorial-card {
  min-height: 0; height: auto; padding: 9px 10px; gap: 9px; border-radius: 9px;
  border-color: #d4ba765a; background: #081f2af2; box-shadow: 0 6px 24px #0004; pointer-events: none;
}
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .tutorial-card strong { font-size: 13px; line-height: 1.25; color: #fff2d2; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .tutorial-card p { margin-top: 4px; font-size: 12px; line-height: 1.4; color: #e0ebe6; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .boss-notice.is-warning { background: #37251ef5; border-left-color: #ffc282; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]):not([data-game-mode="title"]) .boss-notice.is-vulnerable { background: #18352cf5; border-left-color: #c1e89e; }
.objective-card {
  position: absolute; z-index: 9; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(370px, calc(100% - 94px));
  padding: 8px 10px; border: 1px solid #d4ba765a; border-radius: 9px; background: #071e29ed;
  color: #fbf2d8; box-shadow: 0 6px 24px #0003; pointer-events: none;
}
.objective-card > div { flex: 1; min-width: 0; }
.objective-icon { flex: 0 0 16px; color: #f0ce83; font-size: 18px; }
.objective-card strong { display: block; font: 600 12px/1.35 var(--display); }
.objective-progress { font-size: 12px; font-weight: 700; white-space: nowrap; color: #fae2a5; }
.ending-screen {
  position: absolute; inset: 0; z-index: 18; display: flex; align-items: end; justify-content: center;
  padding: 40px 30px 72px; text-align: center;
  background: linear-gradient(0deg, #04141aeb, #04141a4d 34%, #04141a00 65%); touch-action: manipulation;
}
.ending-copy { animation: arrival-copy .8s ease both; max-width: 580px; }
.ending-copy .eyebrow { margin-bottom: 11px; font-size: 11px; letter-spacing: 1.4px; }
.ending-copy h2 { margin: 0; font: 750 clamp(26px, 4.6vw, 49px)/1.1 var(--display); letter-spacing: -.7px; color: #fff9e9; text-shadow: 0 2px 16px #0008; }
.ending-copy > p:last-of-type { margin: 13px 0 0; color: #e5eee7; font-size: 14px; line-height: 1.5; }
.ending-track { width: 100px; height: 2px; margin: 20px auto 0; background: #d7c49633; overflow: hidden; }
.ending-track span { display: block; height: 100%; background: #f2d79c; transform-origin: left; transform: scaleX(0); }
.world-loading-screen { position: absolute; inset: 0; z-index: 24; display: grid; place-items: center; padding: 64px 18px 18px; background: #04131cf0; backdrop-filter: blur(8px); overflow: auto; touch-action: pan-y; }
.world-loading-panel { max-width: 380px; width: 100%; padding: 22px; text-align: center; border: 1px solid #d4ba765a; border-radius: 12px; background: #0c2431; }
.world-loading-emblem { color: #e9cb84; font-size: 33px; }
.world-loading-panel .eyebrow { margin: 10px 0; font-size: 10px; letter-spacing: 1px; }
.world-loading-panel h2 { margin: 0; font: 750 25px/1.2 var(--display); color: #fff4d8; }
.world-loading-panel > p:not(.eyebrow) { font-size: 13px; line-height: 1.5; color: #dae6df; }
.world-loading-progress { height: 4px; margin: 23px 0; overflow: hidden; background: #dfc68e25; border-radius: 4px; }
.world-loading-progress span { display: block; height: 100%; background: #eacf8a; transform-origin: left; transform: scaleX(0); transition: transform .2s ease; }
.world-loading-panel .world-loading-error { color: #ffe0cb; padding: 10px; border-radius: 5px; background: #56342166; }
.world-loading-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.world-loading-actions button { min-height: 44px; min-width: 120px; }
#skipEndingBtn { position: absolute; right: max(15px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); min-height: 44px; }
body:is([data-game-mode="ending"], [data-game-mode="loading"]) :is(.touch-controls, .scene-duck-btn, .control-settings, .mobile-screen-tip) { visibility: hidden; pointer-events: none; }
@keyframes arrival-copy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (orientation: landscape) and (max-height: 600px) {
  .objective-card { max-width: min(370px, calc(100% - 94px)); padding: 7px 10px; }
  .ending-screen { padding-bottom: 59px; }
  .ending-copy .eyebrow { margin-bottom: 6px; }
  .ending-copy > p:last-of-type { margin-top: 8px; font-size: 12px; }
  .ending-track { margin-top: 12px; }
  .world-loading-panel { padding: 15px 20px; }
  .world-loading-emblem { display: none; }
  .world-loading-panel .eyebrow { margin-top: 0; }
}
@media (max-width: 370px) {
  .tutorial-visual { flex-basis: 38px; width: 38px; }
  .objective-card { gap: 7px; padding: 9px; }
  .objective-icon { display: none; }
}
@media (orientation: landscape) and (max-height: 420px) {
  .world-loading-screen { padding: 57px 18px 10px; }
  .world-loading-panel { max-width: 500px; padding: 12px 18px; }
  .world-loading-panel .eyebrow { display: none; }
  .world-loading-panel h2 { font-size: 22px; }
  .world-loading-panel > p:not(.eyebrow) { margin: 9px 0; font-size: 12px; }
  .world-loading-panel .world-loading-error { padding: 7px 10px; }
  .world-loading-progress { margin: 14px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Combat cues overlay the stage, so no notification row shifts or crowds the scene. */
#playAssistance {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 24px); min-height: 0; height: auto;
  display: block; z-index: 11; pointer-events: none;
}
#bossNotice {
  min-height: 0; height: auto; padding: 7px 12px; border-radius: 7px;
  justify-content: center; text-align: center; background: #17232ced;
}
#bossNotice strong { font-size: 12px; line-height: 1.35; letter-spacing: .2px; }
#tutorialCard.context-help { margin-top: 15px; border-radius: 7px; min-height: 0; padding: 12px; }
#tutorialCard .gesture-motion { animation: none; }
body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]) #playAssistance { top: calc(max(8px, env(safe-area-inset-top)) + 106px); }
@media (orientation: landscape) {
  body.is-compact:is([data-input-mode="scene"], [data-input-mode="joystick"]) #playAssistance { top: calc(max(8px, env(safe-area-inset-top)) + 52px); }
}

/* A fixed thumb rest and a three-button arc leave the center of the scene clear. */
.joystick-controls {
  --stick-size: 96px; --thumb-size: 40px; --action-size: 52px; --sword-size: 60px;
  --actions-width: 116px; --actions-height: 116px; --control-edge: 12px;
  --control-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  position: absolute; inset: 0; z-index: 12; pointer-events: none;
}
.move-joystick {
  position: absolute; left: max(var(--control-edge), calc(env(safe-area-inset-left) + 8px));
  bottom: calc(var(--control-bottom) + var(--dock-shift));
  width: var(--stick-size); height: var(--stick-size); border-radius: 50%;
  border: 1px solid #dec89752; background: radial-gradient(circle, #23414a30, #071e2b45);
  box-shadow: inset 0 1px 1px #ffffff12, 0 2px 8px #03101d26;
  pointer-events: auto; touch-action: none; cursor: grab;
  transition: border-color .16s, background-color .16s;
}
.joystick-track { position: absolute; inset: 14%; border: 1px solid #b4d6d91c; border-radius: 50%; pointer-events: none; }
.joystick-direction { position: absolute; width: 12px; height: 12px; top: calc(50% - 6px); fill: none; stroke: #e3d7b4b3; stroke-width: 1.6; pointer-events: none; }
.joystick-left { left: 7px; }.joystick-right { right: 7px; }
.joystick-thumb {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center;
  width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%;
  transform: translate(calc(-50% + var(--stick-x, 0px)), calc(-50% + var(--stick-y, 0px)));
  border: 1px solid #ead6a2b8; background: linear-gradient(145deg, #345465af, #132e3fbd 70%);
  box-shadow: inset 0 1px 1px #f5efd645, 0 2px 6px #020c165c;
  pointer-events: none; transition: transform .15s ease-out, border-color .15s, box-shadow .15s;
}
.joystick-thumb > span { width: 7px; height: 7px; border-radius: 50%; background: #e7cf8eb3; }
.move-joystick.is-active { border-color: #83e5eac2; background-color: #1e758029; cursor: grabbing; }
.move-joystick.is-active .joystick-thumb { transition: border-color .15s, box-shadow .15s; border-color: #a2f0ed; box-shadow: inset 0 1px 2px #f5efd65c, 0 0 14px #6fdddf30, 0 5px 12px #020c1699; }
.mobile-actions {
  position: absolute; right: max(var(--control-edge), calc(env(safe-area-inset-right) + 8px));
  bottom: calc(var(--control-bottom) + var(--dock-shift));
  width: var(--actions-width); height: var(--actions-height); pointer-events: none;
}
.mobile-action-btn {
  position: absolute; display: grid; place-items: center; width: var(--action-size); height: var(--action-size);
  padding: 0; border: 1px solid #d7c69185; border-radius: 50%; color: #fff3d7;
  background: linear-gradient(145deg, #173a498c, #091d2b70 74%);
  box-shadow: inset 0 1px 1px #fff1cb21, 0 2px 7px #03132333;
  pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none;
  transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.mobile-action-btn > svg:not(.sword-combo-ring) { width: 26px; height: 26px; pointer-events: none; }
.mobile-jump { right: 0; top: 0; }
.mobile-duck { right: 0; bottom: 0; color: #d9e7e8; border-color: #aecac380; }
.mobile-sword { left: 0; bottom: 24px; width: var(--sword-size); height: var(--sword-size); color: #f6d694; border-color: #e4bd7099; background: linear-gradient(145deg, #31423c9c, #102b3878 75%); }
.mobile-sword > svg.sword-glyph { width: 32px; height: 32px; }
.mobile-action-btn:is(:active, .is-pressed, .pressed, .held) { background: #214f5bdd; color: #ffffff; border-color: #a8f0ef; box-shadow: inset 0 1px 5px #00162580, 0 0 0 2px #70e2e321; }
.sword-combo-ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); fill: none; pointer-events: none; }
.combo-track, .combo-arc { stroke-width: 2; }
.combo-track { stroke: #d5bd751f; }
.combo-arc { stroke: #e3c784; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.mobile-sword[data-combo="swing"] .combo-arc, .mobile-sword[data-combo="window"] .combo-arc, .mobile-sword[data-combo="queued"] .combo-arc, .mobile-sword[data-combo="second"] .combo-arc { opacity: 1; }
.mobile-sword:is([data-combo="window"], [data-combo="queued"]) { border-color: #9ff8ed; box-shadow: inset 0 1px 2px #fff1cb35, 0 0 0 3px #66e3da2a, 0 3px 20px #05182980; }
.mobile-sword:is([data-combo="window"], [data-combo="queued"]) .combo-arc { stroke: #a3fff1; }
.mobile-sword[data-combo="queued"] .combo-track { stroke: #a3fff1; }
.sword-combo-indicator { position: absolute; right: -3px; top: 0; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #99eee1; border-radius: 50%; background: #164549; color: #e2fff4; font: 750 10px var(--display); pointer-events: none; }
body.settings-open .joystick-controls { display: none; }
body[data-control-size="large"] .joystick-controls { --stick-size: 112px; --thumb-size: 46px; --action-size: 58px; --sword-size: 68px; --actions-width: 134px; --actions-height: 128px; }
body.is-compact[data-input-mode="joystick"] .objective-card { bottom: calc(max(12px, calc(env(safe-area-inset-bottom) + 8px)) + var(--dock-shift) + 130px); max-width: min(310px, calc(100% - 40px)); }
body.is-compact[data-input-mode="joystick"][data-control-size="large"] .objective-card { bottom: calc(max(12px, calc(env(safe-area-inset-bottom) + 8px)) + var(--dock-shift) + 142px); }
@media (orientation: landscape) and (max-height: 380px) {
  body[data-touch-dock="high"] .joystick-controls { --dock-shift: 28px; }
  body.is-compact[data-input-mode="joystick"] .objective-card { top: calc(max(8px, env(safe-area-inset-top)) + 54px); bottom: auto; }
}

/* Layout adjustment lives in the paused scene; normal play has no extra controls. */
.control-layout-preferences { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 15px; margin-top: 16px; }
.control-layout-preferences > button { min-height: 44px; }
.control-layout-preferences .settings-note { flex: 1 1 180px; margin: 0; }
.control-layout-preferences .layout-default-note { flex-basis: 100%; }
.joystick-controls.has-custom-layout .mobile-actions { position: static; width: auto; height: auto; }
.control-safe-area-probe { position: absolute; width: 0; height: 0; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.control-layout-editor {
  position: absolute; z-index: 45; top: max(8px, env(safe-area-inset-top));
  left: max(10px, calc(env(safe-area-inset-left) + 8px)); right: max(10px, calc(env(safe-area-inset-right) + 8px));
  display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; align-items: center;
  max-width: 780px; margin: 0 auto; padding: 10px 12px; border: 1px solid #dbbe7b6b;
  border-radius: 12px; background: #091c28f5; box-shadow: 0 6px 24px #0005; touch-action: none;
}
.layout-editor-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.layout-editor-heading h2 { margin: 0; color: #fff4da; font: 750 17px/1.25 var(--display); }
.layout-orientation { padding: 4px 7px; border: 1px solid #80dbd456; border-radius: 5px; color: #b7eee8; font-size: 11px; font-weight: 650; }
.layout-editor-actions { display: flex; gap: 6px; }
.layout-editor-actions button { min-width: 54px; min-height: 44px; padding: 8px 11px; border: 1px solid #a9b7b052; border-radius: 7px; background: #203642; color: #f3f4e9; font-size: 12px; font-weight: 700; }
.layout-editor-actions .layout-save-btn { color: #102630; background: #e9c784; border-color: #ffe5ad; }
.control-layout-editor > p { grid-column: 1 / -1; margin: 0; color: #c2d8d7; font-size: 12px; line-height: 1.5; }
body.control-layout-editing { overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: none; }
body.control-layout-editing .wrap {
  position: fixed !important; top: var(--game-viewport-offset-top, 0px) !important; left: var(--game-viewport-offset-left, 0px) !important;
  width: var(--game-viewport-width, 100vw) !important; height: var(--game-viewport-height, 100dvh) !important;
  display: block !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
body.control-layout-editing .game-stage {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  min-height: 0 !important; max-height: none !important; max-width: none !important; aspect-ratio: auto !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
body.control-layout-editing .game-stage::after {
  display: block !important; z-index: 10; inset: 0; opacity: 1;
  background: linear-gradient(90deg, transparent calc(50% - .5px), #d5c28745 calc(50% - .5px), #d5c28745 calc(50% + .5px), transparent calc(50% + .5px)), #06152238;
}
body.control-layout-editing :is(.game-header, .mobile-hud, .start-screen, .modal-screen, .ending-screen, .scene-guide, .scene-duck-btn, .objective-card, .play-assistance, .touch-controls, .control-settings, .mobile-screen-tip, .game-footer) { display: none !important; }
body.control-layout-editing #joystickControls { display: block !important; z-index: 40; }
body.control-layout-editing #game { display: block; }
body.control-layout-editing :is(.move-joystick, .mobile-action-btn) { border: 1.5px dashed #e8d19cd9; cursor: grab; background-color: #11344796; transition: none; }
body.control-layout-editing :is(.move-joystick, .mobile-action-btn)::after {
  content: attr(data-layout-name); position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  color: #f8e8c4; font: 650 9px/1 var(--display); pointer-events: none;
}
body.control-layout-editing .move-joystick::after { bottom: 9px; }
body.control-layout-editing .mobile-action-btn > svg:not(.sword-combo-ring) { transform: translateY(-3px); }
body.control-layout-editing .is-layout-dragging { cursor: grabbing; border-style: solid; border-color: #b3ffed; box-shadow: 0 0 0 4px #80efdc22, 0 6px 24px #00141ccc; }
body.control-layout-editing :is(.sword-combo-ring, .sword-combo-indicator) { display: none !important; }
@media (max-width: 560px) {
  .control-layout-editor { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .layout-editor-heading { justify-content: space-between; }
  .layout-editor-actions { grid-row: 3; justify-content: flex-end; }
  .layout-editor-actions button { flex: 1; }
  .layout-editor-heading h2 { font-size: 16px; }
  .control-layout-editor > p { font-size: 11px; line-height: 1.45; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .control-layout-editor { padding: 7px 10px; gap: 4px 10px; }
  .layout-editor-heading h2 { font-size: 15px; }
}

/* Small mobile tools keep the same 44px touch targets. */
.icon-tool-btn > svg { display: none; width: 22px; height: 22px; flex: 0 0 22px; }
.resume-play { display: none; }
body[data-game-mode="paused"] .pause-bars { display: none; }
body[data-game-mode="paused"] .resume-play { display: block; }
body.is-compact .icon-tool-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 9px; }
body.is-compact .icon-tool-btn > svg { display: block; }
body.is-compact .icon-tool-btn .tool-label, body.is-compact #muteBtn { display: none; }
.settings-sound-btn { min-height: 44px; margin-bottom: 10px; }
.control-opacity-setting { margin-top: 18px; }
.control-opacity-setting .settings-note { margin-top: 7px; }
.move-joystick, .mobile-action-btn, .touch-btn, .scene-duck-btn { opacity: var(--control-idle-opacity, .7); }
.move-joystick.is-active, .mobile-action-btn:is(:active, :focus-visible, .is-pressed, .pressed, .held),
.mobile-sword:is([data-combo="swing"], [data-combo="window"], [data-combo="queued"], [data-combo="second"]),
.touch-btn:is(:active, :focus-visible, .pressed, .held), .scene-duck-btn:is(:active, :focus-visible, .pressed, .held),
body.control-layout-editing :is(.move-joystick, .mobile-action-btn) { opacity: 1; }
body[data-reduced-effects="true"] :is(.move-joystick, .joystick-thumb, .mobile-action-btn, .combo-arc) { transition: none; animation: none; }
.practice-fields { margin-top: 15px; }
.practice-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.practice-settings-actions button { min-height: 44px; }
.practice-complete-screen { z-index: 34; background: #041119d9; backdrop-filter: blur(5px); }
.practice-complete-panel { width: min(470px, calc(100% - 32px)); }
.practice-complete-panel .eyebrow { margin-bottom: 12px; }
.modal-panel.practice-complete-panel h2 { font-size: clamp(23px, 4vw, 34px); }
.modal-panel.practice-complete-panel .practice-result-time { margin: 16px 0 6px; font: 750 clamp(34px, 7vw, 48px)/1.2 var(--display); color: #f6db9c; font-variant-numeric: tabular-nums; }
.modal-panel.practice-complete-panel .practice-result-best { margin: 0 0 22px; color: #b5e5d8; font-size: 13px; }
.practice-result-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.practice-result-actions > button { min-height: 44px; }
@media (orientation: landscape) and (max-height: 420px) {
  .practice-complete-panel { padding: 18px 22px; }
  .practice-complete-panel .eyebrow { margin-bottom: 8px; }
  .modal-panel.practice-complete-panel .practice-result-time { margin-top: 10px; font-size: 34px; }
  .modal-panel.practice-complete-panel .practice-result-best { margin-bottom: 15px; }
}

/* Keep the optional button controls usable below 320px. */
@media (max-width: 319px) {
  .touch-controls { gap: 6px; }
  .touch-group { gap: 3px; }
  .touch-btn, body[data-control-size="large"] .touch-btn { min-width: 44px; padding-inline: 5px; font-size: 11px; }
  .jump-btn span { display: none; }
}