/* Open Basketball — responsive canvas and touch controls */
:root {
  --accent: #72ffd1;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #07070c;
  color: #9aa3b2;
  font-family: "Trebuchet MS", sans-serif;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(1200px 700px at 50% 10%, #14121f 0%, #07070c 60%);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#cab {
  position: relative;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1a1626, #0d0b14);
  box-shadow:
    0 0 0 2px #2a2540,
    0 24px 60px rgba(0, 0, 0, 0.8),
    inset 0 0 40px rgba(120, 90, 255, 0.06);
  max-width: calc(100vw - 12px);
}
#screen {
  display: block;
  background: #000;
  border-radius: 6px;
  width: 1024px;
  height: 576px;
  max-width: 100%;
  image-rendering: pixelated;
  touch-action: none;
  box-shadow: inset 0 0 0 1px #000, 0 0 22px rgba(255, 180, 60, 0.05);
}
#hint {
  font-size: 12px;
  letter-spacing: 0.5px;
  text-align: center;
  max-width: 1000px;
  line-height: 1.7;
  opacity: 0.75;
  padding: 0 8px;
}
#hint b { color: #fdb927; }

/* quick bar: mute + fullscreen */
#quickbar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 30;
}
#quickbar button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 10, 18, 0.72);
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
}
#quickbar button.off { color: #6b7285; }

/* ================= touch controls ================= */
#touch {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 50;
  pointer-events: none;
}
#touch.on { display: block; }

.tstick {
  position: absolute;
  left: max(18px, env(safe-area-inset-left, 0px));
  bottom: calc(22px + var(--safe-b));
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 2px solid rgba(253, 185, 39, 0.35);
  background: rgba(20, 18, 32, 0.35);
  pointer-events: auto;
  touch-action: none;
}
.tstick::after {
  content: '';
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.14);
}
.tstick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(253, 185, 39, 0.5);
  border: 2px solid rgba(253, 185, 39, 0.8);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tbtns {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(22px + var(--safe-b));
  display: grid;
  grid-template-columns: 76px 76px;
  grid-template-rows: 64px 88px;
  gap: 12px;
  pointer-events: none;
}
.tbtn {
  border-radius: 50%;
  border: 2px solid rgba(253, 185, 39, 0.5);
  background: rgba(24, 20, 38, 0.55);
  color: #fff;
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  pointer-events: auto;
  touch-action: none;
}
.tbtn.down { background: rgba(253, 185, 39, 0.75); color: #14121e; transform: scale(0.94); }
.tbtn-a { grid-column: 2; grid-row: 2; width: 88px; height: 88px; font-size: 14px; }
.tbtn-b { grid-column: 1; grid-row: 2; width: 76px; height: 76px; align-self: end; }

/* menu mode: label swap only, same buttons */

.tmini {
  position: absolute;
  top: calc(10px + var(--safe-t));
  left: max(12px, env(safe-area-inset-left, 0px));
  display: flex;
  gap: 8px;
}
.tminibtn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 10, 18, 0.6);
  color: var(--accent);
  font-size: 16px;
  pointer-events: auto;
  touch-action: none;
}

/* phones: hide the keyboard hint bar, tighten the frame */
@media (hover: none), (pointer: coarse) {
  #hint { display: none; }
  #cab { padding: 6px; border-radius: 10px; }
}
@media (max-height: 520px) {
  #hint { display: none; }
  body { gap: 0; }
  .tstick { width: 120px; height: 120px; bottom: calc(12px + var(--safe-b)); }
  .tstick-knob { width: 52px; height: 52px; }
  .tbtns { bottom: calc(12px + var(--safe-b)); }
}

#cab { padding: 0; border-radius: 12px; background: #0b1122; box-shadow: 0 0 0 1px #293550, 0 28px 90px #0009; }
#screen { border-radius: 12px; }
#hint { max-width: 1000px; font-size: 11px; color: #8c9dbd; }
#hint b { color: #72ffd1; }
#quickbar { top: 12px; right: 12px; }
#quickbar button { color: #b9c9e5; background: #111b30d9; border-color: #35405c; }
button:focus-visible, #screen:focus-visible { outline: 2px solid #72ffd1; outline-offset: 3px; }
#touch.menu .tstick, #touch.menu .tbtns { display: none; }

