/* ==========================================================================================================
   Chaaju Mobile — a minimal HUD for phones and tablets, on top of the engine's shared styles (style.css).
   Rule of thumb: the city is the screen. Only four things stay up while you play —
     top-left: one slim stats pill · top-right: small minimap (tap = map) + one ☰ menu button ·
     top-centre: a one-line objective · bottom: a joystick that appears under your thumb + three round buttons.
   Everything else (mission card, road strip, place name, speed gauge, extra toasts) is hidden on phones.
   No backdrop blur anywhere (it re-samples the 3D frame under every panel, every frame: costly on phone GPUs).
   Size tiers: body.m-compact / m-phone / m-tablet (mobile/js/boot.js) · safe areas for notches / home bars.
   ========================================================================================================== */
body.mobile {
  /* notch / punch-hole insets: the browser's env(), or — inside the Android app, where WebView may report 0 —
     the values Capacitor's SystemBars injects as --safe-area-inset-* (whichever is larger) */
  --sl: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
  --sr: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
  --st: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --sb: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --gap: 10px; --act: 64px; --btn: 46px; --mm: 84px; --stick: 112px; --knob: 44px; --fs: 12px;
  --gold: #ffd9a0; --deep: #1a0710;
  --pane: rgba(16,10,14,.62); --rim: rgba(255,226,190,.16);
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  /* the top-centre band between the stats card and the ☰ + minimap (objective, toast): the same room on both sides,
     sized by whichever side has the cutout */
  --band: calc(100vw - 2 * (max(var(--sl), var(--sr)) + var(--gap)) - 2 * (var(--mm) + 60px) - 110px);
  /* the first slot under the objective, clear of it even when it wraps to its 2 lines (2 × fs × 1.25 + padding/border + 8 px) */
  --top2: calc(var(--st) + var(--gap) + 2.5 * var(--fs) + 22px);
}
body.mobile.m-compact { --gap: 8px; --act: 58px; --btn: 44px; --mm: 74px; --stick: 104px; --knob: 40px; --fs: 11px; }
body.mobile.m-tablet  { --gap: 16px; --act: 80px; --btn: 58px; --mm: 128px; --stick: 140px; --knob: 54px; --fs: 13.5px;
  --band: calc(100vw - 2 * (max(var(--sl), var(--sr)) + var(--gap) + var(--mm) * 1.9 + 80px)); } /* (tablets: the ☰ sits left of the speed gauge) */
body.mobile button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.mobile *, body.mobile *::before, body.mobile *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------- what phones never show ---------- */
body.mobile #loading, body.mobile #helpBtn, body.mobile #phoneBtn, body.mobile #actBtn, body.mobile #lockHint, body.mobile .ln-hint,
body.mobile #place, body.mobile #bizName, body.mobile #speed { display: none !important; }
body.mobile:not(.m-tablet) #tracker, body.mobile:not(.m-tablet) #nav, body.mobile:not(.m-tablet) #gaugeBox { display: none !important; }
body.mobile #toast .tst:not(:first-child) { display: none; } /* one message at a time */

/* ---------- top-left: one slim pill — cash · rating · time, energy as a hairline under it ---------- */
body.mobile #stats {
  top: calc(var(--st) + var(--gap)); left: calc(var(--sl) + var(--gap));
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; row-gap: 3px;
  min-width: 0; padding: 6px 10px 7px; border-radius: 12px;
  background: var(--pane); border: 1px solid var(--rim); box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
body.mobile #cash { grid-column: 1; font: 500 calc(var(--fs) + 5px)/1 var(--num); color: #fff7ea; }
body.mobile #rep { grid-column: 2; font-size: 11px; }
body.mobile #rep svg { width: 9px; height: 9px; }
body.mobile #rep .rv { margin-left: 4px; }
body.mobile #clock { grid-column: 1 / 3; font-size: max(11px, calc(var(--fs) - 1px)); gap: 4px; max-width: 46vw; white-space: nowrap; }
body.mobile #clock .hico { display: none; }
body.mobile #eventChip { padding: 0 6px; font-size: 11px; }
body.mobile .statrow { grid-column: 1 / 3; gap: 5px; }
body.mobile .statrow .ico { width: 12px; height: 12px; font-size: 11px; }
body.mobile .statrow .bar { width: 100%; min-width: 90px; height: 3px; }
body.mobile #energy { background: linear-gradient(90deg, #ffb35c, #ffe2a8); }
body.mobile #fuelText { font-size: 11px; }

/* ---------- top-right: small minimap (tap = map) + the ☰ button beside it ---------- */
body.mobile #cluster { top: calc(var(--st) + var(--gap)) !important; right: calc(var(--sr) + var(--gap)) !important; bottom: auto !important; align-items: flex-start; gap: 6px; }
body.mobile #mmDial, body.mobile #minimap { width: var(--mm) !important; height: var(--mm) !important; }
body.mobile #mmDial { box-shadow: 0 0 0 1px rgba(255,226,190,.3), 0 8px 18px rgba(0,0,0,.35); }
body.mobile #gaugeBox, body.mobile #gauge { width: calc(var(--mm) * .9) !important; height: calc(var(--mm) * .9) !important; }
#mMenuBtn {
  position: fixed; z-index: 9; top: calc(var(--st) + var(--gap)); right: calc(var(--sr) + var(--gap) + var(--mm) + 8px);
  width: 38px; height: 38px; padding: 0; border-radius: 12px; border: 1px solid var(--rim); background: var(--pane); color: #fff3e2;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
#mMenuBtn::after { content: ''; position: absolute; inset: -3px; border-radius: 14px; } /* (38 px to look at, 44 px to hit) */
#mMenuBtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
body.m-tablet #mMenuBtn { width: 48px; height: 48px; border-radius: 14px; right: calc(var(--sr) + var(--gap) + var(--mm) * 1.9 + 22px); } /* (clear of the speed gauge that sits beside the minimap while driving) */
body.mobile.m-panel #mMenuBtn, body.mobile.talking #mMenuBtn { opacity: 0; pointer-events: none; }

/* quick menu: a small 3×2 grid under the button */
#mMenu { position: fixed; inset: 0; z-index: 70; } /* (above the game's own pop-ups: wedding card, toasts) */
/* "getting ready" card after ENTER while the phone finishes building shaders (ui.js) */
#mWarm { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at 50% 40%, #3a1d2a 0%, #1a0d14 70%); color: #f6e7d2; font: 600 18px/1.3 system-ui, sans-serif; text-align: center;
  transition: opacity .35s ease; }
#mWarm.out { opacity: 0; pointer-events: none; }
#mWarm .mw-ring { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(246, 231, 210, .18); border-top-color: #e8a05a; animation: mwSpin 0.9s linear infinite; }
#mWarm .mw-s { font-weight: 400; font-size: 13px; opacity: .7; }
@keyframes mwSpin { to { transform: rotate(360deg); } }
@media (max-width: 520px) { .mm-card { grid-template-columns: repeat(4, minmax(54px, 1fr)) !important; left: calc(var(--sl) + var(--gap)); } .mm-card button { height: 54px; } }
.mm-card {
  position: absolute; top: calc(var(--st) + var(--gap) + 46px); right: calc(var(--sr) + var(--gap));
  display: grid; grid-template-columns: repeat(4, 74px); gap: 6px; padding: 8px; border-radius: 16px; max-height: calc(100vh - 70px - var(--st) - var(--sb)); overflow-y: auto;
  background: rgba(22,12,18,.94); border: 1px solid var(--rim); box-shadow: 0 16px 40px rgba(0,0,0,.45);
  animation: mPop .18s ease-out; transform-origin: top right;
}
.mm-sec { grid-column: 1 / -1; padding: 2px 4px 0; font: 600 11px var(--ui); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,226,190,.6); }
.mm-card button { height: 64px; padding: 0; border: 0; border-radius: 12px; background: rgba(255,255,255,.05); color: #fff1de; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mm-card button:active { background: rgba(255,217,160,.2); }
.mm-card svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-card span { font: 600 11px var(--ui); letter-spacing: .02em; }
@keyframes mPop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ---------- top-centre: the objective in ONE line; then timer / wanted / meter as small chips ---------- */
body.mobile #objective {
  top: calc(var(--st) + var(--gap)) !important; bottom: auto !important;
  max-width: var(--band); width: max-content;
  padding: 6px 12px; font-size: var(--fs); line-height: 1.3; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--pane); border: 1px solid var(--rim); box-shadow: inset 2px 0 0 var(--gold);
}
/* stacked under the objective: slot 1 (--top2) timer / wanted, slot 2 the meter; the toast takes the first free slot
   (#timer, #meter and #toast are siblings in #hud; #wanted lives on <body>) */
