/* Onboarding (docs/ftue/tutorial-plan.md): Rookie Hour's coach strip and button pulse (tutorial-coach.js), the lobby
   tour and the Rookie Hour offer (lobby-tour.js). Dark panels, ink outline, hard drop, one saturated accent. */
:root{--coach-ink:var(--bb-ink,#05080c);--coach-face:#0b0f15;--coach-accent:var(--sig-trinket,#b6ff3b)}

/* Coach strip: under the scoreboard, one line at a time. */
#hud #coach{position:fixed;z-index:8;left:50%;top:var(--coach-top,72px);transform:translateX(-50%);width:min(620px,calc(100vw - 32px));display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;padding:9px 12px;background:var(--coach-face);border:3px solid var(--coach-accent);border-radius:10px;box-shadow:0 0 0 3px var(--coach-ink),4px 5px 0 3px var(--coach-ink);pointer-events:auto;color:#fff}
#hud #coach[hidden]{display:none}
#hud #coach .coach-text{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;min-width:0}
#hud #coach .coach-host{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;background:#141a24;box-shadow:0 0 0 2px var(--coach-accent);font:400 26px/1 var(--font-display,'Bangers',Impact,sans-serif);color:var(--coach-accent)}
#hud #coach .coach-body{display:grid;gap:3px;min-width:0}
#hud #coach small{font:400 11px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);letter-spacing:.08em;color:var(--coach-accent)}
#hud #coach .coach-say{font:600 15px/1.3 var(--font-body);color:#fff;text-wrap:balance}
#hud #coach .coach-say :is(kbd,b){font:400 12px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);padding:3px 6px 2px;border-radius:4px;background:var(--coach-ink);color:var(--coach-accent);box-shadow:0 0 0 2px currentColor;margin:0 2px;white-space:nowrap}
#hud #coach .coach-say .coach-dash{color:var(--sig-move,#36e0ff)}#hud #coach .coach-say .coach-ultimate{color:var(--sig-ult,#ff3ea5)}#hud #coach .coach-say .coach-trinket{color:var(--sig-trinket,#b6ff3b)}
#hud #coach .coach-bar{display:block;height:5px;border-radius:3px;background:#1c2331;overflow:hidden;margin-top:3px}#hud #coach .coach-bar i{display:block;height:100%;background:var(--coach-accent)}
#hud #coach .coach-leave{min-height:32px;padding:6px 9px;border:0;border-radius:6px;background:#141a24;color:#9aa4b8;font:400 11px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);box-shadow:0 0 0 2px #2c3647;cursor:pointer}
/* While Rookie Hour runs the coach speaks for the objective line and the first-match tips. */
body.tutorial-on #hud :is(#objective,#first-hint){display:none!important}
/* The button the coach names breathes in its own colour. */
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket).coach-pulse{outline:4px solid var(--ab-c,#fff);animation:coach-pulse 1s ease-out infinite}
@keyframes coach-pulse{0%{outline-offset:2px;outline-color:var(--ab-c,#fff)}100%{outline-offset:16px;outline-color:transparent}}
@media (prefers-reduced-motion:reduce){html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket).coach-pulse{animation:none;outline-offset:6px}}
@media (max-height:500px){
  #hud #coach{padding:6px 9px;gap:8px;width:min(560px,calc(100vw - 260px))}
  #hud #coach .coach-host{width:32px;height:32px;font-size:20px}
  #hud #coach .coach-say{font-size:13px}
}

/* Lobby tour and Rookie Hour offer: a full-screen modal; the spotlight is a hole in a dark scrim. */
dialog.coach-tour{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:#fff}
dialog.coach-tour::backdrop{background:transparent}
dialog.coach-offer::backdrop{background:#05080cc4}
.coach-tour .tour-hole{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px #05080cc4,0 0 0 4px var(--coach-accent),0 0 0 7px var(--coach-ink);pointer-events:none}
.coach-tour .tour-hole.round{border-radius:50%}
.coach-tour .tour-card{position:fixed;box-sizing:border-box;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;display:grid;gap:8px;padding:14px 16px 12px;background:var(--coach-face);border:3px solid var(--coach-accent);border-radius:10px;box-shadow:0 0 0 3px var(--coach-ink),5px 6px 0 3px var(--coach-ink)}
.coach-tour .tour-center{left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 24px))}
.coach-tour .tour-kick{font:400 12px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);letter-spacing:.08em;color:var(--coach-accent)}
.coach-tour h2{margin:0;font:400 28px/1 var(--font-display,'Bangers',Impact,sans-serif);letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:2px 2px 0 var(--coach-ink)}
.coach-tour p{margin:0;font:600 15px/1.35 var(--font-body);color:#d9e1f5}
.coach-tour p b{color:var(--coach-accent)}
.coach-tour .tour-reward{display:flex;gap:8px;align-items:center}
.coach-tour .tour-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:2px}
.coach-tour .tour-dots{display:flex;gap:5px;flex-wrap:wrap}.coach-tour .tour-dots i{width:9px;height:9px;border-radius:50%;background:#2a3346;box-shadow:0 0 0 2px var(--coach-ink)}.coach-tour .tour-dots i.on{background:var(--coach-accent)}
.coach-tour :is(.tour-next,.tour-later){min-height:44px;padding:10px 16px 9px;border:0;border-radius:6px;font:400 14px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);cursor:pointer;flex:none}
.coach-tour .tour-next{background:var(--coach-accent);color:var(--coach-ink);box-shadow:0 0 0 2px var(--coach-ink),2px 3px 0 2px var(--coach-ink)}
.coach-tour .tour-next:focus-visible,.coach-tour .tour-later:focus-visible{outline:3px solid #fff;outline-offset:3px}
.coach-tour .tour-later{background:#141a24;color:#cfd7ea;box-shadow:0 0 0 2px #2c3647}
.coach-tour .tour-foot{font:500 12px/1.3 var(--font-body);color:#8d97ad}
@media (max-height:500px){
  .coach-tour .tour-card{padding:10px 12px 9px;gap:6px;width:min(320px,calc(100vw - 24px))}
  .coach-tour .tour-center{width:min(440px,calc(100vw - 24px))}
  .coach-tour h2{font-size:22px}.coach-tour p{font-size:13px}
}
/* The ? dialog's replay buttons. */
#bc-help .bc-onboarding{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}#bc-help .bc-onboarding h3{flex-basis:100%;margin:0}
html body #menu#menu #bc-help .bc-onboarding button{width:auto;min-height:44px;padding:8px 16px;border:2px solid var(--coach-accent);border-image:none;border-radius:6px;background:var(--coach-face);color:var(--coach-accent);font:400 13px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);letter-spacing:.04em;box-shadow:2px 3px 0 var(--coach-ink);text-shadow:none;cursor:pointer}
html body #menu#menu #bc-help .bc-onboarding button:is(:hover,:focus-visible){background:var(--coach-accent);color:var(--coach-ink)}

/* Training Yard on landscape phones: YARD CONTROLS sat on the trinket button. It moves to the top left, under STATS. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  html body #training-controls{top:118px;right:auto;left:max(10px,env(safe-area-inset-left));width:230px}
  html body #training-controls form{max-height:calc(100dvh - 200px)}
}
/* ROOKIE HOUR · TUTORIAL in CH 01 Play (lobby-tour.js installTour): a dark plate with the coach's lime. */
html.broadcast body #menu#menu [data-channel=play] .bc-room-line:has(#rookie-hour){display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
html.broadcast body #menu#menu #rookie-hour{width:auto;flex:none;min-height:36px;margin:0;padding:6px 14px;border:2px solid var(--coach-accent);border-radius:6px;background:var(--coach-face);color:var(--coach-accent);font:400 12px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);letter-spacing:.04em;box-shadow:2px 3px 0 var(--coach-ink);cursor:pointer}
html.broadcast body #menu#menu #rookie-hour:is(:hover,:focus-visible){background:var(--coach-accent);color:var(--coach-ink)}
@media (pointer:coarse){html.broadcast body #menu#menu #rookie-hour{min-height:44px}}
/* Landscape phones: CH 01's bottom block used only the right half of the sheet (the left column is empty since the
   name row moved up), so the sheet scrolled. It spans the width: FIND PUBLIC MATCH beside the public-match notes, then
   the solo line with PRACTICE VS BOTS and ROOKIE HOUR · TUTORIAL on one row. CH 01 then fits without scrolling. */
@media (max-height:500px) and (orientation:landscape){
  html.broadcast body #menu#menu [data-channel=play] .launch-bottom{display:block}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .multiplayer-box.multiplayer-box{width:100%;max-width:none;display:grid;grid-template-columns:max-content minmax(0,1fr)!important;gap:6px 14px;align-items:center;margin:0}
  html.broadcast body #menu#menu [data-channel=play] .multiplayer-box>:not(#find-public):not(.bc-public-info){grid-column:1/-1}
  html.broadcast body #menu#menu [data-channel=play] .multiplayer-box>.bc-public-info{grid-column:2;margin:0;width:auto;max-width:none;justify-self:stretch}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .bc-public-info.bc-public-info{grid-template-columns:max-content minmax(0,1fr);column-gap:14px;font-size:12px;line-height:1.25;padding:3px 8px}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .bc-public-info.bc-public-info li{margin:0;font-size:12px!important;line-height:1.25!important}
  html.broadcast body #menu#menu [data-channel=play] .bc-room-line:has(#rookie-hour){flex-wrap:nowrap}
  html.broadcast body #menu#menu .bc-sheet .bc-channels:has([data-channel=play]:not([hidden])){padding-bottom:0}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .bc-channel-body{padding-bottom:3px}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .multiplayer-box.multiplayer-box{row-gap:3px}
}
/* The shortest landscape phones (375 px tall): CH 01's head is trimmed to the close button's height and the gaps
   tightened, so it still fits. */
@media (max-height:380px) and (orientation:landscape){
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .bc-channel-head{min-height:0;padding-top:0;padding-bottom:0;height:44px}
  html.broadcast body #menu#menu .bc-sheet [data-channel=play] .bc-channel-body{padding-top:2px;padding-bottom:0;row-gap:2px}
}
/* Rookie Hour step card (tutorial-coach.js): the world is frozen behind it until GOT IT. */
#hud #coach-card{position:fixed;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;display:grid;gap:12px;padding:16px 18px 14px;background:var(--coach-face);border:3px solid var(--coach-accent);border-radius:12px;box-shadow:0 0 0 3px var(--coach-ink),6px 7px 0 3px var(--coach-ink),0 0 0 100vmax #05080c99;color:#fff;pointer-events:auto}
#hud #coach-card[hidden]{display:none}
#hud #coach-card .coach-card-head{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
#hud #coach-card .coach-host{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;background:#141a24;box-shadow:0 0 0 2px var(--coach-accent);font:400 28px/1 var(--font-display,'Bangers',Impact,sans-serif);color:var(--coach-accent)}
#hud #coach-card small{font:400 12px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);letter-spacing:.08em;color:var(--coach-accent)}
#hud #coach-card h2{margin:4px 0 0;font:400 30px/1 var(--font-display,'Bangers',Impact,sans-serif);letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:2px 2px 0 var(--coach-ink)}
#hud #coach-card .coach-card-body{display:flex;gap:14px;align-items:center}
#hud #coach-card .coach-card-body p{margin:0;font:600 17px/1.35 var(--font-body);color:#e4ebfa;text-wrap:balance}
#hud #coach-card .coach-card-body p :is(kbd,b){font:400 13px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);padding:3px 6px 2px;border-radius:4px;background:var(--coach-ink);color:var(--coach-accent);box-shadow:0 0 0 2px currentColor;margin:0 2px;white-space:nowrap}
#hud #coach-card .coach-card-body p .coach-dash{color:var(--sig-move,#36e0ff)}#hud #coach-card .coach-card-body p .coach-ultimate{color:var(--sig-ult,#ff3ea5)}#hud #coach-card .coach-card-body p .coach-trinket{color:var(--sig-trinket,#b6ff3b)}
#hud #coach-card .coach-card-icon{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;background:#0b0f15;box-shadow:0 0 0 4px var(--c,#fff),0 0 0 7px var(--coach-ink)}
#hud #coach-card .coach-card-icon.coach-dash{--c:var(--sig-move,#36e0ff)}#hud #coach-card .coach-card-icon.coach-ultimate{--c:var(--sig-ult,#ff3ea5)}#hud #coach-card .coach-card-icon.coach-trinket{--c:var(--sig-trinket,#b6ff3b)}
#hud #coach-card .coach-card-icon :is(svg,img){display:block;width:100%;height:100%}
#hud #coach-card .coach-card-icon{position:relative}#hud #coach-card .coach-card-icon .hd-icon{position:absolute;inset:0}
#hud #coach-card .coach-card-row{display:flex;gap:12px;align-items:center;justify-content:space-between}
#hud #coach-card :is(.coach-card-go,.coach-card-leave){min-height:48px;border:0;border-radius:8px;font:400 15px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);cursor:pointer}
#hud #coach-card .coach-card-go{flex:1;max-width:240px;margin-left:auto;padding:12px 24px;background:var(--coach-accent);color:var(--coach-ink);font-size:20px;box-shadow:0 0 0 2px var(--coach-ink),3px 4px 0 2px var(--coach-ink)}
#hud #coach-card .coach-card-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
#hud #coach-card .coach-card-leave{padding:10px 12px;background:#141a24;color:#9aa4b8;box-shadow:0 0 0 2px #2c3647}
@media (max-height:500px){
  #hud #coach-card{gap:8px;padding:10px 14px;width:min(520px,calc(100vw - 32px))}
  #hud #coach-card .coach-host{width:36px;height:36px;font-size:22px}
  #hud #coach-card h2{font-size:24px}
  #hud #coach-card .coach-card-body p{font-size:15px}
  #hud #coach-card .coach-card-icon{width:52px;height:52px}
  #hud #coach-card :is(.coach-card-go,.coach-card-leave){min-height:44px}
}