:root {
  --ink:#284a40;
  --muted:#748479;
  --green:#42795b;
  --mint:#dcebdc;
  --cream:#fffdf4;
  --yellow:#f5d774;
  --pink:#f7dfdb;
  --line:#d8e2d3;
  --shadow:0 9px 24px #47624908;
  --font:"Trebuchet MS","Avenir Next",Avenir,system-ui,sans-serif
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:#eff5e9;
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  -webkit-tap-highlight-color:transparent
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:linear-gradient(#d8e4d25c 1px,transparent 1px),linear-gradient(90deg,#d8e4d25c 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(transparent,#0006)
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button:disabled {
  cursor:default
}

button,canvas {
  touch-action:manipulation
}

button:focus-visible,a:focus-visible,canvas:focus-visible {
  outline:3px solid #e4ab52;
  outline-offset:5px
}

button {
  border:0
}

button svg,svg.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

img {
  max-width:100%;
  user-select:none;
  -webkit-user-drag:none
}

svg {
  flex-shrink:0
}

[hidden] {
  display:none!important
}

.svg-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.app {
  max-width:1120px;
  padding:0 36px;
  margin:0 auto;
  position:relative
}

.site-header {
  height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  background:none;
  text-align:left;
  line-height:1.05
}

.brand>span {
  font-weight:800;
  font-size:20px;
  letter-spacing:-.7px
}

.brand-party {
  display:block;
  font-size:9px;
  letter-spacing:2px;
  color:var(--green);
  margin-top:7px
}

.header-note {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:16px;
  color:#70826e;
  display:flex;
  gap:9px;
  align-items:center
}

.status-dot {
  width:6px;
  height:6px;
  background:#759970;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0
}

.header-actions {
  display:flex;
  gap:10px
}

.icon-button {
  background:#ffffff73;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:42px;
  height:42px;
  border:1px solid #dbe4d6;
  border-radius:13px;
  transition:background .18s,transform .18s
}

.icon-button:hover {
  background:#fffdf7;
  transform:translateY(-2px)
}

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

.home-screen {
  min-height:536px;
  display:grid;
  grid-template-columns:1.02fr 1fr;
  align-items:center;
  gap:35px;
  padding:24px 18px 18px
}

.eyebrow {
  font-size:10px;
  font-weight:800;
  letter-spacing:1.6px;
  line-height:1.6
}

.home-copy>.eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  color:#73886f
}

.tiny-star {
  color:#bc8e3d;
  font-size:19px
}

h1 {
  font-size:70px;
  letter-spacing:-4.1px;
  line-height:1.05;
  margin:21px 0 20px;
  font-weight:900
}

h1>span {
  color:#619172
}

h1 .title-dot {
  color:#e8a386
}

h3 {
  font-size:15px;
  letter-spacing:-.2px;
  margin:7px 0
}

.home-description {
  font-size:16px;
  line-height:1.7;
  color:#758172;
  margin:0 0 27px
}

.button {
  min-height:48px;
  padding:13px 23px;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font-weight:800;
  transition:transform .18s,box-shadow .18s,background .18s
}

.button:hover {
  transform:translateY(-2px);
  box-shadow:0 7px 15px #866c1a15
}

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

.button-primary {
  background:var(--yellow);
  border:1px solid #e7c35f;
  box-shadow:0 4px 0 #dabb56;
  color:#3d4d36
}

.play-button {
  min-width:245px;
  font-size:17px;
  min-height:60px;
  justify-content:flex-start;
  padding:16px 22px
}

.play-button>svg:first-child {
  fill:currentColor;
  width:19px;
  height:19px
}

.button-arrow {
  margin-left:auto
}

.text-button {
  background:none;
  padding:20px 0 0;
  display:block;
  font-size:11px;
  color:#8b9484
}

.text-button>span {
  display:block;
  color:#546f52;
  font-size:12px;
  font-weight:bold;
  margin-top:5px
}

.text-button:hover>span {
  text-decoration:underline;
  text-underline-offset:3px
}

.home-meta {
  display:flex;
  gap:23px;
  align-items:center;
  margin-top:29px
}

.home-meta>div:not(.meta-divider) {
  display:flex;
  align-items:center;
  gap:10px
}

.home-meta svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:#9b9d70;
  stroke-width:1.4;
  stroke-linejoin:round
}

