:root {
  --ink: #f8ecd0;
  --quiet: #c2d0c2;
  --gold: #dfbd77;
  --deep: #132a35;
  --blue: #244b5d;
  --rim: #bda171;
  --quest-done: #bde5a5;
  --quest-done-bg: #244c38;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #182f32; color: var(--ink); font: 16px/1.35 system-ui, -apple-system, Arial, sans-serif; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #fff0af; outline-offset: 3px; }
.hidden { display: none !important; }
.game-root { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; isolation: isolate; touch-action: none; user-select: none; -webkit-user-select: none; background: #55724d; }
#worldCanvas { display: block; width: 100%; height: 100%; touch-action: none; }
.exploration-ui { position: absolute; inset: 0; pointer-events: none; }
.exploration-ui button, .joystick { pointer-events: auto; }
.hud { position: absolute; z-index: 3; top: calc(10px + env(safe-area-inset-top)); display: flex; align-items: center; background: linear-gradient(115deg, #102a35ec, #1d3b43de); border: 2px solid #b9a16f; box-shadow: 0 7px 22px #10201fa8, inset 0 1px #f2ddaa69; backdrop-filter: blur(8px); }
.hud-hero { left: calc(12px + env(safe-area-inset-left)); gap: 9px; width: 240px; min-height: 78px; padding: 6px 10px 6px 6px; border-radius: 12px 22px 22px 12px; }
.hud-portrait { width: 63px; height: 63px; object-fit: cover; object-position: center top; border: 2px solid #ebce8d; border-radius: 8px; background: #a89369; }
.hud-vitals { min-width: 0; flex: 1; }
.hud-vitals strong { display: block; margin-bottom: 3px; font: bold 17px/1.1 Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vital-row { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: #e1e8d9; }
.vital-row b { font-size: 10px; color: #f6e5c1; font-variant-numeric: tabular-nums; }
.vital-bar, .fighter-bar { height: 7px; margin: 2px 0 4px; border-radius: 9px; overflow: hidden; border: 1px solid #687d6d; background: #382f31; }
.vital-bar i, .fighter-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7ea760, #c7df89); }
.vital-bar.mana i { background: linear-gradient(90deg, #4e9cb0, #99d8e6); }
.hud-quest { right: calc(12px + env(safe-area-inset-right)); gap: 10px; max-width: min(360px, 45vw); min-height: 70px; padding: 7px 7px 7px 15px; border-radius: 20px 12px 12px 20px; }
.quest-copy { min-width: 0; text-align: right; }
.quest-copy span { display: block; color: #e3bf78; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.quest-copy strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: bold 15px/1.2 Georgia, serif; }
.quest-copy small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; color: #d8dfc8; font-size: 10px; line-height: 1.2; }
.round-button { flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 2px solid #ead296; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #486b72, #193744 70%); color: #f8e6b9; box-shadow: inset 0 2px #b7d0bf69, 0 3px 9px #0919208c; }
.round-button svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.nearby-prompt { position: absolute; z-index: 2; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 7px; max-width: 39vw; padding: 8px 15px; border: 1px solid #ead39a; border-radius: 20px; background: #102d35e8; box-shadow: 0 4px 18px #07191bb3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: bold 14px Georgia, serif; }
.prompt-mark { color: #f8d78b; }
.joystick { position: absolute; z-index: 3; left: calc(20px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 154px; height: 154px; display: grid; place-items: center; touch-action: none; }
.joystick-ring { position: relative; width: 138px; height: 138px; border: 3px solid #e9d09b; border-radius: 50%; background: radial-gradient(circle, #49666d9c 10%, #163943d9 70%); box-shadow: inset 0 8px 18px #10242caf, 0 6px 20px #07141891; }
.joystick-ring:before { content: ''; position: absolute; inset: 17px; border: 1px dashed #ddc78c86; border-radius: 50%; }
.joystick-knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; transform: translate(-50%, -50%); border: 3px solid #f1ddaa; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #64838c, #2c4d5d 68%, #193946); box-shadow: inset 0 3px #b6d4d09c, 0 6px 10px #0a2029b3; }
.action-stack { position: absolute; z-index: 3; right: calc(20px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.action-button { min-width: 126px; min-height: 64px; padding: 9px 16px; border: 3px solid #f2d99f; border-radius: 22px 9px 22px 9px; background: linear-gradient(135deg, #f0d69a, #ae8243); color: #183038; font-weight: 900; box-shadow: inset 0 2px #fff5d6a8, 0 6px 16px #0d1c24a8; }
.action-button:active { transform: translateY(2px); }
.action-symbol { display: block; font-size: 21px; line-height: 1; }
.quick-action { min-height: 56px; background: linear-gradient(135deg, #a2c6b9, #3d746f); border-color: #d3e7ce; }
.desktop-hint { position: absolute; z-index: 1; bottom: 9px; left: 50%; transform: translateX(-50%); color: #ffefc8; font-size: 11px; text-shadow: 0 2px 5px #10221f; white-space: nowrap; }

.game-layer { position: absolute; inset: 0; z-index: 10; }
.cutscene-layer { z-index: 20; display: grid; place-items: center; background: #050b12; }
.cutscene-layer video { display: block; width: 100%; height: 100%; object-fit: contain; }
.cutscene-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#06131c55,transparent 24%,transparent 69%,#06131cba); }
.cutscene-caption { position: absolute; left: max(4vw,env(safe-area-inset-left)); bottom: calc(20px + env(safe-area-inset-bottom)); max-width: 70%; margin: 0; color: #f7e7c0; font: bold clamp(15px,2vw,27px) Georgia,serif; text-shadow: 0 3px 10px #000; }
.cutscene-controls { position: absolute; z-index: 1; right: max(2vw,env(safe-area-inset-right)); top: calc(15px + env(safe-area-inset-top)); display: flex; gap: 8px; }
.cutscene-controls button { min-height: 44px; padding: 8px 12px; border: 1px solid #e9d294; border-radius: 8px; background: #0c2536d9; color: #fff0c9; font-weight: 800; }
.dialogue-scrim, .math-scrim { position: absolute; inset: 0; background: linear-gradient(transparent 25%, #061719b3 100%); }
.dialogue-frame { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 1020px); min-height: 202px; max-height: min(65dvh, 420px); display: grid; grid-template-columns: clamp(100px, 18vw, 190px) 1fr; overflow: hidden; border: 4px solid #d7b779; border-radius: 21px 8px 21px 8px; background: radial-gradient(circle at 4% 14%, #526a63, #203c45 37%, #112a35 100%); box-shadow: 0 12px 50px #061418de, inset 0 0 0 3px #466167; }
.dialogue-portrait { align-self: end; width: 100%; height: min(33dvh, 275px); object-fit: contain; object-position: bottom center; filter: drop-shadow(0 8px 6px #0c1d21); }
.dialogue-content { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px 15px 4px; }
.dialogue-speaker { color: #f4d496; font: bold 18px Georgia, serif; letter-spacing: .03em; }
.dialogue-text { flex: 1; min-height: 0; margin: 7px 0 12px; overflow-y: auto; color: #f4eedc; font-size: clamp(15px, 1.8vw, 19px); line-height: 1.38; white-space: pre-line; }
.dialogue-visual { flex: none; max-height: 80px; margin: -3px 0 9px; overflow: hidden; color: #d5e8e8; font-size: 12px; }
.dialogue-visual small { display: block; margin-top: 2px; color: #dce5d5; }
.crystal-grid { display: grid; grid-template-columns: repeat(6, 25px); gap: 3px; }
.crystal-grid span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #9fb8bd; border-radius: 5px; background: #23454e; font-size: 17px; line-height: 1; }
.crystal-grid .full { color: #bcf0ff; text-shadow: 0 0 8px #72d9f5; }
.crystal-grid .empty { color: #aab7b3; }
.object-line { font-size: 19px; letter-spacing: .1em; }
.object-line s { color: #a6afa6; }
.track-bars { display: grid; grid-template-columns: 75px 160px; gap: 3px 8px; align-items: center; }
.track-bars i { display: block; height: 5px; border-radius: 8px; background: #eed299; }
.marker-line, .number-line { color: #fff0b6; font: bold 20px Georgia, serif; letter-spacing: .05em; }
.marker-line span { color: #a8d9e0; font-size: 13px; }
.dialogue-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.dialogue-choices button, .combat-actions button, .screen-choice, .math-side-actions button { min-height: 54px; padding: 8px 17px; border: 2px solid #e8cb8d; border-radius: 9px; background: linear-gradient(#e4c888, #ae854c); color: #17303a; font-weight: 800; box-shadow: inset 0 1px #fff0c8a8; }
.dialogue-choices button.secondary { border-color: #a6b9aa; background: #264855; color: #eef1db; }
.dialogue-choices button:disabled, .combat-exit:disabled { opacity: .5; cursor: default; }

.screen-layer { background: radial-gradient(circle at 50% 10%, #49645b, #152e39 75%); }
.screen-frame { position: absolute; inset: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); display: flex; flex-direction: column; min-height: 0; border: 3px double #d9bd81; border-radius: 16px; background: linear-gradient(145deg, #304a4b, #142d39 65%); box-shadow: inset 0 0 0 5px #17313a, 0 0 36px #07171dcc; }
.screen-header, .math-header { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 15px; padding: 12px 18px; border-bottom: 2px solid #b9a1708c; }
.screen-header small, .math-header small, .combat-header small { color: #e7c98a; font-size: 11px; font-weight: 900; letter-spacing: .19em; }
.screen-header h1, .math-header h1, .combat-header h1 { margin: 2px 0 0; font: bold clamp(21px, 3vw, 33px) Georgia, serif; }
.screen-body { flex: 1; min-height: 0; padding: clamp(12px, 2vw, 25px); overflow: hidden; }
.screen-body p { margin: 6px 0 12px; }
.screen-choice { font-size: 16px; text-align: left; }
.pause-screen { height: 100%; display: grid; grid-template-columns: minmax(210px, 31%) 1fr; gap: clamp(10px, 2vw, 26px); }
.pause-hero { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 12px; border-right: 2px solid #c9b27a; background: radial-gradient(circle at 50% 54%, #597465a3, transparent 66%); text-align: center; }
.pause-hero img { min-height: 0; max-width: 95%; height: 65%; object-fit: contain; filter: drop-shadow(0 12px 8px #0b2025bd); }
.pause-hero strong, .pause-hero span, .pause-hero small { display: block; }
.pause-hero strong { color: #f5deaa; font: bold clamp(19px, 2.8vw, 31px) Georgia, serif; }
.pause-hero span { margin: 5px 0 9px; font-size: 13px; }
.pause-hero small { max-width: 245px; color: #cbd9cd; font-size: 11px; line-height: 1.4; }
.pause-options { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px 15px; }
.pause-options button { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 13px 8px 23px; border: 0; border-bottom: 2px solid #bda674; background: linear-gradient(90deg, #4f6b62a8, #1b394200); color: #faeccd; text-align: left; }
.pause-options button:before { content: '✦'; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); color: #e5c788; font-size: 15px; }
.pause-options button:active { background: #a8854f; color: #18303b; }
.pause-options b { font: bold clamp(18px, 2.1vw, 26px) Georgia, serif; }
.pause-options small { color: #d3dbcc; font-size: 12px; }
.screen-backline { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; color: #f0ddb3; }
.screen-backline button { min-height: 48px; border: 1px solid #ddc48d; border-radius: 8px; background: #244552; color: #f9eac7; padding: 8px 17px; font-weight: bold; }
.split-screen, .inventory-screen, .book-screen { height: 100%; min-height: 0; display: grid; gap: 16px; }
.split-screen { grid-template-columns: minmax(190px, 32%) 1fr; }
.inventory-screen { grid-template-columns: 28% 38% 1fr; }
.book-screen { grid-template-columns: minmax(210px, 38%) 1fr; }
.screen-pane { min-width: 0; min-height: 0; padding: 17px; overflow: auto; border: 1px solid #c1ab7a9a; border-radius: 10px; background: #102a33a8; }
.screen-pane h2 { margin: 0 0 10px; font: bold 24px Georgia, serif; }
.screen-pane h3 { margin: 0 0 8px; color: #efd99e; font: bold 19px Georgia, serif; }
.screen-pane p, .screen-pane li { color: #e4e5d8; font-size: 15px; line-height: 1.5; }
.screen-pane button { display: block; width: 100%; min-height: 54px; margin: 7px 0; padding: 9px 12px; border: 1px solid #bca570; border-radius: 8px; background: #2e4e52; color: #f6ebcd; text-align: left; font-weight: 700; }
.screen-pane button.selected { background: #a9854d; color: #142d36; }
.screen-pane button:disabled { opacity: .5; cursor: default; }
.screen-pane button.new-game-button { width: auto; min-width: 150px; margin-top: 14px; border-color: #c69b78; background: #513f3b; color: #fff0d7; }
.screen-pane .reset-note { font-size: 12px; color: #d9c8ae; }
.journal-objective { padding: 9px 12px; border-left: 4px solid #f0ce82; background: #4b574ac9; color: #fff2d4 !important; font-size: 17px !important; }
.journal-objective small { color: #e2e8d8; }
.socket-slot { display: grid; gap: 2px; margin-top: 9px; padding: 8px; border: 2px solid #bfa36a; border-radius: 8px; background: #2a4550; font-size: 12px; }
.socket-slot span { color: #f5d681; }
.guided { outline: 3px solid #ffe189; outline-offset: 2px; box-shadow: 0 0 18px #ffd276; }
.tour-tip { color: #f6d896 !important; font-size: 13px !important; }
.journal-tabs { display: block; }
.journal-tabs button.done { border-color: var(--quest-done); background: var(--quest-done-bg); color: #e3f7d7; }
.journal-tabs button.done small { color: var(--quest-done); }
.journal-tabs button.done.selected { border-color: #f2db9f; background: #356746; color: #f2ffe8; box-shadow: inset 0 0 0 1px var(--quest-done); }
.quest-status { color: #e2bf7d !important; font-weight: bold; }
.quest-status.done { color: var(--quest-done) !important; }
.chapter-route { display: grid; gap: 5px; margin: 10px 0; padding-left: 0; list-style: none; }
.chapter-route li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 9px; border-left: 3px solid #72817a; border-radius: 4px; background: #27444b8c; }
.chapter-route li.active { border-left-color: #efd28f; background: #6c654b9c; }
.chapter-route li.done { border-left-color: var(--quest-done); background: var(--quest-done-bg); color: #e3f7d7; }
.chapter-route small { color: #d6d9c8; text-align: right; }
.chapter-route li.done small { color: #c7e0bc; }
.screen-hero-art { display: block; max-height: 63%; max-width: 100%; margin: auto; object-fit: contain; filter: drop-shadow(0 12px 8px #08171bad); }
.item-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.item-slot { display: grid; place-items: center; min-height: 72px; border: 2px solid #d2b77b; border-radius: 8px; background: #294651; color: #f3ddae; font-weight: bold; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 27%); gap: 12px; height: 100%; min-height: 0; }
.regional-map { position: relative; width: 100%; height: 100%; overflow: hidden; border: 3px solid #b89d6f; border-radius: 12px; background: radial-gradient(circle at 30% 33%, #b7b482, #718d69 55%, #415b56 100%); }
.regional-map:before { content: ''; position: absolute; left: 51%; top: -8%; width: 8%; height: 118%; transform: rotate(8deg); border: 5px solid #9cc7c2; background: linear-gradient(90deg, #4d91a0, #79bdc7, #3c8193); box-shadow: 0 0 0 7px #8a9c80; }
.regional-map:after { content: ''; position: absolute; z-index: 0; left: 48%; top: 45%; width: 13%; height: 9%; border: 4px solid #6d5c42; border-radius: 7px; background: #cfb88a; }
.regional-map.lowlands-map { background: radial-gradient(circle at 72% 20%, #d5e2d2 0 6%, #85aab0 20%, #477778 51%, #294e62 100%); }
.regional-map.lowlands-map:before { left: 57%; top: -6%; width: 10%; height: 112%; transform: rotate(-13deg); border-color: #667d83; background: linear-gradient(90deg,#496875,#90aaac,#4c6773); box-shadow: 0 0 0 8px #536f69; }
.regional-map.lowlands-map:after { left: 65%; top: 8%; width: 21%; height: 22%; border: 3px solid #c1d2d0; border-radius: 48%; background: #77aeb9; box-shadow: 0 0 0 8px #93ada1; }
.regional-map.dungeon-map { background: linear-gradient(135deg,#273d45,#40555a 35%,#26333d 70%,#172c37); }
.regional-map.dungeon-map:before { left: 14%; top: 30%; width: 75%; height: 36%; transform: none; border: 7px double #b0a381; border-radius: 15px; background: #52646a; box-shadow: 0 0 0 14px #162631; }
.regional-map.dungeon-map:after { left: 40%; top: 13%; width: 20%; height: 73%; border: 4px solid #b2a584; background: #4b626a; }
.regional-map.lipograd-map { background: radial-gradient(circle at 48% 46%,#bdad6b 0 15%,#8c9b61 45%,#50634d 100%); }
.regional-map.lipograd-map:before { left: 4%; top: 45%; width: 92%; height: 10%; transform: rotate(-5deg); border: 3px solid #a78d5d; background: #cfb481; box-shadow: 0 0 0 6px #87784f80; }
.regional-map.lipograd-map:after { left: 70%; top: 9%; width: 20%; height: 42%; border: 6px double #6b6651; background: #8e9181; box-shadow: 0 0 0 7px #41574477; }
.regional-map.fortress3-map { background: linear-gradient(135deg,#303d3c,#54615a 45%,#202c31); }
.regional-map.fortress3-map:before { left: 8%; top: 41%; width: 83%; height: 18%; transform: none; border: 6px double #c4b18a; background: #8b8c79; box-shadow: 0 0 0 12px #202f31; }
.regional-map.fortress3-map:after { left: 71%; top: 24%; width: 14%; height: 52%; border: 5px solid #b8a575; background: #48545a; }
.lowlands-map .map-place, .dungeon-map .map-place, .lipograd-map .map-place, .fortress3-map .map-place { padding: 4px 6px; font-size: 10px; }
.map-place, .map-player { position: absolute; z-index: 1; transform: translate(-50%, -50%); padding: 5px 9px; border: 2px solid #765d3e; border-radius: 24px; background: #e6d2a4; color: #2e3b37; font: bold 12px Georgia, serif; text-align: center; white-space: nowrap; }
.map-place.target { border-color: #fff4bf; box-shadow: 0 0 0 4px #ffd26477, 0 0 20px #fff0a3; }
.map-player { z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: #274d59; border-color: #e7d4a2; color: #fff2c8; font-size: 15px; }
.map-guide { min-height: 0; padding: 14px; border: 1px solid #c1ab7a9a; border-radius: 10px; background: #102a33a8; overflow: auto; }
.map-guide strong { display: block; color: #f0daa1; font: bold 22px Georgia, serif; }
.map-guide p { margin: 10px 0; line-height: 1.45; }
.map-guide small { color: #d2dfd0; line-height: 1.45; }
.unknown-page { display: block; margin-top: 8px; color: #cbd1ce; font-size: 13px; }
.book-note { margin-top: 15px; padding: 10px; border: 1px solid #9fb7b2; border-radius: 8px; background: #23434a; }
.book-note b { color: #f3da9e; }
.book-note a { color: #bfe6f0; }

.combat-layer { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 5px; padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); overflow: hidden; background: #253f43 url('art/combat/arena_valley.webp') center 56% / cover no-repeat; }
.combat-layer[data-arena="lowlands"] { background-image: url('art/combat/arena_lowlands.webp'); }
.combat-layer[data-arena="dungeon"] { background-image: url('art/combat/arena_dungeon.webp'); }
.combat-layer[data-arena="lipograd"] { background-image: url('art/combat/arena_lipograd.webp'); }
.combat-layer[data-arena="fortress3"] { background-image: url('art/combat/arena_fortress3.webp'); }
.combat-vignette { position: absolute; inset: 0; background: linear-gradient(#0c2336c9, transparent 27%, transparent 66%, #0719238c); pointer-events: none; }
.combat-header { position: relative; z-index: 2; width: min(100%, 960px); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 56px; }
.combat-header > div { min-width: 0; }
.combat-header h1 { line-height: 1.05; text-shadow: 0 2px 9px #0b1b20; }
.combat-exit { flex: none; min-height: 45px; padding: 7px 14px; border: 2px solid #d9c596; border-radius: 10px; background: #1c3947e8; color: #f7e6be; font-weight: bold; }
.combat-stage { --fighter-status-height: 83px; position: relative; z-index: 1; width: min(100%, 960px); min-height: 0; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 8px; }
.combat-fighter { position: relative; min-width: 0; min-height: 0; display: flex; justify-content: center; align-items: flex-end; }
.combat-fighter::before { content: ''; position: absolute; bottom: 0; width: min(42vw, 230px); height: 22px; border-radius: 50%; background: #08191f78; filter: blur(5px); }
.wisp-fighter::before { background: #98e9f2a8; box-shadow: 0 0 24px #79dbe8; }
.combat-fighter img { position: relative; z-index: 1; display: block; flex: none; width: min(54vw, 330px); height: calc(100% - var(--fighter-status-height)); max-width: none; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 9px #091d1fc2); transform-origin: center bottom; }
.combat-fighter.armor-active::after { content: '🛡 ' attr(data-armor); position: absolute; z-index: 2; right: 8%; top: 30%; min-width: 58px; padding: 8px 10px; border: 2px solid #e7c986; border-radius: 14px; background: #183541e8; box-shadow: 0 0 18px #f0dca391, 0 5px 14px #07171db8; color: #ffebba; font: 900 clamp(17px, 2.3vw, 23px)/1 sans-serif; text-align: center; pointer-events: none; }
.tiger-fighter img { transform: scale(1.02); }
.wolf-fighter img { transform: scale(1.16); }
.basilisk-fighter img { transform: scale(1.12); }
.guardian-fighter img { transform: scale(.97); }
.wisp-fighter img { transform: translateY(18%) scaleX(-1) scale(1.62); }
.sentinel-fighter img { transform: scaleX(-1) scale(.96); }
.boss-fighter img { transform: scale(1.02); }
.fighter-status { position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%); width: min(100%, 390px); min-height: 60px; padding: 7px 10px; border: 1px solid #d2b87e; border-radius: 10px; background: #112c37e8; box-shadow: 0 4px 14px #07151aa8; }
.fighter-vital { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.fighter-vital strong { min-width: 0; font: bold 15px/1.08 Georgia, serif; }
.fighter-vital span { flex: none; font-size: 13px; }
.fighter-vital small { color: #aee7f4; font-size: 11px; font-weight: 800; }
.fighter-status .fighter-bar { height: 8px; margin: 4px 0 2px; }
.fighter-status .mana-bar { height: 6px; margin-top: 2px; }
.fighter-status .mana-bar i { background: linear-gradient(90deg, #3e91bf, #a4e6f4); }
.opponent-status { display: block; margin-top: 4px; color: #f1d795; font-size: 11px; font-weight: 700; }
.wolf-fighter .fighter-bar i { background: linear-gradient(90deg, #a76d54, #d9b572); }
.combat-flare { display: none; }
.combat-command { position: relative; z-index: 2; width: min(100%, 960px); max-height: 43dvh; margin: 0 auto; padding: 10px 13px 12px; overflow-y: auto; border: 2px solid #d9bf85; border-radius: 13px; background: #102d39ed; box-shadow: 0 8px 30px #071b20b8; }
.combat-phase { margin-bottom: 4px; color: #f4ce83; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.combat-command p { margin: 0 0 10px; font: 17px Georgia, serif; }
.combat-telegraph { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 9px; padding: 7px 12px; border: 1px solid #f0c991; border-radius: 9px; background: #5c3e36; }
.combat-telegraph strong { color: #ffdbab; font-size: 19px; }
.combat-telegraph small { color: #fff0d8; }
.combat-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.combat-actions button { flex: 1 1 150px; max-width: 32%; min-height: 78px; padding: 7px 10px; text-align: left; }
.combat-actions .action-title, .combat-actions b, .combat-actions small { display: block; }
.combat-actions .action-title { font-size: 15px; line-height: 1.1; }
.combat-actions b { margin: 4px 0; font-size: 17px; }
.combat-actions small { font-size: 11px; }
.combat-actions button:disabled { opacity: .5; cursor: default; }

.math-layer { z-index: 20; display: grid; place-items: center; padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); }
.math-scrim { background: #081b25ce; }
.math-frame { position: relative; width: min(95vw, 710px); max-height: 100%; display: flex; flex-direction: column; border: 3px solid #e4c586; border-radius: 16px; background: radial-gradient(circle at 15% 15%, #4d6460, #1d3b47 52%, #102b37); box-shadow: 0 15px 65px #06141ced, inset 0 0 0 3px #496668; }
.math-header { padding: 8px 13px; }
.math-header h1 { font-size: clamp(19px, 3vw, 27px); }
.math-header .round-button { width: 44px; height: 44px; }
.math-header .round-button.paid-close { width: auto; min-width: 112px; max-width: 165px; height: 44px; padding: 4px 8px; border-radius: 9px; font-size: 11px; font-weight: 800; line-height: 1.1; }
.math-header .round-button:disabled { opacity: .5; cursor: default; }
.math-workspace { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 0; padding: 8px 14px 3px; }
.math-prompt { max-width: 95%; margin: 0 0 5px; color: #e8efdf; font-size: 14px; line-height: 1.25; text-align: center; }
.math-visual { max-height: 55px; margin-bottom: 4px; color: #d7edf0; }
.math-visual .crystal-grid { grid-template-columns: repeat(12, 20px); }
.math-visual .crystal-grid span { width: 20px; height: 20px; font-size: 14px; }
.c3-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; max-width: 100%; }
.c3-group { display: inline-block; padding: 2px 4px; border: 1px solid #d8c888; border-radius: 5px; background: #294753b5; color: #f3e5ae; white-space: nowrap; letter-spacing: .08em; }
.c3-array { display: grid; grid-template-columns: repeat(var(--cols), 1em); gap: 2px 5px; width: max-content; max-width: 100%; color: #f1d88b; font-size: 12px; line-height: 1; }
.c3-array span { display: grid; place-items: center; width: 1em; height: 1em; }
.c3-array .second { color: #93d4d7; }
.c3-remainder { margin-top: 5px; color: #b8e0d2; font-size: 13px; }
.multiplication-screen { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(260px, 1fr) 1fr; gap: 16px; }
.multiplication-sheet { display: flex; flex-direction: column; align-items: center; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.multiplication-table { width: min(100%, 360px); border-spacing: 3px; table-layout: fixed; color: #f8e6bc; }
.multiplication-table caption { margin-bottom: 10px; color: #e9ce96; font-size: 13px; }
.multiplication-table th { height: 34px; border-radius: 5px; background: #335256; font: bold 20px Georgia, serif; }
.multiplication-table th.active { background: #92723f; color: #fff0c8; }
.multiplication-table td { padding: 0; }
.multiplication-table td button { width: 100%; min-height: 42px; margin: 0; padding: 4px; text-align: center; font: bold 20px Georgia, serif; }
.multiplication-sheet p { max-width: 360px; font-size: 13px; }
.multiplication-sheet > button { max-width: 360px; margin-top: auto; text-align: center; }
.multiplication-example .c3-groups { gap: 8px; margin: 16px 0; }
.multiplication-example .c3-group { padding: 8px; font-size: 18px; }
.multiplication-example .c3-equation { color: #f6dc9c; font-size: 21px; }
@media (max-width: 680px) and (orientation: portrait) {
  .multiplication-screen { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr); gap: 8px; }
  .multiplication-screen .screen-pane { padding: 10px; }
  .multiplication-example .c3-groups { margin: 8px 0; gap: 4px; }
  .multiplication-example .c3-group { padding: 4px 6px; font-size: 15px; }
  .multiplication-example h2 { font-size: 22px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .multiplication-screen { gap: 8px; }
  .multiplication-screen .screen-pane { padding: 8px; }
  .multiplication-table { border-spacing: 2px; }
  .multiplication-table caption { margin-bottom: 4px; font-size: 11px; }
  .multiplication-table th { height: 20px; font-size: 16px; }
  .multiplication-table td button { min-height: 29px; font-size: 16px; }
  .multiplication-sheet p { display: none; }
  .multiplication-sheet > button { min-height: 32px; margin: 2px 0 0; padding: 4px; }
}
.c3-equation { color: #f1deaa; font-weight: 800; letter-spacing: .02em; }
.c3-visual { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.dialogue-visual.c3-garden-visual { flex: 0 1 auto; min-height: 0; max-height: min(35dvh, 198px); margin: 0 0 7px; padding: 2px 5px 4px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.c3-garden-plan { --garden-cell: 29px; display: grid; gap: 3px; width: max-content; max-width: 100%; }
.c3-garden-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.c3-garden-cells { display: grid; grid-template-columns: repeat(5, var(--garden-cell)); gap: 3px; }
.c3-garden-plan button { appearance: none; display: grid; place-items: center; box-sizing: border-box; min-width: 0; height: var(--garden-cell); margin: 0; padding: 0; border: 1px solid #b7c9bb; border-radius: 5px; background: #2b4c4bbd; color: #e6e1b9; font: 800 16px/1 Georgia, serif; cursor: pointer; touch-action: manipulation; }
.c3-garden-plan .c3-plant-row { width: 51px; border-color: #d8bd7c; background: #4b594cbf; color: #fff0c8; font: 800 11px/1 system-ui, sans-serif; }
.c3-garden-plan .c3-garden-cell.planted { border-color: #e7ce80; background: linear-gradient(145deg, #648266, #33564a); color: #f9dc86; text-shadow: 0 0 5px #ffdb87a8; box-shadow: inset 0 1px #fff5ce52; }
.c3-garden-plan button:focus-visible { outline: 2px solid #ffe6a1; outline-offset: 1px; }
.c3-garden-plan button:active { transform: scale(.94); }
.dialogue-visual .c3-garden-counter { margin-top: 4px; color: #f4dfaa; font: 700 11px/1.2 system-ui, sans-serif; }
.math-expression { color: #ffdf9f; font: bold clamp(28px, 5vw, 43px) Georgia, serif; letter-spacing: .04em; }
.math-answer { min-width: 110px; margin: 5px 0 2px; padding: 4px 16px; border-bottom: 3px solid #e9d19a; color: #fff7e1; text-align: center; font: bold clamp(27px, 4.5vw, 38px) Georgia, serif; font-variant-numeric: tabular-nums; }
.math-feedback { min-height: 24px; margin: 2px 0 0; color: #d8e8d8; font-size: 13px; text-align: center; }
.math-controls { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(108px, 27%); gap: 10px; padding: 8px 14px 14px; }
.number-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px; }
.number-pad button { min-height: clamp(43px, 7dvh, 62px); border: 2px solid #c8d5b5; border-radius: 9px; background: linear-gradient(#4c6c70, #244753); color: #fff2cb; font-size: 25px; font-weight: 800; box-shadow: inset 0 1px #a8cccb88; }
.number-pad button:active { background: #bfa467; color: #162e37; }
.math-side-actions { display: flex; flex-direction: column; gap: 8px; }
.math-side-actions button { flex: 1; min-height: 56px; font-size: 14px; }
.math-side-actions button:first-child { background: #254a56; color: #f9e8bd; }
.game-toast { position: absolute; z-index: 30; left: 50%; top: calc(98px + env(safe-area-inset-top)); transform: translate(-50%, -10px); opacity: 0; pointer-events: none; padding: 10px 17px; border: 2px solid #e7c98f; border-radius: 12px; background: #173641f0; color: #fff0c9; box-shadow: 0 9px 24px #0b1c23; text-align: center; transition: .2s; }
.game-toast.show { opacity: 1; transform: translate(-50%, 0); }
.profile-gate { position: absolute; z-index: 50; inset: 0; display: grid; place-items: center; padding: calc(20px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); background: radial-gradient(circle at 50% 30%, #49635c, #07151d 75%); }
.profile-card { display: grid; grid-template-columns: minmax(130px, 28%) 1fr; width: min(720px, 100%); min-height: 310px; overflow: hidden; border: 3px solid #d9bc80; border-radius: 20px 7px 20px 7px; background: linear-gradient(125deg,#385d5b,#142f3a 65%); box-shadow: 0 20px 60px #041015b8; }
.profile-portrait { align-self: end; width: 100%; height: 290px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 9px 8px #061c25); }
.profile-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 26px; }
.profile-content>small { color: #e5c486; font-weight: 900; letter-spacing: .14em; }
.profile-content h1 { margin: 8px 0 10px; color: #ffebb6; font: bold clamp(28px,4vw,42px) Georgia,serif; }
.profile-content p { color: #e5e9d8; line-height: 1.45; }
.profile-choices,.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.profile-choices button,.profile-actions button,.profile-decision button,.profile-sync-banner button { min-height: 48px; padding: 9px 16px; border: 2px solid #e6cc8e; border-radius: 9px; background: linear-gradient(#ebd096,#ae854d); color: #17313b; font-size: 16px; font-weight: 800; }
.profile-actions button.secondary,.profile-decision button.secondary { background: #244956; color: #f4edda; border-color: #b9c7b4; }
.profile-pin-form label { display: block; margin: 3px 0 9px; font-weight: 800; }
.profile-pin-form input { width: min(220px,100%); min-height: 48px; padding: 8px 12px; border: 2px solid #dfc68b; border-radius: 8px; background: #f9f2dd; color: #122d36; font: bold 22px system-ui,sans-serif; letter-spacing: .2em; }
.profile-decision { display: flex; flex-wrap: wrap; gap: 9px; }
.profile-decision p { width: 100%; margin: 0 0 4px; }
.profile-message { min-height: 22px; margin: 13px 0 0; color: #ffe6a9 !important; font-size: 14px; }
.profile-sync-banner { position: absolute; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 10px; border: 2px solid #e6bf80; border-radius: 10px; background: #173744f7; color: #fff1ce; text-align: center; }
@media (max-width: 600px) {
  .profile-card { grid-template-columns: 1fr; max-width: 420px; }
  .profile-portrait { height: 150px; object-position: center bottom; }
  .profile-content { padding: 12px 20px 24px; }
  .profile-content h1 { margin: 4px 0; }
  .profile-choices button { flex: 1; }
}

@media (max-width: 680px) {
  .hud-hero { width: 165px; min-height: 62px; padding: 5px; gap: 5px; }
  .hud-portrait { width: 49px; height: 49px; }
  .hud-vitals strong { font-size: 13px; }
  .vital-row, .vital-row b { font-size: 8px; }
  .vital-bar { height: 5px; margin: 1px 0 2px; }
  .hud-quest { max-width: 49vw; min-height: 62px; padding: 5px 5px 5px 8px; gap: 5px; }
  .quest-copy span { font-size: 7px; }
  .quest-copy strong { font-size: 11px; }
  .quest-copy small { font-size: 8px; }
  .menu-button { width: 48px; height: 48px; }
  .joystick { width: 126px; height: 126px; left: calc(8px + env(safe-area-inset-left)); bottom: calc(8px + env(safe-area-inset-bottom)); }
  .joystick-ring { width: 116px; height: 116px; }
  .joystick-knob { width: 56px; height: 56px; }
  .action-stack { right: calc(9px + env(safe-area-inset-right)); bottom: calc(15px + env(safe-area-inset-bottom)); }
  .action-button { min-width: 108px; min-height: 58px; padding: 6px 10px; font-size: 13px; }
  .nearby-prompt { bottom: calc(142px + env(safe-area-inset-bottom)); max-width: 75vw; font-size: 12px; }
  .desktop-hint { display: none; }
  .dialogue-frame { grid-template-columns: 92px 1fr; width: calc(100vw - 16px); max-height: 68dvh; }
  .dialogue-portrait { height: 175px; }
  .dialogue-content { padding: 9px 10px 11px 0; }
  .dialogue-speaker { font-size: 15px; }
  .dialogue-text { font-size: 14px; margin: 4px 0 7px; }
  .dialogue-visual { max-height: 58px; margin-bottom: 5px; }
  .crystal-grid { grid-template-columns: repeat(6, 20px); }
  .crystal-grid span { width: 20px; height: 20px; font-size: 14px; }
  .dialogue-choices { gap: 5px; }
  .dialogue-choices button { min-height: 48px; padding: 5px 9px; font-size: 12px; }
  .screen-header { padding: 8px 11px; }
  .screen-header .round-button { width: 46px; height: 46px; }
  .screen-body { padding: 10px; }
  .pause-screen { grid-template-columns: 1fr; grid-template-rows: 18% 1fr; gap: 5px; }
  .pause-hero { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 1px 8px 5px; border-right: 0; border-bottom: 2px solid #c9b27a; text-align: left; }
  .pause-hero img { height: 100%; width: 73px; }
  .pause-hero strong { font-size: 19px; }
  .pause-hero span { margin: 1px 0; font-size: 11px; }
  .pause-hero small { font-size: 9px; }
  .pause-options { grid-template-columns: 1fr; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 1px; }
  .pause-options button { padding: 3px 10px 3px 28px; }
  .pause-options b { font-size: 19px; }
  .pause-options small { font-size: 11px; }
  .split-screen, .book-screen { grid-template-columns: 35% 1fr; gap: 7px; }
  .inventory-screen { grid-template-columns: 27% 36% 1fr; gap: 5px; }
  .screen-pane { padding: 8px; }
  .screen-pane h2 { font-size: 17px; }
  .screen-pane h3 { font-size: 14px; }
  .screen-pane p, .screen-pane li { font-size: 12px; }
  .screen-pane button { font-size: 11px; padding: 6px; min-height: 42px; }
  .item-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
  .item-slot { min-height: 55px; font-size: 11px; }
  .chapter-route li { display: block; padding: 5px 7px; }
  .chapter-route small { display: block; text-align: left; }
  .map-layout { grid-template-columns: minmax(0,1fr) minmax(130px,34%); gap: 6px; }
  .map-place, .map-player { padding: 3px 5px; font-size: 9px; border-width: 1px; }
  .map-player { width: 22px; height: 22px; padding: 0; font-size: 12px; }
  .map-guide { padding: 8px; }
  .map-guide strong { font-size: 16px; }
  .map-guide p, .map-guide small { font-size: 10px; }
  .combat-layer { gap: 3px; padding-left: calc(8px + env(safe-area-inset-left)); padding-right: calc(8px + env(safe-area-inset-right)); }
  .combat-header h1 { font-size: 22px; }
  .combat-exit { min-height: 42px; font-size: 12px; }
  .combat-stage { --fighter-status-height: 88px; gap: 0; }
  .combat-fighter img { width: 54vw; height: calc(100% - var(--fighter-status-height)); }
  .combat-fighter.armor-active::after { right: 2%; top: 34%; min-width: 42px; padding: 4px 6px; border-radius: 9px; font-size: 15px; }
  .fighter-status { width: 100%; padding: 6px 7px; }
  .fighter-vital strong { font-size: 13px; }
  .fighter-vital span { font-size: 11px; }
  .combat-command { width: 100%; padding: 7px 8px 9px; max-height: 44dvh; }
  .combat-command p { font-size: 13px; margin-bottom: 5px; }
  .combat-actions { gap: 5px; }
  .combat-actions button { flex: 1 1 27%; min-height: 63px; padding: 4px 6px; }
  .combat-actions .action-title { font-size: 11px; }
  .combat-actions b { margin: 2px 0; font-size: 13px; }
  .combat-actions small { font-size: 9px; }
  .combat-telegraph { gap: 7px; margin-bottom: 5px; padding: 4px; font-size: 11px; }
  .combat-telegraph strong { font-size: 14px; }
  .math-frame { width: 100%; }
  .math-prompt { font-size: 12px; }
  .math-controls { padding: 5px 8px 8px; }
  .number-pad button { min-height: clamp(43px, 6dvh, 54px); }
}
@media (max-height: 470px) {
  .hud { top: calc(4px + env(safe-area-inset-top)); }
  .joystick { bottom: calc(2px + env(safe-area-inset-bottom)); }
  .action-stack { bottom: calc(6px + env(safe-area-inset-bottom)); }
  .nearby-prompt { bottom: calc(7px + env(safe-area-inset-bottom)); }
  .dialogue-frame { bottom: calc(5px + env(safe-area-inset-bottom)); min-height: 160px; max-height: 77dvh; }
  .dialogue-portrait { height: 150px; }
  .dialogue-text { font-size: 13px; }
  .dialogue-visual { max-height: 38px; }
  .math-prompt { font-size: 11px; max-height: 28px; overflow: hidden; }
  .math-visual { display: block; max-height: 25px; margin-bottom: 0; overflow: hidden; }
  .dialogue-visual.c3-visual { max-height: 62px; }
  .dialogue-visual.c3-garden-visual { max-height: min(43dvh, 154px); margin-bottom: 4px; padding: 0 3px 2px; }
  .c3-garden-plan { --garden-cell: 25px; gap: 2px; }
  .c3-garden-plan .c3-plant-row { width: 48px; font-size: 10px; }
  .dialogue-visual .c3-garden-counter { margin-top: 2px; font-size: 10px; }
  .math-visual.c3-visual { max-height: 110px; overflow-y: auto; }
  .c3-visual .c3-groups { display: grid; grid-template-columns: repeat(3,max-content); gap: 2px 4px; }
  .c3-visual .c3-group { padding: 1px 3px; font-size: 10px; line-height: 1.1; }
  .c3-visual .c3-array { font-size: 8px; gap: 1px 2px; }
  .math-visual .crystal-grid { grid-template-columns: repeat(12, 15px); gap: 2px; }
  .math-visual .crystal-grid span { width: 15px; height: 15px; font-size: 10px; }
  .math-visual small { display: none; }
  .dialogue-choices button { min-height: 40px; }
  .combat-layer { gap: 2px; padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
  .combat-header { min-height: 36px; }
  .combat-header small { font-size: 9px; }
  .combat-header h1 { font-size: 20px; }
  .combat-exit { min-height: 35px; padding: 4px 10px; }
  .combat-stage { --fighter-status-height: 52px; }
  .fighter-status { min-height: 0; padding: 3px 7px; }
  .fighter-vital strong { font-size: 12px; }
  .fighter-vital span, .fighter-vital small { font-size: 10px; }
  .fighter-status .fighter-bar { height: 5px; margin: 2px 0 1px; }
  .fighter-status .mana-bar { height: 4px; margin-top: 1px; }
  .opponent-status { margin-top: 1px; font-size: 9px; }
  .combat-command { max-height: 49dvh; padding: 5px 8px 7px; }
  .combat-command p { margin-bottom: 4px; }
  .combat-actions button { min-height: 51px; }
  .combat-phase { font-size: 9px; }
  .math-header { padding: 3px 10px; }
  .math-header .round-button { width: 38px; height: 38px; }
  .math-workspace { padding: 2px 8px; }
  .math-expression { font-size: 26px; }
  .math-answer { font-size: 25px; margin: 2px 0; }
  .math-feedback { min-height: 16px; margin: 0; font-size: 11px; }
  .math-controls { gap: 5px; padding: 3px 8px 7px; }
  .number-pad { gap: 4px; }
  .number-pad button { min-height: 37px; font-size: 19px; }
  .math-side-actions button { min-height: 43px; font-size: 12px; }
}
@media (max-width: 680px) and (orientation: portrait) {
  .journal-screen { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .journal-screen .screen-pane:first-child { max-height: min(30dvh, 210px); overflow: auto; }
  .journal-screen .screen-pane:first-child h2 { margin-bottom: 4px; }
  .journal-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .journal-tabs button { min-height: 43px; margin: 0; text-align: center; }
  .journal-tabs small { display: none; }
  .map-layout { grid-template-columns: 1fr; grid-template-rows: 67% 1fr; }
  .map-guide { overflow: auto; }
  .map-guide strong { font-size: 17px; }
  .map-guide p, .map-guide small { font-size: 11px; }
  .combat-stage { --fighter-status-height: 93px; }
  .combat-fighter img { width: 56vw; }
}
@media (max-width: 380px) and (orientation: portrait) {
  .c3-garden-plan { --garden-cell: 20px; gap: 2px; }
  .c3-garden-row { gap: 3px; }
  .c3-garden-cells { gap: 2px; }
  .c3-garden-plan .c3-plant-row { width: 38px; font-size: 9px; }
  .c3-garden-plan .c3-garden-cell { font-size: 12px; }
}
@media (max-height: 470px) and (orientation: landscape) {
  .math-frame {
    width: 100%;
    max-width: 850px;
    height: min(100%, 320px);
    display: grid;
    grid-template-columns: minmax(190px, 34%) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .math-header { position: relative; grid-column: 1; grid-row: 1; align-items: flex-start; border-bottom: 0; padding-right: 92px; }
  .math-header small { font-size: 9px; letter-spacing: .08em; }
  .math-header h1 { font-size: 20px; }
  .math-header .round-button { width: 44px; height: 44px; }
  .math-header .round-button.paid-close { position: absolute; top: 5px; right: 7px; min-width: 78px; max-width: 78px; height: 38px; padding: 2px; font-size: 9px; }
  .math-workspace { grid-column: 1; grid-row: 2; padding: 0 8px 8px; }
  .math-expression { font-size: 27px; }
  .math-answer { font-size: 27px; }
  .math-controls { grid-column: 2; grid-row: 1 / 3; align-self: stretch; padding: 8px; }
  .number-pad button { min-height: 44px; }
  .math-side-actions button { min-height: 44px; }
}

/* Inventory: illustrated objects and explicit equipped slots. */
.inventory-screen { grid-template-columns: minmax(190px, 27%) minmax(280px, 38%) minmax(220px, 1fr); gap: clamp(7px, 1.2vw, 16px); }
.inventory-screen .screen-pane { background: linear-gradient(155deg, #183741ed, #0f2935ed); }
.inventory-screen .screen-pane h2 { color: #f9e9c6; }
.inventory-equipment, .inventory-detail { display: flex; flex-direction: column; }
.inventory-bag { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.inventory-bag h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inventory-bag h2 small { color: #c2d4cf; font: 600 11px system-ui, sans-serif; white-space: nowrap; }
.equipment-slots { display: grid; gap: 10px; }
.inventory-equipment .equipment-slot { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 92px; margin: 0; padding: 8px; border: 1px solid #d1b879; border-radius: 11px; background: linear-gradient(145deg, #31515a, #1a3540); color: #fbedd1; text-align: left; box-shadow: inset 0 1px #ffffff18; }
.inventory-equipment button.equipment-slot:active { background: #526d6a; }
.equipment-slot.empty { border-style: dashed; border-color: #a8a17d; opacity: .8; }
.equipment-slot img { flex: none; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 5px 4px #071b22a8); }
.equipment-slot span:not(.equipment-empty-mark) { min-width: 0; }
.equipment-slot small, .equipment-slot b { display: block; }
.equipment-slot small { margin-bottom: 3px; color: #d9be82; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.equipment-slot b { font-size: 14px; line-height: 1.18; }
.equipment-empty-mark { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border: 1px dashed #7d958d; border-radius: 9px; color: #d8bd80; font: 28px Georgia, serif; }
.inventory-screen .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inventory-bag .item-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 112px; margin: 0; padding: 7px 5px 6px; border: 2px solid #8c967f; border-radius: 10px; background: linear-gradient(145deg, #31505a, #203e49); color: #f8edcc; text-align: center; box-shadow: inset 0 1px #ffffff20; }
.inventory-bag .item-slot.selected { border-color: #f6d48e; background: linear-gradient(145deg, #6b684e, #3c5756); color: #fff4d8; box-shadow: 0 0 0 2px #ddbb6880, inset 0 1px #fff5d852; }
.inventory-bag .item-slot:active { transform: translateY(1px); }
.item-slot img { display: block; width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 4px 3px #071921ad); }
.item-slot-name { display: -webkit-box; width: 100%; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; line-height: 1.12; }
.item-state { color: #f6d78d; font-size: 10px; line-height: 1; }
.item-count { position: absolute; top: 5px; right: 5px; min-width: 21px; padding: 1px 3px; border-radius: 5px; background: #0d2733dc; color: #f8df9e; font-size: 10px; }
.inventory-detail { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.inventory-detail-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.inventory-detail-art { flex: none; display: grid; place-items: center; width: min(100%, 228px); height: clamp(150px, 31vh, 240px); border: 1px solid #a7a78360; border-radius: 50%; background: radial-gradient(circle, #5e746985 0%, #32515a44 48%, transparent 72%); }
.inventory-detail-art img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 10px 7px #061a21a9); }
.inventory-detail-body p { align-self: stretch; margin: 0; font-size: 14px; line-height: 1.4; }
.inventory-detail-note { display: block; margin-top: 9px; color: #e3cb91; font-size: 12px; }
.inventory-detail .inventory-primary-action, .inventory-detail .inventory-socket-action { display: flex; align-items: center; justify-content: center; gap: 10px; flex: none; min-height: 54px; margin: auto 0 0; padding: 9px 12px; border: 2px solid #ffdda0; border-radius: 10px; background: linear-gradient(180deg, #eed398, #b98a4a); color: #19333b; text-align: center; font-size: 17px; font-weight: 900; box-shadow: inset 0 1px #fff6d8, 0 5px 12px #07192069; }
.inventory-detail .inventory-primary-action svg { width: 23px; height: 23px; }
.inventory-detail .inventory-primary-action:disabled { border-color: #a8c4aa; background: #335951; color: #e1efcf; box-shadow: none; opacity: 1; }
.inventory-detail .inventory-socket-action { border-color: #a5d9dc; background: linear-gradient(180deg, #4b7b80, #28515f); color: #f3f2d9; }
.inventory-detail .action-check { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; }

@media (max-width: 680px) and (orientation: portrait) {
  .screen-body:has(.inventory-screen) { padding: 6px; }
  .inventory-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; }
  .inventory-screen .screen-pane { padding: 7px; }
  .inventory-screen .screen-pane h2 { margin-bottom: 5px; font-size: 17px; }
  .inventory-equipment { overflow: hidden; }
  .equipment-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .inventory-equipment .equipment-slot { flex-direction: column; justify-content: center; gap: 0; min-height: 83px; padding: 3px 2px; text-align: center; }
  .equipment-slot img, .equipment-empty-mark { width: 40px; height: 40px; }
  .equipment-empty-mark { font-size: 19px; }
  .equipment-slot small { margin-bottom: 1px; font-size: 8px; letter-spacing: 0; }
  .equipment-slot b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 10px; line-height: 1.06; }
  .inventory-screen .item-grid { gap: 5px; }
  .inventory-bag .item-slot { min-height: 88px; padding: 4px 2px; }
  .item-slot img { width: 47px; height: 47px; }
  .item-slot-name { font-size: 10px; }
  .item-state { font-size: 9px; }
  .inventory-detail { max-height: min(34dvh, 230px); }
  .inventory-detail-body { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 9px; }
  .inventory-detail-art { width: 94px; height: 94px; }
  .inventory-detail-body p { align-self: center; font-size: 11px; line-height: 1.25; }
  .inventory-detail .inventory-primary-action, .inventory-detail .inventory-socket-action { min-height: 42px; margin-top: 6px; font-size: 13px; }
  .inventory-detail .inventory-primary-action svg { width: 19px; height: 19px; }
  .inventory-detail-note { margin-top: 4px; font-size: 10px; }
  .inventory-detail .tour-tip { margin: 5px 0 0; font-size: 10px !important; }
}
@media (max-height: 470px) and (orientation: landscape) {
  .inventory-screen { grid-template-columns: minmax(170px, 26%) minmax(230px, 39%) minmax(190px, 1fr); }
  .inventory-screen .screen-pane { padding: 7px; }
  .equipment-slots { gap: 6px; }
  .inventory-equipment .equipment-slot { min-height: 58px; padding: 3px 5px; }
  .equipment-slot img, .equipment-empty-mark { width: 47px; height: 47px; }
  .inventory-bag .item-slot { min-height: 82px; }
  .item-slot img { width: 44px; height: 44px; }
  .inventory-detail-art { height: 85px; width: 85px; }
  .inventory-detail-body p { font-size: 11px; }
  .inventory-detail .inventory-primary-action, .inventory-detail .inventory-socket-action { min-height: 39px; font-size: 12px; }
}

/* Chapter III overview uses the same modular world art and coordinates as gameplay. */
.regional-map:has(.regional-world-art):before, .regional-map:has(.regional-world-art):after { display:none; }
.regional-world-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* Chapter IV: concrete sharing and nautical encounters. */
.combat-layer[data-arena="harbor"] { background-image:url('art/chapter4/harbor_arena.webp'); }
.combat-layer[data-arena="greyship"] { background-image:url('art/chapter4/ship_arena.webp'); }
.c4-ward-row { display:flex; justify-content:center; gap:5px; margin-top:5px; }
.c4-ward-row span { border:1px solid #70d5cf; border-radius:5px; padding:3px 7px; color:#bbf5de; background:#183c48; }
.c4-ward-row .broken { opacity:.45; color:#b6c1b9; }
.c4-distribution { width:100%; max-width:600px; color:#f4e6be; }
.c4-spark-reserve { padding:8px; border-radius:10px; background:#122f39; text-align:center; }
.c4-spark-reserve div { color:#ffd77f; font-size:23px; min-height:32px; }
.c4-bins { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0; }
.c4-bin { display:flex; flex-direction:column; align-items:center; border:1px solid #8fa69b; background:#23464e; border-radius:10px; padding:8px; }
.c4-bin img { width:100%; height:78px; object-fit:contain; margin-bottom:5px; }
.c4-spark-count { color:#ffd77f; min-height:28px; font-size:20px; line-height:1.2; overflow-wrap:anywhere; }
.c4-bin strong { font-size:25px; }
.c4-bin-controls { display:flex; justify-content:center; gap:10px; width:100%; margin-top:7px; }
.c4-bin-controls button { width:48px; min-height:48px; font-size:26px; border:1px solid #efcd8e; border-radius:8px; background:#b59257; color:#142e38; }
.c4-bin-controls button:disabled { opacity:.4; }
[data-distribution-reset] { display:block; margin:auto; min-height:44px; padding:5px 14px; background:#244653; color:#efdfbe; border:1px solid #80978c; border-radius:8px; }
.math-layer[data-input="distribution"] .math-controls { display:block; }
.math-layer[data-input="distribution"] .math-frame { height:min(94dvh,600px); }
.math-layer[data-input="distribution"] .math-side-actions { flex-direction:row; }
.math-layer[data-input="distribution"] .math-workspace { overflow-y:auto; justify-content:flex-start; }
.math-layer[data-input="distribution"] .math-visual { width:100%; max-height:none; flex:none; overflow:visible; }
.math-layer[data-input="distribution"] .math-prompt { flex:none; max-height:none; }
.c4-reference-table { border-collapse:collapse; background:#24454d; color:#f0e8c8; font-size:14px; margin:3px auto; }
.c4-reference-table th, .c4-reference-table td { padding:4px 12px; border:1px solid #789084; text-align:center; }
.c4-reference-table th { color:#ffd387; }
#mathTableReference { max-width:100%; }
.harbor-map,.greyship-map { background:#284d5a; }
@media (max-width:600px) {
  .c4-bins { gap:5px; margin:8px 0; }
  .c4-bin { padding:6px 3px; }
  .c4-bin img { height:57px; }
  .c4-bin-controls { gap:4px; }
  .c4-bin-controls button { width:42px; min-height:44px; }
  .c4-spark-count { font-size:17px; }
  .c4-reference-table th,.c4-reference-table td { padding:2px 8px; }
}
@media (max-height:540px) and (min-width:600px) {
  .math-layer[data-input="distribution"] .math-frame { display:flex; width:min(95vw,760px); height:94dvh; }
  .math-layer[data-input="distribution"] .math-header { padding:4px 12px; }
  .math-layer[data-input="distribution"] .math-header h1 { font-size:22px; }
  .math-layer[data-input="distribution"] .math-prompt { font-size:13px; margin:2px 0; }
  .c4-bins { margin:3px 0; }
  .c4-bin { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:4px; }
  .c4-bin img { height:40px; grid-row:1 / 3; }
  .c4-bin .c4-spark-count { display:none; }
  .c4-bin-controls { grid-column:1 / 3; margin:0; }
  .c4-bin-controls button { min-height:35px; }
  .c4-spark-reserve { padding:2px; }
  .c4-spark-reserve div { min-height:20px; font-size:17px; }
  [data-distribution-reset] { min-height:30px; font-size:12px; }
  .math-layer[data-input="distribution"] .math-controls { padding:4px 8px; }
  .math-layer[data-input="distribution"] .math-side-actions button { min-height:37px; }
}

/* Multi-headed coastal bosses keep all heads and tentacle ends inside the fight. */
.combat-layer[data-arena="ocean"]{background-image:url('art/bosses/ocean_arena.webp');}
.many-limbed-fighter img{width:min(100%,470px);max-width:100%;transform:none;}
.boat-battle .tiger-fighter::after{content:'';position:absolute;z-index:2;bottom:-5px;left:-8%;width:116%;height:90px;background:url('art/chapter4/rowboat.webp') center bottom/contain no-repeat;pointer-events:none;}
.boat-battle .combat-fighter::before{display:none;}

/* Chapter V: the player chooses each operation before calculating it. */
.combat-layer[data-arena="island5"] { background-image:url('art/chapter5/island_arena.webp'); }
.combat-layer[data-arena="lighthouse5"] { background-image:url('art/chapter5/lighthouse_arena.webp'); }
.lighthouse-keeper-fighter img { width:min(100%,420px); transform:none; }
.c5-sector-row { display:flex; justify-content:center; gap:8px; margin-top:3px; }
.c5-sector-row span { color:#617a83; }
.c5-sector-row .restored { color:#ffe2a1; text-shadow:0 0 9px #ffc858; }
.math-visual.c5-visual { max-height:none; flex:none; width:100%; margin:7px 0; overflow:visible; }
.c5-order-work,.c5-order-demo { text-align:center; padding:8px; border:1px solid #6e969e; border-radius:10px; background:#163742; }
.c5-order-expression { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin:7px 0; font:bold 24px Georgia,serif; color:#f8e6bb; }
.c5-order-expression button { min-width:44px; min-height:44px; padding:3px 7px; border:2px solid #e9c982; border-radius:8px; background:#b69154; color:#152f3d; font:bold 25px Georgia,serif; }
.c5-order-expression button:focus-visible { outline:3px solid #fff2bf; outline-offset:3px; }
.c5-order-expression button:disabled { opacity:.45; }
.c5-order-expression button.chosen { opacity:1; background:#b1d8a2; border-color:#dbefbb; }
.c5-order-work>small { color:#c7e0dc; font-size:11px; }
.c5-order-trace { display:block; color:#c4eaaa!important; }
.c5-order-demo { display:grid; gap:7px; color:#f5e0ab; }
.c5-order-demo b { font:bold 23px Georgia,serif; }
.c5-order-demo span { font-size:15px; }
.c5-order-demo small { font-size:13px; color:#c9dcd3; }
.math-layer[data-input="order"] .math-expression { font-size:clamp(22px,4vw,32px); margin:5px 0; }
.math-layer[data-input="order"] .number-pad button:disabled { opacity:.4; }
.math-layer[data-input="order"] #mathConfirm:disabled { opacity:.45; }
.island5-map,.lighthouse5-map { background:#315d6b; }
@media (max-width:600px) {
 .c5-order-expression { font-size:23px; gap:5px; }
 .c5-order-work { padding:5px; }
}
@media (max-height:540px) and (min-width:600px) {
 .c5-order-expression { font-size:19px; gap:4px; margin:3px 0; }
 .c5-order-expression button { min-width:37px; min-height:37px; font-size:22px; }
 .c5-order-work { padding:3px; }
 .math-layer[data-input="order"] .math-expression { font-size:23px; }
}

/* A worked lesson must show its entire trace, not the small dialogue thumbnail. */
.c5-lesson-dialogue .dialogue-frame { min-height:0; max-height:min(88dvh,620px); grid-template-columns:80px minmax(0,1fr); }
.c5-lesson-dialogue .dialogue-content { min-height:0; padding:12px; }
.c5-lesson-dialogue .dialogue-text { flex:0 1 auto; }
.c5-lesson-dialogue .dialogue-visual { max-height:none; overflow:visible; margin:0 0 9px; }
.c5-lesson-dialogue .dialogue-choices { flex:none; }
@media (max-height:540px) {
 .c5-lesson-dialogue .dialogue-frame { max-height:92dvh; bottom:10px; }
 .c5-lesson-dialogue .dialogue-content { padding:7px 10px; }
 .c5-lesson-dialogue .c5-order-demo { gap:3px; padding:5px; }
 .c5-lesson-dialogue .dialogue-text { font-size:13px; }
}
@media (max-height:540px) and (min-width:600px) {
 .math-layer[data-input="order"] .math-header h1 { font-size:20px; line-height:1.05; }
 .math-layer[data-input="order"] .math-workspace { justify-content:flex-start; padding:4px 8px; overflow-y:auto; }
 .math-layer[data-input="order"] .math-prompt { font-size:12px; line-height:1.2; }
}
.math-visual.c5-visual small { display:block; }

/* Signed answers retain the familiar keypad; only Chapter VI exposes the sign. */
.math-answer-row {display:flex;align-items:center;justify-content:center;gap:12px;}
.math-answer-row .math-answer {margin:0;}
#mathSignButton {border:1px solid #c8b271;background:#294a54;color:#f3dfb0;border-radius:12px;min-height:48px;padding:8px 16px;font-size:24px;font-weight:bold;}
.c6-number-line {display:block;width:100%;max-height:100px;}
.c6-line-choices {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:8px;}
.c6-line-choices button {min-height:45px;border:1px solid #b2bbac;border-radius:9px;background:#24444f;color:#f3dfb0;font-size:21px;}
.c6-line-choices button:nth-child(-n+5) {color:#b7d9ff;border-color:#759cbb;}
.c6-spark-pairs {display:grid;gap:7px;}
.c6-spark-pairs>div {display:flex;justify-content:center;flex-wrap:wrap;gap:5px;}
.c6-spark-pairs span {min-width:34px;padding:5px 7px;border-radius:50%;font-size:17px;border:1px solid;}
.c6-spark-pairs .positive {color:#ffda90;background:#82612844;}
.c6-spark-pairs .negative {color:#b5d8ff;background:#3767a144;}
.c6-charge {display:block;color:#e8e8ce;margin-top:5px;font-size:17px;}
.combat-layer[data-arena="poles6"] {background-image:url('art/chapter6/poles_arena.webp');}
.combat-layer[data-arena="balance6"] {background-image:url('art/chapter6/maze_arena.webp');}
.poles6-map,.balance6-map {background:#315d6b;}
@media(max-height:520px) and (orientation:landscape){.c6-number-line{max-height:75px;}.c6-line-choices{grid-template-columns:repeat(11,minmax(0,1fr));}.c6-line-choices button{min-height:38px;padding:4px;font-size:18px;}.c6-integer-demo{gap:3px!important;padding:4px!important;}}
#combatOpponent[data-polarity="positive"] #combatOpponentImage {filter:drop-shadow(0 0 16px #ffe38b);}
#combatOpponent[data-polarity="negative"] #combatOpponentImage {filter:drop-shadow(0 0 16px #85bfff);}
@media(max-height:470px) and (orientation:landscape){
 .math-layer[data-input="integer"] .math-frame {grid-template-columns:minmax(270px,43%) minmax(0,1fr);height:min(100%,350px);}
 .math-layer[data-input="integer"] .math-header h1 {font-size:18px;line-height:1.05;}
 .math-layer[data-input="integer"] .math-workspace {justify-content:flex-start;overflow-y:auto;padding:4px 8px;}
 .math-layer[data-input="integer"] .math-prompt {max-height:none;flex:none;font-size:12px;}
 .math-layer[data-input="integer"] .math-answer-row {flex:none;}
 .math-layer[data-input="integer"] #mathSignButton {min-height:42px;font-size:21px;}
 .math-layer[data-integer-choices="true"] .math-frame {display:flex;max-width:760px;height:min(94dvh,350px);}
 .math-layer[data-integer-choices="true"] .math-header {padding:5px 95px 5px 10px;}
 .math-layer[data-integer-choices="true"] .math-workspace {flex:1;}
 .math-layer[data-integer-choices="true"] .math-controls {display:block;padding:3px 8px 6px;}
 .math-layer[data-integer-choices="true"] .math-side-actions button {min-height:42px;}
 .math-layer[data-integer-choices="true"] .c6-line-choices {grid-template-columns:repeat(11,minmax(0,1fr));}
}

/* Keep both wings and the whole scorpion stinger inside the opponent column. */
.manticore-fighter img {width:min(100%,400px);max-width:100%;transform:none;}