@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&family=Bungee&display=swap');
:root{color-scheme:dark;font-family:Barlow,Arial,sans-serif;color:#f5f2e9;background:#111c23}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #ffb764;outline-offset:5px}[hidden]{display:none!important}#game{width:100%;height:100svh;min-height:540px;position:relative;overflow:hidden}#scene{display:block;width:100%;height:100%}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,12,18,.7),transparent 68%),linear-gradient(0deg,rgba(3,9,13,.5),transparent 35%,transparent 75%,rgba(3,9,13,.35))}header{position:absolute;top:30px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center}.brand{font:800 26px 'Barlow Condensed',sans-serif;letter-spacing:1px;color:white;text-decoration:none;line-height:1}.brand span{color:#ff6a36}.brand small{display:block;font:500 10px Barlow,sans-serif;letter-spacing:3px;margin-top:9px}.topright{display:flex;align-items:center;gap:24px;font-size:12px;letter-spacing:2px}.topright button{border:1px solid #ffffff40;background:#10212b50;color:white;padding:10px 12px;font-size:11px;letter-spacing:1px}.panel{position:absolute;left:8%;top:23%;max-width:580px}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:700;color:#ffc99c}.eyebrow span{display:inline-block;width:7px;height:7px;background:#ff6a36;margin-right:10px}h1{font:800 clamp(65px,7vw,108px)/.87 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:24px 0}h1 em{font-style:normal;color:#ff7744}.panel p{line-height:1.7;font-size:18px;color:#e0dcd4}.menuactions{display:flex;gap:10px;margin-top:29px}.primary{border:0;background:#ff713e;color:#171b1c;padding:18px 25px;font-size:14px;font-weight:800;letter-spacing:1px;min-width:215px}.primary:hover{background:#ff925f}.primary span{margin-left:35px;font-size:20px}select{background:#0d1e27b0;border:1px solid #ffffff45;color:white;padding:12px;font-size:12px;letter-spacing:1px}.instructions{display:flex;gap:22px;margin-top:35px}.instructions span{color:#ff956e;font-size:12px}.instructions b{display:block;color:#cccfcf;font-size:12px;font-weight:500;max-width:115px;line-height:1.6;margin-top:6px}.fiction{display:block;margin-top:25px;color:#a0a9ac;font-size:11px}.progress{position:absolute;left:40px;right:40px;top:99px;height:3px;background:#ffffff30}.progress>div{height:100%;width:0;background:#ff7b45}.leftstats{position:absolute;top:135px;left:40px}.label{display:block;font-size:11px;letter-spacing:2px;color:#d1d6d6;margin-bottom:6px}.leftstats strong{font:600 35px 'Barlow Condensed',sans-serif}.leftstats small{font-size:17px;color:#c2c9ca}.row{display:flex;gap:38px;margin-top:25px}.row b{font:600 24px 'Barlow Condensed',sans-serif}#armor{color:#ffa46e}.speedometer{position:absolute;right:45px;bottom:55px;width:190px;text-align:right}.speedometer>strong{font:600 105px/.95 'Barlow Condensed',sans-serif}.speedometer>span{display:block;letter-spacing:4px;font-size:12px}.nitro{height:6px;margin-top:18px;background:#ffffff30;transform:skewX(-20deg)}.nitro>div{height:100%;background:#83e8ee;width:40%}.speedometer small{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;margin-top:8px}.drivehelp{position:absolute;bottom:35px;left:40px;font-size:10px;letter-spacing:1px;color:#dadede}.drivehelp i{display:inline-block;height:10px;border-left:1px solid #ffffff50;margin:0 13px}#notice{position:absolute;top:24%;left:50%;transform:translateX(-50%);text-align:center;font:700 28px 'Barlow Condensed',sans-serif;color:#ffe3ac;text-shadow:0 2px 8px #000;white-space:nowrap}.modal{position:absolute;inset:0;display:grid;place-items:center;background:#05121bd9;backdrop-filter:blur(8px);text-align:center}.modal>div{width:min(420px,90%)}h2{font:800 70px 'Barlow Condensed',sans-serif;margin:12px 0}.modal p{line-height:1.7;color:#ccd6da}.modal button{display:block;width:100%;margin-top:10px}.secondary{border:1px solid #ffffff40;background:transparent;color:white;padding:14px;font-size:12px;letter-spacing:1px}#touch{position:absolute;bottom:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:16px}#touch>div{display:flex;gap:8px}#touch button{min-width:52px;height:55px;background:#0b2029b8;border:1px solid #ffffff60;color:white;touch-action:none;user-select:none;font-size:11px}#touch .boost{background:#e46a31bd}#damage{position:absolute;inset:0;background:#f43b29;opacity:0;pointer-events:none}#loading{position:absolute;inset:0;display:grid;place-content:center;background:#10212b;font-size:12px;letter-spacing:4px}#loading span{height:2px;background:#ff713e;margin-top:18px;animation:loading 1s infinite alternate}@keyframes loading{to{transform:scaleX(.2)}}@media(pointer:coarse){.drivehelp{display:none}.speedometer{bottom:95px}}@media(max-width:700px){header{top:22px;left:22px;right:22px}.topright{gap:9px}.topright>span{display:none}.panel{left:7%;top:21%;right:7%}h1{font-size:72px}.panel p{font-size:16px}.instructions{gap:20px;margin-top:24px}.fiction{margin-top:18px}.progress{left:22px;right:22px}.leftstats{left:22px;top:120px}.speedometer{right:22px;width:135px}.speedometer>strong{font-size:78px}.row{gap:20px}.drivehelp{left:22px;font-size:9px}.drivehelp i{margin:0 5px}.menuactions{margin-top:20px}.primary{min-width:185px;padding:16px 20px}#notice{top:35%;font-size:22px}}@media(max-height:650px) and (min-width:701px){.panel{top:20%}h1{font-size:70px}.instructions{margin-top:20px}.fiction{margin-top:12px}.panel p{font-size:16px;margin:10px 0}}

.panel{top:18%;max-width:560px}h1{font-size:clamp(60px,6.4vw,92px);margin:18px 0}.panel>p{margin:10px 0}.missionpicker{margin-top:18px;max-width:430px}.missionpicker label{display:block;font-size:11px;letter-spacing:2px;color:#ffa777;margin-bottom:7px}.missionpicker select{width:100%;font-size:14px}.missionpicker p{font-size:13px;line-height:1.5;margin:8px 0;color:#d2d8da}.menuactions{margin-top:16px}.instructions{margin-top:20px}.fiction{margin-top:15px}.missionhud{position:absolute;top:125px;right:40px;max-width:330px;text-align:right;background:#10212b99;padding:12px 16px;border-right:3px solid #ff713e}.missionhud b{display:block;font-size:16px}.missionhud span{display:block;font-size:12px;line-height:1.6;margin-top:6px;color:#e2d8cc}@media(max-width:700px){#game{min-height:720px}.panel{top:15%;}h1{font-size:62px}.instructions{display:none}.missionhud{top:240px;left:22px;right:auto;text-align:left;max-width:290px;padding:8px 12px}.missionhud b{font-size:14px}#notice{top:45%}}@media(max-height:750px) and (min-width:701px){.panel{top:18%}h1{font-size:60px}.instructions{display:none}.missionpicker{margin-top:12px}.panel>p{font-size:16px}.fiction{margin-top:10px}} 

/* Crime-thriller HUD: keep the central road and crossing area unobstructed. */
:root{background:#090d13;color:#e9e9e6}.brand span,h1 em{color:#ee3e4e}.eyebrow,.missionpicker label{color:#ed7480}.primary{background:#d93247;color:#fff}.primary:hover{background:#ed465d}.panel{border-left:3px solid #d93247;padding-left:24px}.vignette{background:linear-gradient(90deg,#050911b3,transparent 60%),linear-gradient(0deg,#050911b0,transparent 25%,transparent 82%,#050911b0)}.missionpicker select,.topright button{background:#0c101bd9}.progress>div{background:#ef4256}.policehud{position:absolute;right:40px;top:118px;text-align:right;width:220px;padding:10px 14px;background:#090e1cce;border-right:3px solid #df4057}.policehud>span{display:block;color:#ec4c61;font-size:25px;letter-spacing:7px}.policehud b{display:block;font-size:11px;letter-spacing:1px;margin-top:4px}.pursuitbar{height:3px;background:#ffffff20;margin-top:10px}.pursuitbar>div{height:100%;width:0;background:#ee3e4e}.missionhud{top:auto;bottom:70px;left:40px;right:auto;max-width:300px;text-align:left;border-right:0;border-left:2px solid #bfc6d2;background:#090e1cce;padding:10px 12px}#notice{top:auto;bottom:155px;left:40px;right:auto;transform:none;max-width:290px;text-align:left;font:600 14px/1.5 Barlow,Arial,sans-serif;white-space:normal;background:#090e1ce8;border-left:3px solid #ed465d;padding:9px 12px;pointer-events:none}#notice:empty{display:none}.modal{background:#070a12de}.modal h2{color:#f14b5e}.fiction{max-width:430px;line-height:1.5}.leftstats{background:#090e1c99;padding:10px 12px}.drivehelp{font-size:11px}.speedometer{background:#090e1c88;padding:12px}.missionhud span{font-size:12px}
@media(max-width:700px){header{top:16px;left:16px;right:16px}.brand{font-size:21px}.brand small{font-size:9px;letter-spacing:1px}.topright button{padding:9px 7px}.progress{top:79px}.leftstats{top:91px;left:16px;padding:7px 9px}.leftstats strong{font-size:25px}.leftstats .row{margin-top:10px;gap:16px}.row b{font-size:18px}.policehud{top:91px;right:16px;width:155px;padding:7px 9px}.policehud>span{font-size:21px;letter-spacing:3px}.policehud b{font-size:9px}.missionhud{top:auto;bottom:84px;left:16px;width:175px;max-width:45%;padding:7px 9px}.missionhud b{font-size:12px}.missionhud span{font-size:11px;line-height:1.4}#notice{top:204px;bottom:auto;left:16px;max-width:170px;font-size:12px;padding:6px 8px}.speedometer{width:116px;bottom:84px;right:16px}.speedometer>strong{font-size:62px}.panel{padding-left:15px;left:5%;right:5%}.fiction{font-size:11px}}

@media(max-width:700px){#game{min-height:0;height:100svh}.panel{max-height:calc(100svh - 120px);overflow-y:auto;top:100px;padding-bottom:15px}.panel h1{font-size:56px}}

.leftstats{border:1px solid #ffffff25;border-top:3px solid #e75267;border-radius:4px;padding:16px 20px;backdrop-filter:blur(8px)}.leftstats strong{display:block;font-size:44px;font-variant-numeric:tabular-nums}.leftstats strong small{display:block;font:600 10px Barlow,sans-serif;letter-spacing:2px;color:#b2c4d1;margin-top:3px}.leftstats .row{padding-top:12px;margin-top:14px;border-top:1px solid #ffffff20}.speedometer{--speed-angle:0deg;width:186px;height:186px;border-radius:50%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#101925 62%,transparent 63%),conic-gradient(from 225deg,#f05063 0deg var(--speed-angle),#ffffff26 var(--speed-angle) 270deg,transparent 270deg);border:1px solid #ffffff20;box-shadow:0 8px 30px #0005}.speedometer>strong{font-size:69px}.speedometer>span{font-size:10px;letter-spacing:3px}.speedometer .nitro{width:105px;margin-top:12px;height:4px}.speedometer small{width:105px;font-size:9px}.missionpicker p{line-height:1.55}@media(max-width:700px){.leftstats{padding:9px 12px}.leftstats strong{font-size:30px}.leftstats .row{margin-top:8px;padding-top:8px}.speedometer{width:132px;height:132px;right:12px}.speedometer>strong{font-size:46px}.speedometer .nitro,.speedometer small{width:78px}.speedometer .nitro{margin-top:8px}.speedometer>span{font-size:9px}}

/* Cartoon crime-book skin: chunky ink outlines, offset depth, and evidence-red accents. */
button,select{border:3px solid #07080d!important;border-radius:10px!important;box-shadow:0 6px 0 #07080d,0 10px 22px #0008!important;font-family:'Barlow Condensed',Impact,sans-serif!important;font-weight:900!important;text-transform:uppercase;letter-spacing:1.4px;transform:translateY(0) rotate(-.5deg);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
button:hover:not(:disabled),select:hover:not(:disabled){filter:brightness(1.15) saturate(1.15);transform:translateY(-2px) rotate(.4deg);box-shadow:0 8px 0 #07080d,0 13px 25px #0009!important}
button:active:not(:disabled){transform:translateY(5px) rotate(0);box-shadow:0 1px 0 #07080d,0 4px 9px #0008!important}
button:disabled,select:disabled{filter:grayscale(1);opacity:.48;cursor:not-allowed}
.primary{background:linear-gradient(145deg,#ff5a69,#b71732 68%)!important;color:#fff!important;text-shadow:2px 2px 0 #6e0c1e;border-color:#16050b!important}
.secondary{background:linear-gradient(145deg,#303845,#151922)!important;color:#f3f0e6!important;text-shadow:2px 2px 0 #000;border-color:#080a10!important}
.topright button{background:linear-gradient(145deg,#313b4a,#11151f)!important;color:#fff!important;padding:9px 13px}
#touch button{background:linear-gradient(145deg,#394454,#141924)!important;border-color:#080a10!important;box-shadow:0 5px 0 #06070a,0 8px 16px #0008!important;font-size:13px!important}
#touch .boost{background:linear-gradient(145deg,#ffbd31,#d34a19)!important;color:#1b0900!important;text-shadow:1px 1px 0 #ffd878}
.missionpicker select{background:linear-gradient(145deg,#2d3542,#111620)!important;color:#fff;padding:13px 45px 13px 14px}
.panel,.modal>div{filter:drop-shadow(8px 10px 0 #06070bb8)}
.brand,h1,h2{-webkit-text-stroke:1px #09090c;text-shadow:4px 4px 0 #09090c,7px 7px 0 #8f1428}
.eyebrow{background:#10141de8;border:2px solid #05060a;border-left:6px solid #e43850;display:inline-block;padding:7px 11px;transform:rotate(-1deg);box-shadow:4px 4px 0 #05060a}
.progress{height:7px;border:2px solid #07080c;background:#161b26;transform:skewX(-18deg)}
.leftstats{width:178px;padding:9px 12px;border:3px solid #07080d;border-top:5px solid #e33c53;border-radius:10px;background:linear-gradient(145deg,#202735e8,#0b0e15e8);box-shadow:6px 6px 0 #07080d,10px 12px 24px #0008;transform:rotate(-1deg)}
.leftstats>.label{font-size:9px;margin-bottom:2px}.leftstats strong{font-size:29px;line-height:1}.leftstats strong small{font-size:8px;margin-top:2px}.leftstats .row{margin-top:8px;padding-top:7px;gap:16px}.leftstats .row .label{font-size:8px}.leftstats .row b{font-size:17px}
.policehud,.missionhud,#notice{border-radius:7px;border-color:#07080d!important;box-shadow:5px 5px 0 #07080d;background:linear-gradient(145deg,#1e2431e8,#090c13ed)!important}
.speedometer{border:4px solid #07080d;box-shadow:0 8px 0 #07080d,0 14px 30px #0008;outline:3px solid #d8334b;outline-offset:-10px}
@media(max-width:700px){button,select{border-width:2px!important;box-shadow:0 4px 0 #07080d,0 7px 14px #0008!important}.leftstats{width:143px;padding:7px 9px}.leftstats strong{font-size:24px}.leftstats .row{gap:10px}.leftstats .row b{font-size:15px}.brand,h1,h2{text-shadow:3px 3px 0 #09090c,5px 5px 0 #8f1428}}

/* Keep the story subtitle readable below the title on every viewport. */
.panel>p:first-of-type{display:block!important;position:relative;z-index:3;width:max-content;max-width:min(430px,92vw);margin:14px 0 16px;padding:8px 13px;color:#fff!important;font-size:18px!important;font-weight:700;line-height:1.45!important;background:#090d15e6;border-left:5px solid #ef4058;border-radius:0 7px 7px 0;text-shadow:2px 2px 0 #000;box-shadow:5px 5px 0 #05060a}
@media(max-width:700px){.panel>p:first-of-type{font-size:15px!important;margin:10px 0 12px;padding:6px 9px}.panel h1{margin-bottom:8px}}

/* Embedded game pages can be shorter than a standalone desktop window. */
@media(min-width:701px){.panel{top:110px;right:5%;max-height:calc(100svh - 130px);overflow-y:auto;padding:0 14px 20px 0}}

/* Responsive embedded viewport: menus scroll independently of the road. */
html,body{height:100%;overflow:hidden}
#game{height:100%;min-height:0}
header{top:16px;left:20px;right:20px;gap:12px}
.panel{top:85px;bottom:15px;max-height:none;overflow:auto;overscroll-behavior:contain;padding-bottom:20px}
.panel>p:first-of-type{max-width:100%}
.modal{overflow:auto;padding:16px}
.modal>div{max-height:100%;overflow:auto;max-width:100%}
#touch{gap:8px;left:12px;right:12px;bottom:14px}
#touch>div{gap:6px}
#touch button{min-width:44px;min-height:44px}
@media(max-width:380px){
 .brand{font-size:17px}.brand small{font-size:7px}.topright{gap:5px}.topright button{padding:8px!important;font-size:9px}
 .leftstats{left:10px;width:132px}.policehud{right:10px;width:135px}.policehud>span{letter-spacing:2px}
 #touch button{min-width:42px;padding:5px;font-size:11px!important}
 .panel{left:12px;right:12px;padding-left:10px}.eyebrow{font-size:9px;letter-spacing:1px}
}
@media(max-height:500px){
 header{top:10px;left:12px;right:12px}.brand{font-size:18px}.brand small{display:none}.topright>span{display:none}
 .panel{top:64px;bottom:10px;left:5%;right:5%;max-height:none}.panel h1{font-size:38px;margin:8px 0}
 .panel>p:first-of-type{font-size:13px!important;margin:8px 0}.missionpicker{margin-top:10px}.missionpicker p{font-size:12px}
 .instructions{display:none}.primary{padding:12px 18px}.fiction{font-size:10px}
 .progress{top:57px;left:12px;right:12px}.leftstats{top:70px;left:12px;width:130px;padding:5px 8px}.leftstats strong{font-size:22px}.leftstats .row{margin-top:4px;padding-top:4px}
 .policehud{top:70px;right:12px;width:145px;padding:5px 8px}.policehud>span{font-size:16px}.policehud b{font-size:8px}.pursuitbar{margin-top:5px}
 .missionhud{left:12px;bottom:70px;padding:5px 8px;max-width:180px}.missionhud b{font-size:10px}.missionhud span{display:none}
 .speedometer{right:12px;bottom:72px;width:85px;height:85px;padding:6px;outline-offset:-6px}.speedometer>strong{font-size:28px}.speedometer>span{font-size:7px}.speedometer .nitro{width:50px;margin-top:5px}.speedometer small{display:none}
 #notice{top:70px;bottom:auto;left:50%;max-width:30%;transform:translateX(-50%);font-size:10px;padding:5px}
 #touch button{height:44px}.drivehelp{display:none}.modal h2{font-size:30px;margin:8px 0}.modal p{font-size:12px}.modal button{padding:10px}
}

/* The host frame can be as short as Bike Race's 340px minimum. Keep the important
   controls readable while progressively removing secondary copy as vertical space tightens. */
@media (min-height:501px) and (max-height:620px) {
  header { top: 12px; }
  .panel { top: 76px; bottom: 8px; }
  .panel h1 { font-size: 48px; margin: 8px 0 10px; }
  .panel>p:first-of-type { font-size: 14px !important; margin: 7px 0 10px; }
  .missionpicker { margin-top: 10px; }
  .missionpicker p { font-size: 12px; line-height: 1.35; }
  .instructions, .fiction { display: none; }
  .menuactions { margin-top: 10px; }
  .primary { padding: 11px 18px; }
  .leftstats { top: 70px; padding: 6px 9px; }
  .leftstats strong { font-size: 24px; }
  .policehud { top: 70px; padding: 6px 9px; }
  .missionhud { bottom: 64px; }
  .speedometer { bottom: 62px; width: 105px; height: 105px; }
  .speedometer>strong { font-size: 48px; }
  .drivehelp { display: none; }
}

@media (max-height:400px) {
  #game { min-height: 0; }
  header { top: 8px; }
  .panel { top: 52px; bottom: 5px; left: 4%; right: 4%; padding-left: 10px; }
  .panel h1 { font-size: 32px; margin: 4px 0 6px; }
  .panel>p:first-of-type { font-size: 11px !important; margin: 4px 0 6px; padding: 4px 7px; }
  .missionpicker { margin-top: 5px; }
  .missionpicker label { font-size: 8px; }
  .missionpicker select { padding: 7px 10px; font-size: 10px; }
  .missionpicker p { display: none; }
  .menuactions { margin-top: 7px; }
  .primary { min-width: 145px; padding: 8px 12px; font-size: 11px; }
  .brand { font-size: 16px; }
  .brand small { display: none; }
  .topright button { padding: 6px !important; font-size: 8px; }
  .progress { top: 42px; }
  .leftstats { top: 52px; left: 8px; width: 112px; }
  .leftstats strong { font-size: 18px; }
  .leftstats .row { display: none; }
  .policehud { top: 52px; right: 8px; width: 116px; }
  .policehud>span { font-size: 14px; }
  .policehud b { font-size: 7px; }
  .missionhud { bottom: 50px; left: 8px; padding: 4px 6px; }
  .missionhud b { font-size: 9px; }
  .speedometer { bottom: 48px; right: 8px; width: 72px; height: 72px; }
  .speedometer>strong { font-size: 22px; }
  #touch { bottom: 7px; }
  #touch button { min-width: 36px; height: 36px; min-height: 36px; font-size: 9px !important; }
}

/* Start screen layout: keep the hierarchy intentional and the briefing readable. */
#menu.panel {
  width: min(560px, 88vw);
  max-width: none;
  padding: 0 0 24px 26px;
  border-left-width: 4px;
}
#menu h1 br { display: none; }
#menu h1 em::before { content: ' '; }
#menu h1 { white-space: nowrap; }
/* The surrounding Playaby page already identifies the game; avoid repeating the title inside the frame. */
#menu h1, header .brand { display: none; }
header .brand small { display: none; }
#menu .eyebrow { margin-bottom: 4px; }
#menu h1 { margin: 14px 0 14px; }
#menu > p:first-of-type {
  width: auto;
  max-width: 440px;
  margin: 0 0 22px;
  padding: 10px 14px;
  font-size: 17px !important;
  line-height: 1.45 !important;
}
#menu .missionpicker {
  width: min(430px, 100%);
  margin: 0;
  padding: 14px 16px 13px;
  border: 1px solid #ffffff1c;
  border-radius: 10px;
  background: #070b14b8;
  box-shadow: 4px 4px 0 #05060a;
}
#menu .missionpicker label { margin-bottom: 8px; }
#menu .missionpicker p { margin: 10px 0 0; }
#menu .menuactions { margin-top: 18px; }
#menu .instructions { margin-top: 22px; }
#menu .fiction { display: block; margin-top: 16px; }

@media (max-width:700px) {
  #menu.panel { width: auto; padding-left: 16px; }
  #menu h1 { margin: 10px 0 12px; }
  #menu > p:first-of-type { margin-bottom: 15px; font-size: 14px !important; }
  #menu .missionpicker { padding: 11px 12px; }
  #menu .menuactions { margin-top: 14px; }
  #menu .fiction { display: none; }
  #menu h1 { font-size: clamp(34px, 12vw, 56px); }
}

@media (max-height:500px) {
  #menu.panel { padding-bottom: 8px; }
  #menu > p:first-of-type { margin-bottom: 9px; }
  #menu .missionpicker { padding: 8px 10px; }
}

@media (max-height:400px) {
  #menu > p:first-of-type { font-size: 11px !important; padding: 4px 7px; }
  #menu h1 { font-size: 32px; margin: 4px 0 6px; }
  #menu .missionpicker { padding: 7px 9px; }
}

/* Keep the wanted-level / police scanner card at the very top of the play HUD. */
.policehud { top: 10px !important; z-index: 50; }
@media (max-width:700px) { .policehud { top: 6px !important; z-index: 50; } }

/* Slightly smaller speed readout so the dial feels less crowded. */
.speedometer > strong { font-size: 28px; line-height: .9; max-width: 100%; white-space: nowrap; }
@media (max-width:700px) { .speedometer > strong { font-size: 22px; } }

/* Keep the nitro meter and percentage above all other HUD layers. */
.speedometer { z-index: 60; overflow: visible; }
.speedometer .nitro, .speedometer small { position: relative; z-index: 61; visibility: visible; opacity: 1; }

/* Consistent arcade typography across the HUD and menus. */
body, button, select, .topright, .label, .drivehelp, .policehud b,
.missionhud span, .speedometer small, #notice, .panel p, .fiction {
  font-family: 'Barlow', Arial, sans-serif;
}
h1, h2, .brand, .speedometer > strong, .policehud > span,
.missionhud b, .leftstats strong, .row b, .eyebrow, .primary {
  font-family: 'Barlow Condensed', Impact, sans-serif;
}
.policehud b, .missionhud span, .drivehelp, .label, .speedometer small {
  font-size: 11px;
}
@media (max-width:700px) {
  .policehud b, .missionhud span, .drivehelp, .label, .speedometer small { font-size: 9px; }
}

/* Funky gangster display treatment for the main game identity. */
h1, h2, .brand, .policehud > span, .missionhud b, .leftstats strong,
.row b, .speedometer > strong, .primary, .eyebrow {
  font-family: 'Bungee', 'Barlow Condensed', Impact, sans-serif;
  letter-spacing: .03em;
}

/* Keep the loading screen the same size as the game viewport. */
#loading { min-height: 540px; height: 100%; z-index: 100; }
@media (max-width:700px) { #loading { min-height: 420px; } }
@media (max-height:500px) { #loading { min-height: 260px; } }

/* Match the iframe height exactly from the first loading frame through gameplay. */
#game { height: 640px !important; min-height: 640px !important; }
@media (max-width:700px) { #game { height: 600px !important; min-height: 600px !important; } }
@media (max-height:500px) { #game { height: 420px !important; min-height: 420px !important; } }