/* hodoku: fixed panels, moving threads */
:root { color-scheme: dark; --bg:#20212b; --ink:#eeeaf1; --dim:#9693a8; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,sans-serif; touch-action:manipulation; }
button,a { color:inherit; touch-action:manipulation; }
button { font:inherit; cursor:pointer; border:0; background:none; }
button:focus-visible,a:focus-visible { outline:2px solid #d5b5f3; outline-offset:4px; }
#app { min-height:100svh; padding: max(12px,env(safe-area-inset-top)) 18px max(12px,env(safe-area-inset-bottom)); }
header { height:44px; display:flex; align-items:center; justify-content:space-between; max-width:520px; margin:auto; }
header a { text-decoration:none; font-size:28px; width:44px; text-align:center; color:var(--dim); }
h1 { font:400 22px Georgia,serif; letter-spacing:.3em; padding-left:.3em; margin:0; color:#b8b2c8; }
#restart { font-size:26px; color:var(--dim); width:44px; height:44px; }
main { max-width:480px; margin:auto; min-height:calc(100svh - 82px); display:flex; flex-direction:column; align-items:center; justify-content:center; }
#stage-nav { display:flex; align-items:center; gap:12px; color:var(--dim); height:44px; margin-bottom:12px; }
#stage-nav button { width:44px; height:44px; font-size:25px; }
#stage { min-width:58px; text-align:center; font-size:12px; letter-spacing:.18em; font-variant-numeric:tabular-nums; }
#board { position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:min(100%,calc((100svh - 270px) * .71),380px); }
.slot { aspect-ratio:1.12; position:relative; border-radius:24px; background:#ffffff02; box-shadow:inset 0 0 0 1px #ffffff04; }
.knot { width:100%; height:100%; position:absolute; inset:0; display:grid; place-items:center; border-radius:24px; padding:0; color:var(--tone); background:radial-gradient(ellipse, color-mix(in srgb,var(--tone) 8%,transparent),transparent 72%); }
.knot:disabled { cursor:default; opacity:1; }
.knot svg { width:100%; height:100%; overflow:visible; position:absolute; inset:0; pointer-events:none; }
.value { color:#f2edf5; font-size:clamp(17px,4.3vw,25px); font-weight:300; font-variant-numeric:tabular-nums; text-shadow:0 1px 14px var(--bg); z-index:1; }
.identity-mark, .target-mark { color:#f2edf5; }
.value { transform:translateY(5%); }
#board:not(.busy) .knot:hover { background-color:#ffffff04; }
.knot.active { box-shadow:inset 0 0 28px #ffffff05; }
#collected { min-height:30px; margin-top:22px; display:flex; align-items:center; justify-content:center; gap:9px; }
.bead { width:10px; height:10px; border-radius:50%; background:var(--tone); box-shadow:0 0 12px color-mix(in srgb,var(--tone) 40%,transparent); }
.bead.empty { background:#ffffff0a; box-shadow:none; }
#result { height:66px; display:flex; gap:24px; align-items:center; justify-content:center; }
#moves { color:var(--dim); font-size:13px; letter-spacing:.12em; }
#next { width:60px; height:48px; border-radius:24px; border:1px solid #b6e1cc60; color:#b6e1cc; font-size:28px; }
#next[hidden] { display:none; }
.fly { position:absolute; pointer-events:none; z-index:10; }
.burst { position:absolute; inset:0; pointer-events:none; border:2px solid var(--tone); border-radius:50%; }
@media (max-height:580px) { #board { grid-template-columns:repeat(3,1fr); width:min(100%,450px); gap:8px; } #stage-nav { margin:0; } #collected { margin-top:12px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }