/* Promised Lands SKIN, part 2 of 4: the status strip, speed button, BUILD / MENU / compass / undo, banners, toasts, hint, the Elder's bubble. Owner: HUD helper (WP-9U-A)
   Builds on skin.css (the k- classes and --k- tokens). Only restyle the selectors of YOUR area; later rules here win over styles.css because this file loads after it.
   WHY it cannot overlap any more (the owner's bugs: the pause button covered the word "asleep", the compass covered the "lamps out" banner):
   1. the strip is ONE grid: city | shekels | people | speed on row 1, the lamp pill under the first three on row 2 (portrait); one row in landscape. The speed button has its own column and
      "paused" / "asleep" are the second line INSIDE their pill, so nothing is ever drawn over a word;
   2. hint, toast and the power banner are children of ONE lane (#lane, src/ui/toasts.js) under the strip: they stack, they never cover each other;
   3. the compass has a place of its own that no alert or card can reach: portrait = the bottom row next to MENU (the Undo chip is beside it), landscape and compact = under the speed button.
   The numbers (pillTop, lampTop, pillsEnd, fab, compass*, toast*, undoH) come from src/ui/layout.js as CSS variables. tools/ui-overlap-steps.mjs measures every state. */

/* ---------------------------------------------------------------- the strip: ONE grid */
.pills { position: absolute; z-index: 10; top: max(var(--pill-top), var(--safe-t)); left: max(var(--side), var(--safe-l)); right: max(var(--side), var(--safe-r)); max-width: 440px;
  display: grid; align-items: start; justify-content: start; column-gap: var(--pill-gap); row-gap: var(--row-gap); pointer-events: none !important;
  grid-template-columns: minmax(0, max-content) max-content max-content var(--speed-pill-w); grid-template-rows: var(--pill-h) var(--pill-h); }
.pill.city { grid-column: 1; grid-row: 1; } .pill.coin { grid-column: 2; grid-row: 1; } .pill.pop { grid-column: 3; grid-row: 1; } .pill.pwr { grid-column: 1 / 4; grid-row: 2; }
.l-portrait .pill.pwr { width: 0; min-width: 100%; }   /* (width 0: the lamp pill must not widen the three columns it spans; min-width fills them) */
.pills .speed { grid-column: 4; grid-row: 1 / span 2; }
.l-landscape .pills, .l-compact .pills { max-width: none; grid-template-columns: max-content max-content max-content minmax(150px, 330px) minmax(var(--speed-pill-w), 1fr); grid-template-rows: var(--pill-h); }
.l-landscape .pill.pwr, .l-compact .pill.pwr { grid-column: 4; grid-row: 1; }
.l-landscape .pills .speed, .l-compact .pills .speed { grid-column: 5; grid-row: 1; }

.pill { position: relative; isolation: isolate; display: flex; align-items: center; gap: 5px; height: var(--pill-h); min-width: 0; margin: 0; padding: 0 9px 0 7px; overflow: hidden; white-space: nowrap;
  cursor: pointer; font-variant-numeric: tabular-nums; touch-action: none; pointer-events: auto; transition: transform 0.08s ease; }