.home-meta span {
  font-size:8px;
  color:#85917c;
  letter-spacing:1.25px
}

.home-meta strong {
  display:block;
  color:#5b7056;
  font-size:13px;
  letter-spacing:0;
  margin-top:5px
}

.meta-divider {
  width:1px;
  height:29px;
  background:var(--line)
}

.home-art {
  position:relative;
  width:100%;
  isolation:isolate
}

.home-art canvas {
  width:100%;
  height:auto;
  display:block;
  position:relative;
  z-index:1
}

.art-blob {
  position:absolute;
  inset:8% -4% 11% 0;
  background:#dcead6;
  border-radius:45% 52% 40% 55%;
  transform:rotate(-9deg);
  z-index:-1
}

.party-sticker {
  position:absolute;
  top:3%;
  right:0;
  border:2px dashed #ddb558;
  background:#fae8a5;
  border-radius:50%;
  width:86px;
  height:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:800;
  line-height:1.15;
  transform:rotate(12deg);
  box-shadow:0 0 0 6px #fae8a5;
  z-index:2
}

.party-sticker>span {
  font-size:19px;
  margin-bottom:4px
}

.art-sparkle {
  position:absolute;
  color:#9caf83
}

.sparkle-one {
  top:12%;
  left:0;
  font-size:44px
}

.sparkle-two {
  bottom:12%;
  right:0;
  font-size:35px
}

.art-caption {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin-top:-10px;
  font-size:10px;
  letter-spacing:.2px;
  color:#7c8d71
}

.fruit-collection {
  margin:12px 0 0;
  padding:19px 24px 15px;
  border:1px solid #dce4d3;
  border-radius:21px;
  background:#fffdf580;
  box-shadow:var(--shadow)
}

.collection-heading {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.collection-heading>.eyebrow {
  font-size:9px;
  color:#6c7e62
}

.collection-heading>span:last-child {
  font-size:10px;
  color:#8b9382
}

.fruit-track {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  gap:8px
}

.fruit-level {
  background:none;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
  min-width:0;
  flex:1
}

.fruit-level .fruit-small {
  display:flex;
  justify-content:center;
  align-items:center;
  background:#eff3e5;
  border-radius:50%;
  width:45px;
  height:45px;
  transition:transform .2s,background .2s
}

.fruit-level img {
  width:43px;
  height:43px
}

.fruit-level:hover .fruit-small {
  transform:translateY(-4px);
  background:#e2ecd9
}

.fruit-level .fruit-number {
  font-size:8px;
  color:#9aa68b;
  letter-spacing:1px;
  margin-top:5px
}

.fruit-level:not(:last-child)::after {
  content:"›";
  position:absolute;
  left:calc(100% - 1px);
  top:11px;
  color:#c1cbb2;
  font-size:17px
}

.fruit-level.reached .fruit-small {
  background:#e1edda;
  box-shadow:0 0 0 1px #c2d4b6
}

.fruit-level.highest .fruit-small {
  background:#f5e4a7;
  box-shadow:0 0 0 2px #d6bf74
}

.fruit-level.final .fruit-small {
  background:#f8edd0
}

.fruit-level.highest .fruit-number {
  color:#827443;
  font-weight:bold
}

.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.4px;
  color:#929d88;
  padding:23px 1px 26px
}

.site-footer>span:last-child>span {
  margin-left:4px;
  color:#b7a369
}

.ambient {
  pointer-events:none;
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:-1
}

.ambient-leaf {
  position:absolute;
  width:60px;
  height:22px;
  background:#d5e3ce;
  border-radius:100% 0 100% 0;
  opacity:.6
}

.leaf-one {
  top:27%;
  left:-18px;
  transform:rotate(-25deg)
}

.leaf-two {
  right:-8px;
  bottom:20%;
  transform:rotate(15deg)
}

.ambient-dot {
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#e9d8a6
}

.dot-one {
  left:8%;
  bottom:24%
}

.dot-two {
  right:7%;
  top:21%;
  width:6px;
  height:6px;
  background:#d9b7a4
}

.game-screen {
  display:grid;
  grid-template-columns:200px minmax(260px,420px) 200px;
  gap:28px;
  justify-content:center;
  align-items:start;
  margin-top:22px
}

