/* Watch Live Matches (src/ui/spectate.js): the start screen's button, the Live Match Browser and a global spectator's
   bar. The game's own look: dark navy panels, a thin gold rim, cyan (--ki) only for what is live */

/* the start screen's button: under the tour's, quieter than Play */
#startOv .watchLive{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.5rem;border-color:#3d5687;background:linear-gradient(180deg,#14213f,#0e172d);color:#cfe9ff;letter-spacing:.06em}
#startOv .watchLive:hover{border-color:var(--ki);color:#fff;box-shadow:0 0 .75rem #7ad0ff33}

/* the browser */
#liveOv{z-index:31}
#liveOv .liveBox{width:min(54rem,100%);max-width:none;max-height:calc(100% - 1rem);display:flex;flex-direction:column;gap:.625rem;padding:1.125rem 1.25rem;border-color:#58658b;border-top-color:#af955c;background:linear-gradient(145deg,rgba(9,15,30,.98),rgba(9,13,25,.96));box-shadow:0 .75rem 2.5rem #05091799}
.liveHead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .875rem}
.liveHead h2{margin:0;font-family:var(--disp);font-size:1.375rem;letter-spacing:.08em;color:var(--gold)}
.liveSub{color:var(--dim);font-size:.8125rem}
.liveSub b{color:var(--fg)}
.liveCols,.liveItem{display:grid;grid-template-columns:minmax(6.5rem,1fr) minmax(8rem,1.3fr) minmax(7rem,1.1fr) 5.5rem 6rem 6.5rem;align-items:center;gap:.5rem}
.liveCols{padding:0 .75rem;color:var(--dim);font-family:var(--disp);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
#liveOv .liveList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem;overflow-y:auto;min-height:0}
.liveItem{padding:.5rem .5rem .5rem .75rem;border:1px solid var(--line);border-left:2px solid #af955c;border-radius:.625rem;background:#0f1630;font-size:.875rem}
.liveItem.full{border-left-color:#4a5578;opacity:.8}
.liveItem small{color:var(--dim);font-size:.75rem}
.lvId{display:flex;align-items:center;gap:.4375rem;font-family:var(--disp);letter-spacing:.04em}
.lvId small{color:var(--ki);font-size:.625rem;letter-spacing:.1em}
.lvDot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ki);box-shadow:0 0 .5rem var(--ki);animation:lvPulse 1.6s ease-in-out infinite}
.liveItem.full .lvDot{animation:none;background:#6b7598;box-shadow:none}
@keyframes lvPulse{50%{opacity:.35}}
.lvPhase{color:#dfe6ff}
.lvGo{width:100%;padding:.4375rem .5rem;font-size:.8125rem}
.lvGo:disabled{background:#1a2138;border-color:#3a4566;color:#8a93b8;cursor:default}
.liveState{margin:0;color:var(--dim);font-size:.875rem;text-align:center}
.liveState:empty{display:none}
.liveState.busy::before{content:"";display:inline-block;width:.75rem;height:.75rem;margin-right:.5rem;vertical-align:-.0625rem;border:2px solid #7ad0ff55;border-top-color:var(--ki);border-radius:50%;animation:lvSpin .8s linear infinite}
.liveState.err{color:#ffb3a8}
.liveState button{margin-left:.5rem;padding:.25rem .625rem;font-size:.75rem}
@keyframes lvSpin{to{transform:rotate(360deg)}}
.liveRow{display:flex;justify-content:space-between;gap:.5rem}
@media (prefers-reduced-motion:reduce){.lvDot,.liveState.busy::before{animation:none}}

/* a global spectator: nothing of a run is on screen (no shop, gold, experience, item bench or board count), and the
   bar sits where the shop was */
#app.spectator #shopPanel,#app.spectator #boardCnt,#app.spectator #augOv{display:none!important}
.specBar{position:absolute;left:50%;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:.75rem;max-width:calc(100% - 1.5rem);padding:.4375rem .5rem .4375rem .875rem;border-color:#58658b;border-top-color:#af955c;border-radius:1rem;white-space:nowrap}
.specLive{display:flex;align-items:center;gap:.375rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.1em;color:var(--ki)}
.specLive i{width:.5rem;height:.5rem;border-radius:50%;background:#ff5a5a;box-shadow:0 0 .5rem #ff5a5a;animation:lvPulse 1.6s ease-in-out infinite}
.specMatch{display:flex;flex-direction:column;line-height:1.15}
.specMatch b{font-family:var(--disp);letter-spacing:.06em;color:var(--gold);font-size:.875rem}
.specMatch small{color:var(--dim);font-size:.75rem}
.specFollow{display:flex;align-items:center;gap:.25rem}
.specWho{display:flex;align-items:center;gap:.4375rem;min-width:9rem;line-height:1.15}
.specWho .av{width:2rem;height:2rem;border-radius:50%;overflow:hidden;border:1px solid #af955c;background:#0b101e;flex:none}
.specWho .av img{width:100%;height:100%;object-fit:cover;display:block}
.specWho b{display:block;font-size:.875rem;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.specWho small{color:var(--dim);font-size:.75rem}
.specNav{padding:.375rem .5rem;font-size:.75rem;line-height:1;background:#111a33}
.specCount{font-family:var(--disp);font-size:.8125rem;color:#cfe9ff;letter-spacing:.04em}
.specExit{padding:.5rem .75rem;font-size:.75rem;border-color:#8a6d3a;background:linear-gradient(180deg,#2a2412,#1b170c);color:var(--gold)}
.specExit:hover{border-color:var(--gold);color:#fff}
.specNote{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.375rem;max-width:min(26rem,calc(100% - 2rem));padding:.875rem 1.25rem;text-align:center;border-color:#58658b;border-top-color:#af955c}
.specNote b{font-family:var(--disp);letter-spacing:.1em;color:var(--gold)}
.specNote span{color:#dfe6ff;font-size:.875rem;white-space:normal}
.specNote button{margin-top:.375rem}

/* a phone: the list's rows stack, the bar wraps onto two lines (the way out always on screen) */
@media (max-width:760px){
  #liveOv{padding:.5rem}
  #liveOv .liveBox{padding:.875rem .75rem}
  .liveCols{display:none}
  .liveItem{grid-template-columns:1fr auto;grid-template-areas:"id go" "stage go" "phase go" "nums go";row-gap:.125rem}
  .lvId{grid-area:id}.lvStage{grid-area:stage}.lvPhase{grid-area:phase;font-size:.8125rem}
  .lvAlive,.lvWatch{grid-area:nums}.lvWatch{justify-self:end;margin-right:.25rem}
  .lvGo{grid-area:go;width:auto;min-width:5.5rem;align-self:center}
  .specBar{left:.5rem;right:.5rem;transform:none;max-width:none;flex-wrap:wrap;justify-content:space-between;gap:.375rem .5rem;padding:.375rem .5rem}
  .specMatch{order:1}.specLive{order:0}.specCount{order:2}
  .specFollow{order:3;flex:1 1 100%;justify-content:space-between}
  .specWho{min-width:0;flex:1}
  .specExit{order:4;flex:1 1 100%}
}