:root{--bg:#15131c;--surface:#211d2c;--surface-2:#262233;--line:#3a3449;--line-2:#2e2a3a;--text:#f4f1fa;--muted:#a9a4b8;--soft:#cfc9dd;--g:#a3192f;--g-text:#e8556a;--d:#2f5bf0;--d-text:#8ea6ff;--logo-d:#6e8dff;--display:"Bricolage Grotesque",system-ui,sans-serif;--body:"DM Sans",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}body,html{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased}body{min-height:100dvh}a{color:inherit}button,input{font-family:inherit}button{cursor:pointer}:focus-visible{outline:3px solid var(--d-text);outline-offset:2px}.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative}.header{height:64px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:-webkit-sticky;position:sticky;top:0;background:var(--bg);z-index:10}.logo{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.5px;line-height:1;text-decoration:none}.logo .lg{color:var(--g-text)}.logo .ld{color:var(--logo-d)}.logo small{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:1px;margin-left:4px}.header-actions{display:flex;gap:8px;align-items:center}.pill{height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700;gap:6px}.icon-btn,.pill{background:var(--surface-2);display:flex;align-items:center}.icon-btn{width:44px;height:44px;border-radius:12px;border:none;color:var(--text);justify-content:center;text-decoration:none}.main{flex:1 1;padding:8px 20px 24px;display:flex;flex-direction:column;gap:16px;animation:page-in .6s var(--ease) both}.nav{position:-webkit-sticky;position:sticky;bottom:0;height:72px;border-top:1px solid var(--surface-2);background:var(--bg);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom);z-index:10}.nav a{color:var(--muted);text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:700}.nav a[aria-current=page]{color:var(--text)}.demo-banner{margin:0 20px;padding:8px 12px;border-radius:12px;border:1px dashed var(--line);font-size:12px}.demo-banner,.disclaimer{color:var(--muted);text-align:center}.disclaimer{font-size:11px;margin:4px 0 0}h1,h2,h3{margin:0}.title{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-1px;line-height:1.05}.lead{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}.kicker{letter-spacing:1px;color:var(--muted)}.chip,.kicker{font-size:12px;font-weight:700;text-transform:uppercase}.chip{height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line);letter-spacing:.6px;color:var(--soft);display:inline-flex;align-items:center}.btn{height:56px;border:none;border-radius:18px;background:var(--text);color:var(--bg);font-size:17px;padding:0 20px}.btn,.btn-ghost{font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.btn-ghost{height:52px;border:1px solid var(--line);border-radius:18px;background:transparent;color:var(--text);font-size:15px;padding:0 18px}.btn-g{background:var(--g);color:#fff}.btn-d{background:var(--d);color:#fff}.row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px}.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px;scrollbar-width:none;flex-shrink:0}.chips::-webkit-scrollbar{display:none}.filter{flex-shrink:0;height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;border:1px solid var(--line);background:transparent;color:var(--soft)}.filter[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}.stage{flex:1 1;display:flex;flex-direction:column;gap:16px;min-width:0}.top-nav{display:none}.subject-card{height:250px}.subject-card.voted{height:150px}.subject-name{font-size:var(--fs,52px)}.subject-card{border-radius:28px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;flex-shrink:0;transition:height .45s var(--ease)}.subject-name{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-1.2px;transition:font-size .45s var(--ease);animation:swap .52s var(--ease) both}.vote-grid{flex:1 1;min-height:220px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;animation:fade-up .52s var(--ease) both}.vote-btn{border:none;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.5px;color:#fff}.vote-btn.g{background:var(--g)}.vote-btn.d{background:var(--d)}.result{flex:1 1;display:flex;flex-direction:column;gap:14px;animation:fade-up .52s var(--ease) both}.status{height:28px;display:flex;align-items:center}.pulse{animation:pulse 1.6s ease-in-out infinite;font-size:13px;font-weight:700;color:var(--soft)}.badge,.pulse{letter-spacing:1px;text-transform:uppercase}.badge{height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;animation:fade-up .52s var(--ease) both}.bar-wrap{display:flex;flex-direction:column;gap:8px}.bar{position:relative;height:64px;border-radius:20px;overflow:hidden;background:var(--surface-2)}.bar,.seg{display:flex}.seg{flex-shrink:0;align-items:center;font-family:var(--display);font-weight:800;font-size:24px;white-space:nowrap;color:#fff}.seg.g{background:var(--g);padding-left:16px}.seg.d{background:var(--d);justify-content:flex-end;padding-right:16px}.spark{top:0;bottom:0;width:4px;background:#fff;box-shadow:0 0 14px 4px rgba(255,255,255,.75);transition:opacity .5s ease}.spark,.stamp{position:absolute}.stamp{top:50%;padding:4px 14px;border:4px solid #fff;border-radius:12px;background:var(--bg);color:#fff;font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:1px;animation:stamp .7s cubic-bezier(.22,1.25,.36,1) both}.bar-labels{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--soft)}.verdict{margin:0;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2;animation:fade-up .52s var(--ease) both}.small{margin:0;font-size:14px;color:var(--muted);animation:fade-up .52s var(--ease) .12s both}.actions{margin-top:auto;display:flex;flex-direction:column;gap:10px;animation:fade-up .52s var(--ease) .24s both}.fx-shake{animation:shake .62s cubic-bezier(.36,.07,.19,.97) 1}.fx-close{animation:sway 1s cubic-bezier(.45,0,.55,1) 2}.fx-tie{animation:tie 1.2s cubic-bezier(.45,0,.55,1) 2}.fx-glow{animation:glow 1.4s var(--ease) 1}.today{border-radius:28px;background:var(--g);color:#fff;padding:22px;display:flex;flex-direction:column;gap:10px}.today p{margin:0;font-family:var(--display);font-weight:800;font-size:28px;line-height:1.05;letter-spacing:-.8px}.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px}.cat-grid>*{animation:fade-up .52s var(--ease) backwards}.cat{min-height:64px;border-radius:20px;background:var(--surface);color:var(--text);padding:10px 16px;text-decoration:none;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px}.cat small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}.cat.hot{grid-column:1/-1;background:#2a1f2b;border:1px solid #5a2433}.hot-tag{height:24px;padding:0 9px;border-radius:999px;background:var(--g);color:#fff;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;display:inline-flex}.field,.hot-tag{align-items:center}.field{height:56px;border-radius:18px;border:1px solid var(--line);background:var(--surface);display:flex;padding:0 6px 0 16px;gap:10px;transition:border-color .28s ease,box-shadow .28s ease}.field:focus-within{border-color:var(--d-text);box-shadow:0 0 0 4px rgba(110,141,255,.18)}.field input{flex:1 1;min-width:0;height:100%;border:none;background:transparent;color:var(--text);font-size:17px;outline:none}.field input::placeholder{color:#8c869c}.go{width:44px;height:44px;border:none;border-radius:13px;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.tag-btn{height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:14px;font-weight:700}.list{display:flex;flex-direction:column;gap:8px}.list>*{animation:fade-up .42s var(--ease) backwards}.list>:nth-child(2){animation-delay:50ms}.list>:nth-child(3){animation-delay:.1s}.list>:nth-child(4){animation-delay:.15s}.row{min-height:56px;border:none;border-radius:16px;background:var(--surface);color:var(--text);padding:8px 16px;display:flex;align-items:center;justify-content:space-between;text-align:left}.row b{display:block;font-size:16px}.row span{font-size:12px;color:var(--muted)}.panel{border-radius:28px;background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:12px;animation:fade-up .52s var(--ease) both}.panel.dashed{background:transparent;border:1px dashed #4a4359}.panel h2{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.6px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.side-btn{flex:1 1;min-height:200px;border:none;border-radius:28px;color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:space-between}.side-btn.g{background:var(--g);align-items:flex-start;text-align:left;animation:enter-l .52s var(--ease) both}.side-btn.d{background:var(--d);align-items:flex-end;text-align:right;animation:enter-r .52s var(--ease) 60ms both}.side-btn strong{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;display:block}.banner{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding-bottom:80px;min-height:60vh}.banner h1{font-family:var(--display);font-weight:800;font-size:48px;line-height:1;animation:banner .9s cubic-bezier(.22,1.2,.36,1) both}.progress{display:flex;gap:4px;height:6px}.progress div{flex:1 1;border-radius:999px;transition:background-color .4s ease}.duel{position:relative;min-height:440px;gap:14px}.duel,.pick{flex:1 1;display:flex;flex-direction:column}.pick{border-radius:26px;border:2px solid var(--line-2);background:var(--surface);color:var(--text);padding:20px;align-items:center;justify-content:center;gap:8px;text-align:center}.pick b{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.8px}.pick.enter-l{animation:enter-l .52s var(--ease) both}.pick.enter-r{animation:enter-r .52s var(--ease) 60ms both}.pick.win{animation:win .62s cubic-bezier(.22,1.3,.36,1) both}.pick.lose{animation:lose .52s cubic-bezier(.4,0,.2,1) both}.vs{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:999px;background:var(--bg);border:2px solid var(--line);font-family:var(--display);font-weight:800;font-size:18px;pointer-events:none;animation:vs 1.6s ease-in-out infinite}.trophy,.vs{display:flex;align-items:center;justify-content:center}.trophy{width:96px;height:96px;border-radius:999px;animation:pop .7s cubic-bezier(.22,1.35,.36,1) both}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}.confetti i{position:absolute;top:0;width:9px;height:14px;border-radius:2px;animation:fall linear infinite both}.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);text-align:center;background:var(--text);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:700;font-size:14px;z-index:50;animation:toast-in .3s var(--ease) both}a,button{transition:transform .28s var(--ease),filter .28s ease,color .28s ease,border-color .28s ease,background-color .28s ease}a svg,button svg{transition:transform .34s var(--ease)}@media (hover:hover){a:hover,button:hover{filter:brightness(1.12)}.btn-ghost:hover,.btn:hover,.cat:hover,.lift:hover,.row:hover,.tag-btn:hover{transform:translateY(-2px)}.vote-btn:hover{transform:scale(1.03)}.vote-btn.g:hover svg{transform:translateX(-7px)}.vote-btn.d:hover svg{transform:translateX(7px)}.btn:hover svg,.cat:hover svg,.row:hover svg{transform:translateX(4px)}.icon-btn:hover svg{transform:scale(1.15) rotate(-6deg)}.nav a:hover{color:var(--text)}.nav a:hover svg{transform:translateY(-3px)}.pick:hover{border-color:#6a6180;transform:translateY(-2px)}}.btn:active,.cat:active,button:active{transform:scale(.96);transition-duration:.12s}@keyframes page-in{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}@keyframes fade-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}@keyframes swap{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes sway{0%,to{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}@keyframes shake{0%,to{transform:translate(0)}12%{transform:translate(-5px,1px)}28%{transform:translate(4px,-1px)}44%{transform:translate(-3px,1px)}62%{transform:translate(2px)}80%{transform:translate(-1px)}}@keyframes tie{0%,to{transform:scaleY(1)}50%{transform:scaleY(.9)}}@keyframes glow{0%{filter:brightness(1)}30%{filter:brightness(1.3)}to{filter:brightness(1)}}@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) scale(1.9) rotate(-14deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}}@keyframes enter-l{0%{opacity:0;transform:translateX(-46px) rotate(-2deg)}to{opacity:1;transform:none}}@keyframes enter-r{0%{opacity:0;transform:translateX(46px) rotate(2deg)}to{opacity:1;transform:none}}@keyframes win{0%{transform:scale(1)}45%{transform:scale(1.05)}to{transform:scale(1.02)}}@keyframes lose{to{opacity:.18;transform:scale(.92)}}@keyframes vs{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}@keyframes banner{0%{opacity:0;transform:scale(.6);letter-spacing:8px}60%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1);letter-spacing:-1px}}@keyframes pop{0%{opacity:0;transform:scale(.3) rotate(-18deg)}to{opacity:1;transform:none}}@keyframes fall{0%{transform:translateY(-60px) rotate(0)}to{transform:translateY(110vh) rotate(620deg)}}@media (min-width:900px){.app{max-width:1180px}.header{height:80px;padding:0 32px;gap:24px}.logo{font-size:32px}.top-nav{display:flex;gap:6px;margin-right:auto;margin-left:24px}.top-nav a{height:44px;padding:0 16px;border-radius:14px;display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:15px;color:var(--muted)}.top-nav a svg{width:18px;height:18px}.top-nav a[aria-current=page]{background:var(--surface-2);color:var(--text)}.top-nav a:hover{color:var(--text)}.top-nav a:hover svg{transform:translateY(-2px)}.nav{display:none}.demo-banner{margin:0 32px}.main{padding:16px 32px 48px;gap:20px}.title{font-size:44px}.toast{bottom:32px}.play-layout{display:grid;grid-template-columns:230px minmax(0,1fr);grid-gap:32px;gap:32px;align-items:start}.play-layout .chips{flex-direction:column;overflow:visible;margin:0;padding:0;position:-webkit-sticky;position:sticky;top:96px}.play-layout .filter{height:44px;border-radius:14px;text-align:left;padding:0 16px;font-size:14px}.stage{max-width:820px;width:100%;margin:0 auto}.subject-card{height:320px;border-radius:36px}.subject-card.voted{height:190px}.subject-name{font-size:calc(var(--fs, 52px) * 1.45)}.vote-grid{min-height:300px;gap:16px}.vote-btn{font-size:34px;border-radius:32px}.bar{height:80px;border-radius:24px}.seg{font-size:30px}.verdict{font-size:28px}.small{font-size:15px}.actions{flex-direction:row}.actions>*{flex:1 1}.narrow{max-width:760px;width:100%;margin:0 auto}.today{padding:32px}.today p{font-size:40px;max-width:80%}.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cat{min-height:88px;font-size:18px;border-radius:24px;padding:14px 20px}.side-row{flex-direction:row!important}.side-btn{min-height:380px}.side-btn strong{font-size:52px}.banner h1{font-size:80px}.duel{flex-direction:row;min-height:460px;gap:24px}.pick{border-radius:32px;padding:32px}.pick b{font-size:calc(var(--fs, 36px) * 1.3)!important}.winner-wrap{max-width:760px;width:100%;margin:0 auto}.trophy{width:120px;height:120px}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}}