:root{--bg: #0A0E14;--bg-2: #0D1320;--surface: #131A2A;--surface-2: #1A2240;--surface-3: #232E50;--gold: #C8AA6E;--gold-light: #F0E6D2;--gold-dim: #785A28;--gold-deep: #463714;--gold-glow: rgba(200, 170, 110, .35);--hex-cyan: #0AC8B9;--hex-cyan-dim: #01A4A4;--hex-cyan-glow: rgba(10, 200, 185, .3);--domain-mind: #2E86C1;--domain-body: #E63946;--domain-fury: #F2711C;--domain-calm: #27AE60;--domain-chaos: #A23BC9;--domain-order: #F4C430;--plus: #27AE60;--plus-glow: rgba(39, 174, 96, .4);--minus: #E63946;--minus-glow: rgba(230, 57, 70, .4);--text: #F0E6D2;--text-muted: #A09B8C;--text-dim: #5C5A50;--border: rgba(200, 170, 110, .15);--border-strong: rgba(200, 170, 110, .4);--border-deep: #463714;--grad-gold: linear-gradient(135deg, #F0E6D2 0%, #C8AA6E 50%, #785A28 100%);--grad-gold-soft: linear-gradient(135deg, rgba(240,230,210,.95) 0%, rgba(200,170,110,.85) 100%);--grad-hex: linear-gradient(135deg, #0AC8B9 0%, #1E6FB8 100%);--grad-card: linear-gradient(180deg, rgba(35, 46, 80, .5) 0%, rgba(19, 26, 42, .95) 100%);--grad-radial: radial-gradient(ellipse at top, rgba(200, 170, 110, .08) 0%, transparent 60%);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 8px 24px rgba(0, 0, 0, .5);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);--shadow-glow-gold: 0 0 24px var(--gold-glow);--shadow-glow-cyan: 0 0 24px var(--hex-cyan-glow);--font-headline: "Cinzel", "Marcellus SC", Georgia, serif;--font-body: "Spectral", "Cormorant Garamond", Georgia, serif;--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-numeric: "Inter", -apple-system, "SF Mono", Menlo, monospace;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sp-8: 64px;--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--r-xl: 24px;--r-pill: 999px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{min-height:100%;font-family:var(--font-ui);font-size:16px;line-height:1.5;background:var(--bg);color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input,textarea{-webkit-user-select:text;user-select:text;font-family:inherit}button{font-family:inherit;border:none;background:transparent;color:inherit;cursor:pointer}#app{position:relative;min-height:100dvh;display:flex;flex-direction:column;isolation:isolate}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:var(--grad-radial);pointer-events:none;z-index:0}.h-display{font-family:var(--font-headline);font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1}.h-section{font-family:var(--font-headline);font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:12px;color:var(--gold)}.body-serif{font-family:var(--font-body);line-height:1.6}.particle-canvas{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.btn{--btn-bg: var(--surface);--btn-fg: var(--text);--btn-border: var(--border-strong);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-border);border-radius:var(--r-md);font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:transform .15s var(--ease-out),background .2s,border-color .2s,box-shadow .2s;overflow:hidden;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.97)}.btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(200,170,110,.12) 0%,transparent 40%);pointer-events:none}.btn:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(240,230,210,.18),transparent);transform:skew(-20deg);transition:left .6s var(--ease-out);pointer-events:none}.btn:hover:after{left:150%}.btn-primary{--btn-bg: var(--grad-gold-soft);--btn-fg: #1A1410;--btn-border: var(--gold-light);background-image:var(--grad-gold-soft);box-shadow:var(--shadow-md),inset 0 1px #fff3}.btn-primary:hover{box-shadow:var(--shadow-md),var(--shadow-glow-gold)}.btn-secondary{--btn-bg: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);background-image:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%)}.btn-ghost{--btn-bg: transparent;--btn-border: var(--border);--btn-fg: var(--text-muted);font-size:13px;padding:var(--sp-3) var(--sp-4)}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);transition:background .2s,border-color .2s,color .2s}.btn-icon:hover{border-color:var(--border-strong);color:var(--gold)}.btn-icon:active{transform:scale(.94)}.btn-icon:disabled{opacity:.35;cursor:not-allowed}.btn-icon svg{width:18px;height:18px}.hex-pattern{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'><polygon points='30,1 56,16 56,46 30,61 4,46 4,16' fill='none' stroke='%23C8AA6E' stroke-opacity='0.04' stroke-width='1'/></svg>");background-size:60px 52px;pointer-events:none;opacity:.6;mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%)}.view-splash{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,var(--surface-2) 0%,var(--bg) 70%);display:flex;align-items:center;justify-content:center;z-index:1000;animation:splashFadeOut .6s ease-in 1.6s forwards;overflow:hidden}.splash-logo-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);animation:splashLogoIn 1s var(--ease-out) forwards}.splash-logo{font-family:var(--font-headline);font-weight:900;font-size:clamp(48px,11vw,72px);letter-spacing:.18em;color:var(--gold-light);text-shadow:0 0 30px var(--gold-glow),0 0 60px var(--gold-glow),0 2px 0 var(--gold-dim);background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px var(--gold-glow))}.splash-tag{font-family:var(--font-ui);font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--text-muted);opacity:0;animation:splashTagIn .8s ease-out .5s forwards}.splash-ring{position:absolute;width:280px;height:280px;border:1px solid var(--gold-dim);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);animation:splashRing 1.6s var(--ease-out) forwards;opacity:0}.splash-ring.delay{animation-delay:.2s;width:360px;height:360px}@keyframes splashLogoIn{0%{opacity:0;transform:scale(.8);filter:blur(8px)}60%{opacity:1;transform:scale(1.04);filter:blur(0)}to{transform:scale(1)}}@keyframes splashTagIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes splashRing{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}40%{opacity:.6}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}@keyframes splashFadeOut{to{opacity:0;visibility:hidden;pointer-events:none}}.view-container{position:relative;min-height:100dvh;display:flex;flex-direction:column;z-index:2;animation:viewIn .45s var(--ease-out)}@keyframes viewIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}::view-transition-old(root){animation:.2s ease-in both fadeOut}::view-transition-new(root){animation:.35s var(--ease-out) both fadeInUp}@keyframes fadeOut{to{opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.view-home{position:relative;flex:1;display:flex;flex-direction:column;padding:var(--sp-7) var(--sp-5);padding-top:max(var(--sp-7),env(safe-area-inset-top));padding-bottom:max(var(--sp-5),env(safe-area-inset-bottom));overflow:hidden}.parallax-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;will-change:transform}.parallax-layer.bg-1{background:radial-gradient(circle at 20% 80%,rgba(46,134,193,.08) 0%,transparent 40%)}.parallax-layer.bg-2{background:radial-gradient(circle at 80% 20%,rgba(200,170,110,.1) 0%,transparent 40%)}.home-hero{position:relative;text-align:center;margin-top:var(--sp-7);margin-bottom:var(--sp-7)}.home-logo{font-family:var(--font-headline);font-weight:900;font-size:clamp(40px,11vw,68px);letter-spacing:.16em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px var(--gold-glow));line-height:1}.home-divider{display:flex;align-items:center;justify-content:center;margin:var(--sp-3) auto var(--sp-3);color:var(--gold-dim);font-size:10px;letter-spacing:.5em}.home-divider:before,.home-divider:after{content:"";flex:1;max-width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);margin:0 var(--sp-3)}.home-tag{font-family:var(--font-body);font-style:italic;color:var(--text-muted);font-size:14px;letter-spacing:.05em}.home-actions{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);width:100%;max-width:380px;margin:0 auto}.action-card{--card-accent: var(--gold);position:relative;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r-lg);cursor:pointer;transform-style:preserve-3d;transition:border-color .3s,box-shadow .3s;overflow:hidden}.action-card:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--card-accent);border-radius:0 2px 2px 0;box-shadow:0 0 16px var(--card-accent)}.action-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md),0 0 30px #c8aa6e26}.action-card.primary{--card-accent: var(--gold);background:linear-gradient(135deg,rgba(200,170,110,.12) 0%,var(--surface) 60%);border-color:var(--border-strong)}.action-card.mode-1v1{--card-accent: var(--domain-mind)}.action-card.mode-2v2{--card-accent: var(--domain-fury)}.action-card.history{--card-accent: var(--domain-chaos)}.action-card .ac-icon{flex-shrink:0;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--card-accent)}.action-card .ac-icon svg{width:22px;height:22px}.action-card .ac-text{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left}.action-card .ac-title{font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--text);letter-spacing:.02em}.action-card .ac-sub{font-family:var(--font-body);font-size:12px;color:var(--text-muted);font-style:italic}.action-card .ac-arrow{color:var(--card-accent);opacity:.5;transition:transform .2s,opacity .2s}.action-card:hover .ac-arrow{opacity:1;transform:translate(4px)}.ios-hint{margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);background:#2e86c114;border:1px solid rgba(46,134,193,.25);border-radius:var(--r-md);font-size:12px;color:var(--text-muted);line-height:1.5;max-width:380px;margin-left:auto;margin-right:auto}.ios-hint strong{color:var(--domain-mind);font-weight:600}.footer-note{margin-top:auto;padding-top:var(--sp-5);font-size:10px;color:var(--text-dim);text-align:center;font-family:var(--font-body);font-style:italic}.view-tracker{flex:1;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);padding-top:max(var(--sp-3),env(safe-area-inset-top));background:#131a2ad9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.topbar-title{flex:1;text-align:center;font-family:var(--font-headline);font-weight:700;color:var(--gold);font-size:12px;letter-spacing:.2em;text-transform:uppercase}.players{flex:1;display:grid;grid-template-rows:1fr 1fr;gap:var(--sp-2);padding:var(--sp-2)}.player-card{position:relative;background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);align-items:center;justify-content:center;overflow:hidden;transition:border-color .4s,box-shadow .4s,background .4s}.player-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'><polygon points='30,1 56,16 56,46 30,61 4,46 4,16' fill='none' stroke='%23C8AA6E' stroke-opacity='0.05' stroke-width='1'/></svg>");background-size:60px 52px;mask-image:radial-gradient(circle at center,black 0%,transparent 70%);-webkit-mask-image:radial-gradient(circle at center,black 0%,transparent 70%);pointer-events:none;opacity:.5}.player-card[data-player=p1]{transform:rotate(180deg)}.player-card.is-winner{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 0 40px var(--gold-glow);background:linear-gradient(180deg,rgba(200,170,110,.12) 0%,var(--surface) 100%)}.player-name{background:transparent;border:1px solid var(--border);border-radius:var(--r-pill);color:var(--gold);font-family:var(--font-headline);font-weight:600;font-size:13px;padding:6px 16px;text-align:center;width:220px;max-width:90%;letter-spacing:.1em;text-transform:uppercase}.player-name:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}.score-display{display:flex;flex-direction:column;align-items:center;gap:2px}.score-current{font-family:var(--font-headline);font-weight:900;font-size:clamp(80px,22vw,140px);line-height:1;font-variant-numeric:tabular-nums;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px var(--gold-glow));transition:filter .3s,transform .15s}.score-current.flash-minus{--grad-gold: linear-gradient(135deg, #ffb4bb, var(--minus));filter:drop-shadow(0 0 24px var(--minus-glow));transform:scale(1.08)}.score-current.flash-plus{--grad-gold: linear-gradient(135deg, #b9efc8, var(--plus));filter:drop-shadow(0 0 24px var(--plus-glow));transform:scale(1.08)}.is-winner .score-current{filter:drop-shadow(0 0 36px var(--gold-glow))}.score-label{font-family:var(--font-ui);font-size:10px;letter-spacing:.3em;color:var(--text-muted);font-weight:600;text-transform:uppercase}.score-track{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;width:100%;max-width:280px;height:8px}.seg{background:var(--surface-2);border-radius:2px;border:1px solid var(--border);transition:background .3s,border-color .3s,box-shadow .3s}.seg.filled{background:var(--gold);border-color:var(--gold-light);box-shadow:0 0 10px var(--gold-glow)}.score-buttons{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:var(--sp-2);width:100%;max-width:340px}.btn-score{position:relative;padding:16px 0;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:var(--font-headline);font-weight:700;font-size:18px;letter-spacing:.05em;cursor:pointer;transition:transform .08s,background .2s,border-color .2s,box-shadow .2s;overflow:hidden}.btn-score:active{transform:scale(.94)}.btn-score.minus{color:#ff8a92;border-color:#e639464d}.btn-score.minus:active{background:#e6394626;box-shadow:inset 0 0 0 1px var(--minus)}.btn-score.plus{color:#82d3a0;border-color:#27ae604d}.btn-score.plus:active{background:#27ae6026;box-shadow:inset 0 0 0 1px var(--plus)}.btn-score.plus.primary{background:var(--grad-gold-soft);color:#1a1410;border-color:var(--gold-light);box-shadow:0 0 16px var(--gold-glow),inset 0 1px #fff3}.btn-score.plus.primary:active{box-shadow:0 0 24px var(--gold-glow)}.winner-badge{position:absolute;top:var(--sp-3);right:var(--sp-3);background:var(--grad-gold);color:#1a1410;padding:6px 12px;border-radius:var(--r-pill);font-family:var(--font-headline);font-size:11px;font-weight:700;letter-spacing:.2em;box-shadow:0 4px 14px var(--gold-glow);animation:winnerPulse 1.6s ease-in-out infinite;display:flex;align-items:center;gap:4px}@keyframes winnerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.view-tracker[data-mode="2v2"] .score-track{grid-template-columns:repeat(11,1fr)}.winner-banner{position:fixed;bottom:max(var(--sp-4),env(safe-area-inset-bottom));left:var(--sp-4);right:var(--sp-4);background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%);border:1px solid var(--gold);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);align-items:center;box-shadow:var(--shadow-lg),var(--shadow-glow-gold);z-index:50;animation:bannerSlideUp .4s var(--ease-out)}@keyframes bannerSlideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.banner-text{font-family:var(--font-headline);font-size:16px;font-weight:700;letter-spacing:.05em;text-align:center;color:var(--text)}.banner-text strong{color:var(--gold)}.banner-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);width:100%}.banner-actions .btn{padding:var(--sp-3) var(--sp-4);font-size:13px}.rule-hint{padding:var(--sp-3) var(--sp-4);padding-bottom:max(var(--sp-3),env(safe-area-inset-bottom));background:#131a2a80;border-top:1px solid var(--border);font-family:var(--font-body);font-style:italic;font-size:11px;color:var(--text-muted);text-align:center;line-height:1.5}.view-history{flex:1;display:flex;flex-direction:column}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-7) var(--sp-5);text-align:center;gap:var(--sp-3)}.empty-icon{width:80px;height:80px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold-dim);margin-bottom:var(--sp-3)}.empty-icon svg{width:36px;height:36px}.empty-title{font-family:var(--font-headline);font-size:18px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}.empty-sub{font-family:var(--font-body);font-style:italic;font-size:14px;color:var(--text-muted);line-height:1.6;max-width:320px}.section-title{padding:var(--sp-4) var(--sp-4) var(--sp-2);font-family:var(--font-headline);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:var(--sp-2)}.section-title:before{content:"";width:12px;height:1px;background:var(--gold-dim)}.stats-section{border-bottom:1px solid var(--border)}.stats-list{padding:0 var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}.stats-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r-md);font-size:14px;transition:border-color .2s}.stats-row:hover{border-color:var(--border-strong)}.stats-name{font-family:var(--font-headline);font-weight:600;font-size:13px;color:var(--text);letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stats-record{font-family:var(--font-numeric);color:var(--text-muted);font-size:13px;font-variant-numeric:tabular-nums}.stats-winrate{font-family:var(--font-headline);color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;min-width:44px;text-align:right;font-size:14px}.history-list{flex:1;display:flex;flex-direction:column;padding-bottom:max(var(--sp-4),env(safe-area-inset-bottom))}.match-row{margin:6px var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r-md);display:flex;flex-direction:column;gap:6px;transition:border-color .2s,transform .2s}.match-row:hover{border-color:var(--border-strong);transform:translate(2px)}.match-meta{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-ui);font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.15em}.match-meta .match-mode{margin-left:auto;color:var(--gold);font-weight:600}.match-result{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font-size:14px;color:var(--text)}.match-winner{font-family:var(--font-headline);color:var(--gold);font-weight:700;letter-spacing:.04em;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}.match-loser{font-family:var(--font-body);color:var(--text-muted);flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.match-score{font-family:var(--font-headline);font-weight:700;font-variant-numeric:tabular-nums;font-size:13px;background:var(--surface-2);padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--border);white-space:nowrap}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.05ms!important}}