:root {
  color-scheme: light;
  --paper: #fffaf0;
  --paper-farm: #fff3d9;
  --ink: #30254d;
  --plum: #7452b8;
  --shadow: #39295e;
  --star: #ffd84d;
  --star-stroke: #a86100;
  --water: #1fa6ee;
  --water-soft: #bfe8ff;
  --track: rgba(255, 250, 240, 0.86);
  --sky: #9fd4ef;
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --pop: cubic-bezier(0.2, 0.9, 0.25, 1.2);
  --hud-bottom: 120px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: 0;
  -webkit-user-select: none;
  user-select: none;
}

button,
a {
  font: inherit;
  color: inherit;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#game-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100%;
  isolation: isolate;
  overflow: hidden;
  background: var(--sky);
}

#game-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: pointer;
}

/* Shared press grammar: 0.94 in 80 ms, release with a small overshoot. */
.icon-button,
.field-card,
.play-button,
.celebrate-button {
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1.6), box-shadow 160ms ease-out, background 160ms ease-out;
}

.icon-button:active,
.field-card:active,
.play-button:active,
.celebrate-button:active {
  transform: scale(0.94);
  transition-duration: 80ms;
}

.icon-button:focus-visible,
.field-card:focus-visible,
.play-button:focus-visible,
.celebrate-button:focus-visible {
  outline: 4px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--plum), 0 4px 0 var(--shadow);
}

/* HUD */
.hud {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto 0;
  pointer-events: none;
}

.hud > * {
  pointer-events: auto;
}

.task-panel {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  min-width: 240px;
  max-width: min(460px, calc(100vw - 300px));
  display: grid;
  gap: 6px;
  padding: 9px 16px 10px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 5px 0 var(--shadow), 0 10px 20px rgba(31, 24, 51, 0.18);
  pointer-events: none;
}

.task-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.task-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--ink);
}

.task-icon path:first-child {
  fill: var(--water);
}

.task-icon path:nth-child(2) {
  fill: #ffc93c;
}

.task-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}

.field-name {
  padding: 2px 9px;
  border-radius: 999px;
  background: #efe6ff;
  color: var(--plum);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

/* MIX: a small drawn badge names the language of the field. */
.lang-badge {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 1px 6px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.lang-badge[hidden] {
  display: none;
}

.lang-badge[data-lang="ru"] { background: #ffe1dc; }
.lang-badge[data-lang="en"] { background: #dcecff; }
.lang-badge[data-lang="et"] { background: #dff5e3; }

.field-card .lang-badge {
  position: absolute;
  top: -11px;
  left: -8px;
}

.cat-dots {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-dot {
  width: 24px;
  height: 24px;
  color: var(--ink);
}

.cat-dot svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.cat-dot .cat-face {
  fill: #ffffff;
}

.cat-dot .cat-eye {
  fill: var(--ink);
  stroke: none;
}

.cat-dot.is-filled .cat-face {
  fill: #ffb347;
}

.cat-dot.is-new {
  animation: dot-pop 320ms var(--pop);
}

@keyframes dot-pop {
  0% { transform: scale(0.6); }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.hud-actions {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  display: flex;
  gap: 12px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--paper-farm);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--shadow), 0 8px 16px rgba(31, 24, 51, 0.16);
  cursor: pointer;
}

.icon-button svg {
  width: 28px;
  height: 28px;
}

.icon-button:hover {
  background: #fff8e8;
}

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

#sound-button[aria-pressed="false"] .icon-sound-off {
  display: block;
}

/* Water rings: one per bowl, also the keyboard focus target. */
.ring-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.bowl-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 112px;
  height: 112px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  opacity: 0.78;
  transition: opacity 200ms ease-out;
}

.bowl-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke-linecap: round;
}

.bowl-ring .ring-track {
  stroke: var(--track);
  stroke-width: 8px;
}

.bowl-ring .ring-fill {
  stroke: var(--water);
  stroke-width: 8px;
  transition: stroke-dashoffset 120ms linear;
}

.bowl-ring .ring-notch {
  fill: var(--star);
  stroke: var(--star-stroke);
  stroke-width: 2px;
}

.bowl-ring.is-active {
  opacity: 1;
}

.bowl-ring.is-active .ring-track,
.bowl-ring.is-active .ring-fill {
  stroke-width: 11px;
}

.bowl-ring.is-busy {
  opacity: 0;
}

.bowl-ring.is-full .ring-wrap {
  animation: ring-bounce 250ms var(--pop);
}

.bowl-ring .ring-wrap {
  position: absolute;
  inset: 0;
}

.bowl-ring.is-hint .ring-wrap {
  animation: ring-pulse 1100ms ease-in-out infinite;
}

.bowl-ring:focus {
  outline: none;
  opacity: 1;
}

/* Rings ignore pointers, so focus only ever comes from the keyboard. */
.bowl-ring:focus .ring-track {
  stroke: var(--star);
  stroke-width: 14px;
}

@keyframes ring-bounce {
  0% { transform: scale(1); }
  55% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

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

.cloud-ring {
  position: absolute;
  z-index: 12;
  left: 0;
  top: 0;
  width: 150px;
  height: 150px;
  border: 6px dashed rgba(255, 250, 240, 0.95);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 2px 0 rgba(48, 37, 77, 0.45));
  transition: opacity 200ms ease-out;
}

.cloud-ring.visible {
  opacity: 1;
  animation: cloud-ring-pulse 1300ms ease-in-out infinite;
}

@keyframes cloud-ring-pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.08; }
}

