/* Moo Moo Monday -- visual layer ported from the Claude Design system
   (project "Moo Moo Monday Design System"). Four materials:
   world (no web borders) / shop (feed tags on the barn wall) /
   controls (white enamel) / celebration (gold, reserved). */

/* ===== Tokens ===== */
:root {
    /* ink + paper */
    --ink: #333; --ink-2: #555; --ink-3: #666; --ink-4: #999; --paper: #fff;
    --cream: #FFF8DC; --cream-deep: #f3e7bf;
    /* sky + field */
    --sky: #87CEEB; --sky-high: #6fbfe3; --sky-haze: #bfe6f5;
    --grass: #90EE90; --grass-hover: #7FDD7F; --grass-mid: #7ACC72; --grass-deep: #4FA84F;
    --hill-far: #9fd89a; --hill-near: #6fbf68;
    --dirt: #7a5230; --dirt-dark: #5a3a20; --fence: #8B5A2B;
    /* cast */
    --barn-red: #cd4a3a; --barn-roof: #a83a2c; --barn-shadow: #8f2f23;
    --straw: #f4d066; --straw-dark: #e0b74e;
    --udder: #FFB6C1; --udder-hot: #FF69B4;
    --steel: #b8bfc6; --worm: #ff9d8a; --worm-head: #ffab97;
    --mute-red: #c0392b;
    /* gold / butter: celebration ONLY */
    --gold: #FFD700; --gold-orange: #FFA500;
    --butter: #f5c542; --butter-light: #ffe38a; --butter-gold: #FFC300; --butter-bright: #FFE066;
    --churn-dim-bg: #f5eed8; --churn-dim-line: #b8912a; --churn-dim-text: #8a6d1c;
    --armed: #FF8C00; --armed-light: #FFB347;
    /* semantic */
    --world-shadow: rgba(40, 60, 30, .28);
    --shop-wall: var(--barn-red); --shop-wall-plank: var(--barn-shadow);
    --shop-card: var(--cream); --shop-card-locked: #e9e1c8;
    /* type */
    --font-display: 'Pixelify Sans', Arial, sans-serif;
    --font-score: 'Tiny5', 'Pixelify Sans', Arial, sans-serif;
    --font-body: Arial, sans-serif;
    --fs-counter: 3.4rem; --fs-crit: 2.6rem;
    --text-outline: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink);
    --text-outline-drop: var(--text-outline), 0 5px 0 var(--ink);
    /* shadows: hard offsets, never blurred (celebration glow excepted) */
    --shadow-card: 0 4px 0 var(--ink);
    --shadow-card-hover: 0 6px 0 var(--ink);
    --shadow-card-press: 0 1px 0 var(--ink);
    --shadow-control: 0 3px 0 var(--ink);
    --shadow-sticker: 2px 2px 0 rgba(0, 0, 0, .15);
    --glow-armed: 0 0 16px rgba(255, 140, 0, .9);
    /* layout + motion */
    --shop-width: 360px;
    --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--sky);
    height: 100vh;
    height: 100dvh; /* mobile browser chrome: vh line above is the fallback */
    overflow: hidden;
    /* Mobile tap hardening: rapid tapping is the core mechanic --
       no double-tap zoom, no text selection/callout, no grey tap flash */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ===== Layout: world fills left, shop docks right as the barn wall ===== */
.game-container {
    display: flex;
    height: 100vh;
    height: 100dvh; /* mobile browser chrome: vh line above is the fallback */
    width: 100%;
}

.world {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/* ===== Scene: one contiguous landscape, no web borders ===== */
.scene-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--sky-high) 0%, var(--sky) 38%, var(--sky-haze) 58%);
}

.scene-hill {
    position: absolute;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.scene-hill.far1 { left: -10%; right: 30%; top: 50%; height: 22%; background: var(--hill-far); }
.scene-hill.far2 { left: 40%; right: -15%; top: 47%; height: 26%; background: var(--hill-far); }
.scene-hill.near { left: -20%; right: -20%; top: 56%; height: 30%; background: var(--hill-near); border-top: 4px solid var(--grass-deep); }

.scene-field {
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    bottom: 0;
    background-color: var(--grass-mid);
    /* grass tufts as a hard-stop repeat */
    background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(79, 168, 79, .55) 22px 24px, transparent 24px 46px);
    background-size: 46px 6px;
    background-repeat: repeat-x;
    background-position: 0 12px;
}

.scene-fence {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(60% - 28px);
    height: 32px;
    /* fence.png = fence_h tile pulled from objects_atlas (atlas crops can't
       background-repeat); 32px = source 16px at the scene's 2x sprite scale */
    background: url('../assets/fence.png') repeat-x 0 0 / 32px 32px;
    image-rendering: pixelated;
}

/* ===== Scene decorations: objects_atlas.png crops (3x atlas shown at 2x,
   so display px = atlas px * 2/3; atlas 762x345 -> 508x230) ===== */
.deco {
    position: absolute;
    background: url('../assets/objects_atlas.png') no-repeat;
    background-size: 508px 230px;
    image-rendering: pixelated;
    pointer-events: none;
}

