:root {
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  color: #f3f7ff;
  background: #111b2c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; }
body { min-height: 100svh; background: radial-gradient(circle at 50% -10%, #466175, #111b2c 65%); -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; }
.shell { min-height: 100svh; display: grid; place-items: center; }
.game { position: relative; width: min(100vw, 460px); height: min(100svh, 800px); overflow: hidden; background: #1c2a3b; box-shadow: 0 22px 80px #050d18aa; }
.game:before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#d7e6ed 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.topbar, .road-label, .controls { position: absolute; z-index: 2; }
.topbar { top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 23px 21px 12px; background: linear-gradient(#17283bea, transparent); }
.brand { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 900; letter-spacing: .15em; }
.cross { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #d69ab6; border-radius: 8px; color: #f0bdd2; }
.hud { display: flex; gap: 14px; text-align: right; }
.hud span { display: flex; flex-direction: column; gap: 3px; }
.hud small { color: #a4bac9; font-size: .52rem; letter-spacing: .18em; }
.hud b { font-size: 1rem; color: #f5fbff; }
.road-label { top: 77px; left: 22px; color: #afd0d6; font-size: .58rem; letter-spacing: .14em; font-weight: 800; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.controls { bottom: 19px; left: 0; right: 0; text-align: center; color: #7895a7; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.controls i { display: inline-grid; place-items: center; margin-left: 7px; width: 24px; height: 24px; border: 1px solid #8eafbc; border-radius: 8px; color: #c4eced; font-style: normal; font-size: .9rem; }
.overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 24px; background: #0c1727bd; backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.overlay--visible { opacity: 1; pointer-events: auto; }
.card { width: min(100%, 348px); padding: 32px 27px 27px; border: 1px solid #709bb1; border-radius: 24px; background: linear-gradient(145deg, #29465b, #172b40); box-shadow: 0 22px 65px #040b14a8; text-align: center; }
.transport-icon { position: relative; width: 76px; height: 51px; margin: 3px auto 24px; border-radius: 13px 15px 7px 7px; background: #fff5f7; color: #b74470; display: grid; place-items: center; font-size: 1.55rem; box-shadow: 0 0 26px #d69ab645; }
.transport-icon:before, .transport-icon:after { content: ""; position: absolute; bottom: -8px; width: 14px; height: 14px; border: 3px solid #d7ecf1; border-radius: 50%; background: #1a3347; }
.transport-icon:before { left: 10px; }
.transport-icon:after { right: 10px; }
.transport-icon span { position: absolute; right: 8px; top: 3px; color: #b74470; font-size: 1rem; }
.eyebrow { margin: 0 0 10px; color: #a7e5dc; font-size: .6rem; font-weight: 900; letter-spacing: .2em; }
.card h1, .card h2 { margin: 0; color: #f6fbff; font-size: 2.85rem; line-height: .93; letter-spacing: -.08em; }
.card h1 em { color: #f0b5cc; font-style: normal; }
.card h2 { font-size: 2.35rem; }
.card p { margin: 20px auto 25px; max-width: 270px; color: #c0d3dc; font-size: .88rem; line-height: 1.55; }
.primary { width: 100%; min-height: 53px; border: 0; border-radius: 15px; background: linear-gradient(135deg, #a7e8df, #5bb8c4); color: #102438; cursor: pointer; font-size: .92rem; font-weight: 950; box-shadow: 0 5px 0 #277286, 0 0 25px #6ed3dd44; }
.primary:active { transform: translateY(3px); }
.primary span { margin-left: 8px; font-size: 1.1rem; }
.card > small { display: block; margin-top: 17px; color: #86a3b5; font-size: .65rem; }
.hub-link { display: inline-block; margin-top: 17px; color: #bde8e1; font-size: .72rem; font-weight: 800; text-decoration: none; }
.hub-link:hover, .hub-link:focus-visible { color: #f3fffd; text-decoration: underline; }
.alert-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 21px; border: 2px solid #e8b5ca; border-radius: 50%; color: #ffd2e2; font-size: 2rem; }
.card--compact p strong { color: #f5c8d8; }
.result { display: flex; justify-content: center; gap: 30px; margin: 22px 0; color: #91adbe; font-size: .58rem; font-weight: 900; letter-spacing: .15em; }
.result b { display: block; margin-top: 5px; color: #f4fbff; font-size: 1.25rem; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-height: 660px) { .road-label { top: 64px; } .card { padding-top: 25px; } .card h1 { font-size: 2.5rem; } .card p { margin: 14px auto 18px; } }