body.mobile #timer, body.mobile #wanted { top: var(--top2); padding: 4px 10px; font-size: 11px; gap: 6px; }
body.mobile #timer .bar { width: 70px; }
body.mobile #timerText { font-size: 13px; }
body.mobile #meter { top: calc(var(--top2) + 32px); padding: 4px 10px; font-size: 11px; gap: 6px; }
body.mobile #meter .bar { width: 64px; }
/* the toast stays inside the same band as the objective: never over the stats card, the ☰ button or the minimap */
body.mobile #toast { top: var(--top2) !important; bottom: auto !important; max-width: min(460px, var(--band)); }
body.mobile #timer:not(.hidden) ~ #toast, body.mobile:has(> #wanted:not(.hidden)) #toast { top: calc(var(--top2) + 34px) !important; }
body.mobile #meter:not(.hidden) ~ #toast { top: calc(var(--top2) + 66px) !important; }
body.mobile #toast .tst { font-size: 11.5px; padding: 5px 11px; border-radius: 10px; background: rgba(16,10,14,.78); }
body.mobile #banner { top: 22%; }
body.mobile #banner::before, body.mobile #banner::after { width: min(240px, 40vw); }
body.mobile #bannerTitle { font-size: clamp(20px, 5.5vmin, 40px); letter-spacing: .12em; }
body.mobile #bannerSub { font-size: clamp(11px, 2.4vmin, 14px); }
body.mobile #subs { bottom: calc(var(--sb) + var(--gap) + 6px); max-width: min(460px, 52vw, 100vw - 2 * (max(var(--sl), var(--sr)) + var(--gap) + var(--act) + 2 * var(--btn) + 30px)); } /* (clear of the button row with the phone) */
body.mobile #subs .sr { font-size: 12.5px; padding: 2px 8px; }
body.mobile #subs .se { font-size: 11px; }
body.mobile .bubble { max-width: 170px; font-size: 11.5px; padding: 4px 8px; }
/* tablets keep a compact mission card under the minimap */
body.mobile.m-tablet #tracker { top: calc(var(--st) + var(--gap) + var(--mm) + 12px) !important; right: calc(var(--sr) + var(--gap)) !important; width: 240px; padding: 8px 11px; font-size: 11px; background: var(--pane); border-color: var(--rim); }
body.mobile.m-tablet #nav { bottom: calc(var(--sb) + 6px) !important; font-size: 11px; padding: 4px 12px; background: var(--pane); }
body.mobile.m-tablet.m-ready #nav { display: none; }

/* ---------- the prompt: a small tappable pill just above the ACT button ---------- */
body.mobile #prompt {
  left: auto; right: calc(var(--sr) + var(--gap)); transform: none;
  bottom: calc(var(--sb) + var(--gap) + var(--act) + var(--btn) + 22px) !important;
  max-width: min(300px, 44vw); padding: 6px 12px; border-radius: 12px; font-size: var(--fs); line-height: 1.3; text-align: right;
  background: rgba(40,16,22,.86); border: 1px solid rgba(255,217,160,.45); box-shadow: 0 6px 16px rgba(0,0,0,.3);
  pointer-events: auto; cursor: pointer; animation: none;
}
body.mobile #prompt kbd { display: none; }
/* 44 px to hit (the pill itself stays slim); paint containment would clip the hit box, layout + style stay */
body.mobile #prompt { contain: layout style; }
body.mobile #prompt::after { content: ''; position: absolute; inset: -8px -2px; border-radius: 14px; }
/* not while people talk: a tap on it was an ACT press under the dialogue */
body.mobile.talking #prompt { display: none !important; }

/* ---------- dialogue: a compact sheet at the bottom; controls step aside while people talk ---------- */
body.mobile #dialogue {
  top: auto !important; bottom: calc(var(--sb) + var(--gap)) !important;
  width: min(560px, calc(100vw - var(--sl) - var(--sr) - 2 * var(--gap))); min-height: 0; max-height: 50vh; overflow: auto;
  padding: 9px 14px 20px; border-radius: 16px; background: rgba(20,10,14,.86); border-color: var(--rim);
}
body.mobile #dialogue:has(> #dlgChoices:not(.hidden)) { padding-bottom: 10px; } /* (the TAP hint is hidden while answers show: 4 answers fit unscrolled) */
body.mobile #dlgSpeaker { margin-bottom: 4px; font-size: 11px; }
body.mobile #dlgText { font-size: calc(var(--fs) + 1.5px); line-height: 1.45; }
body.mobile #dlgChoices { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
body.mobile #dlgChoices button { min-height: 44px; padding: 7px 10px; font-size: var(--fs); }
body.mobile #dlgChoices kbd { display: none; }
body.mobile #dlgHint { right: 12px; bottom: 6px; color: var(--gold); font-size: 0; }
body.mobile #dlgHint::after { content: 'TAP ›'; font: 600 11px var(--ui); letter-spacing: .14em; }
body.mobile #dlgHint svg { display: none; }
body.mobile.talking #touch, body.mobile.m-panel #touch { opacity: 0; pointer-events: none; }
body.mobile.talking #touch *, body.mobile.m-panel #touch * { pointer-events: none !important; }
body.mobile.talking #objective, body.mobile.talking #subs { display: none; }

/* ---------- touch controls ---------- */
body.mobile #touch { transition: opacity .2s; z-index: 4; }
/* the stick's own corner: the bottom 55 % of the screen, the stick's half of the width (never into the button column),
   inset from the side and bottom edges by max(24px, safe area) so a thumb never starts on the Android Back-gesture edge
   (MainActivity also excludes the bottom 200 dp of both side edges from system gestures) */
#stickZone { --ei: max(24px, var(--sl, 0px)); --eb: max(24px, var(--sb, 0px));
  --half: min(50vw, 100vw - var(--sr, 0px) - var(--gap, 10px) - var(--act, 64px) - 2 * var(--btn, 46px) - 40px);
  position: absolute; left: var(--ei); bottom: var(--eb); top: 45%; width: calc(var(--half) - var(--ei)); height: auto; pointer-events: auto; touch-action: none; }
