@font-face { font-family: 'Matcha World'; src: url('fonts/MatchaWorld.ttf') format('truetype'); font-weight: 100 900; font-display: block; size-adjust: 90%; }

:root {
  --ol: #3f2a1d;
  --wood: #4a3324;
  --gold: #ffcf5a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #2d2233; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; font-family: 'Matcha World', system-ui, sans-serif; color: var(--wood); user-select: none; -webkit-user-select: none; }

#app { position: relative; width: min(100vw, 75vh); height: 100vh; height: 100dvh; overflow: hidden; background: #9fd8f0; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hidden { display: none !important; }
.ic { width: 1em; height: 1em; flex: none; }
small { font-size: .55em; margin-left: .12em; }
img { -webkit-user-drag: none; }

/* Cream counter tag (same art as Cozy Critter Sort's coin counter) */
.tag {
  display: inline-flex; align-items: center; justify-content: center; gap: .25em;
  background: url('ui/tag_medium.png') center / 100% 100% no-repeat;
  aspect-ratio: 2.25; height: clamp(46px, 7vh, 60px); padding: 0 16% .1em;
  font-size: clamp(18px, 3vh, 26px); font-weight: 800; line-height: 1;
}
.tag .ic { font-size: 1.15em; margin-top: -.1em; }
.best.record { animation: glow .9s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 3px var(--gold)); }
@keyframes glow { 50% { transform: scale(1.1); } }

/* Wooden icon buttons (Cozy Critter Sort icons) */
.imgbtn { background: none; border: 0; padding: 0; width: 68px; height: 68px; cursor: pointer; transition: transform .08s; }
.imgbtn img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.imgbtn:active { transform: scale(.9); }
.imgbtn.big { width: 92px; height: 92px; }
.imgbtn.mid { width: 80px; height: 80px; }
.imgbtn.small { width: 54px; height: 54px; }

/* Big cream tag button with a play arrow */
.tagbtn {
  display: flex; align-items: center; justify-content: center;
  background: url('ui/tag_big.png') center / 100% 100% no-repeat; border: 0; padding: 0;
  aspect-ratio: 2.6; width: clamp(170px, 50vw, 230px); font-size: clamp(44px, 7vh, 58px); cursor: pointer; transition: transform .08s;
}
.tagbtn:active { transform: scale(.93); }

/* HUD */
#hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 10px 0; pointer-events: none; }
#hud .imgbtn { pointer-events: auto; }
.dist {
  font-size: clamp(34px, 6.5vh, 58px); font-weight: 800; color: #fff; line-height: 1; margin-top: 4px;
  text-shadow: 3px 0 0 var(--ol), -3px 0 0 var(--ol), 0 3px 0 var(--ol), 0 -3px 0 var(--ol),
               2px 2px 0 var(--ol), -2px 2px 0 var(--ol), 2px -2px 0 var(--ol), -2px -2px 0 var(--ol), 0 6px 0 var(--ol);
}

/* Screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.screen.dim { background: rgba(45, 34, 51, .35); justify-content: center; }
.topbar { align-self: stretch; display: flex; justify-content: space-between; align-items: flex-start; padding: max(10px, env(safe-area-inset-top)) 10px 0; }

.logo { margin: .5vh 0 0; width: min(84%, 360px); line-height: 0; }
.logo img { width: 100%; height: auto; filter: drop-shadow(0 5px 0 rgba(63, 42, 29, .25)); animation: logoBob 3s ease-in-out infinite; }
@keyframes logoBob { 50% { transform: translateY(-4px) rotate(-1deg); } }
@keyframes bob { 50% { transform: translateY(-6px) scale(1.04); } }

/* Dialogs: tile_square 9-slice, like Cozy Critter Sort */
.card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: solid transparent; border-width: 42px; border-image: url('ui/tile_square.png') 140 fill / 42px / 0 stretch;
  padding: 2px 8px 6px; min-width: 250px;
  animation: pop .28s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.goDist { font-size: 64px; font-weight: 800; line-height: 1; }
.card .btns { display: flex; align-items: center; gap: 14px; margin-top: 6px; }

