/* Layout: full-bleed 3D street view; HUD pinned to the corners like a taxi meter, a street-name plate and an analogue dashboard */
/* the Burmese (and its Latin): Noto Sans Myanmar (the Noto Project Authors, SIL OFL 1.1: fonts/LICENSE-NotoSansMyanmar.txt), variable
   weight, sent with the game: 154 kB for the Burmese, 32 kB for the Latin, each fetched only when its letters are on screen. It draws
   every stacked letter right (Myanmar Angoun, before it, drew the တ under န in မန္တလေး as a ထ) */
@font-face { font-family: "Noto Sans Myanmar"; src: url("../fonts/NotoSansMyanmar-myanmar.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+1000-109F, U+200C-200D, U+25CC, U+A92E, U+A9E0-A9FE, U+AA60-AA7F; }
@font-face { font-family: "Noto Sans Myanmar"; src: url("../fonts/NotoSansMyanmar-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --meter: #12100d;
  --meter-edge: #2c2720;
  --amber: #ffb22e;
  --amber-dim: #6d4c17;
  --plate: #1d4f86;
  --paper: #f4ecd9;
  --gold: #d9a92e;
  --go: #52c98f;
  --warn: #e5533d;
  --shade: rgba(14, 12, 9, 0.72);
  --f-mm: "Noto Sans Myanmar", "Myanmar Text", sans-serif;
  --f-label: "Saira Condensed", "Arial Narrow", sans-serif;
  --f-digit: "Share Tech Mono", ui-monospace, monospace;
  color-scheme: dark;
}
[hidden] { display: none !important; }
/* (dvh: the screen's height as it is now, with a phone browser's bars shown or hidden; 100% alone stayed at the height with the bars
   shown, and in landscape the strip they left when they hid was blank under the game) */
html, body { height: 100%; height: 100dvh; margin: 0; overflow: hidden; background: #2a2f31; color: var(--paper); }
body { font-family: var(--f-mm); -webkit-user-select: none; user-select: none; touch-action: none; }
canvas#view { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; height: 100dvh; }

.hud { position: fixed; pointer-events: none; }
#meter {
  top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px;
  background: var(--meter); border: 2px solid var(--meter-edge); border-radius: 6px;
  padding: 8px 12px 10px; min-width: 190px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.m-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
/* free drive: the meter keeps only the clock and the weather (no TAXI / MOTO, fare, trips or takings) */
#meter.free .m-top, #meter.free .m-fare, #meter.free .m-stats { display: none !important; }
#meter.free .m-clock { margin-top: 0; }
/* (and the box only as big as the clock: at its full width it was a big black patch round a small time, the owner, 2026-10-17) */
#meter.free { min-width: 0; padding: 4px 10px 5px; }
.m-brand { font-family: var(--f-label); font-weight: 700; letter-spacing: .14em; font-size: 12px; color: var(--amber); }
.m-lamp { font-family: var(--f-label); font-size: 11px; letter-spacing: .1em; padding: 1px 6px; border-radius: 3px; background: #2d6b47; color: #dfffe9; }
.m-lamp.busy { background: #7b2a20; color: #ffe1d8; }
.m-fare { font-family: var(--f-digit); font-size: 34px; line-height: 1.1; color: var(--amber); text-shadow: 0 0 10px rgba(255,178,46,.45); font-variant-numeric: tabular-nums; }
.m-fare small { font-family: var(--f-mm); font-size: 13px; color: var(--amber-dim); margin-left: 6px; text-shadow: none; }
.m-stats { display: flex; gap: 14px; font-size: 12px; color: #b8ab92; font-variant-numeric: tabular-nums; }
.m-stats b { font-family: var(--f-digit); color: var(--paper); font-weight: 400; }
.m-stats b.neg { color: var(--warn); }

#mission {
  top: calc(46px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  max-width: min(440px, calc(100vw - 32px - 380px)); text-align: center;
  background: var(--shade); padding: 6px 14px 8px; border-radius: 6px;
}
#mission .mm { font-size: 17px; font-weight: 700; line-height: 1.5; text-wrap: balance; }
#mission .en { font-family: var(--f-label); font-size: 13px; letter-spacing: .04em; color: #cfc4ad; }
#mission .dist { font-family: var(--f-digit); color: var(--amber); }

#mapwrap {
  top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  width: 160px; display: flex; flex-direction: column; gap: 6px;
}
.mapbox { position: relative; width: 160px; height: 160px; border-radius: 8px; overflow: hidden; border: 2px solid var(--meter-edge); background: #2b2a26; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
#minimap { width: 100%; height: 100%; display: block; }
.north { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-family: var(--f-label); font-size: 11px; font-weight: 700; color: var(--paper); text-shadow: 0 1px 2px #000; }
.minibtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; pointer-events: auto; }
#settings { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 8, 0.7); }
#settings h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.5; color: var(--gold); }
#settings label { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-bottom: 12px; font-size: 15px; }
#settings label small, #settings .gl small { font-family: var(--f-label); font-size: 12px; color: #b8ab92; }
#settings output { font-family: var(--f-digit); color: var(--amber); grid-row: span 2; align-self: center; min-width: 52px; text-align: right; }
#settings input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--amber); }
#settings .seg { display: flex; gap: 6px; margin: 4px 0 14px; }
#settings .seg button { flex: 1; padding: 6px 0 8px; border-radius: 6px; border: 1px solid #4a4133; background: var(--meter); color: var(--paper); font-family: var(--f-mm); font-size: 14px; cursor: pointer; }
#settings .seg button.on { background: var(--amber); color: #1d1405; border-color: var(--amber); }
#set-close { width: 100%; padding: 8px 0 10px; border: 1px solid var(--amber); border-radius: 6px; background: transparent; color: var(--amber); font-family: var(--f-mm); font-size: 16px; font-weight: 700; cursor: pointer; }
#find { position: fixed; inset: 0; display: grid; place-items: start center; padding: calc(60px + env(safe-area-inset-top, 0px)) 16px 16px; background: rgba(12, 10, 8, 0.7); }
#find .card { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 90px); }
#find h2 { margin: 0; font-size: 22px; line-height: 1.5; color: var(--gold); }
#find-q { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 6px; border: 2px solid var(--amber); background: #1d1a15; color: var(--paper); font-family: var(--f-mm); font-size: 17px; user-select: text; -webkit-user-select: text; }
#find-list { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; }
#find-list button { display: flex; width: 100%; gap: 10px; align-items: baseline; text-align: left; padding: 6px 8px; border: 0; border-bottom: 1px solid #2c2720; background: transparent; color: var(--paper); font-family: var(--f-mm); font-size: 16px; cursor: pointer; }
#find-list button:hover, #find-list button:focus-visible { background: #2a251d; outline: none; }
#find-list .t { font-family: var(--f-label); font-size: 12px; color: var(--amber); min-width: 64px; }
#find-list .e { font-family: var(--f-label); font-size: 13px; color: #b8ab92; margin-left: auto; text-align: right; }
#find-list .zone .t { color: var(--gold); font-weight: 700; }
#find-list .fest .t { color: #c48af0; font-weight: 700; }
#find .none { color: #b8ab92; font-size: 14px; }
#help { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 8, 0.7); }
#help .card { position: relative; }
#help h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.5; color: var(--gold); }
#help-close { width: 100%; padding: 8px 0 10px; border: 1px solid var(--amber); border-radius: 6px; background: transparent; color: var(--amber); font-family: var(--f-mm); font-size: 16px; font-weight: 700; cursor: pointer; }
#help-close:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
/* the credits page: as the help's, its links readable */
#credits { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 8, 0.7); z-index: 950; }
#credits .card { position: relative; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#credits h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.5; color: var(--gold); }
#credits h3 { margin: 12px 0 4px; font-size: 15px; line-height: 1.5; color: var(--amber); }
#credits p { margin: 0 0 6px; font-family: var(--f-label); font-size: 13px; line-height: 1.45; color: #d8cdb6; }
#credits a { color: var(--paper); }
#credits .cr-own { margin-top: 14px; padding-top: 10px; border-top: 1px solid #4a4133; color: var(--paper); }
#cr-close { width: 100%; margin-top: 12px; padding: 8px 0 10px; border: 1px solid var(--amber); border-radius: 6px; background: transparent; color: var(--amber); font-family: var(--f-mm); font-size: 16px; font-weight: 700; cursor: pointer; }
#cr-close:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
/* the map's credit on the big map, and on the start bar with the way to the credits page */
.bm-osm { position: absolute; right: 6px; bottom: 4px; font-family: var(--f-label); font-size: 11px; color: #d8cdb6; text-shadow: 0 1px 2px #000; }
.minibtns button.on { background: var(--amber); color: #1d1405; border-color: var(--amber); }
.minibtns button.on kbd { color: #1d1405; }
.m-clock { font-size: 12px; color: #d8cdb6; margin-top: 2px; }
.m-clock b { font-family: var(--f-digit); font-weight: 400; color: var(--paper); }
.minibtns button { font-size: 11px !important; white-space: normal; line-height: 1.35; overflow-wrap: anywhere; /* (wrapped, not cut short with …: the owner, 2026-10-16) */
  flex: 1; padding: 3px 0 4px; border-radius: 5px; border: 1px solid #4a4133; background: var(--meter); color: var(--paper);
  font-family: var(--f-mm); font-size: 12px; cursor: pointer;
}
.minibtns button kbd { font-family: var(--f-digit); font-size: 11px; color: var(--amber); margin-left: 4px; }
.minibtns .d { display: none; } /* (what each one does: shown in the phones' full-screen menu) */

#plate {
  left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; gap: 10px;
}
.street { background: var(--plate); border: 2px solid #e9eef5; border-radius: 5px; padding: 3px 12px 5px; min-width: 150px; max-width: 280px; }
.street .mm { font-size: 18px; font-weight: 700; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.street .en { font-family: var(--f-label); font-size: 13px; letter-spacing: .05em; color: #d5e2f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dash.solo { width: 128px; }
#dash { width: 236px; height: 118px; display: block; border-radius: 10px; background: var(--meter); border: 2px solid var(--meter-edge); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
#fuelwarn {
  left: 12px; bottom: calc(142px + env(safe-area-inset-bottom, 0px));
  background: var(--warn); color: #fff; padding: 3px 12px 5px; border-radius: 5px; font-size: 14px; font-weight: 700;
}
#fuelwarn span { font-family: var(--f-digit); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) { #fuelwarn.blink { animation: blink 1s steps(2) infinite; } }
@keyframes blink { 50% { opacity: .55; } }

#credit { right: 12px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); font-family: var(--f-label); font-size: 11px; color: rgba(244,236,217,.75); text-shadow: 0 1px 2px #000; pointer-events: auto; }
#credit a { color: inherit; }

#tip {
  left: 12px; top: calc(150px + env(safe-area-inset-top, 0px)); max-width: min(300px, calc(100vw - 180px));
  background: var(--shade); border-left: 3px solid var(--gold); border-radius: 4px; padding: 6px 12px 8px;
}
#tip .k { font-family: var(--f-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
#tip .mm { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--gold); }
#tip .en { font-family: var(--f-label); font-size: 13px; color: #cfc4ad; }
#tip p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }
#tip p.fe { font-family: var(--f-label); font-size: 13px; line-height: 1.35; color: #cfc4ad; }
@media (max-width: 640px) { #tip { top: calc(118px + env(safe-area-inset-top, 0px)); } #tip p { font-size: 13px; } }
/* a festival on: a card at the top, in the festival's purple and gold, till it is closed or followed (festivals.js); in the band under the
   compass, not the middle of the view */
#fest-note {
  top: calc(108px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 32px)); pointer-events: auto;
  background: var(--meter); border: 2px solid var(--gold); border-left: 6px solid #8a3fd0; border-radius: 8px; padding: 10px 14px 12px;
}
#fest-note .k { font-family: var(--f-label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
#fest-note .mm { font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--gold); }
#fest-note p { margin: 2px 0 8px; font-size: 14px; line-height: 1.6; color: var(--paper); }
#fest-note .row { display: flex; gap: 8px; }
#fest-note button { font: inherit; font-size: 14px; border-radius: 6px; border: 1px solid var(--gold); padding: 6px 12px; cursor: pointer; }
#fest-note #fn-go { flex: 1; background: var(--gold); color: var(--meter); font-weight: 700; }
#fest-note #fn-x { background: transparent; color: var(--paper); }
@media (max-height: 500px) { #fest-note { top: calc(108px + env(safe-area-inset-top, 0px)); } }
/* the toast: small, near the top just under the mission card (over it, the two were drawn on each other), off the middle of the view (the owner, 2026-10-17: "don't put the notes
   right in the middle: distracting"; at 150 px it sat a third of the way down a short window) */
#toast {
  top: calc(108px + env(safe-area-inset-top, 0px)); left: 50%; transform: translate(-50%, 0) scale(.96); transform-origin: 50% 0;
  background: var(--meter); border: 2px solid var(--gold); border-radius: 8px; padding: 5px 14px 7px; max-width: min(420px, calc(100vw - 32px));
  text-align: center; opacity: 0; transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (max-height: 500px) { #toast { top: calc(108px + env(safe-area-inset-top, 0px)); padding: 4px 12px 6px; } #toast .big { font-size: 20px; } #toast .mm { font-size: 13px; } }
#toast .big { font-family: var(--f-digit); font-size: 22px; color: var(--amber); }
#toast .mm { font-size: 14px; line-height: 1.5; }
#toast .en { font-family: var(--f-label); font-size: 13px; color: #cfc4ad; }

/* the compass strip across the top (ui.js draws it), the fare's mission line just under it */
#compass { top: calc(4px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 460px)); height: 40px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  background: linear-gradient(rgba(14,12,9,.45), rgba(14,12,9,0)); }
@media (max-width: 560px) { #compass { display: none; } }

/* phones: buttons laid out like PUBG Mobile's (player.js). Left thumb: ▲ gas over ▼ brake / reverse, ⚡ boost above and the handbrake
   beside them; right thumb: ◀ ▶ side by side with the horn beside them, get out / get in above and take off / land (✈) beside that.
   Only in landscape (see #rotate) */
#touch, #kmh { display: none; }
@media (pointer: coarse) {
  #touch { --l: calc(14px + env(safe-area-inset-left, 0px)); --r: calc(14px + env(safe-area-inset-right, 0px)); --b: calc(10px + env(safe-area-inset-bottom, 0px));
    display: block; position: fixed; inset: 0; pointer-events: none; }
  #touch button {
    position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
    width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(244,236,217,.45); background: rgba(18,16,13,.36);
    color: var(--paper); font-family: var(--f-label); font-size: 22px; font-weight: 700; line-height: 1; pointer-events: auto; touch-action: none;
    -webkit-tap-highlight-color: transparent; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  }
  #touch button[hidden] { display: none; }
  #touch button small { font-family: var(--f-mm); font-size: 10px; font-weight: 400; line-height: 1.3; opacity: .85; }
  #touch button.on { background: rgba(255,178,46,.5); }
  #p-gas, #p-rev { width: 72px !important; height: 72px !important; font-size: 28px !important; left: calc(var(--l) + 84px); }
  #p-rev { bottom: var(--b); }
  #p-gas { bottom: calc(var(--b) + 88px); }
  #p-hand { left: var(--l); bottom: calc(var(--b) + 46px); }
  #p-boost { left: auto; right: calc(var(--r) + 8px); bottom: calc(var(--b) + 132px); /* (on the right, in get out / in's place: player.js stepTouch shows the one or the other) */ width: 56px !important; height: 56px !important; border-color: rgba(255,178,46,.8) !important;
    background: linear-gradient(to top, rgba(255,178,46,.42) calc(var(--c, 1) * 100%), rgba(18,16,13,.36) calc(var(--c, 1) * 100%)) !important; }
  #p-boost.fire, #p-boost.on { background: rgba(255,120,30,.7) !important; }
  #p-boost.low { opacity: .45; }
  #p-left, #p-right { width: 76px !important; height: 76px !important; font-size: 28px !important; bottom: var(--b); }
  /* ▲ ▼ ◀ ▶: one triangle drawn the same for all four, turned each way (the font's ◀ ▶ came out a different shape from its ▲ ▼) */
  #p-gas, #p-rev, #p-left, #p-right { display: grid; place-items: center; }
  .tri { display: block; width: 26px; height: 22px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .tri.d { transform: rotate(180deg); } .tri.l { transform: rotate(-90deg); } .tri.r { transform: rotate(90deg); }
  #p-right { right: calc(var(--r) + 64px); }
  #p-left { right: calc(var(--r) + 152px); }
  #p-horn, #p-sit { right: var(--r); bottom: calc(var(--b) + 28px); width: 54px !important; height: 54px !important; font-size: 18px !important; }
  #p-exit { right: calc(var(--r) + 8px); bottom: calc(var(--b) + 132px); }
  #p-fly { right: calc(var(--r) + 80px); bottom: calc(var(--b) + 112px); width: 54px !important; height: 54px !important; border-color: rgba(127,216,255,.7) !important; }
  #p-fly.on { background: rgba(127,216,255,.45); }
  #p-dance { right: calc(var(--r) + 80px); bottom: calc(var(--b) + 112px); width: 54px !important; height: 54px !important; font-size: 18px !important; } /* (on foot, where the fly button is in a vehicle) */
  /* ◉ the cameras, as V (everywhere, aboard a train too): in a vehicle beside ▼, where the left thumb reaches it without leaving ▲ ▼, as
     PUBG Mobile keeps such buttons at the edge of the thumb's reach (the owner, 2026-10-15); on foot up on the right, the stick's
     part of the screen kept clear */
  #p-view { left: calc(var(--l) + 168px); bottom: calc(var(--b) + 12px); width: 48px !important; height: 48px !important; font-size: 18px !important; }
  body[data-tm="foot"] #p-view { left: auto; right: var(--r); bottom: calc(var(--b) + 206px); }
  /* on foot: ⤒ jump or climb low on the right, under the right thumb, where ◀ ▶ are in a vehicle */
  body[data-tm="foot"] #p-hand { left: auto; right: calc(var(--r) + 84px); bottom: var(--b); width: 72px !important; height: 72px !important; font-size: 28px !important; }
  /* on foot: PUBG Mobile's floating stick (player.js), in the left part of the screen below the map; it rests faintly where ▲ ▼ are in a
     vehicle and comes up where the thumb lands. The 🔒 over it while held: slid onto and let go, you run on */
  #p-stick { position: absolute; left: 0; bottom: 0; width: 46%; top: 30%; pointer-events: auto; touch-action: none; }
  #p-stick[hidden] { display: none; }
  #p-stick .ring { position: absolute; left: calc(var(--l) + 96px); bottom: calc(var(--b) + 100px); width: 112px; height: 112px; margin: 0 0 -56px -56px;
    box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(244,236,217,.45); background: rgba(18,16,13,.24); opacity: .55; }
  #p-stick.act .ring { opacity: 1; }
  #p-stick .knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; box-sizing: border-box; border-radius: 50%; transform: translate(-50%, -50%);
    background: rgba(244,236,217,.5); border: 2px solid rgba(244,236,217,.85); }
  #p-stick.run .knob { background: rgba(255,178,46,.85); border-color: var(--amber); }
  #p-stick .slock { position: absolute; left: 50%; top: -50px; transform: translate(-50%, -50%); display: none; padding: 6px 10px; border-radius: 18px; font-size: 20px; line-height: 1;
    background: rgba(18,16,13,.6); border: 1px solid rgba(244,236,217,.5); }
  #p-stick.act .slock { display: block; }
  #p-stick.hit .slock { background: rgba(255,178,46,.8); border-color: var(--amber); }
  #p-gas.on { background: rgba(82,201,143,.55); }
  #p-rev.on, #p-hand.on { background: rgba(229,83,61,.55); }

  /* speed, small, over the left thumb's buttons */
  #kmh { display: flex; align-items: baseline; gap: 5px; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(214px + env(safe-area-inset-bottom, 0px));
    padding: 2px 8px 3px; border-radius: 6px; background: rgba(14,12,9,.45); color: var(--paper); text-shadow: 0 1px 2px #000; }
  #kmh svg { align-self: center; opacity: .85; }
  #kmh b { font-family: var(--f-digit); font-size: 22px; font-weight: 400; color: var(--amber); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
  #kmh small { font-family: var(--f-label); font-size: 12px; letter-spacing: .04em; color: #cfc4ad; }
  body.onfoot #kmh { display: none; }

  #compass { width: min(340px, calc(100vw - 300px)); }
}

/* phones held upright: a card asks to turn the phone, the game waits under it (player.js) */
#rotate { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; background: #12100d; color: var(--paper); }
#rotate p { margin: 0; }
#rotate .mm { font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--gold); }
#rotate .en { font-family: var(--f-label); font-size: 15px; color: #cfc4ad; }
@media (prefers-reduced-motion: no-preference) { #rotate svg { animation: turn 2.4s ease-in-out infinite; } }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* with a mouse, the shortcut buttons under the minimap stay hidden until the pointer comes near or Tab is pressed (index.html) */
@media not all and (pointer: coarse) {
  .minibtns { opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
  #mapwrap.peek .minibtns, .minibtns:focus-within { opacity: 1; pointer-events: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .minibtns { transition: none; } }

#bigmap {
  position: fixed; inset: 0; background: rgba(12, 10, 8, 0.94); display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 10px;
}
.bm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bm-head h2 { margin: 0; font-size: 22px; line-height: 1.5; color: var(--gold); }
.bm-head h2 small { font-family: var(--f-label); font-size: 13px; letter-spacing: .14em; color: #b8ab92; margin-left: 10px; text-transform: uppercase; }
.bm-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.bm-tools button { border: 1px solid #4a4133; background: var(--meter); color: var(--paper); border-radius: 6px; padding: 4px 12px 6px; font-family: var(--f-mm); font-size: 15px; cursor: pointer; min-width: 40px; }
.bm-tools button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
#bmcan { touch-action: none; cursor: grab; }
#bm-close { border: 1px solid #4a4133; background: var(--meter); color: var(--paper); border-radius: 6px; padding: 4px 14px 6px; font-family: var(--f-mm); font-size: 15px; cursor: pointer; }
#bm-close:focus-visible, .minibtns button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.bm-body { position: relative; min-height: 0; }
#bmcan { position: absolute; inset: 0; width: 100%; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #d8cdb6; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

/* the mouse pointer, hidden while driving when the mouse is still (index.html) */
html.mouse-idle, html.mouse-idle * { cursor: none !important; }

/* the cover over the screen while the city loads, under the start bar; it fades out when the city is ready */
#cover { position: fixed; inset: 0; z-index: 4; background: #12100d; transition: opacity .8s ease; }
#cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
#cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(18,16,13,.55)); }
#cover.gone { opacity: 0; pointer-events: none; }

/* the start screen is a slim bar at the bottom, so the city stays in view behind it */
#start {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px)); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--shade); border: 1px solid #4a4133; border-radius: 10px; padding: 8px 12px; z-index: 5;
}
/* while the city loads: no start-place picker (empty till then), no Sign in (a save read mid-load) and no city button (the page, busy
   building the city, did not answer a tap on it: the owner, 2026-10-17; it is back once the city is ready, and the settings have Change
   city). The language works at once */
#start.loading .bar-t p, #start.loading #acctbtn, #start.loading #citybtn { display: none; }
#start h1 { margin: 0; font-size: 20px; line-height: 1.5; color: var(--gold); }
#start p { margin: 0; font-size: 13px; color: #cfc4ad; }
#start p kbd { font-family: var(--f-digit); font-size: 12px; background: #2a251d; border: 1px solid #4a4133; border-radius: 4px; padding: 0 5px; color: var(--paper); }
.bar-b { display: flex; gap: 8px; }
.card {
  width: min(460px, 100%); background: var(--meter); border: 2px solid var(--gold); border-radius: 10px;
  padding: 22px 24px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.5); max-height: calc(100% - 8px); overflow: auto;
}
.card h1 { margin: 0; font-size: 40px; line-height: 1.5; color: var(--gold); text-wrap: balance; }
.card .sub { font-family: var(--f-label); font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); margin-top: -4px; }
.card p { font-size: 15px; line-height: 1.75; margin: 14px 0 12px; max-width: 60ch; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.keys kbd { font-family: var(--f-digit); font-size: 13px; background: #2a251d; border: 1px solid #4a4133; border-radius: 4px; padding: 0 6px; color: var(--paper); white-space: nowrap; }
#go {
  padding: 6px 16px 8px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--amber); color: #1d1405; font-family: var(--f-mm); font-size: 15px; font-weight: 700;
}
#go:focus-visible, #touch button:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
#go[disabled], #gofree[disabled] { opacity: .6; cursor: wait; }
/* the loading bar, where the two buttons come once the city is built */
#start .bar-b { margin-left: auto; }
#loadbar { width: 250px; max-width: 60vw; height: 8px; align-self: center; border-radius: 4px; background: #2a251d; border: 1px solid #4a4133; overflow: hidden; }
#loadstuck { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--paper); }
#loadstuck button { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--amber); background: var(--amber); color: #12100d; font: inherit; font-weight: 700; cursor: pointer; }
#loadstuck small { flex-basis: 100%; font-size: 10px; color: #9c917c; overflow-wrap: anywhere; }
#loadbar b { display: block; height: 100%; width: 0; background: var(--amber) linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent) no-repeat; background-size: 40% 100%;
  transition: width .25s ease-out; animation: loadshine 1.4s linear infinite; }
@keyframes loadshine { from { background-position: -60% 0; } to { background-position: 160% 0; } }
/* over the bar while loading: what is being built, and how far */
#start.loading .bar-b { flex-wrap: wrap; row-gap: 4px; }
#loadmsg { flex-basis: 100%; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #cfc4ad; }
#loadmsg b { font-family: var(--f-digit); color: var(--amber); font-weight: 400; }
#start:not(.loading) #loadmsg, #loadmsg[hidden] { display: none; }
#start.loading #loadbar { flex: 1; height: 10px; }
#gofree {
  padding: 6px 14px 8px; border: 1px solid var(--amber); border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--amber); font-family: var(--f-mm); font-size: 14px; font-weight: 700;
}
#gofree:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
/* the city: a button with its name and "change city", which opens the city cards */
#start .cities { display: flex; flex-direction: column; align-items: flex-start; padding: 3px 12px 5px; border: 1px solid #4a4133; border-radius: 6px;
  background: #2a251d; color: var(--gold); cursor: pointer; font-family: var(--f-mm); font-size: 15px; font-weight: 700; line-height: 1.35; }
#start .cities small { font-size: 11px; font-weight: 400; color: #cfc4ad; }
#start .cities:hover, #start .cities:focus-visible { border-color: var(--amber); outline: none; }
/* the start bar's man / woman */
/* the city cards: the whole screen, a card for each city side by side (swiped through on a phone), a view of it, its name and what is
   there; the one you are in marked, one still to come greyed */
#citypick { position: fixed; inset: 0; z-index: 950; display: flex; flex-direction: column; background: rgba(12,10,8,.94);
  padding: calc(14px + env(safe-area-inset-top, 0px)) 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
#citypick[hidden] { display: none; }
.cp-head { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20px + env(safe-area-inset-right, 0px)) 0 calc(20px + env(safe-area-inset-left, 0px)); }
.cp-head h2 { margin: 0; font-size: 24px; line-height: 1.5; color: var(--gold); }
#cp-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244,236,217,.6); background: transparent; color: var(--paper); font-size: 20px; cursor: pointer; }
.cp-row { flex: 1; display: flex; gap: 18px; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; touch-action: none; user-select: none;
  padding: 10px calc(20px + env(safe-area-inset-right, 0px)) 10px calc(20px + env(safe-area-inset-left, 0px)); }
@media (min-width: 900px) { .cp-row { justify-content: center; } }
.cp-card { flex: 0 0 auto; width: min(380px, 72vw); max-height: 100%; scroll-snap-align: center; display: flex; flex-direction: column; text-align: left; padding: 0 0 14px;
  border: 2px solid #4a4133; border-radius: 14px; background: var(--meter); color: var(--paper); cursor: pointer; overflow: hidden; font-family: var(--f-mm); }
.cp-card:hover, .cp-card:focus-visible { border-color: var(--amber); outline: none; }
.cp-card.here { border-color: var(--gold); }
.cp-card.soon { cursor: default; filter: grayscale(1); opacity: .55; }
.cp-pic { display: block; aspect-ratio: 16 / 9; max-height: 42vh; background: #2a251d center / cover no-repeat; }
.cp-txt { display: flex; flex-direction: column; }
.cp-name { margin: 10px 16px 0; font-size: 26px; font-weight: 700; line-height: 1.5; color: var(--gold); }
.cp-about { margin: 6px 16px 0; font-size: 14px; line-height: 1.6; color: #cfc4ad; }
.cp-tag { margin: 10px 16px 0; font-size: 14px; font-weight: 700; color: var(--amber); }
.cp-card.here .cp-tag { color: #52c98f; }
/* (a phone on its side: the picture on the left, the words beside it, so the card fits the low screen) */
@media (pointer: coarse) and (orientation: landscape) { .cp-card { flex-direction: row; width: min(600px, 82vw); height: min(250px, 100%); padding: 0; }
  .cp-pic { flex: 0 0 46%; aspect-ratio: auto; max-height: none; } .cp-txt { padding-bottom: 12px; overflow: hidden; } }
.card .note { margin-top: 12px; font-family: var(--f-label); font-size: 12px; color: #9c917c; }

@media (max-width: 640px) {
  #meter { min-width: 0; padding: 6px 10px 8px; }
  .m-fare { font-size: 26px; }
  #mapwrap, .mapbox { width: 128px; }
  .mapbox { height: 128px; }
  #mission { top: auto; bottom: calc(240px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); }
  #mission .mm { font-size: 15px; }
  #plate { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
  .street { min-width: 0; max-width: 200px; }
  #dash { width: 190px; height: 95px; }
  #dash.solo { width: 103px; }
  #fuelwarn { bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
  .card h1 { font-size: 32px; }
}
.minibtns button:last-child:nth-child(odd) { grid-column: 1 / -1; }
#settings .seg.wrap { flex-wrap: wrap; }
#settings button.city-row { margin: 4px 0 14px; font-size: 14px; } #settings button.city-row b { color: var(--amber); }
#settings .seg.wrap button { flex: 1 1 30%; padding: 6px 6px 8px; font-size: 13px; }
#settings button.wide { width: 100%; margin: -6px 0 14px; padding: 6px 0 8px; border-radius: 6px; border: 1px solid #4a4133; background: var(--meter); color: var(--paper); font-family: var(--f-mm); font-size: 13px; cursor: pointer; }
#now-playing { left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--paper); opacity: 0.8; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
#now-playing:empty { display: none; }
#settings .card { max-height: calc(100% - 8px); overflow-y: auto; }
/* phones: the settings fill the screen (no small box to scroll in), clear of the notch and the rounded corners; in landscape in two
   columns, so most of it shows at once; Done always in sight at the bottom, and the buttons big enough for a thumb */
@media (pointer: coarse) {
  #settings { display: block; padding: 0; background: var(--meter); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  #settings .card { width: 100%; min-height: 100%; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box;
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 0 calc(18px + env(safe-area-inset-left, 0px)); }
  #settings .seg button { padding: 10px 0 12px; font-size: 15px; }
  #settings .seg.wrap button { padding: 9px 6px 11px; }
  #settings input[type=range] { height: 28px; }
  #set-close { position: sticky; bottom: 0; margin-top: 4px; padding: 12px 0 14px; background: var(--meter); box-shadow: 0 -10px 14px var(--meter);
    margin-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (pointer: coarse) and (orientation: landscape) {
  #settings .card { column-count: 2; column-gap: 28px; }
  #settings h2, #set-close { column-span: all; }
  #settings label, #settings .seg { break-inside: avoid; }
  #settings .gl { break-after: avoid; }
}

/* phones: the thumb controls sit in the bottom corners, and the meters move out of their way */
@media (pointer: coarse) {
  #plate { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  #credit { bottom: calc(2px + env(safe-area-inset-bottom, 0px)); font-size: 9px; }
}
@media (pointer: coarse) and (max-width: 640px) { /* portrait */
  #mission { bottom: calc(262px + env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse) and (max-height: 500px) { /* landscape: no room above the corners, so the meters go to the bottom centre */
  #plate { left: 50%; transform: translateX(-50%); bottom: calc(6px + env(safe-area-inset-bottom, 0px)); flex-direction: row; align-items: flex-end; }
  .street { max-width: 170px; }
  #dash { width: 150px; height: 75px; }
  #mapwrap, .mapbox { width: 118px; }
  .mapbox { height: 96px; }
  .minibtns { gap: 4px; }
  .minibtns button { padding-top: 3px !important; padding-bottom: 4px !important; }
  #mission { max-width: calc(100vw - 32px - 320px); }
  #tip { display: none; }
}
/* ◀ ▶ either side of the start picker: step through the places, the view flies to each */
.sp-step { margin: 0 2px; padding: 2px 8px 3px; border: 1px solid #4a4133; border-radius: 6px; background: var(--meter); color: var(--amber); font-size: 13px; cursor: pointer; vertical-align: middle; }
.sp-step:hover, .sp-step:focus-visible { border-color: var(--amber); }
#start-pick { max-width: min(54vw, 320px); margin-left: 2px; padding: 2px 6px 3px; border: 1px solid #4a4133; border-radius: 6px; background: var(--meter); color: var(--paper); font-family: var(--f-mm); font-size: 14px; }

/* phones: the street comes first — small see-through meters, buttons folded behind ☰ */
#moretog { display: none; }
@media (pointer: coarse) {
  #moretog {
    display: block; position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; z-index: 1;
    border-radius: 50%; border: 1px solid rgba(244,236,217,.6); background: rgba(18,16,13,.75); color: var(--paper);
    font-size: 17px; line-height: 1; pointer-events: auto; cursor: pointer;
  }
  #mapwrap:not(.open) .minibtns { display: none; }
  #mapwrap.open .minibtns { background: rgba(14,12,9,.88); padding: 6px; border-radius: 8px; }
  #now-playing, #tip { display: none !important; }

  /* the meter: just the fare, the lamp and the clock, on glass */
  #meter { min-width: 0; padding: 4px 9px 5px; background: rgba(18,16,13,.62); border-color: rgba(44,39,32,.6); box-shadow: none; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; }
  .m-brand, .m-stats { display: none; }
  .m-top { order: 2; justify-content: flex-end; }
  .m-fare { order: 1; font-size: 22px; line-height: 1.15; }
  .m-fare small { font-size: 11px; margin-left: 3px; }
  .m-clock { order: 3; grid-column: 1 / -1; font-size: 11px; margin: 0; }
  .m-lamp { font-size: 10px; }

  #mapwrap, .mapbox { width: 104px; }
  .mapbox { height: 104px; border-width: 1px; opacity: .92; }
  #mapwrap.open { width: 172px; }
  #mapwrap.open .mapbox { margin-left: auto; }

  #mission { top: calc(76px + env(safe-area-inset-top, 0px)); bottom: auto; max-width: calc(100vw - 150px); left: calc(50% - 50px); padding: 3px 10px 4px; background: rgba(14,12,9,.55); }
  #mission .mm { font-size: 13px; line-height: 1.4; }
  #mission .en { font-size: 10px; }

  /* the street's name sits low between the thumbs; the km/h readout (#kmh) takes the dial's place */
  #plate { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); flex-direction: row; align-items: flex-end; gap: 6px; }
  #dash, #dash.solo { display: none; }
  .street { min-width: 0; max-width: 150px; padding: 2px 8px 3px; border-width: 1px; opacity: .9; }
  .street .mm { font-size: 13px; line-height: 1.4; }
  .street .en { font-size: 10px; }
  #fuelwarn { bottom: calc(184px + env(safe-area-inset-bottom, 0px)); font-size: 12px; }

  #credit { font-size: 8px; opacity: .7; }
}
/* landscape phones: everything hugs the edges, speed sits bottom centre between the thumbs */
@media (pointer: coarse) and (max-height: 500px) {
  #mission { top: calc(44px + env(safe-area-inset-top, 0px)); left: 50%; max-width: calc(100vw - 340px); }
  #mapwrap, .mapbox { width: 96px; } .mapbox { height: 88px; }
  /* the camera button: up the right edge it reached the minimap on a short screen (an iPhone's 340 px), over its ☰. Beside the map instead */
  /* (on foot: in a vehicle it sits beside ▼, above) */
  body[data-tm="foot"] #p-view { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: calc(12px + 96px + 10px); } /* (the map's own 12 px in, no notch inset) */
}
/* the driving buttons wait for the game: before it they showed through the start panel */
body:has(#start:not([hidden])) #touch { display: none; }


/* on foot there is no speed or fuel to read: the dial is hidden while you walk */
body.onfoot #dash { display: none; }

/* raindrops on the lens (stepRain, ui.js): over the view, under the dials; its opacity eased in and out from the script */
#wetlens { position: fixed; inset: 0; pointer-events: none; opacity: 0; background-size: 512px 512px; background-repeat: repeat; mix-blend-mode: screen; }

/* English (index.html, the language): of each Burmese line with its English under it, only the English, as large as the Burmese was;
   the Burmese stays where there is no English for it (an empty .en) */
/* one language at a time: the Burmese page shows only the Burmese line of each pair (English only where there is no Burmese: a street
   with an English name alone, a message with no Burmese), the English page only the English; the distance goes with the line shown */
html:not([data-lang="en"]) .en { display: none; }
html:not([data-lang="en"]) :has(> .mm:empty) > .en { display: block; }
html[data-lang="en"] #mis-d { display: none; }
html:not([data-lang="en"]) #settings label small, html:not([data-lang="en"]) #settings .gl small { display: none; }
html[data-lang="en"] .mm { display: none; }
html[data-lang="en"] :has(> .en:empty) > .mm { display: block; }
html[data-lang="en"] #mission .en { font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: inherit; }
html[data-lang="en"] .street .en { font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: 0; color: inherit; }
html[data-lang="en"] #tip .en { font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--gold); }
html[data-lang="en"] #toast .en { font-family: inherit; font-size: 16px; line-height: 1.6; color: inherit; }
html[data-lang="en"] #rotate .en { font-size: 20px; font-weight: 700; color: var(--gold); }
@media (max-width: 640px) { html[data-lang="en"] #mission .en { font-size: 15px; } }
@media (max-height: 500px) and (pointer: coarse) { html[data-lang="en"] #mission .en { font-size: 13px; } html[data-lang="en"] .street .en { font-size: 13px; } }
/* the language button on the start bar */
#langbtn { padding: 4px 10px 6px; border: 1px solid #4a4133; border-radius: 6px; background: transparent; color: #cfc4ad; cursor: pointer; font-family: var(--f-mm); font-size: 14px; font-weight: 700; }
#langbtn:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

/* phones: ☰ opens the shortcuts as a full screen of big buttons, not a small box by the minimap; ✕ in the corner (or a tap anywhere)
   folds them away again */
@media (pointer: coarse) {
  #mapwrap.open { width: auto; z-index: 900; } #mapwrap.open .mapbox { opacity: 1; } /* (its see-through minimap made a layer of its own, with ✕ in it under the menu) */ /* (#mapwrap is its own layer: raised, so the menu covers the thumbs' buttons too) */
  #mapwrap.open .minibtns { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-content: center; gap: 12px;
    padding: calc(64px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px));
    background: rgba(14,12,9,.96); border-radius: 0; overflow-y: auto; }
  #mapwrap.open .minibtns button { font-size: 17px !important; min-height: 64px; padding: 14px 10px 16px !important; border-radius: 10px; }
  #mapwrap.open .minibtns button kbd { display: none; }
  #mapwrap.open .minibtns button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; white-space: normal; }
  #mapwrap.open .minibtns .d { display: block; font-family: var(--f-label); font-size: 12px; line-height: 1.3; color: #b8ab92; }
  #mapwrap.open .minibtns button:last-child { grid-column: auto; }
  #mapwrap.open .minibtns .kb { display: none; } /* (fly, and get out / in: each has its own button on the screen already) */
  #mapwrap.open #moretog { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); bottom: auto;
    width: 46px; height: 46px; font-size: 20px; z-index: 901; }
}

/* the start bar's rows: the title, with the account and language at the right; the place to start; then the city switch and the two
   drive buttons. (.bar-t's title and line take their own rows: display: contents.) A narrow phone puts the drive buttons under the cities */
#start { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "h u" "p p" "c b"; align-items: center; gap: 8px 12px; }
#start .bar-t { display: contents; }
#start h1 { grid-area: h; }
#start .bar-t p { grid-area: p; }
#start .bar-u { grid-area: u; justify-self: end; display: flex; gap: 8px; }
#start .cities { grid-area: c; justify-self: start; }
#start .bar-b { grid-area: b; margin-left: 0; justify-self: end; }
/* (the settings, opened from the account's button before the drive, take the screen; the bar comes back when they close) */
#settings:not([hidden]) ~ #start { visibility: hidden; }
@media (max-width: 520px) {
  #start { grid-template-areas: "h u" "p p" "c c" "b b"; }
}

/* how to play: with a mouse and keyboard, the keys; on a phone, the buttons on the screen (and the full screen, as the settings) */
#help-touch { display: none; }
@media (pointer: coarse) {
  #help-keys { display: none; }
  #help-touch { display: grid; }
  #help-touch kbd { font-family: var(--f-mm); font-size: 15px; text-align: center; }
  #help { display: block; padding: 0; background: var(--meter); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  #help .card { width: 100%; min-height: 100%; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box;
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 0 calc(18px + env(safe-area-inset-left, 0px)); }
  #help-touch { font-size: 15px; gap: 8px 14px; }
  #help-close { position: sticky; bottom: 0; padding: 12px 0 14px; background: var(--meter); box-shadow: 0 -10px 14px var(--meter); margin-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (pointer: coarse) and (orientation: landscape) {
  #help-touch { grid-template-columns: auto 1fr auto 1fr; column-gap: 14px; }
}

/* the ▲ lock (player.js): a 🔒 above ▲ while it is held, lit once dragged up to it, and kept lit (▲ too) while locked on */
#p-lock { position: fixed; z-index: 5; transform: translate(-50%, -50%); padding: 6px 10px; border-radius: 18px; font-size: 20px; line-height: 1;
  background: rgba(18,16,13,.6); border: 1px solid rgba(244,236,217,.5); color: var(--paper); pointer-events: none; }
#p-lock.hit { background: rgba(82,201,143,.7); border-color: #52c98f; }
#p-lock.run { background: rgba(255,178,46,.8); border-color: var(--amber); }
#p-gas.locked { background: rgba(82,201,143,.55); box-shadow: 0 0 0 3px #52c98f; }

/* the next turn, as a phone's maps app gives it: a big arrow, how far, which way and onto which street (ui.js nextTurn) */
#mis-turn { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 2px; }
#mis-turn[hidden] { display: none; }
#turn-ic { font-family: system-ui, sans-serif; font-size: 30px; line-height: 1; color: var(--amber); }
#turn-t { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--paper); }
#turn-t .dist { margin-right: 6px; }
/* "find one nearby": the waiting passenger (or pickup) far off is swapped for one close by */
#mis-near { pointer-events: auto; margin-top: 6px; padding: 5px 14px 7px; border: 1px solid var(--amber); border-radius: 16px; background: rgba(18,16,13,.7);
  color: var(--amber); font-family: var(--f-mm); font-size: 14px; font-weight: 700; cursor: pointer; }
#mis-near[hidden] { display: none; }
@media (pointer: coarse) and (max-height: 500px) { #turn-ic { font-size: 22px; } #turn-t { font-size: 13px; } #mis-near { font-size: 12px; padding: 3px 10px 5px; margin-top: 3px; } }

/* the settings, how to play and the credits fill the screen everywhere, not only on phones (the owner's wish): a page of their own
   over the game, its content in columns down the middle on a wide screen, the close button always in sight at the bottom */
#settings, #help, #credits { display: block; padding: 0; background: var(--meter); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#settings .card, #help .card, #credits .card { width: 100%; max-width: none; min-height: 100%; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box;
  padding: calc(16px + env(safe-area-inset-top, 0px)) max(calc(18px + env(safe-area-inset-right, 0px)), calc((100% - 1180px) / 2)) 0 max(calc(18px + env(safe-area-inset-left, 0px)), calc((100% - 1180px) / 2)); }
#set-close, #help-close, #cr-close { position: sticky; bottom: 0; margin-top: 8px; padding: 12px 0 14px; background: var(--meter); box-shadow: 0 -10px 14px var(--meter); margin-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 900px) {
  #settings .card { column-count: 2; column-gap: 40px; }
  #settings h2, #set-close { column-span: all; }
  #settings label, #settings .seg { break-inside: avoid; }
  #settings .gl { break-after: avoid; }
  #credits .card { column-count: 2; column-gap: 40px; }
  #credits h2, #cr-close { column-span: all; }
  #credits h3 { break-after: avoid; }
  #credits p { break-inside: avoid; }
  #help-keys { grid-template-columns: auto 1fr auto 1fr; column-gap: 18px; }
}
@media (min-width: 1400px) { #settings .card { column-count: 3; } }

/* the settings in headed groups (index.html .sgrp: language, account and friends, player, game, the city, sound, display, help): flat,
   each only its name over a thin line, no box round it nor round the account's and the room's rows (the owner, 2026-10-17: "i hate
   nested containers in settings"), kept whole in its column on a wide screen or a phone on its side */
#settings .sgrp { break-inside: avoid; margin: 0 0 26px; padding: 0; }
#settings .sgrp h3 { margin: 0 0 10px; padding: 0 0 5px; border-bottom: 1px solid #3d3529; font-size: 16px; line-height: 1.5; letter-spacing: .03em; color: var(--amber); }
#settings .sgrp > .seg:last-child, #settings .sgrp > label:last-child { margin-bottom: 4px; }
#settings .sgrp > button.wide { margin: 0 0 10px; }
#settings .acct-row, #settings .net-row { margin-bottom: 10px; padding: 0; border: 0; border-radius: 0; }
#settings .sgrp > button[hidden] { display: none; }
@media (pointer: coarse) {
  #settings .sgrp { margin-bottom: 14px; }
  #settings .sgrp > button.wide { min-height: 40px; font-size: 15px; }
  #settings .acct-row button, #settings .net-row button { min-height: 40px; } /* (a thumb's size: the account's and the room's buttons too) */
  /* a thumb's height, no more: the Myanmar font's tall line made each button 57px, two settings a screen on a phone on its side */
  #settings .seg button, #settings .seg.wrap button, #settings button.wide { min-height: 40px; padding: 4px 6px 5px; line-height: 1.3; }
}
/* a phone on its side: each setting on one line, its name on the left and its buttons on the right (the radio's many and the sliders
   across the column); the English hints left out, the name says it */
@media (pointer: coarse) and (max-height: 560px) {
  #settings .sgrp { display: grid; grid-template-columns: 6.2em 1fr; column-gap: 10px; align-items: center; }
  #settings .sgrp > * { grid-column: 1 / -1; }
  #settings .sgrp > .gl { grid-column: 1; margin: 0 0 8px; line-height: 1.35; }
  #settings .sgrp > .seg:not(.wrap) { grid-column: 2; margin: 0 0 8px; flex-wrap: wrap; }
  #settings .seg button { flex: 1 0 auto; white-space: nowrap; padding: 4px 8px 5px; font-size: 14px; }
  #settings .sgrp > .gl:has(+ .seg.wrap) { grid-column: 1 / -1; margin-bottom: 2px; }
  #settings .gl small, #settings label small { display: none; }
  #settings label { margin-bottom: 8px; }
  #settings h2 { margin-bottom: 4px; font-size: 19px; }
  #set-close { padding: 8px 0 9px; }
}
/* the tabs (index.html #s-tabs, ui.js STABS): the language in the head beside the name, the tabs under it kept in sight at the top as the
   page scrolls, flat, the one shown underlined; one tab at a time in one column down the middle, not in columns: a tab is short */
#settings .shead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#settings .shead h2 { margin: 0; }
#settings .shead .seg { flex: 0 1 230px; margin: 0; }
#settings .stabs { position: sticky; top: 0; z-index: 2; display: flex; margin: 8px 0 16px; background: var(--meter); border-bottom: 1px solid #3d3529; overflow-x: auto; scrollbar-width: none; }
#settings .stabs button { flex: 1 0 auto; padding: 9px 10px 8px; border: 0; border-bottom: 3px solid transparent; background: none; color: #b8ab92; font-family: var(--f-mm); font-size: 15px; white-space: nowrap; cursor: pointer; }
#settings .stabs button.on { color: var(--amber); border-bottom-color: var(--amber); }
#settings .stabs button:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
#settings .sgrp.nohead > h3 { display: none; }
#settings .sgrp[hidden] { display: none; }
#settings .card { column-count: auto; padding-left: max(calc(18px + env(safe-area-inset-left, 0px)), calc((100% - 720px) / 2)); padding-right: max(calc(18px + env(safe-area-inset-right, 0px)), calc((100% - 720px) / 2)); }
@media (pointer: coarse) and (max-height: 560px) { #settings .stabs { margin: 4px 0 10px; } #settings .stabs button { padding: 6px 10px 6px; } }
/* the phone layout's choice: only where there are thumbs to use it */
@media not all and (pointer: coarse) { #settings .tonly { display: none; } }

/* phones, GTA's layout (the settings' Phone controls; player.js PAD), after GTA San Andreas and GTA III on a phone: ◀ ▶ under the left
   thumb, the two pedals under the right (gas at the far right, brake / reverse beside it), the handbrake left of them and the horn over
   the brake, ⚡ over the gas; get out / in and ✈ higher up the right edge; ◉ at the top by the map. On foot a fixed stick on the left,
   » Run where the gas is and ⤒ jump where the brake is. The same buttons as PUBG's, only placed again */
@media (pointer: coarse) {
  body[data-tl="gta"] #p-left, body[data-tl="gta"] #p-right { width: 80px !important; height: 80px !important; right: auto; bottom: var(--b); }
  body[data-tl="gta"] #p-left { left: var(--l); }
  body[data-tl="gta"] #p-right { left: calc(var(--l) + 92px); }
  body[data-tl="gta"] #p-gas, body[data-tl="gta"] #p-rev { width: 80px !important; height: 104px !important; border-radius: 18px; left: auto; bottom: var(--b); }
  body[data-tl="gta"] #p-gas { right: var(--r); }
  body[data-tl="gta"] #p-rev { right: calc(var(--r) + 92px); }
  body[data-tl="gta"] #p-hand { left: auto; right: calc(var(--r) + 184px); bottom: calc(var(--b) + 8px); }
  body[data-tl="gta"] #p-horn { right: calc(var(--r) + 105px); bottom: calc(var(--b) + 118px); }
  body[data-tl="gta"] #p-boost { right: calc(var(--r) + 12px); bottom: calc(var(--b) + 118px); }
  body[data-tl="gta"] #p-exit { right: var(--r); bottom: calc(var(--b) + 188px); }
  body[data-tl="gta"] #p-fly { right: calc(var(--r) + 72px); bottom: calc(var(--b) + 192px); }
  body[data-tl="gta"] #p-view { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: calc(12px + 96px + 10px); } /* (beside the map, as on foot in PUBG's) */
  /* on foot: the stick fixed in its place, in a smaller part of the screen (the rest turns the camera); no 🔒, GTA has no run lock */
  body[data-tl="gta"] #p-stick { top: auto; width: 300px; height: 260px; }
  body[data-tl="gta"] #p-stick .ring { bottom: calc(var(--b) + 90px); opacity: .8; }
  body[data-tl="gta"] #p-stick .slock { display: none; }
  body[data-tl="gta"][data-tm="foot"] #p-boost { right: var(--r); bottom: var(--b); width: 80px !important; height: 80px !important; font-size: 26px !important;
    border-color: rgba(255,178,46,.8) !important; background: rgba(18,16,13,.36) !important; }
  body[data-tl="gta"][data-tm="foot"] #p-boost.on { background: rgba(255,178,46,.6) !important; }
  body[data-tl="gta"][data-tm="foot"] #p-hand { right: calc(var(--r) + 92px); bottom: calc(var(--b) + 4px); width: 72px !important; height: 72px !important; font-size: 28px !important; }
  body[data-tl="gta"] #p-sit { right: calc(var(--r) + 184px); bottom: calc(var(--b) + 12px); }
  body[data-tl="gta"] #p-dance { right: calc(var(--r) + 105px); bottom: calc(var(--b) + 118px); }
  /* the help card's lines for the one layout or the other */
  body[data-tl="gta"] #help-touch .hp, body:not([data-tl="gta"]) #help-touch .hg { display: none; }
}

/* phones, the wheel's layout (the settings' Phone controls, 'wheel'; player.js wheel): GTA's, with a wheel under the left thumb in place
   of ◀ ▶ while driving, riding, flying or on the water; on foot the stick as in GTA's, and aboard a train or a friend's car ◀ ▶ look round */
#p-wheel { display: none; }
@media (pointer: coarse) {
  body[data-wheel="1"]:not([data-tm="foot"]):not([data-tm="train"]) #p-wheel {
    display: block; position: absolute; left: var(--l); bottom: var(--b); width: 156px; height: 156px; pointer-events: auto; touch-action: none; }
  #p-wheel svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
  body[data-wheel="1"]:not([data-tm="train"]) #p-left, body[data-wheel="1"]:not([data-tm="train"]) #p-right { display: none !important; }
}

/* the page after Exit, where the browser does not let a page close itself (ui.js) */
#bye { position: fixed; inset: 0; z-index: 990; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 8, 0.88); }
#bye .card { max-width: 420px; padding: 18px 20px; border: 1px solid var(--amber); border-radius: 12px; background: var(--meter); color: var(--paper); text-align: center; }
#bye h2 { margin: 0 0 8px; font-size: 20px; color: var(--gold); line-height: 1.5; }
#bye p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; }
#bye .bye-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
#bye button.alt { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--amber); }
#bye button { padding: 8px 20px 10px; border: 0; border-radius: 6px; background: var(--amber); color: #12100d; font-family: var(--f-mm); font-size: 16px; font-weight: 700; cursor: pointer; }