body.mobile #stick {
  left: calc(max(24px, var(--sl)) + 6px); bottom: calc(max(24px, var(--sb)) + 6px); /* (the resting ring sits inside the zone) */
  width: var(--stick); height: var(--stick); pointer-events: none;
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,226,190,.28); box-shadow: none;
  opacity: .28; transition: opacity .2s;
}
body.mobile #stick.live { opacity: .9; transition: none; }
body.mobile #stick.run { border-color: rgba(255,190,120,.8); box-shadow: 0 0 0 4px rgba(255,170,90,.15); }
body.mobile #knob {
  left: calc(50% - var(--knob) / 2); top: calc(50% - var(--knob) / 2); width: var(--knob); height: var(--knob);
  background: radial-gradient(circle at 35% 30%, #fff, #ffe7c4 50%, #e9a46a); box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
body.mobile #buttons {
  position: absolute; right: calc(var(--sr) + var(--gap)); bottom: calc(var(--sb) + var(--gap));
  width: calc(var(--act) + var(--btn) + 14px); height: calc(var(--act) + var(--btn) + 14px); display: block; pointer-events: none;
}
body.mobile #buttons .mb {
  position: absolute; width: var(--btn); height: var(--btn); padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; pointer-events: auto; touch-action: none;
  color: #fff6ea; border: 1px solid rgba(255,226,190,.32); background: rgba(24,12,18,.5);
  box-shadow: 0 4px 12px rgba(0,0,0,.28); font-size: 0; transition: transform .08s, background .12s, opacity .2s;
}
body.mobile #buttons .mb svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.mobile #buttons .mb:active { transform: scale(.9); background: rgba(255,217,160,.35); }
body.mobile #buttons .mb-act { right: 0; bottom: 0; width: var(--act); height: var(--act); color: #2a0b0b; border-color: rgba(255,240,215,.7); background: radial-gradient(circle at 50% 30%, #ffe9c6, #f0a05a 60%, #c4553a); }
body.mobile #buttons .mb-act.pulse { animation: mPulse 1.3s ease-in-out infinite; }
@keyframes mPulse { 50% { box-shadow: 0 4px 12px rgba(0,0,0,.28), 0 0 0 8px rgba(255,200,140,.25); } }
body.mobile #buttons .mb-two  { right: calc(var(--act) + 10px); bottom: 2px; }              /* jump / brake: left of ACT */
body.mobile #buttons .mb-car  { right: 2px; bottom: calc(var(--act) + 10px); }              /* get in / out: above ACT */
body.mobile #buttons .mb-horn { right: calc(var(--act) + 4px); bottom: calc(var(--act) + 4px); width: calc(var(--btn) * .82); height: calc(var(--btn) * .82); }
body.mobile #buttons .mb-horn::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; } /* (≥ 44 px to hit; clear of ACT / car / jump) */
body.mobile #buttons .mb-phone { right: calc(var(--act) + var(--btn) + 20px); bottom: 2px; } /* phone: beside jump / brake, on foot and driving */
body.mobile #buttons .mb-brake { border-color: rgba(255,150,140,.5); }
body.mobile #buttons .veh { display: none; }
body.mobile.m-veh #buttons .veh { display: flex; }
body.mobile.m-veh #buttons .foot { display: none; }
body.mobile #buttons .mb-car { opacity: .35; }
body.mobile.m-near #buttons .mb-car, body.mobile.m-veh #buttons .mb-car { opacity: 1; border-color: rgba(170,220,255,.7); }

/* ---------- panels: full sheets on phones (opened on purpose, so they may take the screen) ---------- */
body.mobile #panel, body.mobile #citymap { padding: calc(var(--st) + 6px) calc(var(--sr) + 6px) calc(var(--sb) + 6px) calc(var(--sl) + 6px); z-index: 20; background: rgba(6,4,6,.7); }
body.mobile .pcard, body.mobile .mapcard { width: 100%; height: 100%; border-radius: 16px; background: rgba(22,12,18,.97); border-color: var(--rim); }
body.mobile.m-tablet .pcard { width: min(820px, 100%); height: auto; max-height: 100%; }
body.mobile #panelClose, body.mobile #citymapClose { min-width: 44px; min-height: 44px; font-size: 18px; }
body.mobile #panelTabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
body.mobile #panelTabs button { flex: none; padding: 8px 12px; font-size: 12.5px; }
body.mobile #panelBody { -webkit-overflow-scrolling: touch; touch-action: pan-y; }
body.mobile #panelBody button, body.mobile #citymapList button { min-height: 38px; }
body.mobile .pfoot:empty { display: none; }
body.mobile .maphead { font-size: 12px; }
body.mobile .mapbody { flex: 1; min-height: 0; }
body.mobile #citymapList { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.mobile.m-landscape #citymapCanvas { height: calc(var(--vh, 1vh) * 100 - 96px - var(--st) - var(--sb)); max-width: calc(100vw - 280px); }
body.mobile.m-landscape #citymapList { width: 220px; flex-basis: 220px; }
body.mobile.m-portrait .mapbody { flex-direction: column; }
body.mobile.m-portrait #citymapCanvas { width: 100%; height: auto; max-width: none; max-height: 50vh; }
body.mobile.m-portrait #citymapList { width: auto; flex: 1 1 auto; }