.deco.tree-oak { width: 64px; height: 64px; background-position: -294px 0; }
.deco.tree-apple { width: 64px; height: 64px; background-position: -228px 0; }
.deco.tree-pink { width: 64px; height: 64px; background-position: -360px 0; }
.deco.scarecrow { width: 32px; height: 64px; background-position: -426px 0; }
.deco.well { width: 48px; height: 48px; background-position: -116px -114px; }
.deco.hay-big { width: 64px; height: 48px; background-position: 0 -114px; }
.deco.rock-big { width: 48px; height: 48px; background-position: -66px -114px; }
.deco.bush-berry { width: 32px; height: 32px; background-position: -268px -114px; }
.deco.bush-round { width: 32px; height: 32px; background-position: -302px -114px; }
.deco.flower-pink { width: 32px; height: 32px; background-position: -204px -164px; }
.deco.flower-white { width: 32px; height: 32px; background-position: -272px -164px; }
.deco.flower-yellow { width: 32px; height: 32px; background-position: -306px -164px; }
.deco.mushroom { width: 32px; height: 32px; background-position: -442px -164px; }
.deco.stump { width: 32px; height: 32px; background-position: 0 -198px; }

/* placements: trees on the horizon (before .scene-fence in DOM, so rails
   cross in front of trunks); ground pieces in the band between the fence
   and the pasture strip, clear of the cow's center box (32-68%) */
.deco.spot-tree1 { left: 2%; top: calc(60% - 62px); }
.deco.spot-tree2 { left: 11%; top: calc(60% - 64px); }
.deco.spot-tree3 { left: 76%; top: calc(60% - 63px); }
.deco.spot-tree4 { left: 88%; top: calc(60% - 60px); }
.deco.spot-scarecrow { left: 70%; top: calc(60% - 20px); }
.deco.spot-well { left: 85%; top: calc(60% + 36px); }
.deco.spot-hay { left: 3%; top: calc(60% + 30px); }
.deco.spot-rock { left: 24%; top: calc(60% + 8px); }
.deco.spot-bush1 { left: 28%; top: calc(60% - 6px); }
.deco.spot-bush2 { left: 20%; top: calc(60% - 6px); }
.deco.spot-flower1 { left: 7%; top: calc(60% + 6px); }
.deco.spot-flower2 { left: 30%; top: calc(60% + 16px); }
.deco.spot-flower3 { left: 74%; top: calc(60% + 4px); }
.deco.spot-mushroom { left: 17%; top: calc(60% + 60px); }
.deco.spot-stump { left: 79%; top: calc(60% + 70px); }

.scene-cloud {
    position: absolute;
    height: 22px;
    width: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 18px -12px 0 -2px #fff, 40px 0 0 0 #fff;
}

.scene-cloud.c1 { left: 12%; top: 9%; }
.scene-cloud.c2 { left: 55%; top: 16%; }
.scene-cloud.c3 { left: 80%; top: 7%; }

/* ===== Milk HUD: the biggest type on screen, in the world ===== */
.milk-hud {
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 8;
    pointer-events: none;
}

.milk-hud .score {
    /* Tiny5 ships 400 only -- 700 would synthesize a faux bold */
    font-family: var(--font-score);
    font-weight: 400;
    font-size: var(--fs-counter);
    line-height: 1;
    color: var(--paper);
    text-shadow: var(--text-outline-drop);
}

.milk-hud .milk-rate {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--paper);
    text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 0 2px 0 var(--ink);
}

/* ===== Hero cow (sprite rules unchanged; now standing on the field) ===== */
.cow {
    position: absolute;
    left: 50%;
    top: calc(60% - 262px);
    margin-left: -200px;
    width: 400px;
    height: 300px;
    z-index: 4;
}

.cow-shadow {
    position: absolute;
    left: 44px;
    right: 30px;
    bottom: 6px;
    height: 26px;
    border-radius: 50%;
    background: var(--world-shadow);
}

.cow-body {
    position: absolute;
    width: 352px;
    height: 253px;
    left: 24px;
    top: 30px;
}

/* wobble wrapper: transform-free target for the combo wobble (the sprite
   below owns the mirror, .cow-body above owns the squash) */
.cow-wobble {
    position: absolute;
    inset: 0;
}

.cow-sprite {
    position: absolute;
    inset: 0;
    /* hand-edited sheet: Jim heads are drawn into the frames directly */
    background: url('../assets/cows.png');
    /* sheet 192x384 at 11x */
    background-size: 2112px 4224px;
    /* cream idle row: content top at sheet y 265 */
    background-position: 0 -2915px;
    image-rendering: pixelated;
    transform: scaleX(-1);
    animation: hero-chew 2.1s steps(3) infinite;
}

/* 3 contiguous frames, 352px stride */
@keyframes hero-chew {
    from { background-position-x: 0; }
    to { background-position-x: -1056px; }
}

/* High-res face over the hero's baked pixel head (the 11x sprite head is
   mush at this scale; pasture minis keep the baked version). Sized one
   sheet-pixel (11px) past the baked head box on every side so no pixel
   fringe peeks out. Sibling of the sprite: skips the mirror, inherits
   squash (.cow-body) and wobble (.cow-wobble). */
