@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{color-scheme:light;--bg: #f6f3ec;--bg-soft: #efe8dd;--card: #ffffff;--accent: #1b7f8b;--accent-strong: #145b63;--text: #1a1b1f;--muted: #5f6b6d;--success: #1f9d7a;--danger: #c94f4f;--shadow: 0 18px 45px rgba(19, 32, 39, .15);--radius: 18px}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at top left,#ffffff 0%,var(--bg) 45%,#e9e1d6 100%);color:var(--text);min-height:100vh}a{color:inherit;text-decoration:none}button{font-family:inherit}#app{min-height:100vh;display:flex;flex-direction:column}.app-shell{max-width:1100px;margin:0 auto;padding:20px;width:100%}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.4px}.brand-badge{width:40px;height:40px;border-radius:14px;background:linear-gradient(140deg,var(--accent) 0%,var(--accent-strong) 100%);display:grid;place-items:center;color:#fff;font-weight:700}.nav{display:flex;gap:12px;flex-wrap:wrap}.nav a{padding:8px 14px;border-radius:999px;background:#1b7f8b1f;font-size:14px}.nav a.active{background:var(--accent);color:#fff;font-weight:600}.avatar-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#1b7f8b1f;font-weight:600}.header-user{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.lang-switch{display:inline-flex;align-items:center;padding:4px;border-radius:999px;background:#1b7f8b1a;gap:4px}.lang-btn{border:none;background:transparent;color:var(--muted);border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px;cursor:pointer}.lang-btn.active{background:#fff;color:var(--accent-strong);box-shadow:0 6px 14px #1320271f}.balance-pill{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#1b7f8b1f;font-weight:700;color:var(--accent-strong)}.hero{display:grid;gap:20px;padding:40px 28px;background:linear-gradient(135deg,#1b7f8b29,#fffffff2);border-radius:var(--radius);box-shadow:var(--shadow)}.hero h1{margin:0;font-size:clamp(2.2rem,5vw,3.4rem)}.hero p{margin:0;color:var(--muted);font-size:1rem;max-width:560px}.landing-about{display:grid;gap:16px;padding:22px;background:linear-gradient(135deg,#1b7f8b14,#fffffff2)}.landing-about-head{display:grid;gap:8px}.landing-about-head h2{margin:0;font-size:clamp(1.4rem,2vw,2rem)}.landing-about-head p{margin:0;color:var(--muted);max-width:820px}.landing-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.landing-step{display:grid;gap:8px;padding:14px;border-radius:14px;border:1px solid rgba(27,127,139,.2);background:#ffffffe0}.landing-step span{color:var(--muted);font-size:14px}.landing-step-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#1b7f8b24}.landing-visual{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1fr);gap:12px;align-items:stretch}.landing-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.landing-mini-tile{min-height:70px;border-radius:12px;border:1px solid #dfd5c7;background:#f8f2e9;display:grid;place-items:center;font-size:24px}.landing-mini-tile.hit{border-color:#1f9d7a99;background:linear-gradient(135deg,#1f9d7a40,#fffffff2)}.landing-kpi-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.landing-kpi{display:grid;gap:4px;border-radius:12px;padding:10px;background:#fff;border:1px solid rgba(27,127,139,.2)}.landing-kpi span{color:var(--muted);font-size:12px}.landing-kpi strong{color:var(--accent-strong);font-size:24px;line-height:1}.landing-benefits{display:flex;flex-wrap:wrap;gap:10px}.button{border:none;border-radius:999px;padding:12px 22px;font-weight:600;cursor:pointer;background:var(--accent);color:#fff;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 12px 24px #0003}.button:hover{transform:translateY(-1px)}.button.secondary{background:transparent;border:1px solid rgba(27,127,139,.4);color:var(--accent);box-shadow:none}.button.secondary.active{border-color:var(--accent);color:var(--accent-strong);background:#1b7f8b1a}.button.danger{background:var(--danger);color:#fff}.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.grid-wrap{position:relative}.line-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.9}.tile{border-radius:16px;padding:12px;background:#f7f3ed;border:1px solid #e5dbcf;min-height:98px;display:flex;flex-direction:column;justify-content:space-between;transition:border .2s ease,transform .2s ease,background .2s ease,box-shadow .2s ease;font-size:13px;text-align:left}.tile strong{font-size:15px;line-height:1.25}.tile-title-row{display:flex;align-items:flex-start;gap:8px}.tile-icon{font-size:18px;line-height:1;margin-top:1px}.tile.selected{border-color:var(--accent-strong);background:linear-gradient(135deg,#1b7f8b33,#fffffff2);transform:translateY(-2px) scale(1.01);box-shadow:0 10px 22px #1b7f8b33}.tile.closed{background:#1f9d7a2e;border-color:#1f9d7a80}.tile.tile-pastClosed{opacity:.55;filter:grayscale(.2)}.tile.tile-win{border-color:#1f9d7ab3;background:linear-gradient(135deg,#1f9d7a47,#fffffff2);box-shadow:0 10px 22px #1f9d7a38}.tile.tile-miss{border-color:#c94f4f8c;background:linear-gradient(135deg,#c94f4f29,#fffffff5)}.tile.tile-opportunity{border-color:#3f75cb7a;background:linear-gradient(135deg,#3f75cb29,#fffffff5)}.tile.disabled{opacity:.5;pointer-events:none}.tile-hit{color:var(--success);font-weight:600;font-size:12px}.badge-row{display:flex;gap:10px;flex-wrap:wrap}.badge{padding:6px 12px;border-radius:999px;background:#1b7f8b1f;font-size:13px}.bet-top{display:grid;gap:12px;padding:12px;border-radius:16px;background:#f4efe5;border:1px solid rgba(27,127,139,.2)}.bet-top-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bet-options-row{display:flex;gap:10px;flex-wrap:wrap}.bet-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bet-kpi{border-radius:14px;background:#fff;border:1px solid rgba(27,127,139,.2);padding:12px}.bet-kpi.risk-low{border-color:#1f9d7a66;background:#1f9d7a0f}.bet-kpi.risk-mid{border-color:#cc8b2266;background:#cc8b2214}.bet-kpi.risk-high{border-color:#c94f4f66;background:#c94f4f12}.risk-badge{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid transparent}.risk-badge.low{background:#1f9d7a26;color:#1f7a62;border-color:#1f9d7a59}.risk-badge.mid{background:#cc8b222e;color:#8a5d12;border-color:#cc8b2259}.risk-badge.high{background:#c94f4f24;color:#8f3333;border-color:#c94f4f52}.bet-kpi-value{font-size:clamp(1.7rem,2.2vw,2.2rem);line-height:1;font-weight:700;color:var(--accent-strong)}.guide-block{display:grid;gap:12px;padding-top:4px}.guide-head{display:grid;gap:4px}.guide-list{display:grid;gap:14px;grid-template-columns:1fr}.guide-item{display:grid;grid-template-columns:minmax(360px,1fr) minmax(180px,250px);gap:14px;align-items:center;padding:12px;border:1px solid rgba(27,127,139,.2);border-radius:14px;background:#f8f5ef}.mini-card{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.mini-cell{display:grid;gap:4px;align-content:start;width:100%;min-height:62px;border-radius:8px;border:1px solid #e5dbcf;background:#f7f3ed;padding:6px}.mini-cell.closed{border-color:var(--accent-strong);background:linear-gradient(135deg,#1b7f8b33,#fffffff2);box-shadow:0 8px 16px #1b7f8b26}.mini-icon{font-size:14px;line-height:1}.mini-label{font-size:10px;line-height:1.2;font-weight:600;color:#384245}.guide-marketing{display:grid;gap:6px;justify-items:end;text-align:right}.guide-title{font-weight:700}.guide-prize{font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--accent-strong);font-weight:800}.guide-note{font-size:12px;color:var(--muted);max-width:240px}.section{display:grid;gap:16px;margin-bottom:22px}.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(27,127,139,.25);background:#fff;color:var(--text)}.avatar-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.avatar{min-height:74px;border-radius:16px;background:#f2ece3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:600;cursor:pointer;border:1px solid #e2d8c9;color:var(--text)}.avatar.active{border-color:var(--accent);background:#1b7f8b1f}.avatar-emoji{font-size:24px;line-height:1}.avatar-label{font-size:12px;color:var(--muted)}.match-card{display:grid;gap:8px;padding:16px;border-radius:16px;background:#f5f0e7;text-align:center;justify-items:center}.match-card h3{margin:0}.match-meta{color:var(--muted);font-size:13px}.stats-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.stat,.result-score{padding:12px;border-radius:14px;background:#f5f0e7}.result-score-line{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}.result-score-line strong{font-size:clamp(1.9rem,2.8vw,2.5rem);color:var(--accent-strong)}.result-goals,.result-events{display:grid;gap:10px}.result-win-banner{display:grid;gap:6px;padding:14px;border-radius:14px;border:1px solid rgba(31,157,122,.45);background:linear-gradient(135deg,#1f9d7a33,#fffffff5)}.result-win-label{font-weight:700;color:#1f7a62}.result-win-value{font-size:clamp(2rem,3.2vw,2.8rem);line-height:1;font-weight:800;color:#1f7a62}.goal-list{display:grid;gap:8px}.goal-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;border-radius:12px;background:#f5f0e7}.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{text-align:left;padding:10px 8px;border-bottom:1px solid rgba(27,127,139,.12)}.notice{padding:12px 14px;border-radius:14px;background:#1b7f8b1f;color:var(--muted);font-size:14px}.bonus-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.bonus-title{font-weight:700;font-size:18px}.bonus-token{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#1b7f8b24;font-size:22px}.bonus-track{height:10px;width:100%;border-radius:999px;background:#1b7f8b24;overflow:hidden}.bonus-fill{height:100%;width:24%;border-radius:inherit;background:linear-gradient(90deg,#64d2dc,#1b7f8b);transition:width .3s ease}.bonus-fill.filled{width:100%}.schedule-list{display:grid;gap:10px}.schedule-item{border:1px solid rgba(27,127,139,.2);border-radius:14px;background:#f8f5ef;padding:12px 14px;display:grid;gap:8px;text-align:center}.schedule-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.footer-actions{display:flex;gap:12px;flex-wrap:wrap}.friends-head{display:flex;align-items:center;gap:10px;position:relative}.friends-head h2{margin:0}.hint-button{border:1px solid rgba(27,127,139,.35);background:#1b7f8b1f;color:var(--accent-strong);border-radius:999px;width:28px;height:28px;font-weight:700;cursor:pointer}.hint-bubble{position:absolute;top:calc(100% + 6px);left:0;display:grid;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid rgba(27,127,139,.28);background:#fff;box-shadow:0 12px 20px #1320271f;z-index:3;min-width:240px;font-size:13px}.button-compact{padding:8px 12px;font-size:13px}.leaderboard-dots{text-align:center;letter-spacing:3px;color:var(--muted)}.player-cell{display:inline-flex;align-items:center;gap:8px}.player-avatar{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:#1b7f8b1f;font-size:18px}.rank-cell{display:inline-flex;align-items:center;gap:6px}.rank-crown{min-width:18px}.table tr.top1{background:linear-gradient(90deg,#f4c54242,#ffffffe0);font-weight:700}.table tr.top2{background:linear-gradient(90deg,#c0c8d647,#ffffffe6);font-weight:700}.table tr.top3{background:linear-gradient(90deg,#d9a06d40,#ffffffe6);font-weight:700}.friend-code-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.friend-code-value{letter-spacing:1px;font-size:20px;color:var(--accent-strong)}.demo-controls{border:1px solid rgba(27,127,139,.2);border-radius:12px;padding:8px 10px;background:#f8f5ef}.demo-controls summary{cursor:pointer;font-weight:600;color:var(--muted)}.demo-controls-row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}@media (max-width: 720px){.header{flex-direction:column;align-items:flex-start}.nav{width:100%}.hero{padding:28px 20px}.landing-steps,.landing-visual{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.schedule-row{flex-direction:column;align-items:center}.bet-kpis,.guide-item{grid-template-columns:1fr}.guide-marketing{justify-items:start;text-align:left}}