/* The MachinEGG - shared site theme. All art is scaled by whole numbers to keep pixels square. */
:root {
    --sky: #4d9be6;
    --grass: #5dcd6d;
    --plum: #45293f;
    --ink: #2e222f;
    --wood: #9e4539;
    --wood-dark: #6e2727;
    --wood-light: #e6904e;
    --cream: #f5e8c0;
    --gold: #ffd24a;
    --muted: #7a5a4a;

    --font-title: 'Jersey 15', 'VT323', monospace;
    --font-body: 'VT323', monospace;

    --outline: -2px 0 0 var(--ink), 2px 0 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink), 3px 3px 0 var(--ink);

    /* Whole-number scale for the scenery, so a single copy fills the screen without repeating */
    --k: 4;
}

@media (min-width: 1100px) {
    :root { --k: 6; }
}

@media (min-width: 1640px) {
    :root { --k: 8; }
}

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

html {
    background: var(--plum);
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 1.3rem;
    line-height: 1.4;
    image-rendering: pixelated;
}

img {
    image-rendering: pixelated;
}

a {
    color: inherit;
}

h1, h2, h3 {
    font-family: var(--font-title);
    font-weight: 400;
    line-height: 1.1;
}

:focus-visible {
    outline: 3px dashed var(--gold);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

/* Scene bands: backgrounds stay low so chickens walk in front of them and behind the panels */
.band {
    position: relative;
    width: 100%;
}

.layer {
    position: relative;
    z-index: 2;
    pointer-events: none; /* Chickens stay clickable through the gaps between panels */
}

.layer a,
.stall,
.paper,
.video-card {
    pointer-events: auto;
}

.sky {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem 6rem;
    overflow: hidden;
    text-align: center;
    /* Art has no painted clouds. Cut at row 136, right above its own fence, so only the hills reach the meadow */
    background: var(--sky) url('pixel/bg_intro.png') repeat-x center calc(100% + 180px * var(--k)) / calc(272px * var(--k)) calc(316px * var(--k));
}

.sky.slim {
    padding: 1.5rem 1rem 3rem;
}

.meadow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6rem 1rem 5rem;
    background:
        url('pixel/scene/patch-light1.png') no-repeat 3% 120px / 368px 176px,
        url('pixel/scene/patch-dark1.png') no-repeat 1% 420px / 508px 304px,
        url('pixel/scene/patch-light2.png') no-repeat 97% 300px / 368px 176px,
        url('pixel/scene/patch-dark2.png') no-repeat 99% 40px / 508px 308px,
        url('pixel/scene/patch-dark2.png') no-repeat 2% 1250px / 508px 308px,
        url('pixel/scene/patch-light2.png') no-repeat 98% 1000px / 368px 176px,
        url('pixel/scene/patch-dark1.png') no-repeat 99% 1800px / 508px 304px,
        url('pixel/scene/patch-light1.png') no-repeat 2% 2200px / 368px 176px,
        var(--grass);
}

/* The fence stands on the line between the hills and the grass */
.meadow::before {
    content: '';
    position: absolute;
    top: -26px;
    left: 0;
    right: 0;
    z-index: 1;
    height: 52px;
    background: url('pixel/scene/fence.png') repeat-x center top / 1088px 52px;
    pointer-events: none;
}

.factory {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1rem 3rem;
    /* Floor once at the bottom, plain wall above it: the wall period fits the floor height exactly */
    background:
        url('pixel/scene/floor.png') repeat-x center bottom / calc(272px * var(--k)) calc(80px * var(--k)),
        url('pixel/scene/wall.png') repeat center bottom / calc(272px * var(--k)) calc(8px * var(--k)),
        var(--plum);
}

.ledge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: url('pixel/bg_intro_footer_portrait.png') repeat-x center bottom / 816px 42px;
}

/* Hero */
.logo-link {
    display: block;
    line-height: 0;
}

.logo {
    display: block;
    width: 696px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.tagline {
    margin: 1rem auto 1.5rem;
    max-width: 640px;
    color: #fff;
    font-size: 1.5rem;
    padding: 0.5rem 0.9rem;
    background: rgba(46, 34, 47, 0.72);
    line-height: 1.2;
}

.subtitle {
    font-family: var(--font-title);
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--gold);
    text-shadow: var(--outline);
}

