:root { color-scheme: dark; font-family: Inter, "Segoe UI", system-ui, sans-serif; background: #07151d; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; touch-action: none; user-select: none; }
button, a { font: inherit; }
#ad { position: fixed; inset: 0; min-width: 300px; min-height: 180px; overflow: hidden; background: #07151d; }
#game { display: block; width: 100%; height: 100%; }
.overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(3, 13, 19, 0.8); backdrop-filter: blur(3px); }
.overlay.hidden { display: none; }
.panel { width: min(92%, 680px); padding: 26px 30px; border: 3px solid #ff755b; border-radius: 14px; color: #edf9fc; background: linear-gradient(145deg, rgba(13, 39, 50, 0.98), rgba(7, 24, 32, 0.99)); box-shadow: 0 18px 0 rgba(3, 12, 17, 0.55), 0 30px 90px rgba(0, 0, 0, 0.64); }
.start-panel { display: grid; grid-template-columns: 126px minmax(0, 1fr); align-items: center; gap: 25px; }
.start-panel img { width: 112px; height: 112px; border: 2px solid #fff; border-radius: 22px; }
.eyebrow { margin: 0 0 4px; color: #65d1d6; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { margin: 0; color: #fff; font-weight: 900; text-transform: uppercase; }
h1 { font-size: clamp(38px, 7vw, 64px); font-style: italic; letter-spacing: -.06em; text-shadow: 4px 4px 0 #b53c2d; }
h2 { font-size: clamp(30px, 6vw, 52px); }
.panel p:not(.eyebrow) { margin: 10px 0 17px; color: #c3d8df; line-height: 1.45; }
.panel button, .panel a { min-height: 48px; padding: 9px 20px; border: 2px solid #ff927d; border-radius: 8px; color: #fff; background: linear-gradient(#ff7358, #c73f2e); box-shadow: 0 5px 0 #671e18; font-weight: 900; text-decoration: none; text-align: center; cursor: pointer; }
.panel button:active, .panel a:active { transform: translateY(3px); box-shadow: 0 2px 0 #671e18; }
.end-panel { text-align: center; }
.end-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pause-panel { width: min(86%, 360px); display: grid; gap: 14px; text-align: center; }
#touch-controls { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.left-controls, .right-controls { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.left-controls { left: max(14px, env(safe-area-inset-left)); }
.right-controls { right: max(14px, env(safe-area-inset-right)); }
.control { pointer-events: auto; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.23); color: rgba(255,255,255,.92); font-weight: 850; text-shadow: 0 2px 3px #000; cursor: pointer; opacity: .72; }
.control.active { opacity: 1; transform: scale(.96); }
.steer { width: clamp(72px, 11vw, 108px); height: clamp(72px, 11vw, 108px); border-radius: 22px; background: rgba(41, 101, 129, .8); font-size: 29px; }
.brake, .accelerate { width: clamp(78px, 11vw, 108px); height: clamp(78px, 11vw, 108px); border-radius: 50%; font-size: clamp(11px, 1.7vw, 16px); }
.brake { background: rgba(169, 69, 76, .86); }
.accelerate { background: rgba(35, 151, 116, .86); }
.boost { position: absolute; left: max(36px, calc(env(safe-area-inset-left) + 34px)); bottom: clamp(102px, 16vw, 150px); width: clamp(66px, 9vw, 90px); height: clamp(66px, 9vw, 90px); border-radius: 50%; background: rgba(207, 137, 40, .9); font-size: clamp(11px, 1.6vw, 15px); }
#reset-button, #pause-button { position: absolute; z-index: 9; top: 126px; min-height: 38px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; color: #fff; background: rgba(31, 77, 92, .9); font-weight: 800; cursor: pointer; }
#reset-button { right: 60px; padding: 0 13px; }
#pause-button { right: 10px; width: 42px; }
@media (max-height: 360px) {
  .panel { padding: 15px 20px; }
  .start-panel { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .start-panel img { width: 76px; height: 76px; border-radius: 15px; }
  .panel p:not(.eyebrow) { margin: 5px 0 10px; font-size: 13px; }
  .panel button, .panel a { min-height: 39px; padding-block: 6px; }
  .steer, .brake, .accelerate { width: 66px; height: 66px; }
  .boost { width: 58px; height: 58px; bottom: 83px; }
  #reset-button, #pause-button { top: 92px; }
}