.cow-face {
    position: absolute;
    left: 22px;
    top: -33px;
    width: 176px;
    height: 220px;
    background: url('../assets/jimface.png') center / 100% 100% no-repeat;
    image-rendering: auto;
    pointer-events: none;
    z-index: 2;
    animation: face-bob 2.1s linear infinite;
}

/* Manual-click brace: Jim grits through the squeeze. game.js toggles the
   class and holds it across click spam (background-image only, so face-bob
   and the frenzy glow keep running untouched). */
.cow-face.bracing {
    background-image: url('../assets/face_bracing.png');
}

/* head-raise frame: sheet head moves up 1px on the middle third of the
   chew loop; 11px here = 1 sheet px. Boundaries match steps(3) exactly. */
@keyframes face-bob {
    0%, 33.333% { transform: translateY(0); }
    33.334%, 66.666% { transform: translateY(-11px); }
    66.667%, 100% { transform: translateY(0); }
}

.udders {
    position: absolute;
    bottom: 45px;
    left: 120px;
    display: flex;
    gap: 20px;
    z-index: 5;
}

.udder {
    width: 30px;
    height: 40px;
    background: var(--udder);
    border: 3px solid var(--ink);
    border-radius: 0 0 50% 50%;
    cursor: pointer;
    /* background only: transitioning transform would low-pass filter anime's
       per-frame inline transform writes during the click squeeze */
    transition: background 0.1s;
}

.udder:hover {
    transform: scale(1.1);
    background: var(--udder-hot);
}

.udder:active {
    transform: scale(0.95);
}

/* ===== Frenzy meter: under the cow's hooves ===== */
.frenzy-meter {
    position: absolute;
    left: 80px;
    top: 312px;
    width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 6;
}

.frenzy-meter-track {
    width: 100%;
    height: 20px;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-control);
}

.frenzy-meter.active .frenzy-meter-track {
    box-shadow: var(--shadow-control), 0 0 12px var(--gold);
}

.frenzy-meter-fill {
    height: 100%;
    width: 0%;
    background: var(--udder-hot);
    transition: width 0.1s linear;
}

.frenzy-meter.active .frenzy-meter-fill {
    background: repeating-linear-gradient(90deg, var(--gold) 0 10px, var(--udder-hot) 10px 20px);
    animation: frenzy-fill-pulse 0.4s infinite alternate;
}

.frenzy-meter-label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--paper);
    text-shadow: var(--text-outline);
}

.frenzy-meter.active .frenzy-meter-label {
    font-size: 1.3rem;
    color: var(--gold);
}

@keyframes frenzy-fill-pulse {
    from { filter: brightness(1); }
    to { filter: brightness(1.35); }
}

body.frenzy .frenzy-meter-track {
    box-shadow: var(--shadow-control), 0 0 12px var(--gold);
}

/* Frenzy glow on the cow (filter-only: safe on the mirror transform) */
body.frenzy .cow-sprite {
    animation: hero-chew 2.1s steps(3) infinite, frenzy-glow 0.5s infinite alternate;
}

/* face keeps glowing in sync; face-bob re-declared first (same params)
   so the bob never restarts against hero-chew */
body.frenzy .cow-face {
    animation: face-bob 2.1s linear infinite, frenzy-glow 0.5s infinite alternate;
}

@keyframes frenzy-glow {
    from { filter: drop-shadow(0 0 6px #FFD700) hue-rotate(0deg); }
    to { filter: drop-shadow(0 0 18px #FF69B4) hue-rotate(40deg); }
}

/* ===== Floating effects overlay (covers the whole world) ===== */
.milk-drops {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
}

.milk-drop {
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid var(--ink);
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
}

.points-popup {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--paper);
    text-shadow: var(--text-outline);
    pointer-events: none;
    white-space: nowrap;
}

.crit-popup {
    font-size: var(--fs-crit);
    color: var(--gold);
    text-shadow: var(--text-outline-drop);
    transform: rotate(-4deg);
    animation: mmm-pop 0.45s var(--ease-pop) both;
    z-index: 20;
}

@keyframes mmm-pop {
    0% { transform: scale(0.4) rotate(-6deg); opacity: 0; }
    60% { transform: scale(1.12) rotate(-4deg); opacity: 1; }
    100% { transform: scale(1) rotate(-4deg); }
}

/* ===== Pasture: entities live on the scene field, frameless ===== */
#pasture {
    position: absolute;
    left: 0;
    right: 0;
    /* the whole field below the fence is walkable: entities spread across it
       in depth rows (pasture.js), instead of bunching in a bottom strip */
    top: calc(60% + 6px);
    bottom: 0;
    z-index: 3;
    /* pasture.js also sets this in its injected styles; duplicated here so the
       strip stays click-through even if pasture.js fails to load */
    pointer-events: none;
}

/* ===== Shop: the side of the barn ===== */
.upgrade-shop {
    position: relative;
    width: var(--shop-width);
    flex-shrink: 0;
    height: 100%;
    background-color: var(--shop-wall);
    background-image: repeating-linear-gradient(90deg, transparent 0 44px, var(--shop-wall-plank) 44px 47px);
    border-left: 8px solid var(--cream);
    box-shadow: inset 4px 0 0 var(--ink);
    overflow-y: auto;
    padding: 10px 14px 20px;
    text-align: left;
    color: var(--ink);
}

.upgrade-shop::-webkit-scrollbar { width: 10px; }
.upgrade-shop::-webkit-scrollbar-thumb { background: var(--cream); border: 3px solid var(--ink); }

.shop-wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    color: var(--paper);
    text-shadow: var(--text-outline-drop);
    padding: 4px 0 10px;
}

.upgrade-section {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* section signs: painted lettering on the barn wall */
.upgrade-section h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--cream);
    text-shadow: 2px 2px 0 var(--ink);
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.upgrade-section h3 small,
.upgrade-section h3 #achievement-count,
.upgrade-section h3 #challenge-count {
    font-size: 0.8em;
    opacity: 0.85;
}

