@font-face{font-family:Pixellari;src:url('assets/Pixellari.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{font-family:Pixellari,Arial,sans-serif;color:#ffffe8;background:#176777;color-scheme:dark;font-synthesis:none;--paper:#ffffe8;--ink:#493a21;--page:#176777}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;min-height:100svh;font-size:20px;line-height:1.5}
h1,p,figure{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:3px solid var(--paper);outline-offset:5px}
.skip{position:fixed;top:-100px;left:20px;padding:10px 16px;background:var(--paper);color:var(--ink);z-index:10}
.skip:focus{top:10px}
.hero{position:relative;display:grid;place-items:center;width:100%;min-height:clamp(280px,28vw,420px);padding:54px 0;border-bottom:8px solid #e6a06b;background:#c9825e}
.banner-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;image-rendering:pixelated}
.masthead{position:relative;padding:24px;max-width:100%}
/* Same cream, ink, stepped corner texture and tail as the game speech bubbles. */
.speech-title{position:relative;border:14px solid transparent;border-image:url('assets/speech-bubble.svg') 14 fill stretch;padding:8px 30px 12px;color:var(--ink);font-weight:400;text-align:center;line-height:1.05}
.speech-title::after{content:"";position:absolute;left:calc(50% - 12px);bottom:-30px;width:24px;height:18px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 50%,66.667% 50%,66.667% 100%,33.333% 100%,33.333% 50%,0 50%)}
.title-main{display:block;font-size:4rem;font-weight:400}
.title-sub{display:block;margin-top:8px;font-size:2rem;line-height:1.15}
.page-sheet{width:calc(100% - 64px);max-width:1040px;margin:32px auto 0}
.featured-media{margin-bottom:20px;background:#124958;aspect-ratio:16/9}
.featured-media video{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
a[data-gallery]{display:block;cursor:zoom-in}
a[data-gallery] img{width:100%;aspect-ratio:16/9;object-fit:cover;image-rendering:pixelated}
footer{padding:34px 0;text-align:center;font-size:1.25rem}
footer strong{font-weight:400}
#gallery{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;overflow:hidden;cursor:zoom-out;outline:none}
#gallery[open]{display:flex;align-items:center;justify-content:center}
#gallery::backdrop{background:#071918ed}
#gallery-image{width:auto;max-width:min(1160px,100%);max-height:calc(100dvh - 48px);object-fit:contain;image-rendering:pixelated;pointer-events:none}
body.gallery-open{overflow:hidden}
@media(max-width:899px){.clips{grid-template-columns:repeat(2,minmax(0,1fr))}.title-main{font-size:3rem}.title-sub{font-size:1.5rem}}
@media(max-width:550px){
 .hero{min-height:280px;border-bottom-width:6px}
 .banner-scene{object-position:62% 50%}
 .masthead{padding:20px 12px}
 .speech-title{padding:8px 12px 10px}
 .title-main{font-size:2rem}
 .title-sub{font-size:1.5rem;margin-top:6px}
 .page-sheet{width:calc(100% - 24px);margin-top:20px}
 .featured-media{margin-bottom:12px}
 .clips{grid-template-columns:1fr;gap:12px}
 footer{padding:26px 0;font-size:1.125rem}
 #gallery{padding:12px}
 #gallery-image{max-height:calc(100dvh - 24px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}