:root {
  --ink: #071b2d;
  --navy: #102b43;
  --cream: #fff7e4;
  --yellow: #ffca28;
  --orange: #ff7a18;
  --red: #e9473f;
  --teal: #13b6a4;
  --green: #39c071;
  --blue: #3e95ff;
  --shadow: 0 16px 40px rgba(4, 18, 31, .24);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { font-family: var(--body); color: white; -webkit-tap-highlight-color: transparent; user-select: none; }
button { border: 0; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid white; outline-offset: 3px; }

#app, .screen { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen { display: none; overflow: hidden; }
.screen.active { display: block; animation: screenIn .35s ease both; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }

/* Loading */
#loading-screen { display: none; place-items: center; text-align: center; overflow: hidden; background: linear-gradient(#53c7ec 0 58%, #ffd65a 58%); }
#loading-screen.active { display: grid; }
#loading-screen::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 20%; height: 90px; background: #162c3a; transform: rotate(-2deg); box-shadow: 0 -8px #f7efe0, 0 -18px #348e79; }
.loading-sun { position: absolute; width: 170px; height: 170px; border-radius: 50%; top: 10%; right: 10%; background: #fff09b; box-shadow: 0 0 80px #fff3ad; }
.loading-auto { position: absolute; z-index: 2; font-size: clamp(70px, 12vw, 125px); bottom: 22%; left: -15%; filter: drop-shadow(0 12px 6px #0005); animation: loadingDrive 2s cubic-bezier(.2,.7,.3,1) forwards, autoBob .25s infinite alternate; }
@keyframes loadingDrive { to { left: 44%; } }
@keyframes autoBob { to { transform: translateY(-4px) rotate(-1deg); } }
.loading-brand { z-index: 3; margin-top: -100px; font: 900 clamp(38px, 8vw, 78px)/.82 var(--display); color: var(--ink); letter-spacing: -2px; transform: rotate(-2deg); text-shadow: 0 4px #fff7e4; }
.loading-brand small { display: block; width: max-content; margin: 0 auto 10px; padding: 6px 13px; border-radius: 7px; background: var(--ink); color: var(--yellow); font: 1000 clamp(10px, 1.4vw, 15px)/1 var(--body); letter-spacing: .16em; text-shadow: none; box-shadow: 4px 4px #e43f36; }
.loading-brand span { display: block; color: #e43f36; -webkit-text-stroke: 2px var(--ink); }
.loading-track { position: absolute; bottom: 9%; width: min(340px, 72vw); height: 12px; border-radius: 20px; padding: 2px; background: #0a2237; box-shadow: 0 4px #07152355; }
.loading-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8e1f, #ffe032); transition: width .18s; }
#loading-copy { position: absolute; bottom: 3%; margin: 0; color: var(--ink); font-weight: 900; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }

/* Home */
#home-canvas, #game-canvas, #results-confetti { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3,25,43,.74), transparent 52%, rgba(3,25,43,.12)), linear-gradient(0deg, rgba(5,23,38,.6), transparent 40%); }
.top-actions { position: absolute; z-index: 4; top: max(18px, env(safe-area-inset-top)); left: max(22px, env(safe-area-inset-left)); right: max(22px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; }
.profile-chip { display: flex; gap: 10px; align-items: center; padding: 7px 14px 7px 7px; border-radius: 18px; background: rgba(7,27,45,.78); box-shadow: inset 0 0 0 2px #ffffff22, 0 7px 18px #001b; backdrop-filter: blur(10px); }
.profile-chip .avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--yellow); box-shadow: inset 0 -4px #d99b10; font-size: 24px; }
.profile-chip span:last-child { display: flex; flex-direction: column; align-items: flex-start; }
.profile-chip b { font-size: 11px; letter-spacing: .09em; color: #b8d5e7; }
.profile-chip small { color: var(--yellow); font-weight: 900; font-size: 15px; }
.icon-actions { display: flex; gap: 10px; }
.icon-btn, .hud-btn { width: 46px; height: 46px; border-radius: 14px; background: rgba(7,27,45,.78); box-shadow: inset 0 0 0 2px #ffffff22, 0 7px 18px #001b; backdrop-filter: blur(10px); font-size: 21px; }
.icon-btn:hover, .hud-btn:hover { background: #183b54; transform: translateY(-2px); }
.home-content { position: absolute; z-index: 3; width: min(580px, 48vw); left: clamp(36px, 7vw, 105px); top: 51%; transform: translateY(-49%); }
.logo-wrap { transform: rotate(-1deg); filter: drop-shadow(0 8px 18px #0018); }
.studio-stamp { display: inline-flex; gap: 5px; align-items: center; margin: 0 0 9px 4px; padding: 7px 13px; border: 2px solid var(--yellow); border-radius: 9px; background: var(--ink); color: #fff9e7; box-shadow: 4px 4px 0 var(--orange), 0 0 22px #ffca2852; font-size: clamp(10px, 1.1vw, 14px); font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; }
.studio-stamp span { color: var(--yellow); }
.eyebrow { display: inline-block; margin: 0 0 8px; padding: 6px 13px; background: #fff4d5; color: #c74630; border-radius: 6px; font-weight: 1000; font-size: clamp(9px, 1vw, 13px); letter-spacing: .13em; text-transform: uppercase; box-shadow: 4px 4px var(--ink); }
.logo-wrap h1 { margin: 0; max-width: 560px; font: 900 clamp(58px, 7.3vw, 105px)/.76 var(--display); letter-spacing: -3px; color: #fff9e7; -webkit-text-stroke: 2px var(--ink); text-shadow: 5px 6px 0 var(--ink), 7px 9px 0 #ff7536; }
.logo-wrap h1 span { color: var(--yellow); }
.tagline { margin: 18px 0 24px 5px; color: #c9edee; font-weight: 900; font-size: 15px; letter-spacing: .09em; }
.menu-stack { width: min(480px, 100%); }
.menu-btn { position: relative; border-radius: 17px; background: linear-gradient(#21455f, #15344c); box-shadow: inset 0 2px #ffffff26, inset 0 -5px #081d2c66, 0 10px 24px #0018; transition: transform .15s, filter .15s; }
.menu-btn:hover { transform: translateY(-3px) scale(1.01); filter: brightness(1.1); }
.menu-btn:active { transform: translateY(1px) scale(.99); }
.menu-btn.primary { width: 100%; min-height: 68px; display: grid; grid-template-columns: 54px 1fr; grid-template-rows: 1fr 1fr; align-items: center; padding: 10px 22px; background: linear-gradient(135deg, #ffbf22, #ff781c); color: #152a37; box-shadow: inset 0 3px #fff3a3, inset 0 -6px #ca4c16, 0 11px 25px #0019; text-align: left; }
.menu-btn.primary span { grid-row: 1 / 3; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; color: white; background: #d94f25; box-shadow: inset 0 -4px #9c2c1c; }
.menu-btn.primary b { align-self: end; font: 900 22px/1 var(--display); letter-spacing: .03em; }
.menu-btn.primary small { align-self: start; font-size: 10px; font-weight: 900; opacity: .7; letter-spacing: .08em; }
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 10px; }
.menu-btn.compact { min-height: 67px; padding: 8px 4px; display: flex; flex-direction: column; justify-content: center; gap: 4px; align-items: center; }
.menu-btn.compact span { font-size: 21px; color: var(--yellow); }
.menu-btn.compact b { font-size: 9px; letter-spacing: .07em; }
.creator-credit { width: max-content; margin: 14px auto 0; padding: 6px 8px 6px 13px; border-radius: 12px; background: rgba(7,27,45,.84); color: #9ec5d2; box-shadow: inset 0 0 0 1px #ffffff24, 0 6px 16px #0017; font-size: 8px; font-weight: 1000; letter-spacing: .15em; }
.creator-credit a { display: inline-block; margin-left: 7px; padding: 7px 11px; border-radius: 8px; background: linear-gradient(135deg, var(--yellow), var(--orange)); color: var(--ink); text-decoration: none; box-shadow: inset 0 1px #fff2a1, 0 4px 10px #ff7a1855; font-size: 10px; transition: transform .15s, filter .15s; }
.creator-credit a:hover { transform: translateY(-2px); filter: brightness(1.1); }
.home-footer { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; color: #d9eef6; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-shadow: 0 2px 4px #001; }

/* Mode screen */
.panel-screen { background: #10324a; }
.panel-bg { position: absolute; inset: 0; opacity: .22; background: radial-gradient(circle at 18% 18%, #fdd051 0 2px, transparent 3px), linear-gradient(125deg, #175b73, #081b2d); background-size: 32px 32px, auto; }
.screen-header { position: relative; z-index: 2; width: min(1100px, calc(100% - 40px)); margin: max(24px, env(safe-area-inset-top)) auto 20px; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 18px; }
.back-btn { width: 48px; height: 48px; border-radius: 16px; background: #ffffff17; box-shadow: inset 0 0 0 2px #ffffff20; font-size: 27px; }
.screen-header p { margin: 0; color: #86b8c8; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; font-size: 10px; }
.screen-header h2 { margin: 2px 0 0; font: 900 clamp(30px, 5vw, 56px)/1 var(--display); letter-spacing: .02em; }
.wallet-pill { padding: 11px 17px; border-radius: 15px; background: #071b2d; color: var(--yellow); font-weight: 1000; box-shadow: inset 0 0 0 2px #ffffff1a; }
.mode-cards { position: relative; z-index: 2; width: min(1100px, calc(100% - 40px)); margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mode-card { position: relative; min-height: min(64vh, 530px); padding: 28px; border-radius: 28px; overflow: hidden; text-align: left; display: flex; flex-direction: column; align-items: flex-start; box-shadow: inset 0 0 0 2px #ffffff32, inset 0 -9px #0002, var(--shadow); transition: transform .2s; }
.mode-card:hover { transform: translateY(-8px) rotate(-.5deg); }
.mode-card::before { content: ""; position: absolute; inset: 0; opacity: .25; background: repeating-linear-gradient(-35deg, transparent 0 25px, white 26px 28px); }
.mode-card.career { background: linear-gradient(160deg, #4cc6cd, #167684); }
.mode-card.endless { background: linear-gradient(160deg, #8157e7, #3b2a9c); }
.mode-card.daily { background: linear-gradient(160deg, #ff9e32, #e54138); }
.mode-art { position: relative; display: grid; place-items: center; width: 100%; flex: 1; font-size: clamp(75px, 10vw, 135px); filter: drop-shadow(0 13px 5px #0003); transition: transform .2s; }
.mode-card:hover .mode-art { transform: scale(1.08) rotate(-3deg); }
.mode-label, .mode-card strong, .mode-card small, .mode-card i { position: relative; z-index: 1; }
.mode-label { padding: 6px 10px; margin-bottom: 8px; border-radius: 6px; background: #092136; color: var(--yellow); font-size: 10px; font-weight: 1000; letter-spacing: .12em; }
.mode-card strong { font: 900 clamp(23px, 2.2vw, 32px)/1 var(--display); max-width: 260px; }
.mode-card small { margin-top: 7px; color: #e7f7f9; font-weight: 700; }
.mode-card i { align-self: flex-end; margin-top: 20px; padding: 10px 16px; border-radius: 12px; background: #ffffffec; color: #112e43; font-style: normal; font-weight: 1000; font-size: 12px; box-shadow: 0 6px 0 #0003; }
.daily-badge { position: absolute; top: 19px; right: -35px; width: 140px; padding: 8px; text-align: center; transform: rotate(39deg); background: var(--yellow); color: #a12e20; font-size: 10px; font-weight: 1000; letter-spacing: .12em; }

/* Game HUD */
#game-screen { background: #88c65c; }
#game-canvas { touch-action: none; }
#rain-layer { display: none; position: absolute; inset: -30%; pointer-events: none; opacity: .36; background: repeating-linear-gradient(110deg, transparent 0 22px, #d9f5ff 23px 25px, transparent 26px 44px); animation: rain .4s linear infinite; }
#rain-layer.on { display: block; }
@keyframes rain { to { transform: translate(-40px, 75px); } }
#game-hud { position: absolute; inset: 0; pointer-events: none; }
.hud-left { position: absolute; top: max(15px, env(safe-area-inset-top)); left: max(15px, env(safe-area-inset-left)); display: flex; gap: 8px; }
.hud-pill { min-width: 82px; padding: 8px 13px 9px; border-radius: 15px; background: rgba(7,27,45,.9); box-shadow: inset 0 0 0 2px #ffffff20, 0 5px 14px #0016; backdrop-filter: blur(6px); }
.hud-pill small { display: block; color: #8db8c9; font-weight: 1000; font-size: 8px; letter-spacing: .11em; }
.hud-pill strong { font: 900 19px/1.2 var(--display); color: white; letter-spacing: .03em; }
.hud-pill.money strong { color: var(--yellow); }
.hud-pill.timer.danger { animation: timerPulse .55s infinite alternate; background: #c53a30; }
@keyframes timerPulse { to { transform: scale(1.08); } }
.hud-right { position: absolute; top: max(15px, env(safe-area-inset-top)); right: max(15px, env(safe-area-inset-right)); display: flex; align-items: flex-start; gap: 9px; }
#minimap { width: 112px; height: 112px; border-radius: 20px; background: rgba(7,27,45,.9); border: 3px solid #ffffff30; box-shadow: 0 7px 18px #0017; }
.hud-btn { pointer-events: auto; }
#combo-badge { position: absolute; top: 82px; left: 50%; transform: translateX(-50%) scale(0); padding: 6px 15px; border-radius: 13px; background: linear-gradient(#ffdd31, #ff7a18); color: #6c261a; text-align: center; box-shadow: 0 6px 0 #a63819, 0 10px 20px #0017; transition: transform .2s; }
#combo-badge.show { transform: translateX(-50%) scale(1) rotate(-2deg); }
#combo-badge span { display: block; font-size: 7px; font-weight: 1000; letter-spacing: .14em; }
#combo-badge b { font: 900 22px/1 var(--display); }
#gps-card { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); min-width: 250px; display: flex; align-items: center; gap: 11px; padding: 8px 15px; border-radius: 16px; background: rgba(7,27,45,.91); box-shadow: inset 0 0 0 2px #ffffff20, 0 6px 17px #0017; }
#gps-arrow { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; color: var(--yellow); background: #204761; transition: transform .1s; }
#gps-card div { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; }
#gps-card small { grid-column: 1 / 3; font-size: 7px; letter-spacing: .14em; color: #8db8c9; font-weight: 1000; }
#gps-card b { font-size: 11px; letter-spacing: .04em; }
#gps-card em { color: var(--yellow); font-style: normal; font-size: 10px; font-weight: 900; }
#mission-bar { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 270px)); min-height: 54px; display: flex; align-items: center; gap: 11px; padding: 9px 17px; border-radius: 18px; overflow: hidden; background: rgba(7,27,45,.92); box-shadow: inset 0 0 0 2px #ffffff1f, 0 8px 20px #0018; }
.mission-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; background: var(--yellow); color: #7a3a19; }
#mission-bar div { z-index: 1; }
#mission-bar small { display: block; color: #6e9db0; font-size: 7px; font-weight: 1000; letter-spacing: .14em; }
#mission-bar strong { display: block; font-size: 11px; }
#mission-progress { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--yellow), #ff7a18); transition: width .25s; }
#speech-bubble { position: absolute; top: 21%; left: 50%; transform: translate(-50%, 10px) scale(.85); max-width: min(330px, 80vw); opacity: 0; padding: 13px 18px; border-radius: 19px 19px 19px 4px; background: white; color: #19364b; font-weight: 1000; box-shadow: 0 8px 22px #0017; transition: .25s; }
#speech-bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#toast { position: absolute; top: 36%; left: 50%; transform: translate(-50%, 20px) scale(.9); opacity: 0; padding: 10px 17px; border-radius: 12px; background: #112f44e8; color: var(--yellow); font: 900 19px var(--display); letter-spacing: .04em; box-shadow: var(--shadow); transition: .22s; }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Touch controls */
#mobile-controls { display: none; position: absolute; inset: 0; pointer-events: none; }
.joystick { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); width: 118px; height: 118px; border-radius: 50%; pointer-events: auto; touch-action: none; background: #071b2d88; border: 3px solid #ffffff35; box-shadow: inset 0 0 28px #0019, 0 7px 18px #0016; }
.steer-joystick { left: max(25px, env(safe-area-inset-left)); }
.drive-joystick { right: max(25px, env(safe-area-inset-right)); }
.joystick-knob { position: absolute; z-index: 2; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(#ffdb3e, #ff8c1e); border: 3px solid #fff4a9; box-shadow: 0 6px 12px #0018, inset 0 -5px #ce4e19; }
#drive-knob { background: linear-gradient(#61e29a, #18a98e); border-color: #c9ffe2; box-shadow: 0 6px 12px #0018, inset 0 -5px #087b72; }
.control-caption { position: absolute; z-index: 3; left: 50%; top: 8px; transform: translateX(-50%); color: #fff; font-size: 7px; font-weight: 1000; letter-spacing: .15em; text-shadow: 0 2px 4px #001; }
.joystick-hints { position: absolute; inset: 15px; display: flex; align-items: center; justify-content: space-between; color: #ffffff70; font-size: 15px; }
.joystick-hints.vertical { flex-direction: column; }
.joystick-hints b { font-weight: 1000; }
.horn-btn, .nitro-btn { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); width: 61px; height: 61px; border-radius: 50%; pointer-events: auto; background: linear-gradient(#ff5751, #bd2d36); border: 3px solid #ff9a7f; box-shadow: 0 6px 0 #781c2d, 0 10px 18px #0018; font-size: 22px; }
.horn-btn { transform: translateX(-68px); }
.nitro-btn { transform: translateX(7px); background: linear-gradient(#5edaff, #4371e8); border-color: #c5f8ff; box-shadow: 0 6px 0 #28419f, 0 10px 18px #0018; }
.horn-btn span, .nitro-btn span { display: block; font-size: 7px; font-weight: 1000; letter-spacing: .09em; }
.horn-btn:active { transform: translate(-68px, 5px); box-shadow: 0 2px 0 #781c2d; }
.nitro-btn:active { transform: translate(7px, 5px); box-shadow: 0 2px 0 #28419f; }

/* Results */
.results-screen { background: radial-gradient(circle at 50% 20%, #2a6174, #071b2d 68%); }
.results-card { position: relative; z-index: 2; width: min(540px, calc(100% - 32px)); max-height: calc(100% - 30px); overflow-y: auto; scrollbar-width: none; margin: 15px auto; padding: 25px clamp(22px, 4vw, 44px); border-radius: 30px; text-align: center; background: linear-gradient(155deg, #fffaf0, #ffe9bd); color: #15354a; box-shadow: inset 0 0 0 3px #fff, 0 26px 60px #001c; }
.results-card::-webkit-scrollbar { display: none; }
.results-card > p { margin: 0; font-size: 9px; font-weight: 1000; letter-spacing: .18em; color: #d35435; }
.results-card h2 { margin: 2px 0 0; font: 900 clamp(37px, 7vw, 60px)/1 var(--display); }
.result-stars { margin: 2px 0 8px; color: #ffc11f; font-size: 33px; letter-spacing: 7px; text-shadow: 0 3px #cd6f19; }
.earnings-total { padding: 12px; border-radius: 17px; background: #14364b; color: white; box-shadow: inset 0 -5px #071b2d; }
.earnings-total small { display: block; color: #9dc0ca; font-size: 8px; font-weight: 1000; letter-spacing: .15em; }
.earnings-total strong { color: var(--yellow); font: 900 38px/1 var(--display); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 11px 0; }
.stats-grid div { padding: 9px 3px; border-radius: 13px; background: #f5dca9; }
.stats-grid span, .stats-grid strong, .stats-grid small { display: block; }
.stats-grid span { font-size: 18px; }
.stats-grid strong { font: 900 17px var(--display); }
.stats-grid small { font-size: 7px; color: #6e7c83; font-weight: 900; }
.bonus-list { min-height: 20px; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.bonus-list span { padding: 5px 9px; border-radius: 8px; background: #d9f0d2; color: #287e45; font-size: 8px; font-weight: 1000; }
.results-card .menu-btn.primary { min-height: 58px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.result-actions button { padding: 10px; border-radius: 11px; background: #dce6e8; color: #29465a; font-size: 9px; font-weight: 1000; }

/* Modal and pause */
.modal, .pause-overlay { display: none; position: absolute; inset: 0; z-index: 20; place-items: center; }
.modal.open, .pause-overlay.open { display: grid; animation: fade .2s both; }
@keyframes fade { from { opacity: 0; } }
.modal-backdrop, .pause-overlay { background: rgba(3,14,25,.78); backdrop-filter: blur(8px); }
.modal-backdrop { position: absolute; inset: 0; }
.modal-card { position: relative; width: min(680px, calc(100% - 28px)); max-height: min(720px, calc(100% - 28px)); overflow-y: auto; z-index: 2; border-radius: 28px; padding: 28px; color: #19374c; background: linear-gradient(150deg, #fffdf5, #ffecc5); box-shadow: 0 28px 80px #001d, inset 0 0 0 3px white; }
.modal-close { position: sticky; z-index: 3; float: right; top: 0; width: 38px; height: 38px; margin-bottom: -38px; border-radius: 12px; background: #15374d; color: white; font-size: 24px; }
.modal-title { margin: 0; color: #d55235; font-size: 9px; font-weight: 1000; letter-spacing: .16em; text-transform: uppercase; }
.modal-card h2 { margin: 3px 0 20px; font: 900 42px/1 var(--display); }
.modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.info-card { padding: 14px; border-radius: 15px; background: #f1dba9; }
.info-card b { display: block; margin-bottom: 4px; color: #d14b33; }
.info-card p { margin: 0; font-size: 12px; line-height: 1.45; color: #45606f; font-weight: 700; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 0; border-bottom: 1px solid #d3bb8d; }
.setting-row div b, .setting-row div small { display: block; }
.setting-row div small { color: #6c7b82; font-size: 10px; margin-top: 2px; }
.toggle { width: 55px; height: 30px; border-radius: 20px; padding: 4px; background: #9db0b4; transition: .2s; }
.toggle::after { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; background: white; box-shadow: 0 2px 5px #0004; transition: .2s; }
.toggle.on { background: var(--green); }
.toggle.on::after { transform: translateX(25px); }
.score-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 12px; margin-bottom: 7px; border-radius: 13px; background: #f2dcad; }
.score-rank { font: 900 25px var(--display); color: #d65335; }
.score-row b, .score-row small { display: block; }
.score-row small { font-size: 9px; color: #79878b; }
.score-row strong { color: #15374d; }
.shop-tabs { display: flex; gap: 7px; margin-bottom: 12px; }
.shop-tabs button { flex: 1; padding: 9px; border-radius: 10px; background: #d9caab; color: #536975; font-size: 10px; font-weight: 1000; }
.shop-tabs button.active { background: #173b51; color: white; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shop-item { position: relative; padding: 12px 8px; border-radius: 16px; text-align: center; background: #f2dcad; box-shadow: inset 0 -4px #d4b77f; }
.shop-item.selected { box-shadow: inset 0 0 0 3px var(--green), inset 0 -4px #92b66c; }
.shop-item .shop-art { display: block; font-size: 41px; filter: drop-shadow(0 6px 3px #0002); }
.shop-item .skin-swatch { display: block; width: 56px; height: 40px; margin: 4px auto 8px; border-radius: 18px 18px 8px 8px; border: 5px solid #19384b; box-shadow: inset 0 -10px #1116, 0 5px #0002; }
.shop-item b, .shop-item small { display: block; }
.shop-item b { font-size: 11px; }
.shop-item small { margin: 3px 0 8px; color: #687c85; font-size: 8px; }
.buy-btn { width: 100%; padding: 7px 4px; border-radius: 9px; background: #173b51; color: white; font-size: 8px; font-weight: 1000; }
.buy-btn.afford { background: linear-gradient(#ffb728, #e96226); }
.achievement-row { display: flex; align-items: center; gap: 12px; padding: 11px; margin-top: 7px; border-radius: 13px; background: #f3deb3; }
.achievement-row.locked { opacity: .48; filter: grayscale(1); }
.achievement-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #173b51; font-size: 22px; }
.achievement-row b, .achievement-row small { display: block; }
.achievement-row small { color: #6f7e85; font-size: 9px; }
.pause-overlay { z-index: 25; }
.pause-card { width: min(390px, calc(100% - 35px)); padding: 34px; border-radius: 29px; text-align: center; background: linear-gradient(150deg, #fffdf5, #ffe8b7); color: #15374d; box-shadow: 0 28px 80px #001c; }
.pause-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: auto; border-radius: 20px; background: #163a51; color: var(--yellow); font: 900 25px var(--display); transform: rotate(-3deg); }
.pause-card p { margin: 13px 0 0; color: #d75235; text-transform: uppercase; font-size: 9px; font-weight: 1000; letter-spacing: .15em; }
.pause-card h2 { margin: 2px 0 20px; font: 900 39px/1 var(--display); }
.pause-link { width: 100%; padding: 11px; margin-top: 7px; border-radius: 10px; background: #e2d1ae; color: #3a5361; font-size: 10px; font-weight: 1000; }
.app-toast { position: fixed; z-index: 100; left: 50%; bottom: max(25px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 11px 17px; border-radius: 12px; background: #112f44; color: var(--yellow); box-shadow: var(--shadow); font: 900 15px var(--body); animation: toastPop 1.5s ease both; }
@keyframes toastPop { 0% { opacity: 0; transform: translate(-50%, 15px) scale(.9); } 15%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px) scale(.96); } }

@media (pointer: coarse), (max-width: 900px) {
  #mobile-controls { display: block; }
  #mission-bar { bottom: max(22px, env(safe-area-inset-bottom)); width: min(410px, calc(100% - 380px)); }
}

@media (max-width: 760px) {
  .home-vignette { background: linear-gradient(0deg, rgba(3,22,38,.92), rgba(3,22,38,.08) 80%); }
  .home-content { width: calc(100% - 34px); left: 17px; top: auto; bottom: max(46px, calc(env(safe-area-inset-bottom) + 40px)); transform: none; text-align: center; }
  .logo-wrap h1 { max-width: 430px; margin: auto; font-size: clamp(49px, 15vw, 72px); }
  .eyebrow { margin-bottom: 8px; }
  .tagline { margin: 15px 0; }
  .studio-stamp { margin-bottom: 7px; }
  .menu-stack { margin: auto; }
  .menu-btn.primary { min-height: 60px; }
  .menu-grid { grid-template-columns: repeat(4, 1fr); }
  .home-footer { display: none; }
  .mode-cards { grid-template-columns: 1fr; gap: 11px; padding-bottom: 20px; max-height: calc(100% - 105px); overflow-y: auto; }
  .mode-card { min-height: 150px; padding: 19px; display: grid; grid-template-columns: 100px 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 14px; }
  .mode-art { grid-row: 1 / 5; font-size: 70px; }
  .mode-label { width: max-content; margin: 0 0 5px; }
  .mode-card strong { font-size: 23px; }
  .mode-card small { margin-top: 4px; }
  .mode-card i { align-self: end; justify-self: end; margin-top: 8px; }
  .screen-header { margin-bottom: 12px; grid-template-columns: 48px 1fr auto; gap: 9px; }
  .screen-header h2 { font-size: 32px; }
  .wallet-pill { padding: 9px; font-size: 12px; }
  #gps-card { top: max(72px, calc(env(safe-area-inset-top) + 72px)); min-width: 210px; padding: 6px 10px; }
  .hud-left { gap: 4px; }
  .hud-pill { min-width: 63px; padding: 6px 8px; }
  .hud-pill strong { font-size: 15px; }
  #minimap { width: 70px; height: 70px; border-radius: 14px; }
  .hud-btn { width: 40px; height: 40px; border-radius: 12px; }
  #mission-bar { display: flex; bottom: max(142px, calc(env(safe-area-inset-bottom) + 142px)); width: min(350px, calc(100% - 28px)); min-height: 47px; }
  .joystick { width: 100px; height: 100px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .steer-joystick { left: max(18px, env(safe-area-inset-left)); }
  .drive-joystick { right: max(18px, env(safe-area-inset-right)); }
  .joystick-knob { width: 48px; height: 48px; }
  .horn-btn, .nitro-btn { width: 54px; height: 54px; bottom: max(24px, env(safe-area-inset-bottom)); font-size: 19px; }
  .horn-btn { transform: translateX(-59px); }
  .nitro-btn { transform: translateX(5px); }
  .horn-btn:active { transform: translate(-59px, 5px); }
  .nitro-btn:active { transform: translate(5px, 5px); }
  #combo-badge { top: 125px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .results-card { padding-top: 18px; }
  .modal-grid { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-height: 650px) and (orientation: landscape) {
  .top-actions { top: 9px; }
  .home-content { top: 50%; left: 4vw; }
  .logo-wrap h1 { font-size: 58px; }
  .tagline { margin: 11px 0; }
  .menu-btn.primary { min-height: 55px; }
  .menu-btn.compact { min-height: 52px; }
  .mode-card { min-height: calc(100vh - 120px); padding: 18px; }
  .mode-art { font-size: 70px; }
  .results-card { padding-top: 14px; }
  .result-stars { font-size: 24px; }
  .earnings-total { padding: 8px; }
  .stats-grid { margin: 7px 0; }
}

@media (max-width: 420px) {
  .profile-chip { padding-right: 9px; }
  .profile-chip .avatar { width: 36px; height: 36px; }
  .icon-btn { width: 40px; height: 40px; }
  .logo-wrap h1 { font-size: 50px; }
  .creator-credit { margin-top: 9px; }
  .menu-btn.primary b { font-size: 19px; }
  .menu-btn.compact b { font-size: 7px; }
  .joystick { width: 90px; height: 90px; }
  .steer-joystick { left: max(12px, env(safe-area-inset-left)); }
  .drive-joystick { right: max(12px, env(safe-area-inset-right)); }
  .joystick-knob { width: 43px; height: 43px; }
  .horn-btn, .nitro-btn { width: 48px; height: 48px; font-size: 17px; }
  .horn-btn { transform: translateX(-53px); }
  .nitro-btn { transform: translateX(5px); }
  .horn-btn:active { transform: translate(-53px, 5px); }
}