:root{--bg: #09090C;--surface-1: #101015;--surface-2: #18181F;--border-1: #1E1E28;--border-2: #2C2C3C;--text-1: #EDEAE0;--text-2: #8080A0;--text-3: #444458;--accent: #FF6B2B;--accent-dim: rgba(255, 107, 43, .14);--accent-ring: rgba(255, 107, 43, .28);--ideal-bg: #081C12;--ideal-border: #14512E;--ideal-text: #3ED070;--good-bg: #1A1204;--good-border: #5A3C08;--good-text: #E8A830;--avoid-bg: #180808;--avoid-border: #561414;--avoid-text: #E05050;--timeout-bg: #18181F;--timeout-border: #2C2C3C;--timeout-text: #8080A0;--r: 10px;--r-sm: 6px;--ease: .15s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text-1);font-family:DM Sans,system-ui,sans-serif;font-size:15px;line-height:1.5;min-height:100svh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit}.app{min-height:100svh;display:flex;flex-direction:column}.page,.game-page,.results-page{flex:1;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem 3rem}.container{width:100%;max-width:600px}.landing-header{text-align:center;padding-top:2.5rem;margin-bottom:2.75rem}.landing-eyebrow{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:.875rem}.landing-title{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(2.25rem,7vw,3.5rem);letter-spacing:-.025em;line-height:1.05;color:var(--text-1);margin-bottom:1rem}.landing-sub{font-size:15px;color:var(--text-2);line-height:1.75;max-width:380px;margin:0 auto}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:2rem}@media(max-width:480px){.mode-grid{grid-template-columns:1fr}}.mode-card{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r);padding:1.5rem;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:.625rem;transition:border-color var(--ease),background var(--ease),transform var(--ease),box-shadow var(--ease)}.mode-card:hover{border-color:var(--border-2);background:var(--surface-2);transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.mode-card.hard:hover{border-color:var(--accent-ring);box-shadow:0 8px 24px #0000004d,0 0 0 1px var(--accent-ring)}.mode-icon{font-size:1.625rem;line-height:1}.mode-label{font-family:Syne,sans-serif;font-weight:700;font-size:1.0625rem;color:var(--text-1);display:block}.mode-desc{font-size:13px;color:var(--text-2);line-height:1.65;display:block}.mode-meta{margin-top:.5rem;font-size:12px;color:var(--text-3);display:block}.landing-footnote{font-size:13px;color:var(--text-3);text-align:center;line-height:1.7;max-width:400px;margin:0 auto}.top-bar{display:flex;align-items:center;gap:10px;margin-bottom:1.25rem}.progress-dots{display:flex;gap:4px;flex:1}.dot{flex:1;height:3px;border-radius:2px;background:var(--border-1);transition:background var(--ease)}.dot.done{background:var(--ideal-border)}.dot.timeout{background:var(--avoid-border)}.dot.current{background:var(--text-2)}.progress-label{font-size:12px;color:var(--text-3);white-space:nowrap}.hard-badge{display:inline-flex;align-items:center;gap:4px;background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-ring);font-size:10px;font-weight:600;letter-spacing:.07em;padding:3px 9px;border-radius:var(--r-sm);white-space:nowrap}.scenario-card{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r);padding:1.125rem 1.25rem;margin-bottom:.625rem}.scenario-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}.scenario-icon{width:32px;height:32px;background:var(--surface-2);border:1px solid var(--border-1);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}.scenario-tag{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}.scenario-name{font-family:Syne,sans-serif;font-weight:700;font-size:14px;color:var(--text-1);line-height:1.25}.scenario-desc{font-size:13.5px;color:var(--text-2);line-height:1.7}.timer-row{display:flex;align-items:center;gap:10px;margin:.5rem 0 1rem}.timer-track{flex:1;height:3px;background:var(--border-1);border-radius:2px;overflow:hidden}.timer-fill{height:100%;border-radius:2px;transition:background .4s ease}.timer-label{font-size:12px;font-weight:500;color:var(--text-3);min-width:26px;text-align:right;transition:color var(--ease)}.timer-label.urgent{color:var(--avoid-text)}.legend{display:flex;gap:16px;margin-bottom:.875rem;animation:fadeUp .2s ease}.legend-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2)}.legend-dot{width:8px;height:8px;border-radius:50%}.openers-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:1rem}.opener-btn{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;text-align:left;width:100%;display:flex;flex-direction:column;gap:3px;transition:border-color var(--ease),background var(--ease)}.opener-btn:hover:not(:disabled){border-color:var(--border-2);background:var(--surface-2)}.opener-btn:disabled{cursor:default}.opener-num{font-size:10px;font-weight:500;color:var(--text-3)}.opener-text{font-size:12.5px;color:var(--text-1);line-height:1.45}.opener-btn.ideal{background:var(--ideal-bg);border-color:var(--ideal-border)}.opener-btn.ideal .opener-text,.opener-btn.ideal .opener-num{color:var(--ideal-text)}.opener-btn.good{background:var(--good-bg);border-color:var(--good-border)}.opener-btn.good .opener-text,.opener-btn.good .opener-num{color:var(--good-text)}.opener-btn.avoid{background:var(--avoid-bg);border-color:var(--avoid-border)}.opener-btn.avoid .opener-text,.opener-btn.avoid .opener-num{color:var(--avoid-text)}.opener-btn.picked{border-width:2px}.feedback-box{border-radius:var(--r-sm);padding:.875rem 1.125rem;margin-bottom:.875rem;font-size:13.5px;line-height:1.7;border:1px solid transparent;animation:fadeUp .2s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.feedback-box.ideal{background:var(--ideal-bg);color:var(--ideal-text);border-color:var(--ideal-border)}.feedback-box.good{background:var(--good-bg);color:var(--good-text);border-color:var(--good-border)}.feedback-box.avoid{background:var(--avoid-bg);color:var(--avoid-text);border-color:var(--avoid-border)}.feedback-box.timeout{background:var(--timeout-bg);color:var(--timeout-text);border-color:var(--timeout-border)}.feedback-head{font-weight:500;font-size:14px;display:block;margin-bottom:3px}.bottom-row{display:flex;justify-content:space-between;align-items:center}.score-counter{font-size:13px;color:var(--text-2)}.streak-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2)}.streak-dots{display:flex;gap:3px}.streak-dot{width:7px;height:7px;border-radius:50%;background:var(--border-2)}.streak-dot.lit{background:var(--ideal-text)}.hint-text{font-size:12px;color:var(--text-3);text-align:center}.btn{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:9px 20px;font-size:13.5px;font-weight:500;color:var(--text-1);cursor:pointer;transition:background var(--ease),border-color var(--ease)}.btn:hover{background:var(--border-1);border-color:var(--text-3)}.btn-ghost{background:transparent;border:none;font-size:13px;color:var(--text-3);cursor:pointer;padding:6px 2px;transition:color var(--ease)}.btn-ghost:hover{color:var(--text-2)}.results-page{padding-top:2.5rem}.results-container{width:100%;max-width:600px;text-align:center}.results-badge{display:inline-flex;align-items:center;gap:4px;background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-ring);font-size:10px;font-weight:600;letter-spacing:.07em;padding:3px 9px;border-radius:var(--r-sm);margin-bottom:1.5rem}.results-score{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(4rem,14vw,6rem);line-height:1;color:var(--text-1);letter-spacing:-.03em}.results-denom{font-size:clamp(1.5rem,5vw,2rem);color:var(--text-3);font-weight:600}.results-msg{font-size:15px;color:var(--text-2);margin:.625rem 0 2rem}.results-breakdown{display:flex;gap:10px;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}.breakdown-pill{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r-sm);padding:14px 22px;min-width:80px;text-align:center}.breakdown-number{display:block;font-family:Syne,sans-serif;font-weight:700;font-size:1.875rem;line-height:1}.breakdown-number.ideal{color:var(--ideal-text)}.breakdown-number.good{color:var(--good-text)}.breakdown-number.avoid{color:var(--avoid-text)}.breakdown-number.timeout{color:var(--text-3)}.breakdown-label{display:block;font-size:11px;color:var(--text-3);margin-top:4px}.scenario-breakdown{text-align:left;margin-bottom:2rem}.breakdown-title{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);text-align:center;margin-bottom:.875rem}.breakdown-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border-1);font-size:13px}.breakdown-row:last-child{border-bottom:none}.breakdown-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0}.breakdown-name{flex:1;color:var(--text-2)}.result-chip{font-size:11px;font-weight:500;padding:2px 9px;border-radius:4px;flex-shrink:0}.result-chip.ideal{background:var(--ideal-bg);color:var(--ideal-text)}.result-chip.good{background:var(--good-bg);color:var(--good-text)}.result-chip.avoid{background:var(--avoid-bg);color:var(--avoid-text)}.result-chip.timeout{background:var(--timeout-bg);color:var(--timeout-text);border:1px solid var(--border-2)}.results-actions{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:.5rem}@media(max-width:480px){.openers-grid{grid-template-columns:1fr 1fr;gap:5px}.opener-text{font-size:12px}.results-breakdown{gap:8px}.breakdown-pill{padding:12px 14px;min-width:68px}}.section{margin-bottom:2rem}.section-label{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:.875rem}.pack-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}@media(max-width:600px){.pack-grid{grid-template-columns:repeat(2,1fr)}.pack-grid .pack-card:last-child{grid-column:span 2}}.pack-card{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r);padding:1rem .875rem;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:.375rem;transition:border-color var(--ease),background var(--ease),transform var(--ease)}.pack-card:hover{border-color:var(--pack-color, var(--border-2));background:var(--surface-2);transform:translateY(-1px)}.pack-card.selected{border-color:var(--pack-color, var(--accent));background:var(--surface-2);box-shadow:0 0 0 1px var(--pack-color, var(--accent))}.pack-icon{font-size:1.375rem;line-height:1}.pack-label{font-family:Syne,sans-serif;font-weight:700;font-size:.875rem;color:var(--text-1);display:block}.pack-desc{font-size:11px;color:var(--text-2);line-height:1.5;display:block}.pack-best{font-size:11px;color:var(--text-3);display:block;margin-top:.25rem}.mode-section{transition:opacity .2s ease}.mode-section.locked{opacity:.35;pointer-events:none}.mode-card:disabled{cursor:default}.pack-pill,.results-pack-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--pack-color, var(--accent));background:color-mix(in srgb,var(--pack-color, var(--accent)) 12%,transparent);border:1px solid color-mix(in srgb,var(--pack-color, var(--accent)) 25%,transparent);padding:3px 10px;border-radius:var(--r-sm);margin-bottom:.75rem;letter-spacing:.04em}.how-it-works{display:flex;flex-direction:column;gap:10px;margin-bottom:2.5rem;padding:1.25rem;background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r)}.hiw-item{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--text-2);line-height:1.65}.hiw-item strong{color:var(--text-1);font-weight:500}.hiw-num{width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-2);font-size:11px;font-weight:600;color:var(--text-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.pack-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}.pack-start-badge{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-ring);padding:2px 6px;border-radius:4px}.pack-note{max-height:0;overflow:hidden;transition:max-height .3s ease,opacity .2s ease;opacity:0;margin-top:0}.pack-note.visible{max-height:400px;opacity:1;margin-top:12px}.pack-note-inner{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r);padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:10px}.pack-note-row{display:flex;gap:12px;font-size:13px;line-height:1.65;color:var(--text-2)}.pack-note-label{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);min-width:80px;padding-top:2px;flex-shrink:0}.pack-note-tip{padding-top:10px;border-top:1px solid var(--border-1);color:var(--text-2)}