:root{--bg: #0b1020;--bg-elev: #141b2e;--bg-elev-2: #1d2740;--border: #2a3650;--text: #e8ecf5;--text-dim: #97a3bd;--accent: #1f9d55;--accent-2: #4f8cff;--green: #2e9e57;--yellow: #d6a323;--gray: #3a455f;--radius: 14px;--maxw: 880px;font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--text)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#15233f 0%,transparent 60%),var(--bg);min-height:100vh}a{color:var(--accent-2);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;cursor:pointer}.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 16px}.navbar{border-bottom:1px solid var(--border);background:#0b1020b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}.navbar-inner{display:flex;align-items:center;gap:20px;height:60px}.brand{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:8px}.brand:hover{text-decoration:none}.brand .ball{font-size:1.4rem}.brand-logo{height:30px;width:auto;border-radius:7px;display:block}.hero-logo{width:88px;height:88px;border-radius:18px;display:block;margin:0 auto 14px}.nav-links{display:flex;gap:6px;margin-left:auto}.nav-links a{color:var(--text-dim);padding:8px 12px;border-radius:8px;font-weight:600;font-size:.92rem}.nav-links a:hover{background:var(--bg-elev);color:var(--text);text-decoration:none}.nav-links a.active{color:var(--text);background:var(--bg-elev-2)}main{padding:32px 0 64px}.footer{border-top:1px solid var(--border);color:var(--text-dim);font-size:.85rem;text-align:center;padding:24px 0}.footer p{margin:4px 0}.footer-feedback a{font-weight:600}.hero{text-align:center;margin-bottom:36px}.hero h1{font-size:2.4rem;margin:0 0 8px;letter-spacing:-.03em}.hero p{color:var(--text-dim);font-size:1.1rem;margin:0}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.mode-card{display:block;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .12s ease,border-color .12s ease;color:var(--text)}.mode-card:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none}.mode-card.disabled{opacity:.55;pointer-events:none}.mode-card .icon{font-size:2rem}.mode-card h3{margin:10px 0 4px;font-size:1.2rem}.mode-card p{margin:0;color:var(--text-dim);font-size:.92rem}.mode-card .badge{display:inline-block;margin-top:12px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:999px;background:var(--bg-elev-2);color:var(--text-dim)}.mode-card .badge.live{background:#2e9e572e;color:#6fdd9b}.setup{max-width:640px;margin:0 auto}.setup-section{margin:24px 0}.setup-section h3{margin:0 0 12px;font-size:1.05rem}.setup-section h3 .sub{color:var(--text-dim);font-weight:400;font-size:.9rem}.pill-row{display:flex;flex-wrap:wrap;gap:8px}.pill{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);padding:8px 16px;border-radius:999px;font-weight:600}.pill:hover{border-color:var(--accent)}.pill.selected{background:var(--accent);border-color:var(--accent);color:#fff}.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.opt{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:14px;color:var(--text)}.opt:hover{border-color:var(--accent)}.opt.selected{border-color:var(--accent);background:var(--bg-elev-2);box-shadow:inset 0 0 0 1px var(--accent)}.opt-label{font-weight:700}.opt-desc{color:var(--text-dim);font-size:.82rem}.note{color:var(--yellow);font-size:.85rem;margin:10px 0 0}.setup-start{text-align:center;margin-top:28px}.status{text-align:center;color:var(--text-dim);padding:60px 0}.history h3{display:flex;align-items:baseline;justify-content:space-between}.stats{display:flex;flex-wrap:wrap;gap:10px}.stat{flex:1;min-width:80px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center}.stat-value{font-size:1.4rem;font-weight:800;line-height:1.1}.stat-label{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}.history-list{list-style:none;padding:0;margin:16px 0 0}.history-list li{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--border);font-size:.9rem}.history-list .h-player{font-weight:600}.history-list .h-meta{margin-left:auto;color:var(--text-dim);font-size:.8rem;text-transform:capitalize}.game-header{text-align:center;margin-bottom:8px}.game-header h2{margin:0 0 4px;font-size:1.8rem}.game-header p{margin:0;color:var(--text-dim)}.round-meta{display:inline-flex;align-items:center;gap:8px;text-transform:capitalize}.link-btn{background:none;border:none;color:var(--accent-2);font-size:.85rem;padding:0;text-decoration:underline;text-transform:none}.guess-count{text-align:center;color:var(--text-dim);margin:8px 0 0}.give-up{text-align:center;margin-top:12px}.result .btn+.btn{margin-left:8px}.search-wrap{position:relative;max-width:480px;margin:24px auto 8px}.search-input{width:100%;padding:14px 16px;font-size:1rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;color:var(--text);outline:none}.search-input:focus{border-color:var(--accent-2)}.search-input:disabled{opacity:.6}.suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;overflow:hidden;z-index:5;max-height:280px;overflow-y:auto}.suggestion{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:10px 14px}.suggestion:hover,.suggestion.active{background:var(--bg-elev-2)}.suggestion .sub{color:var(--text-dim);font-size:.82rem;margin-left:auto}.grid-scroll{overflow-x:auto;margin-top:24px}.guess-grid{width:100%;min-width:620px;border-collapse:separate;border-spacing:6px}.guess-grid th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-weight:700;padding-bottom:4px}.tile{text-align:center;vertical-align:middle;border-radius:10px;padding:10px 6px;font-weight:600;font-size:.9rem;background:var(--gray);min-width:78px;height:64px;animation:flip .4s ease both}.tile.name{font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.tile.name .tile-name-text{font-size:.8rem;line-height:1.1}.face{border-radius:50%;object-fit:cover;background:var(--bg-elev-2);flex-shrink:0;display:inline-block}.face-fallback{border-radius:50%;flex-shrink:0;background:var(--bg-elev-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237b88a8'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") center/72% no-repeat}.result-face{margin:4px auto 12px;border:2px solid var(--border)}.tile.green{background:var(--green)}.tile.yellow{background:var(--yellow);color:#1a1300}.tile .flag{width:28px;height:21px;border-radius:3px;display:block;margin:0 auto 4px;object-fit:cover}.tile .arrow{font-size:1.1rem}@keyframes flip{0%{transform:rotateX(-90deg);opacity:0}to{transform:rotateX(0);opacity:1}}.summary-row .tile{animation:none}.summary-row .summary-label{background:transparent;color:var(--text-dim);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.summary-row .summary-unknown{background:repeating-linear-gradient(45deg,var(--bg-elev),var(--bg-elev) 6px,var(--bg-elev-2) 6px,var(--bg-elev-2) 12px);color:var(--text-dim)}.summary-row td.tile:not(.summary-label):not(.summary-unknown){box-shadow:inset 0 0 0 2px #ffffff26}.result{text-align:center;margin:28px auto 0;max-width:480px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:24px}.result h3{margin:0 0 6px;font-size:1.4rem}.result.win h3{color:#6fdd9b}.result p{color:var(--text-dim);margin:0 0 16px}.btn{display:inline-block;background:var(--accent);color:#fff;border:none;padding:11px 22px;border-radius:10px;font-weight:700}.btn:hover{filter:brightness(1.08)}.btn.secondary{background:var(--bg-elev-2)}.legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:20px auto 0;font-size:.8rem;color:var(--text-dim)}.legend span{display:inline-flex;align-items:center;gap:6px}.legend .swatch{width:14px;height:14px;border-radius:4px;display:inline-block}.tree{list-style:none;margin:18px auto;padding:0;max-width:460px}.tree-stop{display:grid;grid-template-columns:64px 18px 1fr;align-items:center;gap:10px;position:relative;padding:6px 0}.tree-stop:before{content:"";position:absolute;left:82px;top:50%;bottom:-6px;width:2px;background:var(--border)}.tree-stop:last-child:before{display:none}.tree-year{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:.85rem}.tree-dot{width:14px;height:14px;border-radius:50%;background:var(--gray);border:2px solid var(--bg);box-shadow:0 0 0 2px var(--border);z-index:1;margin:0 auto}.tree-stop.top5 .tree-dot{background:var(--accent);box-shadow:0 0 0 2px var(--accent)}.tree-club{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:8px 12px}.tree-club-text{display:flex;flex-direction:column;min-width:0}.tree-club-name{font-weight:600}.tree-club-league{color:var(--text-dim);font-size:.8rem}.tree-club-age{flex:none;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:999px;padding:2px 9px;font-size:.78rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.tree-controls{text-align:center;margin-top:10px}.tree-guesses{list-style:none;margin:16px auto 0;padding:0;max-width:460px;display:flex;flex-direction:column;gap:6px}.tree-guess{display:flex;align-items:center;gap:10px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:6px 12px}.tree-guess.wrong{border-color:#5a2330;background:#2a1620}.tree-guess-name{font-weight:600}.tree-guess-club{color:var(--text-dim);font-size:.8rem;margin-left:auto}.tree-guess-mark{color:#e06b7e;font-weight:700}.result .flag{width:28px;height:21px;border-radius:3px;object-fit:cover;vertical-align:middle}.coming-soon{text-align:center;padding:60px 0}.coming-soon .icon{font-size:3.5rem}.coming-soon h2{margin:16px 0 8px}.coming-soon p{color:var(--text-dim);max-width:520px;margin:0 auto 20px}.coming-soon ul{display:inline-block;text-align:left;color:var(--text-dim)}