/*
Theme Name: PokèVerba
Theme URI: https://sbustiamobro.it/
Author: Emanuele Del Monte, Matteo Terenzi
Author URI: https://www.emanueledelmonte.it/
Description: Tema retrò pixel-art per PokèVerba, il cruciverba Pokémon quotidiano. Pensato per il plugin PokèVerba (shortcode [pokeverba_crossword]).
Version: 1.24.1
Requires at least: 6.3
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: pokeverba-theme
*/

/* =========================================================================
   1. Tokens — shared with the game app, which defines only its own (issue #79)
   ========================================================================= */
/* Pixel triangles, drawn (no glyphs: the pixel font has no ▼▲▶ and the fallback font sits off the text line).
   Sizes are in em so they stay on the pixel grid: 7×4 / 4×7 units at 8px, doubled at 16px. */
:root{
  --tri-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --tri-u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1H3zM2 1h3v1H2zM1 2h5v1H1zM0 3h7v1H0z'/%3E%3C/svg%3E");
  --tri-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --tri-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v7H3zM2 1h1v5H2zM1 2h1v3H1zM0 3h1v1H0z'/%3E%3C/svg%3E");
}
.tri,
.lang-switch summary::after,
.site-nav--mobile summary::after,
.site-nav--mobile .menu a::before,
.section-head h2::before,
.prose h2::before,
.prose ul > li::before{
  content: ""; display: inline-block; flex: none; vertical-align: .0625em;
  width: .875em; height: .5em; background: currentColor;
  -webkit-mask: var(--tri-d) center / 100% 100% no-repeat; mask: var(--tri-d) center / 100% 100% no-repeat;
}
.tri--u,
.lang-switch[open] summary::after,
.site-nav--mobile[open] summary::after{ -webkit-mask-image: var(--tri-u); mask-image: var(--tri-u); }
.tri--r,
.site-nav--mobile .menu a::before,
.section-head h2::before,
.prose h2::before,
.prose ul > li::before{ width: .5em; height: .875em; vertical-align: .125em; -webkit-mask-image: var(--tri-r); mask-image: var(--tri-r); }
.tri--l{ width: .5em; height: .875em; vertical-align: .125em; -webkit-mask-image: var(--tri-l); mask-image: var(--tri-l); }
.tri--l{ margin-right: .5em; }
.tri--r{ margin-left: .5em; }
.tri--r, .tri--l{ vertical-align: .25em; }

:root{
  --bg: #16245c;
  --panel: #22357a;
  --panel-2: #1c2c6a;
  --screen: #0e1740;
  --ink: #ffffff;
  --ink-soft: #dbe3fb;
  --muted: #a9b8e8;
  --line: #4a62c0;
  --line-soft: #2f4390;
  --accent: #ffcb05;
  --accent-dim: #d4a800;
  --accent-2: #ff4422;
  --accent-2-text: #ff9580; /* red for text: >= 4.5 on every panel */
  --on-accent: #0e1740;
  --accent-hover: #ffe066;
  --accent-wash: #3d3a1c; /* active word and clue */
  /* Palette from the first three game versions, as colours only (#108): Blue backgrounds, Red header, Yellow accent. */
  --brand: #c2280b;  /* header bar: white text 5.8 */
  --on-brand: #ffffff;
  --shadow: 4px 4px 0 rgba(0,0,0,.5);
  --shadow-sm: 2px 2px 0 rgba(0,0,0,.5);
  --font-display: 'Press Start 2P', monospace;
  --font-body: 'Press Start 2P', monospace;
  --font-read: 'VT323', ui-monospace, monospace;
  --wrap: 1040px;
  --gutter: 16px;
}

@font-face{
  font-family: 'Press Start 2P';
  src: url('assets/fonts/PressStart2P-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face{
  font-family: 'VT323';
  src: url('assets/fonts/VT323-Regular.woff2') format('woff2');
  font-display: swap;
}

/* =========================================================================
   2. Base
   ========================================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{
  color-scheme: dark; -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px; /* sticky header (64px): focused links and anchors never land under it (#124) */
  -webkit-tap-highlight-color: transparent; /* our :active and focus styles replace Android's blue box */
}
a, button, input, select, summary, label{ touch-action: manipulation; } /* no double-tap zoom delay */
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 8px;
  line-height: 1.8;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  overflow-x: clip;
}
img,svg{ max-width: 100%; height: auto; }
/* Only pixel-art assets are upscaled crisply; photos in articles stay smooth. */
.logo__mark,.missingno{ image-rendering: pixelated; }
a{ color: var(--accent); }
a:hover{ color: var(--ink); }
::selection{ background: var(--accent-dim); color: var(--on-accent); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: normal; line-height: 1.5; text-wrap: balance; margin: 0; }

