/* Homepage layout. Colors, type, textures, cards and hero come from /styles.css. */
html{scroll-snap-type:none}.showcase-panel,.faq-section{height:auto;min-height:0;scroll-snap-align:none;overflow:visible;padding-block:clamp(48px,7vw,96px)}.showcase{height:auto}.showcase-panel.leaderboard-showcase{min-height:0;display:block;width:100%;margin:0}.leaderboard-list{margin-top:28px}.play-guide,.get-started{background:linear-gradient(126deg,rgba(20,241,149,.08) 0 26%,transparent 26% 70%,rgba(38,83,171,.1) 70%)}.play-guide h2,.get-started h2{font-family:'Dogica Pixel Bold',monospace;font-size:clamp(20px,3vw,36px);line-height:1.5;color:var(--text-primary)}.play-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:32px}.play-steps article{border-top:1px solid var(--stroke);padding-top:20px}.play-steps img{width:112px;height:112px;object-fit:contain;image-rendering:pixelated;display:block;margin-bottom:24px}.play-steps h3{font:14px/1.8 'Dogica Pixel Bold',monospace;color:var(--accent)}.play-steps p,.get-started p{font-size:11px;line-height:2;color:var(--text-secondary)}.get-started{display:grid;grid-template-columns:1fr 200px;align-items:center;gap:32px}.get-started>img{width:100%;image-rendering:pixelated}.get-started h2{margin:24px 0}.get-started p{max-width:580px}.bounce-cta{background:var(--accent);color:var(--text-dark);border:2px solid var(--accent);border-radius:0;min-height:48px;padding:16px 20px;font:11px/1.5 'Dogica Pixel Bold',monospace;text-transform:uppercase;cursor:pointer;margin-top:16px}.faq-section{width:100%}.faq-shell{min-height:0;height:auto}.catalog-showcase{align-items:center}.showcase-item-tile{border-radius:0}.leaderboard-name[href]{text-decoration:none;color:inherit}.leaderboard-name[href]:hover{color:var(--accent);text-decoration:underline}dialog{max-width:min(520px,calc(100vw - 24px));padding:44px 24px 24px;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--stroke-strong);border-radius:0}dialog::backdrop{background:rgba(1,2,7,.9)}dialog h2{font-size:18px;line-height:1.6}dialog p{font-size:11px;line-height:2;color:var(--text-secondary)}dialog .close{position:absolute;right:8px;top:6px;background:transparent;border:1px solid var(--stroke);color:var(--accent);width:44px;height:44px;font-size:24px;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:820px){.showcase-panel,.faq-section{padding:40px 18px}.play-steps{grid-template-columns:1fr;gap:24px}.play-steps article{display:grid;grid-template-columns:1fr 82px;column-gap:16px}.play-steps img{grid-column:2;grid-row:1/3;width:82px;height:100px;margin:0}.play-steps h3{font-size:12px;margin:0 0 12px}.play-steps p{margin:0;font-size:10px}.get-started{grid-template-columns:1fr}.get-started>img{display:none}.catalog-showcase{gap:24px}.showcase-panel.leaderboard-showcase{padding:40px 18px}.get-started h2{font-size:22px}.faq-shell{padding:0}.catalog-content,.item-gallery,.featured-world-card{min-width:0}}
.faq-header h2{font-size:clamp(28px,3.4vw,48px);line-height:1.2;letter-spacing:0;overflow-wrap:normal}.faq-shell{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:40px}.shop-showcase .item-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;max-height:none;overflow:visible}.showcase-item-tile{min-width:0}.lootbox-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;max-height:none;overflow:visible}.featured-world-card{aspect-ratio:16/9}.play-guide,.get-started,.showcase-panel.leaderboard-showcase{width:min(1500px,calc(100vw - 32px));margin:0 50%;transform:translateX(-50%)}
@media(max-width:820px){.faq-shell{grid-template-columns:1fr;gap:24px}.faq-header h2{font-size:30px}.shop-showcase .item-gallery,.lootbox-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.play-guide,.get-started,.showcase-panel.leaderboard-showcase{width:100vw}}
/* Hero and game art refinements, keeping existing Bounce tokens. */
.hero-message h1{font-size:clamp(22px,2.95vw,51px);text-shadow:0 0 8px rgba(255,255,255,.38),0 0 26px rgba(255,255,255,.2),0 0 48px rgba(255,255,255,.1)}
.play-steps article{display:grid;grid-template-rows:160px auto 1fr;align-content:start}.play-steps .step-art{height:160px;width:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;margin:0}.play-steps .step-art img{width:auto;height:auto;max-width:110px;max-height:92px;margin:0;object-fit:contain}.play-steps .jump-art img{max-height:none;max-width:none;width:92px;height:124px}.play-steps h3{margin:20px 0 12px}.play-steps p{margin:0}.get-started .start-monke{display:block;width:177px;align-self:end}.start-monke img{display:block;width:100%;height:auto;image-rendering:pixelated}
.lootbox-gallery{grid-template-columns:repeat(auto-fit,minmax(64px,96px));justify-content:center;gap:12px}.lootbox-art picture{display:block}.lootbox-art img{width:min(100%,230px);height:auto;object-fit:contain}.leaderboard-filters{display:flex;gap:10px;margin:24px 0 12px;flex-wrap:wrap}.leaderboard-filters button{min-height:48px;padding:12px 16px;border:1px solid var(--stroke);background:var(--bg-inset);color:var(--text-secondary);font:11px/1.6 'Dogica Pixel',monospace;cursor:pointer}.leaderboard-filters button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}#ranking-status{font:11px/1.8 'Dogica Pixel',monospace;color:var(--text-secondary)}.leaderboard-name[href]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--stroke-strong)}
@media(orientation:portrait){.hero-message h1{font-size:clamp(17px,4.5vw,29px)}}
@media(max-width:820px){.play-steps article{grid-template-columns:minmax(0,1fr) 100px;grid-template-rows:auto auto;column-gap:16px;min-height:144px;align-content:center}.play-steps .step-art{grid-column:2;grid-row:1/3;width:100px;height:128px;padding-bottom:0;align-self:end}.play-steps .step-art img{max-width:76px;max-height:76px}.play-steps .jump-art img{width:92px;height:124px;max-width:92px;max-height:124px}.play-steps h3{margin:0 0 12px}.play-steps p{grid-column:1}.get-started .start-monke{width:118px;justify-self:center;margin-top:16px}.lootbox-gallery{grid-template-columns:repeat(4,minmax(0,72px));gap:8px;justify-content:center}.lootbox-art img{max-width:180px}.leaderboard-filters{gap:6px}.leaderboard-filters button{flex:1;padding:10px 6px;font-size:9px}}
.lootbox-showcase{grid-template-rows:auto auto}.lootbox-art{justify-content:center;min-height:0}.lootbox-art picture{width:230px;height:230px;display:grid;place-items:center}.lootbox-art img{width:230px;max-width:100%;max-height:230px;object-fit:contain}.lootbox-gallery{padding:8px}
@media(max-width:820px){.lootbox-showcase{grid-template-rows:auto auto auto;row-gap:24px}.lootbox-art picture{width:180px;height:180px}.lootbox-art img{max-height:180px}.play-steps .step-art:not(.jump-art) img{width:76px;height:76px;object-fit:contain}}
/* Align visible artwork, accounting for each source's transparent canvas.
   Jump contact pose = 63 native px high; closed chest = 340/625 canvas height. */
