:root {
  color-scheme: light;
  /* The app injects --app-sat/sab/sal/sar; env() alone is unreliable inside WKWebView.
     max() takes whichever side actually reports a value, so the pack ships standalone too. */
  --sat: max(env(safe-area-inset-top, 0px), var(--app-sat, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--app-sab, 0px));
  --sal: max(env(safe-area-inset-left, 0px), var(--app-sal, 0px));
  --sar: max(env(safe-area-inset-right, 0px), var(--app-sar, 0px));
  /* Every UI row used to write its own inset (header 12, hud 12, dock 10, and 9/8/6
     again on narrow phones), so the four rows never lined up. One token instead. */
  --gut: 12px;
  /* Sized per language *and* per breakpoint. It used to be four competing rules, and
     `body[data-language="en"] .fruit-choice` outspecified the media query, so the
     narrow-phone size silently never applied. A variable has no such contest. */
  --fruit-icon: 48px;
  --ink: #1d2f24;
  --muted: #657267;
  --leaf: #277347;
  --leaf-dark: #1c5234;
  --mint: #a7dd78;
  --sun: #f5b836;
  --cream: #fff7dd;
  --paper: #fffdf5;
  --wood: #75472d;
  --danger: #d75b42;
  --line: rgba(31, 67, 40, 0.18);
  --farm-bg: url("assets/farm-bg.jpg");
  --farm-body-shade: linear-gradient(rgba(24, 50, 31, 0.72), rgba(16, 36, 24, 0.86));
  --farm-stage-shade: linear-gradient(rgba(255, 251, 221, 0.06), rgba(20, 58, 32, 0.14));
}

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

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