.screen-reader-text{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus{
  position: fixed; top: 8px; left: 8px; z-index: 100;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 12px 16px; background: var(--accent); color: var(--on-accent);
  text-transform: uppercase; text-decoration: none;
}

/* Phones with a notch: viewport-fit=cover in header.php, so side padding never drops inside the safe area. */
.wrap{ width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
/* Reading width for articles and text pages (VT323 at 22px ≈ 70ch). */
.site-main{ flex: 1; padding: 28px 0 56px; }

@keyframes blink{ 0%,49%{ opacity: 1; } 50%,100%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }

/* The game mounts after main.js loads: reserve a screen for it so the blog, the how-to and the
   footer start below the fold and never jump in view (#132, CLS 0.53 → under 0.1). */
#pokeverba-root{ min-height: 100vh; min-height: 100svh; }

/* =========================================================================
   3. Header + navigation
   ========================================================================= */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--brand);
  border-bottom: 2px solid var(--screen);
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){ .admin-bar .site-header{ top: 46px; } }
@media (max-width: 600px){ .admin-bar .site-header{ top: 0; } }

.site-header__inner{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px;
}
.logo{
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap;
}
.logo:hover{ color: var(--ink); }
.logo:hover .logo__mark{ animation: wobble .4s steps(4) 1; }
.logo__mark{ width: 24px; height: 24px; flex: none; }
.logo__acc{ color: var(--accent); }
.site-header .logo__acc{ color: inherit; } /* gold on red is 3.3: the header logo stays white */
@keyframes wobble{ 0%{ transform: rotate(0); } 25%{ transform: rotate(-12deg); } 75%{ transform: rotate(12deg); } 100%{ transform: rotate(0); } }

