:root{color-scheme:dark;--ink:#eef5ff;--muted:#9fb0c8;--panel:#172235;--accent:#41e6a1;--yellow:#ffd166;--danger:#ff5964}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0b1220;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none}body{overflow-x:hidden}.app{width:min(1180px,100%);margin:auto;padding:10px}.hud{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:8px}.hud div{background:linear-gradient(145deg,#19263a,#121c2c);border:1px solid #2a3a51;border-radius:11px;padding:7px;text-align:center;box-shadow:0 4px 12px #0004}.hud small{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}.hud strong{font-size:1.1rem}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.brand{font-weight:900;font-size:1.15rem}.toolbar button,.panel button{border:1px solid #344862;background:#1b2a40;color:var(--ink);border-radius:9px;padding:8px 12px;font-weight:700;cursor:pointer}.toolbar button:hover{background:#263b58}.game-shell{position:relative;border-radius:16px;overflow:hidden;border:2px solid #31445e;background:#26323b;box-shadow:0 14px 45px #0008}canvas{display:block;width:100%;aspect-ratio:5/3;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#07101dcc;backdrop-filter:blur(5px);z-index:3;padding:15px}.overlay.hidden{display:none}.panel{width:min(550px,95%);max-height:100%;overflow-y:auto;padding:28px;text-align:center;border:1px solid #405575;border-radius:20px;background:linear-gradient(155deg,#19273d,#0e1727);box-shadow:0 20px 70px #000}.eyebrow{color:var(--accent);font-weight:900;letter-spacing:.14em;font-size:.74rem}.panel h1{font-size:clamp(2rem,6vw,3.4rem);margin:.2em}.panel p{color:#c5d2e4;line-height:1.5}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0;text-align:left;color:#b8c7da;font-size:.85rem}.instructions span{background:#101b2c;padding:9px;border-radius:8px}kbd{background:#344761;padding:2px 6px;border-radius:4px;color:white}.panel .primary{background:var(--accent);color:#072319;border:0;font-size:1.05rem;padding:12px 28px}.toast{position:absolute;left:50%;top:15%;transform:translate(-50%,-20px);opacity:0;background:#10251fe8;border:1px solid var(--accent);border-radius:30px;padding:10px 20px;font-weight:900;pointer-events:none;transition:.25s;z-index:2}.toast.show{opacity:1;transform:translate(-50%,0)}.touch-controls{display:none;justify-content:space-between;gap:20px;margin-top:10px;touch-action:none}.touch-controls>div{display:flex;gap:10px}.touch-controls button{width:74px;height:62px;border-radius:14px;border:1px solid #48617f;background:#1b2a40;color:white;font-size:1.5rem;font-weight:bold;box-shadow:0 4px 0 #080e18;user-select:none;-webkit-user-select:none}.touch-controls button.active{transform:translateY(3px);box-shadow:0 1px 0 #080e18;background:#2d705b}.touch-controls small{display:block;font-size:.55rem}.hint{text-align:center;color:var(--muted);font-size:.78rem;margin:8px}.impact{animation:impact .2s 2}@keyframes impact{50%{filter:sepia(1) saturate(5);transform:translateX(3px)}}
@media (hover:none),(max-width:800px){.touch-controls{display:flex}.app{padding:6px}.toolbar{font-size:.85rem}.toolbar button{padding:7px;font-size:0}.toolbar button::first-letter{font-size:1rem}.hud{grid-template-columns:repeat(4,1fr)}.hud div{padding:4px}.hud small{font-size:.55rem}.hud strong{font-size:.9rem}.game-shell{border-radius:10px;overflow:visible}.overlay{position:fixed;inset:0;width:100vw;max-width:100vw;height:100vh;height:100dvh;z-index:9999;padding:10px;padding-top:max(10px,env(safe-area-inset-top));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(10px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left));overflow-x:hidden;overflow-y:auto}.panel{box-sizing:border-box;min-width:0;width:calc(100vw - 20px);max-width:500px;max-height:none;margin:auto;padding:18px;overflow:visible}.panel h1{max-width:100%;overflow-wrap:anywhere;font-size:clamp(1.65rem,8.5vw,2.7rem)}.panel p{max-width:100%;overflow-wrap:break-word;margin:8px 0;font-size:.92rem}.eyebrow{margin:0}.instructions{min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin:12px 0;font-size:.75rem}.instructions span{min-width:0;padding:7px}.panel .primary{display:block;width:100%;margin-top:12px;min-height:50px}.toast{z-index:10}}
@media (max-width:420px){.instructions{grid-template-columns:1fr}.instructions span{padding:5px 8px}.panel{padding:14px}}
@media (max-height:650px) and (orientation:landscape){.hud{grid-template-columns:repeat(7,1fr)}.hud div{padding:2px}.toolbar{margin-bottom:3px}.touch-controls{position:fixed;inset:auto 8px 8px;z-index:5;pointer-events:none}.touch-controls button{pointer-events:auto;opacity:.75}.hint{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Controle móvel inspirado em gamepads, mantendo áreas de toque amplas. */
.touch-controls{position:relative;align-items:center;gap:12px;padding:12px 16px;border:1px solid #344862;border-radius:30px;background:linear-gradient(155deg,#24344d,#111b2b);box-shadow:inset 0 2px 2px #ffffff12,0 9px 18px #0008}
.touch-controls>div{gap:0}.gamepad-side{display:flex;flex-direction:column;align-items:center}.control-title{color:#8295ae;font-size:.55rem;font-weight:900;letter-spacing:.14em;margin-bottom:5px}.gamepad-grip{display:flex!important;flex-direction:column;align-items:center;color:#60748e;font-size:.55rem;font-weight:900;letter-spacing:.1em}.gamepad-grip b{color:#41e6a1;font-size:.65rem}.dpad{position:relative;display:grid;grid-template-columns:54px 30px 54px;align-items:center;height:70px}.dpad-bar{position:absolute;left:5px;right:5px;height:48px;border-radius:13px;background:#090f19;box-shadow:inset 0 3px 5px #000,0 3px 0 #34445b}.dpad button{position:relative;z-index:2;width:54px;height:48px;border:0;background:linear-gradient(#3c4d64,#202d40);color:#dce9f8;font-size:1.25rem;box-shadow:inset 0 1px #ffffff24,0 4px 0 #080d15}.dpad button:first-of-type{border-radius:12px 4px 4px 12px}.dpad button:last-of-type{border-radius:4px 12px 12px 4px}.dpad-center{position:relative;z-index:3;width:30px;height:48px;background:#28374c;box-shadow:inset 0 1px #ffffff18}.action-buttons{display:flex;align-items:center;gap:13px;transform:rotate(-12deg)}.action{display:flex;flex-direction:column;align-items:center;gap:5px}.action button{width:58px;height:58px;border-radius:50%;border:3px solid #0b111c;color:#fff;font-size:1.25rem;box-shadow:inset 0 3px 3px #ffffff45,inset 0 -4px 4px #0004,0 5px 0 #080d15,0 7px 12px #0008}.action-gas button{background:linear-gradient(145deg,#4beaab,#149b69)}.action-brake button{background:linear-gradient(145deg,#ff7180,#c72e43)}.action small{display:block;font-size:.5rem;font-weight:900;color:#b8c7da;transform:rotate(12deg);white-space:nowrap}.touch-controls button.active{transform:translateY(4px);filter:brightness(1.25);box-shadow:inset 0 2px 5px #0007,0 1px 0 #080d15}.dpad button.active{transform:translateY(3px)}
@media (max-width:480px){.touch-controls{padding:10px 9px;border-radius:24px}.gamepad-grip{display:none!important}.dpad{grid-template-columns:48px 24px 48px}.dpad button{width:48px}.dpad-center{width:24px}.action-buttons{gap:8px}.action button{width:54px;height:54px}}

/* Refinamento móvel: dois módulos amplos, como um controle portátil. */
@media (hover:none),(max-width:800px){
  .touch-controls{display:flex;min-height:142px;margin:10px 4px 4px;padding:7px 10px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  .gamepad-grip{display:none!important}
  .gamepad-side{position:relative;width:148px;height:126px;justify-content:center;border:1px solid #354963;border-radius:46px;background:radial-gradient(circle at 45% 35%,#2d405b,#111b2b 72%);box-shadow:inset 0 2px 3px #ffffff18,0 7px 14px #0008}
  .control-title{position:absolute;top:7px;margin:0;font-size:.48rem;color:#8ca0ba}
  .dpad{grid-template-columns:55px 25px 55px;height:58px;margin-top:8px}
  .dpad-bar{left:1px;right:1px;height:50px;border-radius:16px}
  .dpad button{width:55px;height:50px;font-size:1.35rem}
  .dpad-center{width:25px;height:50px}
  .action-buttons{gap:10px;margin-top:12px;transform:none}
  .action{position:relative;gap:4px}
  .action button{width:60px;height:60px;font-size:1.35rem}
  .action small{position:static;min-height:12px;font-size:.47rem;line-height:1.1;transform:none}
  .touch-controls button{touch-action:none;-webkit-tap-highlight-color:transparent}
}
@media (max-width:360px){
  .touch-controls{padding-inline:2px}
  .gamepad-side{width:134px}
  .dpad{grid-template-columns:51px 24px 51px}
  .dpad button{width:51px}
  .dpad-center{width:24px}
  .action button{width:56px;height:56px}
}