:root {
  --ink: #eaf2f8; --dim: #9fb4c6; --bg: #0b1622; --panel: rgba(9, 20, 31, 0.86);
  --line: rgba(140, 180, 215, 0.22); --accent: #ffb43f; --up: #57d9a3; --dn: #ff6b57;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#stage { position: fixed; inset: 0; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#plan { position: absolute; right: 12px; bottom: 12px; width: 280px; height: 280px;
  border: 1px solid var(--line); border-radius: 10px; background: #0b1622;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
#plan[hidden] { display: none; }

#hud { position: absolute; left: 12px; top: 12px; padding: 10px 14px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  backdrop-filter: blur(6px); min-width: 232px; }
#hud h1 { margin: 0 0 8px; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); font-weight: 650; }
#hud .grid { display: grid; grid-template-columns: auto auto; gap: 2px 12px; align-items: baseline; }
#hud .lbl { color: var(--dim); font-size: 11.5px; }
#hud .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
#hud .val.big { font-size: 19px; }
#hud .val.up { color: var(--up); }
#hud .val.dn { color: var(--dn); }

#msg-bar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  max-width: min(560px, 70vw); text-align: center; pointer-events: none;
  color: var(--accent); font-weight: 600; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }

#controls { position: absolute; left: 12px; bottom: 12px; width: 300px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  backdrop-filter: blur(6px); }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.row label { flex: 0 0 auto; color: var(--dim); font-size: 12px; min-width: 118px; }
.row label b { color: var(--ink); font-variant-numeric: tabular-nums; }
.row input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.row.btns { flex-wrap: wrap; gap: 6px; }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  padding: 0 4px; font: inherit; font-size: 11px; color: var(--dim); }
button, select, input[type=number] { font: inherit; color: var(--ink);
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 10px; cursor: pointer; }
input[type=number] { cursor: text; width: 92px; }
button:hover, select:hover { background: rgba(255, 255, 255, 0.13); }
button.primary { background: var(--accent); color: #23180a; border-color: transparent;
  font-weight: 650; }
button[aria-pressed=true] { outline: 1px solid var(--accent); }

#setup, .modal .panel { background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; backdrop-filter: blur(8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
#setup { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, 94vw); max-height: 92vh; overflow: auto; padding: 18px 22px; }
#setup[hidden] { display: none; }
#setup h2 { margin: 0 0 8px; font-size: 20px; }
.intro { color: var(--dim); margin: 0 0 12px; }
.spec { color: var(--dim); font-size: 12px; margin: 10px 0 4px; }
.best { color: var(--up); font-size: 12px; margin: 8px 0 0; }

.limits { margin: 12px 0; border: 1px solid rgba(255, 180, 63, 0.4); border-radius: 10px;
  padding: 10px 14px; background: rgba(255, 180, 63, 0.06); }
.limits summary { cursor: pointer; font-weight: 650; color: var(--accent); }
.limits ul { margin: 10px 0 6px; padding-left: 20px; }
.limits li { margin: 7px 0; }
.limits h3 { margin: 0 0 8px; font-size: 15px; color: var(--accent); }
.note { color: var(--dim); font-size: 12.5px; }

.modal { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(4, 10, 16, 0.66); z-index: 20; }
.modal[hidden] { display: none; }
.modal .panel { width: min(560px, 94vw); max-height: 90vh; overflow: auto; padding: 18px 22px; }
.modal .panel.wide { width: min(860px, 96vw); }
.modal h2 { margin: 0 0 10px; font-size: 19px; }
.modal h2 small { color: var(--dim); font-weight: 400; font-size: 13px; }
.modal h3 { margin: 14px 0 6px; font-size: 15px; }
#polar-canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }

.sheet-wrap { overflow-x: auto; }
table.sheet { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0; }
table.sheet th, table.sheet td { padding: 4px 6px; border-bottom: 1px solid var(--line);
  text-align: right; font-variant-numeric: tabular-nums; }
table.sheet th:nth-child(2), table.sheet td:nth-child(2) { text-align: left; }
table.sheet tr.me { background: rgba(255, 180, 63, 0.14); }
.lead { font-size: 15px; }

#nogl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; padding: 20px; }
#nogl[hidden] { display: none; }

/* Phones. The HUD, the controls and the plan view must not cover one another: the plan view
   is how the player finds thermals, and it used to sit underneath the controls panel.       */
@media (max-width: 760px), (max-height: 500px) {
  #hud { min-width: 0; font-size: 11px; line-height: 1.35; padding: 7px 10px 8px; }
  #hud h1 { font-size: 13px; margin-bottom: 4px; }
  #hud .lbl { font-size: 10.5px; }
  #hud .val.big { font-size: 16px; }
  #controls .row { margin: 4px 0; }
  .modal .panel, .modal .panel.wide { width: calc(100vw - 16px); padding: 14px 12px; }
  table.sheet { font-size: 11.5px; }
  table.sheet th, table.sheet td { padding: 3px 3px; }
}
/* portrait: controls full width at the bottom, the plan view and the message above them     */
@media (max-width: 760px) and (min-height: 501px) {
  #controls { width: calc(100vw - 24px); }
  #plan { width: 168px; height: 168px; bottom: 200px; }
  #msg-bar { top: auto; bottom: 200px; left: 12px; transform: none; text-align: left;
    max-width: calc(100vw - 24px - 168px - 10px); }
}
@media (max-width: 360px) and (min-height: 501px) {
  #plan { width: 128px; height: 128px; }
  #msg-bar { max-width: calc(100vw - 24px - 128px - 10px); }
}
/* landscape: HUD left, controls bottom right, a smaller plan view top right                 */
@media (max-height: 500px) {
  #controls { width: 300px; left: auto; right: 12px; padding: 6px 10px; }
  #plan { width: 120px; height: 120px; top: 12px; bottom: auto; }
  #msg-bar { left: 232px; right: 144px; transform: none; max-width: none; }
}