@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--accent:#00e87a;--accent-dim:#00e87a1f;--accent-glow:#00e87a40;--accent-border:#00e87a59;--body:"Outfit", system-ui, sans-serif;--display:"Bebas Neue", "Impact", sans-serif;--mono:"JetBrains Mono", "Cascadia Mono", monospace;--page:#06090f;--surface:#ffffff09;--surface-hover:#ffffff0f;--ink:#e8f0ff;--ink-muted:#e8f0ff73;--ink-soft:#e8f0ffb3;--line:#ffffff14;--line-bright:#00e87a33;--gold:#ffd166;--danger:#ff5757;--danger-dim:#ff57571f;--court:#0a2918;--shadow:0 20px 60px #0009;--shadow-sm:0 4px 20px #0006;--glow-accent:0 0 40px #00e87a26;color:var(--ink);background:var(--page);font-family:var(--body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}.app-shell{min-height:100svh;padding:48px 32px;position:relative;overflow-x:hidden}.app-shell:before{content:"";pointer-events:none;z-index:0;background-color:#0000;background-image:linear-gradient(90deg,#00e87a08 1px,#0000 1px),linear-gradient(0deg,#00e87a06 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:64px 64px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:fixed;inset:0}.app-shell:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(#00e87a12 0%,#0064ff0a 40%,#0000 70%);width:900px;height:700px;position:fixed;top:-300px;left:50%;transform:translate(-50%)}.scoreboard{z-index:1;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;max-width:1160px;margin:0 auto 36px;display:grid;position:relative}.scoreboard-copy{max-width:760px}.eyebrow{color:var(--accent);font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:999px;align-items:center;gap:10px;margin-bottom:20px;padding:6px 14px 6px 10px;font-size:11px;font-weight:500;display:inline-flex}.eyebrow img{object-fit:contain;filter:drop-shadow(0 0 6px #00e87a99);width:20px;height:20px}.scoreboard h1{color:var(--ink);font-family:var(--display);letter-spacing:.02em;margin:0;font-size:clamp(52px,8vw,100px);line-height:.88}.scoreboard h1 span{background:linear-gradient(135deg, var(--accent) 0%, #00c4ff 60%, var(--gold) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.scoreboard p{color:var(--ink-muted);max-width:600px;margin:20px 0 0;font-size:17px;font-weight:400;line-height:1.65}.status-strip{background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line-bright);box-shadow:var(--shadow-sm), var(--glow-accent);border-radius:12px;gap:6px;min-width:min(340px,100%);padding:16px 18px;display:grid}.status-strip span{color:var(--accent);font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase;align-items:center;gap:6px;font-size:10px;font-weight:700;display:flex}.status-strip span:before{content:"";background:var(--accent);width:6px;height:6px;box-shadow:0 0 8px var(--accent);border-radius:50%;animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.status-strip code{color:var(--ink-soft);font-family:var(--mono);overflow-wrap:anywhere;font-size:12px}.workspace{z-index:1;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);align-items:start;gap:24px;max-width:1160px;margin:0 auto;display:grid;position:relative}.predictor-form,.result-panel{background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;transition:border-color .3s}.predictor-form:hover,.result-panel:hover{border-color:#ffffff21}.predictor-form{gap:28px;padding:28px;display:grid}.form-section{gap:18px;display:grid}.section-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.form-section h2{color:var(--ink);font-family:var(--display);letter-spacing:.04em;margin:0;font-size:28px;line-height:1}.section-heading a{color:var(--accent);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--accent-border);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;text-decoration:none;transition:background .2s,box-shadow .2s}.section-heading a:hover{background:var(--accent-dim);box-shadow:var(--glow-accent)}.field-grid{gap:16px;display:grid}.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.vs-divider{grid-column:1/-1;justify-content:center;align-self:end;align-items:center;gap:0;display:flex;position:relative}.two-columns .vs-divider{display:none}label{color:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase;gap:8px;font-size:11px;font-weight:600;display:grid}input,select{border:1px solid var(--line);color:var(--ink);font-family:var(--body);background:#ffffff0a;border-radius:10px;min-height:46px;padding:11px 14px;font-size:15px;font-weight:500;transition:border-color .18s,box-shadow .18s,background .18s}input::placeholder,select option{color:var(--ink-muted)}input:focus,select:focus{border-color:var(--accent-border);background:#00e87a0d;outline:none;box-shadow:0 0 0 3px #00e87a1a,inset 0 0 0 1px #00e87a1a}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(232,240,255,0.4)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}select option{color:var(--ink);background:#111827}input[readonly]{color:var(--accent);cursor:default;font-family:var(--mono);letter-spacing:.05em;background:#00e87a0d;border-color:#00e87a26;font-size:14px;font-weight:700}input[readonly]:focus{box-shadow:none;background:#00e87a0d;border-color:#00e87a26}.field-note{color:var(--ink-muted);margin:-6px 0 0;font-size:12px;line-height:1.55}.warning-note{color:var(--danger);background:var(--danger-dim);border:1px solid #ff575733;border-radius:8px;margin-top:-4px;padding:8px 12px}.submit-button{background:var(--accent);color:#03100a;cursor:pointer;font-family:var(--display);letter-spacing:.08em;border:none;border-radius:12px;min-height:56px;padding:14px 24px;font-size:20px;transition:transform .15s,box-shadow .2s;position:relative;overflow:hidden}.submit-button:before{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff26 0%,#0000 60%);position:absolute;inset:0}.submit-button:after{content:"";background:linear-gradient(135deg, var(--accent), #00c4ff);z-index:-1;opacity:0;border-radius:14px;transition:opacity .2s;position:absolute;inset:-2px}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px #00e87a66}.submit-button:hover:not(:disabled):after{opacity:1}.submit-button:active:not(:disabled){transform:translateY(0)}.submit-button:disabled{color:#00e87a66;cursor:not-allowed;background:#00e87a33}.result-panel{align-content:start;gap:28px;min-height:460px;padding:28px;transition:border-color .4s,box-shadow .4s;display:grid;position:sticky;top:24px}.result-panel.has-prediction{border-color:var(--accent-border);box-shadow:var(--shadow), var(--glow-accent)}.panel-label{color:var(--accent);font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase;margin:0 0 10px;font-size:10px;font-weight:700}.result-panel h2{color:var(--ink);font-family:var(--display);letter-spacing:.03em;margin:0;font-size:32px;line-height:1.1}.panel-copy{color:var(--ink-muted);margin:10px 0 0;font-size:14px;line-height:1.6}.error-message{background:var(--danger-dim);color:#ff8080;border:1px solid #ff575740;border-radius:10px;margin:0;padding:12px 14px;font-size:14px;line-height:1.55}.probabilities{gap:24px;display:grid}.probability-row{gap:12px;display:grid}.probability-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.probability-header span{color:var(--ink-soft);overflow-wrap:anywhere;min-width:0;font-size:14px;font-weight:500}.probability-header strong{color:var(--accent);font-family:var(--display);letter-spacing:.02em;text-shadow:0 0 20px #00e87a66;flex-shrink:0;font-size:36px;line-height:1}.probability-row:last-child .probability-header strong{color:#00c4ff;text-shadow:0 0 20px #00c4ff66}.meter{background:#ffffff0f;border-radius:999px;height:10px;position:relative;overflow:hidden}.meter span{background:linear-gradient(90deg, var(--accent), #00c4ff);transform-origin:0;border-radius:999px;height:100%;animation:.8s cubic-bezier(.34,1.56,.64,1) forwards meter-fill;display:block;box-shadow:0 0 12px #00e87a80}.probability-row:last-child .meter span{background:linear-gradient(90deg,#0060ff,#00c4ff);box-shadow:0 0 12px #00c4ff80}@keyframes meter-fill{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}.empty-court{aspect-ratio:1.3;background:var(--court);border:1px solid #ffffff14;border-radius:12px;grid-template-columns:repeat(3,1fr);align-self:end;display:grid;position:relative;overflow:hidden}.empty-court:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000 49.5%,#ffffff1f 50%,#0000 50.5%),linear-gradient(#0000 49.5%,#ffffff1f 50%,#0000 50.5%);position:absolute;inset:0}.empty-court:after{content:"🏸";opacity:.25;font-size:28px;animation:3s ease-in-out infinite court-float;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes court-float{0%,to{transform:translate(-50%,-50%)rotate(-10deg)}50%{transform:translate(-50%,-56%)rotate(10deg)}}.empty-court span{border-right:1px solid #ffffff1a}.empty-court span:last-child{border-right:0}@media (width<=900px){.app-shell{padding:32px 20px}.scoreboard,.workspace{grid-template-columns:1fr}.status-strip{min-width:0}.result-panel{min-height:320px;position:static}}@media (width<=640px){.app-shell{padding:24px 16px}.scoreboard h1{font-size:56px}.predictor-form,.result-panel{padding:20px}.two-columns{grid-template-columns:1fr}.section-heading{flex-direction:column;align-items:start;gap:8px}.probability-header strong{font-size:28px}}