/* First-time gesture hints */
.hint {
  position: absolute; left: 50%; top: 42%; width: 104px; height: 104px; margin-left: -52px;
  display: flex; align-items: center; justify-content: center; font-size: 104px;
  border-radius: 50%; background: rgba(63, 42, 29, .28); pointer-events: none;
}
.hint.tap .ic, .hint.double .ic { animation: tapPulse .7s ease-in-out infinite; }
.hint.double .ic { animation-duration: .45s; }
.hint.duck .ic { animation: swipeDown .9s ease-in infinite; }
@keyframes tapPulse { 50% { transform: scale(.78); } }
@keyframes swipeDown { 0% { transform: translateY(-14px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(14px); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

/* Home menu: text buttons on the big cream tag, like Cozy Critter Sort's home */
.menu { display: flex; flex-direction: column; align-items: center; gap: .6vh; margin-top: 2vh; }
.woodbtn {
  background: url('ui/tag_big.png') center / 100% 100% no-repeat; border: 0; padding: 0 18%;
  aspect-ratio: 2.6; width: clamp(200px, 60vw, 270px); display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: clamp(22px, 3.6vh, 30px); font-weight: 700; color: var(--wood); white-space: nowrap;
  text-shadow: var(--k1); cursor: pointer; transition: transform .08s;
}
.woodbtn:active { transform: scale(.94); }
#btnPlay { animation: bob 1.6s ease-in-out infinite; }

/* Close button sits on the dialog's top-right corner */
.card { position: relative; }
.imgbtn.close { position: absolute; top: -52px; right: -52px; width: 50px; height: 50px; z-index: 2; }

/* Store */
.store-card { padding-top: 10px; }
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.critter-tile {
  position: relative; width: 88px; height: 104px; padding: 0; cursor: pointer; background: none;
  border: solid transparent; border-width: 16px; border-image: url('ui/tile_square.png') 140 fill / 16px / 0 stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: inherit; color: var(--wood);
}
.critter-tile .pic { width: 100%; height: 56px; object-fit: contain; pointer-events: none; }
.critter-tile.locked .pic { filter: brightness(.35) saturate(.2); opacity: .75; }
.critter-tile.on { filter: drop-shadow(0 0 5px var(--gold)) drop-shadow(0 0 2px var(--gold)); transform: scale(1.06); }
.critter-tile .badge { position: absolute; right: -14px; bottom: -14px; width: 32px; height: 32px; pointer-events: none; }
.critter-tile .price { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; font-weight: 800; line-height: 1; margin-top: 2px; }
.critter-tile.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Boost slots on the home screen (tap to arm for the next run) */
.boost-row { display: flex; gap: 12px; margin-top: 1.2vh; }
.boost-slot {
  position: relative; width: 62px; height: 62px; padding: 0; cursor: pointer; background: none; font-size: 30px; font-family: inherit; color: var(--wood);
  border: solid transparent; border-width: 14px; border-image: url('ui/tile_square.png') 140 fill / 14px / 0 stretch;
  display: flex; align-items: center; justify-content: center; transition: transform .1s;
}
.boost-slot.armed { transform: translateY(-4px); filter: drop-shadow(0 0 5px var(--gold)) drop-shadow(0 0 2px var(--gold)); }
.boost-slot:not(.armed) .ic { opacity: .45; filter: grayscale(.6); }
.count {
  position: absolute; right: -16px; bottom: -16px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: var(--gold); border: 3px solid var(--ol); font-size: 15px; line-height: 20px; font-weight: 800; color: var(--ol); text-align: center;
}
.count.plus { background: #cfe9b5; }

/* Store tabs */
.tabs { display: flex; gap: 10px; margin-bottom: 2px; }
.tab {
  width: 64px; height: 52px; padding: 0; cursor: pointer; background: none; font-size: 30px;
  border: solid transparent; border-width: 12px; border-image: url('ui/tile_square.png') 140 fill / 12px / 0 stretch;
  opacity: .55; display: flex; align-items: center; justify-content: center;
}
.tab img { width: 100%; height: 100%; object-fit: contain; }
.tab.on { opacity: 1; transform: translateY(-3px); filter: drop-shadow(0 0 4px var(--gold)); }
.boost-tile .pic { display: flex; align-items: center; justify-content: center; font-size: 46px; height: 56px; }
.boost-tile .count { right: -12px; bottom: auto; top: -12px; }
.boost-tile.full { opacity: .6; }

/* HUD active boosts */
.hud-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hud-boosts { display: flex; gap: 6px; padding-left: 8px; }
.hb { position: relative; display: flex; width: 38px; height: 38px; font-size: 30px; align-items: center; justify-content: center; font-style: normal;
  background: rgba(255, 246, 230, .85); border: 3px solid var(--ol); border-radius: 50%; }
.hb.timer { background: conic-gradient(rgba(255, 207, 90, .9) calc(var(--p, 1) * 360deg), rgba(255, 246, 230, .85) 0); }
.hb .ic { font-size: 24px; }

/* Revive */
.revive-opt { position: relative; background: none; border: 0; padding: 0; width: 96px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-family: inherit; color: var(--wood); }
.revive-opt img { width: auto; height: 96px; animation: bob 1.4s ease-in-out infinite; }
/* icon_revive_ad_fit.png is rescaled so its wooden tile matches icon_revive.png pixel for pixel
   (same scale: 96/239); the AD badge simply hangs outside the tile */
#revive .btns { align-items: flex-start; }
#btnReviveAd { width: 96px; }
#btnReviveAd img { height: 106px; align-self: flex-start; }
/* berry price as a red tag on the icon, like the AD tag on the ad icon */
.rbadge {
  position: absolute; left: 44px; top: 60px; display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px 0 3px; height: 30px; border-radius: 10px; border: 3px solid var(--ol);
  background: linear-gradient(#f26a63, #d93a3f); color: #fff; font-size: 18px; font-weight: 800; line-height: 1;
  text-shadow: 1px 1px 0 #6b1c1c, -1px 1px 0 #6b1c1c, 1px -1px 0 #6b1c1c, -1px -1px 0 #6b1c1c;
  box-shadow: 0 2px 0 rgba(63, 42, 29, .35); pointer-events: none;
}
.rbadge i { display: flex; width: 22px; height: 22px; border-radius: 50%; background: #fff6e6; align-items: center; justify-content: center; font-size: 17px; }
.revive-opt:disabled { opacity: .45; filter: grayscale(.7); cursor: default; }
.revive-opt:disabled img { animation: none; }
#adSim { z-index: 5; }
.adsim { width: 120px; animation: tapPulse .7s ease-in-out infinite; }

/* Studio signature at the bottom of the home screen */
.signature { position: absolute; bottom: max(1.5vh, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.signature img { height: clamp(70px, 12vh, 112px); width: auto; filter: drop-shadow(0 3px 0 rgba(63, 42, 29, .25)); }

/* Personal ranking (top 10 runs on this device) */
.tagbtn-plain { border: 0; cursor: pointer; font-family: inherit; color: var(--wood); }
.tagbtn-plain:active { transform: scale(.95); }
.rank-card { padding-top: 6px; }
.rank-list { display: flex; flex-direction: column; gap: 4px; min-width: 230px; max-height: 58vh; overflow-y: auto; }
.rank-row { display: grid; grid-template-columns: 40px 44px 1fr; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 12px; }
.rank-row:nth-child(odd) { background: rgba(214, 180, 130, .22); }
.rank-row.me { background: rgba(255, 207, 90, .55); }
.rank-pos { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 20px; }
.rank-pos svg.medal { width: 38px; height: 38px; overflow: visible; }
.rank-pos svg.medal text { font-family: 'Matcha World', sans-serif; font-size: 11px; font-weight: 800; fill: var(--ol); }
.rank-pos.plain { font-size: 20px; font-weight: 800; }
.rank-row img { width: 44px; height: 38px; object-fit: contain; }
.rank-m { text-align: right; font-size: 24px; font-weight: 800; }
.rank-empty { font-size: 60px; opacity: .35; text-align: center; padding: 10px 0; }
.rank-medal svg.medal { width: 64px; height: 64px; overflow: visible; animation: glow .9s ease-in-out infinite; }
.rank-medal svg.medal text { font-family: 'Matcha World', sans-serif; font-size: 11px; font-weight: 800; fill: var(--ol); }

/* Recolored critters: perk badge on the store tile */
.critter-tile .perk { position: absolute; left: -14px; top: -14px; width: 34px; height: 34px; border-radius: 50%; background: #fff6e6; border: 3px solid var(--ol); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.store-grid { max-height: 60vh; overflow-y: auto; padding: 14px 14px 4px; margin: -10px -10px 0; }
.hb.rainbow { animation: glow .5s ease-in-out infinite; }

/* Home side buttons: daily gift + missions */
.top-right { display: flex; align-items: center; gap: 4px; }
.side-btn {
  position: relative; width: 50px; height: 50px; padding: 0; cursor: pointer; background: none; font-size: 26px;
  border: solid transparent; border-width: 11px; border-image: url('ui/tile_square.png') 140 fill / 13px / 0 stretch;
  display: flex; align-items: center; justify-content: center;
}
.side-btn.alert::after { content: ""; position: absolute; right: -14px; top: -14px; width: 16px; height: 16px; border-radius: 50%; background: #ff5b5b; border: 3px solid var(--ol); animation: glow .8s ease-in-out infinite; }
.side-btn.alert .ic { animation: wiggle 1.2s ease-in-out infinite; }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(12deg); } 90% { transform: rotate(-6deg); } }

/* Missions */
.mission-list { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.mission-row { display: grid; grid-template-columns: 44px 1fr 74px; align-items: center; gap: 8px; }
.mission-row.claimed { opacity: .6; }
.m-icon { width: 44px; height: 44px; font-size: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--ol); background: #fff6e6; }
.m-icon.tier1 { background: #e3f3d6; }
.m-icon.tier2 { background: #ffe9b0; }
.m-bar { position: relative; height: 26px; border-radius: 13px; border: 3px solid var(--ol); background: #f1e3cc; overflow: hidden; }
.m-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#9ee07f, #6fbf57); }
.m-bar b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; font-weight: 800; padding-top: 3px; }   /* Gluten's glyphs sit high: nudge to the optical centre */
.claim { display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 36px; border: 0; padding: 0 6px; cursor: pointer;
  background: url('ui/tag_small.png') center / 100% 100% no-repeat; font-family: inherit; font-size: 16px; font-weight: 800; color: var(--wood); }
.claim:disabled { opacity: .5; filter: grayscale(.6); cursor: default; }
.claim.ready { animation: glow .8s ease-in-out infinite; filter: drop-shadow(0 0 4px var(--gold)); }
.mission-row .done { width: 34px; height: 34px; justify-self: center; }

/* 7-day calendar */
.cal-grid { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; }
.cal-day { position: relative; height: 78px; padding: 0; cursor: default; background: none; font-family: inherit; color: var(--wood);
  border: solid transparent; border-width: 12px; border-image: url('ui/tile_square.png') 140 fill / 12px / 0 stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; }
.cal-day.big { grid-column: span 2; }
.cal-day .d { position: absolute; top: -6px; left: -4px; font-size: 13px; font-weight: 800; opacity: .7; }
.cal-day .r { display: flex; align-items: center; gap: 1px; font-size: 24px; }
.cal-day .r b { font-size: 14px; font-weight: 800; }
.cal-day .hat-prev { width: 50px; height: 50px; }
.cal-day.future, .cal-day.next { opacity: .55; }
.cal-day.today { cursor: pointer; animation: glow .9s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 3px var(--gold)); }
.cal-day .done { position: absolute; right: -12px; bottom: -12px; width: 28px; height: 28px; }

/* Mission toast in the HUD */
.toast { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 10px;
  background: #fff6e6; border: 3px solid var(--ol); border-radius: 16px; font-size: 30px; pointer-events: none; z-index: 3; }
.toast img { width: 30px; height: 30px; }
.toast.show { animation: toastIn .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes toastIn { from { transform: translate(-50%, -30px) scale(.6); opacity: 0; } }

/* Store: 5 tabs, cosmetics and packs */
.tabs { gap: 6px; }
.tab { width: 54px; height: 48px; font-size: 26px; border-width: 11px; }
.cos-tile canvas.pic { width: 56px; height: 56px; }
.store-grid.packs { grid-template-columns: repeat(2, 1fr); }
.pack-tile { height: 124px; width: 118px; }
.pack-tile.welcome { grid-column: span 2; width: auto; filter: drop-shadow(0 0 5px var(--gold)); }
.pack-tile .pic { font-size: 40px; height: 44px; display: flex; align-items: center; }
.pack-tile .amount { display: inline-flex; align-items: center; gap: 2px; font-size: 18px; font-weight: 800; }
.pack-tile .amount .ic { font-size: 16px; }
.pack-tile .money { margin-top: 2px; padding: 1px 8px; border-radius: 10px; background: #7cc36a; border: 2px solid var(--ol); color: #fff; font-size: 15px; font-weight: 800;
  text-shadow: 1px 1px 0 var(--ol), -1px 1px 0 var(--ol), 1px -1px 0 var(--ol), -1px -1px 0 var(--ol); }
.pack-tile.locked-day { opacity: .55; filter: grayscale(.5); }
.pack-tile .lock { position: absolute; right: -12px; top: -12px; width: 34px; height: 34px; }

/* Game over: berries x2 with an ad */
.berry-row { display: flex; align-items: center; gap: 8px; }
.double-btn { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 46px; padding: 0 16px 0 12px; cursor: pointer; border: 0;
  background: url('ui/tag_medium.png') center / 100% 100% no-repeat; font-family: inherit; font-size: 20px; font-weight: 800; color: var(--wood); animation: glow 1s ease-in-out infinite; }
.double-btn .rbadge.ad { position: absolute; left: auto; right: -14px; top: -12px; height: 24px; font-size: 13px; padding: 1px 6px 0; }

/* cosmetics are shown in full colour even before you own them */
.cos-tile.locked .pic { filter: none; opacity: 1; }

/* First-launch privacy gate (must be accepted once) */
.screen.consent { z-index: 10; background: rgba(45, 34, 51, .55); }
.consent-card { max-width: 330px; text-align: center; }
.consent-card p { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; }
.consent-logo { width: 190px; height: auto; margin-top: -6px; }
.link-btn { background: none; border: 0; padding: 4px 8px; cursor: pointer; font-family: inherit; font-size: 17px; font-weight: 800; color: #3a7bd5; text-decoration: underline; }

/* Calendar: reward critters */
.cal-critter { width: 58px; height: 50px; object-fit: contain; }
.cal-critter.shadow { filter: brightness(.35) saturate(.2); opacity: .8; }
.cal-fox { display: grid; grid-template-columns: 58px 1fr 34px; align-items: center; gap: 8px; width: 100%; margin-top: 6px; font-size: 30px; }
.cal-fox .done { width: 32px; height: 32px; }

.cal-fox.waiting { opacity: .55; }
.cal-fox .lock { width: 30px; height: 30px; }

/* Monthly event */
.candy-ic { width: 1.25em; height: auto; flex: none; }
.candy-ic.big { width: 44px; }
.candy-tag { margin-left: 4px; }
.event-btn img { width: 30px; }
.event-card { gap: 12px; min-width: 270px; }
.event-moon { width: 110px; margin-top: -8px; }
.event-hero { position: relative; }
.event-critter { width: 130px; height: 120px; object-fit: contain; }
.event-critter.shadow { filter: brightness(.35) saturate(.2); opacity: .85; }
.event-hero .done { position: absolute; right: -10px; bottom: 0; width: 40px; height: 40px; }
.event-row { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 8px; width: 100%; }
.event-days { height: 44px; }
.critter-tile .price .candy-ic { width: 22px; }

/* top bar with the event button: 4 buttons must fit next to the berry counter on narrow phones */
.top-right .side-btn { width: 44px; height: 44px; border-width: 10px; font-size: 23px; }
.top-right .event-btn img { width: 26px; }
.top-right .imgbtn.small { width: 46px; height: 46px; }
.top-right { gap: 3px; }
.topbar > .tag { height: 46px; padding: 0 11% .1em; font-size: 20px; }

/* Store packs: free berries for a rewarded ad (3 a day) */
.ad-pack .rbadge.ad { position: absolute; left: auto; right: -12px; top: -12px; height: 24px; font-size: 13px; padding: 1px 6px 0; }
.ad-pack .dots { display: flex; gap: 5px; margin-top: 4px; }
.ad-pack .dots i { width: 11px; height: 11px; border-radius: 50%; background: #7cc36a; border: 2px solid var(--ol); }
.ad-pack .dots i.used { background: #d9cbb4; }

/* ===== Store redesign (2026-09-29): Cozy Critter Sort's ribbon panel + her icons ===== */
#store .store-panel {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: url('ui/panel_shop.png') center / 100% 100% no-repeat;
  --pw: min(94vw, 430px, calc(90dvh * 971 / 1619));
  aspect-ratio: 971 / 1619; width: var(--pw);
  padding: calc(var(--pw) * .23) calc(var(--pw) * .11) calc(var(--pw) * .13); animation: pop .28s cubic-bezier(.3, 1.6, .5, 1);
}
#store .imgbtn.close { top: 5%; right: -2%; }
#store .store-wallet { height: 44px; font-size: 20px; flex: none; }
#store .tabs { display: flex; gap: 5px; flex: none; width: 100%; justify-content: center; }
#store .tab {
  flex: 1; max-width: 58px; aspect-ratio: 1; height: auto; padding: 0; opacity: 1; cursor: pointer; background: none;
  border: solid transparent; border-width: 10px; border-image: url('ui/tile_square.png') 140 fill / 10px / 0 stretch;
  display: flex; align-items: center; justify-content: center;
}
#store .tab img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(.55) opacity(.65); transition: transform .12s; }
#store .tab.on { transform: translateY(-4px); filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 2px var(--gold)); }
#store .tab.on img { filter: none; transform: scale(1.08); }

#store .store-grid {
  flex: 1; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; max-height: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start;
  padding: 16px 14px 14px; margin: 0;
}
#store .store-grid.packs { grid-template-columns: repeat(2, 1fr); }

/* every tile is the same size */
#store .critter-tile {
  width: 100%; height: auto; aspect-ratio: .82; justify-content: space-between; padding: 0;
  border-width: 14px; border-image: url('ui/tile_square.png') 140 fill / 14px / 0 stretch;
}
#store .critter-tile .pic { width: 100%; height: auto; flex: 1; min-height: 0; object-fit: contain; }
#store .critter-tile canvas.pic { width: 100% !important; height: auto !important; aspect-ratio: 1; flex: none; }
#store .boost-tile .pic { font-size: 40px; height: auto; }
/* prices sit on the small wooden tag */
#store .critter-tile .price {
  flex: none; width: 108%; aspect-ratio: 2; margin: 2px -4% -6px; justify-content: center;
  background: url('ui/tag_small.png') center / 100% 100% no-repeat; font-size: 14px; gap: 1px;
}
#store .critter-tile .price .ic { font-size: 13px; }
#store .critter-tile .perk { left: -12px; top: -12px; width: 30px; height: 30px; font-size: 19px; }

/* berry packs */
#store .pack-tile { width: 100%; height: auto; aspect-ratio: .9; }
#store .pack-tile .pic { width: 76%; max-height: 64%; flex: none; margin-top: -2px; }
#store .pack-tile .info { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#store .pack-tile .amount { font-size: 17px; }
#store .pack-tile .extras { display: flex; gap: 2px; font-size: 16px; }
#store .pack-tile .money {
  display: flex; align-items: center; justify-content: center; width: 86px; aspect-ratio: 2; padding: 0; margin: 0 0 -8px;
  background: url('ui/tag_small.png') center / 100% 100% no-repeat; border: 0; color: var(--wood); text-shadow: var(--k1); font-size: 15px;
}
#store .pack-tile.welcome {
  grid-column: span 2; aspect-ratio: 2.1; flex-direction: row; justify-content: space-around;
  border-width: 18px; border-image: url('ui/tile_rect.png') 150 fill / 18px / 0 stretch;
}
#store .pack-tile.welcome .pic { width: 44%; max-height: 100%; }
#store .ad-pack .pic { width: 70%; }
#store .ad-pack .dots { margin-bottom: 2px; }
/* keep the panel at its own size whatever the tab holds (an aspect-ratio box otherwise grows with its content) */
#store .store-panel { min-height: 0; overflow: hidden; }
#store .imgbtn.close { top: 5.5%; right: 3%; width: 46px; height: 46px; }
/* packs tab: lone tiles (ad pack, chest) sit centred instead of hugging the left */
#store .store-grid.packs { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
#store .store-grid.packs .pack-tile { width: calc(50% - 5px); flex: none; }
#store .store-grid.packs .pack-tile.welcome { width: 100%; }
/* end the scroll area at the cream's inner edge (padding % is of the width: 20% ≈ 12% of the panel height) */
#store .store-panel { padding-bottom: calc(var(--pw) * .2); }

/* Halloween card: play buttons for today's tries */
.event-play { position: relative; width: clamp(180px, 56vw, 230px); font-size: 24px; }
.event-play .rbadge.ad { position: absolute; left: auto; right: 4px; top: -8px; height: 24px; font-size: 13px; padding: 1px 6px 0; }
.event-rest { height: 46px; gap: 6px; }
.event-rest .candy-ic { width: 34px; }

/* game over: the berries tag and the "x2 AD" button are twins (same wooden tag, same size) */
#over .berry-row .tag, #over .berry-row .double-btn {
  height: 50px; width: auto; aspect-ratio: 2.25; padding: 0 12% .1em; gap: 3px;
  font-size: 20px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
#over .berry-row .ic { font-size: 22px; }
/* the x2 button pulses with light only, so it never looks bigger than its twin */
#over .berry-row .double-btn { animation: shine 1.2s ease-in-out infinite; }
@keyframes shine { 50% { filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 2px var(--gold)); } }
#over .berry-row .double-btn { font-size: 24px; }
.collect-btn { border: 0; cursor: pointer; font-family: inherit; color: var(--wood); animation: shine 1.2s ease-in-out infinite; }
.collect-btn:active, #over .double-btn:active { transform: scale(.94); }
/* x2 in Gluten (the "×" sign isn't in the font, it fell back to another typeface), same size as the berry number */
#over .berry-row .double-btn { font-size: 20px; }
#over .berry-row .x2 { font-family: 'Matcha World', sans-serif; font-weight: 800; }
#over .berry-row .double-btn .rbadge.ad { top: 6px; right: -12px; }

/* Lives */
.home-stats { display: flex; gap: 8px; align-items: center; justify-content: center; }
.lives-tag { position: relative; }
.lives-tag .heart { width: 1.35em; height: 1.35em; object-fit: contain; margin-top: -.1em; }
.lives-timer { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font-size: 13px; font-weight: 800; color: #fff;
  text-shadow: 1px 1px 0 var(--ol), -1px 1px 0 var(--ol), 1px -1px 0 var(--ol), -1px -1px 0 var(--ol); white-space: nowrap; }
.lives-card { gap: 12px; min-width: 250px; }
.lives-big { width: 96px; height: 96px; object-fit: contain; }
.lives-ad { position: relative; gap: 6px; width: clamp(170px, 50vw, 210px); font-size: 24px; }
.lives-ad .heart { width: 30px; height: 30px; object-fit: contain; }
.lives-ad .rbadge.ad { position: absolute; left: auto; right: 2px; top: -6px; height: 24px; font-size: 13px; padding: 1px 6px 0; }
/* the refill timer sits inside the hearts tag (it overlapped the boost row when it hung below) */
.lives-tag { padding: 0 10% .1em; }
.lives-timer { position: static; transform: none; margin-left: 4px; font-size: .62em; color: var(--wood); text-shadow: var(--k1); opacity: .8; }
.lives-timer:empty { display: none; }

/* Home wallet (2026-09-30): same beige pill, top-left, as Cozy Critter Sort — lives + berries */
#title .wallet { display: flex; align-items: center; gap: 12px; background: #f5e6c9ed; border-radius: 20px; padding: 5px 12px; min-height: 40px;
  font-size: 20px; font-weight: bold; color: var(--wood); box-shadow: 0 2px 6px #4a2c2130; }
#title .wallet .hearts, #title .wallet .coins { display: flex; align-items: center; gap: 3px; }
#title .wallet .hearts { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
#title .wallet .heart { width: 28px; height: 28px; object-fit: contain; }
#title .wallet .ic { width: 26px; height: 26px; font-size: 26px; }
#title .wallet small { margin-left: 5px; font-size: .7em; }
#title .wallet small:empty { display: none; }
#title .wallet .lives-wait { display: flex; align-items: center; margin: 0 3px 0 0; font-size: .75em; gap: 1px; }
#title .wallet .lives-wait.hidden { display: none; }
#title .wallet .lives-wait .ic { width: 23px; height: 23px; font-size: 23px; }

/* her bell tile has the flowers outside, so its wooden tile is smaller than the music/SFX ones: scale it to match */
#btnNotif img { transform: scale(1.18); }

/* padlock (her golden one) on the tiles that are earned instead of bought */
.critter-tile > .lock { position: absolute; right: -9px; top: -9px; width: 30px; height: 30px; object-fit: contain; pointer-events: none; z-index: 2; filter: drop-shadow(0 1px 1px rgba(63,42,29,.45)); }

/* Text look copied from Cozy Critter Sort's Matcha World fix: no black outline (too dark, small text unreadable);
   text keeps the soft cream edge the wood buttons use; chubby font gets extra word spacing. */
:root { --k1: 0 1px 0 #fff5d6; word-spacing: .18em; }
body { font-synthesis: none; }
.card-title { text-shadow: var(--k1); }

/* window titles (like Cozy Critter Sort's modal h2) */
.card-title { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 400; color: var(--wood); text-align: center; }
/* store tabs: let the 5 tabs shrink so they stay inside the cream (they pushed past the right edge) */
#store .tab { min-width: 0; box-sizing: border-box; }
#store .tabs { gap: 4px; }

/* Settings: Cozy Critter Sort's settings layout (ribbon panel, title, 2x2 icon toggles, tag button) */
#settings .settings-panel {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: url('ui/panel_shop.png') center / 100% 100% no-repeat;
  --pw: min(94vw, 430px, calc(90dvh * 971 / 1619));
  aspect-ratio: 971 / 1619; width: var(--pw);
  padding: calc(var(--pw) * .25) calc(var(--pw) * .155) calc(var(--pw) * .2); animation: pop .28s cubic-bezier(.3, 1.6, .5, 1);
}
#settings .imgbtn.close { top: 5.5%; right: 3%; width: 46px; height: 46px; }
#settings .card-title { font-size: 34px; }
#settings .settings-toggles { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 22px; justify-content: center; margin: 8px 0 16px; }
#settings .settings-toggles .imgbtn { width: clamp(64px, 17vw, 84px); height: clamp(64px, 17vw, 84px); }
#settings .settings-toggles .imgbtn img { width: 100%; height: 100%; object-fit: contain; }
#settings .settings-policy { width: min(230px, 78%); padding: 0 14%; font-size: 15px; }

/* Matcha World is wider than Gluten: wood tags grow to fit their word, flowers at the ends stay clear (as in Cozy Critter Sort) */
.woodbtn { width: auto; min-width: clamp(200px, 60vw, 270px); padding: 0 50px; }
#settings .settings-policy { width: auto; min-width: min(230px, 78%); padding: 0 46px; }
/* Settings: title at the top of the panel, the rest centred below it (Cozy Critter Sort) */
#settings .settings-panel { justify-content: flex-start; }
#settings .card-title { margin-top: 2%; }
#settings .settings-toggles { margin-top: auto; }
#settings .settings-policy { margin-bottom: auto; }

/* panel padding was in % of the SCREEN width (CSS rule): on a wide computer window it squeezed the store. Now it follows the panel width (--pw). */
/* Halloween: big home button under Store (the small side icon went unnoticed) */
.woodbtn.event-big { gap: 8px; animation: bob 1.6s ease-in-out infinite .4s; }
.woodbtn.event-big .candy-ic { width: 1.3em; height: 1.3em; object-fit: contain; }
/* short screens: the 3 home buttons (Play, Store, Halloween) must stay clear of the studio logo */
@media (max-height: 860px) {
  #title .menu .woodbtn { min-width: 160px; font-size: 19px; padding: 0 36px; }
  #title .menu { gap: 0; margin-top: 1vh; }
}
/* home: Play, Halloween, Store all the same width, centred in the column (Elena) */
#title .menu .woodbtn { width: clamp(230px, 64vw, 290px); min-width: 0; padding: 0 44px; align-self: center; margin-left: auto; margin-right: auto; }
@media (max-height: 860px) { #title .menu .woodbtn { width: clamp(200px, 56vw, 250px); padding: 0 36px; } }
/* tag_big has empty rows top and bottom: pull the buttons together so Store stays above the studio logo */
#title .menu .woodbtn + .woodbtn { margin-top: -8px; }
@media (max-height: 860px) { #title .menu .woodbtn { width: clamp(180px, 50vw, 220px); } }