/* upgrade lists stack with the section gap */
#click-upgrades,
#producer-upgrades,
#worm-upgrades {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* feed-tag cards */
.upgrade-button {
    /* relative: anchors the corner milestone badge */
    position: relative;
    background: var(--shop-card);
    border: 3px solid var(--ink);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: var(--shadow-card);
    cursor: not-allowed;
    transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
    color: var(--ink);
}

.upgrade-button.affordable {
    background: var(--grass);
    cursor: pointer;
}

.upgrade-button.affordable:hover {
    background: var(--grass-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.upgrade-button.affordable:active {
    transform: translateY(3px);
    box-shadow: var(--shadow-card-press);
}

/* unaffordable: cream tag, barn-red cost */
.upgrade-button:not(.affordable):not(.locked) .upgrade-cost {
    color: var(--barn-roof);
}

/* locked: dashed, flat, ??? */
.upgrade-button.locked {
    background: var(--shop-card-locked);
    border-style: dashed;
    box-shadow: none;
    color: var(--ink-3);
}

.upgrade-button.locked .picon {
    filter: brightness(0) opacity(0.55);
}

.upgrade-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.upgrade-row .picon {
    flex-shrink: 0;
}

.upgrade-main {
    flex: 1;
    min-width: 0;
}

.owned-count {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ink-2);
    min-width: 34px;
    text-align: right;
    line-height: 1;
}

.upgrade-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--ink);
    margin-bottom: 3px;
}

.upgrade-description {
    font-size: 0.9rem;
    color: var(--ink-3);
    margin-bottom: 3px;
}

.upgrade-cost {
    font-size: 1rem;
    color: var(--ink);
    font-weight: bold;
}

/* ===== Quick Mode shop: compact cards, whole click ladder, no bulk buy ===== */
body.quick-mode .buy-amount {
    display: none;
}

body.quick-mode .upgrade-section {
    margin-bottom: 10px;
    gap: 6px;
}

body.quick-mode #click-upgrades,
body.quick-mode #producer-upgrades,
body.quick-mode #worm-upgrades {
    gap: 6px;
}

body.quick-mode .upgrade-button {
    padding: 6px 10px;
}

body.quick-mode .upgrade-name {
    font-size: 1rem;
    margin-bottom: 1px;
}

body.quick-mode .upgrade-description {
    font-size: 0.8rem;
    margin-bottom: 1px;
}

body.quick-mode .upgrade-cost {
    font-size: 0.85rem;
}

body.quick-mode .owned-count {
    font-size: 1.4rem;
}

/* milestone label and bar share one line; the breakdown box repeats the
   milk/sec already under the counter, so it goes */
body.quick-mode .milestone-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

body.quick-mode .milestone-progress-label {
    margin: 0;
    white-space: nowrap;
}

body.quick-mode .milestone-progress-track {
    flex: 1;
    height: 8px;
}

body.quick-mode .production-breakdown {
    display: none !important;
}

/* bought / not-yet-buyable click steps: one flat line each */
.click-step {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    box-shadow: none;
}

.click-step .upgrade-name {
    margin: 0;
}

.click-step-info {
    font-size: 0.8rem;
    font-weight: bold;
}

.click-step.owned {
    color: var(--ink-3);
}

.click-step.owned .upgrade-name {
    color: var(--ink-3);
}

.click-step.upcoming {
    background: var(--shop-card-locked);
    border-style: dashed;
    color: var(--ink-3);
}

.click-step.upcoming .upgrade-name {
    color: var(--ink-3);
}

/* Milestone UI on producer cards */
.milestone-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gold);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 8px;
    padding: 1px 8px;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: bold;
    text-shadow: none;
}

.milestone-progress {
    margin-top: 8px;
}

.milestone-progress-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--ink-3);
    margin-bottom: 3px;
    text-align: left;
}

.milestone-progress-track {
    height: 10px;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 2px;
    overflow: hidden;
}

.milestone-progress-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(90deg, var(--gold) 0 8px, var(--gold-orange) 8px 10px);
    transition: width 0.2s ease;
}

/* Buy amount toggle: white enamel controls */
.buy-amount {
    display: flex;
    gap: 6px;
}

