/* ==========================================================================
   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: #00e676;       /* Chattala emerald green, vibrant and bold */
  --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: #ff2a4b;       /* seven-segment voltmeter */
  --scrim: rgba(10, 8, 6, 0.72);
  /* a rickshaw painter's garland: green, red and cyan flowers on a green vine */
  --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='%2300e676'/><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='%2300e676' 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 (red, cyan and green pennants on a red band) */
  --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='%2300e676'/><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='%2300e676'/><use href='%23f' fill='%2300e676' 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); }
#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: center; display: grid; justify-items: center; 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: #fff; background: #00e676; 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(0, 230, 118, .85); border-radius: 999px; padding: 2px 10px 2px 7px; white-space: nowrap; margin-top: 3px; }
#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(0, 230, 118, .95); }
#chargeHint.dest #hintArrow { fill: #00e676; }
/* 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); pointer-events: auto !important; cursor: pointer !important; }
#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); } }
#rainWarn { font-weight: 800; font-size: clamp(13px, 1.7vw, 16px); line-height: 1.25; color: #fff; background: rgba(16, 92, 138, .92); border: 1px solid rgba(135, 206, 250, .6); padding: 3px 12px 2px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); white-space: nowrap; animation: rainPulse 1.6s ease-in-out infinite; }
@keyframes rainPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
#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%); }
#rainOverlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(circle at 18% 28%, rgba(255,255,255,.22) 1px, transparent 2px),
              radial-gradient(circle at 72% 55%, rgba(255,255,255,.18) 1.5px, transparent 3px),
              radial-gradient(circle at 35% 82%, rgba(255,255,255,.24) 2px, transparent 3.5px),
              radial-gradient(circle at 84% 22%, rgba(255,255,255,.2) 1.2px, transparent 2.5px),
              radial-gradient(circle at 55% 40%, rgba(255,255,255,.15) 1px, transparent 2px);
  background-size: 160px 160px; }
#rainOverlay.active { opacity: .7; }
#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 { display: flex; align-items: flex-end; gap: 10px; }
#touch .side-col { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: flex-end; }
#touch .pedalcol { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: flex-end; }
.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); }
.steer-pad { position: relative; display: flex; align-items: center; justify-content: space-between; width: 154px; height: 66px; padding: 0 4px;
  background: rgba(14, 18, 20, .45); border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .15); touch-action: none; pointer-events: auto;
  user-select: none; -webkit-user-select: none; box-sizing: border-box; }
.steer-pad .tbtn.round { width: 54px; height: 54px; border: none; background: transparent; box-shadow: none; pointer-events: none; }
.steer-knob { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%;
  background: transparent; color: #00e676; display: grid; place-items: center;
  box-shadow: none; pointer-events: none; z-index: 2; will-change: transform; transition: filter .15s ease; }
.steer-knob svg { width: 36px; height: 36px; pointer-events: none; stroke: #00e676; stroke-width: 2.2; filter: drop-shadow(0 2px 5px rgba(0,0,0,.75)) drop-shadow(0 0 6px rgba(0,230,118,.5)); }
.steer-pad.active .steer-knob svg { stroke: #38ef7d; filter: drop-shadow(0 2px 8px rgba(0,0,0,.85)) drop-shadow(0 0 14px #00e676); }
.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: #00e676; border-color: rgba(0, 230, 118, .75); font-size: 11px; line-height: 1; }
#tBoost svg { width: 23px; height: 23px; }
#tBoost span { color: #fff; margin-top: 1px; }
#tBoost.on { background: #00e676; box-shadow: 0 0 18px rgba(0, 230, 118, .8); color: #002b11; }
#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 #00e676; }
/* ---------- 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: none !important; -ms-overflow-style: none !important; }
.help::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.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 #9c152a, 0 0 0 3px #000; cursor: pointer; transition: transform .08s; }
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #9c152a, 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 #9c152a, 0 0 0 3px #000; cursor: pointer; transition: transform .08s; flex: none; }
.cta-icon-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #9c152a, 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; justify-content: center; align-items: center; gap: 6px 8px; font-size: 13px; line-height: 1.6; text-align: center; margin: 8px auto 0; width: 100%; }
.keys .k { display: inline-flex; align-items: center; justify-content: 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: 12px;
  align-items: center;
}

/* Distinct colorful backgrounds ONLY for the icons (.ic) */
.rules .ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform .15s ease;
}
.rules li:hover .ic {
  transform: scale(1.12);
}

