/* pakaplanet.com, in the app's Ink & Paper look (lib/core/theme/paka_ink.dart).
   Paper surfaces and flat fills; ink edges and the hard "sticker" shadow only on things you can press. */

@font-face {
  font-family: "Comic Neue";
  src: url("/lab/day/fonts/comic-neue-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Comic Neue";
  src: url("/lab/day/fonts/comic-neue-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #fffdf8;
  --floor: #f9e7d7;
  --ink: #2a2230;
  --ink2: #6f6776;
  --hairline: rgba(42, 34, 48, 0.15);
  --yellow: #ffd545;
  --sunny: #ffe58a;
  --wall: #5a72d8;
  --coral: #df5252;
  --leaf: #4e9e3f;
  --tint-blue: #e5eafb;
  --tint-green: #e2f0dd;
  --tint-yellow: #fff1c2;
  --tint-pink: #fbe3ee;
  --press: 0 3px 0 var(--ink);
  --gutter: clamp(16px, 4vw, 56px);
  --header-h: 72px;
  --voice: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--body);
}

main { flex: 1; }

img, video, svg { display: block; max-width: 100%; }

a { color: var(--wall); }

h1, h2, h3, .display, .section-title { font-family: var(--voice); font-weight: 700; text-wrap: balance; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Buttons: the yellow sticker (main) and a paper sticker (ghost) */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--press);
  font: 700 18px/1 var(--voice);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--yellow); }
.btn-secondary { background: var(--paper); }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
  padding-inline: var(--gutter);
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.logo img { width: auto; height: 44px; }

.site-menu {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.site-nav { display: flex; gap: 6px; }

.site-nav a {
  padding: 7px 14px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 700 17px/1.2 var(--voice);
  color: var(--ink);
  text-decoration: none;  white-space: nowrap;
}
.site-nav a:hover { background: var(--tint-yellow); }
.site-nav a[aria-current="page"] { background: var(--sunny); border-color: var(--ink); }

.menu-toggle { display: none; }

/* Below 640px the menu moves behind the round menu button. */
@media (max-width: 639px) {
  .site-header { gap: 10px; }
  .logo { margin-right: auto; }
  .logo img { height: 36px; }

  .menu-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .menu-toggle::before {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    box-shadow: var(--press);
  }
  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    position: relative;
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.2s, background 0.2s;
  }
  .menu-toggle span::before,
  .menu-toggle span::after { content: ""; position: absolute; left: 0; }
  .menu-toggle span::before { top: -5px; }
  .menu-toggle span::after { top: 5px; }
  .menu-open .menu-toggle span { background: transparent; }
  .menu-open .menu-toggle span::before { transform: translateY(5px) rotate(45deg); }
  .menu-open .menu-toggle span::after { transform: translateY(-5px) rotate(-45deg); }

  .site-menu {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin: 0;
    padding: 28px var(--gutter);
    background: var(--paper);
  }
  .menu-open .site-menu { display: flex; }
  .menu-open { overflow: hidden; }

  .site-nav { flex-direction: column; gap: 10px; }
  .site-nav a {
    padding: 14px 20px;
    border: 2px solid var(--ink);
    border-radius: 16px;
    font-size: 22px;
  }
  .site-nav a:not([aria-current="page"]) { background: var(--paper); }
}

/* Two-column sections (Desktop Buddy) */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(40px, 7vw, 110px) var(--gutter);
}
.split-media { display: flex; justify-content: center; }

