@font-face{font-family:Reggae;src:url('assets/ReggaeOne.ttf')}*{box-sizing:border-box}body{margin:0;color:#173c42;background:#c8e7dd;font-family:Reggae,serif}button,input,select{font:inherit}button{cursor:pointer;border:2px solid #285f62;border-radius:14px;padding:12px 22px;color:#173c42;background:#fff8df;box-shadow:0 4px 0 #285f6233;transition:transform .15s}button:hover{transform:translateY(-2px);background:#fff}button:active{transform:translateY(2px)}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible{outline:4px solid #e99943;outline-offset:3px}.primary{background:#f1bb63;color:#493116;border-color:#876139}h1,h2,h3,p{margin-top:0}.screen{min-height:100svh;padding:24px}.hidden{display:none!important}#home,#selection{background:radial-gradient(ellipse at 50% 80%,#fff9 0,transparent 60%),repeating-linear-gradient(120deg,#b9dfd622 0 3px,transparent 3px 9px),linear-gradient(135deg,#d7ebbc,#a1dcd7 60%,#5aa9ae)}#home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}.home-scroll{position:relative;background:#fff0be;border:3px solid #b9994f;border-left:20px solid #aa8131;box-shadow:8px 8px 0 #527d6333,inset 0 0 25px #ceab5566;text-align:center;width:min(100%,1100px);padding:4vh 20px;border-radius:14px 4px 4px 14px}.home-scroll:before,.mini-scroll:before,.question-scroll:before{content:'';position:absolute;left:-20px;top:-10px;bottom:-10px;width:18px;border-radius:10px;background:linear-gradient(90deg,#8a6626,#dab765,#99752d);box-shadow:2px 0 3px #47381b55}h1{font-size:clamp(40px,7.5vw,104px);margin:0;text-shadow:2px 3px #fff}.eyebrow,.edition{font-size:clamp(12px,1.4vw,18px);letter-spacing:.12em;color:#766131}#desks{display:flex;justify-content:center;align-items:end;max-width:1250px;width:100%;height:27vh}#desks img{width:16.6%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 3px #24595b22)}.home-nav{display:flex;gap:30px;width:min(100%,950px);justify-content:center}.home-nav button{flex:1;font-size:clamp(16px,2.3vw,30px)}.small-note{font-size:12px;opacity:.7;margin:0}header{display:flex;justify-content:space-between;align-items:center}.selection-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;height:79vh;max-width:1450px;margin:12px auto}.picker{text-align:center;display:flex;flex-direction:column}.picker h2{font-size:26px}.beam{position:relative;flex:1;min-height:0;background:linear-gradient(90deg,transparent,var(--tint),transparent);border-radius:60% 60% 20% 20%;box-shadow:inset 0 -15px 25px #fff8;display:flex;align-items:end;justify-content:center}.beam img{max-height:85%;width:85%;object-fit:contain;filter:drop-shadow(0 8px 10px #fff)}.picker-nav{display:flex;align-items:center;justify-content:space-between;font-size:clamp(18px,2.5vw,32px);padding-top:14px;text-shadow:2px 2px white}.picker-nav button{padding:8px 14px}.stage-picker{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column}.stage-picker img{width:100%;height:40%;object-fit:cover;border-radius:16px;border:4px solid #fff9}.mini-scroll{position:relative;background:#fff0be;padding:6px 45px;font-size:42px}.stage-picker #fight{margin-top:15px;width:100%;font-size:25px}#battle{height:100svh;min-height:450px;overflow:hidden;padding:12px;background-size:cover;background-position:center}.battle-top{height:9%;display:flex;align-items:center;justify-content:space-between}.battle-top button{font-size:14px;padding:7px 12px}#elapsed{position:absolute;left:50%;transform:translateX(-50%);font-size:clamp(27px,4vw,52px);text-shadow:3px 3px white,-2px -2px white}#mode-label{background:#ffffffe0;border-radius:20px;padding:7px 12px;font-size:12px}.battle-grid{height:91%;display:grid;grid-template-columns:26% 46% 26%;gap:1%}.battle-panel{position:relative;min-width:0;border:3px solid #fff9;border-radius:20px;background:linear-gradient(90deg,#fff3,transparent),var(--tint);box-shadow:inset 0 0 25px #ffffff55;overflow:hidden}.battle-panel:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#fff2 1px,transparent 1px),linear-gradient(90deg,#fff2 1px,transparent 1px);background-size:25% 10%}.name{position:absolute;bottom:2%;left:0;right:0;text-align:center;font-size:clamp(18px,2.4vw,34px);text-shadow:2px 2px white,-2px -2px white;z-index:6}.load{position:absolute;left:2%;width:96%;bottom:33%;height:3%;transition:bottom .5s cubic-bezier(.3,.1,.65,1.3);z-index:3}.tray{position:absolute;width:100%;height:65px;object-fit:fill;bottom:-22px;z-index:3}.sprite{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);height:26%;width:90%;object-fit:contain;object-position:center bottom;z-index:4;transition:height .4s}.sprite.intro{height:37%}.load.entering{animation:tray-entry 1s ease-in}@keyframes tray-entry{from{transform:translateY(-80vh)}to{transform:translateY(0)}}.weight{position:absolute;width:28%;height:80px;object-fit:contain;transform:translateX(-50%) rotate(var(--r));z-index:var(--z);filter:drop-shadow(2px 3px 1px #4c382944)}.weight.large{width:56%;height:160px}.weight.falling{animation:fall 1s cubic-bezier(.55,0,.9,.8)}@keyframes fall{from{translate:0 -80vh}85%{translate:0 0}94%{translate:0 -8px}to{translate:0 0}}.load.sinking .weight{animation:settle .55s ease-in}@keyframes settle{0%,20%{translate:0 -12px}70%{translate:0 3px}100%{translate:0 0}}.battle-panel.shake{animation:impact .3s}@keyframes impact{0%,100%{translate:0 0}20%{translate:-4px 3px}45%{translate:4px -3px}75%{translate:-2px 1px}}.sprite.effort{animation:tremble .23s infinite alternate}.sprite.exhausted{animation:tremble .09s infinite alternate}@keyframes tremble{from{translate:-1px 0}to{translate:1px 1px}}.sweat{position:absolute;z-index:5;left:70%;bottom:25%;color:#4ecded;text-shadow:1px 1px white;font-size:24px;animation:drip 1.3s infinite}@keyframes drip{from{translate:0 0;opacity:1}to{translate:0 25px;opacity:0}}.timeout-tokens{position:absolute;bottom:0;left:5px;font-size:18px;z-index:7}.middle{display:flex;flex-direction:column;min-height:0;gap:10px}.question-row{height:33%;display:flex;gap:8px;padding-left:17px}.question-scroll{position:relative;flex:1;background:#fff0c6;border:3px solid #c6a05d;border-left:10px solid #aa8131;border-radius:3px;box-shadow:3px 4px 6px #273b3422;display:flex;align-items:center;justify-content:center;padding:8px;min-width:0}#question{text-align:center;font-size:clamp(24px,3.1vw,45px);line-height:1.55;overflow-wrap:anywhere;width:100%}.prompt-word{display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap}ruby{ruby-align:center}rt{font-size:14px}.blank{display:inline-flex;border:2px solid #8d8059;width:1.3em;height:1.35em;align-items:center;justify-content:center;background:#fff9;vertical-align:middle}.card-picture{font-family:system-ui;font-size:clamp(32px,4vw,57px);line-height:1.1}.card-picture small{font-family:Reggae;font-size:10px;display:block;color:#716341}#giveup{writing-mode:vertical-rl;letter-spacing:.1em;padding:8px;font-size:18px;background:#f3d8c2}#mark{position:absolute;font-size:110px;line-height:1;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);text-shadow:1px 1px #fff6;pointer-events:none}#mark.correct{color:#ef6058}#mark.wrong{color:#278bd3}.blackboard{flex:1;min-height:0;border:10px solid #a97c46;border-radius:6px;background:radial-gradient(ellipse at center,#35665e,#173f39);box-shadow:inset 0 0 30px #0005,0 3px 0 #674b2c;display:flex;flex-direction:column;position:relative;color:#eef4e8}.board-toolbar{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;height:40px;font-size:13px}#countdown{font-size:20px}#countdown.urgent{color:#ffd28c}#ink-boxes{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;gap:3px;padding:3px 5px}.ink-wrap{flex:1;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff25;background:linear-gradient(transparent 49.7%,#ffffff28 50%,transparent 50.3%),linear-gradient(90deg,transparent 49.7%,#ffffff28 50%,transparent 50.3%)}.ink-wrap canvas{display:block;touch-action:none;width:100%;height:100%;max-width:100%;cursor:crosshair}.ink-wrap.active{outline:2px solid #e5c17c;outline-offset:-2px}.ink-index{position:absolute;left:7px;top:3px;font-size:12px;pointer-events:none}.small-kana{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;background:#174c42cc;border:1px solid #b7d4c3;border-radius:5px;padding:4px}.small-kana input{vertical-align:middle}.writing-buttons{display:flex;gap:12px;justify-content:center}.writing-buttons button{padding:6px 18px;font-size:17px;min-width:140px}#feedback{position:absolute;top:45%;width:100%;text-align:center;font-size:26px;pointer-events:none;text-shadow:2px 2px #123;z-index:6}.paused .middle{visibility:hidden}dialog{border:3px solid #507e75;border-radius:20px;background:#f6f2df;color:#173c42;padding:25px;max-height:90svh;max-width:min(90vw,750px);overflow:auto}dialog::backdrop{background:#17393388;backdrop-filter:blur(6px)}dialog h2{text-align:center}fieldset{border:1px solid #9eb3a5;border-radius:10px;margin:10px 0;padding:12px;display:flex;gap:10px;flex-wrap:wrap}legend{font-size:15px}label{display:inline-flex;align-items:center;gap:6px;margin:5px}input[type=checkbox]{width:18px;height:18px;accent-color:#316c63}select{padding:5px}button,select{touch-action:manipulation}.help{font-size:12px;line-height:1.8;color:#596965}.actions{display:flex;justify-content:flex-end;gap:12px}#settings-error{color:#a54336}#pool-info{font-size:14px}.result-scroll{background:#fff0bf;padding:20px;border-top:16px solid #a78339;border-bottom:16px solid #a78339;min-width:370px}#result-title{font-size:46px}#result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:15px;margin-bottom:20px}#result-stats strong{font-size:23px;display:block}table{border-collapse:collapse;width:100%;font-size:13px}td,th{padding:7px;border-bottom:1px solid #b9a477;text-align:center}tr.current{background:#fff9}.ended .battle-grid{filter:blur(4px)}.rotate-note{display:none}@media(max-width:800px){.screen{padding:10px}.selection-grid{gap:10px}header span{font-size:12px}.picker h2{font-size:18px}.picker-nav{font-size:17px}.picker-nav button{padding:5px}#battle{padding:5px}.battle-grid{grid-template-columns:24% 50% 24%;gap:1%}.question-row{height:31%;padding-left:12px}.question-scroll{padding:3px}.blackboard{border-width:6px}#giveup{font-size:13px;padding:4px}.writing-buttons{gap:8px}.writing-buttons button{font-size:12px;padding:5px;min-width:90px}.middle{gap:7px}.board-toolbar{height:28px;font-size:10px;padding:2px 5px}#countdown{font-size:16px}.battle-top button{font-size:11px}#mode-label{font-size:9px}.tray{height:40px;bottom:-13px}.weight{height:52px}.weight.large{height:104px}.name{font-size:17px}#mark{font-size:75px}.home-nav{gap:10px}#question{font-size:25px}rt{font-size:11px}.small-kana{font-size:9px;padding:2px}.small-kana input{width:12px;height:12px}.result-scroll{min-width:300px;padding:10px}}@media(orientation:portrait){#battle{min-width:720px}body:has(#battle:not(.hidden)){overflow:auto}#selection .selection-grid{height:65vh}.home-nav{flex-direction:column;width:80%}#desks{height:22vh}.small-note{font-size:10px}.screen{min-height:100svh}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Approved lab geometry owns actor, tray and heap dimensions on every character. */
.load{inset:0;width:100%;height:100%;bottom:auto;transition:none}
.tray{object-fit:fill}
.sprite{transition:none;z-index:2}
.install-tools{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:12px}.install-tools button{padding:5px 10px;font-size:12px}.install-tools a{color:#245b5b}.install-tools [hidden]{display:none!important}
.load.sinking .weight{animation:none}
/* Explicit reading row avoids native ruby touching the answer border. */
.answer-cue{position:relative;display:inline-flex;align-items:center;padding-top:46px}
.answer-cue .reading{position:absolute;left:50%;top:0;transform:translateX(-50%);font-size:28px;line-height:1.15;white-space:nowrap}
.prompt-word{column-gap:10px;row-gap:12px}
#ink-boxes{align-items:center}
.ink-wrap{flex:0 1 auto;width:min(100%,var(--ink-height,240px));height:min(100%,var(--ink-height,240px));aspect-ratio:1}
.ink-wrap canvas{width:100%;height:100%;aspect-ratio:1}
@media(max-width:800px){.answer-cue{padding-top:38px}.answer-cue .reading{font-size:22px}}

/* Reference examples use a whole-word reading; do not split 熟字訓. */
.whole-word-prompt{display:flex;flex-direction:column;align-items:center;gap:12px}.whole-reading{font-size:28px;line-height:1.3;letter-spacing:.035em;max-width:100%;overflow-wrap:anywhere}.whole-reading small{display:block;font-size:11px;letter-spacing:0;color:#716341;margin-bottom:3px}
@media(max-width:800px){.whole-reading{font-size:22px}.whole-word-prompt{gap:10px}}