:root{--bg:#f5f5fb;--card:#fff;--ink:#1d1b2f;--muted:#6b6880;--line:#e3e1ee;--a:#4f46e5;--a2:#eef0ff;--b:#db2777;--b2:#fdeef5;--ok:#059669;--warn:#d97706;--shadow:0 2px 10px rgba(30,20,80,.08)}
@media (prefers-color-scheme:dark){:root{--bg:#121120;--card:#1d1b2f;--ink:#ecebf5;--muted:#a19eb8;--line:#2f2c47;--a:#818cf8;--a2:#262550;--b:#f472b6;--b2:#3a1f33;--ok:#34d399;--warn:#fbbf24;--shadow:none}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
header{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto;padding:16px}
header h1{font-size:20px;margin:0}
.logo{display:flex;align-items:center;gap:2px;font-weight:800;font-size:13px;color:var(--muted);text-decoration:none}
.logo span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;color:#fff;font-size:14px;background:var(--a)}
.logo span+span{background:var(--b)}
main{max-width:760px;margin:0 auto;padding:0 16px 48px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
h2{font-size:18px;margin:0 0 12px}
label{display:block;font-weight:600;margin:14px 0 6px}
label:first-child{margin-top:0}
textarea,input[type=text]{width:100%;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
textarea{min-height:200px;resize:vertical}
textarea:focus,input:focus{outline:2px solid var(--a);border-color:transparent}
.hint{color:var(--muted);font-size:14px;margin-top:4px}
.muted{color:var(--muted)}.center{text-align:center}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{margin:0;font-weight:400;border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){border-color:var(--a);background:var(--a2)}
.seg b{display:block}
.seg small{color:var(--muted)}
button,.btn{font:inherit;font-weight:600;border:0;border-radius:10px;padding:11px 18px;cursor:pointer;background:var(--a);color:#fff;text-decoration:none;display:inline-block}
button.sec,.btn.sec{background:var(--a2);color:var(--a)}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.grow{flex:1;min-width:0}
.top{margin-top:16px}
.invite{border-color:var(--a);background:var(--a2)}
.invite code{font-size:20px;font-weight:800;letter-spacing:2px}
.link{word-break:break-all;font-size:14px}
.meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-bottom:10px}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:18px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--a),var(--b));transition:width .4s}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.vs{align-self:center;font-weight:800;color:var(--muted)}
.pick{position:relative;min-height:150px;font-size:clamp(20px,5vw,30px);font-weight:700;border-radius:18px;padding:18px;color:var(--ink);background:var(--card);border:3px solid var(--line);word-break:break-word;transition:transform .1s,border-color .15s,background .15s}
.pick:active{transform:scale(.97)}
.pick.a:hover,.pick.a.sel{border-color:var(--a);background:var(--a2)}
.pick.b:hover,.pick.b.sel{border-color:var(--b);background:var(--b2)}
.pick .tag{position:absolute;top:8px;left:12px;font-size:12px;font-weight:700;color:var(--muted)}
.pick .who{position:absolute;bottom:8px;left:0;right:0;font-size:13px;font-weight:600;color:var(--muted)}
@media (max-width:520px){.duel{grid-template-columns:1fr}.vs{justify-self:center}.pick{min-height:110px}}
.status{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.chip{border-radius:99px;padding:5px 12px;font-size:14px;background:var(--bg);border:1px solid var(--line)}
.chip.done{border-color:var(--ok);color:var(--ok)}
.flash{text-align:center;padding:10px;border-radius:12px;margin-bottom:14px;background:var(--bg);font-size:15px}
.flash.warn{color:var(--warn);border:1px solid var(--warn)}
.winner{text-align:center;padding:30px 20px}
.winner .crown{font-size:56px;line-height:1}
.winner .name{font-size:clamp(30px,8vw,52px);font-weight:800;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;word-break:break-word}
ol.rank{padding-left:28px;margin:0}
ol.rank li{padding:4px 0}
ol.rank small{color:var(--muted)}
details summary{cursor:pointer;font-weight:600}
.hist{font-size:14px;color:var(--muted);margin:8px 0 0;padding-left:18px}
.hist b{color:var(--ink)}
.checks{columns:2;column-gap:16px}
.checks label{font-weight:400;margin:0;padding:3px 0;break-inside:avoid}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;font-size:15px;max-width:90vw;z-index:9}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .35s ease-out}