.buy-amount-btn {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 6px;
    padding: 3px 12px;
    box-shadow: var(--shadow-control);
    cursor: pointer;
    transition: transform 0.1s;
}

.buy-amount-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

.buy-amount-btn.active {
    background: var(--straw);
    transform: translateY(3px);
    box-shadow: none;
}

/* balances: painted on the wall */
.worm-balance,
.butter-balance {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--cream);
    text-shadow: 1px 1px 0 var(--ink);
}

/* production breakdown: small feed-tag */
.production-breakdown {
    background: var(--cream);
    border: 2px solid var(--ink);
    border-radius: 8px;
    padding: 10px;
    display: none;
}

.breakdown-item {
    font-size: 0.9rem;
    color: var(--ink);
    margin: 3px 0;
    font-weight: bold;
}

/* ===== Churn: a celebration event, not a shop row ===== */
.churn-button {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    /* screenshots catch the ready-state class flip mid-transition; live is fine */
    transition: none;
}

/* tease: dim dashed promise with a butter progress bar */
.churn-button.tease {
    border: 3px dashed var(--churn-dim-line);
    background: var(--churn-dim-bg);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--churn-dim-text);
    font-weight: 700;
    font-size: 0.9rem;
    align-items: flex-start;
    gap: 6px;
    cursor: default;
}

.churn-progress-track {
    width: 100%;
    height: 8px;
    border: 2px solid var(--churn-dim-line);
    border-radius: 2px;
    background: var(--paper);
    overflow: hidden;
}

.churn-progress-fill {
    height: 100%;
    background: var(--butter);
}

/* ready: gold stepped bands + shine sweep */
.churn-button.ready {
    border: 4px solid var(--ink);
    border-radius: 6px;
    padding: 12px 14px 14px;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--ink);
    background: linear-gradient(180deg, var(--butter-bright) 0 34%, var(--gold) 34% 72%, var(--butter-gold) 72%);
}

.churn-button.ready::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 36px;
    background: rgba(255, 255, 255, 0.55);
    animation: mmm-shine 2.6s ease-in-out infinite;
}

.churn-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink);
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.6);
}

.churn-sub {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* armed: hot orange confirm. Keep :hover in the selector or .ready:hover
   out-specifies it and masks the confirm state. */
.churn-button.armed,
.churn-button.armed:hover {
    background: linear-gradient(180deg, var(--armed-light) 0 34%, var(--armed) 34%);
    animation: mmm-armed-pulse 0.5s infinite alternate;
}

.churn-button.armed::before {
    display: none;
}

.churn-button.armed .churn-title {
    color: #fff;
    text-shadow: var(--text-outline);
}

.churn-button.armed .churn-sub {
    color: #fff;
    text-shadow: 1px 1px 0 var(--ink);
}

@keyframes mmm-armed-pulse {
    from { box-shadow: 0 5px 0 var(--ink), 0 0 4px rgba(255, 140, 0, .5); }
    to { box-shadow: 0 5px 0 var(--ink), var(--glow-armed); }
}

@keyframes mmm-shine {
    0%, 70% { transform: translateX(-120%) skewX(-20deg); }
    100% { transform: translateX(320%) skewX(-20deg); }
}

/* ===== Achievements: a trophy shelf on the barn wall ===== */
/* Quick Mode rounds have no achievements; the challenge board takes
   their spot (and exists only in Quick Mode) */
body.quick-mode #achievement-section,
#challenge-section {
    display: none;
}

body.quick-mode #challenge-section {
    display: flex;
}

/* feed-tag card holding the live checklist (rows styled with .challenge) */
.challenge-board {
    background: var(--shop-card);
    border: 3px solid var(--ink);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    padding: 8px 12px;
}