/* ---------- pause menu + graphics: bottom sheets ---------- */
body.mobile #menu { align-items: flex-end; padding: 0 calc(var(--sr) + 10px) 0 calc(var(--sl) + 10px); background: rgba(8,4,8,.78); z-index: 30; }
body.mobile #menu .card { width: min(520px, 100%); max-height: 94%; overflow: auto; padding: 8px 16px calc(var(--sb) + 14px); border-radius: 22px 22px 0 0; background: rgba(24,12,18,.98); border-color: var(--rim); animation: mSheetIn .28s cubic-bezier(.2,.8,.2,1); }
body.mobile #menu h1 { font: 800 clamp(24px, 6vmin, 36px)/1 Cinzel, serif; letter-spacing: .16em; padding-left: .16em; color: var(--gold); }
body.mobile #menu h2 { font-size: 11px; margin: 4px 0 2px; }
body.mobile #menu .btns { margin: 10px 0 6px; gap: 6px; }
body.mobile #menu button { min-height: 44px; font-size: 13px; border-radius: 12px; }
body.mobile #menu #btnNew { background: linear-gradient(180deg, #ffe7c4, #f3a35f); color: #2a0b0b; font-weight: 700; }
.mnote { margin: 2px 0 0; color: var(--ink-3); font-size: 11px; }
.mgrab { width: 40px; height: 4px; margin: 2px auto 8px; border-radius: 3px; background: rgba(255,255,255,.22); }
@keyframes mSheetIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
#mSheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(6,3,6,.7); padding: 0 calc(var(--sr) + 10px) 0 calc(var(--sl) + 10px); }
.ms-card { width: min(480px, 100%); max-height: 94%; overflow: auto; padding: 8px 16px calc(var(--sb) + 14px); border-radius: 22px 22px 0 0; background: rgba(24,12,18,.98); border: 1px solid var(--rim); animation: mSheetIn .28s cubic-bezier(.2,.8,.2,1); color: var(--ink); }
.ms-head { display: flex; align-items: center; justify-content: space-between; }
.ms-head b { font: 700 16px Cinzel, serif; letter-spacing: .1em; color: var(--gold); }
.ms-head button { position: relative; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 15px; }
.ms-head button::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; } /* (44 px to hit) */
.ms-det { margin: 2px 0 8px; color: var(--ink-3); font-size: 11px; }
.ms-opts { display: flex; flex-direction: column; gap: 5px; }
.ms-opts label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); }
.ms-opts label:has(input:checked) { border-color: rgba(255,217,160,.6); background: rgba(255,217,160,.08); }
.ms-opts input { margin-top: 2px; accent-color: #f3a35f; width: 17px; height: 17px; flex: none; }
.ms-opts b { display: block; font: 600 13px var(--ui); }
.ms-opts em { font-style: normal; color: var(--gold); font-weight: 500; font-size: 11.5px; }
.ms-opts small { display: block; margin-top: 1px; color: var(--ink-3); font-size: 11px; line-height: 1.35; }
.ms-apply { width: 100%; margin-top: 10px; min-height: 46px !important; }

/* ---------- portrait: same corners; the objective moves under the top row ---------- */
body.mobile.m-portrait { --top2: calc(var(--st) + var(--gap) + var(--mm) + 10px + 2.5 * var(--fs) + 22px); } /* (timer / meter / toast follow it) */
body.mobile.m-portrait #objective { top: calc(var(--st) + var(--gap) + var(--mm) + 10px) !important; max-width: calc(100vw - 2 * (var(--gap) + max(var(--sl), var(--sr)))); }
body.mobile.m-portrait #toast { max-width: calc(100vw - 40px); }
body.mobile.m-portrait #subs { bottom: calc(var(--sb) + var(--act) + var(--btn) + 40px); max-width: calc(100vw - 40px); }
body.mobile.m-portrait #prompt { max-width: 70vw; }
body.mobile.m-portrait #stickZone { --half: 55vw; top: 55%; }
body.mobile.m-portrait #clock { max-width: 52vw; }
body.mobile.m-portrait #dialogue { max-height: 36vh; }

/* ---------- desktop pop-ups, kept as designed but scaled to a phone ---------- */
body.mobile #shaadiCard { zoom: .62; top: calc((var(--st) + var(--gap) + 70px) / .62) !important; bottom: auto !important; left: calc((var(--sl) + var(--gap)) / .62) !important; }
body.mobile.m-tablet #shaadiCard { zoom: .85; }
/* the desktop landing page's intro (3 sections + footer) on short landscape screens */
/* Short landscape phones (≈ 360–430 CSS px tall): the intro card is a column — tabs, the section (only IT scrolls),
   and the footer with ENTER THE PINK CITY always on screen. (Found on a real OnePlus Nord CE 3 Lite: the card's
   300 px sections pushed ENTER below the fold, so the game could not be started.) */
@media (max-height: 560px) {
  body.mobile #landing .ln-stage { padding: calc(var(--st) + 6px) calc(var(--sr) + 10px) calc(var(--sb) + 6px) calc(var(--sl) + 10px); }
  body.mobile #landing .ln-frame { display: flex; flex-direction: column; max-height: calc(100vh - 12px); overflow: hidden; padding: 10px 18px 10px; }
  body.mobile #landing .ln-dots { flex: none; margin-bottom: 6px; }
  body.mobile #landing .ln-sec.on { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  body.mobile #landing .ln-kicker { margin-bottom: 4px; }
  body.mobile #landing .ln-h { font-size: clamp(22px, 7vh, 40px); margin: 2px 0 6px; }
  body.mobile #landing .ln-quote { font-size: clamp(13px, 4vh, 18px); margin: 4px 0 8px; }
  body.mobile #landing .ln-foot { flex: none; position: static; margin-top: 8px; padding-top: 8px; gap: 8px; background: none; }
  body.mobile #landing .ln-load small { font-size: 11px; }
  body.mobile #landing .ln-cta { padding: 10px 18px; font-size: 15px; }
  body.mobile #landing .ln-sm { padding: 7px 12px; font-size: 12px; }
}
@media (max-height: 420px) { body.mobile #landing .ln-gate { zoom: .85; } }

@media (prefers-reduced-motion: reduce) { body.mobile #buttons .mb-act.pulse { animation: none !important; } }

/* ==========================================================================================================
   HUD v2 — a game-like finish on the same minimal layout (mobile/js/hudworld.js drives the dynamic parts).
   Transform / opacity animations only (compositor-friendly); still no backdrop blur.
   ========================================================================================================== */

/* ---------- waypoint pins in the 3D view ---------- */
#mPins { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.wp { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .25s; will-change: transform; --c1: #fff3b0; --c2: #ffb400; }
.wp.on { opacity: 1; }
.wp[data-k="goal"] { --c1: #ffd0e6; --c2: #ff2d87; }
.wp[data-k="gps"] { --c1: #cdefff; --c2: #38bdf8; }
.wp-dia { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 6px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--c1), var(--c2)); animation: wpBob 1.7s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(10,5,8,.55), 0 0 16px var(--c2), inset 0 0 0 1.5px rgba(255,255,255,.75); }
.wp-dia i { position: absolute; inset: 7px; border-radius: 2px; background: #fff; opacity: .92; }
.wp[data-k="goal"] .wp-dia i { border-radius: 50%; }
.wp-ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c2); opacity: 0; animation: wpRing 1.9s ease-out infinite; }
.wp-d { position: absolute; left: -44px; top: 19px; width: 88px; text-align: center; font: 700 11px/1 var(--ui); letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 1px #000, 0 0 1px #000; } /* (a crisp 1 px edge, not a blurry glow) */
.wp-arr { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; display: none; }
.wp-arr::before { content: ''; position: absolute; left: 0; top: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid var(--c2);
  filter: drop-shadow(0 0 6px var(--c2)) drop-shadow(0 1px 1px #000); }
.wp.edge .wp-arr { display: block; }
.wp.edge .wp-dia { animation: none; transform: rotate(45deg) scale(.72); }
.wp.edge .wp-ring { display: none; }
@keyframes wpBob { 50% { transform: rotate(45deg) translate(-3px, -3px); } }
@keyframes wpRing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- stats card: glass with a warm rim, the time of day as an icon, energy in segments ---------- */
body.mobile #stats {
  background: linear-gradient(160deg, rgba(46,25,33,.82), rgba(14,8,12,.76)); border: 1px solid rgba(255,226,190,.24); border-radius: 14px; padding: 7px 12px 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,238,214,.22), inset 0 -1px 0 rgba(0,0,0,.45);
}
body.mobile #cash { font-weight: 600; color: #fff0d2; text-shadow: 0 1px 1px rgba(0,0,0,.6); transform-origin: 0 60%; }
body.mobile #cash.pop { animation: cashPop .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes cashPop { 0% { transform: scale(1); } 30% { transform: scale(1.22); } 100% { transform: scale(1); } }
body.mobile #stats .m-delta { position: absolute; left: 14px; top: 100%; margin-top: 3px; pointer-events: none; font: 700 calc(var(--fs) + 2px)/1 var(--num);
  text-shadow: 0 1px 1px #000, 0 0 1px #000; animation: dFloat 1.5s ease-out forwards; }
.m-delta.up { color: #8ff0b8; } .m-delta.dn { color: #ff8e8e; }
@keyframes dFloat { 0% { opacity: 0; transform: translateY(-6px) scale(.8); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(22px) scale(1); } }
body.mobile #clock::before { content: ''; flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6c8, #ffc247 60%, #ff9d2e); box-shadow: 0 0 8px 1px rgba(255,190,70,.6); }
body.mobile[data-ph="dawn"] #clock::before { background: radial-gradient(circle at 40% 35%, #ffe0d0, #ff9a6e 60%, #e8606a); box-shadow: 0 0 8px 1px rgba(255,130,110,.55); }
body.mobile[data-ph="dusk"] #clock::before { background: radial-gradient(circle at 40% 35%, #ffd0a0, #ff7d3a 60%, #c4403a); box-shadow: 0 0 8px 1px rgba(255,110,60,.6); }
body.mobile[data-ph="night"] #clock::before { background: #e9edf7; box-shadow: inset -3.5px -1.5px 0 0 #1a1220, 0 0 7px 1px rgba(190,205,255,.45); }
body.mobile.m-hot #clock { color: #ffc9a3; }
body.mobile .statrow .bar { position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); }
body.mobile .statrow .bar::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 2px), rgba(14,8,12,.95) calc(12.5% - 2px) 12.5%); }

/* ---------- radar, objective, prompt ---------- */
body.mobile #mmDial { box-shadow: 0 0 0 2px rgba(255,214,150,.62), 0 0 0 5px rgba(18,9,13,.8), 0 0 0 6px rgba(255,226,190,.22), 0 10px 26px rgba(0,0,0,.5), inset 0 0 22px rgba(0,0,0,.55); }
body.mobile #objective { background: linear-gradient(160deg, rgba(42,21,29,.84), rgba(14,8,12,.78)); border: 1px solid rgba(255,226,190,.22); padding-left: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.36), inset 3px 0 0 var(--gold), inset 0 1px 0 rgba(255,238,214,.16); }
body.mobile #prompt { background: linear-gradient(160deg, rgba(64,27,35,.93), rgba(32,14,20,.92)); border: 1px solid rgba(255,217,160,.58);
  box-shadow: 0 8px 20px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,236,210,.22); }
body.mobile #prompt::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 2px; transform: rotate(45deg); vertical-align: 1px;
  background: var(--gold); box-shadow: 0 0 8px var(--gold); }
