*{box-sizing:border-box}body{margin:0;background:#f6eedb;color:#153951;font-family:'Zen Maru Gothic',sans-serif}.duration-page{max-width:1320px;margin:auto;padding:18px 16px 30px}.duration-page>h1,.duration-page>p{text-align:center;margin:8px}.duration-shop{position:relative;container-type:inline-size;isolation:isolate;width:100%;aspect-ratio:16/9;border:3px solid #855930;border-radius:12px;overflow:hidden;background:#f5e5c5 url('./assets/shop.webp') center/100% 100%;font-weight:700}.duration-shop [hidden]{display:none!important}.duration-shop button,.duration-shop input{font:inherit}.duration-shop button{cursor:pointer;color:#153951;background:#fff2cc;border:2px solid #976b37;border-radius:9px;box-shadow:0 3px 0 #72502c55;padding:.5em .7em;line-height:1.25;touch-action:manipulation}.duration-shop button:hover{background:#ffe3a0}.duration-shop button:focus-visible{outline:4px solid #1d8392;outline-offset:2px}.duration-shop button:disabled{opacity:.45;cursor:default}.duration-shop button.primary{background:#f5bd3c;border-color:#86622a}.shop-base{height:100%;display:flex;flex-direction:column}.shop-tools{height:10%;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.5% 3%;font-size:clamp(11px,1.05cqw,20px);background:#ffefcbdd}.shop-tools>strong{font-size:1.55em;white-space:nowrap}.shop-tools>div{display:flex;gap:5px}.shop-tools button{white-space:nowrap}.shop-cover{flex:1;min-height:0;display:grid;grid-template-columns:55% 45%;padding:2% 5% 4%;gap:3%}.cover-art{position:relative;min-height:0}.clock{position:relative;min-height:0;min-width:0}.clock svg{width:100%;height:100%;display:block;overflow:visible}.cover-art>.clock{position:absolute;inset:0 0 4% 4%}.cover-art>img{position:absolute;left:-3%;bottom:-2%;width:34%;height:50%;object-fit:contain}.cover-copy{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:clamp(14px,1.8cqw,32px);padding-right:3%}.cover-copy h2{font-size:clamp(35px,5.2cqw,92px);line-height:1.22;margin:.2em 0;color:#143b53}.cover-copy p{line-height:1.6;margin:.4em 0}.cover-copy .eyebrow{font-size:.72em}.cover-copy .small{font-size:.8em}.courses{display:flex;gap:5%;width:100%;margin:.5em 0}.courses button{flex:1;white-space:nowrap;font-size:.86em;padding:.55em .2em}.courses [aria-pressed=true]{background:#f5bd3c;outline:3px solid #244d62}.cover-copy #start{width:100%;font-size:1.35em;margin:.4em 0}.game{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 6% 3%;gap:1%}.game-status{display:flex;justify-content:space-between;align-items:center;min-height:30px;height:7%;flex:none;font-size:clamp(13px,1.8cqw,32px);padding:0 5%}.game-status>span{white-space:nowrap}.game-status #progress{display:flex;gap:7px}.game-status #progress i{width:clamp(7px,1cqw,18px);aspect-ratio:1;border:2px solid #32576c;background:#f6edda;border-radius:50%;display:block}.game-status #progress i.done{background:#f6bc3b}.game-status #progress i.current{outline:2px solid #bd5b31;outline-offset:2px}.clock-pair{display:grid;grid-template-columns:43% 14% 43%;min-height:0;flex:1;gap:0}.clock-block{display:flex;flex-direction:column;min-height:0;min-width:0;text-align:center}.clock-block h3{flex:none;font-size:clamp(17px,2.2cqw,40px);margin:0;line-height:1.3}.clock-block .clock{flex:1;min-height:0}.time-read{flex:none;height:1.5em;font-size:clamp(12px,1.6cqw,29px);margin:0;line-height:1.5;visibility:hidden}.time-read.show{visibility:visible}.between{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3%;min-width:0;font-size:clamp(12px,1.5cqw,28px)}.between .arrow{font-size:3em;line-height:1}.between strong{font-size:1.8em;color:#9e4928;white-space:nowrap;min-height:1.3em}.between button{font-size:.7em;padding:.45em .2em;width:100%}.answers{height:17%;min-height:65px;flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:3%;padding:1% 2%}.answers button{font-size:clamp(22px,3.8cqw,65px);padding:.2em}.explanation{height:23%;min-height:95px;flex:none;display:grid;grid-template-columns:29% 48% 23%;align-items:center;gap:1%;padding:1% 2%;background:#fff4dce8;border:2px solid #d1a467;border-radius:10px;font-size:clamp(12px,1.35cqw,24px)}.explanation strong{font-size:1.65em;color:#217453}.explanation strong.wrong{color:#a24326}.explanation p{font-size:.9em;line-height:1.45;margin:.35em 0}.hops{display:flex;flex-wrap:wrap;gap:5px;align-content:center;justify-content:center}.hops span{display:grid;place-items:center;width:clamp(24px,2.5cqw,44px);height:clamp(24px,2.5cqw,44px);border-radius:50%;background:#f4bd40;border:1px solid #c98d1d;font-size:.88em}.explanation button{font-size:1.1em;margin:0 5%}.result{height:27%;min-height:135px;flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:5px}.review{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}.review button{font-size:clamp(12px,1.7cqw,30px);padding:.15em;border-radius:5px}.review button span{display:block;font-size:.65em;color:#227553}.review button span.wrong{color:#ac4d2c}.review button[aria-pressed=true]{outline:3px solid #174d67;background:#ffd474}.result p{font-size:clamp(11px,1.25cqw,23px);text-align:center;margin:0;line-height:1.4}.result-actions{display:flex;justify-content:center;gap:3%;font-size:clamp(13px,1.8cqw,32px)}.result-actions button{width:40%;padding:.3em}.game #resultTitle{font-size:clamp(18px,2.5cqw,44px);margin:0;text-align:center;flex:none}.shop-dialog{position:absolute;inset:0;z-index:10;background:#173b51c9;display:grid;place-items:center;grid-template-rows:minmax(0,1fr);padding:4%;font-size:clamp(14px,1.6cqw,29px)}.dialog-card{width:min(800px,95%);max-height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:3%;background:#fff1d2;border:5px solid #b9864c;border-radius:15px}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none}.dialog-top h2{font-size:1.6em;margin:0}.dialog-card>div:not(.dialog-top){overflow:auto;min-height:0;line-height:1.7}.dialog-card p{margin:.65em 0}.dialog-card button{margin:.4em .2em .4em 0}.dialog-card label{display:block;margin-top:1em}.dialog-card input{display:block;width:90%;accent-color:#b27128;margin:.5em 0 1em}.sound-row{display:flex;gap:4%}.pause-art{width:25%;max-height:190px;object-fit:contain;display:block;margin:auto}#pausePanel{text-align:center}.duration-parent{font-size:13px;line-height:1.8;color:#645d4c;padding:15px 0}.duration-shop>audio{display:none}.duration-shop:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}@media(max-width:600px) and (orientation:portrait){.duration-page{padding:12px 8px}.duration-page>h1{font-size:25px}.duration-shop{height:max(700px,100svh);aspect-ratio:auto;background-size:auto 100%;background-position:center}.shop-tools{height:118px;min-height:0;flex:none;flex-direction:column;justify-content:center;padding:5px;gap:4px;font-size:11px}.shop-tools>strong{font-size:20px}.shop-tools>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:3px}.shop-tools button{min-height:37px;padding:3px 2px}.shop-tools button:last-child{grid-column:span 2}.shop-cover{display:flex;flex-direction:column;padding:0 7% 6%;gap:0}.cover-art{height:43%;flex:none}.cover-art>.clock{inset:0 8%}.cover-art>img{height:63%;width:40%;bottom:0;left:0}.cover-copy{flex:1;padding:0;font-size:16px}.cover-copy h2{font-size:39px;line-height:1.1;margin:.15em 0}.cover-copy h2 br{display:none}.cover-copy p{margin:.25em 0}.courses{margin:.6em 0;gap:12px}.courses button{font-size:15px;padding:10px 3px}.cover-copy #start{font-size:23px;margin:.2em 0;padding:10px}.game{padding:3px 8px 10px;gap:6px}.game-status{height:35px;min-height:35px;font-size:14px;padding:0}.game-status #progress{gap:3px}.game-status #progress i{width:7px;border-width:1px}.clock-pair{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 45px;min-height:250px;gap:3px}.clock-block{grid-row:1;justify-content:center}.clock-block:last-child{grid-column:2}.clock-block h3{font-size:20px}.clock-block .clock{flex:0 1 auto;width:100%;aspect-ratio:1;max-height:270px}.time-read{font-size:13px;height:20px}.between{grid-row:2;grid-column:1/-1;display:flex;flex-direction:row;gap:8px;font-size:13px;align-items:center}.between .arrow{font-size:30px}.between strong{font-size:20px;min-height:0}.between button{width:auto;font-size:11px;min-height:34px;padding:3px 6px}.answers{height:105px;min-height:90px;padding:8px 0;gap:7px}.answers button{font-size:22px;padding:5px 2px}.explanation{height:210px;min-height:180px;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 42px;gap:6px;padding:10px;font-size:13px}.explanation>div:first-child{grid-column:1/-1;text-align:center}.explanation strong{font-size:22px}.explanation p{font-size:13px;margin:3px 0}.explanation .hops{grid-column:1/-1}.hops span{width:25px;height:25px;font-size:12px}.explanation button{grid-column:1/-1;margin:0;font-size:17px;padding:6px}.result{height:210px;min-height:195px;gap:6px}.review{grid-template-columns:repeat(5,1fr);gap:5px}.review button{font-size:17px;min-height:43px}.result p{font-size:12px}.result-actions{font-size:13px;gap:7px}.result-actions button{width:50%;padding:8px 3px}.game #resultTitle{font-size:20px}.shop-dialog{padding:10px;font-size:15px}.dialog-card{width:100%;padding:12px;border-width:3px}.dialog-top h2{font-size:23px}.dialog-card p{font-size:14px}.pause-art{width:40%;max-height:190px}.sound-row{display:block}.duration-shop:fullscreen{height:100dvh;min-height:700px}}@media(max-height:500px) and (orientation:landscape){.shop-tools{height:12%;font-size:9px;min-height:32px;padding:2px 3%}.shop-tools>strong{font-size:15px}.shop-tools button{padding:4px}.game{padding-bottom:2%}.game-status{font-size:13px;min-height:23px;height:8%}.clock-block h3{font-size:16px}.time-read{font-size:11px}.between{font-size:11px}.between .arrow{font-size:28px}.between strong{font-size:20px}.answers{min-height:48px;height:18%;padding:3px 2%}.answers button{font-size:25px}.explanation{min-height:75px;height:25%;font-size:10px;padding:4px 6px}.explanation strong{font-size:17px}.hops{gap:3px}.hops span{width:23px;height:23px;font-size:10px}.result{min-height:93px;height:29%;gap:2px}.review button{font-size:14px}.result p{font-size:10px}.result-actions{font-size:12px}.game #resultTitle{font-size:17px}.shop-dialog{font-size:13px}.dialog-card{padding:8px}.pause-art{max-height:85px}.dialog-top h2{font-size:20px}.cover-copy{font-size:13px}.cover-copy h2{font-size:36px}.cover-copy #start{font-size:20px}.courses button{font-size:12px}}
/* Keep clocks fixed while switching between choices and explanation. */
.game-status{background:#fff1d2ed;border-radius:10px;padding:0 3%}.answers{height:23%;min-height:95px}@media(max-width:600px) and (orientation:portrait){.answers{height:210px;min-height:180px}}@media(max-height:500px) and (orientation:landscape){.answers{height:25%;min-height:75px}}

@media(max-width:600px) and (orientation:portrait){.clock-pair{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 32px minmax(0,1fr);min-height:360px;gap:0}.clock-block{display:grid;grid-template-columns:30% 70%;grid-template-rows:1fr 1fr;grid-column:1;grid-row:1;text-align:center}.clock-block:last-child{grid-column:1;grid-row:3}.clock-block h3{grid-column:1;grid-row:1;align-self:end;margin-bottom:8px}.clock-block .clock{grid-column:2;grid-row:1/3;aspect-ratio:auto;width:100%;height:100%;max-height:none}.clock-block .time-read{grid-column:1;grid-row:2;align-self:start;font-size:12px;line-height:1.6;height:auto}.between{grid-column:1;grid-row:2;font-size:12px;gap:8px}.between .arrow{transform:rotate(90deg);font-size:25px}.between strong{font-size:20px}.answers,.explanation{height:190px;min-height:190px}.explanation{grid-template-rows:auto auto 40px;padding:8px;gap:3px}.explanation p{font-size:12px}.hops span{width:24px;height:24px}.result{height:200px;min-height:200px}.game #resultTitle{font-size:17px}}
@media(max-width:600px) and (orientation:portrait) and (max-height:740px){.clock-pair{min-height:290px}.answers,.explanation{height:170px;min-height:170px}.game-status{height:28px;min-height:28px}.result{height:175px;min-height:175px}.review button{min-height:35px}}

.cover-copy .small,.result p{background:#fff1d5ed;border-radius:6px;padding:.2em .5em}@media(max-width:600px) and (orientation:portrait){.cover-copy h2 br{display:initial}}