/* ==========================================================
   POCKET POWER v039 — look-and-feel polish (additive; supersedes lookfeel-v038.css; v038 rules carried verbatim)
   v043: file carried from lookfeel-v042.css verbatim + v043 peace-of-mind block at the end.
   Loaded AFTER /styles.css. Visual only: no gameplay, audio,
   level, icon, splash, brand-mark or copy changes.
   ========================================================== */

/* 1) Loading status + percentage — v035 refinement (calmer, more elegant; not just smaller):
      status 12.75px/600/.14em → 12.25px/500/.11em (less shouty caps), slightly warmer off-white;
      % 13.75px/650 → 13px/600 tabular, '%' suffix a touch lighter so the number leads;
      pill: quieter background (.46/.30 → .34/.20), hairline edge a bit softer, NO backdrop-filter
      (consistent with the no-blur policy and cheaper on iPhone), padding 5px 11px → 5px 12px.
      Text-shadow kept for legibility over the skyline. Scoped to #scr-loading. */
/* v036: pill noticeably darker for white-text contrast over the skyline (.34/.20 → .84/.72), stronger inset
   edge + top highlight; type sizes unchanged from v035. */
/* v037: middle ground (.84/.72 too dark, .34/.20 too light) → .60/.55; smaller type; more horizontal inset so
   READY / 100% sit clear of the pill curves (padding 5px 12px → 6px 20px, with a 14px gap between status and %).
   Pill outer width unchanged from v036 (bar + 12px each side); the text now sits 8px inside the bar ends. */
/* v038: lighter, quieter capsule that sits exactly over the bar (no 12px overhang past the bar ends), so the pill is
   inset from the screen edges by the same margin as the bar; slightly smaller caps with more tracking, and the
   status/% inset 16px from the rounded ends. Background .60/.55 → .44/.38 with a soft vertical sheen. */
#scr-loading .ld-meta{
  align-items:center;
  gap:12px;
  margin:0 0 11px;
  min-height:28px;
  padding:6px 16px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(18,21,46,.46),rgba(6,7,18,.40));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.07),0 8px 20px -14px rgba(0,0,0,.6);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:box-shadow .45s ease,background .45s ease;
}
#scr-loading #ldStatus{
  font-size:10.75px;font-weight:500;letter-spacing:.13em;line-height:1.3;
  color:rgba(251,247,238,.94);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  transition:color .35s ease;
}
#scr-loading #ldPct{
  font-size:11.5px;font-weight:600;line-height:1.3;letter-spacing:.02em;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
#scr-loading #ldPct::after{color:rgba(255,255,255,.72);font-weight:500;margin-left:1.5px;}
/* Ready: status goes gold but stays clearly visible. */
#scr-loading .ld-progress.done #ldStatus{color:var(--gold);text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 12px rgba(246,198,110,.35);}
#scr-loading .ld-progress.done #ldPct{color:#fff6dd;}
#scr-loading .ld-progress.done #ldPct::after{color:rgba(255,246,221,.82);}
/* Slightly more presence for the bar track. */
#scr-loading .hair{height:3px;background:rgba(255,255,255,.14);}
#scr-loading .ld-tip{opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.6);}

/* 2) Tap to begin: clearer contrast, border and comfortable hit area. */
#scr-loading .btn-begin{
  min-height:54px;
  color:#fff;font-weight:600;letter-spacing:.07em;
  background:rgba(12,15,36,.55);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 0 0 1px rgba(246,198,110,.14),0 10px 28px -12px rgba(0,0,0,.8),inset 0 1px rgba(255,255,255,.08);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#scr-loading .btn-begin::before{content:"";position:absolute;inset:-10px;border-radius:inherit;}
#scr-loading .btn-begin.ready{border-color:rgba(246,198,110,.48);}
#scr-loading .btn-begin:active{background:rgba(22,26,56,.7);}
/* At 100% the whole loading screen is tappable (see app.js beginFromLoading). */
#scr-loading.ld-tap-ready{cursor:pointer;}

/* 3) Quiet global consistency (no layout changes). */
.btn-ghost{border-color:rgba(255,255,255,.18);}
.btn,.icon-btn{-webkit-font-smoothing:antialiased;}
.icon-btn{border-color:rgba(255,255,255,.18);}

