:root {
  color-scheme: only light;
  --ink: #30254d;
  --paper: #fffaf0;
  --plum: #553657;
  --shadow-ink: #39295e;
  --star: #ffd84d;
  --chip: #ffe3ec;
  --ground: #8fdcb4;
  --hard-shadow: 0 5px 0 var(--shadow-ink), 0 10px 22px rgba(31, 24, 51, .18);
  --rounded: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --button: 56px;
  --button-gap: 10px;
  --edge: 10px;
  --home-reserve: 108px;
  --dpad-button: 66px;
  --dpad-gap: 12px;
  --spring: cubic-bezier(.2, .9, .25, 1.2);
  font-family: var(--rounded);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ground);
}

button, a { -webkit-tap-highlight-color: transparent; font-family: var(--rounded); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  background: var(--ground);
}

#game-canvas-host,
#game-canvas-host canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#game-canvas-host { cursor: pointer; }

.ui-icon { display: block; width: 100%; height: 100%; }

/* Top-right chrome: repeat, sound, fullscreen. */
.hud-actions {
  position: fixed;
  z-index: 20;
  top: max(var(--edge), env(safe-area-inset-top));
  right: max(var(--edge), env(safe-area-inset-right));
  display: flex;
  gap: var(--button-gap);
}

.square-button,
.dpad button,
.celebration-button {
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--hard-shadow);
  cursor: pointer;
  touch-action: none;
}

.square-button {
  display: grid;
  place-items: center;
  width: var(--button);
  height: var(--button);
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  border-radius: 18px;
  background: #fff4f0;
}

.sound-off { display: none !important; }
#sound-button[aria-pressed="false"] .sound-on { display: none !important; }
#sound-button[aria-pressed="false"] .sound-off { display: block !important; }

/* Task panel: one line in the district's language, the drawn cargo and stamp dots, top-centre. */
.task-panel {
  position: fixed;
  z-index: 19;
  top: max(var(--edge), env(safe-area-inset-top));
  left: max(calc(max(var(--edge), env(safe-area-inset-left)) + var(--home-reserve) - var(--edge)), calc(var(--tokenville-corner-right, 96px) + 10px));
  right: calc(max(var(--edge), env(safe-area-inset-right)) + var(--button) * 3 + var(--button-gap) * 2 + 14px);
  width: fit-content;
  max-width: calc(100vw - var(--home-reserve) - var(--button) * 3 - var(--button-gap) * 2 - 24px);
  margin-inline: auto;
  min-height: var(--button);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 7px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--hard-shadow);
  pointer-events: none;
  transition: transform 220ms var(--spring);
}

.task-panel.flash { transform: scale(1.04); background: #fff1c2; }
/* Until the town is built the loading card speaks; the empty task panel stays out of sight. */
#game-shell:not(.is-ready) .task-panel { visibility: hidden; }

.task-items { display: flex; gap: 4px; flex: 0 0 auto; }

/* Cargo chips are tappable: each one says the name of its treat. */
.task-items .item-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 14px;
  background: var(--chip);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  animation: chip-hop 320ms var(--spring) both;
}

.task-items .item-chip svg { width: 100%; height: 100%; pointer-events: none; }
.task-items .item-chip:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.task-items .item-chip.is-pressed { transform: scale(.92); }

.item-word {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 2;
  padding: 4px 10px 5px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--star);
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--shadow-ink);
  opacity: 0;
  transform: translate(-50%, -6px) scale(.8);
  transition: opacity 180ms ease, transform 260ms var(--spring);
  pointer-events: none;
}

.item-chip.show-word .item-word { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Mixed mode: a small drawn badge names the language of this district. */
.task-lang {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 26px;
  padding: 0 6px;
  border: 2.5px solid var(--ink);
  border-radius: 13px;
  background: var(--plum);
  color: var(--paper);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
}

.task-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 17em;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  text-wrap: balance;
}

.task-dots { display: flex; gap: 5px; flex: 0 0 auto; margin-left: 2px; }

.task-dots i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 3px solid #c7a9bd;
  border-radius: 50%;
  background: #fff;
}

.task-dots i.done {
  border-color: #3f8f5a;
  background: #7ed293;
  color: #fff;
  padding: 1px;
  animation: chip-hop 320ms var(--spring) both;
}

.task-dots i svg { width: 100%; height: 100%; }

@keyframes chip-hop {
  0% { transform: scale(.6); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Thought bubbles over the houses that need the cargo; on the edge they become a chevron. */
#bubble-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.thought-bubble {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bubble-width, 76px);
  height: 76px;
  margin: 0;
  will-change: transform;
}

.thought-bubble .bubble-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px;
  border: 4px solid var(--plum);
  border-radius: 38px;
  background: var(--paper);
  box-shadow: 0 5px 0 rgba(85, 54, 87, .35);
  animation: bubble-pulse 1.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.thought-bubble .bubble-body svg { width: 54px; height: 54px; flex: 0 0 auto; }
.thought-bubble.help .bubble-body { animation-name: bubble-pulse-help; }

.thought-bubble .bubble-tail,
.thought-bubble .bubble-tail::after {
  position: absolute;
  border: 3px solid var(--plum);
  border-radius: 50%;
  background: var(--paper);
}

.thought-bubble .bubble-tail { left: 50%; bottom: -16px; width: 16px; height: 16px; margin-left: -8px; }
.thought-bubble .bubble-tail::after { content: ""; left: 2px; bottom: -14px; width: 9px; height: 9px; }

.thought-bubble .edge-chevron {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 3px;
  border: 3px solid var(--plum);
  border-radius: 50%;
  background: var(--star);
  color: var(--plum);
}

.thought-bubble.edge .bubble-tail { display: none; }
.thought-bubble.edge .edge-chevron { display: block; }

@keyframes bubble-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@keyframes bubble-pulse-help {
  0%, 100% { transform: scale(1.2); }
  50% { transform: scale(1.28); }
}

/* D-pad fallback: bottom-right inside the safe area. */
.dpad {
  position: fixed;
  z-index: 18;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, var(--dpad-button));
  grid-template-rows: repeat(2, var(--dpad-button));
  gap: var(--dpad-gap);
}

