:root{
    --bg:#080810;
    --bg-2:#0c0c14;
    --surface:#0c0c14;
    --panel:#0c0c14;
    --panel-hi:#1a1a2e;
    --border:#1a1a2e;
    --border-hi:rgba(58,174,172,.4);
    --text:#E8E8E0;
    --text-muted:#888899; /* secondary label per NOMOS tokens */
    --muted:#666680;       /* truly muted (was --text-muted) */
    --primary:#3AAEAC;
    --accent:#3AAEAC;       /* interactive only */
    --gold:#C9A84C;
    --accent-2:#C9A84C;     /* warning / CTA */
    --teal:#3AAEAC;
    --accent-3:#C08CFF;
    --stat:#C08CFF;         /* stats violet — data values only */
    --red:#A0364E;
    --destructive:#A0364E;
    --miss:#666680;
    --home:#e63946;
    --away:#2d7dd2;
    --ice:#e8f1ff;
    --ice-2:#cfe0f5;
    --line-blue:#1f5fc4;
    --line-red:#c8262b;
    --goal-crease:#7ab3ff;
    --ink:#080810;
    --paper:#E8E8E0;
    --shadow:0 10px 30px rgba(0,0,0,.5);
    --sans:'Outfit',sans-serif;
    --serif:'Cormorant Garamond',serif;
  }
  body,button,input,textarea{font-family:var(--sans)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{min-height:100dvh;display:flex;flex-direction:column}
header{
padding:14px 16px 10px;display:flex;justify-content:space-between;align-items:flex-end;
border-bottom:1px solid rgba(255,255,255,.08);
background:linear-gradient(180deg,var(--surface),var(--bg));
}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .kicker{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
.brand h1{margin:0;font-size:22px;letter-spacing:.5px;font-weight:600}
.brand h1 em{;color:var(--accent)}
.stats{font-family:var(--sans);font-size:11px;text-align:right;color:var(--text-muted);line-height:1.5}
.stats b{color:#fff;font-size:14px;display:block}

/* Bottom nav styles moved to css/nav.css (owned by js/nav.js). */

/* Period dot selector (top bar). Buttons keep data-period="1..4" so the
   handler at periodSegGlobal.addEventListener (~line 1707) is unaffected.
   Inner <span class="dot"> + <small> get pointer-events:none so taps land
   on the parent button and b.dataset.period resolves cleanly. */
.seg-period{display:inline-flex;gap:12px}
.seg-period button{
display:flex;flex-direction:column;align-items:center;
background:transparent;border:0;padding:4px 6px;
cursor:pointer;min-height:44px;min-width:36px;
font-family:var(--sans);
}
.seg-period button .dot{
width:10px;height:10px;border-radius:50%;
background:var(--border);transition:background .15s ease;
pointer-events:none;
}
.seg-period button.on .dot{background:var(--accent)}
.seg-period button small{
margin-top:4px;font-size:9px;letter-spacing:.14em;
color:var(--text-muted);text-transform:uppercase;
pointer-events:none;
}
.seg-period button.on small{color:var(--text)}

/* Top bar: 3 cols × 2 rows. Score block spans both rows on the left,
   period dots + PP/PK toggles in the center column, status + End Game
   + overflow on the right. AWAY-on-top, HOME-on-bottom is static across
   all periods (press-box convention). Period flip on the rink graphic
   is handled separately by updateGoalieMarkers (line ~1843). */
/* Top bar: 4-col grid `auto auto 1fr auto`. Each child PINNED to its
   column explicitly so hiding any one (e.g. Felix img in landscape via
   body > header > img) doesn't shift the others left via auto-placement.
   Cluster centers within the 1fr middle column; three-dot stays at the
   right edge regardless of viewport. This works for both portrait (Felix
   img visible at col 1) and landscape (col 1 collapses to 0 since img
   is display:none — score takes left, cluster centers, three-dot right). */
header#topBar{
display:grid;
grid-template-columns:auto auto 1fr auto;
grid-template-rows:auto auto;
align-items:center;
column-gap:16px;row-gap:6px;
padding:8px 14px;
border-bottom:1px solid rgba(255,255,255,.08);
background:linear-gradient(180deg,var(--surface),var(--bg));
min-height:88px;
}
/* Felix photo: col 1, spans both rows. Hidden in landscape via the
   body > header > img rule. */
header#topBar > img{grid-column:1;grid-row:1 / span 2;align-self:center;justify-self:start}
#headerStats{
grid-column:2;
grid-row:1 / span 2;
justify-self:start;
display:grid;
grid-template-columns:auto auto auto;
column-gap:14px;row-gap:3px;
align-items:center;
font-family:var(--sans);
}
.hs-col-head{font-size:14px;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;text-align:center;opacity:.9}
#homeRowLabel,#awayRowLabel{font-size:11px;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;font-weight:500;text-align:left}
#hHomeGoals,#hHomeShots,#hAwayGoals,#hAwayShots{font-size:22px;font-weight:600;color:var(--text);text-align:center;line-height:1}
#globalGameRow{
grid-column:3;
grid-row:1 / span 2;
justify-self:center;
display:grid;
grid-template-rows:auto auto;
row-gap:4px;
justify-items:center;align-items:center;
background:none;border:0;padding:0;
}
#topBarRight{grid-column:4;grid-row:1 / span 2;justify-self:end;display:flex;align-items:center;gap:8px}