body.mobile #prompt:not(.hidden) { animation: promptIn .25s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes promptIn { from { opacity: 0; transform: translateX(10px) scale(.96); } to { opacity: 1; transform: none; } }
#mMenuBtn { background: linear-gradient(160deg, rgba(46,25,33,.82), rgba(14,8,12,.76)); border-color: rgba(255,226,190,.24); box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,238,214,.22); }

/* ---------- joystick + action buttons: rim light, soft depth, a springy press ---------- */
body.mobile #stick { background: radial-gradient(circle, rgba(255,255,255,.07), rgba(255,255,255,.02) 70%); border: 2px solid rgba(255,226,190,.36); box-shadow: inset 0 0 18px rgba(0,0,0,.28); }
body.mobile #knob { background: radial-gradient(circle at 35% 28%, #fff, #ffe9c8 46%, #d98e58); box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 -3px 5px rgba(120,60,30,.35); }
body.mobile #buttons .mb { background: radial-gradient(circle at 50% 26%, rgba(255,255,255,.2), rgba(30,15,22,.72) 64%); border: 1.5px solid rgba(255,226,190,.44);
  box-shadow: 0 8px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.35);
  transition: transform .14s cubic-bezier(.2,.9,.3,1.4), background .12s, opacity .2s; }
body.mobile #buttons .mb:active { transform: scale(.87); background: radial-gradient(circle at 50% 26%, rgba(255,235,200,.55), rgba(220,140,90,.55) 70%); }
body.mobile #buttons .mb-act { background: radial-gradient(circle at 50% 28%, #fff0d4, #f0a05a 58%, #c4553a);
  box-shadow: 0 10px 20px rgba(0,0,0,.45), 0 0 0 2px rgba(255,226,190,.28), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 8px rgba(120,40,20,.45); }
body.mobile #buttons .mb-act:active { background: radial-gradient(circle at 50% 28%, #ffffff, #ffc27d 58%, #d86a45); }

/* ---------- layout fixes found on the phone: the event badge sits UNDER the stats card (it used to widen it and the
   objective pill covered the star rating); money floaters go to the card's right; the objective may wrap to 2 lines ---------- */
body.mobile #eventChip { position: absolute; left: 0; top: 100%; margin-top: 6px; white-space: nowrap; }
body.mobile #stats .m-delta { left: auto; right: 12px; }
body.mobile #objective { max-width: var(--band); /* (--band: both sides reserve the larger cutout) */
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border-radius: 14px; line-height: 1.25; }

/* ---------- HUD cost (measured on the phone, interleaved A/B: each was worth ~1.4 fps) ----------
   • no big soft OUTER shadows (they enlarge every HUD layer and re-blend it over the 3D frame, every frame) — the rim
     light and the inset depth stay, rings are crisp spreads;
   • the waypoint pins only animate (and only exist for the compositor) while one is showing. */
body.mobile #stats { box-shadow: inset 0 1px 0 rgba(255,238,214,.22), inset 0 -1px 0 rgba(0,0,0,.45); }
body.mobile #objective { box-shadow: inset 3px 0 0 var(--gold), inset 0 1px 0 rgba(255,238,214,.16); }
body.mobile #prompt { box-shadow: inset 0 1px 0 rgba(255,236,210,.22); }
#mMenuBtn { box-shadow: inset 0 1px 0 rgba(255,238,214,.22); }
body.mobile #mmDial { box-shadow: 0 0 0 2px rgba(255,214,150,.62), 0 0 0 5px rgba(18,9,13,.8), 0 0 0 6px rgba(255,226,190,.22), inset 0 0 22px rgba(0,0,0,.55); }
body.mobile #buttons .mb { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.35); }
body.mobile #buttons .mb-act { box-shadow: 0 0 0 2px rgba(255,226,190,.28), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 8px rgba(120,40,20,.45); }
body.mobile #buttons .mb-act.pulse { animation: mPulse 1.3s ease-in-out infinite; }
.wp { visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.wp.on { visibility: visible; transition: opacity .25s; }
.wp .wp-dia, .wp .wp-ring { animation: none; }
.wp.on .wp-dia { animation: wpBob 1.7s ease-in-out infinite; }
.wp.on .wp-ring { animation: wpRing 1.9s ease-out infinite; }
.wp.on.edge .wp-dia { animation: none; }

/* ==========================================================================================================
   Ergonomics v3 — thumbs first.
   • The radar cluster (minimap + the ☰ button) stays at its finalized TOP-RIGHT position on phones and desktop; it is
     placed with the safe-area insets (--st / --sr), so a notch or status bar never overlaps it.
   • Swapped layout (settings sheet, on by default): the stick on the right and the buttons on the left; the touch areas keep their size.
   ========================================================================================================== */

/* ---------- swapped layout (default on: body.m-lefty) ---------- */
body.m-lefty #stickZone { --ei: max(24px, var(--sr, 0px));
  --half: min(50vw, 100vw - var(--sl, 0px) - var(--gap, 10px) - var(--act, 64px) - 2 * var(--btn, 46px) - 40px); left: auto; right: var(--ei); }
body.m-lefty #stick { left: auto; right: calc(max(24px, var(--sr)) + 6px); }
body.m-lefty #buttons { right: auto; left: calc(var(--sl) + var(--gap)); }
body.m-lefty #buttons .mb-act { right: auto; left: 0; }
body.m-lefty #buttons .mb-two { right: auto; left: calc(var(--act) + 10px); }
body.m-lefty #buttons .mb-car { right: auto; left: 2px; }
body.m-lefty #buttons .mb-horn { right: auto; left: calc(var(--act) + 4px); }
body.m-lefty #buttons .mb-phone { right: auto; left: calc(var(--act) + var(--btn) + 20px); }
body.mobile.m-lefty #prompt { right: auto; left: calc(var(--sl) + var(--gap)); text-align: left; }
.ms-sec { margin: 10px 2px 4px; font: 600 11px var(--ui); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,226,190,.62); }

/* ==========================================================================================================
   Compact quick menu + Activities hub on phones (landscape is ~390 CSS px tall: everything must fit, not scroll)
   ========================================================================================================== */
