:root{--bg-dark: #0f172a;--bg-panel: rgba(30, 41, 59, .8);--text-main: #f8fafc;--text-muted: #94a3b8;--accent-primary: #3b82f6;--accent-primary-hover: #2563eb;--accent-secondary: #10b981;--accent-secondary-hover: #059669;--danger: #ef4444;--strike: #f59e0b;--ball: #10b981;--out: #ef4444;--font-main: "Roboto", sans-serif;--font-display: "Orbitron", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:radial-gradient(circle at center,#1e293b,#020617);color:var(--text-main);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:30px 30px;pointer-events:none;z-index:-1}.app-container{width:100%;max-width:800px;height:100vh;max-height:900px;position:relative;display:flex;flex-direction:column}.screen{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .5s ease;padding:5px 10px;overflow-y:auto;display:flex;flex-direction:column}.screen.active{opacity:1;pointer-events:all;z-index:10}h1,h2,h3{font-family:var(--font-display)}.title-container{text-align:center;margin-top:10vh;margin-bottom:50px}.glitch{font-size:4rem;font-weight:700;text-transform:uppercase;position:relative;text-shadow:0 0 10px rgba(59,130,246,.5);letter-spacing:4px}.subtitle{color:var(--text-muted);font-size:1.2rem;margin-top:10px;text-transform:uppercase;letter-spacing:2px}.connection-panel{display:flex;flex-direction:column;gap:20px;background:#1e293b80;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:40px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 40px #0006,inset 0 0 0 1px #ffffff0d}@media (min-width: 600px){.connection-panel{flex-direction:row;align-items:center}}.panel-section{flex:1;display:flex;flex-direction:column;align-items:center;gap:15px}.panel-divider{font-family:var(--font-display);color:var(--text-muted);font-size:1.2rem}@media (min-width: 600px){.panel-divider{padding:0 20px}}.input-text{width:100%;padding:12px 16px;background:#0003;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;font-family:var(--font-display);text-align:center;outline:none;transition:border-color .3s}.input-text:focus{border-color:var(--accent-primary)}.btn{padding:14px 24px;border:none;border-radius:10px;font-family:var(--font-display);font-weight:700;font-size:1rem;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%;position:relative;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}.btn:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;background:#ffffff80;opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}.btn:active:after{animation:ripple .4s ease-out}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(20);opacity:0}}.btn.primary{background:linear-gradient(135deg,var(--accent-primary),#1e3a8a);color:#fff;box-shadow:0 4px 15px #3b82f666}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #3b82f699;filter:brightness(1.1)}.btn.primary:active{transform:translateY(1px)}.btn.secondary{background:linear-gradient(135deg,var(--accent-secondary),#064e3b);color:#fff;box-shadow:0 4px 15px #10b98166}.btn.secondary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #10b98199;filter:brightness(1.1)}.btn.secondary:active{transform:translateY(1px)}.menu-options{display:flex;flex-direction:column;gap:20px;width:100%;max-width:400px;margin:0 auto}.menu-btn{padding:20px;font-size:1.5rem}.settings-group{display:flex;align-items:center;gap:10px;margin-bottom:10px}.settings-group label{font-family:var(--font-display);font-size:.9rem;color:var(--text-muted)}.input-select{padding:8px 12px;background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-family:var(--font-main);outline:none}.derby-status-bar{display:flex;justify-content:space-around;align-items:center;background:linear-gradient(180deg,#0f172ae6,#020617f2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:15px 20px;border-radius:16px;border:1px solid rgba(168,85,247,.4);margin-bottom:15px;box-shadow:0 5px 20px #a855f733}.derby-stat{display:flex;flex-direction:column;align-items:center}.derby-stat .stat-label{font-family:var(--font-display);font-size:.8rem;color:var(--text-muted);letter-spacing:2px}.derby-stat .stat-val{font-family:var(--font-display);font-size:2rem;font-weight:700;color:#fff}.derby-stat .stat-val.highlight{color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.5)}.derby-final-stats{display:flex;flex-direction:column;gap:15px;margin-bottom:30px}.derby-final-stats .stat-item{display:flex;justify-content:space-between;align-items:center;background:#ffffff0d;padding:15px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.derby-final-stats .stat-name{font-family:var(--font-display);font-size:1.2rem;color:var(--text-muted)}.derby-final-stats .stat-value{font-family:var(--font-display);font-size:2rem;font-weight:700;color:#fff}.btn-help{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--font-display);font-size:1.2rem;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s;z-index:100}.btn-help:hover{background:var(--accent-primary);transform:scale(1.1);box-shadow:0 0 15px var(--accent-primary)}.hidden{display:none!important}.room-info{margin-top:20px;text-align:center}#my-room-id{font-size:2rem;color:#fff;margin:10px 0;letter-spacing:2px;text-shadow:0 0 10px rgba(255,255,255,.3)}.status-waiting{color:var(--accent-primary);animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.status-message{text-align:center;margin-top:20px;color:var(--danger);min-height:24px}.scoreboard{display:flex;justify-content:space-between;align-items:center;background:#1e293b99;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:8px 15px;margin-bottom:8px;box-shadow:0 5px 15px #0006}.team-score{display:flex;flex-direction:column;align-items:center}.team-name{font-family:var(--font-display);font-size:.9rem;color:var(--text-muted);margin-bottom:5px}.score{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:#fff}.inning-info{text-align:center}#inning-display{font-family:var(--font-display);font-size:1.5rem;color:var(--accent-primary);font-weight:700;letter-spacing:2px}.game-board-container{position:relative;flex:1;width:100%;display:flex;justify-content:center;align-items:center;background:#00000080;border-radius:12px;border:1px solid rgba(255,255,255,.1);overflow:hidden;min-height:300px}canvas{width:100%;height:100%;max-width:600px;max-height:600px;object-fit:contain;display:block}.bsb-indicator-mini{display:flex;flex-direction:column;gap:4px}.indicator-row{display:flex;align-items:center;gap:8px}.indicator-label{font-family:var(--font-display);color:#fff;width:12px;font-size:.8rem;font-weight:700}.circles{display:flex;gap:3px}.circle{width:10px;height:10px;border-radius:50%;background:#fff3;border:1px solid rgba(255,255,255,.4)}.circle.active.ball{background:var(--ball);box-shadow:0 0 8px var(--ball)}.circle.active.strike{background:var(--strike);box-shadow:0 0 8px var(--strike)}.circle.active.out{background:var(--out);box-shadow:0 0 8px var(--out)}.game-status-bar{display:flex;justify-content:space-between;align-items:center;background:#0f172ae6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 15px;border-radius:8px;border:1px solid rgba(255,255,255,.1);margin-bottom:5px;min-height:40px}.announcement-column{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:1}.announcement-inline{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:#fff;text-shadow:0 0 10px var(--accent-primary);animation:slideInRight .3s cubic-bezier(.175,.885,.32,1.275)}.timing-inline{font-family:var(--font-display);font-size:.9rem;font-weight:700;letter-spacing:1px}@keyframes slideInRight{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}.canvas-wrapper{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.screen-flash{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none;z-index:100}.flash-trigger{animation:flash .3s ease-out}@keyframes flash{0%{opacity:.8}to{opacity:0}}.controls-container{min-height:120px;margin-top:10px;padding-bottom:20px;display:flex;justify-content:center;align-items:center;flex-shrink:0}.controls-panel{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;background:#1e293b99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px}.controls-panel h3{font-size:1rem;color:var(--text-muted);letter-spacing:2px}.buttons-grid{display:flex;gap:10px;width:100%;justify-content:center}.action-btn{flex:1;max-width:160px;font-size:.95rem;padding:16px 12px;text-shadow:0 1px 2px rgba(0,0,0,.5)}.hero-btn{font-size:1.2rem;padding:12px 30px;width:100%;max-width:250px;background:linear-gradient(135deg,#f43f5e,#be123c);box-shadow:0 5px 15px #e11d4866;border:1px solid rgba(255,255,255,.2)}.hero-btn:hover{background:linear-gradient(135deg,#fb7185,#e11d48);box-shadow:0 12px 35px #e11d48cc;transform:translateY(-3px) scale(1.02)}.bg-swing{background:linear-gradient(135deg,#10b981,#059669)}.bg-magic{background:linear-gradient(135deg,#a855f7,#7c3aed);position:relative;overflow:hidden}.bg-magic:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.4) 0%,transparent 70%);animation:magic-shimmer 3s infinite linear}@keyframes magic-shimmer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hero-btn:active{transform:translateY(2px) scale(.98)}.waiting-text{color:var(--accent-primary)!important;animation:pulse 1.5s infinite}.result-card{background:#0f172af2;padding:40px;border-radius:20px;border:1px solid rgba(96,165,250,.3);box-shadow:0 0 50px #000c,0 0 20px #60a5fa33;text-align:center;max-width:500px;width:90%;animation:card-in .5s cubic-bezier(.34,1.56,.64,1)}@keyframes card-in{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.result-title{font-family:Orbitron,sans-serif;font-size:3rem;font-weight:800;margin-bottom:30px;background:linear-gradient(to bottom,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:4px}.final-score{display:flex;justify-content:center;align-items:center;gap:30px;margin-bottom:30px}.score-team{display:flex;flex-direction:column;align-items:center}.score-val{font-size:4rem;font-weight:800;font-family:Orbitron,sans-serif}.team-label{font-size:.9rem;color:#94a3b8;letter-spacing:2px}.score-divider{font-size:2rem;color:#475569}.winner-msg{font-size:1.5rem;color:#fbbf24;margin-bottom:40px;font-weight:600}.bg-fast{background:#3b82f6}.bg-slow{background:#10b981}.bg-curve-l{background:#8b5cf6}.bg-curve-r{background:#f59e0b}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#020617e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;justify-content:center;align-items:center;padding:20px}.overlay-content{background:var(--bg-panel);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:40px;max-width:600px;width:100%;text-align:center;box-shadow:0 20px 50px #00000080;animation:modalPop .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes modalPop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.overlay-content h2{font-size:2rem;margin-bottom:30px;color:var(--accent-primary);letter-spacing:4px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px;text-align:left}.help-item{background:#0000004d;padding:15px;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.help-item .icon{font-size:1.5rem;margin-bottom:8px;display:block}.help-item h3{font-size:.9rem;margin-bottom:5px;color:var(--text-main)}.help-item p{font-size:.8rem;color:var(--text-muted);line-height:1.4}@media (max-width: 500px){.help-grid{grid-template-columns:1fr}}.position-controls{display:flex;align-items:center;gap:10px;margin-bottom:5px;color:var(--text-muted);font-family:var(--font-display)}.move-btn{padding:5px 15px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:5px;cursor:pointer;transition:all .2s}.move-btn:hover{background:#fff3}.speed-control{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--text-muted);font-family:var(--font-display);font-size:.9rem}.hint-text{text-align:center;font-size:.8rem;color:#fff6;margin-top:10px;font-family:var(--font-display);letter-spacing:.5px}.game-status-bar.derby-layout{justify-content:center}.game-status-bar.derby-layout .announcement-column{align-items:center}.derby-status-bar{background:linear-gradient(90deg,#0f172ae6,#3b82f64d,#0f172ae6)!important;border:1px solid rgba(59,130,246,.5)!important;box-shadow:0 0 20px #3b82f633}.derby-stat .highlight{text-shadow:0 0 10px #fde047,0 0 20px #fde047}