/* =====================================================================
   GRID EMPIRE — STYLES
   ===================================================================== */
:root {
  --bg: #0f1621;
  --panel: #182231;
  --panel2: #1f2c3f;
  --line: #2c3d55;
  --text: #e6edf6;
  --muted: #8fa1b8;
  --accent: #3fa9f5;      /* SL blue */
  --accent2: #7bd0ff;
  --gold: #ffd166;
  --good: #5ee08a;
  --bad: #ff6b6b;
  --warn: #ffb347;
  --grass: #2f6b3a;
  --grass2: #3b8248;
  --water: #1c4a72;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at top, #16243a 0%, var(--bg) 60%);
  color: var(--text);
  font: 14px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column;
  overflow: hidden;
}
button {
  font: inherit; color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; cursor: pointer;
  transition: background .15s, transform .05s;
}
button:hover:not(:disabled) { background: #29405e; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: #5bb8fa; }
button.danger { background: transparent; border-color: #6b3040; color: #ff9aa6; }
button.big { width: 100%; padding: 10px; margin: 6px 0; }
button.small, .small { font-size: 12px; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
h1, h2, h3 { margin: 0 0 8px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent2); margin-top: 4px; }
h3 { font-size: 14px; margin-top: 14px; }

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: linear-gradient(#1d2a3d, #152031); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-right: 8px; }
.brand span { color: var(--accent); }
.stat {
  display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 5px 12px; min-width: 150px;
}
#st-traffic { min-width: 280px; }
.stat .ico { font-size: 20px; font-weight: 800; color: var(--gold); }
.stat b { font-size: 16px; }
.stat em { font-style: normal; color: var(--accent2); font-size: 12px; margin-left: 4px; }
.stat small { display: block; color: var(--muted); font-size: 11px; }
.stat small.warn { color: var(--warn); font-weight: 600; }
.bar { height: 5px; background: #0c131d; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s; }
.controls { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.speed { display: flex; }
.speed button { border-radius: 0; padding: 6px 10px; }
.speed button:first-child { border-radius: 7px 0 0 7px; }
.speed button:last-child { border-radius: 0 7px 7px 0; }
.speed button.on { background: var(--accent); border-color: var(--accent); }

#banner > div { text-align: center; padding: 6px; font-weight: 600; }
#banner .warn { background: #3d2c10; color: var(--warn); }
#banner .bad { background: #3d1620; color: #ff9aa6; }

/* ---------- layout ---------- */
main {
  flex: 1; display: grid; grid-template-columns: 290px 1fr 340px; gap: 12px; padding: 12px;
  min-height: 0;
}
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; overflow-y: auto; min-height: 0;
}
#center { position: relative; min-height: 420px; }

/* ---------- world map ---------- */
#worldmap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 14px; }
.region {
  aspect-ratio: 1; border-radius: 6px; padding: 4px; cursor: pointer; font-size: 10px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  border: 2px solid transparent; position: relative;
}
.region.owned { background: linear-gradient(135deg, var(--grass2), var(--grass)); }
.region.buyable { background: var(--water); }
.region.locked { background: repeating-linear-gradient(45deg, #172233, #172233 6px, #1a2639 6px, #1a2639 12px); color: #4d5d75; }
.region.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.region:hover { filter: brightness(1.15); }
.rname { font-weight: 700; line-height: 1.1; font-size: 9.5px; }
.ricons { font-size: 11px; letter-spacing: -2px; }
.rsub { font-size: 9px; opacity: .85; }
.region.buyable .rsub { color: var(--gold); font-weight: 700; }

/* ---------- goals ---------- */
.goal {
  background: var(--panel2); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; opacity: .6;
}
.goal.current { opacity: 1; border-left: 3px solid var(--gold); }
.goal .reward { color: var(--gold); font-weight: 700; font-size: 12px; }
.goal .bar, .goal small { grid-column: 1 / -1; }
.goal small { color: var(--muted); font-size: 11px; }

/* ---------- region view ---------- */
#region-head {
  position: absolute; top: 10px; left: 10px; z-index: 6; display: flex; align-items: center; gap: 12px;
  background: rgba(12,22,34,.82); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px;
  pointer-events: none;
}
#region-head h1 { font-size: 22px; margin: 0; }
.tag { font-size: 12px; background: var(--panel2); padding: 3px 8px; border-radius: 20px; color: var(--muted); }
.tag.own { color: var(--good); }
/* The region: SL-style grass island in SL-style water.
   Textures are generated with SVG noise, so there are no image files. */
#viewport {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  cursor: grab; touch-action: none; user-select: none;
  background-color: #2b6f96;
  background-image:
    url("water.png"),
    url("water.png"),
    radial-gradient(ellipse at 30% 20%, #4a9cc4 0%, #2b6f96 55%, #1d5578 100%);
  background-size: 512px 512px, 800px 800px, 100% 100%;
  animation: waves 40s linear infinite;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
/* the 3 × 3 block of regions; only the middle one plus a strip of each
   neighbour is visible through the viewport */
#viewport.dragging { cursor: grabbing; }
#viewport.dragging .parcel { pointer-events: none; }
/* the whole 4 × 5 grid of regions; game.js moves it around like a camera */
#world {
  --R: 480px;                           /* size of one region — set by game.js */
  position: absolute; left: 0; top: 0; width: calc(6 * var(--R)); height: calc(5 * var(--R));
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr);
}
.rcell {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
  padding: 30px; min-width: 0; min-height: 0;
}
.rcell.center { z-index: 2; }
.rcell.void::before { display: none; }
.rcell.nb { cursor: pointer; }
.rcell.nb .parcel { pointer-events: none; filter: brightness(.72) saturate(.8); transition: filter .15s; }
.rcell.nb:hover .parcel { filter: brightness(.95); }
.rcell.nb .parcel .sign, .rcell.nb .pname, .rcell.nb .plvl { opacity: .8; }
.rcell.fog::after {
  content: ''; position: absolute; inset: 14px; border-radius: 18px; z-index: 3;
  background: radial-gradient(ellipse, rgba(200,215,230,.55), rgba(160,180,200,.35));
  backdrop-filter: blur(3px);
}
.rtag {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap;
  background: rgba(10,20,32,.82); border: 1px solid var(--line); border-radius: 8px;
  padding: 2px 10px; font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; pointer-events: none;
}
.rtag small { display: block; font-weight: 600; font-size: 10.5px; color: var(--muted); }
.rtag .buy { color: var(--gold); }
.rtag .own { color: var(--good); }
.rcell.nb:hover .rtag { border-color: var(--accent); }
@keyframes waves {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 512px 0, -800px 800px, 0 0; }
}
/* sandy shoreline under each region's land */
.rcell::before {
  content: ''; position: absolute; inset: 20px; border-radius: 16px;
  background: #d8c48f;
  box-shadow: 0 0 0 4px rgba(216,196,143,.35);
}
.parcel {
  position: relative; cursor: pointer; overflow: visible;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: filter .1s, box-shadow .1s; min-width: 0;
  /* SL default grass */
  background-color: #5b8c2a;
  background-image: url("grass.png");
  background-size: 400% 400%;          /* one grass tile stretched over the whole region; */
                                       /* game.js offsets each parcel so the grass is continuous */
  /* thin parcel boundary lines like the viewer's "show property lines" */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.parcel:hover { filter: brightness(1.12); z-index: 2; }
.parcel.selected { box-shadow: inset 0 0 0 3px #fff, 0 0 18px rgba(255,255,255,.55); z-index: 3; }
.parcel.forsale { filter: saturate(.55) brightness(.85); }
.parcel.forsale:hover { filter: saturate(.7) brightness(.95); }
.parcel.wild { cursor: default; filter: saturate(.6) brightness(.8); }
/* a coloured "plot" under each building shows its type */
.parcel.built::after {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: 10%; height: 18%;
  border-radius: 50%; background: rgba(0,0,0,.16); filter: blur(5px); z-index: 0;
}
.parcel > * { position: relative; z-index: 1; }
.parcel.built { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -5px 0 var(--catc, transparent); }
.parcel.selected.built { box-shadow: inset 0 0 0 3px #fff, inset 0 -5px 0 var(--catc, transparent), 0 0 18px rgba(255,255,255,.55); }
.parcel.cat-business    { --catc: #f2a541; }
.parcel.cat-residential { --catc: #7fd67a; }
.parcel.cat-landmark    { --catc: #ffd84d; }
.parcel.cat-gateway     { --catc: #5cc8ff; }
.parcel.broken { filter: saturate(.3); }
.badges {
  position: absolute !important; top: 4px; left: 4px; display: flex; flex-wrap: wrap; gap: 2px; max-width: 70%;
}
.badges span {
  font-size: 12px; background: rgba(10,20,30,.65); border-radius: 5px; padding: 1px 3px; line-height: 1.2;
}
.picon { font-size: clamp(22px, 4.5vw, 44px); line-height: 1; filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.picon.plus { color: rgba(255,255,255,.35); font-size: 30px; }
.pname { font-size: 11px; font-weight: 600; margin-top: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(10,20,30,.45); text-shadow: 0 1px 2px #000; }
.plvl { font-size: 11px; color: var(--gold); }
.pbroken { position: absolute !important; top: 4px; right: 4px; font-size: 10px; background: var(--bad); color: #fff; padding: 1px 5px; border-radius: 6px; }
.sign {
  background: #f4efe1; color: #5a3b1c; font-size: 10px; font-weight: 700; padding: 5px 8px;
  border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.5); line-height: 1.3;
}
.sign b { font-size: 12px; color: #1f6d2d; }
#region-foot {
  position: absolute; bottom: 10px; left: 10px; z-index: 6; font-size: 12px;
  background: rgba(12,22,34,.82); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px;
  pointer-events: none;
}
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,16,26,.55); border-radius: 14px; backdrop-filter: blur(2px);
}
.overlay .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: 320px; text-align: center; }

/* floating income */
.float {
  position: absolute !important; z-index: 5 !important; top: 30%; left: 50%; transform: translateX(-50%);
  font-weight: 800; font-size: 13px; color: var(--gold); pointer-events: none; white-space: nowrap;
  text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.6);
  animation: floatUp 1.8s ease-out forwards; opacity: 0;
}
.float.res { color: var(--accent2); }
.float.tr { color: var(--good); }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -45px); }
}

/* ---------- inspector ---------- */
#inspector { margin-bottom: 14px; }
.kv { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.kv span { color: var(--muted); }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs button { flex: 1; padding: 5px 4px; font-size: 12px; }
.tabs button.on { background: var(--accent); border-color: var(--accent); }
.cards { display: flex; flex-direction: column; gap: 6px; }
.bcard { display: flex; gap: 10px; background: var(--panel2); border-radius: 8px; padding: 8px; }
.bcard.locked { opacity: .55; }
.bicon { font-size: 28px; width: 36px; text-align: center; }
.bicon.big { font-size: 44px; width: 56px; }
.bbody { flex: 1; min-width: 0; }
.btitle { font-weight: 700; display: flex; justify-content: space-between; gap: 6px; }
.price { color: var(--gold); font-size: 12px; white-space: nowrap; }
.bdesc { font-size: 12px; color: var(--muted); margin: 2px 0 4px; }
.bstats { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.bstats span { font-size: 11px; background: #0f1824; padding: 2px 6px; border-radius: 5px; }
.bstats.next span { background: #13304a; color: var(--accent2); }
.bcard button { margin-top: 4px; padding: 4px 16px; }
.why { font-size: 11px; color: var(--warn); margin-top: 3px; }
.bhead { display: flex; gap: 10px; align-items: center; }
.bhead h2 { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0; }
.demo { margin-top: 14px; text-align: right; }

/* ---------- chat log ---------- */
#log { font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
#log .line { color: #cfd8e3; }
#log .line .time { color: #6b7d95; }
#log .line.good { color: #a8f0c0; }
#log .line.bad { color: #ffb3b3; }
#log .line.tier { color: var(--accent2); }

/* ---------- toasts ---------- */
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 50; pointer-events: none; }
.toast {
  background: #203047; border: 1px solid var(--line); padding: 9px 16px; border-radius: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); animation: toastIn .25s ease-out; transition: opacity .4s, transform .4s;
  font-weight: 600;
}
.toast.good { border-color: var(--good); }
.toast.bad { border-color: var(--bad); }
.toast.tier { border-color: var(--gold); background: #3a3218; }
.toast.out { opacity: 0; transform: translateY(10px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(5,10,18,.7); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal.hidden { display: none; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; max-width: 540px; margin: 16px; }
.modal-box h2 { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text); }
.modal-box li { margin-bottom: 6px; }
.modal-actions { display: flex; justify-content: space-between; margin-top: 16px; gap: 10px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  body { overflow: auto; }
  main { grid-template-columns: 1fr; }
  .panel { max-height: none; }
  #st-traffic { min-width: 0; }
}

/* ---------- gateway improvements + hover tips ---------- */
.extras { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.extras span { font-size: 12px; background: #13304a; padding: 3px 8px; border-radius: 12px; }
.has-tip { cursor: help; }
#st-traffic { cursor: help; }
.qm {
  display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; vertical-align: 1px;
}
#tip {
  position: fixed; z-index: 200; max-width: 320px; pointer-events: none;
  background: #0d1520; border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
#tip hr { border: 0; border-top: 1px solid var(--line); margin: 7px 0; }
#tip b { color: var(--accent2); }

/* Speed buttons (1× 2× 4×) are hidden from players but still clickable */
.speed button, .speed button:hover, .speed button.on { opacity: 0; }

/* ---------- collecting ---------- */
.pot {
  position: absolute !important; top: 6px; left: 50%; transform: translateX(-50%) scale(.6); z-index: 4 !important;
  white-space: nowrap; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px;
  color: #1b1b1b; box-shadow: 0 2px 6px rgba(0,0,0,.45); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.pot.ready { opacity: 1; transform: translateX(-50%) scale(1); animation: potBob 1.6s ease-in-out infinite; }
.pot.full { box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.5); }
.pot.k-sales  { background: #ffd166; }
.pot.k-donations { background: #ffb38a; }
.pot.k-event  { background: #d7a6ff; }
.pot.k-rental { background: #9be38f; }
.pot.k-energy { background: #7fd8ff; }
@keyframes potBob { 50% { transform: translateX(-50%) translateY(-3px) scale(1); } }
.potbar {
  position: absolute !important; left: 14%; right: 14%; bottom: 11px; height: 4px; z-index: 2 !important;
  background: rgba(0,0,0,.4); border-radius: 3px; overflow: hidden;
}
.potbar i { display: block; height: 100%; width: 0; background: #fff; transition: width .25s linear; }
.parcel.built:has(.pot.ready) { cursor: pointer; }
.parcel.built:has(.pot.ready) .picon { animation: iconHop .9s ease-in-out infinite; }
@keyframes iconHop { 50% { transform: translateY(-3px); } }
.float.k-sales  { color: #ffd166; }
.float.k-donations { color: #ffc4a3; }
.float.k-event  { color: #e2bbff; }
.float.k-rental { color: #aef0a0; }
.float.k-energy { color: #8fe0ff; }
.float { font-size: 15px; }
/* inspector */
.ipot { position: relative; height: 10px; margin: 4px 0 6px; }
.ipot { height: auto; display: flex; align-items: center; gap: 8px; }
.ipot .pot { position: static !important; transform: none !important; animation: none; opacity: 1; flex-shrink: 0; }
.ipot .potbar { position: relative !important; flex: 1; left: auto; right: auto; bottom: auto; }
.ipot .potbar { left: 0; right: 0; bottom: 2px; height: 6px; }
.ipot .potbar i { background: var(--accent2); }
.tiers { display: flex; gap: 4px; margin-bottom: 4px; }
.tiers span {
  flex: 1; text-align: center; font-size: 10.5px; color: var(--muted); background: #0f1824;
  border-radius: 6px; padding: 3px 2px; line-height: 1.25;
}
.tiers span b { display: block; font-size: 11.5px; color: var(--text); }
.tiers span.on { background: #1f4a2e; color: #c9f5d2; }
.bstats .k-sales  { color: #ffd166; }
.bstats .k-donations { color: #ffc4a3; }
.bstats .k-event  { color: #e2bbff; }
.bstats .k-rental { color: #aef0a0; }
.bstats .k-energy { color: #8fe0ff; }

/* ---------- jobs ---------- */
.pot.idle { opacity: .9; transform: translateX(-50%) scale(.9); background: rgba(12,22,34,.8); color: #cfe3f5; }
.pot.running { opacity: 1; transform: translateX(-50%) scale(.95); font-variant-numeric: tabular-nums; }
.pot.paused { filter: grayscale(.7); }
#jobpop {
  position: absolute; z-index: 8; width: 300px;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55); cursor: default;
}
#jobpop.hidden { display: none; }
.jp-head { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.jp-list, .tiers.pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.jp-list button, .tiers.pick button {
  padding: 6px 2px; font-size: 10.5px; line-height: 1.25; color: var(--muted); text-align: center;
}
.jp-list button b, .tiers.pick button b { display: block; font-size: 12px; color: var(--gold); }
.jp-list button:hover b, .tiers.pick button:hover b { color: #fff; }

.jp-list .why, .tiers.pick .why { grid-column: 1 / -1; margin: 2px 0 0; }

/* ---------- upgrades in progress ---------- */
.pot.upgrading { opacity: 1; transform: translateX(-50%) scale(.95); background: #f0b64d; color: #2a1c00; font-variant-numeric: tabular-nums; }
.potbar.none { display: none; }
.parcel.upgrading .picon { filter: grayscale(.5) drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.parcel.upgrading .potbar i { background: #f0b64d; }

/* Timers (running jobs, upgrades) only show when you hover the parcel,
   so finished jobs waiting to be collected stand out */
.parcel .pot.running, .parcel .pot.upgrading { opacity: 0; }
.parcel:hover .pot.running, .parcel:hover .pot.upgrading { opacity: 1; }
/* the little progress bars are hidden too until you hover */
.parcel .potbar { opacity: 0; transition: opacity .15s; }
.parcel:hover .potbar { opacity: 1; }

/* labels in the top bar boxes */
.stat label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); line-height: 1.1; }
.stat.flash { animation: statFlash 1.2s ease-out; }
@keyframes statFlash { 0%, 30% { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255,107,107,.35); } }

.stat label .lvl { color: var(--gold); font-weight: 800; }

/* ---------- tutorial ---------- */
#tut {
  position: absolute; top: 64px; right: 12px; z-index: 9; width: 330px;
  background: #13233a; border: 2px solid var(--gold); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.6); animation: toastIn .3s ease-out;
}
#tut.hidden { display: none; }
#tut h3 { margin: 2px 0 6px; font-size: 16px; color: var(--gold); }
#tut .tut-step { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
#tut .tut-text { font-size: 13px; line-height: 1.5; }
#tut ul { margin: 6px 0; padding-left: 18px; }
#tut .tut-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
button.link { background: none; border: none; color: var(--muted); padding: 4px 0; font-size: 12px; text-decoration: underline; }
button.link:hover:not(:disabled) { background: none; color: var(--text); }
.tut-glow { position: relative; z-index: 7; animation: tutGlow 1.2s ease-in-out infinite !important; }
@keyframes tutGlow {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 16px 4px rgba(255,209,102,.6); }
  50%      { box-shadow: 0 0 0 5px var(--gold), 0 0 28px 10px rgba(255,209,102,.85); }
}

/* ---------- sound & music ---------- */
.audio { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px; }
.audio button { padding: 4px 8px; font-size: 16px; line-height: 1; background: transparent; border: none; position: relative; }
.audio button:hover { background: var(--panel2); }
.audio button.off { opacity: .45; }
#snd-music.off::after {
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--bad); transform: rotate(-35deg);
}
#snd-vol, #snd-sfx-vol { width: 80px; accent-color: var(--accent); cursor: pointer; }
#snd-vol:disabled, #snd-sfx-vol:disabled { opacity: .35; cursor: default; }

/* smaller world-map tiles for the 6 × 5 grid */
#worldmap { gap: 3px; }
#worldmap .region { padding: 3px; border-radius: 5px; }
#worldmap .rname { font-size: 7.5px; line-height: 1.05; overflow: hidden; }
#worldmap .ricons { font-size: 8px; letter-spacing: -2px; }
#worldmap .rsub { font-size: 7px; white-space: nowrap; overflow: hidden; }

/* ---------- Grid Legend finale ---------- */
.legend-box { max-width: 620px; text-align: center; border: 2px solid var(--gold); background: linear-gradient(#1b2a42, #14203a); }
.lg-crown { font-size: 64px; line-height: 1; animation: potBob 2s ease-in-out infinite; display: inline-block; }
.legend-box h2 { font-size: 28px !important; color: var(--gold) !important; margin: 6px 0; }
.lg-sub { color: var(--text); margin: 0 0 14px; }
.lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; margin-bottom: 12px; }
.lg-stat { display: flex; gap: 10px; align-items: center; background: var(--panel2); border-radius: 10px; padding: 8px 10px; }
.lg-stat > span { font-size: 22px; }
.lg-stat small { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lg-stat b { font-size: 15px; }
.lg-best { background: #3a3218; border: 1px solid var(--gold); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.legend-badge { margin-left: 10px; font-size: 12px; padding: 3px 10px; border-color: var(--gold); color: var(--gold); background: #3a3218; vertical-align: 4px; }

/* ---------- big buildings (several parcels) ---------- */
.parcel.sz2 .picon  { font-size: clamp(28px, 5.5vw, 58px); }
.parcel.sz4 .picon  { font-size: clamp(36px, 7vw, 80px); }
.parcel.sz8 .picon  { font-size: clamp(44px, 8.5vw, 100px); }
.parcel.sz16 .picon { font-size: clamp(56px, 11vw, 130px); }
.parcel.sz2 .pname, .parcel.sz4 .pname, .parcel.sz8 .pname, .parcel.sz16 .pname { font-size: 13px; }
.parcel.built.sz2::after, .parcel.built.sz4::after, .parcel.built.sz8::after { left: 20%; right: 20%; }

#st-builders { min-width: 130px; cursor: help; }

/* keep the top bar on one line on normal screens */
#topbar { gap: 8px; }
.stat { min-width: 0; padding: 5px 10px; }
#st-traffic { min-width: 240px; }
#st-builders { min-width: 0; }
.speed button { padding: 6px 4px; }

/* all top-bar boxes the same height; L$ gets a bigger number instead of a small line */
#topbar { align-items: stretch; }
#topbar .brand, #topbar .controls { align-self: center; }
#st-ls { min-width: 150px; }
#st-ls b { font-size: 24px; line-height: 1.15; }

/* ---------- griefed (offline) regions ---------- */
.rcell.down .parcel { filter: grayscale(.85) brightness(.55) !important; }
.downbanner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  background: rgba(60,12,20,.92); border: 2px solid var(--bad); border-radius: 12px; padding: 10px 18px;
  text-align: center; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.5); white-space: nowrap;
}
.downbanner b { display: block; color: #ffb3b3; font-size: 15px; }
.downbanner span { font-size: 13px; font-variant-numeric: tabular-nums; }
#worldmap .region.down { outline: 2px solid var(--bad); }
/* never wrap the top bar; boxes shrink a little instead */
#topbar { flex-wrap: nowrap; }
.stat { flex-shrink: 1; white-space: nowrap; overflow: hidden; }
.brand { flex-shrink: 0; }
.controls { flex-shrink: 0; }
#st-ls { min-width: 120px; }
#st-traffic { min-width: 0; }
#snd-vol, #snd-sfx-vol { width: 64px; }
.stat { flex-shrink: 0; }

/* offline (griefed) region: dark cover with a big red OFFLINE */
.downoverlay {
  position: absolute; inset: 22px; z-index: 6; border-radius: 16px; pointer-events: none;
  background: rgba(0,0,0,.68); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.downoverlay .offline {
  color: #ff3b3b; font-weight: 900; letter-spacing: .12em; font-size: calc(var(--R, 480px) * .14);
  text-shadow: 0 0 18px rgba(255,40,40,.6), 0 3px 0 #000;
}
.downoverlay .offsub { color: #ffb3b3; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.downbanner { display: none; }

h2.toggle { cursor: pointer; user-select: none; }
h2.toggle:hover { color: #fff; }
#chat-arrow { display: inline-block; width: 14px; font-size: 11px; }
#log.hidden { display: none; }
#jobpop .big { margin: 2px 0 0; }

/* ---------- Top 10 Cities ---------- */
#topbox.hidden, #mayorsbox.hidden { display: none; }
.lb-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.lb-row { display: flex; align-items: center; gap: 8px; background: var(--panel2); border-radius: 7px; padding: 4px 8px; font-size: 12.5px; }
.lb-row.you { background: #3a3218; border: 1px solid var(--gold); }
.lb-rank { width: 18px; text-align: right; font-weight: 800; color: var(--accent2); }
.lb-row:nth-child(1) .lb-rank { color: var(--gold); }
.lb-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lb-tr { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.lb-name { display: flex; gap: 6px; }
.lb-name input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--text); background: #0f1824;
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px;
}
.lb-name input:focus { outline: none; border-color: var(--accent); }
#lb-status { margin-top: 5px; }

/* little shortcut numbers on the job buttons */
.jp-list button, .tiers.pick button { position: relative; }
.jp-list button kbd, .tiers.pick button kbd {
  position: absolute; top: 2px; left: 3px; font: 700 9px/1 inherit; color: var(--muted);
  background: #0c131d; border: 1px solid var(--line); border-radius: 3px; padding: 1px 3px;
}
.jp-list button, .tiers.pick button { padding-top: 19px; }
.jp-list button kbd, .tiers.pick button kbd { left: 50%; transform: translateX(-50%); top: 3px; }

/* ---------- cheat code box ---------- */
#cheat { background: rgba(0,0,0,.78); z-index: 150; }
.cheat-box { width: 380px; text-align: center; }
.cheat-box .ch-title { font-size: 16px; font-weight: 800; margin-bottom: 10px; color: var(--accent2); }
.cheat-box .ch-title.warn { color: var(--warn); }
#cheat-input {
  width: 100%; font: 600 18px/1.2 inherit; text-align: center; color: var(--text); background: #0c131d;
  border: 1px solid var(--accent); border-radius: 8px; padding: 10px; letter-spacing: .05em;
}
#cheat-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(63,169,245,.35); }
.cheat-box .ch-msg { margin-top: 8px; font-size: 12px; color: var(--muted); }
.cheat-box .ch-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.cheat-box .ch-actions button { min-width: 110px; padding: 8px 14px; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* U pressed but the building can't be upgraded */
.parcel.deny { box-shadow: inset 0 0 0 200px rgba(255,40,40,.55), inset 0 0 0 3px #ff3b3b !important; }

/* being built or upgraded: the whole parcel is greyed out */
.parcel.upgrading, .parcel.upgrading:hover { filter: grayscale(1) brightness(.72); }
.parcel.upgrading .picon { filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }

.rcell.deny::after {
  content: ''; position: absolute; inset: 22px; border-radius: 16px; z-index: 7; pointer-events: none;
  background: rgba(255,40,40,.45); box-shadow: inset 0 0 0 4px #ff3b3b;
}

.tut-name { display: flex; gap: 6px; margin-top: 10px; }
.tut-name input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--text); background: #0c131d;
  border: 1px solid var(--gold); border-radius: 7px; padding: 7px 9px;
}
.tut-name input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,209,102,.3); }
.lg-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lg-name { justify-content: center; margin: 4px 0 8px; }
.lg-name input { max-width: 280px; flex: 1; font-size: 16px; }
.lg-actions button { width: auto; flex: 1 1 0; margin: 0; }
.lb-done { font-size: 11px; margin-left: -4px; }
#best-status { margin-bottom: 4px; }
.lb-name.hidden { display: none; }

/* ---------- Hypergrid jumping ---------- */
.lb-row.jump { cursor: pointer; transition: background .15s, transform .15s; }
.lb-row.jump:hover { background: #24365a; transform: translateX(2px); }
.lb-row.jump:hover .lb-nm { color: var(--accent); }
#banner .hg { background: linear-gradient(90deg, #2a1d4a, #1d2f52); color: #d9c8ff; display: flex; align-items: center; justify-content: center; gap: 12px; }
#banner .hg button { padding: 3px 12px; }
body.visiting #viewport::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 3px #8a6cff, inset 0 0 40px rgba(138,108,255,.35); }
.tag.visit { color: #c9b6ff; background: #2a1d4a; }
#region-foot button { margin-right: 10px; padding: 4px 12px; }
.hg-card .hg-title { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #b9a2ff; font-weight: 800; }
.hg-card .hg-name { margin: 4px 0 10px; }
.hg-icons { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.hg-icons span { background: var(--panel2); border-radius: 8px; padding: 3px 7px; font-size: 13px; }
#hgjump { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,14,30,.55); z-index: 30; }
#hgjump.hidden { display: none; }
.hg-box { background: #1b2a42; border: 2px solid #8a6cff; border-radius: 16px; padding: 22px 34px; text-align: center; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.hg-box b { font-size: 18px; color: #d9c8ff; }
.hg-box span { color: var(--muted); }
.hg-swirl { font-size: 44px; animation: hgspin 1.2s linear infinite; display: inline-block; }
@keyframes hgspin { to { transform: rotate(360deg); } }
.helpme { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 4; cursor: pointer; white-space: nowrap;
  background: linear-gradient(#9b7bff, #6f4fe0); color: #fff; font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); animation: potBob 1.6s ease-in-out infinite; }
.helpme:hover { filter: brightness(1.15); }
.helpme.done { background: #2d6a4a; cursor: default; animation: none; }
.float.helpfloat { color: #fff; font-size: 13px; background: rgba(76, 50, 170, .92); padding: 3px 10px; border-radius: 20px; text-shadow: none; animation: helpFloat 6s ease-out forwards; }
@keyframes helpFloat {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; transform: translate(-50%, -20px); }
  100% { opacity: 0; transform: translate(-50%, -35px); }
}
.hg-help { background: #2a1d4a; border: 1px solid #6f4fe0; border-radius: 10px; padding: 8px 10px; margin: 8px 0; font-size: 12.5px; line-height: 1.4; }
.helpedby { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); z-index: 6; white-space: nowrap; max-width: 92%;
  overflow: hidden; text-overflow: ellipsis; background: rgba(120, 30, 70, .9); color: #ffd6e6; font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.4); pointer-events: none; }
.helpme.wait { background: #4a4f5c; color: #a9afbd; cursor: not-allowed; animation: none; filter: grayscale(1); }

/* Idle buildings (nothing running, nothing to collect): yellow wash + a big centred ▶ so you know to start something */
.parcel.built:has(.pot.idle)::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: rgba(255, 205, 40, .28); box-shadow: inset 0 0 0 2px rgba(255, 210, 60, .85); animation: idlePulse 1.8s ease-in-out infinite; }
.parcel.built:has(.pot.idle) { cursor: pointer; }
.parcel .pot.idle { top: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 5 !important;
  font-size: 15px; padding: 5px 14px; border-radius: 20px; background: #ffcf3a; color: #2a1c00; box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.parcel:hover .pot.idle { filter: brightness(1.1); transform: translate(-50%, -50%) scale(1.08); }
@keyframes idlePulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.speed.locked, .speed.locked button { pointer-events: none; cursor: default; }

/* ---------- Play on another device ---------- */
.sync-box { max-width: 520px; }
.sync-box h3 { margin: 14px 0 4px; font-size: 14px; color: var(--accent); }
.sync-code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: .04em; word-break: break-all; line-height: 1.5;
  background: #0d1626; border: 1px solid var(--line, #2c3e5c); border-radius: 8px; padding: 10px 12px; margin: 8px 0; user-select: all; }
.sync-code.masked { color: var(--muted); user-select: none; }
.sync-actions { display: flex; gap: 8px; align-items: center; }
.sync-actions input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #2c3e5c; background: #0d1626; color: var(--text); font-family: ui-monospace, Consolas, monospace; }
.sync-box .warn { color: var(--warn); margin: 6px 0 0; }
.tut-pick { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.tut-pick .link { font-size: 12.5px; }

/* World map: regions with idle (yellow) buildings flash yellow */

/* ---------- Parcel contents scale with the zoom (the region size --R) so nothing spills out ---------- */
.parcel { min-height: 0; }
.picon { font-size: min(44px, calc(var(--R, 480px) * .09)); }
.parcel.sz2 .picon  { font-size: min(58px, calc(var(--R, 480px) * .115)); }
.parcel.sz4 .picon  { font-size: min(80px, calc(var(--R, 480px) * .16)); }
.parcel.sz8 .picon  { font-size: min(100px, calc(var(--R, 480px) * .2)); }
.parcel.sz16 .picon { font-size: min(130px, calc(var(--R, 480px) * .27)); }
.picon.plus { font-size: min(30px, calc(var(--R, 480px) * .06)); }
.pname { font-size: clamp(8px, calc(var(--R, 480px) * .023), 11px); max-width: 96%; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.parcel.sz2 .pname, .parcel.sz4 .pname, .parcel.sz8 .pname, .parcel.sz16 .pname { font-size: clamp(9px, calc(var(--R, 480px) * .027), 13px); }
.plvl { font-size: clamp(8px, calc(var(--R, 480px) * .023), 11px); }
.rcell .sign { font-size: clamp(7px, calc(var(--R, 480px) * .021), 11px); }
/* zoomed far out: drop the small print */
#world.zsmall .plvl, #world.zsmall .badges { display: none; }
#world.ztiny .pname, #world.ztiny .sign { display: none; }
#world.ztiny .rcell { padding: 18px; }
.parcel .pot.idle { font-size: clamp(9px, calc(var(--R, 480px) * .031), 15px); padding: .3em .9em; }
#world.ztiny .parcel .pot.idle { font-size: 0; padding: 5px 7px; }
#world.ztiny .parcel .pot.idle::before { content: '▶'; font-size: 11px; }

/* World map tiles: just the name on the background colour */
#worldmap .region { justify-content: center; align-items: center; text-align: center; padding: 2px; }
#worldmap .rname { font-size: 7px; line-height: 1.15; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: auto; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
/* idle buildings waiting for a job: orange pulse · rewards waiting to be collected: yellow pulse */
#worldmap .region.needsyou { animation: regionIdle 1.2s ease-in-out infinite; }
#worldmap .region.hasready { animation: regionReady 1.4s ease-in-out infinite; }
@keyframes regionIdle {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 140, 30, .35); border-color: rgba(255, 140, 30, .5); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 140, 30, 1), 0 0 14px rgba(255, 140, 30, .85); border-color: #ff8c1e; }
}
@keyframes regionReady {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 215, 60, .3); border-color: rgba(255, 215, 60, .45); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 215, 60, .95), 0 0 14px rgba(255, 215, 60, .8); border-color: #ffd73c; }
}
/* hire another builder */
#st-builders { position: relative; }
#st-builders .hire { margin-left: 6px; align-self: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 16px; font-weight: 800;
  background: var(--good, #4cc38a); color: #0c1a12; border: none; cursor: pointer; animation: potBob 1.6s ease-in-out infinite; }
#st-builders .hire.short { background: #4a4f5c; color: #a9afbd; animation: none; }
#st-builders .hire[hidden] { display: none; }
/* hire-a-builder popup */
.hire-box { max-width: 420px; text-align: center; }
.hire-icon { font-size: 48px; line-height: 1; }
.hire-price { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; text-align: left; }
.hire-row { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; background: var(--panel2); border-radius: 10px; padding: 8px 12px; border: 1px solid transparent; }
.hire-row b { font-size: 17px; }
.hire-row small { grid-column: 1 / -1; font-size: 11.5px; }
.hire-row.ok small { color: var(--good); }
.hire-row.short { border-color: rgba(255, 110, 110, .5); }
.hire-row.short small { color: #ff9aa6; }
.hire-box .modal-actions button { min-width: 120px; }

/* ---------- 👑 The Coronation (fun code — visual only) ---------- */
#royal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(90, 60, 0, .55), rgba(20, 10, 0, .85)); animation: royalIn .6s ease-out; }
#royal.out { animation: royalOut 1.1s ease-in forwards; }
@keyframes royalIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes royalOut { to { opacity: 0; } }
.royal-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.royal-rain span { position: absolute; top: -60px; animation: royalFall linear infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
@keyframes royalFall { to { transform: translateY(calc(100vh + 120px)) rotate(540deg); } }
.royal-card { position: relative; text-align: center; padding: 30px 46px 28px; border-radius: 22px; max-width: 90vw;
  background: linear-gradient(160deg, #3b2a06, #1d1404); border: 3px solid #f5c542;
  box-shadow: 0 0 0 6px rgba(245, 197, 66, .25), 0 20px 70px rgba(0,0,0,.6), inset 0 0 40px rgba(245, 197, 66, .15);
  animation: royalPop .8s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
@keyframes royalPop { from { transform: scale(.3) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.royal-crown { font-size: 96px; line-height: 1; animation: crownDrop 1.1s cubic-bezier(.3, 1.5, .5, 1) .3s both, crownGlow 2s ease-in-out 1.4s infinite; }
@keyframes crownDrop { from { transform: translateY(-60vh) rotate(-25deg); } to { transform: none; } }
@keyframes crownGlow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 215, 80, .6)); } 50% { filter: drop-shadow(0 0 26px rgba(255, 225, 120, 1)); } }
.royal-hear { margin-top: 6px; font: italic 600 15px Georgia, serif; color: #f3dc9a; letter-spacing: .08em; }
.royal-title { font: 800 46px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: .02em; margin: 4px 0;
  background: linear-gradient(90deg, #b8860b, #fff3b0, #f5c542, #fff3b0, #b8860b); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.royal-sub { font: 600 19px Georgia, serif; color: #ffe08a; }
.royal-small { margin-top: 12px; font-size: 13px; color: #d8c48a; }
/* afterwards: every building wears a crown, the logo turns gold */
body.royal .parcel.built .picon { position: relative; }
body.royal .parcel.built .picon::before { content: '👑'; position: absolute; left: 50%; top: -.42em; transform: translateX(-50%) rotate(-8deg);
  font-size: .42em; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); animation: crownBob 1.8s ease-in-out infinite; }
@keyframes crownBob { 0%, 100% { transform: translateX(-50%) rotate(-8deg); } 50% { transform: translateX(-50%) translateY(-3px) rotate(6deg); } }
body.royal #brand { background: linear-gradient(90deg, #b8860b, #fff3b0, #f5c542, #fff3b0, #b8860b); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.4s linear infinite; }
body.royal #brand span { color: transparent; }
#banner .away { background: #1d2a44; color: #b9c8e6; }
/* Traffic-paying jobs */
.pot.k-traffic { background: #8ee6c8; }
.float.k-traffic { color: #8ee6c8; }
.bstats .k-traffic { color: #8ee6c8; }
.jtr { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: #8ee6c8; }

/* ---------- Group Chat (above Local Chat) ---------- */
#gchat.hidden { display: none; }
#gchat { margin-bottom: 14px; }
#gchat-list { font-size: 12px; line-height: 1.45; height: calc(var(--chat-lines, 8) * 1.45em + 8px); overflow-y: auto; overflow-wrap: anywhere;
  background: #121b29; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
#gchat-list .gm { color: #dbe6f3; }
#gchat-list .gm .time { color: #6b7d95; font-size: 11px; margin-right: 2px; }
#gchat-list .gm b { color: var(--accent2); }
#gchat-list .gm.you b { color: var(--gold); }
#gchat-list .gm b.jump { cursor: pointer; }
#gchat-list .gm b.jump:hover { text-decoration: underline; color: #fff; }
#gchat-list .gm.err { color: #ff9aa6; font-style: italic; }
#gchat-form { display: flex; gap: 6px; margin-top: 6px; }
#gchat-form input { flex: 1; min-width: 0; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: #121b29; color: var(--text); font-size: 12.5px; }
#gchat-form input:focus { outline: none; border-color: var(--accent); }
#gchat-form button { padding: 5px 12px; }
.gchat-new { display: inline-block; min-width: 18px; text-align: center; background: var(--bad, #ff6b7a); color: #fff; font-size: 10.5px; font-weight: 800;
  border-radius: 20px; padding: 1px 6px; margin-left: 6px; letter-spacing: 0; vertical-align: middle; }
.gchat-new.hidden { display: none; }
/* Local Chat: a fixed number of lines, scroll for older events */
#log { max-height: calc(var(--log-lines, 12) * 1.45em + 4px); overflow-y: auto; line-height: 1.45; padding-right: 4px; }

/* ---------- Lost newcomers on a grid you're visiting ---------- */
.newbie { position: absolute; z-index: 8; cursor: pointer; font-size: clamp(22px, calc(var(--R, 480px) * .07), 40px); line-height: 1;
  transform: translate(-50%, -50%); animation: newbieWander 6s ease-in-out infinite; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.newbie span { display: block; animation: newbieBob .9s ease-in-out infinite; }
.newbie i { position: absolute; left: 70%; top: -38%; font-style: normal; font-weight: 900; font-size: .5em; color: #1b1b1b; background: #ffe26a;
  border-radius: 50%; width: 1.5em; height: 1.5em; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.newbie:hover { filter: drop-shadow(0 0 8px #ffe26a) brightness(1.15); }
@keyframes newbieWander { 0%, 100% { margin-left: 0; margin-top: 0; } 25% { margin-left: 4%; margin-top: -2%; } 50% { margin-left: 1%; margin-top: 3%; } 75% { margin-left: -4%; margin-top: 1%; } }
@keyframes newbieBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- Rolling restart bar (a new version is ready) ---------- */
#restart { display: block; width: 100%; border: none; border-radius: 0; padding: 10px 14px; font-size: 14px; cursor: pointer; text-align: center;
  color: #2a1c00; background: repeating-linear-gradient(45deg, #ffcf3a, #ffcf3a 18px, #f5b81f 18px, #f5b81f 36px); background-size: 51px 51px;
  animation: restartSlide 1.2s linear infinite; position: relative; z-index: 60; }
#restart:hover { filter: brightness(1.08); }
#restart:disabled { cursor: wait; filter: grayscale(.4); }
@keyframes restartSlide { to { background-position: 51px 0; } }
/* version number under the logo */
.brand { position: relative; padding-bottom: 9px; line-height: 1; }
.brand .ver { position: absolute; left: 1px; bottom: -3px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }

/* ---------- Seasons (fun codes): summer and winter looks ---------- */
/* summer: azure water, golden sand */
#viewport.season-summer { background-color: #14b4e6;
  background-image: url("water.png"), url("water.png"), radial-gradient(ellipse at 30% 20%, #6fe3ff 0%, #18b9ea 55%, #0b93cf 100%); }
#viewport.season-summer .parcel { background-color: #e6c477; background-image: url("sand.png"); }
#viewport.season-summer .rcell::before { background: #c9a35a; box-shadow: 0 0 0 4px rgba(201, 163, 90, .4); }
#viewport.season-summer .picon.plus { color: rgba(110, 75, 20, .55); }
/* winter: ice and snow */
#viewport.season-winter { background-color: #bfe3f2; animation: none;
  background-image: url("water.png"), url("water.png"),
    linear-gradient(115deg, rgba(255,255,255,.55) 0 1px, transparent 1px 90px), linear-gradient(35deg, rgba(255,255,255,.4) 0 1px, transparent 1px 140px),
    radial-gradient(ellipse at 30% 20%, #eefaff 0%, #c3e6f4 55%, #9ccde3 100%);
  background-size: 512px 512px, 800px 800px, 260px 260px, 340px 340px, 100% 100%; }
#viewport.season-winter .parcel { background-color: #eef4fa; background-image: url("snow.png"); }
#viewport.season-winter .parcel:not(.built):not(.selected) { box-shadow: inset 0 0 0 1px rgba(120, 150, 180, .28); }
#viewport.season-winter .rcell::before { background: #dfeef6; box-shadow: 0 0 0 4px rgba(223, 238, 246, .55); }
#viewport.season-winter .picon.plus { color: rgba(60, 90, 120, .5); }
/* the little world map follows the season */
#worldmap.season-summer .region.owned { background: linear-gradient(135deg, #f0d48a, #d9b25e); color: #3b2a08; }
#worldmap.season-summer .region.owned .rname { text-shadow: none; }
#worldmap.season-summer .region.buyable { background: #12a6d8; }
#worldmap.season-winter .region.owned { background: linear-gradient(135deg, #ffffff, #d9e6f0); color: #20384d; }
#worldmap.season-winter .region.owned .rname { text-shadow: none; }
#worldmap.season-winter .region.buyable { background: #a9d6ea; color: #20384d; }
#viewport.season-summer .plvl { color: #8a5a00; text-shadow: 0 0 2px rgba(255,255,255,.6); }
#viewport.season-winter .plvl { color: #b07a00; text-shadow: 0 0 2px #fff; }
/* announcements from the manager page */
#gchat-list .gm.gov b { color: #ff5a5a; }
#gchat-list .gm.gov { color: #ffe1e1; font-weight: 600; }

/* ---------- 💎 Diamonds ---------- */
#st-gems { min-width: 118px; border-color: rgba(120, 220, 255, .35); }
#st-gems b { color: #9fe6ff; }
#st-gems.gemland { animation: gemLand .6s ease-out; }
@keyframes gemLand { 0% { box-shadow: 0 0 0 0 rgba(120, 220, 255, .9); transform: scale(1.12); border-color: #9fe6ff; } 100% { box-shadow: 0 0 0 14px rgba(120, 220, 255, 0); transform: none; } }
#st-gems.flash { animation: gemSpent 1s ease-out; }
@keyframes gemSpent { 0%, 30% { border-color: #9fe6ff; box-shadow: 0 0 0 3px rgba(120, 220, 255, .4); } }
.goal .reward .gem { color: #9fe6ff; }
button.gembtn { background: linear-gradient(#1f4d66, #173a52); border-color: #4fb9e6; color: #d8f5ff; font-weight: 600; }
button.gembtn:hover:not(:disabled) { background: linear-gradient(#27607f, #1c4763); }
.overlay .card button.gembtn { margin-top: 0; }
.griefbox { background: rgba(255, 107, 107, .12); border: 1px solid rgba(255, 107, 107, .4); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
/* the Diamond that appears mid-screen and flies to the box */
.gemfly { position: fixed; z-index: 400; pointer-events: none; transform: translate(-50%, -50%); font-size: 96px; line-height: 1; }
.gemfly.go { transition: transform .7s cubic-bezier(.55, -.25, .75, .9), opacity .7s ease-in; opacity: .85; }
.gemfly span { display: block; position: relative; animation: gemRez .75s cubic-bezier(.2, 1.6, .4, 1) both, gemGlow 1s ease-in-out .2s infinite; }
.gemfly b { position: absolute; right: -34px; bottom: -6px; font-size: 34px; color: #d8f5ff; text-shadow: 0 2px 8px #000, 0 0 12px #3fc8ff; }
@keyframes gemRez { 0% { transform: scale(0) rotate(-200deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes gemGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(120, 220, 255, .7)); } 50% { filter: drop-shadow(0 0 34px rgba(170, 235, 255, 1)); } }

/* ---------- the mayor ---------- */
#st-mayor { cursor: pointer; min-width: 0; }
#st-mayor:hover { border-color: var(--accent); }
#st-mayor .av { font-size: 26px; line-height: 1; }
#st-mayor b { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#st-mayor b.muted { color: var(--muted); font-weight: 600; }
.av-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 10px 0 4px; }
.av-pick button { font-size: 24px; line-height: 1; padding: 6px 0; background: var(--panel2); border: 2px solid transparent; border-radius: 10px; }
.av-pick button:hover { border-color: var(--line); }
.av-pick button.on { border-color: var(--gold); background: rgba(255, 200, 80, .15); }
.av-pick.deny { animation: shake .3s; }
.mayor-box { max-width: 440px; }
.mayor-box .mayor-name input { width: 100%; }
.mayor-name { margin-top: 10px; }
.mayor-save { text-align: right; margin-top: 6px; }
.gm .gav { margin-right: 3px; }
.lb-av { font-size: 15px; }
#mayors-status { margin-bottom: 4px; }

/* the 💎 "finish now" button on a building that is being built / upgraded */
.gemchip { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 5; cursor: pointer; white-space: nowrap;
  background: linear-gradient(#1f4d66, #173a52); border: 1px solid #4fb9e6; color: #d8f5ff; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.gemchip:hover { filter: brightness(1.25); }
.zsmall .gemchip { font-size: 10.5px; padding: 2px 6px; }
.ztiny .gemchip { display: none; }
.downoverlay button.gembtn { margin-top: 10px; pointer-events: auto; padding: 6px 14px; font-size: 13px; }
/* a building site is grey — but its 💎 button keeps its colour (so the grey is put on the parts, not on the whole tile) */
.parcel.upgrading, .parcel.upgrading:hover { filter: none; background-color: #808080; background-blend-mode: luminosity; box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .34); }
.parcel.upgrading > :not(.gemchip):not(.helpedby) { filter: grayscale(1) brightness(.75); }

/* visiting: the mayor's picture and name, top left of the world */
.vis-av { font-size: 34px; line-height: 1; }
.vis-who h1 { margin: 0; }
.vis-who small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }

/* 🐄 the cow level: a herd runs from the upper right to the lower left of the world */
#cows { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
#cows span { position: absolute; left: 0; top: 0; line-height: 1; opacity: 0; animation: cowRun 3.2s linear both; }
#cows i { display: block; font-style: normal; animation: cowHop .32s ease-in-out infinite; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .35)); }
@keyframes cowRun {
  0%   { opacity: 1; transform: translate(var(--sx), var(--sy)); }
  100% { opacity: 1; transform: translate(var(--ex), var(--ey)); }
}
@keyframes cowHop { 50% { transform: translateY(-9px) rotate(-6deg); } }

/* the tip at the bottom of the screen when the game opens */
#tipbox { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; width: min(440px, calc(100vw - 32px));
  background: rgba(24, 34, 49, .82); backdrop-filter: blur(3px); border: 1px solid var(--gold); border-radius: 12px; padding: 12px 14px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 8px; animation: tipIn .35s ease-out; transition: opacity .3s, transform .3s; }
#tipbox.out { opacity: 0; transform: translateX(-50%) translateY(14px); }
#tipbox .tip-text b { display: block; color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
#tipbox .tip-text span { font-size: 14px; line-height: 1.4; }
#tipbox button { align-self: flex-end; padding: 4px 18px; }
@keyframes tipIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } }
body:has(#tipbox) #toasts { bottom: 150px; }       /* pop-up messages sit above the tip */

/* ---------- top bar buttons, settings ---------- */
.controls > button { font-size: 16px; padding: 6px 9px; line-height: 1; }
.settings-box { width: min(460px, calc(100vw - 32px)); }
.settings-box h3 { margin: 16px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.settings-box .audio { display: inline-flex; }
.set-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
.set-row > span:first-child { min-width: 52px; color: var(--muted); }
.set-row input[type="text"], .set-row input:not([type]) { flex: 1; min-width: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--text); font: inherit; }
.set-row b { flex: 1; }
.set-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
/* less animation */
body.calm *, body.calm *::before, body.calm *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
body.calm .worldfx, body.calm #cows { display: none; }

/* ---------- trophies ---------- */
.trophy-box { width: min(620px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 40px); overflow-y: auto; }
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.trophy { display: flex; gap: 10px; align-items: center; background: var(--panel2); border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; opacity: .45; }
.trophy > span { font-size: 26px; line-height: 1; filter: grayscale(1); }
.trophy b { display: block; font-size: 13.5px; } .trophy small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.25; }
.trophy.got { opacity: 1; border-color: rgba(255, 209, 102, .55); }
.trophy.got > span { filter: none; }
.hg-ach span { font-size: 18px; }

/* ---------- welcome back + daily gift ---------- */
.welcome-box { width: min(500px, calc(100vw - 32px)); }
.welcome-box h3 { margin: 16px 0 8px; font-size: 14px; }
.wb-list { background: var(--panel2); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.wb-list div { padding: 3px 0; }
.dgs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dg { background: var(--panel2); border: 1px solid transparent; border-radius: 8px; padding: 6px 2px; text-align: center; min-height: 58px; }
.dg small { display: block; font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.dg b { font-size: 11.5px; line-height: 1.25; display: block; }
.dg.today { border-color: var(--gold); background: rgba(255, 209, 102, .12); }
.dg.done { opacity: .5; } .dg.done b { color: var(--good); font-size: 16px; }

/* ---------- statistics ---------- */
.stats-box { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 40px); overflow-y: auto; }
.charts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
@media (max-width: 720px) { .charts3 { grid-template-columns: 1fr; } }
.chart { background: var(--panel2); border-radius: 10px; padding: 10px 10px 6px; min-width: 0; }
.chart-head b { display: block; font-size: 13px; } .chart-head span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.chart-plot { position: relative; height: 110px; }
.chart-plot svg { width: 100%; height: 100%; display: block; }
.chart-plot .line { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-plot .grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; } .chart-plot .axis { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.chart-plot .xh { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .35); display: none; pointer-events: none; }
.chart-plot .dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel2); display: none; pointer-events: none; }
.chart-plot .tt { position: absolute; top: 0; transform: translateX(-50%); background: #0c1622; border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; font-size: 11.5px; white-space: nowrap; display: none; pointer-events: none; z-index: 2; }
.chart-plot.hover .xh, .chart-plot.hover .dot, .chart-plot.hover .tt { display: block; }
.chart-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.chart-table { margin-bottom: 10px; font-size: 12.5px; } .chart-table summary { cursor: pointer; color: var(--muted); }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: 6px; } .chart-table th, .chart-table td { text-align: right; padding: 3px 8px; border-bottom: 1px solid var(--line); }
.chart-table th:first-child, .chart-table td:first-child { text-align: left; }

/* ---------- looks from fun codes ---------- */
/* 🍂 autumn */
#viewport.season-autumn { background-color: #3d7fa0; }
#viewport.season-autumn .parcel { background-color: #c98a35; background-image: url("autumn.png"); }
#viewport.season-autumn .rcell::before { background: #c8a46a; box-shadow: 0 0 0 4px rgba(200, 164, 106, .4); }
#worldmap.season-autumn .region.owned { background: linear-gradient(135deg, #d98a2b, #9c5a1c); }
#worldmap.season-autumn .region.buyable { background: #3d7fa0; }
.worldfx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
#leaves span { position: absolute; top: -8% !important; font-size: 20px; animation: leafFall 10s linear infinite; }
@keyframes leafFall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 8% { opacity: .95; } 50% { transform: translate(60px, 55vh) rotate(200deg); } 100% { transform: translate(-30px, 115vh) rotate(420deg); opacity: .9; } }
/* 🌙 night */
#viewport.night::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(14, 24, 78, .55); mix-blend-mode: multiply; }
#viewport.night .parcel.built .picon { filter: brightness(1.7) drop-shadow(0 0 9px #ffd97a) drop-shadow(0 0 3px #fff3c4); }
#fireflies span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f4ff9a; box-shadow: 0 0 8px 3px rgba(230, 255, 120, .75); animation: firefly 9s ease-in-out infinite; }
@keyframes firefly { 0%, 100% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 35% { transform: translate(28px, -22px); opacity: .25; } 55% { transform: translate(-14px, -40px); opacity: 1; } 80% { transform: translate(-36px, -8px); opacity: .4; } }
/* 👾 8-bit */
body.retro, body.retro button, body.retro input { font-family: 'Courier New', ui-monospace, monospace !important; }
body.retro * { border-radius: 0 !important; }
body.retro #viewport { filter: contrast(1.3) saturate(1.6); image-rendering: pixelated; }
body.retro #viewport .parcel { background-size: 2600px 2600px !important; image-rendering: pixelated; }
body.retro #viewport::before { content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 4px); }
body.retro .picon, body.retro .pname, body.retro .sign { image-rendering: pixelated; text-shadow: 2px 2px 0 #000; }
body.retro #brand { letter-spacing: .04em; text-transform: uppercase; }
/* 🍰 the cake */
body.cake .parcel.built .picon { visibility: hidden; position: relative; }
body.cake .parcel.built .picon::after { content: '🍰'; visibility: visible; position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
/* 🗡️ the sword */
#sword { position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; font-size: 26px; line-height: 1; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); will-change: transform; }

/* the speed buttons are switched off: they take no room either */
.speed.locked { display: none; }
.controls { gap: 5px; }
/* ---------- the top bar: the logo, and two views of the boxes ---------- */
#topbar .brand { display: flex; align-items: center; gap: 6px; padding: 0; margin-right: 4px; align-self: stretch; }
.brand .logo { display: flex; flex-direction: column; justify-content: center; line-height: .95; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.brand .logo span { color: var(--accent); }
.brand .logo .ver { position: static; margin-top: 4px; font-size: 8.5px; letter-spacing: .03em; }
.brand .legend-badge { padding: 3px 5px; font-size: 15px; line-height: 1; }
.stat b.warn { color: var(--warn); }
/* ＋ / − : switch between the short view and the full view */
#bar-toggle { align-self: center; flex-shrink: 0; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 15px; font-weight: 700; line-height: 1; color: var(--muted); }
#bar-toggle:hover { color: var(--text); border-color: var(--accent); }

/* the SHORT view: a picture and a number in each box — hover for the details */
#topbar.compact .stat { min-width: 0; padding: 5px 12px; gap: 8px; }
#topbar.compact .stat > b, #topbar.compact #st-builders-in b { font-size: 18px; white-space: nowrap; }
#topbar.compact #st-ls b { font-size: 22px; line-height: 1.15; }
#topbar.compact #st-energy b { font-size: 17px; line-height: 1.1; display: block; }
#topbar.compact #st-mayor { padding: 5px 9px; } #topbar.compact #st-mayor .av { font-size: 28px; }
#topbar.compact #st-traffic { min-width: 240px; }
@media (max-width: 1280px) { #topbar.compact #st-traffic { min-width: 0; } #topbar.compact #st-traffic em { display: none; } #topbar.compact .stat { padding: 5px 9px; } }
@media (max-width: 1200px) {
  #topbar.compact { gap: 5px; padding: 8px; }
  #topbar.compact .stat { padding: 4px 7px; gap: 5px; }
  #topbar.compact .stat .ico { font-size: 16px; }
  #topbar.compact .stat > b, #topbar.compact #st-builders-in b { font-size: 15px; } #topbar.compact #st-ls b { font-size: 17px; } #topbar.compact #st-energy b { font-size: 14px; }
  #topbar.compact #st-traffic small { display: none; }
  #topbar.compact #st-mayor .av { font-size: 22px; }
  #topbar.compact .controls > button { padding: 5px; font-size: 14px; }
  .brand .logo { font-size: 16px; }
}

/* the FULL view (with the words): on narrower screens it tightens up so it still fits on one line */
@media (max-width: 1700px) {
  #topbar.full { gap: 6px; padding: 8px 10px; }
  #topbar.full .stat { padding: 5px 8px; gap: 6px; }
  #topbar.full .stat .ico { font-size: 17px; }
  #topbar.full .stat b { font-size: 14px; }
  #topbar.full .stat small { font-size: 10.5px; }
  #topbar.full #st-ls { min-width: 0; } #topbar.full #st-ls b { font-size: 20px; }
  #topbar.full #st-gems { min-width: 0; }
  #topbar.full #st-mayor .av { font-size: 22px; } #topbar.full #st-mayor b { max-width: 120px; }
  #topbar.full .controls > button { padding: 5px 6px; font-size: 15px; }
}
@media (max-width: 1480px) {
  #topbar.full #st-gems small, #topbar.full #st-builders small { display: none; }
  #topbar.full #st-res small, #topbar.full #st-energy small, #topbar.full #st-traffic small { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
  #topbar.full #st-traffic em { display: none; }
  #topbar.full #st-mayor b { max-width: 90px; }
}
@media (max-width: 1320px) {
  #topbar.full #st-res small, #topbar.full #st-energy small { display: none; }
  #topbar.full #st-traffic small { max-width: 110px; }
  #topbar.full .stat { padding: 4px 6px; gap: 5px; }
  #topbar.full #st-mayor label { display: none; }
}
@media (max-width: 1200px) {
  #topbar.full { gap: 4px; padding: 8px 6px; }
  #topbar.full #st-traffic small, #topbar.full #st-mayor div, #topbar.full .stat label { display: none; }
  #topbar.full .stat { padding: 4px 5px; gap: 4px; }
  #topbar.full .stat b { font-size: 13px; } #topbar.full #st-ls b { font-size: 16px; }
  #topbar.full .controls > button { padding: 4px; font-size: 13px; }
}
/* griefing another grid */
.hg-help.grief button { margin: 8px 0 0; }
button.danger.big { width: 100%; }

/* ❄️ winter: falling snow (the flakes have a soft blue-grey edge so they show up on the white land too) */
#snowfall span { position: absolute; top: -4% !important; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 3px 1px rgba(110, 145, 190, .55); animation: snowFall 10s linear infinite; }
#snowfall span:nth-child(3n) { width: 4px; height: 4px; opacity: .85; }
#snowfall span:nth-child(4n) { width: 8px; height: 8px; }
@keyframes snowFall { 0% { transform: translate(0, 0); } 25% { transform: translate(14px, 28vh); } 50% { transform: translate(-8px, 56vh); } 75% { transform: translate(12px, 84vh); } 100% { transform: translate(-4px, 112vh); } }

/* trophies with stars */
.tstars { font-style: normal; color: var(--gold); margin-left: 6px; font-size: 12px; letter-spacing: 1px; }
.tstars i { font-style: normal; color: rgba(255, 255, 255, .18); }
.tprog { color: var(--text); font-weight: 600; white-space: nowrap; }
.hg-ach sup { font-size: 8px; color: var(--gold); margin-left: 1px; }

/* neighbours, recent visitors, the weekly race */
#racebox.hidden, #friendsbox.hidden { display: none; }
#race-status { margin-bottom: 4px; }
.sub-head { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 8px 0 4px; }
.lb-row .lb-x { margin-left: auto; padding: 0 5px; color: var(--muted); cursor: pointer; border-radius: 6px; font-size: 12px; flex-shrink: 0; }
.lb-row .lb-x:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.lb-row.vis .lb-nm { white-space: normal; line-height: 1.25; }
.lb-row.vis small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 400; }

/* 🎁 the daily gift button: a gold dot while today's gift is waiting */
#gift-btn { position: relative; }
#gift-btn.due { border-color: var(--gold); }
#gift-btn.due::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--panel); }
/* the daily gifts: three days to a row, and day 7 as one big box underneath */
.welcome-box { width: min(580px, calc(100vw - 32px)); max-width: none; }
.dgs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dg { min-height: 84px; padding: 12px 8px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.dg small { font-size: 11px; margin: 0; }
.dg b { font-size: 16px; line-height: 1.3; }
.dg.done b { font-size: 22px; }
.dg:nth-child(7) { grid-column: 1 / -1; min-height: 176px; background: linear-gradient(160deg, rgba(255, 209, 102, .16), var(--panel2) 70%); border-color: rgba(255, 209, 102, .35); }
.dg:nth-child(7) small { font-size: 12.5px; color: var(--gold); }
.dg:nth-child(7) b { font-size: 26px; }
.dg:nth-child(7).done b { font-size: 34px; }
.dg.today { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 209, 102, .3); }
.welcome-box { max-height: calc(100vh - 32px); overflow-y: auto; }

/* the left panel's sections: a short version until opened */
.lb-more { font-size: 11.5px; color: var(--accent); cursor: pointer; padding: 3px 8px; border-radius: 7px; text-align: center; }
.lb-more:hover { background: var(--panel2); color: var(--text); }
#goals .lb-more { margin-top: -2px; }
#left h2.toggle { margin-top: 12px; }
#left .hidden { display: none; }