.hint-hand {
  position: absolute;
  z-index: 13;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  padding: 8px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.hint-hand svg {
  width: 100%;
  height: 100%;
  fill: #ffe2c4;
}

.hint-hand.visible {
  opacity: 1;
}

.hint-hand.visible svg {
  animation: hand-press 1100ms ease-in-out infinite;
}

@keyframes hand-press {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(5px) scale(0.92); }
}

/* Toast sits under the task panel, away from the platform star toast. */
.toast {
  position: absolute;
  z-index: 22;
  top: calc(var(--hud-bottom) + 12px);
  left: 50%;
  max-width: calc(100vw - 32px);
  padding: 9px 18px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--star);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--shadow);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -10px);
  transition: opacity 180ms ease-out, transform 260ms var(--pop);
}

.toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.toast.has-swatch {
  background: var(--paper);
}

.toast-swatch {
  flex: 0 0 auto;
  display: grid;
  width: 34px;
  height: 34px;
}

.toast-swatch svg {
  width: 34px;
  height: 34px;
  fill: var(--swatch, #ffffff);
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.toast-swatch svg path:last-child {
  fill: #7fd8ff;
}

.toast-number {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #ffffff;
  font-size: 22px;
  line-height: 1;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Start screen */
.start-screen {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(76px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  background: rgba(48, 37, 77, 0.28);
  overflow-y: auto;
  transition: opacity 240ms ease-out, visibility 240ms ease-out;
}

.start-screen.closed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.start-card {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 22px 24px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 8px 0 var(--shadow), 0 24px 48px rgba(31, 24, 51, 0.28);
  text-align: center;
}

.start-art {
  width: 150px;
  height: 105px;
  stroke: var(--ink);
  stroke-width: 3.5;
}

.start-art .art-cloud { fill: #ffffff; }
.start-art .art-rain { stroke: var(--water); stroke-width: 5; }
.start-art .art-cat { fill: #f3a25a; }
.start-art .art-eye { fill: #3b8b2f; stroke-width: 2.5; }
.start-art .art-nose { fill: #f59bb0; stroke-width: 2; }
.start-art .art-bowl { fill: #ffc93c; }
.start-art .art-water { stroke: var(--water); stroke-width: 5; }
.start-art .art-tail { stroke: var(--ink); stroke-width: 7; }

.start-card h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 950;
  line-height: 1.05;
}

.start-copy {
  margin: 0;
  font-size: 19px;
  font-weight: 850;
  color: var(--plum);
}

.field-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.field-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 108px;
  padding: 12px 6px 10px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--shadow);
  cursor: pointer;
}

.field-card[aria-pressed="true"] {
  background: #fff1c2;
}

.field-icon {
  width: 40px;
  height: 40px;
}

.field-card[data-field-index="0"] .field-icon { color: #2f8b45; }
.field-card[data-field-index="1"] .field-icon { color: #c45a14; }
.field-card[data-field-index="2"] .field-icon { color: #2f6fb8; }

.field-card-name {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
}

.field-star {
  position: absolute;
  top: -12px;
  right: -10px;
  width: 34px;
  height: 34px;
  fill: var(--star);
  stroke: var(--star-stroke);
  stroke-width: 1.8;
  visibility: hidden;
}

.field-card.is-done .field-star {
  visibility: visible;
}

.play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  margin-top: 4px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--plum);
  color: #ffffff;
  box-shadow: 0 5px 0 var(--shadow);
  font-size: 24px;
  font-weight: 950;
  cursor: pointer;
}

.play-button svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
  stroke: #ffffff;
}

/* Celebration: platform grammar, content ends well above the star toast. */
.celebration {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(84px + env(safe-area-inset-top)) 16px calc(136px + env(safe-area-inset-bottom));
  background: rgba(48, 37, 77, 0.3);
}

.celebration[hidden] {
  display: none;
}

.celebration-card {
  width: min(500px, 100%);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 18px 18px 22px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 8px 0 var(--shadow), 0 24px 48px rgba(31, 24, 51, 0.28);
  animation: card-in 360ms var(--pop);
}

@keyframes card-in {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.celebration-star {
  width: 132px;
  height: 132px;
  fill: var(--star);
  stroke: var(--star-stroke);
  stroke-width: 1.4;
  animation: star-in 520ms var(--pop);
}

@keyframes star-in {
  0% { transform: scale(0.4) rotate(-20deg); }
  100% { transform: scale(1) rotate(0); }
}

.celebration h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 950;
  text-align: center;
}

.celebration-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px;
}

.celebrate-button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 8px 6px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--shadow);
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.celebrate-button svg {
  width: 30px;
  height: 30px;
}

.celebrate-next {
  background: var(--plum);
  color: #ffffff;
}

.celebrate-next[hidden] {
  display: none;
}

.error-panel {
  position: absolute;
  z-index: 100;
  inset: 0;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 32px;
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  text-align: center;
}

.error-panel:not([hidden]) {
  display: grid;
}

/* Tablets and narrow windows: panel stays between home and the buttons. */
@media (max-width: 860px) {
  .task-panel {
    max-width: calc(100vw - 2 * 156px);
    min-width: 0;
  }
}

/* Phones: panel moves under the button row, right of the home badge. */
@media (max-width: 520px) {
  .icon-button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 16px;
  }

  .icon-button svg {
    width: 25px;
    height: 25px;
  }

  .task-panel {
    top: calc(72px + env(safe-area-inset-top));
    left: calc(100px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    width: auto;
    max-width: none;
    transform: none;
    padding: 8px 10px 9px;
  }

  .task-line {
    font-size: 18px;
    gap: 8px;
  }

  .task-icon {
    width: 26px;
    height: 26px;
  }

  .cat-dot,
  .cat-dot svg {
    width: 19px;
    height: 19px;
  }

  .cat-dots {
    gap: 3px;
  }

  .field-name {
    font-size: 12px;
    padding: 2px 7px;
  }

  .start-card {
    padding: 16px 14px 18px;
  }

  .start-card h1 {
    font-size: 28px;
  }

  .field-cards {
    gap: 8px;
  }

  .field-card {
    min-height: 100px;
  }

  .field-card-name {
    font-size: 15px;
  }

  .celebrate-button {
    font-size: 16px;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .start-screen {
    padding-top: calc(64px + env(safe-area-inset-top));
  }

  .start-art {
    display: none;
  }

  .celebration {
    padding-top: 12px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }

  .celebration-star {
    width: 72px;
    height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}