.page-title {
    margin-top: 1rem;
    font-size: clamp(2.8rem, 7vw, 4.5rem);
    color: var(--gold);
    text-shadow: var(--outline);
    text-transform: uppercase;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.hero-actions .game-btn {
    min-width: 250px;
    font-size: 2rem;
}

/* Clouds */
.cloud {
    position: absolute;
    left: 0;
    z-index: 1;
    pointer-events: none;
    animation: drift linear infinite;
}

.cloud.c1 { top: 6%;  width: 204px; animation-duration: 95s; }
.cloud.c2 { top: 22%; width: 147px; animation-duration: 130s; animation-delay: -60s; }
.cloud.c3 { top: 40%; width: 116px; animation-duration: 110s; animation-delay: -25s; }
.cloud.c4 { top: 14%; width: 87px;  animation-duration: 160s; animation-delay: -110s; }
.cloud.c5 { top: 55%; width: 156px; animation-duration: 145s; animation-delay: -85s; }

@keyframes drift {
    from { transform: translateX(-220px); }
    to { transform: translateX(100vw); }
}

/* Coloured buttons from the in-game UI */
.game-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: 220px;
    padding: 0.3rem 0.8rem;
    border-style: solid;
    border-width: 15px;
    color: #fff;
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: var(--outline);
    cursor: pointer;
    background: none;
    transition: transform 0.08s steps(2);
}

.game-btn.green { border-image: url('pixel/btn_1.png') 5 fill / 15px repeat; }
.game-btn.red { border-image: url('pixel/btn_2.png') 5 fill / 15px repeat; }
.game-btn.blue { border-image: url('pixel/btn_3.png') 5 fill / 15px repeat; }

.game-btn img {
    width: 48px;
    height: 48px;
    flex: none;
}

.game-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-3px);
}

.game-btn:active {
    transform: translateY(3px);
}

.community {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Market stall panel: the title sits on the top plank */
.stall {
    width: 100%;
    max-width: 640px;
    border-style: solid;
    border-width: 51px 15px 33px;
    border-image: url('pixel/themachinegg_panel.png') 17 5 11 5 fill / 51px 15px 33px repeat;
    padding: 0.5rem 0.75rem;
}

.stall > h2 {
    margin: -45px 0 1.25rem;
    height: 36px;
    font-size: 2.47rem;
    line-height: 36px;
    color: var(--gold);
    text-align: center;
    text-shadow: var(--outline);
    text-transform: uppercase;
}

/* Shop tiles: one per platform */
.shop {
    display: grid;
    grid-template-columns: repeat(4, 156px);
    justify-content: center;
    gap: 2.25rem 1.25rem;
    padding-top: 1.75rem;
}

/* Four tiles across, or the last row would be left uneven */
.stall:has(.shop) {
    max-width: 780px;
}

.tile {
    position: relative;
    display: block;
    width: 156px;
    height: 159px;
    color: #fff;
    font-family: var(--font-title);
    font-weight: 400;
    text-decoration: none;
    isolation: isolate;
}

.tile-face {
    position: absolute;
    inset: 0;
    display: block;
    background: url('pixel/shop_item.png') no-repeat 0 0 / 156px 159px;
    transition: transform 0.1s steps(2);
}

.tile.gold .tile-face { background-image: url('pixel/shop_item_gold.png'); }
.tile.green .tile-face { background-image: url('pixel/shop_item_green.png'); }
.tile.purple .tile-face { background-image: url('pixel/shop_item_morado.png'); }

.tile-icon {
    position: absolute;
    top: 30px;
    left: 42px;
    width: 72px;
    height: 72px;
}

.tile-name {
    position: absolute;
    top: 110px;
    left: 12px;
    right: 12px;
    height: 30px;
    font-size: 1.69rem;
    line-height: 30px;
    text-align: center;
    white-space: nowrap;
    text-shadow: 2px 2px 0 var(--ink);
}

/* A shop chicken peeks over the tile on hover */
.tile::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 51px;
    z-index: -1;
    width: 54px;
    height: 51px;
    background: url('pixel/shop_chicken_tiers.png') no-repeat var(--tier, 0) 0 / 324px 51px;
    transition: transform 0.2s steps(4);
}

