.app-header{z-index:100;height:var(--header-height);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);padding:0 var(--spacing-md);background:#0a0a0feb;justify-content:space-between;align-items:center;max-width:100%;display:flex;position:sticky;top:0}.app-header__logo{text-decoration:none}.app-header__logo-text{font-family:var(--font-display);letter-spacing:.08em;background:linear-gradient(90deg, var(--color-side-a), var(--color-crowd), var(--color-side-b));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:900}.app-header__nav{align-items:center;gap:var(--spacing-sm);display:flex}.app-header__link{color:var(--color-text-secondary);border-radius:var(--radius-sm);padding:6px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:color .15s}.app-header__link:hover{color:var(--color-text)}.app-header__link--daily{color:var(--color-accent);font-weight:600}.app-header__link--daily:hover{color:var(--color-text)}.app-header__link--cta{background:var(--color-primary);color:#fff;border-radius:var(--radius-sm)}.app-header__link--cta:hover{background:var(--color-primary-dark);color:#fff}.app-header__profile-btn{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;text-decoration:none;transition:border-color .15s;display:flex}.app-header__profile-btn:hover{border-color:var(--color-primary-light)}.app-header__profile-icon{font-size:16px}.bottom-nav{height:var(--bottom-nav-height);background:var(--color-bg-card);border-top:1px solid var(--color-border);z-index:100;padding-bottom:env(safe-area-inset-bottom,0);-webkit-backdrop-filter:blur(20px);align-items:stretch;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav__item{color:var(--color-text-muted);transition:color var(--duration-fast);min-height:44px;padding:var(--spacing-xs) 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;text-decoration:none;display:flex}.bottom-nav__item:hover{color:var(--color-text-secondary)}.bottom-nav__item--active{color:var(--color-crowd)}.bottom-nav__icon{flex-shrink:0;width:22px;height:22px}.bottom-nav__label{font-family:var(--font-sans);letter-spacing:.02em;font-size:10px;font-weight:600}.matchup-card{background:var(--color-bg-card);border-radius:var(--radius-xl);padding:var(--spacing-md) var(--spacing-md) var(--spacing-lg);box-shadow:var(--shadow-card);gap:var(--spacing-sm);animation:scaleIn .25s var(--ease-out);background-image:linear-gradient(135deg,#3b82f60f 0%,#0000 40% 60%,#ef44440f 100%);flex-direction:column;display:flex;position:relative;overflow:hidden}.matchup-card--voted{animation:springReveal .45s var(--ease-spring)}.matchup-card__header{align-items:center;gap:var(--spacing-sm);min-height:28px;display:flex}.matchup-card__category{font-family:var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--color-crowd);border-radius:var(--radius-full);background:#8b5cf61f;border:1px solid #8b5cf640;padding:3px 8px;font-size:10px;font-weight:700}.matchup-card__trending{color:var(--color-hot);font-size:11px;font-weight:600}.matchup-card__header-spacer{flex:1}.matchup-card__share-icon{color:var(--color-text-muted);transition:color var(--duration-fast);padding:4px}.matchup-card__share-icon:hover{color:var(--color-text-secondary)}.matchup-card__arena{gap:var(--spacing-sm);grid-template-columns:1fr auto 1fr;align-items:stretch;display:grid}.matchup-side{padding:var(--spacing-lg) var(--spacing-md);border-radius:var(--radius-lg);transition:all var(--duration-fast) var(--ease-out);touch-action:none;-webkit-user-select:none;user-select:none;border:2px solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:140px;display:flex;position:relative;overflow:visible}.matchup-side--a{background:linear-gradient(145deg,#3b82f61f,#3b82f60a);border-color:#3b82f640}.matchup-side--b{background:linear-gradient(145deg,#ef44441f,#ef44440a);border-color:#ef444440}.matchup-side--a:active:not(:disabled),.matchup-card--holding-a .matchup-side--a{border-color:var(--color-side-a);box-shadow:var(--shadow-glow-a);background:linear-gradient(145deg,#3b82f638,#3b82f61a);transform:scale(1.02)}.matchup-side--b:active:not(:disabled),.matchup-card--holding-b .matchup-side--b{border-color:var(--color-side-b);box-shadow:var(--shadow-glow-b);background:linear-gradient(145deg,#ef444438,#ef44441a);transform:scale(1.02)}.matchup-side--selected.matchup-side--a{border-color:var(--color-side-a);box-shadow:var(--shadow-glow-a);background:linear-gradient(145deg,#3b82f647,#3b82f61f)}.matchup-side--selected.matchup-side--b{border-color:var(--color-side-b);box-shadow:var(--shadow-glow-b);background:linear-gradient(145deg,#ef444447,#ef44441f)}.matchup-side--unselected{opacity:.4;transform:scale(.97)}.matchup-side__ring{pointer-events:none;z-index:2;width:52px;height:52px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.matchup-side__image{object-fit:cover;border:2px solid #ffffff1a;border-radius:50%;width:56px;height:56px}.matchup-side__label{font-family:var(--font-display);color:var(--color-text-primary);text-align:center;letter-spacing:-.01em;font-size:22px;font-weight:800;line-height:1.1}.matchup-side__hint{font-family:var(--font-sans);color:var(--color-text-muted);font-size:11px;font-weight:500;animation:2s ease-in-out infinite breathe}.matchup-side--a:disabled .matchup-side__hint,.matchup-side--b:disabled .matchup-side__hint{animation:none}.matchup-side__pct{font-family:var(--font-mono);animation:countUp .3s var(--ease-out) forwards;font-size:28px;font-weight:700}.matchup-side__pct--a{color:var(--color-side-a)}.matchup-side__pct--b{color:var(--color-side-b)}.matchup-card__vs{padding:var(--spacing-sm) 0;justify-content:center;align-items:center;display:flex}.matchup-card__vs-text{font-family:var(--font-display);letter-spacing:.08em;color:var(--color-vs);background:var(--color-bg-elevated);border:2px solid var(--color-border);border-radius:var(--radius-full);justify-content:center;align-items:center;width:36px;height:36px;font-size:13px;font-weight:900;display:flex}.matchup-card__social-proof{padding-top:var(--spacing-xs);justify-content:center;display:flex}.matchup-card__vote-count{font-family:var(--font-mono);color:var(--color-text-muted);font-size:12px;font-weight:400}.matchup-card__velocity{font-family:var(--font-sans);color:var(--color-hot);font-size:12px;font-weight:600}.matchup-card__results{gap:var(--spacing-sm);animation:fadeIn .35s var(--ease-out);padding-top:var(--spacing-xs);flex-direction:column;display:flex}.result-bar{border-radius:var(--radius-md);gap:2px;height:48px;display:flex;overflow:hidden}.result-bar__fill{transition:width .6s var(--ease-spring);animation:fillBar .6s var(--ease-spring) forwards;justify-content:space-between;align-items:center;min-width:48px;padding:0 10px;display:flex;overflow:hidden}.result-bar__fill--a{background:linear-gradient(90deg, var(--color-side-a), #60a5fa);border-radius:var(--radius-sm) 0 0 var(--radius-sm);flex-direction:row}.result-bar__fill--b{background:linear-gradient(270deg, var(--color-side-b), #f87171);border-radius:0 var(--radius-sm) var(--radius-sm) 0;flex-direction:row-reverse}.result-bar__pct{font-family:var(--font-mono);color:#fff;white-space:nowrap;text-shadow:0 1px 3px #00000080;font-size:15px;font-weight:700}.result-bar__label{font-family:var(--font-display);color:#fffc;white-space:nowrap;text-overflow:ellipsis;max-width:80px;font-size:11px;font-weight:700;overflow:hidden}.matchup-card__verdict{animation:slideUp .4s var(--ease-out) .2s both;justify-content:center;display:flex}.verdict-badge{font-family:var(--font-sans);border-radius:var(--radius-full);padding:6px 14px;font-size:13px;font-weight:600}.verdict-badge--rare{color:var(--color-crowd);background:#8b5cf626;border:1px solid #8b5cf64d}.verdict-badge--majority{color:var(--color-success);background:#10b9811f;border:1px solid #10b98140}.verdict-badge--split{color:var(--color-text-secondary);border:1px solid var(--color-border);background:#ffffff0f}.matchup-card__results-footer{animation:slideUp .4s var(--ease-out) .35s both;justify-content:space-between;align-items:center;display:flex}.matchup-card__total{font-family:var(--font-mono);color:var(--color-text-muted);font-size:12px}.matchup-card__actions{gap:var(--spacing-sm);display:flex}.action-btn{font-family:var(--font-sans);border-radius:var(--radius-full);transition:all var(--duration-fast);padding:8px 16px;font-size:13px;font-weight:600}.action-btn--share{color:var(--color-text-secondary);border:1px solid var(--color-border);background:0 0}.action-btn--share:hover{background:var(--color-bg-elevated);color:var(--color-text)}.action-btn--next{background:var(--color-side-a);color:#fff;border:none}.action-btn--next:hover{background:#60a5fa}.matchup-card__breakdown-toggle{font-family:var(--font-sans);color:var(--color-crowd);cursor:pointer;text-align:left;transition:opacity var(--duration-fast);background:0 0;border:none;padding:2px 0;font-size:12px;font-weight:600}.matchup-card__breakdown-toggle:hover{opacity:.8}.demographic-drawer{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);gap:var(--spacing-sm);animation:fadeIn .2s var(--ease-out);flex-direction:column;display:flex}.demo-row{align-items:center;gap:var(--spacing-sm);grid-template-columns:48px 1fr 36px 36px;display:grid}.demo-row__label{font-family:var(--font-sans);color:var(--color-text-muted);font-size:11px;font-weight:600}.demo-row__bars{border-radius:var(--radius-full);background:var(--color-border);gap:1px;height:8px;display:flex;overflow:hidden}.demo-row__bar--a{background:var(--color-side-a);border-radius:var(--radius-full) 0 0 var(--radius-full);height:100%;transition:width .5s var(--ease-spring)}.demo-row__bar--b{background:var(--color-side-b);border-radius:0 var(--radius-full) var(--radius-full) 0;height:100%;transition:width .5s var(--ease-spring)}.demo-row__a-pct{font-family:var(--font-mono);color:var(--color-side-a);text-align:right;font-size:11px}.demo-row__b-pct{font-family:var(--font-mono);color:var(--color-side-b);text-align:right;font-size:11px}.demo-velocity{font-family:var(--font-sans);color:var(--color-hot);padding-top:var(--spacing-xs);border-top:1px solid var(--color-border);margin-top:var(--spacing-xs);font-size:12px;font-weight:600}.matchup-card__loading{top:var(--spacing-sm);right:var(--spacing-sm);border:2px solid var(--color-border);border-top-color:var(--color-crowd);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin;position:absolute}@media (width>=480px){.matchup-card{padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-xl)}.matchup-side{min-height:160px;padding:var(--spacing-xl) var(--spacing-lg)}.matchup-side__label{font-size:28px}.matchup-side__pct{font-size:36px}}.category-tabs{top:var(--header-height);z-index:10;background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:var(--spacing-sm) 0;position:sticky}.category-tabs__scroll{gap:var(--spacing-xs);padding:0 var(--spacing-md);scrollbar-width:none;-webkit-overflow-scrolling:touch;display:flex;overflow-x:auto}.category-tabs__scroll::-webkit-scrollbar{display:none}.category-tab{color:var(--color-text-secondary);white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:20px;flex-shrink:0;padding:6px 14px;font-size:14px;font-weight:500;transition:all .15s}.category-tab:hover{color:var(--color-text);background:var(--color-surface);border-color:var(--color-border)}.category-tab--active{color:var(--color-primary-light);background:var(--color-surface-2);border-color:var(--color-primary-light)}.home-page{flex-direction:column;flex:1;min-height:0;display:flex}.home-page__sticky-controls{top:var(--header-height);z-index:20;background:var(--color-bg-primary);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #ffffff0a;position:sticky}.home-page__sort{padding:6px var(--spacing-md);gap:4px;display:flex}.sort-btn{font-family:var(--font-sans);color:var(--color-text-muted);border-radius:var(--radius-full);transition:all var(--duration-fast);background:0 0;border:1px solid #0000;padding:5px 12px;font-size:13px;font-weight:500}.sort-btn:hover{color:var(--color-text-secondary);background:var(--color-bg-elevated)}.sort-btn--active{background:var(--color-bg-elevated);border-color:var(--color-border);color:var(--color-text)}.home-feed{scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;padding-bottom:var(--bottom-nav-height);flex:1;overflow-y:auto}.home-feed__card{scroll-snap-align:start;scroll-snap-stop:always;min-height:88dvh;padding:var(--spacing-md);justify-content:center;align-items:center;display:flex}.home-feed__card>.matchup-card{width:100%;max-width:var(--max-content-width)}.home-feed__empty{min-height:60dvh;color:var(--color-text-muted);padding:var(--spacing-2xl) var(--spacing-md);text-align:center;justify-content:center;align-items:center;font-size:15px;display:flex}.home-feed__end{min-height:40dvh;color:var(--color-text-muted);font-size:14px;font-family:var(--font-sans);scroll-snap-align:start;padding:var(--spacing-2xl) var(--spacing-md);justify-content:center;align-items:center;display:flex}.auth-page{padding:var(--spacing-lg) var(--spacing-md);min-height:calc(100dvh - var(--header-height));flex:1;justify-content:center;align-items:center;display:flex}.auth-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:100%;max-width:400px;padding:var(--spacing-xl);box-shadow:var(--shadow-card);animation:.25s ease-out scaleIn}.auth-card__header{margin-bottom:var(--spacing-xl);text-align:center}.auth-card__title{letter-spacing:-.03em;color:var(--color-text);margin-bottom:var(--spacing-xs);font-size:26px;font-weight:800}.auth-card__subtitle{color:var(--color-text-secondary);font-size:14px}.auth-form{gap:var(--spacing-md);flex-direction:column;display:flex}.auth-form__error{color:#fca5a5;padding:10px var(--spacing-md);border-radius:var(--radius-sm);background:#ef44441f;border:1px solid #ef444466;font-size:14px}.form-field{flex-direction:column;gap:6px;display:flex}.form-field__label{color:var(--color-text-secondary);letter-spacing:.02em;font-size:13px;font-weight:600}.form-field__input{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px var(--spacing-md);color:var(--color-text);outline:none;width:100%;font-size:16px;transition:border-color .15s,box-shadow .15s}.form-field__input::placeholder{color:var(--color-text-muted)}.form-field__input:focus{border-color:var(--color-primary-light);box-shadow:0 0 0 3px #8b5cf633}.auth-btn{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);margin-top:var(--spacing-sm);padding:14px;font-size:16px;font-weight:700;transition:background .15s,transform .1s}.auth-btn:hover:not(:disabled){background:var(--color-primary-dark)}.auth-btn:active:not(:disabled){transform:scale(.98)}.auth-btn:disabled{opacity:.6;cursor:not-allowed}.auth-card__footer{text-align:center;margin-top:var(--spacing-lg);color:var(--color-text-secondary);font-size:14px}.auth-card__footer a{font-weight:600}:root{--color-bg-primary:#0a0a0f;--color-bg-card:#13131a;--color-bg-elevated:#1c1c26;--color-bg:#0a0a0f;--color-surface:#13131a;--color-surface-2:#1c1c26;--color-border:#2a2a3d;--color-side-a:#3b82f6;--color-side-b:#ef4444;--color-vs:#fff;--color-crowd:#8b5cf6;--color-hot:#ff6b35;--color-option-a:#3b82f6;--color-option-b:#ef4444;--color-primary:#8b5cf6;--color-primary-light:#a78bfa;--color-primary-dark:#7c3aed;--color-accent:#8b5cf6;--color-text:#fafafa;--color-text-primary:#fafafa;--color-text-secondary:#9ca3af;--color-text-muted:#4b5563;--color-success:#10b981;--color-error:#ef4444;--font-display:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"Space Mono", "Courier New", monospace;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--shadow-card:0 4px 24px #00000080;--shadow-glow-a:0 0 24px #3b82f659;--shadow-glow-b:0 0 24px #ef444459;--shadow-glow-crowd:0 0 24px #8b5cf659;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--max-content-width:480px;--header-height:56px;--bottom-nav-height:68px;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--duration-fast:.15s;--duration-normal:.3s;--duration-slow:.5s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-sans);background-color:var(--color-bg-primary);color:var(--color-text);min-height:100dvh;line-height:1.5;overflow-x:hidden}#root{flex-direction:column;min-height:100dvh;display:flex}a{color:var(--color-primary-light);text-decoration:none}button{font-family:var(--font-sans);cursor:pointer;background:0 0;border:none}input,textarea{font-family:var(--font-sans)}img{max-width:100%;display:block}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}@keyframes fillBar{0%{width:0%}to{width:var(--fill-width)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(1.03)}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes springReveal{0%{transform:scale(1)}35%{transform:scale(1.05)}65%{transform:scale(.98)}to{transform:scale(1)}}@keyframes countUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}