:root{--paper:#f7f5ef;--ink:#16313e;--muted:#667b80;--line:#dfe6df;--panel:#fffefa;--mint:#a8e9d0;--aqua:#d6f3eb;--coral:#fa9776;--lav:#e4dafa;--sun:#f7dc86;--shadow:0 20px 54px rgba(24,48,57,.085);color-scheme:light;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',system-ui,sans-serif;font-synthesis:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}html{height:100%;background:var(--paper)}body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #2b9c8c;outline-offset:3px}svg{display:block;max-width:100%}[hidden]{display:none!important}
.app-shell{min-height:100vh;min-height:100dvh;max-width:1180px;margin:auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px,env(safe-area-inset-left))}
.topbar{flex-shrink:0;height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:12px}.brand{border:0;background:none;display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:900;font-size:21px;padding:5px 0;letter-spacing:.025em}.brand-logo{width:36px;height:36px;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(16,56,54,.10))}.brand small{font-size:9px;letter-spacing:.22em;font-weight:800;color:var(--muted);margin:6px 0 0 2px}.top-actions{display:flex;gap:8px;align-items:center}.version{font:700 11px/1.2 ui-monospace,monospace;color:#93a19f;margin-right:12px}.icon-btn{width:37px;height:37px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);border-radius:12px;color:var(--ink);font-size:19px}.icon-btn:hover,.button-secondary:hover{background:#eaf2eb}
#main{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.site-footer{margin-top:auto;min-height:42px;padding:12px 1px 6px;color:#849390;display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.025em;border-top:1px solid var(--line)}
.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:900;color:#549282;text-transform:uppercase;margin:0}.muted{color:var(--muted)}.section-title{font-weight:900;font-size:clamp(23px,4vw,31px);letter-spacing:-.04em;margin:7px 0 9px}.lead{color:var(--muted);line-height:1.9;font-size:14px;margin:0}.button{border:0;border-radius:16px;min-height:52px;padding:13px 20px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .13s,background .13s;line-height:1.35}.button:active{transform:translateY(1px) scale(.99)}.button-primary{background:var(--ink);color:white;box-shadow:0 8px 17px rgba(22,49,62,.14)}.button-primary:hover{background:#265264}.button-coral{background:var(--coral);color:#29343a}.button-coral:hover{background:#ffa98c}.button-secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}.button-ghost{background:transparent;color:var(--muted);font-weight:800}.button-block{width:100%}.btn-small{min-height:39px;padding:9px 13px;font-size:12px;border-radius:12px}.chip{font-size:11px;font-weight:900;letter-spacing:.05em;color:#438878;padding:7px 11px;background:#e5f4e9;border-radius:99px;display:inline-flex;align-items:center;gap:6px}.card{background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 9px 30px rgba(20,50,57,.035)}
.home-wrap{width:100%;margin:auto;padding:28px 0 34px;display:grid;grid-template-columns:minmax(0,1.13fr) minmax(280px,.87fr);gap:22px;align-items:stretch}.hero{position:relative;border-radius:30px;min-height:495px;background:var(--ink);color:#fff;padding:36px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.hero .eyebrow{color:#a1e5d2}.hero h1{font-size:clamp(48px,6.3vw,79px);line-height:1.1;letter-spacing:-.08em;margin:18px 0 12px;font-weight:950;position:relative;z-index:1}.hero h1 span{color:var(--mint)}.hero-text{max-width:390px;color:#c8d9d8;font-size:15px;line-height:1.8;position:relative;z-index:1}.hero .hero-bottom{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.hero-note{font-size:12px;color:#adcac9}.hero-art{position:absolute;top:36px;right:-25px;width:340px;height:350px;opacity:.9;pointer-events:none}.circle-art{position:absolute;border:2px solid rgba(167,238,212,.23);border-radius:50%}.circle-art.one{width:260px;height:260px;top:0;right:0}.circle-art.two{width:170px;height:170px;top:50px;right:50px}.art-line{position:absolute;width:140px;height:5px;background:var(--coral);border-radius:99px;top:130px;right:114px;transform:rotate(-38deg);transform-origin:right}.art-dot{position:absolute;width:45px;height:45px;border-radius:50%;background:var(--mint);top:115px;right:94px;box-shadow:0 0 0 12px rgba(167,238,212,.1)}.art-mini{position:absolute;right:64px;top:260px;color:#a5e7d0;font-size:45px;transform:rotate(-13deg)}
.home-side{display:flex;flex-direction:column;gap:16px}.today-panel{padding:26px;flex:1}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.today-date{font-weight:900;font-size:12px;color:#64817e}.today-panel h2{margin:18px 0 8px;font-size:25px;letter-spacing:-.04em}.today-panel p{margin:0 0 20px;font-size:13px;line-height:1.8;color:var(--muted)}.today-score{display:flex;align-items:baseline;gap:8px;margin:8px 0 18px}.today-score strong{font-size:64px;line-height:1;font-weight:950;letter-spacing:-.06em}.today-score span{font-size:13px;color:var(--muted);font-weight:900}.mode-list{display:grid;gap:10px}.mode-row{width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;min-height:74px;display:flex;align-items:center;gap:14px;padding:13px 16px;color:var(--ink)}.mode-row:hover{border-color:#9bcec0;background:#fafffc}.mode-emoji{width:43px;height:43px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:#ecf6ef;font-size:22px}.mode-row span:last-of-type{flex:1}.mode-row strong{display:block;font-size:14px}.mode-row small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.arrow{font-size:22px;color:#839993}.bottom-caption{font-size:11px;color:#879b95;line-height:1.6;text-align:center}
/* Game layout: one control viewport in portrait and landscape. */
.game-wrap{flex:1;min-height:0;display:flex;flex-direction:column;width:min(100%,940px);margin:0 auto;padding:15px 0 14px}.game-top{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.back-link{background:none;border:0;color:var(--muted);font-size:12px;font-weight:900;padding:7px 4px}.progress{display:flex;gap:6px;align-items:center}.progress span{width:29px;height:7px;border-radius:99px;background:#dfe6dc}.progress span.done{background:#77bea9}.progress span.active{background:var(--coral);width:38px}.game-label{font-size:11px;color:var(--muted);font-weight:900;letter-spacing:.05em}.game-heading{text-align:center;flex-shrink:0;margin:5px 0 9px}.round-name{font-size:11px;color:#649b8d;font-weight:900;letter-spacing:.2em;margin:0}.game-heading h1{font-size:clamp(19px,3vw,26px);font-weight:950;line-height:1.35;margin:5px 0 4px;letter-spacing:-.05em}.game-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.game-board-card{position:relative;flex:1;min-height:175px;max-height:365px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:25px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}.board-stage{width:100%;flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#fffefa 10%,#f5faf5 100%)}.board-stage svg{width:100%;height:100%;max-height:355px;touch-action:none;user-select:none;-webkit-user-select:none}.board-stage.interactive{cursor:crosshair}.board-corner{position:absolute;top:12px;left:15px;font-size:10px;color:#85a09a;font-weight:900;letter-spacing:.1em;pointer-events:none}.board-caption{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11px;color:#688a81;font-weight:800;pointer-events:none}.target-pill{display:inline-flex;justify-content:center;gap:8px;align-items:center;background:#e6f1e8;border-radius:99px;padding:5px 13px;font-size:12px;font-weight:900;color:#3b8270;margin-bottom:2px}.question-target{color:#205e55}.control-tray{flex-shrink:0;min-height:90px;padding:13px 0 2px;display:flex;flex-direction:column;justify-content:center;gap:8px}.control-tray .button{min-height:54px;font-size:16px}.control-text{text-align:center;color:var(--muted);font-size:11px;line-height:1.6;margin:0}.inline-controls{display:flex;align-items:center;justify-content:center;gap:9px}.inline-controls .button-primary,.inline-controls .button-coral{flex:1}.mini-control{padding:9px 13px;min-height:44px;border:1px solid var(--line);border-radius:13px;background:white;font-weight:900;color:var(--ink)}.range-row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;font-size:12px;font-weight:900;color:#486b67}.range-pair{display:grid;gap:8px}.range-row input{width:100%;accent-color:#559e8f;touch-action:pan-x;height:23px}.area-controls{display:grid;grid-template-columns:1fr minmax(115px,.45fr);gap:14px;align-items:center}.area-controls .button{min-height:62px}.hint{min-height:18px;font-size:11px;color:#84978e;line-height:1.5;text-align:center}
.svg-label{font:900 15px/1 system-ui,sans-serif;fill:#688983}.svg-big{font:900 28px/1 system-ui,sans-serif;fill:#194f49}.svg-number{font:950 42px/1 system-ui,sans-serif;fill:#173b40}.board-svg text{user-select:none}.clock-glow{animation:float 3s ease-in-out infinite}.clock-running{animation:pulse 1s ease-in-out infinite}.result-wrap{width:100%;max-width:760px;margin:0 auto;padding:25px 0 30px;display:flex;flex-direction:column;gap:16px}.result-hero{background:var(--ink);border-radius:27px;padding:28px;color:#fff;position:relative;overflow:hidden}.result-hero:after{content:'✺';position:absolute;right:34px;top:8px;font-size:130px;opacity:.08;transform:rotate(25deg)}.result-hero .eyebrow{color:var(--mint)}.result-hero h1{margin:13px 0 3px;font-size:clamp(24px,5vw,38px)}.big-score{font-size:clamp(68px,13vw,108px);font-weight:950;letter-spacing:-.09em;line-height:1.1}.big-score small{font-size:17px;letter-spacing:0;margin-left:9px;color:#bfd0cb}.score-sticks{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:17px}.score-sticks span{height:10px;border-radius:40px;background:#658276;overflow:hidden}.score-sticks i{display:block;height:100%;background:var(--mint);border-radius:inherit}.result-table{background:#fff;border:1px solid var(--line);border-radius:21px;padding:7px 17px}.result-row{display:grid;grid-template-columns:28px 70px minmax(0,1fr) 48px;gap:9px;align-items:center;padding:11px 2px;border-bottom:1px solid #edf0e9}.result-row:last-child{border-bottom:none}.result-row .e{font-size:23px;text-align:center}.result-row .n{font-weight:900;font-size:13px}.result-row .detail{font-size:11px;color:var(--muted)}.result-row strong{text-align:right;font-size:19px}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.result-actions .button{min-height:46px;font-size:12px}.insight-box{padding:17px 19px}.insight-box h3{margin:0 0 6px;font-size:15px}.insight-box p{color:var(--muted);font-size:12px;line-height:1.85;margin:0}.result-banner{font-size:12px;color:#387668;background:#e8f3e9;border-radius:12px;padding:11px 15px;line-height:1.65}.battle-box{padding:25px;display:flex;flex-direction:column;gap:14px;max-width:510px;margin:auto;align-items:stretch;text-align:center}.battle-box .big-score{font-size:70px}.battle-box h1{margin:0}.compare{display:flex;gap:15px;justify-content:center}.compare span{padding:14px;background:#e6f0e8;border-radius:12px;font-weight:900}
.stats-wrap{max-width:850px;width:100%;margin:0 auto;padding:24px 0 32px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.metric{padding:22px 12px;text-align:center}.metric strong{display:block;font-size:32px}.metric span{color:var(--muted);font-size:11px}.stats-panel{padding:22px;margin-bottom:14px}.stats-panel h2{font-size:17px;margin:0 0 16px}.stat-row{display:grid;grid-template-columns:62px 1fr 110px;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.stat-row:last-child{border:0}.stat-row strong{font-size:13px}.meter{height:10px;background:#e7eae3;border-radius:99px;overflow:hidden}.meter span{display:block;height:100%;background:#7ec1af;border-radius:99px}.history-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0;font-size:12px}.history-row:last-child{border-bottom:0}.history-row strong{font-size:14px}.empty-state{text-align:center;padding:24px;color:var(--muted);font-size:13px}
.modal-backdrop{position:fixed;z-index:30;inset:0;background:rgba(14,35,40,.55);display:flex;justify-content:center;align-items:center;padding:16px;backdrop-filter:blur(5px)}.modal-card{background:var(--paper);width:min(100%,510px);max-height:min(90dvh,750px);overflow:auto;border-radius:25px;padding:25px;box-shadow:0 22px 75px #0d283844}.modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-top h2{margin:0;font-size:23px}.guide-item{display:flex;gap:14px;align-items:flex-start;border-bottom:1px solid var(--line);padding:11px 0}.guide-symbol{flex-shrink:0;width:38px;height:38px;border-radius:13px;background:#e4efea;display:grid;place-items:center;font-weight:900;font-size:20px}.guide-item strong{font-size:14px}.guide-item p{font-size:12px;color:var(--muted);line-height:1.7;margin:4px 0 0}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid var(--line);padding:18px 0;font-weight:800;font-size:14px}.switch{width:46px;height:27px;accent-color:#347e69}.info-text{font-size:12px;line-height:1.8;color:var(--muted)}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.modal-actions .button{flex:1}.reward-card{width:min(94vw,420px);border-radius:26px;background:#fffdf6;text-align:center;padding:30px;box-shadow:0 24px 65px #08192755}.reward-card h2{margin:7px 0}.reward-card p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.75}.ad-icon{font-size:72px;color:#e4ad66}.ad-loading{height:7px;background:#f5e6cf;border-radius:15px;overflow:hidden;margin:22px 0}.ad-loading span{height:100%;background:var(--coral);display:block;width:0;animation:load-mock 1.6s linear forwards}.toast{position:fixed;z-index:50;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,120px);opacity:0;transition:transform .2s,opacity .2s;background:#17333c;color:white;font-size:12px;font-weight:800;padding:12px 18px;max-width:min(90vw,500px);border-radius:13px;box-shadow:var(--shadow);pointer-events:none;text-align:center;line-height:1.6}.toast.show{transform:translate(-50%,0);opacity:1}
.large-text{font-size:110%}.large-text .game-heading p,.large-text .control-text,.large-text .game-label,.large-text .hint{font-size:13px}.large-text .guide-item p{font-size:14px}
@keyframes float{50%{transform:translateY(-7px)}}@keyframes pulse{50%{opacity:.72;transform:scale(.96)}}@keyframes load-mock{to{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.reduced-motion *, .reduced-motion *:before,.reduced-motion *:after{animation:none!important;transition:none!important}
@media(max-width:720px){.topbar{height:56px}.version{display:none}.site-footer{font-size:9px;min-height:35px}.home-wrap{grid-template-columns:1fr;gap:13px;padding:16px 0 23px}.hero{min-height:275px;padding:23px;border-radius:22px}.hero h1{font-size:clamp(45px,11vw,66px);margin:12px 0 6px}.hero-text{font-size:12px;max-width:270px;margin-bottom:12px}.hero-art{width:245px;transform:scale(.7);transform-origin:top right}.hero-bottom .button{min-height:45px;font-size:13px}.today-panel{padding:19px}.today-panel h2{font-size:21px;margin-top:12px}.today-panel p{margin-bottom:13px}.today-score strong{font-size:48px}.mode-list{grid-template-columns:1fr 1fr;gap:8px}.mode-row{min-height:70px;padding:10px 9px;gap:7px}.mode-emoji{width:34px;height:34px;font-size:19px}.mode-row strong{font-size:12px}.mode-row small{font-size:10px}.mode-row .arrow{display:none}.game-wrap{padding-top:8px}.game-heading{margin:5px 0 7px}.game-heading h1{font-size:19px}.game-heading p{font-size:11px}.game-board-card{border-radius:19px}.control-tray{min-height:84px;padding:10px 0 0}.control-tray .button{min-height:51px;font-size:14px}.board-corner{font-size:9px}.result-wrap{padding:14px 0 23px;gap:11px}.result-hero{padding:20px}.stats-wrap{padding-top:14px}.stats-grid{gap:6px}.metric{padding:13px 4px}.metric strong{font-size:25px}.stat-row{grid-template-columns:48px 1fr 99px;gap:6px}.result-actions{gap:7px}}
@media(max-height:730px){.game-wrap{padding-top:5px;padding-bottom:5px}.game-heading{margin:3px 0 5px}.game-heading h1{font-size:19px;margin:3px 0}.game-heading p{font-size:11px}.control-tray{padding:6px 0 0;min-height:76px;gap:5px}.control-tray .button{min-height:45px}.game-board-card{min-height:145px}.site-footer{min-height:28px;padding:8px 0 3px}.topbar{height:50px}.board-caption{bottom:5px}.hint{min-height:15px}}
@media(max-height:620px){.game-heading p{display:none}.game-heading{margin:0 0 4px}.game-heading h1{font-size:17px}.game-top{min-height:25px}.control-tray{min-height:65px}.control-tray .button{min-height:41px}.game-board-card{min-height:130px}.site-footer{display:none}.board-corner{top:5px;left:8px}.board-caption{font-size:9px}}
@media(orientation:landscape) and (max-height:540px){.game-wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.9fr);grid-template-rows:28px minmax(0,1fr);column-gap:13px;padding:5px 0 8px}.game-top{grid-column:1/-1}.game-heading{grid-column:2;grid-row:2;text-align:left;align-self:start;margin:6px 0;z-index:1}.game-heading h1{font-size:17px}.game-board-card{grid-column:1;grid-row:2;min-height:140px;max-height:none}.control-tray{grid-column:2;grid-row:2;align-self:end;padding:76px 0 0;min-height:0}.control-tray .button{font-size:12px;min-height:39px}.hint{display:none}.board-caption{bottom:5px}.area-controls{grid-template-columns:1fr;gap:6px}.area-controls .button{min-height:39px}.range-pair{gap:2px}.range-row{grid-template-columns:42px 1fr;gap:4px}.game-label{font-size:10px}}
@media(max-width:370px){.brand small{display:none}.game-heading h1{font-size:17px}.game-heading p{font-size:10px}.progress span{width:21px}.progress span.active{width:29px}.board-caption{font-size:10px}.result-row{grid-template-columns:23px 48px minmax(0,1fr) 40px;gap:6px}.result-row .detail{font-size:10px}}
/* v0.2.0: clearly separated reveal, memory preview, coaching report and angle setting. */
.angle-home-note{border:1px solid #cee7da;background:#f0faf3;color:#346c5e;padding:12px 14px;border-radius:14px;font-size:12px;line-height:1.65}
.angle-home-note strong{font-weight:900;color:#20584a}.angle-home-note button{background:transparent;border:0;padding:3px;color:#1d675b;font-weight:900;text-decoration:underline;text-underline-offset:3px}.angle-home-note small{display:block;color:#7a675b;font-size:10px}
.setting-row:has(.setting-select){flex-direction:column;align-items:stretch;gap:9px}.setting-select{min-width:0;width:100%;padding:12px;background:white;border:1px solid #b5d6c9;color:var(--ink);font-weight:800;border-radius:12px;font-size:13px}
.answer-explanation{color:#387966!important;font-weight:850!important}.game-heading:has(.answer-explanation){margin-bottom:8px}.game-heading .answer-explanation{font-size:clamp(11px,1.5vw,14px);line-height:1.45}
.board-stage:has(.angle-gap){background:radial-gradient(ellipse at center,#fffbf4 4%,#f2f9f5 100%)}.angle-gap{stroke-dasharray:330;animation:reveal-arc .65s ease-out both}.center-trail{stroke-dasharray:6 5;animation:trail-appear .65s ease-out both}
@keyframes reveal-arc{from{stroke-dasharray:0 330;opacity:0}to{stroke-dasharray:330;opacity:.43}}@keyframes trail-appear{from{stroke-opacity:0}to{stroke-opacity:1}}
.insight-report{background:linear-gradient(140deg,#effaf2,#fffefa);border-color:#c7e6d5;padding:22px}.insight-report h3{font-size:clamp(17px,4vw,23px);margin:7px 0 15px}.insight-report p{font-size:13px;line-height:1.8;margin:9px 0!important}.insight-report .report-note{color:#718780;font-size:10px;margin-top:14px!important}.report-pills{display:grid;grid-template-columns:1fr 1fr;gap:9px}.report-pills>div{display:flex;flex-direction:column;gap:6px;background:white;border:1px solid #dfede4;border-radius:13px;padding:13px}.report-pills small{font-size:10px;color:#6b887b;font-weight:700}.report-pills strong{font-size:13px;color:#214c43}
@media(max-width:720px){.home-side{gap:9px}.angle-home-note{padding:9px 12px}.insight-report{padding:16px}.insight-report p{font-size:12px!important}}
@media(max-height:730px){.game-heading p.answer-explanation{font-size:11px;line-height:1.3}.hint{max-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-heading{margin-top:2px}}
@media(max-height:620px){.game-heading p.answer-explanation{display:block;font-size:10px;line-height:1.2}.game-heading:has(.answer-explanation){margin-bottom:3px}.game-heading .round-name{font-size:10px}.control-tray .button-ghost{min-height:25px;padding:3px}.control-tray{gap:1px}.game-board-card{min-height:105px}.game-wrap .hint{display:none}}
@media(orientation:landscape) and (max-height:540px){.game-heading p.answer-explanation{display:block;font-size:11px;line-height:1.35}.game-heading h1{font-size:16px}.control-tray{padding-top:90px}.control-tray .button-ghost{min-height:23px}.game-board-card{min-height:120px}.game-heading:has(.answer-explanation){margin-bottom:0}}

/* v0.2.1 — readable results and direct area resizing, with slider fallback. */
.area-instruction{font-size:12px;line-height:1.45;color:#49756b;margin:0 0 5px}
.area-instruction strong{color:#235c50}
.area-inputs{min-width:0}
.board-stage.interactive:has(#area-grip){cursor:default}
#area-grip{cursor:nwse-resize;filter:drop-shadow(0 2px 3px #124b4333)}
#area-answer{cursor:nwse-resize}
.result-wrap{max-width:880px;gap:18px}
.result-hero{padding:30px 33px}
.result-table{padding:10px 22px}
.result-row{grid-template-columns:36px 78px minmax(0,1fr) 70px;gap:13px;padding:15px 4px;min-height:67px}
.result-row .e{font-size:26px}
.result-row .n{font-size:17px}
.result-row .detail{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.result-row strong{font-size:24px;white-space:nowrap}
.result-row .score-unit{font-size:14px;color:#607b77;margin-left:2px}
.result-banner{font-size:15px;padding:13px 16px}
.insight-report{padding:26px 28px}
.insight-report .eyebrow{font-size:13px}
.insight-report h3{font-size:clamp(20px,2.6vw,26px);line-height:1.4}
.insight-report p{font-size:16px;line-height:1.8;margin:12px 0!important}
.insight-report .report-note{font-size:12px;line-height:1.6}
.report-pills>div{padding:17px;gap:7px}
.report-pills small{font-size:13px}
.report-pills strong{font-size:16px}
.result-actions .button{font-size:14px;min-height:50px}
.result-wrap>.bottom-caption{font-size:12px;line-height:1.8}
@media(max-width:720px){
  .result-wrap{gap:13px}
  .result-hero{padding:21px}
  .result-table{padding:6px 12px}
  .result-row{grid-template-columns:26px 50px minmax(0,1fr) 49px;gap:7px;min-height:62px;padding:12px 1px}
  .result-row .e{font-size:21px}
  .result-row .n{font-size:14px}
  .result-row .detail{font-size:13px;line-height:1.4}
  .result-row strong{font-size:21px}
  .result-row .score-unit{font-size:12px}
  .result-banner{font-size:13px}
  .insight-report{padding:20px}
  .insight-report h3{font-size:20px}
  .insight-report p{font-size:14px!important}
  .insight-report .report-note{font-size:11px!important}
  .report-pills small{font-size:12px}
  .report-pills strong{font-size:14px}
  .result-actions .button{font-size:13px}
  .area-instruction{font-size:11px;line-height:1.35}
}
@media(max-width:370px){
  .result-row{grid-template-columns:22px 47px minmax(0,1fr) 43px;gap:5px}
  .result-row .detail{font-size:12px}
  .result-row .n{font-size:13px}
}
@media(max-height:730px){.area-instruction{font-size:10px;margin-bottom:2px}}
@media(orientation:landscape) and (max-height:540px){
 .area-instruction{font-size:10px;margin:0 0 2px;line-height:1.25}
 .area-controls .button{min-height:37px}
}
/* Pointer input should not leave a black browser default outline around the drawing board. */
#board:focus:not(:focus-visible){outline:none}
#board:focus-visible{outline:3px solid #2b9c8c;outline-offset:-3px}

/* v0.2.2 — shared midline, fingertip-first area control, explicit score keys. */
.area-midline{pointer-events:none}
.area-grip-hit{pointer-events:all;cursor:nwse-resize}
#board.is-resizing-area #area-answer{stroke:#216b5a;stroke-width:5}
#board.is-resizing-area #area-grip>circle:not(.area-grip-hit){stroke:#216b5a;stroke-width:5}
.area-tune{border-radius:9px;margin-top:5px;max-width:100%;color:#477c6e}
.area-tune summary{cursor:pointer;list-style:none;font-size:12px;font-weight:850;line-height:1.6;touch-action:manipulation;min-height:28px;display:flex;align-items:center;gap:5px}
.area-tune summary::-webkit-details-marker{display:none}
.area-tune summary:before{content:'＋';font-weight:900;font-size:15px}
.area-tune[open] summary:before{content:'−'}
.area-tune summary:focus-visible{outline:3px solid #2b9c8c;outline-offset:2px}
.area-tune .range-pair{padding:4px 2px 1px;gap:3px}
.area-tune .range-row{grid-template-columns:46px minmax(0,1fr);gap:5px}
.score-sticks{gap:10px;align-items:start;margin-top:20px}
.score-stick{min-width:0;display:grid;gap:5px}
.score-stick>span{display:block!important;height:auto!important;background:transparent!important;overflow:visible!important;border-radius:0!important;color:#d8ede6;text-align:center;font-weight:800;font-size:12px}
.score-stick>small{color:#d8ede6;font-size:11px;text-align:center}
.score-stick .score-track{width:100%;height:11px;background:#63817e;border-radius:100px;overflow:hidden}
.score-stick .score-track i{height:100%;display:block;background:var(--mint);border-radius:inherit}
@media(max-width:720px){
 .area-instruction{font-size:12px}
 .score-sticks{gap:6px}
 .score-stick>span{font-size:11px}
 .score-stick>small{font-size:10px}
 .area-tune summary{font-size:11px}
}
@media(orientation:landscape) and (max-height:540px){
 .area-tune summary{min-height:24px;line-height:1.2;font-size:11px}
 .area-instruction{font-size:11px}
 .area-tune .range-row input{height:18px}
}

/* v0.2.3 — optional one-round retry, clearer precision controls and feedback. */
.reveal-actions{display:flex;gap:9px;align-items:stretch;width:100%}
.reveal-actions>.button{flex:1;min-width:0;min-height:54px}
.reveal-actions>.button-secondary{flex:.93;background:#eaf6ef;color:#245b50;border:1px solid #b3d7c9;font-size:13px;line-height:1.15}
.reveal-actions>.button-secondary small{display:block;font-size:10px;font-weight:600;opacity:.75;margin-top:3px}
.retry-note{color:#236b59;font-weight:850;font-size:12px}
.result-achievements{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.result-achievements span{font-size:12px;font-weight:850;color:#c7f5df;background:#ffffff1a;border:1px solid #ffffff30;padding:7px 10px;border-radius:99px}
.report-practice-note{background:#eaf6ef;border-radius:12px;padding:10px 12px;font-size:13px!important;color:#366e60}
#center-halo{pointer-events:none}
@media(max-width:720px){.reveal-actions{gap:6px}.reveal-actions>.button{min-height:46px;font-size:12px;padding:8px 5px}.reveal-actions>.button-secondary{font-size:11px}.reveal-actions>.button-secondary small{font-size:9px}.result-achievements span{font-size:11px}}
@media(max-height:620px){.reveal-actions>.button{min-height:39px}.retry-note{font-size:10px}}
@media(orientation:landscape) and (max-height:540px){.reveal-actions{flex-direction:column;gap:4px}.reveal-actions>.button{min-height:33px}.reveal-actions>.button-secondary small{display:none}}

/* v0.2.4 — stronger hero, report avatar, short practice and growth report. */
.hero-v24{padding:34px 36px;min-height:430px}
.hero-split{display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);gap:24px;align-items:center;min-height:100%}
.hero-five-box{position:relative;z-index:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:28px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;backdrop-filter:blur(1px)}
.hero-five-num{font-size:clamp(86px,10vw,132px);line-height:.88;font-weight:1000;color:#fff;letter-spacing:-.08em}
.hero-five-caption{margin-top:8px;font-size:16px;font-weight:900;letter-spacing:.18em;color:#aeead5}
.hero-five-icons{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:18px 0 10px;width:100%}
.hero-five-icons span{display:grid;place-items:center;min-height:38px;border-radius:16px;background:rgba(255,255,255,.1);font-size:22px;color:#fff}
.hero-five-box p{margin:0;color:#c6ddd6;font-size:13px;line-height:1.7}
.hero-copy .eyebrow{font-size:14px;letter-spacing:.18em}
.hero-copy h1{font-size:clamp(58px,6.8vw,88px);line-height:1.02;margin:10px 0 14px}
.hero-copy .hero-text{max-width:520px;font-size:17px;line-height:1.95;color:#d4e4df}
.hero-copy .hero-note{font-size:13px}
.quick-practice-panel{padding:18px 18px 16px;background:linear-gradient(180deg,#fffdfb,#f7fbf8)}
.quick-practice-panel h2{font-size:23px;margin:13px 0 8px}
.quick-practice-panel p{font-size:13px;line-height:1.75;color:var(--muted)}
.practice-chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.practice-chip-grid.compact{grid-template-columns:repeat(3,1fr)}
.practice-chip{display:flex;flex-direction:column;align-items:flex-start;gap:5px;border-radius:17px;border:1px solid #d9e8e0;background:#fff;padding:12px 13px;min-height:88px;text-align:left;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.practice-chip:hover,.practice-chip:focus-visible{transform:translateY(-1px);border-color:#8dcab7;box-shadow:0 9px 18px rgba(29,74,64,.09);outline:none}
.practice-chip span{font-size:22px;line-height:1}
.practice-chip strong{font-size:15px;line-height:1.4;color:#19463d}
.practice-chip small{font-size:11px;color:#638077}
.result-submode{margin:6px 0 0;font-size:14px;color:#d1e8e1;font-weight:800;letter-spacing:.04em}
.report-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.report-title-copy{min-width:0}
.report-avatar{width:96px;height:96px;border-radius:24px;flex:0 0 auto;background:#fff;border:1px solid #d7ebdf;box-shadow:0 10px 18px rgba(42,90,78,.08);object-fit:contain}
.growth-panel{background:linear-gradient(180deg,#f7fbf8,#fffefd)}
.growth-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:16px}
.growth-head strong{display:block;font-size:22px;color:#1d4c43;margin-bottom:5px}
.growth-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.75}
.growth-avatar{width:92px;height:92px;border-radius:22px;flex:0 0 auto;background:#fff;border:1px solid #d6e6dd;object-fit:contain}
.growth-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.growth-pills>div{display:flex;flex-direction:column;gap:5px;border-radius:14px;background:#fff;border:1px solid #deebe3;padding:14px}
.growth-pills small{font-size:11px;color:#648076;font-weight:800}
.growth-pills strong{font-size:16px;color:#1f4e44}
.growth-pills span{font-size:12px;color:#587067}
.growth-list{display:grid;gap:10px}
.growth-row{display:grid;grid-template-columns:155px minmax(0,1fr) 82px;gap:12px;align-items:center;background:#fff;border:1px solid #e5eee8;border-radius:15px;padding:12px 14px}
.growth-name{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;color:#19453d}
.growth-name span{font-size:21px}
.growth-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.growth-meta b{font-size:15px;color:#1f4d43}
.growth-meta small{font-size:11px;color:#6d857d}
.growth-row p{grid-column:1/-1;margin:0;color:#657b74;font-size:12px;line-height:1.6}
@media(max-width:720px){
  .hero-v24{padding:22px;min-height:unset}
  .hero-split{grid-template-columns:1fr;gap:18px}
  .hero-five-box{padding:18px 14px}
  .hero-five-num{font-size:76px}
  .hero-copy h1{font-size:clamp(44px,11vw,68px)}
  .hero-copy .hero-text{font-size:14px;line-height:1.8;max-width:none}
  .quick-practice-panel h2{font-size:20px}
  .practice-chip-grid,.practice-chip-grid.compact{grid-template-columns:1fr 1fr}
  .practice-chip{min-height:76px;padding:11px}
  .report-title-row{align-items:flex-start}
  .report-avatar{width:74px;height:74px;border-radius:18px}
  .growth-head{align-items:flex-start}
  .growth-head strong{font-size:18px}
  .growth-avatar{width:70px;height:70px;border-radius:18px}
  .growth-pills{grid-template-columns:1fr}
  .growth-row{grid-template-columns:1fr;gap:8px}
  .growth-meta{align-items:flex-start}
}
@media(max-width:480px){
  .practice-chip-grid,.practice-chip-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .practice-chip{min-height:72px;padding:10px 10px}
  .practice-chip strong{font-size:13px;line-height:1.25}
  .practice-chip small{font-size:10px}
}

/* v0.2.6 — tighter home layout, image-backed personas, and safer mobile timing flow. */
.home-wrap-v25{padding:14px 0 16px;grid-template-columns:minmax(0,1fr) minmax(370px,418px);gap:16px;align-items:start}
.home-wrap-v25 .home-side{gap:10px}
.hero-v25{padding:24px 28px;min-height:0}
.hero-v25 .hero-split{grid-template-columns:minmax(150px,190px) minmax(0,1fr);gap:18px}
.hero-v25 .hero-five-box{padding:18px 14px;border-radius:24px}
.hero-v25 .hero-five-num{font-size:clamp(78px,8vw,106px)}
.hero-v25 .hero-five-caption{font-size:14px}
.hero-v25 .hero-five-icons{gap:6px;margin:12px 0 8px}
.hero-v25 .hero-five-icons span{min-height:34px;border-radius:13px;font-size:20px}
.hero-v25 .hero-five-box p{font-size:12px;line-height:1.5}
.hero-v25 .hero-copy .eyebrow{font-size:12px}
.hero-v25 .hero-copy h1{font-size:clamp(44px,4.9vw,70px);line-height:1.03;margin:8px 0 10px;max-width:11ch}
.hero-v25 .hero-copy .hero-text{max-width:460px;font-size:15px;line-height:1.75}
.hero-v25 .hero-bottom{margin-top:10px}
.hero-v25 .hero-bottom .button{min-height:48px;padding:12px 18px}
.hero-mini-note{margin:10px 0 0;font-size:11px;line-height:1.55;color:#a8c7bf}
.home-wrap-v25 .today-panel{padding:18px 20px;flex:0 0 auto}
.home-wrap-v25 .today-panel h2{margin:12px 0 6px;font-size:21px}
.home-wrap-v25 .today-panel p{margin:0 0 12px;font-size:12px;line-height:1.6}
.home-wrap-v25 .today-score{margin:4px 0 14px}.home-wrap-v25 .today-score strong{font-size:58px}.home-wrap-v25 .today-score span{font-size:12px}
.home-wrap-v25 .quick-practice-panel{padding:14px 16px}
.home-wrap-v25 .quick-practice-panel h2{font-size:20px;margin:10px 0 6px}
.home-wrap-v25 .quick-practice-panel p{font-size:12px;line-height:1.6;margin:0}
.home-wrap-v25 .practice-chip-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.home-wrap-v25 .practice-chip{min-height:72px;padding:10px 11px;border-radius:14px}.home-wrap-v25 .practice-chip span{font-size:19px}.home-wrap-v25 .practice-chip strong{font-size:13px}.home-wrap-v25 .practice-chip small{font-size:10px}
.mode-list-compact{grid-template-columns:1fr 1fr;gap:8px}.mode-list-compact .mode-row{min-height:63px;padding:10px 11px;gap:8px}.mode-list-compact .mode-emoji{width:36px;height:36px;font-size:18px}.mode-list-compact .mode-row strong{font-size:13px}.mode-list-compact .mode-row small{font-size:10px;margin-top:4px}.mode-list-compact .arrow{display:none}
.home-mode-panel{display:grid;gap:8px}.home-mode-heading{font-size:11px;font-weight:900;letter-spacing:.16em;color:#6a8883;margin:2px 2px 0}
.home-wrap-v25 .angle-home-note{padding:10px 12px;font-size:12px}
.home-wrap-v25 .bottom-caption{font-size:10px;line-height:1.5;margin-top:2px}

.result-hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 176px;gap:16px;align-items:center}
.result-hero-copy{min-width:0}
.result-hero-figure{display:flex;justify-content:flex-end;align-items:flex-end}
.result-hero-avatar{width:176px;height:176px;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.18))}
.report-avatar{width:128px;height:128px;border-radius:20px;border:none;box-shadow:none;background:transparent}
.growth-avatar{width:112px;height:112px;border-radius:20px;border:none;background:transparent}

.growth-overall{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr);gap:14px;align-items:center;margin-bottom:14px;background:#fff;border:1px solid #e5eee8;border-radius:18px;padding:14px}
.growth-overall-copy{display:grid;gap:6px}
.growth-overall-copy strong{font-size:17px;color:#1b4b41}
.growth-overall-copy span{font-size:12px;line-height:1.65;color:#617a72}
.growth-overall-chart{width:100%;max-width:100%;border-radius:16px;border:1px solid #edf3ef;background:#fff}
.growth-row{grid-template-columns:145px minmax(0,1fr) 80px;gap:12px;align-items:center}
.growth-spark img{display:block;width:100%;height:76px;border-radius:14px;border:1px solid #edf3ef;background:#f9fcfa}
.growth-row-foot{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:12px;align-items:center}
.growth-row-foot p{grid-column:auto;margin:0;color:#657b74;font-size:12px;line-height:1.6}
.growth-row .meter{margin:0}

@media(min-width:721px){
  .home-wrap-v25{min-height:calc(100dvh - 154px)}
}
@media(max-width:960px){
  .home-wrap-v25{grid-template-columns:1fr;gap:12px;padding:16px 0 18px}
  .hero-v25{padding:22px}
  .hero-v25 .hero-split{grid-template-columns:1fr;gap:16px}
  .hero-v25 .hero-copy h1{max-width:none}
  .home-wrap-v25 .practice-chip-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .hero-v25{padding:22px;min-height:unset}
  .hero-v25 .hero-copy h1{font-size:clamp(42px,10.7vw,64px)}
  .hero-v25 .hero-copy .hero-text{font-size:14px;line-height:1.72}
  .hero-mini-note{display:none}
  .home-wrap-v25 .practice-chip-grid{grid-template-columns:1fr 1fr}
  .mode-list-compact{grid-template-columns:1fr 1fr}
  .result-hero-layout{grid-template-columns:1fr 104px;gap:10px;align-items:start}
  .result-hero-avatar{width:104px;height:104px}
  .report-avatar{width:96px;height:96px}
  .growth-avatar{width:84px;height:84px}
  .growth-overall{grid-template-columns:1fr;gap:10px;padding:12px}
  .growth-overall-copy strong{font-size:15px}
  .growth-row{grid-template-columns:1fr;gap:8px}
  .growth-spark img{height:72px}
  .growth-row-foot{grid-template-columns:1fr;gap:8px}
}
@media(max-width:480px){
  .home-wrap-v25 .practice-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .home-wrap-v25 .practice-chip{min-height:68px;padding:8px 8px}
  .home-wrap-v25 .practice-chip span{font-size:17px}
  .home-wrap-v25 .practice-chip strong{font-size:12px;line-height:1.2}
  .home-wrap-v25 .practice-chip small{display:none}
  .mode-list-compact{grid-template-columns:1fr 1fr}
  .result-hero-layout{grid-template-columns:1fr 92px}
  .result-hero-avatar{width:92px;height:92px}
}

@media(min-width:1100px){
  .home-wrap-v25 .today-panel{padding:16px 18px}
  .home-wrap-v25 .today-panel h2{font-size:19px;margin:10px 0 5px}
  .home-wrap-v25 .today-panel p{font-size:11px;line-height:1.5;margin:0 0 10px}
  .home-wrap-v25 .today-score strong{font-size:52px}
  .home-wrap-v25 .quick-practice-panel{padding:12px 14px}
  .home-wrap-v25 .quick-practice-panel h2{font-size:18px;margin:8px 0 4px}
  .home-wrap-v25 .quick-practice-panel p{display:none}
  .home-wrap-v25 .practice-chip-grid{grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
  .home-wrap-v25 .practice-chip{min-height:66px;padding:8px 4px;align-items:center;text-align:center}
  .home-wrap-v25 .practice-chip span{font-size:17px}
  .home-wrap-v25 .practice-chip strong{font-size:11px;line-height:1.15}
  .home-wrap-v25 .practice-chip small{display:none}
  .home-mode-panel{gap:7px}
  .mode-list-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mode-list-compact .mode-row{min-height:66px;justify-content:flex-start;text-align:left;padding:10px 11px;gap:9px}
  .mode-list-compact .mode-row span:last-of-type{flex:1}
  .mode-list-compact .mode-row small{display:block;font-size:10px;line-height:1.35}
  .mode-list-compact .mode-row strong{font-size:12px;line-height:1.2}
  .mode-list-compact .mode-emoji{display:grid;width:34px;height:34px;font-size:17px}
}

/* v0.2.8 adjustments */
.svg-mini-label{font:900 12px/1 system-ui,sans-serif;fill:#7a8f88}
.game-board-shell.answered{display:grid;grid-template-columns:minmax(0,1fr) 206px;gap:14px;align-items:stretch}
.reveal-reaction-card{border:1px solid var(--line);border-radius:25px;background:linear-gradient(180deg,#fffefd 0%,#f4faf5 100%);box-shadow:var(--shadow);padding:16px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:175px}
.reaction-chip{margin:0;padding:5px 11px;border-radius:999px;background:#e6f4ee;color:#477a6d;font-size:10px;font-weight:900;letter-spacing:.14em}
.reaction-avatar{width:min(100%,160px);height:auto;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(37,76,66,.14))}
.reveal-reaction-card h3{margin:0;font-size:15px;color:#254d45}
.reveal-reaction-card p:last-child{margin:0;color:#6a857e;font-size:12px;line-height:1.65}
.score-stick .score-track i{background:var(--stick-color,var(--mint))}
.result-hero--full .result-hero-layout{grid-template-columns:minmax(0,1fr) 230px;align-items:end}
.result-hero--full .result-hero-avatar{width:206px;height:206px}
.report-avatar-button{border:0;background:transparent;padding:0;cursor:pointer;border-radius:24px;line-height:0;transition:transform .15s ease,filter .15s ease}
.report-avatar-button:hover,.report-avatar-button:focus-visible{transform:translateY(-2px) scale(1.02);filter:drop-shadow(0 12px 18px rgba(28,64,57,.14));outline:none}
.portrait-zoom{text-align:center}
.portrait-zoom img{width:min(100%,320px);height:auto;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(24,57,53,.12))}
@media(max-width:720px){
  .game-board-shell.answered{grid-template-columns:1fr;gap:10px}
  .reveal-reaction-card{border-radius:18px;min-height:auto;padding:12px}
  .reveal-reaction-card{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left}
  .reaction-chip{grid-column:2;justify-self:start}
  .reaction-avatar{grid-column:1;grid-row:1 / span 2;width:92px}
  .reveal-reaction-card h3{grid-column:2;font-size:14px}
  .reveal-reaction-card p:last-child{grid-column:2;font-size:11px}
  .result-hero--full .result-hero-layout{grid-template-columns:minmax(0,1fr) 138px}
  .result-hero--full .result-hero-avatar{width:132px;height:132px}
  .report-avatar-button{border-radius:18px}
}
@media(orientation:landscape) and (max-height:540px){
  .game-board-shell.answered{grid-template-columns:minmax(0,1fr) 166px;gap:8px}
  .reveal-reaction-card{padding:10px 8px;gap:5px}
  .reaction-avatar{width:min(100%,120px)}
  .reveal-reaction-card h3{font-size:13px}
  .reveal-reaction-card p:last-child{font-size:10px;line-height:1.45}
}
/* v0.2.8 QA: keep captions outside SVG text and fix horizontal-phone grid nesting. */
.game-board-shell{flex:1;min-height:0;display:flex}
.game-board-shell>.game-board-card{flex:1}
.game-board-shell.answered{display:grid}
.game-board-shell.answered .game-board-card{min-width:0}
.board-caption--area{font-size:clamp(11px,1vw,13px);font-weight:900;color:#35695b;padding:0 10px;line-height:1.45}
@media(max-width:720px){
  .game-board-shell.answered .board-corner{display:none}
  .board-caption--area{font-size:10px;bottom:7px}
}
@media(orientation:landscape) and (max-height:540px){
  .game-board-shell{grid-column:1;grid-row:2;min-height:0;height:100%;align-self:stretch}
  .game-board-shell.answered{display:grid;grid-template-columns:minmax(0,1fr) 114px;grid-template-rows:minmax(0,1fr);gap:7px;align-items:stretch}
  .game-board-shell .game-board-card{grid-column:auto;grid-row:auto;min-height:0;height:100%;max-height:none}
  .game-board-shell .reveal-reaction-card{min-height:0;height:100%;padding:7px 4px;gap:3px;border-radius:12px}
  .game-board-shell .reaction-avatar{width:90px;max-height:98px}
  .game-board-shell .reveal-reaction-card h3{font-size:11px}
  .game-board-shell .reveal-reaction-card p:last-child{font-size:9px;line-height:1.28}
  .game-board-shell .reaction-chip{font-size:8px;padding:3px 6px}
  .game-board-shell.answered .board-corner{display:none}
  .game-board-shell .board-caption--area{font-size:9px;bottom:4px}
}
/* Answers have natural-height boards rather than stretching reaction cards into empty space. */
.game-board-shell.answered{flex:0 0 auto}
@media(orientation:landscape) and (max-height:540px){.game-board-shell.answered{flex:1 1 auto}}

/* v0.2.8 gameplay refinements */
.game-board-shell.has-coach{display:grid;grid-template-columns:minmax(0,1fr) 206px;gap:14px;align-items:stretch}
.game-board-shell.has-coach .game-board-card{min-width:0}
.reveal-reaction-card{border:1px solid var(--line);border-radius:25px;background:linear-gradient(180deg,#fffefd 0%,#f4faf5 100%);box-shadow:var(--shadow);padding:14px 14px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:175px}
.reveal-reaction-card.is-result{background:linear-gradient(180deg,#fffefa 0%,#f6fbf8 100%)}
.reveal-reaction-card--ready{background:linear-gradient(180deg,#fafdff 0%,#f2fbf7 100%)}
.reaction-chip{margin:0 0 2px;padding:5px 11px;border-radius:999px;background:#e6f4ee;color:#477a6d;font-size:10px;font-weight:900;letter-spacing:.14em}
.reaction-emotion{margin:0;font-size:13px;font-weight:950;letter-spacing:.08em;color:#275850}
.reaction-avatar{width:min(100%,148px);height:auto;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(37,76,66,.14));border-radius:18px}
.reveal-reaction-card h3{margin:0;font-size:15px;color:#183f3d;line-height:1.35}
.reveal-reaction-card p:last-child{margin:0;color:#5c7871;font-size:12px;line-height:1.6}
.reveal-reaction-card--mint .reaction-emotion,.reveal-reaction-card--ready .reaction-emotion{color:#207b64}
.reveal-reaction-card--sky .reaction-emotion{color:#2c7181}
.reveal-reaction-card--gold .reaction-emotion{color:#8e6a1d}
.reveal-reaction-card--coral .reaction-emotion{color:#b45555}
.board-caption{padding:0 10px;line-height:1.35}
.board-caption--area{padding:0 16px}
.svg-label{font:900 14px/1 system-ui,sans-serif;fill:#688983}
@media(max-width:720px){
  .game-board-shell.has-coach{grid-template-columns:1fr;gap:10px}
  .reveal-reaction-card{border-radius:18px;min-height:auto;padding:12px;display:grid;grid-template-columns:98px 1fr;grid-template-rows:auto auto auto;column-gap:10px;row-gap:4px;align-items:center;text-align:left}
  .reaction-chip{grid-column:2;justify-self:start}
  .reaction-avatar{grid-column:1;grid-row:1 / span 3;width:92px}
  .reaction-emotion,.reveal-reaction-card h3,.reveal-reaction-card p:last-child{grid-column:2}
  .reveal-reaction-card h3{font-size:14px}
  .reveal-reaction-card p:last-child{font-size:11px}
}
@media(orientation:landscape) and (max-height:540px){
  .game-board-shell.has-coach{grid-template-columns:minmax(0,1fr) 140px;gap:8px;min-height:0;height:100%;align-self:stretch}
  .game-board-shell.has-coach .reveal-reaction-card{min-height:0;height:100%;padding:8px 5px;gap:3px;border-radius:14px}
  .game-board-shell.has-coach .reaction-avatar{width:96px;max-height:100px}
  .game-board-shell.has-coach .reaction-chip{font-size:8px;padding:3px 6px}
  .game-board-shell.has-coach .reaction-emotion{font-size:10px}
  .game-board-shell.has-coach .reveal-reaction-card h3{font-size:11px}
  .game-board-shell.has-coach .reveal-reaction-card p:last-child{font-size:9px;line-height:1.3}
  .game-board-shell.has-coach .board-caption{font-size:9px;bottom:4px}
}

/* v0.3.0: clearly previewable character selection; style never affects scoring. */
.character-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 12px}
.character-choice{appearance:none;border:2px solid #e2eae4;background:#fff;border-radius:17px;padding:9px 7px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:0;color:#274a42;transition:border-color .14s,background .14s,box-shadow .14s,transform .14s}
.character-choice img{display:block;width:min(100%,102px);height:96px;object-fit:contain;border-radius:12px;background:linear-gradient(150deg,#f4f9f7,#fffdf9)}
.character-choice strong{font-size:13px;line-height:1.3;font-weight:900;text-align:center}
.character-choice span{font-size:10px;color:#64857b;text-align:center}
.character-choice:hover,.character-choice:focus-visible{outline:none;border-color:#82c6ae;transform:translateY(-1px);box-shadow:0 5px 15px #1c6a4a16}
.character-choice.is-selected{border-color:#3a9c86;background:#edf8f2;box-shadow:0 0 0 1px #3a9c8628}
.character-choice.is-selected span{color:#24765e;font-weight:900}
.character-home-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:#f3faf5;color:#497267;border:1px solid #d4e7dc;border-radius:13px;padding:9px 12px;font-size:12px;font-weight:750}
.character-home-row strong{color:#205a4c}
.character-home-row button{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;color:#2e7665;font-size:12px;font-weight:900;cursor:pointer;padding:1px 5px}
.character-home-row button:focus-visible{outline:2px solid #338c74;outline-offset:2px}
@media(min-width:1100px){.home-wrap-v25 .character-home-row{padding:7px 11px;font-size:11px}}
@media(max-width:370px){.character-choice-grid{gap:5px}.character-choice{padding:7px 4px}.character-choice img{height:80px}.character-choice strong{font-size:11px}}

/* v0.3.2: visual-only, non-scoring angle interaction guide. */
.angle-start-guide{pointer-events:none;opacity:.94;animation:angle-guide-intro .36s ease-out both}
.angle-start-guide-label{fill:#246d5e;font-size:14px;font-weight:900}
@keyframes angle-guide-intro{from{opacity:0}to{opacity:.94}}
@media(prefers-reduced-motion:reduce){.angle-start-guide{animation:none}}


/* v0.3.3 — title art hero integrated with character switching. */
.home-wrap-v33{padding:14px 0 16px;grid-template-columns:minmax(0,1fr) minmax(360px,418px);gap:16px;align-items:start}
.home-wrap-v33 .home-side{gap:10px}
.hero-v33{padding:18px 18px 16px;min-height:0;display:grid;gap:14px}
.title-hero-card{background:linear-gradient(180deg,#0f3140 0%,#12384a 100%);color:#eff8f4;overflow:hidden}
.title-hero-frame{border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 40px rgba(6,27,36,.22);background:#173f52}
.title-hero-art{display:block;width:100%;height:auto}
.title-hero-copybar{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,338px);gap:16px;align-items:start}
.title-hero-copytext .eyebrow{color:#aeead5;font-size:12px;letter-spacing:.18em;margin:0 0 6px}
.title-hero-copytext h1{margin:0 0 8px;font-size:clamp(28px,2.7vw,40px);line-height:1.18;color:#fff}
.title-hero-copytext .hero-text{margin:0;max-width:52ch;color:#d6ebe3;font-size:14px;line-height:1.8}
.title-hero-controls{display:grid;gap:10px}
.title-style-switch{display:grid;grid-template-columns:1fr;gap:8px}
.title-style-chip{border:1px solid rgba(179,215,201,.34);background:rgba(255,255,255,.05);color:#eef8f4;padding:12px 13px;border-radius:16px;text-align:left;display:grid;gap:3px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease}
.title-style-chip strong{font-size:14px;line-height:1.3}
.title-style-chip small{font-size:11px;line-height:1.45;color:#b9d9d0}
.title-style-chip:hover,.title-style-chip:focus-visible{transform:translateY(-1px);border-color:#9cd5c1;background:rgba(255,255,255,.09);box-shadow:0 10px 18px rgba(0,0,0,.12);outline:none}
.title-style-chip.is-active{background:rgba(166,236,212,.14);border-color:#9fdbc6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.title-hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.title-hero-actions .button{min-height:48px}
.title-hero-actions .button-secondary{background:#f2f7f4;color:#1b4a40}
.title-hero-controls .hero-mini-note{margin:0;font-size:11px;line-height:1.6;color:#a8c7bf}
.home-wrap-v33 .today-panel{padding:18px 20px;flex:0 0 auto}
.home-wrap-v33 .today-panel h2{margin:12px 0 6px;font-size:21px}
.home-wrap-v33 .today-panel p{margin:0 0 12px;font-size:12px;line-height:1.6}
.home-wrap-v33 .today-score{margin:4px 0 14px}.home-wrap-v33 .today-score strong{font-size:58px}.home-wrap-v33 .today-score span{font-size:12px}
.home-wrap-v33 .quick-practice-panel{padding:14px 16px}
.home-wrap-v33 .quick-practice-panel h2{font-size:20px;margin:10px 0 6px}
.home-wrap-v33 .quick-practice-panel p{font-size:12px;line-height:1.6;margin:0}
.home-wrap-v33 .practice-chip-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.home-wrap-v33 .practice-chip{min-height:72px;padding:10px 11px;border-radius:14px}.home-wrap-v33 .practice-chip span{font-size:19px}.home-wrap-v33 .practice-chip strong{font-size:13px}.home-wrap-v33 .practice-chip small{font-size:10px}
.home-wrap-v33 .angle-home-note{padding:10px 12px;font-size:12px}
.home-wrap-v33 .bottom-caption{font-size:10px;line-height:1.5;margin-top:2px}
@media(max-width:980px){
  .home-wrap-v33{grid-template-columns:1fr;gap:12px;padding:16px 0 18px}
  .title-hero-copybar{grid-template-columns:1fr;gap:12px}
  .title-style-switch{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .hero-v33{padding:14px 14px 16px}
  .title-hero-frame{border-radius:22px}
  .title-hero-copytext h1{font-size:24px}
  .title-hero-copytext .hero-text{font-size:13px;line-height:1.7}
  .title-style-switch{grid-template-columns:1fr;gap:7px}
  .title-style-chip{padding:10px 12px}
  .title-style-chip strong{font-size:13px}
  .title-style-chip small{font-size:10px}
  .title-hero-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .title-hero-actions .button{width:100%}
  .home-wrap-v33 .practice-chip-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .title-hero-copytext h1{font-size:22px;line-height:1.22}
  .home-wrap-v33 .today-panel{padding:16px 18px}
  .home-wrap-v33 .today-panel h2{font-size:19px;margin:10px 0 5px}
  .home-wrap-v33 .today-panel p{font-size:11px;line-height:1.5;margin:0 0 10px}
  .home-wrap-v33 .today-score strong{font-size:52px}
  .home-wrap-v33 .quick-practice-panel{padding:12px 14px}
  .home-wrap-v33 .quick-practice-panel h2{font-size:18px;margin:8px 0 4px}
  .home-wrap-v33 .quick-practice-panel p{display:none}
  .home-wrap-v33 .practice-chip-grid{grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
  .home-wrap-v33 .practice-chip{min-height:66px;padding:8px 4px;align-items:center;text-align:center}
  .home-wrap-v33 .practice-chip span{font-size:17px}
  .home-wrap-v33 .practice-chip strong{font-size:11px;line-height:1.15}
  .home-wrap-v33 .practice-chip small{display:none}
}

/* v0.3.4 title: text + real controls are separate from the cropped character artwork. */
.home-wrap-v34{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;width:100%;margin:0;padding:12px 0 8px;align-items:start}
.home-wrap-v34 .bottom-caption{font-size:10px;line-height:1.5;text-align:left;margin:0 4px;color:#80928d}
.title-stage{height:310px;border-radius:26px;position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:54% 46%;background:linear-gradient(110deg,#f7fdfa 0%,var(--title-tone,#e9faf4) 70%,#b8ead5 100%);border:1px solid #d7e7df;box-shadow:0 14px 36px rgba(18,56,64,.075)}
.title-stage:before{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(33,114,103,.08);border-radius:50%;left:-170px;top:-220px;pointer-events:none}
.title-stage-copy{z-index:2;position:relative;grid-column:1;padding:20px 12px 18px 29px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.title-wordmark{display:block;width:205px;max-height:70px;object-fit:contain;object-position:left center;margin:0 0 2px}
.title-kicker{margin:1px 0 6px;color:#337968;font-size:10px;letter-spacing:.2em;font-weight:950;line-height:1.25}
.title-event-label{display:inline-block;color:#3c675d;background:#d8f4e6;padding:3px 6px;border-radius:8px;letter-spacing:0;margin-left:9px}
.title-copy-main{font-size:clamp(29px,3.2vw,43px)!important;font-weight:950!important;line-height:1.12!important;margin:0 0 9px!important;letter-spacing:-.045em!important;color:#143742!important;position:relative;z-index:1;width:100%}
.title-copy-main>span{display:block;color:#123843;white-space:nowrap}
.title-copy-main>span:last-child{color:#158d79}
.title-stage-lead{margin:0;color:#466a66;font-size:12px;line-height:1.55;font-weight:750}
.title-stage-actions{display:flex;align-items:center;gap:13px;margin-top:15px;flex-wrap:wrap}
.title-start-button{min-height:46px;font-size:14px;color:#fff;background:linear-gradient(105deg,#148e7a,var(--title-accent,#ed845e));box-shadow:0 6px 18px rgba(42,126,106,.18);border-radius:14px;padding:10px 19px}
.title-start-button:hover{filter:brightness(1.04)}
.title-duration{color:#648a7b;font-size:11px;font-weight:800}
.title-stage-visual{grid-column:2;grid-row:1;position:relative;overflow:hidden;pointer-events:none;background:linear-gradient(130deg,transparent,#e6faf1 70%)}
.title-stage-visual:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--title-tone,#e9faf4) 0%,rgba(233,250,244,.2) 16%,transparent 42%);pointer-events:none}
.title-stage-art{position:absolute;max-width:none;width:auto;height:160%;right:-4%;top:-16%;object-fit:cover;filter:saturate(1.05)}
.title-style-tray{position:absolute;bottom:11px;right:11px;z-index:3;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:15px;background:rgba(15,49,58,.88);backdrop-filter:blur(14px);color:white;box-shadow:0 6px 14px rgba(9,30,40,.16)}
.style-tray-label{font-size:10px;letter-spacing:.05em;font-weight:850;white-space:nowrap;color:#d6efe5}
.title-stage .title-style-switch{display:flex;gap:5px;flex-wrap:nowrap}
.title-stage .title-style-chip{border:1px solid rgba(255,255,255,.23);color:#f0fff9;background:rgba(255,255,255,.1);font-size:11px;font-weight:900;padding:7px 9px;min-height:33px;border-radius:9px;white-space:nowrap;display:block;text-align:center;line-height:1.2}
.title-stage .title-style-chip.is-active{background:#b1f0d8;border-color:#b1f0d8;color:#164139}
.title-stage .title-style-chip:hover,.title-stage .title-style-chip:focus-visible{background:#fff;color:#1b443d;outline-offset:2px}
.home-overview{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.2fr) minmax(0,1fr);gap:11px;min-width:0}
.home-overview>*{min-width:0}
.home-wrap-v34 .title-today,.home-wrap-v34 .title-practice{padding:14px 15px;border-radius:19px;box-shadow:none;height:100%}
.home-wrap-v34 .panel-heading{gap:4px}
.home-wrap-v34 .chip{font-size:9px;padding:5px 8px}
.home-wrap-v34 .today-date{font-size:10px}
.home-wrap-v34 .title-today h2{margin:10px 0 6px;font-size:19px;line-height:1.3}
.home-wrap-v34 .title-today p{margin:0 0 6px;font-size:11px;line-height:1.5}
.home-wrap-v34 .title-today .today-score{margin:5px 0 8px}
.home-wrap-v34 .title-today .today-score strong{font-size:41px}
.home-wrap-v34 .title-today .today-score span{font-size:11px}
.home-wrap-v34 .title-today .button{min-height:43px;padding:8px 11px;font-size:12px}
.home-wrap-v34 .title-practice h2{font-size:18px;line-height:1.25;margin:10px 0 5px}
.home-wrap-v34 .title-practice p{font-size:11px;line-height:1.5;margin:0}
.home-wrap-v34 .practice-chip-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:13px}
.home-wrap-v34 .practice-chip{min-height:62px;padding:7px 2px;align-items:center;gap:4px;border-radius:11px}
.home-wrap-v34 .practice-chip span{font-size:18px}.home-wrap-v34 .practice-chip strong{font-size:11px;line-height:1.15}.home-wrap-v34 .practice-chip small{font-size:10px}
.home-toolbox{display:flex;flex-direction:column;gap:7px}
.title-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.home-wrap-v34 .mode-row{min-height:72px;border-radius:13px;padding:8px 8px;gap:7px;justify-content:flex-start;box-shadow:none}
.home-wrap-v34 .mode-emoji{width:30px;height:30px;font-size:18px;flex-shrink:0}
.home-wrap-v34 .mode-row strong{font-size:12px;line-height:1.3}
.home-wrap-v34 .mode-row small{font-size:10px}
.title-tools-settings{margin-top:auto;display:flex;gap:5px;flex-wrap:wrap;align-items:center;font-size:10px;color:#577b72;background:#eff7f1;border:1px solid #d5e7dd;border-radius:12px;padding:9px 10px;line-height:1.5}
.title-tools-settings span{flex-basis:100%;font-weight:750}
.title-tools-settings button{min-height:25px;padding:3px 8px;border:1px solid #b8d7c9;border-radius:8px;background:#fff;font-size:11px;font-weight:900;color:#286a58}
@media (min-width:1050px) and (min-height:700px){
  .home-wrap-v34{min-height:calc(100dvh - 130px);grid-template-rows:310px minmax(220px,1fr) auto}
}
@media(max-width:900px){
  .home-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-toolbox{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .title-tools-grid{grid-column:1;grid-row:1/3}
  .title-tools-settings{grid-column:2;grid-row:1/3}
}
@media(max-width:720px){
  .home-wrap-v34{gap:10px;padding:10px 0 14px}
  .title-stage{height:auto;grid-template-columns:1fr;border-radius:20px}
  .title-stage-copy{grid-column:1;grid-row:1;padding:17px 19px 10px;min-height:240px}
  .title-wordmark{width:188px;max-height:57px;margin:0 0 3px}
  .title-copy-main{font-size:clamp(26px,7.6vw,38px)!important;line-height:1.12!important;margin:0 0 7px!important}
  .title-kicker{font-size:9px;margin-bottom:6px}
  .title-stage-lead{font-size:11px;line-height:1.5}
  .title-stage-actions{margin-top:12px;gap:8px}
  .title-start-button{min-height:44px;padding:9px 17px;font-size:14px}
  .title-stage-visual{grid-column:1;grid-row:2;height:185px}
  .title-stage-art{height:185%;right:0;top:-42%}
  .title-stage-visual:before{background:linear-gradient(180deg,var(--title-tone,#e9faf4),transparent 28%)}
  .title-style-tray{position:relative;right:auto;bottom:auto;grid-row:3;grid-column:1;gap:8px;margin:0 10px 10px;padding:8px;border-radius:11px;justify-content:center}
  .title-stage .title-style-chip{font-size:11px;min-height:38px;padding:9px 11px}
  .home-overview{grid-template-columns:1fr;gap:9px}
  .home-toolbox{grid-column:auto;display:flex}
  .title-tools-grid{grid-column:auto;grid-row:auto}
  .title-tools-settings{grid-column:auto;grid-row:auto}
  .home-wrap-v34 .title-today,.home-wrap-v34 .title-practice{padding:14px;border-radius:16px}
  .home-wrap-v34 .title-today .today-score strong{font-size:38px}
  .home-wrap-v34 .practice-chip-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .home-wrap-v34 .title-practice h2{font-size:17px}
  .home-wrap-v34 .title-practice p{display:none}
  .home-wrap-v34 .mode-row{min-height:60px}
}
@media(max-width:370px){
  .title-stage-copy{padding:14px 13px 8px;min-height:236px}
  .title-copy-main{font-size:clamp(23px,7vw,29px)!important}
  .title-style-tray{gap:5px}
  .title-stage .title-style-chip{padding:8px 6px;font-size:10px}
  .title-duration{font-size:10px}
  .home-wrap-v34 .practice-chip strong{font-size:10px}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:950px){
  .title-stage{height:242px;grid-template-columns:53% 47%}
  .title-stage-copy{grid-row:1;grid-column:1;min-height:0;padding:12px 10px 12px 16px}
  .title-wordmark{width:153px;max-height:43px}
  .title-copy-main{font-size:clamp(22px,3.6vw,30px)!important}
  .title-stage-lead{font-size:10px}
  .title-stage-actions{margin-top:7px}
  .title-stage-visual{grid-row:1;grid-column:2;height:242px}
  .title-stage-art{height:170%;right:-2%;top:-18%}
  .title-style-tray{position:absolute;bottom:7px;right:7px;left:auto;grid-row:auto;grid-column:auto;margin:0;padding:5px}
  .title-style-tray .style-tray-label{display:none}
  .title-stage .title-style-chip{min-height:30px;padding:5px 7px}
}

/* Final title fit and the third-character cameo on the female-first illustration. */
@media(min-width:721px){.title-wordmark{width:190px;margin-bottom:0}.title-stage-actions{margin-top:11px}}
.title-cameo{position:absolute;z-index:2;bottom:52px;left:6%;width:79px;height:79px;object-fit:contain;border-radius:22px;background:rgba(255,255,255,.84);box-shadow:0 8px 18px rgba(18,56,48,.21);border:2px solid #c0efdd}
@media(max-width:720px){.title-cameo{left:5%;bottom:9px;width:65px;height:65px;border-radius:17px}}
@media(orientation:landscape) and (max-height:500px){.title-cameo{left:5%;bottom:40px;width:50px;height:50px}}

.brand-symbol{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;background:#153746;color:#a9ebd4;border-radius:10px;font-size:24px;box-shadow:0 3px 8px rgba(15,50,55,.08)}

/* v0.3.6: reveal each editable challenge only after Start.
   This keeps answer-time timer cues fair without changing scoring. */
.board-stage.awaiting-start .board-svg {visibility:hidden;pointer-events:none}
.board-waiting{position:absolute;inset:14% 12%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;border-radius:20px;background:linear-gradient(130deg,#e9f6ef,#fdf9ed);border:1px dashed #87bba9;color:#2b6d5a;pointer-events:none}
.board-waiting strong{font-size:clamp(23px,4vw,32px);letter-spacing:.08em}
.board-waiting span{font-size:clamp(11px,1.4vw,14px);line-height:1.55;font-weight:700}
@media (max-width:480px){.board-waiting{inset:15% 6%}.board-waiting strong{font-size:23px}.board-waiting span{font-size:11px}}

/* v0.3.9 — a compact, score-independent "one more step" after the set. */
.result-compare{padding:19px 22px;background:linear-gradient(150deg,#fbfdfb 0%,#f1f9f3 100%);border-color:#d9e9df;gap:9px}
.result-compare-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.result-compare .eyebrow{font-size:10px;color:#528570;margin:0 0 5px}
.result-compare h2{font-size:21px;line-height:1.3;color:#254b43;margin:0}
.compare-total{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dce9e0;border-radius:15px;padding:8px 12px}
.compare-total span{font-size:12px;color:#668078;font-weight:700}
.compare-total strong{font-size:22px;letter-spacing:-.04em}
.compare-total.up strong,.compare-bar-delta.up{color:#247e61}
.compare-total.down strong,.compare-bar-delta.down{color:#9d6b40}
.compare-total.even strong,.compare-bar-delta.even{color:#4c7180}
.compare-first{font-size:13px;font-weight:900;color:#4c7a65;background:#e6f5e9;border-radius:999px;padding:8px 12px}
.compare-note{font-size:13px;color:#425f55;line-height:1.65;margin:0}
.compare-board{display:grid;gap:10px;margin:8px 0 2px}
.compare-legend{display:flex;justify-content:flex-end;gap:14px;flex-wrap:wrap;font-size:11px;font-weight:800;color:#58726a}
.compare-legend span{display:inline-flex;align-items:center;gap:6px}
.legend-swatch{display:inline-block;width:16px;height:8px;border-radius:999px}
.legend-swatch-previous{background:#3a9c86;opacity:.7}
.legend-swatch-current{background:#3a9c86}
.compare-bar-row{background:#fff;border:1px solid #dfeae3;border-radius:15px;padding:12px 13px 10px;display:grid;gap:9px;box-shadow:0 1px 0 rgba(14,44,36,.02)}
.compare-bar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.compare-bar-type{display:flex;align-items:center;gap:8px;min-width:0}
.compare-bar-type strong{font-size:14px;color:#244f43;line-height:1.4}
.compare-bar-icon{width:28px;height:28px;border-radius:10px;background:#ecf6f1;display:grid;place-items:center;font-size:16px;flex:0 0 auto}
.compare-bar-delta{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}
.compare-bar-stack{display:grid;gap:7px}
.compare-bar-track{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px}
.compare-track-label{font-size:11px;font-weight:900;color:#678078;letter-spacing:.02em}
.compare-track-meter{position:relative;height:14px;border-radius:999px;background:#edf3ef;overflow:hidden}
.compare-bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;background:var(--compare-accent,#3a9c86)}
.compare-bar-track-previous .compare-bar-fill{background:var(--compare-accent,#3a9c86);opacity:.7}
.compare-bar-track-current .compare-bar-fill{background:var(--compare-accent,#3a9c86);opacity:1}
.compare-bar-track em{font-style:normal;font-size:12px;font-weight:900;color:#466157;font-variant-numeric:tabular-nums}
.compare-row-caption{margin:0;font-size:10px;color:#7a8d86;line-height:1.45}
.compare-disclaimer{font-size:11px;color:#71837d;line-height:1.6;margin:2px 0 0}
.next-practice{margin-top:5px;border-top:1px solid #dae9df;padding-top:15px;display:flex;justify-content:space-between;gap:14px;align-items:center}
.next-practice-copy{display:flex;align-items:center;gap:11px;min-width:0}
.next-practice-icon{flex:0 0 auto;font-size:25px;background:#e2f1e7;border-radius:14px;width:43px;height:43px;display:grid;place-items:center}
.next-practice-copy strong{font-size:15px;line-height:1.4;color:#244f43}
.next-practice-copy p{font-size:12px;line-height:1.55;color:#647c73;margin:4px 0 0}
.next-practice .button{flex-shrink:0;min-height:44px;padding:10px 16px;font-size:13px}
@media(max-width:760px){
  .result-compare{padding:16px 15px;gap:8px}
  .result-compare h2{font-size:18px}
  .compare-total strong{font-size:20px}
  .compare-legend{justify-content:flex-start;gap:10px}
  .compare-bar-row{padding:11px 11px 10px}
  .compare-bar-track{grid-template-columns:34px minmax(0,1fr) auto;gap:7px}
  .compare-bar-delta{font-size:15px}
  .next-practice{flex-direction:column;align-items:stretch;gap:12px}
  .next-practice .button{width:100%}
}
@media(max-width:420px){
  .compare-bar-head{align-items:flex-start}
  .compare-bar-delta{font-size:14px}
  .compare-bar-type strong{font-size:13px}
  .compare-bar-track{grid-template-columns:1fr;gap:4px}
  .compare-track-label{order:-1}
  .compare-bar-track em{justify-self:end}
}

/* v0.3.10 — clearly identified MOCK population average; third series and persona feedback. */
.legend-swatch-average{background:#6e89c5}
.compare-bar-track-average .compare-bar-fill{background:#6e89c5}
.compare-bar-track-average .compare-track-label{color:#4f6795}
.compare-bar-track-average .compare-track-meter{background:#edf1f9}
.compare-bar-track-average em{color:#526997}
.benchmark-mock-notice{margin:5px 0 2px;padding:9px 12px;border:1px solid #d4ddf3;border-radius:11px;background:#edf1fb;color:#435c91;font-size:12px;font-weight:850;line-height:1.5}
.benchmark-comment{display:grid;grid-template-columns:minmax(165px,.35fr) minmax(0,.65fr);gap:12px;margin-top:9px;padding:13px;border:1px solid #d8e4e9;border-radius:16px;background:linear-gradient(120deg,#f6f9ff,#fff);align-items:center}
.benchmark-comment-score{display:flex;flex-direction:column;gap:3px;border-right:1px solid #dde4ef;padding-right:10px}
.benchmark-comment-score small{font-size:11px;font-weight:850;color:#526a95}
.benchmark-comment-score strong{font-size:clamp(23px,3vw,30px);font-weight:950;font-variant-numeric:tabular-nums;line-height:1.2}
.benchmark-comment-score strong.up{color:#247e61}.benchmark-comment-score strong.down{color:#9d6b40}.benchmark-comment-score strong.even{color:#4c7180}
.benchmark-comment-score span{font-size:10px;color:#6c7d8d;line-height:1.4}
.benchmark-comment-persona{display:flex;align-items:center;gap:11px;min-width:0}
.benchmark-comment-persona img{width:68px;height:68px;object-fit:contain;flex-shrink:0;border-radius:15px;background:#fff;box-shadow:0 3px 11px rgba(47,79,103,.10)}
.benchmark-comment-persona div{display:grid;gap:3px;min-width:0}
.benchmark-comment-persona small{font-size:10px;font-weight:850;color:#587c85}
.benchmark-comment-persona strong{font-size:14px;font-weight:900;line-height:1.4;color:#1e4e49}
.benchmark-comment-persona p{margin:0;font-size:11px;color:#657e7a;line-height:1.55}
/* Preserve the v0.3.9 vertical mobile rows; no horizontal scrolling even at 320px. */
@media(max-width:660px){
  .benchmark-comment{grid-template-columns:1fr;gap:10px;padding:11px}
  .benchmark-comment-score{border-right:0;border-bottom:1px solid #dde4ef;padding:0 0 9px}
  .benchmark-comment-score strong{font-size:26px}
  .benchmark-comment-persona img{width:54px;height:54px}
  .benchmark-mock-notice{font-size:11px}
  .compare-bar-delta{font-size:13px}
}
@media(max-width:350px){
  .benchmark-comment-persona img{width:46px;height:46px}
  .compare-bar-type strong{font-size:12px}
  .compare-bar-delta{font-size:12px}
  .compare-legend{gap:8px;font-size:10px}
}

/* The current bars use category colors, not one shared mint color. */
.legend-swatch-current{background:linear-gradient(90deg,#ee9264 0%,#a47de2 26%,#4da992 53%,#e3ac39 78%,#476fba 100%)}

/* v0.3.11 — answer action directly under area drag board, visually paired score bars. */
.area-board-actions{flex:0 0 auto;display:flex;justify-content:center;align-items:center;padding:8px 12px 10px;border-top:1px solid #e1ebe3;background:#f7fbf7}
.area-board-actions #submit-answer{width:min(100%,290px);min-height:46px;padding:9px 18px;font-size:15px;border-radius:13px}
.area-controls--tune{display:block;max-width:550px;width:100%;margin:0 auto}
.area-controls--tune .area-inputs{width:100%}
.area-controls--tune .area-instruction{margin:0;text-align:center}
.area-controls--tune .area-tune{margin-top:3px}
@media(max-width:720px){
  .area-board-actions{padding:6px 9px 8px}
  .area-board-actions #submit-answer{min-height:43px;font-size:14px;width:min(100%,270px)}
  .area-controls--tune .area-instruction{font-size:11px}
}
@media(orientation:landscape) and (max-height:540px){
  .area-board-actions{padding:3px 6px 4px}
  .area-board-actions #submit-answer{min-height:32px;font-size:12px;padding:4px 14px;border-radius:9px}
}


/* v0.3.12 — measured bar endpoint guides spanning previous through mock average. */
.compare-bar-stack{
  --compare-label-width:54px;
  --compare-score-width:48px;
  --compare-column-gap:8px;
  position:relative;
  gap:7px;
}
.compare-bar-track{
  grid-template-columns:var(--compare-label-width) minmax(0,1fr) var(--compare-score-width);
  gap:var(--compare-column-gap);
  min-height:22px;
  align-items:center;
}
.compare-track-label{font-size:10px;line-height:1.2;white-space:nowrap}
.compare-bar-track em{font-size:11px;text-align:right}
.compare-guide-overlay{
  position:absolute;
  top:4px;
  bottom:4px;
  left:calc(var(--compare-label-width) + var(--compare-column-gap));
  right:calc(var(--compare-score-width) + var(--compare-column-gap));
  z-index:3;
  pointer-events:none;
}
.compare-guide{
  position:absolute;
  top:0;
  bottom:0;
  width:0;
  transform:translateX(-.5px);
  border-left:1.5px dashed #276c60;
  opacity:.9;
  filter:drop-shadow(1px 0px 0px rgba(255,255,255,.85));
}
.compare-guide-previous{border-color:#276c60}
.compare-guide-current{border-color:#1b443d}
.compare-guide-average{border-color:#526fba}
@media(max-width:420px){
  .compare-bar-stack{--compare-label-width:48px;--compare-score-width:42px;--compare-column-gap:5px;gap:6px}
  .compare-bar-track{grid-template-columns:var(--compare-label-width) minmax(0,1fr) var(--compare-score-width);gap:var(--compare-column-gap);min-height:22px}
  .compare-bar-track em{justify-self:stretch;font-size:10px}
  .compare-track-label{order:0;font-size:9px}
  .compare-guide-overlay{top:4px;bottom:4px}
}

/* v0.3.12 — use the exact same per-category accent in both record chart types. */
.stats-panel .stat-row .meter span,
.growth-panel .growth-row .meter span {background:var(--type-color,#7ec1af)}

/* v0.3.12 — persona-specific pictures on every quick-practice shortcut. */
.practice-chip--illustrated{border-color:color-mix(in srgb,var(--practice-color,#7ec1af) 24%,#d9e8e0);align-items:center;justify-content:center;text-align:center;gap:5px;min-width:0}
.practice-chip--illustrated .practice-thumb{display:block;width:62px;height:62px;max-width:100%;object-fit:contain;border-radius:13px;background:#f6faf7;border:1px solid #e2eee8;flex:0 0 auto}
.practice-chip--illustrated strong{font-size:14px;line-height:1.3}
.practice-chip--illustrated small{font-size:10px}
.home-wrap-v34 .practice-chip--illustrated{min-height:76px;padding:5px 2px;gap:3px;justify-content:center}
.home-wrap-v34 .practice-chip--illustrated .practice-thumb{width:38px;height:38px;border-radius:9px}
.home-wrap-v34 .practice-chip--illustrated strong{font-size:11px}
.home-wrap-v34 .practice-chip--illustrated small{display:none}
.practice-chip-grid.compact .practice-chip--illustrated .practice-thumb{width:74px;height:74px}
@media(max-width:720px){
  .home-wrap-v34 .practice-chip--illustrated .practice-thumb{width:38px;height:38px}
  .home-wrap-v34 .practice-chip--illustrated{min-height:70px}
  .practice-chip-grid.compact .practice-chip--illustrated .practice-thumb{width:58px;height:58px}
}
@media(max-width:370px){
  .home-wrap-v34 .practice-chip--illustrated .practice-thumb{width:30px;height:30px}
  .home-wrap-v34 .practice-chip--illustrated strong{font-size:10px}
  .home-wrap-v34 .practice-chip--illustrated{min-height:62px;padding:4px 1px}
}

/* v0.3.13 — small, evidence-based goals for short practice. */
.practice-chip--illustrated .practice-record{display:block;font-size:10px;font-weight:850;line-height:1.3;color:#477e70;white-space:nowrap;text-align:center}
.home-wrap-v34 .practice-chip--illustrated .practice-record{display:block;font-size:9px;letter-spacing:-.02em}
.practice-chip-grid.compact .practice-chip--illustrated .practice-record{display:block;font-size:11px}
.focus-goal-in-game{margin:7px 0 0!important;padding:6px 10px;background:#e8f5ed;border:1px solid #c8e8d6;border-radius:10px;color:#266b55!important;font-size:12px!important;font-weight:850;line-height:1.45!important}
.focus-result-goal{border:1px solid #b8d9ce;background:#eef8f2;border-radius:18px;display:flex;align-items:center;gap:13px;padding:15px 18px}
.focus-result-goal.is-clear{background:linear-gradient(110deg,#eaf9eb,#fff9dc);border-color:#b8ddb7}
.focus-result-symbol{font-size:28px;color:#2b9572;flex-shrink:0}
.focus-result-copy{flex:1;min-width:0}
.focus-result-copy strong{display:block;color:#1e5745;font-size:15px;line-height:1.5}
.focus-result-copy p{font-size:12px;color:#54736a;line-height:1.6;margin:2px 0 0}
.focus-result-goal .button{min-height:43px;flex-shrink:0;padding:9px 13px;font-size:12px}
.next-practice--promoted{background:#f4faf6;border:1px solid #d6e8db;border-radius:18px;padding:16px 18px;margin-top:0}
@media(max-width:720px){
  .focus-result-goal{gap:8px;flex-wrap:wrap;padding:12px}
  .focus-result-goal .button{width:100%}
  .next-practice--promoted{padding:12px}
  .home-wrap-v34 .practice-chip--illustrated .practice-record{font-size:9px}
}
@media(max-width:370px){
  .home-wrap-v34 .practice-chip--illustrated .practice-record{font-size:8px;letter-spacing:-.05em}
  .home-wrap-v34 .practice-chip--illustrated{min-height:72px}
}
@media(max-height:490px) and (orientation:landscape){.focus-goal-in-game{margin:2px 0!important;padding:3px 7px;font-size:10px!important}}


/* v0.3.14 — precise center nudging and a more focused results action area. */
.center-adjust{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.center-adjust-label{font-size:11px;color:#56776c;font-weight:900}
.center-adjust-directions{display:flex;align-items:center;justify-content:center;gap:8px}
.center-adjust-button{width:48px;min-height:42px;font-size:20px;padding:5px;line-height:1;touch-action:manipulation}
.center-adjust-button:disabled{opacity:.38;cursor:not-allowed}
.center-adjust-button:focus-visible{outline:3px solid #4ea88d;outline-offset:2px}
.result-action-panel{display:grid;gap:12px;padding:16px 18px;border:1px solid #dce8df;background:#f9fcfa;border-radius:20px}
.result-action-panel h2{margin:0;font-size:17px;color:#234b41}
.result-action-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.result-action-primary .button{min-width:0;min-height:47px;font-size:13px}
.result-more-actions{border-top:1px solid #dbe8e0;padding-top:8px}
.result-more-actions summary{cursor:pointer;list-style:none;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#49695e;font-size:12px;font-weight:850;touch-action:manipulation}
.result-more-actions summary::-webkit-details-marker{display:none}
.result-more-actions summary:focus-visible{outline:3px solid #4ea88d;outline-offset:2px;border-radius:8px}
.result-more-actions[open] summary span{transform:rotate(180deg)}
.result-action-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:8px}
.result-action-extra .button{min-width:0;min-height:43px;font-size:12px}
@media(max-width:560px){.center-adjust{gap:5px}.center-adjust-button{width:44px;min-height:40px}.center-adjust-label{width:100%;text-align:center}.result-action-panel{padding:14px 12px;gap:9px}.result-action-primary .button{font-size:12px;padding:11px 7px}.result-action-extra .button{font-size:11px;padding:10px 6px}}
@media(orientation:landscape) and (max-height:540px){.center-adjust{gap:4px}.center-adjust-label{font-size:10px}.center-adjust-directions{gap:4px}.center-adjust-button{width:35px;min-height:34px;font-size:16px}.control-tray .center-adjust-button{min-height:34px}}


/* v0.3.15: keep area instructions in their own flow row, never on top of SVG artwork. */
.board-stage.area-stage .board-corner{display:none}
.game-board-card .area-board-caption{position:static;flex:0 0 auto;display:block;padding:8px 15px;margin:0;
  border-top:1px solid #e3eee7;background:#f7fbf8;text-align:center;line-height:1.5;
  font-size:12px;font-weight:850;color:#356c5b;overflow-wrap:anywhere}
.game-board-card .area-board-caption + .area-board-actions{border-top:1px solid #e3eee7}
/* Celebrate measured repeats; no additional saved state or altered scoring. */
.focus-result-goal.is-clear .focus-result-symbol{animation:focus-star-pop .7s ease-out}
.focus-streak{margin:8px 0 2px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.focus-streak-label{font-size:14px;font-weight:950;color:#217153}
.focus-streak-stars{display:inline-flex;gap:3px;color:#e5a52d;font-size:18px;filter:drop-shadow(0 1px 1px #bf9d4f55)}
.focus-streak-stars b{display:inline-block;animation:focus-star-pop .65s cubic-bezier(.24,1.4,.5,1) both}
.focus-streak-stars b:nth-child(2){animation-delay:.12s}
.focus-streak-stars b:nth-child(3){animation-delay:.24s}
.focus-streak-stars b:nth-child(4){animation-delay:.36s}
.focus-streak-stars b:nth-child(5){animation-delay:.48s}
.focus-streak small{font-size:11px;color:#59796c;font-weight:750}
@keyframes focus-star-pop{0%{transform:scale(.6);opacity:.25}72%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.reduced-motion .focus-result-goal.is-clear .focus-result-symbol,.reduced-motion .focus-streak-stars b{animation:none}
@media(max-width:720px){.game-board-card .area-board-caption{padding:7px 10px;font-size:11px}}
@media(orientation:landscape) and (max-height:540px){.game-board-card .area-board-caption{font-size:10px;padding:3px 6px;line-height:1.25}}

/* v0.3.16 — compact progress summary, consistent for each completed short drill question. */
.focus-goal-in-game{overflow-wrap:anywhere;text-wrap:pretty}
@media(max-width:420px){.focus-goal-in-game{font-size:11px!important;line-height:1.5!important}}

/* Release candidate: accessible privacy link and data restore confirmation. */
.footer-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer-link:focus-visible{outline:3px solid #3a9c86;outline-offset:3px}
.import-warning{font-size:14px;line-height:1.7;border:1px solid #e0b589;border-radius:12px;padding:13px;background:#fff6eb;color:#624531}
@media(max-width:460px){.result-actions{gap:8px}.result-actions .button{min-height:44px}}