.tile:hover::before,
.tile:focus-visible::before {
    transform: translateY(-42px);
}

.tile:hover .tile-face {
    transform: translateY(-3px);
}

.tile:active .tile-face {
    transform: translateY(3px);
}

/* Section sign nailed to the wall */
.plaque {
    display: inline-block;
    margin-bottom: 1.75rem;
    padding: 0.1rem 1.5rem;
    border-style: solid;
    border-width: 12px;
    border-image: url('pixel/themachinegg_mainmenu_logo_base.png') 6 fill / 12px repeat;
    color: var(--gold);
    font-size: 2rem;
    text-shadow: var(--outline);
    text-transform: uppercase;
}

.plaque.small {
    font-size: 1.95rem;
}

.section-head {
    text-align: center;
}

/* Conveyor belt between scenes */
.belt {
    position: relative;
    z-index: 2;
    height: 78px;
    overflow: hidden;
    margin-top: -39px;
    pointer-events: none;
}

.belt-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 39px;
    background: url('pixel/belt_mid.png') repeat-x 0 0 / 150px 39px;
    animation: belt-run 3s linear infinite;
}

@keyframes belt-run {
    to { background-position-x: 150px; }
}

.belt-egg {
    position: absolute;
    left: 0;
    bottom: 24px;
    width: 56px;
    height: 56px;
    background: url('pixel/eggs.png') no-repeat var(--ex, 0) var(--ey, 0) / 168px 168px;
    animation: belt-carry 18s linear infinite;
}

@keyframes belt-carry {
    from { transform: translateX(-70px); }
    to { transform: translateX(100vw); }
}

/* Videos */
.videos {
    width: 100%;
    max-width: 1040px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.video-card {
    position: relative;
    min-width: 0;
    border-style: solid;
    border-width: 16px 16px 56px;
    border-image: url('pixel/themachinegg_modo_marco_portrait.png') 8 8 28 8 / 16px 16px 56px stretch;
}

.video-card.featured {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 760px;
    border-width: 24px 24px 72px;
    border-image: url('pixel/themachinegg_modo_marco_portrait.png') 8 8 24 8 / 24px 24px 72px stretch;
}

.video-frame {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ink);
}

.video-frame iframe,
.video-play img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    image-rendering: auto;
}

.video-play {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: none;
    cursor: pointer;
}

.video-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    background: url('pixel/btn_2.png') no-repeat 0 0 / 72px 72px;
    transition: transform 0.08s steps(2);
}

.video-play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    margin: -15px 0 0 -8px;
    border-style: solid;
    border-width: 15px 0 15px 24px;
    border-color: transparent transparent transparent #fff;
}

.video-play:hover::after {
    transform: scale(1.17);
}

.video-info {
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: -50px;
    height: 42px;
    text-align: center;
    line-height: 1.05;
    text-shadow: 2px 2px 0 var(--ink);
}

.video-card.featured .video-info {
    bottom: -62px;
    height: 48px;
}

.video-info a {
    display: block;
    overflow: hidden;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: 1.43rem;
    font-weight: 400;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-card.featured .video-info a {
    font-size: 2.08rem;
}

.video-info a:hover {
    text-decoration: underline;
}

.video-info span {
    font-size: 1.05rem;
}

/* Paper notes */
.paper {
    position: relative;
    border: 6px solid #c9a86a;
    background: var(--cream);
    box-shadow: inset 0 0 0 3px #fff6da, 0 6px 0 rgba(46, 34, 47, 0.45);
    color: var(--ink);
}

/* Red pin, same as the notice board in the game */
.paper::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: #c0283a;
    box-shadow: inset 3px 3px 0 #f0707a, 0 3px 0 rgba(46, 34, 47, 0.5);
}

.paper a {
    color: var(--wood);
}

