/* Yngvar's Free Kick — HUD styling.
   Same glass/type language as the 3D engine this game is built on. */

:root{
  --bg:#07111b;--ink:#eef7f3;--muted:#91a7a0;--line:rgba(225,242,237,.16);
  --cyan:#24dcef;--yellow:#ffd60a;--red:#ff4d44;--green:#43db8b;
  --glass-a:rgba(5,14,24,.76);--glass-b:rgba(13,30,45,.66);--glass-strong:rgba(4,12,21,.91);
  --glass-edge:rgba(225,247,255,.26);--glass-hi:rgba(255,255,255,.11);
  --glass-shadow:0 18px 58px rgba(0,0,0,.46);
}
*{box-sizing:border-box}
html,body{
  margin:0;height:100%;width:100%;max-width:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;
  touch-action:none;overscroll-behavior:none;-webkit-text-size-adjust:100%;
}
button,input{font:inherit}
canvas{display:block}

#stage{position:fixed;inset:0;background:radial-gradient(circle at 50% 10%,#33465b 0,#122231 35%,#07111b 80%)}
#stage canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}
body.aiming #stage canvas{cursor:none}

.hud{position:fixed;z-index:5;pointer-events:none;max-width:100vw}
.hud>*{pointer-events:auto}

/* ── glass surfaces ─────────────────────────────────────────────────────── */
.panel,.scoreboard,.camsel,#gearBtn,.quickActions button,#settings,#summary .sumBox,#orbitHint,#hint{
  background:linear-gradient(145deg,var(--glass-b),var(--glass-a));
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 1px 0 rgba(0,0,0,.35),var(--glass-shadow);
  transform:translateZ(0);
}
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .panel,.scoreboard,.camsel,#gearBtn,.quickActions button,#settings,#summary .sumBox,#orbitHint,#hint{background:var(--glass-strong)}
}

