@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@700&display=swap";:root{--bg-base:#0a0a0a;--bg-elevated:#111;--bg-card:#171717;--bg-glass:#171717c7;--accent:#8b5cf6;--accent-soft:#8b5cf629;--accent-strong:#8b5cf666;--success:#22c55e;--error:#ef4444;--text-primary:#f5f5f5;--text-secondary:#b3b3b3;--text-muted:#8a8a8a;--border-subtle:#262626;--border-bright:#363636;--focus-ring:0 0 0 1px #8b5cf673;--soft-glow:0 0 24px #8b5cf629;--motion-standard:cubic-bezier(.4, 0, .2, 1);--radius-lg:16px;--radius-md:12px}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--text-primary);background:radial-gradient(ellipse 120% 72% at 50% -8%, #8b5cf614, transparent 60%), linear-gradient(180deg, #0b0b0b 0%, var(--bg-base) 55%, #070707 100%);background-color:var(--bg-base);min-height:100vh;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}#root{min-height:100vh}.app-root{min-height:100vh;position:relative}.app-root:before{content:"";pointer-events:none;z-index:0;opacity:.025;mix-blend-mode:normal;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px;position:fixed;inset:0}@keyframes grain-shift{0%{transform:translate(0)}to{transform:translate(-4%,-4%)}}.top-bar{z-index:40;border-bottom:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none;background:#0a0a0ae6;position:sticky;top:0}.top-bar-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:1280px;margin:0 auto;padding:.65rem 1rem;display:flex}.top-bar-brand{border:1px solid var(--border-subtle);background:var(--bg-elevated);letter-spacing:.15em;text-transform:uppercase;color:var(--text-secondary);transition:border-color .2s var(--motion-standard), color .2s var(--motion-standard);border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:.42rem .95rem;font-size:.68rem;font-weight:800;display:inline-flex}.top-bar-brand:hover{color:var(--text-primary);border-color:var(--border-bright)}.app-shell{z-index:1;max-width:1280px;margin:0 auto;padding:1.35rem 1rem 2.75rem;position:relative}.app-hero{border-bottom:1px solid #a855f71f;grid-template-columns:1fr auto;align-items:end;gap:1rem 1.75rem;margin-bottom:1.75rem;padding-bottom:1.35rem;display:grid}.app-hero-text{min-width:0}.app-title-gradient{letter-spacing:-.02em;color:var(--text-primary);margin:0;font-size:clamp(1.85rem,4.2vw,2.75rem);line-height:1.12;animation:none}@keyframes title-glow-in{0%{opacity:0;filter:drop-shadow(0 0 #0000);transform:translateY(6px)}to{opacity:1;filter:drop-shadow(0 0 28px #a855f738);transform:translateY(0)}}.subtitle{color:var(--text-secondary);max-width:38rem;margin:.65rem 0 0;font-size:1rem;line-height:1.45}.app-hero-metrics{flex-direction:column;align-items:flex-end;gap:.65rem;display:flex}.hero-category-chip{text-transform:uppercase;letter-spacing:.14em;color:var(--text-secondary);text-align:right;text-wrap:balance;max-width:14rem;margin:0;font-size:.72rem;font-weight:800}.category-selector{flex-wrap:wrap;justify-content:flex-end;gap:.45rem;max-width:min(640px,70vw);display:flex}.category-pill{border:1px solid var(--border-subtle);background:var(--bg-glass);color:var(--text-secondary);cursor:pointer;transition:all .22s var(--motion-standard);border-radius:999px;padding:.45rem .85rem;font-size:.82rem;font-weight:700}.category-pill:hover{border-color:var(--border-bright);color:var(--text-primary);transform:translateY(-1px)}.category-pill.is-active{background:color-mix(in srgb, var(--bg-elevated) 86%, var(--accent) 14%);border-color:var(--accent-strong);color:var(--text-primary);box-shadow:var(--focus-ring)}.score-board{justify-content:flex-end;gap:.65rem;display:flex}.score-board--compact .score-card{width:124px;min-width:0;padding:.55rem .65rem}.score-board--compact .score-card .value{font-size:1.25rem}.score-card{border-radius:var(--radius-md);background:var(--bg-glass);min-width:150px;color:var(--text-primary);border:1px solid var(--border-subtle);transition:box-shadow .26s var(--motion-standard), transform .26s var(--motion-standard);padding:.75rem .85rem}.score-card.current,.score-card.best{box-shadow:none}.score-card.pulse{transform:translateY(-2px)}.score-board .label{opacity:.88;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin:0;font-size:.65rem}.score-board .value{font-variant-numeric:tabular-nums;margin:.15rem 0 0;font-size:1.45rem;font-weight:800}.game-wrap{flex-direction:column;gap:1.35rem;display:flex}.cards-grid{grid-template-columns:1fr auto 1fr;align-items:stretch;gap:1rem;display:grid}.cards-grid.state-transition .position-left{animation:card-becomes-left .58s var(--motion-standard) both}.cards-grid.state-transition .position-right{animation:card-slide-in .58s var(--motion-standard) both}@keyframes card-becomes-left{0%{opacity:.88;transform:translate(12%)}to{opacity:1;transform:translate(0)}}@keyframes card-slide-in{0%{opacity:.2;transform:translate(36px)}to{opacity:1;transform:translate(0)}}.guess-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}.guess-btn{border:1px solid var(--border-bright);letter-spacing:.02em;cursor:pointer;min-width:148px;height:54px;color:var(--text-primary);background:color-mix(in srgb, var(--bg-card) 84%, var(--accent) 16%);transition:transform .18s var(--motion-standard), box-shadow .2s var(--motion-standard), filter .2s var(--motion-standard), background .26s var(--motion-standard), opacity .2s ease;border-radius:14px;justify-content:center;align-items:center;gap:.4rem;padding:0 1.35rem;font-size:1.02rem;font-weight:800;display:inline-flex;box-shadow:inset 0 0 0 1px #ffffff08}.guess-btn:hover:not(:disabled){filter:none;box-shadow:var(--focus-ring), var(--soft-glow);background:color-mix(in srgb, var(--bg-card) 78%, var(--accent) 22%);transform:scale(1.03)translateY(-1px)}.guess-btn:active:not(:disabled){transform:scale(.98)}.guess-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:grayscale(.3);transform:none}.guess-btn-icon{opacity:.95;font-size:1.05rem;line-height:1}.guess-btn--higher:hover:not(:disabled){--accent:var(--success)}.guess-btn--lower:hover:not(:disabled){--accent:var(--accent)}.player-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);-webkit-backdrop-filter:none;backdrop-filter:none;min-height:320px;box-shadow:none;transition:transform .24s var(--motion-standard), border-color .28s var(--motion-standard), box-shadow .28s var(--motion-standard);align-content:start;row-gap:.42rem;padding:1.1rem 1.15rem 1.35rem;display:grid;position:relative;overflow:hidden}.player-card:hover{border-color:var(--border-bright);transform:translateY(-2px)}.player-card-head{justify-content:space-between;align-items:flex-start;gap:.85rem;margin-bottom:.25rem;display:flex}.player-card-badges{flex-direction:column;align-items:flex-end;gap:.4rem;display:flex}.country-flag-svg{border-radius:3px;width:32px;height:auto;display:block;box-shadow:0 0 0 1px #0000008c,0 4px 12px #00000059}.game-logo-svg{width:36px;height:36px;color:var(--text-secondary);opacity:.92;border:1px solid var(--border-subtle);background:#00000040;border-radius:10px;justify-content:center;align-items:center;display:flex}.game-logo-svg svg{width:22px;height:22px}.player-avatar{background:var(--bg-elevated);width:88px;height:88px;box-shadow:0 0 0 1px var(--border-bright);transition:box-shadow .26s var(--motion-standard), transform .26s var(--motion-standard);border:none;border-radius:999px;flex-shrink:0;place-items:center;display:grid;overflow:hidden}.player-avatar-photo{object-fit:cover;width:100%;height:100%;display:block}.player-avatar:hover{box-shadow:var(--focus-ring);transform:scale(1.03)}.player-avatar-initials{letter-spacing:.04em;color:var(--text-primary);font-size:1.75rem;font-weight:800;line-height:1}.player-handle{color:var(--text-primary);margin:0;font-size:clamp(1.25rem,2.6vw,1.65rem);font-weight:800;line-height:1.2}.real-name,.earnings-label{color:var(--text-muted);margin:0}.real-name{font-size:.95rem}.earnings-label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary);opacity:.85;margin-top:.15rem;font-size:.68rem}.earnings{font-variant-numeric:tabular-nums;min-height:2.4rem;transition:color .24s var(--motion-standard), text-shadow .24s var(--motion-standard);align-items:center;margin:.5rem 0 0;font-family:JetBrains Mono,ui-monospace,monospace;font-size:clamp(1.35rem,3.2vw,1.95rem);font-weight:700;line-height:1.15;display:flex}.earnings--revealed{color:#d8c7ff;text-shadow:0 0 16px #8b5cf642}.earnings--revealed .countup-value{animation:earnings-pop-in .52s var(--motion-standard) both;display:inline-block}@keyframes earnings-pop-in{0%{opacity:0;filter:blur(2px);transform:scale(.94)translateY(6px)}to{opacity:1;filter:blur();transform:scale(1)translateY(0)}}.earnings--mystery{color:var(--text-secondary)}.earnings--anticipation{animation:2s ease-in-out infinite mystery-slot-pulse}.earnings--anticipation .countup-mystery{text-shadow:0 0 16px #8b5cf659;gap:.12em;display:inline-flex}.countup-mystery-char{animation:2s ease-in-out infinite mystery-char-bob;display:inline-block}.countup-mystery-char:nth-child(2){animation-delay:.12s}.countup-mystery-char:nth-child(3){animation-delay:.24s}@keyframes mystery-slot-pulse{0%,to{filter:brightness();transform:scale(1)}50%{filter:brightness(1.12);transform:scale(1.05)}}@keyframes mystery-char-bob{0%,to{opacity:1;transform:translateY(0)}50%{opacity:.85;transform:translateY(-3px)}}.player-card.is-revealing-flash{animation:.52s ease-out both revealing-glow-burst}@keyframes revealing-glow-burst{0%{box-shadow:none}35%{box-shadow:var(--soft-glow)}to{box-shadow:none}}.player-card.tone-correct{border-color:#10b9818c;animation:.52s ease-out forwards verdict-flash-correct;box-shadow:inset 0 0 0 1px #00000073,0 16px 50px #00000073,0 0 40px #10b98166}.player-card.tone-wrong{border-color:#ef44448c;animation:.52s ease-out forwards verdict-flash-wrong;box-shadow:inset 0 0 0 1px #00000073,0 16px 50px #00000073,0 0 40px #ef44446b}@keyframes verdict-flash-correct{0%{border-color:var(--border-subtle);box-shadow:none}20%{border-color:#34d399;box-shadow:0 0 0 2px #10b981cc,0 0 72px #10b981bf}to{border-color:#10b9818c;box-shadow:inset 0 0 0 1px #00000073,0 16px 50px #00000073,0 0 40px #10b98166}}@keyframes verdict-flash-wrong{0%{border-color:var(--border-subtle);box-shadow:none}20%{border-color:#f87171;box-shadow:0 0 0 2px #ef4444d9,0 0 72px #ef4444a6}to{border-color:#ef44448c;box-shadow:inset 0 0 0 1px #00000073,0 16px 50px #00000073,0 0 40px #ef44446b}}.vs-pill{background:var(--bg-elevated);color:var(--text-primary);letter-spacing:.1em;border:1px solid var(--border-subtle);box-shadow:none;border-radius:999px;align-self:center;margin:0;padding:.75rem 1rem;font-size:.78rem;font-weight:800}.error-panel{text-align:center;background:var(--bg-glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:none;padding:1rem}.error-panel h2{color:var(--text-primary);margin:0 0 .35rem}.error-panel button,.game-over-panel button{cursor:pointer;background:color-mix(in srgb, var(--bg-card) 84%, var(--accent) 16%);color:var(--text-primary);box-shadow:none;transition:transform .22s var(--motion-standard), box-shadow .22s var(--motion-standard);border:none;border-radius:12px;padding:.75rem 1rem;font-weight:800}.error-panel button:hover,.game-over-panel button:hover{border-color:var(--accent-strong);transform:translateY(-1px)scale(1.02)}.error-panel button:active,.game-over-panel button:active{transform:scale(.99)}.game-over-modal{pointer-events:none;z-index:60;justify-items:center;padding:1rem;display:grid;position:fixed;inset:auto 0 0}.game-over-panel{border:1px solid var(--border-bright);text-align:center;width:min(520px,96vw);box-shadow:none;transition:transform .26s var(--motion-standard);background:#14091feb;border-radius:16px;padding:1rem 1.2rem 1.2rem;transform:translateY(120%)}.game-over-modal.is-open{pointer-events:auto}.game-over-modal.is-open .game-over-panel{transform:translateY(0)}.game-over-panel h3{margin:0;font-size:1.45rem}.game-over-copy{color:var(--text-secondary);margin:.5rem 0 0}.game-over-stats{font-variant-numeric:tabular-nums;margin:.6rem 0 1rem}.loading-grid{grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;display:grid}.loading-card{border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:linear-gradient(120deg,#1d1d1d 8%,#171717 18%,#1d1d1d 33%) 0 0/220% 100%;height:320px;animation:1.2s linear infinite shimmer}.loading-vs{background:var(--bg-elevated);color:var(--text-secondary);border-radius:999px;padding:.65rem .9rem;font-weight:700}.loading-text{text-align:center;color:var(--text-secondary);grid-column:1/-1;margin:0}@keyframes shimmer{to{background-position:-220% 0}}@media (width<=920px){.app-hero{grid-template-columns:1fr;align-items:stretch}.app-hero-metrics{flex-flow:wrap;justify-content:space-between;align-items:center}.hero-category-chip{text-align:left}.score-board{justify-content:flex-start}}@media (width<=900px){.cards-grid,.loading-grid{grid-template-columns:1fr}.vs-pill,.loading-vs{justify-self:center}.player-card,.loading-card{min-height:0}.category-selector{justify-content:flex-start;max-width:none}.top-bar-inner{flex-direction:column;align-items:stretch}}