body.mobile.m-landscape .mm-card { grid-template-columns: repeat(6, 66px); gap: 4px; padding: 6px 7px 7px; border-radius: 14px; }
body.mobile.m-landscape .mm-card button { height: 46px; gap: 2px; border-radius: 10px; }
body.mobile.m-landscape .mm-card svg { width: 18px; height: 18px; }
body.mobile.m-landscape .mm-card span { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
body.mobile.m-landscape .mm-sec { font-size: 11px; padding: 0 4px; }
body.mobile.m-landscape.m-tablet .mm-card { grid-template-columns: repeat(6, 74px); }
body.mobile.m-landscape.m-tablet .mm-card button { height: 56px; }
body.mobile.m-landscape.m-tablet .mm-card svg { width: 21px; height: 21px; }
body.mobile.m-landscape.m-tablet .mm-card span { font-size: 11.5px; }

body.mobile #activities { top: calc(var(--st) + 6px); bottom: calc(var(--sb) + 6px); left: calc(var(--sl) + 6px); right: calc(var(--sr) + 6px); width: auto; max-height: none; border-width: 1.5px; border-radius: 14px; font-size: 11.5px; z-index: 44; }
body.mobile #activities .top { display: flex; align-items: center; gap: 10px; padding: 6px 10px 3px; flex: none; }
body.mobile #activities .ttl { display: contents; }
body.mobile #activities .ttl b { order: 1; font-size: 13px; white-space: nowrap; }
body.mobile #activities .tabs { order: 2; flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.mobile #activities .x { order: 3; font-size: 17px; min-width: 44px; min-height: 44px; }
body.mobile #activities .tab { flex: none; min-height: 44px; padding: 3px 12px; font-size: 11px; border-radius: 22px; } /* (44 px to hit: the row scrolls sideways, so a hit box outside it would be clipped) */
body.mobile #activities .list { flex: 1; min-height: 0; padding: 2px 8px 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; align-content: start; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
body.mobile #activities .row { padding: 4px 3px; gap: 5px; min-width: 0; }
body.mobile #activities .ri { font-size: 19px; width: 26px; }
body.mobile #activities .rm b { font-size: 12px; }
body.mobile #activities .rm small { font-size: 11px; }
body.mobile #activities .st { font-size: 11px; }
body.mobile #activities .go { flex: none; min-width: 44px; min-height: 44px; padding: 5px 9px; font-size: 11px; border-radius: 9px; white-space: nowrap; }
body.mobile #activities .gps { flex: none; min-width: 44px; min-height: 44px; padding: 4px 5px; font-size: 11px; border-radius: 9px; }
body.mobile #activities .foot { display: none; }
body.mobile.m-portrait #activities .list { grid-template-columns: minmax(0, 1fr); }
body.mobile.m-portrait #activities .ttl b { font-size: 14px; }
body.mobile.m-portrait #activities .top { flex-wrap: wrap; }
body.mobile.m-portrait #activities .tabs { order: 4; flex-basis: 100%; }
body.mobile.m-tablet #activities { left: 50%; right: auto; width: min(900px, calc(100vw - 24px)); transform: translateX(-50%); }

/* ==========================================================================================================
   Landing on phones: the logo, the loading bar, one button (mobile/js/ui.js simpleLanding)
   ========================================================================================================== */
body.m-simple-landing #landing .ln-pre, body.m-simple-landing #landing .ln-lore, body.m-simple-landing #landing .ln-hint,
body.m-simple-landing #landing #lnGfx, body.m-simple-landing #landing #lnStage { display: none !important; }
body.m-simple-landing #landing .ln-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
body.m-simple-landing #landing .ln-load { width: min(340px, 70vw); margin: 4px auto 0; text-align: center; }
body.m-simple-landing #landing .ln-load small { display: block; margin-top: 6px; font-size: 11px; opacity: .75; }
body.m-simple-landing #landing .m-enter { min-width: min(320px, 70vw); padding: 14px 26px; border-radius: 999px; font: 700 17px/1 Cinzel, serif; letter-spacing: .22em;
  color: #2a0b0b; background: linear-gradient(180deg, #ffe7c4, #f3a35f); border: 0; box-shadow: 0 10px 30px rgba(243,163,95,.35), inset 0 1px 0 rgba(255,255,255,.6); }
body.m-simple-landing #landing .m-enter:disabled { opacity: .45; background: rgba(255,226,190,.14); color: #f6e7d2; box-shadow: none; letter-spacing: .06em; font-size: 13px; }
body.m-simple-landing #landing .m-newgame { background: none; border: 0; color: rgba(255,226,190,.7); font: 600 12px var(--ui, system-ui); text-decoration: underline; padding: 8px 14px; }
html, body { background: #1a0710; }
/* landing: a logo that leaves room for the bar and the button on a ~390 px tall landscape screen */
body.m-simple-landing #landing .ln-gate { gap: 8px; padding: 11vh 0 7vh; }
body.m-simple-landing #landing .ln-logo { margin: 0 0 4px; }
body.m-simple-landing #landing .ln-logo .ln-dev { font-size: clamp(16px, 5vmin, 28px) !important; }
body.m-simple-landing #landing .ln-logo b { font-size: clamp(40px, 12vmin, 72px) !important; line-height: 1 !important; }
body.m-simple-landing #landing .ln-logo i { font-size: clamp(12px, 3.4vmin, 20px) !important; margin-top: 4px !important; }
body.m-simple-landing #landing .ln-load { margin: 8px auto 0; }
body.m-simple-landing #landing .m-enter { margin-top: 6px; }

/* ==========================================================================================================
   The loading screen's heart (mobile/js/intro.js): kulhad progress, Jaipuri moments, tap-a-patang, the ⓘ Intro button + sheet
   ========================================================================================================== */
body.m-heart #landing .ln-gate { padding-top: 7vh; padding-bottom: 5vh; gap: 6px; }
body.m-heart #landing .ln-logo b { font-size: clamp(36px, 10vmin, 60px) !important; }
body.m-heart #landing .m-greet { font: 600 clamp(15px, 4.4vmin, 24px)/1.15 Georgia, "Noto Serif Devanagari", serif; color: #ffd9a0; text-shadow: 0 2px 12px rgba(0,0,0,.7); text-align: center; letter-spacing: .02em; }
body.m-heart #landing .m-greet small { display: block; font: 500 10px var(--ui, system-ui); letter-spacing: .26em; text-transform: uppercase; color: rgba(255,214,160,.75); margin-top: 3px; }
body.m-heart #landing .ln-load { display: flex; align-items: center; gap: 14px; width: min(520px, 84vw); text-align: left; margin: 4px auto 0; }
body.m-heart #landing .ln-load .ln-bar, body.m-heart #landing .ln-load #lnStatus { display: none !important; }
body.m-heart .m-chai { flex: none; display: flex; flex-direction: column; align-items: center; width: 52px; }
body.m-heart .m-chai svg { width: 46px; height: 58px; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
body.m-heart .m-chai b { font: 700 11px var(--ui, system-ui); color: #ffd9a0; margin-top: 2px; letter-spacing: .06em; }
body.m-heart .m-st { fill: none; stroke: #fff3e0; stroke-width: 2.2; stroke-linecap: round; opacity: 0; animation: mSteam 2.6s ease-in-out infinite; }
body.m-heart .m-st.s2 { animation-delay: .8s; } body.m-heart .m-st.s3 { animation-delay: 1.6s; }
body.m-heart .m-chai.full .m-st { stroke: #ffffff; stroke-width: 2.8; animation-duration: 1.6s; }
@keyframes mSteam { 0% { opacity: 0; transform: translateY(5px); } 35% { opacity: .75; } 100% { opacity: 0; transform: translateY(-9px); } }
body.m-heart .m-yaad { flex: 1; min-width: 0; font: italic 600 clamp(12px, 3.4vmin, 15px)/1.3 Georgia, serif; color: #ffe8c6; text-shadow: 0 2px 10px rgba(0,0,0,.75); transition: opacity .32s, transform .32s; }
body.m-heart .m-yaad.out { opacity: 0; transform: translateY(5px); }
#mKites { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#mIntroBtn { position: absolute; z-index: 6; left: calc(max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px)) + 14px); top: calc(max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)) + 12px);
  display: flex; align-items: center; gap: 6px; padding: 7px 13px 7px 9px; border-radius: 999px; background: rgba(22,12,18,.66); border: 1px solid rgba(255,226,190,.4); color: #ffe2b8; font: 600 12px var(--ui, system-ui); letter-spacing: .06em; backdrop-filter: blur(6px); }
#mIntroBtn svg, .mm-card [data-intro] svg { width: 18px; height: 18px; fill: none; stroke: #ffc27a; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

#mIntro { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: rgba(8,3,7,.84); backdrop-filter: blur(6px);
  padding: calc(max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)) + 8px) calc(max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px)) + 10px) calc(max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)) + 8px) calc(max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px)) + 10px); }
