/* PokéRook's site, in the game's own look: content/ui.palette.txt's colours,
   the game's pixel fonts and its 9-slice frames from game/art/ui/pixel (drawn
   at 2x, 8-px corners: one CSS px is one game screen px). Every "assets/x"
   here is game/x, copied by tools/SiteGen. Art only at whole scales. */

@font-face { font-family: "PixelOperator"; src: url(assets/fonts/PixelOperator.ttf); }
@font-face { font-family: "PixelOperator"; font-weight: bold; src: url(assets/fonts/PixelOperator-Bold.ttf); }
@font-face { font-family: "m5x7"; src: url(assets/fonts/m5x7.ttf); }

:root {
  --ink: #141626;
  --slate1: #1e2238; --slate2: #2a2f4d; --slate3: #363c62; --slate4: #4a5280;
  --slate5: #5d67a0; --slate6: #7f8ac4; --slate7: #a3acdc;
  --cream: #f2ead8; --body: #c9c3d9; --muted: #8d88a6;
  --gold-dark: #c98a2e; --gold: #f7c548; --gold-light: #ffe08a; --on-gold: #3a2a18;
  --blue-light: #7ab8f0; --green-light: #8ad878;
  /* The game's text size: 16-px fonts at 2x. */
  --text: 32px;
  --small: 32px;
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  color: var(--body);
  font: var(--text) / 1.25 "PixelOperator", monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

img, .walker, .field { image-rendering: pixelated; }

a { color: var(--blue-light); }
a:hover { color: var(--cream); }

h1, h2, h3, b { font-weight: bold; color: var(--cream); }
h2, h3 { margin: 0 0 8px; font-size: var(--text); }
p { margin: 0 0 16px; }
small { font: var(--small) / 1 "m5x7", monospace; }

main { max-width: 1440px; margin: 0 auto; padding: 0 32px 32px; }

/* Frames */

.frame {
  border: 8px solid transparent;
  border-image: url(assets/art/ui/pixel/panel.png) 8 fill / 8px;
  padding: 6px;
  image-rendering: pixelated;
}

.banner {
  display: block;
  margin: 0 0 16px;
  padding: 0 24px 14px;
  border-bottom: 4px solid transparent;
  border-image: url(assets/art/ui/pixel/title.png) 0 0 4 fill / 0 0 4px;
  image-rendering: pixelated;
  text-align: center;
  color: var(--cream);
}

.btn {
  display: inline-block;
  border: 8px solid transparent;
  border-image: url(assets/art/ui/pixel/button_normal.png) 8 fill / 8px;
  padding: 0 4px 2px;
  image-rendering: pixelated;
  color: var(--cream);
  text-decoration: none;
  font-weight: bold;
}
.btn:hover { border-image-source: url(assets/art/ui/pixel/button_hover.png); color: var(--cream); }
.btn:active { border-image-source: url(assets/art/ui/pixel/button_pressed.png); padding: 2px 4px 0; }
.btn.primary { border-image-source: url(assets/art/ui/pixel/primary_normal.png); color: var(--on-gold); }
.btn.primary:hover { border-image-source: url(assets/art/ui/pixel/primary_hover.png); }
.btn.primary:active { border-image-source: url(assets/art/ui/pixel/primary_pressed.png); }

/* Landing page */

.hero { text-align: center; padding: 64px 32px 0; }
.logo { width: 384px; height: auto; }  /* 64x13 at 6x */
.logo.small { width: 128px; }          /* 2x */
.tagline { margin: 32px 0; color: var(--cream); }
.downloads { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; align-items: center; }
.version { margin: 16px 0 0; color: var(--muted); }

/* The parade: overworld walk sheets (48-px frames, row 3 faces right) crossing act 1's grass. */
.field {
  position: relative;
  height: 176px;
  margin: 48px 0;
  overflow: hidden;
  background: url(assets/art/board/tiles16/act1/grass.png) 0 0 / 32px 32px;
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
}
.walker {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 144px;
  height: 144px;
  background-size: 288px 576px;   /* the 96x192 sheet at 3x */
  background-position-y: -288px;  /* the right-facing row */
  animation: step 0.5s steps(2) infinite, cross 24s linear infinite;
  animation-delay: 0s, var(--delay);
}
@keyframes step { from { background-position-x: 0; } to { background-position-x: -288px; } }
@keyframes step2 { from { background-position-x: 0; } to { background-position-x: -192px; } }
@keyframes cross { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 160px)); } }
@media (prefers-reduced-motion: reduce) {
  .walker { animation: none; }
  .walker:nth-child(n) { transform: translateX(calc(var(--at) * 1px)); }
}