.ach-row {
    position: relative;
    display: flex;
    justify-content: space-around;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.ach-rail {
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 0;
    height: 10px;
    background: var(--fence);
    border: 3px solid var(--ink);
    border-radius: 2px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.ach-plaque {
    width: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.ach-medal {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: var(--dirt-dark);
    box-shadow: 0 3px 0 var(--ink);
}

.ach-medal .picon-cowhead {
    filter: brightness(0) opacity(0.55);
    transform: scale(0.8);
}

.ach-plaque.unlocked .ach-medal {
    background: linear-gradient(180deg, var(--butter-bright) 0 34%, var(--gold) 34% 72%, var(--butter-gold) 72%);
}

.ach-plaque.unlocked .ach-medal .picon-cowhead {
    filter: none;
}

.ach-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1.1;
    text-align: center;
    color: rgba(255, 248, 220, 0.5);
    text-shadow: 1px 1px 0 var(--ink);
}

.ach-plaque.unlocked .ach-name {
    color: var(--cream);
}

/* ===== Controls: round enamel buttons on the grass ===== */
.stats-button,
.mute-button {
    position: absolute;
    bottom: 20px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 50%;
    box-shadow: var(--shadow-control);
    cursor: pointer;
    z-index: 10;
    transition: transform 0.1s;
    padding: 0;
}

.stats-button { left: 20px; }
.mute-button { left: 86px; }

/* Long game -> Quick Mode: an enamel pill beside the round controls
   (a relative "?" link lands on the default mode when hosted and
   reloads the long game under file://) */
.quick-play-link {
    position: absolute;
    bottom: 20px;
    left: 152px;
    height: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 18px;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 26px;
    box-shadow: var(--shadow-control);
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: none;
    z-index: 10;
    transition: transform 0.1s;
}

.quick-play-link:hover {
    transform: scale(1.05);
}

.quick-play-link:active {
    transform: translateY(3px);
    box-shadow: none;
}

body.quick-mode .quick-play-link {
    display: none;
}

.stats-button:hover,
.mute-button:hover {
    transform: scale(1.08);
}

.stats-button:active,
.mute-button:active {
    transform: translateY(3px);
    box-shadow: none;
}

/* Muted: desaturate the cow and slash through */
.mute-button.muted .picon-cowhead {
    filter: grayscale(1) opacity(0.45);
}

.mute-button.muted::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 4px;
    height: 34px;
    background: var(--mute-red);
    border-radius: 2px;
    transform: translateX(-50%) rotate(45deg);
}

.stats-panel {
    position: absolute;
    bottom: 86px;
    left: 20px;
    width: 250px;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 12px;
    padding: 14px;
    text-align: left;
    box-shadow: var(--shadow-card);
    z-index: 11;
    display: none;
}

.stats-panel.show {
    display: block;
}

.stats-panel h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: 8px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 4px;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--ink);
    margin: 3px 0;
}

.stats-row span:last-child {
    font-weight: bold;
}

/* ===== Toasts: drop into the top of the world ===== */
.event-toast {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translate(-50%, -16px);
    background: var(--cream);
    color: var(--ink);
    padding: 8px 18px;
    border: 3px solid var(--ink);
    border-radius: 4px;
    font-weight: bold;
    box-shadow: var(--shadow-card);
    opacity: 0;
    transition: all 0.3s var(--ease-pop);
    pointer-events: none;
    z-index: 40;
}

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

/* achievement/churn toasts: notched gold ribbon */
.event-toast.ribbon {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ribbon-band {
    padding: 3px;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}

.ribbon-inner {
    padding: 6px 30px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%, 13px 50%);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink);
    white-space: nowrap;
    text-align: center;
    background: linear-gradient(180deg, var(--butter-bright) 0 34%, var(--gold) 34% 72%, var(--butter-gold) 72%);
}

.ribbon-text {
    margin-top: -2px;
    background: var(--ink);
    color: var(--cream);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 14px;
    border-radius: 0 0 6px 6px;
}

/* Save Indicator: small enamel chip, top right of the world */
.save-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--cream);
    color: var(--ink);
    padding: 6px 14px;
    border: 3px solid var(--ink);
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: bold;
    box-shadow: var(--shadow-sticker);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

.save-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

/* ===== CSS-drawn icons (no emoji anywhere in the UI) ===== */
.picon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

/* Butter pat: yellow slab with a lighter top */
.picon-butter {
    width: 18px;
    height: 13px;
    background: var(--butter);
    border: 2px solid var(--ink);
    border-radius: 3px;
}

.picon-butter::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 4px;
    background: var(--butter-light);
    border-radius: 2px;
}

/* Worm: two pink segments (shop-balance size) */
.picon-wormicon {
    width: 24px;
    height: 16px;
}

.picon-wormicon::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 11px;
    background: var(--worm);
    border: 2px solid var(--ink);
    border-radius: 50%;
}

.picon-wormicon::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 13px;
    height: 13px;
    background: var(--worm-head);
    border: 2px solid var(--ink);
    border-radius: 50%;
}

/* Pasture Dave: head crop from dave.png's idle cell at 1.5x
   (source rect 20,70 24x28 -> 36x42; the head is photo-baked, so the
   non-integer pixel scale reads fine, unlike the pixel-art body) */
.picon-dave {
    width: 36px;
    height: 42px;
    background: url('../assets/dave.png') no-repeat;
    background-size: 768px 192px;
    background-position: -30px -105px;
    image-rendering: pixelated;
}

/* Milking machine: grey box with a dial and hose stub */
.picon-machine {
    width: 26px;
    height: 26px;
    background: var(--steel);
    border: 2px solid var(--ink);
    border-radius: 4px;
    margin-top: 6px;
}

.picon-machine::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 50%;
}

.picon-machine::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: -8px;
    width: 8px;
    height: 3px;
    background: #555;
    border-radius: 2px;
}

/* Farmhouse: cottage crop from objects_atlas at 0.75x source
   (atlas is 3x; 144x168 -> 36x42) */
.picon-house {
    width: 36px;
    height: 42px;
    background: url('../assets/objects_atlas.png') no-repeat;
    background-size: 190.5px 86.25px;
    background-position: 0 0;
    image-rendering: pixelated;
}

/* Udder (click power) */
.picon-udder {
    width: 18px;
    height: 24px;
    background: var(--udder);
    border: 2px solid var(--ink);
    border-radius: 0 0 50% 50%;
}