/* ── top bar ────────────────────────────────────────────────────────────── */
#topbar{
  top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:max(9px,env(safe-area-inset-top)) 10px 8px;
  background:linear-gradient(180deg,rgba(2,7,12,.9),transparent);z-index:24;
}
.scoreboard{display:flex;align-items:center;gap:14px;border-radius:10px;padding:8px 13px}
.stat{display:flex;flex-direction:column;line-height:1}
.stat b{font:700 20px "Barlow Condensed",sans-serif;letter-spacing:.5px;color:var(--yellow)}
.stat span{margin-top:3px;font:600 8px 'Noto Sans';letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.stat.wide b{color:#fff}

.quickActions{display:flex;gap:5px;margin-left:auto}
.quickActions button,#gearBtn{
  min-height:40px;min-width:42px;border-radius:9px;color:#fff;padding:0 10px;
  font:600 11px 'Noto Sans';cursor:pointer;
}
.camsel{
  position:absolute;left:50%;top:56px;transform:translateX(-50%);
  display:flex;gap:3px;padding:3px;border-radius:9px;
  max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.camsel::-webkit-scrollbar{display:none}
.camsel button{
  flex:0 0 auto;border:0;background:none;color:var(--muted);padding:8px 10px;border-radius:6px;
  font:600 10px 'Noto Sans';letter-spacing:.2px;cursor:pointer;
}
.camsel button.active{background:var(--yellow);color:#09121c}

/* ── spot label + status line ───────────────────────────────────────────── */
#spotStrip{left:10px;top:104px;padding:8px 11px;border-radius:11px;pointer-events:none}
#spotStrip b{display:block;color:var(--yellow);font:700 15px "Barlow Condensed";line-height:1}
#spotStrip span{display:block;margin-top:3px;color:#9eb0aa;font:600 8px 'Noto Sans';letter-spacing:.45px;text-transform:uppercase}

/* ── the shot panel: instruction, curve, power, step chips ──────────────── */
#shotHud{
  left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(430px,calc(100vw - 24px));display:flex;flex-direction:column;gap:9px;
  pointer-events:none;transition:.22s;
}
body.inplay #shotHud{opacity:0;transform:translateX(-50%) translateY(16px)}
#status{
  align-self:center;padding:8px 14px;border-radius:999px;background:rgba(3,12,20,.78);
  border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font:600 10px 'Noto Sans';color:#d7e6e2;text-align:center;transition:.2s;
}
/* only the step chips take taps — the rest must not shield the pitch */
#status,#curveRow,#powerWrap{pointer-events:none}
#curveRow,#powerWrap{opacity:0;max-height:0;overflow:hidden;transition:.18s}
#curveRow.show,#powerWrap.show{opacity:1;max-height:120px}

/* step chips — tap a completed one to change your mind */
#steps{display:flex;gap:6px;pointer-events:auto}
#steps button{
  flex:1;min-height:46px;display:flex;align-items:center;justify-content:center;gap:6px;
  border-radius:10px;border:1px solid var(--line);background:rgba(6,15,24,.8);color:var(--muted);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font:600 10px 'Noto Sans';letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:.16s;
}
#steps button b{
  width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font:700 10px 'Noto Sans';display:flex;align-items:center;justify-content:center;
}
#steps button.done{color:#9fe8c2;border-color:rgba(67,219,139,.4)}
#steps button.done b{background:var(--green);color:#06231a}
#steps button.active{color:#07111b;background:var(--yellow);border-color:var(--yellow);box-shadow:0 6px 22px rgba(255,214,10,.28)}
#steps button.active b{background:rgba(7,17,27,.28);color:#07111b}
.powerHead{display:flex;justify-content:space-between;margin-bottom:6px;font:600 9px 'Noto Sans';letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.powerHead b{color:#fff}
/* contact point: where the boot meets the ball, drawn on a little ball */
#curveRow{
  display:flex;align-items:center;gap:12px;margin-bottom:9px;padding:9px 12px;border-radius:12px;
  background:linear-gradient(145deg,var(--glass-b),var(--glass-a));border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-shadow);
}
.contactBall{
  position:relative;flex:none;width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fdfdf8,#d8dbd2 62%,#a9ada3);
  border:1px solid rgba(255,255,255,.35);box-shadow:0 6px 18px rgba(0,0,0,.45);
}
/* crosshair through the centre of the ball */
.contactBall i{
  position:absolute;inset:0;border-radius:50%;
  background:
    linear-gradient(to right,transparent calc(50% - 1px),rgba(20,31,58,.32) calc(50% - 1px),rgba(20,31,58,.32) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(to bottom,transparent calc(50% - 1px),rgba(20,31,58,.32) calc(50% - 1px),rgba(20,31,58,.32) calc(50% + 1px),transparent calc(50% + 1px));
}
.contactDot{
  position:absolute;left:50%;top:50%;width:17px;height:17px;border-radius:50%;
  background:var(--red);border:2px solid #fff;box-shadow:0 0 12px rgba(255,77,68,.8);
  transform:translate(-50%,-50%);transition:transform .05s linear;
}
.contactText{min-width:0}
.contactText b{display:block;color:var(--cyan);font:700 14px "Barlow Condensed";letter-spacing:.8px;text-transform:uppercase}
.contactText span{display:block;margin-top:3px;color:var(--muted);font:600 9px 'Noto Sans'}
.powerTrack{
  position:relative;height:16px;border-radius:999px;overflow:hidden;
  background:rgba(4,12,20,.82);border:1px solid var(--glass-edge);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5);
}
.powerFill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#1B9ED3,#43db8b);transition:width .04s linear}
.powerFill.sweet{background:linear-gradient(90deg,#43db8b,#ffd60a);box-shadow:0 0 16px rgba(255,214,10,.55)}
.powerFill.hot{background:linear-gradient(90deg,#ffd60a,#ff4d44)}
/* the marker sits where the shot lands exactly on the reticle */
.powerMark{position:absolute;top:-3px;bottom:-3px;left:55%;width:3px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8);border-radius:2px}
.powerZone{position:absolute;top:0;bottom:0;left:48%;width:14%;background:rgba(255,255,255,.14)}
/* segment ticks, so power can be judged in bars rather than guessed */
.powerTrack:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),rgba(4,12,20,.75) calc(20% - 1px),rgba(4,12,20,.75) 20%);
}