.rules .ic.crash {
  background: radial-gradient(circle at 35% 35%, #ff5252, #c62828);
  border: 1px solid rgba(255, 120, 120, 0.6);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}
.rules .ic.rocket {
  background: radial-gradient(circle at 35% 35%, #ff9800, #e65100);
  border: 1px solid rgba(255, 183, 77, 0.6);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.45);
}
.rules .ic.bus {
  background: radial-gradient(circle at 35% 35%, #e53935, #b71c1c);
  border: 1px solid rgba(255, 99, 71, 0.65);
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}
.rules .ic.mob {
  background: radial-gradient(circle at 35% 35%, #ab47bc, #6a1b9a);
  border: 1px solid rgba(206, 147, 216, 0.6);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
}
.rules .ic.volt {
  background: radial-gradient(circle at 35% 35%, #ffee55, #f59e0b);
  color: #1a160e;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
}
.rules .ic.tk {
  background: radial-gradient(circle at 35% 35%, #f472b6, #db2777);
  color: #231121;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.55);
}
.rules .ic.ps {
  background: radial-gradient(circle at 35% 35%, #38bdf8, #0284c7);
  color: #002233;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
}
.rules .ic.rain {
  background: radial-gradient(circle at 35% 35%, #60a5fa, #2563eb);
  border: 1px solid rgba(147, 197, 253, 0.6);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.45);
}

.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 auto 0; text-align: center; }
.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: #c8102e; 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-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; width: 100%; gap: 8px; box-sizing: border-box; }
#npLines:not(:has(> :not([hidden]))) { display: none; }
#npWanted { min-width: 0; flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
#npWantedOpen,
.np-subline .linkish {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: var(--f-ui);
  font-size: clamp(11.5px, 2.7vw, 13px);
  font-weight: 700;
  line-height: 1.4;
  color: #b3121b;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.np-credit {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-family: var(--f-ui);
  font-size: clamp(11.5px, 2.7vw, 13px);
  font-weight: 700;
  line-height: 1.4;
  color: #15803d;
  opacity: 1;
  white-space: nowrap;
  text-decoration: none;
}
.np-credit span {
  font-size: inherit;
  font-weight: 700;
  color: #15803d;
  text-decoration: underline;
  text-decoration-color: rgba(21, 128, 61, .45);
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}
.np-credit b {
  font-size: inherit;
  font-weight: 800;
  color: inherit;
}
.np-credit svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.np-credit:hover, .np-credit:focus-visible { color: #166534; opacity: 1; }
.np-credit:hover span, .np-credit:focus-visible span { text-decoration-color: #166534; }
.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-form { 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: rgba(0, 230, 118, .2); border-left: 4px solid #00e676; }
.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 #9c152a, 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: #f0fdf4; border-left: 4px solid #00e676; 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: #f0fdf4; 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: #86efac; transform: scale(1.02); } 100% { background: #f0fdf4; transform: none; } }
@media (max-width: 768px), (max-height: 600px) {
  .np { padding: 10px 12px 12px; }
  .np-name { font-size: clamp(28px, 7.8vw, 42px); line-height: 1.08; text-align: center; justify-content: center; margin: 2px 0 3px; }
  .np-mast { grid-template-columns: 1fr; justify-content: center; text-align: center; } .np-ear { display: none; }
  .np-meta { font-size: clamp(11.5px, 2.9vw, 13px); margin: 4px 0 5px; padding-top: 4px; border-top: 1px solid var(--ink); }
  .np-kicker { font-size: clamp(13px, 3.4vw, 14.5px); margin: 8px 0 2px; }
  .np h2 { font-size: clamp(23px, 6.2vw, 32px); line-height: 1.22; margin: 8px 0 10px; text-wrap: balance; }
  .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 #9c152a, 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; bottom: auto; }
  .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: 0; flex-basis: 100%; display: flex; justify-content: center; align-items: center; text-align: center; margin: 2px 0 6px; padding: 0; }
  .np-actions .best { font-size: 13.5px; font-weight: 700; text-align: center; color: var(--ink); opacity: .95; }
  .np-credit-phone { display: none !important; }
  #npLines .np-credit { display: inline-flex !important; margin-left: auto; }
  .np-subline { order: 7; margin-top: 2px; font-size: 12px; }
  #npLines { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; width: 100%; gap: 6px; }
  #npWantedOpen, .np-subline .linkish, .np-credit, .np-credit span, .np-credit b { font-size: clamp(11px, 2.8vw, 12.5px); line-height: 1.4; }
  #npWanted:not([hidden]) ~ #npSubLine:not([hidden])::before { content: none; }
  .np-name-form { 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-name { font-size: clamp(30px, 8.5vw, 38px); }
  .np h2 { font-size: clamp(22px, 6.5vw, 28px); margin: 7px 0 9px; line-height: 1.22; }
  .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;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#battBox canvas#minimap {
  pointer-events: auto !important;
  cursor: pointer !important;
}
#minimap:hover {
  transform: scale(1.06);
  border-color: #00e676;
  box-shadow: 0 0 14px rgba(0, 230, 118, .55);
}
#minimap:active {
  transform: scale(0.96);
}
.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; box-sizing: border-box; }
/* When collapsed: sits quietly in the bottom-right corner where editor credit used to be */
.help:not([open]) {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 16px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 3px);
  z-index: 10;
  max-width: fit-content;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible !important;
}
.help:not([open]) summary {
  padding: 4px 6px 2px;
  margin: 0;
  min-height: auto;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .75);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.help:not([open]) summary::-webkit-details-marker { display: none; }
.help:not([open]) summary:hover,
.help:not([open]) summary:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}
.help:not([open]) summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
  transition: transform .2s;
}

/* When open: placed in normal flex flow below .play-row, aligned with the button and never overlapping the title/buttons */
.help[open] {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 5;
  width: 100%;
  max-width: min(540px, calc(100vw - 32px));
  border-radius: 14px;
  padding: 0 14px 12px;
  background: rgba(10, 22, 19, .54);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(440px, calc(100dvh - 220px));
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.help[open] 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);
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -14px;
  padding: 14px 14px 2px;
  border-radius: 14px 14px 0 0;
  background: var(--fringe) left top / 72px 16px round no-repeat, var(--bouquet) right 6px top 4px / 60px 60px no-repeat;
}
.help[open] summary::-webkit-details-marker { display: none; }
.help[open] summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border: solid currentColor;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(-135deg);
  transition: transform .2s;
}
.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, .72);
  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);
}
.help p { margin: 4px 0 12px; }
.help .rules { margin-top: 0; }
.menu-card:has(.help[open]) .how .dup { display: none; }
.menu-card { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; max-width: 540px; }
.menu-main { flex: none; }
@media (min-width: 768px) {
  .menu-card { max-width: 660px; }
  .how { max-width: none; font-size: clamp(16px, 1.2vw, 18.5px); }
  .how em { white-space: nowrap; text-wrap: nowrap; }
}
@media (min-width: 860px) and (min-height: 501px) {
  .menu-card { max-width: 520px; margin-top: auto; }
  .help[open] {
    position: absolute;
    right: max(24px, env(safe-area-inset-right, 24px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    left: auto;
    z-index: 15;
    width: min(540px, calc(100vw - 580px));
    max-width: 560px;
    max-height: min(520px, calc(100dvh - 120px));
  }
  .help .rules { grid-template-columns: 1fr 1fr; column-gap: 16px; }
}
.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 (orientation: portrait) {
  /* Keep open help underneath the play button on mobile portrait so title & button never get overlapped */
  .help[open] {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    max-height: min(340px, calc(100dvh - 240px));
    margin-top: 6px;
  }
}
@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; }
  .help[open] { max-height: min(290px, calc(100dvh - 220px)); }
}
@media (max-height: 580px) and (orientation: landscape) {
  #minimap { width: 76px; height: 76px; pointer-events: auto !important; cursor: pointer !important; }
  #chargeHint { font-size: 10.5px; }
  #battBox { gap: 2px; }
  .battery-label { font-size: 12.5px; padding: 1px 6px; }
  .battery-label strong { font-size: 17px; }
  .bar { width: 76px; height: 5.5px; }
  #muteBtn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; } #muteBtn svg { width: 15px; height: 15px; }
  :root { --band: 26px; }
  #ticker .track { font-size: 13px; }
  #touch {
    bottom: calc(var(--band) + 4px + env(safe-area-inset-bottom, 0px));
    padding: 0 max(16px, env(safe-area-inset-right, 16px));
    padding-left: max(16px, env(safe-area-inset-left, 16px));
  }
  #touch .grp { gap: 8px; }
  #touch .row { gap: 8px; }
  #touch .pedalcol { gap: 6px; }
  #touch .side-col { gap: 6px; }
  .tbtn.round { width: 59px; height: 59px; }
  .tbtn.round svg { width: 26px; height: 26px; }
  .steer-pad { width: 136px; height: 56px; }
  .steer-pad .tbtn.round { width: 46px; height: 46px; }
  .steer-knob { width: 44px; height: 44px; background: transparent !important; box-shadow: none !important; }
  .steer-knob svg { width: 30px; height: 30px; stroke: #00e676; }
  .tbtn.chip { width: 55px; height: 40px; font-size: 9.5px; border-radius: 12px; }
  .tbtn.chip svg { width: 17px; height: 17px; }
  #tBoost, #tRocket { width: 55px; height: 55px; font-size: 10px; margin-top: 0; }
  #tBoost svg, #tRocket svg { width: 20px; height: 20px; }
  #tGas { width: 79px; height: 96px; font-size: 13.5px; border-radius: 20px; }
  #tGas svg { width: 26px; height: 26px; }
  #tBrake { width: 73px; height: 57px; font-size: 12.5px; border-radius: 16px; }
  #tBrake svg { width: 24px; height: 24px; }
  .pedal svg { width: 26px; height: 26px; }
  #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; }
  .help:not([open]) {
    right: max(16px, env(safe-area-inset-right, 16px));
    bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) + 2px));
    font-size: 11px;
    overflow: visible !important;
  }
  .help:not([open]) summary {
    margin: 0 !important;
    padding: 2px 6px 1px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }
  .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[open] {
    position: relative;
    right: auto;
    bottom: auto;
    flex: 1 1 380px;
    max-width: min(380px, calc(100vw - 28px));
    max-height: calc(100vh - 50px);
    max-height: calc(100dvh - 50px);
  }
  .help[open] { padding: 0 10px 6px; }
  .help[open] summary {
    margin: 0 -10px;
    padding: 13px 10px 4px;
    min-height: 34px;
    font-size: 13.5px;
    background: var(--fringe) left top / 54px 11px round no-repeat, var(--bouquet) right 6px top 2px / 36px 36px no-repeat;
  }
  .help[open] summary::after {
    width: 7px;
    height: 7px;
    border-width: 0 2px 2px 0;
    margin-top: 2px;
  }
  .help.scrolled summary {
    background: var(--fringe) left top / 54px 11px round no-repeat, var(--bouquet) right 6px top 2px / 36px 36px no-repeat, rgba(12, 21, 19, .72);
  }
  .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 #9c152a, 0 0 0 2px #000; }
  .cta-icon-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #9c152a, 0 0 0 2px #000; }
  .cta-icon-btn svg { width: 18px; height: 18px; stroke-width: 2.2; }

  /* Newspaper in short landscape - readable, comfortably scaled */
  #paper {
    padding: 4px max(8px, env(safe-area-inset-right, 8px)) max(6px, env(safe-area-inset-bottom, 6px)) max(8px, env(safe-area-inset-left, 8px)) !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  .np {
    height: 100% !important;
    max-height: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 4px 14px 8px !important;
    overflow: hidden !important;
  }
  .np header {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-bottom: 4px !important;
  }
  .np-mast {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .np-name {
    display: block !important;
    width: 100% !important;
    font-family: var(--f-news) !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    margin: 1px auto 2px !important;
  }
  .np-ear { display: none !important; }
  .np-meta {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 11.5px !important;
    margin: 3px 0 0 !important;
    padding-top: 3px !important;
    border-top: 1px solid var(--ink) !important;
  }
  .np-meta span:first-child {
    text-align: left !important;
    justify-self: start !important;
    white-space: nowrap !important;
  }
  .np-meta span:nth-child(2) {
    display: block !important;
    text-align: center !important;
    justify-self: center !important;
    white-space: nowrap !important;
  }
  .np-meta span:last-child {
    text-align: right !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }
  .np-kicker { font-size: 12.5px; margin: 5px 0 2px; }
  .np h2 { font-size: 22px; margin: 4px 0 6px; line-height: 1.25; }
  .np-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
  }
  .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 auto !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
    align-items: start !important;
    margin-bottom: 0 !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: 135px !important;
    background: #999 !important;
    border: 1px solid rgba(0, 0, 0, .35) !important;
  }
  .np figcaption {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
  }
  .np-stamp {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    padding: 2px 8px 1px !important;
    transform: rotate(-3deg) !important;
    border-width: 2px !important;
  }
  .np-stamp small {
    font-size: 11px !important;
    line-height: 1 !important;
  }
  .np-stamp b {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }
  .np-buy {
    grid-area: buy !important;
    min-width: 0 !important;
    border-left: 0 !important;
    padding: 5px 0 0 !important;
    margin: 0 !important;
  }
  .np-price {
    padding: 9px 12px 6px !important;
    border-width: 1.5px !important;
  }
  .np-price span {
    font-size: 11.5px !important;
    top: -10px !important;
    left: 8px !important;
    padding: 2px 7px 0 !important;
  }
  .np-price b {
    font-size: 15.5px !important;
    line-height: 1.25 !important;
  }
  .np-price small {
    font-size: 11px !important;
    margin-top: 3px !important;
  }
  .np-dare {
    font-size: 13.5px !important;
    margin: 5px 0 0 !important;
  }
  .np-right {
    grid-area: story !important;
    min-width: 0 !important;
    border-left: 1px solid rgba(0, 0, 0, .25) !important;
    padding-left: 14px !important;
    align-self: start !important;
  }
  .np-quote {
    margin: 2px 0 5px !important;
    padding-left: 20px !important;
  }
  .np-quote::before {
    font-size: 38px !important;
    top: -9px !important;
  }
  .np-quote p {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }
  .np-quote cite {
    font-size: 11.5px !important;
    margin-top: 2px !important;
  }
  .np-cols {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
  .np-cols p {
    margin: 0 0 5px !important;
  }
  .np-foot {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin-top: 5px !important;
    padding-top: 4px !important;
    border-top: 1px dotted rgba(0, 0, 0, .18) !important;
    margin-bottom: 0 !important;
  }
  .np-actions, .np > .np-actions {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin: 4px -14px 0 !important;
    padding: 5px 14px 2px !important;
    gap: 3px 8px !important;
    background: transparent !important;
    border-top: 1px solid rgba(0, 0, 0, .18) !important;
  }
  .np-actions .cta {
    font-size: 15.5px !important;
    min-height: 38px !important;
    padding: 6px 16px 5px !important;
    border-radius: 9px !important;
    box-shadow: 0 3px 0 #9c152a, 0 0 0 2px #000 !important;
    order: 1 !important;
    flex: 1 1 150px !important;
    max-width: 280px !important;
    min-width: 125px !important;
    white-space: nowrap !important;
  }
  .np-actions .np-share-open { display: inline-flex !important; order: 2 !important; }
  .np-install { order: 3 !important; }
  .np-home { order: 4 !important; }
  .np-home, .np-install, .np-share-open {
    min-width: 44px !important;
    min-height: 38px !important;
    padding: 3px 8px 3px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
    flex: 0 0 auto !important;
  }
  .np-home svg, .np-install svg, .np-share-open svg { width: 18px !important; height: 18px !important; }
  .np-actions .share { font-size: 13.5px !important; min-height: 38px !important; padding: 6px 12px 5px !important; border-radius: 9px !important; }

  /* In landscape, place record alongside buttons on Row 1 (saving vertical space) */
  .np-record {
    order: 5 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }
  .np-record .best { font-size: 11.5px !important; font-weight: 700 !important; text-align: right !important; white-space: nowrap !important; }
  .np-credit-phone { display: none !important; }

  /* Row 2: Most Wanted (left) & Editor (right), single clean line, zero clipping or overflow */
  .np-subline {
    order: 7 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 2px 0 0 !important;
    border-top: 1px dashed rgba(0, 0, 0, .14) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
  }
  #npLines {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  #npWanted {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }
  #npWantedOpen,
  .np-subline .linkish {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: var(--f-ui) !important;
    font-size: clamp(10px, 2vw, 11px) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    padding: 1px 0 !important;
    color: #b3121b !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-align: left !important;
  }
  #npLines .np-credit {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-items: center !important;
    gap: 3px !important;
    font-family: var(--f-ui) !important;
    font-size: clamp(10px, 2vw, 11px) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    padding: 1px 0 !important;
    color: #15803d !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  #npLines .np-credit span,
  #npLines .np-credit b {
    font-size: inherit !important;
    font-weight: 800 !important;
    color: inherit !important;
  }
  #npLines .np-credit svg {
    width: 9.5px !important;
    height: 9.5px !important;
    flex-shrink: 0 !important;
  }

  /* 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; }

/* Full Map Modal Overlay - Glassmorphic Centered Modal */
#mapModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  width: 100% !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: -webkit-fill-available !important;
  padding: max(8px, env(safe-area-inset-top, 8px)) max(8px, env(safe-area-inset-right, 8px)) max(8px, env(safe-area-inset-bottom, 8px)) max(8px, env(safe-area-inset-left, 8px)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10, 16, 23, 0.62) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  pointer-events: auto !important;
  touch-action: auto !important;
  overflow: hidden !important;
  animation: mapModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#mapModal[hidden] {
  display: none !important;
}