/* ==========================================================
   v034 — Districts list scroll performance (visual parity)
   - No live parallax: app.js no longer rewrites .scene transforms on scroll.
   - Scenes sit at a static scale(1.08) with no transition.
   - Locked cards use a static veil instead of filter() on the SVG scene.
   - No backdrop-filter on anything that scrolls inside #districtList.
   v035: REMOVED content-visibility:auto + contain-intrinsic-size on .d-card and the
   card-level contain:layout paint style. On iOS Safari those left off-screen cards
   as empty rounded shells (border only, no title/art) while scrolling. Cards now
   render normally; the list itself keeps a light contain:content.
   ========================================================== */
#districtList{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  contain:content;
}
#districtList .d-card{
  content-visibility:visible;
  contain:none;
}
#districtList .d-card .scene{
  transform:scale(1.08)!important;
  transition:none!important;
  filter:none!important;
}
/* Cheap locked look: dark, slightly cool-grey veil layered on top of the existing card gradient
   (approximates the old grayscale(1) brightness(.45) without refiltering the SVG). */
#districtList .d-card.locked::after{
  background:
    linear-gradient(rgba(12,13,20,.58),rgba(12,13,20,.58)),
    linear-gradient(180deg,rgba(4,5,12,.1) 0%,rgba(4,5,12,0) 25%,rgba(4,5,12,.55) 55%,rgba(4,5,12,.92) 100%),
    linear-gradient(90deg,rgba(4,5,12,.45),transparent 70%);
}
/* The few hard-coded accent colours in locked art (neon signs, aurora bands, beacon dots) go neutral grey
   via plain stroke/fill — no filter. */
#districtList .d-card.locked .neon rect{stroke:#8f8f8f;}
#districtList .d-card.locked .aurora-band{stroke:#9a9a9a;}
#districtList .d-card.locked .blink circle:last-child{fill:#9a9a9a;}
/* Solid, slightly more opaque surfaces instead of blur on the scrolling cards. */
#districtList .d-prog{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:rgba(8,9,22,.74);
}
#districtList .badge{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:rgba(10,12,30,.82);
}
#districtList .badge.new{background:var(--gold);}
#districtList .lk{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,12,30,.8);}
/* Summary card: same look, opaque base instead of an 18px saturate blur. */
#districtList .d-summary.glass{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)),#111326;
}
/* Pause any remaining decorative animation only while actively scrolling. */
#districtList.is-scrolling .d-card *{animation-play-state:paused!important;}
/* v035/v036: menu art is drawn in cityscapeSVG lite mode (no SVG blur filters). */
/* v036: animation:none REMOVED — the lite art carries a cheap CSS motion set again (twinkles, drifting
   unblurred clouds, aurora shimmer, 1 shooting star, a couple of cars, neon/window flicker). Still no
   will-change layers inside the list; cards far out of view (.d-off via IntersectionObserver) pause. */
#districtList .d-card .scene *{will-change:auto!important;}
#districtList .d-card.d-off .scene *{animation-play-state:paused!important;}

