:root {
  --ink: #49362d;
  --ink-soft: #795b49;
  --ivory: #fff8e9;
  --cream: #f7e4bf;
  --paper: #fffdf5;
  --teal: #1d8590;
  --teal-dark: #176270;
  --sea: #4daeba;
  --sky: #9ed9df;
  --terracotta: #c6674d;
  --terracotta-dark: #8e4336;
  --honey: #efb94f;
  --leaf: #6da263;
  --rose: #c85e77;
  --line: #a66f50;
  --shadow: #704634;
  --nav-h: 72px;
  --hud-h: 66px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
  font-family: "Gowun Dodum", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  min-height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  display: flex;
  justify-content: center;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 10%, #317f88 0 14rem, transparent 32rem),
    #124b56;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

button:disabled {
  cursor: not-allowed;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #1a6e78;
}


#game {
  position: relative;
  width: min(100%, 480px);
  height: 100vh;
  height: 100dvh;
  min-height: 568px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
  box-shadow: 0 0 45px #082b32aa;
}

/* Compact resource bar */
.hud {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: .75fr 1.15fr 1fr .86fr 35px;
  align-items: center;
  gap: 4px;
  height: calc(var(--hud-h) + var(--safe-top));
  padding: calc(7px + var(--safe-top)) 8px 7px;
  background:
    linear-gradient(180deg, #bfe9e8 0%, #72bec7 72%, #52a0ac 100%);
  border-bottom: 3px solid #287986;
  box-shadow: 0 3px 0 #ffffff77 inset, 0 4px 10px #23545b40;
}

.hud::before {
  content: "";
  position: absolute;
  inset: auto 0 -3px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #f5d993 0 9px, #d9a75e 9px 18px);
}

.level-chip,
.resource-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 34px;
  padding: 0 5px 0 22px;
  border: 2px solid #9a684b;
  border-radius: 17px;
  background: linear-gradient(#fffdf6, #f8e4bc);
  box-shadow: 0 2px 0 #754834, 0 2px 0 #fff inset;
  white-space: nowrap;
}

.level-chip {
  padding-left: 20px;
  color: #fff;
  background: linear-gradient(#368f9a, #206b78);
  border-color: #174f5a;
}

.hud-mark {
  position: absolute;
  left: -2px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
}

.level-mark {
  color: #563d30;
  border: 2px solid #7e5137;
  border-radius: 50%;
  background: #f3c654;
  font: 700 8px/1 "Arial Rounded MT Bold", sans-serif;
  transform: rotate(-7deg);
}

.energy-mark {
  width: 13px;
  height: 22px;
  margin-left: 7px;
  background: #f5ca45;
  clip-path: polygon(54% 0, 8% 57%, 45% 57%, 28% 100%, 94% 42%, 57% 42%);
  filter: drop-shadow(0 1px 0 #80562f);
}

.coin-mark {
  left: 0;
  width: 23px;
  height: 23px;
  border: 2px solid #8d592d;
  border-radius: 50%;
  background: #efbc45;
  box-shadow: inset 0 0 0 3px #ffd875;
}

.coin-mark::after {
  content: "";
  width: 4px;
  height: 11px;
  border-radius: 2px;
  background: #c57f2b;
}

.gem-mark {
  left: 1px;
  width: 21px;
  height: 22px;
  background: linear-gradient(135deg, #ecacc0, #b85778);
  clip-path: polygon(22% 3%, 78% 3%, 100% 36%, 50% 100%, 0 36%);
  filter: drop-shadow(0 1px 0 #713a52);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.level-chip strong,
.resource-chip strong {
  overflow: hidden;
  font-family: "Jua", sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-overflow: ellipsis;
}

.resource-max {
  margin-left: 1px;
  color: var(--ink-soft);
  font-size: 8px;
}

#energy-timer {
  position: absolute;
  left: 24px;
  bottom: -13px;
  padding: 1px 5px;
  color: #fff;
  border-radius: 7px;
  background: #276672;
  font: 8px/1.2 ui-monospace, monospace;
  letter-spacing: -.3px;
}

.sound-toggle {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  padding: 7px;
  border: 2px solid #174f5a;
  border-radius: 50%;
  color: #fdf4dc;
  background: linear-gradient(#347f8b, #1c5c68);
  box-shadow: 0 2px 0 #123f48, 0 2px #ffffff55 inset;
  font-size: 0;
}

.sound-toggle::before {
  content: "";
  width: 17px;
  height: 18px;
  background: currentColor;
  clip-path: polygon(0 35%, 35% 35%, 100% 0, 100% 100%, 35% 65%, 0 65%);
}

.sound-toggle::after {
  content: "";
  position: absolute;
  right: 4px;
  width: 7px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left: 0;
  border-radius: 0 50% 50% 0;
}

.sound-toggle[aria-pressed="true"] {
  color: #fff4a8;
  background: linear-gradient(#d27a5b, #9f4c3d);
  border-color: #74382e;
}

#game.is-title .hud,
#game.is-title .app-nav {
  visibility: hidden;
}

.save-status {
  position: absolute;
  right: 9px;
  bottom: -15px;
  max-width: 120px;
  overflow: hidden;
  padding: 2px 7px;
  border-radius: 0 0 8px 8px;
  color: #f9eed6;
  background: #245e68e8;
  font-size: 8px;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shared screens */
.screen {
  display: none;
  height: calc(100dvh - var(--hud-h) - var(--safe-top));
  min-height: calc(568px - var(--hud-h));
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px);
  scrollbar-width: none;
}

.screen::-webkit-scrollbar {
  display: none;
}

.screen.active {
  display: block;
}

.screen-heading,
.town-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.screen-heading h2,
.town-titlebar h2,
.collection-banner h2 {
  margin: 0;
  font: 400 21px/1 "Jua", sans-serif;
  letter-spacing: .02em;
}

.eyebrow,
.dialog-kicker,
.title-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--terracotta-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
}

.primary-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid #8c4b30;
  border-radius: 16px;
  color: #fffdf1;
  background: linear-gradient(180deg, #efbd54 0%, #e39339 100%);
  box-shadow: 0 4px 0 #9b552d, 0 2px 0 #fff7b2 inset, 0 8px 15px #72402f33;
  font-family: "Jua", sans-serif;
  font-size: 17px;
  text-shadow: 0 1px #8c4c2a;
}

.primary-button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #9b552d, 0 1px 0 #fff7b2 inset;
}

/* Title */
.title-screen {
  position: absolute;
  z-index: 40;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(#b9e5e5 0 25%, #71bfc6 49%, #2d8692 100%);
}

.title-screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-town {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, transparent 58%, #15424b66 100%),
    url("./assets/title.webp?v=4") center / cover no-repeat,
    linear-gradient(#b9e5e5, #2d8692);
}

.title-screen::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #21535c16 0%, transparent 44%, #173e48cc 91%, #173e48f2 100%);
}

.title-copy {
  position: relative;
  z-index: 2;
  width: 90%;
  margin-top: max(50px, calc(var(--safe-top) + 38px));
  text-align: center;
  text-shadow: 0 2px 5px #21476388;
}


.title-copy h1 {
  margin: 0 auto;
  width: min(88%, 310px);
  line-height: 0;
}

.title-copy h1 img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 2px #42647766);
}

.title-copy p {
  width: min(92%, 360px);
  margin: 10px auto 0;
  color: #fff9e6;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.title-actions {
  position: relative;
  z-index: 3;
  width: min(82%, 350px);
  margin-top: auto;
  margin-bottom: max(21px, calc(var(--safe-bottom) + 12px));
  text-align: center;
}

.start-button {
  width: 100%;
  min-height: 58px;
  border-radius: 22px;
  font-size: 22px;
}

.start-button::before,
.start-button::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 7px;
  border-radius: 50%;
  border-left: 2px solid #fff5bd99;
}

.start-button::before { left: 9px; }
.start-button::after { right: 9px; transform: rotate(180deg); }

.button-arrow {
  width: 13px;
  height: 13px;
  margin-left: 10px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

#sound-hint {
  margin: 11px 0 5px;
  color: #fff5dc;
  font-size: 10px;
  text-shadow: 0 1px 3px #173e48;
}

.credit {
  color: #d8e5dd;
  font-size: 9px;
  letter-spacing: .04em;
}

/* Merge screen */
.merge-screen {
  position: relative;
  padding-top: 8px;
  background:
    radial-gradient(circle at 7% 14%, #fff8dc 0 2px, transparent 3px),
    radial-gradient(circle at 95% 45%, #d89c6c55 0 3px, transparent 4px),
    linear-gradient(180deg, #f7e4bf 0%, #f3d9ae 100%);
  background-size: 35px 31px, 41px 37px, auto;
}

.merge-heading {
  height: 39px;
  padding: 0 10px 2px 14px;
}

.merge-heading h2 {
  font-size: 18px;
}

.orders-shortcut {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 4px 10px 4px 7px;
  border: 2px solid #8f5941;
  border-radius: 14px;
  color: #6a4030;
  background: linear-gradient(#fff9e9, #edd09b);
  box-shadow: 0 3px 0 #9c6849, 0 2px #fff inset;
  font-family: "Jua", sans-serif;
  font-size: 12px;
}

.paper-mark {
  position: relative;
  width: 17px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 2px;
  background: #fff8df;
}

.paper-mark::before,
.paper-mark::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 7px;
  border-top: 1px solid currentColor;
}

.paper-mark::before { top: 6px; }
.paper-mark::after { top: 11px; }

.order-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-height: 100px;
  padding: 4px 8px 7px;
}


.order-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 27px 16px 13px 25px;
  gap: 1px 4px;
  min-width: 0;
  min-height: 99px;
  overflow: hidden;
  padding: 5px 5px 4px;
  border: 2px solid #b87d58;
  border-radius: 14px;
  background: linear-gradient(150deg, #fffdf5, #f7e7c5);
  box-shadow: 0 3px 0 #966044, 0 2px #fff inset, 0 6px 8px #855a4530;
}

.order-card::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--order-color, #72a89d);
  opacity: .35;
}

.customer {
  z-index: 1;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
  min-width: 0;
  color: #684434;
  font: 400 9px/1 "Jua", sans-serif;
}

.customer img {
  width: 25px;
  height: 25px;
  margin-right: 4px;
  object-fit: contain;
  border: 1px solid #ad7552;
  border-radius: 50%;
  background: #efd7ae;
}

.customer span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-item {
  display: grid;
  grid-column: 1;
  grid-row: 2 / 4;
  width: 32px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  color: var(--chain-color, #3d8f92);
  border: 1px solid #d0ad79;
  border-radius: 9px;
  background: #fff8e4;
}

.order-item img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.order-name {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  font: 400 9px/1.2 "Jua", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-count,
.order-reward {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.order-count {
  grid-column: 2;
  grid-row: 3;
  color: var(--ink-soft);
  font-size: 8px;
  text-align: left;
}

.order-reward {
  grid-column: 1;
  grid-row: 4;
  align-self: center;
  color: #8c5a28;
  font-family: "Jua", sans-serif;
  font-size: 8px;
}

.order-card button,
.order-card .deliver {
  grid-column: 2;
  grid-row: 4;
  min-width: 0;
  min-height: 23px;
  overflow: hidden;
  padding: 2px 4px;
  border: 1px solid #77705a;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(#96a58a, #768272);
  box-shadow: 0 2px 0 #5d5d4e;
  font-family: "Jua", sans-serif;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-card.ready {
  border-color: #4b8d62;
  background: linear-gradient(150deg, #fffef1, #e1f0ce);
  box-shadow: 0 3px 0 #477451, 0 0 0 2px #d7f1a9 inset, 0 6px 9px #47745130;
}

.order-card.ready button,
.order-card.ready .deliver {
  border-color: #337044;
  background: linear-gradient(#7bc86c, #4e9a57);
  box-shadow: 0 2px 0 #30633c, 0 1px #dff9bd inset;
}



.board-wrap {
  position: relative;
  margin: 0 7px;
  padding: 5px;
  border: 3px solid #ba956f;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff3da, #e5d0b0);
  box-shadow: 0 3px 0 #987c5d, 0 2px 0 #fff9e8 inset, 0 6px 14px #70463425;
}


#board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(2px, .75vw, 4px);
  width: 100%;
  padding: clamp(4px, 1.4vw, 7px);
  border: 1px solid #d9c4a7;
  border-radius: 11px;
  background: #f6ead5;
  box-shadow: 0 2px 3px #bfa98544 inset;
  touch-action: none;
  user-select: none;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 2px;
  overflow: visible;
  border: 1px solid #e6d8c1;
  border-radius: clamp(5px, 1.5vw, 8px);
  background: linear-gradient(145deg, #e9dfcb, #e0d4bd);
  box-shadow: 1px 1px 0 #fff9e9 inset, -1px -1px 0 #d9c8ac inset;
  touch-action: none;
}

.cell:nth-child(12n + 2),
.cell:nth-child(12n + 4),
.cell:nth-child(12n + 6),
.cell:nth-child(12n + 7),
.cell:nth-child(12n + 9),
.cell:nth-child(12n + 11) {
  background: linear-gradient(145deg, #e7dcc6, #ded0b7);
}

.cell .item {
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(36px, 11vw, 48px);
  height: clamp(36px, 11vw, 48px);
  place-items: center;
  color: var(--chain-color, #3d8f92);
  filter: drop-shadow(0 2px 1px #4d423440);
  font: 400 9px/1 "Jua", sans-serif;
  pointer-events: none;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.item-level {
  position: absolute;
  z-index: 2;
  right: -2px;
  bottom: -1px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  padding: 0 3px;
  border: 1px solid #c4ac85;
  border-radius: 8px;
  color: #685239;
  background: #f5e8cbd9;
  box-shadow: 0 1px 0 #e0ceb0;
  font: 400 9px/1 "Jua", sans-serif;
}

.cell.selected,
.cell.sel {
  z-index: 3;
  border-color: #c27b29;
  background: #fff0a6;
  box-shadow: 0 0 0 3px #ffd35d, 0 0 12px #fff3a0;
  transform: scale(.94);
}

.cell.drop-target {
  z-index: 2;
  border-color: #3f8a57;
  background: #dff0b9;
  box-shadow: 0 0 0 3px #83c565 inset, 0 0 9px #e9ffc5;
}

.supply-dock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 9px 7px 0;
}

.supply-button {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 2px solid #a16b4c;
  border-radius: 15px;
  color: var(--ink);
  background: linear-gradient(#fff7e5, #edd4aa);
  box-shadow: 0 3px 0 #8c5b43, 0 2px #fff inset;
  text-align: left;
}

.supply-button b { display: block; font: 400 13px/1.2 "Jua", sans-serif; }
.supply-button small { display: block; margin-top: 3px; font-size: 8px; }
.supply-portrait img { width: 35px; height: 35px; object-fit: contain; }
.supply-help-mark { padding: 2px 10px; border-radius: 50%; color: #fff4cf; background: #3b8b86; font: 24px "Jua", sans-serif; }
.help-button.urgent { border-color: #b65b37; background: linear-gradient(#ffe8b4, #f2bd77); }

.generators {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  min-height: 58px;
}

.generator {
  position: relative;
  display: grid;
  grid-template-rows: 34px auto auto;
  place-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 3px 2px 2px;
  border: 1px solid #8d5b42;
  border-radius: 11px;
  color: var(--ink);
  background: linear-gradient(#fffdf3, #efcfa2);
  box-shadow: 0 2px 0 #925f44, 0 2px #fff inset;
}

.generator::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed #d6aa71;
  border-radius: 8px;
  pointer-events: none;
}

.generator-icon {
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--chain-color, #368c91);
  font: 400 8px/1 "Jua", sans-serif;
}

.generator-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.generator-name,
.generator-status {
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generator-name {
  font-family: "Jua", sans-serif;
  font-size: 8px;
}

.generator-status {
  color: #766150;
  font-size: 7px;
}

.generator:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: none;
}

.generator:disabled {
  color: #7b756d;
  background: #d9d3c3;
  filter: saturate(.45);
}


.board-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  margin: 7px 8px 2px;
}

.board-actions { display: flex; gap: 4px; }
.board-actions .reserve-button { min-width: 0; min-height: 34px; max-width: 108px; padding: 4px 6px; font-size: 9px; }
.board-actions [hidden], #repair-preview[hidden], #reno-help[hidden] { display: none; }

.cell.obstacle {
  border-color: #68462f;
  background: repeating-linear-gradient(0deg, #c99459 0 13px, #92633d 13px 16px);
  box-shadow: 0 3px #68462f, 0 0 0 2px #eac393 inset;
}
.cell.obstacle .item { opacity: .8; filter: sepia(.35); }
.crate-lock, .producer-count, .rarity-label {
  position: absolute;
  z-index: 3;
  padding: 1px 3px;
  border-radius: 4px;
  color: #fff5d5;
  background: #72513a;
  font: 700 7px/1.3 sans-serif;
}
.crate-lock { right: 3px; bottom: 4px; left: 3px; }
.producer-count { bottom: 3px; left: 2px; background: #246d72; }
.rarity-label { top: 2px; right: 2px; color: #67410d; background: #ffdb5d; }
.cell.rare { border-color: #d69c26; box-shadow: 0 3px #b07820, 0 0 9px #ffdc63, 0 0 0 2px #ffe993 inset; }
.shop-product.rare { filter: drop-shadow(0 0 4px #e8ac2b); }

.reserve-button {
  min-width: 80px;
  min-height: 44px;
  padding: 5px 8px;
  border: 2px solid #a4744f;
  border-radius: 12px;
  color: #563d29;
  background: linear-gradient(#fff0be, #dfb976);
  box-shadow: 0 2px #936344, 0 1px #fff7e4 inset;
  font-size: 11px;
  font-weight: 700;
}

.reserve-button:disabled {
  color: #8b806d;
  background: #e7dcc6;
  box-shadow: none;
}

.board-tools .game-message {
  margin: 0;
  padding: 5px 7px;
  text-align: left;
}

.game-message {
  min-height: 27px;
  margin: 7px 14px 2px;
  padding: 6px 12px;
  border: 1px solid #c59c70;
  border-radius: 13px;
  color: #694b3a;
  background: #fff8e6cc;
  box-shadow: 0 1px 0 #fff inset;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

/* Illustrated town map */
.town-screen {
  position: relative;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
  background: #60aeb8;
}

.town-titlebar {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 9px;
  right: 9px;
  min-height: 54px;
  padding: 7px 9px 7px 14px;
  border: 2px solid #9b6447;
  border-radius: 18px;
  background: #fff8e9e8;
  box-shadow: 0 4px 0 #7b4e39, 0 2px #fff inset, 0 7px 14px #1e505555;
  backdrop-filter: blur(4px);
}

.town-progress-wrap {
  display: grid;
  grid-template-columns: 27px auto;
  grid-template-rows: 19px 11px;
  min-width: 95px;
  padding: 3px 7px;
  border-left: 1px solid #d8b481;
}

.house-mark {
  position: relative;
  grid-row: 1 / 3;
  width: 22px;
  height: 18px;
  margin-top: 6px;
  border: 2px solid #814d35;
  border-radius: 2px;
  background: #efc168;
}

.house-mark::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-top: 2px solid #814d35;
  border-left: 2px solid #814d35;
  background: #c96b50;
  transform: rotate(45deg);
}

.house-mark::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 3px;
  bottom: 0;
  width: 5px;
  height: 9px;
  background: #82513b;
}

.town-progress-wrap strong {
  align-self: end;
  max-width: 104px;
  overflow: hidden;
  font: 400 10px/1.1 "Jua", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.town-progress-wrap small {
  color: var(--ink-soft);
  font-size: 8px;
}

.town-map {
  position: relative;
  min-height: 100%;
  height: max(100%, 960px);
  overflow: hidden;
  background: #69b8c1;
}

.town-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, transparent 70%, #1557631f),
    url("./assets/town.webp?v=4") center / cover no-repeat,
    #69b8c1;
}

.map-buildings {
  position: absolute;
  z-index: 4;
  inset: 0;
}

.building {
  --building-size: 90px;
  position: absolute;
  display: grid;
  grid-template-columns: var(--building-size) minmax(80px, 1fr);
  grid-template-rows: auto auto;
  width: calc(var(--building-size) + 105px);
  min-height: calc(var(--building-size) + 12px);
  padding: 6px;
  border: 2px solid #85513b;
  border-radius: 17px;
  color: var(--ink);
  background: linear-gradient(150deg, #fff8e6ee, #ebcd9ee8);
  box-shadow: 0 4px 0 #734633, 0 2px #fff inset, 0 8px 13px #174a4f55;
  backdrop-filter: blur(2px);
}

.building:nth-child(1) { top: 18%; left: 7%; }
.building:nth-child(2) { top: 43%; right: 5%; }
.building:nth-child(3) { top: 68%; left: 9%; }
.building[data-evolution="1"] { --building-size: 120px; }
.building[data-evolution="2"] { --building-size: 130px; }
.building[data-evolution="3"] { --building-size: 140px; }
.building[data-evolution="4"] { --building-size: 150px; border-color: #bd8e31; }
.building-evolve { animation: building-evolve 1s ease-out; }
@keyframes building-evolve {
  0% { filter: brightness(1.8); transform: scale(.9); }
  45% { filter: brightness(1.2); transform: scale(1.08); }
  100% { filter: none; transform: scale(1); }
}

.building-art {
  display: grid;
  grid-row: 1 / 3;
  width: var(--building-size);
  height: var(--building-size);
  place-items: center;
  color: var(--building-color, #bb6049);
}

.building-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px #5f493955);
  user-select: none;
  -webkit-user-drag: none;
}

.building-name,
.building-status {
  align-self: end;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.building-name {
  font-family: "Jua", sans-serif;
  font-size: 12px;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.3;
}

.building-status {
  align-self: start;
  color: #745643;
  font-size: 8px;
}

.expansion-gateway { position: absolute; z-index: 5; right: 15%; bottom: 20px; left: 15%; min-height: 44px; }
.district-list { display: grid; gap: 15px; padding: 20px 12px; background: linear-gradient(#77bdc0, #315e73); }
.district { position: relative; overflow: hidden; min-height: 350px; border: 3px solid #916345; border-radius: 22px; background: #6faaa8; box-shadow: 0 5px #294d56; }
.district > img { display: block; width: 100%; height: 350px; object-fit: cover; transition: filter .7s; }
.district.locked > img { filter: saturate(.18) brightness(.65); }
.district-copy { position: absolute; right: 0; bottom: 0; left: 0; padding: 15px; background: linear-gradient(transparent, #fff4dbf5 16%); }
.district-copy h3 { margin: 0; font: 23px "Jua", sans-serif; }
.district-copy p { margin: 5px 0; font-size: 11px; }
.district-copy small { display: block; font-size: 10px; }
.district-copy button { width: 100%; min-height: 42px; margin-top: 8px; font-size: 13px; }
.district-copy button:disabled { background: #b9b7a3; box-shadow: none; color: #f5f0e1; }
.district-reveal { animation: building-evolve .9s ease-out; }

.expedition-selects { display: grid; gap: 8px; margin: 14px 0; }
.expedition-selects label { display: grid; gap: 4px; font-size: 10px; color: var(--ink-soft); }
.expedition-selects select { width: 100%; min-width: 0; min-height: 36px; border: 1px solid #b18a5d; border-radius: 8px; padding: 5px; background: #fff8e9; color: var(--ink); font: 12px "Gowun Dodum", sans-serif; }
#expedition-locations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trip-list { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.trip-list li { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 10px; background: #e9e0c5; font-size: 10px; }
.trip-list img { width: 35px; height: 35px; object-fit: contain; }
.trip-list li > span { flex: 1; min-width: 0; }
.trip-list b, .trip-list small { display: block; }
.trip-list strong { color: #246d72; font-size: 9px; }
.help-list { display: grid; gap: 10px; }
.help-order { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 7px; align-items: center; padding: 9px; border: 1px solid #b89367; border-radius: 12px; background: #f6e3c0; }
.help-item img { width: 44px; height: 44px; object-fit: contain; }
.help-order b, .help-order strong, .help-order small { display: block; }
.help-order b { font-size: 10px; color: var(--ink-soft); }
.help-order strong { margin: 4px 0; font: 15px "Jua", sans-serif; }
.help-order small { font-size: 9px; }
.help-order button { grid-column: 1 / -1; width: 100%; min-height: 36px; }
#help-merge { margin-top: 10px; }
#evolution-progress { margin: 8px 0 12px; }
.evolution-preview .reno-preview { height: 135px; }
.evolution-preview .reno-preview img { height: 105px; }

.shop-counter {
  position: absolute;
  top: calc(100% + 6px);
  left: -2px;
  right: -2px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 25px;
  align-items: center;
  gap: 3px 5px;
  padding: 5px 6px;
  border: 2px solid #8e674b;
  border-radius: 12px;
  background: #fff8e9f5;
  box-shadow: 0 3px 0 #70513b;
}

.shop-workers {
  display: flex;
  align-items: center;
}

.shop-workers img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  border: 1px solid #ba9268;
  border-radius: 50%;
  background: #fff5d9;
}

.shop-workers img + img { margin-left: -11px; }
.working .shop-workers img { animation: cat-work 1.2s ease-in-out infinite; }
.working .shop-workers img:nth-child(2) { animation-delay: -.6s; }

.shop-copy {
  grid-column: 2;
  min-width: 0;
  text-align: left;
}

.shop-copy b,
.shop-copy small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shop-copy b { color: #38634b; font-size: 9px; }
.shop-copy small { color: #886342; font-size: 8px; }
.shop-product img { width: 25px; height: 25px; object-fit: contain; }

.shop-track {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #d6c6a8;
}

.shop-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #54a87b;
  transition: width .3s linear;
}

.game-dialog > .shop-effect {
  padding: 8px;
  border: 1px solid #c7a975;
  border-radius: 10px;
  color: #305d47;
  background: #edf3dc;
  font-weight: 700;
}

.game-dialog > .shop-detail { margin: 3px 0 8px; font-size: 10px; }

@keyframes cat-work {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}

.building[data-stage="1"],
.building[data-stage="2"] {
  border-color: #ae724b;
}

.building[data-stage="2"]::after,
.building.restored::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -4px;
  width: 14px;
  height: 14px;
  border: 2px solid #fff5d5;
  border-radius: 50%;
  background: #6ca55d;
  box-shadow: 0 1px 2px #3f6940;
}

.building.restored,
.building[data-stage="3"] {
  border-color: #4b855a;
  background: linear-gradient(150deg, #fffbe9ee, #ddedc1ed);
  box-shadow: 0 4px 0 #3f6849, 0 2px #fff inset, 0 8px 13px #174a4f55;
}

.building.locked,
.building:disabled {
  color: #5e5a55;
  border-color: #777064;
  background: linear-gradient(150deg, #e4ded0ec, #bdb9acec);
  filter: saturate(.25);
}

.map-mist {
  position: absolute;
  z-index: 2;
  width: 190px;
  height: 76px;
  border-radius: 50%;
  pointer-events: none;
  background: #fffce4b8;
  filter: blur(11px);
}

.mist-left { top: 57%; left: -26%; transform: rotate(8deg); }
.mist-right { top: 79%; right: -22%; transform: rotate(-13deg); }

.map-caption {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff9e9;
  font: 400 9px/1 "Jua", sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 2px 3px #1e565d;
}

.map-caption i {
  width: 28px;
  height: 1px;
  background: #fff5d699;
}

/* Cat collection */
.cats-screen {
  padding: 12px 10px calc(var(--nav-h) + var(--safe-bottom) + 18px);
  background:
    linear-gradient(#c4e0d5aa 1px, transparent 1px),
    linear-gradient(90deg, #c4e0d5aa 1px, transparent 1px),
    #f3e3c6;
  background-size: 24px 24px;
}

.collection-banner {
  position: relative;
  display: grid;
  grid-template-columns: 67px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 92px;
  padding: 10px;
  overflow: hidden;
  border: 2px solid #8e5940;
  border-radius: 20px;
  background:
    radial-gradient(circle at 87% 15%, #fff9c8 0 3px, transparent 4px),
    radial-gradient(circle at 94% 28%, #fff9c8 0 2px, transparent 3px),
    linear-gradient(135deg, #488e8c, #286a75);
  box-shadow: 0 4px 0 #704332, 0 2px #a8d7cc inset;
  color: #fff9e9;
}

.collection-banner .eyebrow { color: #ffe69c; }
.collection-banner p {
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.35;
}

.cat-emblem {
  width: 59px;
  height: 59px;
  padding: 6px;
  border: 2px solid #f5ddb5;
  border-radius: 50%;
  background: #d57b5f;
  box-shadow: 0 3px 0 #80473a;
}

.cat-head-mark {
  position: relative;
  display: block;
  width: 38px;
  height: 34px;
  margin: 8px auto 0;
  border: 2px solid #5d4034;
  border-radius: 48% 48% 44% 44%;
  background: #f7d1a2;
}

.cat-head-mark::before,
.cat-head-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -9px;
  width: 17px;
  height: 19px;
  border: 2px solid #5d4034;
  background: #f7d1a2;
  transform: rotate(45deg);
}

.cat-head-mark::before { left: 0; }
.cat-head-mark::after { right: 0; }

.collection-banner #cat-count {
  align-self: start;
  padding: 5px 8px;
  border-radius: 11px;
  color: #5b4235;
  background: #fff4d5;
  box-shadow: 0 2px 0 #173f46;
  font: 400 11px/1 "Jua", sans-serif;
}

.cat-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 13px 1px 5px;
}

.cat-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 145px;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 8px 6px 7px;
  border: 2px solid #b47c59;
  border-radius: 16px;
  background: linear-gradient(#fffdf5, #ebd1aa);
  box-shadow: 0 3px 0 #8a573f, 0 2px #fff inset;
  text-align: center;
}

.cat-card::before {
  content: "";
  position: absolute;
  top: 8px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: var(--cat-color, #b9d8ce);
  opacity: .55;
}

.cat-portrait {
  z-index: 1;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  color: var(--cat-color, #bf765d);
}

.cat-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 2px 1px #6e4c3e55);
  user-select: none;
  -webkit-user-drag: none;
}

.cat-name {
  z-index: 1;
  display: block;
  width: 100%;
  margin-top: 3px;
  overflow: hidden;
  font: 400 13px/1.2 "Jua", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-description {
  z-index: 1;
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 8px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cat-training {
  width: 100%;
  min-height: 32px;
  margin-top: 7px;
  padding: 4px 2px;
  font-size: 10px;
}

.cat-card.locked {
  color: #77716b;
  border-color: #9a9385;
  background: linear-gradient(#eee9de, #d2c9b7);
  filter: saturate(.25);
}

.cat-card.locked .cat-portrait {
  opacity: .32;
  filter: grayscale(1);
}

.cat-card.locked::after {
  content: "?";
  position: absolute;
  z-index: 2;
  top: 34px;
  width: 28px;
  height: 28px;
  border: 2px solid #f7edda;
  border-radius: 50%;
  color: #f7edda;
  background: #6f716f;
  font: 400 21px/27px "Jua", sans-serif;
}

.collection-note {
  margin: 10px 7px;
  color: #755a48;
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

/* Persistent thumb navigation */
.app-nav {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding: 5px 14px calc(5px + var(--safe-bottom));
  border-top: 3px solid #8f5a42;
  background: linear-gradient(#f7e4bb, #dcb27b);
  box-shadow: 0 -2px 0 #fff4d2, 0 -9px 18px #4b40352b;
}

.app-nav::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 42px;
  height: 9px;
  border: 2px solid #8f5a42;
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  background: #f7e4bb;
  transform: translateX(-50%);
}

.app-nav button {
  position: relative;
  display: grid;
  grid-template-rows: 38px 14px;
  place-items: center;
  min-width: 64px;
  max-width: 104px;
  justify-self: center;
  padding: 1px 12px;
  border-radius: 16px;
  color: #73513f;
  background: transparent;
}

.nav-icon {
  position: relative;
  display: block;
  width: 31px;
  height: 30px;
}

.town-icon,
.merge-icon,
.cats-icon {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 7px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.town-icon { background-image: url("./assets/nav-town.webp?v=4"); }
.merge-icon { background-image: url("./assets/items/fish-4.webp?v=4"); }
.cats-icon { background-image: url("./assets/nav-cats.webp?v=4"); }

.app-nav small {
  font-family: "Jua", sans-serif;
  font-size: 10px;
}

.app-nav button.on,
.app-nav button[aria-current="page"] {
  color: #fff9e8;
  background: linear-gradient(#318c92, #1e6a76);
  box-shadow: 0 3px 0 #154d58, 0 2px #8ac5bf inset;
  transform: translateY(-4px);
}

/* Dialogs */
.game-dialog {
  width: min(91%, 408px);
  max-height: calc(100dvh - 28px);
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
  border: 3px solid #8b573f;
  border-radius: 25px;
  color: var(--ink);
  background:
    radial-gradient(circle at 13px 13px, #dfbd8955 0 1px, transparent 2px) 0 0 / 24px 24px,
    #fff8e9;
  box-shadow: 0 7px 0 #64402f, 0 3px #fff inset, 0 20px 60px #132f35aa;
}

.game-dialog[open] {
  animation: dialog-in .24s cubic-bezier(.2, .9, .3, 1.2);
}

.game-dialog::backdrop {
  background: #133d45b8;
  backdrop-filter: blur(3px);
}

.dialog-close-form {
  position: absolute;
  top: 9px;
  right: 9px;
  margin: 0;
}

.close-button {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 9px;
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  padding: 8px;
  border: 2px solid #8b573f;
  border-radius: 50%;
  background: #f5d6a4;
  box-shadow: 0 2px 0 #80513d;
}

.close-button span {
  font: 28px/1 sans-serif;
}

.game-dialog h2 {
  margin: 4px 42px 4px 0;
  font: 400 25px/1.2 "Jua", sans-serif;
}

.game-dialog > p {
  margin: 6px 0 14px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  align-items: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid #d2a875;
  border-radius: 17px;
  background: #f3e0bddd;
  box-shadow: 0 2px #fff inset;
}

.before-after figure {
  min-width: 0;
  margin: 0;
  text-align: center;
}

.reno-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 154px;
  overflow: hidden;
  border: 2px solid #9b6b4f;
  border-radius: 12px;
  background: #f7ebd5;
}

.reno-preview img {
  width: 100%;
  height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px #5f493955);
  user-select: none;
  -webkit-user-drag: none;
}

.reno-preview span {
  overflow: hidden;
  padding: 2px 3px 3px;
  color: #624738;
  background: #fff5d9dd;
  font: 400 8px/1.2 "Jua", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.before-preview { filter: grayscale(.55) sepia(.18); }

.before-after figcaption {
  margin-top: 4px;
  color: var(--ink-soft);
  font: 400 9px/1 "Jua", sans-serif;
}

.reno-arrow {
  position: relative;
  width: 23px;
  height: 3px;
  border-radius: 2px;
  background: #b65e47;
}

.reno-arrow::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 3px solid #b65e47;
  border-right: 3px solid #b65e47;
  transform: rotate(45deg);
}

.reno-meter {
  margin: 14px 2px;
}

.investment-heading {
  margin: 18px 0 6px;
  padding-top: 12px;
  border-top: 1px solid #c7a975;
  font: 400 16px/1.2 "Jua", sans-serif;
}

.meter-copy {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: var(--ink-soft);
  font-size: 9px;
}

.meter-copy strong {
  color: #6b4b3a;
}

.progress-track {
  position: relative;
  isolation: isolate;
  display: grid;
  height: 21px;
  overflow: hidden;
  place-items: center;
  border: 2px solid #76503d;
  border-radius: 11px;
  color: #fffdf0;
  background: #9d927e;
  box-shadow: 0 2px 2px #6f4e3a44 inset;
  font: 400 9px/1 "Jua", sans-serif;
  text-shadow: 0 1px 2px #4b4b3e;
}

.progress-track::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px auto 2px 2px;
  width: var(--progress, 0%);
  max-width: calc(100% - 4px);
  border-radius: 7px;
  background: repeating-linear-gradient(135deg, #78b55d 0 7px, #90c66f 7px 14px);
  box-shadow: 0 1px #d9f3a9 inset;
  transition: width .35s ease;
}

.upgrade-button {
  width: 100%;
  flex-direction: column;
  gap: 1px;
}

.upgrade-button small {
  font-family: "Gowun Dodum", sans-serif;
  font-size: 8px;
  text-shadow: none;
}

.upgrade-button:disabled {
  border-color: #6e675d;
  background: linear-gradient(#a6aa9d, #81877e);
  box-shadow: 0 4px 0 #5f625c;
  filter: saturate(.4);
}

.welcome-dialog {
  overflow: hidden;
  padding-top: 29px;
  text-align: center;
}

.welcome-rays {
  position: absolute;
  z-index: -1;
  top: -130px;
  left: 50%;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background: repeating-conic-gradient(#f4c85d44 0 10deg, transparent 10deg 22deg);
  transform: translateX(-50%);
}

.welcome-cat {
  display: grid;
  width: 146px;
  height: 146px;
  margin: 0 auto 7px;
  place-items: center;
  color: var(--cat-color, #c9775c);
  border: 3px solid #9a6047;
  border-radius: 50%;
  background: linear-gradient(#c4e4dc, #f5d39b);
  box-shadow: 0 5px 0 #774a37, 0 0 0 7px #fff5d7;
}

.welcome-cat img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  border-radius: 24px;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 3px 2px #6b4d3b55);
  user-select: none;
  -webkit-user-drag: none;
}

.training-portrait {
  width: 100px;
  height: 100px;
  margin: 14px auto;
}

.welcome-dialog h2 {
  margin: 5px 0;
  font-size: 28px;
}

.welcome-dialog .dialog-kicker {
  color: #a95643;
}

.welcome-button {
  width: 100%;
  margin-top: 12px;
}

/* Feedback and interaction effects */
.toast {
  position: absolute;
  z-index: 80;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 13px);
  max-width: calc(100% - 32px);
  padding: 9px 16px;
  border: 2px solid #6e4634;
  border-radius: 17px;
  color: #fffbe9;
  background: #4a3a32ed;
  box-shadow: 0 3px 0 #2d2723, 0 6px 20px #18384066;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.toast.show,
.toast.visible,
.toast:not([hidden]) {
  transform: translate(-50%, 0);
  opacity: 1;
}

.effects {
  position: absolute;
  z-index: 75;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.drag-ghost {
  position: fixed;
  z-index: 999;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin: -29px 0 0 -29px;
  border: 2px solid #fff2b6;
  border-radius: 17px;
  background: #d8eee5d9;
  box-shadow: 0 7px 18px #1a4d5555;
  transform: scale(1.08) rotate(-3deg);
  pointer-events: none;
}

.drag-ghost .item,
.drag-ghost img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.coin-flight {
  position: fixed;
  z-index: 1000;
  display: grid;
  min-width: 39px;
  height: 24px;
  place-items: center;
  padding: 0 7px;
  border: 2px solid #8b572b;
  border-radius: 13px;
  color: #684022;
  background: #f4bd3f;
  box-shadow: inset 0 0 0 3px #ffda6f, 0 2px 3px #71472866;
  font: 400 10px/1 "Jua", sans-serif;
  pointer-events: none;
  animation: coin-flight .72s cubic-bezier(.3, .75, .35, 1) forwards;
}

.order-enter {
  animation: order-enter .22s ease-out;
}

.cell.pop,
.item.pop,
.pop {
  animation: item-pop .38s cubic-bezier(.2, 1.25, .4, 1);
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes item-pop {
  0% { transform: scale(.72); filter: brightness(1.5); }
  58% { transform: scale(1.2) rotate(3deg); }
  100% { transform: scale(1); }
}

@keyframes order-enter {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes coin-flight {
  0% { transform: translate(0, 0) scale(.6) rotate(0); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(540deg); opacity: 0; }
}

/* Compact phones */
@media (max-width: 370px) {
  :root {
    --nav-h: 66px;
    --hud-h: 62px;
  }

  .hud {
    gap: 2px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .level-chip,
  .resource-chip {
    height: 31px;
    padding-right: 3px;
    padding-left: 18px;
    border-width: 1.5px;
  }

  .hud-mark {
    width: 22px;
    height: 22px;
  }

  .level-chip strong,
  .resource-chip strong { font-size: 11px; }
  .resource-max { display: none; }
  #energy-timer { left: 18px; }
  .sound-toggle { width: 32px; height: 32px; }

  .merge-screen { padding-top: 5px; }
  .merge-heading { height: 35px; }
  .merge-heading h2 { font-size: 16px; }
  .order-list { gap: 3px; min-height: 91px; padding: 2px 5px 5px; }
  .order-card { grid-template-columns: 29px minmax(0, 1fr); grid-template-rows: 25px 14px 12px 23px; min-height: 87px; padding: 4px 3px; border-radius: 12px; }
  .customer img { width: 23px; height: 23px; margin-right: 2px; }
  .order-item, .order-item img { width: 27px; height: 27px; }
  .order-reward { font-size: 7px; }
  .board-wrap { margin-inline: 5px; padding: 6px; border-radius: 18px; }
  #board { padding: 4px; }
  .cell .item { width: clamp(34px, 10.5vw, 39px); height: clamp(34px, 10.5vw, 39px); }
  .item-level { min-width: 14px; height: 14px; font-size: 8px; }
  .generators { gap: 2px; }
  .generator { grid-template-rows: 31px auto auto; min-height: 54px; padding-inline: 1px; }
  .generator-icon { width: 31px; height: 31px; }
  .game-message { margin-top: 5px; margin-inline: 8px; }

  .app-nav { padding-right: 9px; padding-left: 9px; }
  .app-nav button { grid-template-rows: 34px 13px; padding-inline: 8px; }
  .nav-icon { transform: scale(.9); }

  .cat-list { gap: 6px; }
  .cat-card { min-height: 135px; padding-inline: 4px; }
  .cat-portrait { width: 66px; height: 66px; }
  .cat-card::before { width: 69px; height: 69px; }
}

@media (max-height: 700px) {
  :root { --hud-h: 52px; --nav-h: 56px; }
  .merge-heading { display: none; }
  .merge-screen { padding-top: 5px; }
  .order-list { min-height: 77px; padding-top: 2px; }
  .order-card { min-height: 74px; grid-template-rows: 17px 14px 11px 22px; padding-top: 4px; }
  .customer img { width: 17px; height: 17px; }
  .order-item, .order-item img { width: 25px; height: 25px; }
  .board-wrap { width: min(calc(100% - 10px), calc(100dvh - 324px - var(--safe-top) - var(--safe-bottom))); margin-inline: auto; padding: 4px; }
  .cell .item { width: 100%; height: 100%; }
  .supply-dock { margin-top: 6px; }
  .generators { min-height: 54px; }
  .generator { min-height: 54px; grid-template-rows: 31px auto auto; }
  .generator-icon { width: 31px; height: 31px; }
  .game-message { margin-top: 5px; min-height: 22px; padding: 3px 7px; font-size: 9px; }
  .app-nav { padding-top: 2px; }
  .app-nav button { grid-template-rows: 29px 12px; padding-top: 3px; }
  .nav-icon { width: 29px; height: 29px; }
  .title-copy { margin-top: max(27px, calc(var(--safe-top) + 14px)); }
  .title-copy h1 { font-size: 49px; }
  .title-copy p { margin-top: 6px; }
  .title-actions { margin-bottom: max(13px, calc(var(--safe-bottom) + 8px)); }
  .start-button { min-height: 52px; }
}

@media (min-width: 481px) {
  .app-nav {
    position: absolute;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}