*{box-sizing:border-box}html,body{margin:0;background:#101b29;color:#fff;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none;width:100%;height:100%;overflow:hidden}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{color:inherit;cursor:pointer;border:1px solid #ffffff35;background:#172b3be8;border-radius:12px;min-height:46px;font-weight:800}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #d9ff75;outline-offset:3px}[hidden]{display:none!important}#app{height:100%;height:100svh;position:relative;overflow:hidden;--safe-top:max(8px,env(safe-area-inset-top));--safe-left:max(14px,env(safe-area-inset-left));--safe-right:max(14px,env(safe-area-inset-right));--safe-bottom:max(10px,env(safe-area-inset-bottom))}canvas{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;top:max(12px,env(safe-area-inset-top));left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:15px}header a{font-size:10px;letter-spacing:2px;color:#cbd8dd;text-decoration:none}header b{font-size:16px;letter-spacing:2px}header b span{color:#d9ff75}header button{width:46px}#hud{position:absolute;top:max(72px,calc(env(safe-area-inset-top) + 62px));left:50%;transform:translateX(-50%);display:flex;background:#0c1b28e8;border:1px solid #a0bfbc40;border-radius:14px;align-items:center;padding:12px 22px;gap:24px;white-space:nowrap;box-shadow:0 10px 30px #0003}#hud>div{display:grid;text-align:center;gap:4px}#hud strong{font-size:34px;color:#d9ff75;line-height:1}#hud small{font-size:9px;letter-spacing:1px}#hud section{display:grid;text-align:center;gap:7px}#hud section span{font-size:9px;letter-spacing:2px;color:#a7c4ce}#hud section b{font-size:11px}#clock{color:#d9ff75}#toast{position:absolute;top:170px;left:10%;right:10%;text-align:center;font-size:13px;font-weight:900;letter-spacing:2px;text-shadow:0 2px 8px #000}#controls{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:30px;right:30px;display:flex;justify-content:space-between;align-items:end;pointer-events:none;touch-action:none}#controls>*{pointer-events:auto}#stick{width:114px;height:114px;border-radius:50%;border:2px solid #d9ff7555;background:#0b243b80;position:relative;touch-action:none;box-shadow:inset 0 0 30px #0003}#knob{position:absolute;left:32px;top:32px;width:46px;height:46px;border-radius:50%;background:#d9ff75b0;border:2px solid #f2ffd2;pointer-events:none}#actions{display:flex;gap:10px;align-items:end}#actions button{width:65px;height:65px;border-radius:50%;font-size:10px;touch-action:none;background:#132b40ce;box-shadow:0 4px 14px #0004}#actions small{color:#8aa2ac}#actions #shoot{width:88px;height:88px;background:#d9ff75;color:#182631;font-size:13px;border:3px solid #f3ffd1;line-height:1.5}#hint{position:absolute;bottom:8px;width:100%;text-align:center;color:#b5c2c9;font-size:9px;letter-spacing:1px;pointer-events:none}#menu{position:absolute;inset:0;background:linear-gradient(90deg,#071522ed,#0d25377a);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;backdrop-filter:blur(5px)}.panel{width:440px;max-height:100%;overflow:auto;background:#102735f5;padding:30px;border:1px solid #73939c66;border-radius:22px;box-shadow:0 30px 100px #0007}.eyebrow{font-size:9px;letter-spacing:2px;color:#d9ff75}h1{font-size:clamp(44px,8vh,76px);letter-spacing:-4px;line-height:.93;margin:24px 0}h1 em{font-style:normal;color:#d9ff75}.panel>p:not(.eyebrow),details p{color:#b7c9d1;font-size:13px;line-height:1.6}#setup{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}label{font-size:8px;letter-spacing:1px;color:#b8ced3}select{display:block;width:100%;margin-top:8px;background:#1c3848;color:white;border:1px solid #55717c;border-radius:7px;padding:10px 5px;font-size:12px;min-height:44px}.primary{background:#d9ff75;color:#142630;border:0;width:100%;padding:17px;letter-spacing:1px}.secondary{width:100%;margin-top:10px}details{margin-top:18px}summary{font-size:10px;letter-spacing:1px;cursor:pointer;padding:8px 0}#record{display:block;color:#8ca8b3;margin-top:16px;font-size:9px;letter-spacing:1px}@media(max-width:600px){header{left:14px;right:14px}#hud{gap:16px;padding:10px 16px}#controls{left:16px;right:16px}#actions{gap:6px}#actions button{width:53px;height:53px}#actions #shoot{width:76px;height:76px}#stick{width:100px;height:100px}#knob{top:25px;left:25px}#hint{font-size:7px;letter-spacing:0}.panel{padding:24px}#toast{font-size:11px}}@media(max-height:550px){#hud{top:58px;padding:7px 18px}#hud strong{font-size:24px}#toast{top:140px}#controls{bottom:18px}#stick{width:90px;height:90px}#knob{left:20px;top:20px}.panel{padding:20px}h1{font-size:44px;margin:12px 0}#setup{margin:12px 0}.panel>p:not(.eyebrow){margin:8px 0}}
#energy{position:absolute;top:158px;left:50%;transform:translateX(-50%);width:240px;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;background:#102735c9;padding:10px 13px;border-radius:10px;pointer-events:none}#energy span{display:block;font-size:8px;letter-spacing:1px;margin-bottom:5px;color:#e4e9dc}#energy i{display:block;background:#ffffff22;height:4px;border-radius:4px;overflow:hidden}#energy b{display:block;height:100%;background:#d9ff75;transition:width .12s}#energy #staminaFill{background:#7bc9ed;width:100%}#matchStats{grid-column:1/-1;font-size:8px;letter-spacing:.6px;color:#bfced4;text-align:center}#toast{top:238px}#locker{padding:8px 0;border-top:1px solid #ffffff25}#locker label{display:block;margin-top:12px}#wallet{color:#d9ff75;font-size:10px}#shopStatus{font-size:11px}button:disabled{cursor:default;opacity:.5}.panel{width:470px}#trainingEnd{margin-top:8px}@media(max-height:550px){#energy{top:140px;width:210px;padding:7px 10px}#toast{top:211px;left:30%;right:30%;font-size:10px}header{top:8px}}@media(max-width:600px){#toast{top:238px;font-size:10px}#hud{top:74px}}

#challenge{grid-column:1/-1;font-size:7px;color:#d9ff75;text-align:center;letter-spacing:.4px}header b{margin-right:auto}#toast{top:250px}@media(max-height:550px){#toast{top:225px}}

#musicPanel{border-top:1px solid #ffffff25;padding:8px 0}#musicPanel label{display:block;font-size:9px;margin:14px 0 6px}#musicPanel select{width:100%}.musicButtons{display:flex;gap:6px;flex-wrap:wrap}.musicButtons button{padding:8px 10px;font-size:9px;flex:1}#musicStatus{color:#d9ff75;font-size:11px;letter-spacing:.5px}#musicVolume{width:100%;accent-color:#d9ff75;min-height:36px}#musicVolumeLabel{float:right}#shotReadout{position:absolute;bottom:158px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:1px;padding:8px 12px;background:#102735d9;border-radius:8px;color:#e5f4ce;white-space:nowrap;pointer-events:none}@media(max-width:600px){header{gap:7px}header b{font-size:12px;letter-spacing:1px}header a{font-size:8px;letter-spacing:1px}header button{width:40px}#shotReadout{bottom:152px;font-size:8px}}@media(max-height:550px){#shotReadout{bottom:112px;font-size:8px}}

#shotReadout{bottom:190px}@media(max-height:550px){#shotReadout{bottom:112px}}

#legacyPanel{margin:16px 0;border:1px solid #c6ff6c55;padding:12px;border-radius:12px;background:#101f2be6}#legacyPanel>summary{color:#d9ff75;letter-spacing:.6px;font-size:10px}#mpOverall{float:right;color:#ffb96c}#mpProgress{font-size:10px;color:#dbedbd;line-height:1.6}#legacyPanel p{font-size:11px;line-height:1.6;color:#b7c9d1}.mpIntro{display:flex;gap:16px;align-items:center;margin:18px 0}.mpIntro>div:last-child{flex:1}.mpIntro b{font-size:18px;color:#fff}.mpIntro small{font-size:8px;color:#d9ff75}.mpForm{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mpForm input{background:#1c3848;border:1px solid #55717c;padding:12px 8px;color:#fff;border-radius:7px;width:100%;min-height:44px;margin-top:8px;font:inherit;font-size:12px}.mpForm label{display:block}.mpUpgrades{display:grid;gap:8px}.mpUpgrades button{font-size:10px;text-align:left;padding:12px}#mpSaveStatus{font-size:10px}.chapterRow{display:flex;gap:12px;align-items:center;border-bottom:1px solid #ffffff15;padding:12px 0;font-size:9px;line-height:1.6}.chapterRow b{font-size:18px}.chapterRow.locked{color:#69818e}.chapterRow.current{color:#ffba75}.chapterRow.cleared{color:#d9ff75}#storyScene{position:absolute;inset:0;z-index:20;background:linear-gradient(0deg,#071521f5,#102735aa 65%,#182b3ba0);display:flex;flex-direction:column;justify-content:space-between;padding:24px max(24px,calc((100vw - 850px)/2));overflow:auto;border-block:14px solid #07131d}.storyTop{display:flex;justify-content:space-between;align-items:center;gap:20px}.storyTop>b{font-size:9px;letter-spacing:2px;color:#d9ff75}.storyTop button{font-size:9px;padding:10px}.storyCard{max-width:760px;margin:30px 0}.storyCard>small{font-size:9px;letter-spacing:3px;color:#ffb96c}.storyCard h2{font-size:clamp(28px,5vw,60px);letter-spacing:-1px;line-height:1.1;margin:24px 0 30px;color:#fff}.storyCard>b{font-size:12px;letter-spacing:3px;color:#d9ff75}.storyCard>p{font-size:clamp(18px,3vw,28px);line-height:1.5;color:#e5eced;min-height:110px;max-width:650px}.storyCard>div{display:flex;align-items:center;justify-content:space-between;gap:25px}.storyCard>div span{font-size:10px;letter-spacing:2px;color:#b4c8d1}.storyCard>div button{background:#d9ff75;color:#152b39;padding:16px 30px;min-width:140px;border:0}@media(max-width:500px){.mpForm{gap:9px}#storyScene{padding:18px 22px}.storyTop>b{font-size:8px;letter-spacing:1px}.storyCard{margin:26px 0}.storyCard h2{font-size:30px}.storyCard>p{min-height:150px;font-size:20px}}@media(max-height:550px){#storyScene{padding:15px 30px;border-block-width:6px}.storyCard{margin:12px 0}.storyCard h2{font-size:26px;margin:8px 0 15px}.storyCard>p{font-size:17px;min-height:55px;margin:10px 0}.storyCard>div button{padding:10px 22px}.storyTop button{min-height:35px}}

#app:has(#storyScene:not([hidden])) :is(header,#hud,#energy,#controls,#hint,#toast,#shotReadout){visibility:hidden}

#actions{display:grid;grid-template-columns:65px 65px 88px;grid-template-rows:65px 88px;gap:8px;align-items:center;justify-items:center}#actions #cross{grid-area:1/1}#actions #pass{grid-area:1/2}#actions #lob{grid-area:1/3}#actions #stampBreak{grid-area:2/1;color:#ffca78;border-color:#f3bd6a}#actions #defend{grid-area:2/2}#actions #shoot{grid-area:2/3}#actions button:disabled{opacity:.35}#styleHUD{position:absolute;top:240px;left:50%;transform:translateX(-50%);width:240px;border-radius:9px;background:#102735d9;padding:8px 13px;text-align:center;pointer-events:none}#styleHUD span{font-size:8px;letter-spacing:.8px;color:#ffcb7c}#styleHUD>div{height:5px;background:#ffffff22;border-radius:5px;margin:6px 0;overflow:hidden}#stampFill{display:block;background:linear-gradient(90deg,#b898ef,#ffca78);height:100%;width:0;transition:width .2s}#stampLabel{font-size:8px;letter-spacing:1px;color:#d9ff75}#toast{top:314px}#hype{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-4deg);max-width:90%;width:max-content;text-align:center;padding:14px 22px;background:#d9ff75;color:#172637;font-size:clamp(16px,3vw,34px);font-weight:900;letter-spacing:-.5px;border:3px solid #172637;box-shadow:6px 6px 0 #b898ef;pointer-events:none}#shotReadout{bottom:250px}#app:has(#storyScene:not([hidden])) :is(#styleHUD,#hype){visibility:hidden}@media(max-width:600px){#actions{grid-template-columns:53px 53px 76px;grid-template-rows:53px 76px;gap:6px}#actions #stampBreak{font-size:8px}#controls{bottom:max(25px,env(safe-area-inset-bottom))}#styleHUD{top:240px}#toast{top:314px;font-size:9px}}@media(max-height:550px){#actions{grid-template-columns:44px 44px 60px;grid-template-rows:42px 60px;gap:5px}#actions button{width:42px;height:42px;font-size:8px}#actions #shoot{width:60px;height:60px;font-size:10px}#styleHUD{top:140px;left:22px;transform:none;width:170px;padding:6px 10px}#energy{display:none}#toast{top:205px;left:25%;right:25%}#shotReadout{bottom:22px}#hype{top:45%;font-size:19px}}

@media(min-width:701px) and (min-height:551px){#energy{left:22px;top:85px;transform:none;width:205px}#styleHUD{left:auto;right:22px;top:85px;transform:none;width:205px}#toast{top:170px}}
@media(max-width:700px) and (min-height:551px){#energy{left:14px;top:158px;transform:none;width:160px;padding:8px;gap:7px}#energy span{font-size:7px;letter-spacing:.2px}#challenge,#matchStats{font-size:6px;letter-spacing:0}#styleHUD{right:14px;left:auto;top:158px;transform:none;width:160px;padding:8px}#styleHUD span,#stampLabel{font-size:7px;letter-spacing:.3px}#toast{top:250px}}


/* Keep game input in the court. The lobby and story remain scrollable. */
body:has(#menu[hidden]):has(#storyScene[hidden]),
#app:has(#menu[hidden]):has(#storyScene[hidden]) {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
header {
  top: var(--safe-top);
  left: var(--safe-left);
  right: var(--safe-right);
  min-height: 44px;
  pointer-events: none;
}
#pause {
  position: relative;
  width: 46px;
  height: 44px;
  min-height: 44px;
  overflow: hidden;
  pointer-events: auto;
  touch-action: none;
  line-height: 1;
}
.pauseIcon { display: inline-block; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
#pause::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: #d9ff75;
}
#pause[data-holding]::before {
  transform: scaleX(1);
  transition: transform 380ms linear;
}
#pause small { display: none; font-size: 7px; color: #d9ff75; margin-top: 3px; }
@media (any-pointer: coarse) {
  #pause small { display: block; }
  #hint { display: none; }
}
#app:has(#menu:not([hidden])) #pause { visibility: hidden; }
#menu { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
#menu, .panel, #storyScene { overscroll-behavior: contain; }
.menuTools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.menuTools a, .menuTools button { font-size: 9px; letter-spacing: .5px; padding: 8px 10px; }
.menuTools a { color: #d9ff75; }
#hud, #toast { pointer-events: none; }
#shotReadout { bottom: max(158px,calc(var(--safe-bottom) + 128px)); }

@media (orientation: landscape) and (max-height: 550px) {
  #controls {
    left: calc(var(--safe-left) + 6px);
    right: calc(var(--safe-right) + 6px);
    bottom: calc(var(--safe-bottom) + 5px);
  }
  #stick { width: clamp(80px,25dvh,106px); height: clamp(80px,25dvh,106px); }
  #knob { left: calc(50% - 21px); top: calc(50% - 21px); width: 38px; height: 38px; }
  #actions { grid-template-columns: 48px 48px 62px; grid-template-rows: 46px 62px; gap: 6px; }
  #actions button { width: 46px; height: 46px; }
  #actions #shoot { width: 62px; height: 62px; }
  #hud { top: var(--safe-top); gap: 12px; padding: 6px 12px; }
  #hud>div { gap: 2px; }
  #hud section { gap: 2px; }
  #hud section span, #hud small { font-size: 8px; letter-spacing: .4px; }
  #hud section b { font-size: 9px; }
  #energy, #styleHUD {
    display: grid;
    left: var(--safe-left);
    top: calc(var(--safe-top) + 48px);
    width: clamp(90px,17vw,135px);
    transform: none;
    padding: 6px;
    gap: 4px;
  }
  #energy span, #styleHUD span, #stampLabel { font-size: 7px; letter-spacing: .25px; }
  #challenge, #matchStats { display: none; }
  #styleHUD { top: calc(var(--safe-top) + 85px); }
  #styleHUD>div { margin: 0; }
  #toast { top: calc(var(--safe-top) + 62px); left: 25%; right: 25%; font-size: 9px; }
  #shotReadout { bottom: calc(var(--safe-bottom) + 5px); }
  #hint { display: none; }
  #storyScene {
    padding-left: calc(var(--safe-left) + 12px);
    padding-right: calc(var(--safe-right) + 12px);
  }
}
@media (orientation: landscape) and (max-height: 550px) and (max-width: 550px) {
  header>b { display: none; }
  #pause { margin-left: auto; }
  #shotReadout { max-width: 32%; white-space: normal; text-align: center; }
}