/* ==========================================================
   v034 — final quiet polish (no structure, colour-family or copy changes)
   ========================================================== */
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* Top bars: titles a touch crisper over artwork. */
.bar-title{text-shadow:0 1px 2px rgba(0,0,0,.45);}
.topbar .chip{border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.topbar .chip b{color:#fff;}
/* Cards: slightly clearer edge + text contrast on district art. */
#districtList .d-card{border-color:rgba(255,255,255,.15);}
#districtList .d-card.locked{border-color:rgba(255,255,255,.09);}
#districtList .d-card p{color:rgba(244,241,234,.84);}
#districtList .d-prog{border-color:rgba(255,255,255,.11);color:rgba(244,241,234,.86);}
.ds-num{color:rgba(244,241,234,.8);}

/* ==========================================================
   v035 — light polish (additive, no layout/copy changes)
   ========================================================== */
#scr-loading .ld-tip{letter-spacing:.01em;}
#districtList .d-card h3{text-shadow:0 1px 10px rgba(0,0,0,.72);}
/* lite aurora bands are <g> groups of stacked strokes; keep the locked grey treatment working */
#districtList .d-card.locked .aurora-band path{stroke:#9a9a9a;}

/* ==========================================================
   v037 — District card motion polish (lite menu art only; scoped to #districtList)
   Same constraints as v035/v036: no content-visibility:auto, no parallax, no SVG blur, no backdrop-filter in
   the list; is-scrolling + d-off pauses above still apply to everything here. Quality over quantity:
   per card ~55–80 animated nodes, each with calmer, smoother timing.
   ========================================================== */
/* Stars: softer dip (.15 → .3) and longer cycles; brighter "hi" stars dip less; rare big stars get a soft
   gradient halo (no blur) and a gentle breathing scale. */
#districtList .tw{animation:twLite var(--t,4s) var(--dl,0s) ease-in-out infinite;}
#districtList .tw.tw-hi{animation-name:twLiteHi;}
#districtList .tw.tw-big{animation-name:twLiteBig;transform-box:fill-box;transform-origin:center;}
@keyframes twLite{50%{opacity:.3;}}
@keyframes twLiteHi{50%{opacity:.45;}}
@keyframes twLiteBig{0%,100%{transform:scale(1);}50%{opacity:.55;transform:scale(.74);}}
/* Clouds: per-cloud drift distance (--cx) and speed; high wisps travel further/faster than low banks. */
#districtList .cloud-drift{animation:cloudDriftLite var(--t,90s) var(--dl,0s) ease-in-out infinite alternate;}
@keyframes cloudDriftLite{from{transform:translateX(calc(var(--cx,24px) * -1));}to{transform:translateX(var(--cx,24px));}}
/* Aurora: smoother shimmer — slow sway + a little curtain height breathing; dashed "rays" drift along the band. */
#districtList .aurora-band{animation:auroraLite 15s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 50%;}
#districtList .aurora-band.b2{animation-duration:20s;animation-delay:-7s;}
@keyframes auroraLite{0%{transform:translateX(-12px) scaleY(.9);opacity:.2;}50%{transform:translateX(0) scaleY(1.06);opacity:.36;}100%{transform:translateX(12px) scaleY(.95);opacity:.24;}}
#districtList .aurora-rays{opacity:.06;animation:auroraRays 20s linear infinite,auroraRaysPulse 7s ease-in-out infinite alternate;}
#districtList .aurora-rays.r2{animation-duration:26s,9s;animation-direction:reverse,alternate;animation-delay:0s,-3s;}
@keyframes auroraRays{to{stroke-dashoffset:-150;}}
@keyframes auroraRaysPulse{from{opacity:.025;}to{opacity:.085;}}
#districtList .d-card.locked .aurora-rays{stroke:#9a9a9a;}
/* Neon: every sign hums softly; ~30% (fl2) do a clearer double flicker. Dual outer stroke + faint fill in app.js. */
#districtList .neon{animation:neonHum 4.6s var(--dl,0s) ease-in-out infinite;}
#districtList .neon.fl2{animation:neonFlickLite 7s var(--dl,0s) infinite;}
@keyframes neonHum{50%{opacity:.82;}}
@keyframes neonFlickLite{0%,83%,100%{opacity:1;}84%{opacity:.28;}85.5%{opacity:.95;}87%{opacity:.18;}89%{opacity:1;}94%{opacity:.86;}}
#districtList .d-card.locked .neon .nf{fill:#8f8f8f;}
/* Searchlight beams: slower ease with a gentle brightness swell at centre. */
#districtList .beam{animation:beamSwayLite 10s ease-in-out infinite alternate;}
#districtList .beam.b2{animation-duration:13s;animation-delay:-5s;}
@keyframes beamSwayLite{0%{transform:rotate(-15deg);opacity:.72;}50%{opacity:1;}100%{transform:rotate(15deg);opacity:.78;}}
/* Harbor: brighter, eased lighthouse sweep; lantern glow and its water reflection breathe; water glints stretch. */
#districtList .lh-beam{animation:lhSweepLite 8s ease-in-out infinite;}
@keyframes lhSweepLite{0%{transform:scaleX(1);opacity:1;}46%{transform:scaleX(-1);opacity:1;}50%{transform:scaleX(-1);opacity:.5;}96%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(1);opacity:.5;}}
#districtList .lh-glow{animation:lhGlow 4s ease-in-out infinite alternate;}
@keyframes lhGlow{from{opacity:.42;}to{opacity:.78;}}
#districtList .lh-reflect{animation:lhReflect 4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0;}
@keyframes lhReflect{from{opacity:.14;transform:scaleY(.8);}to{opacity:.36;transform:scaleY(1.12);}}
#districtList .shimmer{animation:shimmerLite 5.5s var(--dl,0s) ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes shimmerLite{50%{opacity:.05;transform:translateX(5px) scaleX(.55);}}
/* Shooting star: a bit longer, eased streak. */
#districtList .shoot{animation:shootLite 15s var(--dl,2s) cubic-bezier(.25,.6,.35,1) infinite;}
@keyframes shootLite{0%,88%{opacity:0;transform:translate(0,0);}89%{opacity:1;}95.5%{opacity:0;transform:translate(92px,28px);}100%{opacity:0;}}

/* ==========================================================
   v037 — Menu / sheet border polish (Pause & Settings sheet, confirm sheets, result card, how-to card,
   level/daily preview sheets). Same layout, same dark navy palette; clearer, more premium edges:
   soft hairline + 1px inner top highlight + gentle depth.
   ========================================================== */
.sheet-glass{
  border-color:rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.02),0 -1px 0 rgba(0,0,0,.35),0 30px 80px rgba(0,0,0,.55);
}
.sheet-panel.sheet-glass{border-top-color:rgba(255,255,255,.18);}
.grabber{background:rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
/* Grouped lists (Music / Sound effects / Haptics; Restart / How to play / Return…) and the star-target list. */
.sheet-panel .group,.targets{
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px -16px rgba(0,0,0,.75);
}
/* Row separators: cleaner hairline, inset to line up with the labels (16px pad + 19px icon + 14px gap). */
.sheet-panel .group .row+.row{border-top-color:transparent;background:linear-gradient(rgba(255,255,255,.085),rgba(255,255,255,.085)) no-repeat 49px 0/calc(100% - 49px) 1px border-box;}
.sheet-panel .group button.row:active{background-color:rgba(255,255,255,.05);}
.targets .target+.target{border-top-color:rgba(255,255,255,.085);}
/* Moves / Par / Homes lit (and result-card stats): top/bottom rules fade out at the ends; short centred dividers. */
.meta3,.result-card .stats{
  border-top:1px solid transparent;border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.13) 14%,rgba(255,255,255,.13) 86%,rgba(255,255,255,0)) 1;
}
.meta3 div+div,.result-card .stats div+div{
  border-left:1px solid transparent;
  border-image:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.12) 22%,rgba(255,255,255,.12) 78%,rgba(255,255,255,0)) 1;
}
/* Buttons that live on sheets: same hairline family. */
.sheet-glass .btn-ghost{border-color:rgba(255,255,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
.sheet-glass .btn-danger{box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.how-card .how-close{border-color:rgba(255,255,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
/* Toast pill matches the sheet edge. */
.toast{border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.5);}

/* ==========================================================
   v038 — Home → Districts transition fix + loading polish + light final pass
   ========================================================== */
/* 1) Districts is its own opaque surface. It used to have no background, so while it slid in (opacity 0→1)
      Home's skyline, stars, moon, star chip, settings button and tab bar showed through ("double cityscape";
      the phantom "▾" after the title was a Home sky star behind it). Same gradient as #app, so the settled
      look is unchanged; --bg0 underlay guarantees full opacity. */
#scr-districts{background:radial-gradient(120% 70% at 50% 0%,var(--bg2),var(--bg1) 55%,var(--bg0)) var(--bg0);}
/* Nothing on this opaque bar needs to blur what's behind it — drop backdrop-filter (cheaper on iOS, and no
   blur layers re-rasterising during the slide); slightly firmer fill keeps the same look. */
#scr-districts .topbar .icon-btn,#scr-districts .topbar .chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.06);}

/* 2) Home → Districts is an iOS-style push: Districts (opaque, on top from frame 0, opacity 1 the whole time)
      slides in from the right edge; Home drifts left and fades out underneath, so only one header/background
      is ever visible. transform/opacity only. Back (Districts → Home) is unchanged: Home cuts in on top. */
#scr-districts.in-fwd{z-index:3;animation:districtsPushIn .42s var(--ease) both;box-shadow:-18px 0 36px -12px rgba(0,0,0,.55);}
#scr-home.out-fwd{z-index:1;animation:homePushOut .42s var(--ease) both;}
@keyframes districtsPushIn{from{transform:translate3d(100%,0,0);}to{transform:translate3d(0,0,0);}}
@keyframes homePushOut{from{transform:translate3d(0,0,0);opacity:1;}to{transform:translate3d(-24%,0,0);opacity:0;}}
/* Home's blurred settings disc stops sampling the sky while Home is leaving. */
#scr-home.out-fwd #btnSettings::before{-webkit-backdrop-filter:none;backdrop-filter:none;}
/* Coming back from a level map, Districts fades in over its own opaque base (no themed gradient bleed). */
#scr-districts.in-back{z-index:2;}

/* 3) Loading — smoother ready state and a calmer tip panel in the same pill family. */
#scr-loading .ld-progress.done .ld-meta{box-shadow:inset 0 0 0 1px rgba(246,198,110,.26),inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px -14px rgba(246,198,110,.28);}
#scr-loading .ld-progress.done #ldStatus{text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(246,198,110,.28);}
#scr-loading .hair{height:3px;border-radius:3px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.04);}
#scr-loading .hair i{border-radius:3px;}
#scr-loading .btn-begin.ready{animation:beginReadyIn38 .38s var(--out) both;}
@keyframes beginReadyIn38{from{opacity:0;transform:translateY(6px) scale(.985);}to{opacity:1;transform:none;}}
#scr-loading .btn-begin{background:rgba(14,17,40,.50);border-color:rgba(255,255,255,.22);}
#scr-loading .btn-begin.ready{border-color:rgba(246,198,110,.44);}
#scr-loading .ld-tip{
  border-radius:27px;padding:8px 22px;
  background:rgba(14,17,38,.56);
  border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px -16px rgba(0,0,0,.7);
  color:rgba(214,217,236,.92);font-size:12.75px;letter-spacing:.01em;
}

/* 4) Light consistency pass. */
.topbar .bar-title{letter-spacing:.02em;font-weight:600;}
#districtList .d-summary.glass{border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
@media(prefers-reduced-motion:reduce){#scr-districts.in-fwd,#scr-home.out-fwd,#scr-loading .btn-begin.ready{animation:none;}}

/* ==========================================================
   v039 (Michael t114u)
   ========================================================== */

/* 1) Home upward-settle glitch on return from Districts.
      Root cause: `.screen.active .in` / `#scr-home.active .in{animation-name:homeControlIn}` restart every time
      #scr-home regains .active, so after Districts → Home the mark, tagline, Continue card and tab bar replayed
      translateY(8px) → 0 (staggered by --d up to .42s, .9s each) = a visible upward settle (iPhone video, ~8 CSS px).
      app.js go() now tags Home `home-settled` on every non-startup activation; the first presentation from Loading
      (in-start) keeps its entrance. Final positions are identical (the keyframe only ever ended at transform:none). */
#scr-home.home-settled.active .in,#scr-home.home-settled.active .home-bottom .in{animation:none;}
/* Back entrance at the screen level is unchanged from v038 (homeInBack: translateX(-30px)→0, horizontal only).
   go() removes out-fwd (homePushOut -24%/opacity 0) before adding in-back, so no push-out residue survives the return. */

/* 2) Loading — one more notch of refinement (scoped to #scr-loading).
      Hierarchy: tip = soft secondary card (sentence case, muted lavender, lighter glass, slimmer);
                 status = crisp primary capsule (caps, near-white) tied visually to the bar below.
      Breathing room: tip slimmer (54 → 46px) and centred in the reserved Begin row, so there is more air between it
      and the status capsule; status capsule 28 → 30px with 12px to the bar. Long statuses keep ellipsis safety. */
#scr-loading .ld-tip{
  top:12px;height:46px;min-height:46px;padding:8px 20px;gap:9px;
  border-radius:23px;
  background:linear-gradient(180deg,rgba(20,23,50,.36),rgba(10,12,28,.30));
  border-color:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 28px -20px rgba(0,0,0,.65);
  color:rgba(206,210,234,.80);font-size:12.5px;font-weight:400;line-height:1.35;letter-spacing:.012em;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  transition:opacity .45s ease,visibility 0s linear 0s;
}
/* tiny warm lamp ahead of the tip text: ties the hint to the gold palette without adding copy */
#scr-loading .ld-tip::before{
  content:"";flex:0 0 4px;width:4px;height:4px;border-radius:50%;
  background:rgba(246,198,110,.85);box-shadow:0 0 6px 1px rgba(246,198,110,.35);
}
#scr-loading .ld-tip:empty::before{display:none;}
/* At ready the tip eases out (instead of vanishing) while Tap to begin eases in over the same row. */
#scr-loading .btn-begin:not(.hidden)~.ld-tip{opacity:0!important;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s;}

#scr-loading .ld-meta{
  min-height:30px;padding:7px 16px;margin:0 0 12px;gap:14px;
  background:linear-gradient(180deg,rgba(22,25,54,.40),rgba(8,9,22,.34));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 1px 0 rgba(255,255,255,.065),0 10px 24px -18px rgba(0,0,0,.6);
  transition:box-shadow .6s ease,background .6s ease;
}
#scr-loading #ldStatus{font-size:10.5px;letter-spacing:.125em;color:rgba(251,248,240,.93);text-shadow:0 1px 2px rgba(0,0,0,.6);}
#scr-loading #ldPct{font-size:11.25px;color:rgba(255,255,255,.96);text-shadow:0 1px 2px rgba(0,0,0,.6);}
#scr-loading #ldPct::after{color:rgba(255,255,255,.62);}
/* Bar: same 3px rounded track, a hair quieter; fill carries a soft underglow so the tip dot reads as the leading edge. */
#scr-loading .hair{background:rgba(255,255,255,.10);}
#scr-loading .hair i{box-shadow:0 0 8px rgba(246,198,110,.28);}

/* Ready: warm gold hairline + gentle one-shot glow on the capsule; Tap to begin eases in a touch slower/softer. */
#scr-loading .ld-progress.done .ld-meta{
  background:linear-gradient(180deg,rgba(40,32,30,.40),rgba(12,10,20,.34));
  box-shadow:inset 0 0 0 1px rgba(246,198,110,.30),inset 0 1px 0 rgba(255,240,210,.10),0 10px 26px -14px rgba(246,198,110,.30);
  animation:ldReadyGlow39 1.1s ease-out 1;
}
@keyframes ldReadyGlow39{0%{box-shadow:inset 0 0 0 1px rgba(246,198,110,.12),inset 0 1px 0 rgba(255,240,210,.06),0 0 0 0 rgba(246,198,110,0);}
  45%{box-shadow:inset 0 0 0 1px rgba(246,198,110,.42),inset 0 1px 0 rgba(255,240,210,.12),0 0 22px -4px rgba(246,198,110,.36);}
  100%{box-shadow:inset 0 0 0 1px rgba(246,198,110,.30),inset 0 1px 0 rgba(255,240,210,.10),0 10px 26px -14px rgba(246,198,110,.30);}}
