/* ════════════════════════════════════════════════════════
   PITCHCAM — Auto-Trim Pitch Recorder CSS
   PORTRAIT mode · behind-plate view · broadcast aesthetic
   ════════════════════════════════════════════════════════ */
:root{
  --bg:#040609;--bg2:#080c12;--card:#0d1018;--card2:#111a24;
  --b1:rgba(255,255,255,.08);--b2:rgba(255,255,255,.15);
  --red:#e8243c;--red2:rgba(232,36,60,.14);
  --green:#22c55e;--amber:#f59e0b;--blue:#38bdf8;
  --text:#e8edf4;--text2:#5a6a80;--text3:#2a3545;
  --font-h:'Barlow Condensed',sans-serif;--mono:'JetBrains Mono',monospace;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;overflow:hidden;background:#000;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-touch-callout:none;
  font-family:var(--mono);color:var(--text);
}

/* ── PORTRAIT LOCK ── */
#rotateWarn{display:none;position:fixed;inset:0;background:#000;z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.rot-icon{font-size:3rem}.rot-title{font-family:var(--font-h);font-size:1.7rem;font-weight:700;color:#fff}
.rot-sub{font-size:.82rem;color:var(--text2);text-align:center;padding:0 2rem}
@media(orientation:landscape){
  #rotateWarn{display:flex}
  .view,.clip-modal{display:none!important}
}

.view{position:fixed;inset:0;display:none;flex-direction:column;background:var(--bg);overflow:hidden}
.view.active{display:flex}