@keyframes mapModalFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.map-card,
.map-card.fullscreen {
  position: relative !important;
  inset: auto !important;
  width: min(880px, calc(100% - 16px)) !important;
  height: min(620px, calc(100% - 16px)) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  background: rgba(18, 25, 34, 0.9) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  overflow: hidden !important;
}

#fullMap {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: none !important;
  border-radius: 19px !important;
  background: #141a22 !important;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#fullMap:active {
  cursor: grabbing;
}

/* Floating Top-Left Zoom Level Badge */
.map-floating-badge {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: max(16px, env(safe-area-inset-left, 16px));
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(22, 29, 38, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #00e676;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  user-select: none;
  z-index: 30;
}

/* Floating Map Buttons */
.map-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(22, 29, 38, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.map-btn:hover {
  background: rgba(30, 42, 56, 0.95);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: scale(1.06);
}
.map-btn-gps:hover {
  border-color: #00e676;
  color: #00e676;
}
.map-btn:active {
  transform: scale(.92);
}

/* Floating Cross Close Button at Top-Right */
.map-btn-close {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: max(16px, env(safe-area-inset-right, 16px));
  z-index: 35;
}
.map-btn-close:hover {
  background: rgba(224, 36, 43, 0.9) !important;
  border-color: rgba(255, 120, 120, 0.6) !important;
  color: #fff !important;
  transform: scale(1.06);
}

/* Floating Controls (Zoom & Location) at Bottom-Right */
.map-floating-controls {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 16px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 30;
}



@media (max-width: 760px) {
  .map-card,
  .map-card.fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 14px !important;
  }
  .map-floating-badge {
    top: 10px !important;
    left: 10px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  #mapClose {
    top: 10px !important;
    right: 10px !important;
    width: 38px !important;
    height: 38px !important;
  }
  .map-floating-controls {
    bottom: 12px !important;
    right: 10px !important;
    gap: 8px !important;
  }
  .map-floating-controls .map-btn {
    width: 38px !important;
    height: 38px !important;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .map-card,
  .map-card.fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 12px !important;
  }
  .map-floating-badge {
    top: 8px !important;
    left: 8px !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
  #mapClose {
    top: 8px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
  }
  .map-floating-controls {
    bottom: 8px !important;
    right: 8px !important;
    gap: 6px !important;
  }
  .map-floating-controls .map-btn {
    width: 34px !important;
    height: 34px !important;
  }
}