body {
  display: grid;
  place-items: center;
  background:
    var(--farm-body-shade),
    var(--farm-bg) center 46% / cover fixed;
  color: var(--ink);
  font-family: Inter, ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

button,
select {
  font: inherit;
  letter-spacing: 0;
}

button {
  touch-action: manipulation;
}

.game-shell {
  width: min(100vw, 470px);
  height: min(100dvh, 900px);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border-inline: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 24px 70px rgba(10, 26, 16, 0.36);
}

.game-header {
  min-height: 68px;
  padding-top: max(10px, var(--sat));
  padding-bottom: 9px;
  padding-left: max(var(--gut), var(--sal));
  padding-right: max(var(--gut), var(--sar));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #183d29;
  color: #fff8dc;
  border-bottom: 3px solid #e6ad3f;
}

.brand {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background: conic-gradient(from 30deg, #f8c84a, #e85d45, #8ccc62, #f8c84a);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow: 0 0 0 3px rgba(255, 247, 211, 0.16);
}

.brand h1 {
  margin: 0;
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 3.7vw, 20px);
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand p {
  margin: 4px 0 0;
  color: #bad79f;
  font-size: 11px;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.level-picker {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-inline: 9px;
  border: 1px solid rgba(247, 196, 75, 0.48);
  background: rgba(7, 29, 18, 0.46);
  border-radius: 6px;
  color: #c9d7ca;
  font-size: 11px;
}

/* The closed <select> only ever had room for "1 · Gard...", because option text is
   also the trigger text. Show a short badge instead and keep the real select on top
   at full size and transparent: the native picker still lists the full level names,
   and the tap target is the whole chip rather than a 30px-tall strip. */
#levelBadge {
  font-size: 13px;
  font-weight: 800;
  color: #fff8db;
}

/* hiding the native select also hid its dropdown arrow, so the chip stopped
   reading as tappable */
.level-picker::after {
  content: "\25BE";
  margin-left: 1px;
  color: rgba(247, 196, 75, 0.9);
  font-size: 10px;
  line-height: 1;
}

.level-picker select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  opacity: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.level-picker select option {
  color: #243d2a;
  background: #fffdf2;
}

.level-picker select option:disabled {
  color: #7d887d;
}

.icon-button {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(166, 221, 119, 0.48);
  border-radius: 50%;
  background: rgba(25, 87, 53, 0.62);
  color: #eaf7d9;
  font-size: 21px;
  font-weight: 800;
  cursor: pointer;
}

.icon-button:active {
  transform: scale(0.94);
}

.gear-glyph {
  width: 21px;
  height: 21px;
}

.settings-wrap {
  position: relative;
}

.settings-button.is-open,
.icon-button[aria-expanded="true"] {
  border-color: var(--sun);
  background: rgba(245, 184, 54, 0.24);
}

/* Anchored to the gear, not to the viewport: the header already carries the safe-area
   inset, so the menu inherits a correct origin without repeating that math. */
.settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 208px;
  padding: 5px;
  border: 2px solid #d5a33e;
  border-radius: 10px;
  background: rgba(255, 252, 235, 0.985);
  box-shadow: 0 14px 34px rgba(12, 32, 19, 0.4);
}

.settings-menu[hidden] {
  display: none;
}

.settings-row {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.settings-row:active {
  background: rgba(39, 115, 71, 0.12);
}

.settings-row.danger {
  color: #b4452f;
}

.settings-glyph {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--leaf);
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

svg.settings-glyph {
  padding: 1px;
}

.settings-row.danger .settings-glyph {
  color: #b4452f;
}

.settings-state {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-row.is-muted .settings-state {
  color: #b4452f;
}

.settings-sep {
  height: 1px;
  margin: 4px 7px;
  background: var(--line);
}

.icon-button.is-muted {
  color: #9aa69c;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(10, 27, 18, 0.5);
}

.hud {
  min-height: 70px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
  padding-top: 7px;
  padding-bottom: 6px;
  padding-left: max(var(--gut), var(--sal));
  padding-right: max(var(--gut), var(--sar));
  background: #fff9e7;
  border-bottom: 1px solid var(--line);
}

.hud-stat {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 0 5px;
  border: 2px solid #deb044;
  border-radius: 50%;
  background: #fffef6;
  box-shadow: inset 0 0 0 3px rgba(255, 209, 76, 0.12);
}

.target-stat {
  border-color: #69ad67;
  box-shadow: inset 0 0 0 3px rgba(91, 173, 99, 0.1);
}

.hud-label {
  color: var(--muted);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.hud-stat strong {
  margin-top: 3px;
  font-size: 20px;
  line-height: 1;
}

.score-block {
  min-width: 0;
}

.score-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
}

.score-row strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.score-track {
  position: relative;
  height: 9px;
  margin-top: 3px;
  overflow: hidden;
  border: 1px solid rgba(43, 91, 52, 0.24);
  border-radius: 6px;
  background: #e7e4cd;
}

.score-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #67bd68, #e4c94b, #ef8b45);
  box-shadow: 0 0 10px rgba(234, 170, 55, 0.48);
  transition: width 360ms ease;
}

.score-block p {
  margin: 4px 0 0;
  overflow: hidden;
  color: #657267;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.stage-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 360px;
  overflow: hidden;
  background:
    var(--farm-stage-shade),
    var(--farm-bg) center 53% / cover;
  isolation: isolate;
}

body[data-farm-scene="night"] {
  --farm-body-shade: linear-gradient(rgba(8, 18, 42, 0.55), rgba(5, 13, 29, 0.82));
  --farm-stage-shade: linear-gradient(rgba(244, 226, 154, 0.08), rgba(7, 21, 38, 0.12));
}

body[data-farm-scene="night"] #gameCanvas {
  filter: brightness(1.08) saturate(1.08);
}

.stage-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 65, 36, 0.14), transparent 22%, transparent 78%, rgba(23, 65, 36, 0.14)),
    linear-gradient(180deg, rgba(255, 247, 211, 0.15), transparent 30%, rgba(32, 77, 42, 0.18));
}

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.combo-badge {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 5;
  min-width: 90px;
  padding: 7px 12px;
  transform: translate(-50%, -14px) scale(0.8);
  opacity: 0;
  border: 1px solid rgba(255, 248, 201, 0.82);
  border-radius: 999px;
  background: rgba(32, 66, 38, 0.92);
  color: #fff2a9;
  box-shadow: 0 8px 24px rgba(26, 55, 33, 0.3);
  font-weight: 900;
  text-align: center;
  pointer-events: none;
  transition: 180ms ease;
}

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

.toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 6;
  max-width: calc(100% - 32px);
  padding: 8px 13px;
  transform: translate(-50%, 10px);
  opacity: 0;
  border-radius: 999px;
  background: rgba(28, 50, 33, 0.9);
  color: #fff8dd;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  transition: 180ms ease;
}

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

.gesture-hint {
  position: absolute;
  top: 72px;
  left: 50%;
  z-index: 4;
  width: 72px;
  height: 126px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.8;
  animation: hint-fade 4.2s ease forwards;
}