/* Cow head: sprite crop from cows.png (cream idle, frame 0) */
.picon-cowhead {
    width: 38px;
    height: 32px;
    background: url('../assets/cows.png');
    background-size: 384px 768px;
    background-position: -26px -530px;
    image-rendering: pixelated;
}

/* Stats: three chart bars */
.picon-stats {
    width: 26px;
    height: 24px;
}

.picon-stats::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 6px;
    height: 10px;
    background: #4a76c9;
    border: 2px solid var(--ink);
    box-shadow: 18px 0 0 0 var(--barn-red);
}

.picon-stats::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 9px;
    width: 6px;
    height: 20px;
    background: var(--gold);
    border: 2px solid var(--ink);
}

/* ===== Sky bird: rare flyby, click for the MILK RUSH buff ===== */
.sky-bird {
    position: absolute;
    left: 0;
    width: 46px;
    height: 26px;
    z-index: 9;
    cursor: pointer;
    will-change: transform;
}

.sb-inner {
    position: absolute;
    inset: 0;
}

.sky-bird.rtl .sb-inner {
    transform: scaleX(-1);
}

.sb-body {
    position: absolute;
    left: 4px;
    top: 8px;
    width: 30px;
    height: 14px;
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 50% 60% 60% 40%;
}

/* beak */
.sb-body::before {
    content: '';
    position: absolute;
    right: -8px;
    top: 3px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid var(--gold-orange);
}

/* eye */
.sb-body::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 2px;
    width: 3px;
    height: 3px;
    background: var(--ink);
    border-radius: 50%;
}

.sb-wing {
    position: absolute;
    left: 12px;
    top: 1px;
    width: 16px;
    height: 12px;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 60% 60% 0 40%;
    transform-origin: 30% 90%;
    animation: sb-flap 0.35s ease-in-out infinite alternate;
}

@keyframes sb-flap {
    from { transform: rotate(-24deg); }
    to { transform: rotate(26deg); }
}

/* MILK RUSH chip under the milk counter */
.buff-chip {
    display: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    background: linear-gradient(180deg, var(--butter-bright) 0 34%, var(--gold) 34% 72%, var(--butter-gold) 72%);
    border: 3px solid var(--ink);
    border-radius: 6px;
    padding: 2px 12px;
    box-shadow: var(--shadow-sticker);
}

.buff-chip.show {
    display: block;
}

/* ===== Quick Mode: round clock (enamel control chip) + intro/end cards ===== */
.round-clock {
    display: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 6px;
    padding: 2px 12px;
    box-shadow: var(--shadow-control);
}

body.quick-mode .round-clock {
    display: block;
}

.round-clock.urgent {
    color: var(--paper);
    background: var(--mute-red);
}

.round-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    padding: 36px 16px 16px;
    overflow-y: auto;
    background: rgba(51, 51, 51, .55);
}

/* cream feed-tag card with the gold celebration ribbon pinned to its top */
.round-card {
    /* margin auto (not align-items) centers without clipping the top
       when a tall card scrolls on a short screen */
    margin: auto;
    width: min(380px, 100%);
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 0 24px 20px;
    text-align: center;
    color: var(--ink);
}

.round-card .ribbon-band {
    display: inline-block;
    margin: -24px 0 14px;
}

.round-intro-goal {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.round-intro-rules {
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 14px 18px;
    padding: 0;
}

.round-end-label {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink-2);
}

.round-end-score {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    color: var(--paper);
    text-shadow: var(--text-outline-drop);
    margin: 6px 0 12px;
}

.round-end-best {
    font-weight: bold;
    margin-bottom: 12px;
}

.round-end-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    text-align: left;
    border-top: 2px solid var(--ink);
    padding-top: 8px;
    margin-bottom: 12px;
}

.challenge-list {
    text-align: left;
    border-top: 2px solid var(--ink);
    padding-top: 8px;
    margin-bottom: 16px;
}

.challenge-title {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.challenge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    margin: 4px 0;
    color: var(--ink-3);
}

.challenge.done {
    color: var(--ink);
}

/* empty = dashed (the shop's locked grammar); done = gold (celebration) */
.challenge-mark {
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px dashed var(--ink-4);
    border-radius: 3px;
}

.challenge.done .challenge-mark {
    border: 2px solid var(--ink);
    background: linear-gradient(180deg, var(--butter-bright) 0 34%, var(--gold) 34% 72%, var(--butter-gold) 72%);
}

.challenge-text {
    flex: 1;
}

.challenge-progress {
    flex: none;
    font-weight: bold;
    font-size: 0.78rem;
    color: var(--ink-2);
}

.challenge.failed .challenge-text {
    text-decoration: line-through;
    color: var(--ink-4);
}

.challenge.failed .challenge-mark {
    opacity: 0.5;
}

.challenge.just-done .challenge-mark {
    animation: challenge-pop 0.5s var(--ease-pop);
}

@keyframes challenge-pop {
    0% { transform: scale(0.4); }
    60% { transform: scale(1.5); }
    100% { transform: scale(1); }
}



.round-btn {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--ink);
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 8px;
    box-shadow: var(--shadow-control);
    padding: 8px 24px;
    cursor: pointer;
}

.round-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