#mIntro.hidden { display: none; }
#mIntro .mi-card { display: flex; flex-direction: column; width: min(1000px, 100%); height: 100%; max-height: 100%; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #2a1220, #170811); border: 1.5px solid rgba(201,162,74,.75); box-shadow: 0 20px 60px rgba(0,0,0,.6); color: #f6e7d2; animation: mPop .22s ease-out; }
#mIntro header { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 10px 6px 14px; border-bottom: 1px solid rgba(201,162,74,.28); }
#mIntro .mi-t { flex: none; line-height: 1.1; } #mIntro .mi-t b { font: 700 15px Georgia, serif; color: #ffd166; letter-spacing: .04em; } #mIntro .mi-t small { display: block; font: 500 9.5px var(--ui, system-ui); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,214,160,.6); margin-top: 2px; }
#mIntro .mi-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#mIntro .mi-tabs button { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff3dc; font: 600 12px var(--ui, system-ui); }
#mIntro .mi-tabs button i { font-style: normal; opacity: .65; margin-left: 4px; }
#mIntro .mi-tabs button.on { background: #ffb400; color: #1a0d06; border-color: #ffb400; }
#mIntro .mi-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 16px; }
#mIntro .mi-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px 14px; touch-action: pan-y; }
#mIntro .mi-sec.hidden { display: none; }
#mIntro .mi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#mIntro .mi-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
#mIntro .mi-facts span { flex: 1 1 110px; padding: 8px 10px; border-radius: 12px; background: rgba(255,180,0,.09); border: 1px solid rgba(255,180,0,.25); font: 500 10.5px var(--ui, system-ui); color: rgba(255,226,190,.8); text-transform: uppercase; letter-spacing: .08em; }
#mIntro .mi-facts b { display: block; font: 700 21px Georgia, serif; color: #ffd166; letter-spacing: 0; text-transform: none; }
#mIntro .mi-c { padding: 9px 11px 10px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); }
#mIntro .mi-c.wide { grid-column: 1 / -1; background: rgba(255,180,0,.07); border-color: rgba(255,180,0,.22); }
#mIntro .mi-c h4 { margin: 0 0 3px; font: 700 12.5px Georgia, serif; color: #ffcf8a; letter-spacing: .03em; }
#mIntro .mi-c p { margin: 0; font: 400 11.5px/1.5 var(--ui, system-ui); color: #f1e2cc; }
body.mobile.m-portrait #mIntro .mi-grid { grid-template-columns: minmax(0, 1fr); }
/* a soft dark scrim behind the logo / welcome / chai so the text reads over the busy gate painting */
body.m-heart #landing .ln-gate { position: relative; isolation: isolate; }
body.m-heart #landing .ln-gate::before { content: ''; position: absolute; left: 50%; top: 2%; bottom: 12%; width: min(620px, 78vw); transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 46%, rgba(22,6,16,.62), rgba(22,6,16,.38) 55%, rgba(22,6,16,0) 100%); }
/* no flash of the desktop landing's "Click to begin" before mobile/js/ui.js has cut it down (a fallback class opens it after 5 s regardless) */
body:not(.m-simple-landing):not(.m-landing-ready):not(.m-dio) #landing #lnGate, body:not(.m-simple-landing):not(.m-landing-ready) #landing #lnGfx { visibility: hidden; }

/* =====================================================================================================================
   The live 3D landing (mobile/js/diorama.js + diorama.worker.js).
   SPLASH   (body.m-splash)      the live 3D Jaipur + the 3D CHAAJU title, 4 s
   LANDING  (body.m-dio-landing) the title lifts away on the same canvas; ONLY the "Enter the Game" button (centre-bottom) and the chai
                                 glass loader (bottom-left) remain. (A save adds a small "New game" link in the far bottom-right corner.)
   Fallback (body.m-dio-off): the same flow over a CSS sunrise gradient. */
body.m-dio #landing { background: linear-gradient(180deg, #1d1b4a 0%, #6a4a9c 26%, #f08a7c 60%, #ffb36a 86%, #f2a572 100%); }
body.m-dio #landing #lnBg, body.m-dio #landing .ln-veil, body.m-dio #landing .ln-grain, body.m-dio #landing .ln-bars,
body.m-dio #landing .ln-pre, body.m-dio #landing .ln-lore, body.m-dio #landing .ln-hint, body.m-dio #landing .ln-logo, body.m-dio #landing .m-greet,
body.m-dio #landing .m-yaad, body.m-dio #landing #lnGfx, body.m-dio #landing #lnStage { display: none !important; }
#mDiorama { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; pointer-events: none; } /* (always visible: it is transparent until the worker's first frame, which starts as the same sky gradient and fades into Jaipur by itself) */
body.m-dio #landing::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 85% 85% at 50% 46%, rgba(20,6,16,0) 55%, rgba(20,6,16,.5) 100%); }
body.m-dio #mKites { z-index: 4; }

/* ---- the 3D title: drawn inside the worker's canvas (diorama.worker.js buildTitle) — this DOM copy is only the fallback when there is no 3D scene */
body.m-dio-on #mSplash { display: none !important; }
#mSplash { position: absolute; left: 0; right: 0; top: max(7vh, calc(env(safe-area-inset-top, 0px) + 14px)); z-index: 5; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; perspective: 900px; }
body.m-splash #mSplash { animation: spIn 1.4s cubic-bezier(.2,.7,.2,1) .5s forwards, spOut 1.3s ease 4.5s forwards; } /* (a CSS timeline from the first 3D frame: body.m-splash is added then, and the compositor runs it from there) */
@keyframes spIn { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes spOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-5vh) scale(.9); } }
#mSplash .sp-dev { font: 600 clamp(16px, 4.6vmin, 30px)/1 "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif; color: #ffd9a0; text-shadow: 0 2px 14px rgba(40,8,10,.8); letter-spacing: .06em; margin-bottom: 1vmin; }
#mSplash .sp-logo { position: relative; transform-style: preserve-3d; font: 900 clamp(46px, 17vmin, 120px)/1 Cinzel, "Times New Roman", serif; letter-spacing: .14em; padding-left: .14em; animation: spSway 7s ease-in-out infinite; will-change: transform; }
#mSplash .sp-logo .cp { position: absolute; left: 0; top: 0; white-space: nowrap; }
#mSplash .sp-logo .fc { position: relative; display: block; white-space: nowrap; color: transparent; background: linear-gradient(180deg, #fff3cf 0%, #ffd27a 38%, #e89a3c 62%, #ffe0a0 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 3px rgba(60,16,10,.55)); }
#mSplash .sp-logo::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -10%; height: 16%; background: radial-gradient(ellipse at center, rgba(40,10,6,.45), rgba(40,10,6,0) 70%); transform: translateZ(-30px) rotateX(80deg); filter: blur(4px); }
#mSplash .sp-tag { font: italic 600 clamp(11px, 3vmin, 19px)/1 Georgia, serif; letter-spacing: .38em; text-transform: uppercase; color: #ffd8a0; text-shadow: 0 2px 12px rgba(40,8,10,.85); margin-top: 2.2vmin; padding-left: .38em; }
#mSplash .sp-greet { font: 600 clamp(14px, 3.8vmin, 24px)/1.1 "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif; color: #ffe6bd; text-shadow: 0 2px 14px rgba(40,8,10,.85); margin-top: 1.6vmin; }
@keyframes spSway { 0%, 100% { transform: rotateY(-11deg) rotateX(3deg); } 50% { transform: rotateY(11deg) rotateX(-1deg); } }

/* ---- the landing: nothing but the button and the chai glass */
body.m-dio #landing #lnGate { position: absolute; inset: 0; z-index: 6; display: block !important; padding: 0 !important; opacity: 0; pointer-events: none; }
body.m-splash #landing #lnGate { animation: gateIn 1.3s ease 4.8s forwards; }
@keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }
body.m-dio-landing #landing #lnGate { opacity: 1; } /* (toLanding() drops body.m-splash at 9 s, and with it the animation's fill: the gate must stay) */
body.m-dio #landing #lnGate::before { display: none; }
body.m-dio #landing #lnGate > * { pointer-events: auto; }
body.m-dio #landing .m-enter { position: absolute; left: 50%; bottom: max(7vh, calc(env(safe-area-inset-bottom, 0px) + 18px)); transform: translateX(-50%); margin: 0 !important; min-width: min(300px, 62vw); padding: 15px 30px; border-radius: 999px; font: 800 clamp(14px, 3.7vmin, 18px)/1 Cinzel, "Times New Roman", serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 26px rgba(40,8,10,.55), 0 0 0 1px rgba(255,226,190,.35) inset; }
body.m-dio #landing .m-enter:disabled { background: rgba(34,10,20,.62) !important; color: #ffe6c6 !important; opacity: 1 !important; letter-spacing: .08em; font-size: clamp(12px, 3.2vmin, 15px); text-transform: none; }
body.m-dio #landing .ln-load { position: absolute; left: calc(max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px)) + 18px); bottom: max(5vh, calc(env(safe-area-inset-bottom, 0px) + 14px)); width: auto; margin: 0; display: flex; align-items: flex-end; text-align: left; }
body.m-dio .m-chai { width: 64px; }
body.m-dio .m-chai svg { width: 56px; height: 72px; filter: drop-shadow(0 5px 10px rgba(30,6,8,.55)); }
body.m-dio .m-chai b { font-size: 12px; margin-top: 3px; }
body.m-dio #landing .m-newgame { position: absolute; right: calc(max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px)) + 16px); bottom: max(5vh, calc(env(safe-area-inset-bottom, 0px) + 14px)); font-size: 11px; opacity: .65; }

