:root{
  --navy:#12345b;--navy-dark:#0c2949;--text:#17304f;--muted:#66788c;--line:#c9d3de;
  --blue:#dceefe;--blue-border:#8dbde8;--green:#e5f3d8;--green-border:#9fc986;
  --yellow:#fff0bd;--yellow-border:#e6c35a;--red-soft:#ffe4e4;--shadow:0 14px 35px rgba(18,52,91,.1)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{margin:0;background:linear-gradient(135deg,#f9f7f0,#f2f6f8);color:var(--text);font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif}
button{font:inherit;color:inherit;touch-action:manipulation}.hidden{display:none!important}
.app-shell{width:min(1380px,calc(100% - 24px));min-height:calc(100vh - 24px);margin:12px auto;background:#fffdf8;border:1px solid rgba(18,52,91,.2);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.topbar{min-height:68px;padding:10px 18px;background:linear-gradient(90deg,var(--navy-dark),var(--navy));color:#fff;display:flex;align-items:center;justify-content:space-between}
.topbar h1,.eyebrow{margin:0}.eyebrow{font-size:.72rem;opacity:.78}.topbar h1{font-size:1.3rem}.screen{display:none;min-height:calc(100vh - 92px);padding:clamp(18px,3vw,38px)}.screen.active{display:block}
.hero-card,.content-card{width:min(920px,100%);margin:auto;text-align:center}.wide-select-card{width:min(1180px,100%)}
.subject-label{display:inline-block;padding:7px 13px;border:1px solid #bac7d3;border-radius:999px;background:#fff;color:var(--muted);font-weight:700}
.hero-card h2,.select-card h2,.result-card h2{margin:12px 0 0;color:var(--navy);font-size:clamp(2rem,5vw,3.5rem)}
.lead{color:var(--muted);font-weight:700;line-height:1.8}.lead.small{margin-bottom:18px}.note{color:var(--muted);font-weight:700}
.mode-list,.level-list,.difficulty-list,.borrow-list{display:grid;gap:15px;width:min(1040px,100%);margin:22px auto}.mode-list{width:min(780px,100%)}
.mode-card,.level-card,.difficulty-card,.borrow-card{border:1px solid var(--line);border-radius:14px;cursor:pointer;box-shadow:0 6px 14px rgba(18,52,91,.06);transition:.12s}
.mode-card:hover,.level-card:hover,.difficulty-card:hover,.borrow-card:hover,.keypad button:hover{transform:translateY(-2px)}
.mode-card{min-height:90px;padding:18px;display:grid;gap:7px}.mode-name{font-size:1.6rem;font-weight:900}.mode-description,.level-card small,.difficulty-card small{color:#40556c;font-weight:700}
.blue{background:var(--blue);border-color:var(--blue-border)}.green{background:var(--green);border-color:var(--green-border)}.yellow{background:var(--yellow);border-color:var(--yellow-border)}
.level-list{grid-template-columns:repeat(3,minmax(0,1fr))}.level-card{min-height:150px;padding:18px 14px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px}.level-card strong{font-size:1.22rem}.carry-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.78rem;font-weight:900}.carry-badge.no-carry{background:#fff;border:1px solid #8dbde8;color:#245d8c}.carry-badge.carry{background:#fff1e7;border:1px solid #e5a063;color:#9a4b17}
.borrow-list{grid-template-columns:repeat(3,minmax(0,1fr));max-width:850px}.borrow-card{min-height:135px;padding:18px}.borrow-card strong{font-size:1.28rem}
.difficulty-list{grid-template-columns:repeat(5,minmax(0,1fr))}.difficulty-card{min-height:145px;padding:16px;display:grid;place-content:center;gap:10px}.difficulty-card strong{font-size:1.28rem}.difficulty-card small{font-size:1.08rem}.extreme{background:#ffd5df;border-color:#e98aa0}.hard{background:#ffe3e3;border-color:#efaaaa}.normal{background:var(--yellow);border-color:var(--yellow-border)}.gentle{background:#e7f4dc;border-color:#a4c987}.slow{background:#dceefe;border-color:#8dbde8}
.outline-button,.small-button,.primary-button,.secondary-button{border-radius:10px;font-weight:900;cursor:pointer}.outline-button,.small-button{background:#fff;border:1px solid #aebcc9;color:var(--navy);padding:10px 16px}.compact{padding:8px 10px;font-size:.85rem}
.play-layout{width:min(1300px,100%);margin:auto;display:grid;grid-template-columns:170px minmax(430px,1fr) minmax(300px,390px);gap:16px;align-items:stretch}
.status-panel,.problem-panel,.work-panel,.count-panel{border:1px solid var(--line);background:#fff;border-radius:18px;box-shadow:0 7px 20px rgba(18,52,91,.06)}
.status-panel{padding:16px;display:flex;flex-direction:column;gap:18px}.status-title{margin:0;font-size:1.18rem;font-weight:900}.status-subtitle{margin:5px 0;color:var(--muted);font-weight:800}.status-list{margin:0}.status-list>div{padding:10px 0;border-bottom:1px solid #e4e9ee}.status-list dt{font-size:.8rem;color:var(--muted);font-weight:800}.status-list dd{margin:4px 0 0;font-size:1.1rem;font-weight:900}.lives{font-size:1.4rem;color:#d84d4d;letter-spacing:.08em}.lives-block{margin-top:auto}.lives-block p{margin:0;color:var(--muted);font-size:.8rem;font-weight:800}
.timer-panel{margin-top:4px;padding:13px 8px;text-align:center;border:1px solid #e9d796;border-radius:14px;background:#fffaf0}.timer-panel p{margin:0;color:#6d5a25;font-weight:900}.timer-panel strong{display:block;font-size:2rem}.timer-panel span{color:var(--muted);font-size:.8rem}.timer-ring{width:58px;height:58px;margin:8px auto 0}.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.timer-track,.timer-progress{fill:none;stroke-width:6}.timer-track{stroke:#e6e6df}.timer-progress{stroke:#7abb8b;stroke-linecap:round;stroke-dasharray:132;stroke-dashoffset:0}
.problem-panel{padding:clamp(18px,2.5vw,30px);display:flex;flex-direction:column;justify-content:center}.feedback{min-height:30px;text-align:center;font-size:1.05rem;font-weight:900}.feedback.correct{color:#2b7a35}.feedback.wrong{color:#bd3d3d}.problem-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,190px);gap:14px;margin:8px 0 20px}.problem-text,.answer-display{min-height:104px;border:1px solid #aebbc8;border-radius:14px;background:#fffdfa;display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:900}.problem-text{font-size:clamp(1.8rem,4.4vw,3.8rem);white-space:nowrap}.problem-text.problem-text-long{font-size:clamp(1.65rem,3.35vw,3rem);letter-spacing:-.02em}.problem-text.problem-text-longest{font-size:clamp(1.5rem,2.85vw,2.6rem);letter-spacing:-.035em}.answer-display{font-size:clamp(2.2rem,4.8vw,4rem)}.placeholder{color:#b4bdc6}.keypad{width:min(460px,100%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.keypad button{min-height:58px;border:1px solid #aebbc8;border-radius:11px;background:#fff;font-size:1.55rem;font-weight:900;cursor:pointer}.keypad .clear-key{background:var(--red-soft);font-size:1rem}.keypad .enter-key{background:var(--blue);font-size:1rem}.keyboard-note{margin:12px 0 0;color:var(--muted);text-align:center;font-size:.8rem;font-weight:700}
.work-panel{padding:14px;display:flex;flex-direction:column;min-height:600px}.work-heading,.count-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;text-align:left}.work-heading strong,.work-heading small,.count-heading strong,.count-heading small{display:block}.work-heading small,.count-heading small{color:var(--muted);font-size:.75rem}.work-panel canvas{display:block;width:100%;flex:1;min-height:500px;border:2px solid #7f8fa1;border-radius:12px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 96px,#dfe7ee 97px,#fff 98px);touch-action:none;cursor:crosshair}
.with-bottom-hint{grid-template-columns:170px minmax(0,1fr)}.with-bottom-hint .count-panel{grid-column:1/-1}.count-panel{padding:14px;min-height:190px;background:linear-gradient(180deg,#fff,#f6fbff)}.count-hint-wrap{position:relative;min-height:120px;border:2px solid #9db3c8;border-radius:16px;background:#fff;overflow:hidden}.dot-strip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:20px;padding:20px 28px;z-index:1}.count-dot{width:42px;height:42px;border:4px solid #2d6598;border-radius:50%;background:#fff;flex:0 0 auto}.count-hint-wrap canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;cursor:crosshair}
.result-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;text-align:left}.result-summary,.mistake-box{padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff}.result-summary>div{display:grid;grid-template-columns:1fr auto;padding:11px 0;border-bottom:1px solid #e4e9ee}.result-summary dd{margin:0;font-size:1.3rem;font-weight:900}.mistake-list{max-height:280px;overflow:auto}.mistake-item{padding:10px 0;border-bottom:1px solid #e4e9ee}.mistake-item strong,.mistake-item span{display:block}.mistake-item span{color:var(--muted)}.no-mistakes{color:#2b7a35;font-weight:900}.result-actions{display:flex;justify-content:center;gap:14px;margin-top:22px}.primary-button,.secondary-button{min-width:190px;padding:13px 20px}.primary-button{border:1px solid var(--blue-border);background:var(--blue)}.secondary-button{border:1px solid #aebcc8;background:#f2f3f4}.usage-dialog{width:min(620px,calc(100% - 30px));border:0;border-radius:18px;box-shadow:0 22px 60px rgba(0,0,0,.26)}.usage-dialog::backdrop{background:rgba(12,41,73,.45)}.usage-dialog form{padding:12px}.usage-dialog p{line-height:1.8}
@media(max-width:1120px){.level-list{grid-template-columns:repeat(2,minmax(0,1fr))}.difficulty-list{grid-template-columns:repeat(2,minmax(0,1fr))}.difficulty-card:last-child{grid-column:1/-1}.play-layout{grid-template-columns:150px 1fr}.work-panel{grid-column:1/-1;min-height:330px}.work-panel canvas{min-height:260px}.with-bottom-hint{grid-template-columns:150px 1fr}.count-dot{width:36px;height:36px}.dot-strip{gap:15px}}
@media(max-width:680px){.app-shell{width:100%;min-height:100vh;margin:0;border:0;border-radius:0}.screen{padding:14px}.level-list,.difficulty-list,.borrow-list{grid-template-columns:1fr}.difficulty-card:last-child{grid-column:auto}.play-layout,.with-bottom-hint{grid-template-columns:1fr}.status-panel{display:grid;grid-template-columns:1fr auto}.status-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.status-list>div{border:1px solid #e1e6eb;border-radius:9px;padding:7px}.problem-row{grid-template-columns:1fr;gap:8px}.problem-text,.answer-display{min-height:78px}.work-panel{grid-column:auto;min-height:300px}.work-panel canvas{min-height:240px}.with-bottom-hint .count-panel{grid-column:auto}.count-heading{align-items:flex-start;flex-direction:column}.count-hint-wrap{min-height:180px}.dot-strip{flex-wrap:wrap;align-content:center;gap:12px;padding:18px}.count-dot{width:34px;height:34px}.result-grid{grid-template-columns:1fr}.result-actions{flex-direction:column}.primary-button,.secondary-button{width:100%}}
@media(orientation:landscape) and (max-height:680px) and (min-width:700px){.topbar{min-height:52px}.screen{padding:10px 14px;min-height:calc(100vh - 62px)}.play-layout{grid-template-columns:145px minmax(400px,1fr) minmax(250px,330px);gap:10px}.with-bottom-hint{grid-template-columns:145px minmax(400px,1fr)}.problem-panel{padding:10px 16px}.problem-row{margin:2px 0 8px}.problem-text,.answer-display{min-height:68px}.keypad{gap:5px}.keypad button{min-height:40px}.keyboard-note{margin-top:5px}.work-panel{grid-column:auto;min-height:0;padding:9px}.work-panel canvas{min-height:360px}.count-panel{min-height:165px;padding:9px}.count-hint-wrap{min-height:105px}.count-dot{width:32px;height:32px}.dot-strip{gap:14px;padding:14px 20px}.status-panel{padding:10px;gap:8px}.status-list>div{padding:6px 0}.timer-ring{width:42px;height:42px}}

@media(orientation:landscape) and (min-width:700px){.problem-text.problem-text-long{font-size:clamp(1.6rem,3vw,2.85rem)}.problem-text.problem-text-longest{font-size:clamp(1.45rem,2.6vw,2.4rem)}}

/* 「マスターへの道」シリーズ共通UI */
:root{--navy:#3f8061;--navy-dark:#30664c;--text:#2f4037;--muted:#6b7b72;--line:#d6e0da;--blue:#e5edf7;--blue-border:#7897bd;--green:#e7f2e9;--green-border:#7aa384;--yellow:#f8edcf;--yellow-border:#d1ae5d;--red-soft:#f9e7e9;--shadow:0 8px 22px rgba(37,68,52,.08)}
body{background:#f4f7f5;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif}
.app-shell{background:#fff;border-color:var(--line);border-radius:20px;box-shadow:var(--shadow)}
.topbar{min-height:72px;padding:10px 20px;background:#fff;color:var(--text);border-bottom:2px solid #dfe8e2}
.eyebrow{color:var(--navy-dark);font-weight:800;letter-spacing:.1em;opacity:1}
.topbar h1{display:flex;align-items:baseline;gap:.38em;font-size:1.55rem;letter-spacing:.02em}
.title-name{color:var(--navy-dark)}
.title-series{font-size:.68em;color:var(--text)}
.hero-card{padding:clamp(20px,3vw,34px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.mode-card,.level-card,.difficulty-card,.borrow-card{border-radius:16px;box-shadow:0 4px 0 rgba(49,78,62,.13)}
.outline-button,.small-button,.primary-button,.secondary-button{border-radius:14px}
.outline-button,.small-button{background:#edf3ef;border-color:#c7d6cd;color:var(--navy-dark)}
.small-button{min-width:104px;min-height:50px}
.result-card{padding:30px 24px;border:1px solid var(--line);border-top:6px solid var(--navy);border-radius:18px;box-shadow:var(--shadow)}
.primary-button,.secondary-button{min-height:50px}
.primary-button{border-color:var(--navy);background:var(--navy);color:#fff}
.secondary-button{border-color:#c7d6cd;background:#edf3ef}