:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #f2f7eb;
  background: #173e52;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; min-height: 100svh; }
.game { width: min(100% - 48px, 960px, calc((100svh - 300px) * 16 / 9)); margin: 0 auto; padding: 20px 0 16px; }
.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
h1 { margin: 0; font: 900 32px/1 "Trebuchet MS", sans-serif; letter-spacing: -1px; }
.wordmark-light { display: inline-block; width: 8px; height: 12px; margin-left: 9px; background: #f5ca62; box-shadow: 0 -3px #9cdbe3, 0 3px #9cdbe3; }
.masthead p { margin: 0; font-size: 14px; color: #c4dedb; }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 0 2px 10px; }
.hud p { margin: 0; }
.hud-label { display: block; font-weight: 750; font-size: 17px; }
.hud-subtitle { display: block; margin-top: 2px; font-size: 12px; color: #c4dedb; }
.energy { display: flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; }
#energy-count { font-variant-numeric: tabular-nums; color: #f5ca62; font-weight: 700; }
.energy-icon { display: inline-block; width: 6px; height: 10px; background: #f5ca62; border-left: 2px solid #fff3b4; }
.scene { position: relative; border: 3px solid #416b78; box-shadow: 0 6px 0 #102f42; background: #9cdbe3; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; }
button { min-width: 44px; min-height: 44px; padding: 8px 13px; border: 2px solid #71899a; border-radius: 4px; color: #f2f7eb; background: #173e52; font: 700 14px/1.2 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
button.primary, .jump { background: #f5ca62; border-color: #f5ca62; color: #173e52; }
button:disabled { cursor: default; opacity: 0.5; }
button:active:not(:disabled), button[data-pressed="true"] { background: #43705a; color: #f2f7eb; }
:focus-visible { outline: 3px solid #f5ca62; outline-offset: 3px; }
.game:focus:not(:focus-visible) { outline: none; }
.menu-layer { position: absolute; inset: 0; display: grid; place-items: center; background: #102f4299; padding: 10px; overflow: auto; }
.menu { width: min(100%, 440px); padding: 16px; border: 2px solid #71899a; background: #173e52f5; text-align: center; }
.menu h2 { margin: 0 0 8px; font: 900 24px/1.15 "Trebuchet MS", sans-serif; }
.menu p { margin: 0 0 12px; font-size: 14px; }
.menu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.touch-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.directions { display: flex; gap: 10px; }
.touch-controls button { min-width: 62px; min-height: 48px; touch-action: none; user-select: none; -webkit-user-select: none; }
.directions button { font-size: 24px; }
.jump { min-width: 104px !important; }
.control-hint { margin: 12px 0 0; color: #c4dedb; text-align: center; font-size: 12px; line-height: 1.5; }
.level-picker { margin-top: 12px; padding: 12px; border-top: 2px solid #416b78; }
.level-picker h2 { margin: 0 0 10px; font-size: 18px; }
.level-picker ol { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }
.level-picker button { text-align: left; }
.level-picker small { display: block; margin-top: 3px; font-weight: 400; }
.notice { margin-top: 20px; color: #f5ca62; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .game { width: calc(100% - 24px); padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .masthead { align-items: flex-start; flex-direction: column; gap: 7px; margin-bottom: 14px; }
  h1 { font-size: 27px; }
  .masthead p { font-size: 13px; }
  .hud-label { font-size: 15px; }
  .energy { font-size: 13px; gap: 5px; }
  .hud { gap: 8px; }
  .scene { border-width: 2px; }
  .menu { padding: 10px; }
  .menu h2 { font-size: 20px; margin-bottom: 6px; }
  .menu p { font-size: 12px; margin-bottom: 8px; }
  .menu-actions { gap: 6px; }
  .menu-actions button { font-size: 13px; padding: 8px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .game { width: min(100% - 32px, calc((100svh - 154px) * 16 / 9)); padding-top: 8px; padding-bottom: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .masthead, .hud, .scene, .level-picker, .notice { grid-column: 1 / -1; }
  .masthead { margin-bottom: 8px; }
  h1 { font-size: 24px; }
  .masthead p, .hud-subtitle, .control-hint { display: none; }
  .hud { min-height: 32px; padding-bottom: 6px; }
  .toolbar { grid-row: 4; grid-column: 2; margin: 12px 0 0 12px; }
  .touch-controls { grid-row: 4; grid-column: 1; margin-top: 12px; gap: 8px; }
  .touch-controls button { min-width: 44px; min-height: 44px; padding: 8px; }
  .directions { gap: 6px; }
  .jump { min-width: 80px !important; }
  .menu { padding: 10px; }
}
@media (max-height: 360px) and (orientation: landscape) {
  .game { width: min(100% - 24px, 640px); }
  .masthead { flex-direction: row; gap: 8px; }
  .scene { width: min(100%, calc((100svh - 154px) * 16 / 9)); justify-self: center; }
  .menu-layer { padding: 6px; }
  .menu { padding: 8px; }
  .menu h2 { font-size: 20px; margin-bottom: 6px; }
  .menu p { font-size: 12px; margin-bottom: 8px; }
  .menu-actions { gap: 6px; }
  .menu-actions button { font-size: 13px; padding: 8px; }
}