:root { color-scheme: dark; background: #000; color: #eee; font-family: system-ui, sans-serif; }
body { margin: 0; overflow: hidden; }
#game { outline: none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#loading { position: fixed; inset: 0; display: grid; align-content: center; justify-items: center; padding: 24px; background: #090b0d; text-align: center; }
#loading[hidden], [hidden] { display: none !important; }
h1 { margin: 0; font-size: clamp(28px, 5vw, 56px); font-weight: 600; letter-spacing: -.04em; }
#status { color: #fff; }
.detail { color: #aab0b6; font-size: 14px; line-height: 1.8; }
button { background: #b92222; color: #fff; border: 0; border-radius: 4px; padding: 12px 20px; font: inherit; cursor: pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
details { max-width: 700px; margin: 24px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; font-size: 12px; }
#notices { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
#notices p { margin: 0; padding: 8px 12px; background: #000b; border-radius: 4px; font-size: 13px; text-align: center; }
#game-tools, #game-keyboard, #game-info {
  position:fixed; right:max(8px, env(safe-area-inset-right)); top:max(8px, env(safe-area-inset-top)); z-index:2;
}
#controls button { padding:8px 10px; background:#242424; border:1px solid #7778; font-size:13px; touch-action:manipulation; }
#controls #toggle-tools { display:grid; place-items:center; width:44px; height:44px; padding:0; background:#141414d9; }
#toggle-tools span { width:18px; height:2px; background:#eee; box-shadow:0 -5px #eee,0 5px #eee; }
#game-actions { position:absolute; top:calc(100% + 6px); right:0; width:156px; display:grid; gap:4px; padding:6px; background:#161616f5; border:1px solid #7778; border-radius:6px; }
#game-actions button { min-height:38px; text-align:left; }
#fullscreen-status { margin:4px; font-size:12px; }
#touch-pad {
  box-sizing:border-box; position:fixed;
  inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:6px;
  pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
#joystick { grid-area:1/1; box-sizing:border-box; width:clamp(84px,22vw,144px); aspect-ratio:1; border:2px solid #fffa; border-radius:50%; background:#181818; pointer-events:auto; touch-action:none; display:grid; place-items:center; }
#joystick span { width:40%; aspect-ratio:1; border-radius:50%; background:#ddd9; pointer-events:none; }
#pedals, #aux-controls { display:grid; gap:6px; }
#pedals { grid-area:1/3; justify-self:end; }
#aux-controls { grid-area:1/2; }
#steering-buttons { grid-area:1/1; display:flex; gap:6px; }
#controls #touch-pad button { pointer-events:auto; touch-action:none; min-height:44px; background:#181818; border:1px solid #777; border-radius:10px; }
#controls #pedals button { min-width:68px; min-height:50px; font-weight:600; }
#controls #steering-buttons button { width:clamp(44px,12vw,72px); padding-inline:0; min-height:60px; font-size:22px; }
#controls #touch-pad .pressed { background:#b92222c9; }
#game-keyboard, #game-info { top:calc(max(8px,env(safe-area-inset-top)) + 50px); }
#game-keyboard { display:flex; gap:5px; padding:8px; background:#111e; }
#game-keyboard input { width:min(150px,45vw); font-size:16px; }
#game-info { width:min(520px,calc(100vw - 48px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height:70dvh; overflow:auto; padding:16px; background:#161616f5; border:1px solid #777; font-size:13px; }
#game-info pre { user-select:text; }
#skybox-settings small { display:block; color:#aab0b6; margin-left:22px; }
#scene-detail { font:inherit; font-size:16px; max-width:100%; }

@media (pointer:coarse) {
  body {
    --pad-height:clamp(132px, 32vw, 164px);
    --pad-side:clamp(104px, 17vw, 156px);
    --play-left:env(safe-area-inset-left);
    --play-right:env(safe-area-inset-right);
    --play-top:env(safe-area-inset-top);
    --play-bottom:env(safe-area-inset-bottom);
  }
  body.touch-pad-visible { --play-bottom:calc(env(safe-area-inset-bottom) + var(--pad-height)); }
  body #game {
    --play-width:calc(100vw - var(--play-left) - var(--play-right));
    --play-height:calc(100dvh - var(--play-top) - var(--play-bottom));
    --frame-width:min(var(--play-width), calc(var(--play-height) * 4 / 3));
    --frame-height:calc(var(--frame-width) * 3 / 4);
    left:calc(var(--play-left) + var(--play-width) / 2);
    top:calc(var(--play-top) + var(--play-height) / 2);
    width:min(var(--frame-width), calc(var(--frame-height) * var(--game-aspect)));
    height:min(var(--frame-height), calc(var(--frame-width) / var(--game-aspect)));
  }
  #touch-pad { height:calc(var(--pad-height) - 24px); align-items:center; }
  #joystick { max-width:calc(var(--pad-height) - 24px); }
}

@media (pointer:coarse) and (orientation:portrait) {
  .touch-pad-visible #notices { bottom:calc(var(--play-bottom) + 8px); }
}

@media (pointer:coarse) and (orientation:landscape) {
  body.touch-pad-visible {
    --play-left:calc(env(safe-area-inset-left) + var(--pad-side));
    --play-right:calc(env(safe-area-inset-right) + var(--pad-side));
    --play-bottom:env(safe-area-inset-bottom);
  }
  #touch-pad {
    inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    height:auto; grid-template-columns:var(--pad-side) 1fr var(--pad-side);
    grid-template-rows:1fr 1fr; padding-block:12px;
  }
  #joystick, #steering-buttons { grid-area:2/1; justify-self:center; align-self:start; }
  #joystick { width:min(116px, calc(var(--pad-side) - 12px), 34dvh); }
  #controls #steering-buttons button { width:min(64px, calc((var(--pad-side) - 16px) / 2)); }
  #aux-controls { grid-area:1/1; justify-self:center; align-self:end; }
  #pedals { grid-area:1/3/3; justify-self:center; }
}