*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#080808;
  --surface:#101010;
  --panel:#171717;
  --border:#222;
  --accent:#d4f544;
  --accent-dim:rgba(212,245,68,0.15);
  --text:#f0f0f0;
  --muted:#555;
  --good:#4dff91;
  --warn:#ffb84d;
  --bad:#ff4d4d;
}
html,body,#root{height:100%;background:var(--black);color:var(--text);font-family:'DM Sans',sans-serif;overflow:hidden}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ── LOADING ── */
.loading{position:fixed;inset:0;background:var(--black);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:200;transition:opacity .7s}
.loading.out{opacity:0;pointer-events:none}
.loading-logo{font-family:'Bebas Neue',cursive;font-size:52px;letter-spacing:8px;color:var(--accent)}
.loading-logo span{color:var(--text)}
.loading-bar-wrap{width:220px;height:2px;background:var(--border);border-radius:1px;overflow:hidden}
.loading-bar-fill{height:100%;background:var(--accent);width:0%;transition:width .4s ease}
.loading-status{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}

/* ── MODE SELECT ── */
.mode-select{position:fixed;inset:0;background:var(--black);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;z-index:100;transition:opacity .5s}
.mode-select.out{opacity:0;pointer-events:none}
.ms-logo{font-family:'Bebas Neue',cursive;font-size:44px;letter-spacing:8px;color:var(--accent);margin-bottom:4px}
.ms-logo span{color:var(--text)}
.ms-sub{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:4px;color:var(--muted);text-transform:uppercase;margin-bottom:48px}
.ms-title{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:20px}
.ms-cards{display:flex;gap:16px;margin-bottom:32px}
.ms-card{width:260px;border:1px solid var(--border);border-radius:8px;padding:24px;cursor:pointer;transition:all .25s;background:var(--panel);position:relative;overflow:hidden}
.ms-card::before{content:'';position:absolute;inset:0;background:var(--accent-dim);opacity:0;transition:opacity .3s}
.ms-card:hover::before,.ms-card.sel::before{opacity:1}
.ms-card.sel{border-color:var(--accent)}
.ms-card-title{font-family:'Bebas Neue',cursive;font-size:26px;letter-spacing:2px;color:var(--accent);margin-bottom:6px}
.ms-card-badge{display:inline-block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--border);color:var(--muted);margin-bottom:12px}
.ms-card-desc{font-size:12px;color:var(--muted);line-height:1.7;font-weight:300}
.ms-card-tips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ms-tip{font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:3px;border:1px solid var(--border);color:var(--muted);font-family:'DM Mono',monospace}
.ms-btn{background:var(--accent);color:var(--black);border:none;padding:14px 52px;font-family:'Bebas Neue',cursive;font-size:20px;letter-spacing:3px;border-radius:4px;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 0 40px rgba(212,245,68,.25)}
.ms-btn:hover{transform:scale(1.04);box-shadow:0 0 60px rgba(212,245,68,.45)}
.ms-hint{font-size:12px;color:var(--muted);margin-top:12px;font-weight:300}

/* ── APP LAYOUT ── */
.app{display:grid;grid-template-rows:54px 1fr;grid-template-columns:1fr 310px;height:100vh}

/* ── HEADER ── */
.hdr{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--border)}
.hdr-logo{font-family:'Bebas Neue',cursive;font-size:26px;letter-spacing:4px;color:var(--accent)}
.hdr-logo span{color:var(--text)}
.hdr-center{display:flex;align-items:center;gap:10px}
.mode-pill{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;border-radius:3px;border:1px solid var(--accent);color:var(--accent);background:var(--accent-dim)}
.status-pill{display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:20px;border:1px solid var(--border);font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);transition:all .3s}
.status-pill.live{border-color:var(--accent);color:var(--accent)}
.status-pill.live .sdot{background:var(--accent)}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:sdotpulse 2s infinite}
@keyframes sdotpulse{0%,100%{opacity:1}50%{opacity:.25}}
.hdr-right{display:flex;align-items:center;gap:10px}
.back-btn{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border-radius:3px;cursor:pointer;transition:all .2s}
.back-btn:hover{border-color:var(--text);color:var(--text)}