.screens { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; margin-bottom: 48px; }
/* Three shots on the first row, two wider ones on the second. */
.screens figure { margin: 0; grid-column: span 2; }
.screens figure.wide { grid-column: span 3; }
/* Screenshots are shown below their 1280x720 size: let them scale smoothly. */
.screens img { display: block; width: 100%; height: auto; image-rendering: auto; }
.screens figcaption { text-align: center; padding-top: 8px; color: var(--cream); }
.screens img { cursor: zoom-in; }

/* A clicked screenshot, at its own 1280x720 or as much of it as the window fits. */
.zoom { max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: none; cursor: zoom-out; }
.zoom::backdrop { background: rgb(20 22 38 / 0.85); }
.zoom .frame { padding: 0; }
.zoom img { display: block; width: min(1280px, calc(100vw - 48px), calc((100vh - 48px) * 16 / 9)); height: auto; image-rendering: auto; }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 48px; }
/* An odd card out takes the whole last row. */
.features > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.features .frame { display: flex; gap: 16px; align-items: flex-start; }
/* 32-px items at 2x; the Dragonite is its walk sheet's first (front) frame at 2x, a 96-px box. */
.features img { width: 64px; height: 64px; flex: none; margin: 16px; }
.features .sprite { width: 96px; height: 96px; flex: none; background-size: 192px 384px; image-rendering: pixelated; }

.notes h3 { margin-top: 16px; color: var(--gold); }
.notes ul { margin: 0 0 16px; padding-left: 32px; }
.notes li { margin-bottom: 4px; }
.notes details { margin-bottom: 16px; }
.notes details + details { border-top: 2px solid var(--slate3); padding-top: 12px; }
.notes summary { cursor: pointer; list-style: none; color: var(--gold); font-weight: bold; padding: 4px 0; }
.notes summary::before { content: "▶"; display: inline-block; width: 1em; margin-right: 8px; color: var(--gold); }
.notes details[open] > summary::before { content: "▼"; }
.notes summary .latest { color: var(--muted); font-weight: normal; margin-left: 8px; }

footer { text-align: center; color: var(--muted); padding: 32px; }

[hidden] { display: none !important; }

/* Playbook page */

.top { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 32px 32px 0; }
.top .banner { margin: 0; }

nav.tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 16px 0;
  background: var(--ink);
}
nav.tabs a {
  border: 8px solid transparent;
  border-image: url(assets/art/ui/pixel/tab_unselected.png) 8 fill / 8px;
  padding: 0 2px 0;
  image-rendering: pixelated;
  color: var(--body);
  text-decoration: none;
}
nav.tabs a:hover { border-image-source: url(assets/art/ui/pixel/tab_hovered.png); color: var(--cream); }

.playbook section { margin-bottom: 32px; scroll-margin-top: 96px; }
.playbook h3 { margin-top: 24px; color: var(--gold); }

table { border-collapse: collapse; margin-bottom: 16px; }
th { text-align: left; color: var(--cream); }
th, td { padding: 0 32px 4px 0; }

/* Two lines a row on wide screens; Eevee's branches are the tallest. */
.line { display: inline-block; width: 656px; margin: 0 0 8px; vertical-align: top; }
.form, .branches, .branch, .step { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.branches { flex-direction: column; align-items: flex-start; }
.step small { color: var(--muted); }
.species { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; }
.species i { display: block; image-rendering: pixelated; }
img.stone { width: 32px; height: 32px; }

.entry { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.entry p { margin: 0; }
img.item { width: 32px; height: 32px; flex: none; margin-top: 4px; }

/* Phones: one column; text at the fonts' own 16 px, which the screen's pixel ratio keeps crisp. */
@media (max-width: 720px) {
  :root { --text: 16px; --small: 16px; }
  main { padding: 0 16px 16px; }
  .hero { padding: 32px 16px 0; }
  .logo { width: 256px; }
  .tagline { margin: 16px 0; }
  .screens, .features { grid-template-columns: 1fr; gap: 16px; }
  .screens figure, .screens figure.wide { grid-column: auto; }
  .field { height: 128px; margin: 32px 0; }
  .walker { width: 96px; height: 96px; background-size: 192px 384px; background-position-y: -192px; animation-name: step2, cross; }
  .top { flex-direction: column; gap: 16px; padding: 16px 16px 0; }
  th, td { padding-right: 16px; }
  .line { display: block; width: auto; }
  .playbook section { scroll-margin-top: 160px; }
}