.about {
    width: 100%;
    max-width: 1040px;
    margin-bottom: 2rem;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.note {
    padding: 1rem 1.1rem 1.1rem;
    text-align: center;
}

.note h3 {
    margin: 0.5rem 0;
    font-size: 1.95rem;
    color: var(--wood);
}

.note p {
    font-size: 1.25rem;
    line-height: 1.2;
}

.press-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
}

.press-banner img {
    flex: none;
    image-rendering: pixelated;
}

.press-banner div {
    flex: 1;
}

.press-banner h3 {
    font-size: 1.95rem;
    color: var(--wood);
}

.press-banner p {
    font-size: 1.25rem;
    line-height: 1.2;
}

.press-banner .game-btn {
    color: #fff;
}

/* Animated machines from the game */
.sprite-box {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 112px;
}

.sprite {
    background-repeat: no-repeat;
    animation: sprite-frames var(--speed, 1s) steps(8) infinite;
}

.sprite.washing {
    --row-w: 768px;
    width: 96px;
    height: 112px;
    background-image: url('pixel/washing_machine.png');
    background-size: 768px 112px;
}

.sprite.radio {
    --row-w: 640px;
    width: 80px;
    height: 64px;
    background-image: url('pixel/radio.png');
    background-size: 640px 128px;
    background-position-y: -64px;
}

@keyframes sprite-frames {
    to { background-position-x: calc(var(--row-w) * -1); }
}

/* Footer */
footer {
    position: relative;
    z-index: 2;
    padding: 2.25rem 1rem 1.25rem;
    text-align: center;
    color: var(--cream);
    font-size: 1.2rem;
    background: var(--plum) url('pixel/bg_intro_footer_wood_portrait.png') repeat-x center top / 240px 42px;
}

footer p + p {
    margin-top: 4px;
}

footer a {
    color: var(--gold);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Egg mini game: upgrade buttons stack over the egg counter in the corner */
.game-corner {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-height: calc(100vh - 24px);
    pointer-events: none;
}

.upgrade-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.upgrade-btn {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 10px 4px 4px;
    border: 3px solid var(--wood-light);
    background: rgba(46, 34, 47, 0.92);
    color: var(--cream);
    font-family: var(--font-title);
    font-size: 1.6rem;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    animation: fade-in 0.25s steps(4);
}

.upgrade-btn:not(:disabled):hover {
    background: var(--wood);
}

.upgrade-btn:not(:disabled):active {
    background: var(--wood-dark);
}

.upgrade-btn:disabled {
    border-color: rgba(245, 232, 192, 0.3);
    color: rgba(245, 232, 192, 0.65);
    cursor: not-allowed;
}

/* shop_icons.png is a 7x5 grid of 46x19 cells; this shows the middle of a cell at x2 */
.upgrade-btn i {
    flex: none;
    width: 56px;
    height: 38px;
    background: url('pixel/shop_icons.png') no-repeat calc(var(--ix) * -92px - 18px) calc(var(--iy) * -38px) / 644px 190px;
}

.upgrade-btn b {
    flex: 1;
    min-width: 0;
    font-weight: 400;
    white-space: nowrap;
}

/* VT323 is monospaced, so numbers keep their width while they change */
.upgrade-btn small {
    flex: none;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 1.9rem;
}

.upgrade-btn:disabled small {
    color: inherit;
}

.egg-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(340px, calc(100vw - 24px));
    padding: 6px 12px;
    border: 3px solid var(--gold);
    background: rgba(46, 34, 47, 0.92);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 2.6rem;
    line-height: 1;
    pointer-events: none;
}

.egg-hud i {
    flex: none;
    width: 28px;
    height: 28px;
    background: url('pixel/eggs.png') no-repeat -28px 0;
}

@keyframes fade-in {
    from { opacity: 0; }
}

/* Ending of the egg mini game, picture from the 46x19 shop_icons.png grid */
.upgrade-icon.large {
    margin: 0 auto;
    width: 164px;
    height: 76px;
    margin-bottom: 1rem;
    background-position: calc(var(--ix) * -184px - 10px) calc(var(--iy) * -76px);
    background-size: 1288px 380px;
}