.left-rail,.right-rail {
  padding-top:57px;
  display:flex;
  flex-direction:column;
  gap:19px
}

.panel {
  border:1px solid #dde4d3;
  border-radius:21px;
  background:var(--cream);
  box-shadow:var(--shadow);
  padding:22px
}

.score-card {
  padding:22px 20px 0
}

.score-card>.eyebrow {
  font-size:9px;
  color:#7b8b70;
  display:flex;
  justify-content:space-between
}

.small-star {
  color:#bd9b50;
  font-size:17px;
  margin-top:-4px
}

.score-number {
  display:block;
  font-size:55px;
  letter-spacing:-3px;
  line-height:1.35;
  font-variant-numeric:tabular-nums
}

.score-message {
  font-size:9px;
  color:#9a9b81;
  display:block;
  height:29px
}

.score-message.new-best {
  color:#a28836
}

.best-row {
  display:flex;
  align-items:center;
  gap:7px;
  border-top:1px dashed #e6e3cc;
  margin:0 -2px;
  padding:16px 0;
  font-size:10px;
  color:#819077
}

.best-row svg {
  width:16px;
  height:16px;
  stroke:#bea453;
  fill:none;
  stroke-width:1.5;
  stroke-linejoin:round
}

.best-row strong {
  margin-left:auto;
  font-size:13px;
  color:#6f7960
}

.goal-card {
  text-align:center;
  background:#dfeada;
  padding:20px 15px
}

.goal-card>.eyebrow {
  font-size:8px;
  color:#718769;
  letter-spacing:1.1px
}

.goal-card>img {
  display:block;
  margin:10px auto 0;
  filter:drop-shadow(0 5px 3px #5c734417)
}

.goal-card p,.recipe-card p {
  font-size:11px;
  line-height:1.65;
  color:#829074;
  margin:8px 0 13px
}

.goal-progress {
  height:5px;
  overflow:hidden;
  background:#cbdac2;
  border-radius:5px;
  margin:16px 7px 7px
}

.goal-progress>span {
  display:block;
  height:100%;
  background:#74946c;
  border-radius:5px;
  width:14%;
  transition:width .6s
}

.goal-level {
  font-size:8px;
  letter-spacing:.5px;
  color:#8a9a7a
}

.little-note {
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:0;
  transform:rotate(-4deg)
}

.little-note>span {
  font-size:31px;
  color:#a5b58f
}

.little-note p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:14px;
  color:#8e9c7d;
  line-height:1.5;
  margin:0
}

.play-column {
  width:100%;
  min-width:0
}

.board-heading {
  height:49px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6px 10px
}

.board-heading>span {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  font-weight:bold;
  letter-spacing:1.9px;
  color:#7b8b6e
}

.board-heading .icon-button {
  width:35px;
  height:35px;
  border-radius:11px;
  background:#fffdf6aa
}

.board-heading .icon-button svg {
  width:18px;
  height:18px
}

.board-wrap {
  position:relative;
  border-radius:25px;
  overflow:hidden;
  background:#fffdf6;
  box-shadow:0 11px 0 -5px #b9cda32e,0 13px 35px #526f3420;
  border:1px solid #d5dfc9;
  aspect-ratio:420/590;
  touch-action:none
}

.board-wrap canvas {
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  outline-offset:-4px;
  cursor:crosshair
}

.board-instructions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:10px;
  color:#8a977d;
  margin:16px 0 5px
}

.board-instructions svg {
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:1.6;
  fill:none;
  stroke-linejoin:round
}

.board-instructions span span {
  margin:0 7px;
  color:#adb59e
}

.touch-controls {
  display:none
}

.next-card {
  text-align:center;
  background:#f4e4df;
  padding:21px 15px 22px;
  border-color:#ead9d1
}

.next-card>.eyebrow {
  color:#a08478;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px
}

.next-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d69d87
}

.next-preview {
  width:123px;
  height:123px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:8px auto 3px;
  border-radius:50%;
  background:#fff8f245
}