#squadSetup { grid-column: 1 / -1; padding: 12px; border: 1px solid #8ba1bb55; border-radius: 12px; background: #0b1e2c; }
.squadSelects, #squadOptions { display: grid; gap: 10px; }
#squadOptions, #squadStarters { grid-template-columns: 1fr 1fr; }
#squadStarters { display: grid; gap: 10px; grid-column: 1 / -1; }
#squadCard, #cupBracket { grid-column: 1 / -1; }
#squadCard { border-left: 3px solid var(--squad-color); padding: 8px 10px; background: #ffffff0c; }
#squadName { color: var(--squad-color); font-size: 15px; }
#squadScout { font-size: 11px; color: #bbccd5; margin: 4px 0 7px; }
#squadRoster { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; color: #e0e8ee; font-size: 10px; }
#cupBracket { margin-top: 0; }
#cupBracket summary { color: #ffd18a; }
#cupStatus { color: #fff1c8; margin: 4px 0 8px; }
#cupRounds { display: grid; grid-template-columns: repeat(4,minmax(100px,1fr)); gap: 8px; overflow: auto; }
#cupRounds section { min-width: 0; }
#cupRounds b { font-size: 10px; color: #ffc878; }
#cupRounds p { font-size: 9px; margin: 5px 0; padding: 4px; border-radius: 4px; background: #ffffff0d; }
#cupRounds .cupCurrent { color: #172733; background: #d9ff75; }
#cupRounds .cupWon { color: #b5ef9c; }