.win-screen {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(46, 34, 47, 0.75);
    text-align: center;
}

.win-screen p {
    margin-bottom: 0.5rem;
    line-height: 1.15;
}

.win-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.win-actions .game-btn {
    min-width: 170px;
    font-size: 1.6rem;
}

.egg-hint {
    margin-top: 1rem;
    color: #fff;
    font-size: 1.25rem;
    padding: 0.1rem 0.7rem;
    background: rgba(46, 34, 47, 0.72);
}

/* Flying chickens: row 15 of every chicken sheet is the two-frame side flap */
#chicken-flock {
    position: absolute; /* Anchored to the page, so chickens stay put while scrolling */
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.flying-chicken {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size);
    height: var(--size);
    cursor: pointer;
    pointer-events: auto;
    will-change: transform;
}

.chicken-sprite {
    width: 100%;
    height: 100%;
    background: no-repeat 0 calc(var(--size) * -15) / calc(var(--size) * 8) calc(var(--size) * 17);
    image-rendering: pixelated;
    animation: flap 0.3s steps(2) infinite;
}

@keyframes flap {
    to { background-position-x: calc(var(--size) * -2); }
}

/* Pixel shadows: a stepped oval, five columns by three rows */
.chicken-shadow,
.egg-drop::before {
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    clip-path: polygon(20% 0, 80% 0, 80% 33.33%, 100% 33.33%, 100% 66.67%, 80% 66.67%, 80% 100%, 20% 100%, 20% 66.67%, 0 66.67%, 0 33.33%, 20% 33.33%);
}

/* It lies on the ground, below every chicken, so it doesn't follow their bobbing */
.chicken-shadow {
    top: 0;
    left: 0;
    z-index: -1;
    width: calc(var(--size) * 0.625);
    height: calc(var(--size) * 0.125);
    pointer-events: none;
    will-change: transform;
}

/* Hover Laying: circle that follows the mouse, between the chickens and the upgrades */
.hover-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    border: 3px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    will-change: transform;
}

/* Bee Attack: the bee that takes eggs out of the chickens, above them all */
.helper-bee {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
}

.helper-bee i {
    display: block;
    width: 48px;
    height: 39px;
    background: url('pixel/bee.png') no-repeat 0 0 / 96px 39px;
    image-rendering: pixelated;
    animation: bee-wings 0.14s steps(2) infinite;
}

@keyframes bee-wings {
    to { background-position-x: -96px; }
}

/* Heart over a chicken that just laid: fills up, one pixel row at a time, until it can lay again */
.chicken-heart {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    pointer-events: none;
}

.chicken-heart::before,
.chicken-heart::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('pixel/heart.png') no-repeat 0 0 / 24px 24px;
}

.chicken-heart::before {
    filter: brightness(0.3) saturate(0.4);
}

.chicken-heart::after {
    animation: heart-fill var(--cooldown) steps(8) forwards;
}

@keyframes heart-fill {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* Laid egg: tied to the screen, it falls to the bottom edge and shows what it was worth */
.egg-drop {
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    background: url('pixel/eggs.png') no-repeat var(--ex, 0) var(--ey, 0) / 84px 84px;
    pointer-events: none;
    animation: egg-fall 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards, egg-throw 1s ease-out forwards;
}

.egg-drop::before {
    content: '';
    top: calc(100% + 2px);
    left: 4px;
    width: 20px;
    height: 6px; /* Fits the gap eggs leave at the bottom of the screen */
    animation-name: egg-shadow;
    animation-duration: inherit; /* Each egg sets the time of its own fall */
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.egg-drop.landed::before {
    animation: none;
}

.egg-drop.landed {
    translate: 0 var(--fall);
    transform: translateX(var(--throw));
    animation: egg-land 0.7s steps(7) forwards;
    animation-duration: 0.7s !important;
}

.egg-drop span {
    position: absolute;
    top: -30px;
    left: -24px;
    right: -24px;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: 1.69rem;
    font-weight: 400;
    text-align: center;
    text-shadow: var(--outline);
}

@keyframes egg-fall {
    to { translate: 0 var(--fall); }
}

@keyframes egg-throw {
    to { transform: translateX(var(--throw)); }
}

/* Starts level with the shadow of the chicken and meets the egg as it lands */
@keyframes egg-shadow {
    from { translate: 0 var(--shadow-gap); }
}

@keyframes egg-land {
    to { opacity: 0; }
}

/* Text pages: contact and privacy */
.page-main {
    flex-grow: 1;
    padding: 5rem 1rem 4rem;
}

.page-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 780px;
}

.sky.slim .logo {
    width: 348px;
}

.back-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
    text-shadow: var(--outline);
}