/* end card: results left, high scores right; stacks on narrow screens */
.round-card.wide {
    width: min(720px, 100%);
}

.round-end-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    text-align: left;
}

.round-end-main > .round-end-label,
.round-end-main > .round-end-score,
.round-end-main > .round-end-best {
    text-align: center;
}

@media (max-width: 700px) {
    .round-end-cols {
        grid-template-columns: 1fr;
    }
}

.round-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.round-btn.secondary {
    font-size: 1rem;
    padding: 8px 16px;
}

.round-btn.small {
    font-size: 0.95rem;
    padding: 4px 12px;
}

.name-form {
    margin-bottom: 14px;
}

.name-form label {
    display: block;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.name-row {
    display: flex;
    gap: 8px;
}

.name-row input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 6px;
    padding: 4px 8px;
}

.leaderboard {
    border-top: 2px solid var(--ink);
    padding-top: 8px;
    margin-bottom: 16px;
}

.lb-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 6px;
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: 4px;
}

.lb-row span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-row span:last-child {
    font-weight: bold;
}

/* the entry just saved: a celebration moment, so gold is allowed */
.lb-row.me {
    background: var(--butter-light);
    font-weight: bold;
}

.lb-empty {
    font-size: 0.85rem;
    color: var(--ink-3);
}

/* "Posting as @name" line under the global table */
.lb-note {
    font-size: 0.8rem;
    color: var(--ink-3);
    margin-bottom: 8px;
}

/* ===== Earthworm Jim (lives in .world; spawnWorm sets left/bottom anywhere
   on the grass band and a depth scale) ===== */
.worm-jim {
    position: absolute;
    width: 44px;
    height: 66px;
    z-index: 6;
    cursor: pointer;
    /* inline depth scale anchors at the ground line */
    transform-origin: 50% 100%;
}

.worm-jim::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 2px;
    width: 40px;
    height: 10px;
    background: var(--dirt);
    border: 2px solid var(--ink);
    border-radius: 50%;
}

/* per-worm clipping window for the emerge/burrow (mid-field worms have no
   container edge to hide behind); side/top slack absorbs the wiggle arc */
.worm-hole {
    position: absolute;
    inset: -10px -14px 0;
    overflow: hidden;
}

.worm-body {
    position: absolute;
    left: 14px;
    top: 10px;
    width: 44px;
    height: 66px;
    transform-origin: 50% 100%;
    animation: worm-pop 0.35s ease-out, worm-wiggle 0.6s 0.35s ease-in-out infinite alternate;
}

.worm-jim.burrow .worm-body {
    animation: worm-burrow 0.4s ease-in forwards;
}

.worm-seg {
    position: absolute;
    background: var(--worm);
    border: 3px solid var(--ink);
    border-radius: 50%;
}

.worm-seg-1 {
    width: 26px;
    height: 24px;
    top: 24px;
    left: 3px;
}

.worm-seg-2 {
    width: 26px;
    height: 24px;
    top: 42px;
    left: 11px;
}

/* Jim's actual head (wormface.png: cropped + downscaled jimmiewormhead.png),
   bobblehead scale over the two pink segments -- it replaces the old head
   segment entirely (spawnWorm no longer builds a seg-0). Photo content:
   no image-rendering override, the depth scale should stay smooth */
.worm-face {
    position: absolute;
    top: 0;
    left: 2px;
    width: 40px;
    height: 41px;
    background: url('../assets/wormface.png') no-repeat center / contain;
    z-index: 3;
}

@keyframes worm-pop {
    from { transform: translateY(70px); }
    to { transform: translateY(0); }
}

@keyframes worm-wiggle {
    from { transform: rotate(-7deg); }
    to { transform: rotate(7deg); }
}

@keyframes worm-burrow {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(70px); opacity: 0.6; }
}

/* Hit Stop: pause CSS animations/transitions while active */
body.hitstop *,
body.hitstop *::before,
body.hitstop *::after {
    animation-play-state: paused !important;
    transition: none !important;
}

/* ===== Phones / narrow screens: world stacks over a full-width shop ===== */
@media (max-width: 720px) {
    :root {
        --fs-counter: 2.2rem;
    }

    .game-container {
        flex-direction: column;
    }

    .world {
        flex: none;
        height: 52vh;
        height: 52dvh;
    }

    .upgrade-shop {
        width: 100%;
        height: auto;
        flex: 1;
        min-height: 0;
        border-left: none;
        border-top: 8px solid var(--cream);
        box-shadow: inset 0 4px 0 var(--ink);
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .milk-hud {
        top: 12px;
    }

    /* .cow is the one transform-free element in the hero stack (squash/
       wobble/mirror each own an inner layer) -- this scale must stay its
       only transform writer */
    .cow {
        transform: scale(0.6);
        transform-origin: 50% 100%;
    }

    /* touch hit-slop: teats are ~18x24px visual after the cow scale; the
       pseudo widens each tap target to ~35x41px without moving the splash
       anchor (positionInDrops reads the udder box, not the pseudo) */
    .udder {
        position: relative;
    }

    .udder::after {
        content: '';
        position: absolute;
        inset: -14px;
    }
}