*{box-sizing:border-box} :root{font-family:Inter,"Segoe UI","Microsoft JhengHei",sans-serif;color:#253f36;background:#f7f7f2;font-synthesis:none}body{margin:0}button,select,input{font:inherit}button,select,summary{cursor:pointer}button{transition:background .15s,transform .15s}button:hover:not(:disabled){transform:translateY(-1px)}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #ba8b43;outline-offset:4px}button:disabled{cursor:default}header{height:88px;border-bottom:1px solid #e1e5db;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#fcfcf8}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:21px;font-weight:750;letter-spacing:2px}.brand-icon{background:#335d50;color:white;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:29px}.brand small{font-size:10px;letter-spacing:2px;color:#7c8a81;margin-left:5px}.header-note{font-size:12px;color:#78847c;letter-spacing:2px}main{max-width:1400px;padding:42px 5% 24px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#839282;margin:0 0 14px}h1{font-size:32px;font-weight:650;letter-spacing:1px;margin:0 0 12px}h2{font-size:17px;font-weight:650;margin:0 0 25px}.muted{font-size:13px;line-height:1.8;color:#7a877e;margin:0}.date-badge{border-left:2px solid #d8ddcb;padding:5px 0 5px 20px;display:grid;gap:8px;font-size:12px}.date-badge span{color:#8b9483}.layout{display:grid;grid-template-columns:240px minmax(320px,1fr) 260px;gap:22px;align-items:start}.panel{border:1px solid #e3e7dd;background:#fffefa;border-radius:18px}.settings{padding:26px 22px}.settings label:not(.checkbox){display:block;font-size:12px;margin:22px 0 9px;font-weight:600}select{width:100%;padding:12px 8px;border:1px solid #dde3d7;background:#fafbf6;color:#344e41;border-radius:8px;font-size:13px}.setting-note{font-size:11px;line-height:1.7;color:#8a9286;margin:15px 0 22px}.checkbox{font-size:12px;display:flex;align-items:center;gap:7px}input{accent-color:#335d50}.tip{border-top:1px solid #e7e9e0;margin-top:26px;padding-top:24px}.tip span{font-size:11px;color:#a18a59;letter-spacing:2px}.tip p{font-size:12px;line-height:1.9;color:#839080;margin-bottom:0}.quiz{padding:28px 32px;min-height:552px;box-shadow:0 9px 30px #29453405}.quiz-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#899387}.pill{padding:7px 12px;border-radius:30px;background:#eff3e8;color:#637c53;font-size:11px}.progress{height:4px;background:#ecf0e5;margin:20px 0 26px;border-radius:9px;overflow:hidden}#bar{height:100%;background:#91aa79;transition:width .2s}.question-instruction{text-align:center;font-size:13px;color:#889180;margin:0}#kana{height:142px;display:grid;place-items:center;font-family:"Yu Mincho","Noto Serif JP",serif;font-size:96px;line-height:1;color:#304f3e}#kana.listening{font-family:inherit;font-size:52px}.audio{display:flex;align-items:center;gap:8px;margin:0 auto;border:0;border-radius:30px;background:#f0f3ea;padding:9px 14px;color:#617653;font-size:14px}.audio span{font-size:11px}#audio-status{font-size:11px;line-height:1.5;text-align:center;color:#99743b;min-height:17px;margin:8px 0 16px}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option{position:relative;border:1px solid #dfe4d7;border-radius:10px;background:#fffefa;color:#425746;padding:17px;font-size:20px;min-height:61px}.option small{position:absolute;left:12px;top:12px;font-size:10px;color:#9ca793}.option:hover:not(:disabled){background:#f0f4e9;border-color:#9aad89}.option.correct{background:#e5efdf;border-color:#839f71;color:#3d6734}.option.wrong{background:#fbebe5;border-color:#c99880;color:#a95639}#feedback{min-height:37px;padding-top:14px;text-align:center;font-size:13px}.primary,.secondary{border:0;border-radius:9px;padding:13px 18px;font-size:13px}.primary{background:#335d50;color:white}.secondary{background:#eef1e7;color:#46603f}#next{width:100%;margin-top:5px}#next span{float:right}.keyboard{font-size:10px;color:#9da592;text-align:center;margin:17px 0 0}.right-column{display:grid;gap:20px}.today{padding:26px 22px}.today h2{font-size:16px}.goal-ring{width:156px;height:156px;border-radius:50%;margin:25px auto;background:conic-gradient(#819c6a 0%,#edf0e5 0);display:grid;place-items:center}.goal-ring>div{border-radius:50%;width:140px;height:140px;background:#fffefa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.goal-ring strong{font-size:40px;font-weight:500}.goal-ring span{font-size:10px;color:#8a9681}.stats{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin-top:25px}.stats>div+div{border-left:1px solid #e5e9dd}.stats strong{font-size:22px;font-weight:500;display:block}.stats span{display:block;font-size:10px;color:#929b88;margin-top:7px}.today>.muted{font-size:11px;text-align:center;margin-top:20px}.quote{border-radius:16px;background:#eaf0e0;overflow:hidden;padding:24px;position:relative;min-height:148px}.quote>span{font-family:serif;font-size:20px;letter-spacing:2px}.quote p{font-size:11px;color:#7f906b;margin-top:12px}.decor{position:absolute;font-family:serif;font-size:66px;color:#d4dfc4;right:4px;bottom:-21px;transform:rotate(-12deg)}.chart{margin-top:25px;padding:20px 24px}summary{font-size:14px;font-weight:650}summary span{font-size:11px;font-weight:400;color:#98a08f;float:right}.chart>.muted{margin:20px 0;font-size:11px}#chart{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}.chart-kana{border:1px solid #e6e9de;border-radius:8px;background:#fafbf6;padding:12px 5px;color:#3c5946;display:grid;gap:4px;font-size:24px}.chart-kana small{font-size:11px;color:#899b7a}footer{max-width:1400px;margin:0 auto;padding:0 5% 28px;display:flex;justify-content:space-between;font-size:10px;color:#99a18f}#result-view{text-align:center;padding:25px 0}#result-view h2{font-size:23px}#score{font-size:56px;margin:26px 0}#result-note{font-size:13px;color:#7f8b73}#mistakes{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:20px 0}#mistakes span{border-radius:5px;background:#f8eee7;padding:7px;font-size:12px}.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}[hidden]{display:none!important}@media(min-width:1450px){main{padding-left:40px;padding-right:40px}}@media(max-width:1100px){.layout{grid-template-columns:210px 1fr}.right-column{grid-column:1/-1;grid-template-columns:1fr 1fr}.today .goal-ring{margin:15px auto}.quote{display:flex;flex-direction:column;justify-content:center}.quiz{padding:28px}.brand small{display:none}}
/* Settings and mobile app navigation */
.settings-tabs{display:flex;gap:4px;background:#eef2e7;padding:4px;border-radius:10px;margin-bottom:20px}
.settings-tabs button{flex:1;border:0;border-radius:7px;background:transparent;padding:9px;color:#63745a;font-size:13px}
.settings-tabs button[aria-pressed="true"]{background:#fffefa;color:#335d50;box-shadow:0 1px 4px #334e3610}
.settings-section{min-width:0}.settings-section select{min-width:0;text-overflow:ellipsis}
#voice-preview{width:100%;margin:18px 0;min-height:44px}#voice-status{overflow-wrap:anywhere}
#settings-status{margin-bottom:0}.mobile-nav,.chart-pager{display:none}
button:disabled{opacity:.55}.option:disabled{opacity:1}
@media (max-width:650px), (max-height:500px) and (pointer:coarse){
  html{height:100%;overflow:hidden}
  body{height:100vh;height:100dvh;display:grid;grid-template-rows:calc(58px + env(safe-area-inset-top)) minmax(0,1fr) calc(66px + env(safe-area-inset-bottom));overflow:hidden}
  header{height:auto;padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));min-width:0}
  .brand{font-size:18px;gap:9px;letter-spacing:1px}.brand-icon{height:34px;width:34px;font-size:25px}.brand small{display:none}.header-note{font-size:10px;letter-spacing:0}
  main{margin:0;padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));width:100%;height:100%;min-height:0;max-width:none;display:flex;flex-direction:column;overflow:hidden}
  .intro,footer,.quote,.keyboard{display:none}
  .layout{display:contents}
  .settings,.quiz,.right-column,.chart{display:none!important;width:100%;min-height:0;max-height:100%;margin:0}
  body[data-view="quiz"] .quiz,body[data-view="settings"] .settings,body[data-view="chart"] .chart,body[data-view="progress"] .right-column{display:flex!important;flex-direction:column;flex:1;min-height:0}
  .quiz{padding:16px 20px;overflow:auto;overscroll-behavior:contain}
  .quiz-top{flex-shrink:0;min-height:28px}.progress{flex-shrink:0;margin:12px 0 16px}
  #question-view{flex:1;min-height:0;display:flex;flex-direction:column}
  .question-instruction{font-size:13px;flex-shrink:0}
  #kana{flex:1;min-height:64px;height:auto;max-height:240px;font-size:clamp(64px,15dvh,120px)}
  #kana.listening{font-size:48px}
  .audio{min-height:40px;flex-shrink:0}
  #audio-status{min-height:0;margin:6px 0;font-size:10px;flex-shrink:0}
  #audio-status:empty{margin:4px 0}
  .options{gap:10px;margin-top:auto;flex-shrink:0}
  .option{min-height:50px;padding:12px;font-size:20px}
  #feedback{min-height:32px;padding:10px 0 3px;flex-shrink:0;font-size:12px}
  #next{min-height:44px;margin:6px 0 0;flex-shrink:0}
  #next[hidden]{display:block!important;visibility:hidden;pointer-events:none}
  #result-view{padding:12px 0;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
  #result-view h2{font-size:21px;margin-bottom:10px}#score{font-size:48px;margin:12px 0}
  #result-note{font-size:12px;margin:8px 0}#mistakes{gap:5px;margin:10px 0}#mistakes span{padding:5px;font-size:11px}
  .result-actions{margin-top:12px}.result-actions button{min-height:44px}
  .settings{padding:20px;overflow:auto;overscroll-behavior:contain}
  .settings .eyebrow{font-size:9px;margin-bottom:8px}.settings h2{font-size:20px;margin-bottom:18px}
  .settings-tabs{flex-shrink:0;margin-bottom:4px}.settings-tabs button{min-height:42px}
  .settings label:not(.checkbox){margin:15px 0 7px}.settings select{font-size:16px;min-height:44px;padding:9px}
  .setting-note{font-size:11px;margin:12px 0;line-height:1.6}
  .settings .checkbox{font-size:13px;min-height:36px}.checkbox input{width:18px;height:18px}
  #settings-status{margin-top:auto;padding-top:12px}#voice-preview{margin:12px 0}
  .right-column{overflow:auto}.today{display:flex;flex-direction:column;justify-content:center;flex:1;padding:24px;min-height:min-content}
  .today h2{font-size:21px;margin:0}.today .goal-ring{margin:24px auto;width:166px;height:166px;flex-shrink:0}
  .goal-ring>div{width:148px;height:148px}.stats{margin-top:12px}.today>.muted{margin-top:24px}
  .chart{padding:20px;overflow:auto;overscroll-behavior:contain}
  .chart summary{list-style:none;font-size:20px;pointer-events:none;flex-shrink:0}.chart summary::-webkit-details-marker{display:none}.chart summary span{display:none}
  .chart>.muted{margin:12px 0 20px;flex-shrink:0}
  #chart{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:auto 0;flex-shrink:0}
  .chart-kana{font-size:30px;min-height:86px;padding:14px 2px}.chart-kana small{font-size:12px}
  .chart-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:22px;flex-shrink:0}
  .chart-pager button{min-height:44px;padding:10px 12px}.chart-pager span{font-size:12px;color:#7a8770;white-space:nowrap}
  .mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e0e6d9;background:#fffefa;padding:5px max(8px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px}
  .mobile-nav button{border:0;background:transparent;border-radius:12px;color:#83907b;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;font-size:11px;min-width:0}
  .mobile-nav button span{font-size:22px;line-height:25px;height:25px}.mobile-nav button[aria-current="page"]{color:#335d50;background:#eaf0e2;font-weight:700}
  button:hover:not(:disabled){transform:none}
}
@media (max-width:650px) and (max-height:690px){
  body{grid-template-rows:calc(50px + env(safe-area-inset-top)) minmax(0,1fr) calc(60px + env(safe-area-inset-bottom))}
  main{padding-top:8px;padding-bottom:8px}.quiz{padding:12px 16px}.progress{margin:8px 0 10px}
  #kana{min-height:48px;font-size:64px}.option{min-height:44px;padding:9px}.options{gap:8px}
  #feedback{min-height:28px;padding-top:6px}.audio{min-height:36px;padding:7px 12px}
  .settings{padding:14px 18px}.settings .eyebrow{display:none}.settings h2{font-size:18px;margin-bottom:10px}
  .settings-tabs button{min-height:36px;padding:6px}.settings label:not(.checkbox){margin-top:10px}.setting-note{margin:8px 0}
  #settings-status{padding-top:6px}.chart-kana{min-height:70px;padding:9px 2px}.chart{padding:18px}
  #result-view{padding:0}#score{font-size:40px;margin:8px 0}#result-view .eyebrow{margin-bottom:8px}
}
@media (max-height:500px) and (pointer:coarse) and (min-width:651px){
  body{grid-template-rows:42px minmax(0,1fr) calc(52px + env(safe-area-inset-bottom))}
  main{padding:6px 12px}.quiz{padding:8px 16px}.progress{margin:6px 0}
  #question-view{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:20px minmax(48px,1fr) 36px 30px;gap:4px 20px}
  .question-instruction{grid-column:1;grid-row:1}#kana{grid-column:1;grid-row:2;min-height:48px;font-size:68px;max-height:none}
  .audio{grid-column:1;grid-row:3}#audio-status{grid-column:1;grid-row:4;margin:0}
  .options{grid-column:2;grid-row:1/3;margin:0;gap:6px}.option{min-height:40px;padding:8px}
  #feedback{grid-column:2;grid-row:3;padding:8px 0 0;min-height:0}#next{grid-column:2;grid-row:4;min-height:30px;padding:6px;margin:0}
  .settings{display:block;position:relative;padding:12px 20px}.settings .eyebrow,.settings h2,#settings-status{display:none}
  .settings-tabs{max-width:260px;margin-bottom:6px}.settings-tabs button{min-height:32px;padding:4px}
  .settings-section{display:grid;grid-template-columns:130px minmax(0,1fr);gap:5px 15px;align-items:center}
  .settings label:not(.checkbox){margin:0}.settings select{min-height:36px;padding:5px}.setting-note{margin:0;font-size:10px}
  #practice-settings .setting-note{grid-column:1/-1}#voice-status{grid-column:1/-1;grid-row:2}#voice-preview{margin:0;min-height:36px}.settings .checkbox{min-height:36px}
  .chart{padding:12px 20px}.chart summary{font-size:17px}.chart>.muted{margin:4px 0}#chart{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.chart-kana{min-height:60px;padding:6px 2px;font-size:25px}.chart-pager{margin-top:8px}.chart-pager button{min-height:32px;padding:6px 12px}
  .today{position:relative;padding:20px 30px 20px 240px}.today .goal-ring{position:absolute;left:35px;top:50%;transform:translateY(-50%);margin:0;width:140px;height:140px}.goal-ring>div{width:124px;height:124px}.today .eyebrow{margin-bottom:8px}.today h2{font-size:18px}.stats{margin-top:14px}.today>.muted{margin-top:14px}
  #result-view{display:grid;grid-template-columns:1fr 1fr;gap:5px 20px;align-items:center;padding:0}#result-view .eyebrow{display:none}#result-view h2{grid-column:1;margin:0;font-size:19px}#score{grid-column:1;grid-row:2/4;margin:0;font-size:40px}#result-note{grid-column:2;grid-row:1;margin:0}#mistakes{grid-column:2;grid-row:2;margin:0}.result-actions{grid-column:2;grid-row:3;margin:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media (max-width:650px) and (max-height:590px){
  .quiz{padding:10px 14px}.progress{margin:6px 0 8px}.quiz-top{min-height:24px}.pill{padding:5px 10px}
  #kana{min-height:40px;font-size:56px}#feedback{min-height:26px}#audio-status{font-size:9px;line-height:1.4}
  .today{padding:18px}.today .goal-ring{width:140px;height:140px;margin:16px auto}.goal-ring>div{width:124px;height:124px}.today>.muted{margin-top:16px}
}

/* Persistent audio switch and storage feedback */
.header-actions{display:flex;align-items:center;gap:24px}
.sound-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 14px;border:1px solid #c6cfc0;border-radius:24px;background:#f0f1eb;color:#58674f;font-size:12px;font-weight:650;white-space:nowrap}
.sound-toggle[aria-checked="true"]{background:#335d50;color:white;border-color:#335d50}
.sound-toggle[aria-checked="false"] .sound-on-mark,.sound-toggle[aria-checked="true"] .sound-off-mark{display:none}
.master-sound{font-weight:650}.settings .master-sound{margin:14px 0 8px}#device-audio-note{font-size:11px;line-height:1.6}
.storage-notice{position:fixed;top:calc(65px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(92%,560px);padding:12px 16px;border:1px solid #cfb183;border-radius:12px;background:#fff6dd;color:#715021;font-size:12px;line-height:1.5;z-index:20;box-shadow:0 5px 20px #0001}
.loading-state{position:fixed;inset:88px 0 0;z-index:15;background:#f7f7f2;display:grid;place-items:center;color:#63745a;font-size:14px}
@media (max-width:650px), (max-height:500px) and (pointer:coarse){
  .header-actions{gap:0}.header-actions .header-note{display:none}.sound-toggle{font-size:11px;padding:7px 10px;gap:5px;min-height:38px}.sound-toggle svg{width:20px;height:20px}.loading-state{inset:calc(58px + env(safe-area-inset-top)) 0 calc(66px + env(safe-area-inset-bottom))}
  .settings .master-sound{margin:8px 0 3px;min-height:28px}#device-audio-note{margin:4px 0 8px;font-size:10px;line-height:1.4}
}
@media(max-height:500px) and (pointer:coarse) and (min-width:651px){
  .master-sound,#device-audio-note{grid-column:1/-1}#voice-settings{column-gap:12px;row-gap:3px}#voice-status{grid-row:auto}.settings .master-sound{margin:0}#device-audio-note{margin:0}
}

/* Full kana chart: ten groups, no pagination. */
#chart{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.kana-group{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:6px;min-width:0;min-height:0}
.chart-kana{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;line-height:1.1;padding:10px 2px}
.chart-kana small{line-height:1.1}.kana-blank{min-width:0;min-height:0}
@media (max-width:650px), (max-height:500px) and (pointer:coarse){
  body[data-view="chart"] .chart{display:block!important;position:relative;padding:0;overflow:auto}
  .chart summary{position:absolute;top:12px;left:14px;right:14px;font-size:17px;line-height:24px}
  .chart>.muted{position:absolute;top:39px;left:14px;right:14px;margin:0;font-size:10px;line-height:15px;white-space:nowrap}
  #chart{position:absolute;top:62px;bottom:12px;left:12px;right:12px;margin:0;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(10,minmax(30px,1fr));gap:4px;min-height:336px}
  .kana-group{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:5px}
  .chart-kana{height:100%;min-height:0;padding:1px;gap:1px;font-size:clamp(19px,3.4dvh,30px);border-radius:6px}
  .chart-kana small{font-size:clamp(9px,1.35dvh,11px)}
}
@media (max-width:650px) and (max-height:690px){
  .chart summary{top:9px;font-size:16px;line-height:22px}.chart>.muted{top:33px}
  #chart{top:54px;bottom:8px;left:9px;right:9px;gap:3px;min-height:327px}
  .kana-group{gap:4px}.chart-kana{font-size:20px}.chart-kana small{font-size:9px}
}
@media (max-height:500px) and (pointer:coarse) and (min-width:651px){
  .chart summary{top:8px;font-size:16px;line-height:22px}.chart>.muted{top:9px;left:auto;right:14px;font-size:10px;line-height:22px}
  #chart{top:38px;bottom:8px;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:5px;min-height:170px}
  .kana-group{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,minmax(30px,1fr));gap:3px}
  .chart-kana{font-size:20px}.chart-kana small{font-size:9px}
}

.chart-kana small{white-space:nowrap;font-variant-numeric:tabular-nums}
.chart-kana.needs-practice{border-color:#cbb18a;background:#faf1e3}
@media(max-width:650px){.chart-kana small{font-size:9px;letter-spacing:-.15px}}

/* Extended kana and short-word practice. */
#kana.compound{font-size:64px}#kana.word{font-family:"Yu Gothic","Microsoft JhengHei",sans-serif;font-size:clamp(28px,5vw,48px);white-space:nowrap}
#chart{grid-template-columns:repeat(var(--chart-rows,10),minmax(0,1fr))}
.kana-group{grid-template-rows:repeat(var(--chart-columns,5),minmax(0,1fr))}
.chart summary strong{font:inherit}.word-chart .chart-kana{font-size:22px}
@media (max-width:650px), (max-height:500px) and (pointer:coarse){
  #chart{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--chart-rows,10),minmax(29px,1fr));min-height:calc(var(--chart-rows,10) * 29px + (var(--chart-rows,10) - 1) * 4px)}
  .kana-group{grid-template-columns:repeat(var(--chart-columns,5),minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
  .word-chart .chart-kana{font-size:clamp(17px,4.5vw,24px)}
  #kana.compound{font-size:56px}#kana.word{font-size:clamp(26px,8vw,42px)}
}
@media (max-height:500px) and (pointer:coarse) and (min-width:651px){
  #chart{grid-template-columns:repeat(var(--chart-rows,10),minmax(0,1fr));grid-template-rows:minmax(0,1fr);min-height:calc(var(--chart-columns,5) * 30px + (var(--chart-columns,5) - 1) * 3px)}
  .kana-group{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--chart-columns,5),minmax(30px,1fr))}
}

/* Three large answer choices. */
.quiz{container-type:inline-size}
.options{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.option{min-width:0;min-height:80px;padding:18px 12px;font-size:26px;line-height:1.25;border-radius:12px}
.option small{top:8px;left:10px;font-size:11px}
@container (max-width:460px){
  .options{grid-template-columns:minmax(0,1fr);gap:10px}
  .option{min-height:64px;padding:15px 32px}
  .option small{top:50%;transform:translateY(-50%)}
}
@media (max-width:650px), (max-height:500px) and (pointer:coarse){
  .options{grid-template-columns:minmax(0,1fr);gap:8px}
  .option{min-height:clamp(48px,7dvh,72px);padding:10px 32px;font-size:26px}
  .option small{top:50%;transform:translateY(-50%);font-size:12px}
}
@media (max-width:650px) and (max-height:690px){
  #question-view{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:18px minmax(44px,1fr) auto auto minmax(26px,auto) 44px;gap:4px 10px}
  .question-instruction{grid-column:1/-1;grid-row:1}
  #kana{grid-column:1;grid-row:2;max-height:none;min-height:44px;font-size:56px}
  #kana.compound{font-size:44px}#kana.word{font-size:clamp(24px,6vw,32px)}
  .audio{grid-column:2;grid-row:2;align-self:center;margin:0;padding:8px;min-height:40px}
  #audio-status{grid-column:1/-1;grid-row:3;margin:0;font-size:9px}
  #audio-status:empty{margin:0}
  .options{grid-column:1/-1;grid-row:4;margin:0;gap:6px}
  .option{min-height:48px;padding:8px 30px;font-size:24px}
  #feedback{grid-column:1/-1;grid-row:5;margin:0;padding:5px 0 0;min-height:26px}
  #next{grid-column:1/-1;grid-row:6;min-height:44px;margin:0}
}
@media (max-height:500px) and (pointer:coarse) and (min-width:651px){
  #question-view{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:18px minmax(40px,1fr) auto 62px 32px;gap:3px 10px}
  .question-instruction{grid-column:1;grid-row:1}#kana{grid-column:1;grid-row:2;min-height:40px;font-size:52px}
  #kana.compound{font-size:42px}#kana.word{font-size:30px}
  .audio{grid-column:2;grid-row:1/3;align-self:center;margin:0}
  #audio-status{grid-column:1/-1;grid-row:3;margin:0;font-size:9px}
  .options{grid-column:1/-1;grid-row:4;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
  .option{min-height:56px;padding:10px 24px;font-size:24px}
  #feedback{grid-column:1;grid-row:5;padding:6px 0 0;min-height:0}
  #next{grid-column:2;grid-row:5;min-height:32px;margin:0;padding:6px 12px}
}

/* Independent script selector for the reference chart. */
.chart-script-switch{display:flex;width:max-content;gap:3px;padding:3px;border-radius:9px;background:#eef2e7;margin-top:14px}
.chart-script-switch button{border:0;border-radius:6px;background:transparent;color:#66785c;font-size:13px;min-height:38px;padding:7px 16px}
.chart-script-switch button[aria-pressed="true"]{background:#335d50;color:#fff}
@media (max-width:650px), (max-height:500px) and (pointer:coarse){
  .chart-script-switch{position:absolute;top:5px;right:9px;margin:0;padding:2px;gap:2px;z-index:1}
  .chart-script-switch button{min-height:30px;padding:5px 9px;font-size:11px}
  .chart summary{right:136px;white-space:nowrap;font-size:15px}
}
@media (max-height:500px) and (pointer:coarse) and (min-width:651px){
  .chart-script-switch{top:3px;right:12px}.chart>.muted{right:150px;font-size:9px}.chart summary{right:auto}
}

/* Multiple practice ranges and tap-to-continue feedback. */
.scope-fieldset{border:0;padding:0;margin:18px 0 0;min-width:0}
.scope-fieldset legend{font-size:12px;font-weight:650;margin-bottom:10px}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.settings .scope-choice{display:flex;align-items:center;gap:6px;margin:0!important;padding:9px 6px;background:#f4f6ee;border:1px solid #dce3d3;border-radius:8px;font-size:11px!important;min-height:42px;cursor:pointer}
.scope-choice input{width:16px;height:16px;flex-shrink:0;margin:0}.scope-choice:has(input:checked){background:#e3ecd9;border-color:#91a780}
#tap-hint{font-size:10px;color:#637c53}.awaiting-next{cursor:pointer}.option[aria-disabled="true"]{cursor:pointer}
#chart-scope-label{font-size:11px;margin-right:10px}#chart-scope{width:170px;display:inline-block;margin:0 0 14px;font-size:12px;min-height:32px;padding:5px 8px}
@media (max-width:650px), (max-height:500px) and (pointer:coarse){
  .scope-fieldset{margin-top:14px}.settings .scope-choice{font-size:12px!important;min-height:40px;padding:8px}
  #chart-scope-label{position:absolute;top:43px;left:14px;font-size:10px}
  #chart-scope{position:absolute;top:38px;right:12px;width:calc(100% - 94px);min-height:30px;margin:0;padding:4px 7px;font-size:12px}
  .chart.multiple-scopes>.muted{display:none}
  .multiple-scopes #chart{top:77px;gap:3px;grid-template-rows:repeat(var(--chart-rows,10),minmax(28px,1fr));min-height:calc(var(--chart-rows,10) * 28px + (var(--chart-rows,10) - 1) * 3px)}
}
@media (max-height:500px) and (pointer:coarse) and (min-width:651px){
  #range-settings{display:block}.scope-fieldset{margin:6px 0}.scope-grid{grid-template-columns:repeat(4,1fr);gap:5px}.settings .scope-choice{min-height:32px;padding:5px}
  .multiple-scopes #chart{top:74px;grid-template-rows:minmax(0,1fr);min-height:calc(var(--chart-columns,5) * 30px + (var(--chart-columns,5) - 1) * 3px)}
}

/* Prevent text selection during repeated quiz taps and long presses. */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,label,summary{touch-action:manipulation}

/* Larger prompts and answer targets, using available screen height. */
#kana{height:190px;font-size:144px}
#kana.compound{font-size:88px}
#kana.word{font-size:clamp(32px,7cqw,52px)}
.option{font-size:34px;min-height:92px;padding:18px 16px}
.option.long-choice{font-size:clamp(20px,4.5cqw,26px)}
@media (max-width:650px) and (min-height:691px){
  #kana{height:auto;max-height:none;min-height:110px;font-size:clamp(112px,19dvh,184px)}
  #kana.compound{font-size:clamp(76px,12dvh,116px)}
  #kana.word{font-size:clamp(32px,9vw,50px)}
  #kana.listening{font-size:72px}
  .options{gap:10px}
  .option{min-height:clamp(66px,9dvh,96px);padding:12px 34px;font-size:clamp(32px,4.2dvh,40px)}
  .option.long-choice{font-size:clamp(28px,7.5vw,34px)}
  .option small{font-size:13px}
}
@media (max-width:650px) and (max-height:690px){
  #question-view{grid-template-rows:18px minmax(68px,1fr) auto auto minmax(26px,auto) 44px}
  #kana{height:auto;min-height:68px;font-size:76px}
  #kana.compound{font-size:54px}#kana.word{font-size:clamp(26px,7vw,36px)}
  .option{min-height:52px;padding:8px 30px;font-size:30px}
  .option.long-choice{font-size:26px}
}
@media (max-width:650px) and (max-height:590px){
  #question-view{grid-template-rows:18px minmax(56px,1fr) auto auto minmax(26px,auto) 44px}
  #kana{min-height:56px;font-size:64px}#kana.compound{font-size:46px}
  .option{min-height:48px;font-size:28px}.option.long-choice{font-size:24px}
}
@media (max-height:500px) and (pointer:coarse) and (min-width:651px){
  #kana{height:auto;min-height:40px;font-size:64px}#kana.compound{font-size:48px}#kana.word{font-size:34px}
  .option{min-height:56px;padding:8px 24px;font-size:32px}.option.long-choice{font-size:24px}
}