.back-link:hover {
    color: var(--gold);
}

.page-section {
    padding: 1.1rem 1.5rem 1rem;
}

.page-section h2 {
    margin-bottom: 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 3px solid var(--wood-light);
    font-size: 2.08rem;
    color: var(--wood);
}

.page-section p,
.page-section li {
    font-size: 1.3rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.page-section ul {
    margin: 0.4rem 0 0.4rem 1.4rem;
    list-style: square;
}

.highlight {
    color: var(--wood);
    font-weight: normal;
}

.page-section strong {
    color: var(--wood-dark);
}

.muted {
    color: var(--muted);
}

.updated {
    margin-top: 0.3rem;
    color: #fff;
    font-size: 1.3rem;
    text-shadow: var(--outline);
}

/* Press kit */
.press-download {
    margin-top: 1.25rem;
}

.press-facts {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.35rem 1rem;
    font-size: 1.3rem;
    line-height: 1.25;
}

.press-facts dt {
    color: var(--wood);
}

.press-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.press-gallery a {
    display: block;
    min-width: 0;
    text-align: center;
}

.press-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border: 3px solid var(--wood);
}

.press-gallery .press-video img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.press-gallery .press-art img {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--plum);
    image-rendering: pixelated;
}

.press-sprites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.press-sprites a {
    min-width: 0;
    text-align: center;
}

.press-sprites img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--plum);
    image-rendering: pixelated;
}

/* Form */
.field {
    margin-bottom: 1rem;
}

.field label {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--wood);
    font-size: 1.3rem;
}

.field input,
.field textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 3px solid var(--wood);
    border-radius: 0;
    background: #fff8e0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.3rem;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    outline: 3px solid var(--wood-light);
    outline-offset: 0;
}

.field textarea {
    min-height: 140px;
}

/* Honeypot field - hidden from real users */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.submit-btn {
    width: 100%;
}

.submit-btn:disabled {
    filter: grayscale(0.6);
    cursor: not-allowed;
}

#form-status {
    display: none;
    margin-top: 1rem;
    font-size: 1.3rem;
}

#form-status.success {
    display: block;
    color: #1f7a3a;
}

#form-status.error {
    display: block;
    color: #c0283a;
}

/* Tablet and phone: drop one pixel scale step */
@media (max-width: 780px) {
    .logo {
        width: 522px;
    }

    .shop {
        grid-template-columns: repeat(2, 156px);
    }

    .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .press-banner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .logo {
        width: 348px;
    }

    .tagline {
        font-size: 1.3rem;
    }

    .shop {
        gap: 2.25rem 0.75rem;
    }

    .video-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stall {
        padding: 0.5rem 0;
    }

    .stall > h2 {
        font-size: 1.95rem;
    }

    .game-btn {
        width: 100%;
        max-width: 340px;
    }

    .upgrade-btn {
        font-size: 1.3rem;
    }

    .upgrade-btn i {
        width: 28px;
        height: 19px;
        background-position: calc(var(--ix) * -46px - 9px) calc(var(--iy) * -19px);
        background-size: 322px 95px;
    }

    .upgrade-btn small {
        font-size: 1.5rem;
    }

    .upgrade-list {
        max-height: 44vh;
    }

    .egg-hud {
        font-size: 1.9rem;
        padding: 3px 10px;
    }

    .page-section {
        padding: 1rem 1rem 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cloud,
    .belt-track,
    .belt-egg,
    .sprite {
        animation: none;
    }

    .belt-egg {
        display: none;
    }
}