:root {
  --bg: #1a383d;
  --bg-deep: #10252a;
  --card: #26484e;
  --card-light: #4f7478;
  --accent: #61d9c0;
  --moss: #4f9a4a;
  --moss-dark: #2f6a35;
  --cream: #f3e6c4;
  --outline: #12262a;
}

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

body {
  min-height: 100vh;
  background: var(--bg-deep) url('assets/background-clean.webp') center bottom / cover no-repeat fixed;
  color: var(--cream);
  font-family: 'Fredoka', 'Pixelify Sans', sans-serif;
  font-size: 20px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 64px;
  position: relative;
  overflow-x: hidden;
}

.hero, .tabs, .card, .contact { position: relative; z-index: 1; }

/* Living sky: fireflies and stars were cut out of the background art and are animated here.
   The stage is the background image's native size, scaled by JS to mimic `cover`. */
.sky { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.sky-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sky-stage .m, .sky-stage .s { position: absolute; }
.sky-stage .s { inset: 0; background: url('assets/sky-atlas.webp') no-repeat; }
.m.fly   { animation: drift var(--t, 9s) ease-in-out var(--d, 0s) infinite; }
.m.orb   { animation: drift var(--t, 12s) ease-in-out var(--d, 0s) infinite; }
.m.fly .s { animation: glow var(--g, 2.4s) ease-in-out var(--d, 0s) infinite alternate; }
.m.orb .s { animation: glow-orb var(--g, 2.8s) ease-in-out var(--d, 0s) infinite alternate; }
.m.star .s { animation: twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite; }
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(var(--ax), var(--ay)) rotate(4deg); }
  50%  { transform: translate(var(--bx), var(--by)) rotate(-3deg); }
  75%  { transform: translate(var(--cx), var(--cy)) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes glow      { from { opacity: .72; filter: brightness(.9); } to { opacity: 1; filter: brightness(1.25); } }
@keyframes glow-orb  { from { opacity: .35; } to { opacity: 1; filter: brightness(1.3); } }
@keyframes twinkle {
  0%, 100% { opacity: 1;   transform: scale(1); }
  45%      { opacity: .22; transform: scale(.82); }
  70%      { opacity: .95; transform: scale(1.12); }
}

/* Contact */
.contact {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  text-decoration: none;
  font-size: 20px;
  text-shadow: 2px 2px 0 var(--outline);
}
.contact:hover { color: var(--accent); }
.envelope { image-rendering: pixelated; }

/* Hero / banner */
.hero { text-align: center; margin-top: 0; }

.mascot-btn {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mascot-btn:focus-visible { outline: 3px dashed var(--accent); outline-offset: 6px; }
.mascot {
  display: block;
  width: clamp(220px, 28vw, 320px);
  aspect-ratio: 695 / 531;
  background: url('assets/sloth-sprite.webp') 0 0 / 300% 100% no-repeat;
  user-select: none;
  animation: breathe 3.8s steps(1, end) infinite;
}
.mascot.jiggle { animation: jiggle .72s steps(1, end); }

/* Sprite sheet: 3 frames (rest, chest up 1px, chest up 2px). steps(1) keeps it pixel-art. */
@keyframes breathe {
  0%   { background-position-x: 0%; }
  22%  { background-position-x: 50%; }
  34%  { background-position-x: 100%; }
  62%  { background-position-x: 100%; }
  74%  { background-position-x: 50%; }
  86%  { background-position-x: 0%; }
}
@keyframes jiggle {
  0%   { background-position-x: 50%;  transform: translate(-3px, 0); }
  12%  { background-position-x: 100%; transform: translate(3px, -3px); }
  25%  { background-position-x: 0%;   transform: translate(-3px, 0); }
  37%  { background-position-x: 100%; transform: translate(3px, -3px); }
  50%  { background-position-x: 50%;  transform: translate(-3px, 0); }
  62%  { background-position-x: 0%;   transform: translate(3px, 0); }
  75%  { background-position-x: 50%;  transform: translate(-3px, 0); }
  87%  { background-position-x: 0%;   transform: translate(3px, 0); }
  100% { background-position-x: 0%;   transform: translate(0, 0); }
}

/* floating pixel Zz above the head: two Zs, slow gentle drift */
.zzz { position: absolute; left: 61%; top: 8%; width: 0; height: 0; pointer-events: none; }
.zzz img {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--k, 2) * 7px);
  image-rendering: pixelated;
  opacity: 0;
  animation: float-z 6s steps(1, end) infinite;
}
.zzz img:nth-child(1) { --k: 2; animation-delay: 0s; }
.zzz img:nth-child(2) { --k: 3; animation-delay: 3s; }
@keyframes float-z {
  0%   { opacity: 0;   transform: translate(0, 6px); }
  8%   { opacity: .9;  transform: translate(0, 0); }
  30%  { transform: translate(3px, -6px); }
  52%  { transform: translate(6px, -12px); }
  74%  { opacity: .9;  transform: translate(9px, -18px); }
  88%  { opacity: .4;  transform: translate(9px, -21px); }
  96%  { opacity: 0; }
  100% { opacity: 0; }
}