.pill::before { content: none; }
.pill:active { transform: translateY(2px); }
.pill:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.pill .ico { flex: none; display: grid; place-items: center; }
.pill .ico svg.ic { width: 24px; height: 24px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.4)); }
.pill .val { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 0; }
.pill b { font: 900 17px/1.05 var(--k-font); color: #fff; -webkit-text-stroke: 3.5px var(--k-ink); paint-order: stroke fill; letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; }
.pill em, .pill small { font: 900 11px/1.1 var(--k-font); font-style: normal; opacity: 1; letter-spacing: 0.2px; }
.pill .pos { color: var(--k-green-l); } .pill .neg { color: var(--k-red-l); } .pill.pop small { color: var(--k-gold); }
.pill.city { padding: 0 10px 0 9px; gap: 6px; }
.pill.city .crest svg.ic { width: 26px; height: 26px; color: initial; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.35)); }
.pill.city .nm { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.pill.city .nm b { font: 900 16px/1.05 var(--k-font); color: var(--k-ink); -webkit-text-stroke: 0; letter-spacing: 0.1px; }
.pill.city .nm small { font: 800 11px/1.1 var(--k-font); color: var(--k-ink2); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 379px) { .l-portrait .pill.city .nm small { display: none; } }   /* under 380 px the name alone fits; the date is on the land card */
@media (max-width: 349px) {   /* 320 px wide: a little tighter so the name, both numbers and the speed button fit in one row, with "asleep" and "paused" still written out */
  .l-portrait .pills { column-gap: 4px; grid-template-columns: minmax(0, max-content) max-content max-content 44px; }
  .l-portrait #speed { width: 44px; height: 44px; }
  .pill { padding: 0 6px 0 5px; gap: 3px; }
  .pill .ico svg.ic { width: 20px; height: 20px; }
  .pill b { font-size: 15px; } .pill.city .nm b { font-size: 15px; } .pill em, .pill small { font-size: 10.5px; }
}

/* the lamp pill: the painted oil jar and a gold bar with the percent written on it */
.pill.pwr { gap: 6px; padding: 0 8px 0 6px; }
.pill.pwr .lampic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
.pill.pwr .lampic img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.35)); pointer-events: none; }
.pill.pwr .pw-t { display: none; flex: 0 1 auto; min-width: 0; font: 900 12px/1.1 var(--k-font); color: var(--k-ink); opacity: 1; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 380px) { .pill.pwr .pw-t { display: block; } }   /* the caption needs room: under 380 px the gold bar alone says it */
.l-compact .pill.pwr .pw-t { display: none; }
.pill.pwr .oil { position: relative; flex: 1 1 70px; min-width: 70px; max-width: none; height: 24px; border-radius: 13px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1); }
.pill.pwr .oil i { box-shadow: none; transition: width 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.pill.pwr .pct { position: absolute; inset: 0; display: grid; place-items: center; min-width: 0; text-align: center; font: 900 13px/1 var(--k-font); color: #fff; -webkit-text-stroke: 3.5px var(--k-ink); paint-order: stroke fill; letter-spacing: 0.3px; }
.pill.pwr[data-stage] .pct { color: #fff; }
.pill.pwr[data-stage='low'] .oil i, .pill.pwr[data-stage='flicker'] .oil i { background: linear-gradient(var(--k-orange-l), var(--k-orange) 55%, #ec8410); }
.pill.pwr[data-stage='flicker'] .oil i { animation: blink 2s steps(1) infinite; }
.pill.pwr[data-stage='dark'] .oil { border-color: var(--k-red-d); box-shadow: 0 0 0 2px var(--k-red), inset 0 2px 0 rgba(0, 0, 0, 0.1); }
.pill.pwr[data-stage='dark'] .pct { color: var(--k-red-d); -webkit-text-stroke: 0; }
.pill.pwr[data-stage='dark'] .lampic img { filter: grayscale(1) brightness(0.85) drop-shadow(0 2px 0 rgba(58, 22, 8, 0.35)); }

/* ---------------------------------------------------------------- the round / corner candy buttons (the ids win over the old gold .fab rules of styles.css) */
#speed, #fab-build, #fab-menu, #fab-compass, #undo { min-width: 0; min-height: 0; margin: 0; padding: 0; border: 3px solid var(--k-ink); border-radius: 50%; backdrop-filter: none; touch-action: manipulation; pointer-events: auto;
  background: linear-gradient(var(--c1) 0%, var(--c2) 46%, var(--c3) 54%, var(--c2) 100%);
  box-shadow: 0 6px 0 var(--dark), 0 6px 0 3px var(--k-ink), 0 12px 16px rgba(58, 22, 8, 0.32), inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.1); }
#speed:active, #fab-build:active, #fab-menu:active, #fab-compass:active, #undo:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--dark), 0 1px 0 3px var(--k-ink), 0 4px 8px rgba(58, 22, 8, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.5); }
#speed svg, #fab-build svg, #fab-menu svg, #fab-compass svg, #undo svg { position: relative; flex: none; }

/* speed / pause: round, in its own column of the strip grid; the colour says what is going on */
#speed { position: relative; z-index: 1; justify-self: end; align-self: start; width: var(--speed-pill-w); height: var(--speed-pill-h); touch-action: none; }
#speed .sp, #speed .sp-ic { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
#speed svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.4)); }
#speed[data-mode='pause'] { --c1: var(--k-blue-l); --c2: var(--k-blue); --c3: #2a9ae8; --dark: var(--k-blue-d); }
#speed[data-mode='normal'] { --c1: var(--k-green-l); --c2: var(--k-green); --c3: #3fb126; --dark: var(--k-green-d); }
#speed[data-mode='fast'] { --c1: #fff0a0; --c2: var(--k-gold); --c3: #f0a21e; --dark: #b97a0c; }
#speed[data-mode='dark'] { --c1: var(--k-grey-l); --c2: var(--k-grey); --c3: #b3b7c4; --dark: var(--k-grey-d); }

/* BUILD (orange, hammer) and MENU (purple, three dots): a rounded candy with the picture over the word; a red CLOSE while their tray or panel is open */
#fab-build, #fab-menu { position: absolute; z-index: 14; width: var(--fab); height: var(--fab); border-radius: 20px; flex-direction: column; gap: 0; padding: 2px 0 3px; }
#fab-build { left: max(var(--fab-edge), var(--safe-l)); bottom: max(var(--fab-edge), var(--safe-b)); }
#fab-menu { right: max(var(--fab-edge), var(--safe-r)); bottom: max(var(--fab-edge), var(--safe-b)); }
.lefty #fab-build { left: auto; right: max(var(--fab-edge), var(--safe-r)); } .lefty #fab-menu { right: auto; left: max(var(--fab-edge), var(--safe-l)); }
#fab-build .fi, #fab-menu .fi { width: calc(var(--fab) * 0.5); height: calc(var(--fab) * 0.5); object-fit: contain; filter: drop-shadow(0 2px 0 rgba(58, 22, 8, 0.4)); }
#fab-build .fw, #fab-menu .fw { font: 900 13px/1 var(--k-font); letter-spacing: 0.4px; color: #fff; -webkit-text-stroke: 3px var(--k-ink); paint-order: stroke fill; }
.l-compact #fab-build .fw, .l-compact #fab-menu .fw { font-size: 11px; }

/* the compass: small, round, cream. Portrait = bottom row beside MENU (so no banner, toast or card can reach it); landscape / compact = under the speed button */
#fab-compass { position: absolute; z-index: 14; width: var(--compass); height: var(--compass); --c1: #fffbe9; --c2: var(--k-cream2); --c3: var(--k-cream3); --dark: #b9801a; transition: opacity 0.4s, transform 0.08s ease, box-shadow 0.08s ease;
  box-shadow: 0 4px 0 var(--dark), 0 4px 0 3px var(--k-ink), 0 8px 12px rgba(58, 22, 8, 0.3), inset 0 2px 0 #fff; }
#fab-compass::before { top: 3px; height: 34%; }
#fab-compass svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 0 rgba(58, 22, 8, 0.3)); }
#fab-compass.idle { opacity: 0.75; }
.l-portrait #fab-compass { top: auto; left: auto; right: calc(max(var(--fab-edge), var(--safe-r)) + var(--fab) + 8px); bottom: calc(var(--compass-bottom) + max(0px, var(--safe-b) - var(--fab-edge))); }
.lefty.l-portrait #fab-compass { right: auto; left: calc(max(var(--fab-edge), var(--safe-l)) + var(--fab) + 8px); }
.l-landscape #fab-compass, .l-compact #fab-compass { bottom: auto; left: auto; top: calc(var(--compass-top) + var(--safe-t)); right: max(var(--compass-right), var(--safe-r)); }

/* undo: a blue candy chip for 20 s. Portrait = bottom row beside the compass; landscape / compact = above BUILD */
#undo { position: absolute; z-index: 14; height: var(--undo-h); min-width: 48px; padding: 0 14px 0 10px; gap: 6px; border-radius: 24px; font: 900 16px/1 var(--k-font); letter-spacing: 0.4px; box-shadow: 0 5px 0 var(--dark), 0 5px 0 3px var(--k-ink), 0 10px 14px rgba(58, 22, 8, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.6); }
#undo > span:last-child { -webkit-text-stroke: 3.5px var(--k-ink); }
#undo .fi svg { width: 24px; height: 24px; }
.l-portrait #undo { top: auto; left: auto; right: calc(max(var(--fab-edge), var(--safe-r)) + var(--fab) + 8px + var(--compass) + 8px); bottom: calc(max(var(--fab-edge), var(--safe-b)) + (var(--fab) - var(--undo-h)) / 2); }
.lefty.l-portrait #undo { right: auto; left: calc(max(var(--fab-edge), var(--safe-l)) + var(--fab) + 8px + var(--compass) + 8px); }
.l-landscape #undo, .l-compact #undo { top: auto; right: auto; left: max(var(--fab-edge), var(--safe-l)); bottom: calc(max(var(--fab-edge), var(--safe-b)) + var(--fab) + 8px); }
.lefty.l-landscape #undo, .lefty.l-compact #undo { left: auto; right: max(var(--fab-edge), var(--safe-r)); }
.dim #fab-build, .dim #fab-menu, .dim #fab-compass, .dim #undo { filter: saturate(0.45) brightness(0.82); }
/* the tutorial ring keeps the candy step (the old pulse animated the whole shadow away) */
@keyframes k-ring { 0%, 100% { outline-color: #ffd25a; outline-offset: 2px; } 50% { outline-color: #fff; outline-offset: 6px; } }
#speed.ring, #fab-build.ring, #fab-menu.ring, #fab-compass.ring, .pill.ring { animation: k-ring 1.2s ease-in-out infinite; outline: 4px solid #ffd25a; outline-offset: 2px; }

/* ---------------------------------------------------------------- the lane under the strip: hint, toast and the power banner, one under the other */
.lane { position: absolute; z-index: 11; top: calc(var(--toast-top) + var(--safe-t)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 12px; pointer-events: none !important; }
.l-landscape .lane, .l-compact .lane { padding: 0 calc(max(var(--compass-right), var(--safe-r)) + var(--compass) + 10px); }
.lane > * { pointer-events: auto; max-width: 100%; }
.toast { position: relative; z-index: auto; left: auto; top: auto; transform: none; height: auto; min-height: var(--toast-h); display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 10px;
  border: 3px solid var(--k-ink); border-radius: 22px; color: var(--k-ink); font: 800 15px/1.2 var(--k-font);
  background: linear-gradient(#fffbe9, var(--k-cream2)); box-shadow: 0 4px 0 var(--k-ink), var(--k-drop), inset 0 2px 0 #fff; animation: fadein 0.25s; }
.l-landscape .toast, .l-compact .toast { max-width: var(--toast-max-w); }
.toast[data-kind='warn'] { background: linear-gradient(#fff0c2, #ffc96b); color: var(--k-ink); border-color: var(--k-ink); }
.toast .tic svg { width: 26px; height: 26px; flex: none; }
.toast .tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-overflow: ellipsis; min-width: 0; }
.hint { position: relative; z-index: auto; left: auto; top: auto; transform: none; height: auto; min-height: 36px; padding: 5px 14px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal;
  border: 3px solid var(--k-ink); border-radius: 20px; color: var(--k-ink); font: 800 14px/1.2 var(--k-font); pointer-events: none !important;
  background: linear-gradient(#fffbe9, var(--k-cream2)); box-shadow: 0 3px 0 var(--k-ink), var(--k-drop), inset 0 2px 0 #fff; }

/* the lamps-out banner: a night-blue window, the grey lampstand, white outlined words, candy buttons under them (one, or two side by side when they fit) */
.banner.power { position: relative; z-index: auto; left: auto; top: auto; transform: none; width: min(440px, 100%); min-height: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 12px;
  border: 3px solid var(--k-ink); border-radius: 24px; color: #fff; font-family: var(--k-font);
  background: linear-gradient(#6f62ad, #3d3373); box-shadow: 0 5px 0 var(--k-ink), var(--k-drop), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.banner.power .pl { position: absolute; left: 12px; top: 10px; }
.banner.power .pl svg { width: 52px; height: 38px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
.banner.power .bt-txt { flex: 1 0 100%; min-height: 44px; padding-left: 62px; }
.banner.power h3 { font: 900 17px/1.15 var(--k-font); color: #fff; -webkit-text-stroke: 4px var(--k-ink); paint-order: stroke fill; letter-spacing: 0.2px; }
.banner.power p { margin-top: 4px; font: 800 14px/1.25 var(--k-font); color: #efe6ff; }
.banner.power > .bt { flex: 1 1 150px; min-height: 48px; color: #fff; }

/* ---------------------------------------------------------------- the Elder's bubble (onboarding.js moves it up above whatever tray is open) */
.elder { gap: 10px; padding: 8px 10px; border: 3.5px solid var(--k-ink); border-radius: 26px; color: var(--k-ink); font-family: var(--k-font);
  background: linear-gradient(#fffbe9, var(--k-cream2) 70%, var(--k-cream3)); box-shadow: 0 5px 0 var(--k-ink), 0 14px 24px rgba(58, 22, 8, 0.4), inset 0 3px 0 #fff; }
.l-portrait .elder { width: min(520px, calc(100% - 24px)); }
.elder .eface { width: 48px; height: 48px; border: 3px solid var(--k-ink); background: radial-gradient(circle at 35% 30%, #fff3c4, #f5cf68); }
.elder .esay { font: 900 16px/1.15 var(--k-font); } .elder .ehint { font: 700 13px/1.25 var(--k-font); color: var(--k-ink2); }
.elder .eskip { min-height: 44px; padding: 0 14px; font-size: 14px; }

/* tiny landscape (650 x 254): the lamps-out banner is the words and the button side by side, with no second line, and a little narrower, so Undo and the build tray stay clear of it */
.l-compact .banner.power { width: min(400px, 100%); padding: 8px 10px 10px; }
.l-compact .banner.power p { display: none; }
.l-compact .banner.power .bt-txt { min-height: 0; flex: 1 1 190px; padding-left: 60px; }
.l-compact .banner.power h3 { font-size: 15px; }
.l-compact .banner.power > .bt { flex: 0 1 150px; }