:root{--green:#176b56;--ink:#243c36;--muted:#6e7e77;--line:#e2e8df;--cream:#f7f8ef;--yellow:#f4ce58}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Yu Gothic UI","Meiryo",sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #e4a924;outline-offset:4px}button:disabled{opacity:.55;cursor:default}[hidden]{display:none!important}.app{max-width:1100px;padding:0 36px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:28px 0;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--green);display:flex;gap:10px;align-items:center;font-size:35px}.brand span{font-size:11px;line-height:1.5;letter-spacing:2px}.brand b{font-size:18px;letter-spacing:1px}.pill{border:1px solid #d5dfd2;border-radius:30px;padding:9px 16px;font-size:12px;color:var(--green)}.hero{display:flex;align-items:center;justify-content:space-between;padding:40px 35px 30px 10px}.eyebrow{font-size:13px;color:var(--green);font-weight:700;letter-spacing:2px}h1{font-size:39px;line-height:1.5;letter-spacing:1px;margin:12px 0}p{line-height:1.9}.hero p:last-child{color:var(--muted);font-size:14px}.mascot{position:relative;width:170px;height:155px;border-radius:50% 50% 42% 42%;background:var(--yellow);box-shadow:inset -12px -10px 0 #e6bb3e;transform:rotate(7deg);margin-right:35px}.mascot:before,.mascot:after{content:'';position:absolute;top:30px;left:-22px;width:40px;height:50px;border-radius:40px;background:var(--yellow);transform:rotate(-35deg)}.mascot:after{left:auto;right:-22px;transform:rotate(35deg)}.face{text-align:center;font-size:64px;padding-top:25px;color:#495039}.mascot span{position:absolute;bottom:-20px;right:-40px;background:var(--green);color:white;font-size:12px;padding:8px 15px;border-radius:20px;transform:rotate(-12deg)}.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:20px;background:#fff;margin:0 0 28px;padding:21px 0}.stats>div{text-align:center;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}.stats b{font-size:27px;color:var(--green)}.columns{display:grid;grid-template-columns:1.05fr 1fr;gap:22px}.card{background:#fff;border:1px solid var(--line);padding:26px;border-radius:23px}.section-title{display:flex;align-items:center;gap:12px;margin-bottom:20px}h2{font-size:18px;margin:0}.step{display:grid;place-items:center;background:#e5efe5;color:var(--green);width:34px;height:34px;border-radius:11px;font-size:13px;font-weight:bold}.yellow{background:#fff2bf;color:#9a7821}.peach{background:#fbe6d9;color:#ac6d44}.label,legend{display:block;font-size:13px;font-weight:bold;margin-bottom:10px}input,select{width:100%;border:1px solid #d6ded5;border-radius:12px;padding:12px;background:#fcfdf9;color:var(--ink)}input:focus,select:focus{outline:2px solid var(--green);outline-offset:2px}fieldset{border:0;padding:0;margin:22px 0}.choices{display:flex;gap:9px}.choices button{flex:1;border:1px solid var(--line);border-radius:12px;padding:13px 4px;background:white;color:var(--ink);font-size:14px}.choices button[aria-pressed=true]{border:2px solid var(--green);background:#edf5ec;color:var(--green);font-weight:bold;padding:12px 3px}.choices small{font-size:10px;display:block;color:var(--muted);margin-top:5px}.primary{border:0;background:var(--green);color:white;border-radius:13px;padding:16px 20px;font-weight:bold;font-size:16px;width:100%;box-shadow:0 4px 0 #104e40}.primary:hover{background:#105b49}.start{margin-top:16px;display:flex;justify-content:space-between}.under{text-align:center;color:var(--muted);font-size:11px;margin:14px 0 0}.note{font-size:11px;color:var(--muted);line-height:1.8}.muted{font-size:12px;color:var(--muted)}.side{display:grid;gap:22px;align-content:start}.stamps{display:flex;justify-content:space-between;gap:6px;margin:22px 0}.stamp{text-align:center;font-size:11px;color:var(--muted)}.stamp i{display:grid;place-items:center;font-style:normal;width:36px;height:36px;border:1px dashed #d9dfd4;border-radius:50%;font-size:22px;margin-top:8px;color:#d3dace}.stamp.done i{color:#b68c15;background:#fff2bd;border:1px solid #f0da8a}.stamp.today i{outline:2px solid var(--green);outline-offset:3px}.mission{font-size:13px;color:var(--green);background:#f1f6ec;padding:11px 14px;border-radius:10px}.ranking{padding:0;list-style:none;margin:12px 0}.ranking li{display:flex;gap:12px;align-items:center;font-size:13px;border-bottom:1px solid #edf0e9;padding:12px 0}.ranking li b{margin-left:auto;color:var(--green)}.rank-num{width:24px;font-weight:bold;color:#ad8b33}.empty{color:var(--muted);font-size:13px;padding:12px 0}.history{margin-top:23px}.history-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:12px}.history-row span{color:var(--muted)}footer{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:30px 0}.play{max-width:660px;margin:30px auto}.playtop,.play-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}.quiet{border:0;background:transparent;color:var(--green);padding:14px;font-size:13px}.progress{height:8px;background:#e1e8d9;border-radius:10px;margin:15px 0}.progress>div{height:100%;background:var(--green);border-radius:10px;transition:width .3s}.play-meta{margin-bottom:20px;color:var(--green)}.problem-card{background:white;border:1px solid var(--line);border-radius:25px;padding:25px 45px;text-align:center}.problem-card p{font-size:13px;color:var(--muted);margin:0}.problem-card h1{font-size:56px;margin:15px 0;font-variant-numeric:tabular-nums}.problem-card input{max-width:230px;text-align:center;font-size:34px;letter-spacing:3px;background:#f5f8ef;height:65px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px auto;max-width:330px}.keypad button{border:1px solid var(--line);border-bottom:3px solid #dce3d6;background:#f9faf5;border-radius:12px;padding:13px;font-size:24px;color:var(--ink)}.keypad button:last-child{font-size:14px}#feedback{min-height:35px;padding-top:12px;font-size:17px;font-weight:bold;color:var(--green)}#feedback.wrong{color:#9d6041}.result{max-width:700px;margin:30px auto;text-align:center;padding:40px}.result h1{font-size:27px}.result-star{font-size:70px;color:#dfb22b}.result .stats{margin-top:24px}.result .quiet{margin-top:14px}.result .primary{margin-top:20px}#review{font-size:13px;text-align:left}#review p{background:#fff5e9;border-radius:12px;padding:12px}.warning{background:#fff0d9;padding:15px;border-radius:12px;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#celebration{position:fixed;inset:0;pointer-events:none;overflow:hidden;display:grid;place-items:center;z-index:10}#celebration strong{background:#176b56ed;color:white;padding:25px 35px;border-radius:25px;font-size:27px;animation:pop 1.5s both}#celebration i{position:absolute;top:-30px;width:12px;height:18px;background:var(--yellow);animation:fall 1.6s ease-in forwards}@keyframes pop{0%{opacity:0;transform:scale(.7)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}@keyframes fall{to{transform:translateY(105vh) rotate(520deg)}}@media(max-width:700px){.app{padding:0 18px}header{padding:20px 0}.pill{font-size:10px;padding:7px 10px}.hero{padding:25px 0}.hero h1{font-size:27px}.hero p:last-child{font-size:12px}.mascot{width:95px;height:100px;margin-right:15px}.face{font-size:40px;padding-top:22px}.mascot span{font-size:9px;right:-15px;bottom:-8px}.mascot:before,.mascot:after{width:26px;left:-15px}.mascot:after{left:auto;right:-15px}.columns{grid-template-columns:1fr}.card{padding:21px}.stats{padding:17px 0}.stats span{font-size:10px}.stats b{font-size:23px}.problem-card{padding:25px 20px}.problem-card h1{font-size:46px}.playtop #course{max-width:130px;font-size:10px}.result{padding:24px 16px}.result h1{font-size:23px}.history-row{flex-wrap:wrap}footer{gap:15px;line-height:1.8}.stamps{justify-content:space-around}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#celebration i{display:none}}

 .subject-nav{display:flex;gap:.6rem;margin:1rem 0;flex-wrap:wrap}.subject{border:1px solid #cfe0d8;background:#fff;border-radius:999px;padding:.65rem 1rem;font-weight:700;color:#315b4f;cursor:pointer}.subject.active{background:#176b56;color:#fff;box-shadow:0 4px 12px #176b5633}.subject-intro{padding:1.2rem;border-radius:1rem;background:#fff7d6;color:#67551d;font-size:1.1rem}

/* WAKKO-style four-tab navigation: preserve the existing learning-game styling. */
.app{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.tab-panel{max-width:760px;margin:0 auto}
.tab-heading{margin:25px 0 18px}
.tab-heading h1{font-size:clamp(24px,5vw,30px);line-height:1.35;margin:0 0 5px}
.tab-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.home-actions{margin:0 auto 18px}
.home-actions h2{font-size:17px}
.home-actions p{font-size:13px;color:var(--muted);line-height:1.55;margin:7px 0 15px}
.home-actions .primary{box-shadow:none}
#study>.setup{max-width:720px;margin:0 auto 20px}
#study>.subject-nav{margin:14px 0 17px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
#study>.subject-nav .subject{min-width:0;padding:12px 3px;font-size:clamp(11px,2.7vw,14px)}
#study .start{margin-top:22px}
#records>.card,#rewards>.card{margin-bottom:16px}
#records .history{margin-top:0}
.record-filter{display:flex;gap:10px;align-items:center;justify-content:space-between;font-weight:700;font-size:13px;margin:0 0 14px}
.record-filter select{width:auto;min-width:140px;padding:10px}
.reward-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 15px}
.reward-summary>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center}
.reward-summary span,.reward-summary b{display:block}
.reward-summary span{color:var(--muted);font-size:12px}
.reward-summary b{color:var(--green);font-size:23px;margin-top:5px}
.bottom-nav{
 position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);
 width:min(760px,100%);box-sizing:border-box;
 --nav-height:max(70px,calc(54px + env(safe-area-inset-bottom)));
 --nav-pill-height:58px;
 --nav-bottom-gap:max(6px,calc(env(safe-area-inset-bottom) / 2 + 1px));
 --nav-top-gap:calc(var(--nav-height) - var(--nav-pill-height) - var(--nav-bottom-gap));
 height:var(--nav-height);padding:var(--nav-top-gap) 12px var(--nav-bottom-gap);
 background:var(--green);border:0;box-shadow:0 -2px 12px #104e4022;
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch
}
.bottom-nav::before{
 content:"";position:absolute;inset:var(--nav-top-gap) 12px var(--nav-bottom-gap);
 border-radius:999px;background:#eaf5ed;box-shadow:inset 0 0 0 1px #ffffffaa;
 pointer-events:none;z-index:0
}
.bottom-nav>.navLiquidIndicator{
 position:absolute;top:var(--nav-top-gap);bottom:var(--nav-bottom-gap);left:12px;
 width:calc(25% - 6px);border-radius:999px;background:#ffffffce;
 box-shadow:inset 0 0 0 1px #ffffffbb,0 1px 4px #104e4022;
 pointer-events:none;z-index:1;transform:translate3d(0,0,0);
 transform-origin:center center;will-change:transform
}
.bottom-nav>button{
 position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
 flex-direction:column;gap:2px;padding:3px 2px;margin:0;width:100%;min-width:0;
 border:0;border-radius:999px;background:transparent;box-shadow:none;
 color:#54816c;font-size:clamp(10px,2.6vw,11px);font-weight:650;line-height:1.15;
 -webkit-tap-highlight-color:transparent;transition:color 170ms ease
}
.bottom-nav>button svg{width:23px;height:23px;flex:none;transition:stroke-width 170ms ease}
.bottom-nav>button.active{color:#105b49;font-weight:750}
.bottom-nav>button.active svg{stroke-width:2.5}
.bottom-nav>button:active{background:transparent}
.bottom-nav>button:focus-visible{outline:2px solid #104e40;outline-offset:-3px}
#siteFooter{padding:12px 0 8px}
@media(max-width:700px){
 /* WAKKO matches ~88px including the iPhone bottom safe area; keep that height even when Safari reports inset 0. */
 .bottom-nav{--nav-height:max(88px,calc(54px + env(safe-area-inset-bottom)));--nav-bottom-gap:max(18px,calc(env(safe-area-inset-bottom) / 2 + 1px))}
 .app{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
 .tab-heading{margin:20px 0 15px}
 .tab-panel .hero{padding:16px 0 10px}
 .tab-panel .hero h1{font-size:clamp(21px,5.4vw,27px);line-height:1.4}
 .tab-panel .hero .mascot{margin-right:7px}
 .tab-panel .stats{margin-bottom:14px}
 .tab-panel .stats b{font-size:21px}
 .home-actions{padding:17px}
 .home-actions p{margin:6px 0 12px}
 .home-actions .primary{padding:13px}
 #study>.subject-nav{margin:10px 0 14px}
 #study>.setup{padding:18px}
 .record-filter{flex-wrap:wrap}
 .reward-summary b{font-size:21px}
 #siteFooter{display:none}
}
@media(prefers-reduced-motion:reduce){
 .bottom-nav>button,.bottom-nav>button svg{transition:none!important}
 .bottom-nav>.navLiquidIndicator{will-change:auto}
}

/* Learned-unit selector and readable grade-two question text. */
#study .choices{flex-wrap:wrap}
#study .choices button{min-width:90px;flex:1 1 27%}
.learning-scope{margin-top:16px;border:1px solid #dce8d9;background:#f7fbf6;border-radius:16px;padding:12px 14px}
.learning-scope summary{cursor:pointer;color:var(--green);font-weight:750;font-size:14px;line-height:1.7;list-style-position:outside}
.learning-scope summary #scopeCount{font-size:12px;color:var(--muted);font-weight:500}
.learning-scope .note{margin:8px 0 10px}
.unit-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}
.unit-option{display:flex;gap:9px;align-items:center;background:white;padding:10px;border:1px solid var(--line);border-radius:11px;font-size:13px;cursor:pointer}
.unit-option input{width:19px;height:19px;margin:0;accent-color:var(--green);flex:none}
.scope-subheading{font-size:13px;font-weight:700;margin:17px 0 9px}
.dan-picker,.kanji-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 13px}
.kanji-picker{grid-template-columns:repeat(8,minmax(0,1fr));max-height:250px;overflow-y:auto;padding:3px}
.scope-chip{min-height:42px;background:white;border:1px solid #cdded3;color:var(--ink);border-radius:10px;padding:7px 3px;font-size:13px}
.scope-chip.selected{background:var(--green);border-color:var(--green);color:white;font-weight:750}
.kanji-picker .scope-chip{font-size:18px}
.scope-status{margin:12px 0 0;color:var(--green);font-size:13px;line-height:1.6;font-weight:700}
.problem-card.text-problem #problem{font-size:clamp(18px,4vw,24px);line-height:1.85;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:0}
.problem-card.text-problem .keypad{max-width:100%;grid-template-columns:1fr;gap:10px}
.problem-card.text-problem .keypad button{font-size:17px;line-height:1.5;min-height:48px;padding:12px}
.problem-card.text-problem #answer{display:none}
.explanation{margin:8px 0 12px!important;background:#edf5ec;border-radius:9px;padding:9px 11px;font-size:13px!important;line-height:1.6!important;color:var(--ink)!important;text-align:left}
@media(max-width:700px){
 .unit-picker{grid-template-columns:1fr}
 .kanji-picker{grid-template-columns:repeat(6,minmax(0,1fr))}
 .learning-scope{padding:12px}
 .problem-card.text-problem #problem{font-size:18px}
 .problem-card.text-problem .keypad button{font-size:15px}
}

/* Focused quiz: keep the exit and answer/next controls visible.
   Only the question body scrolls when a reading passage is long. */
#play.play:not([hidden]){
 position:fixed;inset:0;z-index:30;
 margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 16px max(10px,env(safe-area-inset-bottom));
 max-width:760px;width:100%;height:100vh;height:100dvh;
 display:flex;flex-direction:column;gap:9px;
 background:var(--cream);box-sizing:border-box;overflow:hidden;
}
#play .playtop{flex:0 0 auto;min-height:39px;gap:8px}
#play .playtop #quit{flex:0 0 auto;min-height:40px;min-width:118px;padding:8px 5px;text-align:left;font-weight:700}
#play .playtop #course{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;flex:1}
#play .playtop #progressText{flex:0 0 auto;white-space:nowrap;font-weight:700}
#play .progress{flex:0 0 auto;margin:0;height:7px}
#play .play-meta{flex:0 0 auto;min-height:29px;margin:0}
#play .problem-card{
 flex:1 1 auto;min-height:0;margin:0;padding:17px 18px;
 overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;
 display:flex;flex-direction:column;align-items:stretch;
}
#play .problem-card #encourage{font-size:13px;line-height:1.3}
#play .problem-card #problem{margin:12px 0 14px}
#play #answerForm{min-height:0}
#play .play-actions{flex:0 0 auto;padding:5px 0 0;min-height:57px}
#play .play-actions .primary{min-height:51px;box-shadow:none;margin:0;font-size:16px;touch-action:manipulation}
#play .play-actions .primary[hidden]{display:none!important}
#play #feedback{min-height:32px;font-size:15px;padding:8px 0 0;line-height:1.5}
#play .explanation{flex:none}
#play.numeric-play .problem-card{justify-content:center}
#play.numeric-play .problem-card #problem{font-size:clamp(35px,8vw,49px);line-height:1.2;margin:8px 0 10px}
#play.numeric-play .problem-card #encourage{flex:0 0 auto}
#play.numeric-play .problem-card #answer{height:53px;max-width:180px;font-size:30px;padding:7px}
#play.numeric-play .problem-card .keypad{margin:12px auto 7px;gap:7px;max-width:300px}
#play.numeric-play .problem-card .keypad button{font-size:23px;padding:5px;min-height:47px;border-bottom-width:2px}
#play.numeric-play .problem-card .keypad button:last-child{font-size:15px}
#play .problem-card.text-problem #problem{margin:9px 0 12px;font-size:clamp(18px,4vw,22px);line-height:1.65}
#play .problem-card.text-problem .keypad{margin:12px 0;gap:8px}
#play .problem-card.text-problem .keypad button{font-size:clamp(15px,3.5vw,17px);min-height:48px}
.kanji-toolbar{display:flex;gap:8px;margin:10px 0}
.kanji-toolbar button{flex:1;border:1px solid var(--line);background:white;color:var(--green);border-radius:10px;padding:9px 4px;font-size:12px;font-weight:700}
.kanji-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 14px}
.kanji-group{font-size:12px;min-height:45px}
#kanjiFineDetails{border-top:1px solid var(--line);padding-top:10px}
#kanjiFineDetails summary{font-size:13px}
@media(max-width:700px){
 #play.play:not([hidden]){padding-left:12px;padding-right:12px;gap:7px}
 #play .problem-card{padding:13px 14px}
 #play.numeric-play .problem-card #problem{font-size:40px}
 #play.numeric-play .problem-card .keypad{gap:6px}
 #play.numeric-play .problem-card .keypad button{min-height:43px;padding:4px}
 #play .play-actions{min-height:54px}
 #play .play-actions .primary{min-height:49px}
 #play .problem-card.text-problem #problem{font-size:18px}
}
@media(max-height:690px){
 #play.play:not([hidden]){gap:5px}
 #play .problem-card{padding-top:10px;padding-bottom:10px}
 #play .play-meta{min-height:21px}
 #play.numeric-play .problem-card #problem{font-size:34px;margin:4px 0}
 #play.numeric-play .problem-card #answer{height:42px;font-size:26px}
 #play.numeric-play .problem-card .keypad{margin:6px auto 4px;gap:4px}
 #play.numeric-play .problem-card .keypad button{min-height:38px;padding:3px}
 #play .play-actions .primary{min-height:44px}
}

/* Keep existing streak/congratulations effects visible above the focused quiz. */
#celebration{z-index:50}
#play.numeric-play .problem-card{justify-content:safe center}

/* Disable accidental viewport scaling/dragging while preserving scrollable study setup and long passages. */
html{touch-action:pan-x pan-y}
button,.primary,.subject,.scope-chip,.bottom-nav{touch-action:manipulation}
body{overflow-x:hidden}
body.quiz-active{height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:auto}
body.quiz-active .problem-card{touch-action:pan-y}
body.quiz-active #play button{touch-action:manipulation}
#play .answer-flash:not([hidden]){
 position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
 padding:calc(20px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));
 background:rgba(17,42,33,.38);pointer-events:none;text-align:center;
}
.answer-flash-card{
 width:min(100%,440px);border-radius:28px;padding:27px 20px;
 background:#fff;border:4px solid #3fa978;
 box-shadow:0 16px 60px rgba(0,0,0,.22);color:#145d42;
 animation:answer-pop .22s ease-out;
}
.answer-flash.correct .answer-flash-card{background:#effff2;border-color:#259967;color:#166346}
.answer-flash.incorrect .answer-flash-card{background:#fff6ed;border-color:#dc754b;color:#893a20}
.answer-flash-symbol{display:block;font-size:clamp(82px,16vw,110px);font-weight:900;line-height:1}
.answer-flash-card strong{display:block;font-size:clamp(32px,8vw,42px);line-height:1.4;margin:2px 0 8px}
.answer-flash-card p{margin:7px 0;font-size:clamp(16px,4.2vw,21px);line-height:1.55;color:inherit;font-weight:700;overflow-wrap:anywhere}
.answer-flash-card .answer-flash-hint{font-weight:500;font-size:13px;opacity:.8;margin-top:17px}
@keyframes answer-pop{from{transform:scale(.88);opacity:.5}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.answer-flash-card{animation:none}}
#play .sound-toggle{
 flex:none;min-width:40px;min-height:40px;border:0;border-radius:12px;
 background:#fff;color:var(--green);font-size:22px;padding:4px;
}
#play .playtop #quit{min-width:0}
#play .playtop #course{max-width:none}
@media(max-width:700px){
 #play.play:not([hidden]){padding-top:max(10px,env(safe-area-inset-top))}
 #play .playtop{gap:4px;font-size:11px}
 #play .playtop #quit{font-size:11px;padding-left:3px;padding-right:3px}
 #play .sound-toggle{min-width:36px;min-height:38px;font-size:20px}
 #play .playtop #progressText{font-size:11px}
 #play .answer-flash:not([hidden]){padding-left:15px;padding-right:15px}
}

/* Study record backup actions */
.backup-panel{margin:0 0 16px;padding:18px}
.backup-panel h2{font-size:17px;margin:0 0 8px}
.backup-panel p{font-size:13px;line-height:1.6;color:var(--muted)}
.backup-actions{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0 9px}
.backup-actions button{flex:1 1 160px;background:#fff;color:var(--green);border:1px solid var(--green);border-radius:12px;min-height:46px;font-weight:700;padding:10px}
#backupStatus{color:var(--green);min-height:1.5em;white-space:pre-wrap}