/* ── CAMERA — live video VISIBLE underneath skeleton ── */
.cam{position:relative;background:#040404;overflow:hidden}
/* Video is now VISIBLE — opacity:1, canvas is semi-transparent overlay */
video{
  position:absolute;width:100%;height:100%;
  object-fit:cover;
  transform:scaleX(-1);
  opacity:1;           /* ← LIVE FEED ON */
}
canvas{
  position:absolute;width:100%;height:100%;
  object-fit:cover;
  transform:scaleX(-1);
  /* semi-transparent so skeleton overlays live video */
  mix-blend-mode:screen;
}

/* Subtle dark vignette so feedback text is readable */
.cam-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 30%),
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 20%);
}

/* corner frames */
.fc{position:absolute;width:22px;height:22px;border-color:rgba(212,245,68,.5);border-style:solid;z-index:6}
.fc.tl{top:14px;left:14px;border-width:1px 0 0 1px}
.fc.tr{top:14px;right:14px;border-width:1px 1px 0 0}
.fc.bl{bottom:14px;left:14px;border-width:0 0 1px 1px}
.fc.br{bottom:14px;right:14px;border-width:0 1px 1px 0}

/* start overlay */
.start-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:20;background:rgba(4,4,4,.72);transition:opacity .5s}
.start-overlay.gone{opacity:0;pointer-events:none}
.start-btn{background:var(--accent);color:var(--black);border:none;padding:15px 44px;font-family:'Bebas Neue',cursive;font-size:22px;letter-spacing:3px;border-radius:4px;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 0 40px rgba(212,245,68,.3)}
.start-btn:hover{transform:scale(1.05);box-shadow:0 0 60px rgba(212,245,68,.5)}
.start-hint{font-size:12px;color:var(--muted);text-align:center;max-width:260px;line-height:1.7;font-weight:300}

/* ── FEEDBACK ── */
.feedback-bar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:15;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
.feedback-bar.show{opacity:1}
.feedback-txt{font-family:'Bebas Neue',cursive;font-size:30px;letter-spacing:2px;color:var(--accent);text-shadow:0 0 24px rgba(212,245,68,.7),0 2px 8px rgba(0,0,0,.8);transition:color .25s,text-shadow .25s}
.feedback-txt.warn{color:var(--warn);text-shadow:0 0 24px rgba(255,184,77,.65),0 2px 8px rgba(0,0,0,.8)}
.feedback-txt.bad{color:var(--bad);text-shadow:0 0 24px rgba(255,77,77,.7),0 2px 8px rgba(0,0,0,.8)}
.feedback-txt.good{color:var(--good);text-shadow:0 0 24px rgba(77,255,145,.55),0 2px 8px rgba(0,0,0,.8)}
.phase-lbl{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:3px;color:rgba(240,240,240,.5);text-shadow:0 1px 4px rgba(0,0,0,.9)}

