/* ==========================================================================
   DESHI TESLA (দেশি টেসলা) - STYLESHEET
   ========================================================================== */

/* 1. Typography & Webfonts */
@font-face { font-family: 'Anek Bangla'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/anek-bangla-400-800-bengali.418c763509.woff2) format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1; }
@font-face { font-family: 'Anek Bangla'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/anek-bangla-400-800-latin.9d14431a27.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baloo Da 2'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fonts/baloo-da-2-600-800-bengali.323d936108.woff2) format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1; }
@font-face { font-family: 'Baloo Da 2'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fonts/baloo-da-2-600-800-latin.074ed9c674.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Galada'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/galada-400-bengali.22eba75917.woff2) format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1; }
@font-face { font-family: 'Galada'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/galada-400-latin.59a0eef638.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind Siliguri'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/hind-siliguri-700-bengali.b6033f70da.woff2) format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1; }
@font-face { font-family: 'Hind Siliguri'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/hind-siliguri-700-latin.e8f0fc0cab.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/share-tech-mono-400-latin.41e6b9f297.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tiro Bangla'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/tiro-bangla-400-bengali.7132520bbc.woff2) format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1; }
@font-face { font-family: 'Tiro Bangla'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/tiro-bangla-400-latin.bb748ffc6a.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 2. Main Game Styles, UI, HUD, Modals & Responsiveness */
/* Bright street, compact corner instruments and captions outside the driving view. */
:root {
  --tar: #15110e;        /* road tar, page ground */
  --paper: #f7efe0;      /* text on dark */
  --newsprint: #f1e9d6;  /* game-over newspaper */
  --ink: #1d1814;        /* newspaper ink */
  --hood: #ffcb1f;       /* rickshaw-hood yellow, the one loud colour */
  --led-pink: #ff3fa4;   /* LED strip */
  --led-cyan: #2ee6ff;   /* LED strip */
  --breaking: #e0242b;   /* breaking-news red */
  --news-blue: #0f2b63;  /* ticker band */
  --band: 34px;          /* the news band's height; the buttons and the spoken line sit above it */
  --volt: #ff5b3a;       /* seven-segment voltmeter */
  --scrim: rgba(10, 8, 6, 0.72);
  /* a rickshaw painter's garland: pink, cyan and yellow flowers on a green vine, one tile of three repeated sideways */
  --garland: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'><defs><ellipse id='p' cy='-5.4' rx='3.6' ry='5.3'/><g id='f' stroke='%23fff' stroke-width='1.2'><use href='%23p'/><use href='%23p' transform='rotate(72)'/><use href='%23p' transform='rotate(144)'/><use href='%23p' transform='rotate(216)'/><use href='%23p' transform='rotate(288)'/></g><path id='l' d='M0 0C2 -5 8 -8 13 -6C10 -1 5 1 0 0Z'/></defs><path d='M0 15Q10 9 20 15T40 15T60 15T80 15T100 15T120 15' fill='none' stroke='%231f8a4c' stroke-width='2'/><g fill='%2337c46a' stroke='%23135c33' stroke-width='.8'><use href='%23l' x='0' y='15'/><use href='%23l' transform='translate(40 15)'/><use href='%23l' transform='translate(40 15) rotate(180)'/><use href='%23l' transform='translate(80 15)'/><use href='%23l' transform='translate(80 15) rotate(180)'/><use href='%23l' transform='translate(120 15) rotate(180)'/></g><use href='%23f' fill='%23ff3fa4' transform='translate(20 15)'/><circle cx='20' cy='15' r='2.6' fill='%23ffcb1f'/><use href='%23f' fill='%232ee6ff' transform='translate(60 15) rotate(36)'/><circle cx='60' cy='15' r='2.6' fill='%23ff3fa4'/><use href='%23f' fill='%23ffcb1f' transform='translate(100 15)'/><circle cx='100' cy='15' r='2.6' fill='%23e0242b'/><g fill='%23fff'><circle cx='40' cy='4' r='1.3'/><circle cx='80' cy='26' r='1.3'/><circle cx='0' cy='26' r='1.3'/><circle cx='120' cy='26' r='1.3'/></g></svg>");
  /* more of the rickshaw painter's kit: the fringe that hangs from a hood's edge (pink, cyan and yellow pennants on a
     red band), and a corner bouquet of three flowers */
  --fringe: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='16' viewBox='0 0 72 16'><rect width='72' height='3' fill='%23e0242b'/><path d='M0 3H24L12 15Z' fill='%23ff3fa4'/><path d='M24 3H48L36 15Z' fill='%232ee6ff'/><path d='M48 3H72L60 15Z' fill='%23ffcb1f'/><g fill='%23fff'><circle cx='12' cy='7.5' r='1.7'/><circle cx='36' cy='7.5' r='1.7'/><circle cx='60' cy='7.5' r='1.7'/></g></svg>");
  --bouquet: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><defs><ellipse id='p' cy='-6.6' rx='4.5' ry='6.6'/><g id='f' stroke='%23fff' stroke-width='1.4'><use href='%23p'/><use href='%23p' transform='rotate(72)'/><use href='%23p' transform='rotate(144)'/><use href='%23p' transform='rotate(216)'/><use href='%23p' transform='rotate(288)'/></g><path id='l' d='M0 0C3 -7 12 -12 20 -9C15 -2 8 1 0 0Z'/></defs><g fill='%2337c46a' stroke='%23135c33' stroke-width='1'><use href='%23l' transform='translate(50 28) rotate(168)'/><use href='%23l' transform='translate(70 50) rotate(122)'/><use href='%23l' transform='translate(78 48) rotate(78)'/><use href='%23l' transform='translate(64 20) rotate(205)'/><use href='%23l' transform='translate(84 30) rotate(72)'/></g><use href='%23f' fill='%23ff3fa4' transform='translate(78 18) scale(1.35)'/><circle cx='78' cy='18' r='3.6' fill='%23ffcb1f'/><use href='%23f' fill='%23ffcb1f' transform='translate(52 26) rotate(18) scale(1.05)'/><circle cx='52' cy='26' r='2.8' fill='%23e0242b'/><use href='%23f' fill='%232ee6ff' transform='translate(74 46) rotate(40) scale(1.05)'/><circle cx='74' cy='46' r='2.8' fill='%23ff3fa4'/><g fill='%23fff'><circle cx='60' cy='48' r='1.6'/><circle cx='88' cy='34' r='1.4'/><circle cx='40' cy='12' r='1.4'/></g></svg>");
  --f-display: "Baloo Da 2", "Anek Bangla", "Noto Sans Bengali", system-ui, sans-serif;
  --f-ui: "Anek Bangla", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --f-ticker: "Hind Siliguri", "Anek Bangla", "Noto Sans Bengali", system-ui, sans-serif;
  --f-news: "Tiro Bangla", "Noto Serif Bengali", Georgia, serif;
  --f-mono: "Share Tech Mono", ui-monospace, "Courier New", monospace;
  color-scheme: dark;
}
[hidden] { display: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
html, body { height: 100%; margin: 0; overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; background: var(--tar); color: var(--paper); font-family: var(--f-ui); }
body.in-game, body.in-game #app, body.in-game #c, body.in-game #hud, body.in-game * { cursor: none !important; }
#root { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
#app { position: fixed; inset: 0; overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; background: var(--tar); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 3px; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 0; }
.loss-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.lbl { display: inline-block; font-size: 13px; letter-spacing: 0.06em; color: #fff; background: rgba(12, 10, 8, .6); padding: 1px 8px; border-radius: 999px; }
#loss { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 5.4vw, 48px); line-height: 1; color: var(--hood);
  text-shadow: 2px 2px 0 #ae2941, 4px 4px 0 #14372f, 0 0 16px rgba(0, 0, 0, .45); font-variant-numeric: tabular-nums; }
#lossBox .lbl { background: rgba(20, 55, 47, .84); box-shadow: inset 0 0 0 1px rgba(255, 203, 31, .6); }
.loss-row { display: flex; align-items: center; gap: 8px; transform-origin: left center; }
#combo { font-family: var(--f-display); font-weight: 800; font-size: clamp(18px, 3vw, 26px); color: #fff; background: var(--led-pink);
  padding: 2px 10px 0; border-radius: 8px; box-shadow: 0 3px 0 #000; }
#battBox { text-align: right; display: grid; justify-items: end; gap: 4px; }
.meter { background: #0b0908; border: 2px solid #3a332d; border-radius: 6px; padding: 2px 8px; box-shadow: inset 0 0 10px #000; }
#volt { font-family: var(--f-mono); font-size: clamp(22px, 3.6vw, 30px); color: var(--volt); text-shadow: 0 0 8px rgba(255, 91, 58, .7); letter-spacing: .04em; }
.bar { width: clamp(96px, 16vw, 150px); height: 8px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; overflow: hidden; }
#battBar { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--volt), var(--hood)); transition: width .2s; }
#battWarn { font-weight: 800; color: #fff; background: var(--breaking); padding: 1px 8px; border-radius: 6px; animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
#chargeNow { font-weight: 800; font-size: 14px; padding: 2px 10px 1px; border-radius: 999px; box-shadow: 0 2px 0 #000; white-space: nowrap; }
#chargeNow.on { color: #062b14; background: #4dff95; animation: pulseGlow 1s ease-out infinite; }
#chargeNow.on::before { content: ''; display: inline-block; width: 9px; height: 13px; margin-right: 6px; vertical-align: -1px; background: #062b14;
  clip-path: polygon(62% 0, 0 56%, 44% 56%, 30% 100%, 100% 40%, 56% 40%); }
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(77, 255, 149, .75), 0 2px 0 #000; } 100% { box-shadow: 0 0 0 12px rgba(77, 255, 149, 0), 0 2px 0 #000; } }
#chargeNow.stop { color: var(--ink); background: var(--hood); }
#chargeNow.paid { color: #50112f; background: #ffd0e8; }
#chargeNow.boarded { color: #00332a; background: #2ee6ff; font-weight: 800; }
#chargeNow.fare { color: #1c1500; background: #ffcb1f; font-weight: 800; }
#chargeNow.psStop { color: #002b20; background: #2ee6ff; font-weight: 700; }
#chargeHint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(12, 10, 8, .78);
  border: 1.5px solid rgba(255, 212, 0, .7); border-radius: 999px; padding: 2px 10px 2px 7px; white-space: nowrap; }
#chargeHint.bribe { border-color: rgba(255, 124, 195, .85); }
#chargeHint.passenger { border-color: rgba(46, 230, 255, .9); }
#chargeHint.passenger #hintArrow { fill: #2ee6ff; }
#chargeHint.dest { border-color: rgba(255, 203, 31, .95); }
#chargeHint.dest #hintArrow { fill: #ffcb1f; }
/* the same arrow as the auto on the map, turned toward the target: straight up is straight ahead */
#hintArrow { flex: none; width: 16px; height: 18px; fill: #ff3fa4; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; transition: transform .25s; }
#minimap { width: clamp(104px, 14vw, 140px); height: clamp(104px, 14vw, 140px); border-radius: 50%; border: 2px solid rgba(255,255,255,.4); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
#muteBtn { pointer-events: auto; display: grid; place-items: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(12, 10, 8, .6);
  border-radius: 50%; color: #fff; cursor: pointer; transition: transform .1s, background .15s, border-color .15s; }
#muteBtn svg { width: 17px; height: 17px; }
#muteBtn:active { transform: scale(.92); }
#muteBtn.off { color: #ff8f8f; border-color: rgba(255, 143, 143, .7); background: rgba(30, 10, 10, .7); }
/* the first run of a visit: how to drive, for a few seconds, up top where the sky is */
#controls { position: absolute; left: 50%; top: calc(66px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 14px; width: max-content; max-width: min(640px, 92vw); box-sizing: border-box; padding: 8px 14px 9px; border-radius: 14px; background: rgba(12, 10, 8, .82); color: #fff;
  font-size: 14px; line-height: 1.4; pointer-events: none; transition: opacity .5s; }
#controls .t { flex-basis: 100%; text-align: center; font-weight: 800; color: var(--hood); font-size: 13px; }
#controls .row { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#controls kbd { font-family: var(--f-mono); font-size: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; }
#controls.fade { opacity: 0; }
#touch.teach .tbtn { animation: teach 1s ease-in-out infinite; }
#touch.teach .tbtn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); background: rgba(12, 10, 8, .8);
  color: #fff; font-family: var(--f-ui); font-size: 10px; font-weight: 700; line-height: 1.4; padding: 0 6px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
#touch.teach .tbtn[data-tip] svg { margin-bottom: 10px; }
@keyframes teach { 50% { box-shadow: 0 0 0 4px var(--hood); } }
/* portrait stacks the pedals two by two: the lower row's tips would cover the upper buttons, and ব্রেক and চালান say what they do */

#alerts { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: min(44vw, 420px); }
#mobWarn { font-weight: 800; font-size: clamp(14px, 1.9vw, 18px); line-height: 1.25; color: #fff; background: rgba(196, 20, 32, .92); padding: 3px 12px 2px; border-radius: 999px; box-shadow: 0 2px 0 #000; animation: jitter .18s infinite; white-space: nowrap; }
#mobWarn small { font-size: .82em; font-weight: 600; margin-left: 4px; }
@keyframes jitter { 0% { transform: translate(0, 0); } 33% { transform: translate(-1px, 1px); } 66% { transform: translate(1px, -1px); } }
#wrongWay { font-weight: 800; font-size: clamp(13px, 1.7vw, 16px); color: var(--ink); background: var(--led-cyan); padding: 2px 10px; border-radius: 999px; box-shadow: 0 2px 0 #000; white-space: nowrap; }
@media (max-width: 640px) { #alerts { left: 16px; transform: none; top: calc(env(safe-area-inset-top, 0px) + 92px); align-items: flex-start; max-width: 58vw; } }
#vip { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: clamp(13px, 1.7vw, 16px); color: #fff; background: rgba(120, 10, 30, .9);
  padding: 2px 10px 1px; border-radius: 999px; box-shadow: 0 2px 0 #000; white-space: nowrap; }
#vipArrow { display: inline-block; color: var(--hood); transition: transform .15s; }
#vipDist { font-variant-numeric: tabular-nums; }
#grade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 75%, rgba(26, 52, 56, .08)); }
/* the colour grade: a soft edge for each time of day (daylight.js sets <html data-time>). Plain see-through colour over
   the canvas, with no blend mode or filter, so it costs a phone nothing per frame. */
[data-time="afternoon"] #grade { background: linear-gradient(to bottom, rgba(255, 196, 120, .14), transparent 38%), radial-gradient(ellipse at center, transparent 62%, rgba(110, 64, 22, .16)); }
[data-time="dusk"] #grade { background: linear-gradient(to bottom, rgba(255, 120, 90, .12), transparent 42%), radial-gradient(ellipse at center, transparent 55%, rgba(58, 18, 44, .26)); }
[data-time="night"] #grade { background: radial-gradient(ellipse at center, transparent 48%, rgba(4, 6, 22, .42)); }
#meme { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;
  padding: 16px; padding-block: calc(env(safe-area-inset-top, 0px) + 9vh) calc(env(safe-area-inset-bottom, 0px) + 13vh); }
/* the bus death's caption over everything (the map and the buttons covered it), and the driving buttons dimmed under it:
   nothing can be driven while it shows */
#meme { z-index: 6; }
#app:has(#meme:not([hidden])) #touch { opacity: .3; transition: opacity .25s; }
#meme div { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 6.4vw, 70px); line-height: 1.05; color: #fff; max-width: 18ch; text-wrap: balance;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; animation: memeIn .35s cubic-bezier(.2, 1.6, .4, 1) both; }
#memeBot { animation-delay: .6s !important; color: var(--hood) !important; }
@keyframes memeIn { from { transform: scale(2.2) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
#vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(224, 36, 43, .55) 100%); }
#floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floater { position: absolute; left: 0; top: 0; white-space: nowrap; text-align: center; transform: translate(-50%, -50%);
  font-family: var(--f-display); font-weight: 800; line-height: 1; animation: floatUp 1.4s ease-out forwards; }
.floater b { display: block; font-size: clamp(20px, 3vw, 30px); color: var(--hood); text-shadow: 0 3px 0 #000, 0 0 12px #000; }
.floater span { display: block; font-size: clamp(13px, 1.8vw, 16px); font-weight: 700; color: #fff; margin-top: 2px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px #000; } /* a full outline: readable on sky or white walls */
.floater.spent b { color: #ff7cc3; }
.floater.shout b { color: #fff; font-size: clamp(14px, 2vw, 19px); text-shadow: 0 2px 0 var(--breaking), 0 0 8px #000; }
@keyframes floatUp { 0% { opacity: 0; margin-top: 10px; scale: .6; } 12% { opacity: 1; scale: 1.15; } 25% { scale: 1; } 100% { opacity: 0; margin-top: -70px; } }

/* Messages live at the edges, never over a projected vehicle. */
/* ---------- the TV news band along the bottom edge ---------- */
/* One item crawls through at a time, right to left, on a navy band under a yellow rule. The tag on the left says what
   kind of news it is: খবর (blue) for the day's other news, সর্বশেষ (amber) after something happens, ব্রেকিং (red) for the
   big moments; its light blinks like a studio's on-air lamp. The crawl is a transform animation, so it costs no layout. */
#ticker { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--band) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box;
  display: flex; align-items: stretch; overflow: hidden; pointer-events: none; font-family: var(--f-ticker);
  background: linear-gradient(180deg, #1c4796 0%, var(--news-blue) 48%, #081838 100%); border-top: 2px solid var(--hood); box-shadow: 0 -3px 12px rgba(0, 0, 0, .3); }
#ticker .tag { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 7px; padding: 0 22px 0 12px; margin-right: -10px;
  color: #fff; font-weight: 700; font-size: 15px; background: #2b5fc4; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%); }
#ticker .tag::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff5a64; animation: onAir 1.6s ease-in-out infinite; }
#ticker .tag.latest { background: #df7a1c; }
#ticker .tag.breaking { background: var(--breaking); }
#ticker .tag.breaking::before { background: #fff; }
@keyframes onAir { 50% { opacity: .2; } }
#ticker .track { flex: 1; min-width: 0; position: relative; overflow: hidden; color: #fff; font-weight: 700; font-size: 16px; }
#ticker .item { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; will-change: transform; text-shadow: 0 1px 1px rgba(0, 0, 0, .45); }
#ticker .item::before { content: '◆'; color: var(--hood); font-size: .6em; margin: 0 10px 0 4px; }
#ticker .item.still { right: 0; overflow: hidden; text-overflow: ellipsis; } /* reduced motion: no crawl, a line at a time */
#dialogue, #hint { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; box-sizing: border-box; max-width: min(480px, 88vw); padding: 6px 14px; border-radius: 9px; background: rgba(255, 249, 237, .46); color: #1d2f2b; font-size: 17px; font-weight: 700; text-align: center; pointer-events: none;
  text-shadow: 0 0 6px rgba(255, 252, 244, .9), 0 0 2px rgba(255, 252, 244, .9); } /* see-through: a soft halo keeps the letters readable over any background */
#dialogue { bottom: calc(var(--band) + 22px + env(safe-area-inset-bottom, 0px)); }
#hint { top: calc(72px + env(safe-area-inset-top, 0px)); }
#floaters { top: calc(94px + env(safe-area-inset-top, 0px)); left: 16px; right: auto; bottom: auto; width: 165px; height: 55px; } /* just under the score, which ends at about 90px */
.floater { position: relative; transform: none; text-align: left; white-space: normal; animation: scoreFade 1.5s ease-out forwards; }
.floater b { font-size: 21px; }
.floater span { font-size: 12px; }
@keyframes scoreFade { 0% { opacity: 0; translate: 0 5px; } 15%, 70% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -6px; } }
/* Phone controls: dark see-through glass, with no blur (re-blurring the moving road under the buttons every frame cost a
   phone dearly). Left thumb: the round arrows, with the two taps above them (হর্ন and শব্দবোমা), out of the way of steering.
   Right thumb: a big চালান with ব্রেক under it, and টান beside চালান at its height, so the thumb can roll across. A thumb
   may slide from one button to the next without lifting (see initInput). Icons and short labels, a coloured glow while held. */
#touch { position: absolute; left: 0; right: 0; bottom: calc(var(--band) + 12px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: flex-end; padding: 0 14px; pointer-events: none; }
#touch .grp { display: flex; gap: 12px; }
#touch .left { flex-direction: column; align-items: center; }
#touch .row { display: flex; gap: 12px; }
#touch .right { align-items: flex-start; }
#touch .side-col { display: flex; flex-direction: column; gap: 8px; align-items: center; }
#touch .pedalcol { display: flex; flex-direction: column; gap: 10px; }
.tbtn { position: relative; display: grid; place-items: center; padding: 0; color: #fff; font-family: var(--f-display); font-weight: 800; white-space: nowrap;
  border: 1.5px solid rgba(255, 255, 255, .4); background: rgba(14, 18, 20, .42);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18); touch-action: none; pointer-events: auto; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .07s, background .12s, box-shadow .12s, opacity .2s; }
.tbtn svg { width: 28px; height: 28px; pointer-events: none; }
.tbtn span { pointer-events: none; }
.tbtn.on { transform: scale(.93); }
.tbtn.round { width: 66px; height: 66px; border-radius: 50%; }
.tbtn.round svg { width: 30px; height: 30px; }
.tbtn.round.on { background: rgba(255, 255, 255, .3); }
.tbtn.chip { width: 62px; height: 46px; border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; font-size: 10.5px; line-height: 1; }
.tbtn.chip svg { width: 19px; height: 19px; }
#tHorn.on { background: rgba(255, 255, 255, .32); }
#tBomb { color: #ff9b7d; border-color: rgba(255, 112, 82, .72); }
#tBomb span { color: #fff; }
#tBomb.on { background: rgba(228, 68, 38, .62); box-shadow: 0 0 18px rgba(255, 92, 52, .75); color: #fff; }
#tBomb.cool { opacity: .45; }
#tBoost { width: 60px; height: 60px; margin-top: 0; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ffb02e; border-color: rgba(255, 176, 46, .75); font-size: 11px; line-height: 1; }
#tBoost svg { width: 23px; height: 23px; }
#tBoost span { color: #fff; margin-top: 1px; }
#tBoost.on { background: #e88028; box-shadow: 0 0 18px rgba(255, 150, 0, .8); color: #fff; }
#tRocket { width: 60px; height: 60px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ff3fa4; border-color: rgba(255, 63, 164, .75); font-size: 11px; line-height: 1; }
#tRocket svg { width: 23px; height: 23px; }
#tRocket span { color: #fff; margin-top: 1px; }
#tRocket.on { background: #ff3fa4; box-shadow: 0 0 18px rgba(255, 63, 164, .8); color: #fff; }
#tRocket.cool { opacity: .45; }
.pedal { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; border-radius: 18px; font-size: 14px; }
.pedal svg { width: 32px; height: 32px; }
#tGas svg { color: #6ff0b0; } #tBrake svg { color: #ff8a96; }
.pedal.on { transform: scale(.95) translateY(2px); }
#tGas { width: 88px; height: 112px; border-radius: 24px; border-color: rgba(70, 230, 150, .85); font-size: 15px; }
#tGas.on { background: rgba(40, 200, 120, .6); box-shadow: 0 0 20px rgba(60, 240, 150, .75); }
#tBrake { width: 80px; height: 66px; border-color: rgba(255, 92, 108, .8); } /* a little taller than at first (58), as the owner asked */
#tBrake.on { background: rgba(220, 40, 60, .62); box-shadow: 0 0 18px rgba(255, 60, 80, .7); }
#hud.boosting .bar { box-shadow: 0 0 0 2px #e88028; }
/* ---------- menu ---------- */
#menu { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px; padding-block: calc(env(safe-area-inset-top, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 56px);
  background: linear-gradient(to top, rgba(10, 8, 6, .92) 0%, rgba(10, 8, 6, .55) 45%, rgba(10, 8, 6, 0) 75%); overflow: hidden !important; overflow-y: hidden !important; overflow-x: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; }
.help { overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255, 203, 31, .4) transparent; }
.help::-webkit-scrollbar { width: 5px; }
.help::-webkit-scrollbar-track { background: transparent; }
.help::-webkit-scrollbar-thumb { background: rgba(255, 203, 31, .45); border-radius: 4px; }
.help::-webkit-scrollbar-thumb:hover { background: rgba(255, 203, 31, .7); }
.menu-card, .menu-main, .title-wrap { overflow: visible !important; scrollbar-width: none !important; -ms-overflow-style: none !important; }
.menu-card { max-width: 600px; display: grid; gap: 14px; margin-top: auto; } /* bottom-aligned, but scrolls from the top when the window is short */
.title-wrap { overflow: visible; padding-top: 6px; }
.garland { display: block; height: 26px; width: min(364px, 84%); background: var(--garland) left center / 104px 26px round no-repeat; } /* round: whole tiles, never a cut flower */
h1.title { font-family: var(--f-display); font-weight: 800; font-size: clamp(52px, min(15vw, 14vh), 132px); line-height: 1.1; padding-top: 6px; padding-bottom: 2px; margin: 0; color: var(--hood);
  text-shadow: 5px 5px 0 var(--led-pink), 10px 10px 0 #000; text-wrap: balance; overflow: visible; }
.title-en { display: none !important; }
/* the maker's credit, small in the menu's corner, out of the card's way (the owner's name, 22 October 2026) */
.credit { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 3px); display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px 1px;
  font-size: 13px; line-height: 1.2; color: rgba(255, 255, 255, .75); text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.credit span { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-decoration-skip-ink: none; text-underline-offset: 3px; }
.credit b { font-weight: 800; color: #fff; } /* the name stands out from "Made by" (the owner asked, 24 October 2026) */
.credit svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ↗: it opens elsewhere */
.credit:hover, .credit:focus-visible { color: #fff; }
.credit:hover span, .credit:focus-visible span { text-decoration-color: #fff; }
.tagline { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 4.4vw, 34px); line-height: 1.1; margin: 0; color: #fff; text-wrap: balance; }
.how { margin: 0; font-size: 17px; line-height: 1.55; max-width: 48ch; }
.how em { font-style: normal; color: var(--hood); font-weight: 600; display: block; text-wrap: balance; }
.how em span { display: inline-block; } /* it breaks after the colon, never inside a phrase */
.how .dup { display: block; }
.tagline, .how { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .25); } /* readable over a bright street too */
.how-en { margin: -6px 0 0; font-size: 14px; line-height: 1.5; opacity: .7; max-width: 52ch; }
.play-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.cta { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1; padding: 14px 30px 10px; border: 0; border-radius: 14px;
  background: var(--hood); color: var(--ink); box-shadow: 0 6px 0 #9c7400, 0 0 0 3px #000; cursor: pointer; transition: transform .08s; }
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #9c7400, 0 0 0 3px #000; }
.cta-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; box-sizing: border-box; padding: 0; border: 0; border-radius: 14px;
  background: var(--hood); color: var(--ink); box-shadow: 0 6px 0 #9c7400, 0 0 0 3px #000; cursor: pointer; transition: transform .08s; flex: none; }
.cta-icon-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #9c7400, 0 0 0 3px #000; }
.cta-icon-btn:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 3px; }
.cta-icon-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.best { font-size: 15px; opacity: .85; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; line-height: 1.6; }
.keys .k { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
/* the rules as five short lines with a badge each, not a paragraph */
.rules { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 8px; }
.rules li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; }
.rules .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 18px; font-weight: 800; }
.rules .ic.bus { background: rgba(255, 40, 40, .35); }
.rules .ic.volt { background: #ffd400; color: #111; }
.rules .ic.tk { background: #ed71b6; color: #231121; }
.rules .ic.ps { background: #2ee6ff; color: #00332a; }
.rules strong { display: block; font-size: 15px; line-height: 1.3; color: var(--hood); }
.rules span { font-size: 13.5px; line-height: 1.4; opacity: .92; }
.help .keys-note { font-size: 13px; line-height: 1.5; opacity: .75; margin: 8px 0 0; }
.keys kbd { font-family: var(--f-mono); font-size: 12px; border: 1px solid rgba(255,255,255,.35); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }

/* ---------- newspaper ---------- */
#paper { position: absolute; inset: 0; overflow: auto; background: rgba(0, 0, 0, .7); display: flex; justify-content: center; align-items: flex-start;
  padding: 16px; padding-block: calc(env(safe-area-inset-top, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 56px); }
.np { background: radial-gradient(ellipse at 50% 38%, transparent 58%, rgba(120, 88, 36, .13) 100%), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .26  0 0 0 0 .12  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), var(--newsprint); color: var(--ink); width: 100%; max-width: 900px; padding: 14px 20px 20px; font-family: var(--f-news);
  box-shadow: 0 24px 70px rgba(0,0,0,.6); transform: rotate(-1.2deg); animation: paperIn .55s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes paperIn { from { transform: rotate(-14deg) scale(.4); opacity: 0; } to { transform: rotate(-1.2deg) scale(1); opacity: 1; } }
.np header { text-align: center; border-bottom: 4px double var(--ink); padding-bottom: 6px; }
.np-name { font-family: var(--f-news); font-size: clamp(34px, 7vw, 54px); line-height: 1; }
/* a front page's furniture: the two ears beside the masthead (where a real paper keeps the weather), a red kicker over
   the headline, the dateline in bold, and the grain and aged edges of newsprint */
.np-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.np-ear { margin: 0; justify-self: start; display: grid; padding: 3px 9px 2px; border: 1.5px solid var(--ink); font-family: var(--f-ui); line-height: 1.15; text-align: center; }
.np-ear:last-child { justify-self: end; }
.np-ear small { font-size: 11px; font-weight: 600; opacity: .75; }
.np-ear b { font-family: var(--f-display); font-weight: 800; font-size: 15px; color: #b3121b; }
.np-kicker { margin: 10px 0 -4px; display: flex; align-items: center; gap: 7px; font-family: var(--f-display); font-weight: 800; font-size: 14px; line-height: 1.2; color: #b3121b; }
.np-kicker::before { content: ''; width: 10px; height: 10px; background: #b3121b; }
.np-cols p b { font-weight: 700; }
.np-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; border-top: 1px solid var(--ink); margin-top: 8px; padding-top: 4px; }
.np h2 { font-size: clamp(24px, 4.4vw, 36px); line-height: 1.15; margin: 10px 0 12px; text-wrap: balance; }
/* a front page: the photo beside the story on wide screens, stacked on narrow ones */
/* wide: the photo on the left; on the right the clipping, then the quote and the story. Narrow: one column in that order */
.np-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "photo buy" "photo story"; grid-template-rows: auto 1fr;
  column-gap: 18px; row-gap: 12px; align-items: start; }
.np-left { grid-area: photo; } .np-buy { grid-area: buy; } .np-right { grid-area: story; align-self: stretch; }
.np-body figure { margin: 0; }
.np img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #999; border: 1px solid rgba(0, 0, 0, .35);
  filter: brightness(1.12) contrast(1.04) saturate(.82) sepia(.12); } /* a slightly faded colour print, like a Dhaka front page */
.np figcaption { font-size: 12px; margin-top: 4px; font-style: italic; }
.np-left, .np-right, .np-buy { min-width: 0; }
.np-right, .np-buy { border-left: 1px solid rgba(0, 0, 0, .25); padding-left: 16px; }
.np-buy { padding-top: 13px; margin-bottom: -12px; padding-bottom: 12px; } /* room for the clipping's tab; the rule runs on unbroken into the story */
.np-cols { font-size: 15px; line-height: 1.5; }
.np-cols p { margin: 0 0 8px; }
/* the shareable pieces: the loss stamped on the photo, what it would have bought, the quote */
.np-photo { position: relative; }
.np-stamp { position: absolute; right: 10px; bottom: 10px; transform: rotate(-4deg); display: flex; flex-direction: column; align-items: center; padding: 3px 12px 1px;
  background: rgba(241, 233, 214, .94); border: 3px solid #b3121b; color: #b3121b; font-family: var(--f-display); font-weight: 800; line-height: 1.05; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.np-stamp small { font-size: 13px; }
.np-stamp b { font-size: clamp(22px, 3.4vw, 30px); }
/* এই টাকায় হতো: a clipping to cut out and keep (a dashed edge, scissors on the corner), the comparison in bold with its
   quantity in red, and the real figure under it in small type: the figure is what makes the joke land */
.np-price { position: relative; margin-top: 0; padding: 13px 14px 8px; border: 2px dashed rgba(29, 24, 20, .5); border-radius: 3px; background: rgba(255, 255, 255, .32); }
.np-price span { position: absolute; left: 10px; top: -13px; padding: 3px 9px 1px; background: #b3121b; color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 14px;
  line-height: 1.3; white-space: nowrap; transform: rotate(-1.5deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.np-price::after { content: ''; position: absolute; right: 10px; top: -11px; width: 30px; height: 20px;
  background: var(--newsprint) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -10 26 20'><g fill='none' stroke='%231d1814' stroke-width='2.2' stroke-linecap='round'><circle cx='-7' cy='-5' r='4'/><circle cx='-7' cy='5' r='4'/><path d='M-3.5 -3L12 4M-3.5 3L12 -4'/></g></svg>") center / 24px 18px no-repeat; }
.np-price small { display: block; margin-top: 2px; font-family: var(--f-news); font-size: 12.5px; line-height: 1.35; opacity: .75; }
.np-price small:empty { display: none; }
/* a friend's challenge (CHALLENGE): on the menu, in the score's label, and how it went on the paper */
.dare { margin: 0; padding: 6px 12px 4px; border-radius: 10px; background: rgba(255, 63, 164, .2); border: 2px solid var(--led-pink); font-weight: 700; font-size: 17px; line-height: 1.35; }
.dare b { color: var(--hood); font-family: var(--f-display); font-size: 1.15em; }
#target { margin-left: 6px; opacity: .85; }
#target.won { color: #6ff0b0; opacity: 1; }
.np-dare { margin: 8px 0 0; font-family: var(--f-display); font-weight: 800; font-size: 16px; color: #a0217a; }
.np-price b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(19px, 2.6vw, 24px); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.np-price b em { font-style: normal; color: #b3121b; }
.np-quote { position: relative; margin: 2px 0 10px; padding-left: 30px; }
.np-quote::before { content: '“'; position: absolute; left: 0; top: -12px; font-size: 56px; line-height: 1; color: #b3121b; }
.np-quote p { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.np-quote cite { display: block; margin-top: 3px; font-size: 13px; }
@media (max-width: 760px) {
  .np-body { grid-template-columns: 1fr; grid-template-areas: "photo" "buy" "story"; grid-template-rows: auto; gap: 10px; }
  .np-buy { border-left: 0; padding: 4px 0 0; margin: 0; }
  .np img { aspect-ratio: 16 / 9; }
  .np-right { border-left: 0; padding-left: 0; }
}
.np-foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--ink); font-size: 14px; line-height: 1.5; font-style: italic; }
.np-imprint { margin: 5px 0 0; font-size: 11.5px; line-height: 1.3; text-align: center; opacity: .7; } /* a real paper's imprint line */
.np-imprint a { color: inherit; font-weight: 700; text-decoration: underline dotted; text-underline-offset: 2px; } /* the editor's name opens the editor's page */
.np-imprint a:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 2px; }
.np-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 16px -20px -20px; padding: 12px 20px 14px; font-family: var(--f-ui);
  position: sticky; bottom: -16px; background: var(--newsprint); border-top: 1px solid rgba(0,0,0,.2); }
.np-actions .best { opacity: 1; }
.np-actions .share { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1; min-height: 48px; padding: 12px 18px 8px; border: 3px solid var(--ink);
  border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.np-actions .share:active { transform: translateY(2px); }
.linkish { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.np-subline { flex-basis: 100%; margin: -4px 0 0; font-family: var(--f-ui); font-size: 14px; line-height: 1.4; } /* under the record, not in the paper */
.np-subline .linkish { color: #b3121b; }
.sub-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read out, not shown: the field says what it is */
.sub-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-say { margin: 0; min-height: 1.4em; font-size: 15px; line-height: 1.45; font-weight: 600; color: #2f6b45; }
.sub-say.bad { color: #b3121b; }
.sub-say:empty { min-height: 0; }
.sub-x { position: absolute; right: 6px; top: 4px; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.sub-x:focus-visible, .linkish:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 2px; }
/* মোস্ট ওয়ান্টেড (WANTED): a small poster tag in the menu's top corner, a line on the paper beside the list's offer,
   and the board itself as a police wanted poster over everything */
/* the menu's top corner: creator support (SupportKori) and মোস্ট ওয়ান্টেড, side by side */
.menu-corner { position: absolute; right: 14px; top: calc(env(safe-area-inset-top, 0px) + 14px); display: flex; align-items: center; gap: 10px; }
.support-btn, .fb-page { display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50%; background: #ff5e3a; color: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35); text-decoration: none; }
.support-btn svg, .fb-page svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.support-btn:active, .fb-page:active { transform: translateY(2px); }
.support-btn:focus-visible, .fb-page:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 2px; }
.wanted-tag { min-height: 40px; padding: 8px 14px 5px; border: 2px solid var(--ink);
  border-radius: 4px; background: var(--newsprint); color: #b3121b; font-family: var(--f-display); font-weight: 800; font-size: 16px; line-height: 1.1;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35); transform: rotate(2deg); cursor: pointer; }
.wanted-tag:active { transform: rotate(2deg) translateY(2px); }
.wanted-tag:focus-visible, .w-tabs button:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 2px; }
#npLines { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
#npLines:not(:has(> :not([hidden]))) { display: none; }
/* the maker, on the paper every run ends on (the menu's corner was easy to miss: a player asked where the developer
   was, 23 October 2026); at the right end of the line on a laptop, so the paper does not grow */
.np-credit { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink); opacity: .8; white-space: nowrap;
  text-decoration: none; }
.np-credit span { text-decoration: underline; text-decoration-color: rgba(29, 24, 20, .35); text-decoration-skip-ink: none; text-underline-offset: 3px; }
.np-credit b { font-weight: 800; }
.np-credit svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.np-credit:hover, .np-credit:focus-visible { opacity: 1; }
.np-credit:hover span, .np-credit:focus-visible span { text-decoration-color: currentColor; }
.np-credit:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 2px; }
/* a phone has a second copy on the record's line instead (the owner keeps the phone's button area under 175 px) */
.np-record { display: contents; } .np-credit-phone { display: none; }
/* the name, asked on the paper itself when a run makes the poster's top 20 and the phone has none (the owner found the
   board full of অজ্ঞাতনামা চালক); one ask at a time, so the list's offer steps aside while it shows. 30 px tall on a
   laptop, so the line is barely taller and a 930x675 paper still fits; 40 px on a phone */
.np-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-left: 8px; vertical-align: middle; }
#npNameIn { width: 210px; min-width: 0; min-height: 30px; box-sizing: border-box; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 8px; background: #fffdf7; color: var(--ink);
  font: 15px/1.2 "Anek Bangla", system-ui, sans-serif; user-select: text; -webkit-user-select: text; }
#npNameIn:focus-visible, .np-name-go:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 2px; }
.np-name-go { min-height: 30px; padding: 5px 12px 2px; border: 2px solid var(--ink); border-radius: 8px; background: var(--hood); color: var(--ink);
  font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.1; cursor: pointer; }
.np-name-go:disabled { opacity: .6; }
.np-name-say { font-size: 13px; font-weight: 700; color: #2f6b45; }
.np-name-say.bad { color: #b3121b; }
.np-name-say:empty { display: none; }
#wanted { position: absolute; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 6, .62);
  padding: calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 16px) max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box; touch-action: auto; user-select: text; -webkit-user-select: text; }
.w-card { position: relative; width: 100%; max-width: 440px; max-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 14px;
  background: var(--newsprint); color: var(--ink); border: 2px dashed rgba(29, 24, 20, .5); border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  font-family: var(--f-ui); text-align: center; }
.w-card h2 { margin: 10px 0 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(36px, 10vw, 48px); line-height: 1; color: #b3121b; }
.w-lead { margin: 0 8px; font-size: 14px; line-height: 1.45; }
.w-tabs { display: flex; justify-content: center; gap: 6px; }
.w-tabs button { min-height: 38px; padding: 7px 14px 4px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink);
  font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.1; cursor: pointer; }
.w-tabs button[aria-selected="true"] { background: var(--ink); color: var(--newsprint); }
.w-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 0; list-style: none; text-align: left; border-top: 2px solid var(--ink); }
.w-list li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 7px 6px 5px; border-bottom: 1px dashed rgba(29, 24, 20, .35); font-size: 16px; line-height: 1.3; }
.w-list li.me { background: #ffe08a; }
.w-list li.w-wait { display: block; padding: 18px 6px; border: 0; text-align: center; opacity: .8; }
.w-rank { font-family: var(--f-display); font-weight: 800; color: #b3121b; }
.w-list li:nth-child(-n+3) .w-rank { font-size: 1.25em; }
.w-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.w-who.anon { font-weight: 400; font-style: italic; opacity: .7; }
.w-loss { font-family: var(--f-display); font-weight: 800; white-space: nowrap; }
.w-me { margin: 0; font-size: 14px; font-weight: 700; }
.w-name { display: grid; gap: 6px; text-align: left; }
.w-name label { font-size: 13px; font-weight: 700; }
#wNameIn { flex: 1 1 160px; min-width: 0; min-height: 46px; box-sizing: border-box; padding: 9px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fffdf7; color: var(--ink);
  font: 16px/1.2 "Anek Bangla", system-ui, sans-serif; user-select: text; -webkit-user-select: text; } /* 16px: smaller, and an iPhone zooms in */
#wNameIn:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 2px; }
#wNameSend { flex: 0 0 auto; font-size: 18px; min-height: 46px; padding: 11px 16px 8px; box-shadow: 0 4px 0 #9c7400, 0 0 0 2px #000; }
#wNameSend:disabled { opacity: .6; }
.w-fine { margin: 0; font-size: 12.5px; opacity: .8; }
.w-fine a { color: inherit; }
/* inside Facebook, Messenger, Instagram or TikTok (HEALTH.paper): how to get to the phone's own browser, which can share */
.np-inapp { flex-basis: 100%; margin: 0; padding: 7px 10px 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; line-height: 1.45;
  background: #fff3c4; border-left: 4px solid #b3121b; border-radius: 4px; }
/* the install offer (INSTALL): a quiet row under the buttons, on phones only, from the second run */
/* the paper's two small buttons beside আবার চালান: Home (back to the title screen) and, on phones, Install (INSTALL);
   an icon over a short word, so on a phone both fit in আবার চালান's row */
.np-home, .np-install, .np-share-open { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 60px; min-height: 48px;
  margin: 0; padding: 4px 10px 3px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 12px; background: #fff8e6; color: var(--ink);
  font-family: var(--f-display); font-weight: 800; font-size: 12.5px; line-height: 1.1; cursor: pointer; }
.np-home svg, .np-install svg, .np-share-open svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.np-install svg { stroke: #1f8a4c; }
.np-home:active, .np-install:active, .np-share-open:active { transform: translateY(2px); }
.np-home:focus-visible, .np-install:focus-visible, .np-share-open:focus-visible { outline: 3px solid var(--led-cyan); outline-offset: 2px; }
.np-break { display: none; }
/* a phone's one শেয়ার (the owner's choice, 23 October 2026: one row of buttons instead of two): the picture and the video
   in a small menu over the bar, or straight to the one there is (game.js). On a laptop the opener is gone and the box
   round the two buttons is nothing at all, so they sit in the row as before */
.np-actions .np-share-open { display: none; }
.np-shares { display: contents; }
.np-install-how { flex-basis: 100%; margin: 0; padding: 6px 10px; font-size: 14px; line-height: 1.45; background: #e7f4ea; border-left: 4px solid #1f8a4c; border-radius: 4px; }
.np-actions .np-inapp .share { flex: none; font-size: 17px; min-height: 40px; padding: 9px 14px 6px; text-decoration: none; display: inline-flex; align-items: center; }
.np-inapp.nudge { animation: nudge .9s ease-out; }
@keyframes nudge { 0%, 40% { background: #ffd34d; transform: scale(1.02); } 100% { background: #fff3c4; transform: none; } }
@media (max-width: 768px), (max-height: 600px) {
  .np { padding: 10px 12px 12px; }
  .np-name { font-size: clamp(20px, 4.5vw, 30px); }
  .np-mast { grid-template-columns: 1fr; } .np-ear { display: none; }
  .np-meta { font-size: 11px; margin: 3px 0; }
  .np h2 { font-size: clamp(16px, 3.4vw, 21px); margin: 5px 0 6px; }
  .np-actions { gap: 6px 8px; flex-wrap: wrap; margin: 10px -12px -12px; padding: 8px 12px 10px; }
  .np-actions .cta { flex: 1 1 0; min-width: 0; order: 1; min-height: 38px; font-size: 16px; padding: 6px 12px 5px; box-shadow: 0 3px 0 #9c7400, 0 0 0 2px #000; border-radius: 9px; white-space: nowrap; }
  .np-actions .np-share-open { display: inline-flex; order: 2; } .np-install { order: 3; } .np-home { order: 4; }
  .np-home, .np-install, .np-share-open { min-width: 44px; min-height: 38px; padding: 4px 8px 3px; font-size: 11px; border-radius: 9px; }
  .np-home svg, .np-install svg, .np-share-open svg { width: 17px; height: 17px; }
  .np-shares { position: absolute; right: 8px; bottom: calc(100% + 4px); z-index: 3; display: none; flex-direction: column; gap: 6px; width: min(200px, calc(100% - 16px));
    padding: 8px; box-sizing: border-box; background: var(--newsprint); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
  .np-actions.shares-open .np-shares { display: flex; }
  .np > .np-actions { position: relative; }
  .np-shares .share { flex: none; width: 100%; }
  .np-actions .share { order: 5; flex: 1 1 0; min-width: 0; font-size: 14px; min-height: 38px; padding: 6px 10px 5px; border-width: 2px; border-radius: 9px; white-space: nowrap; }
  .np-record { order: 6; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 2px; }
  .np-actions .best { font-size: 12px; }
  .np-credit-phone { display: inline-flex; margin-left: auto; font-size: 11px; } #npLines .np-credit { display: none; }
  .np-subline { order: 7; margin-top: 2px; font-size: 12px; }
  #npLines { flex-direction: column; align-items: stretch; } #npWanted:not([hidden]) ~ #npSubLine:not([hidden])::before { content: none; }
  .np-name { display: flex; margin: 4px 0 0; } #npNameIn { flex: 1 1 0; width: auto; font-size: 14px; min-height: 36px; }
  .np-name-go { min-height: 36px; font-size: 13px; } .np-name-say { flex-basis: 100%; font-size: 12px; }
  .np-install-how { order: 8; font-size: 12px; } .np-inapp { order: 9; font-size: 12px; }
}
@media (max-width: 480px) { .np { padding: 14px 14px 16px; } .np-actions { margin: 16px -14px -16px; padding: 12px 14px 14px; } }

#perf { position: absolute; top: 38%; left: max(4px, env(safe-area-inset-left)); padding: 3px 6px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff;
  font: 10px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: pre; pointer-events: none; }
/* the loading screen: the name on a painted panel, like the back of a rickshaw, framed in yellow with a pink rule and
   a garland above and below; the line under it breathes, so a slow phone still looks alive */
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--tar); }
#loading .ld { display: grid; justify-items: center; text-align: center; gap: 8px; width: min(320px, 82vw); box-sizing: border-box; padding: 14px 16px 16px;
  background: transparent; border: none; box-shadow: none; }
#loading .garland { width: 100%; margin: 0 auto; }
#loading b { font-family: var(--f-display); font-weight: 800; font-size: clamp(38px, 12vw, 52px); line-height: 1.1; padding-top: 4px; color: var(--hood); text-shadow: 3px 3px 0 #ae2941, 6px 6px 0 #0b211c; text-align: center; width: 100%; display: block; }
#loading .ld span { font-family: var(--f-ui); font-size: 16px; color: var(--paper); animation: breathe 1.4s ease-in-out infinite; }
/* the boot guard's message (see the script after #loading): what went wrong, in plain words, and a retry */
#loading.fail .ld span { display: none; }
#bootMsg { margin: 2px 0 4px; font-family: var(--f-ui); font-size: 16px; line-height: 1.5; text-align: center; color: var(--paper); }
#bootRetry { font-size: 21px; padding: 11px 22px 8px; }
#loading.fail, #loading.slow { z-index: 20; } /* over the game, when the phone takes its graphics away mid-run */
@keyframes breathe { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  #mobWarn, #battWarn, #loading .ld span { animation: none; }
  .np { animation: none; }
}
.battery-label { font-size: 14px; color: #183c34; background: #fff7e8ed; padding: 1px 8px; border-radius: 6px; }
.battery-label strong { font-size: 20px; }
#minimap { width: 92px; height: 92px; border-color: #fff9; box-shadow: 0 2px 6px #0003; }
.bar { width: 92px; height: 7px; }
#chargeHint { font-size: 12px; }
#hintText i { font-style: normal; }
#chargeNow { font-size: 12px; padding: 2px 6px; }
/* #muteBtn is styled in loss-head */
#alerts { top: 14px; max-width: 45vw; }
#mobWarn { animation: none; white-space: normal; }
#hint { font-size: 14px; }
#menu { background: linear-gradient(to top, #153b35f5, #153b3580 45%, transparent 85%); }
.menu-card { gap: 12px; max-width: 560px; }
h1.title { text-shadow: 3px 3px 0 #ae2941, 6px 6px 0 #14372f; }
.how { font-size: 20px; }
/* কীভাবে খেলবেন, open from the start (people missed it folded away): a see-through card under the play button, so the
   title and রাস্তায় নামেন come first and the street stays clear on the right. On desktops the rules sit in two columns
   so it all fits without scrolling; only a phone on its side, too short for that, puts it beside the title. Closing it
   is remembered (game.js). While it is open the menu's own summary lines, which say the same, step aside. */
.menu-main { display: grid; gap: 12px; min-width: 0; }
.help { font-size: 15px; max-width: 48ch; box-sizing: border-box; border-radius: 14px; }
.help[open] { padding: 0 14px 12px; background: rgba(10, 18, 16, .58); border: 1px solid rgba(255, 255, 255, .14); } /* nothing above the pinned heading */
.help summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; font-family: var(--f-display); font-weight: 800; font-size: 17px; color: var(--hood); }
.help summary::-webkit-details-marker { display: none; }
.help summary::after { content: ''; width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .2s; }
.help[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.help:not([open]) summary { text-decoration: underline; text-underline-offset: 4px; }
.help p { margin: 4px 0 12px; }
.help .rules { margin-top: 0; }
.menu-card:has(.help[open]) .how .dup { display: none; }
/* Only the rules scroll, never the page: when the screen is short (a small phone, a friend's challenge on the menu, big
   system fonts) the card shrinks under the title and the play button and scrolls inside itself, its heading pinned on
   top and a fade at the bottom while there is more (game.js sets .scrolled and .more). The menu itself can still
   scroll, but only if the title and the play button alone do not fit. */
.menu-card { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
.menu-main { flex: none; }
.help { flex: 0 1 auto; min-height: 0; max-height: min(480px, calc(100dvh - 180px)); overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.help summary { position: sticky; top: 0; z-index: 1; margin: 0 -14px; padding: 0 14px; border-radius: 14px 14px 0 0; } /* no fade-in: half see-through, the rules showed through it */
/* the open card's heading carries a hood's fringe along its top and a bouquet in its corner; it is pinned, so they stay
   in view and the rules never scroll over them */
.help[open] summary { padding-top: 12px; background: var(--fringe) left top / 72px 16px round no-repeat, var(--bouquet) right 6px top 4px / 60px 60px no-repeat; }
.help.scrolled summary { background: var(--fringe) left top / 72px 16px round no-repeat, var(--bouquet) right 6px top 4px / 60px 60px no-repeat, rgba(12, 21, 19, .95); box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .6); }
.help.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); }
@media (min-width: 760px) and (min-height: 501px) {
  .menu-card { max-width: 680px; }
  .menu-main { max-width: 560px; }
  .help { max-width: 680px; }
  .help .rules { grid-template-columns: 1fr 1fr; column-gap: 18px; }
}
.np { transform: none; box-sizing: border-box; animation: none; }
.np-actions { position: static; }
#paper { box-sizing: border-box; padding: 12px; }
.np img { object-fit: cover; aspect-ratio: 16 / 9; max-height: 300px; background: #999; filter: brightness(1.03) saturate(.92); }
/* a photo taken on a phone held upright is cropped to a landscape frame round its middle, like the shared image */
.np img.tall { object-fit: cover; aspect-ratio: 4 / 3; max-height: none; }
/* the page never runs off the screen: the story scrolls inside it and the buttons stay at the bottom */
#paper { overflow: hidden; align-items: stretch; }
.np { display: flex; flex-direction: column; max-height: 100%; align-self: flex-start; }
.np-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; }
.np-actions { flex: none; margin-top: 10px; }
@media (min-width: 761px) and (min-height: 650px) {
  .np { padding: 12px 18px; }
  .np h2 { font-size: 29px; }
  .np-cols { font-size: 14px; line-height: 1.4; }
  .np-cols p { margin-bottom: 6px; }
  .np-quote { margin: 8px 0 6px; }
  .np-quote p { font-size: 17px; }
  .np-actions { margin: 10px -18px -12px; padding: 10px 18px; }
  .np-foot { font-size: 13px; margin-top: 8px; }
}
/* a short laptop screen (930x675): the kicker over the headline took the room, so the photo gives it back; and the
   text a little tighter, since the paper is written afresh each run and a long one (a two-line এই টাকায় হতো over a
   three-paragraph story) ran 17 px over in one paper in six, before the name box (23 October 2026) */
@media (min-width: 761px) and (max-height: 720px) {
  .np img { max-height: 250px; }
  .np h2 { margin: 6px 0 8px; }
  .np-price { padding: 11px 12px 6px; }
  .np-quote { margin: 4px 0 4px; } .np-quote p { font-size: 16px; }
  .np-cols { font-size: 13px; line-height: 1.35; } .np-cols p { margin-bottom: 4px; }
  .np-foot { font-size: 12.5px; line-height: 1.4; margin-top: 6px; padding-top: 6px; }
  .np-imprint { margin-top: 3px; }
  .np-actions { row-gap: 6px; }
}
@media (min-width: 761px) and (max-height: 690px) { .np img { max-height: 225px; } } /* and the imprint line under the committee */
@media (pointer: coarse) {
  :root { --band: 30px; }
}
@media (max-width: 640px) {
  .hud-top { padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 0; }
  #menu { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); } /* room for the rules card on a small phone */
  #loss { font-size: 34px; }
  .lbl { font-size: 12px; }
  #floaters { left: 10px; top: 76px; width: 155px; }
  #hintText i { display: none; } /* on a phone the pill keeps the icon, distance and direction: ৳ ৫০ মি ডানে */
  #alerts { left: 10px; top: calc(132px + env(safe-area-inset-top, 0px)); transform: none; max-width: calc(100vw - 135px); align-items: flex-start; }
  #hint { top: 176px; left: 10px; transform: none; max-width: calc(100vw - 150px); text-align: left; padding: 3px 8px; font-size: 12.5px; background: rgba(255, 249, 237, .38); }
  :root { --band: 30px; }
  #ticker .track { font-size: 14.5px; }
  #ticker .tag { font-size: 13px; padding: 0 19px 0 10px; }
  /* a phone's spoken line sits at the left edge under the HUD, over the buildings: lower down it covered the auto */
  #dialogue { top: calc(214px + env(safe-area-inset-top, 0px)); bottom: auto; left: 10px; transform: none; max-width: calc(100vw - 90px); text-align: left; padding: 4px 10px;
    background: rgba(255, 249, 237, .42); font-size: 15px; }
  .np-meta span:nth-child(2) { display: none; }
  .np-mast { grid-template-columns: 1fr; } .np-ear { display: none; } /* no room for the ears beside the masthead */
}
@media (max-width: 640px) and (max-height: 780px) and (orientation: portrait) {
  .menu-main { gap: 8px; } /* a small phone: the rules card fits without scrolling */
  .rules { gap: 6px; }
}
@media (max-height: 580px) and (orientation: landscape) {
  #minimap { width: 80px; height: 80px; }
  #chargeHint { font-size: 11px; }
  #battBox { gap: 3px; }
  .battery-label { font-size: 13px; padding: 1px 6px; }
  .battery-label strong { font-size: 18px; }
  .bar { width: 80px; height: 6px; }
  #muteBtn { width: 30px; height: 30px; min-width: 30px; min-height: 30px; } #muteBtn svg { width: 16px; height: 16px; }
  :root { --band: 26px; }
  #ticker .track { font-size: 13px; }
  #touch {
    bottom: calc(var(--band) + 6px + env(safe-area-inset-bottom, 0px));
    padding: 0 max(18px, env(safe-area-inset-right, 18px));
    padding-left: max(18px, env(safe-area-inset-left, 18px));
  }
  #touch .grp { gap: 10px; }
  #touch .row { gap: 10px; }
  #touch .pedalcol { gap: 8px; }
  #touch .side-col { gap: 8px; }
  .tbtn.round { width: 62px; height: 62px; }
  .tbtn.round svg { width: 28px; height: 28px; }
  .tbtn.chip { width: 58px; height: 42px; font-size: 10px; border-radius: 13px; }
  .tbtn.chip svg { width: 18px; height: 18px; }
  #tBoost, #tRocket { width: 58px; height: 58px; font-size: 10.5px; margin-top: 0; }
  #tBoost svg, #tRocket svg { width: 22px; height: 22px; }
  #tGas { width: 82px; height: 100px; font-size: 14px; border-radius: 22px; }
  #tGas svg { width: 28px; height: 28px; }
  #tBrake { width: 76px; height: 60px; font-size: 13px; border-radius: 17px; }
  #tBrake svg { width: 26px; height: 26px; }
  .pedal svg { width: 28px; height: 28px; }
  #dialogue { top: 120px; bottom: auto; left: 10px; transform: none; max-width: 32vw; text-align: left; font-size: 12.5px; }
  #hint { top: 55px; max-width: 35vw; font-size: 11.5px; }
  #menu { padding-bottom: 12px; padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .credit { right: max(14px, env(safe-area-inset-right, 14px)); left: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 2px); font-size: 11px; z-index: 10; }
  .menu-corner {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: max(14px, env(safe-area-inset-right, 14px));
    gap: 8px;
    z-index: 10;
  }
  .support-btn { width: 34px; height: 34px; }
  .support-btn svg { width: 18px; height: 18px; }
  .wanted-tag { min-height: 34px; padding: 6px 12px 3px; font-size: 13.5px; }
  .menu-card { gap: 4px; overflow: visible !important; }
  .title-en, .menu-card .garland { display: none; }
  .menu-card { flex-direction: row; align-items: flex-end; gap: 16px; max-width: 980px; }
  .menu-main { flex: 1 1 360px; max-width: 460px; gap: 4px; overflow: visible !important; padding-top: 8px; }
  .title-wrap { overflow: visible; padding-top: 6px; }
  .help {
    flex: 0 1 360px;
    min-width: 260px;
    margin-bottom: 22px;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
  }
  .help[open] { padding: 0 10px 6px; }
  .help summary { margin: 0 -10px; padding: 0 10px; min-height: 32px; font-size: 13.5px; }
  .rules { gap: 4px; margin-bottom: 0; }
  .rules li { grid-template-columns: 22px 1fr; gap: 6px; }
  .rules .ic { width: 22px; height: 22px; font-size: 12px; }
  .rules strong { font-size: 12px; }
  .rules span { font-size: 11px; line-height: 1.25; }
  .help .keys { display: none; }
  h1.title { font-size: clamp(32px, 8.5vh, 42px); line-height: 1.2; padding-top: 8px; padding-bottom: 2px; margin: 0; overflow: visible; }
  .tagline { font-size: clamp(16px, 4.2vh, 22px); line-height: 1.25; }
  .how { font-size: clamp(11.5px, 2.8vh, 13.5px); line-height: 1.35; }
  .cta#playBtn { font-size: 18px; padding: 8px 18px 6px; min-height: 38px; }
  .cta-icon-btn { width: 38px; height: 38px; min-height: 38px; border-radius: 9px; box-shadow: 0 4px 0 #9c7400, 0 0 0 2px #000; }
  .cta-icon-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #9c7400, 0 0 0 2px #000; }
  .cta-icon-btn svg { width: 18px; height: 18px; stroke-width: 2.2; }

  /* Newspaper in short landscape */
  #paper { padding: 4px 8px; }
  .np { padding: 6px 10px 8px; }
  .np-name { font-size: 20px; }
  .np-mast { grid-template-columns: 1fr; }
  .np-ear { display: none; }
  .np-meta { font-size: 10px; margin: 2px 0; }
  .np-kicker { font-size: 10.5px; margin: 4px 0 0; }
  .np h2 { font-size: 15px; margin: 2px 0 3px; line-height: 1.2; }
  .np-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    grid-template-areas: "photo story" "buy story" !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: start !important;
  }
  .np-left {
    grid-area: photo !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .np-left figure {
    margin: 0 !important;
    width: 100% !important;
  }
  .np-photo {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 2px !important;
  }
  .np img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    max-height: 115px !important;
    background: #999 !important;
    border: 1px solid rgba(0, 0, 0, .35) !important;
  }
  .np figcaption {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
  }
  .np-stamp {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    padding: 2px 7px 1px !important;
    transform: rotate(-3deg) !important;
    border-width: 2px !important;
  }
  .np-stamp small {
    font-size: 9.5px !important;
    line-height: 1 !important;
  }
  .np-stamp b {
    font-size: 16px !important;
    line-height: 1.1 !important;
  }
  .np-buy {
    grid-area: buy !important;
    min-width: 0 !important;
    border-left: 0 !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
  }
  .np-price {
    padding: 8px 10px 4px !important;
    border-width: 1.5px !important;
  }
  .np-price span {
    font-size: 10.5px !important;
    top: -9px !important;
    left: 8px !important;
    padding: 1px 6px 0 !important;
  }
  .np-price b {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  .np-price small {
    font-size: 10px !important;
    margin-top: 2px !important;
  }
  .np-right {
    grid-area: story !important;
    min-width: 0 !important;
    border-left: 1px solid rgba(0, 0, 0, .25) !important;
    padding-left: 12px !important;
    align-self: stretch !important;
  }
  .np-quote {
    margin: 1px 0 3px !important;
    padding-left: 18px !important;
  }
  .np-quote::before {
    font-size: 32px !important;
    top: -7px !important;
  }
  .np-quote p {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
  .np-quote cite {
    font-size: 10px !important;
    margin-top: 1px !important;
  }
  .np-cols {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .np-cols p {
    margin: 0 0 3px !important;
  }
  .np-foot {
    font-size: 10px !important;
    line-height: 1.25 !important;
    margin-top: 3px !important;
    padding-top: 3px !important;
  }
  .np-actions { margin: 6px -10px -8px; padding: 6px 10px; gap: 4px 6px; }
  .np-actions .cta { font-size: 14px !important; min-height: 32px !important; padding: 4px 10px 3px !important; border-radius: 7px; }
  .np-actions .share { font-size: 12.5px !important; min-height: 32px !important; padding: 4px 8px 3px !important; border-radius: 7px; }
  .np-home, .np-install, .np-share-open { min-width: 36px !important; min-height: 32px !important; padding: 2px 5px !important; font-size: 10px !important; border-radius: 7px; }
  .np-home svg, .np-install svg, .np-share-open svg { width: 14px; height: 14px; }
  .np-record .best { font-size: 11px; }
  .np-subline { font-size: 10.5px; }

  /* Most Wanted modal in short landscape (Single Column, compact & responsive) */
  #wanted {
    padding: calc(env(safe-area-inset-top, 0px) + 6px) max(12px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 6px) max(12px, env(safe-area-inset-left, 0px));
  }
  .w-card {
    max-width: 440px;
    width: 100%;
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 14px 6px;
    text-align: center;
  }
  .w-card h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
  }
  .w-lead {
    margin: 0 4px;
    font-size: 11px;
    line-height: 1.3;
  }
  .w-tabs {
    margin: 0;
    gap: 6px;
  }
  .w-tabs button {
    min-height: 28px;
    padding: 3px 12px 2px;
    font-size: 12px;
  }
  .w-list {
    flex: 1 1 auto;
    min-height: 80px;
    margin: 0;
    padding: 0;
    border-top: 1.5px solid var(--ink);
  }
  .w-list li {
    padding: 3px 6px 2px;
    font-size: 13px;
    line-height: 1.25;
    gap: 6px;
  }
  .w-list li:nth-child(-n+3) .w-rank {
    font-size: 1.15em;
  }
  .w-me {
    margin: 0;
    font-size: 11.5px;
  }
  .w-name {
    gap: 3px;
    text-align: left;
  }
  .w-name label {
    font-size: 11px;
  }
  .w-name .sub-row {
    flex-wrap: nowrap;
    gap: 6px;
  }
  #wNameIn {
    min-height: 30px;
    font-size: 13px;
    padding: 3px 8px;
  }
  #wNameSend {
    min-height: 30px;
    font-size: 13px;
    padding: 4px 12px 3px;
  }
  .w-fine {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.25;
  }
  .sub-x {
    top: 4px;
    right: 6px;
    width: 32px;
    height: 32px;
    font-size: 22px;
  }
}
/* the masthead's vowel signs (ৈ, ি) rise above its line and the scrolling story clipped their tops: the room comes from
   inside the scroller, taken off the page's own top padding, so the page is no taller */
.np { padding-top: 2px; }
.np-scroll { padding-top: 10px; }