/* iPhone portrait — compress period dots to fit a narrower 1fr middle
   column (129 px available at 393 vw after fixed cols + gaps). Same
   pattern as the iPhone-LS compression in the landscape sub-rule. */
@media (orientation: portrait) and (max-width: 480px) {
  header#topBar { column-gap: 10px; padding: 8px 10px; }
  .seg-period { gap: 6px; }
  .seg-period button { min-width: 26px; min-height: 40px; }
  .seg-period button .dot { width: 8px; height: 8px; }
  .seg-period button small { font-size: 8px; }
}

/* Left rail (Photo / Video / Gallery / Feed) — landscape only. Hidden
   by default; the landscape @media block below shows it. Portrait keeps
   the below-rink #captureRow live instead via orientation gate. */
#leftRail{display:none}

/* Overflow menu CSS removed — three-dot trigger deleted; items moved
   into the Settings modal "Game & App Tools" section. */

/* Calendar panel — schedule list rendered by FelixCalendar (js/calendar.js).
   Off-rail tab; addressable from MORE menu. */
.calendar-root{display:flex;flex-direction:column;gap:10px;padding:12px;font-family:var(--sans)}
.calendar-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.calendar-title{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.calendar-refresh{background:transparent;border:1px solid var(--border);color:var(--text-muted);width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:14px}
.calendar-refresh:hover{color:var(--accent);border-color:var(--accent)}
.calendar-list{display:flex;flex-direction:column;gap:8px}
.calendar-row{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;row-gap:4px;cursor:pointer;text-align:left;font-family:var(--sans);min-height:60px}
.calendar-row:hover{border-color:var(--accent)}
.calendar-row-date{grid-row:1;grid-column:1;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.calendar-row-match{grid-row:1;grid-column:2;font-size:13px;color:var(--text);font-weight:500}
.calendar-row-code{grid-row:1;grid-column:3;font-size:10px;letter-spacing:.14em;color:var(--text-muted);font-family:monospace}
.calendar-row-loc{grid-row:2;grid-column:1 / span 3;font-size:11px;color:var(--text-muted);letter-spacing:.02em;line-height:1.4}
.calendar-empty{padding:18px;border:1px dashed var(--border);border-radius:10px;font-size:12px;color:var(--text-muted);text-align:center}

main{flex:1;display:flex;flex-direction:column;padding:12px 12px calc(64px + env(safe-area-inset-bottom));gap:10px;min-height:0}
.panel{display:none;flex:1;flex-direction:column;gap:10px;min-height:0}
.panel.active{display:flex;overflow-y:auto}

.surface{
background:var(--ice);border-radius:14px;position:relative;overflow:hidden;
box-shadow:var(--shadow), inset 0 0 0 2px rgba(0,0,0,.06);
touch-action:manipulation;
}
.rink-wrap{aspect-ratio: 200 / 85; width:100%;max-width:min(100%, calc(78vh * 200 / 85));margin:0 auto;max-height:100%;border-radius:0 !important;box-shadow:none !important;background:transparent !important;overflow:visible !important}
.net-wrap{aspect-ratio: 6 / 4; width:100%}
.zone-pulse{animation:zonePulse 3.6s ease-in-out infinite}
@keyframes zonePulse{0%,100%{opacity:0}50%{opacity:.05}}
@media (prefers-reduced-motion: reduce){.zone-pulse{animation:none}}

svg.rink, svg.net{display:block;width:100%;height:100%;touch-action:manipulation}

.controls{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
font-family:var(--sans);
}
.controls.three{grid-template-columns:1fr 1fr 1fr}
.seg{
display:flex;background:var(--panel);border-radius:10px;padding:4px;border:1px solid rgba(255,255,255,.08);gap:2px
}
.seg button{
flex:1;background:transparent;border:0;color:var(--text-muted);padding:11px 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
border-radius:7px;font-weight:600;font-family:var(--sans);transition:all .15s ease;cursor:pointer;
}
.seg button.on{background:var(--accent);color:#fff;font-weight:700}
.seg.miss button.on{background:var(--miss);color:#fff}
.seg.goal button.on{background:var(--gold);color:var(--bg)}

/* PP / PK toggle pair (#gameStateSeg). 5v5 is the default — both off
   means "even strength", no separate button needed. */
.gs-toggles{display:flex;gap:6px}
.gs-toggles button{
  flex:1;background:var(--panel);border:1px solid var(--border);color:var(--text-muted);
  padding:11px 6px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;border-radius:8px;cursor:pointer;
  min-height:44px;min-width:64px;transition:all .15s ease
}
.gs-toggles button.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}

.row{display:flex;gap:8px}
.row > *{flex:1}

.btn{
appearance:none;border:0;border-radius:10px;padding:13px 16px;cursor:pointer;
font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;transition:all .15s ease;
}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:var(--panel);color:var(--text);border:1px solid rgba(255,255,255,.08)}
.btn.ghost:hover{border-color:rgba(255,255,255,.2)}
.btn.danger{background:var(--panel);color:var(--red);border:1px solid rgba(255,107,107,.4)}
.btn.danger:hover{background:rgba(255,107,107,.08);border-color:var(--red)}

/* Rebound armed mode */
@keyframes armedRink {
0%,100% { box-shadow: var(--shadow), 0 0 0 3px rgba(255,70,70,.85), 0 0 24px rgba(255,70,70,.45) }
50%     { box-shadow: var(--shadow), 0 0 0 6px rgba(255,70,70,.35), 0 0 36px rgba(255,70,70,.65) }
}
@keyframes armedReb {
0%,100% { box-shadow: 0 0 0 0 rgba(255,70,70,.7); background: #ff4646; color:#fff; border-color:#ff4646 }
50%     { box-shadow: 0 0 0 8px rgba(255,70,70,0); background: #ff6666; color:#fff; border-color:#ff6666 }
}
.armed .rink-wrap.surface { animation: armedRink 1.2s ease-in-out infinite }
.armed .lsBtn[data-action="rebound"] { animation: armedReb 1s ease-in-out infinite !important }

/* Disabled state for lsBtn — initial paint before updateLastShotBar runs.
   JS sets b.style.opacity directly afterward (.4 / .5 / 1) which beats this
   rule because inline > non-!important CSS. Existed inline only before; now
   centralised so per-button inline opacity:.4 isn't required. */
.lsBtn[disabled] { opacity: .4 }

/* Capture row icons (Photo / Video / Gallery, below rink). 44 px hit area
   wraps a 22 px stroke-only SVG; matches the bottom-nav icon family. */
.capIcon{
  background:transparent;border:0;padding:0;margin:0;cursor:pointer;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:color .15s ease;touch-action:manipulation;
}
.capIcon:hover, .capIcon:focus{color:var(--accent);outline:none}
.capIcon svg{
  width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* Video-icon tap popover — single-line tooltip, dismissible by tap-out / X. */
#mediaTipPopover{
  position:fixed;z-index:2600;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:10px 14px;
  font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.5);max-width:280px;
  display:none;align-items:center;gap:10px;
}
#mediaTipPopover.active{display:flex}
#mediaTipPopover button{
  background:transparent;border:0;color:var(--text-muted);font-size:18px;
  line-height:1;cursor:pointer;padding:0 4px;min-width:32px;min-height:32px;
}

.marker{pointer-events:none}
.pulse{animation:pulse .6s ease-out}
@keyframes pulse{
0%{transform:scale(.4);opacity:0}
60%{transform:scale(1.3);opacity:1}
100%{transform:scale(1);opacity:1}
}

.legend{
font-family:var(--sans);font-size:10px;color:var(--text-muted);
display:flex;gap:14px;align-items:center;padding:0 4px;letter-spacing:.1em;text-transform:uppercase
}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:-1px}
.dot.g{background:var(--gold)}
.dot.s-home{background:var(--home)}
.dot.s-away{background:var(--away)}
.dot.m{background:transparent;border:1.5px dashed var(--miss);width:9px;height:9px}

/* Stats panel */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-card{
background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px;
font-family:var(--sans);
}
.stat-card .lab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);font-weight:300}
.stat-card .val{font-size:28px;font-weight:600;margin-top:6px;color:var(--stat)}
.stat-card .sub{font-size:11px;color:var(--text-muted);margin-top:2px}

