:root{--coral:#ff7a45;--teal:#36c6e8;--cream:#fff6e8;--ink:#0b0d12;font-family:"Nunito","Avenir Next","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#07080b;color:var(--cream);overflow:hidden}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%}
#hud{position:fixed;inset:0;pointer-events:none;user-select:none}
.badge{position:absolute;top:18px;left:22px;display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:10px;background:rgba(10,12,18,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08)}
.badge b{font-size:12px;letter-spacing:.18em}
.badge span{font-size:11px;opacity:.65}
.scoreplate{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 18px;border-radius:999px;background:rgba(10,12,18,.72);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.scoreplate b{font-size:26px;font-weight:900;min-width:28px;text-align:center}
.scoreplate i{opacity:.5;font-style:normal;font-size:20px}
.team{font-size:12px;font-weight:900;letter-spacing:.08em;padding:5px 10px;border-radius:999px;color:#0b0d12}
.team.coral{background:var(--coral)}.team.teal{background:var(--teal)}
.callout{position:absolute;top:26%;left:50%;transform:translateX(-50%) scale(.6);text-align:center;opacity:0;transition:transform .18s cubic-bezier(.2,1.6,.4,1),opacity .18s}
.callout.show{opacity:1;transform:translateX(-50%) scale(1)}
.callout b{display:block;font-size:52px;font-weight:900;font-style:italic;letter-spacing:.02em;color:#ffd34d;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 30px rgba(255,211,77,.35)}
.callout.pink b{color:#ff5ca8}
.callout.teal b{color:var(--teal)}
.callout span{display:block;font-size:15px;font-weight:800;margin-top:2px;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.chips{position:absolute;top:78px;left:22px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;max-width:240px}
.chips span{font-size:11px;font-weight:700;padding:6px 10px;border-radius:999px;background:rgba(10,12,18,.65);border:1px solid rgba(255,255,255,.08);opacity:.85}
kbd{display:inline-block;font:inherit;font-weight:900;font-size:10px;padding:1px 6px;margin-right:4px;border-radius:5px;background:#f5f0e6;color:#0b0d12}
.studio{position:absolute;left:22px;bottom:70px;pointer-events:auto;padding:12px;border-radius:12px;background:rgba(10,12,18,.72);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);max-width:560px}
.studio-title{font-size:12px;font-weight:900;letter-spacing:.14em;margin-bottom:8px}
.studio-title span{color:#ffd34d;margin-left:6px}
.studio-title em{font-style:normal;opacity:.6;margin-left:10px;font-weight:700}
.studio-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.studio button{font:inherit;font-size:12px;font-weight:800;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:var(--cream);cursor:pointer}
.studio button:hover{background:rgba(255,255,255,.18)}
.studio button.on{background:#ffd34d;color:#0b0d12;border-color:#ffd34d}
.studio-row.small button{font-size:11px;padding:4px 8px}

.side{display:flex;flex-direction:column;align-items:center;gap:4px}
.pips{display:flex;gap:4px}.pips i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);transition:all .2s}
.pips i.on{background:#ffd34d;border-color:#ffd34d;box-shadow:0 0 8px #ffd34d}
.pips.ready i{background:#fff;border-color:#fff;box-shadow:0 0 12px #ffd34d,0 0 24px #ff7a45;animation:pulse .6s infinite alternate}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.35)}}
.flash{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen}
.flash.go{animation:flash .55s ease-out}
.flash.comet{background:radial-gradient(ellipse at center,rgba(255,120,40,0) 35%,rgba(255,90,20,.65) 100%)}
.flash.banana{background:radial-gradient(ellipse at center,rgba(255,225,60,0) 35%,rgba(255,215,40,.6) 100%)}
.flash.cloud{background:radial-gradient(ellipse at center,rgba(200,170,255,0) 35%,rgba(170,130,255,.6) 100%)}
.flash.ready{background:radial-gradient(ellipse at center,rgba(255,255,255,0) 45%,rgba(255,211,77,.5) 100%)}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.callout.comet b{color:#ff7a2a;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 40px rgba(255,122,42,.8)}
.callout.banana b{color:#ffe13a;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 40px rgba(255,225,58,.8)}
.callout.cloud b{color:#d2b8ff;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 40px rgba(201,168,255,.8)}
.callout.comet b,.callout.banana b,.callout.cloud b{font-size:64px;letter-spacing:.03em}
.chips{transition:opacity .3s}.chips.dim{opacity:0}

.campanel{position:absolute;right:18px;bottom:18px;width:324px;pointer-events:auto;border-radius:12px;overflow:hidden;background:rgba(10,12,18,.8);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.campanel canvas{display:block;width:324px;height:182px;background:#000}
.camstatus{padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.camstatus b{font-size:12px;letter-spacing:.14em}.camstatus b.ready{color:#ffe13a}.camstatus b.bad{color:#ff5ca8}
.camstatus span{font-size:11px;opacity:.7}
.camrow{display:flex;gap:6px;padding:0 10px 10px}
.camrow button{font:inherit;font-size:11px;font-weight:800;padding:5px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:var(--cream);cursor:pointer}
.hidechips{position:absolute;top:78px;left:22px;z-index:2;pointer-events:auto;font:inherit;font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(10,12,18,.75);color:var(--cream);cursor:pointer}
.chips{top:108px}
body.nochips .chips{display:none}body.nochips .hidechips{opacity:.5}

.start{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(5,6,9,.78);backdrop-filter:blur(6px)}
.start-card{max-width:520px;padding:28px 30px;border-radius:16px;background:rgba(14,16,22,.95);border:1px solid rgba(255,255,255,.12);text-align:center}
.start-card .eyebrow{font-size:11px;letter-spacing:.2em;opacity:.7}
.start-card h1{margin:8px 0 6px;font-size:40px;font-weight:900;font-style:italic;color:#ffd34d}
.start-card p{font-size:15px;line-height:1.4;opacity:.9}
.start-card .small{font-size:12px;opacity:.6}
.start-card button{font:inherit;font-size:16px;font-weight:900;padding:12px 22px;border-radius:999px;border:0;background:#ff7a45;color:#0b0d12;cursor:pointer;margin-top:6px}
body[data-mode=demo] .chips,body[data-mode=demo] .hidechips,body[data-mode=demo] #studio{display:none}
.camp2{font-size:11px;font-weight:800;color:#36c6e8;align-self:center}
.start-card button.alt{background:rgba(255,255,255,.1);color:var(--cream);border:1px solid rgba(255,255,255,.2)}
.campanel.mini{width:auto}.campanel.mini canvas,.campanel.mini .camstatus span{display:none}.campanel.mini .camstatus{padding:6px 10px}.campanel.mini .camrow{padding:0 8px 8px}

.dbg{position:absolute;left:18px;bottom:18px;width:344px;pointer-events:auto;border-radius:12px;overflow:hidden;background:rgba(10,12,18,.84);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.dbg-title{font-size:11px;font-weight:900;letter-spacing:.14em;padding:7px 10px 4px;color:#ffd34d}.dbg-title span{float:right;opacity:.5;font-weight:700;letter-spacing:0}
.dbg canvas{display:block;width:344px;height:163px}
.dbg pre{margin:0;padding:6px 10px 9px;font:10px/1.45 ui-monospace,Menlo,monospace;white-space:pre;color:var(--cream);opacity:.92}
.camrow button.on{background:#ffd34d;color:#0b0d12;border-color:#ffd34d}
body[data-mode=demo] .dbg{bottom:18px}
.camrow button.rec,.dbg-title button.rec{background:#ff5ca8;color:#0b0d12;border-color:#ff5ca8;animation:recblink 1s steps(2) infinite}
@keyframes recblink{50%{opacity:.55}}
.dbg-title button{font:inherit;font-size:10px;font-weight:800;letter-spacing:0;margin-left:8px;padding:2px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:var(--cream);cursor:pointer;vertical-align:middle}

.classic-link{display:block;margin-top:10px;color:#ffd34d;font-weight:800;text-decoration:none;opacity:.85}.classic-link:hover{opacity:1;text-decoration:underline}

/* timing cue (from the classic game): the ball dot slides into the circle; green = swing window, gold = perfect */
.timing-cue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border:2px solid #fff8e7;border-radius:50%;display:grid;place-items:center;filter:drop-shadow(0 2px 4px #0006);color:#fff8e7;pointer-events:none;transition:border-color .08s,background .08s}
.timing-cue>b{position:absolute;bottom:calc(100% + 8px);font-size:12px;font-weight:900;letter-spacing:.1em}
.timing-cue .timing-label{position:absolute;top:calc(100% + 8px);font-size:12px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
.timing-cue .timing-ring{position:absolute;width:var(--perfect-size,27px);height:var(--perfect-size,27px);border:1px solid #ffe588;background:#ffe58835;border-radius:50%}
.timing-cue .timing-ball{position:absolute;width:12px;height:12px;background:#f2ff75;border-radius:50%;transform:translateX(var(--ball-x,0px));box-shadow:0 0 10px #efff77}
.timing-cue[data-window=hit]{border-color:#bbf4dd;background:#98eed630}
.timing-cue[data-window=perfect]{border-color:#ffe588;background:#ffe58855;box-shadow:0 0 18px #ffe58866}
.timing-cue[data-window=late]{border-color:#ff5ca8;background:#ff5ca830}
.timing-cue[data-window=toss]{border-color:#ffd34d;border-style:dashed}
.timing-cue[data-window=toss] .timing-ball,.timing-cue[data-window=toss] .timing-ring{display:none}
.timing-cue.p2{border-color:#9be4f5}.timing-cue.p2>b{color:#36c6e8}
.timing-cue[hidden]{display:none}