.gesture-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  border: 3px solid #fff8c4;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(255, 246, 176, 0.18), 0 2px 10px rgba(34, 74, 43, 0.4);
  animation: hint-move 1.7s ease-in-out infinite;
}

.result-panel {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 10;
  width: min(330px, calc(100% - 34px));
  padding: 20px;
  transform: translate(-50%, -50%);
  border: 2px solid #e8bd56;
  border-radius: 8px;
  background: rgba(255, 253, 241, 0.97);
  box-shadow: 0 18px 54px rgba(23, 57, 33, 0.34);
  text-align: center;
}

.result-panel[hidden] {
  display: none;
}

.result-panel > span {
  color: var(--leaf);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.result-panel h2 {
  margin: 6px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  letter-spacing: 0;
}

.result-panel p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.primary-button,
.secondary-button {
  min-height: 42px;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.primary-button {
  border: 0;
  background: linear-gradient(#f4c558, #e6a832);
  color: #3d3115;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.56);
}

.secondary-button {
  border: 1px solid rgba(36, 84, 49, 0.28);
  background: #f4f4e9;
  color: var(--leaf-dark);
}

.fruit-dock {
  position: relative;
  min-height: 128px;
  padding-top: 7px;
  padding-bottom: max(9px, var(--sab));
  padding-left: max(var(--gut), var(--sal));
  padding-right: max(var(--gut), var(--sar));
  background: #f9f2d7;
  border-top: 3px solid #8e5a34;
  box-shadow: 0 -10px 28px rgba(51, 74, 40, 0.08);
}

.dock-heading {
  min-height: 40px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #58645a;
  font-size: 10px;
  font-weight: 700;
}

#turnStatus,
#enemyCount {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#enemyCount {
  text-align: right;
}

.dock-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-button,
.shop-heading button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(39, 115, 71, 0.42);
  color: var(--leaf-dark);
  cursor: pointer;
}

.shop-button {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border-color: rgba(140, 92, 26, 0.42);
  background: linear-gradient(#f6cd67, #e5a52c);
  color: #4a3a10;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.6),
    0 2px 5px rgba(88, 58, 16, 0.28);
}

.shop-glyph {
  width: 19px;
  height: 19px;
}

/* Both chips read as small round glyphs by design; the pseudo-element widens the
   touch target to ~42px without inflating the row they sit in. */
.shop-heading button::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.shop-button.active {
  border-color: var(--leaf-dark);
  background: linear-gradient(#2f8551, var(--leaf-dark));
  color: #fffbe8;
}

.shop-button.urgent {
  animation: shop-urgent 850ms ease-in-out infinite alternate;
}

.shop-panel {
  position: absolute;
  left: max(var(--gut), var(--sal));
  right: max(var(--gut), var(--sar));
  bottom: calc(100% + 8px);
  z-index: 12;
  padding: 9px;
  border: 2px solid #d5a33e;
  border-radius: 8px;
  background: rgba(255, 252, 235, 0.98);
  box-shadow: 0 16px 38px rgba(19, 44, 27, 0.34);
}

.shop-panel[hidden] {
  display: none;
}

.shop-heading {
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--leaf-dark);
}

.shop-heading strong {
  margin-right: auto;
  font-size: 13px;
}

.shop-heading span {
  color: var(--muted);
  font-size: 10px;
}

.shop-heading b {
  color: #9a6518;
  font-size: 12px;
}

.shop-heading button {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f4ecd3;
  font-size: 17px;
}

.shop-offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 6px;
  max-height: 184px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.shop-offer {
  min-width: 0;
  min-height: 83px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 3px;
  border: 1px solid rgba(108, 72, 36, 0.25);
  border-radius: 6px;
  background: #fffdf4;
  color: var(--ink);
  cursor: pointer;
}

.shop-offer.unaffordable {
  opacity: 0.56;
}

.shop-offer.locked {
  border-style: dashed;
  background: #f1eee2;
}

.shop-offer.locked span {
  color: #6a5772;
}

.shop-offer img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter:
    drop-shadow(0 3px 2px rgba(69, 44, 26, 0.18))
    hue-rotate(var(--fruit-hue, 0deg))
    saturate(var(--fruit-saturation, 1))
    brightness(var(--fruit-brightness, 1));
}

.shop-offer strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shop-offer span {
  color: #9a6518;
  font-size: 10px;
  font-weight: 900;
}

.fruit-stock {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  min-width: 20px;
  padding: 2px 4px;
  border-radius: 9px;
  background: #277347;
  color: #fffbe8;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.fruit-choices {
  height: 91px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.fruit-choice {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--fruit-icon) minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 7px 6px;
  overflow: hidden;
  border: 2px solid rgba(105, 73, 43, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.7), rgba(246, 231, 189, 0.76)),
    repeating-linear-gradient(90deg, rgba(129, 76, 39, 0.08) 0 2px, transparent 2px 12px);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.fruit-choice::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(117, 71, 45, 0.18);
  border-radius: 4px;
  pointer-events: none;
}