/* ── PRESS ANIMATION WIDGET ── */
.anim-widget{
  position:absolute;top:14px;right:14px;
  width:90px;height:124px;
  background:rgba(8,8,8,.82);
  border:1px solid var(--border);
  border-radius:8px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:4px;z-index:20;
  backdrop-filter:blur(8px);
}
.anim-label{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.anim-svg-wrap{width:64px;height:96px}

/* ── SIDEBAR ── */
.sidebar{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
.sb{padding:18px 20px;border-bottom:1px solid var(--border)}
.sb-lbl{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}

/* rep counter */
.rep-row{display:flex;align-items:baseline;gap:6px}
.rep-big{font-family:'Bebas Neue',cursive;font-size:76px;line-height:1;color:var(--accent);transition:transform .15s}
.rep-big.bump{transform:scale(1.18)}
.rep-unit{font-size:15px;color:var(--muted);font-weight:300}

/* phase chips */
.phases{display:flex;gap:5px;margin-top:12px}
.ph{flex:1;text-align:center;padding:5px 0;border-radius:3px;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;background:var(--panel);border:1px solid var(--border);color:var(--muted);transition:all .3s}
.ph.on{background:var(--accent);color:var(--black);border-color:var(--accent);font-weight:600}

/* score ring */
.score-wrap{display:flex;align-items:center;justify-content:center;padding:4px 0}
.score-ring{position:relative;width:100px;height:100px}
.score-ring svg{width:100px;height:100px;transform:rotate(-90deg)}
.str{fill:none;stroke:var(--panel);stroke-width:7}
.sfll{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:251;transition:stroke-dashoffset .65s ease,stroke .3s}
.score-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-n{font-family:'Bebas Neue',cursive;font-size:34px;line-height:1;color:var(--text)}
.score-s{font-size:10px;color:var(--muted);font-family:'DM Mono',monospace}

/* breakdown bars */
.bk-row{margin-bottom:10px}
.bk-header{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px}
.bk-name{color:var(--muted);font-weight:300}
.bk-val{font-family:'DM Mono',monospace;color:var(--text);font-size:11px}
.bk-track{height:4px;background:var(--panel);border-radius:2px;overflow:hidden}
.bk-fill{height:100%;border-radius:2px;transition:width .25s,background .3s}

/* cue cards */
.cues{display:flex;flex-direction:column;gap:8px}
.cue{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:6px;background:var(--panel);border:1px solid var(--border);font-size:12px;color:var(--muted);line-height:1.6;font-weight:300;transition:all .3s}
.cue.warn{border-color:rgba(255,184,77,.4);background:rgba(255,184,77,.05);color:var(--warn)}
.cue.bad{border-color:rgba(255,77,77,.4);background:rgba(255,77,77,.05);color:var(--bad)}
.cue.ok{border-color:rgba(77,255,145,.35);background:rgba(77,255,145,.04);color:var(--good)}
.cue-dot{width:7px;height:7px;border-radius:50%;background:var(--border);margin-top:4px;flex-shrink:0;transition:background .3s}
.cue.warn .cue-dot{background:var(--warn)}
.cue.bad .cue-dot{background:var(--bad)}
.cue.ok .cue-dot{background:var(--good)}

/* angle meters */
.ang-item{margin-bottom:11px}
.ang-item:last-child{margin-bottom:0}
.ang-hdr{display:flex;justify-content:space-between;margin-bottom:4px;font-size:11px}
.ang-name{color:var(--muted);font-weight:300}
.ang-val{font-family:'DM Mono',monospace;font-size:11px;color:var(--text)}
.ang-track{height:4px;background:var(--panel);border-radius:2px;overflow:hidden;border:1px solid var(--border)}
.ang-fill{height:100%;border-radius:2px;transition:width .2s,background .3s}

/* settings */
.set-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:12px;color:var(--muted);font-weight:300}
.tog{position:relative;width:38px;height:20px}
.tog input{opacity:0;width:0;height:0}
.tog-sl{position:absolute;inset:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:.3s}
.tog-sl::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:.3s}
input:checked~.tog-sl{background:var(--accent);border-color:var(--accent)}
input:checked~.tog-sl::before{transform:translateX(18px);background:var(--black)}

/* reset */
.reset-btn{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);padding:9px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;border-radius:4px;transition:all .2s}
.reset-btn:hover{border-color:var(--text);color:var(--text)}

/* perfect rep flash */
@keyframes perfectFlash{0%,100%{opacity:0}20%,80%{opacity:1}}
.perfect-rep{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:30;opacity:0}
.perfect-rep.flash{animation:perfectFlash 1.2s ease forwards}
.perfect-rep-txt{font-family:'Bebas Neue',cursive;font-size:56px;letter-spacing:4px;color:var(--good);text-shadow:0 0 60px rgba(77,255,145,.8),0 2px 12px rgba(0,0,0,.9)}