/* Your city (pages/city.js; the phone's app/games/city.tsx).
   The town floats on the theme's own background; everything on top of it is
   in the Shmangus arcade look (games/look.mjs, the --arc-* block of
   games.css): chunky stickers on a darker lip, the candy colours (lemon for
   coins, mint for building) and the arcade's rounded heavy face. */

.cty {
  /* The arcade's candy (games/look.mjs CANDY) on its lips (shade -0.28). */
  --cty-gold: var(--arc-lemon, #FFC83D); --cty-gold-2: #B8902C; --cty-gold-ink: var(--arc-cocoa, #2B2118);
  --cty-green: var(--arc-mint, #1FC98F); --cty-green-2: #169167; --cty-green-ink: #0B4D33;
  --cty-red: var(--arc-berry, #FF4F7B); --cty-card: var(--surface-solid, var(--surface));
  --cty-font: var(--arc-font, inherit);
  --cty-drop: 0 3px 0 rgba(30, 21, 48, 0.12), 0 10px 22px rgba(30, 21, 48, 0.14);
  --inv: 1;
  position: fixed; inset: 0; z-index: 1400; overflow: hidden; color: var(--ink);
  background: radial-gradient(120% 80% at 50% 38%, color-mix(in srgb, var(--accent) 10%, var(--bg)) 0%, var(--bg) 70%);
  user-select: none; -webkit-user-select: none; font-family: inherit;
}
:root[data-theme='dark'] .cty { --cty-drop: 0 3px 0 rgba(0, 0, 0, 0.35), 0 10px 22px rgba(0, 0, 0, 0.35); }
body.cty-open { overflow: hidden; }

/* ---- the town */
.cty-stage { position: absolute; inset: 0; touch-action: none; cursor: grab; outline: none; overflow: hidden; }
.cty-stage:active { cursor: grabbing; }
.cty-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cty-world.moving { will-change: transform; }
.cty-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.cty-over { position: absolute; left: 0; top: 0; width: 1360px; height: 900px; pointer-events: none; }
.cty-over > * { pointer-events: auto; }
.cty-svg g.pop { animation: cty-pop 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes cty-pop { 0% { transform: scale(0.4, 0.2); opacity: 0.3; } 60% { transform: scale(1.08, 1.12); opacity: 1; } 100% { transform: none; } }
.cty-svg g.lifted { opacity: 0.32; }
.cty-ghost { opacity: 0.82; }
.cty-ghost.bad { opacity: 0.45; }
.cty-sel { animation: cty-sel 1.2s ease-in-out infinite; }
@keyframes cty-sel { 50% { fill-opacity: 0.1; stroke-opacity: 0.4; } }

/* Coins waiting, building timers, the people: over the town, kept a tappable size at any zoom. */
.cty-bubble, .cty-timer { position: absolute; transform: translate(-50%, -100%) scale(var(--inv)); transform-origin: 50% 100%; display: inline-flex; align-items: center; gap: 4px; border: 2px solid #fff; border-radius: 999px; font-weight: 800; font-size: 12px; line-height: 1; font-family: var(--cty-font); padding: 4px 8px 4px 4px; cursor: pointer; box-shadow: var(--cty-drop); white-space: nowrap; }
.cty-bubble { z-index: 2; background: #fff; padding: 3px; border: 0; width: 30px; height: 30px; justify-content: center; animation: cty-bob 1.6s ease-in-out infinite; }
.cty-bubble .cty-coin-ico { width: 22px; height: 22px; border-width: 2px; }
.cty-bubble::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: #fff; transform: rotate(45deg); border-radius: 1px; z-index: -1; }
.cty-bubble.full { background: var(--cty-gold); }
.cty-bubble.full::after { background: var(--cty-gold); }
.cty-timer { z-index: 2; background: var(--cty-card); color: var(--ink); padding: 4px 9px 4px 6px; font-variant-numeric: tabular-nums; border-color: transparent; }
@keyframes cty-bob { 50% { translate: 0 -4px; } }
.cty-walker { z-index: 1; position: absolute; left: 0; top: 0; width: 12px; height: 16px; margin: -15px 0 0 -6px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 1.6s linear; }
.cty-walker.jump { transition: none; }
.cty-w-head { position: absolute; left: 1px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 45%, #3A2A10 0 9%, transparent 11%), radial-gradient(circle at 68% 45%, #3A2A10 0 9%, transparent 11%), #FFD23F; box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, 0.12); z-index: 1; animation: cty-step 0.5s ease-in-out infinite; }
.cty-w-body { position: absolute; left: 2px; top: 8px; width: 8px; height: 7px; border-radius: 4px 4px 3px 3px; background: var(--body, #4F8BFF); }
.cty-walker.flip .cty-w-head { transform: scaleX(-1); }
@keyframes cty-step { 50% { translate: 0 -1.2px; } }
.cty-speech { position: absolute; transform: translate(-50%, -100%) scale(var(--inv)); transform-origin: 50% 100%; background: var(--cty-card); color: var(--ink); border-radius: 12px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; max-width: 170px; width: max-content; box-shadow: var(--cty-drop); animation: cty-in 0.25s cubic-bezier(0.3, 1.6, 0.5, 1) both; pointer-events: none; }
.cty-speech::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
@keyframes cty-in { from { opacity: 0; scale: 0.7; } }

/* ---- little glyphs */
.cty-coin-ico { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; background: radial-gradient(circle at 36% 32%, #FFF6C4 0 16%, #FFD54A 18% 58%, #F2A900 60%); border: 1.5px solid #B87400; vertical-align: -3px; }
.cty-hammer, .cty-ico { display: inline-block; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; vertical-align: -2px; }
.cty-hammer { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.6 12.2 11.4l2.4 2.4L5.4 23z'/%3E%3Cpath d='M10.6 3.4 14 2l7.6 7.6-2.8 2.8-2.2-2.2-2.2 2.2-4.2-4.2 2.2-2.2z'/%3E%3C/svg%3E"); }
.cty-ico.people { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M1 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3Ccircle cx='17.5' cy='8' r='3'/%3E%3Cpath d='M18 13.2c3 .3 5 2.4 5 5.8h-4.4c-.2-2.3-1-4.3-2.6-5.6z'/%3E%3C/svg%3E"); }
.cty-ico.joy { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22zM8 8.5a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2zm8 0a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2zM6.6 14a5.6 5.6 0 0 0 10.8 0z'/%3E%3C/svg%3E"); }

/* ---- the counters at the top */
.cty-top { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
.cty-top > * { pointer-events: auto; }
.cty-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cty-round { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--cty-card); color: var(--ink); box-shadow: var(--cty-drop); cursor: pointer; font-weight: 800; font-size: 22px; line-height: 1; font-family: inherit; padding: 0; }
.cty-round.small { width: 36px; height: 36px; font-size: 20px; box-shadow: none; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cty-round svg { width: 20px; height: 20px; }
.cty-town { flex: 1 1 auto; min-width: 0; max-width: 380px; margin-right: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 0; border-radius: 18px; background: var(--cty-card); color: var(--ink); box-shadow: var(--cty-drop); padding: 7px 13px 8px; cursor: pointer; text-align: left; font-family: inherit; }
.cty-name { font-weight: 800; font-size: 15.5px; line-height: 1.15; font-family: var(--cty-font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.2px; }
.cty-level { display: flex; align-items: center; gap: 7px; width: 100%; font-size: 11.5px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; min-width: 0; }
.cty-level-t { flex: none; }
.cty-bar { flex: 1; min-width: 24px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.cty-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cty-green), #8AE6B4); transition: width 0.5s ease; }
.cty-coins { position: relative; flex: none; display: flex; align-items: center; gap: 7px; background: var(--cty-gold); color: var(--cty-gold-ink); border-radius: 18px; padding: 6px 12px 6px 9px; box-shadow: 0 3px 0 var(--cty-gold-2), var(--cty-drop); min-height: 30px; }
.cty-coins .cty-coin-ico { width: 22px; height: 22px; border-width: 2px; }
.cty-coins-words { display: flex; flex-direction: column; line-height: 1.05; }
.cty-coins-n { font-size: 16.5px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.3px;  font-family: var(--cty-font);}
.cty-coins-inc { font-size: 10.5px; font-weight: 800; opacity: 0.8; font-variant-numeric: tabular-nums; }
.cty-coins.bump { animation: cty-bump 0.45s cubic-bezier(0.3, 1.7, 0.5, 1); }
@keyframes cty-bump { 40% { transform: scale(1.12); } }
.cty-plus { position: absolute; right: 8px; top: 100%; font-weight: 900; font-size: 14px; color: var(--cty-gold-ink); background: var(--cty-gold); border-radius: 999px; padding: 2px 7px; animation: cty-up 0.9s ease-out both; pointer-events: none; }
@keyframes cty-up { from { opacity: 0; transform: translateY(-4px); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(16px); } }
.cty-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cty-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--cty-card); color: var(--ink); font-size: 12.5px; font-weight: 800; box-shadow: var(--cty-drop); font-variant-numeric: tabular-nums; border: 0; font-family: var(--cty-font); }
.cty-chip.btn { cursor: pointer; }
.cty-chip .cty-ico.people { color: #4F8BFF; }
.cty-chip .cty-ico.joy { color: #FF9F1C; }
.cty-chip.sync { color: var(--ink-muted); font-weight: 700; }

/* ---- the mayor */
.cty-mayor { position: absolute; left: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 6px; max-width: min(380px, calc(100% - 20px)); }
.cty-mayor-face { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--cty-card); box-shadow: var(--cty-drop); cursor: pointer; }
.cty-say { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--cty-card); border-radius: 16px 16px 16px 5px; padding: 8px 10px 8px 12px; box-shadow: var(--cty-drop); margin-bottom: 8px; }
.cty-say-words { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 2px; border: 0; background: none; padding: 0; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.cty-say-t { font-size: 13.5px; font-weight: 800; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  font-family: var(--cty-font);}
.cty-say-s { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cty-reward { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--ink); }
.cty-reward .cty-coin-ico { width: 13px; height: 13px; border-width: 1.2px; vertical-align: -2px; }
.cty-claim { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 12px; background: var(--cty-green); color: var(--cty-green-ink); font-weight: 800; font-size: 13.5px; line-height: 1; font-family: var(--cty-font); padding: 0 12px; min-height: 36px; box-shadow: 0 3px 0 var(--cty-green-2); cursor: pointer; white-space: nowrap; }
.cty-claim:active, .cty-btn:active, .cty-yes:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.cty-claim.short { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-muted); box-shadow: none; }

/* ---- the bottom */
.cty-bottom { position: absolute; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: flex-end; gap: 8px; pointer-events: none; }
.cty-bottom > * { pointer-events: auto; }
.cty-zoom { display: flex; gap: 6px; margin-right: auto; }
@media (pointer: coarse) { .cty-zoom { display: none; } }
.cty-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 18px; border: 0; padding: 0 20px; font-weight: 900; font-size: 17px; line-height: 1; font-family: var(--cty-font); cursor: pointer; white-space: nowrap; letter-spacing: -0.2px; }
.cty-btn.build { background: var(--cty-green); color: var(--cty-green-ink); box-shadow: 0 5px 0 var(--cty-green-2), var(--cty-drop); min-width: 120px; }
.cty-btn.gold { background: var(--cty-gold); color: var(--cty-gold-ink); box-shadow: 0 5px 0 var(--cty-gold-2), var(--cty-drop); }
.cty-btn .cty-coin-ico { width: 20px; height: 20px; }
.cty-btn-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, 0.55); }
.cty-btn-ico svg { width: 18px; height: 18px; }
.cty.tray-open .cty-bottom, .cty.tray-open .cty-mayor, .cty.sheet-open .cty-bottom, .cty.sheet-open .cty-mayor, .cty.founding .cty-bottom, .cty.founding .cty-mayor, .cty.founding .cty-town, .cty.founding .cty-coins, .cty.founding .cty-chips { display: none; }
/* While a building is being placed, the coins and timers step aside for the ghost and its buttons. */
.cty.placing .cty-bubble, .cty.placing .cty-timer { display: none; }

/* ---- the tray */
.cty-tray, .cty-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto; background: var(--cty-card); color: var(--ink); border-radius: 24px 24px 0 0; box-shadow: 0 -6px 30px rgba(30, 21, 48, 0.2); padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); box-sizing: border-box; animation: cty-rise 0.28s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
@keyframes cty-rise { from { transform: translateY(40px); opacity: 0; } }
.cty-tray-head { display: flex; align-items: center; gap: 8px; }
.cty-tray-x { position: absolute; right: 12px; top: -52px; }
.cty-tabs { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cty-tabs::-webkit-scrollbar { display: none; }
.cty-tab { flex: 1 1 0; min-width: 40px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--ink-muted); padding: 5px 1px 4px; border-radius: 12px; font-weight: 700; font-size: 10.5px; line-height: 1.1; letter-spacing: -0.1px; font-family: var(--cty-font); cursor: pointer; white-space: nowrap; }
.cty-tab.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
.cty-rail { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.cty-rail::-webkit-scrollbar { display: none; }
.cty-card-k { flex: none; scroll-snap-align: start; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; border-radius: 18px; padding: 6px 4px 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); cursor: pointer; font-family: inherit; box-shadow: inset 0 0 0 2px transparent; transition: transform 0.15s; }
.cty-card-k:active { transform: scale(0.96); }
.cty-card-k.on { background: color-mix(in srgb, var(--cty-green) 22%, transparent); box-shadow: inset 0 0 0 3px var(--cty-green-2); }
.cty-card-k.locked { cursor: default; }
.cty-card-k.locked .cty-k-art { opacity: 0.4; filter: grayscale(1); }
.cty-k-art { display: grid; place-items: center; width: 64px; height: 64px; }
.cty-k-name { font-size: 12.5px; font-weight: 800; text-align: center; line-height: 1.15; max-width: 90px;  font-family: var(--cty-font);}
.cty-k-sub { font-size: 11.5px; color: var(--ink-muted); text-align: center; }
.cty-k-lock { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--ink-muted); }
.cty-k-lock svg { width: 12px; height: 12px; }
.cty-price { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; background: var(--cty-gold); color: var(--cty-gold-ink); font-weight: 800; font-size: 12px; line-height: 1; font-family: var(--cty-font); padding: 3px 8px 3px 4px; font-variant-numeric: tabular-nums; cursor: inherit; }
.cty-price .cty-coin-ico { width: 13px; height: 13px; border-width: 1.2px; }
.cty-price.short { background: color-mix(in srgb, var(--danger, #E5484D) 16%, transparent); color: var(--danger, #C53030); }
button.cty-price { cursor: pointer; padding: 6px 12px 6px 6px; font-size: 13px; box-shadow: 0 2px 0 var(--cty-gold-2); }
.cty-hint { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); text-align: center; padding-top: 4px; }

/* ---- placing: the chips and the yes / no beside the ghost */
.cty-place { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 3; pointer-events: none; max-width: 300px; }
.cty-place.up { transform: translate(-50%, -100%); flex-direction: column-reverse; }
.cty-place > * { pointer-events: auto; }
.cty-chiprow { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 280px; }
.cty-fx { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 9px; background: var(--cty-card); color: var(--ink); box-shadow: var(--cty-drop); white-space: nowrap; }
.cty-fx.good { background: #DFF9EA; color: #0B5A30; }
.cty-fx.bad { background: #FFE3E6; color: #A31B2E; }
.cty-place-btns { display: flex; gap: 10px; align-items: center; }
.cty-no { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--cty-red); color: #fff; box-shadow: 0 4px 0 #B83959, var(--cty-drop); cursor: pointer; padding: 0; }
.cty-no svg, .cty-yes svg { width: 20px; height: 20px; }
.cty-yes { display: inline-flex; align-items: center; gap: 6px; height: 48px; border-radius: 24px; border: 0; padding: 0 18px 0 14px; background: var(--cty-green); color: var(--cty-green-ink); font-weight: 900; font-size: 16px; line-height: 1; font-family: var(--cty-font); box-shadow: 0 4px 0 var(--cty-green-2), var(--cty-drop); cursor: pointer; font-variant-numeric: tabular-nums; }

/* ---- a building's card */
.cty-sheet-head { display: flex; align-items: flex-start; gap: 12px; }
.cty-sheet-art { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cty-sheet-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.cty-sheet-title { font-weight: 900; font-size: 19px; line-height: 1.15; font-family: var(--cty-font); letter-spacing: -0.3px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cty-stars { font-size: 14px; color: #F2A900; letter-spacing: 1px; }
.cty-sheet-line { font-size: 13.5px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cty-sheet-warn { font-size: 13px; font-weight: 800; color: var(--danger, #C53030); }
.cty-busy { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cty-busy b { color: var(--ink); }
.cty-busy-bar { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.cty-busy-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FFB23D, var(--cty-gold)); border-radius: 4px; transition: width 1s linear; }
.cty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cty-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 14px; border: 0; padding: 0 14px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); font-weight: 800; font-size: 14.5px; line-height: 1; font-family: var(--cty-font); cursor: pointer; white-space: nowrap; }
.cty-act.cty-main { background: var(--cty-green); color: var(--cty-green-ink); box-shadow: 0 3px 0 var(--cty-green-2); flex: 1 1 0; min-width: 0; }
.cty-act.cty-main.short .cty-act-price { background: color-mix(in srgb, var(--danger, #E5484D) 16%, transparent); color: var(--danger, #C53030); }
@media (max-width: 380px) { .cty-act-time { display: none; } .cty-act.cty-main { flex-basis: 100%; } }
.cty-act.gold { background: var(--cty-gold); color: var(--cty-gold-ink); box-shadow: 0 3px 0 var(--cty-gold-2); }
.cty-act.danger { color: var(--danger, #C53030); }
.cty-act.cty-main.short { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-muted); box-shadow: none; }
.cty-act-price { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.85); color: var(--arc-cocoa, #2B2118); border-radius: 999px; padding: 3px 8px 3px 4px; font-size: 13px; }
.cty-act-price .cty-coin-ico { width: 14px; height: 14px; }
.cty-act-time { font-weight: 700; opacity: 0.75; }

/* ---- undo */
.cty-undo { position: absolute; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 6px 6px 6px 16px; font-size: 14px; font-weight: 700; box-shadow: var(--cty-drop); white-space: nowrap; animation: cty-rise 0.25s ease both; z-index: 4; }
.cty-undo-btn { border: 0; border-radius: 999px; background: var(--cty-gold); color: var(--cty-gold-ink); font-weight: 800; font-size: 14px; line-height: 1; font-family: var(--cty-font); padding: 9px 14px; cursor: pointer; }
.cty:not(.tray-open):not(.sheet-open) .cty-undo { bottom: calc(144px + env(safe-area-inset-bottom)); }
/* Over the tray, at its top-left corner (pages/city.js sets the height): clear of its tabs and its ✕. */
.cty.tray-open .cty-undo { left: 12px; transform: none; bottom: var(--tray-h, 240px); margin-bottom: 12px; }

/* ---- sheets in the middle */
.cty-modal { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(20, 14, 34, 0.38); padding: 16px; box-sizing: border-box; }
.cty-modal-card { width: min(100%, 380px); max-height: calc(100% - 24px); overflow: auto; background: var(--cty-card); color: var(--ink); border-radius: 24px; padding: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); animation: cty-in 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) both; box-sizing: border-box; }
.cty-modal[data-kind='found'] { background: none; pointer-events: none; align-items: flex-end; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.cty-modal[data-kind='found'] .cty-modal-card { pointer-events: auto; }
.cty-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cty-modal-head b { font-weight: 900; font-size: 19px; line-height: 1.2; font-family: var(--cty-font); }
.cty-goals { display: flex; flex-direction: column; gap: 4px; }
.cty-goal { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.cty-goal:first-of-type { border-top: 0; }
.cty-goal-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cty-goal-t { font-size: 14.5px; font-weight: 800;  font-family: var(--cty-font);}
.cty-goal-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.cty-goal-bar i { display: block; height: 100%; background: var(--cty-green); border-radius: 3px; }
.cty-goal-n { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cty-quiet { font-size: 14px; color: var(--ink-muted); padding: 12px 0; }
.cty-ask { display: flex; flex-direction: column; gap: 10px; }
.cty-ask > b { font-weight: 900; font-size: 18px; line-height: 1.2; font-family: var(--cty-font); }
.cty-ask > span { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.cty-ask-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.cty-input { width: 100%; box-sizing: border-box; min-height: 46px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg); color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1; font-family: inherit; padding: 0 12px; outline: none; }
.cty-input:focus { border-color: var(--cty-green-2); }
.cty-levelup { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 6px 4px 2px; }
.cty-levelup-t { font-weight: 900; font-size: 30px; line-height: 1.1; font-family: var(--cty-font); letter-spacing: -0.6px; }
.cty-levelup-s { font-size: 14px; font-weight: 700; color: var(--ink-muted); }
.cty-levelup .cty-act { margin-top: 8px; min-width: 140px; }
.cty-confetti { position: absolute; inset: -16px; pointer-events: none; overflow: visible; }
.cty-confetti i { position: absolute; left: calc(8% + var(--i) * 6.4%); top: 30%; width: 8px; height: 12px; border-radius: 2px; background: hsl(calc(var(--i) * 47deg) 90% 62%); animation: cty-conf 1.4s cubic-bezier(0.2, 0.7, 0.4, 1) both; animation-delay: calc(var(--i) * 25ms); }
@keyframes cty-conf { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(-120px) rotate(calc(var(--i) * 70deg)); opacity: 0; } }
.cty-found { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cty-found-t { font-weight: 900; font-size: 22px; line-height: 1.15; font-family: var(--cty-font); letter-spacing: -0.4px; }
.cty-found-row { display: flex; gap: 8px; width: 100%; align-items: center; }
.cty-found .cty-act { width: 100%; }

/* ---- coins flying to the counter */
.cty-fly { position: absolute; z-index: 7; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; box-sizing: border-box; background: radial-gradient(circle at 36% 32%, #FFF6C4 0 16%, #FFD54A 18% 58%, #F2A900 60%); border: 1.5px solid #B87400; transition: transform 0.65s cubic-bezier(0.5, -0.4, 0.6, 1), opacity 0.65s ease-in; pointer-events: none; }

/* ---- the card on the Games page: a candy sticker beside Worlds' (games.css .wld-card), in the city's own colour (look.mjs GAME_COLOR.city) */
.cty-card { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; border-radius: 22px; padding: 10px 14px 10px 10px; margin-bottom: 5px; cursor: pointer; text-align: left; font: inherit; background: var(--arc-lime, #8BD346); color: var(--arc-cocoa, #2B2118); box-shadow: 0 5px 0 #649832; box-sizing: border-box; transition: transform 140ms var(--arc-spring, ease); }
.cty-card:hover { transform: translateY(-2px); }
.cty-card:active { transform: translateY(5px); box-shadow: 0 0 0 #649832; }
.cty-card:focus-visible { outline: 3px solid var(--ink-muted); outline-offset: 2px; }
.cty-card-art { flex: none; width: 96px; height: 72px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #A8DCFF 0%, #DDF2FF 100%); }
:root[data-theme='dark'] .cty-card-art { background: linear-gradient(180deg, #24305C 0%, #3A4A86 100%); }
.cty-card-art svg { width: 96px; height: 96px; }
.cty-card-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cty-card-title { font-weight: 900; font-size: 22px; line-height: 1.15; font-family: var(--cty-font); letter-spacing: -0.2px; overflow-wrap: anywhere; }
.cty-card-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 13.5px; font-weight: 700; color: #3B4A1C; min-width: 0; }
.cty-card-sub.ready { color: var(--arc-cocoa, #2B2118); font-weight: 800; }
.cty-go { flex: none; margin-left: auto; padding: 7px 16px 6px; border-radius: 999px; background: #FFFFFF; color: #3B6A12; font-weight: 900; font-size: 15px; line-height: 1.2; font-family: var(--cty-font); box-shadow: 0 3px 0 #CDE8AE; margin-bottom: 3px; }
@media (max-width: 420px) { .cty-card { gap: 10px; } .cty-card-art { width: 76px; height: 64px; } .cty-card-art svg { width: 80px; height: 80px; } .cty-card-title { font-size: 18px; } .cty-card-sub.lvl { display: none; } .cty-go { padding: 7px 12px 6px; } }

@media (prefers-reduced-motion: reduce) {
  .cty-bubble, .cty-w-head, .cty-sel, .cty-svg g.pop, .cty-confetti i { animation: none; }
  .cty-walker { transition: none; }
}
.cty-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 40; flex: none; }
.cty-k-lock .cty-i { width: 12px; height: 12px; stroke-width: 48; }
.cty-btn-ico .cty-i { width: 18px; height: 18px; stroke-width: 56; }
.cty-yes .cty-i, .cty-no .cty-i { width: 20px; height: 20px; stroke-width: 56; }
.cty.far .cty-bubble, .cty.far .cty-timer { display: none; }