#hud { border-top: 2px solid var(--home-accent,#d9ff75); }
#hud #you { color: var(--home-accent,#d9ff75); }
#hud #cpu { color: var(--away-accent,#d9ff75); }
#hud small { max-width: 125px; overflow: hidden; text-overflow: ellipsis; }
#actions {
  --action: 54px;
  --primary-action: 76px;
  --action-gap: 8px;
  grid-template-columns: repeat(3,var(--action)) var(--primary-action);
  grid-template-rows: var(--action) var(--primary-action);
  gap: var(--action-gap);
}
#actions button { width: var(--action); height: var(--action); min-height: 0; font-size: 9px; padding: 0; }
#actions #cross { grid-area: 1/2; }
#actions #pass { grid-area: 1/3; }
#actions #lob { grid-area: 1/4; }
#actions #stampBreak { grid-area: 2/1; position: relative; overflow: hidden; }
#actions #defend { grid-area: 2/2; }
#actions #dunk, #actions #steal { grid-area: 2/3; }
#actions #dunk { color: #f9d9a3; border-color: #efac56; }
#actions #shoot, #actions #block { grid-area: 2/4; width: var(--primary-action); height: var(--primary-action); font-size: 12px; }
#actions #block { background: #f5bda1; color: #201a25; border: 2px solid #ffdcc9; }
#actions #block small { color: #633b37; }
#powerButtonValue { display: block; color: #ffcd82; }
#powerButtonFill { position: absolute; inset: auto auto 0 0; height: 4px; background: #ffc36c; pointer-events: none; }
#actions #stampBreak:disabled { opacity: .7; }
#actions #stampBreak:not(:disabled) { background: #ffcc79; color: #241b29; }
#actions #stampBreak:not(:disabled) small { color: #4a2c33; }
#rotatePrompt { display: none; }
@media (max-width: 600px), (max-height: 550px) {
  #actions { --action: 46px; --primary-action: 62px; --action-gap: 6px; }
  #actions #shoot, #actions #block { font-size: 10px; }
}
@media (max-width: 365px) {
  #controls { left: 10px; right: 10px; }
  #stick { width: 82px; height: 82px; }
  #knob { left: 19px; top: 19px; width: 40px; height: 40px; }
  #actions { --action: 42px; --primary-action: 56px; --action-gap: 4px; }
}
@media (orientation: portrait) and (any-pointer: coarse) {
  #app:has(#menu[hidden]):has(#storyScene[hidden]) #rotatePrompt {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 28px;
    color: #fff;
    background: #091927ef;
  }
  #rotatePrompt strong { display: block; font-size: clamp(18px,6vw,28px); }
  #rotatePrompt span { display: block; color: #d9ff75; font-size: 58px; line-height: 1.25; }
  #rotatePrompt p { color: #bad1dc; }
}

