:root {
  --bg: #eef2f4;
  --ink: #2b3138;
  --muted: #7b858f;
  --card: rgba(255, 255, 255, 0.92);
  --line: rgba(43, 49, 56, 0.08);
  --red: #e5484d;
  --red-soft: #fde8e8;
  --amber: #f2b84e;
  --blue: #4c8fe0;
  --mint: #5fb08b;
  --radius: 18px;
  --shadow: 0 8px 30px rgba(43, 49, 56, 0.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #dfe5e9; overflow: hidden; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}

/* 9:16 portrait frame; full screen on phones. Sized in % of body so it also fits inside a host's safe-area padding. */
#app {
  position: relative;
  width: min(100%, calc(100vh * 9 / 16));
  height: min(100%, calc(100vw * 16 / 9));
  background: var(--bg);
  overflow: hidden;
}
@media (max-width: 600px) { #app { width: 100%; height: 100%; } }
@media (min-width: 601px) { #app { border-radius: 26px; box-shadow: 0 20px 60px rgba(0,0,0,.15); } }

#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.screen { position: absolute; inset: 0; pointer-events: none; display: none; }
.screen > * { pointer-events: auto; }
body[data-state="MainMenu"] #menu { display: block; }
body[data-state="LevelStart"] #hud,
body[data-state="Gameplay"] #hud,
body[data-state="Paused"] #hud,
body[data-state="LevelSuccess"] #hud,
body[data-state="LevelFailed"] #hud { display: block; }

/* ---------- Icons (SVG masks, tinted with currentColor) ---------- */
.ico { display: inline-block; width: 14px; height: 14px; background: currentColor; flex: none;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico.coin { color: var(--amber); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.ico.gem { color: #7c6fe0; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3C/svg%3E"); }
.ico.pause { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='4' width='4' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1.5'/%3E%3C/svg%3E"); }
.ico.play { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E"); }
.ico.undo { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); }
.ico.bulb { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.ico.tow { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 17h2m4 0h7m4 0h3v-5l-3-4h-4v9'/%3E%3Cpath d='M15 8 7 4v6'/%3E%3Cpath d='M7 10a2 2 0 1 0 2 2'/%3E%3Ccircle cx='6' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
.ico.crane { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V3h2l14 4H5'/%3E%3Cpath d='M17 7v6'/%3E%3Crect x='14' y='13' width='6' height='4' rx='1'/%3E%3Cpath d='M3 21h6'/%3E%3C/svg%3E"); }
.ico.lock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E"); }

/* ---------- Shared bits ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  background: var(--card); box-shadow: 0 2px 10px rgba(43,49,56,.06); font-size: 12px; }
.pill b { font-weight: 600; }
.pill small { color: var(--muted); font-size: 10px; }
.muted { color: var(--muted); }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border: 0; border-radius: 14px; padding: 12px 14px; font: 600 13px 'Inter', sans-serif;
  background: #f1f3f5; color: var(--ink); cursor: pointer; transition: transform .12s, filter .12s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.primary { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(229,72,77,.28); }
.btn.ghost { background: transparent; color: var(--muted); font-weight: 500; }
.btn.ad { background: #eef5ff; color: var(--blue); }
.btn.big { padding: 15px; font-size: 15px; border-radius: 16px; }

/* ---------- Menu ---------- */
.topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 8px; justify-content: center;
  padding: max(14px, env(safe-area-inset-top)) 16px 0; }
.title { position: absolute; top: 64px; left: 0; right: 0; text-align: center; pointer-events: none; }
.title h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.title p { margin: 2px 0 0; font-size: 11px; color: var(--red); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.daily { position: absolute; top: 116px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: var(--card); padding: 7px 13px; border-radius: 99px; font: 600 12px 'Inter', sans-serif; color: var(--ink);
  box-shadow: 0 2px 10px rgba(43,49,56,.06); cursor: pointer; white-space: nowrap; }
.daily b { color: var(--red); font-weight: 700; }
.daily b:empty { display: none; }
.daily.done { color: var(--muted); font-weight: 500; }
.daily.done .ico { color: #b5bcc3; }
.menu-bottom { position: absolute; left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; }
.levels { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.levels::-webkit-scrollbar { display: none; }
.lv { flex: none; width: 46px; padding: 7px 0 5px; border-radius: 12px; border: 0; background: var(--card);
  font: 600 13px 'Inter', sans-serif; color: var(--ink); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 3px; box-shadow: 0 2px 8px rgba(43,49,56,.05); }
.lv.sel { outline: 2px solid var(--red); }
.lv.locked { color: #b9c0c7; cursor: default; }
.lv .s { font-size: 8px; letter-spacing: 1px; color: #d7dbdf; }
.lv .s .on { color: var(--amber); }

.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0;
  padding: 16px 16px max(18px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.1);
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); max-height: 70%; overflow-y: auto; }
.sheet.open { transform: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet h2 { margin: 0; font-size: 16px; }
.sheet .muted { margin: 4px 0 12px; font-size: 12px; }
.x { border: 0; background: #f1f3f5; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; color: var(--muted); cursor: pointer; }
/* Town: collect-all button and the card for a tapped building. */
.collect { align-self: center; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  background: #fff7e3; color: #8a6413; font: 600 12px 'Inter', sans-serif; padding: 7px 14px; border-radius: 99px;
  box-shadow: 0 2px 10px rgba(242,184,78,.25); animation: nudge 2.4s ease-in-out infinite; }
.collect[hidden] { display: none; }
/* Night town: keep the menu text readable on the dark sky. */
body[data-night] .title h1 { color: #eef2f4; }
body[data-night] .title p { color: #ff8a8e; }
body[data-night] .links .btn.ghost { color: #c3ccd6; }
body[data-night] #app { background: #2a3350; }
@keyframes nudge { 50% { transform: translateY(-2px); } }
#plot-card .muted { margin-bottom: 8px; }
#menu.card-open .menu-bottom { visibility: hidden; }
.pc-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 12px; color: #8a6413; }
.pc-row .lvls { display: flex; gap: 3px; }
.pc-row .lvls i { width: 18px; height: 5px; border-radius: 3px; background: #e7eaed; }
.pc-row .lvls i.on { background: var(--mint); }
.links { display: flex; gap: 4px; }
.links .btn { padding: 10px 6px; font-size: 12px; }
/* Relaxed toggle: a small switch dot that turns mint when on. */
.sw-dot { display: inline-block; width: 22px; height: 12px; border-radius: 99px; background: #dfe3e7; position: relative;
  transition: background .2s; }
.sw-dot::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; transition: transform .2s; }
#btn-relaxed.on { color: var(--mint); }
#btn-relaxed.on .sw-dot { background: var(--mint); }
#btn-relaxed.on .sw-dot::after { transform: translateX(10px); }
.hud-timer.relaxed i { background: #e6f0fa; }
.hud-timer.relaxed b { font-size: 13px; color: #5b88b8; }
.pw { display: inline-flex; width: 22px; height: 12px; border-radius: 4px; overflow: hidden; flex: none;
  box-shadow: inset 0 0 0 1px rgba(43,49,56,.08); }
.pw i { flex: 1; }
.pw i:last-child { flex: 0 0 7px; }
.perks { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 10px; }
.perks span { font-size: 10px; font-weight: 500; background: #eaf5ef; color: #3f8a68; padding: 3px 8px; border-radius: 99px; }
.perks span.none { background: #f1f3f5; color: var(--muted); }
.plot .rl { font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.plot { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.plot .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.plot .nm { flex: 1; font-weight: 500; }
.plot .lvls { display: flex; gap: 3px; margin-top: 3px; }
.plot .lvls i { width: 14px; height: 4px; border-radius: 2px; background: #e7eaed; }
.plot .lvls i.on { background: var(--mint); }
.plot .btn { width: auto; padding: 8px 12px; font-size: 12px; gap: 5px; }

/* ---------- HUD ---------- */
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: max(14px, env(safe-area-inset-top)) 16px 0; }
.hud-cell { background: var(--card); border-radius: 12px; padding: 5px 10px; min-width: 54px; text-align: center; }
.hud-cell small { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.hud-cell b { font-size: 14px; font-weight: 600; }
.hud-timer { flex: 1; position: relative; background: var(--card); border-radius: 12px; height: 38px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hud-timer b { position: relative; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; z-index: 1; }
.hud-timer i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #e5f2ec; transform-origin: left; transition: background .3s; }
.hud-timer.low i { background: var(--red-soft); }
.hud-timer.low b { color: var(--red); }
.round { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--card); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
/* Route bar: one dot per block of the current call, then the destination. */
.route { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px;
  pointer-events: none; }
.route i { width: 6px; height: 6px; border-radius: 50%; background: rgba(43,49,56,.14); }
.route i.done { background: #9aa3ad; }
.route i.now { width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 0 3px rgba(229,72,77,.15); }
.route .ico { width: 11px; height: 11px; margin-left: 2px; }
.ico.cross { color: var(--blue); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v6h6v6h-6v6H9v-6H3V9h6z'/%3E%3C/svg%3E"); }
.ico.flame { color: var(--red); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 5 6 7 6 12a6 6 0 0 1-12 0c0-3 2-4 3-7 1 2 1 3 2 4 1-3 1-6 1-9z'/%3E%3C/svg%3E"); }
/* Bonus goal: one small line under the route dots, crossed out once it can't be met. */
.goal { position: absolute; top: 74px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 500;
  color: #b8860b; pointer-events: none; transition: color .3s; }
.goal.missed { color: #b5bcc3; text-decoration: line-through; }
.goal-line { font-size: 11px !important; color: #b8860b; margin: -2px 0 4px !important; }
.goal-line:empty { display: none; }
.lv.call-end { margin-right: 8px; }
.lv.boss { box-shadow: inset 0 0 0 1.5px var(--amber), 0 2px 8px rgba(43,49,56,.05); }
.lv.boss.sel { outline-color: var(--amber); }

.hint { position: absolute; top: 94px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--muted);
  background: var(--card); padding: 5px 12px; border-radius: 99px; opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap; }
.hint.on { opacity: 1; }
.hud-bottom { position: absolute; left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; gap: 8px; }
.tool { flex: 1; position: relative; border: 0; background: var(--card); border-radius: 16px; padding: 11px 0 9px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 11px 'Inter', sans-serif; color: var(--ink);
  cursor: pointer; transition: transform .12s, box-shadow .2s; box-shadow: 0 2px 10px rgba(43,49,56,.05); }
.tool .ico { width: 20px; height: 20px; }
.tool:active { transform: scale(.95); }
.tool:disabled { opacity: .45; }
.tool em { position: absolute; top: 6px; right: 10px; font-style: normal; font-size: 10px; font-weight: 600;
  background: var(--red); color: #fff; border-radius: 99px; min-width: 17px; padding: 1px 5px; }
.tool em.buy { background: #7c6fe0; }
.tool.active { box-shadow: 0 0 0 2px var(--red) inset; color: var(--red); }

/* ---------- Overlays ---------- */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(238,242,244,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 5; }
.overlay.on { opacity: 1; pointer-events: auto; }
.card { width: 100%; max-width: 300px; background: #fff; border-radius: 22px; padding: 20px 18px 14px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px; text-align: center; transform: translateY(12px) scale(.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.3); }
.overlay.on .card { transform: none; }
.card > small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.card h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
.card p { margin: 0 0 6px; font-size: 12px; line-height: 1.45; }
.card.intro { padding: 22px 18px 16px; }
.chips { display: flex; gap: 6px; justify-content: center; margin: 2px 0 6px; }
.chips span { background: #f1f3f5; border-radius: 99px; padding: 4px 10px; font-size: 11px; font-weight: 500; }
.chips span:empty { display: none; }
body[data-building] #hud, body[data-building] #o-start .tap { display: none; }
.tap { font-size: 11px !important; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.toggles { display: flex; justify-content: center; gap: 16px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.toggles input { accent-color: var(--red); }

.stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.stars i { width: 38px; height: 38px; background: #e9ecef;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.5 7 .8-5.2 4.8 1.4 7L12 17.6 5.8 21l1.4-7L2 9.3l7-.8z' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.5 7 .8-5.2 4.8 1.4 7L12 17.6 5.8 21l1.4-7L2 9.3l7-.8z' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.stars i:nth-child(2) { transform: translateY(-6px) scale(1.15); }
.stars i.on { background: var(--amber); animation: pop .45s cubic-bezier(.2,.9,.3,1.5) both; }
.stars i:nth-child(2).on { animation-name: pop2; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pop2 { from { transform: translateY(-6px) scale(0); } to { transform: translateY(-6px) scale(1.15); } }
.stats { display: flex; justify-content: space-around; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.stats small { display: block; font-size: 10px; color: var(--muted); }
.stats b { font-size: 15px; font-weight: 600; }
.reward { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 20px; margin: 4px 0 6px; }
.reward .ico { width: 18px; height: 18px; }
.reward { flex-wrap: wrap; row-gap: 2px; }
.reward #w-extra { font-size: 11px; color: var(--muted); width: 100%; }
.reward #w-extra:empty { display: none; }

.ad-box { background: #1f2329; color: #fff; border-radius: 20px; padding: 26px 22px; width: 100%; max-width: 280px; text-align: center; }
.ad-box small { opacity: .5; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.ad-box b { display: block; font-size: 44px; font-weight: 600; margin: 8px 0; }
.ad-box p { margin: 0; font-size: 11px; opacity: .6; line-height: 1.5; }

#toast { position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 10px); background: var(--ink); color: #fff;
  font-size: 12px; padding: 8px 14px; border-radius: 99px; opacity: 0; transition: all .25s; pointer-events: none; z-index: 10; white-space: nowrap; }
#toast.on { opacity: .92; transform: translate(-50%, 0); }

.nogl { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--muted); }
.nogl.on { display: flex; }

/* =====================================================================
   Menu v2: tab bar, town pins and coin counters, rank, chests, missions.
   Later rules here override the earlier menu rules above.
   ===================================================================== */
.ico.gear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3M4.9 4.9 7 7m10 10 2.1 2.1M4.9 19.1 7 17m10-10 2.1-2.1'/%3E%3C/svg%3E"); }
.ico.home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 12 3l9 8v10h-6v-6H9v6H3z'/%3E%3C/svg%3E"); }
.ico.hammer { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3h6l2 3-3 1-2-1h-3zM10 6h4v3l-9 11a2 2 0 0 1-3-3l9-8z'/%3E%3C/svg%3E"); }
.ico.flag { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h2v20H5zM8 3h11l-3 4 3 4H8z'/%3E%3C/svg%3E"); }
.ico.bag { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h14l-1 13H6zM9 8V6a3 3 0 0 1 6 0v2h-2V6a1 1 0 0 0-2 0v2z'/%3E%3C/svg%3E"); }
.ico.grid { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E"); }
.ico.star { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.5 7 .8-5.2 4.8 1.4 7L12 17.6 5.8 21l1.4-7L2 9.3l7-.8z'/%3E%3C/svg%3E"); }
.ico.chest { color: #c98a2e; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v1H3zM3 12h8v2h2v-2h8v8H3z'/%3E%3C/svg%3E"); }
.ico.big { width: 30px; height: 30px; }

/* Top bar: rank badge, wallet, settings. */
.topbar { align-items: center; gap: 6px; }
.rank { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: var(--card);
  padding: 5px 10px 5px 5px; border-radius: 99px; box-shadow: 0 2px 10px rgba(43,49,56,.06); }
.rank b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff;
  font: 700 11px 'Inter', sans-serif; }
.rank-bar { width: 38px; height: 5px; border-radius: 3px; background: #e7eaed; overflow: hidden; }
.rank-bar i { display: block; height: 100%; width: 0; background: var(--red); border-radius: 3px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.round.sm { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 2px 10px rgba(43,49,56,.06); }
.pill b { transition: transform .2s; display: inline-block; }
.pill.bump b { transform: scale(1.25); }

.title { top: 58px; }
.title h1 { font-size: 19px; }
.chip-row { position: absolute; top: 92px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.chip-row > * { pointer-events: auto; }
.daily { position: static; transform: none; }
.event { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; padding: 7px 13px; border-radius: 99px;
  font: 600 12px 'Inter', sans-serif; color: #fff; background: linear-gradient(90deg, #7b4fc9, #e9548e); box-shadow: 0 4px 14px rgba(123,79,201,.3); }
.event.snow { background: linear-gradient(90deg, #4c8fe0, #7fc4e8); box-shadow: 0 4px 14px rgba(76,143,224,.3); }
.event[hidden] { display: none; }

/* Bottom: collect/chest, play row, tab bar. Sheets sit above the tab bar. */
.menu-bottom { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 68px); gap: 10px; }
.menu-actions { display: flex; justify-content: center; gap: 8px; }
.menu-actions .collect { align-self: auto; }
.chest-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: #fff3dc; color: #8a5a13;
  font: 600 12px 'Inter', sans-serif; padding: 7px 14px; border-radius: 99px; box-shadow: 0 2px 10px rgba(201,138,46,.25);
  animation: wobble 2.6s ease-in-out infinite; }
.chest-btn[hidden] { display: none; }
@keyframes wobble { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } 95% { transform: rotate(-2deg); } }
.play-row { display: flex; gap: 8px; }
.play-row .btn.big { flex: 1; flex-direction: column; gap: 1px; padding: 11px 14px; }
.play-row .btn.big small { font-size: 11px; font-weight: 500; opacity: .85; }
.play-row .btn.big small:empty { display: none; }
.btn.square { width: 56px; flex: none; border-radius: 16px; background: var(--card); box-shadow: 0 2px 10px rgba(43,49,56,.06); }
.btn.square .ico { width: 18px; height: 18px; }
.tabbar { position: absolute; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4;
  display: flex; background: rgba(255,255,255,.96); border-radius: 20px; padding: 6px; box-shadow: 0 8px 28px rgba(43,49,56,.14); }
.tab { flex: 1; position: relative; border: 0; background: transparent; border-radius: 14px; padding: 7px 0 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 10px 'Inter', sans-serif; color: var(--muted);
  transition: background .2s, color .2s; }
.tab .ico { width: 19px; height: 19px; }
.tab.on { background: #fdecec; color: var(--red); }
.tab em { position: absolute; top: 4px; right: calc(50% - 20px); min-width: 8px; height: 8px; border-radius: 99px; background: var(--red);
  box-shadow: 0 0 0 2px #fff; }
.tab em[hidden] { display: none; }
.sheet { bottom: 0; padding-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); max-height: 74%; z-index: 3; }
#menu.sheet-open .menu-bottom, #menu.card-open .menu-bottom { visibility: hidden; }
.sub-head { margin: 16px 0 4px; font-size: 13px; display: flex; justify-content: space-between; }
.sub-head span { color: var(--muted); font-weight: 500; }

/* Switches in settings. */
.switch { width: 40px; height: 24px; border: 0; border-radius: 99px; background: #dfe3e7; position: relative; cursor: pointer; flex: none;
  transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .2s; }
.switch.on { background: var(--mint); }
.switch.on::after { transform: translateX(16px); }

/* Labels floating over the 3D town: call pins and live coin counters. */
.coin-tag, .pin { position: absolute; left: 0; top: 0; pointer-events: auto; border: 0; cursor: pointer; will-change: transform;
  font-family: 'Inter', sans-serif; white-space: nowrap; }
.coin-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 99px; font-size: 11px; font-weight: 700;
  color: #7a5310; background: rgba(255,247,227,.95); box-shadow: 0 3px 10px rgba(122,83,16,.18); }
.coin-tag .ico { width: 13px; height: 13px; }
.coin-tag.full { background: #f2c14e; color: #4d340a; animation: nudge 1.4s ease-in-out infinite; }
.pin { display: flex; flex-direction: column; align-items: center; background: transparent; padding: 0; }
.pin .bubble { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 18px rgba(43,49,56,.2); font-size: 11px; font-weight: 600; color: var(--ink); animation: pinbob 2.2s ease-in-out infinite;
  text-align: left; }
.pin .bubble i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red); flex: none; }
.pin .bubble i .ico { width: 12px; height: 12px; color: #fff; }
.pin.fire .bubble i { background: #f29a3a; }
.pin .bubble small { display: block; font-size: 9px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pin.main .bubble { background: var(--red); color: #fff; }
.pin.main .bubble small { color: rgba(255,255,255,.8); }
.pin.main .bubble i { background: #fff; }
.pin.main .bubble i .ico { color: var(--red); }
.pin.urgent .bubble small { color: var(--red); }
.pin::after { content: ''; width: 2px; height: 14px; background: rgba(255,255,255,.9); box-shadow: 0 0 4px rgba(0,0,0,.15); }
.pin.main::after { background: var(--red); }
@keyframes pinbob { 50% { transform: translateY(-4px); } }

/* Missions. */
.mission { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.mission .nm { flex: 1; font-weight: 500; font-size: 12px; }
.mission .by { display: block; font-size: 10px; color: #b8860b; font-weight: 600; }
.bar { display: block; height: 5px; border-radius: 3px; background: #e7eaed; overflow: hidden; margin-top: 5px; }
.bar i { display: block; height: 100%; background: var(--mint); border-radius: 3px; }
.mission .btn { width: auto; padding: 8px 12px; font-size: 12px; gap: 4px; }
.mission.done .nm { color: var(--muted); }
.event-box { margin-top: 14px; padding: 12px; border-radius: 16px; color: #fff; background: linear-gradient(120deg, #7b4fc9, #e9548e); }
.event-box.snow { background: linear-gradient(120deg, #4c8fe0, #7fc4e8); }
.event-box b { display: block; font-size: 14px; }
.event-box small { opacity: .9; font-size: 11px; }
.event-box .bar { background: rgba(255,255,255,.3); }
.event-box .bar i { background: #fff; }
.event-box[hidden] { display: none; }

/* Shop: chest card. */
.chest-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #fff7e8; margin: 6px 0 4px; }
.chest-card .nm { flex: 1; font-weight: 600; }
.chest-card small { display: block; font-size: 11px; font-weight: 500; color: #8a6413; }
.chest-card .bar i { background: #f2b84e; }
.chest-card .btn { width: auto; padding: 9px 14px; }
.plot > .ico { width: 18px; height: 18px; color: var(--ink); flex: none; }

/* Residents. */
.resident { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; }
.resident .face { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; }
.resident small { display: block; color: var(--muted); font-size: 11px; }

/* Chest opening. */
.chest-reveal { align-items: center; }
.chest-art { position: relative; width: 96px; height: 80px; margin: 6px auto 4px; cursor: pointer; }
.chest-art .base { position: absolute; left: 6px; right: 6px; bottom: 0; height: 46px; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(#d99a3d, #b0712a); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.chest-art .lid { position: absolute; left: 2px; right: 2px; top: 6px; height: 34px; border-radius: 18px 18px 6px 6px;
  background: linear-gradient(#e7ad4f, #c98a2e); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3,1.6,.5,1); z-index: 1; }
.chest-art::after { content: ''; position: absolute; left: 50%; top: 32px; width: 12px; height: 14px; margin-left: -6px; border-radius: 3px;
  background: #f7e3a3; z-index: 2; }
.chest-art.shake { animation: shake .5s ease-in-out 2; }
.chest-art.open .lid { transform: translateY(-26px) rotate(-18deg); }
.chest-art.open::after { opacity: 0; }
.chest-art.open::before { content: ''; position: absolute; left: 50%; top: 30px; width: 140px; height: 140px; margin: -70px 0 0 -70px;
  background: radial-gradient(circle, rgba(255,214,120,.65), transparent 65%); animation: glow 1.4s ease-out both; }
@keyframes shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes glow { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.loot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 8px; }
.loot span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 12px; background: #f6f3ec;
  font-weight: 600; font-size: 12px; animation: pop .4s cubic-bezier(.2,.9,.3,1.5) both; }

/* Coins flying to the wallet. */
#flyer-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.flyer { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe08a, #f2b84e 60%, #c98a2e); box-shadow: 0 2px 4px rgba(0,0,0,.2); }

body[data-night] .btn.square { background: rgba(255,255,255,.9); }

/* Stats card for a level in the All levels sheet. */
.level-stats { margin: 4px 0 10px; padding: 12px; border-radius: 16px; background: #f6f7f8; }
.ls-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ls-head span { color: var(--muted); font-size: 11px; }
.ls-head .ls-stars { margin-left: auto; letter-spacing: 1px; color: #d7dbdf; }
.ls-head .ls-stars .on { color: var(--amber); }
.ls-head i { font-style: normal; }
.ls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ls-grid small { display: block; font-size: 10px; color: var(--muted); }
.ls-grid b { font-size: 14px; font-variant-numeric: tabular-nums; }

/* End-of-call cutscene: banner and tap-to-skip layer over the 3D scene. */
.cut-ui { position: absolute; inset: 0; display: none; z-index: 6; cursor: pointer; }
body[data-cut] .cut-ui { display: block; }
body[data-cut] #hud { display: none; }
.cut-banner { position: absolute; top: 18%; left: 50%; transform: translate(-50%, -16px) scale(.92); opacity: 0;
  background: #fff; padding: 14px 24px; border-radius: 18px; text-align: center; box-shadow: var(--shadow);
  transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.4); white-space: nowrap; }
.cut-banner.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cut-banner small { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.cut-banner b { font-size: 22px; color: var(--red); letter-spacing: -.01em; }
.cut-skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center;
  font-size: 11px; color: rgba(43,49,56,.55); }

/* District switcher: flick between the district being rebuilt and ones already restored. */
.chip-row { flex-wrap: wrap; }
.dswitch { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 4px; }
.dswitch[hidden] { display: none; }
.dswitch > span { min-width: 104px; text-align: center; padding: 4px 10px; border-radius: 14px; background: rgba(255,255,255,.82);
  box-shadow: 0 2px 8px rgba(0,0,0,.08); line-height: 1.1; }
.dswitch b { display: block; font-size: 12px; }
.dswitch small { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.dswitch button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.82); font-size: 18px;
  line-height: 1; color: #2b3138; box-shadow: 0 2px 8px rgba(0,0,0,.08); cursor: pointer; }

/* Coach marks: spotlight, speech bubble and animated finger (tutorials, tips, hints). */
#coach { position: absolute; inset: 0; z-index: 40; display: none; }
#coach.on { display: block; }
#coach.flat { background: rgba(15, 20, 30, .5); }
#coach.pass { pointer-events: none; }
#coach.pass.flat { background: transparent; }
.coach-spot { position: absolute; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(15, 20, 30, .5), 0 0 0 3px rgba(255,255,255,.9) inset; }
#coach.pass .coach-spot { box-shadow: 0 0 0 200vmax rgba(15, 20, 30, .32), 0 0 0 3px rgba(255,255,255,.95) inset; }
.coach-bubble { position: absolute; pointer-events: auto; background: #fff; border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); animation: coach-in .3s cubic-bezier(.2,.9,.3,1.3); }
.coach-bubble b { display: block; font-size: 14px; margin-bottom: 3px; }
.coach-bubble p { margin: 0; font-size: 12.5px; line-height: 1.4; color: #4a525c; }
.coach-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.coach-next { padding: 7px 16px; font-size: 12px; min-height: 0; width: auto; }
.coach-skip { margin-right: auto; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; padding: 4px 0; }
.coach-finger { position: absolute; left: 0; top: 0; pointer-events: none; animation: coach-swipe 1.5s ease-in-out infinite; }
.coach-finger i { display: block; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: rgba(255,255,255,.92); box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.25); }
.coach-finger.tap { animation: coach-tap 1.2s ease-in-out infinite; }
@keyframes coach-swipe {
  0% { transform: translate(var(--fx), var(--fy)) scale(1.15); opacity: 0; }
  15% { transform: translate(var(--fx), var(--fy)) scale(1); opacity: 1; }
  70% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(.9); opacity: 0; }
}
@keyframes coach-tap {
  0%, 100% { transform: translate(var(--fx), var(--fy)) scale(1); }
  50% { transform: translate(var(--fx), var(--fy)) scale(.75); }
}
@keyframes coach-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
body[data-tutorial] .hud-bottom .tool { opacity: .35; pointer-events: none; }

/* Call markers over buildings: a small round icon on a short stem, gently bobbing. */
.pin .marker { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 12px rgba(43,49,56,.25); animation: pinbob 2.2s ease-in-out infinite; }
.pin .marker .ico { width: 14px; height: 14px; color: var(--red); }
.pin.fire .marker .ico { color: #f29a3a; }
.pin.main .marker { background: var(--red); width: 32px; height: 32px; }
.pin.main .marker .ico { color: #fff; }
.pin.main.fire .marker { background: #f29a3a; }
.pin.urgent .marker { box-shadow: 0 0 0 0 rgba(229,72,77,.5), 0 4px 12px rgba(43,49,56,.25); animation: pinbob 2.2s ease-in-out infinite, ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.45), 0 4px 12px rgba(43,49,56,.25); } 100% { box-shadow: 0 0 0 10px rgba(229,72,77,0), 0 4px 12px rgba(43,49,56,.25); } }
.pin::after { height: 10px; }

/* Town call cards, stacked above the Play button. */
.call-cards { display: flex; flex-direction: column; gap: 6px; }
.call-cards:empty { display: none; }
.call-card { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; cursor: pointer; text-align: left;
  padding: 7px 12px 7px 7px; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(43,49,56,.12);
  font: 600 12px 'Inter', sans-serif; color: var(--ink); animation: coach-in .3s ease-out; }
.call-card:active { transform: scale(.98); }
.call-card i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fdecec; flex: none; }
.call-card i .ico { width: 13px; height: 13px; color: var(--red); }
.call-card.fire i { background: #fdf0e2; }
.call-card.fire i .ico { color: #f29a3a; }
.call-card .cc-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-card small { display: block; font-size: 9.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.call-card.urgent small { color: var(--red); }
.call-card .cc-go { font-size: 18px; color: #b5bcc3; line-height: 1; }