:root {
  --tap-target: 56px;
  --chip: 56px;
  --ink: #30254d;
  --paper: #fffaf0;
  --plum: #7452b8;
  --shadow: #39295e;
  --star: #ffd84d;
  --star-edge: #a86100;
  --chrome-fill: #fbf8e4;
  --gap: 12px;
  --pop: cubic-bezier(.2, .9, .25, 1.2);
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
}

body[data-garden="garden-pond"] { --chrome-fill: #f6f6e6; }
body[data-garden="garden-night"] { --chrome-fill: #eef0fb; }

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #7fd6e6;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 800;
}

button,
a { font: inherit; }

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

#game-shell {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
  background: #7fd6e6;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Top bar: home slot, task panel, sound and full screen ---------- */

.top-bar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(86px, auto) 1fr auto;
  align-items: start;
  gap: var(--gap);
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  pointer-events: none;
}

.top-bar > .tokenville-home-slot { margin-right: 64px; }

.actions {
  grid-column: 3;
  display: flex;
  gap: var(--gap);
  pointer-events: none;
}
.actions > * { pointer-events: auto; }

.chrome-button {
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--chrome-fill);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--shadow), 0 8px 18px rgba(31, 24, 51, .18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--pop), box-shadow 160ms var(--pop);
}
.chrome-button[hidden] { visibility: hidden; pointer-events: none; }
.chrome-button svg,
.celebration-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chrome-button .sound-on path:first-child,
.chrome-button .sound-off path:first-child { fill: currentColor; fill-opacity: .16; }
.sound-off { display: none; }
#sound-button[aria-pressed="false"] .sound-on { display: none; }
#sound-button[aria-pressed="false"] .sound-off { display: block; }

.chrome-button:active,
.garden-chip:active,
.celebration-button:active {
  transform: translateY(2px) scale(.94);
  box-shadow: 0 2px 0 var(--shadow);
  transition-duration: 80ms;
  transition-timing-function: ease-out;
}
.chrome-button:focus-visible,
.garden-chip:focus-visible,
.celebration-button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--plum), 0 5px 0 var(--shadow);
}

.task-panel {
  grid-column: 2;
  justify-self: center;
  display: grid;
  grid-template-columns: 40px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  min-width: 230px;
  max-width: 100%;
  padding: 7px 16px 9px 10px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 5px 0 var(--shadow), 0 8px 18px rgba(31, 24, 51, .16);
  pointer-events: none;
}

