:root{color-scheme:dark;--bg:#0c142a;--panel:#172644;--ink:#f3f7ff;--muted:#bac8e5;--cyan:#71eadf;--gold:#ffda8e;--line:#405278;font-family:system-ui,"Noto Sans CJK JP",sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at top,#273b67,var(--bg) 67%);color:var(--ink);min-height:100dvh}
main{max-width:820px;margin:auto;padding:clamp(12px,3vw,26px)}
header,.brand,.hud,.result-actions{display:flex;align-items:center;gap:12px}
header{justify-content:space-between;margin-bottom:16px}
.brand p{margin:0;color:var(--muted);font-size:.75rem;letter-spacing:.12em}
.logo{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:var(--cyan);color:#102b37;font-weight:900;font-size:1.55rem}
h1{margin:0;font-size:clamp(1.08rem,4.1vw,1.7rem)}
h2{font-size:clamp(2rem,6vw,3.4rem);line-height:1.24;margin:.25em 0}
.menu{padding:clamp(18px,5vw,44px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#233758,var(--panel))}
.eyebrow{color:var(--cyan);font-weight:800;letter-spacing:.08em;margin-top:0}
.settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0}
label{display:grid;gap:5px;color:var(--muted);font-weight:700}
select,button{font:inherit}
select,button.quiet{background:#172744;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.6em .75em}
button{cursor:pointer;font-weight:800;touch-action:manipulation}
button:focus-visible,select:focus-visible{outline:3px solid #fff;outline-offset:2px}
button:disabled{cursor:default;opacity:.58}
button.primary{background:var(--cyan);color:#102733;border:1px solid transparent;border-radius:12px;padding:.65em 1.15em}
.hud{justify-content:space-between;margin-bottom:8px;color:var(--muted);font-weight:750}
.lane{height:clamp(150px,30vh,270px);position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:repeating-linear-gradient(0deg,transparent 0 29px,#9cc3ff18 29px 30px),linear-gradient(#101d37,#21375b)}
.fall{position:absolute;top:0;left:50%;width:max-content;max-width:calc(100% - 16px);transform:translate(-50%,8px);text-align:center;background:#f4f8ff;color:#172845;border:2px solid #9fb7e1;border-radius:13px;padding:3px 12px 8px;font-size:clamp(1.15rem,4.9vw,2.05rem);font-weight:850;line-height:1.4;z-index:1}
.reading{display:block;font-size:.63em;color:#275582;line-height:1.35}
.blank{color:#036b68;background:#cef3ed;border-radius:5px;padding:0 .12em}
.floor{position:absolute;bottom:10px;left:12px;right:12px;border-top:3px dashed var(--cyan);text-align:right;font-size:.65rem;color:var(--cyan)}
.overlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#0c142ade;font-size:1.6rem;font-weight:800}
.time-track{height:5px;background:#35446a;margin:7px 1px 10px;border-radius:10px;overflow:hidden}
#time{height:100%;background:var(--cyan);transform-origin:left}
.forge{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.panel,.assemble{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:7px 9px}
.panel-a{--accent:var(--cyan)}
.panel-b{--accent:var(--gold)}
.panel h3{margin:0 0 5px;font-size:.86rem;color:var(--accent)}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
@media(min-width:650px){.choices{grid-template-columns:repeat(6,minmax(0,1fr))}}
.part{position:relative;min-width:0;height:clamp(51px,9vh,73px);padding:0;display:grid;place-items:center;background:#233657;color:var(--ink);border:1px solid #536487;border-radius:8px}
.part[aria-pressed=true]{border:2px solid var(--accent);background:#364c71;box-shadow:inset 0 -3px var(--accent)}
.part small{position:absolute;bottom:1px;right:4px;color:var(--muted);font-size:.64rem}
.glyph{position:relative;display:inline-grid;place-items:center;width:1em;height:1em;font:800 clamp(1.6rem,6vw,2.65rem)/1 "Noto Sans CJK JP",system-ui,sans-serif}
.glyph > span{position:absolute;inset:0;display:grid;place-items:center}
.glyph .clip-a{clip-path:inset(0 50% 0 0)}
.glyph .clip-b{clip-path:inset(0 0 0 50%)}
.part .clip-a{transform:translateX(.24em)}
.part .clip-b{transform:translateX(-.24em)}
.assemble{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:16px}
.preview{min-width:88px;min-height:50px;display:grid;place-items:center;background:#101b32;border-radius:8px;font-size:1.4rem;font-weight:850;color:var(--ink)}
.preview .a{color:var(--cyan)}
.preview .b{color:var(--gold)}
.preview .join{display:flex;align-items:center;gap:3px;padding:0 6px}
.preview .stack{flex-direction:column;gap:0;line-height:1.05}
.feedback{min-height:1.5em;margin:6px 0;color:var(--gold);font-weight:800}
.muted{color:var(--muted);font-size:.82rem}
.keys{margin:6px 0}
.result-actions{flex-wrap:wrap}
@media(max-width:540px){.settings{grid-template-columns:1fr}.menu{padding:18px}.keys{display:none}}
.hit-effect{position:fixed;z-index:10;width:0;height:0;pointer-events:none}
.hit-shot,.hit-ring,.hit-spark{position:absolute;left:0;top:0}
.hit-shot{display:grid;place-items:center;width:52px;height:52px;border:2px solid #d4fff8;border-radius:13px;background:#63f6de;color:#102733;font-size:2rem;font-weight:900;box-shadow:0 0 22px #58ffe9,0 10px 26px #45b9ff;animation:kanji-shot .35s cubic-bezier(.55,.04,.92,.63) both}
.hit-ring{width:49px;height:49px;border:4px solid #fff4b5;border-radius:50%;box-shadow:0 0 24px #ffce55;animation:kanji-ring .48s .35s ease-out both}
.hit-spark{width:8px;height:8px;border-radius:2px;background:#fff1aa;box-shadow:0 0 9px #ffab57;animation:kanji-spark .46s .35s ease-out both}
.hit-spark:nth-of-type(2n){background:#7affed;box-shadow:0 0 9px #4fe4ff}
.hit-card{animation:kanji-card .40s .35s ease-out}
.hit-card .blank{animation:kanji-fill .30s .35s both}
@keyframes kanji-shot{
  0%{transform:translate(calc(var(--from-x) - 50%),calc(var(--from-y) - 50%)) scale(.8);opacity:1}
  95%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.12);opacity:0}
}
@keyframes kanji-ring{
  0%{transform:translate(-50%,-50%) scale(.55);opacity:0}
  14%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(3.6);opacity:0}
}
@keyframes kanji-spark{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  12%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(145deg) scale(.15);opacity:0}
}
@keyframes kanji-card{
  0%,100%{translate:0;filter:none}
  15%{translate:0 -5px;filter:brightness(1.35) drop-shadow(0 0 9px #ffe798)}
  32%{translate:5px 2px}
  52%{translate:-3px 0}
}
@keyframes kanji-fill{
  0%{color:transparent}
  45%{color:#a44f00;background:#fff0a1}
  100%{color:#036b68}
}