/* Layout only: retain every existing bitmap; one coordinate system for UI. */
@font-face{font-family:WenKai;src:url('./assets/fonts/LXGWWenKai-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:SourceSerif;src:url('./assets/fonts/SourceHanSerifSC-Regular.woff2') format('woff2');font-display:swap}
:root{--serif:SourceSerif,'Songti SC',serif;--ui:var(--serif);--wenkai:WenKai,var(--serif)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important;border:0!important}
html,body{width:100%;height:100%;min-height:100dvh;overflow:hidden;background:#101b29;overscroll-behavior:none}body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Fixed edge-to-edge shell: safe areas move controls, never the painted canvas. */
#app{position:fixed;inset:0;width:100%;min-height:0;height:100%;margin:0;padding:0}
#game-screen{position:absolute;inset:0;display:block;height:100%;min-height:0;padding:0;overflow:hidden;isolation:isolate;container-type:size;--dialogue-font:clamp(15px,2cqw,20px);--dialogue-line:calc(var(--dialogue-font)*1.5)}
#game-screen[hidden]{display:none!important}
#game-screen .production-dialogue-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:3}
#game-screen .game-header{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:80px;display:block;width:auto;height:auto;min-height:0;padding:0;margin:0;border:0;box-shadow:none;background:none;z-index:6;pointer-events:none}
#game-screen .brand{display:none!important}
#game-screen .stats{position:static;display:none;align-items:center;justify-content:flex-start;gap:22px;padding:0;background:none;border:0;color:#f8f3df;font-size:12px;line-height:1.8;letter-spacing:.06em;text-shadow:0 1px 3px #172a40,0 0 8px #172a40}
#game-screen.free-activity .stats{display:flex}
#game-screen .stats>span{padding:0;border:0;font-size:inherit;white-space:nowrap}
#game-screen .stats b{font-size:15px;font-weight:400;margin-left:7px}
#game-screen .scene-stage{position:absolute;inset:0 0 40%;width:auto;height:auto;min-height:0;overflow:visible;z-index:2}
#game-screen .chapter-label,#game-screen .placeholder-label{display:none}
#game-screen .court-scene{position:absolute;inset:0;width:100%;height:100%;max-height:none;overflow:hidden;padding:0}
#game-screen .actor{top:0;bottom:0;height:100%;right:24%;width:25%}
/* Coordinates are measured against the unchanged full-canvas dialogue art. */
#game-screen>.dialogue-wrap{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;display:block;padding:0;margin:0;border:0;background:none;box-shadow:none;overflow:visible;z-index:4;pointer-events:none}
#game-screen>.dialogue-wrap:before,#game-screen .speaker:before,#game-screen .dialogue-top:before{display:none}
#game-screen .dialogue-top{position:absolute;left:13%;top:62.7%;width:21%;height:6.2%;min-height:0;padding:0;margin:0;display:flex;align-items:center;justify-content:center;gap:0;border:0;overflow:hidden}
#game-screen[data-speaker-side="right"] .production-dialogue-art{transform:scaleX(-1)}
#game-screen[data-speaker-side="right"] .dialogue-top{left:auto;right:13%}
#game-screen .speaker,#game-screen .speaker[data-color]{position:static;display:block;flex:none;width:auto;min-width:0;height:auto;padding:0;margin:0;font:400 clamp(14px,2.1cqw,21px)/1.2 var(--wenkai);color:#f1ddb2;letter-spacing:.18em;text-align:center;text-shadow:0 1px 3px #11253b}
#game-screen #scene-subtitle{display:none}
#game-screen #dialogue{position:absolute;left:13%;right:13%;top:70%;bottom:15.5%;width:auto;height:auto;min-height:0;max-height:none;padding:0;margin:0;display:block;overflow:visible;pointer-events:auto;background:none;border:0;font:inherit;cursor:pointer}
#game-screen #text{position:absolute;inset:0 0 auto;width:100%;height:calc(var(--dialogue-line)*2);min-height:0;max-height:none;margin:0;padding:0 8px 0 0;display:block;overflow-x:hidden;overflow-y:auto;white-space:normal;word-break:normal;overflow-wrap:break-word;-webkit-line-clamp:unset;line-clamp:unset;text-overflow:clip;font:400 var(--dialogue-font)/var(--dialogue-line) var(--serif);letter-spacing:.03em;color:#fff8e9;text-shadow:0 1px 3px #071727;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#d4bd8c transparent}
#game-screen #text::-webkit-scrollbar{width:3px}#game-screen #text::-webkit-scrollbar-thumb{background:#d4bd8c;border-radius:3px}#game-screen #text::-webkit-scrollbar-button{display:none}
#game-screen .advance-hint{position:absolute;top:16cqh;bottom:auto;right:0;height:12px;min-height:0;margin:0;padding:0;display:block;font:9px/12px var(--serif);letter-spacing:.05em;color:#d4dfeb;text-align:right}
#game-screen .game-toolbar{position:absolute;inset:auto 0 1%;height:30px;min-height:0;padding:0;margin:0;display:block;background:none;border:0;box-shadow:none;z-index:5;color:#efddba}
#game-screen .game-toolbar:before,#game-screen .game-toolbar:after,#game-screen .game-toolbar button:before,#game-screen .game-toolbar button:after{display:none}
#game-screen .game-toolbar>div{display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr 1fr;gap:8px;align-items:center;width:64%;height:100%;min-width:0;margin:0 auto;padding:0}
#game-screen .game-toolbar button{display:block;min-width:0;min-height:32px;width:100%;height:36px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;writing-mode:horizontal-tb;text-orientation:mixed;font:400 clamp(12px,1.8cqw,16px)/36px var(--wenkai);letter-spacing:.18em;color:#f3e3c4;text-align:center;text-shadow:0 1px 4px #071827;white-space:nowrap}
#game-screen .game-toolbar button:disabled{opacity:.38}
#game-screen .game-toolbar button[aria-pressed=true]{color:#fff5b9;background:none;box-shadow:none;text-shadow:0 0 8px #c8e5ff}
#game-screen #save-indicator{position:absolute!important;flex:none;max-width:1px;min-width:0}
#game-screen .system-menu{position:absolute;top:64px;right:max(16px,env(safe-area-inset-right));width:184px;max-height:calc(100% - 90px);overflow:auto;padding:9px 12px;border:1px solid #b99d65aa;border-radius:5px;background:#172c43f5;box-shadow:0 10px 35px #07132177;backdrop-filter:blur(12px);z-index:13;color:#f2e1ba}
#game-screen .system-menu[hidden]{display:none}
#game-screen .system-menu button{display:block;position:static;width:100%;min-width:0;min-height:40px;height:auto;margin:0;padding:8px 12px;border:0;border-radius:0;background:none;box-shadow:none;writing-mode:horizontal-tb;letter-spacing:.15em;font:15px/24px var(--wenkai);color:inherit;text-align:center}
#game-screen .system-menu button+button{border-top:1px solid #bda47229}
#game-screen .system-menu button:not(:disabled):hover{color:#fff0b9;background:#bbd9ff16}
#game-screen .system-menu button[aria-pressed=true]{color:#ffe99a}
/* Every option is inside the upper scene. No hidden clipping ancestor. */
#game-screen #choices{position:absolute;inset:max(36px,calc(env(safe-area-inset-top,0px) + 8px)) auto 6px 50%;transform:translateX(-50%);width:54%;max-width:580px;height:auto;max-height:none;display:grid;grid-template-columns:1fr;grid-auto-rows:max-content;align-content:center;gap:6px;padding:0 4px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding:8px;z-index:7}
#game-screen #choices[hidden]{display:none}
#game-screen .choice{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:clamp(44px,10cqh,64px);margin:0;padding:4px 14%;border:0;border-radius:0;box-shadow:none;background:transparent url('./assets/ui/choice-ribbon.png') center/100% 210% no-repeat;color:#fff3d6;text-align:center;text-shadow:0 1px 3px #071d34}
#game-screen .choice:before,#game-screen .choice:after,#game-screen .choice>span{display:none}
#game-screen .choice>div{display:block;min-width:0;width:100%}
#game-screen .choice strong{display:block;font:400 clamp(13px,1.9cqw,18px)/1.25 var(--wenkai);letter-spacing:.04em;white-space:normal;overflow-wrap:break-word}
#game-screen .choice small{display:block;margin:1px 0 0;font:9px/1.1 var(--serif);color:#dce7ee;white-space:normal}
#game-screen .choice:not(:disabled):hover{filter:brightness(1.12)}
#game-screen.ui-hidden>.production-dialogue-art,#game-screen.ui-hidden>.system-menu{visibility:hidden;pointer-events:none}
@media(max-height:400px) and (orientation:landscape){#game-screen .game-toolbar{bottom:1%;height:28px}#game-screen .game-toolbar button{height:28px;min-height:28px;line-height:28px}#game-screen .stats{font-size:11px;gap:18px}#game-screen .stats b{font-size:13px}}
@media(max-height:300px) and (orientation:landscape){#game-screen{--dialogue-font:14px}}
/* Four choices stay fully visible on phone landscapes, instead of a cut-off fourth row. */
@media(max-height:450px) and (orientation:landscape){#game-screen #choices[data-count="4"]{width:74%;max-width:740px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}#game-screen #choices[data-count="4"] .choice{padding-left:12%;padding-right:12%}}
@media(max-height:340px) and (orientation:landscape){#game-screen #choices[data-count="3"]{width:74%;max-width:740px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}#game-screen #choices[data-count="3"] .choice:last-child{grid-column:1/-1;width:calc(50% - 6px);justify-self:center}}
@media(orientation:portrait){#game-screen #choices{width:78%;max-height:80%}#game-screen #dialogue{left:9%;right:9%}#game-screen .game-toolbar>div{width:86%}#game-screen .stats{gap:10px;font-size:9px}#game-screen .stats b{font-size:11px}}
/* The three exact reference icons are sampled from the user's immutable image. */
#game-screen .system-tools{position:absolute;top:max(6px,env(safe-area-inset-top));right:max(4px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:0;z-index:12}
/* 32px artwork inside a 44px touch target, using the same three approved icons. */
#game-screen .system-tools .reference-tool{position:relative;display:block;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;box-shadow:none;background:none;cursor:pointer}
#game-screen .system-tools .reference-tool:before{content:'';position:absolute;inset:6px;display:block;width:32px;height:32px;border-radius:50%;clip-path:circle(48%);background:transparent url('./assets/ui/reference-controls.jpeg') -723px var(--icon-y)/768px 432px no-repeat;pointer-events:none}
#game-screen .system-tools .tool-leaf{--icon-y:-21px}
#game-screen .system-tools .tool-moon{--icon-y:-61.5px}
#game-screen .system-tools .tool-bell{--icon-y:-103px}
#game-screen .system-tools .reference-tool:hover{filter:brightness(1.18)}
#game-screen .system-menu{top:8px;right:max(54px,calc(env(safe-area-inset-right) + 50px));max-height:calc(100% - 16px)}
#game-screen.ui-hidden>.system-tools{visibility:hidden;pointer-events:none}