#scr-loading .btn-begin{background:linear-gradient(180deg,rgba(24,27,58,.52),rgba(12,14,34,.48));}
#scr-loading .btn-begin.ready{
  border-color:rgba(246,198,110,.46);
  box-shadow:0 0 0 1px rgba(246,198,110,.10),0 12px 30px -14px rgba(0,0,0,.8),0 0 24px -8px rgba(246,198,110,.28),inset 0 1px rgba(255,240,210,.10);
  animation:beginReadyIn39 .48s cubic-bezier(.22,.8,.26,1) both;
}
@keyframes beginReadyIn39{from{opacity:0;transform:translateY(5px) scale(.98);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  #scr-loading .ld-progress.done .ld-meta,#scr-loading .btn-begin.ready{animation:none;}
}

/* ==========================================================
   v040 (Michael t115u) — final polish pass
   ========================================================== */

/* 1) Loading → Home upward settle (first presentation).
      Video evidence (evidence/video-shift-analysis.txt): after the startup slide, every foreground group sat +18 video px
      (≈8 CSS px) low and crept up in a stagger (chips/mark/title by ≈+180ms, Begin card ≈+370ms, tab bar ≈+670ms) while
      the skyline stayed at 0 — the homeControlIn translateY(8px)→0 keyframe with its --d delays, not a viewport change.
      go() now tags Home `home-settled` on EVERY activation (startup included); this rule is a CSS backstop so no Home
      child `.in` entrance can run at all. The screen-level startupHomeIn (translateX only) and homeInBack stay. */
#scr-home.active .in,#scr-home.active .home-bottom .in,
#scr-home.home-settled.active .in,#scr-home.home-settled.active .home-bottom .in{animation:none;}

/* 2) Loading hint bubble: a clearer hairline so it reads as a pill against the skyline (was .075 — too faint).
      Still quieter glass than the status capsule; size, text and colour unchanged. */
#scr-loading .ld-tip{
  border-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085),0 0 0 .5px rgba(0,0,0,.18),0 12px 28px -20px rgba(0,0,0,.65);
}
/* Status / READY capsule and Tap to begin: same modest hairline lift so the night-sky pills share one edge language. */
#scr-loading .ld-meta{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -18px rgba(0,0,0,.6);
}
#scr-loading .ld-progress.done .ld-meta{
  box-shadow:inset 0 0 0 1px rgba(246,198,110,.40),inset 0 1px 0 rgba(255,240,210,.11),0 10px 26px -14px rgba(246,198,110,.30);
}
@keyframes ldReadyGlow39{0%{box-shadow:inset 0 0 0 1px rgba(246,198,110,.16),inset 0 1px 0 rgba(255,240,210,.06),0 0 0 0 rgba(246,198,110,0);}
  45%{box-shadow:inset 0 0 0 1px rgba(246,198,110,.50),inset 0 1px 0 rgba(255,240,210,.12),0 0 22px -4px rgba(246,198,110,.36);}
  100%{box-shadow:inset 0 0 0 1px rgba(246,198,110,.40),inset 0 1px 0 rgba(255,240,210,.11),0 10px 26px -14px rgba(246,198,110,.30);}}
