/* The ink canvas is anchored to the viewport. HUD contents never resize it. */
html,body{width:100%;height:100%;margin:0;overscroll-behavior:none}
.arena.v8{height:100dvh;min-height:0;width:100%;grid-template-columns:minmax(280px,34%) minmax(0,1fr) minmax(150px,22%);grid-template-rows:54px 200px minmax(0,1fr) 80px 78px 18px;gap:6px 12px;padding:8px max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:clip}
.v8>*,.v8 .scroll-content>*,.v8 .hud-bottom>*{min-width:0;min-height:0;box-sizing:border-box}
.v8 #inkCanvas,.v8 #inkEffects{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.arena.v8 .dialogue,.arena.v8[data-kind=enemy] .dialogue,.arena.v8.scroll-open .dialogue{grid-area:2/1/3/3;overflow:visible;padding:8px 12px;display:grid;grid-template-rows:24px 1fr;gap:4px;background:linear-gradient(100deg,#102f35ee,#153c3bd6);border-radius:16px}
.v8 .dialogue>#sceneText,.v8 .dialogue>#copyTarget,.v8 .dialogue>#questionText,.v8 .dialogue>#wordBank,.v8 .dialogue>#characterTiles,.v8 .dialogue>#hint{display:none}
.v8 .speaker-line{font-size:13px;line-height:20px;gap:8px}.v8 .listen{position:absolute;right:8px;bottom:5px;top:auto;min-height:44px}
.task-deck{display:grid;grid-template-rows:minmax(0,1fr) 44px;gap:2px;min-height:0}.task-main{display:flex;flex-direction:column;justify-content:center;gap:3px}.task-word{font:34px/1.2 HKKai,serif;color:#fbe8b6;letter-spacing:.12em}.task-text{font-size:19px;line-height:1.4;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.task-options{display:flex;gap:6px;flex-wrap:wrap}.task-options span{background:#f7e0a91c;border:1px solid #dabe8177;border-radius:7px;padding:4px 8px;font:22px/1.1 HKKai,serif}.task-nav{display:flex;align-items:center;gap:8px}.task-nav button{min-height:44px;min-width:44px;padding:3px 10px}.task-nav span{font-size:13px;flex:1;color:#e5d5b4}
.arena.v8 .study-tools,.arena.v8.scroll-open .study-tools{position:absolute;inset:auto 12px 5px auto;margin:0;gap:5px}.v8 .study-tools button{font-size:12px;padding:4px 7px}.v8 .task-nav{padding-right:195px}.v8 .dialogue:has(.study-tools[hidden]) .task-nav{padding-right:0}.v8[data-mode=dictation] .task-nav{padding-right:90px}
.arena.v8 .study-scroll{grid-area:3/1/4/2;align-self:start;height:236px;max-height:100%;background:none;filter:drop-shadow(0 7px 14px #0008)}
.v8 .study-scroll::before,.v8 .study-scroll::after{display:none}.arena.v8 .scroll-content{position:relative;inset:0;height:100%;overflow:visible;display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:44px 42px 48px 44px;gap:6px 8px;padding:16px 12px;border-radius:14px;background:#efddbdec;background-image:var(--mage-scroll,none);background-size:100% 100%;color:#473923}
.v8 .scroll-title{grid-area:1/1/2/3;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:8px}.v8 .scroll-title button{min-width:44px;min-height:44px}.arena.v8 #strokeDemo{grid-area:2/1/4/2;position:relative;inset:auto;width:104px;height:104px;align-self:center}.arena.v8 #strokeCaption{grid-area:2/2/3/3;font-size:14px;margin:0;align-self:center}.v8 .scroll-controls{grid-area:3/2/4/3;display:flex;gap:3px}.v8 .scroll-controls button{min-width:44px;min-height:44px;font-size:13px;padding:1px;flex:1}.arena.v8 #penCount{grid-area:4/1/5/2;align-self:center;font-size:13px;margin:0}.v8 .scroll-content>.scroll-note:not(#penCount){display:none}.arena.v8 #strokeSource{grid-area:4/2/5/3;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:13px;padding:0}
.arena.v8 .duel-hud{grid-area:3/1/4/2;overflow:visible;max-height:none;padding:10px 12px;font-size:14px}.v8 .duel-hud p{margin:4px 0}.v8 #duelEnergy{font-size:12px}.v8 .stance-actions{gap:5px}.v8 .stance-actions button{min-height:44px;font-size:14px}.v8 #duelPreview{font-size:13px}.v8 #duelMessage:empty{display:none}
.arena.v8 .ink-journey,.arena.v8.scroll-open .ink-journey{grid-area:4/1/5/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:54px 22px;gap:2px 10px;align-items:center;overflow:visible;max-width:100%}.arena.v8 .glyph-tray{grid-area:1/1/2/2;display:flex;gap:6px;max-width:none;overflow:visible;flex-wrap:nowrap}.arena.v8 .glyph-chip{position:relative;flex:0 0 48px;min-width:44px;min-height:44px;width:48px;height:50px;border:1px solid #e7d5a766;background:#123337c9;border-radius:9px}.v8 .glyph-chip.active{border:2px solid #f5d48a;box-shadow:0 0 15px #e7ca7945}.v8 .glyph-chip canvas{position:relative;inset:auto;width:42px;height:42px}.v8 .glyph-chip>span{position:absolute;right:3px;bottom:0;font-size:11px}.v8 .word-actions{grid-area:1/2/2/3;display:flex;gap:5px}.v8 .word-actions button{min-height:44px;min-width:44px;font-size:12px;padding:5px 8px}.arena.v8 #glyphStatus{grid-area:2/1/3/2;font-size:12px;padding:0;line-height:20px;pointer-events:none}.v8 #inkReading{grid-area:2/1/3/3;justify-self:end;font-size:12px;color:#e9ddc0;line-height:20px}.arena.v8 #restoreInk{position:absolute;right:0;top:-46px;min-height:44px;background:#254b4b}.arena.v8 .hud-bottom{grid-area:5/1/6/-1;grid-template-columns:minmax(120px,20%) 1fr minmax(210px,35%);height:100%;padding:0;gap:10px}.v8 .cast-controls{position:relative}.arena.v8 .feedback{position:absolute;bottom:54px;right:0;width:min(340px,90vw);text-align:right;margin:0;font-size:13px;pointer-events:none}.v8 .skip-motion{position:absolute;right:0;bottom:0;min-height:48px}.arena.v8 .cast-button{font-size:17px;min-height:50px;min-width:210px;width:100%}.arena.v8 .sync-status{grid-area:6/1/7/-1;font-size:11px;line-height:18px}.v8 .player-state small{font-size:12px}.v8 .tool-button{min-height:52px}.v8 .npc-caption{display:none}.v8 .air-cue{pointer-events:none}.v8.has-ink .air-cue{opacity:0}.v8 .air-cue p{color:#fff2d0}.v8 .character-wrap{bottom:24%;height:49%;right:1%;width:36%}.v8 .casting-hands{opacity:.82}.v8 .encounter-status{font-size:12px}.v8 .encounter-status h1{font-size:18px}
.arena.v8 .ink-review,.arena.v8[data-kind=enemy] .ink-review{position:absolute;inset:70px auto auto 16px;max-height:none;width:min(420px,calc(100% - 32px));overflow:visible;padding:12px 16px;background:#103138fa;border-radius:16px;box-shadow:0 12px 35px #0008}.v8 .ink-review h2{font-size:20px;margin:0 0 6px}.v8 .ink-review p{font-size:14px;line-height:1.45;margin:6px 0}.v8 .review-actions{display:flex;gap:5px;flex-wrap:wrap;margin:5px 0}.v8 .review-actions button{min-height:44px;min-width:44px;padding:6px 10px;font-size:14px}.v8 .review-actions button:last-child{flex-grow:1}.arena.v8 .answer-ink{height:110px;width:100%;position:relative;inset:auto}.v8.reviewing .study-scroll{display:none}
@media(max-width:700px){.arena.v8{grid-template-columns:1fr 1fr;grid-template-rows:48px 210px 160px minmax(0,1fr) 78px 96px 18px;gap:5px 8px;padding:5px 10px}.arena.v8 .hud-top{grid-area:1/1/2/-1}.v8 .game-mark{font-size:13px}.v8 .header-actions button{min-width:44px;padding:4px;font-size:12px}.arena.v8 .dialogue,.arena.v8[data-kind=enemy] .dialogue,.arena.v8.scroll-open .dialogue{grid-area:2/1/3/-1;padding:7px 10px;grid-template-rows:22px 1fr}.v8 .task-word{font-size:32px}.v8 .task-text{font-size:18px;line-height:1.45}.v8 .task-options{gap:4px}.v8 .task-options span{font-size:20px;padding:3px 6px}.v8 .task-nav{padding-right:140px;gap:3px}.v8 .task-nav button{padding:2px 5px}.v8 .task-nav span{font-size:11px}.v8 .study-tools{right:8px!important;bottom:6px!important;gap:2px!important}.v8 .study-tools button{font-size:11px;padding:2px 5px}.v8 #skipStudy{max-width:64px;line-height:1.3}.v8 #openScroll{max-width:62px;line-height:1.3}.arena.v8 .study-scroll{grid-area:3/1/4/-1;height:160px;max-height:none}.arena.v8 .scroll-content{padding:4px 10px;grid-template-columns:106px minmax(0,1fr);grid-template-rows:44px 40px 44px;gap:3px 8px}.v8 .scroll-title{grid-area:1/1/2/3;font-size:15px}.arena.v8 #strokeDemo{grid-area:2/1/4/2;width:90px;height:90px;align-self:start}.arena.v8 #strokeCaption{grid-area:2/2/3/3;font-size:13px}.v8 .scroll-controls{grid-area:3/2/4/3}.arena.v8 #penCount{display:none}.arena.v8 #strokeSource{position:absolute;right:65px;top:4px;font-size:12px;min-height:44px}.arena.v8 .duel-hud{grid-area:3/1/4/-1;padding:6px 10px;display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}.v8 .duel-hud[hidden]{display:none}.v8 .duel-hud p{font-size:12px;margin:2px 0}.v8 #duelIntent{grid-column:1/-1;font-size:14px}.v8 #duelEnergy{grid-column:1/-1}.v8 .stance-actions{grid-column:1/-1;flex-direction:row}.v8 .stance-actions button{font-size:12px;flex:1;min-width:0}.v8 #duelPreview,.v8 #duelMessage{grid-column:1/-1}.arena.v8 .encounter-status,.arena.v8[data-kind=enemy] .encounter-status{position:absolute;inset:410px 12px auto auto;width:47%;padding:0}.v8 .encounter-status h1{font-size:16px}.arena.v8 .ink-journey,.arena.v8.scroll-open .ink-journey{grid-area:5/1/6/-1;grid-template-columns:1fr auto;grid-template-rows:52px 22px;gap:2px}.arena.v8 .glyph-tray{gap:4px}.arena.v8 .glyph-chip{flex-basis:44px;width:44px}.v8 .glyph-chip canvas{width:39px;height:42px}.v8 .word-actions{position:absolute;right:0;top:-44px}.v8 .word-actions button{background:#183d3ad9;min-height:44px}.arena.v8 #glyphStatus{display:none}.v8 #inkReading{grid-area:2/1/3/-1;justify-self:start;font-size:11px}.arena.v8 .hud-bottom{grid-area:6/1/7/-1;grid-template-columns:1fr 1fr;grid-template-rows:34px 54px;gap:5px 8px}.v8 .player-state{grid-area:1/1/2/-1;display:flex;align-items:center;gap:10px}.v8 #playerVital{width:70px;height:10px}.v8 .player-state small{font-size:12px}.v8 .battle-tools{grid-area:2/1/3/2;justify-content:flex-start;gap:2px}.v8 .tool-button{font-size:11px;min-width:44px;min-height:52px}.arena.v8 .tool-button>span{width:26px;height:26px;font-size:19px;line-height:26px}.arena.v8 .cast-controls{grid-area:2/2/3/3;display:flex;min-width:0}.arena.v8 .cast-button{min-width:0;width:100%;font-size:14px;padding:5px 8px}.arena.v8 .feedback{bottom:89px;width:calc(100vw - 22px);font-size:12px;text-align:left;right:0;display:none}.arena.v8 .sync-status{grid-area:7/1/8/-1}.arena.v8 .character-wrap,.arena.v8[data-kind=enemy] .character-wrap{right:-4%;bottom:22%;height:37%;width:62%}.arena.v8 .air-cue,.arena.v8[data-kind=enemy] .air-cue,.arena.v8.scroll-open .air-cue{left:30%;top:57%}.v8 .air-cue p{font-size:13px}.arena.v8 .ink-review,.arena.v8[data-kind=enemy] .ink-review{inset:58px 10px auto;width:calc(100% - 20px)}.v8 .listen{right:8px;top:auto;bottom:5px;min-height:44px}.v8 .speaker-line{padding-right:75px}.v8 .teacher-feedback{top:55px;max-width:94%}}
@media(max-width:700px) and (max-height:720px){.arena.v8{grid-template-rows:44px 192px 142px minmax(0,1fr) 74px 84px 16px;gap:3px 6px}.v8 .task-text{font-size:16px}.v8 .task-word{font-size:28px}.v8 .scroll-content{padding-top:1px!important;padding-bottom:1px!important}.v8 .encounter-status{display:none}.v8 .hud-bottom{grid-template-rows:26px 50px!important}}

.task-word:empty,.task-options:empty{display:none}.arena.v8 .feedback{display:none}.arena.v8 #inkReading{white-space:normal;line-height:16px;font-size:12px;max-width:100%;align-self:start}.arena.v8 .ink-journey{grid-template-rows:52px 34px}.arena.v8{grid-template-rows:54px 200px minmax(0,1fr) 88px 78px 18px}.arena.v8 #glyphStatus{display:none}.v8 #inkReading{grid-area:2/1/3/3;justify-self:start}
@media(max-width:700px){.arena.v8{grid-template-rows:48px 210px 160px minmax(0,1fr) 88px 96px 18px}.arena.v8 #inkReading{font-size:11px;line-height:15px}.arena.v8 .ink-journey{grid-template-rows:52px 32px}}

.v8 .study-scroll::before{display:block;inset:-10px;opacity:.9}.arena.v8 .scroll-content{background-image:none}.arena.v8.custom-scroll .scroll-content{background-image:linear-gradient(#efddbddb,#efddbddb),var(--mage-scroll);background-size:100% 100%,var(--mage-scroll-fit,cover);background-position:center,var(--mage-scroll-position,center)}

.arena.v8 .ink-journey,.arena.v8.scroll-open .ink-journey{grid-template-rows:52px 34px}
@media(min-width:701px) and (max-height:740px){
 .arena.v8{grid-template-rows:48px 174px minmax(0,1fr) 88px 70px 18px}
 .arena.v8 .study-scroll{height:200px}
 .arena.v8 .scroll-content{padding:8px;grid-template-columns:104px minmax(0,1fr);grid-template-rows:44px 32px 44px 44px}
 .arena.v8 #strokeDemo{width:82px;height:82px}
 .arena.v8 #strokeCaption{font-size:12px}
}
@media(max-width:700px) and (max-height:760px){
 .arena.v8{grid-template-rows:44px 200px 144px minmax(0,1fr) 86px 86px 16px;gap:3px 6px}
 .arena.v8 .study-scroll{height:144px}
 .arena.v8 .scroll-content{padding:1px 8px;grid-template-rows:44px 40px 44px}
 .arena.v8 .hud-bottom{grid-template-rows:26px 50px}
 .arena.v8 .encounter-status{display:none}
}