.goal-icon {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.goal-stem { fill: #8fd06a; }
.goal-petal { fill: #f4dfe8; }
.goal-heart { fill: #fbeeb8; }
.goal-eyes { fill: none; stroke-width: 1.3; }
.goal-puff { fill: #fff; stroke-width: 1.2; }

.task-text { display: grid; line-height: 1.05; min-width: 0; }
.task-title {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .04em;
  color: var(--plum);
  text-transform: uppercase;
}
/* Mixed language mode: a small drawn tag says which language this garden speaks. */
.lang-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--star);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .06em;
  vertical-align: 1px;
}
.lang-badge[hidden] { display: none; }

.task-line {
  font-size: 20px;
  font-weight: 950;
  white-space: nowrap;
  transition: color 200ms ease-out;
}
.task-line.is-praise { color: #2f7a3b; }
body[data-garden="garden-night"] .task-line.is-praise { color: #3a4fae; }

.progress-dots {
  grid-column: 2;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.progress-dots li {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}
.progress-dots li.is-awake {
  background: var(--star);
  animation: dot-pop 260ms var(--pop);
}
.progress-dots li svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Garden switcher ---------- */

.garden-switcher {
  position: absolute;
  z-index: 10;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  gap: var(--gap);
}
.garden-switcher[hidden] { display: none; }

.garden-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--chip);
  height: var(--chip);
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--chrome-fill);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--shadow), 0 8px 18px rgba(31, 24, 51, .18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--pop), background 160ms ease-out;
}
.garden-chip svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.garden-chip[data-garden="garden-meadow"] svg circle { fill: #ffc4d6; }
.garden-chip[data-garden="garden-pond"] svg path:first-child { fill: #9fdc8a; }
.garden-chip[data-garden="garden-night"] svg path:first-child { fill: #fff0a8; }
.garden-chip svg .chip-accent { fill: var(--star); }
.garden-chip[aria-pressed="true"] {
  background: var(--plum);
  color: var(--ink);
  transform: translateY(-3px);
}
.garden-chip .chip-star {
  position: absolute;
  top: -10px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
.garden-chip .chip-star[hidden] { display: none; }
.garden-chip .chip-star svg {
  width: 26px;
  height: 26px;
  fill: var(--star);
  stroke: var(--star-edge);
  stroke-width: 1.8;
}

/* ---------- Hints and guides ---------- */

.guide-layer {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.guide-arc {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2 12;
  opacity: 0;
  filter: drop-shadow(0 2px 0 rgba(48, 37, 77, .55));
  transition: opacity 200ms ease-out;
}
.guide-end { fill: var(--star); stroke: var(--ink); stroke-width: 3; opacity: 0; transition: opacity 200ms ease-out; }
.guide-layer.is-visible .guide-arc,
.guide-layer.is-visible .guide-end { opacity: 1; }

.hint-finger {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  margin: 0 0 0 -30px;
  padding: 6px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--shadow);
  pointer-events: none;
  animation: finger-tap 900ms var(--pop) infinite;
}
.hint-finger[hidden] { display: none; }
.hint-finger svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hint-finger .finger-fill { fill: #ffe0c2; }

.tap-ripple {
  position: absolute;
  z-index: 4;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 4px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 420ms ease-out forwards;
}

/* Name tag: the word for the thing that just woke, in the garden's language. */
.name-tag {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 0;
  max-width: 70vw;
  padding: 4px 14px 5px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--shadow);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
  animation: tag-in 260ms var(--pop) both;
}
.name-tag[hidden] { display: none; }
body[data-garden="garden-night"] .name-tag { background: #fff6c8; }

/* ---------- Celebration ---------- */

.celebration {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 46%;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
  padding: 18px 20px 22px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 7px 0 var(--shadow), 0 18px 40px rgba(31, 24, 51, .28);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: celebrate-in 380ms var(--pop) both;
}
.celebration[hidden] { display: none; }
.celebration-star {
  width: 112px;
  height: 112px;
  fill: var(--star);
  stroke: var(--star-edge);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 0 #e9a916);
  animation: star-turn 700ms var(--pop) 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: var(--gap);
  margin-top: 6px;
}
.celebration-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 64px;
  min-height: 64px;
  padding: 0 18px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--chrome-fill);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--shadow);
  font-size: 19px;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--pop), box-shadow 160ms var(--pop);
}
.celebration-button.primary { background: var(--star); }
.celebration-button svg { width: 26px; height: 26px; }

.error-card {
  position: absolute;
  z-index: 20;
  inset: 50% auto auto 50%;
  width: min(380px, calc(100vw - 32px));
  padding: 24px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 7px 0 var(--shadow);
}
.error-card strong,
.error-card span { display: block; }
.error-card strong { font-size: 24px; font-weight: 950; }
.error-card span { margin-top: 8px; font-size: 18px; line-height: 1.4; }

@keyframes dot-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes finger-tap { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(8px) scale(.94); } 65% { transform: translateY(2px) scale(1.04); } }
@keyframes ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes celebrate-in { from { opacity: 0; transform: translate(-50%, -44%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tag-in { from { opacity: 0; transform: translate(-50%, -70%) scale(.7); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
@keyframes star-turn { from { transform: scale(.4) rotate(-40deg); } to { transform: scale(1) rotate(0); } }

/* Phones: the task panel gets its own row under the controls. */
@media (max-width: 600px) {
  :root { --tap-target: 48px; --chip: 56px; }
  .top-bar { grid-template-columns: minmax(64px, auto) 1fr auto; row-gap: 10px; }
  .top-bar > .tokenville-home-slot { margin-right: 0; }
  /* The platform language control sits under the home control (left 10, 64 wide):
     the panel starts at 88 px so it never hides the goal icon or the task line. */
  .task-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    min-width: 0;
    margin-left: 76px;
    width: min(calc(100% - 76px), 340px);
    grid-template-columns: 34px auto;
    padding: 6px 12px 8px 8px;
  }
  .goal-icon { width: 34px; height: 34px; }
  /* Longer English and Estonian lines wrap onto a second line; the panel always reserves two
     lines on a phone so its height (and the camera fit under it) never jumps mid-garden. */
  .task-line {
    display: flex;
    align-items: center;
    min-height: 2.1em;
    font-size: 18px;
    white-space: normal;
    text-wrap: balance;
  }
  .task-title { font-size: 12px; }
  .progress-dots li { width: 16px; height: 16px; }
  .name-tag { font-size: 19px; }
  .celebration h2 { font-size: 26px; }
  .celebration-star { width: 92px; height: 92px; }
  .celebration-button { padding: 0 14px; font-size: 17px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .task-title { display: none; }
  .celebration-star { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .chrome-button, .garden-chip, .celebration-button, .guide-arc, .guide-end, .task-line { transition-duration: 1ms !important; }
  .hint-finger { animation: none !important; }
}