/* SoapyApe — pixel art layout.
   All art is drawn for an 836px-wide design. --s is the integer-ish pixel scale.
   Left/Right pieces are fixed caps, Center pieces repeat-x so the page stretches. */
:root{
  --s:1;
  --cream:#fcead6; --ink:#3a2412; --paper:#fcead6;
  --u:url(../assets/ui/);
}
@media (min-width:900px){:root{--s:1.5}}
@media (min-width:1600px){:root{--s:2}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--cream) url(../assets/ui/tile-cream.png);color:var(--ink);font-family:"Pixelify Sans",system-ui,sans-serif}
img,i,.px,.topbar,.nav a,.search,.card,.card .btn{image-rendering:pixelated}
img{display:block}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 3-part stretchable strip: caps shrink on narrow screens, center repeats */
.strip{display:flex;width:100%;overflow:hidden}
.strip i{display:block;height:100%;background-repeat:no-repeat}
.strip .c{flex:1 1 0;background-repeat:repeat-x}
.strip .l,.strip .r{flex:0 1 var(--cap);min-width:0}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:5;height:calc(42px*var(--s));background-color:#724a3c;background-image:url(../assets/ui/bar-top-left.png),url(../assets/ui/bar-top-right.png),url(../assets/ui/bar-top-center.png);background-repeat:no-repeat,no-repeat,repeat-x;background-position:left top,right top,left top;background-size:auto 100%;
  display:flex;align-items:center;gap:calc(10px*var(--s));padding:0 calc(10px*var(--s))}
