:root{--ink:#083579;--muted:#506784;--paper:#fffdf7;--line:#cfe1f1;font-family:system-ui,"Yu Gothic","Meiryo",sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 0,#e9f7ff,transparent 38rem),#fffdf7}main{width:min(920px,calc(100% - 32px));margin:auto;padding:28px 0 32px}button,input{font:inherit}button,a{touch-action:manipulation}button{min-height:48px;padding:12px 18px;border:1px solid #adcbe6;border-radius:24px;background:white;color:var(--ink);font-weight:700;cursor:pointer}button:hover:not(:disabled){background:#e9f6ff}button:disabled{opacity:.55;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #a65b00;outline-offset:3px}.primary{background:#007bed;color:white;border-color:#007bed}h1,h2,h3,p{margin:0 0 14px}h1{font-size:clamp(32px,6vw,48px);line-height:1.5}h2{font-size:clamp(23px,4vw,30px);line-height:1.5}p{line-height:1.75}ruby{ruby-align:center}rt{font-size:.48em;font-weight:500;letter-spacing:.06em}.muted{color:var(--muted);font-size:.9rem}.subject{display:inline-block;padding:6px 15px;background:#ffe9f4;color:#a51b60;border-radius:99px;font-weight:750;margin-bottom:14px}.intro{position:relative;padding:24px;border-radius:28px;background:linear-gradient(120deg,#e5f5ff,#fff9df 65%,#def7ed);overflow:hidden}.desk-tiles{display:flex;align-items:center;gap:10px;margin:4px 0 18px}.desk-tiles span{display:grid;place-items:center;width:66px;height:66px;border-radius:17px;background:#78caff;color:#083579;box-shadow:0 5px 0 #388dd2;font:bold 42px/1 "Yu Gothic","Meiryo",sans-serif;transform:rotate(-6deg)}.desk-tiles span:nth-of-type(2){background:#ffdb65;box-shadow:0 5px 0 #deb546;transform:rotate(7deg)}.desk-tiles i{color:#16715e;font-size:38px;font-style:normal;margin-left:8px}.start-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:12px;margin:22px 0}.start-grid button{min-height:110px;border-radius:24px;display:flex;flex-direction:column;justify-content:center;gap:10px;text-align:left}.start-grid strong{font-size:1.1rem}.start-grid small{font-weight:500;font-size:.85rem}.start-grid button:nth-child(2){background:#fff3c9}.start-grid button:nth-child(3){background:#e2f7ee}.totals{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.totals>span{flex:1;min-width:130px;background:white;border:1px solid var(--line);border-radius:20px;padding:14px;text-align:center}.totals b{display:block;font-size:1.4rem;margin-top:6px}.setting{display:flex;align-items:center;gap:10px;min-height:48px;margin:16px 0}input[type=checkbox]{width:20px;height:20px}.play-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}.play-head strong{margin-left:auto;white-space:nowrap}progress{width:100%;height:7px;accent-color:#0787ef;display:block;margin-bottom:16px}.question-card{background:white;border:1px solid var(--line);border-radius:26px;padding:26px;box-shadow:0 6px 18px #173d6710}.eyebrow{color:#286884;font-size:.9rem;font-weight:700}#hint{font-size:1.2rem;line-height:1.7}.tiles{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 24px}.tile{display:grid;place-items:center;width:96px;height:96px;font:bold 60px/1 "Yu Gothic","Meiryo",sans-serif;border-radius:20px;background:#c0eaff;box-shadow:0 6px 0 #91bedb;border:1px solid #9cc6e3}.tile.blank{background:#fff4c9;box-shadow:0 6px 0 #dbc475;border:2px dashed #a9882c}.tiles .plus{font-size:28px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.choices button{min-height:72px;border-radius:18px;text-align:left;line-height:1.6;font-weight:600;display:flex;align-items:center;gap:12px}.choices .key{font-size:14px;display:grid;place-items:center;border:1px solid #b4cee2;border-radius:99px;min-width:25px;height:25px}.choices.kanji button{justify-content:center;font-size:38px}.choices button.correct{border:3px solid #26755b;background:#e3f8ee}.choices button.selected:not(.correct){border:3px dashed #9d5729;background:#fff0df}.choices button:disabled{opacity:1}#feedback{border-left:6px solid #24805b;background:#e7f7ed;padding:20px;border-radius:18px}#feedback[data-correct=false]{border-color:#b46b25;background:#fff4dd}#outcome{font-size:32px;margin-bottom:12px}.answer-word{font:bold clamp(32px,8vw,48px)/1.7 "Yu Gothic","Meiryo",sans-serif;text-align:center;margin:12px 0}.answer-word span{display:inline-block;background:#ffe69c;border-radius:12px;padding:2px 12px;margin:0 3px}.joined span:first-child{animation:join-left .35s ease-out}.joined span:last-child{animation:join-right .35s ease-out}@keyframes join-left{from{transform:translateX(-25px) rotate(-9deg)}to{transform:none}}@keyframes join-right{from{transform:translateX(25px) rotate(9deg)}to{transform:none}}.example{background:#ffffffa8;border-radius:12px;padding:10px 12px}#answer-reason{margin-bottom:12px}#see-question{min-height:44px;padding:8px 12px;background:transparent;font-size:.9rem;font-weight:500}.next-bar{position:sticky;bottom:0;padding:14px 0 max(14px,env(safe-area-inset-bottom));background:#fffdf7f5;z-index:10}.next-bar button{width:100%;font-size:1.2rem;min-height:54px}.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.result-actions>*{flex:1 1 190px}.sticker-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.sticker{background:white;border:1px solid var(--line);border-radius:22px;padding:16px;min-width:0}.sticker.met{background:#f3fbff}.sticker.done{background:#fff8de}.sticker.again{background:#eaf9ef}.sticker summary{min-height:48px;cursor:pointer;font-size:1.15rem;font-weight:700;line-height:2}.sticker p{font-size:.95rem;margin:8px 0 0}.badge{display:block;font-size:.85rem;color:#285676;margin-top:8px}.format-marks{font-size:.8rem;display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.format-marks span{border:1px solid #c4d7e1;border-radius:10px;padding:3px 6px;background:#fff}.format-marks .done{background:#dff5ea;border-color:#89bda8}.collection-head{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.collection-head h2{margin:0}.pages{display:flex;justify-content:center;align-items:center;gap:15px;margin:20px 0}#word-search{display:block;width:100%;max-width:440px;min-height:48px;border:1px solid #aec9de;border-radius:15px;padding:10px 14px;margin:8px 0 14px}.notice,.system-status{padding:12px 0;line-height:1.7}.system-status p{margin:0}.system-status button{margin:8px 8px 0 0}body[data-store-status=error] .system-status,body[data-store-status=conflict] .system-status,body[data-store-status=load-error] .system-status{color:#854813;background:#fff0d9;border-radius:15px;padding:12px}footer{display:flex;justify-content:center;gap:24px;padding:16px 20px 28px;font-size:.9rem}footer a{color:var(--ink)}[hidden]{display:none!important}.celebrate{background:#fff2b8;padding:15px;border-radius:18px;border:2px solid #e3c767}
@media(max-width:680px){main{width:calc(100% - 24px);padding-top:16px}.intro{padding:20px}.start-grid{grid-template-columns:1fr;margin:16px 0}.start-grid button{min-height:82px;padding:15px 20px}.totals>span{min-width:90px;font-size:.82rem;padding:10px 6px}.play-head{gap:8px;font-size:.85rem}.play-head button{padding:8px 12px}.question-card{padding:18px}.choices.meanings{grid-template-columns:1fr}.choices{gap:9px}.choices button{padding:10px;min-height:62px;font-size:1.08rem}.choices.kanji button{font-size:34px}#hint{font-size:1.08rem}.tile{width:80px;height:80px;font-size:50px}.tiles{margin:16px 0 22px}#feedback{padding:15px}#outcome{font-size:29px}.sticker-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sticker{padding:12px}.sticker summary{font-size:1.05rem}.next-bar{position:fixed;bottom:0;left:0;right:0;padding:10px 12px max(10px,env(safe-area-inset-bottom));border-top:1px solid #dae6ef}body[data-screen=play]{padding-bottom:90px}body[data-screen=play] footer{display:none}.pages{gap:8px}.pages button{padding:8px 10px}.result-actions{gap:9px}.result-actions>*{flex-basis:100%}}
@media(max-width:350px){.choices:not(.kanji){grid-template-columns:1fr}.sticker-list{grid-template-columns:1fr}.play-head{flex-wrap:wrap}h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body[data-reduce-motion=true] .joined span{animation:none}
main{font-size:18px;font-family:"Meiryo","Yu Gothic",sans-serif}#answer-meaning,#answer-example{font-size:18px}.key-label{font-size:13px}#hint ruby{font-size:36px;line-height:1.9;font-weight:700}.totals b{white-space:nowrap}@media(max-width:680px){main{font-size:16px}#answer-meaning,#answer-example{font-size:17px}.sticker summary{font-size:18px}.muted{font-size:14px}#hint ruby{font-size:32px}.totals b{font-size:17px}}

/* Junior-specific controls; all text wraps at narrow widths. */
.level-picker{display:block;margin:20px 0 8px;font-weight:700}.level-picker select{display:block;width:100%;max-width:440px;min-height:48px;padding:10px;border:1px solid #adcbe6;border-radius:14px;background:white;color:var(--ink);font:inherit;margin-top:8px}select:focus-visible,a:focus-visible{outline:3px solid #a65b00;outline-offset:3px}.answer-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.answer-actions button{flex:1;min-width:130px}.choices.kanji button[aria-pressed=true]{background:#dff5ea;border:3px solid #26755b}.tile{padding:0}.tile small{font-size:13px;display:block}button.tile{display:flex;flex-direction:column;justify-content:center;gap:4px}.metric-help{padding:14px;border:1px solid var(--line);border-radius:18px;margin:16px 0}.metric-help summary{cursor:pointer;min-height:40px}.metric-help p{margin-top:12px}.intro h1 small{display:block;font-size:.55em}.choices button span:not(.key){min-width:0;overflow-wrap:anywhere}#answer-reason{color:#284d65}footer{flex-wrap:wrap}#b-context{font-size:16px;font-weight:400;display:block;margin-top:10px}.totals>span{min-width:150px}.tile-status{font-size:13px}a{color:var(--ink)}
@media(max-width:680px){.totals>span{min-width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px}.totals b{margin:0}.intro{padding:18px}.desk-tiles{margin-bottom:12px}.desk-tiles span{height:48px;width:48px;font-size:32px}}

#hint #b-context ruby{font-size:1em;line-height:1.8;font-weight:600}