.game-page {
  background: var(--cream);
}

.game-main { padding-top: 6rem; }
.game-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, .48fr); gap: clamp(3rem, 9vw, 10rem); align-items: center; min-height: calc(100svh - 6rem); padding: clamp(5rem, 11vh, 9rem) max(4vw, calc((100vw - var(--max-width)) / 2)); }
.game-hero__copy h1 { margin: 0; color: var(--harbor); font-size: clamp(3.4rem, 7vw, 7.8rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; word-break: keep-all; }
.game-hero__copy h1 .accent-word { color: var(--color-deep-wave); text-shadow: 4px 4px 0 color-mix(in srgb, var(--moss) 55%, transparent); }
.game-hero__copy > p:not(.kicker) { max-width: 40ch; margin: 2rem 0 0; font-size: clamp(.95rem, 1.3vw, 1.12rem); }
.game-hero__copy > a { display: inline-flex; justify-content: space-between; gap: 3rem; min-width: 15rem; min-height: 44px; margin-top: 2rem; padding: .75rem 0; border-bottom: var(--hairline); font-size: .74rem; font-weight: 700; }

.game-hero__preview { position: relative; width: min(100%, 25rem); margin: 0 auto; overflow: hidden; border: 5px solid var(--harbor); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); background: var(--pixel-moss); aspect-ratio: 9 / 16; }
.game-hero__preview > img:first-child { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.game-hero__player { position: absolute; left: 50%; bottom: 17%; width: 31%; height: auto; filter: drop-shadow(4px 5px 0 rgb(39 38 31 / .34)); transform: translateX(-50%); image-rendering: pixelated; }
.game-hero__preview figcaption { position: absolute; right: .8rem; bottom: .8rem; left: .8rem; display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .75rem; border: 3px solid var(--pixel-ink); background: var(--pixel-cream); box-shadow: 4px 4px 0 var(--pixel-ink); color: var(--pixel-ink); font: 700 .58rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; }
.game-hero__preview figcaption span { letter-spacing: .09em; }

.game-workshop { background: var(--harbor); color: var(--snow); }
.game-workshop__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .5fr); gap: clamp(2rem, 8vw, 8rem); align-items: end; margin-bottom: clamp(2.5rem, 7vh, 5rem); }
.game-workshop__head h2 { display: grid; gap: .12em; margin: 0; font-size: clamp(2.7rem, 5.2vw, 5.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.04; word-break: keep-all; }
.game-workshop__head h2 span:last-child { color: color-mix(in srgb, var(--moss) 34%, var(--cream)); text-shadow: 3px 3px 0 var(--moss); }
.game-workshop__head > p { margin: 0; font-size: .82rem; opacity: .78; }
.game-rules { width: min(100%, 64rem); margin: 0 auto clamp(2rem, 5vh, 3.5rem); padding: clamp(1rem, 2.5vw, 1.5rem); border: 3px solid var(--color-sky-tint); border-radius: var(--radius-soft); background: color-mix(in srgb, var(--pixel-ink) 88%, var(--pixel-moss)); box-shadow: var(--shadow-pop); }
.game-rules__title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid rgb(244 239 227 / .38); }
.game-rules__title .game-step { color: color-mix(in srgb, var(--pixel-moss-light) 72%, var(--pixel-cream)); }
.game-rules__title h3 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 720; letter-spacing: -.03em; word-break: keep-all; }
.game-rules ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.game-rules li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; min-width: 0; padding: 1rem; border-right: 1px solid rgb(244 239 227 / .24); }
.game-rules li:last-child { border-right: 0; }
.game-rules li > span { color: color-mix(in srgb, var(--pixel-moss-light) 72%, var(--pixel-cream)); font: 900 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.game-rules li strong { display: block; font-size: .76rem; }
.game-rules li p { margin: .35rem 0 0; font-size: .65rem; line-height: 1.55; opacity: .76; word-break: keep-all; }
.game-rules__reward { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.2rem; margin: 0; padding: .7rem 1rem 0; border-top: 1px solid rgb(244 239 227 / .38); font: 720 .61rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.game-rules__reward strong { color: color-mix(in srgb, var(--pixel-moss-light) 72%, var(--pixel-cream)); letter-spacing: .08em; }

.game-console { width: min(100%, 46rem); margin-inline: auto; padding: clamp(.7rem, 2vw, 1.15rem); border: 5px solid #14140f; border-radius: var(--radius-card); background: #d9c9a2; box-shadow: var(--shadow-pop); color: var(--pixel-ink); overflow: hidden; }
.game-screen-frame { position: relative; overflow: hidden; border: 5px solid var(--pixel-ink); background: #0f160c; box-shadow: inset 0 0 0 3px #6e6a50; }
.game-hud { position: relative; z-index: 8; display: grid; grid-template-columns: 1.1fr 1.25fr 1fr .8fr; min-height: 4.5rem; border-bottom: 4px solid var(--pixel-ink); background: #56391f; color: var(--pixel-cream); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-shadow: 2px 2px 0 #241b12; }
.game-hud > div { display: grid; align-content: center; justify-items: center; min-width: 0; padding: .45rem .3rem; border-right: 2px solid rgb(255 244 209 / .42); }
.game-hud > div:last-child { border-right: 0; }
.game-hud span { font-size: .52rem; font-weight: 800; letter-spacing: .11em; }
.game-hud strong { display: block; overflow: hidden; min-width: 0; max-width: 100%; margin-top: .12rem; font-size: clamp(.83rem, 2.7vw, 1.35rem); line-height: 1; white-space: nowrap; text-overflow: ellipsis; }
.game-hud strong b { font: inherit; }
.game-hud__life strong { color: #ff887f; letter-spacing: .03em; }

.pixel-screen { position: relative; overflow: hidden; width: 100%; height: clamp(25rem, 58dvh, 34rem); background: #839d42; container-type: inline-size; }
.game-panel { position: absolute; inset: 0; }
.game-panel[hidden] { display: none; }
.intro-scene, .result-scene { position: absolute; inset: 0; overflow: hidden; }
.intro-scene::after, .result-scene::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgb(18 26 12 / .08), rgb(18 26 12 / .3)); }
.intro-scene > img:first-child, .result-scene > img:first-child { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.intro-character { position: absolute; z-index: 1; left: 50%; bottom: 20%; width: 31%; height: auto; filter: drop-shadow(4px 5px 0 rgb(39 38 31 / .34)); transform: translateX(-50%); image-rendering: pixelated; }
.pixel-dialog, .result-dialog { position: absolute; z-index: 3; right: clamp(.65rem, 4cqw, 1.4rem); bottom: clamp(.75rem, 4cqw, 1.5rem); left: clamp(.65rem, 4cqw, 1.4rem); padding: clamp(.85rem, 4cqw, 1.4rem); border: 4px solid var(--pixel-ink); background: var(--pixel-cream); box-shadow: 5px 5px 0 rgb(39 38 31 / .85); color: var(--pixel-ink); }
.pixel-dialog::before, .result-dialog::before { position: absolute; top: -10px; left: 2rem; width: 12px; height: 12px; border-top: 4px solid var(--pixel-ink); border-left: 4px solid var(--pixel-ink); background: var(--pixel-cream); content: ""; transform: rotate(45deg); }
.game-step { margin: 0 0 .45rem; color: var(--pixel-moss); font: 900 clamp(.5rem, 2.3cqw, .68rem)/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; }
.pixel-dialog h3, .result-dialog h3, .pack-dialog h3 { margin: 0; font-size: clamp(1.15rem, 5.5cqw, 2rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.2; word-break: keep-all; }
.pixel-dialog > p:not(.game-step), .pack-dialog > p:not(.game-step) { margin: .65rem 0 0; font-size: clamp(.66rem, 2.55cqw, .84rem); line-height: 1.55; }

.game-primary, .game-secondary, .packing-items button, .packing-zones button, .d-pad button, .sound-toggle, .controller-action, .game-exit { min-height: 44px; border: 3px solid var(--pixel-ink); border-radius: 0; font: inherit; cursor: pointer; touch-action: manipulation; }
.game-primary { display: inline-flex; min-width: min(100%, 14rem); align-items: center; justify-content: space-between; gap: 2rem; margin-top: .85rem; padding: .7rem .8rem; background: var(--pixel-moss); box-shadow: 4px 4px 0 var(--pixel-ink); color: var(--pixel-cream); font-size: .74rem; font-weight: 850; }
.game-primary:hover, .game-primary:focus-visible { background: var(--pixel-honey); color: var(--pixel-ink); }
.game-primary:active { box-shadow: 1px 1px 0 var(--pixel-ink); transform: translate(3px, 3px); }
.game-secondary { padding: .7rem .9rem; background: var(--pixel-cream); box-shadow: 4px 4px 0 var(--pixel-ink); color: var(--pixel-ink); font-size: .72rem; font-weight: 850; }
.game-secondary:hover, .game-secondary:focus-visible { background: #f0c95b; }

.adventure-stage { --world-x: 0%; --world-y: 0%; position: absolute; inset: 0; overflow: hidden; background: #273c2e; isolation: isolate; }
.adventure-stage::after { position: absolute; z-index: 5; inset: 0; pointer-events: none; content: ""; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .13), inset 0 -4rem 7rem rgb(35 40 20 / .16); }
.adventure-world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transform: translate3d(var(--world-x), var(--world-y), 0) scale(1.08); transform-origin: center; will-change: transform; }
.quest-ribbon { position: absolute; z-index: 4; top: .7rem; left: .7rem; display: grid; padding: .35rem .48rem; border: 3px solid var(--pixel-ink); background: rgb(255 244 209 / .93); box-shadow: 3px 3px 0 var(--pixel-ink); font: 850 .52rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.quest-ribbon span { font-size: .45rem; }
.game-exit { position: absolute; z-index: 9; top: calc(4.5rem + .65rem); right: .65rem; display: grid; width: 44px; padding: 0; place-items: center; background: rgb(255 244 209 / .94); box-shadow: 3px 3px 0 var(--pixel-ink); color: var(--pixel-ink); font: 900 1.2rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.game-console[data-phase="intro"] .game-exit { display: none; }
.game-exit:hover, .game-exit:focus-visible { background: var(--pixel-honey); }
.game-exit:active { box-shadow: 1px 1px 0 var(--pixel-ink); transform: translate(2px, 2px); }
.collect-layer { position: absolute; z-index: 2; inset: 0; }
.player-shadow { position: absolute; z-index: 1; left: 50%; top: 80%; width: clamp(2.1rem, 10cqw, 3.4rem); height: clamp(.34rem, 1.8cqw, .62rem); pointer-events: none; background: rgb(31 31 25 / .38); box-shadow: 5px 0 0 rgb(31 31 25 / .2), -5px 0 0 rgb(31 31 25 / .2); transform: translate(-50%, -50%); image-rendering: pixelated; will-change: left, top, transform; }
.adventure-stage.is-moving .player-shadow { animation: shadow-walk .34s steps(2, jump-none) infinite; }
.pixel-player { --player-flip: 1; --player-lean: 0deg; position: absolute; z-index: 3; left: 50%; top: 74%; width: clamp(3.2rem, 17cqw, 5.4rem); height: auto; pointer-events: none; filter: drop-shadow(3px 4px 0 rgb(39 38 31 / .35)); transform: translate(-50%, -50%) scaleX(var(--player-flip)) rotate(var(--player-lean)); transform-origin: 50% 80%; image-rendering: pixelated; will-change: left, top, transform; }
.pixel-player.is-hit { animation: player-hit .18s steps(2, jump-none) 5; }
.pixel-player.is-walking { animation: player-walk .34s steps(2, jump-none) infinite; }
.pixel-player.is-jumping { animation: player-jump .62s cubic-bezier(.2, .72, .32, 1); }
.adventure-stage.is-jumping .player-shadow { animation: shadow-jump .62s ease-in-out; }
@keyframes player-hit { 50% { opacity: .18; } }
@keyframes player-walk {
  0%, 100% { transform: translate(-50%, -50%) scaleX(var(--player-flip)) rotate(var(--player-lean)); }
  25% { transform: translate(-50%, calc(-50% - 5px)) scaleX(var(--player-flip)) rotate(calc(var(--player-lean) - 2deg)); }
  50% { transform: translate(-50%, -50%) scaleX(var(--player-flip)) scaleY(.96) rotate(var(--player-lean)); }
  75% { transform: translate(-50%, calc(-50% - 5px)) scaleX(var(--player-flip)) rotate(calc(var(--player-lean) + 2deg)); }
}
@keyframes shadow-walk { 50% { opacity: .66; transform: translate(-50%, -50%) scaleX(.82); } }
@keyframes player-jump {
  0%, 100% { transform: translate(-50%, -50%) scaleX(var(--player-flip)) rotate(var(--player-lean)); }
  48% { transform: translate(-50%, calc(-50% - clamp(2rem, 11cqw, 4rem))) scaleX(var(--player-flip)) rotate(calc(var(--player-lean) - 4deg)); }
}
@keyframes shadow-jump { 48% { opacity: .18; transform: translate(-50%, -50%) scale(.58); } }
.footstep { position: absolute; z-index: -1; width: clamp(3px, 1.35cqw, 6px); height: clamp(4px, 1.8cqw, 8px); pointer-events: none; background: rgb(54 49 39 / .5); box-shadow: clamp(5px, 2.5cqw, 10px) clamp(2px, .8cqw, 4px) 0 rgb(54 49 39 / .36); transform: translate(-50%, -50%) rotate(var(--step-angle, 0deg)); image-rendering: pixelated; animation: footstep-fade .9s steps(4, jump-none) forwards; }
@keyframes footstep-fade { 0% { opacity: .82; } 70% { opacity: .5; } 100% { opacity: 0; } }
.collectible { position: absolute; width: clamp(3rem, 14cqw, 4.7rem); aspect-ratio: 1; transform: translate(-50%, -50%); will-change: top; }
.collectible::before { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: var(--pixel-honey); box-shadow: -1.8rem -.2rem 0 var(--pixel-cream), 1.7rem .3rem 0 var(--pixel-cream), -.9rem 1.65rem 0 var(--pixel-honey), .8rem -1.55rem 0 var(--pixel-honey); content: ""; opacity: .82; transform: translate(-50%, -50%); animation: item-sparkle .7s steps(2, jump-none) infinite; }
.collectible__sprite { animation: item-hover .5s steps(2, jump-none) infinite; }
@keyframes item-hover { 50% { margin-top: -4px; } }
@keyframes item-sparkle { 50% { opacity: .28; transform: translate(-50%, -50%) rotate(90deg); } }
.collectible[data-kind="weight"]::before, .collectible[data-kind="ink"]::before { background: #cf5c43; box-shadow: -1.8rem -.2rem 0 #ffb08b, 1.7rem .3rem 0 #ffb08b, -.9rem 1.65rem 0 #cf5c43, .8rem -1.55rem 0 #cf5c43; }
.collectible.is-collected { animation: collect-pop .25s steps(3, jump-none) forwards; }
.collectible.is-smashed { animation: hazard-smash .3s steps(4, jump-none) forwards; }
@keyframes collect-pop { to { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(12deg); } }
@keyframes hazard-smash { to { opacity: 0; transform: translate(-50%, -50%) scale(1.85) rotate(38deg); filter: brightness(1.7); } }
.slingshot-shot { position: absolute; z-index: 4; left: 50%; top: 75%; width: 10px; height: 10px; border: 2px solid var(--pixel-ink); border-radius: 50%; pointer-events: none; background: var(--pixel-honey); box-shadow: 0 5px 0 rgb(39 38 31 / .28), -7px 0 0 -3px var(--pixel-cream); transform: translate(-50%, -50%); image-rendering: pixelated; will-change: left, top; }
.game-toast { position: absolute; z-index: 6; top: 19%; left: 50%; max-width: 80%; padding: .42rem .55rem; border: 3px solid var(--pixel-ink); background: var(--pixel-cream); box-shadow: 3px 3px 0 var(--pixel-ink); font: 850 .6rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; transform: translateX(-50%); opacity: 0; }
.game-toast.is-visible { animation: toast-pop .85s steps(2, jump-none); }
@keyframes toast-pop { 0%, 100% { opacity: 0; transform: translate(-50%, 5px); } 12%, 78% { opacity: 1; transform: translate(-50%, 0); } }

.game-controller { display: grid; grid-template-columns: 8.6rem 1fr 8.5rem; gap: 1rem; align-items: center; min-height: 9.5rem; padding: .55rem 1rem; border-top: 4px solid #14140f; background: #d9c9a2; }
.d-pad { display: grid; grid-template-columns: repeat(3, 2.8rem); grid-template-rows: repeat(3, 2.8rem); filter: drop-shadow(4px 5px 0 rgb(39 38 31 / .36)); touch-action: none; }
.d-pad button { display: grid; min-width: 44px; min-height: 44px; place-items: center; padding: 0; border: 2px solid #10100e; background: var(--pixel-ink); color: var(--pixel-cream); font-size: 1rem; touch-action: none; user-select: none; -webkit-user-select: none; }
.d-pad button:hover, .d-pad button:focus-visible, .d-pad button.is-pressed { background: var(--pixel-moss); }
.d-pad button:active, .d-pad button.is-pressed { transform: translateY(2px); }
.d-pad__up { grid-column: 2; grid-row: 1; }
.d-pad__left { grid-column: 1; grid-row: 2; }
.d-pad button.d-pad__center { grid-column: 2; grid-row: 2; color: var(--pixel-honey); }
.d-pad__right { grid-column: 3; grid-row: 2; }
.d-pad__down { grid-column: 2; grid-row: 3; }
.controller-copy { display: grid; gap: .22rem; font: 700 .57rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.controller-copy strong { font-size: .8rem; letter-spacing: .12em; }
.controller-copy span { opacity: .7; }
.sound-toggle { display: inline-flex; width: fit-content; min-width: 8.7rem; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .35rem; padding: .45rem .6rem; background: var(--pixel-cream); box-shadow: 3px 3px 0 var(--pixel-ink); color: var(--pixel-ink); font: 850 .6rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.sound-toggle > span { color: var(--pixel-moss); font-size: 1rem; opacity: 1; }
.sound-toggle b { font: inherit; letter-spacing: .06em; }
.sound-toggle b span { opacity: 1; }
.sound-toggle[aria-pressed="true"] { background: var(--pixel-moss); color: var(--pixel-cream); }
.sound-toggle[aria-pressed="true"] > span { color: var(--pixel-honey); }
.sound-toggle:hover, .sound-toggle:focus-visible { background: var(--pixel-honey); color: var(--pixel-ink); }
.sound-toggle:active { box-shadow: 1px 1px 0 var(--pixel-ink); transform: translate(2px, 2px); }
.controller-actions { display: flex; align-items: center; justify-content: center; gap: .55rem; transform: rotate(-8deg); }
.controller-action { display: grid; width: 3.65rem; min-width: 44px; aspect-ratio: 1; place-items: center; padding: .3rem; border-radius: 50%; background: #8e4a3b; box-shadow: 3px 4px 0 rgb(39 38 31 / .35); color: var(--pixel-cream); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1; }
.controller-action--fire { background: var(--pixel-moss); }
.controller-action span { font-size: .9rem; font-weight: 900; }
.controller-action b { font-size: .48rem; letter-spacing: .04em; }
.controller-action:hover, .controller-action:focus-visible, .controller-action.is-active { background: var(--pixel-honey); color: var(--pixel-ink); }
.controller-action:active { box-shadow: 1px 1px 0 var(--pixel-ink); transform: translate(2px, 2px); }
.game-console:not([data-phase="catch"]) :is(.d-pad button[data-game-move], .controller-action) { opacity: .42; cursor: not-allowed; }
.controller-action:disabled, .d-pad button:disabled, .sound-toggle:disabled { pointer-events: none; }

.pixel-room { position: absolute; inset: 0; overflow: auto; padding: clamp(.7rem, 3.5cqw, 1.3rem); background-color: #dcb16b; background-image: linear-gradient(90deg, rgb(94 54 28 / .25) 2px, transparent 2px), linear-gradient(rgb(94 54 28 / .22) 2px, transparent 2px); background-size: 48px 24px; scrollbar-gutter: stable; }
.pack-dialog { padding: .7rem .8rem; border: 3px solid var(--pixel-ink); background: var(--pixel-cream); box-shadow: 4px 4px 0 var(--pixel-ink); }
.packing-board { display: grid; grid-template-columns: minmax(8rem, .8fr) 1fr; gap: .7rem; margin-top: .8rem; }
.packing-bag { position: relative; display: grid; min-height: 17rem; place-items: center; margin: 0; overflow: hidden; border: 3px solid var(--pixel-ink); background: #91a95b; box-shadow: 4px 4px 0 var(--pixel-ink); }
.packing-bag img { width: 72%; max-height: 15rem; object-fit: contain; image-rendering: pixelated; }
.packing-bag::after { position: absolute; z-index: 2; top: 51%; left: 50%; width: 7px; height: 7px; pointer-events: none; background: var(--pixel-honey); box-shadow: -28px -7px 0 var(--pixel-cream), 29px 6px 0 var(--pixel-cream), -17px 25px 0 var(--pixel-pink), 18px -25px 0 var(--pixel-honey); content: ""; opacity: 0; transform: translate(-50%, -50%); image-rendering: pixelated; }
.packing-bag.is-receiving img { animation: bag-receive .55s steps(3, jump-none); }
.packing-bag.is-receiving::after { animation: bag-receive-spark .58s steps(3, jump-none); }
@keyframes bag-receive { 48% { transform: translateY(3px) scale(.96); } 72% { transform: translateY(-3px) scale(1.03); } }
@keyframes bag-receive-spark { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 35%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.pack-transfer { position: fixed; z-index: 1300; top: var(--pack-start-y); left: var(--pack-start-x); width: clamp(3rem, 13vw, 4.6rem); pointer-events: none; will-change: left, top, opacity, transform; animation: pack-transfer-flight .72s cubic-bezier(.18, .78, .25, 1) forwards; }
@keyframes pack-transfer-flight {
  0% { top: var(--pack-start-y); left: var(--pack-start-x); opacity: 1; transform: translate(-50%, -50%) scale(.76) rotate(-9deg); }
  68% { top: calc(var(--pack-end-y) - 1.1rem); left: var(--pack-end-x); opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(7deg); }
  100% { top: var(--pack-end-y); left: var(--pack-end-x); opacity: 0; transform: translate(-50%, -50%) scale(.12) rotate(0); }
}
.packing-bag figcaption { position: absolute; right: .35rem; bottom: .35rem; left: .35rem; padding: .28rem; border: 2px solid var(--pixel-ink); background: var(--pixel-cream); font: 850 .46rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; }
.packing-zones h4, .packing-items h4 { margin: 0 0 .35rem; font: 850 .55rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
.packing-zones > div { display: grid; gap: .42rem; }
.packing-zones button, .packing-items button { display: grid; width: 100%; justify-items: start; padding: .55rem; background: var(--pixel-cream); box-shadow: 3px 3px 0 var(--pixel-ink); color: var(--pixel-ink); text-align: left; }
.packing-zones button:hover, .packing-zones button:focus-visible, .packing-items button:hover, .packing-items button:focus-visible, .packing-items button[aria-pressed="true"] { background: #f0c95b; }
.packing-zones button:active, .packing-items button:active { box-shadow: 1px 1px 0 var(--pixel-ink); transform: translate(2px, 2px); }
.packing-zones button strong, .packing-items button strong { font-size: clamp(.64rem, 2.9cqw, .78rem); }
.packing-zones button span, .packing-items button span { margin-top: .13rem; font-size: .51rem; opacity: .68; }
.packing-items { margin-top: .8rem; }
.packing-items > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.packing-items button { min-width: 0; }
.packing-items button:disabled { background: #b8b39d; color: #625f52; cursor: default; box-shadow: 1px 1px 0 var(--pixel-ink); }

.result-scene { filter: saturate(.85); }
.result-scene::after { background: rgb(30 35 19 / .48); }
.pixel-confetti, .pixel-confetti::before, .pixel-confetti::after { position: absolute; z-index: 2; width: 7px; height: 7px; background: var(--pixel-honey); box-shadow: 44px 12px var(--pixel-pink), 91px -8px var(--pixel-cream), 145px 18px var(--pixel-moss-light), 203px -4px var(--pixel-honey), 267px 10px var(--pixel-pink), 317px -12px var(--pixel-cream); content: ""; }
.pixel-confetti { top: 16%; left: 5%; }
.pixel-confetti::before { top: 72px; left: 18px; }
.pixel-confetti::after { top: 144px; left: -6px; }
.result-dialog { bottom: 8%; }
.game-final-score { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding: .55rem 0; border-top: 3px solid var(--pixel-ink); border-bottom: 3px solid var(--pixel-ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.game-final-score span { font-size: .52rem; letter-spacing: .1em; }
.game-final-score strong { font-size: clamp(1.7rem, 9cqw, 3.2rem); line-height: .85; }
.game-reward { min-height: 4.5rem; margin-top: .65rem; padding: .55rem; border: 3px solid var(--pixel-moss); background: #eef0c4; }
.game-reward strong { display: block; margin-bottom: .2rem; font-size: clamp(.88rem, 4cqw, 1.15rem); }
.game-reward p { margin: 0; font-size: clamp(.58rem, 2.3cqw, .72rem); line-height: 1.45; }
.game-result-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.game-result-actions .game-primary { flex: 1; }
.game-result-actions .game-secondary { margin-top: .85rem; }
.game-announcer { min-height: 1.75rem; margin: 0; padding: .35rem 0 0; color: var(--cream); font-size: .66rem; text-align: center; }
.game-wallet { display: grid; grid-template-columns: minmax(0, .7fr) minmax(15rem, 1fr) auto; gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-top: clamp(3rem, 7vh, 6rem); padding-top: 1.5rem; border-top: 1px solid var(--cream); }
.game-wallet h2 { margin: 0; font-size: clamp(1.4rem, 2.3vw, 2.3rem); font-weight: 350; letter-spacing: -.03em; }
.game-wallet > p { margin: 0; font-size: .78rem; }
.game-wallet > a { display: inline-flex; justify-content: space-between; gap: 2rem; min-height: 44px; padding: .65rem 0; border-bottom: 1px solid var(--cream); font-size: .7rem; font-weight: 650; }

html.game-round-active { overflow: hidden; overscroll-behavior: none; background: #14140f; }
body.game-round-active { position: fixed; inset: 0; top: var(--game-scroll-offset, 0); width: 100%; overflow: hidden; overscroll-behavior: none; }
body.game-round-active .game-console:not([data-phase="intro"]) { position: fixed; z-index: 1000; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; width: min(100%, 64rem); height: 100svh; height: 100dvh; margin: auto; padding: 0; border: 0; background: #d9c9a2; box-shadow: 0 0 0 100vmax #14140f; touch-action: none; }
body.game-round-active .game-console:not([data-phase="intro"]) .game-screen-frame { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-width: 0 0 4px; }
body.game-round-active .game-console:not([data-phase="intro"]) .pixel-screen { min-height: 0; height: 100%; }
body.game-round-active .game-console[data-phase="catch"] .game-controller { min-height: 0; padding-block: .35rem; }
body.game-round-active .game-console:is([data-phase="pack"], [data-phase="result"]) .game-controller { display: none; }
body.game-round-active .game-console:not([data-phase="intro"]) .game-announcer { width: 100%; max-width: none; min-height: calc(1.8rem + env(safe-area-inset-bottom)); margin: 0; padding: .35rem .65rem calc(.35rem + env(safe-area-inset-bottom)); box-sizing: border-box; background: #14140f; }

@media (max-width: 900px) {
  .game-hero { grid-template-columns: 1fr; min-height: 0; }
  .game-hero__preview { width: min(82vw, 24rem); }
  .game-wallet { grid-template-columns: 1fr 1fr; }
  .game-wallet > a { grid-column: 1 / -1; width: fit-content; }
}
@media (max-width: 620px) {
  .game-main { padding-top: 5rem; }
  .game-hero { gap: 2.5rem; padding-top: 4rem; padding-bottom: 5rem; }
  .game-hero__copy h1 { font-size: clamp(2.7rem, 13vw, 4.8rem); }
  .game-hero__preview { width: min(86vw, 22rem); box-shadow: 7px 7px 0 var(--moss); }
  .game-workshop.section { padding-inline: 0; }
  .game-workshop .section-inner { width: 100%; }
  .game-workshop__head { grid-template-columns: 1fr; align-items: start; padding-inline: 1rem; }
  .game-workshop__head h2 { font-size: clamp(2.35rem, 11.5vw, 4.3rem); }
  .game-rules { width: calc(100% - 2rem); box-shadow: 5px 5px 0 var(--moss); }
  .game-rules__title { display: block; }
  .game-rules__title h3 { margin-top: .25rem; }
  .game-rules ol { grid-template-columns: 1fr; }
  .game-rules li { padding: .75rem 0; border-right: 0; border-bottom: 1px solid rgb(244 239 227 / .24); }
  .game-rules li:last-child { border-bottom: 0; }
  .game-rules__reward { padding-inline: 0; }
  .game-console { width: 100%; padding: .35rem; border-width: 3px 0; box-shadow: none; }
  .game-screen-frame { border-width: 4px; }
  .game-hud { min-height: 3.75rem; }
  .game-hud > div { padding: .35rem .15rem; }
  .game-hud span { font-size: .43rem; }
  .game-hud strong { font-size: clamp(.7rem, 3.5vw, 1rem); }
  .pixel-screen { height: clamp(22rem, 55dvh, 29rem); }
  .game-controller { grid-template-columns: 8.35rem minmax(3rem, 1fr) 6.6rem; gap: .45rem; min-height: 9rem; padding: .35rem max(.45rem, env(safe-area-inset-right)) .35rem max(.45rem, env(safe-area-inset-left)); }
  .d-pad { grid-template-columns: repeat(3, 2.75rem); grid-template-rows: repeat(3, 2.75rem); }
  .controller-copy { justify-self: center; }
  .controller-copy > strong, .controller-copy > span { display: none; }
  .sound-toggle { width: 44px; min-width: 44px; height: 44px; justify-content: center; margin: 0; padding: 0; }
  .sound-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .controller-actions { gap: .35rem; transform: none; }
  .controller-action { width: 3.1rem; }
  .packing-board { grid-template-columns: minmax(7.5rem, .78fr) 1fr; }
  .packing-bag { min-height: 15rem; }
  .packing-items > div { grid-template-columns: repeat(2, 1fr); }
  .result-dialog { bottom: 4%; }
  .game-wallet { grid-template-columns: 1fr; align-items: start; padding-inline: 1rem; }
  .game-wallet > a { grid-column: auto; width: 100%; }
  .game-exit { top: calc(3.75rem + .55rem); right: .55rem; }
}
@media (max-width: 390px) {
  .game-hud > div:nth-child(2) { display: none; }
  .game-hud { grid-template-columns: 1.1fr 1fr .8fr; }
  .pixel-dialog { bottom: .65rem; }
  .pixel-dialog > p:not(.game-step) { line-height: 1.42; }
  .game-controller { grid-template-columns: 8.25rem minmax(2.75rem, 1fr) 6.2rem; gap: .3rem; }
  .d-pad { grid-template-columns: repeat(3, 2.7rem); grid-template-rows: repeat(3, 2.7rem); }
  .controller-action { width: 2.9rem; padding-inline: .15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .adventure-world { transform: scale(1.04); }
  .pixel-player.is-walking, .pixel-player.is-hit, .pixel-player.is-jumping, .adventure-stage.is-moving .player-shadow, .adventure-stage.is-jumping .player-shadow, .collectible::before, .collectible__sprite, .collectible.is-collected, .collectible.is-smashed, .game-toast.is-visible, .pixel-confetti, .footstep, .packing-bag.is-receiving img, .packing-bag.is-receiving::after { animation: none; }
  .pack-transfer { display: none; }
  .footstep { display: none; }
}
@media (forced-colors: active) {
  .game-console, .game-hero__preview, .game-primary, .game-secondary, .d-pad, .packing-bag { box-shadow: none; filter: none; }
}