/* ══════════════════════ SETUP ══════════════════════ */
.setup-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.25rem 1rem calc(var(--safe-b)+1rem);padding-top:calc(var(--safe-t)+1.25rem);display:flex;flex-direction:column;gap:.85rem}
.setup-logo{font-family:var(--font-h);font-size:2.4rem;font-weight:900;letter-spacing:.05em;text-align:center;line-height:1}
.lp{color:#fff}.lr{color:var(--red)}
.setup-tag{font-size:.68rem;color:var(--text2);text-align:center;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.4rem}
.setup-card{background:var(--card);border:1px solid var(--b1);border-radius:14px;display:flex;gap:.75rem;padding:1rem}
.sc-num{font-family:var(--font-h);font-size:1.6rem;font-weight:900;color:var(--red);opacity:.7;flex-shrink:0;line-height:1}
.sc-title{font-family:var(--font-h);font-size:1.15rem;font-weight:700;letter-spacing:.02em;margin-bottom:.4rem}
.sc-desc{font-size:.8rem;color:var(--text2);line-height:1.65}
.sc-desc strong{color:var(--text)}
.setup-svg{width:100%;max-width:230px;height:auto;display:block;margin:.7rem auto 0;border:1px solid var(--b1);border-radius:8px;background:rgba(255,255,255,.02)}
.setup-field{margin-top:.7rem}
.setup-field label{display:block;font-size:.7rem;color:var(--text2);margin-bottom:.3rem;letter-spacing:.04em}
.setup-select{width:100%;background:var(--card2);border:1px solid var(--b2);border-radius:9px;padding:.6rem .8rem;color:var(--text);font-family:var(--mono);font-size:.82rem;outline:none;min-height:42px;-webkit-appearance:none}
.setup-select option{background:#1a2535}
.setup-footer{display:flex;flex-direction:column;align-items:center;gap:.85rem;padding:.5rem 0}
.setup-link{background:none;border:none;color:var(--text2);font-size:.85rem;font-family:var(--mono);cursor:pointer}

/* ══════════════════════ CAMERA VIEW ══════════════════════ */
#camVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#trackCanvas,#debugCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.debug-canvas{z-index:3;opacity:.8}

/* Top HUD */
.top-hud{position:absolute;top:calc(var(--safe-t)+.6rem);left:.85rem;right:.85rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;z-index:20}
.hud-pill{background:rgba(4,6,9,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:99px;color:rgba(255,255,255,.78);font-family:var(--mono);font-size:.85rem;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rec-status{background:rgba(4,6,9,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:99px;padding:.34rem .9rem;display:flex;align-items:center;gap:.45rem;font-size:.7rem;color:rgba(255,255,255,.6);white-space:nowrap}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);flex-shrink:0}
.rec-dot.armed{background:var(--green);box-shadow:0 0 8px var(--green)}
.rec-dot.detecting{background:var(--blue);animation:dp .5s ease-in-out infinite}
.rec-dot.recording{background:var(--red);animation:dp .35s ease-in-out infinite}
.rec-dot.saving{background:var(--amber);animation:dp .6s ease-in-out infinite}
@keyframes dp{0%,100%{opacity:1}50%{opacity:.2}}

/* Strike zone (draggable/resizable) */
.sz{position:absolute;left:30%;top:46%;width:40%;height:22%;border:2px solid rgba(255,255,255,.65);border-radius:3px;z-index:10;touch-action:none;cursor:move;background:rgba(255,255,255,.03)}
.sz-title{position:absolute;top:-18px;left:0;font-size:.55rem;letter-spacing:.16em;color:rgba(255,255,255,.6);font-family:var(--mono)}
.sz-hint{position:absolute;bottom:-16px;left:0;font-size:.5rem;color:rgba(255,255,255,.3)}
.sz-grid{position:absolute;inset:0;pointer-events:none}
.sz-h{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.22)}
.sz-v{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.22)}
.sz-corner{position:absolute;width:24px;height:24px;z-index:11}
.sz-corner::after{content:'';position:absolute;width:13px;height:13px;border:2px solid var(--red)}
.sz-nw{top:-12px;left:-12px;cursor:nwse-resize}.sz-nw::after{top:9px;left:9px;border-right:none;border-bottom:none}
.sz-ne{top:-12px;right:-12px;cursor:nesw-resize}.sz-ne::after{top:9px;right:9px;border-left:none;border-bottom:none}
.sz-sw{bottom:-12px;left:-12px;cursor:nesw-resize}.sz-sw::after{bottom:9px;left:9px;border-right:none;border-top:none}
.sz-se{bottom:-12px;right:-12px;cursor:nwse-resize}.sz-se::after{bottom:9px;right:9px;border-left:none;border-top:none}

/* Pitch flash card */
.pitch-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:25;background:rgba(4,6,9,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(34,197,94,.4);border-radius:18px;padding:1.3rem 2.2rem;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 0 40px rgba(34,197,94,.15)}
.pitch-flash.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pf-vel{font-family:var(--font-h);font-size:4rem;font-weight:900;line-height:.9;color:var(--green);text-shadow:0 0 30px rgba(34,197,94,.4)}
.pf-mph{font-size:.7rem;letter-spacing:.2em;color:rgba(255,255,255,.4);margin-top:.1rem}
.pf-saved{font-size:.72rem;color:var(--green);margin-top:.6rem;letter-spacing:.05em}

/* Sensitivity */
.sens-wrap{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);z-index:18;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.sens-slider{writing-mode:vertical-lr;direction:rtl;width:6px;height:90px;accent-color:var(--red);cursor:pointer}
#sensLabel{font-size:.52rem;color:rgba(255,255,255,.35);writing-mode:vertical-lr;letter-spacing:.08em}

/* Bottom bar */
.cam-bottom{position:absolute;bottom:0;left:0;right:0;background:rgba(4,6,9,.94);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-around;padding:.7rem 1rem calc(var(--safe-b)+.7rem);z-index:30}
.cam-stat{text-align:center;min-width:44px}
.cam-stat-val{font-family:var(--font-h);font-size:1.5rem;font-weight:700;line-height:1;color:rgba(255,255,255,.8)}
.cam-stat-lbl{font-size:.52rem;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-top:.15rem}
.cam-icon-btn{background:none;border:none;color:rgba(255,255,255,.4);font-size:1.3rem;cursor:pointer;width:44px;height:44px}

/* Arm button */
.arm-btn{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:0}
.arm-ring{width:62px;height:62px;border-radius:50%;border:3px solid var(--green);display:flex;align-items:center;justify-content:center;transition:all .2s}
.arm-dot{width:42px;height:42px;border-radius:50%;background:var(--green);transition:all .2s}
.arm-btn.disarmed .arm-ring{border-color:var(--text2)}
.arm-btn.disarmed .arm-dot{background:var(--text2);border-radius:8px;width:30px;height:30px}
.arm-btn.recording .arm-ring{border-color:var(--red);animation:pulse .8s ease-in-out infinite}
.arm-btn.recording .arm-dot{background:var(--red)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,36,60,.4)}50%{box-shadow:0 0 0 8px rgba(232,36,60,0)}}
#armLabel{font-size:.55rem;letter-spacing:.12em;color:rgba(255,255,255,.55)}