#scr-loading .btn-begin{border-color:rgba(255,255,255,.26);}
#scr-loading .btn-begin.ready{
  border-color:rgba(246,198,110,.56);
  box-shadow:0 0 0 1px rgba(246,198,110,.12),0 12px 30px -14px rgba(0,0,0,.8),0 0 24px -8px rgba(246,198,110,.28),inset 0 1px rgba(255,240,210,.12);
}

/* 3) Light consistency: sheet top edge a hair crisper, matching the menu border polish. */
.sheet-panel.sheet-glass{border-top-color:rgba(255,255,255,.20);}

/* ==========================================================
   v041 (Michael t116u) — loading status pill: a touch more solid, no red beacon pulses behind/around it
   ========================================================== */
/* 1) Status capsule fill .40/.34 → .60/.54 (and READY .40/.34 → .60/.54): very slightly more solid so the lit
      skyline doesn't read through the text. Still well short of the too-dark v036 .84/.72. v040 hairlines, ready
      gold edge/glow, padding and type sizes are unchanged. */
#scr-loading .ld-meta{background:linear-gradient(180deg,rgba(22,25,54,.60),rgba(8,9,22,.54));}
#scr-loading .ld-progress.done .ld-meta{background:linear-gradient(180deg,rgba(40,32,30,.60),rgba(12,10,20,.54));}
/* 2) The pulsing red lights were the rooftop/antenna aviation beacons (.blink — #ff5a6a radial glow + #ff8a94 dot,
      2.6s steps(1) on/off) generated by cityscapeSVG; on the 390×844 loading layout 4 of the 7 sit in the pill band.
      Loading scene only: beacons removed. District cards / Home / level skylines keep theirs. The red reverse-car
      taillights stay (they glide along the street at the bottom edge, far below the pill, and don't pulse). */
