:root{
  color-scheme: dark;
  --bg:#0d0f1a; --bg2:#141830; --panel:#171c34; --line:#252c4a;
  --ink:#e9ebf6; --dim:#9aa0bd; --faint:#6f7699;
  --amber:#ff8a3d; --amber2:#f2641c; --gold:#ffd479; --good:#57d38c; --bad:#ff6b6b;
  --sel:#3a72ff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1a1030 0%,var(--bg) 55%);
  color:var(--ink); line-height:1.45; min-height:100dvh;
  overscroll-behavior:none;
}
a{color:#8fb4ff;text-decoration:none}
.wrap{max-width:560px;margin:0 auto;padding:14px 14px 120px;min-height:100dvh;display:flex;flex-direction:column}

/* header */
header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.brand{font-weight:800;letter-spacing:.14em;font-size:1.15rem;background:linear-gradient(90deg,var(--gold),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-weight:500;letter-spacing:.02em;font-size:.6rem;color:var(--faint);margin-top:-2px}
.nav{display:flex;gap:14px;align-items:center;font-size:.85rem}
.nav a{color:var(--dim)}
.streak{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.8rem;color:var(--gold);white-space:nowrap}

/* target banner */
.target{background:linear-gradient(180deg,var(--panel),#12162b);border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center;margin:8px 0 12px;position:relative;overflow:hidden}
.target .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.target .em{font-size:52px;line-height:1;margin:6px 0 2px;filter:drop-shadow(0 4px 16px rgba(255,138,61,.25))}
.target h1{font-size:1.7rem;margin:2px 0 6px}
.target .stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pill{background:#1b2138;border:1px solid #2c355a;border-radius:999px;padding:3px 11px;font-size:.82rem;color:var(--dim)}
.pill b{color:var(--ink)}
.pill.best b{color:var(--gold)}

.hint{font-size:.82rem;color:var(--faint);text-align:center;margin:0 0 10px}

/* shelf */
.shelf{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;flex:1}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:9px 12px;font-size:1rem;cursor:pointer;user-select:none;
  transition:transform .08s ease,border-color .12s ease,background .12s ease;
  animation:pop .22s ease backward;
}
.chip .ce{font-size:1.15rem;line-height:1}
.chip:active{transform:scale(.94)}
.chip.sel{border-color:var(--sel);background:#1a2551;box-shadow:0 0 0 2px rgba(58,114,255,.35)}
.chip.tgt{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,212,121,.35)}
.chip.busy{opacity:.5}
.chip.new{border-color:var(--amber);box-shadow:0 0 14px rgba(255,138,61,.5)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(13,15,26,0),var(--bg) 40%);padding:12px 14px calc(14px + env(safe-area-inset-bottom));}
.bar .inner{max-width:560px;margin:0 auto;display:flex;gap:8px}
button.act{flex:1;border:none;border-radius:12px;padding:13px;font-size:.95rem;font-weight:700;cursor:pointer}
.btn-clear{background:var(--bg2);border:1px solid var(--line);color:var(--dim)}
.btn-primary{background:linear-gradient(180deg,var(--amber),var(--amber2));color:#1a0e05}
button.act:active{transform:scale(.97)}
button.act:disabled{opacity:.4}

/* toast */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(12px);background:#20263f;border:1px solid var(--line);color:var(--ink);padding:10px 16px;border-radius:12px;font-size:.9rem;opacity:0;pointer-events:none;transition:.2s;z-index:40;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(6,7,15,.72);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:18px;z-index:50}
.scrim.show{display:flex}
.modal{background:linear-gradient(180deg,var(--panel),#12162b);border:1px solid var(--line);border-radius:18px;padding:22px;max-width:380px;width:100%;text-align:center;animation:pop .2s ease}
.modal .big{font-size:56px;line-height:1;margin-bottom:4px}
.modal h2{margin:.1em 0 .2em;font-size:1.4rem}
.modal p{color:var(--dim);margin:.3em 0}
.chainbox{background:#0f1326;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:1.25rem;margin:12px 0;word-break:break-word;line-height:1.5}
.mono{font-variant-emoji:emoji}
.row{display:flex;gap:8px;margin-top:12px}
.row button{flex:1;border-radius:12px;padding:12px;font-weight:700;border:none;cursor:pointer}
.link{background:transparent;border:1px solid var(--line);color:var(--dim)}
.solid{background:linear-gradient(180deg,var(--amber),var(--amber2));color:#1a0e05}
.toggle{background:none;border:none;color:var(--faint);font-size:.82rem;text-decoration:underline;cursor:pointer;margin-top:2px}
input.handle{width:100%;background:#0f1326;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--ink);font-size:1rem;text-align:center;margin-top:4px}
input.handle:focus{outline:none;border-color:var(--amber)}
.err{color:var(--bad);font-size:.82rem;min-height:1.1em;margin-top:6px}
.discover .big{animation:sparkle 1.2s ease infinite alternate}
@keyframes sparkle{from{filter:drop-shadow(0 0 2px var(--gold))}to{filter:drop-shadow(0 0 18px var(--gold))}}
.small{font-size:.8rem;color:var(--faint)}