.hero h1 { line-height: 0; margin-bottom: -34px; position: relative; z-index: 1; }
.wordmark { display: block; width: clamp(364px, 52vw, 598px); max-width: 100%; height: auto; margin: 0 auto; }

.subtitle {
  margin-top: 4px;
  font-family: 'Pixelify Sans', monospace;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 2px;
  color: var(--cream);
  text-shadow: 2px 0 var(--outline), -2px 0 var(--outline), 0 2px var(--outline), 0 -2px var(--outline), 2px 2px 0 var(--outline);
}

/* Tabs: vine-wrapped stone pills (art cut from the reference). The strip scales as one piece;
   each button sits over its pill, so the layout stays aligned at any width. */
.tabs {
  position: relative;
  z-index: 2;
  width: min(780px, 100%);
  aspect-ratio: 1165 / 190;
  margin: 12px auto -14px;
  background: url('assets/tabs-strip.webp') center / 100% 100% no-repeat;
  container-type: inline-size;
}
.tab {
  position: absolute;
  top: 31%;
  height: 58%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Dosis', 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 3.75cqw;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(18, 38, 42, .55);
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s;
}
#tab-blog        { left: 6%;    width: 22.7%; }
#tab-screenshots { left: 32.6%; width: 34.8%; }
#tab-faq         { left: 71.7%; width: 21.5%; }