.brand{display:flex;align-items:center;gap:calc(4px*var(--s));flex:none}
.brand .monkey{width:calc(52px*var(--s));height:auto}
.brand .wordmark{width:calc(91px*var(--s));height:auto}
.nav{display:flex;align-items:center;gap:calc(6px*var(--s));margin-left:calc(12px*var(--s));flex:1}
.nav a{position:relative;display:flex;align-items:center;gap:calc(4px*var(--s));height:calc(25px*var(--s));padding:0 calc(8px*var(--s));
  color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:max(11px,calc(7.5px*var(--s)));white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.nav a img{height:calc(18px*var(--s));width:auto}
.nav a:hover{filter:brightness(1.18)}
/* active pill = nav-home.png (56x25), icon is baked in */
.nav a.active{width:calc(56px*var(--s));padding:0 0 0 calc(24px*var(--s));font-size:max(9px,calc(6.2px*var(--s)));letter-spacing:0;background:url(../assets/ui/nav-home.png) no-repeat 0 0/100% 100%;color:#fff}
.tools{display:flex;align-items:center;gap:calc(6px*var(--s));flex:none}
.tools img{width:calc(20px*var(--s));height:auto}
.search{width:calc(87px*var(--s));height:calc(19px*var(--s));background:url(../assets/ui/search.png) no-repeat 0 0/100% 100%;margin-right:calc(2px*var(--s))}
.search input{width:calc(66px*var(--s));height:100%;background:none;border:0;outline:0;padding:0 0 0 calc(7px*var(--s));color:#fff;font:inherit;font-size:max(11px,calc(7px*var(--s)))}
.search input::placeholder{color:#c9a98a}
.menu-toggle,.burger{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:calc(240px*var(--s));background:#54a4fe}
.hero-bg{position:absolute;inset:0;--cap:calc(456px*var(--s))}
.hero-bg i{background-size:auto calc(304px*var(--s));background-position:left bottom}
.hero-bg .l{background-image:url(../assets/ui/hero-left.png)}
.hero-bg .c{background-image:url(../assets/ui/hero-center.png)}
.hero-bg .r{background-image:url(../assets/ui/hero-right.png);background-position:right bottom}
.hero-logo{position:absolute;left:50%;top:calc(26px*var(--s));width:calc(273px*var(--s));max-width:92%;height:auto;transform:translateX(-50%);animation:logo-float 3.6s ease-in-out infinite;will-change:transform}
@keyframes logo-float{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,calc(var(--s)*-6px))}}
.bubbles{position:absolute;left:50%;bottom:calc(36px*var(--s));width:calc(440px*var(--s));max-width:100%;height:0;transform:translateX(-50%);pointer-events:none}
.bubbles img{position:absolute;left:calc(50% + var(--x));bottom:0;width:calc(var(--w)*var(--s));height:auto;margin-left:calc(var(--w)*var(--s)/-2);opacity:0;will-change:transform,opacity;animation:bubble var(--t) linear var(--d) infinite}
@keyframes bubble{
  0%{transform:translate(0,0) scale(.55);opacity:0}
  12%{opacity:.95}
  50%{transform:translate(calc(var(--dx)*var(--s)),calc(var(--s)*-75px)) scale(.85)}
  80%{opacity:.9}
  100%{transform:translate(calc(var(--dx)*var(--s)*-.5),calc(var(--s)*-150px)) scale(1);opacity:0}
}
.edge{position:absolute;left:0;right:0;bottom:0;height:calc(106px*var(--s));--cap:calc(349px*var(--s));pointer-events:none}
.edge i{background-size:auto 100%;background-position:left bottom}
.edge .l{background-image:url(../assets/ui/edge-left.png)}
.edge .c{background-image:url(../assets/ui/edge-center.png)}
.edge .r{background-image:url(../assets/ui/edge-right.png);background-position:right bottom}

/* ---------- cards ---------- */
main{flex:1}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,calc(137px*var(--s))));justify-content:center;gap:calc(10px*var(--s));padding:calc(6px*var(--s)) calc(10px*var(--s)) calc(20px*var(--s))}
.card{container-type:inline-size;position:relative;aspect-ratio:137/144;background:url(../assets/ui/card-frame.png) no-repeat 0 0/100% 100%;image-rendering:pixelated}
.card h2{position:absolute;left:0;right:0;top:0;height:19.7cqw;margin:0;display:flex;align-items:center;justify-content:center;font-size:6.6cqw;font-weight:700;color:var(--cream);text-shadow:0 .8cqw 0 rgba(0,0,0,.4);text-align:center}
.thumb{position:absolute;left:4.4cqw;top:20.8cqw;width:91.2cqw;height:45cqw;overflow:hidden;border-radius:2cqw;display:block}
.thumb img{width:100%;height:100%;object-fit:cover}
.card .title{position:absolute;left:4cqw;right:4cqw;top:69cqw;margin:0;text-align:center;font-size:6.4cqw;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .btn{position:absolute;left:14.2cqw;top:84.5cqw;width:71.5cqw;height:14.6cqw;background:url(../assets/ui/btn.png) no-repeat 0 0/100% 100%;display:flex;align-items:center;justify-content:center;gap:1.5cqw;color:#fff;font-weight:700;font-size:6cqw;text-shadow:0 .7cqw 0 rgba(0,0,0,.35)}
.card .btn:hover{filter:brightness(1.12)}
.card .btn img{height:9cqw;width:auto}
.card .btn.disabled{filter:saturate(.8) brightness(.95)}

/* ---------- footer ---------- */
.footer{position:relative;height:calc(147px*var(--s));flex:none}
.f-bg{position:absolute;inset:0;--cap:calc(349px*var(--s))}
.f-bg i{background-size:auto 100%;background-position:left bottom}
.f-bg .l{background-image:url(../assets/ui/footer-left.png)}
.f-bg .c{background-image:url(../assets/ui/footer-center.png)}
.f-bg .r{background-image:url(../assets/ui/footer-right.png);background-position:right bottom}
.f-bar{position:absolute;left:0;right:0;bottom:0;height:calc(41px*var(--s));display:flex;align-items:center;justify-content:flex-end;padding:0 calc(10px*var(--s)) calc(2px*var(--s))}
.f-links{margin-right:max(48px,calc(32px*var(--s)));display:flex;align-items:center;gap:calc(18px*var(--s));color:#fff;font-weight:600;font-size:max(11px,calc(7px*var(--s)));text-shadow:0 2px 0 rgba(0,0,0,.4)}
.f-links a{display:flex;align-items:center;gap:calc(5px*var(--s))}
.f-links a img{width:calc(20px*var(--s));height:auto}
.f-links .up img{width:calc(26px*var(--s));height:calc(26px*var(--s))}
.f-links a:hover{filter:brightness(1.15)}

/* ---------- small screens: hamburger ---------- */
@media (max-width:899px){
  .topbar{flex-wrap:wrap;height:auto;min-height:42px;background-size:auto 42px;padding:0 8px;gap:0}
  .brand{height:42px}
  .burger{display:flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:42px;color:#fff;font-size:26px;cursor:pointer}
  .nav,.tools{display:none;flex:0 0 100%;width:100%;margin:0}
  .menu-toggle:checked ~ .nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px 0;background:#724a3c}
  .menu-toggle:checked ~ .tools{display:flex;justify-content:flex-start;padding:8px 4px;background:#724a3c}
  .search{flex:none}
  .cards{grid-template-columns:repeat(2,minmax(0,200px))}
  .f-links{gap:10px}
  .f-bar .brand{display:none}
  .f-bar{justify-content:flex-end}
}
@media (max-width:420px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- floating back-to-top ---------- */
.to-top-float{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:20;width:calc(26px*max(1.5,var(--s)));aspect-ratio:1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.to-top-float img{width:100%;height:100%}
.to-top-float.show{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.to-top-float:hover{filter:brightness(1.15)}
.to-top-float:active{transform:translateY(2px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.to-top-float{transition:none}}