.heatlist{margin-top:6px;display:flex;flex-direction:column;gap:6px;font-family:var(--sans);font-size:12px}
.heatlist .row2{display:flex;justify-content:space-between;background:var(--panel);padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.heatlist .row2 b{color:var(--accent-2)}

footer{padding:8px 12px 14px;color:var(--text-muted);font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-align:center}

/* Toast */
.toast{
position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
background:var(--accent-2);color:var(--bg);padding:10px 18px;border-radius:999px;
font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
opacity:0;transition:all .25s ease;pointer-events:none;z-index:99
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Faceoff mode */
body.faceoff-mode #rinkSvg{cursor:crosshair}
.fo-dot{cursor:pointer;pointer-events:auto}
.fo-dot .pulse-group{animation:foDotPulse 1.1s ease-in-out infinite;transform-origin:0 0;transform-box:view-box}
.fo-dot circle.ring{fill:rgba(255,90,31,.15);stroke:var(--accent-2);stroke-width:3;opacity:1}
.fo-dot circle.fill{fill:var(--accent-2);opacity:.95}
.fo-picker{cursor:pointer;pointer-events:auto}
.fo-picker rect{fill:var(--panel);stroke:var(--accent-2);stroke-width:2}
.fo-picker text{fill:var(--text);font-family:var(--sans);font-size:24px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;user-select:none}
@keyframes foDotPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.55}
}