.lang-switch{ position: relative; font-family: var(--font-display); font-size: 8px; text-transform: uppercase; }
.lang-switch summary{
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 4px; color: var(--on-brand); white-space: nowrap;
}
.lang-switch summary::-webkit-details-marker{ display: none; }
.lang-switch__list{
  list-style: none; margin: 0; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 160px; padding: 8px; background: var(--screen);
  border: 2px solid var(--ink); outline: 2px solid var(--screen); outline-offset: -6px;
  box-shadow: var(--shadow);
}
.lang-switch__list a{ display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); text-decoration: none; border: 2px solid transparent; }
.lang-switch__list a:hover{ border-color: var(--line); }
.lang-switch__list a[aria-current]{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.menu{ list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.menu a{
  display: flex; align-items: center; min-height: 44px; padding: 10px 12px;
  color: var(--muted); text-decoration: none; text-transform: uppercase;
  font-size: 8px; letter-spacing: .04em;
  border: 2px solid transparent;
}
.menu a:hover{ color: var(--ink); border-color: var(--line); }
.site-nav--desktop .menu a{ color: var(--on-brand); } /* before the current-item rule, which must win */
.site-nav--desktop .menu a:hover{ border-color: var(--on-brand); }
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current_page_parent > a,
.menu a[aria-current="page"]{
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

.site-nav--mobile{ display: none; position: relative; }
.site-nav--mobile summary{
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border: 2px solid var(--line); background: var(--panel-2);
  text-transform: uppercase; font-size: 8px; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.site-nav--mobile summary::-webkit-details-marker{ display: none; }
.site-nav--mobile summary::after{ color: var(--accent); }
.site-nav--mobile .menu{
  position: absolute; right: 0; top: calc(100% + 8px);
  flex-direction: column; min-width: 220px; padding: 8px;
  background: var(--screen);
  border: 2px solid var(--ink); outline: 2px solid var(--screen); outline-offset: -6px;
  box-shadow: var(--shadow);
}
.site-nav--mobile .menu a{ padding: 12px; }
.site-nav--mobile .menu a::before{ margin-right: .75em; color: transparent; }
.site-nav--mobile .menu a:hover::before,
.site-nav--mobile .menu a:focus-visible::before{ color: var(--accent); }

@media (max-width: 760px){
  .site-nav--desktop{ display: none; }
  .site-nav--mobile{ display: block; }
}
/* Small phones: logo, Menu and the language need ~340px; Menu covered the end of the logo (#187). */
@media (max-width: 374px){
  .site-header__inner{ gap: 8px; }
  .site-nav--mobile summary{ padding-inline: 8px; }
  .lang-switch summary{ padding: 0 2px; }
}
@media (max-width: 359px){ .site-header .logo__mark{ display: none; } }

/* =========================================================================
   4. Building blocks: panel, dialog, buttons, tags, section headings
   ========================================================================= */
.panel{
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
}
.dialog{
  position: relative;
  background: var(--screen);
  border: 2px solid var(--ink);
  outline: 2px solid var(--screen);
  outline-offset: -6px;
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.dialog__title{ font-size: 16px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.dialog p{ font-family: var(--font-read); font-size: 21px; line-height: 1.3; color: var(--ink-soft); margin: 0 0 14px; }
.dialog__arrow{ font-size: 16px; color: var(--accent); animation: blink 1s steps(1) infinite; margin-left: 6px; }

.button{
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 12px 16px;
  font-family: var(--font-display); font-size: 8px; text-transform: uppercase; text-decoration: none; letter-spacing: .04em;
  color: var(--ink); background: var(--panel-2);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.button:hover{ color: var(--ink); border-color: var(--muted); }
.button:active{ transform: translate(2px,2px); box-shadow: none; }
.button--primary{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button--primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.button-row{ display: flex; flex-wrap: wrap; gap: 12px; }

.tag{
  display: inline-block;
  padding: 4px 8px;
  font-size: 8px; text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  color: var(--on-accent); background: var(--accent);
}
/* Small on purpose: an invisible layer brings the touch area to 44px tall. */
a.tag{ position: relative; }
a.tag::before{ content: ""; position: absolute; inset: -11px 0; }
a.tag:hover{ background: var(--ink); color: var(--on-accent); }

.section-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--line-soft);
}
.section-head h2{ font-size: 16px; text-transform: uppercase; }
.section-head h2::before{ margin-right: .5em; color: var(--accent-2); }
.section-head a{ display: inline-flex; align-items: center; min-height: 44px; font-size: 8px; text-transform: uppercase; text-decoration: none; }
.section-head a .tri{ position: relative; top: -1px; }

/* =========================================================================
   5. Page headers
   ========================================================================= */
.page-head{ margin-bottom: 24px; }
.page-head__kicker{ font-size: 8px; color: var(--accent-2-text); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
.page-head h1{ font-size: 16px; text-transform: uppercase; }
/* Blog search and categories (#292) */
.blog-filters{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 24px; }
.blog-search{ display: flex; gap: 8px; flex: 1 1 320px; max-width: 520px; }
.blog-search input{
  flex: 1; min-width: 0; min-height: 44px; padding: 6px 12px;
  font-family: var(--font-read); font-size: 20px; color: var(--ink);
  background: var(--panel-2); border: 2px solid var(--line);
}
.blog-search input::placeholder{ color: var(--muted); }
.blog-cats{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.blog-cats__link{
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 8px; text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  color: var(--ink); border: 2px solid var(--line);
}
.blog-cats__link:hover{ border-color: var(--muted); }
.blog-cats__link[aria-current="page"]{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.page-head__desc{ font-family: var(--font-read); font-size: 22px; line-height: 1.25; color: var(--muted); margin: 12px 0 0; max-width: 62ch; }

/* Home hero: compact so the board stays above the fold */
.home-hero{ display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.home-hero h1{ font-size: 16px; text-transform: uppercase; }
.home-hero p{ margin: 0; font-family: var(--font-read); font-size: 20px; line-height: 1.1; color: var(--muted); }
.home-hero #pokeverba-type-strip{ flex-basis: 100%; } /* the app draws the 18 types here (#344) */
@media (max-width: 720px){
  .home .site-main{ padding-top: 12px; }
  .home-hero{ margin-bottom: 12px; }
  .home-hero h1{ line-height: 1.3; }
  .home-hero p{ display: none; } /* phones: the grid comes first; the rules are one tap away (#344) */
}

/* =========================================================================
   6. Cards (blog)
   ========================================================================= */
.card-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.card{
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  height: 100%;
  padding: 18px;
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
}
.card:hover,.card:focus-within{ transform: translate(2px,2px); box-shadow: var(--shadow-sm); border-color: var(--muted); }
.card__thumb{ margin: -18px -18px 0; border-bottom: 2px solid var(--line); aspect-ratio: 16/9; overflow: hidden; background: var(--screen); }
.card__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.card__title{ font-size: 8px; line-height: 1.7; text-transform: uppercase; }
.card__title a{ color: var(--ink); text-decoration: none; }
/* whole card clickable, without nesting links */
.card__title a::after{ content: ""; position: absolute; inset: 0; }
.card__excerpt{ font-family: var(--font-read); font-size: 20px; line-height: 1.25; color: var(--ink-soft); margin: 0; }
.card__meta{ margin-top: auto; font-size: 8px; color: var(--muted); text-transform: uppercase; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card .tag{ position: relative; z-index: 1; align-self: flex-start; }

.empty-state{ text-align: center; padding: 48px 16px; }

/* =========================================================================
   7. Prose (articles, legal pages)
   ========================================================================= */
.prose{
  font-family: var(--font-read);
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.prose > * + *{ margin-top: .8em; }
.prose p{ margin: 0; }
.prose h2,.prose h3,.prose h4{ color: var(--ink); text-transform: uppercase; margin-top: 2em; }
.prose h2{ font-size: 16px; }
.prose h2::before{ margin-right: .5em; color: var(--accent-2); }
.prose h3{ font-size: 8px; color: var(--accent); }
.prose h4{ font-size: 8px; }
.prose a{ color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover{ color: var(--ink); }
.prose strong{ color: var(--ink); font-weight: normal; background: rgba(255,204,0,.12); padding: 0 2px; }
.prose ul,.prose ol{ padding-left: 1.4em; }
.prose ul{ list-style: none; padding-left: 0; }
.prose ul > li{ position: relative; padding-left: 1.4em; }
.prose ul > li::before{ position: absolute; left: 0; top: calc(.5lh - 3.5px); width: 4px; height: 7px; color: var(--accent); }
.prose ol > li::marker{ color: var(--accent); }
.prose li + li{ margin-top: .3em; }
.prose blockquote{ margin-left: 0; margin-right: 0; padding: 12px 18px; border-left: 4px solid var(--accent-2); background: var(--screen); color: var(--ink); }
.prose hr{ border: 0; border-top: 2px dashed var(--line); margin: 2em 0; }
.prose code{ font-family: var(--font-read); background: var(--screen); padding: 0 4px; color: var(--accent); }
.prose table{ width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose th,.prose td{ border: 2px solid var(--line); padding: 6px 10px; text-align: left; }
.prose th{ font-family: var(--font-display); font-size: 8px; text-transform: uppercase; color: var(--accent); background: var(--screen); }
.prose figure{ margin-left: 0; margin-right: 0; }
.prose figcaption{ font-size: 18px; color: var(--muted); }
.prose .faq dt{ color: var(--ink); margin-top: 1em; }
.prose .faq dt::before{ content: "? "; color: var(--accent); }
.prose .faq dd{ margin: .2em 0 0 1.2em; }

.entry{ padding: clamp(18px, 4vw, 36px); }
.entry__header{ margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2px dashed var(--line-soft); }
.entry__header .tag{ margin-bottom: 14px; }
.entry__title{ font-size: 16px; text-transform: uppercase; }
@media (min-width: 720px){ .page-head h1, .entry__title{ font-size: 24px; } } /* Press Start 2P only on its 8px grid (#77) */
.entry__meta{ margin-top: 14px; font-size: 8px; color: var(--muted); text-transform: uppercase; }
.entry__thumb{ margin: 0 0 24px; border: 2px solid var(--line); }
.entry__thumb img{ display: block; width: 100%; }
.entry__byline, .entry__disclosure{ margin-top: 32px; font-size: 8px; color: var(--muted); text-transform: uppercase; }

.post-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.post-nav a{ display: block; padding: 14px; border: 2px solid var(--line); background: var(--panel-2); text-decoration: none; color: var(--ink); font-size: 8px; text-transform: uppercase; line-height: 1.7; }
.post-nav a:hover{ border-color: var(--accent); }
.post-nav span{ display: block; color: var(--muted); font-size: 8px; margin-bottom: 6px; }
.post-nav__next{ text-align: right; grid-column: 2; }
@media (max-width: 600px){ .post-nav{ grid-template-columns: 1fr; } .post-nav__next{ grid-column: 1; } }

.cta-play{ margin-top: 40px; }

/* =========================================================================
   8. Pagination
   ========================================================================= */
.pagination{ margin-top: 36px; }
.pagination .nav-links{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers{
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 12px; /* 44px touch area (#383) */
  border: 2px solid var(--line); background: var(--panel-2); color: var(--ink); text-decoration: none;
}
.pagination .page-numbers.current{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pagination a.page-numbers:hover{ border-color: var(--accent); }

/* =========================================================================
   9. Home sections
   ========================================================================= */
.how-to{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); list-style: none; padding: 0; margin: 0; counter-reset: step; }
.how-to li{ counter-increment: step; padding: 18px; }
.how-to li::before{ content: counter(step); display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; background: var(--accent-2); color: var(--screen); margin-bottom: 12px; }
.how-to h3{ font-size: 8px; text-transform: uppercase; margin-bottom: 8px; }
.how-to p{ margin: 0; font-family: var(--font-read); font-size: 20px; line-height: 1.25; color: var(--ink-soft); }

.game-unavailable{ text-align: center; }

/* =========================================================================
   10. 404
   ========================================================================= */
.not-found{ display: grid; gap: 28px; justify-items: center; text-align: center; padding: 24px 0; }
.missingno{ width: 96px; height: 160px; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.5)); }
.not-found .dialog{ max-width: 560px; text-align: left; }

/* =========================================================================
   11. Footer
   ========================================================================= */
.site-footer{
  border-top: 2px solid var(--line);
  background: var(--screen);
  padding: 28px 0 calc(32px + env(safe-area-inset-bottom));
  color: var(--muted);
}
.site-footer__inner{ display: grid; gap: 18px; }
.site-footer__top{ display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.site-footer .menu{ flex-wrap: wrap; }
.site-footer .menu a{ padding: 6px 8px; font-size: 8px; }
.site-footer__disclaimer, .site-footer__credits{ margin: 0; font-family: var(--font-read); font-size: 18px; line-height: 1.25; color: var(--muted); max-width: 80ch; }
.site-footer__copy{ margin: 0; font-size: 8px; text-transform: uppercase; }
/* The version link sits in a line of 8px text: an invisible layer brings the touch area to 44px tall, as for a.tag (#383). */
.site-footer__version a{ position: relative; }
.site-footer__version a::before{ content: ""; position: absolute; inset: -18px 0; }

/* =========================================================================
   12. Page transitions & loaders (#242)
   ========================================================================= */
@view-transition{
  navigation: auto;
}
::view-transition-old(root){
  animation: pv-page-out 0.12s steps(2, jump-end);
}
::view-transition-new(root){
  animation: pv-page-in 0.12s steps(2, jump-start);
}
@keyframes pv-page-out{
  to{ opacity: 0; }
}
@keyframes pv-page-in{
  from{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation: none;
  }
}

.page-loader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 99999;
  pointer-events: none;
  display: none;
}
.page-loader.is-active{
  display: block;
}
.page-loader__bar{
  height: 100%;
  width: 0%;
  background: var(--accent);
  box-shadow: 0 1px 0 var(--screen);
  animation: pv-page-progress 1.2s steps(6, jump-none) infinite;
}
@keyframes pv-page-progress{
  0%{ width: 10%; margin-left: 0; }
  50%{ width: 60%; margin-left: 20%; }
  100%{ width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce){
  .page-loader__bar{
    animation: none;
    width: 100%;
  }
}

/* Reusable pixel spinner in theme (#242) */
.pixel-spinner-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  font-family: var(--font-body);
  font-size: 8px;
  text-transform: uppercase;
  color: var(--muted);
}
.pixel-spinner-wrap.pixel-spinner--inline{
  display: inline-flex;
  flex-direction: row;
  padding: 0;
  gap: 8px;
}
.pixel-spinner{
  display: inline-block;
  position: relative;
  image-rendering: pixelated;
}
.pixel-spinner--sm .pixel-spinner{ width: 16px; height: 16px; }
.pixel-spinner--md .pixel-spinner{ width: 24px; height: 24px; }
.pixel-spinner--lg .pixel-spinner{ width: 36px; height: 36px; }

.pixel-spinner__box{
  width: 100%;
  height: 100%;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
  position: relative;
  animation: pv-pixel-spin 0.8s steps(4, jump-end) infinite;
}
.pixel-spinner__dot{
  position: absolute;
  background: var(--accent);
}
.pixel-spinner--sm .pixel-spinner__dot{ width: 4px; height: 4px; }
.pixel-spinner--md .pixel-spinner__dot{ width: 6px; height: 6px; }
.pixel-spinner--lg .pixel-spinner__dot{ width: 8px; height: 8px; }

.pixel-spinner__dot--1{ top: 2px; left: 2px; }
.pixel-spinner__dot--2{ bottom: 2px; right: 2px; }

@keyframes pv-pixel-spin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .pixel-spinner__box{ animation: none; }
}