@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;800;900&family=Space+Mono:wght@400;700&display=swap");
#install {
  padding: 15px 20px;
  background: #45f4e8;
  color: #071014;
  clip-path: polygon(0 0,94% 0,100% 30%,100% 100%,0 100%);
}
.gate-pending>:not(#paywall){visibility:hidden}
#paywall{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:26px;background:#03060af2;overflow:auto}
#paywall[hidden]{display:none}.paywall-scan{position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,#45f4e812,transparent 34%,#ff2f8a12 72%,transparent),repeating-linear-gradient(0deg,#fff0 0 3px,#45f4e807 4px)}
.paywall-card{position:relative;width:min(880px,94vw);padding:34px;border:1px solid #45f4e84f;border-top:3px solid var(--cyan);background:#071018ed;box-shadow:0 28px 90px #000,0 0 60px #45f4e812}
.paywall-card h1{margin:0;font-size:clamp(54px,8vw,104px);line-height:.78;font-style:italic;letter-spacing:-.045em}.paywall-card h1 span{color:transparent;-webkit-text-stroke:1px var(--cyan)}
.paywall-lede{max-width:700px;margin:25px 0 20px;color:#aab8be;font-size:19px;line-height:1.35}.paywall-offer{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;padding:20px;border:1px solid #ffffff1c;background:#04090e}
.paywall-offer small,.paywall-offer em{display:block;font:8px "Space Mono";letter-spacing:1.6px;color:#7f9198}.paywall-offer strong{display:block;margin:5px 0 2px;font:900 38px "Barlow Condensed";color:var(--cyan)}.paywall-offer em{font-style:normal;color:var(--amber)}
.plan-picker{display:grid;gap:8px;margin:0;padding:0;border:0}.plan-picker label{position:relative;display:block;cursor:pointer}.plan-picker input{position:absolute;opacity:0;pointer-events:none}.plan-picker span{display:block;padding:12px;border:1px solid #ffffff20;background:#0b151d}.plan-picker input:checked+span{border-color:var(--cyan);box-shadow:inset 3px 0 var(--cyan),0 0 22px #45f4e812}.plan-best span:after{content:"BESTER WERT";position:absolute;right:8px;top:8px;padding:3px 5px;background:var(--pink);color:#fff;font:7px "Space Mono";letter-spacing:1px}
.paywall-offer ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;color:#dce7e9}.paywall-offer li:before{content:"◇";margin-right:9px;color:var(--pink)}
.paywall-consent{display:flex;align-items:flex-start;gap:10px;margin-top:16px;color:#aab8be;font:10px/1.45 "Space Mono"}.paywall-consent input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--cyan)}
#subscribe{margin-top:18px;padding:14px 18px;background:var(--cyan);color:#061014;clip-path:polygon(0 0,95% 0,100% 30%,100% 100%,0 100%)}#subscribe span{margin-left:28px}.paywall-secondary{margin:18px 0 0 10px;padding:13px 16px;background:#111b25;color:#fff;border:1px solid #ffffff30}
#restoreAccess{margin-top:15px;padding:14px;border-left:2px solid var(--amber);background:#04080c}#restoreAccess label{display:block;margin-bottom:7px;font:8px "Space Mono";letter-spacing:2px;color:var(--amber)}#restoreAccess>div{display:flex;gap:8px}#restoreAccess input{flex:1;min-width:0;padding:12px;background:#0d1720;color:#fff;border:1px solid #ffffff2e;font:12px "Space Mono";text-transform:uppercase}#restoreAccess button{padding:10px 16px;background:var(--amber);color:#071014}
#paywallStatus{min-height:18px;margin:12px 0 0;color:var(--pink);font:10px "Space Mono"}.paywall-card>footer{margin-top:12px;color:#667981;font:8px "Space Mono"}.paywall-card a{color:#a7c9cc}
#memberStatus{display:inline-block;margin-bottom:14px;padding:6px 9px;border:1px solid #45f4e866;color:var(--cyan);font:8px "Space Mono";letter-spacing:1.5px}
#pause {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: #05070ce8;
  display: grid;
  place-items: center;
  text-align: center;
  backdrop-filter: blur(8px);
}
#pause[hidden] {
  display: none;
}
#sideMission{position:fixed;z-index:5;left:28px;top:205px;width:244px;padding:11px 14px;border-left:3px solid var(--amber,#f2a93b)}
#sideMission h3{margin:5px 0 2px;font-size:18px;color:#fff}
#sideMission p{margin:0;color:#aeb9bf;font-size:14px}
#mapToggle{position:fixed;z-index:6;right:28px;top:204px;padding:8px 12px;background:#071018cc;color:#dce8eb;border:1px solid #45f4e866;font:700 11px "Space Mono";letter-spacing:1px}
#mapToggle:hover,#mapToggle:focus{border-color:var(--cyan);color:var(--cyan)}
#worldMapOverlay{position:fixed;inset:0;z-index:10;background:#020509f2;backdrop-filter:blur(12px);padding:22px}
#worldMapOverlay[hidden]{display:none}
.world-map-shell{height:100%;display:grid;grid-template-rows:auto 1fr auto;max-width:1480px;margin:auto;border:1px solid #45f4e83b;background:#060b12;box-shadow:0 24px 90px #000}
#worldMapOverlay .world-map-header{position:static;inset:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #45f4e83b;background:#09121b;pointer-events:auto}
.world-map-header small,.side-quest-panel>small{font:10px "Space Mono";letter-spacing:3px;color:var(--cyan)}
.world-map-header h2{margin:2px 0 0;font-size:32px;line-height:1}
#mapClose{padding:10px 14px;background:#111b25;color:#fff;border:1px solid #ffffff30}
.world-map-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 430px}
.world-map-canvas-wrap{position:relative;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,#102a34,#03070b 70%)}
#worldMap{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#worldMap.dragging{cursor:grabbing}
.world-map-zoom{position:absolute;right:14px;bottom:14px;display:flex;gap:6px}
.world-map-zoom button{width:42px;height:42px;background:#071018e8;color:#fff;border:1px solid #45f4e866;font-size:22px}
.side-quest-panel{min-height:0;display:flex;flex-direction:column;padding:18px;background:#081019;border-left:1px solid #45f4e83b}
.side-quest-panel h3{margin:4px 0 2px;font-size:32px}
.side-quest-panel>p{margin:0 0 14px;color:#84939b;line-height:1.4}
#sideQuestList{min-height:0;overflow:auto;display:grid;gap:8px;padding-right:4px}
.quest-story{flex:0 0 auto;margin:0 0 12px;border:1px solid #45f4e82f;background:#050b11;box-shadow:0 12px 32px #0008;overflow:hidden}
.quest-keyart{position:relative;height:142px;overflow:hidden;background:#071018}
.quest-keyart:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,#050b11 100%),repeating-linear-gradient(0deg,#fff0 0 3px,#45f4e808 4px);pointer-events:none}
.quest-keyart img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.92) contrast(1.08)}
.quest-keyart span,.quest-keyart b{position:absolute;z-index:1;bottom:9px;font:700 8px "Space Mono";letter-spacing:1.4px}
.quest-keyart span{left:11px;color:#d7e5e7}.quest-keyart b{right:11px;padding:4px 7px;background:#f2a93b;color:#071018}
.quest-story-copy{padding:11px 13px 12px}.quest-story-copy>small{display:block;margin-bottom:3px;color:var(--cyan);font:7px "Space Mono";letter-spacing:2px}.quest-story-copy>strong{display:block;margin-bottom:7px;font-size:15px;letter-spacing:.5px}.quest-story-copy p{margin:0 0 8px;color:#9aa9af;font-size:12px;line-height:1.28}.quest-story-copy footer{display:flex;align-items:end;justify-content:space-between;padding-top:7px;border-top:1px solid #ffffff16}.quest-story-copy footer span{font:7px "Space Mono";letter-spacing:1.5px;color:#75878e}.quest-story-copy footer b{font:800 17px "Space Mono";color:var(--amber)}
.quest-story-empty{display:grid;gap:4px;padding:28px 14px;text-align:center}.quest-story-empty b{color:var(--cyan)}.quest-story-empty span{color:#809198}
.side-quest-item{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:start;width:100%;padding:11px;text-align:left;background:#0d1720;color:#eaf2f3;border:1px solid #ffffff18}
.side-quest-item:hover,.side-quest-item:focus,.side-quest-item.tracked{border-color:var(--amber);background:#172029}
.side-quest-item.completed{opacity:.46;border-color:#45f4e84a}
.side-quest-item .quest-index{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--amber);color:var(--amber);font:700 11px "Space Mono"}
.side-quest-item b{display:block;font-size:17px;letter-spacing:.4px}.side-quest-item small{display:block;margin-top:2px;color:#7e8c94;font:9px "Space Mono"}.side-quest-item em{font:9px "Space Mono";font-style:normal;color:var(--cyan)}
.side-quest-panel footer{display:flex;flex-wrap:wrap;gap:11px;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff18;font:8px "Space Mono";color:#8f9da4}.side-quest-panel footer span{display:flex;align-items:center;gap:5px}.side-quest-panel footer i{display:block;width:9px;height:9px;border:2px solid}.legend-player{border-color:#fff!important;transform:rotate(45deg)}.legend-main{border-color:var(--cyan)!important}.legend-side{border-color:var(--amber)!important;border-radius:50%}
.world-map-help{padding:9px 16px;border-top:1px solid #45f4e82e;background:#071018;color:#71828b;font:9px "Space Mono";letter-spacing:1px}
#speedMode{display:block;margin-top:2px;color:#7f9198;font:7px "Space Mono";font-style:normal;letter-spacing:.8px;white-space:nowrap}#speedMode.override{color:var(--pink);text-shadow:0 0 10px #ff2f8a99}
#pause p {
  font: 11px "Space Mono";
  letter-spacing: 4px;
  color: #45f4e8;
}
#pause h2 {
  font-size: 58px;
  margin: 10px;
}
#pause main{width:min(560px,calc(100vw - 32px));padding:28px;border-top:3px solid var(--cyan)}
.pause-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-bottom:22px}
#resume,
#restartCheckpoint,
#audioToggle,
#resetCamera {
  padding: 12px 24px;
  background: #fff;
  color: #05070c;
}
#manageSubscription,#signOut{padding:12px 24px;background:#101923;color:#fff;border:1px solid #45f4e855}
#restartCheckpoint,#audioToggle,#resetCamera{background:#101923;color:#fff;border:1px solid #ffffff35}
#restartCheckpoint:disabled{opacity:.38;cursor:not-allowed}
#pause label{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:14px;margin:12px auto;max-width:390px;text-align:left;font:10px "Space Mono";letter-spacing:1px;color:#84919c}
#pause input,#pause select{width:100%;accent-color:var(--cyan);background:#101923;color:#fff;border:1px solid #ffffff30;padding:8px}
#dialogue {
  position: fixed;
  z-index: 7;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 56px));
  padding: 13px 18px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 13px;
  border-bottom: 2px solid var(--cyan);
}
#dialogue[hidden] {
  display: none;
}
#speakerMark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--cyan);
  color: #071014;
  font: 900 17px "Space Mono";
  clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 0 100%);
}
#dialogue p {
  margin: 3px 0 0;
  color: #e6ecee;
  font-size: 17px;
  letter-spacing: 0.3px;
}
#choice {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: #03060acd;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}
#choice[hidden] {
  display: none;
}
#choice main {
  width: min(800px, 92vw);
  padding: 30px;
  border-top: 3px solid var(--pink);
}
#choice h2 {
  font-size: clamp(36px, 6vw, 70px);
  line-height: 0.9;
  margin: 8px 0 13px;
}
#choice main > p:not(.eyebrow) {
  color: #aeb9bf;
  max-width: 650px;
  font-size: 18px;
}
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}
.choice-grid button {
  text-align: left;
  padding: 18px;
  background: #0b121a;
  color: #fff;
  border: 1px solid #ffffff2c;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  transition: 0.2s;
}
.choice-grid button:hover,
.choice-grid button:focus {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px #0008;
}
.choice-grid kbd {
  grid-row: 1/4;
  font-size: 20px;
  align-self: start;
}
.choice-grid small {
  color: var(--cyan);
}
.choice-grid b {
  font-size: 24px;
}
.choice-grid span {
  color: #88959d;
  font: 12px "Space Mono";
  line-height: 1.5;
}
.end-copy {
  max-width: 540px !important;
  margin: 24px auto 0 !important;
  color: #aeb9bf !important;
  font: 16px "Barlow Condensed" !important;
  letter-spacing: 0.4px !important;
}
@media (pointer: coarse), (max-width: 760px) {
  #paywall{padding:12px}.paywall-card{padding:22px 18px}.paywall-card h1{font-size:52px}.paywall-lede{font-size:16px;margin:18px 0 14px}.paywall-offer{grid-template-columns:1fr;gap:14px;padding:14px}.paywall-offer strong{font-size:36px}.paywall-consent{font-size:9px}#subscribe,.paywall-secondary{width:100%;margin:10px 0 0}#restoreAccess>div{display:grid}#restoreAccess button{width:100%}
  #dialogue {
    bottom: 118px;
    width: calc(100vw - 28px);
  }
  .choice-grid {
    grid-template-columns: 1fr;
  }
  #choice main {
    padding: 20px;
  }
  #choice h2 {
    font-size: 36px;
  }
  .choice-grid button {
    padding: 13px;
  }
  #sideMission{top:206px;left:14px;width:min(290px,calc(100vw - 28px))}
  #mapToggle{right:14px;top:auto;bottom:226px}
  #worldMapOverlay{padding:0}
  .world-map-shell{border:0}
  .world-map-layout{grid-template-columns:1fr;grid-template-rows:minmax(46vh,1fr) minmax(220px,38vh)}
  .side-quest-panel{border-left:0;border-top:1px solid #45f4e83b;padding:12px}
  .side-quest-panel>p,.side-quest-panel footer,.world-map-help{display:none}
  .quest-story{display:grid;grid-template-columns:42% 1fr;margin-bottom:8px}.quest-keyart{height:126px}.quest-story-copy{padding:8px 10px}.quest-story-copy p{font-size:10px;margin-bottom:5px}.quest-story-copy>strong{font-size:12px}.quest-story-copy footer{display:flex}.quest-story-copy>small:nth-of-type(2),.quest-story-copy>small:nth-of-type(2)+p{display:none}
  .world-map-header{padding:10px 12px}.world-map-header h2{font-size:25px}
}
:root {
  --cyan: #45f4e8;
  --pink: #ff2f8a;
  --amber: #f2a93b;
  --ink: #05070c;
  --glass: rgba(5, 8, 14, 0.72);
}
* {
  box-sizing: border-box;
}
[hidden]{display:none!important}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink) url("./art/aurelia-street.webp") center center / cover no-repeat fixed;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
}
canvas#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
#grain:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 150px 28px #02050a99;mix-blend-mode:multiply}
header {
  position: fixed;
  top: 24px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.brand {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  transform: skew(-7deg);
}
.brand b {
  background: #fff;
  color: #080a10;
  padding: 2px 6px;
}
.brand span {
  color: var(--cyan);
  margin-left: 5px;
}
#wanted {
  font-family: "Space Mono";
  color: #52606a;
  font-size: 20px;
  letter-spacing: 5px;
  text-shadow: 0 0 12px var(--pink);
}
#wanted.hot {
  color: var(--pink);
}
.glass {
  background: linear-gradient(
    125deg,
    rgba(12, 17, 25, 0.88),
    rgba(10, 15, 22, 0.54)
  );
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 18px 50px #0008;
  backdrop-filter: blur(9px);
}
#mission {
  position: fixed;
  left: 28px;
  top: 78px;
  width: 275px;
  padding: 16px 18px;
  border-left: 3px solid var(--cyan);
}
small {
  font: 10px "Space Mono";
  letter-spacing: 1.6px;
  color: #84919c;
}
#mission h2 {
  margin: 3px 0 2px;
  font-size: 24px;
  letter-spacing: 1px;
}
#mission p {
  margin: 0 0 11px;
  color: #cbd0d3;
  font-size: 14px;
}
.bar {
  height: 3px;
  background: #273039;
}
.bar i {
  display: block;
  height: 100%;
  width: 6%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  transition: 0.4s;
}
#stats {
  position: fixed;
  right: 28px;
  top: 248px;
  bottom: auto;
  z-index: 5;
  width: 252px;
  padding: 12px 13px;
  display: grid;
  grid-template-columns: 1fr 58px 62px;
  gap: 8px;
  overflow:hidden;
}
#stats small{font-size:8px;letter-spacing:1px;white-space:nowrap}
#stats strong {
  display: block;
  font: 900 30px "Barlow Condensed";
}
#stats em {
  font: 10px "Space Mono";
  font-style: normal;
  color: #8c98a0;
}
.nitro {
  height: 7px;
  background: #273039;
  margin-top: 10px;
}
.nitro i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
}
.integrity{height:7px;background:#273039;margin-top:10px}.integrity i{display:block;height:100%;width:100%;background:var(--cyan);box-shadow:0 0 12px #45f4e888;transition:width .18s,background .18s}.integrity i.danger{background:var(--pink)}
#map {
  position: fixed;
  right: 28px;
  top: 72px;
  border: 1px solid #ffffff30;
  background: #080d13cc;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
}
#prompt {
  display: none;
  position: fixed;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 16px;
  background: #090d13db;
  border: 1px solid #ffffff30;
  font: 600 14px "Space Mono";
  letter-spacing: 1px;
}
kbd {
  font: 700 11px "Space Mono";
  padding: 3px 7px;
  background: #fff;
  color: #090b10;
  border-radius: 2px;
  box-shadow: 0 2px 0 #82909a;
}
#toast {
  position: fixed;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 800 30px "Barlow Condensed";
  letter-spacing: 4px;
  color: var(--cyan);
  text-shadow: 0 0 20px #45f4e8aa;
  opacity: 0;
  transition: 0.3s;
}
#diagnostics{position:fixed;left:14px;bottom:145px;z-index:8;padding:7px 10px;background:#050a10d9;border:1px solid #45f4e84f;color:#8afdf5;font:9px "Space Mono";letter-spacing:.6px;pointer-events:none}
.show {
  opacity: 1 !important;
}
#start,
#end {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #05070c;
  display: grid;
  place-items: center;
}
#start .start-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 70% 45%,
    #112d39 0,
    #080c12 38%,
    #05070c 68%
  );
  overflow: hidden;
}
#start .start-bg:after {
  content: "";
  position: absolute;
  width: 45vw;
  height: 130vh;
  right: 10%;
  top: -15%;
  background: linear-gradient(90deg, transparent, #45f4e817, transparent);
  transform: rotate(23deg);
  filter: blur(5px);
}
#start main {
  position: relative;
  width: min(880px, 86vw);
}
.eyebrow {
  font: 12px "Space Mono";
  letter-spacing: 5px;
  color: var(--cyan);
  margin: 0 0 13px;
}
#start h1,
#end h1 {
  font-size: clamp(76px, 14vw, 170px);
  line-height: 0.71;
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.05em;
  font-style: italic;
  text-shadow: 8px 8px 0 #101a22;
}
#start h1 span {
  color: transparent;
  -webkit-text-stroke: 2px var(--cyan);
  filter: drop-shadow(0 0 18px #45f4e84c);
}
.lede {
  font-size: 21px;
  color: #aab5bc;
  max-width: 390px;
  margin: 35px 0 26px;
}
button {
  border: 0;
  font: 800 17px "Barlow Condensed";
  letter-spacing: 1.2px;
  cursor: pointer;
}
#play,
#continue,
#again {
  padding: 15px 20px;
  background: var(--cyan);
  color: #071014;
  clip-path: polygon(0 0, 94% 0, 100% 30%, 100% 100%, 0 100%);
}
.start-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
#continue{padding:15px 20px;background:#101923;color:#fff;border:1px solid #ffffff35;clip-path:polygon(0 0,94% 0,100% 30%,100% 100%,0 100%)}
#play span {
  margin-left: 45px;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 35px;
  color: #7f8b93;
  font: 10px "Space Mono";
}
#start footer {
  position: absolute;
  bottom: 22px;
  font: 9px "Space Mono";
  letter-spacing: 3px;
  color: #52606a;
}
#end {
  background: radial-gradient(circle, #101a23, #05070c 68%);
  text-align: center;
}
#end[hidden] {
  display: none;
}
#end p {
  color: var(--cyan);
  font: 12px "Space Mono";
  letter-spacing: 5px;
}
#end h1 {
  font-size: clamp(68px, 11vw, 130px);
  line-height: 0.8;
}
.score {
  display: flex;
  justify-content: center;
  gap: 45px;
  margin: 35px;
}
.score span {
  font: 11px "Space Mono";
  color: #7e8b95;
}
.score b {
  display: block;
  color: #fff;
  font-size: 22px;
  margin-top: 5px;
}
#touch {
  display: block;
}
.stick {position:fixed;z-index:6;bottom:20px;width:112px;height:112px;border-radius:50%;border:1px solid #ffffff3b;background:radial-gradient(circle,#1b2b36a8 0 27%,#09111ab8 29% 67%,#45f4e81c 69%);touch-action:none;user-select:none;box-shadow:inset 0 0 28px #0009,0 8px 28px #0008;transition:border-color .12s,box-shadow .12s}.stick.active{border-color:#45f4e8aa;box-shadow:inset 0 0 28px #0009,0 0 26px #45f4e833}.stick i{position:absolute;left:36px;top:36px;width:40px;height:40px;border-radius:50%;background:#d9f7f5d9;border:2px solid var(--cyan);box-shadow:0 0 18px #45f4e877;transform:translate3d(0,0,0);will-change:transform}.stick b{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font:700 9px "Space Mono";color:#91a6af;pointer-events:none}#moveStick{left:18px}#lookStick{right:18px}.face-buttons{position:fixed;z-index:7;right:28px;bottom:146px;width:108px;height:92px;pointer-events:none}.face-buttons button,.triggers button{position:absolute;width:42px;height:42px;border-radius:50%;color:#fff;background:#101923dc;border:1px solid #ffffff4a;touch-action:none;pointer-events:auto;font:800 15px "Space Mono"}.face-buttons .btn-y{left:33px;top:0;color:#f7d84b}.face-buttons .btn-b{right:0;top:27px;color:#ff5964}.face-buttons .btn-a{left:33px;bottom:0;color:#69dc75}.face-buttons .btn-x{left:0;top:27px;color:#63aef5}.triggers{position:fixed;z-index:7;left:18px;right:18px;bottom:148px;pointer-events:none}.triggers button{width:52px;height:34px;border-radius:7px;pointer-events:auto;font-size:11px}.triggers [data-k="brake"]{left:0}.triggers [data-k="throttle"]{right:118px;color:var(--cyan);border-color:#45f4e888}
@media (pointer: coarse), (max-width: 760px) {
  #touch {
    display: block;
  }
  header {
    top: 14px;
    left: 14px;
    right: 14px;
  }
  #mission {
    left: 14px;
    top: 52px;
    width: min(230px, calc(100vw - 160px));
    padding: 10px 12px;
  }
  #mission h2 {
    font-size: 19px;
  }
  #map {
    right: 14px;
    top: 52px;
    width: 100px;
    height: 100px;
  }
  #stats {
    right: 14px;
    top: 164px;
    bottom: auto;
    width: 190px;
    padding: 8px 10px;
    grid-template-columns:1fr 46px 50px;
    gap:6px;
  }
  .controls {
    display: none;
  }
  #start main {
    width: 88vw;
  }
  #start h1 {
    font-size: 22vw;
  }
  .lede {
    font-size: 17px;
  }
  .brand {
    font-size: 17px;
  }
  #wanted {
    font-size: 14px;
  }
  #install {padding:12px 16px;font-size:14px}
  #dialogue {
    bottom: 112px;
    width: calc(100vw - 28px);
    padding: 10px 12px;
    grid-template-columns: 38px 1fr;
    gap: 9px;
  }
  #speakerMark {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  #dialogue p {
    font-size: 14px;
    line-height: 1.25;
  }
}
.stick.keyboard-active{border-color:#f2a93baa;box-shadow:inset 0 0 28px #0009,0 0 28px #f2a93b44}.stick.keyboard-active i{border-color:var(--amber);box-shadow:0 0 22px #f2a93b99}
@media (pointer:fine) and (min-width:761px){
  #touch{opacity:.52;pointer-events:none}
  #moveStick{transform:scale(.62);transform-origin:bottom left}
  #lookStick{transform:scale(.62);transform-origin:bottom right}
  .face-buttons,.triggers{display:none}
}


/* UI/UX release 0.18.0 — adaptive console-grade interaction layer */
:root {
  --hud-scale: 1;
  --text-scale: 1;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --focus: #fff36b;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
button,
select,
input,
a {
  min-height: 44px;
}
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible,
body[data-input="gamepad"] button:focus,
body[data-input="gamepad"] select:focus,
body[data-input="gamepad"] input:focus {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px #05070ccc, 0 0 28px #fff36b66;
}
button:disabled {
  cursor: wait;
  opacity: .62;
}
header {
  top: max(24px, calc(var(--safe-top) + 14px));
  left: max(28px, calc(var(--safe-left) + 14px));
  right: max(28px, calc(var(--safe-right) + 14px));
}
#mission {
  left: max(28px, calc(var(--safe-left) + 14px));
  top: max(78px, calc(var(--safe-top) + 62px));
  scale: var(--hud-scale);
  transform-origin: top left;
}
#sideMission {
  left: max(28px, calc(var(--safe-left) + 14px));
  scale: var(--hud-scale);
  transform-origin: top left;
}
#map,
#stats,
#mapToggle {
  right: max(28px, calc(var(--safe-right) + 14px));
}
#map,
#stats {
  scale: var(--hud-scale);
  transform-origin: top right;
}
#dialogue {
  bottom: max(28px, calc(var(--safe-bottom) + 20px));
}
#prompt {
  z-index: 7;
  white-space: nowrap;
}
.input-status {
  position: fixed;
  z-index: 12;
  top: max(18px, calc(var(--safe-top) + 10px));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #9db0b7;
  background: #050b11e8;
  border: 1px solid #ffffff24;
  font: 8px "Space Mono";
  letter-spacing: 1.2px;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.input-status.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.input-status b {
  color: var(--cyan);
}
.input-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}
body[data-input="gamepad"] .input-status-dot { background: #69dc75; }
body[data-input="touch"] .input-status-dot { background: var(--amber); }
body:not(.show-input-hints) .input-status,
body:not(.show-input-hints) .controls { display: none; }

#pause {
  z-index: 20;
  padding:
    max(18px, var(--safe-top))
    max(18px, var(--safe-right))
    max(18px, var(--safe-bottom))
    max(18px, var(--safe-left));
  overflow: auto;
}
#pause main {
  max-height: min(92vh, 780px);
  overflow: auto;
}
#pause h2 { margin-bottom: 18px; }
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  padding: 14px;
  border: 1px solid #ffffff18;
  background: #03080d99;
}
#pause .settings-grid label {
  margin: 6px 0;
  max-width: none;
}
#pause .setting-check {
  grid-template-columns: 1fr auto;
  min-height: 44px;
  cursor: pointer;
}
#pause .setting-check input {
  width: 22px;
  height: 22px;
  padding: 0;
  accent-color: var(--cyan);
}
.settings-reset,
.secondary {
  padding: 11px 16px;
  color: #b9c6ca;
  background: #0d1720;
  border: 1px solid #ffffff2b;
}
.settings-reset {
  margin-top: 12px;
  font-size: 13px;
}
#onboarding {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: grid;
  place-items: center;
  padding:
    max(18px, var(--safe-top))
    max(18px, var(--safe-right))
    max(18px, var(--safe-bottom))
    max(18px, var(--safe-left));
  background: radial-gradient(circle at 50% 45%, #102a34e8, #020509f5 68%);
  backdrop-filter: blur(12px);
}
.onboarding-card {
  width: min(760px, 94vw);
  padding: clamp(22px, 4vw, 42px);
  border-top: 3px solid var(--cyan);
}
.onboarding-card h2 {
  margin: 8px 0 18px;
  font-size: clamp(42px, 7vw, 76px);
  line-height: .82;
  font-style: italic;
}
.onboarding-card h2 span { color: var(--cyan); }
.onboarding-card section > p:not(.eyebrow) {
  max-width: 610px;
  color: #b8c4c8;
  font-size: calc(20px * var(--text-scale));
  line-height: 1.35;
}
.onboarding-progress {
  display: flex;
  gap: 7px;
  margin-bottom: 26px;
}
.onboarding-progress i {
  width: 48px;
  height: 4px;
  background: #273039;
}
.onboarding-progress i.active {
  background: var(--cyan);
  box-shadow: 0 0 14px #45f4e888;
}
.tutorial-visual {
  display: grid;
  grid-template-columns: 62px 1fr 62px 1fr;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
  padding: 18px;
  background: #050a10;
  border: 1px solid #ffffff18;
}
.tutorial-visual span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  color: var(--cyan);
  font: 800 13px "Space Mono";
  box-shadow: inset 0 0 18px #45f4e822;
}
.tutorial-visual b {
  font: 700 14px "Space Mono";
  letter-spacing: 1.4px;
}
.onboarding-card footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.onboarding-card footer > span {
  color: #819198;
  font: 10px "Space Mono";
}
#tutorialNext {
  justify-self: end;
  padding: 13px 18px;
  background: var(--cyan);
  color: #061014;
}
#orientationHint {
  position: fixed;
  z-index: 22;
  top: max(14px, calc(var(--safe-top) + 8px));
  left: 50%;
  width: min(390px, calc(100vw - 28px));
  padding: 12px 14px;
  transform: translateX(-50%);
  background: #071018f2;
  border: 1px solid var(--amber);
  box-shadow: 0 16px 48px #000c;
  text-align: center;
}
#orientationHint b,
#orientationHint span { display: block; }
#orientationHint b {
  color: var(--amber);
  font: 800 12px "Space Mono";
  letter-spacing: 1.6px;
}
#orientationHint span {
  margin-top: 4px;
  color: #b5c1c5;
  font-size: 13px;
}
.ui-modal-open #touch {
  opacity: .1 !important;
  pointer-events: none !important;
}
body[data-contrast="high"] {
  --cyan: #65fff4;
  --pink: #ff55a0;
  --amber: #ffd35a;
  --glass: #02050af2;
}
body[data-contrast="high"] .glass,
body[data-contrast="high"] #stats,
body[data-contrast="high"] #mission {
  background: #02050af2;
  border-color: #ffffff70;
}
body[data-contrast="high"] small,
body[data-contrast="high"] .controls,
body[data-contrast="high"] .lede { color: #dbe5e8; }
body[data-motion="reduced"] *,
body[data-motion="reduced"] *::before,
body[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
body[data-motion="reduced"] #grain { display: none; }
body[data-quality="low"] .glass,
body[data-quality="low"] #pause,
body[data-quality="low"] #worldMapOverlay,
body[data-quality="low"] #onboarding {
  backdrop-filter: none;
}
body[data-quality="low"] #grain { opacity: .06; }
body[data-text="large"] #mission p,
body[data-text="large"] #sideMission p,
body[data-text="large"] #dialogue p,
body[data-text="large"] .paywall-lede {
  font-size: calc(1em * var(--text-scale));
}
.stick,
.face-buttons,
.triggers {
  bottom: max(20px, calc(var(--safe-bottom) + 14px));
}
.face-buttons { bottom: max(146px, calc(var(--safe-bottom) + 140px)); }
.triggers { bottom: max(148px, calc(var(--safe-bottom) + 142px)); }
#moveStick { left: max(18px, calc(var(--safe-left) + 12px)); }
#lookStick { right: max(18px, calc(var(--safe-right) + 12px)); }

@media (pointer: coarse), (max-width: 760px) {
  header {
    top: max(14px, calc(var(--safe-top) + 8px));
    left: max(14px, calc(var(--safe-left) + 8px));
    right: max(14px, calc(var(--safe-right) + 8px));
  }
  #mission {
    left: max(14px, calc(var(--safe-left) + 8px));
    top: max(52px, calc(var(--safe-top) + 44px));
  }
  #map,
  #stats {
    right: max(14px, calc(var(--safe-right) + 8px));
  }
  #mapToggle {
    top: max(160px, calc(var(--safe-top) + 152px));
    right: max(14px, calc(var(--safe-right) + 8px));
    bottom: auto;
  }
  body.is-driving #mapToggle {
    right: max(216px, calc(var(--safe-right) + 210px));
    top: max(164px, calc(var(--safe-top) + 156px));
  }
  #dialogue {
    bottom: max(112px, calc(var(--safe-bottom) + 104px));
  }
  #pause main {
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
    padding: 22px 18px;
  }
  #pause h2 { font-size: 42px; }
  .settings-grid { grid-template-columns: 1fr; }
  .onboarding-card { padding: 22px 18px; }
  .onboarding-card h2 { font-size: 42px; }
  .onboarding-card section > p:not(.eyebrow) { font-size: 17px; }
  .tutorial-visual {
    grid-template-columns: 52px 1fr 52px 1fr;
    gap: 8px;
    padding: 12px;
  }
  .tutorial-visual span { width: 48px; height: 48px; }
}
@media (orientation: portrait) and (pointer: coarse) {
  body:not(.orientation-acknowledged) #orientationHint:not([hidden]) { display: block; }
}
@media (max-height: 680px) {
  #pause main { padding: 16px; }
  #pause h2 { font-size: 38px; margin: 4px 0 10px; }
  .pause-actions { margin-bottom: 10px; }
  .settings-grid { padding: 8px 12px; }
  #pause .settings-grid label { margin: 3px 0; }
}

.plan-picker input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: inset 3px 0 var(--cyan), 0 0 26px #fff36b55;
}

@media (max-width: 760px) {
  #start {
    overflow-x: hidden;
    overflow-y: auto;
    padding:
      max(24px, calc(var(--safe-top) + 18px))
      max(20px, calc(var(--safe-right) + 16px))
      max(72px, calc(var(--safe-bottom) + 64px))
      max(20px, calc(var(--safe-left) + 16px));
  }
  #start main {
    width: 100%;
    min-width: 0;
  }
  #start .eyebrow {
    max-width: 100%;
    font-size: 9px;
    letter-spacing: 3px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  #start h1 {
    max-width: 100%;
    font-size: min(22vw, 96px);
  }
  #start .lede {
    max-width: 100%;
    margin: 28px 0 22px;
    overflow-wrap: anywhere;
  }
  #start .start-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  #start .start-actions button {
    width: 100%;
    min-width: 0;
  }
  #start footer {
    left: max(12px, var(--safe-left));
    right: max(12px, var(--safe-right));
    bottom: max(12px, calc(var(--safe-bottom) + 8px));
    width: auto;
    text-align: center;
    font-size: 7px;
    line-height: 1.4;
    letter-spacing: 1.4px;
  }
}