/* =====================================================================================================================
   "गुलाबी नगर और छाजू के बारे में" — Jaipur & Chaaju Diaries: the ornate brass heritage button on the landing, and its parchment modal
   (mobile/js/intro.js). The button sits top-left (the chai glass is bottom-left, ENTER bottom-centre, "New game" bottom-right).
   ===================================================================================================================== */
body.m-dio #landing #mIntroBtn { display: flex !important; align-items: center; gap: 9px; z-index: 7; padding: 4px 16px 4px 4px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #6a2128, #3f1018); border: 0; color: #ffe9b8; text-align: left;
  box-shadow: 0 0 0 1.5px #e3b755, 0 0 0 3.5px #5a3a0c, 0 0 0 5px rgba(255,226,170,.55), 0 8px 22px rgba(30,6,10,.55), inset 0 1px 0 rgba(255,236,190,.35); }
body.m-dio #landing #mIntroBtn svg { flex: none; width: 46px; height: 46px; fill: initial; stroke: none; filter: drop-shadow(0 2px 4px rgba(20,4,6,.6)); }
body.m-dio #landing #mIntroBtn span { display: block; line-height: 1.12; }
body.m-dio #landing #mIntroBtn b { display: block; font: 700 clamp(12px, 3.1vmin, 15px)/1.15 "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif; color: #ffe2a0; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
body.m-dio #landing #mIntroBtn small { display: block; margin-top: 2px; font: 600 9px var(--ui, system-ui); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,226,170,.78); }
body.m-dio #landing #mIntroBtn:active { transform: scale(.97); }
/* the parchment sheet */
#mIntro { background: rgba(26,8,10,.78); }
#mIntro .mi-card { position: relative; width: min(1020px, 100%); border-radius: 10px; color: #3a2112; animation: mPop .26s ease-out;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255,246,214,.9), rgba(255,246,214,0) 60%), radial-gradient(ellipse 80% 60% at 8% 100%, rgba(150,96,40,.22), rgba(150,96,40,0) 70%), radial-gradient(ellipse 70% 55% at 96% 92%, rgba(130,80,30,.2), rgba(130,80,30,0) 70%), linear-gradient(180deg, #f2e1b8, #e6cf9b 55%, #dcc08a);
  border: 0; box-shadow: 0 0 0 2px #b8862c, 0 0 0 5px #5a3a0c, 0 0 0 7px rgba(240,205,120,.6), 0 24px 70px rgba(0,0,0,.65), inset 0 0 40px rgba(120,70,20,.28); }
#mIntro .mi-card::before, #mIntro .mi-card::after { content: '❦'; position: absolute; z-index: 3; font-size: 20px; line-height: 1; color: #8a5a16; opacity: .7; pointer-events: none; }
#mIntro .mi-card::before { left: 9px; bottom: 6px; } #mIntro .mi-card::after { right: 9px; bottom: 6px; transform: scaleX(-1); }
#mIntro .mi-seal { position: absolute; z-index: 4; left: 10px; top: 8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 20px "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif; font-style: normal; color: #ffe9b8;
  background: radial-gradient(circle at 35% 30%, #a83a3a, #6a1519 70%); box-shadow: 0 0 0 2px #e3b755, 0 0 0 3.5px #5a3a0c, 0 3px 8px rgba(40,10,10,.5); }
#mIntro header { padding: 8px 10px 6px 58px; border-bottom: 0; gap: 12px; }
#mIntro .mi-t b { font: 700 clamp(15px, 3.6vmin, 20px) "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif; color: #6e1519; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,244,214,.7); }
#mIntro .mi-t small { color: #8a5a2a; font-weight: 700; }
#mIntro .mi-tabs button { border: 1px solid rgba(138,90,22,.5); background: rgba(255,248,224,.5); color: #5a2a12; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
#mIntro .mi-tabs button i { opacity: .7; }
#mIntro .mi-tabs button.on { background: linear-gradient(180deg, #8c2a2f, #62161b); color: #ffe6a8; border-color: #e3b755; box-shadow: 0 0 0 1px #5a3a0c, 0 2px 6px rgba(60,16,16,.4); }
#mIntro .mi-x { background: rgba(110,21,25,.9); color: #ffe6a8; box-shadow: 0 0 0 1.5px #e3b755; }
#mIntro .mi-rule { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 14px; color: #8a5a16; font-size: 13px; }
#mIntro .mi-rule i { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(138,90,22,0), #a8741c 40%, #a8741c 60%, rgba(138,90,22,0)); border-radius: 2px; }
#mIntro .mi-body { padding: 10px 14px 18px; }
#mIntro .mi-facts span { background: rgba(255,248,224,.55); border: 1px solid rgba(138,90,22,.45); color: #6a4420; }
#mIntro .mi-facts b { color: #7a1a1f; }
#mIntro .mi-c { background: rgba(255,250,232,.5); border: 1px solid rgba(138,90,22,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
#mIntro .mi-c.wide { background: rgba(255,238,190,.55); border-color: rgba(138,90,22,.5); }
#mIntro .mi-c h4 { color: #7a1a1f; font-size: 13.5px; }
#mIntro .mi-c p { color: #3a2112; font-size: 12px; line-height: 1.55; }
#mIntro .mi-c b, #mIntro .mi-c i { color: #6e1519; }
body.m-dio #landing .m-enter span { display: block; }
body.m-dio #landing .m-enter small { display: block; margin-top: 4px; font: 700 .72em/1.15 "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif; letter-spacing: .1em; text-transform: none; opacity: .85; }
body.m-dio #landing .m-enter { min-width: min(320px, 66vw); padding: 12px 34px 11px; text-align: center; }
body.m-dio #landing .m-enter:disabled small { display: none; }
/* phone widths: the three section tabs must all fit beside the title and the close button (the English half of each label is dropped) */
@media (max-width: 1000px) {
  #mIntro .mi-tabs button i { display: none; }
  #mIntro .mi-tabs button { padding: 7px 14px; }
  #mIntro .mi-tabs { overflow: visible; }
}

/* ===== PLAIN SPLASH (body.m-plain, mobile/index.html): no live 3D scene, no painting, no music, no extra captions —
   one calm gradient, the CHAAJU title, the loading bar and the Start button. Light on purpose: the city loads behind it. */
body.m-plain #landing { background: linear-gradient(180deg, #2b1631 0%, #7b3b55 55%, #d98a5f 100%); }
body.m-plain #landing #lnBg, body.m-plain #landing .ln-veil, body.m-plain #landing .ln-grain, body.m-plain #landing .ln-bars,
body.m-plain #landing .ln-logo .ln-dev, body.m-plain #landing .ln-load small, body.m-plain #landing #lnGfx { display: none !important; }
body.m-plain #landing #lnGate { opacity: 1 !important; visibility: visible !important; animation: none !important; }
body.m-plain #landing #lnGate::before { display: none; }