/* fairy-light glow */
.tab::before, .tab::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.tab::before {
  inset: -6% -4%;
  border-radius: 999px;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at center, rgba(97, 217, 192, .38), rgba(97, 217, 192, .12) 55%, transparent 75%);
  box-shadow: 0 0 14px 3px rgba(97, 217, 192, .55), 0 0 34px 10px rgba(97, 217, 192, .28), inset 0 0 14px rgba(160, 255, 230, .35);
}
.tab::after {
  inset: -22% -6%;
  background:
    radial-gradient(circle, #fff 0 1.5px, transparent 2px) 8% 18% / 12px 12px no-repeat,
    radial-gradient(circle, #ffe9a0 0 1.5px, transparent 2px) 30% 6% / 12px 12px no-repeat,
    radial-gradient(circle, #9fffe0 0 1.5px, transparent 2px) 62% 10% / 12px 12px no-repeat,
    radial-gradient(circle, #fff 0 1.5px, transparent 2px) 92% 24% / 12px 12px no-repeat,
    radial-gradient(circle, #ffe9a0 0 1.5px, transparent 2px) 78% 92% / 12px 12px no-repeat,
    radial-gradient(circle, #9fffe0 0 1.5px, transparent 2px) 18% 88% / 12px 12px no-repeat,
    radial-gradient(circle, #fff 0 1.5px, transparent 2px) 48% 96% / 12px 12px no-repeat;
  filter: drop-shadow(0 0 3px rgba(160, 255, 230, .9));
}
.tab:hover, .tab:focus-visible, .tab.active { color: #fff6da; }
.tab:hover::before, .tab:focus-visible::before { opacity: 1; animation: glow-pulse 2.6s ease-in-out infinite; }
.tab:hover::after,  .tab:focus-visible::after  { opacity: 1; animation: twinkle 1.8s ease-in-out infinite alternate; }
.tab.active::before { opacity: .55; }
.tab.active:hover::before { opacity: 1; }
.tab:focus-visible { outline: none; }
@keyframes glow-pulse { 50% { filter: brightness(1.35); } }
@keyframes twinkle {
  0%   { opacity: .35; transform: translateY(1px); }
  100% { opacity: 1;   transform: translateY(-2px); }
}

/* Card: frame cut from the reference art, applied as a 9-slice.
   340px slice -> drawn 204px; outset lets the leaves overhang without
   affecting layout. Inner edge of the stone band lands on the padding box. */
.card, .post {
  width: min(960px, 100%);
  min-height: 300px;
  position: relative;
  z-index: 1;
  background-color: #537175;
  background-clip: padding-box;
  border: 29px solid transparent;
  border-image: url('assets/frame-card.webp') 340 / 204px / 37px round;
  box-shadow: inset 0 0 36px rgba(18, 48, 54, .45);
  padding: 18px 20px 24px;
  margin: 0 auto 64px;
}
.card h2 {
  font-size: 42px;
  font-weight: 500;
  line-height: 1.1;
  text-shadow: 2px 2px 0 var(--outline);
}
.meta {
  font-size: 18px;
  color: #cfe0cf;
  margin: 4px 0 28px;
}
.card p { font-size: 26px; max-width: 46ch; }
.card p.meta { font-size: 18px; }
/* Blog tab: the frame moves from the shared card to each post, so posts stack as separate boxes */
.card:has(#panel-blog.active) { background: none; border: 0; border-image: none; box-shadow: none; padding: 0; min-height: 0; }
.post { min-height: 0; margin: 0 auto 52px; }
.post:last-child { margin-bottom: 0; }
.post-body p, .post-body li, .post-body blockquote { font-size: 26px; max-width: 46ch; margin-bottom: 14px; }
.post-body h3, .post-body h4 { font-weight: 500; margin: 18px 0 8px; text-shadow: 2px 2px 0 var(--outline); }
.post-body ul { padding-left: 1.2em; }
.post-body blockquote { border-left: 4px solid var(--accent); padding-left: 14px; font-style: italic; }
.post-body a { color: var(--accent); }
.post-body img { display: block; max-width: 100%; height: auto; margin: 14px 0; }

.panel[hidden] { display: none; }
.panel.active { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

/* Screenshots */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.shot {
  aspect-ratio: 16/10;
  display: grid; place-items: center;
  background: var(--card);
  border: 4px dashed var(--moss);
  color: var(--accent);
}

/* FAQ */
dt { color: var(--accent); font-size: 24px; margin-top: 14px; }
dd { font-size: 22px; margin-left: 0; }

/* Music player: fixed bottom-left so it is always within reach */
.music {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(26, 56, 61, .88);
  border: 3px solid var(--outline);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(97, 217, 192, .35), 0 4px 14px rgba(0, 0, 0, .4);
  color: var(--cream);
}
.music-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid var(--outline);
  border-radius: 50%;
  background: var(--card-light);
  color: var(--cream);
  cursor: pointer;
  transition: box-shadow .25s, color .25s;
}
.music-btn:hover, .music-btn:focus-visible {
  color: #fff6da;
  outline: none;
  box-shadow: 0 0 10px 2px rgba(97, 217, 192, .75);
}
.music-btn .i-stop, .music-btn.playing .i-play { display: none; }
.music-btn.playing .i-stop { display: block; }
.music-btn.playing { box-shadow: 0 0 8px 1px rgba(97, 217, 192, .55); }
.music-label { font-size: 18px; line-height: 1; opacity: .8; }
.music-vol {
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  height: 8px;
  border-radius: 4px;
  background: var(--outline);
  cursor: pointer;
}
.music-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--outline);
}
.music-vol::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--outline);
}
.music-vol:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (max-width: 600px) {
  .music { left: 8px; bottom: 8px; }
  .music-vol { width: 70px; }
  body { padding-left: 30px; padding-right: 30px; }
  .contact { font-size: 16px; }
  .card {
    padding: 10px 14px 16px;
    border-width: 16px;
    border-image-width: 119px;
    border-image-outset: 22px;
    margin-bottom: 40px;
  }
  .card h2 { font-size: 32px; }
  .card p { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}