.play-steps .step-art{--visible-art:80px;position:relative;overflow:visible;padding:0;height:160px}
.play-steps .step-art img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);margin:0;max-width:none;max-height:none;object-fit:fill}
.play-steps .jump-art img{width:calc(var(--visible-art)*92/63);height:calc(var(--visible-art)*124/63)}
.play-steps .banana-art img{width:calc(var(--visible-art)*300/285);height:var(--visible-art)}
.play-steps .chest-art img{width:calc(var(--visible-art)*625/340);height:calc(var(--visible-art)*625/340);bottom:calc(var(--visible-art)*-60/340);margin-left:calc(var(--visible-art)*-7.5/340)}
/* Full animation bounds are x33..142 / y157..243. Crop only transparent padding. */
.lootbox-art picture{position:relative;overflow:hidden;width:300px;height:240px;display:block}
.lootbox-art img{position:absolute;width:460px;height:667.5px;max-width:none;max-height:none;left:-70px;top:-380px;object-fit:fill}
@media(max-width:820px){.play-steps .step-art{--visible-art:64px;height:144px;width:100px}.play-steps .step-art:not(.jump-art) img{max-width:none;max-height:none;object-fit:fill}.play-steps .banana-art img{width:calc(var(--visible-art)*300/285);height:var(--visible-art)}.play-steps .chest-art img{width:calc(var(--visible-art)*625/340);height:calc(var(--visible-art)*625/340)}.lootbox-art picture{width:240px;height:196px}.lootbox-art img{width:368px;height:534px;left:-55px;top:-300px;max-width:none;max-height:none}}
@media(prefers-reduced-motion:reduce){.lootbox-art img{width:300px;height:300px;left:0;top:-70px}.lootbox-art picture{height:220px}@media(max-width:820px){.lootbox-art img{width:240px;height:240px;top:-55px}.lootbox-art picture{height:180px}}}
.play-steps .step-art.banana-art img{width:calc(var(--visible-art)*300/285);height:var(--visible-art);max-width:none;max-height:none}
.play-steps .step-art.chest-art img{width:calc(var(--visible-art)*625/340);height:calc(var(--visible-art)*625/340);max-width:none;max-height:none}
/* Homepage interaction pass: existing square frames, pixel type and game palette. */
.hero-install{margin-top:22px}.hero-store-note{display:block;margin-top:10px;font:11px/1.5 system-ui,sans-serif;color:var(--text-secondary)}
.play-steps article{position:relative}.play-steps article:not(:last-child)::after{content:'→';position:absolute;right:-24px;top:96px;color:var(--accent);font-size:18px}
.collectible-tile{position:relative;padding:0;cursor:pointer;overflow:hidden;background:var(--bg-inset);color:var(--accent);aspect-ratio:1}.collectible-tile img{width:100%;height:100%;object-fit:contain}.collectible-tile:hover{border-color:var(--accent)}
.rarity-common{border-color:rgba(20,241,149,.82)!important}.rarity-rare{border-color:rgba(190,92,255,.95)!important;box-shadow:0 0 14px #be5cff2e}.rarity-legendary{border-color:rgba(255,199,77,.96)!important;box-shadow:0 0 15px #ffc74d2e}.rarity-mythic{border-color:rgba(255,77,154,.98)!important;box-shadow:0 0 14px #ff4d9a38}
.collectible-tile.rarity-mythic::after,#item-dialog.rarity-mythic .item-preview-art::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(115deg,transparent 25%,#fd84ef80 39%,#c8ffffb3 48%,#92b8ff80 56%,transparent 70%),linear-gradient(145deg,#e264ed26,transparent 45%,#55ede626);background-size:250% 100%,100% 100%;mix-blend-mode:screen;animation:home-holo 5s ease-in-out infinite}
@keyframes home-holo{0%,15%{background-position:150% 0,0 0}75%,100%{background-position:-100% 0,0 0}}
.new-item-label{position:absolute;top:4px;right:4px;padding:5px;background:var(--accent);color:var(--text-dark);font:8px/1 'Dogica Pixel Bold',monospace;z-index:2}
.featured-world-card{height:auto;aspect-ratio:16/9}.featured-world-button{width:100%;height:100%;aspect-ratio:auto;display:block;border:1px solid var(--stroke)}.featured-world-button img{object-fit:cover}.world-selector{display:flex;gap:8px;min-height:0;flex-wrap:wrap}.world-selector[hidden]{display:none}.world-thumb{width:80px;aspect-ratio:16/9;padding:0;background:var(--bg-inset);border:1px solid var(--stroke);cursor:pointer}.world-thumb img{width:100%;height:100%;object-fit:cover}.world-thumb[aria-pressed=true]{border:2px solid var(--accent)}
#item-dialog{width:min(600px,calc(100vw - 24px));max-width:none;max-height:calc(100svh - 24px);overflow:auto;padding-top:60px}#item-dialog.is-world{width:min(900px,calc(100vw - 24px))}.item-preview-art{position:relative;aspect-ratio:1;max-width:380px;margin:0 auto 24px;background:var(--bg-inset);border:1px solid var(--stroke);overflow:hidden}.item-preview-art img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.is-world .item-preview-art{aspect-ratio:16/9;max-width:none}#item-title{line-height:1.7;overflow-wrap:anywhere}#item-description{line-height:1.8}
.motion-replay{min-height:44px;padding:10px 14px;border:1px solid var(--stroke);background:var(--bg-inset);color:var(--accent);font:10px/1.5 'Dogica Pixel',monospace;cursor:pointer;margin-top:8px}.motion-replay:disabled{opacity:.5;cursor:default}.lootbox-art.is-still img{width:300px;height:300px;left:0;top:-70px}
.feed-state{min-height:130px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;grid-column:1/-1;padding:16px;font:11px/1.8 'Dogica Pixel',monospace;color:var(--text-secondary)}.feed-monke{width:83px!important;height:61px!important;object-fit:contain;image-rendering:pixelated}.feed-retry{min-height:44px;background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);padding:10px 14px;cursor:pointer;font:inherit}.item-gallery[aria-busy=true]{min-height:180px}.leaderboard-list[aria-busy=true]{min-height:300px}
.leaderboard-name{display:flex;gap:12px;align-items:center;min-width:0;min-height:48px}.leaderboard-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-avatar{width:44px;height:44px;flex-shrink:0;object-fit:contain;border:1px solid var(--stroke);background:var(--bg-inset);image-rendering:pixelated}.ranking-unit{display:block;color:var(--text-secondary);font:9px/1.6 'Dogica Pixel',monospace;margin-top:6px}.leaderboard-score{text-align:right}#ranking-challenge{font:12px/1.8 'Dogica Pixel',monospace;color:var(--text-secondary)}
.profile-promo{display:grid;grid-template-columns:1fr .7fr;gap:36px;align-items:center;background:linear-gradient(126deg,rgba(20,241,149,.12) 0 32%,transparent 32%),var(--bg-card)}.profile-promo h2{font:clamp(20px,3vw,34px)/1.6 'Dogica Pixel Bold',monospace}.profile-promo p{font:11px/1.9 'Dogica Pixel',monospace;color:var(--text-secondary)}.profile-promo .bounce-cta{display:inline-block;text-decoration:none}.profile-promo .profile-promo-note{font-size:9px;margin-top:18px}.profile-promo-art{display:grid;grid-template-columns:1fr 1fr;gap:12px}.profile-promo-art img{width:100%;aspect-ratio:1;border:1px solid var(--accent);image-rendering:pixelated}
@media(max-width:820px){.hero-install{min-height:44px;padding:12px;font-size:9px;margin-top:12px}.hero-store-note{margin-top:5px;font-size:10px}.hero-message p{font-size:13px;line-height:1.5}.play-steps article:not(:last-child)::after{content:'↓';right:auto;left:0;top:auto;bottom:-25px;font-size:14px}.play-steps{gap:36px}.lootbox-art.is-still img{width:240px;height:240px;left:0;top:-55px}.ranking-avatar{width:32px;height:32px}.leaderboard-name{gap:8px}.profile-promo{grid-template-columns:1fr;gap:24px}.profile-promo-art{width:min(260px,100%);justify-self:center}.showcase-panel,.faq-section,.showcase-panel.leaderboard-showcase{padding-block:32px}.catalog-text{line-height:1.8}.catalog-badges{margin-top:16px}.leaderboard-filters button{font-size:8px}.hero-message{top:112px}}
@media(prefers-reduced-motion:reduce){.collectible-tile.rarity-mythic::after,#item-dialog.rarity-mythic .item-preview-art::after{animation:none;background-position:45% 0,0 0}}
/* Passive image-only collection display; only the explicitly featured world appears. */
.collectible-tile{cursor:default;border:1px solid var(--stroke-strong)}.collectible-tile:hover{border-color:var(--stroke-strong)}
.featured-profile-preview{position:relative;border:1px solid var(--stroke);background:var(--bg-card);min-width:0;overflow:hidden}.featured-profile-banner{height:140px;background:linear-gradient(126deg,var(--accent-soft) 0 30%,transparent 30% 65%,#2653ab33 65%)}.featured-profile-banner img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.featured-profile-identity{position:relative;display:flex;align-items:end;gap:14px;padding:0 16px 16px;margin-top:-36px;background:linear-gradient(transparent,#01020788)}#featured-profile-avatar{width:72px;height:72px;border:1px solid var(--accent);background:var(--bg-inset);flex-shrink:0}#featured-profile-avatar img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}#featured-profile-name{font:18px/1.6 'Dogica Pixel Bold',monospace;margin:0;overflow-wrap:anywhere;color:var(--text-primary)}.featured-profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}.featured-profile-stats>div{padding:14px 10px;border-right:1px solid var(--stroke);min-width:0}.featured-profile-stats>div:last-child{border:0}.featured-profile-stats span{display:block;font:8px/1.6 'Dogica Pixel',monospace;color:var(--text-secondary)}.featured-profile-stats strong{display:block;margin-top:10px;font:18px/1.5 'Dogica Pixel Bold',monospace;color:var(--accent)}.featured-profile-collection{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 18px)/4);gap:6px;padding:12px;overflow-x:auto;scroll-snap-type:x proximity}.featured-profile-collection>div{min-width:0;scroll-snap-align:start}.featured-profile-collection:empty{display:none}.profile-promo #featured-profile-status{padding:12px;margin:0;font:10px/1.8 system-ui,sans-serif;color:var(--text-secondary)}
@media(min-width:821px){.profile-promo{grid-template-columns:1fr 1fr}}
/* Square, edge-to-edge world art in the reward pool; featured shop art stays wide. */
#showcase-lootbox-items .world-thumbnail img{object-fit:cover;object-position:center;width:100%;height:100%}
/* Native horizontal rails: one row at every width, with a next-card peek on phones. */
#showcase-shop-items,#showcase-lootbox-items{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px;width:100%;min-width:0;max-width:100%;padding:8px 2px 12px;margin-inline:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:2px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--stroke-strong) transparent;grid-template-columns:none;grid-auto-flow:initial;max-height:none}
#showcase-shop-items>.collectible-tile,#showcase-lootbox-items>.collectible-tile{flex:0 0 clamp(64px,calc((100% - (var(--rail-count,9) - 1)*10px)/var(--rail-count,9)),112px);min-width:0;aspect-ratio:1;height:auto;scroll-snap-align:start;scroll-snap-stop:normal}
#showcase-shop-items>.feed-state,#showcase-shop-items>.catalog-placeholder,#showcase-lootbox-items>.feed-state,#showcase-lootbox-items>.catalog-placeholder{flex:1 0 100%;min-width:0}
#showcase-shop-items:focus-visible,#showcase-lootbox-items:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:820px){#showcase-shop-items,#showcase-lootbox-items{gap:8px;scroll-snap-type:x mandatory;padding-bottom:10px}#showcase-shop-items>.collectible-tile,#showcase-lootbox-items>.collectible-tile{flex-basis:calc((100% - 24px)/3.2)}}

.app-coming-soon{display:inline-block;padding:14px 18px;margin-top:16px;border:1px solid var(--stroke-strong);background:var(--bg-inset);color:var(--text-secondary);font:11px/1.7 'Dogica Pixel Bold',monospace;text-transform:uppercase}
/* One continuous backdrop below the video, rather than section-sized backgrounds. */
.screen-backdrop .accent-layer-a{background:linear-gradient(126deg,rgba(20,241,149,.12) 0 24%,transparent 24% 66%,rgba(38,83,171,.16) 66% 100%),linear-gradient(145deg,rgba(20,241,149,.06),transparent 48%,rgba(153,69,255,.05));animation:none}
.screen-backdrop .accent-layer-b{background:radial-gradient(ellipse at 82% 35%,rgba(31,80,180,.14),transparent 55%);animation:none}
.showcase,.showcase-panel,.play-guide,.profile-promo,.get-started,.faq-section{background:transparent}
.showcase::before,.showcase::after{content:none}
.hero-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);padding-top:12px}.hero-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--text-primary);text-decoration:none;font:11px/1.6 'Dogica Pixel',monospace;text-shadow:0 2px 8px #010207}.hero-nav a:hover{color:var(--accent)}.hero-nav .hero-x{min-width:44px}.hero-header{z-index:3}#shop,#lootbox,#leaderboard,#faq{scroll-margin-top:20px}
@media(max-width:820px){.hero-header{flex-wrap:wrap;padding:8px 20px;gap:0}.hero-header .brand-logo{width:110px}.hero-nav{width:100%;justify-content:space-between;gap:6px;padding:0}.hero-nav a{font-size:9px}.hero-nav .hero-x{min-width:36px}.hero-message{top:148px}}
/* Mint rollover glow, including the X mark and keyboard navigation. */
.hero-nav a{transition:color 140ms ease,text-shadow 140ms ease}
.hero-nav a:hover,.hero-nav a:focus-visible{color:var(--accent);text-shadow:0 0 6px rgba(20,241,149,.8),0 0 16px rgba(20,241,149,.5),0 0 28px rgba(20,241,149,.25)}
.hero-nav .hero-x svg{transition:filter 140ms ease}
.hero-nav .hero-x:hover svg,.hero-nav .hero-x:focus-visible svg{filter:drop-shadow(0 0 5px rgba(20,241,149,.8)) drop-shadow(0 0 12px rgba(20,241,149,.45))}
@media(prefers-reduced-motion:reduce){.hero-nav a,.hero-nav .hero-x svg{transition:none}}

.featured-profile-preview[hidden]{display:none}.profile-promo:has(.featured-profile-preview[hidden]){grid-template-columns:1fr}

.featured-profile-collection .world-thumbnail img{width:100%;height:100%;object-fit:cover;object-position:center}

.learn-link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font:10px/1.8 "Dogica Pixel",monospace;text-underline-offset:5px;margin:8px 0}
