:root {
  color-scheme: light;
  --forest: #254b32;
  --forest-dark: #173b27;
  --sage: #71935b;
  --cream: #fff5d9;
  --gold: #efb34b;
  --ink: #294631;
  --workshop-bg: url('assets/background.webp');
  --shadow: 0 4px 9px #43271030;
  font-family: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  color: var(--ink);
  background: #d9c8a7;
  background-image: radial-gradient(ellipse at 50% 35%, #fff9e2b3, transparent 67%), var(--workshop-bg);
  background-size: cover;
  background-position: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #31402b75, transparent 25%, transparent 75%, #31402b75);
  pointer-events: none;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #78c8c1; outline-offset: 3px; }
button:disabled { cursor: default; }
button, .item-slot { -webkit-touch-callout: none; }
button { transition: filter .15s, transform .15s, box-shadow .15s; }
button:active:not(:disabled) { transform: translateY(2px) scale(.97); filter: brightness(.97); }
button[hidden], [hidden] { display: none !important; }

.game-shell {
  width: min(100%, 580px);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
}
.game-shell::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 -12px;
  background: linear-gradient(#e2d4b222 0%, #f5e8c91a 75%, #b5864970 100%);
  pointer-events: none;
}

/* Soft, embossed controls are deliberately quiet around the playing field. */
.topbar { display: flex; align-items: center; gap: 7px; width: 100%; flex-shrink: 0; }
.level-pill, .coin-pill, .icon-btn, .timer-pill {
  box-shadow: inset 0 1px 2px #ffffffa6, inset 0 -3px 3px #1b3e2e42, 0 3px 0 #33472d42, 0 5px 10px #55432935;
  border: 2px solid #839a68;
  border-radius: 21px;
  min-height: 45px;
}
.level-pill, .coin-pill, .icon-btn {
  color: #fff7df;
  background: linear-gradient(145deg, #67895c, #426741 50%, #345536);
  text-shadow: 0 2px 1px #22412c88;
}
.level-pill { padding: 4px 12px; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; flex: 0 0 auto; }
.level-pill span { font-size: 10px; font-weight: 1000; letter-spacing: .07em; }
.level-pill strong { color: #ffe371; font-size: 22px; line-height: 1; font-weight: 1000; }
.timer-pill {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  color: #2c5138;
  background: linear-gradient(145deg, #fff6d9 10%, #f3d7a6 95%);
  border-color: #6a8560;
  box-shadow: inset 0 2px 0 #fffef5, inset 0 -3px 4px #bd88473d, 0 3px 0 #b58b5570, 0 5px 10px #55432935;
}
#timerLabel { font-size: clamp(20px, 5.9cqw, 32px); font-weight: 1000; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.limit-display { display: flex; align-items: center; flex-direction: column; gap: 2px; }
#limitKind { font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.timer-pill.urgent { color: #af5034; animation: timerPulse .9s ease-in-out infinite; }
.mini-clock { width: 26px; height: 29px; flex-shrink: 0; filter: drop-shadow(0 2px 1px #9455314a); }
.coin-pill { padding: 5px 9px 5px 6px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
#coinLabel { font-size: 17px; line-height: 1; font-weight: 1000; font-variant-numeric: tabular-nums; }
.coin-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ffe985, #ffc532 55%, #ed9517);
  color: #ce8513;
  font-size: 17px;
  font-weight: 1000;
  text-shadow: 0 1px #ffe887;
  border: 2px solid #ffd158;
  box-shadow: 0 1px 0 #b0710f, inset 0 0 0 2px #f6aa22;
}
.icon-btn { width: 42px; min-width: 42px; display: grid; place-items: center; border-radius: 15px; }
.icon-btn svg { width: 23px; height: 23px; fill: #fff7de; filter: drop-shadow(0 2px 0 #22412c50); }
.pause-btn { background: linear-gradient(145deg, #87ad6a, #466e43); }

.order-panel {
  width: min(78%, 350px);
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 8px 11px;
  border: 2px solid #fff9e6;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff9e4, #efcf9c);
  box-shadow: inset 0 -2px 2px #c49a6055, 0 3px 0 #a77b4d60, 0 5px 12px #71582e24;
  flex-shrink: 0;
}
.parcel-icon { display: grid; place-items: center; width: 37px; height: 38px; flex-shrink: 0; font-size: 30px; filter: drop-shadow(0 2px 1px #8d58244d); }
.parcel-icon svg { width: 38px; height: 38px; }
.order-content { min-width: 0; width: 100%; }
.order-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; color: #6d512f; font-size: 10px; font-weight: 900; }
#orderLabel { color: #2e5238; font-size: 19px; font-weight: 1000; line-height: 1; font-variant-numeric: tabular-nums; }
.progress-track { height: 12px; overflow: hidden; border-radius: 20px; background: #cead7d; border: 1px solid #ba9361; box-shadow: inset 0 2px 3px #90663445, 0 1px 0 #fff5d6; }
.progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(#b5d483, #77a350 45%, #547f37); border: 1px solid #557b35; box-shadow: inset 0 1px 1px #e6f6ae; transition: width .45s cubic-bezier(.22,.9,.3,1); }
.brand-line { width: 100%; min-height: 18px; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; flex-shrink: 0; }
.brand-line > span { font-size: 10px; font-weight: 1000; letter-spacing: .23em; color: #5d6d4f; text-shadow: 0 1px 0 #fff9dfb3; }
.sound-btn { font-size: 10px; font-weight: 900; display: flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 8px; color: #58734c; background: #fff5d94d; }
.sound-btn svg { width: 15px; height: 15px; }

/* Fixed scenario positions preserve the neighbor graph after boxes close. */
.board {
  display: grid;
  grid-template-columns: repeat(var(--board-columns, 2), minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  min-height: 0;
  max-height: var(--board-height, 92cqw);
  flex: 1 1 auto;
  margin: auto 0;
  padding: 0 1px;
  position: relative;
  perspective: 1000px;
  touch-action: none;
}
.column { display: grid; grid-template-rows: repeat(var(--board-rows, 2), minmax(0, 1fr)); min-height: 0; min-width: 0; gap: 7px; position: relative; }
.box { position: relative; min-width: 0; min-height: 0; isolation: isolate; perspective: 800px; transform-style: preserve-3d; border-radius: 5px; filter: drop-shadow(0 4px 2px #72502533); }
.box::before { content: ''; position: absolute; inset: 17% 1% -2%; z-index: -2; border-radius: 12px; background: #76532626; filter: blur(3px); }
.box-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; z-index: 1; }
.box-back { position: absolute; z-index: 0; left: 3%; right: 3%; top: 1%; height: 39%; border-radius: 5px 5px 0 0; border: 1px solid #b98246; background: repeating-linear-gradient(90deg, #ca995d20 0 1px, transparent 1px 3px), linear-gradient(105deg, #dcb57d, #c89250); box-shadow: inset 0 2px 1px #f8d9a4, inset 0 -5px 8px #9d6b3f45; transform: rotateX(-6deg); transform-origin: bottom; }
.box-back::after { content: ''; position: absolute; inset: 2px 1px auto; height: 3px; background: repeating-linear-gradient(90deg, #946238aa 0 1px, #e7c08b 1px 3px); border-radius: 1px; }
.box-floor { position: absolute; inset: 30% 3% 9%; background: linear-gradient(#e2cead 0%, #eee0c4 35%, #f1dfbb 100%); border: 1px solid #ceb48e; border-radius: 6px 6px 3px 3px; box-shadow: inset 0 5px 6px #8f633830, inset 4px 0 5px #926c3112; z-index: 1; }
.box-side { position: absolute; z-index: 4; width: 6%; top: 12%; bottom: 7%; background: linear-gradient(90deg, #c39156, #e7c18a, #b78247); border: 1px solid #a9743f; box-shadow: inset 1px 0 0 #ffe0ac; }
.box-side.left { left: 0; clip-path: polygon(65% 0, 100% 5%, 100% 100%, 0 91%); }
.box-side.right { right: 0; clip-path: polygon(0 4%, 35% 0, 100% 91%, 0 100%); }
.box-front { position: absolute; z-index: 6; left: 2%; right: 2%; bottom: 1%; height: 19%; border-radius: 0 0 5px 5px; background: repeating-linear-gradient(0deg, #e2b6740f 0 2px, #8f59240b 2px 3px), linear-gradient(105deg, #c18b4f, #e0b37a 48%, #cc975a); border: 1px solid #a86f35; box-shadow: inset 0 2px 0 #f8d39a, inset 0 -3px 3px #9e6a3540, 0 3px 2px #6944201a; }
.box-front::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 3px; background: repeating-linear-gradient(90deg, #eac996 0 2px, #a57544 2px 3px); }
.has-art .box-back, .has-art .box-side, .has-art .box-floor, .has-art .box-front { opacity: 0; }
/* Transparent packing decorations must never intercept the player's finger. */
.box > :not(.slots), .box > :not(.slots) *, .box::before,
.box-back::after, .box-front::before, .parcel-sticker::before,
.item-slot::before { pointer-events: none; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; gap: 0; position: absolute; z-index: 3; left: 4%; right: 4%; top: 28%; bottom: 14%; }
.item-slot { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; padding: 0; border: 0; border-radius: 9px; background: transparent; outline: none; touch-action: none; cursor: grab; }
.item-slot::before { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 13%; border-radius: 50%; background: #6d47212e; filter: blur(2px); z-index: -1; transition: opacity .15s; }
.item-slot:empty::before, .item-slot.empty::before { height: 70%; border-radius: 6px; background: #d9c5a470; box-shadow: inset 1px 2px 3px #8b65352b, 0 1px 0 #fff7dc70; filter: none; left: 12%; right: 12%; }
.item { display: block; max-width: 110%; width: 110%; max-height: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 3px 1px #76502a30); transform-origin: center bottom; transition: transform .18s cubic-bezier(.18,1,.4,1), filter .18s, opacity .12s; }
.item-slot.selected { background: radial-gradient(ellipse at 50% 80%, #fff5a8c4, #fff1a349 48%, transparent 75%); }
.item-slot.selected .item { transform: translateY(-8%) scale(1.13) rotate(-3deg); filter: drop-shadow(0 0 5px #ffdf72) drop-shadow(0 4px 2px #76502a40); }
.item-slot.hint-source .item { animation: none; transform: none; filter: drop-shadow(0 0 5px #fff7aa); }
.item-slot.hint-target { outline: 2px solid #f8d268; outline-offset: -3px; background: #fff6ae42; animation: targetPulse 1s ease-in-out infinite; }
.item-slot.drop-target { background: #d0ef976b; outline: 2px solid #85a95b; outline-offset: -2px; }
.item-slot.dragging .item { opacity: .12; transform: scale(.94); }
.item-slot.dragging.hint-source .item { animation: none; }
.drag-ghost { position: fixed; z-index: 150; pointer-events: none; width: 65px; height: 79px; transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 8px 5px #3a2b2860); animation: ghostIn .1s ease-out; }
.drag-ghost .item { width: 100%; max-width: 100%; }
.item.sprite-item { position: relative; overflow: hidden; flex: none; aspect-ratio: 1; height: auto; }
.item.sprite-item > img { position: absolute; left: var(--sprite-x); top: var(--sprite-y); width: 400%; height: 200%; max-width: none; max-height: none; object-fit: fill; pointer-events: none; filter: none; }
.drag-ghost .sprite-item { position: absolute; bottom: 0; }
.item-slot:disabled { cursor: default; }
/* Locked boxes have a closed lid and a single centered padlock. */
.box.locked-box .slots { visibility: hidden; }
.box.locked-box .box-art { visibility: hidden; }
.box.locked-box .box-front { opacity: 1; }
.box.locked-box .lid { opacity: 1; transform: none; }
.box.locked-box .lid-top::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #a6773f99; box-shadow: 1px 0 #ffe0ac77; }
.item-lock { position: absolute; z-index: 15; left: 50%; top: 18%; transform: translateX(-50%); width: clamp(34px, 10cqw, 54px); height: 62%; max-height: 89px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: none; }
.item-lock svg { display: block; width: 100%; height: auto; min-height: 0; flex: 0 1 auto; overflow: visible; filter: drop-shadow(0 2px 2px #62461c70); }
.item-lock small { min-width: 27px; padding: 2px 5px; border: 1px solid #ae7d33; border-radius: 8px; background: #fff5d8; color: #68471f; font-size: clamp(10px, 2.5cqw, 13px); line-height: 1.1; font-weight: 1000; box-shadow: 0 2px 3px #62461c40; }
.item-lock .lock-shackle { transform-box: fill-box; transform-origin: 100% 100%; }
.item-lock .lock-shackle.is-open { transform: rotate(32deg) translateY(-5px); }
.item-lock.lock-opening { animation: unlockLift 1s ease-out both; }
.item-lock.lock-opening .lock-shackle { animation: shackleOpen .28s ease-out both; }
.item-lock.lock-opening small { visibility: hidden; }
.box.unlocking-box .lid-top { opacity: 1; animation: lockedLidOpen .55s ease-in-out both; }
.box.unlocking-box .slots { animation: lockedContentsReveal .55s ease-out both; }
.just-unlocked .item { animation: unlockedGlow .8s ease-out both; }
.box-number { position: absolute; z-index: 14; left: 7%; bottom: 1%; padding: 1px 4px; border-radius: 4px; background: #f8d59cbd; color: #80552b; font-size: clamp(8px, 2cqw, 11px); font-weight: 900; }
.box.swap-allowed { outline: 2px solid #a1bd70; outline-offset: 2px; }
.box.swap-blocked { opacity: .48; }
.box.sealed .slots { visibility: hidden; }
.box.sealed .lid { opacity: 1; transform: none; }
.box.sealed .packing-tape { opacity: 1; transform: none; }
.box.sealed .parcel-sticker { opacity: 1; transform: scale(1) rotate(-8deg); }
.box.sealed .box-number { color: #426838; background: #e0edba; }
@keyframes unlockLift { 0% { opacity: 1; transform: translate(-50%,0) scale(.8); } 35% { opacity: 1; transform: translate(-50%,-20%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%,-95%) scale(.7); } }
@keyframes shackleOpen { from { transform: none; } to { transform: rotate(32deg) translateY(-5px); } }
@keyframes lockedLidOpen { 0%, 15% { transform: rotateX(0); opacity: 1; } 75% { opacity: 1; } 100% { transform: rotateX(100deg); opacity: 0; } }
@keyframes lockedContentsReveal { 0%, 30% { opacity: 0; } 100% { opacity: 1; } }
@keyframes unlockedGlow { 0%, 45% { filter: drop-shadow(0 0 8px #fff2a0); } 100% { filter: drop-shadow(0 3px 1px #76502a30); } }
.hint-spotlight { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.hint-spotlight svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hint-caption { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(92vw, 420px); text-align: center; padding: 11px 14px; border: 1px solid #ead59c; border-radius: 19px; color: #fff5d5; background: #294733f5; box-shadow: 0 7px 20px #102a2266; }
.hint-caption strong { display: block; font-size: 13px; }
.hint-caption span { display: block; margin-top: 5px; color: #d4dfc4; font-size: 10px; line-height: 1.4; }
.hint-caption button { pointer-events: auto; background: #ffffff13; color: #eddfb9; margin-top: 7px; border: 1px solid #ffffff30; padding: 6px 13px; border-radius: 12px; font-size: 10px; }
.game-shell.is-loading .board { visibility: hidden; }
.menu-play:disabled { cursor: wait; opacity: .8; }

/* The carton gets a real folded lid rather than merely fading out. */
.lid { opacity: 0; position: absolute; pointer-events: none; backface-visibility: visible; background: repeating-linear-gradient(90deg, #cb9a5d18 0 1px, transparent 1px 3px), linear-gradient(110deg, #e2b77e, #c99555); border: 1px solid #ad793d; box-shadow: inset 0 1px #f4d7a6; z-index: 10; }
.lid-left, .lid-right { top: 27%; height: 57%; width: 52%; }
.lid-left { left: 0; transform: rotateY(-96deg); transform-origin: left center; border-radius: 4px 0 0 4px; }
.lid-right { right: 0; transform: rotateY(96deg); transform-origin: right center; border-radius: 0 4px 4px 0; }
.lid-top { left: 0; right: 0; top: 1%; height: 83%; border-radius: 4px; transform: rotateX(100deg); transform-origin: top center; z-index: 11; background: linear-gradient(125deg, #e9c18c, #d3a26a); }
.packing-tape { position: absolute; z-index: 12; left: 43%; top: 1%; width: 15%; height: 83%; opacity: 0; transform: scaleY(0); transform-origin: center top; background: linear-gradient(90deg, #f4dc9fc9, #ffedb7de 40%, #e8ca8dbf); border-inline: 1px solid #d3ad6d9c; }
.parcel-sticker { position: absolute; z-index: 13; left: 61%; top: 49%; width: 27%; height: 23%; border-radius: 3px; background: #fff7dd; box-shadow: 0 1px 2px #6e4a2633; opacity: 0; transform: scale(1.5) rotate(-8deg); }
.parcel-sticker::before { content: '♥'; position: absolute; inset: 0; display: grid; place-items: center; color: #6c8b51; font-size: clamp(8px, 3cqw, 17px); }
.box.matching { animation: boxGlow .4s ease-in-out infinite alternate; z-index: 8; }
.box.matching .item { animation: matchPop .35s cubic-bezier(.2,.8,.4,1) both; }
.box.matching .item-slot:nth-child(2) .item { animation-delay: .04s; }
.box.matching .item-slot:nth-child(3) .item { animation-delay: .08s; }
.box.packing { z-index: 12; }
.box.packing .slots { animation: contentsSink .35s ease-in .08s forwards; }
.box.packing .lid { opacity: 1; }
.box.packing .lid-left { animation: foldLeft .22s ease-in-out .08s forwards; }
.box.packing .lid-right { animation: foldRight .22s ease-in-out .13s forwards; }
.box.packing .lid-top { animation: foldTop .25s ease-in-out .2s forwards; }
.box.packing .packing-tape { animation: tapeSeal .15s ease-out .43s forwards; }
.box.packing .parcel-sticker { animation: stickerStamp .16s cubic-bezier(.2,1.7,.5,1) .55s forwards; }
.box.shipping { animation: parcelShip .3s cubic-bezier(.4,0,.3,1) both; }
.box.falling { animation: parcelFall .48s cubic-bezier(.22,.8,.35,1) both; }
.box.arriving { animation: newParcelFall .52s cubic-bezier(.2,.8,.3,1) both; }
.box.settling .item { animation: itemSettle .35s ease-out; }

.tutorial-tip { min-height: 28px; flex-shrink: 0; align-self: center; max-width: 95%; margin: 0; padding: 4px 12px; border-radius: 20px; background: #fff7dfc9; box-shadow: 0 1px 3px #a5895d1c; color: #6a6448; text-align: center; font-size: 11px; font-weight: 800; line-height: 1.45; }
.tutorial-tip strong { color: #50763e; font-weight: 1000; }
.tutorial-tip.mode-locks { background: #fff0c9; color: #7a572a; box-shadow: inset 0 0 0 1px #c8a366, 0 2px 4px #916a2a24; }
.tutorial-tip.mode-neighbors { background: #e4edcd; color: #49653b; box-shadow: inset 0 0 0 1px #9cb779; }
.tutorial-tip.mode-moves { background: #ede4f3; color: #70578a; box-shadow: inset 0 0 0 1px #bca6ce; }
footer { flex-shrink: 0; }
.booster-tray { position: relative; display: flex; justify-content: space-around; align-items: center; gap: 12px; padding: 10px 17px 12px; border-radius: 29px; background: repeating-linear-gradient(0deg, #fff5d410 0 2px, #87522a0c 2px 4px, transparent 4px 7px), linear-gradient(100deg, #b5814e, #dbb483 30%, #dfb581 55%, #bc8b57); border: 1px solid #a87644; box-shadow: inset 0 2px 2px #f5d4a7, inset 0 -3px 2px #9d6b394d, 0 5px 0 #8e613343, 0 9px 15px #74542d2a; }
.booster-tray::before { content: ''; position: absolute; inset: 5px 10px; border-radius: 24px; border-top: 1px solid #f8dbb128; pointer-events: none; }
.booster { width: 20%; aspect-ratio: .95; min-height: 62px; max-height: 94px; padding: 6px 4px 3px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 19px; background: linear-gradient(145deg, #fffce7 8%, #ffe8b9 70%, #f0cf98); border: 2px solid #fff8df; box-shadow: inset 0 1px 1px white, inset 0 -3px 3px #ddb16b4d, 0 3px 0 #9d6a37, 0 5px 5px #69411b35; }
.booster-icon { display: flex; justify-content: center; align-items: center; width: 44px; max-width: 90%; height: 38px; flex-shrink: 0; line-height: 1; font-size: 34px; font-weight: 1000; color: #e79d23; text-shadow: 0 2px #af6720, 0 -1px #fff7bd; filter: drop-shadow(0 2px 1px #9f662e28); }
.booster-icon svg { width: 41px; height: 41px; overflow: visible; }
.booster-icon img { width: 44px; height: 44px; object-fit: contain; }
.booster:nth-child(2) .booster-icon { color: #6fa854; text-shadow: 0 2px #4a782b, 0 -1px #d3ec9c; }
.booster:nth-child(3) .booster-icon { color: #f5b62e; }
.booster:nth-child(4) .booster-icon { color: #548cce; }
.booster-count { position: absolute; right: -7px; bottom: -7px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(#8bb56d, #4f7944); color: #fffbe7; border: 2px solid #c9da9f; box-shadow: 0 2px 2px #46603b50; font-size: 13px; line-height: 1; font-weight: 1000; text-shadow: 0 1px 1px #2e4f2e; }
.booster-label { font-size: 8px; font-weight: 900; color: #927041; white-space: nowrap; }
.booster:disabled { filter: grayscale(.5); opacity: .6; }

/* Short, warm feedback; no screen shake or flashing full-screen effects. */
.toast { position: fixed; z-index: 160; top: max(26%, 160px); left: 50%; transform: translate(-50%, -10px); width: max-content; max-width: min(88vw, 430px); background: #2c4b36ec; color: #fff8df; padding: 11px 18px; border-radius: 18px; border: 1px solid #b5c298; box-shadow: 0 7px 22px #23352333; text-align: center; font-size: 13px; font-weight: 900; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.combo-toast { position: absolute; top: 40%; left: 50%; z-index: 40; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; font-size: clamp(20px, 6cqw, 32px); font-weight: 1000; white-space: nowrap; color: #fff2a7; text-shadow: 0 3px 0 #b6792e, 2px 0 #b6792e, -2px 0 #b6792e, 0 7px 14px #76562670; }
.combo-toast.visible { animation: comboRise 1.5s ease-out both; }
.particle { position: fixed; z-index: 80; width: 9px; height: 9px; border-radius: 2px; background: #fff4b2; box-shadow: 0 0 8px #ffd765; pointer-events: none; animation: sparkleFly .8s ease-out both; }
.particle::after { content: ''; position: absolute; inset: 3px -3px; background: inherit; border-radius: 2px; }
.confetti { position: fixed; z-index: 220; top: -20px; width: 7px; height: 12px; border-radius: 2px; pointer-events: none; animation: confettiFall 2.5s ease-in forwards; }

.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: #263a277d; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: max(22px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)); animation: veilIn .2s ease-out; }
.modal { width: min(100%, 390px); max-height: 90dvh; overflow-y: auto; padding: 26px 25px 24px; border-radius: 30px; border: 2px solid #fffbeb; background: linear-gradient(145deg, #fffbea, #f3dfb9); box-shadow: inset 0 -4px 4px #d6b5813b, 0 6px 0 #96724480, 0 22px 60px #10261855; text-align: center; position: relative; animation: modalIn .35s cubic-bezier(.2,1.2,.4,1) both; }
.modal::before { content: ''; position: absolute; inset: 7px; border: 1px solid #cfb98c40; border-radius: 23px; pointer-events: none; }
.modal header { position: relative; }
.modal-icon { display: block; font-size: 51px; line-height: 1.2; margin-bottom: 10px; filter: drop-shadow(0 3px 1px #93714730); }
.modal-title { font-size: 28px; line-height: 1.15; font-weight: 1000; letter-spacing: -.035em; margin: 0 0 10px; color: #355c3b; }
.modal-subtitle { color: #8b7857; font-size: 13px; line-height: 1.6; font-weight: 700; margin: 0 auto 18px; max-width: 285px; }
.modal-subtitle strong { color: #5e7647; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; position: relative; }
.primary-btn, .secondary-btn { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 12px 18px; border-radius: 15px; font-size: 14px; font-weight: 1000; min-height: 45px; }
.primary-btn { color: #fffbe8; background: linear-gradient(#82a768, #567e47); border: 2px solid #a6c18a; text-shadow: 0 1px 1px #355930; box-shadow: inset 0 1px #d5e7b273, 0 3px 0 #3b6339; }
.secondary-btn { background: #f9edcf; color: #7d6b49; border: 1px solid #d8c39a; box-shadow: inset 0 1px 0 #fffdf0, 0 2px 0 #c5ac7d55; }
.modal .close-btn { position: absolute; right: 16px; top: 13px; width: 28px; height: 28px; border-radius: 50%; background: #ebdfc3; color: #9b8963; font-size: 20px; font-weight: 900; }
.stars { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 35px; margin: 6px 0 14px; color: #eab244; text-shadow: 0 2px #b7852a; filter: drop-shadow(0 3px 2px #d4a94335); }
.stars span:nth-child(2) { font-size: 47px; transform: translateY(-4px); }
.reward-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 17px; margin: 0 0 20px; border: 1px solid #d8b677; border-radius: 30px; background: #f4e3b5; color: #8d7139; font-size: 16px; font-weight: 1000; }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin: 17px 0 22px; position: relative; }
.level-tile { aspect-ratio: .9; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 5px 1px; font-size: 20px; font-weight: 1000; color: #8c744c; background: linear-gradient(#fff8e4, #ead2a6); border: 1px solid #d9bb89; box-shadow: inset 0 1px #fffdf3, 0 3px 0 #ccb180; }
.level-tile small { font-size: 8px; color: #c5983f; letter-spacing: -.05em; }
.level-tile.current { color: #fff8d8; background: linear-gradient(#8cae6e, #567f47); border-color: #bbcf99; box-shadow: inset 0 1px #d5e8ae99, 0 3px 0 #456338; }
.level-tile.current small { color: #ffe399; }
.level-tile.completed { border-color: #b8c28e; background: linear-gradient(#eff3d5, #d5dfaf); color: #5c784a; }
.level-tile.locked { opacity: .48; }
.level-tile .stars { font-size: 11px; letter-spacing: 0; margin: 0; gap: 0; }
.level-tile.current .stars { color: #ffe399; }
.wordmark i { margin-left: 9px; font-size: 8px; letter-spacing: .03em; font-style: normal; opacity: .8; }
.help-rules { text-align: left; color: #756446; font-size: 13px; line-height: 1.65; }
.help-rules p { margin: 0 0 13px; }
.help-rules b, .help-rules strong { color: #416638; }
.level-note { font-size: 11px; line-height: 1.6; color: #88734f; margin: 15px 0; }
.modal > .primary-btn { width: 100%; }
.text-btn { background: transparent; color: #6f7752; padding: 10px; font-size: 12px; border-radius: 12px; }
.victory-stars { margin: 0 0 15px; color: #efb541; text-shadow: 0 2px 0 #bf8731; font-size: 42px; letter-spacing: 5px; }
.victory-stars span { color: #dac8a6; text-shadow: none; }
.result-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 22px; }
.result-row > span { flex: 1; font-size: 10px; color: #8a7754; background: #e6d7b54d; border-radius: 12px; padding: 10px 4px; }
.result-row b { display: block; color: #567443; font-size: 21px; margin-bottom: 3px; }
.result-row .reward { color: #b18528; font-size: 18px; font-weight: 900; }
.help-list { text-align: left; padding-left: 20px; color: #7d6a4c; font-size: 13px; line-height: 1.6; margin: 10px 0 22px; }
.help-list li { margin-bottom: 9px; padding-left: 3px; }
.help-list strong { color: #527340; }
.stat-row { display: flex; justify-content: space-around; gap: 8px; margin: 0 0 20px; }
.stat-row > div { flex: 1; border-radius: 12px; padding: 9px; background: #e4d4b04d; color: #9b845b; font-size: 10px; font-weight: 800; }
.stat-row strong { display: block; color: #557246; font-size: 20px; font-weight: 1000; }

/* A game home: resources above the village, objects at the sides, Play below. */
.main-menu { width: min(100%, 520px); height: 100vh; height: 100dvh; margin: 0 auto; overflow-y: auto; position: relative; isolation: isolate; box-shadow: 0 0 80px #233a4040; }
.home-content { --safe-top: max(12px, env(safe-area-inset-top)); position: relative; height: 100%; min-height: 560px; overflow: hidden; background: linear-gradient(#d9eef0, #e6f0d1 42%, #c8d9b5 75%, #e5cf9f); }
.home-world { position: absolute; inset: 85px 0 75px; pointer-events: none; mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.home-world img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 67%; }
.home-topbar { position: absolute; z-index: 4; top: var(--safe-top); left: 14px; right: 14px; display: grid; grid-template-columns: 48px 1.1fr 1fr 43px; gap: 9px; align-items: center; }
.home-avatar { width: 48px; height: 48px; padding: 3px; border: 3px solid #ffdd88; border-radius: 50%; background: linear-gradient(#a5c687, #628e62); box-shadow: 0 3px 0 #92733d, 0 4px 9px #56745244, inset 0 1px 1px #fff9ce; }
.home-avatar img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 1px #5d583e60); }
.home-resource { min-width: 0; height: 41px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 3px 8px; border: 2px solid #fff3ce; border-radius: 20px; background: linear-gradient(#fff8e7, #e9cfa5); box-shadow: 0 3px 0 #ba9861, inset 0 1px #fff; }
.home-resource > span:last-child { text-align: center; min-width: 0; }
.home-resource small { display: block; color: #8d724a; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.home-resource strong { display: block; font-size: 19px; line-height: 1.05; color: #685437; font-weight: 1000; font-variant-numeric: tabular-nums; }
.home-resource .coin-icon { width: 28px; height: 28px; font-size: 21px; flex: 0 0 28px; }
.home-resource svg { width: 31px; height: 31px; flex-shrink: 0; filter: drop-shadow(0 2px 1px #b27b2850); }
.home-settings { width: 43px; height: 43px; padding: 6px; border-radius: 15px; background: linear-gradient(#f5f1d6, #c8dcbd); border: 2px solid #fff5d9; box-shadow: 0 3px 0 #8ba282; }
.home-settings svg { width: 100%; height: 100%; }
.home-delivery { position: absolute; z-index: 3; top: calc(var(--safe-top) + 65px); left: 24px; right: 24px; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 7px; border: 2px solid #fff5d8; border-radius: 16px; background: linear-gradient(#f7f6dcec, #d7e6baeb); box-shadow: 0 3px 0 #8faa7955, 0 5px 12px #42644120; }
.home-delivery > svg { width: 36px; height: 36px; flex-shrink: 0; margin-top: -8px; transform: rotate(-6deg); }
.home-delivery > span:nth-child(2) { flex: 1; }
.home-delivery strong { display: block; font-size: 12px; color: #506a42; font-weight: 900; }
.home-delivery small { display: block; margin-top: 2px; font-size: 9px; color: #789064; }
.delivery-stars { font-size: 19px; letter-spacing: 2px; color: #efb444; text-shadow: 0 1px #a47a35, 0 -1px #fff8d4; }
.home-brand { position: absolute; z-index: 2; top: calc(var(--safe-top) + 125px); left: 90px; right: 90px; text-align: center; pointer-events: none; }
.home-eyebrow { display: block; font-size: 8px; letter-spacing: .25em; color: #66816d; font-weight: 900; }
.home-brand h1 { margin: 8px 0 9px; font-size: clamp(43px, 12vw, 62px); font-weight: 1000; line-height: .85; letter-spacing: -.055em; color: #416a49; text-shadow: 0 2px #fff7d9, 0 4px #c3d6a4, 0 6px 12px #4a6e4f25; }
.home-brand h1 span { display: block; color: #345b3d; }
.home-brand p { margin: 0; font-size: 9px; font-weight: 800; letter-spacing: .02em; color: #5c795a; }
.home-side { position: absolute; z-index: 4; top: 34%; display: flex; flex-direction: column; gap: clamp(12px, 2.2vh, 24px); width: 80px; }
.home-side-left { left: 13px; }
.home-side-right { right: 13px; }
.home-object { display: flex; flex-direction: column; align-items: center; width: 80px; height: 82px; background: transparent; padding: 0; position: relative; }
.object-art { width: 66px; height: 66px; display: flex; justify-content: center; align-items: center; border: 2px solid #fff1b9; border-radius: 22px; background: radial-gradient(ellipse at 30% 10%, #fff5d4, #dfce9ddc 62%, #b99b61dd); box-shadow: inset 0 2px 3px #fff9de, 0 3px 0 #9c8553, 0 6px 12px #485e3a40; position: relative; }
.object-art > svg, .object-art > img { width: 55px; height: 55px; object-fit: contain; filter: drop-shadow(0 3px 1px #72562c44); }
.object-art > .object-mini { width: 29px; height: 29px; position: absolute; right: -5px; bottom: 0; transform: rotate(10deg); }
.object-ribbon { z-index: 1; background: linear-gradient(#75bba3, #3d8d76); border: 1px solid #c0e2bc; border-radius: 5px 5px 9px 9px; box-shadow: 0 2px 0 #306d59, 0 3px 6px #31472e33; margin-top: -5px; width: 80px; min-height: 23px; padding: 4px 1px 3px; font-size: 10px; font-weight: 900; line-height: 1.1; color: #fff9df; text-shadow: 0 1px #31725f; white-space: nowrap; }
.gold .object-ribbon { background: linear-gradient(#f6bf61, #d89a3a); border-color: #ffe2a1; box-shadow: 0 2px 0 #ac7731, 0 3px 6px #31472e33; text-shadow: 0 1px #ae7c2c; }
.home-actions { position: absolute; z-index: 5; left: 19px; right: 19px; bottom: calc(95px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 112px; gap: 14px; }
.home-play { width: 100%; min-height: 76px; padding: 12px; gap: 12px; border-radius: 22px; border: 3px solid #eff6ae; background: linear-gradient(#b5d65d 0%, #87b947 38%, #629236 100%); box-shadow: inset 0 2px 1px #e8f5b3, inset 0 -4px 2px #557f3c55, 0 5px 0 #527432, 0 8px 14px #28442b50; }
.home-play svg { width: 27px; height: 27px; flex-shrink: 0; }
.home-play > span { min-width: 0; }
.home-play strong { display: block; font-size: clamp(20px, 6.4vw, 29px); line-height: 1.1; letter-spacing: .01em; text-shadow: 0 2px #4d7934; }
.home-play small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.2; color: #f4f6ca; font-weight: 800; }
.home-play:disabled { filter: saturate(.7); }
.home-levels { border: 3px solid #ffe6a7; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff8dd; font-weight: 1000; font-size: 15px; text-shadow: 0 1px #ac7027; background: linear-gradient(#ffdc82, #eab34f 45%, #d59638); box-shadow: inset 0 2px 1px #fff1bd, 0 5px 0 #aa772e, 0 8px 14px #28442b40; }
.home-levels svg { width: 36px; height: 36px; }
.home-nav { position: absolute; z-index: 5; bottom: 0; left: 0; right: 0; height: calc(76px + env(safe-area-inset-bottom)); padding: 7px 10px max(6px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: linear-gradient(#fff1c4, #eddbad 8%, #dec38c); border-top: 3px solid #fff6d8; box-shadow: 0 -3px 0 #b99e65, 0 -6px 18px #745b3629; }
.home-nav button { height: 61px; padding: 3px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: transparent; font-size: 9px; font-weight: 900; color: #8d7955; }
.home-nav button.active { background: linear-gradient(#b8cb8b, #91af6a); box-shadow: inset 0 1px 2px #f0f4cc, inset 0 -2px 3px #64834655; color: #fff8da; text-shadow: 0 1px #6a884a; }
.home-nav svg, .home-nav img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 1px #886b3c44); }
.modal.collection-modal { display: flex; flex-direction: column; height: min(740px, calc(100vh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)))); height: min(740px, calc(100dvh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)))); max-height: 100%; overflow: hidden; padding: 22px 20px 18px; }
.collection-heading { flex: 0 0 auto; padding-bottom: 12px; }
.collection-heading .modal-title { font-size: 25px; }
.collection-heading .modal-subtitle { margin-bottom: 8px; font-size: 12px; line-height: 1.4; }
.collection-count { display: inline-block; padding: 4px 12px; border-radius: 20px; background: #dce6be; color: #557443; font-size: 11px; font-weight: 900; }
.collection-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #b19b70 transparent; padding: 3px 4px 8px; position: relative; }
.collection-scroll:focus-visible { outline: 2px solid #78a474; outline-offset: -2px; border-radius: 12px; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; margin: 0; }
.collection-item { min-width: 0; border-radius: 16px; padding: 10px 4px; background: #eadab657; border: 1px solid #dfcda5; }
.collection-item > .item { width: 66px; height: 66px; max-width: 100%; margin-inline: auto; object-fit: contain; display: block; filter: drop-shadow(0 3px 2px #8f734333); }
.collection-item strong { display: block; min-height: 28px; margin-top: 5px; font-size: 11px; line-height: 1.25; color: #776346; overflow-wrap: anywhere; }
.collection-item small { display: block; min-height: 28px; font-size: 10px; line-height: 1.4; color: #8b7857; }
.collection-item.is-collected { border-color: #b8c591; background: #e6ebcb80; }
.collection-item.is-collected small { color: #577644; font-weight: 800; }
.collection-item.is-locked { background: #e9dfc36b; border-style: dashed; }
.collection-lock { display: grid; place-items: center; width: 66px; height: 66px; max-width: 100%; margin-inline: auto; border-radius: 50%; background: #dfcea55c; }
.collection-lock svg { width: 42px; height: 42px; opacity: .8; }
.collection-footer { flex: 0 0 auto; position: relative; margin-top: 8px; padding-top: 12px; border-top: 1px solid #d8c39a80; }
.collection-footer .primary-btn { width: 100%; min-height: 48px; }
.collection-reward { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px; border: 1px solid #bacb93; border-radius: 15px; background: #e1e9bd99; text-align: left; }
.collection-reward > .item { flex: 0 0 46px; width: 46px; height: 46px; }
.collection-reward small, .collection-reward strong { display: block; }
.collection-reward small { font-size: 11px; color: #788456; }
.collection-reward strong { font-size: 15px; color: #46663c; }
@media (max-height: 500px) {
  .modal.collection-modal { padding-top: 12px; padding-bottom: 12px; }
  .collection-heading { padding-bottom: 8px; }
  .collection-heading .modal-title { font-size: 20px; margin-bottom: 5px; }
  .collection-heading .modal-subtitle { display: none; }
  .collection-footer { margin-top: 4px; padding-top: 8px; }
}
.helper-list { margin: 20px 0; display: grid; gap: 12px; }
.helper-row { display: flex; align-items: center; gap: 12px; text-align: left; }
.helper-row > svg { width: 46px; height: 46px; flex-shrink: 0; }
.helper-row > span { flex: 1; }
.helper-row strong { display: block; font-size: 13px; color: #49643a; }
.helper-row small { display: block; margin-top: 3px; font-size: 11px; color: #8b7857; line-height: 1.4; }
.helper-row > b { font-size: 14px; color: #ab874c; }
.reward-star { width: 60px; height: 60px; }
.reward-tiers { display: grid; gap: 12px; text-align: left; }
.reward-tiers > div { padding: 10px 12px; border: 1px solid #dfcda5; border-radius: 14px; background: #fff4d4; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; }
.reward-tiers b { color: #e3ab3e; font-size: 19px; letter-spacing: 2px; }
.reward-tiers span { grid-column: 1; font-size: 10px; color: #8b7857; }
.reward-tiers strong { grid-column: 2; grid-row: 1 / 3; font-size: 12px; color: #6f8452; }
@media (max-height: 740px) {
  .home-brand { top: calc(var(--safe-top) + 115px); }
  .home-brand h1 { font-size: 45px; margin-top: 5px; }
  .home-brand p { font-size: 8px; }
  .home-side { top: 33%; gap: 10px; width: 72px; }
  .home-object { width: 72px; height: 71px; }
  .object-art { width: 57px; height: 57px; border-radius: 18px; }
  .object-art > svg, .object-art > img { width: 48px; height: 48px; }
  .object-art > .object-mini { width: 25px; height: 25px; }
  .object-ribbon { width: 72px; min-height: 21px; font-size: 9px; }
  .home-actions { bottom: calc(87px + env(safe-area-inset-bottom)); }
  .home-play { min-height: 65px; }
  .home-nav { height: calc(69px + env(safe-area-inset-bottom)); }
  .home-nav button { height: 55px; }
  .home-nav svg, .home-nav img { width: 33px; height: 33px; }
}
@media (max-height: 620px) {
  .home-content { --safe-top: max(8px, env(safe-area-inset-top)); }
  .home-topbar { transform: scale(.94); transform-origin: top center; }
  .home-delivery { top: calc(var(--safe-top) + 53px); min-height: 38px; }
  .home-delivery > svg { width: 30px; height: 30px; }
  .home-brand { top: calc(var(--safe-top) + 100px); }
  .home-brand h1 { font-size: 39px; }
  .home-brand p, .home-eyebrow { display: none; }
  .home-side { top: 30%; gap: 8px; }
  .home-object { height: 60px; }
  .object-art { width: 45px; height: 45px; }
  .object-art > svg, .object-art > img { width: 38px; height: 38px; }
  .home-world { inset: 55px 0 73px; }
}
@media (max-width: 360px) {
  .home-topbar { left: 9px; right: 9px; gap: 6px; grid-template-columns: 42px 1fr 1fr 36px; }
  .home-avatar { width: 42px; height: 42px; }
  .home-settings { width: 36px; height: 36px; }
  .home-resource { gap: 4px; padding-inline: 4px; }
  .home-resource strong { font-size: 17px; }
  .home-resource svg, .home-resource .coin-icon { width: 25px; height: 25px; flex-basis: 25px; }
  .home-delivery { left: 16px; right: 16px; gap: 6px; }
  .home-delivery strong { font-size: 11px; }
  .delivery-stars { font-size: 16px; }
  .home-side-left { left: 6px; }
  .home-side-right { right: 6px; }
  .home-brand { left: 72px; right: 72px; }
  .home-actions { left: 13px; right: 13px; grid-template-columns: 1fr 87px; gap: 11px; }
  .home-play { gap: 6px; padding-inline: 7px; }
  .home-play svg { width: 22px; height: 22px; }
  .home-play strong { font-size: 20px; }
  .home-play small { font-size: 10px; }
}

@keyframes hintWiggle { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-8%) rotate(-6deg); } 65% { transform: translateY(-8%) rotate(5deg); } }
@keyframes targetPulse { 50% { background: #ffe79c88; outline-color: #ffce40; } }
@keyframes timerPulse { 50% { box-shadow: 0 0 0 3px #d6804c33, 0 3px 0 #b58b5570; } }
@keyframes ghostIn { from { opacity: .5; } to { opacity: 1; } }
@keyframes boxGlow { from { filter: drop-shadow(0 0 3px #ffe17e) drop-shadow(0 4px 2px #72502533); } to { filter: drop-shadow(0 0 9px #ffd24b) drop-shadow(0 4px 2px #72502533); } }
@keyframes matchPop { 0%,100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-12%) scale(1.08); } }
@keyframes contentsSink { to { opacity: 0; transform: translateY(20%) scale(.8); } }
@keyframes foldLeft { to { transform: rotateY(0); } }
@keyframes foldRight { to { transform: rotateY(0); } }
@keyframes foldTop { to { transform: rotateX(0); } }
@keyframes tapeSeal { 0% { opacity: 1; transform: scaleY(0); } 100% { opacity: 1; transform: scaleY(1); } }
@keyframes stickerStamp { to { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes parcelShip { 0% { transform: translateY(0) scale(1); opacity: 1; } 30% { transform: translateY(-9%) scale(1.035); opacity: 1; } 100% { transform: translateY(-22%) scale(.45); opacity: 0; } }
@keyframes parcelFall { 0% { transform: translateY(var(--fall-distance, -100%)); } 72% { transform: translateY(3%); } 86% { transform: translateY(-1.8%); } 100% { transform: translateY(0); } }
@keyframes newParcelFall { 0% { opacity: 0; transform: translateY(var(--fall-distance, -110%)); } 18% { opacity: 1; } 74% { transform: translateY(3%); } 88% { transform: translateY(-1%); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes itemSettle { 0% { transform: translateY(-8%) rotate(-2deg); } 65% { transform: translateY(0) rotate(2deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes comboRise { 0% { opacity: 0; transform: translate(-50%,-30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } 35%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-100%) scale(.9); } }
@keyframes sparkleFly { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 20px),var(--dy, -50px)) rotate(90deg) scale(.3); } }
@keyframes confettiFall { 0% { opacity: 1; transform: translate(0,-10px) rotate(0); } 100% { opacity: 0; transform: translate(var(--drift, 50px),105vh) rotate(700deg); } }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (min-width: 600px) {
  .game-shell { width: min(580px, 66dvh); padding-top: 16px; padding-bottom: 12px; }
  .game-shell::before { background: linear-gradient(#fff6d936, #fff5d50f 60%, #b7895360); box-shadow: 0 0 80px #f9edcc60; }
  .topbar { gap: 10px; }
  .level-pill, .timer-pill, .coin-pill, .icon-btn { min-height: 52px; }
  .level-pill span { font-size: 12px; }
  .level-pill strong { font-size: 26px; }
  .coin-pill { padding-inline: 9px; }
  #coinLabel { font-size: 21px; }
  .icon-btn { width: 48px; min-width: 48px; }
  .order-panel { padding-block: 9px; }
  .board { gap: 9px; }
  .column { gap: 9px; }
  .booster { min-height: 70px; }
  .booster-label { font-size: 9px; }
  .booster-icon { font-size: 40px; height: 44px; }
}
@media (max-height: 760px) {
  .game-shell { gap: 6px; padding-top: max(8px, env(safe-area-inset-top)); }
  .level-pill, .coin-pill, .timer-pill, .icon-btn { min-height: 39px; border-radius: 15px; }
  .order-panel { padding-block: 5px; border-radius: 17px; }
  .brand-line { min-height: 14px; }
  .brand-line > span { font-size: 8px; }
  .board { gap: 6px; }
  .column { gap: 5px; }
  .tutorial-tip { min-height: 21px; padding-block: 2px; font-size: 10px; }
  .booster-tray { padding: 7px 16px 10px; border-radius: 23px; }
  .booster { min-height: 51px; max-height: 67px; border-radius: 15px; padding-top: 3px; }
  .booster-icon { height: 31px; font-size: 30px; }
  .booster-icon svg { width: 34px; height: 34px; }
  .booster-label { font-size: 7px; }
}
@media (max-width: 350px) {
  .game-shell { padding-inline: 7px; gap: 6px; }
  .topbar { gap: 4px; }
  .level-pill { padding-inline: 7px; }
  .level-pill span { font-size: 8px; }
  .level-pill strong { font-size: 19px; }
  #timerLabel { font-size: 20px; }
  .mini-clock { width: 22px; }
  .coin-pill { padding-inline: 5px; gap: 3px; }
  #coinLabel { font-size: 14px; }
  .coin-icon { width: 21px; height: 21px; font-size: 14px; }
  .icon-btn { width: 34px; min-width: 34px; }
  .board { gap: 4px; }
  .column { gap: 5px; }
  .booster-tray { gap: 9px; padding-inline: 12px; }
  .modal { padding-inline: 18px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .game-shell { width: min(480px, 74dvh); gap: 4px; padding-top: 5px; padding-bottom: 4px; }
  .brand-line { display: none; }
  .level-pill, .timer-pill, .coin-pill, .icon-btn { min-height: 31px; }
  .level-pill span { font-size: 7px; }
  .level-pill strong { font-size: 17px; }
  #timerLabel { font-size: 18px; }
  .mini-clock { width: 20px; height: 23px; }
  .coin-icon { width: 18px; height: 18px; font-size: 12px; }
  #coinLabel { font-size: 13px; }
  .icon-btn { min-width: 29px; width: 29px; }
  .order-panel { padding-block: 3px; gap: 6px; }
  .parcel-icon { width: 25px; height: 25px; font-size: 23px; }
  .order-label { font-size: 8px; margin-bottom: 2px; }
  #orderLabel { font-size: 14px; }
  .progress-track { height: 8px; }
  .tutorial-tip { display: none; }
  .booster-tray { padding: 5px 11px 7px; border-radius: 19px; }
  .booster { min-height: 37px; max-height: 42px; border-radius: 10px; }
  .booster-icon { height: 26px; font-size: 24px; }
  .booster-icon svg { width: 27px; height: 27px; }
  .booster-label { display: none; }
  .booster-count { width: 18px; height: 18px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Larger deliveries keep the same readable three-column parcels, with a scrollable board. */
.board.large-board { flex: 1 1 0; max-height: none; overflow-y: auto; overflow-x: hidden; align-items: start; overscroll-behavior: contain; touch-action: pan-y; padding: 5px 3px 10px; scrollbar-width: thin; scrollbar-color: #9b8755 #efdfb477; }
.board.large-board .column { height: max-content; grid-template-rows: repeat(var(--board-rows), min(28cqw, 150px)); gap: 8px; }
.board-scroll-controls { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-shrink: 0; color: #587348; font-size: 10px; }
.board-scroll-controls span { margin-right: auto; padding-left: 5px; }
.board-scroll-controls button { min-width: 34px; height: 27px; border-radius: 10px; border: 1px solid #b69e6c; background: #fff2d3; color: #4e703e; font-size: 20px; font-weight: 900; }
.tutorial-tip.mode-challenge { max-width: 100%; font-size: 10px; background: #f5e7cd; box-shadow: inset 0 0 0 1px #ceb990; }
.box-rules { position: absolute; left: 6%; top: 5%; right: 6%; z-index: 16; display: flex; gap: 3px; justify-content: flex-end; pointer-events: none; }
.box-rules > span { padding: 1px 5px; border-radius: 6px; font-size: clamp(10px, 2.9cqw, 15px); line-height: 1.25; font-weight: 1000; border: 1px solid #ffffffb3; box-shadow: 0 1px 3px #3d462950; }
.neighbor-badge { color: #275f60; background: #c4e6d8; }
.deadline-badge { color: #954c32; background: #ffe1af; font-variant-numeric: tabular-nums; }
.locked-item:not(:empty) { border-radius: 7px; }
.locked-item .item { opacity: .5; filter: saturate(.5); }
.individual-lock { left: calc(4% + (var(--lock-slot) + .5) * 30.6667%); top: 47%; width: clamp(23px, 6.5cqw, 34px); height: 40%; max-height: 60px; }
.individual-lock small { min-width: 20px; font-size: 9px; padding: 1px 3px; }
.keyed-lock { top: 8%; height: 73%; max-height: none; gap: 0; }
.keyed-lock > svg { width: 65%; max-height: 45%; }
.keyed-lock small { font-size: 9px; padding: 1px 4px; }
.lock-key { display: block; width: 30px; height: 30px; }
.lock-key > .item { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.box.jammed-box .lid-top { background: linear-gradient(125deg, #cfb094, #ae7958); }
.box.jammed-box .item-lock small { color: #9c3e2d; }
.item.mystery-item { display: flex; align-items: center; justify-content: center; width: 86%; height: 78%; border-radius: 11px; color: #fff3ce; background: linear-gradient(145deg, #af92cd, #7755a1); border: 2px solid #e0c7ed; box-shadow: inset 0 2px 2px #e1c8f0, 0 3px 5px #67488b44; font-size: clamp(22px, 6cqw, 36px); font-weight: 1000; }
@media (orientation: landscape) and (max-height: 600px) { .board.large-board .column { grid-template-rows: repeat(var(--board-rows), 24cqw); } .board-scroll-controls { font-size: 8px; } .board-scroll-controls button { height: 23px; } }

/* The journey scrolls only through revealed stops; its actions remain fixed. */
.modal.journey-modal, .modal.shop-modal, .modal.daily-modal { display: flex; flex-direction: column; width: min(100%, 430px); height: min(780px, calc(100vh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)))); height: min(780px, calc(100dvh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)))); max-height: 100%; overflow: hidden; padding: 0; }
.journey-heading, .shop-heading { flex: 0 0 auto; padding: 20px 18px 12px; position: relative; }
.journey-eyebrow { display: block; margin-bottom: 6px; font-size: 9px; letter-spacing: .2em; font-weight: 900; color: #8b815c; }
.journey-heading .modal-title, .shop-heading .modal-title { font-size: 27px; margin-bottom: 6px; }
.journey-heading .modal-subtitle { font-size: 12px; margin-bottom: 0; }
.shop-scroll { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #99ac79 transparent; }
.shop-scroll:focus-visible { outline: 2px solid #78a474; outline-offset: -3px; }
.modal.journey-modal { height: min(740px, calc(100vh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)))); height: min(740px, calc(100dvh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)))); overscroll-behavior: none; }
.journey-find-current { margin: 8px auto 0; min-height: 30px; padding: 5px 12px; color: #567247; font-size: 11px; border: 1px solid #cad2ad; border-radius: 20px; background: #e3ebcd70; }
.journey-scroll { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; overflow-anchor: none; scrollbar-width: thin; scrollbar-color: #a2b489 transparent; border-block: 1px solid #c5d4ac; background: radial-gradient(ellipse at 30% 20%, #fff8d480, transparent 65%), linear-gradient(#e5e9df,#d9e4bc); }
.journey-scroll:focus-visible { outline: 2px solid #78a474; outline-offset: -3px; }
.journey-map { position: relative; width: 100%; }
.journey-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.journey-path path { fill: none; stroke: #fef8d5; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 3 13; }
.journey-path path.journey-path-outline { stroke: #acb98a60; stroke-width: 13; stroke-dasharray: none; }
.journey-stop { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 132px; height: 126px; padding: 0; background: transparent; transform: translate(-50%,-50%); isolation: isolate; }
.journey-stop:active:not(:disabled) { transform: translate(-50%,-50%) scale(.97); }
.journey-stop:focus-visible { outline-offset: 3px; border-radius: 28px; }
.journey-stop::before { content: ''; position: absolute; z-index: -1; inset: 8px -6px 16px; border: 2px solid transparent; border-radius: 50%; }
.journey-stop.is-selected::before { border-color: #80a465; background: #fdf8c66b; box-shadow: 0 0 0 5px #f9f7da6b; }
.journey-island { display: block; width: 130px; height: 102px; flex-shrink: 0; filter: drop-shadow(0 5px 2px #68794224); pointer-events: none; }
.journey-here { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border-radius: 12px; background: #58794a; border: 1px solid #e0ebba; box-shadow: 0 2px 3px #53704435; color: #fff9dd; font-size: 8px; font-weight: 900; letter-spacing: .07em; }
.journey-stop-stars { margin-top: -1px; color: #efb84c; font-size: 19px; line-height: 1.2; letter-spacing: 3px; text-shadow: 0 1px 1px #8c6d3d; }
.journey-stop-stars span { color: #bdc8a0; text-shadow: 0 1px #9aaa83; }
.journey-stop.is-locked .journey-island { opacity: .6; filter: saturate(.5); }
.journey-lock { position: absolute; left: 47px; top: 17px; width: 38px; height: 38px; }
.journey-lock svg { width: 100%; height: 100%; }
.journey-next-label { color: #7d8865; font-size: 11px; font-weight: 800; }
.journey-footer { flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; padding: 14px 17px 19px; position: relative; }
.journey-footer button { width: 100%; }
.journey-selection strong { display: block; color: #526b42; font-size: 13px; line-height: 1.35; }
.journey-selection small { display: block; margin-top: 4px; color: #8b7d5a; font-size: 10px; line-height: 1.4; }
.shop-heading { padding-bottom: 10px; }
.shop-balance { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 6px 13px; border-radius: 20px; background: #eadab666; border: 1px solid #d9c69b; }
.shop-balance strong { font-size: 17px; color: #526a3e; }
.shop-balance > span:last-child { font-size: 10px; color: #8a7856; }
.shop-balance .coin-icon { width: 22px; height: 22px; font-size: 16px; }
.shop-scroll { padding: 0 16px 10px; }
.shop-note { margin: 3px 6px 13px; font-size: 11px; line-height: 1.5; color: #8c7a58; min-height: 33px; }
.coin-packs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.coin-pack { position: relative; min-width: 0; padding: 10px 9px 12px; border: 1px solid #dfc796; border-radius: 20px; background: linear-gradient(#fff9e7,#efdfbb); box-shadow: inset 0 1px #fffdf4, 0 3px 0 #b8986330; }
.coin-pack.featured { border: 2px solid #8baa66; background: linear-gradient(#eff5d9,#e1e9c1); }
.coin-pack.best-value { border-color: #cda652; background: linear-gradient(#fff2c7,#eed9a6); }
.pack-tag { display: block; min-height: 16px; color: #8a7750; font-size: 10px; font-weight: 900; }
.featured .pack-tag { color: #5c7c44; }
.pack-art { display: block; width: 83px; height: 62px; margin: 2px auto; }
.coin-pack h2 { font-size: 23px; line-height: 1.05; margin: 3px 0; letter-spacing: -.03em; color: #4b683c; }
.pack-unit { font-size: 8px; font-weight: 900; letter-spacing: .15em; color: #a18a59; }
.coin-pack p { font-size: 11px; margin: 6px 0 10px; color: #8b7857; }
.pack-buy { width: 100%; min-height: 40px; padding: 8px 3px; font-size: 13px; border-radius: 12px; }
.pack-buy:disabled { opacity: .6; filter: saturate(.5); }
.shop-footer { flex: 0 0 auto; padding: 8px 18px 18px; border-top: 1px solid #d8c39a66; position: relative; }
.shop-footer .primary-btn { width: 100%; }
.store-retry { display: block; margin: 0 auto 7px; font-size: 10px; min-height: 28px; }
.shop-booster-link { padding: 16px 5px 8px; background: transparent; color: #637c49; font-size: 12px; font-weight: 800; }
.booster-wallet { color: #5a7441; font-size: 17px; font-weight: 900; }
.booster-buy { flex: 0 0 auto; min-width: 62px; min-height: 48px; padding: 6px; border: 1px solid #c6ae7d; border-radius: 12px; background: #f4e2b6; color: #866c39; font-size: 11px; line-height: 1.6; }
.noads-card { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 10px 12px; align-items: center; padding: 17px 15px 14px; margin-bottom: 18px; border: 1px solid #afbd88; border-radius: 21px; background: linear-gradient(125deg,#f7f6dc,#e2eac9); box-shadow: inset 0 1px #fffdef,0 3px 0 #9ca57430; text-align: left; }
.noads-art svg { display: block; width: 58px; height: 64px; }
.noads-copy .journey-eyebrow { font-size: 7px; letter-spacing: .13em; margin-bottom: 5px; }
.noads-copy h2 { margin: 0 0 4px; font-size: 23px; color: #4b683c; }
.noads-copy p { font-size: 11px; line-height: 1.6; color: #7c7c58; margin: 0; }
.noads-buy { grid-column: 1/-1; width: 100%; min-height: 44px; padding: 10px; font-size: 13px; border-radius: 13px; }
.noads-buy:disabled { opacity: .65; }
.noads-card.is-owned .noads-buy { opacity: 1; background: #d2e0b4; box-shadow: none; color: #527142; }
.store-footer-actions { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.store-footer-actions .store-retry { flex: 1; margin: 0 0 7px; min-height: 36px; padding: 5px 0; }
.store-footer-actions .store-retry:disabled { opacity: .5; }
html[data-no-ads="true"] [data-ad-placement] { display: none !important; }

/* Separate daily screens: content scrolls while the action and Back stay visible. */
.daily-menu-badge { position: absolute; z-index: 3; top: 3px; right: 6px; display: grid; place-items: center; width: 19px; height: 19px; border: 2px solid #fff2cf; border-radius: 50%; background: #c7774f; color: #fff7df; font-size: 12px; font-weight: 900; box-shadow: 0 2px 4px #6e502343; }
.daily-heading { flex: 0 0 auto; padding: 18px 17px 12px; }
.daily-heading .modal-title { font-size: 27px; margin: 0 0 5px; }
.daily-heading .modal-subtitle { font-size: 11px; margin: 0 0 5px; line-height: 1.5; }
.daily-reset { color: #819368; font-size: 10px; font-weight: 800; }
.daily-scroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #a6b180 transparent; padding: 0 15px 12px; }
.daily-scroll:focus-visible { outline: 2px solid #78a474; outline-offset: -3px; }
.modal.daily-quest-modal { height: min(640px, calc(100vh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)))); height: min(640px, calc(100dvh - max(22px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)))); }
.daily-quest-art { display: grid; place-items: center; width: 112px; height: 112px; margin: 4px auto 20px; border-radius: 50%; background: radial-gradient(circle,#fff7d7,#eee3bd 65%,transparent 66%); }
.daily-quest-art > svg { width: 94px; height: 94px; transform: rotate(-6deg); filter: drop-shadow(0 5px 2px #9f845333); }
.daily-quest-prize-label { color: #7b8461; font-size: 11px; font-weight: 800; }
.daily-quest-scroll .daily-footnote { margin-top: 17px; }
.daily-quest { border: 1px solid #b5c494; border-radius: 20px; padding: 15px; background: linear-gradient(145deg,#f2f5dc,#dfe8c5); text-align: left; box-shadow: inset 0 1px #fffdef,0 3px 0 #a0ac7424; }
.daily-quest-heading { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.daily-quest-heading .journey-eyebrow { font-size: 8px; letter-spacing: .13em; margin-bottom: 4px; }
.daily-quest-heading h2 { font-size: 18px; margin: 0; color: #4e693e; }
.daily-quest-count { flex: 0 0 auto; padding: 6px 10px; border-radius: 13px; border: 1px solid #b9c79b; color: #607c48; background: #f9f8df; font-size: 15px; }
.daily-quest > p { font-size: 11px; line-height: 1.5; color: #7b8461; margin: 8px 0 10px; }
.quest-parcels { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0; }
.quest-parcel { position: relative; display: grid; place-items: center; width: 40px; height: 39px; border-radius: 12px; background: #d9e2be; border: 1px dashed #a9b88d; }
.quest-parcel svg { width: 29px; height: 29px; filter: saturate(.3); opacity: .35; }
.quest-parcel.is-done { background: #f8ecc1; border: 1px solid #c0af79; }
.quest-parcel.is-done svg { opacity: 1; filter: none; }
.quest-parcel b { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #739557; color: #fff9d9; font-size: 11px; }
.quest-reward-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; border-top: 1px solid #b2c38b66; padding-top: 12px; }
.daily-quest-prize { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.daily-quest-claim { flex: 0 0 auto; min-height: 40px; font-size: 12px; padding: 8px 12px; border-radius: 12px; }
.daily-quest-claim:disabled { opacity: .6; }
.daily-calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 10px; text-align: left; }
.daily-calendar-heading:first-child { margin-top: 4px; }
.daily-calendar-heading h2 { font-size: 15px; margin: 0; color: #617146; }
.daily-calendar-heading > span { font-size: 9px; color: #a08a5d; white-space: nowrap; }
.daily-calendar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.daily-day { min-width: 0; min-height: 91px; display: flex; flex-direction: column; align-items: center; border: 1px solid #dfcba4; border-radius: 13px; padding: 8px 3px 5px; background: linear-gradient(#faf0d5,#efe1c0); box-shadow: 0 2px 0 #bca46d20; }
.daily-day-number { font-size: 10px; font-weight: 900; color: #a08a5d; }
.daily-day-reward { flex: 1; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 3px; margin: 6px 0; }
.daily-coin-chip { display: inline-flex; align-items: center; gap: 3px; color: #8f702e; font-size: 14px; font-weight: 900; white-space: nowrap; }
.daily-coin-chip > span { color: #d2a139; font-size: 14px; }
.daily-booster-chip { display: inline-flex; align-items: center; gap: 1px; color: #6b8251; font-size: 10px; font-weight: 900; white-space: nowrap; }
.daily-booster-chip svg { width: 17px; height: 17px; }
.daily-day-tag { font-size: 7px; line-height: 1.5; color: #ad9670; }
.daily-day.is-weekly { background: linear-gradient(#fff1c7,#ecd8a0); border-color: #cfb16c; }
.daily-day.is-today { border: 2px solid #85a365; padding: 7px 2px 4px; background: linear-gradient(#f5f5d6,#e0eac0); box-shadow: 0 2px 0 #8fa46455; }
.daily-day.is-today .daily-day-tag { color: #5d8143; font-weight: 900; }
.daily-day.is-claimed { opacity: .63; background: #e8e5cd; }
.daily-day.is-claimed .daily-day-tag { color: #648545; }
.daily-day.is-grand { grid-column: 1/-1; display: grid; grid-template-columns: 65px minmax(0,1fr); gap: 3px 12px; padding: 13px 16px; min-height: 119px; border-color: #c5a658; background: radial-gradient(ellipse at 15% 70%,#fff7cf,transparent 55%),linear-gradient(120deg,#f9e8b5,#e8d6a0); text-align: left; }
.daily-grand-art { grid-column: 1; grid-row: 1/5; width: 63px; height: 63px; transform: rotate(-7deg); }
.daily-day.is-grand .daily-day-number, .daily-grand-title, .daily-day.is-grand .daily-day-reward, .daily-day.is-grand .daily-day-tag { grid-column: 2; }
.daily-grand-title { font-size: 20px; color: #7d6934; }
.daily-day.is-grand .daily-day-reward { justify-content: flex-start; margin: 3px 0; gap: 5px 8px; }
.daily-day.is-grand .daily-coin-chip { font-size: 21px; width: 100%; }
.daily-day.is-grand .daily-day-tag { font-size: 9px; }
.daily-day.is-grand.is-today { border-color: #82a45f; }
.daily-footnote { color: #9d8a65; font-size: 10px; line-height: 1.6; margin: 14px 3px 4px; }
.daily-star-link { font-size: 10px; min-height: 34px; }
.daily-footer { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 17px; border-top: 1px solid #d8c39a66; }
.daily-footer button { width: 100%; min-height: 43px; padding: 10px; font-size: 13px; }
.daily-calendar-claim:disabled { opacity: .6; }
.daily-win-note { display: block; width: 100%; padding: 12px; margin: 12px 0; border-radius: 13px; background: #e1e9c5; border: 1px solid #b0c28b; color: #5e7e44; font-size: 12px; font-weight: 900; }
.daily-win-progress { color: #809361; font-size: 11px; margin: 8px 0; }
@media(max-width:380px) { .daily-calendar { grid-template-columns: repeat(4,minmax(0,1fr)); } .daily-quest { padding: 12px; } .daily-quest-heading h2 { font-size: 16px; } .daily-quest-count { padding: 5px 7px; } }
@media(max-height:620px) { .daily-quest-art { width: 75px; height: 75px; margin-bottom: 12px; } .daily-quest-art > svg { width: 64px; height: 64px; } }
@media(max-height:500px) { .daily-heading { padding: 10px 14px 7px; } .daily-heading .journey-eyebrow,.daily-heading .modal-subtitle { display: none; } .daily-heading .modal-title { font-size: 22px; } .daily-footer { display: grid; grid-template-columns: 1fr 1fr; padding: 9px 14px 12px; } }
@media(max-height:500px) { .journey-heading,.shop-heading { padding-block:10px 7px; } .journey-heading .modal-subtitle,.journey-eyebrow { display:none; } .journey-heading .modal-title,.shop-heading .modal-title { font-size:22px; } .journey-footer,.shop-footer { padding-bottom:12px; } }
@media(max-height:600px) { .journey-heading { padding-top: 10px; padding-bottom: 8px; } .journey-heading .modal-subtitle { display:none; } .journey-find-current { margin-top:3px; } .journey-footer { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 14px 13px; } .journey-selection { grid-column:1/-1; } .journey-selection small { display:none; } .journey-footer button { padding-inline:8px; font-size:12px; } }

/* Saving errors stay visible; restoring never starts a fresh game over a failed read. */
.save-boot { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 24px; background: #edf0d9; color: #526f44; }
.save-boot section { max-width: 330px; text-align: center; }
.save-boot h1 { margin: 10px 0; font-size: 34px; }
.save-boot p { font-size: 14px; line-height: 1.6; }
.save-boot-mark { color: #d3a044; font-size: 52px; }
.save-boot button { min-width: 150px; margin-top: 12px; }
.device-save-notice { position: fixed; z-index: 9999; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; max-width: 420px; margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid #c5aa70; border-radius: 16px; background: #fff0cf; color: #755b35; box-shadow: 0 4px 16px #37452930; font-size: 11px; line-height: 1.5; }
.device-save-notice button { flex: 0 0 auto; padding: 9px; border-radius: 9px; background: #6e9259; color: #fff8df; font-size: 11px; font-weight: 800; }

/* Information stays reachable without leaving the current game. */
.settings-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:6px 0}
.settings-links a{color:#495d38;text-decoration:underline;text-underline-offset:4px;font-size:15px;min-height:44px;display:flex;align-items:center}
.settings-links a:focus-visible{outline:3px solid #7d9859;outline-offset:3px;border-radius:4px}

.offline-status { grid-column: 1/-1; border-top: 1px solid #b8c59b; padding-top: 12px; color: #4b683c; }
.offline-status p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; }
.offline-status progress { width: 100%; height: 12px; accent-color: #658c50; }
.offline-status .secondary-btn { width: 100%; margin-top: 5px; min-height: 44px; }

/* Ad loading keeps the same soft modal layout and disables repeated actions. */
.modal[aria-busy="true"] .modal-actions { opacity:.6; pointer-events:none; }
.modal[aria-busy="true"]::after { content:"Preparing video…"; display:block; margin-top:12px; color:#49643a; font-size:14px; }
.helper-row { flex-wrap:wrap; }
.helper-row > [data-reward] { flex-basis:100%; margin-left:58px; text-align:left; }