.fruit-choice.selected {
  border-color: #36915a;
  background: linear-gradient(#effbdc, #dff1bb);
  box-shadow: 0 0 0 2px rgba(55, 145, 89, 0.15), 0 7px 16px rgba(41, 94, 54, 0.13);
}

.fruit-choice:active {
  transform: translateY(1px) scale(0.99);
}

.fruit-choice img {
  position: relative;
  z-index: 1;
  width: var(--fruit-icon);
  height: var(--fruit-icon);
  object-fit: contain;
  filter:
    drop-shadow(0 4px 3px rgba(69, 44, 26, 0.2))
    hue-rotate(var(--fruit-hue, 0deg))
    saturate(var(--fruit-saturation, 1))
    brightness(var(--fruit-brightness, 1));
}

.fruit-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.fruit-copy strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fruit-copy span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
}

body[data-language="en"] .brand h1 {
  font-size: 18px;
}

body[data-language="en"] .brand p {
  font-size: 9px;
}

body[data-language="en"] .score-block p,
body[data-language="en"] #enemyCount,
body[data-language="en"] #turnStatus {
  font-size: 9px;
}

body[data-language="en"] {
  --fruit-icon: 40px;
}

/* "Watermelon" is the longest name and needs 66px at 12px; every phone width leaves
   the copy column under that, so the whole set drops a step rather than ellipsing. */
body[data-language="en"] .fruit-copy strong {
  font-size: 11px;
}

body[data-language="en"] .fruit-copy span,
body[data-language="en"] .shop-offer span {
  font-size: 8px;
}

.fruit-copy strong {
  font-size: 13px;
  line-height: 1.15;
}

.fruit-copy span {
  margin-top: 4px;
  color: #677066;
  font-size: 9px;
}

@media (max-width: 350px) {
  .shop-offers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes hint-move {
  0%, 15% { transform: translate(-50%, 0) scale(0.82); opacity: 0; }
  30% { opacity: 1; }
  78% { transform: translate(-50%, 82px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, 96px) scale(0.88); opacity: 0; }
}

@keyframes shop-urgent {
  from { box-shadow: 0 0 0 0 rgba(239, 139, 69, 0.15); }
  to { box-shadow: 0 0 0 5px rgba(239, 139, 69, 0.32); }
}

@keyframes hint-fade {
  0%, 72% { opacity: 0.82; }
  100% { opacity: 0; visibility: hidden; }
}

@media (max-width: 390px) {
  :root {
    --gut: 10px;
    --fruit-icon: 42px;
  }

  body[data-language="en"] {
    --fruit-icon: 34px;
  }

  .game-header {
    min-height: 62px;
  }

  .brand-mark {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .brand p,
  .level-picker > span {
    display: none;
  }

  .level-picker {
    padding-inline: 7px;
  }

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

  .hud {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 7px;
  }

  .hud-stat {
    width: 52px;
    height: 52px;
    padding: 0 3px;
  }

  .hud-label {
    font-size: 7.5px;
  }

  .hud-stat strong {
    font-size: 19px;
  }

  .fruit-dock {
    min-height: 122px;
  }

  .fruit-choices {
    gap: 5px;
  }

  .fruit-choice {
    padding-inline: 4px;
  }

  .fruit-copy strong {
    font-size: 12px;
  }
}

@media (max-height: 700px) {
  .game-header {
    min-height: 58px;
    padding-top: max(7px, var(--sat));
    padding-bottom: 7px;
  }

  .hud {
    min-height: 60px;
    padding-block: 4px;
  }

  .hud-stat {
    width: 50px;
    height: 50px;
  }

  .stage-wrap {
    min-height: 318px;
  }

  .fruit-dock {
    min-height: 112px;
  }

  .fruit-choices {
    height: 78px;
  }
}

@media (min-width: 700px) {
  .game-shell {
    border-radius: 8px;
  }
}

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