#ldScene .blink{display:none;animation:none;}

/* ==========================================================
   v042 (Michael t117u) — loading pill fog veil; Home lower-HUD art flow, visible cars, no stray glow
   ========================================================== */
/* 1) Loading: a soft localized fog over the towers that cross the status pill + bar band (not the whole scene).
      One ::before veil behind .ld-progress: gentle 4px backdrop blur + a faint night-tint, both feathered out by an
      elliptical mask so there's no visible edge. Pill fill (.60/.54), hairlines, READY gold edge, text: unchanged. */
#scr-loading .ld-progress{isolation:isolate;}
#scr-loading .ld-progress::before{
  content:"";position:absolute;left:-46px;right:-46px;top:-30px;bottom:-40px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(14,15,38,.36) 0%,rgba(14,15,38,.26) 55%,rgba(14,15,38,0) 100%);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);
}

/* 2) Home stray glow: it was the #homeBokeh layer — bokehHTML(11, warm oranges, 8 orbs, top .58–1.0) puts all 8
      soft orange orbs between x≈44–84%, y≈63–85%, so several stack into one big orange-white blob right above the
      right side of the Begin card (A/B with the layer hidden: evidence/glow-ab-v041.*). The remaining orbs sit behind
      the opaque cards where they can't be seen, so the layer is simply switched off on Home (game screen bokeh kept). */
