/* Smart Highlights 2.0 (2026-10-28; docs/HIGHLIGHTS.md): the recorder's live view (src/ui/highlight.js), the Highlight
   Studio, its planning chip and the result screen's recap (src/ui/hlstudio.js). The game's own tokens (style.css :root),
   Back at the top left; rem sizes; a phone's own block, a phone on its side its own */

/* 🎬 Highlights: the count of the match's moments */
.tacBtn.hlBtn .hlN{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;margin-left:.375rem;padding:0 .3rem;border-radius:.625rem;background:#ff9f1c;color:#140a00;font-family:var(--disp);font-size:.75rem;line-height:1}

/* the chip as a moment is found: small, over the board's lower left beside the buttons, never over the shop */
.hlChip{position:absolute;left:1rem;bottom:calc(var(--shopH,8rem) + 3.25rem);z-index:9;display:flex;align-items:center;gap:.5rem;max-width:min(26rem,calc(100% - 2rem));padding:.375rem .375rem .375rem .75rem;border:1px solid rgba(255,159,28,.7);border-radius:1.25rem;color:#ffe2b8;font-size:.8125rem;box-shadow:0 .25rem 1rem rgba(0,0,0,.45)}
.hlChip[hidden]{display:none}
.hlChip.in{animation:hlChipIn .32s ease-out}
@keyframes hlChipIn{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
.hlChip .hcT{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hlChip .hcT b{color:var(--gold);font-family:var(--disp);letter-spacing:.02em}
.hlChip button{font-family:var(--disp);font-size:.75rem;min-height:2rem;padding:.25rem .75rem;border-radius:1rem;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.hlChip .hcGo{background:#ff9f1c;border-color:#ff9f1c;color:#140a00}
.hlChip .hcX{min-width:2rem;padding:.25rem .5rem}

/* the recorder's live view: the video's own canvas over everything but MATCH FOUND (start.css .foundOv, 95) */
.hlStage{position:fixed;inset:0;z-index:92;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:3.5rem 1rem 1rem;background:rgba(4,6,14,.94)}
.hlStage .hlCanvas{display:block;height:auto;width:auto;max-width:100%;max-height:calc(100vh - 5rem);max-height:calc(100dvh - 5rem);aspect-ratio:9/16;border-radius:.5rem;box-shadow:0 0 0 1px var(--line),0 1rem 3rem rgba(0,0,0,.6);background:#000}
.hlStageBar{position:absolute;left:50%;top:.75rem;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;max-width:calc(100% - 1.5rem);padding:.375rem .5rem .375rem .75rem;border:1px solid var(--line);border-radius:1.5rem;background:var(--glass);color:#fff;font-family:var(--disp);font-size:.8125rem;white-space:nowrap}
.hlStageBar .hlT{color:var(--gold);overflow:hidden;text-overflow:ellipsis;min-width:0}
.hlStageBar .hlPct{color:var(--dim);font-family:var(--tech);font-weight:700;min-width:2.5rem;text-align:right}
.hlStageBar .hlDot{flex:none;width:.625rem;height:.625rem;border-radius:50%;background:#ff4d4d;animation:hlRec 1s ease-in-out infinite}
.hlStageBar .hlDot.off{background:var(--ki);animation:none}
@keyframes hlRec{50%{opacity:.25}}
.hlStageBar .hlStop{flex:none;font-family:var(--disp);font-size:.75rem;min-height:2rem;padding:.25rem .875rem;border-radius:1rem;border:1px solid var(--line);background:rgba(255,255,255,.1);color:#fff;cursor:pointer}

/* the Studio */
.hlStudio{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:1rem;overflow:auto;background:rgba(4,6,14,.86);color:var(--fg);font-family:var(--body)}
.hlStudio[hidden]{display:none}
.hlsBox{position:relative;width:min(64rem,100%);margin:auto 0;padding:1rem 1.25rem 1.25rem;border:1px solid var(--line);border-radius:.75rem;background:linear-gradient(180deg,rgba(27,35,64,.97),rgba(11,14,26,.98));box-shadow:0 1.5rem 4rem rgba(0,0,0,.55)}
.hlsHead{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:1rem;margin-bottom:.875rem}
.hlsHead h2{margin:0;font-family:var(--disp);font-size:1.375rem;letter-spacing:.06em;color:var(--gold)}
.hlsHead .hlsSub{grid-column:2;color:var(--dim);font-size:.8125rem}
.hlsBack{grid-row:1 / span 2;font-family:var(--disp);font-size:.875rem;min-height:2.75rem;padding:.375rem .875rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.hlsCards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.625rem}
.hlsCard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:.25rem;min-width:0;padding:0 0 .625rem;border:1px solid var(--line);border-radius:.625rem;background:var(--panel);color:#fff;text-align:left;cursor:pointer;overflow:hidden;font:inherit}
.hlsCard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 1.25rem rgba(255,201,74,.25)}
.hlsCard:focus-visible,.hlsBtn:focus-visible,.hlsBack:focus-visible,.hlsSm:focus-visible,.hlsSeg button:focus-visible,.rsHlCard:focus-visible{outline:2px solid var(--ki);outline-offset:2px}
.hlsPic{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#26315e,#10152a)}
.hlsPic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.hlsPic i{display:grid;place-items:center;height:100%;font-size:2rem;font-style:normal}
.hlsTag{position:absolute;left:.375rem;top:.375rem;padding:.125rem .5rem;background:var(--gold);color:#140a00;font-family:var(--disp);font-size:.625rem;letter-spacing:.06em;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.hlsPve{position:absolute;right:.375rem;top:.375rem;padding:.125rem .375rem;border-radius:.25rem;background:rgba(6,9,22,.8);color:var(--dim);font-family:var(--disp);font-size:.5625rem;letter-spacing:.06em}
.hlsTitle{padding:0 .625rem;font-family:var(--disp);font-size:.9375rem;letter-spacing:.02em;color:var(--gold);line-height:1.15;overflow-wrap:anywhere}
.hlsMeta{padding:0 .625rem;color:var(--dim);font-size:.75rem;line-height:1.3}
.hlsEdit{margin-top:.875rem;padding:.75rem .875rem;border:1px solid var(--line);border-radius:.625rem;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:.625rem}
.hlsRow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem}
.hlsLab{color:var(--dim);font-size:.75rem;font-family:var(--tech);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hlsTrim{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem}
.hlsSm{min-width:2.75rem;min-height:2.75rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:1.125rem;line-height:1;cursor:pointer}
.hlsLen{font-family:var(--tech);font-weight:700;font-size:1rem;min-width:3.25rem;text-align:center;color:#fff}
.hlsSeg{display:inline-flex;border:1px solid var(--line);border-radius:.5rem;overflow:hidden}
.hlsSeg button{min-height:2.5rem;padding:.25rem .875rem;border:0;background:transparent;color:var(--dim);font-family:var(--disp);font-size:.8125rem;cursor:pointer}
.hlsSeg button+button{border-left:1px solid var(--line)}
.hlsSeg button[aria-checked="true"]{background:rgba(255,201,74,.16);color:var(--gold)}
.hlsSeg button:disabled{opacity:.45;cursor:not-allowed}
.hlsGo,.hlsBtns,.hlsFoot,.rsHlBtns{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.hlsFoot{margin-top:.875rem;justify-content:space-between}
.hlsBtn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:2.75rem;padding:.5rem 1rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-family:var(--disp);font-size:.875rem;text-decoration:none;cursor:pointer}
.hlsBtn small{font-family:var(--body);font-size:.6875rem;color:var(--dim)}
.hlsBtn.primary{background:#ff9f1c;border-color:#ff9f1c;color:#140a00}
.hlsBtn.primary small{color:#3b2400}
.hlsBtn:disabled{opacity:.45;cursor:not-allowed}
.hlsNote{margin:0;color:var(--dim);font-size:.75rem}
.hlsErr{margin:.75rem 0 0;padding:.5rem .75rem;border-radius:.5rem;background:rgba(255,106,90,.12);border:1px solid rgba(255,106,90,.5);color:#ffd2cc;font-size:.8125rem}
.hlsLater{margin:0 0 .75rem;padding:.5rem .75rem;border-radius:.5rem;background:rgba(122,208,255,.1);border:1px solid rgba(122,208,255,.4);color:#d6efff;font-size:.8125rem}
.hlsEmpty{padding:2rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--dim)}
.hlsEmpty p{margin:0;max-width:30rem}
.hlsBig{font-family:var(--disp);font-size:1.25rem;color:#fff}
.hlsProg{padding:2rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.hlsSteps{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0;font-family:var(--disp);font-size:.875rem;color:var(--dim)}
.hlsSteps li.on{color:var(--gold)}
.hlsBar{width:min(24rem,100%);height:.5rem;border-radius:.25rem;background:rgba(255,255,255,.08);overflow:hidden}
.hlsBar i{display:block;height:100%;background:linear-gradient(90deg,#ff9f1c,var(--gold));transition:width .2s linear}
.hlsOut{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start}
.hlsVid video{display:block;height:min(70vh,36rem);height:min(70dvh,36rem);width:auto;max-width:100%;aspect-ratio:9/16;border-radius:.5rem;background:#000}
.hlsSide{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.hlsCovers{display:flex;gap:.5rem}
.hlsCovers button{padding:0;width:3.75rem;aspect-ratio:9/16;border-radius:.375rem;border:2px solid var(--line);background:#000;overflow:hidden;cursor:pointer}
.hlsCovers button[aria-checked="true"]{border-color:var(--gold)}
.hlsCovers img{width:100%;height:100%;object-fit:cover;display:block}
.hlsInfo{margin:0;font-family:var(--tech);font-weight:700;font-size:.875rem;color:#fff}
.hlsWarn{margin:0;font-size:.8125rem;color:#ffd99a}
.hlsCap{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;color:var(--dim)}
.hlsCap textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:4.5rem;padding:.5rem .625rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(0,0,0,.3);color:#fff;font:inherit;font-size:.875rem}

/* the result screen's recap: YOUR BEST MOMENTS (in rsFit's budget, src/ui/result.js) */
.rsHl{position:relative;z-index:4;flex:none;width:min(calc(100vw - 1.5rem),max(var(--frameW,60rem),60rem));margin:0 auto;padding:.625rem .75rem;border:1px solid rgba(255,201,74,.45);border-radius:.625rem;background:rgba(10,14,30,.82);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;box-sizing:border-box}
.rsHl[hidden]{display:none}
.rs-play .rsHl{animation:rsRise .45s ease-out var(--t-btns) both}   /* (with the rank and rewards panels: style.css .rs-play .rsRank) */
.rsHlHead{margin:0;font-family:var(--disp);font-size:.9375rem;letter-spacing:.06em;color:var(--gold);white-space:nowrap}
.rsHlCards{display:flex;gap:.5rem;flex:1;min-width:0;overflow-x:auto}
.rsHlCard{display:grid;grid-template-columns:2.25rem 1fr;grid-template-rows:auto auto;column-gap:.5rem;align-items:center;min-width:9.5rem;max-width:14rem;min-height:2.75rem;padding:.25rem .625rem .25rem .25rem;border:1px solid var(--line);border-radius:.5rem;background:var(--panel);color:#fff;text-align:left;cursor:pointer;font:inherit}
.rsHlCard img{grid-row:1 / span 2;width:2.25rem;height:2.25rem;border-radius:.375rem;object-fit:cover;object-position:50% 15%}
.rsHlCard b{font-family:var(--disp);font-size:.8125rem;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsHlCard span{font-size:.6875rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsHlBtns .hlsBtn{min-height:2.5rem;padding:.375rem .875rem}

/* a phone held upright */
@media (max-width:760px){
  .hlStudio{padding:0}
  .hlsBox{min-height:100%;border-radius:0;border:0;padding:.75rem .75rem 1.25rem}
  .hlsHead h2{font-size:1.125rem}
  .hlsCards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hlsOut{grid-template-columns:1fr;justify-items:center}
  .hlsVid video{height:min(52vh,30rem);height:min(52dvh,30rem)}
  .hlsSide{width:100%}
  .hlsBtns .hlsBtn{flex:1 1 9rem}
  .hlChip{left:.5rem;right:.5rem;max-width:none;bottom:calc(var(--shopH,8rem) + .5rem)}
  .hlStage{padding:3.25rem .5rem .5rem}
  .rsHl{width:calc(100vw - 1rem);flex-direction:column;align-items:stretch}
  .rsHlBtns{flex-direction:column;align-items:stretch}
  .rsHlBtns .hlsBtn{width:100%}
}
/* a phone on its side */
@media (max-height:520px) and (orientation:landscape){
  .hlStudio{padding:.25rem}
  .hlsBox{padding:.5rem .75rem .75rem}
  .hlsHead{margin-bottom:.5rem}
  .hlsCards{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hlsPic{aspect-ratio:16/9}
  .hlsOut{grid-template-columns:auto 1fr}
  .hlsVid video{height:calc(100vh - 6rem);height:calc(100dvh - 6rem)}
  .hlStage{padding:3rem .5rem .25rem}
  .hlStage .hlCanvas{max-height:calc(100vh - 3.5rem);max-height:calc(100dvh - 3.5rem)}
  .hlChip{bottom:calc(var(--shopH,6rem) + .5rem)}
}
@media (prefers-reduced-motion:reduce){.rs-play .rsHl{animation:none}.hlChip.in{animation:none}.hlStageBar .hlDot{animation:none}.hlsBar i{transition:none}}