#mpPortrait, .puppetPortrait { flex: none; width: 92px; }
#mpPortrait svg, .puppetPortrait svg { display: block; width: 100%; height: auto; }
#puppetRoster { padding: 8px 12px 12px; border: 1px solid #8ba1bb55; border-radius: 12px; background: #0b1e2c; }
#puppetRoster > summary { color: #d9ff75; font-weight: 800; }
#puppetRoster label { display: block; margin: 9px 0 12px; }
#puppetCards { display: grid; gap: 8px; }
.puppetCard {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 11px;
  padding: 8px;
  align-items: center;
  background: #192d3b;
  border: 1px solid #58758377;
  border-radius: 10px;
}
.puppetCard h3 { margin: 0; font-size: 14px; color: #f6f8e7; }
.puppetCard .puppetPortrait { width: 76px; }
.puppetCard .puppetSpecial { margin: 4px 0 5px; font-size: 10px; line-height: 1.3; color: #ffd797; }
.puppetCard dl { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto; gap: 2px 5px; margin: 0; font-size: 10px; }
.puppetCard dt { color: #c0d6df; }
.puppetCard dd { margin: 0; color: #e9fbab; font-weight: 800; }
@media (max-width: 360px) {
  .puppetCard { grid-template-columns: 62px minmax(0,1fr); gap: 8px; }
  .puppetCard .puppetPortrait { width: 62px; }
}

.travelMap { max-width: 440px; padding: 7px; margin: 7px 0 10px; background: #0d2133; border: 1px solid #7295b260; border-radius: 10px; }
.travelMap svg { display: block; width: 100%; max-height: 145px; }
.travelCopy { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 3px 12px; padding: 2px 2px 5px; font-size: 10px; }
.travelCopy strong { color: #d9ff75; }
.travelCopy span { color: #d5e5e9; }
.travelLabel { font-family: system-ui,sans-serif; font-size: 10px; font-weight: 800; }
.travelFooter { color: #ffcf93; font-size: 8px; letter-spacing: .055em; padding: 3px 2px 0; }
#storyTravel { max-width: 430px; }
#storyScene:has(#storyTravel:not([hidden])) .storyCard { margin-block: 9px; }
#storyScene:has(#storyTravel:not([hidden])) .storyCard p { min-height: 0; margin: 7px 0; }
@media (max-height: 550px) {
  #storyScene:has(#storyTravel:not([hidden])) .storyCard { margin-block: 3px; }
  #storyScene:has(#storyTravel:not([hidden])) .storyCard h2 { margin: 5px 0; font-size: 20px; }
  #storyScene:has(#storyTravel:not([hidden])) .storyCard p { font-size: 13px; }
  #storyTravel { margin-block: 4px; }
  #storyTravel svg { max-height: min(23dvh,100px); }
}
@media (prefers-reduced-motion: reduce) {
  .travelMarker { display: none; }
}


#hype {
  --hype-accent: #f2c16e;
  color: #fff1d1;
  background: linear-gradient(115deg,#352349,#18192c 55%,#452a3a);
  border: 2px solid var(--hype-accent);
  box-shadow: 0 0 17px color-mix(in srgb,var(--hype-accent) 43%,transparent),0 4px 0 #130f24;
  text-shadow: 0 2px #261729;
}

#broadcast {
  position: absolute;
  top: max(72px,calc(env(safe-area-inset-top) + 62px));
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 5px;
  pointer-events: none;
}
#broadcast #hud, #courtFeedback #toast, #courtFeedback #hype {
  position: static;
  transform: none;
}
#courtFeedback { display: grid; justify-items: center; }
#courtFeedback #toast, #courtFeedback #hype {
  width: max-content;
  max-width: min(65vw,390px);
  margin: 0;
  padding: 4px 10px;
  border-radius: 7px;
  text-align: center;
  font-size: clamp(9px,1.25vw,13px);
  line-height: 1.25;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
#courtFeedback #toast {
  color: #e1ecf6;
  background: #0e1c2cf5;
  border: 1px solid #a0bfbc40;
  text-shadow: none;
}
#shotReadout {
  max-width: min(42vw,430px);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
@media (orientation: landscape) and (max-height: 550px) {
  #shotReadout { max-width: 32vw; font-size: 9px; }
}
#hud #clock.clockLow, #hud #clutch { color: #ffd195; }
#hud #clutch { font-weight: 900; }
.quickStarts {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.quickStarts button {
  padding: 9px;
  border-color: #acde7f8a;
  color: #efffcf;
  background: linear-gradient(135deg,#254337,#172b3b);
  font-size: 11px;
  letter-spacing: .05em;
}
.quickStarts button:hover { border-color: #d9ff75; }
.quickStarts small {
  display: block;
  margin-top: 4px;
  color: #b6c9c8;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: normal;
}
#app:has(#storyScene:not([hidden])) #broadcast { visibility: hidden; }
@media (max-height: 550px) { #broadcast { top: 58px; } }
@media (orientation: landscape) and (max-height: 550px) {
  #broadcast { top: var(--safe-top); }
}
@media (any-pointer: coarse) {
  .panel select, .panel input:not([type=range]) { font-size: 16px; }
}