#homeBokeh{display:none;}

/* 3) Home lower HUD: calmer mid-band behind the cards (gutter window lights compete less), then the shade eases OFF
      over the street strip under the tab cards so the moving cars read. Shade is taller so the fade starts gently
      above the Begin card instead of a hard band. */
#scr-home .home-shade{
  height:52%;
  background:linear-gradient(180deg,
    rgba(5,6,15,0) 0%,
    rgba(5,6,15,.30) 30%,
    rgba(7,8,20,.62) 52%,
    rgba(7,8,20,.74) calc(100% - var(--sab) - 70px),
    rgba(7,8,20,.58) calc(100% - var(--sab) - 30px),
    rgba(5,6,15,.30) calc(100% - var(--sab) - 6px),
    rgba(5,6,15,.42) 100%);
}
/* Cars: headlight/taillight a touch bigger, and the flat round halo swapped for a soft gradient
   (#pp42Head/#pp42Tail defs in index.html) stretched into a light streak along the road,
   so the motion reads in the street strip below the cards (CSS only — scene generation/rng unchanged). */
#homeScene .car > *{transform-box:fill-box;transform-origin:center;}
#homeScene .car > circle{fill:url(#pp42Head);transform:scale(2.4,.6);opacity:.55;}
#homeScene .car.rev > circle{fill:url(#pp42Tail);opacity:.5;}
#homeScene .car > rect{transform:scale(1.7,1.4);}