/* ── goal / outcome banner ──────────────────────────────────────────────── */
#banner{
  left:50%;top:34%;transform:translate(-50%,-50%) scale(.85);text-align:center;opacity:0;
  transition:.3s;pointer-events:none;z-index:22;
}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#banner h1{margin:0;font:700 clamp(38px,10vw,62px) "Barlow Condensed";letter-spacing:2px;text-shadow:0 8px 35px #000}
#banner h1.goal{color:var(--yellow)}
#banner h1.out{color:#b5c2be}
#banner p{display:inline-block;margin:6px 0 0;padding:7px 13px;border-radius:7px;background:rgba(3,10,16,.82);font:600 11px 'Noto Sans'}

/* ── settings ───────────────────────────────────────────────────────────── */
#settings{
  display:none;top:104px;right:10px;width:250px;border-radius:12px;padding:12px;
  font:11px 'Noto Sans';z-index:29;border-color:rgba(190,154,255,.34);
}
#settings.open{display:block}
#settings h4{margin:0 0 9px;font:500 11px "Barlow Condensed";letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);font:500 12px "Noto Sans"}
.sw{width:39px;height:22px;border-radius:12px;background:#263442;position:relative;cursor:pointer;flex:none}
.sw:after{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s}
.sw.on{background:var(--yellow)}
.sw.on:after{left:19px}
.closePanel{position:absolute;right:9px;top:8px;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:#0a1724;color:#fff;font-size:20px;line-height:1}

/* ── intro + round summary ──────────────────────────────────────────────── */
#intro,#summary,#matchOver{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(circle at 50% 18%,rgba(32,74,104,.76),rgba(3,9,15,.96) 58%);transition:.28s;
}
#intro.hide{opacity:0;pointer-events:none}
#summary,#matchOver{display:none;z-index:70}
#summary.open,#matchOver.open{display:flex}
.introBox,.sumBox{
  width:min(440px,100%);max-height:calc(100vh - 36px);overflow-y:auto;padding:22px;border-radius:18px;
  background:rgba(5,13,21,.94);border:1px solid rgba(255,214,10,.35);box-shadow:0 25px 100px #000;
}
.introEyebrow{color:var(--cyan);font:700 9px 'Noto Sans';letter-spacing:1.8px}
.introBox h1,.sumBox h1{margin:7px 0 8px;font:700 31px "Barlow Condensed";line-height:1.02}
.introBox p,.sumBox p{margin:0;color:#b9c9c4;font-size:12px;line-height:1.5}
.introSteps{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:15px 0}
.introSteps div{padding:10px 8px;border-radius:10px;background:#0d1b29;border:1px solid var(--line);color:#dce7e3;font-size:10px;line-height:1.35}
.introSteps b{display:block;margin-bottom:4px;color:var(--yellow);font:700 17px "Barlow Condensed"}
.introSteps i{font-style:normal;font-weight:700;color:var(--cyan)}
.introFoot{margin-top:2px!important;color:#8ea19b!important;font-size:10.5px!important}
.introBox em{color:var(--yellow);font-style:normal}
/* the taker's attributes, the way a set-piece screen shows them */
.takerCard{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:10px;background:#0d1b29;border:1px solid var(--line)}
.takerCard>span{flex:1;color:var(--muted);font:600 9px 'Noto Sans';letter-spacing:.6px;text-transform:uppercase}
.takerCard div{text-align:center}
.takerCard b{display:block;color:var(--yellow);font:700 19px "Barlow Condensed";line-height:1}
.takerCard i{display:block;margin-top:2px;color:var(--muted);font:600 8px 'Noto Sans';font-style:normal;letter-spacing:.4px;text-transform:uppercase}
.bigBtn{
  width:100%;margin-top:15px;border-radius:10px;padding:14px;border:0;background:var(--yellow);color:#07111b;
  font:700 14px "Barlow Condensed";text-transform:uppercase;letter-spacing:.8px;cursor:pointer;min-height:48px;
}
.bigBtn:active{transform:translateY(1px)}
.sumGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}
.sumGrid div{padding:11px;border-radius:10px;background:#0d1b29;border:1px solid var(--line)}
.sumGrid b{display:block;color:var(--yellow);font:700 24px "Barlow Condensed";line-height:1}
.sumGrid span{display:block;margin-top:4px;color:var(--muted);font:600 8px 'Noto Sans';letter-spacing:.5px;text-transform:uppercase}

/* ── the match: scoreboard, tip line, power, thumb controls ─────────────── */
#matchBar,#matchTip,#matchPower,#touch{display:none}
body.mode-match #matchBar{display:flex}
body.mode-match #matchTip.show{display:block}
body.mode-match #matchPower.show{display:block}
/* the shot HUD and the free-kick tally have no meaning in a match — the
   scoreboard takes the slot the round stats had */
body.mode-match #shotHud,body.mode-match #spotStrip,
body.mode-match #orbitHint,body.mode-match .scoreboard{display:none}
/* the thumb pad is for thumbs — a mouse gets the keyboard instead */
@media(pointer:coarse){body.mode-match #touch{display:block}}

/* no display here — `body.mode-match #matchBar` above is what turns it on, and a
   second `display` in this block would override the hide rule in free kick */
#matchBar{
  left:10px;top:max(9px,env(safe-area-inset-top));z-index:25;align-items:center;gap:9px;
  padding:7px 14px;border-radius:11px;background:rgba(5,15,24,.82);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);pointer-events:none;white-space:nowrap;
}
#matchBar b{color:var(--yellow);font:700 25px "Barlow Condensed";line-height:1}
.mDash{color:#5d7078;font:700 18px "Barlow Condensed"}
.mSide{display:flex;align-items:center;gap:5px;color:#c8d8d4;font:700 11px "Barlow Condensed";letter-spacing:1.1px}
.mDot{width:9px;height:9px;border-radius:50%;display:block}
.mDot.red{background:#c8102e}
.mDot.white{background:#f4f4f4}
.mTime{margin-left:9px;padding-left:11px;border-left:1px solid var(--line);text-align:right}
.mTime b{display:block;color:#fff;font-size:17px}
.mLevel{
  padding:3px 7px;border-radius:6px;background:rgba(125,225,235,.14);border:1px solid rgba(125,225,235,.3);
  color:var(--cyan);font:700 9px 'Noto Sans';letter-spacing:.7px;text-transform:uppercase;
}
.mTime span{display:block;margin-top:2px;color:var(--muted);font:600 7.5px 'Noto Sans';letter-spacing:.6px;text-transform:uppercase}

#matchTip{
  left:50%;top:104px;transform:translateX(-50%);max-width:calc(100vw - 28px);text-align:center;
  padding:8px 13px;border-radius:999px;background:rgba(4,12,20,.86);border:1px solid var(--line);pointer-events:none;
}
#matchTip b{display:block;color:var(--yellow);font:700 14px "Barlow Condensed";letter-spacing:1.1px;text-transform:uppercase}
#matchTip span{display:block;margin-top:2px;color:#9eb0aa;font:600 8.5px 'Noto Sans';letter-spacing:.5px}

#matchPower{left:50%;bottom:max(122px,calc(96px + env(safe-area-inset-bottom)));transform:translateX(-50%);width:min(240px,52vw);pointer-events:none}
.mpTrack{height:9px;border-radius:99px;background:rgba(4,12,20,.8);border:1px solid var(--line);overflow:hidden}
.mpFill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#1B9ED3,#43db8b)}
.mpFill.sweet{background:linear-gradient(90deg,#43db8b,#ffd60a)}
.mpFill.hot{background:linear-gradient(90deg,#ffd60a,#ff4d44)}

#touch{inset:0;pointer-events:none}
#stick{
  position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));
  width:132px;height:132px;border-radius:50%;pointer-events:auto;touch-action:none;
  background:radial-gradient(circle,rgba(11,26,40,.5),rgba(5,14,22,.72));border:1px solid rgba(125,225,235,.28);
}
#stick.live{border-color:rgba(255,214,10,.6)}
#stickNub{
  position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:rgba(255,214,10,.82);box-shadow:0 6px 20px rgba(0,0,0,.5);
}
#btns{
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
  display:flex;align-items:flex-end;gap:12px;pointer-events:auto;
}
#btns button{
  width:84px;height:84px;border-radius:50%;border:1px solid rgba(125,225,235,.3);
  background:rgba(8,22,34,.8);color:#fff;font:700 12px "Barlow Condensed";letter-spacing:1px;
  touch-action:none;-webkit-user-select:none;user-select:none;
}
#btns #btnA{width:98px;height:98px;background:rgba(255,214,10,.9);color:#07111b;border-color:rgba(255,214,10,.9);font-size:14px}
#btns button:active{transform:scale(.94)}

/* ── choosing a game ────────────────────────────────────────────────────── */
.modeCard{margin-top:14px;padding:14px;border-radius:14px;background:#0b1826;border:1px solid rgba(125,225,235,.22)}
.modeCard.alt{border-color:var(--line)}
.modeCard h2{margin:0 0 5px;font:700 22px "Barlow Condensed";letter-spacing:.4px}
.modeCard p{color:#a9bcb7;font-size:11px;line-height:1.45}
.ctrlGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 2px}
.ctrlGrid div{padding:7px 5px;border-radius:8px;background:#0d1b29;border:1px solid var(--line);text-align:center}
.ctrlGrid b{display:block;color:var(--cyan);font:700 12px "Barlow Condensed";letter-spacing:.6px}
.ctrlGrid span{display:block;margin-top:2px;color:var(--muted);font:600 7.5px 'Noto Sans';letter-spacing:.3px}
/* three-way picker, used for the opponent's difficulty on the intro card and
   again in the settings panel — both instances stay in step */
.segRow{display:flex;align-items:center;gap:10px;margin-top:13px}
.segRow>span{flex:1;color:var(--muted);font:600 9px 'Noto Sans';letter-spacing:.6px;text-transform:uppercase}
.segs{display:flex;gap:3px;padding:3px;border-radius:9px;background:#0d1b29;border:1px solid var(--line);flex:none}
.segs button{
  border:0;background:none;color:var(--muted);padding:7px 11px;border-radius:6px;min-height:34px;
  font:700 10px "Barlow Condensed";letter-spacing:.9px;text-transform:uppercase;cursor:pointer;
}
.segs button.on{background:var(--yellow);color:#09121c}
.segNote{margin-top:7px!important;min-height:15px;color:#8ea19b!important;font-size:10px!important}
/* the opponent has no meaning when you are the only one on the pitch */
body:not(.mode-match) .levelRow{display:none}
.touchOnly{display:none}
@media(pointer:coarse){.pcOnly{display:none}.touchOnly{display:block}}
.bigBtn.ghost{background:transparent;border:1px solid rgba(255,214,10,.5);color:var(--yellow)}
.moScore{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0}
.moScore b{color:var(--yellow);font:700 54px "Barlow Condensed";line-height:1}
.moScore span{color:#5d7078;font:700 30px "Barlow Condensed"}

/* ── transient notices ──────────────────────────────────────────────────── */
#orbitHint{
  left:50%;top:104px;transform:translateX(-50%);padding:7px 11px;border-radius:999px;
  font:600 8.5px 'Noto Sans';color:#d7e6e2;letter-spacing:.25px;white-space:nowrap;
  opacity:.9;transition:.25s;pointer-events:none;
}
#orbitHint.hide{opacity:0;transform:translateX(-50%) translateY(-6px)}
#perfToast,#cameraRecovery{
  position:fixed;z-index:30;left:50%;top:92px;transform:translateX(-50%) translateY(-8px);opacity:0;
  pointer-events:none;padding:7px 10px;border-radius:999px;background:rgba(4,12,20,.88);
  border:1px solid var(--line);color:#b9c9c4;font:600 8px 'Noto Sans';transition:.25s;letter-spacing:.6px;
}
#perfToast.show,#cameraRecovery.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── loading screen ─────────────────────────────────────────────────────── */
#loading{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,#102b3c 0,#07111b 48%,#040a10 100%);
  color:#fff;font:600 12px 'Noto Sans',ui-monospace,monospace;letter-spacing:.6px;transition:opacity .35s;contain:layout paint;
}
#loading.hide{opacity:0;pointer-events:none}
.loadCard{
  width:min(330px,calc(100vw - 36px));padding:22px 20px;border-radius:18px;background:rgba(5,15,24,.78);
  border:1px solid rgba(125,225,235,.25);box-shadow:0 24px 80px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.loadTitle{font:700 18px "Barlow Condensed",system-ui,sans-serif;letter-spacing:1.8px;text-align:center}
.loadStatus{margin-top:9px;min-height:32px;color:#b9cbc8;font-size:10px;line-height:1.45;text-align:center}
.loadTrack{height:7px;margin-top:15px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.09);box-shadow:inset 0 1px 4px rgba(0,0,0,.45)}
.loadBar{height:100%;width:8%;border-radius:inherit;background:linear-gradient(90deg,#00dbe8,#ffe000,#ff5a4d);box-shadow:0 0 18px rgba(0,229,255,.45);transition:width .3s ease;position:relative}
.loadBar:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.65) 50%,transparent 85%);transform:translateX(-120%);animation:loadShine 1.15s linear infinite}
.loadMeta{display:flex;justify-content:space-between;margin-top:8px;color:#7f9b99;font-size:9px}
.loadError{display:none;margin-top:13px;padding:10px;border-radius:10px;background:rgba(132,20,24,.28);border:1px solid rgba(255,100,96,.38);color:#ffc1bd;font-size:9px;line-height:1.4;word-break:break-word}
.loadRetry{display:none;width:100%;margin-top:12px;padding:11px;border:0;border-radius:10px;background:#ffd60a;color:#07111b;font:700 12px "Barlow Condensed",system-ui,sans-serif;letter-spacing:.8px;text-transform:uppercase}
.loadCard.failed .loadError,.loadCard.failed .loadRetry{display:block}
.loadCard.failed .loadBar{background:#ff5147;animation:none}
@keyframes loadShine{to{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.loadBar:after{animation:none}}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── tablets ────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .scoreboard{gap:11px;padding:7px 10px}
  .stat b{font-size:18px}
  #settings{top:auto;left:7px;right:7px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-height:70vh;overflow:auto;border-radius:16px}
}
/* ── phones ─────────────────────────────────────────────────────────────── */
@media(max-width:640px){
  #topbar{padding-left:7px;padding-right:7px}
  .scoreboard{gap:9px;padding:6px 9px;border-radius:9px}
  .stat b{font-size:16px}
  .stat span{font-size:7px}
  .stat.opt{display:none}
  .camsel{left:7px;right:7px;top:52px;transform:none;max-width:none}
  .camsel button{padding:8px 8px;font-size:9px}
  .quickActions button,#gearBtn{min-width:40px;padding:0 8px;font-size:0}
  .quickActions button:first-letter,#gearBtn:first-letter{font-size:16px}
  /* these two are text, not an icon — keep them legible instead of clipping */
  .quickActions #slowBtn{font-size:11px}
  #spotStrip{top:96px;left:7px;padding:6px 9px}
  #spotStrip b{font-size:13px}
  #status{font-size:9px;padding:7px 11px}
  #shotHud{width:calc(100vw - 16px);gap:7px}
  #steps button{font-size:9px;min-height:44px}
  #orbitHint{top:auto;bottom:calc(178px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}
  .introSteps{grid-template-columns:1fr}
  .introBox h1,.sumBox h1{font-size:27px}
  .introBox,.sumBox{padding:18px}
  #matchBar{gap:7px;padding:6px 10px}
  #matchBar b{font-size:21px}
  /* the shirt colours say which side is which — the words would push the
     scoreboard into the button row on a narrow phone */
  .mSide{gap:0;font-size:0}
  .mLevel{display:none}      /* you chose it two taps ago, and it is in settings */
  .mTime b{font-size:14px}
  #matchTip{top:92px}
  #matchTip b{font-size:12px}
  #stick{width:118px;height:118px}
  #stickNub{width:48px;height:48px;margin:-24px 0 0 -24px}
  #btns button{width:74px;height:74px;font-size:11px}
  #btns #btnA{width:86px;height:86px;font-size:12.5px}
}
/* ── landscape phones: keep the pitch visible, shrink the chrome ─────────── */
@media(max-height:460px) and (orientation:landscape){
  .camsel{left:auto;right:10px;top:auto;bottom:max(10px,env(safe-area-inset-bottom));transform:none}
  #spotStrip{display:none}
  #shotHud{width:min(360px,52vw);left:24px;transform:none;gap:5px}
  body.inplay #shotHud{transform:translateY(16px)}
  #steps button{min-height:38px;font-size:9px}
  #banner{top:30%}
  #banner h1{font-size:34px}
  /* the camera strip lives bottom-right in landscape, so the buttons move up */
  body.mode-match .camsel{display:none}
  #matchTip{top:auto;bottom:calc(126px + env(safe-area-inset-bottom))}
  #stick{width:106px;height:106px}
  #btns button{width:66px;height:66px}
  #btns #btnA{width:78px;height:78px}
}