.dpad button {
  display: grid;
  place-items: center;
  width: var(--dpad-button);
  height: var(--dpad-button);
  padding: 15px;
  border-radius: 20px;
  background: #fff4f0;
}

.dpad-up { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-down { grid-column: 2; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }

.is-celebrating .dpad { visibility: hidden; }

/* Shared press feedback: squeeze in 80 ms, release with a small overshoot. */
.square-button,
.dpad button,
.celebration-button { transition: transform 80ms ease-out, background-color 120ms ease; }

.is-pressed { transform: scale(.94) !important; background: #ffe497 !important; }
.is-released { animation: release-spring 260ms var(--spring); }

@keyframes release-spring {
  0% { transform: scale(.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.square-button:focus-visible,
.dpad button:focus-visible,
.celebration-button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Completion: drawn star, one phrase, Ещё раз / Дальше / Домой. Sits above the map and
   below the platform toast, and stays clear of the bottom band where the toast appears. */
.celebration {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: calc(max(var(--edge), env(safe-area-inset-top)) + 70px) 16px 0;
  background: rgba(48, 37, 77, .26);
}

.celebration-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(560px, 100%);
  padding: 16px 22px 22px;
  border: 3px solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 7px 0 var(--shadow-ink), 0 18px 40px rgba(31, 24, 51, .28);
  animation: card-arrives 360ms var(--spring) both;
}

.celebration .big-star {
  width: 124px;
  height: 124px;
  animation: star-pop 520ms var(--spring) both;
}

.celebration h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 950;
  line-height: 1.1;
}

.celebration-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.celebration-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 64px;
  min-height: 64px;
  padding: 0 20px 0 16px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;
}

.celebration-button .ui-icon { width: 28px; height: 28px; }
.celebration-button.primary { background: var(--star); }

@keyframes card-arrives {
  from { opacity: 0; transform: translateY(18px) scale(.92); }
  to { opacity: 1; transform: none; }
}

@keyframes star-pop {
  0% { transform: scale(.3) rotate(-20deg); }
  70% { transform: scale(1.08) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

.loading-card {
  position: fixed;
  z-index: 950;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 16px 22px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--hard-shadow);
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: opacity .25s ease;
}

.loading-card.hidden { opacity: 0; pointer-events: none; }

/* Narrow screens: the task panel moves to its own row under the top buttons. */
@media (max-width: 679px) {
  :root { --button: 48px; --button-gap: 8px; --home-reserve: 84px; }
  /* The platform corner (home and language) owns the top-left; the panel sits to its right. */
  .task-panel {
    top: calc(max(var(--edge), env(safe-area-inset-top)) + 60px);
    left: calc(var(--tokenville-corner-right, 86px) + 8px);
    right: max(var(--edge), env(safe-area-inset-right));
    width: auto;
    max-width: none;
    margin-inline: 0;
    min-height: 54px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "items text text" "items dots lang";
    column-gap: 8px;
    row-gap: 4px;
    padding: 5px 10px 6px 6px;
  }
  .task-items { grid-area: items; align-self: center; }
  .task-text { grid-area: text; font-size: 18px; max-width: none; }
  .task-dots { grid-area: dots; margin-left: 0; }
  .task-lang { grid-area: lang; height: 22px; min-width: 32px; }
  .task-items .item-chip { width: 44px; height: 44px; }
  .task-dots i { width: 17px; height: 17px; border-width: 2.5px; }
  .square-button { padding: 10px; border-radius: 16px; }
  /* The celebration card starts below the platform corner (home and language). */
  .celebration { padding-top: calc(var(--tokenville-corner-bottom, 114px) + 10px); }
}

@media (max-width: 480px) {
  :root { --dpad-button: 58px; }
  .dpad { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
  .dpad button { padding: 13px; border-radius: 18px; }
  .thought-bubble { height: 64px; }
  .thought-bubble .bubble-body { padding: 6px; }
  .thought-bubble .bubble-body svg { width: 44px; height: 44px; }
  .celebration-actions { flex-direction: column; align-items: stretch; }
  .celebration .big-star { width: 96px; height: 96px; }
  .celebration h2 { font-size: 26px; }
}

@media (max-height: 520px) {
  :root { --dpad-button: 54px; }
  .celebration { padding-top: 10px; }
  .celebration .big-star { width: 64px; height: 64px; }
  .celebration-card { gap: 6px; padding: 10px 16px 14px; }
}

/* Short and narrow (small phone in landscape): the card sits to the right of the corner. */
@media (max-width: 679px) and (max-height: 520px) {
  .celebration { padding-left: calc(var(--tokenville-corner-right, 86px) + 8px); }
}

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