@media (pointer: coarse) and (orientation: landscape) {
  .tstick { left: max(12px, env(safe-area-inset-left)); width: 112px; height: 112px; bottom: 24px; }
  .tstick-knob { width: 46px; height: 46px; }
  .tbtns { right: max(12px, env(safe-area-inset-right)); bottom: 24px; grid-template-columns: 60px 68px; grid-template-rows: 52px 68px; gap: 8px; }
  .tbtn-a { width: 68px; height: 68px; font-size: 11px; }
  .tbtn-b { width: 60px; height: 60px; font-size: 10px; }
}

/* The live character lab is a modal so native selects, colors and keyboard focus work. */
#appearance-settings {
  width: min(1080px, calc(100vw - 24px));
  height: min(680px, calc(100dvh - 24px));
  max-width: none; max-height: none; margin: auto; padding: 0;
  border: 1px solid #405575; border-radius: 16px;
  background: #101b30; color: #f2f6ff; font-family: "Trebuchet MS", sans-serif;
  overflow: hidden; box-shadow: 0 24px 90px #000b;
}
#appearance-settings[open] { display: flex; flex-direction: column; }
#appearance-settings::backdrop { background: #030814d9; }
.appearance-header { padding: 20px 24px 12px; flex: 0 0 auto; }
.appearance-header h1 { margin: 0 0 6px; font-size: 28px; color: #79f3cf; }
.appearance-header p { margin: 0; color: #b7c8e3; font-size: 17px; }
.appearance-body { min-height: 0; flex: 1; display: grid; grid-template-columns: 44% 56%; }
.appearance-preview { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; }
#appearance-canvas { display: block; width: 100%; min-height: 0; object-fit: contain; background: #17243b; border-radius: 12px; }
#appearance-caption { margin: 10px 0; font-size: 20px; text-align: center; font-weight: bold; color: #79f3cf; }
.appearance-controls { overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 24px 18px 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 14px 16px; }
.appearance-controls label { display: flex; flex-direction: column; min-width: 0; gap: 5px; font-size: 17px; color: #bbcae3; }
.appearance-controls .appearance-style { grid-column: 1 / -1; color: #79f3cf; font-size: 20px; }
.appearance-controls input, .appearance-controls select { min-width: 0; width: 100%; height: 44px; border-radius: 7px; border: 1px solid #4a6082; background: #1a2c48; color: #f2f6ff; font: 18px "Trebuchet MS",sans-serif; padding: 6px 8px; }
.appearance-controls input[type=color] { padding: 3px; cursor: pointer; }
.appearance-controls input[type=range] { padding: 0; accent-color: #79f3cf; }
.appearance-controls output { display: inline; color: #f2f6ff; font-size: 16px; }
.appearance-footer { flex: 0 0 auto; padding: 14px 24px 20px; display: flex; justify-content: flex-end; gap: 16px; border-top: 1px solid #2b3d59; }
.appearance-footer button { min-width: 150px; min-height: 48px; border: 1px solid #435a7c; border-radius: 10px; background: #1a2c48; color: #f2f6ff; font: bold 20px "Trebuchet MS",sans-serif; cursor: pointer; }
.appearance-footer #appearance-apply { min-width: 220px; color: #091d26; background: #79f3cf; border-color: #79f3cf; }
#appearance-settings :focus-visible { outline: 2px solid #79f3cf; outline-offset: 2px; }
@media (max-height: 520px) {
  .appearance-header { padding: 12px 18px 8px; }
  .appearance-header h1 { font-size: 23px; margin-bottom: 3px; }
  .appearance-header p { font-size: 15px; }
  .appearance-preview { padding: 4px 12px; }
  #appearance-caption { font-size: 18px; margin: 5px 0; }
  .appearance-controls { padding: 4px 18px 12px 8px; gap: 10px 12px; }
  .appearance-footer { padding: 8px 18px 12px; }
}
#game-settings {
  width: min(880px, calc(100vw - 24px)); height: min(620px, calc(100dvh - 24px));
  max-width: none; max-height: none; margin: auto; padding: 0;
  background: #101b30; color: #f2f6ff; border: 1px solid #405575; border-radius: 16px;
  font-family: "Trebuchet MS",sans-serif; overflow: hidden; box-shadow: 0 24px 90px #000b;
}
#game-settings[open] { display: flex; flex-direction: column; }
#game-settings::backdrop { background: #030814d9; }
.game-settings-controls { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 12px 24px 24px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-content: start; }
.game-settings-controls label { display: flex; flex-direction: column; min-width: 0; gap: 8px; color: #bdcce3; font-size: 20px; }
.game-settings-controls select { width: 100%; min-height: 48px; background: #1a2c48; color: #f2f6ff; font: 19px "Trebuchet MS",sans-serif; padding: 8px; border: 1px solid #4a6082; border-radius: 8px; }
.game-settings-controls small { color: #9fb5d4; font-size: 15px; line-height: 1.4; }
#settings-lab { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px; border: 1px solid #70dfbc; border-radius: 10px; text-align: left; background: #1d3944; color: #79f3cf; cursor: pointer; min-height: 86px; }
#settings-lab strong { font: bold 25px "Trebuchet MS",sans-serif; } #settings-lab strong span { float: right; }
#settings-style-summary { font: 18px "Trebuchet MS",sans-serif; color: #d7e9ed; }
#game-settings :focus-visible { outline: 2px solid #79f3cf; outline-offset: 2px; }
#settings-apply { background: #79f3cf; color: #091d26; min-width: 220px; }
@media (max-height: 520px) { .game-settings-controls { gap: 14px 20px; padding: 8px 18px 18px; } .game-settings-controls label { font-size: 18px; gap: 6px; } }
@media (max-height: 520px) {
  .game-settings-controls { gap: 8px 20px; padding: 4px 18px 8px; }
  .game-settings-controls small { display: none; }
  #settings-lab { min-height: 76px; padding: 10px 14px; gap: 4px; }
  #settings-lab strong { font-size: 22px; }
  #settings-style-summary { font-size: 16px; }
}

/* Roster editor and substitutions, including compact landscape phones. */
#team-management { width:min(960px,calc(100vw - 24px)); height:min(720px,calc(100dvh - 24px)); max-width:none; max-height:none; padding:0; margin:auto; border:1px solid #405575; border-radius:16px; color:#f2f6ff; background:#101b30; font:18px 'Trebuchet MS',sans-serif; }
#team-management[open] { display:flex; flex-direction:column; }
#team-management::backdrop { background:#030814d9; }
.management-body { flex:1; min-height:0; overflow:auto; padding:8px 24px; touch-action:pan-y; }
.management-body p { line-height:1.4; color:#bdcce3; }
.management-body table { width:100%; border-collapse:collapse; text-align:left; }
.management-body th,.management-body td { padding:8px; border-bottom:1px solid #32445e; }
.management-body select,.management-body input { max-width:100%; min-height:44px; padding:6px; border:1px solid #4a6082; border-radius:6px; background:#1a2c48; color:#fff; font:17px 'Trebuchet MS',sans-serif; }
.management-body input { width:80px; }
.management-body select { width:100%; }
.management-body .management-note { font-size:14px; color:#9fb5d4; }
#management-message { color:#ff9dba; }
#management-save { background:#79f3cf; color:#091d26; }
#team-management :focus-visible { outline:2px solid #79f3cf; outline-offset:2px; }
@media(max-height:520px) { .management-body { font-size:16px; padding:4px 12px; } .management-body th,.management-body td {padding:4px;} }
#touch.menu .tgame { display:none; }
.tminibtn.tgame { font-size:12px; min-width:44px; min-height:44px; }
.tbtn-d { grid-column:2; grid-row:1; width:64px; height:64px; align-self:end; font-size:11px; }
#touch.menu .tbtn-d { display:none; }
#touch.coach .tstick, #touch.coach .tbtns, #touch.coach .tgame { display:none; }
#keyboard-shortcuts { width:min(900px,calc(100vw - 24px)); height:min(720px,calc(100dvh - 24px)); max-width:none; max-height:none; padding:0; margin:auto; border:1px solid #405575; border-radius:16px; color:#f2f6ff; background:#101b30; font:18px 'Trebuchet MS',sans-serif; }
#keyboard-shortcuts[open] { display:flex; flex-direction:column; }
#keyboard-shortcuts::backdrop { background:#030814d9; }
.shortcut-body { flex:1; min-height:0; overflow:auto; padding:12px 24px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.shortcut-body fieldset { min-width:0; border:1px solid #405575; border-radius:8px; }
.shortcut-body legend { color:#79f3cf; font-weight:bold; }
.shortcut-body label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0; }
.shortcut-body select { min-width:90px; min-height:44px; background:#1a2c48; color:white; border:1px solid #4a6082; border-radius:6px; font:18px 'Trebuchet MS',sans-serif; }
.shortcut-note,#shortcuts-message { grid-column:1 / -1; margin:0; line-height:1.4; }
.shortcut-note {color:#bdcce3;font-size:15px;} #shortcuts-message {color:#ff9dba;}
#shortcuts-save { background:#79f3cf; color:#091d26; }
#settings-shortcuts { min-height:76px; padding:12px; border:1px solid #70dfbc; border-radius:10px; background:#1d3944; color:#79f3cf; font:bold 20px 'Trebuchet MS',sans-serif; cursor:pointer; }
@media(max-height:520px){.tbtn-d {width:52px;height:52px;font-size:9px;} .shortcut-body{padding:4px 14px;gap:10px;} .shortcut-body label{font-size:15px;} #keyboard-shortcuts .appearance-footer button{font-size:16px;min-width:120px;}}
@media(max-width:560px){.shortcut-body{grid-template-columns:1fr;} #keyboard-shortcuts .appearance-footer{flex-wrap:wrap;gap:6px;} #keyboard-shortcuts .appearance-footer button{font-size:14px;min-width:90px;}}
#player-selection { width:min(760px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; margin:auto; border:1px solid #405575; border-radius:16px; color:#f2f6ff; background:#101b30; font:18px 'Trebuchet MS',sans-serif; }
#player-selection[open]{display:flex;flex-direction:column;}
#player-selection::backdrop{background:#030814d9;}
.player-selection-body{padding:20px 24px;overflow:auto;}
.player-selection-body label{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;color:#79f3cf;}
.player-selection-body select{min-height:48px;background:#1a2c48;color:white;border:1px solid #4a6082;border-radius:6px;padding:8px;font:18px 'Trebuchet MS',sans-serif;}
#player-selection-save{background:#79f3cf;color:#091d26;}
.player-height { white-space:nowrap; font-variant-numeric:tabular-nums; }
.management-stats-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 12px; }
.management-stats-toolbar h2 { margin:0; font-size:18px; color:#79f3cf; }
#management-stats { min-height:44px; border:1px solid #70dfbc; border-radius:8px; padding:8px 16px; background:#1d3944; color:#79f3cf; font:bold 16px 'Trebuchet MS',sans-serif; cursor:pointer; }
.roster-table-scroll { overflow:auto; overscroll-behavior:contain; border:1px solid #32445e; border-radius:8px; }
.roster-status { font-size:15px; font-variant-numeric:tabular-nums; }
.roster-status th,.roster-status td {white-space:nowrap;}
@media(max-width:700px){.management-stats-toolbar{align-items:flex-start;flex-direction:column;} #management-form .player-height {white-space:normal;font-size:14px;}}

#management-form option.lineup-selected { color:#72ffd1; background:#1a2c48; }

/* Player Lab: team and style share a row; jerseys sit below the preview. */
.appearance-controls .appearance-style { grid-column: auto; font-size:17px; }
.appearance-team { color:#79f3cf; }
.appearance-player { grid-column:1 / -1; }
.appearance-preview { overflow:auto; justify-content:flex-start; overscroll-behavior:contain; touch-action:pan-y; }
#appearance-canvas { flex-shrink:0; height:auto; max-height:290px; }
#appearance-caption { font-size:16px; }
#appearance-uniforms { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; flex-shrink:0; }
#appearance-uniforms button { min-width:0; padding:4px 1px; border:1px solid #435a7c; border-radius:7px; background:#1a2c48; color:#f2f6ff; cursor:pointer; }
#appearance-uniforms button[aria-pressed=true] { border-color:#79f3cf; background:#29453f; }
#appearance-uniforms canvas { display:block; width:100%; max-width:60px; margin:auto; }
#appearance-uniforms span { display:block; font-size:11px; }
.appearance-uniform-colors { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.appearance-uniform-colors label { display:flex; flex-direction:column; gap:5px; color:#bbcae3; font-size:17px; }
.appearance-uniform-colors input { width:100%; height:44px; min-height:44px; box-sizing:border-box; border:1px solid #4a6082; border-radius:7px; padding:3px; background:#1a2c48; cursor:pointer; }
@media(max-height:520px){#appearance-canvas{max-height:160px;}#appearance-caption{font-size:14px;}.appearance-uniform-colors{margin:8px 0;}}
.roster-sort { border:0; padding:0; background:none; color:inherit; font:inherit; cursor:pointer; text-align:inherit; }
.roster-sort:hover,.roster-sort:focus-visible { color:#79f3cf; text-decoration:underline; }

#management-form .management-control-row { cursor:pointer; }
#management-form .management-control-row:hover > * { background:#203c4e; }
#management-form .management-control-row.controlled-player > * { background:#234d48; color:#a4ffe0; }
#management-form .management-control-row:focus-visible { outline:2px solid #79f3cf; outline-offset:-2px; }
.controlled-ball { display:inline-block; width:1.8em; font-size:20px; vertical-align:middle; }
.management-control-note { font-size:14px; }
#touch.practice .tgame { display:none; }
.audio-settings { min-width: 0; margin: 0; padding: 12px; border: 1px solid #4a6082; border-radius: 8px; color: #e5ecfa; }
.audio-settings legend { padding: 0 8px; font-size: 20px; }
.audio-settings input[type=range] { width: 100%; accent-color: #72ffd1; min-height: 32px; cursor: pointer; }
.game-settings-controls .audio-mute { flex-direction: row; align-items: center; font-size: 17px; margin-top: 8px; }
.audio-mute input { width: 20px; height: 20px; accent-color: #72ffd1; }
#hint { white-space: nowrap; width: calc(100vw - 32px); max-width: 1400px; box-sizing: border-box; letter-spacing: 0; }
#touch.challenge:not(.menu) .tstick, #touch.challenge:not(.menu) .tbtn-b,
#touch.challenge:not(.menu) .tbtn-d, #touch.challenge .tgame { display: none; }

/* Native league dropdown aligned to the canvas header at every viewport size. */
#league-select { position:absolute; z-index:2; padding:0 8px; border:1px solid #64718c; border-radius:6px; background:#192139; color:#72ffd1; font-family:inherit; cursor:pointer; }
#league-select:focus-visible { outline:2px solid #72ffd1; outline-offset:2px; }
#league-status { position:absolute; top:10px; left:24px; right:24px; color:#fff; background:#192139; padding:12px; }
[hidden] { display:none !important; }

/* Fullscreen uses the whole viewport; the canvas keeps its aspect ratio. */
:root:fullscreen body { gap: 0; margin: 0; padding: 0; background: #000; }
:root:fullscreen #hint { display: none; }
:root:fullscreen #cab {
  max-width: none;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #000; box-shadow: none;
}
:root:fullscreen #screen { margin: 0; padding: 0; border-radius: 0; box-shadow: none; }