/* Settings modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2500;display:none;align-items:center;justify-content:center;padding:20px;font-family:var(--sans)}
.modal-backdrop.active{display:flex}
.modal-card{background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px 22px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5);position:relative}
.modal-card h2{margin:0 0 16px;font-family:var(--sans);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);font-weight:700}
.modal-card .group{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.modal-card .group:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.modal-card .label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;font-weight:700}
.modal-card .desc{font-size:11px;color:var(--text-muted);margin-top:6px;line-height:1.4}
.modal-card .row{display:flex;gap:6px;flex-wrap:wrap}
.modal-card .opt{flex:1;min-width:80px;padding:10px 8px;background:var(--bg);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text);font-size:11px;letter-spacing:.08em;font-weight:600;cursor:pointer;text-align:center;transition:all .15s ease}
.modal-card .opt.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.modal-card .opt[disabled]{opacity:.35;cursor:not-allowed}
.modal-card .close-row{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.modal-card .close-row button{padding:9px 18px;background:var(--accent);color:var(--bg);border:0;border-radius:8px;font-size:11px;letter-spacing:.14em;font-weight:700;cursor:pointer}

/* Edit popover (long-press) */
.edit-popover{position:fixed;z-index:2600;background:var(--panel);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px;font-family:var(--sans);box-shadow:0 12px 32px rgba(0,0,0,.6);display:none;min-width:240px}
.edit-popover.active{display:block}
.edit-popover::after{content:"";position:absolute;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent}
.edit-popover.below::after{top:-7px;left:var(--anchor-x,20px);border-bottom:7px solid var(--panel)}
.edit-popover.above::after{bottom:-7px;left:var(--anchor-x,20px);border-top:7px solid var(--panel)}
.edit-popover .ep-row{display:flex;gap:4px;margin-bottom:4px}
.edit-popover .ep-row:last-child{margin-bottom:0}
.edit-popover button{flex:1;padding:8px 6px;background:var(--bg);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--text);font-size:10px;letter-spacing:.08em;font-weight:700;cursor:pointer;min-height:34px}
.edit-popover button.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.edit-popover button.danger{background:var(--red,#c8262b);color:#fff;border-color:var(--red,#c8262b)}
.edit-popover .ep-meta{font-size:9px;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;padding:2px 4px 6px;font-weight:700}

/* PP/PK persistent highlight */
body.gs-pp::before, body.gs-pk::before{content:"";position:fixed;top:0;left:0;right:0;height:5px;z-index:3000;pointer-events:none;background:var(--accent-2);animation:gsPulseBar 1.2s ease-in-out infinite;box-shadow:0 0 14px var(--accent-2)}
body.gs-pp::after, body.gs-pk::after{content:attr(data-gs-label);position:fixed;top:9px;left:50%;z-index:3000;pointer-events:none;background:var(--accent-2);color:var(--bg);font-family:var(--sans);font-size:11px;letter-spacing:.22em;font-weight:800;padding:5px 14px;border-radius:999px;text-transform:uppercase;box-shadow:0 4px 16px rgba(255,90,31,.5);transform-origin:50% 50%;animation:gsPulsePill 1.2s ease-in-out infinite}
/* Pulse the active PP or PK button in the segmented control */
body.gs-pp #gameStateSeg button[data-gs="pp"], body.gs-pk #gameStateSeg button[data-gs="pk"]{
  background:var(--accent-2);color:var(--bg);font-weight:800;animation:gsPulseBtn 1.2s ease-in-out infinite;box-shadow:0 0 0 2px var(--accent-2),0 0 12px rgba(255,90,31,.5)
}
@keyframes gsPulseBar{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes gsPulsePill{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(1.06);opacity:.85}}
@keyframes gsPulseBtn{0%,100%{box-shadow:0 0 0 2px var(--accent-2),0 0 12px rgba(255,90,31,.5)}50%{box-shadow:0 0 0 4px var(--accent-2),0 0 20px rgba(255,90,31,.8)}}

/* New-features popup */
#whatsNewBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2700;display:none;align-items:center;justify-content:center;padding:20px;font-family:var(--sans)}
#whatsNewBackdrop.active{display:flex}

/* Apple Pencil input mode: bump every interactive surface to >=60x60 hit
   area for stylus reliability with gloves. Default Finger mode is
   untouched — these rules only apply when body has .input-mode-pen. */
body.input-mode-pen button,
body.input-mode-pen [role="button"],
body.input-mode-pen .lsBtn,
body.input-mode-pen .seg-period button,
body.input-mode-pen .seg button {
  min-height:60px;min-width:60px;
}

/* Help / coachmark overlay */
@keyframes coachPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(58,174,172,.7), 0 0 0 0 rgba(58,174,172,.4) }
50%     { box-shadow: 0 0 0 8px rgba(58,174,172,0), 0 0 0 16px rgba(58,174,172,0) }
}
#helpOverlay {
position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:2000;
display:none;font-family:var(--sans);
}
#helpOverlay.active { display:block }
.coach-ring {
position:absolute;border:2px solid #3AAEAC;border-radius:12px;
pointer-events:none;animation:coachPulse 1.5s ease-in-out infinite;
box-sizing:border-box;
}
.coach-tip {
position:absolute;background:var(--panel);color:var(--text);
padding:12px 14px;border-radius:10px;border:1px solid #3AAEAC;
font-size:12px;line-height:1.4;max-width:260px;letter-spacing:.02em;
box-shadow:0 8px 24px rgba(0,0,0,.6);pointer-events:auto;
}
.coach-tip b { color:#3AAEAC;letter-spacing:.1em;font-size:10px;text-transform:uppercase;display:block;margin-bottom:4px }
.coach-nav {
position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
display:flex;gap:10px;align-items:center;z-index:2001;
}
.coach-nav button {
background:var(--panel);color:var(--text);border:1px solid rgba(255,255,255,.2);
border-radius:8px;padding:10px 16px;font-family:var(--sans);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;font-weight:600;cursor:pointer;
}
.coach-nav button.primary { background:#3AAEAC;color:var(--bg);border-color:#3AAEAC }
.coach-nav .step { color:var(--text-muted);font-size:11px;letter-spacing:.1em }

/* === LANDSCAPE NO-SCROLL FIX (RINK SCREEN) ===
   Fires only at landscape orientations whose short edge is <=1024px,
   covering every phone + every iPad. Portrait stays untouched.
   Goal: every scoring control fits the viewport, no scroll. */
@media (orientation: landscape) and (max-height: 1024px) {

  html, body { height: 100%; overflow: hidden; }
  body { margin: 0 !important; }

  /* Header in landscape uses the same grid layout as portrait — full
     width across the top, 88 px tall (compressed to 56 px on iPhone-LS
     via the @media (max-height: 500px) sub-rule below). #leftRail is
     populated here; #captureRow below the rink is hidden in landscape.
     Felix photo (header > img) hidden — the rail eats horizontal space
     that would otherwise go to the photo. Matches pre-Commit-A behavior. */
  body > header > img { display: none !important; }
  /* Left rail is scoped to body.on-rink — switchTab() toggles this class
     so the fixed-position rail only appears when the Rink tab is active.
     Without scoping, the rail would overlay every tab in landscape. */
  body.on-rink #leftRail {
    display: flex !important;
    flex-direction: column; align-items: center;
    gap: 16px; padding: 14px 0;
    position: fixed !important; left: 0 !important;
    /* iPad-landscape Chrome was rendering top:0 (rail overlapping the
       header) without !important. Forced to header height = 88. iPhone-LS
       sub-rule below overrides to 56 to match the compressed header. */
    top: 88px !important;
    bottom: calc(40px + env(safe-area-inset-bottom));
    width: 56px;
    background: var(--surface); border-right: 1px solid var(--border);
    /* z-index 60 = above bottom-nav (50). Defensive against any
       stacking context promotion from rink-wrap's aspect-ratio +
       overflow combo. */
    z-index: 60; box-sizing: border-box;
  }
  body.on-rink #leftRail .capIcon { color: var(--text-muted); }

  /* Goalies row: drop in landscape — long names + dual change buttons
     don't fit the rail. Available via portrait or overflow menu. */
  #globalGoaliesRow { display: none !important; }

  /* Main: bounded box between rails + bottom nav. Left = 56 (leftRail),
     right = 100 (lastShotBar), bottom = 40 (nav) + safe-area. */
  main {
    margin: 0 100px calc(40px + env(safe-area-inset-bottom)) 56px !important;
    padding: 4px !important;
    /* 88 = full-width header (Commit A 41697bf), 40 = bottom nav.
       iPhone-LS sub-rule below overrides 88 → 56 for the compressed
       header. Universal `overflow: hidden` was removed game-day
       2026-05-10: it blocked scroll on non-rink panels (Lineup, etc).
       Rink panel sets its own overflow:hidden via #panel-rink.active. */
    height: calc(100dvh - 88px - 40px - env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
  }

  /* Rink panel uses block flow so the capture row, game-state row, and
     rink stack vertically inside the center column. All selectors below
     scoped to #panel-rink.active so the rink layout only applies when
     the Rink tab is the active panel. Without .active scoping, the rink
     would render under every other tab (whiteboard / lineup / more), per
     bug fixed game-day 2026-05-10. */
  #panel-rink.active {
    /* Flex column, bottom-anchored. rink-wrap sizes via aspect-ratio
       against THIS parent's intrinsic height (not dvh) — no chrome-
       reservation math, no drift when iPad Chrome URL bar toggles.
       isolation:isolate confines any stacking context inside the panel
       so fixed rails (#leftRail, #lastShotBar) stay above the rink
       regardless of what aspect-ratio + overflow promote. */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 0 8px 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
  }
  #panel-rink.active > #excusedBadge,
  #panel-rink.active > #gameStateHint,
  #panel-rink.active > .legend,
  #panel-rink.active > #rinkActionsRow { display: none !important; }

  /* PP / PK toggles + period dots migrated to the merged header (top bar).
     The old #panel-rink > #gameStateRow markup was deleted; no rule needed.
     Capture row below the rink is hidden in landscape — left rail handles
     Photo / Video / Gallery / Feed instead. */
  #panel-rink.active > #captureRow { display: none !important; }

  /* Right rail: 8 uniform lsBtn (GOAL+MISS+BLK+REB+WRAP+TIP+BREAK+FACEOFF).
     !important on top + bottom because the inline style is
     position:sticky;top:0 — without !important the inline top:0 wins
     and the bar overlaps the End Game cluster at the corner. Top = 88
     (full-width header height) + iPhone-LS sub-rule overrides to 56 to
     match the compressed header. Bottom = 40 (nav) + safe-area. */
  #panel-rink.active #lastShotBar {
    position: fixed !important;
    top: 88px !important;
    right: 0 !important;
    width: 100px !important;
    bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    /* iPad landscape rail: compressed to fit 8 buttons (incl. FACEOFF)
       in viewports that lose height to the Chrome address bar.
       8 × 56 + 7 × 8 = 504 + 16 padding = 520 < 636 worst-case rail. */
    gap: 8px !important;
    padding: 8px 4px !important;
    background: var(--surface) !important;
    border: 0 !important;
    border-left: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
    /* z-index 60 = above bottom-nav (50). Pair with #leftRail bump
       so both rails are guaranteed top of stack in landscape. */
    z-index: 60;
  }
  #panel-rink.active #lastShotBar #lastShotLabel { display: none !important; }
  #panel-rink.active #lastShotBar .lsBtn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    flex: 0 0 56px !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    border-radius: 9px !important;
    line-height: 1 !important;
  }

  /* Rink-wrap sizes relative to its flex parent (#panel-rink.active),
     not the viewport. height:100% fills the parent's available space
     (which already excludes header/nav via main's height calc), and
     aspect-ratio 100/60 derives width. max-width:100% clamps when the
     center column is narrower than the height-derived width — at that
     point aspect-ratio scales height down to maintain ratio. Same rule
     works on iPad-LS AND iPhone-LS because the parent's height already
     reflects whichever header height applies (88 vs 56). */
  #panel-rink.active .rink-wrap {
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 200 / 85 !important;
    margin: 0 !important;
    flex: 0 1 auto !important;
  }

  /* iPhone landscape (=<500 px tall) sub-rule. The strict 64 px
     uniform height from the outer rule won't fit 8 buttons in the
     294 px-tall rail (vh − 56 − 40 − saa). Math:
       8 × 32 + 7 × 4 = 256 + 28 = 284 px ≤ 294 (10 px slack)
     Source-order tie-breaker: this nested @media follows the outer
     rule, so on iPhone-LS its 32 px height + 4 px gap win. iPad +
     desktop landscape never enter this block, keep the strict 64. */
  @media (max-height: 500px) {
    /* iPhone-LS: compress merged header to 56 px so the right rail can
       reclaim vertical space for the 8-button lsBtn rail. Status indicators
       (sync dot, pen) hidden — intentional tradeoff for rail fit. Math:
       390 vh − 56 (header) − 40 (nav) = 294 px rail. 8 × 32 + 7 × 4 = 284 px,
       10 px slack. */
    header#topBar { min-height: 56px; padding: 4px 10px; column-gap: 10px; row-gap: 2px; }
    #headerStats { column-gap: 10px; row-gap: 1px; }
    #hHomeGoals, #hHomeShots, #hAwayGoals, #hAwayShots { font-size: 16px; }
    .hs-col-head { font-size: 11px; }
    #homeRowLabel, #awayRowLabel { font-size: 9px; }
    .seg-period { gap: 8px; }
    .seg-period button { min-height: 40px; min-width: 30px; }
    .seg-period button small { font-size: 8px; }
    #headerStatusBar { display: none; }
    #panel-rink.active #lastShotBar {
      top: 56px !important;
      gap: 4px !important;
    }
    #panel-rink.active #lastShotBar .lsBtn {
      height: 32px !important;
      min-height: 32px !important;
      flex: 0 0 32px !important;
      font-size: 10px !important;
    }
    body.on-rink #leftRail { top: 56px !important; gap: 10px; padding: 8px 0; }
    /* iPhone-LS: main reserves 56 px header (compressed) instead of
       the 88 px full-width header used on iPad-LS. rink-wrap inherits
       sizing from its flex parent — no separate calc needed. */
    main {
      height: calc(100dvh - 56px - 40px - env(safe-area-inset-bottom)) !important;
    }
  }

  /* Bottom nav: 40px tall, label-less. Tap target = 40 + safe-area. */
  nav.bottom-nav {
    height: 40px !important;
    min-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  nav.bottom-nav button {
    padding: 4px 4px !important;
    font-size: 0 !important;
    gap: 0 !important;
  }
  nav.bottom-nav button svg {
    width: 22px !important; height: 22px !important;
  }
}