.next-preview>img {
  filter:drop-shadow(0 6px 5px #b3896620);
  transition:transform .2s
}

.next-caption {
  font-size:9px;
  color:#ae9384
}

.recipe-card {
  text-align:center;
  padding:20px 12px 17px
}

.recipe-card>.eyebrow {
  font-size:8px;
  color:#8b937a;
  letter-spacing:1.3px
}

.merge-example {
  display:flex;
  align-items:center;
  justify-content:center;
  margin:17px -3px 13px;
  gap:2px
}

.merge-example img {
  width:43px;
  height:43px
}

.merge-example span {
  color:#b5b8a2;
  font-size:15px
}

.recipe-card h3 {
  font-size:13px
}

.recipe-card p {
  margin-bottom:0;
  font-size:10px
}

.help-link {
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:10px;
  color:#8e9b80;
  padding:12px 0
}

.help-link svg {
  width:14px;
  height:14px
}

.help-link:hover {
  color:var(--green)
}

.danger-label {
  position:absolute;
  left:0;
  right:0;
  top:22%;
  text-align:center;
  pointer-events:none;
  font-size:10px;
  font-weight:bold;
  color:#c8654f;
  opacity:0;
  transition:opacity .2s
}

.board-wrap.danger .danger-label {
  opacity:1
}

.board-wrap.danger {
  border-color:#d69a85;
  animation:warning-glow .9s infinite alternate
}

.combo-badge {
  position:absolute;
  top:12px;
  right:12px;
  padding:8px 12px;
  border-radius:12px;
  background:#f9e3a8;
  color:#87712e;
  font-size:11px;
  font-weight:bold;
  opacity:0;
  transform:translateY(-10px);
  transition:.2s;
  pointer-events:none
}

.combo-badge.visible {
  opacity:1;
  transform:none
}

.discovery-toast {
  position:absolute;
  left:14px;
  right:14px;
  bottom:38px;
  text-align:center;
  background:#fffdf2ee;
  border:1px solid #e4d39a;
  border-radius:14px;
  padding:13px 8px;
  color:#86723d;
  font-size:11px;
  font-weight:bold;
  box-shadow:0 3px 8px #50452212;
  opacity:0;
  transform:translateY(10px);
  transition:.25s;
  pointer-events:none
}

.discovery-toast.visible {
  opacity:1;
  transform:none
}

.modal-layer {
  position:fixed;
  inset:0;
  z-index:10;
  background:#263c2b48;
  backdrop-filter:blur(7px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:fade-in .18s ease-out
}

.dialog {
  width:min(440px,100%);
  position:relative;
  background:var(--cream);
  border:1px solid #d9dfcc;
  border-radius:29px;
  padding:37px 33px 30px;
  box-shadow:0 24px 70px #24362b24;
  text-align:center;
  max-height:calc(100svh - 40px);
  overflow-y:auto;
  animation:dialog-in .23s ease-out
}

.dialog-close {
  position:absolute;
  right:13px;
  top:13px;
  width:32px;
  height:32px;
  background:transparent;
  border:none
}

.dialog-close svg {
  width:18px;
  height:18px
}

.dialog h2 {
  font-size:28px;
  letter-spacing:-1px;
  line-height:1.2;
  margin:9px 0 13px
}

.dialog .eyebrow {
  color:#96a17f;
  font-size:9px
}

.dialog p {
  color:#859079;
  font-size:12px;
  line-height:1.7;
  margin:7px 0 18px
}

.dialog-art {
  height:105px;
  width:105px;
  margin:0 auto 8px;
  filter:drop-shadow(0 6px 4px #80652512)
}

.dialog .button {
  width:100%;
  margin-top:10px
}

.button-secondary {
  background:#edf1e5;
  border:1px solid #d9e1cc;
  color:#788369
}

.dialog-link {
  background:none;
  color:#8e987e;
  font-size:11px;
  padding:17px 10px 0;
  text-decoration:underline;
  text-underline-offset:4px
}

.help-steps {
  display:flex;
  flex-direction:column;
  text-align:left;
  gap:16px;
  margin:25px 0
}

.help-step {
  display:flex;
  align-items:center;
  gap:15px
}

.help-step>span {
  font-size:12px;
  font-weight:bold;
  border-radius:50%;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e5eddb;
  flex-shrink:0;
  color:#7d9168
}

.help-step h3 {
  font-size:13px;
  margin:0 0 4px
}

.help-step p {
  font-size:11px;
  margin:0
}

.keyboard-note {
  font-size:10px;
  color:#909a83;
  padding:11px 0
}

.keyboard-note kbd {
  display:inline-flex;
  background:#edf0e4;
  border:1px solid #d8deca;
  border-radius:5px;
  font:inherit;
  padding:3px 6px;
  box-shadow:0 2px 0 #d8deca;
  margin:0 2px
}

.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  padding:20px 0;
  border-bottom:1px solid #e6e8d8;
  gap:15px
}

.volume-row { padding: 14px 0 17px; border-bottom: 1px solid #e6e8d8; text-align: left; }
.volume-row label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #7e8b71; }
.volume-row output { font-variant-numeric: tabular-nums; color: #5e7954; }
.volume-row input { width: 100%; height: 30px; margin: 6px 0 0; accent-color: #79a078; cursor: pointer; touch-action: pan-x; }
.setting-row h3 {
  font-size:13px;
  margin:0 0 4px
}

.setting-row p {
  font-size:10px;
  margin:0
}

.switch {
  width:48px;
  height:28px;
  border-radius:15px;
  background:#d6dccb;
  padding:3px;
  flex-shrink:0;
  transition:background .2s
}

.switch::before {
  content:"";
  width:22px;
  height:22px;
  border-radius:50%;
  display:block;
  background:#fffdf6;
  box-shadow:0 2px 4px #46553814;
  transition:transform .2s
}

.switch[aria-checked="true"] {
  background:#79a078
}

.switch[aria-checked="true"]::before {
  transform:translateX(20px)
}

.gameover-score {
  font-size:62px;
  color:var(--ink);
  font-weight:900;
  letter-spacing:-3px;
  line-height:1.2;
  display:block;
  margin:12px 0 4px
}

.results-row {
  display:flex;
  gap:10px;
  margin:22px 0
}

.results-row>div {
  background:#eff1e3;
  border:1px solid #e2e6d4;
  padding:13px 8px;
  border-radius:13px;
  flex:1;
  color:#8a9479;
  font-size:9px
}

.results-row strong {
  display:block;
  font-size:14px;
  color:#667b56;
  margin-top:6px
}

.new-record {
  background:#f7e8b6;
  color:#a08740;
  border-radius:20px;
  display:inline-block;
  padding:6px 14px;
  font-size:10px;
  font-weight:bold
}

.fruit-info-score {
  background:#e8eddd;
  padding:11px 20px;
  border-radius:12px;
  font-size:12px;
  color:#788965;
  margin:18px 0
}

.loading-screen {
  position:fixed;
  inset:0;
  z-index:100;
  background:#eff5e9;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity .3s
}

.loading-screen p {
  font-size:12px;
  color:#8b967d;
  letter-spacing:.3px
}

.loading-screen.finished {
  opacity:0;
  pointer-events:none
}

.noscript {
  position:fixed;
  inset:0;
  z-index:110;
  background:var(--cream);
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px
}

.screen-enter {
  animation:fade-in .3s
}

@keyframes fade-in {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}

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

@keyframes warning-glow {
  to {
    box-shadow:0 0 25px #d97d4935
  }
}

@media(hover:none) {
  .desktop-controls {
    display:none
  }
  .touch-controls {
    display:inline
  }
  .icon-button:hover,.button:hover {
    transform:none
  }
}

@media(min-width:1200px) and (min-height:850px) {
  .app {
    padding-top:10px
  }
  .home-screen {
    padding-top:32px;
    padding-bottom:25px;
    min-height:568px
  }
  .game-screen {
    margin-top:26px
  }
}

@media(max-width:950px) {
  .app {
    padding:0 25px
  }
  .game-screen {
    grid-template-columns:160px minmax(240px,380px) 160px;
    gap:18px
  }
  .panel {
    padding-left:14px;
    padding-right:14px
  }
  .score-number {
    font-size:48px
  }
  .goal-card>.eyebrow {
    font-size:7px
  }
  .home-screen {
    gap:18px;
    padding-left:5px;
    padding-right:5px
  }
  h1 {
    font-size:60px;
    letter-spacing:-3px
  }
  .home-description {
    font-size:14px
  }
  .home-meta {
    gap:15px
  }
  .fruit-level .fruit-small {
    width:40px;
    height:40px
  }
  .fruit-level img {
    width:38px;
    height:38px
  }
  .fruit-track {
    gap:5px
  }
}

@media(max-width:760px) {
  .app {
    max-width:580px;
    padding:0 20px
  }
  .site-header {
    height:80px
  }
  .header-note {
    display:none
  }
  .header-actions {
    gap:7px
  }
  .icon-button {
    width:39px;
    height:39px
  }
  .brand>span {
    font-size:17px
  }
  .brand img {
    width:37px;
    height:37px
  }
  .brand-party {
    font-size:8px
  }
  .home-screen {
    min-height:0;
    grid-template-columns:1fr;
    gap:0;
    text-align:center;
    padding:30px 0 0
  }
  .home-copy>.eyebrow {
    justify-content:center;
    font-size:9px
  }
  h1 {
    font-size:57px;
    line-height:1;
    letter-spacing:-3px;
    margin:16px 0
  }
  h1 br {
    display:none
  }
  h1>span {
    display:block
  }
  .home-description {
    font-size:13px;
    line-height:1.6;
    margin-bottom:20px
  }
  .play-button {
    justify-content:center;
    min-height:53px;
    min-width:250px;
    font-size:15px
  }
  .button-arrow {
    margin-left:18px
  }
  .text-button {
    margin:auto;
    padding-top:17px;
    font-size:10px
  }
  .text-button>span {
    display:inline;
    font-size:10px;
    margin-left:4px
  }
  .home-meta {
    justify-content:center;
    margin-top:22px
  }
  .home-art {
    width:290px;
    margin:16px auto 12px
  }
  .home-art canvas {
    margin-top:-4px
  }
  .party-sticker {
    width:61px;
    height:61px;
    font-size:7px;
    right:0;
    top:7%;
    box-shadow:0 0 0 4px #fae8a5
  }
  .party-sticker>span {
    font-size:14px
  }
  .sparkle-one {
    font-size:28px
  }
  .sparkle-two {
    font-size:23px
  }
  .art-caption {
    font-size:9px;
    margin-top:-7px
  }
  .fruit-collection {
    padding:15px 13px 12px;
    border-radius:17px;
    margin-top:15px
  }
  .collection-heading>.eyebrow {
    font-size:8px;
    letter-spacing:1px
  }
  .collection-heading>span:last-child {
    font-size:8px
  }
  .fruit-track {
    gap:2px;
    margin-top:11px
  }
  .fruit-level .fruit-small {
    width:34px;
    height:34px
  }
  .fruit-level img {
    width:33px;
    height:33px
  }
  .fruit-level:not(:last-child)::after {
    font-size:13px;
    top:9px;
    left:calc(100% - 2px)
  }
  .fruit-level .fruit-number {
    font-size:7px
  }
  .site-footer {
    font-size:8px;
    padding:19px 0 23px
  }
  .game-screen {
    grid-template-columns:1fr auto;
    gap:0 11px;
    margin-top:15px
  }
  .left-rail {
    grid-row:1;
    grid-column:1;
    padding:0;
    display:block
  }
  .score-card {
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0 0 8px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:0 15px;
    align-items:center
  }
  .score-card>.eyebrow {
    font-size:8px;
    grid-column:1;
    line-height:1
  }
  .score-card .small-star {
    display:none
  }
  .score-number {
    font-size:33px;
    line-height:1.3;
    grid-column:1;
    letter-spacing:-1.5px
  }
  .score-message {
    grid-column:2;
    grid-row:2;
    font-size:8px;
    height:auto
  }
  .best-row {
    grid-column:2;
    grid-row:1;
    border:0;
    padding:0;
    justify-content:flex-start;
    font-size:8px;
    gap:5px
  }
  .best-row strong {
    margin-left:4px;
    font-size:11px
  }
  .best-row svg {
    width:13px;
    height:13px
  }
  .goal-card,.little-note,.recipe-card,.help-link {
    display:none
  }
  .right-rail {
    grid-column:2;
    grid-row:1;
    padding:0;
    display:block;
    align-self:center
  }
  .next-card {
    display:flex;
    align-items:center;
    position:relative;
    background:#f4e5dfee;
    padding:4px 9px 4px 7px;
    border-radius:12px;
    gap:5px
  }
  .next-card>.eyebrow {
    font-size:7px;
    letter-spacing:1px;
    line-height:1.4;
    max-width:27px;
    display:block
  }
  .next-dot {
    display:none
  }
  .next-preview {
    width:46px;
    height:46px;
    margin:0;
    background:none
  }
  .next-preview>img {
    width:46px;
    height:46px
  }
  .next-card h3,.next-caption {
    display:none
  }
  .play-column {
    grid-column:1/3;
    grid-row:2;
    max-width:420px;
    margin:auto
  }
  .board-heading {
    height:35px;
    padding-bottom:8px;
    padding-left:2px
  }
  .board-heading>span {
    font-size:8px;
    letter-spacing:1.5px
  }
  .board-heading .icon-button {
    width:30px;
    height:30px;
    border-radius:9px
  }
  .board-wrap {
    border-radius:22px
  }
  .board-instructions {
    font-size:9px;
    margin-top:13px
  }
  .game-screen+.fruit-collection {
    margin-top:12px
  }
  .dialog {
    padding:32px 25px 25px;
    border-radius:25px
  }
  .dialog h2 {
    font-size:26px
  }
}

@media(max-width:390px) {
  .app {
    padding:0 13px
  }
  .brand>span {
    font-size:15px
  }
  .header-actions {
    gap:5px
  }
  .icon-button {
    width:36px;
    height:36px
  }
  .fullscreen-button {
    display:none
  }
  .fruit-collection {
    padding-left:8px;
    padding-right:8px
  }
  .fruit-level .fruit-small {
    width:27px;
    height:27px
  }
  .fruit-level img {
    width:28px;
    height:28px
  }
  .fruit-level:not(:last-child)::after {
    font-size:10px;
    top:7px
  }
  .collection-heading>span:last-child {
    font-size:7px
  }
  .home-art {
    width:265px
  }
  .home-meta {
    gap:15px
  }
  .home-meta>div:not(.meta-divider) {
    gap:7px
  }
  .site-footer {
    font-size:7px
  }
  .score-message {
    font-size:7px
  }
  .score-card {
    gap:0 10px
  }
}

@media(max-height:730px) and (min-width:761px) {
  .site-header {
    height:78px
  }
  .home-screen {
    min-height:420px;
    padding-top:17px;
    padding-bottom:6px
  }
  .home-art {
    max-width:365px;
    margin:auto
  }
  .home-copy h1 {
    font-size:56px;
    margin-top:14px;
    margin-bottom:14px
  }
  .home-description {
    margin-bottom:17px
  }
  .home-meta {
    margin-top:22px
  }
  .game-screen {
    grid-template-columns:180px minmax(250px,330px) 180px;
    margin-top:12px;
    gap:24px
  }
  .left-rail,.right-rail {
    padding-top:45px;
    gap:15px
  }
  .board-heading {
    height:38px
  }
  .panel {
    padding-top:16px;
    padding-bottom:16px
  }
  .score-card {
    padding-bottom:0
  }
  .goal-card img {
    width:75px;
    height:75px;
    margin-top:5px
  }
  .next-preview {
    width:95px;
    height:95px
  }
  .next-preview img {
    width:90px;
    height:90px
  }
  .fruit-collection {
    margin-top:8px;
    padding-top:13px;
    padding-bottom:10px
  }
  .fruit-track {
    margin-top:8px
  }
  .fruit-level .fruit-small {
    width:35px;
    height:35px
  }
  .fruit-level img {
    width:33px;
    height:33px
  }
  .site-footer {
    padding:14px 0
  }
}

@media(max-height:600px) and (max-width:760px) and (orientation:landscape) {
  .app {
    max-width:850px
  }
  .site-header {
    height:60px
  }
  .home-screen {
    grid-template-columns:1fr 1fr;
    text-align:left;
    padding:15px 0
  }
  .home-copy>.eyebrow {
    justify-content:flex-start
  }
  .home-copy h1 {
    font-size:43px
  }
  .home-meta {
    justify-content:flex-start
  }
  .home-art {
    width:245px;
    margin:0 auto
  }
  .home-description {
    font-size:11px;
    margin-bottom:13px
  }
  .text-button {
    margin-left:0
  }
  .game-screen {
    max-width:460px;
    grid-template-columns:1fr auto;
    margin:12px auto 0
  }
  .play-column {
    max-width:270px
  }
  .fruit-collection {
    margin-top:10px
  }
  .home-screen+.game-screen[hidden]+.fruit-collection {
    display:none
  }
  .board-instructions {
    margin-top:9px
  }
  .site-footer {
    padding:12px 0
  }
}

.menu-sound {
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  font-size:10px;
  color:#8a987b;
  padding:10px 0 0;
  margin-top:13px
}

.menu-sound svg {
  width:13px;
  height:13px
}

.menu-sound:hover {
  color:var(--green)
}

.help-art {
  margin:0 0 19px;
  gap:5px
}

.help-art img {
  width:64px;
  height:64px
}

.help-art span {
  font-size:18px
}

@media(max-width:760px) {
  .menu-sound {
    margin:12px auto 0;
    padding-top:0
  }
  .home-art {
    margin-top:8px
  }
}

@media(min-width:761px) {
  .is-game .app {
    padding-top:0
  }
  .is-game .site-header {
    height:80px
  }
  .is-game .game-screen {
    grid-template-columns:180px minmax(200px,min(420px,calc((100svh - 330px)*.71186))) 180px;
    gap:26px;
    margin-top:16px
  }
  .is-game .left-rail,.is-game .right-rail {
    padding-top:38px
  }
  .is-game .board-heading {
    height:38px
  }
  .is-game .fruit-collection {
    padding-top:13px;
    padding-bottom:10px;
    margin-top:10px
  }
  .is-game .fruit-track {
    margin-top:8px
  }
  .is-game .fruit-level .fruit-small {
    width:36px;
    height:36px
  }
  .is-game .fruit-level img {
    width:34px;
    height:34px
  }
  .is-game .site-footer {
    padding:15px 0 17px
  }
}

@media(min-width:761px) and (max-height:800px) {
  .is-game .site-header {
    height:64px
  }
  .is-game .game-screen {
    grid-template-columns:160px minmax(200px,min(420px,calc((100svh - 285px)*.71186))) 160px;
    gap:22px;
    margin-top:12px
  }
  .is-game .left-rail,.is-game .right-rail {
    padding-top:32px;
    gap:14px
  }
  .is-game .board-heading {
    height:32px
  }
  .is-game .score-card {
    padding-top:15px
  }
  .is-game .score-number {
    font-size:43px
  }
  .is-game .score-message {
    height:22px;
    font-size:8px
  }
  .is-game .best-row {
    padding:12px 0;
    font-size:9px
  }
  .is-game .goal-card {
    padding:14px 10px
  }
  .is-game .goal-card>img {
    width:65px;
    height:65px;
    margin-top:5px
  }
  .is-game .goal-card>h3 {
    font-size:12px
  }
  .is-game .goal-card>p,.is-game .little-note {
    display:none
  }
  .is-game .goal-progress {
    margin-top:13px
  }
  .is-game .next-card {
    padding:16px 10px
  }
  .is-game .next-preview {
    width:85px;
    height:85px
  }
  .is-game .next-preview>img {
    width:80px;
    height:80px
  }
  .is-game .next-card h3 {
    font-size:12px
  }
  .is-game .recipe-card {
    padding:15px 10px
  }
  .is-game .recipe-card p {
    font-size:9px
  }
  .is-game .merge-example {
    margin-top:12px;
    margin-bottom:9px
  }
  .is-game .merge-example img {
    width:35px;
    height:35px
  }
  .is-game .board-instructions {
    margin-top:11px;
    margin-bottom:0
  }
  .is-game .fruit-collection {
    padding-top:10px;
    padding-bottom:8px
  }
  .is-game .site-footer {
    padding:10px 0 13px
  }
}

@media(max-width:760px) and (orientation:portrait) {
  .is-game .site-header {
    height:70px
  }
  .is-game .play-column {
    max-width:min(420px,calc((100svh - 320px)*.71186));
    min-width:230px
  }
  .is-game .site-footer {
    display:none
  }
  .is-game .fruit-collection {
    padding-top:12px;
    padding-bottom:10px
  }
  .is-game .fruit-track {
    margin-top:8px
  }
  .is-game .collection-heading>span:last-child {
    font-size:7px
  }
  .is-game .board-instructions {
    margin-bottom:0
  }
}

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