:root{
 --bg:#f2f6fd;
 --surface:#fff;
 --ink:#232a3d;
 --sub:#5c6680;
 --line:#dbe2ef;
 --blue:#3d6bf5;
 --blue-dark:#2a4fc4;
 --ok:#15a36f;
 --ok-soft:#e5f8ef;
 --ng:#ee4b57;
 --ng-soft:#ffeef0;
 --font:"Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","BIZ UDPGothic","M PLUS Rounded 1c","Kosugi Maru","Hiragino Sans","Yu Gothic UI","Meiryo","Noto Sans JP","Noto Sans CJK JP",sans-serif;
 --latin:"Avenir Next","Segoe UI",Roboto,"Helvetica Neue",Arial,var(--font);
 --w:720px;
 font-family:var(--font);color:var(--ink);background:var(--bg);
 font-synthesis:none;-webkit-text-size-adjust:100%;line-height:1.6;
}
[style*="--h"]{
 --u:hsl(var(--h) 80% 56%);
 --u-mid:hsl(var(--h) 85% 84%);
 --u-soft:hsl(var(--h) 95% 95%);
 --u-ink:hsl(var(--h) 65% 32%);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg)}
h1,h2,p,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;background:none;border:0;padding:0}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
[lang="en"]{font-family:var(--latin)}
ruby{ruby-align:center}
rt{font-size:.5em;font-weight:400;line-height:1;color:var(--sub)}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Header */
.top{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.bar{max-width:var(--w);margin:auto;padding:0 8px;height:56px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--ink)}
button.icon-btn:hover{background:var(--bg)}
.title{text-align:center;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.main{max-width:var(--w);margin:auto;padding:20px 16px 56px}
.section-title{font-size:16px;font-weight:700;margin:28px 0 12px}
.block:first-child .section-title{margin-top:4px}
.empty{padding:20px;background:var(--surface);border-radius:16px;color:var(--sub);font-size:14px;text-align:center}
.note{margin-top:16px;font-size:13px;color:var(--sub)}

/* Buttons: one primary per screen, secondary in equal-width pairs */
.primary,.sub-btn{min-height:52px;padding:0 20px;border-radius:14px;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform .08s,box-shadow .08s}
.primary{background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-dark)}
.sub-btn{background:var(--surface);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.primary:active:not(:disabled),.sub-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-dark)}
.sub-btn:active{box-shadow:0 1px 0 var(--line)}
.primary:disabled{background:#b9c6ec;box-shadow:0 4px 0 #a3b2dd}
.wide{width:100%}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Home */
.random-card{width:100%;min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-radius:20px;text-align:left;
 background:#ffd34d;box-shadow:0 5px 0 #e3aa1c;color:#3b2a00;transition:transform .08s,box-shadow .08s}
.random-card:active{transform:translateY(3px);box-shadow:0 2px 0 #e3aa1c}
.random-text{display:flex;flex-direction:column;gap:4px}
.random-text b{font-size:clamp(21px,5.6vw,26px)}
.random-text small{font-size:14px;color:#6b5210}
.fan{position:relative;width:86px;height:70px;flex:none}
.fan i{position:absolute;top:4px;left:22px;width:44px;height:60px;border-radius:8px;background:#fff;border:3px solid hsl(var(--h) 80% 60%);transform-origin:50% 100%;transition:transform .15s}
.fan i:nth-child(1){transform:rotate(-18deg)}
.fan i:nth-child(3){transform:rotate(18deg)}
.random-card:hover .fan i:nth-child(1){transform:rotate(-24deg)}
.random-card:hover .fan i:nth-child(3){transform:rotate(24deg)}
.view-home .pair{margin-top:14px}
.unit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.unit{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;align-items:center;column-gap:10px;row-gap:10px;min-height:92px;padding:12px;text-align:left;
 background:var(--surface);border:2px solid var(--u-mid);border-radius:16px;box-shadow:0 4px 0 var(--u-mid);transition:transform .08s,box-shadow .08s}
.unit:active{transform:translateY(3px);box-shadow:0 1px 0 var(--u-mid)}
.unit-name{font-size:15px;font-weight:700;line-height:1.35}
.unit-progress{grid-column:1/-1;height:6px;border-radius:3px;background:var(--u-soft);overflow:hidden}
.unit-progress span{display:block;height:100%;background:var(--u)}
.badge{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 6px;border-radius:10px;background:var(--u-soft);color:var(--u-ink);border:2px solid var(--u-mid);font-family:var(--latin);font-weight:800;font-size:16px;line-height:1;flex:none}

/* Level select */
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin-bottom:16px;background:var(--surface);border:2px solid var(--line);border-radius:16px}
.seg{min-height:44px;border-radius:12px;font-weight:700;color:var(--sub)}
.seg.is-on{background:var(--u-ink);color:#fff}
.level-list{display:grid;gap:12px}
.level{width:100%;display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 16px 12px 12px;text-align:left;
 background:var(--surface);border:2px solid var(--u-mid);border-radius:16px;box-shadow:0 4px 0 var(--u-mid);transition:transform .08s,box-shadow .08s}
.level:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--u-mid)}
.level:disabled{border-color:var(--line);box-shadow:none;color:#9aa2b5}
.level-no{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--u-soft);border:3px solid var(--u);color:var(--u-ink);font-family:var(--latin);font-weight:800;font-size:20px}
.level:disabled .level-no{border-color:var(--line);background:var(--bg);color:#9aa2b5}
.level-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.level-body b{font-size:17px}
.level-body small{font-size:13px;color:var(--sub)}
.best{flex:none;display:flex;flex-direction:column;align-items:flex-end;font-size:11px;font-weight:700;color:var(--u-ink);line-height:1.2}
.best b{font-family:var(--latin);font-size:19px}

/* Play */
.play-top .bar{grid-template-columns:44px 1fr auto}
.meter{height:12px;border-radius:6px;background:var(--bg);overflow:hidden}
.meter>div{height:100%;border-radius:6px;background:var(--blue);transition:width .25s}
.play-count{min-width:44px;text-align:right;padding-right:6px;font-family:var(--latin);font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}
.play-count b{font-size:18px;color:var(--ink)}
.view-play{padding-top:14px}
.view-play.has-sheet{padding-bottom:280px}
.play-info{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.play-info .badge{min-width:30px;height:30px;font-size:14px;border-radius:8px}
.play-level{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-score{flex:none;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub)}
.play-score b{font-family:var(--latin);font-size:20px;color:var(--ink);margin-right:2px}
.streak{padding:2px 10px;border-radius:999px;background:#fff1c2;color:#8a5a00;font-weight:700;font-size:12px}

.sheet{background:var(--surface);border:2px solid var(--u-mid);border-radius:20px;padding:16px 20px 20px}
.instruction{display:inline-block;font-size:13px;font-weight:700;color:var(--u-ink);background:var(--u-soft);border-radius:999px;padding:2px 12px;margin-bottom:10px}
.yomi{font-weight:700;font-size:clamp(21px,5.6vw,30px);line-height:1.7;overflow-wrap:anywhere}
.yomi-lower{display:block;font-size:.7em;color:var(--sub)}
.sentence{font-weight:700;font-size:clamp(21px,5.4vw,28px);line-height:1.55;overflow-wrap:anywhere}
.sentence mark{background:#ffe48a;color:inherit;padding:0 3px;border-radius:4px}
.target{text-decoration:underline 4px var(--ng);text-underline-offset:6px}
.caret{color:var(--ng);font-weight:800;font-size:.85em;vertical-align:-.2em}
.context{margin-top:8px;font-size:14px;color:var(--sub)}

.field{margin-top:14px;padding:12px;border-radius:20px;background:var(--u-soft)}
.board{display:grid;gap:10px}
.grid-9{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{position:relative;display:flex;align-items:center;justify-content:center;min-height:100px;padding:12px 10px;overflow-wrap:anywhere;
 background:var(--surface);border:2px solid var(--u-mid);border-radius:14px;box-shadow:0 4px 0 var(--u-mid);transition:transform .08s,box-shadow .08s,opacity .15s}
.card:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--u-mid)}
.card-text{position:relative;z-index:1;display:block;text-align:center;font-weight:700;font-size:clamp(15px,3.8vw,18px);line-height:1.55}
.grid-9 .card{min-height:clamp(112px,15.5vh,160px);padding:8px 6px;border-radius:12px}
.grid-9 .card-text{font-size:clamp(12.5px,3.4vw,16px);line-height:1.5}
.rule .card-text{text-align:left;width:100%}
.card-upper{display:block;font-size:.84em;font-weight:500;color:var(--sub)}
.card-lower{display:block}
.sentence-card{justify-content:flex-start}
.sentence-card .card-text{text-align:left}
.card.is-dim{opacity:.45}
.card.is-right{border-color:var(--ok);background:var(--ok-soft);box-shadow:0 4px 0 #9fdcc3}
.card.is-picked{border-color:var(--ng);background:var(--ng-soft);box-shadow:0 4px 0 #f7b3b8}
.stamp{position:absolute;pointer-events:none;animation:stamp .2s ease-out both}
.stamp.ok{top:50%;left:50%;height:84%;max-height:110px;width:auto;aspect-ratio:1;translate:-50% -50%;border:6px solid var(--ok);border-radius:50%;font-size:0;opacity:.35}
.stamp.ng{top:4px;right:8px;color:var(--ng);font-size:30px;font-weight:800;line-height:1}
@keyframes stamp{from{opacity:0;scale:1.4}}

.compose{display:flex;flex-direction:column;gap:12px}
.answer-box{background:var(--surface);border:2px solid var(--u-mid);border-radius:14px;overflow:hidden}
.answer-line{min-height:60px;padding:14px 16px;font-size:20px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.placeholder{font-family:var(--font);font-weight:400;font-size:15px;color:var(--sub)}
.answer-tools{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--u-soft)}
.tool{min-height:44px;font-size:14px;font-weight:700;color:var(--u-ink)}
.tool+.tool{border-left:2px solid var(--u-soft)}
.tool:disabled{color:#b4bccb}
.tokens{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:4px 0}
.token{min-height:48px;min-width:48px;padding:0 14px;background:var(--surface);border:2px solid var(--u-mid);border-radius:12px;box-shadow:0 3px 0 var(--u-mid);font-size:18px;font-weight:700}
.token:disabled{opacity:.25;box-shadow:none}
.answer-input{width:100%;min-height:56px;padding:0 16px;background:var(--surface);border:2px solid var(--u-mid);border-radius:14px;font-size:20px;font-weight:700}
.answer-input:focus{outline:none;border-color:var(--u)}
.answer-input:disabled{opacity:1;color:var(--sub)}

.feedback{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-radius:24px 24px 0 0;
 box-shadow:0 -8px 24px #232a3d26;padding:18px 16px calc(16px + env(safe-area-inset-bottom));animation:rise .2s ease-out}
.feedback::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:24px 24px 0 0;background:var(--ok)}
.feedback.bad::before{background:var(--ng)}
.feedback-inner{max-width:calc(var(--w) - 32px);margin:auto;display:flex;flex-direction:column;gap:6px}
.verdict{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:var(--ok)}
.bad .verdict{color:var(--ng)}
.verdict-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:currentColor;font-size:0;position:relative}
.verdict-mark::after{content:"";width:14px;height:14px;border:4px solid #fff;border-radius:50%}
.bad .verdict-mark::after{width:auto;height:auto;border:0;border-radius:0;content:"×";color:#fff;font-size:24px;font-weight:800;line-height:1}
.answer-shown{font-size:15px}
.answer-shown strong{font-size:17px}
.explain{font-size:14px;color:var(--sub);line-height:1.7;max-height:28vh;overflow:auto}
.feedback .primary{margin-top:8px}
@keyframes rise{from{transform:translateY(24px);opacity:0}}

/* Result */
.result{text-align:center}
.result-where{font-size:14px;font-weight:700;color:var(--sub);line-height:1.5}
.result-main{margin-top:8px;display:flex;align-items:baseline;justify-content:center;gap:6px;font-family:var(--latin);font-weight:800;color:var(--u-ink)}
.result-main b{font-size:80px;line-height:1}
.result-main span{font-size:28px}
.result-message{margin-top:6px;font-size:18px;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:20px}
.stats div{padding:12px 6px;background:var(--surface);border-radius:14px}
.stats dt{font-size:12px;color:var(--sub)}
.stats dd{font-family:var(--latin);font-size:22px;font-weight:800;line-height:1.3}
.stats small{font-family:var(--font);font-size:12px;font-weight:700;margin-left:2px}
.stats em{display:block;font-style:normal;font-size:11px;color:#c47f00}
.actions{display:grid;gap:14px;margin-top:22px}

/* Lists, tables */
.list{background:var(--surface);border-radius:16px;overflow:hidden}
.list>li+li{border-top:1px solid var(--line)}
.rule-row,.unit-row,.history-row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.rule-row>div{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.review-row{align-items:flex-start}
.unit-row span:not(.badge),.h-what{flex:1;min-width:0;font-size:14px;font-weight:700}
.unit-row b,.h-score{font-family:var(--latin);font-size:16px;font-variant-numeric:tabular-nums}
.h-what{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-what small{display:block;font-size:12px;font-weight:400;color:var(--sub)}
.rule-item{display:flex;flex-direction:column;gap:2px;padding:12px 16px;overflow-wrap:anywhere}
.r-id{display:flex;align-items:center;gap:8px;font-family:var(--latin);font-size:12px;font-weight:700;color:var(--sub)}
.tag{font-family:var(--font);font-weight:700;font-size:11px;padding:1px 8px;border-radius:999px;background:var(--bg)}
.r-upper{font-size:14px;color:var(--sub)}
.r-lower{font-size:16px;font-weight:700}
.r-explain{font-size:13px;color:var(--sub);margin-top:4px;line-height:1.7}
.r-meta{font-size:12px;color:var(--sub);margin-top:2px}
.rule-item.is-ref{background:#f8f9fc}
.search{position:sticky;top:calc(57px + env(safe-area-inset-top));z-index:5;display:flex;align-items:center;gap:12px;padding:12px 0;margin-top:-12px;background:var(--bg)}
.rule-search{flex:1;min-width:0;min-height:50px;padding:0 16px;background:var(--surface);border:2px solid var(--line);border-radius:14px;font-size:16px}
.rule-search:focus{outline:none;border-color:var(--blue)}
.search-count{flex:none;font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.rule-group{margin-top:20px}
.group-title{display:flex;align-items:center;gap:10px;font-size:16px;margin-bottom:10px}

.table-wrap{overflow-x:auto;background:var(--surface);border-radius:16px}
.table{width:100%;border-collapse:collapse;font-family:var(--latin);font-variant-numeric:tabular-nums;font-size:14px}
.table th,.table td{padding:6px 4px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.table tr:last-child>*{border-bottom:0}
.table thead th{font-size:12px;font-weight:600;color:var(--sub);padding-top:10px}
.table th[scope="row"]{padding-left:10px;text-align:left;font-family:var(--font);font-size:13px}
.table th[scope="row"] .badge{min-width:30px;height:30px;font-size:13px;border-radius:8px}
.table td{font-weight:700}
.table td.none{color:#c3cad8;font-weight:400}

/* Settings */
.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px}
.setting b{font-size:16px}
.setting p{font-size:13px;color:var(--sub)}
.toggle{position:relative;flex:none;width:58px;height:34px;border-radius:17px;background:#c9d0de;transition:background .15s}
.toggle .knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}
.toggle.is-on{background:var(--ok)}
.toggle.is-on .knob{transform:translateX(24px)}

.fatal{min-height:70vh;display:grid;place-content:center;gap:12px;text-align:center;padding:24px}
.fatal h1{font-size:22px}
.loading{margin:38vh auto;text-align:center;font-size:22px;font-weight:700;color:var(--blue)}

@media(min-width:600px){
 .unit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .field{padding:16px}
 .board{gap:12px}
 .card{min-height:112px}
 .grid-9 .card{min-height:140px}
}
@media(max-width:420px){
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}