/* ==========================================================
   v043 (Michael t118u) — final "peace-of-mind" pass: micro consistency only.
   Audited loading / home / districts / settings sheet (evidence/audit/*). No layout structure, copy, icon, gameplay,
   load-pill, bokeh, shade, car, push or settle changes. Reduced motion: verified 0 running animations on Home and
   Districts under prefers-reduced-motion (existing rules + app.js cut transitions) — no gap to fill.
   ========================================================== */
/* 1) Districts top bar: the back button and the star chip sit side by side but had different edges
      (.18 hairline, no top highlight vs .16 + inset .06 highlight). Back button now uses the chip's edge. */
#scr-districts .topbar .icon-btn{border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
/* 2) Home quick tiles (Districts / Daily / Guide): same glass as the Begin card but missing its 1px inner top
      highlight, so they read a hair flatter. Add the same soft highlight family (.06, as the districts summary card). */
#scr-home .home-bottom .quick > .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
/* 3) Spacing rhythm: Begin card → tiles was 12px but tile ↔ tile was 10px. Tiles now 12px apart too (each tile
      ~1.3px narrower; heights, text and positions otherwise unchanged). Scoped to the same viewport range where
      the 12px vertical gap applies, so the existing compact rules (≤350px wide: 8px; ≤680px tall: 10px) still win. */
@media (min-width:351px) and (min-height:681px){#scr-home .home-bottom .quick{gap:12px;}}

/* ==========================================================
   v044 (Michael t119u) — light consistency pass (CSS only). Audio de-click on close lives in app.js (Sound.sleep/wake).
   Not touched: load pill .60/.54, fog veil, no loading blinkers, home bokeh off, shade, cars, push, settle, tile edges/gap.
   ========================================================== */
/* 1) Home top bar: the Settings ring (::before, --line2 .14 hairline, no highlight) now uses the same edge as the star
      chip on the other side of the bar (.16 + 1px inner top highlight .06) — mirrors the v043 Districts back-button fix. */
#scr-home #btnSettings::before{border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
/* 2) Sheets: the small secondary text (row sub-labels such as "Guided hints on Maple Lane, block 1", and the
      "Pocket Power · Version 2.2" footer) was --muted #80869f on the dark sheet; nudged a hair lighter (#8d93ad) for
      small-type contrast. Sheet panels only — Home/Districts labels unchanged. */
.sheet-panel .row small,.sheet-panel .about{color:#8d93ad;}

/* v049 (Michael t147u) — iPad: the 2-column Districts grid shows ~6 cards at once (vs ~2.5 on iPhone), and every
   visible card animates ~70 SVG twinkle/cloud nodes (SVG children are not GPU-composited, so each frame repaints).
   On tablet-size viewports the dimmed LOCKED cards' scene motion is held still (their art is unchanged and still
   drawn; unlocked cards keep their full motion). Measured in headless Chromium at 1180x820@2x, 4x CPU throttle:
   Districts idle p50 frame 50ms -> 16.7ms. Same media query as tablet-v059.css, so iPhones are unaffected. */
@media (min-width:700px) and (min-height:600px){
  #districtList .d-card.locked .scene *{animation-play-state:paused!important;}
}

/* A compact readout on district artwork. Align its count with the title. */
#districtList .d-card > .d-prog{
  position:relative;align-self:flex-start;width:max-content;max-width:100%;
  gap:9px;margin:12px 0 0 0;padding:5px 10px 5px 9px;min-height:29px;
  border:1px solid rgba(255,239,209,.18);border-radius:10px;
  background:linear-gradient(125deg,rgba(43,38,49,.94),rgba(18,18,30,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);text-shadow:none;
  color:#f7f2e8;font-size:13px;line-height:1;white-space:nowrap;
  -webkit-backdrop-filter:none;backdrop-filter:none}
#districtList .d-blocks{gap:3px}
#districtList .d-blocks b{font-weight:650}
#districtList .d-blocks > span{color:#d7d2ce}
#districtList .d-blocks small{margin-left:2px;font-size:11px;color:#ccc6c8}
#districtList .d-stars{gap:4px;padding-left:9px;border-left:1px solid rgba(255,239,209,.22);
  color:#ffe0a2;font-weight:600}
#districtList .d-stars .ic{width:12px;height:12px}