.display {
  margin: 0 0 16px;
  font-size: clamp(36px, 3.4vw + 18px, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.lead {
  margin: 0;
  font-size: clamp(18px, 0.5vw + 15px, 21px);
  color: var(--ink2);
}

.buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.badges img { width: auto; height: clamp(48px, 2.4vw + 36px, 64px); }

.embed { position: relative; width: 100%; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-short { max-width: 340px; aspect-ratio: 9 / 16; }
.embed-wide { aspect-ratio: 4 / 3; }
.embed-wide,
.sticker-frame { border-radius: 20px; overflow: hidden; }

@media (max-width: 767px) {
  .split { grid-template-columns: 1fr; }
  .buttons .btn { width: 100%; }
}

/* Games */

main.games { padding: clamp(28px, 5vw, 64px) var(--gutter) 48px; }
.games-title { max-width: 1120px; margin: 0 auto 28px; }
.game-grid {
  display: grid;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}
/* Flat paper you read; its Play button is the one thing you press. */
.game-card {
  display: grid;
  overflow: hidden;
  border: 1.5px solid var(--hairline);
  border-radius: 24px;
  background: var(--paper);
}
.game-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1.5px solid var(--hairline); }
.game-info { padding: 20px 22px 24px; }
.game-info h2 { margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.game-info p { margin: 0 0 20px; color: var(--ink2); font-size: 17px; line-height: 1.45; }
.game-soon {
  display: grid;
  place-items: center;
  min-height: 96px;
  margin: 0;
  border: 2px dashed rgba(42, 34, 48, 0.3);
  border-radius: 24px;
  color: var(--ink2);
  font: 700 18px/1.2 var(--voice);
}
@media (min-width: 800px) {
  .game-card { grid-template-columns: 1.5fr 1fr; align-items: center; }
  .game-art { border-bottom: 0; border-right: 1.5px solid var(--hairline); }
  .game-info { padding: 32px 36px; }
}

/* Tic Tac Toe fills the whole screen (no header or footer, for room on phones).
   On wide screens, where the game puts Yunka beside the board and the corner is
   open sky, a small sticker leads back to Games. Phones use the browser's back:
   there the sticker would crowd Yunka's speech bubble. */

.game-page { background: #dbf8fe; }
main.full { display: flex; }
.game { display: block; width: 100%; height: 100vh; height: 100dvh; border: 0; }
.game-back {
  position: fixed;
  display: none;
  top: 6px;
  left: 8px;
  z-index: 10;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px 0 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--press);
  color: var(--ink);
  font: 700 16px/1 var(--voice);
  text-decoration: none;
}
/* 44px to tap, though it's drawn smaller. */
.game-back::after { content: ""; position: absolute; inset: -4px -4px -6px; }
.game-back svg { width: 20px; height: 20px; }
.game-back:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.game-back:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
/* The game's side-by-side layout: at least 640 wide and wider than tall. */
@media (min-width: 640px) and (orientation: landscape) {
  .game-back { display: inline-flex; }
}

/* Policy pages */

main.narrow { padding: clamp(32px, 6vw, 80px) var(--gutter); }

.prose {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.prose h1 { margin: 0 0 24px; font-size: clamp(32px, 2vw + 22px, 46px); line-height: 1.1; }
.prose h2 { margin: 32px 0 12px; font-size: clamp(24px, 1vw + 18px, 30px); line-height: 1.2; }
.prose p { margin: 14px 0; }
.prose ul { margin: 14px 0; padding-left: 26px; }
.prose li { margin: 6px 0; }
.prose li p { margin: 0; }
.prose blockquote { margin: 14px 0; padding: 12px 18px; border-radius: 14px; background: var(--tint-yellow); }

/* 404 */

.notfound { padding: clamp(56px, 9vw, 140px) var(--gutter); text-align: center; }
.notfound img { width: auto; height: 180px; margin: 0 auto 20px; }
.notfound .buttons { justify-content: center; }

/* Footer */

.site-footer {
  position: relative;
  margin-top: 70px;
  padding: 56px var(--gutter) 28px;
  background: var(--ink);
  color: var(--paper);
}
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.home + .site-footer { margin-top: 0; }

.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto;
}
.footer-brand img { width: auto; height: 44px; }
.footer-brand p { margin: 12px 0 0; color: rgba(255, 253, 248, 0.75); }
.footer-cols h3 { margin: 0 0 10px; font-size: 19px; color: var(--yellow); }
.footer-cols ul { margin: 0; padding: 0; list-style: none; }
.footer-cols li { margin: 6px 0; }
.footer-social a { display: inline-flex; align-items: center; gap: 10px; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.footer-bottom {
  max-width: 1120px;
  margin: 36px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 253, 248, 0.2);
  font-size: 14px;
  color: rgba(255, 253, 248, 0.7);
}

@media (max-width: 767px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Comics (reader in assets/comics.js) */

main.comics { padding: clamp(28px, 5vw, 64px) var(--gutter) 48px; }
.comics-title { max-width: 1120px; margin: 0 auto 28px; }

.comic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1120px;
  margin: 0 auto;
}

.paka-comic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--press);
  color: inherit;
  text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s;
}
.paka-comic-card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.paka-comic-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 2px solid var(--ink); }
.paka-comic-info { padding: 14px 16px 16px; }
.paka-comic-title { margin: 0 0 8px; font: 700 23px/1.15 var(--voice); }

.newest {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font: 700 15px/1.2 var(--voice);
}

.paka-comic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.char-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--tint-green);
  font-size: 13px;
  font-weight: 600;
}
.char-yunka { background: var(--tint-yellow); }
.char-caraka { background: var(--tint-pink); }
.char-dekka { background: var(--tint-blue); }
.comic-date { margin-left: auto; font-size: 13px; color: var(--ink2); }

.paka-reader { max-width: 1180px; margin: 0 auto; padding-bottom: 24px; }
.comic-back { min-height: 44px; padding: 0 18px; font-size: 16px; }
.paka-reader-heading { margin: 22px 0 20px; text-align: center; }
.paka-reader-heading h1 { margin: 0 0 8px; font-size: clamp(30px, 2vw + 20px, 44px); }
.paka-reader-heading .comic-date { margin: 0; font-size: 15px; }

.comic-page {
  padding: clamp(12px, 2vw, 24px);
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.paka-panels { display: flex; gap: 10px; justify-content: center; align-items: flex-start; }
.paka-panels img { max-width: 100%; height: auto; object-fit: contain; border: 2px solid var(--ink); border-radius: 6px; }

@media (min-width: 768px) {
  .paka-panels img { flex: 1 1 0; min-width: 0; max-height: 78vh; width: auto; }
}

.paka-reader-footer { margin: 14px 0 0; font-size: 15px; color: var(--ink2); text-align: center; }
.paka-reader-footer strong { color: var(--ink); }
.paka-reader-footer a { color: var(--wall); }

.paka-reader-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 24px; }
.paka-reader-nav .btn {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 64px;
  max-width: 48%;
  padding: 10px 22px;
  border-radius: 20px;
}
.paka-reader-nav .paka-nav-next { align-items: flex-end; margin-left: auto; }
.paka-reader-nav small {
  overflow: hidden;
  max-width: 100%;
  font: 400 14px/1.2 var(--body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paka-loading { padding: 40px; font-size: 17px; color: var(--ink2); text-align: center; }
.comic-missing { margin: 0; text-align: center; }

@media (max-width: 959px) {
  .comic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 767px) {
  .comic-grid { grid-template-columns: 1fr; }
  .paka-panels { flex-direction: column; }
  .paka-panels img { width: 100%; }
  .paka-reader-nav { flex-direction: column-reverse; }
  .paka-reader-nav .btn { max-width: none; width: 100%; }
  .paka-reader-nav .paka-nav-next { align-items: flex-start; margin-left: 0; }
}