/* ══════════════════════ CLIPS GALLERY ══════════════════════ */
.clips-hdr{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;padding-top:calc(var(--safe-t)+.7rem);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.clips-title{font-family:var(--font-h);font-size:1.3rem;font-weight:700}
.back-btn{background:none;border:none;color:var(--text2);font-family:var(--mono);font-size:.82rem;cursor:pointer;padding:.3rem}
.back-btn.red{color:var(--red)}
.clips-grid{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-content:start}
.clips-empty{grid-column:1/-1;text-align:center;color:var(--text2);padding:2.5rem 1rem;font-size:.82rem;line-height:1.6}
.clip-card{background:var(--card);border:1px solid var(--b1);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .15s}
.clip-card:active{transform:scale(.97)}
.clip-thumb{width:100%;aspect-ratio:9/16;background:#000;object-fit:cover;display:block}
.clip-meta{padding:.55rem .7rem}
.clip-vel{font-family:var(--font-h);font-size:1.6rem;font-weight:900;line-height:1;color:#fff}
.clip-vel small{font-size:.6rem;color:var(--text2);font-family:var(--mono);font-weight:400}
.clip-date{font-size:.62rem;color:var(--text3);margin-top:.2rem}

/* Clip modal */
.clip-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;display:none;align-items:center;justify-content:center;padding:1rem}
.clip-modal.show{display:flex}
.clip-modal-inner{width:100%;max-width:400px;display:flex;flex-direction:column;gap:.85rem}
#clipPlayer{width:100%;border-radius:14px;background:#000;max-height:70vh}
.clip-modal-info{text-align:center;font-size:.85rem;color:var(--text2)}
.clip-modal-actions{display:flex;gap:.7rem}
.cm-btn{flex:1;background:var(--card2);border:1px solid var(--b2);border-radius:10px;padding:.7rem;text-align:center;color:var(--text);font-family:var(--mono);font-size:.82rem;cursor:pointer;text-decoration:none;min-height:44px;display:flex;align-items:center;justify-content:center}
.cm-btn:active{background:rgba(255,255,255,.1)}

/* ── SHARED ── */
.btn-main{background:var(--red);color:#fff;border:none;border-radius:12px;padding:.85rem 2rem;font-family:var(--font-h);font-size:1.1rem;font-weight:700;letter-spacing:.04em;cursor:pointer;min-height:50px;box-shadow:0 4px 14px rgba(232,36,60,.35);transition:all .15s;width:100%;max-width:300px}
.btn-main:active{transform:scale(.97);background:#c91d32}
#toast{position:fixed;bottom:calc(var(--safe-b)+6rem);left:50%;transform:translateX(-50%) translateY(8px);background:rgba(255,255,255,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:.5rem 1.1rem;font-size:.78rem;color:#fff;white-space:nowrap;pointer-events:none;opacity:0;z-index:999;transition:opacity .22s,transform .22s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Loading */
.ld-overlay{position:absolute;inset:0;background:rgba(4,6,9,.92);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem}
.ld-orb{width:60px;height:60px;border-radius:50%;background:var(--red2);border:1px solid rgba(232,36,60,.2);position:relative}
.ld-orb::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--red);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ld-name{font-family:var(--font-h);font-size:1.5rem;font-weight:900;letter-spacing:.12em;color:var(--red)}
.ld-step{font-size:.72rem;color:rgba(255,255,255,.4);letter-spacing:.05em;text-align:center;padding:0 2rem}

/* Saving overlay */
.saving-overlay{position:absolute;inset:0;background:rgba(4,6,9,.8);z-index:90;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.8rem}
.saving-overlay.show{display:flex}
.saving-bar{width:60%;max-width:240px;height:5px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.saving-bar-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--green));width:0%;transition:width .15s}
.saving-text{font-size:.78rem;color:rgba(255,255,255,.6);letter-spacing:.04em}