/* Sparse cut-corner touch targets; no blur or bitmap overlays over WebGPU. */
.mc-root {
  --mc-scale: 1; --mc-opacity: .8; --mc-ink: #f0eee4; --mc-accent: #e7b52d;
  --mc-cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  position: fixed; inset: 0; z-index: 20; pointer-events: none; color: var(--mc-ink);
  font: 12px/1.3 system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
/* Dynamic viewport excludes mobile browser chrome and retains safe-area controls. */
:root #canvas { width: 100vw; height: 100dvh; }
:root:fullscreen { width: 100%; height: 100dvh; overflow: hidden; background: #000; }
.mc-root *, .mc-root *::before, .mc-root *::after { box-sizing: border-box; }
.mc-root button, .mc-root select, .mc-root input { pointer-events: auto; touch-action: none; }
.mc-root button { color: inherit; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mc-root svg { display: block; width: 27px; height: 27px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; pointer-events: none; }
.mc-root button:focus-visible, .mc-root select:focus-visible, .mc-root input:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 4px; }
.mc-toolbar { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 7px; align-items: center; opacity: .72; }
.mc-tool, .mc-button.mc-pause {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 0; background: #0c0d0980;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.mc-tool svg, .mc-pause svg { width: 20px; height: 20px; }
.mc-tool::after, .mc-pause::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 1px; background: #f0eee42b; }
.mc-tool[aria-pressed="true"], .mc-tool[aria-expanded="true"] { color: var(--mc-accent); }
.mc-tool[aria-pressed="true"]::after, .mc-tool[aria-expanded="true"]::after { background: var(--mc-accent); }
.mc-button { position: relative; display: grid; place-items: center; isolation: isolate; padding: 0; border: 0; border-radius: 0; background: transparent; transition: color 80ms, transform 80ms; }
/* Nested polygons keep a thin outline without rounding the clipped corners. */
.mc-button::before, .mc-button::after { content: ''; position: absolute; z-index: -1; pointer-events: none; clip-path: var(--mc-cut); }
.mc-button::before { inset: 0; background: #efedde60; }
.mc-button::after { inset: 1px; background: linear-gradient(145deg, #0b0d08a6, #1719137d); transition: background 80ms; }
.mc-button svg { filter: drop-shadow(0 1px 1px #0009); }
.mc-button.mc-held { color: var(--mc-accent); transform: translateY(2px); }
.mc-button.mc-held::before { background: var(--mc-accent); }
.mc-button.mc-held::after { background: #3a2c0ca3; }
.mc-button.mc-pause::before { display: none; }
.mc-button.mc-pause::after { z-index: auto; inset: auto 8px 3px; clip-path: none; }
.mc-button.mc-pause.mc-held::after { background: var(--mc-accent); }
.mc-surface { opacity: var(--mc-opacity); transition: opacity 120ms; }
.mc-race, .mc-menu { position: absolute; inset: 0; }
.mc-root[data-mode="menu"] .mc-race, .mc-root[data-mode="race"] .mc-menu, .mc-root[data-hidden="true"] .mc-surface { display: none; }
.mc-steering { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; gap: 13px; transform: scale(var(--mc-scale)); transform-origin: bottom left; }
.mc-steering .mc-button { width: 84px; height: 80px; }
.mc-steering svg { width: 35px; height: 35px; stroke-width: 2.1; }
.mc-turn-left { --mc-cut: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 calc(100% - 13px), 0 13px); }
.mc-turn-right { --mc-cut: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%); }
.mc-drive { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); transform: scale(var(--mc-scale)); transform-origin: bottom right; }
.mc-utilities { display: flex; justify-content: flex-end; align-items: flex-end; gap: 13px; margin: 0 4px 13px 0; }
.mc-utilities .mc-button { width: 53px; height: 51px; --mc-cut: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.mc-utilities .mc-button::before { background: #efedde3d; }
.mc-utilities .mc-button::after { background: #11130c80; }
.mc-utilities .mc-held::before { background: var(--mc-accent); }
.mc-utilities .mc-held::after { background: #3a2c0ca3; }
.mc-nitro svg { width: 27px; height: 31px; transform: rotate(19deg); }
.mc-handbrake svg { width: 30px; height: 30px; }
.mc-pedals { display: flex; align-items: flex-end; gap: 13px; }
.mc-brake { width: 76px; height: 74px; }
.mc-throttle { width: 78px; height: 106px; }
.mc-brake svg { width: 37px; height: 37px; }
.mc-throttle svg { width: 43px; height: 62px; }
.mc-throttle::before { background: #efedde80; }
.mc-throttle::after { background: linear-gradient(145deg, #12150a96, #1d20136e); }
.mc-root[data-side="left"] .mc-steering { left: auto; right: max(22px, env(safe-area-inset-right)); transform-origin: bottom right; }
.mc-root[data-side="left"] .mc-drive { right: auto; left: max(22px, env(safe-area-inset-left)); transform-origin: bottom left; }
.mc-dpad { display: grid; position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); grid-template: repeat(3, 47px) / repeat(3, 47px); gap: 3px; transform: scale(var(--mc-scale)); transform-origin: bottom left; }
.mc-dpad .mc-button { --mc-cut: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.mc-dpad .mc-button svg { width: 23px; height: 23px; }
.mc-dpad [data-control="up"] { grid-area: 1/2; }
.mc-dpad [data-control="left"] { grid-area: 2/1; }
.mc-dpad [data-control="right"] { grid-area: 2/3; }
.mc-dpad [data-control="down"] { grid-area: 3/2; }
.mc-dpad i { grid-area: 2/2; align-self: center; justify-self: center; width: 3px; height: 3px; background: #efedde50; }
.mc-menu-actions { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 13px; transform: scale(var(--mc-scale)); transform-origin: bottom right; }
.mc-menu-actions .mc-button { width: 65px; height: 60px; }
.mc-menu-actions .mc-confirm { width: 82px; height: 76px; }
.mc-confirm svg { width: 34px; height: 34px; }
.mc-settings { position: absolute; pointer-events: auto; touch-action: auto; top: max(62px, calc(env(safe-area-inset-top) + 54px)); left: 50%; transform: translateX(-50%); width: min(290px, calc(100vw - 32px)); padding: 20px 22px 24px; background: #11120bf5; border-top: 2px solid var(--mc-accent); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.mc-settings-heading { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #dddacb; margin-bottom: 20px; }
.mc-settings label { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; color: #dedcce; }
.mc-settings select { padding: 7px; background: #ffffff0a; border: 1px solid #fff3; border-radius: 0; color: #edeade; font: inherit; }
.mc-settings select option { color: #11120b; }
.mc-settings input { width: 124px; accent-color: var(--mc-accent); }
.mc-settings[hidden] { display: none; }
@media (orientation: portrait) {
  .mc-steering { left: max(12px, env(safe-area-inset-left)); gap: 9px; }
  .mc-steering .mc-button { width: 64px; height: 70px; }
  .mc-steering svg { width: 29px; height: 29px; }
  .mc-drive { right: max(12px, env(safe-area-inset-right)); }
  .mc-pedals { gap: 9px; }
  .mc-brake { width: 58px; height: 66px; }
  .mc-throttle { width: 64px; height: 96px; }
  .mc-utilities { gap: 9px; margin-right: 0; }
  .mc-utilities .mc-button { width: 45px; height: 46px; }
  .mc-dpad { left: max(12px, env(safe-area-inset-left)); grid-template: repeat(3, 42px) / repeat(3, 42px); }
  .mc-menu-actions { right: max(12px, env(safe-area-inset-right)); gap: 9px; }
  .mc-menu-actions .mc-button { width: 53px; height: 57px; }
  .mc-menu-actions .mc-confirm { width: 64px; height: 71px; }
  .mc-root[data-side="left"] .mc-steering { right: max(12px, env(safe-area-inset-right)); }
  .mc-root[data-side="left"] .mc-drive { left: max(12px, env(safe-area-inset-left)); }
}
@media (max-height: 440px) and (orientation: landscape) {
  .mc-steering, .mc-drive, .mc-dpad, .mc-menu-actions { zoom: .9; }
  .mc-toolbar { top: max(7px, env(safe-area-inset-top)); gap: 5px; }
  .mc-tool, .mc-button.mc-pause { width: 36px; height: 36px; }
  .mc-settings { top: 52px; }
}
/* Keep separate thumb targets even with the largest preference on small phones. */
@media (max-width: 360px) and (orientation: portrait) {
  .mc-steering .mc-button { width: 54px; height: 65px; }
  .mc-brake { width: 52px; height: 62px; }
  .mc-throttle { width: 56px; height: 91px; }
  .mc-dpad { grid-template: repeat(3, 36px) / repeat(3, 36px); }
  .mc-menu-actions { gap: 8px; }
  .mc-menu-actions .mc-button { width: 46px; height: 53px; }
  .mc-menu-actions .mc-confirm { width: 56px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-root *, .mc-root *::before, .mc-root *::after { transition: none !important; }
}