/* MagPi Media - one stylesheet, four looks. Nothing is loaded from anyone
   else: the pixel font and every picture are served from this site.

   Layout lives in the first half and reads its colours, fonts and border
   sizes from custom properties. Each page's <body> class picks a look:

     theme-studio  home, mods, forum: MagPi black and red
     theme-td      BlockoutTD, after its itch.io page
     theme-rts     BlockoutRTS, the same page drawn crisper
     theme-crown   Crown & Cog, medieval parchment                        */

/* BoldPixels Font by Yūki (@YukiPixels), CC BY-SA 4.0. Its glyphs sit on a
   16-pixel em, so it is only crisp at 16, 32, 48 and 64px. */
@font-face {
  font-family: "BoldPixels";
  src: url("fonts/BoldPixels.woff2") format("woff2"),
       url("fonts/BoldPixels.woff") format("woff");
  font-display: swap;
}

:root {
  --pixel: "BoldPixels", ui-monospace, "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: Constantia, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --gutter: 16px;
  --max: 1080px;

  /* the studio look is the default */
  --bg: #000;
  --bg-image: none;
  --sky-w: 3840;
  --sky-h: 2160;
  --head-bg: #000;
  --column: transparent;
  --panel: #0e0e0e;
  --line: #2c2c2c;
  --ink: #f2f2f2;
  --dim: #a0a0a0;
  --link: #ff4a4a;
  --accent: #c41a1a;
  --accent-ink: #fff;
  --accent-shadow: #5c0808;
  --tag: #e0262b;
  --b: 4px;                         /* border thickness: one art pixel */
  --head-font: var(--pixel);
  --body-font: var(--sans);
  --body-size: 16px;
  --body-leading: 1.6;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--bg-image);
  /* the sky is pixel art: draw it at one image pixel per screen pixel
     (pixels.js sets --dev to 1/devicePixelRatio) */
  background-size: calc(var(--sky-w) * var(--dev, 1px)) calc(var(--sky-h) * var(--dev, 1px));
  background-position: center top;
  background-attachment: fixed;
  image-rendering: pixelated;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}

img.pixel { image-rendering: pixelated; }
img:not(.pixel) { image-rendering: auto; }

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

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 {
  font-family: var(--head-font);
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 16px;
}
h1 { font-size: 48px; }
h2 { font-size: 32px; margin-top: 48px; }
h3 { font-size: 16px; margin-bottom: 8px; }

p { margin: 0 0 16px; }
p.lede { color: var(--dim); max-width: 60ch; }

/* A notched pixel outline, drawn outside the box so it never shifts the
   layout: four offset shadows leave the corners open, as pixel art does. */
.card, .panel, .links a, .crown-facts li, nav.tabs a[aria-current="page"] {
  box-shadow:
    0 calc(-1 * var(--b)) 0 0 var(--line),
    0 var(--b) 0 0 var(--line),
    calc(-1 * var(--b)) 0 0 0 var(--line),
    var(--b) 0 0 0 var(--line);
}

/* ---- header and tabs ---------------------------------------------------- */

header.site {
  background: var(--head-bg);
  border-bottom: var(--b) solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--pixel);
  font-size: 16px;
}

.brand img { width: 44px; height: 44px; clip-path: circle(38%); }
.brand span b { color: var(--accent); font-weight: normal; }

nav.tabs { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; padding: 8px 0; }

nav.tabs a {
  font-family: var(--pixel);
  font-size: 16px;
  text-decoration: none;
  color: var(--dim);
  padding: 4px 10px;
}

nav.tabs a:hover { color: var(--ink); }

nav.tabs a[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--accent);
  --line: var(--accent-shadow);
}

/* ---- page --------------------------------------------------------------- */

main { padding: 40px 0 64px; }

.hero { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.hero img.logo { width: 200px; height: 200px; clip-path: circle(38%); }
.hero .copy { flex: 1 1 320px; }

/* Buttons */

.links { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; padding: var(--b); }

.links a {
  display: inline-block;
  padding: 8px 14px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 16px;
  text-decoration: none;
  position: relative;
}

.links a[href]:hover { background: var(--line); color: var(--bg); }
.links a[href]:active { top: 2px; }

.links a.primary {
  background: var(--accent);
  color: var(--accent-ink);
  --line: var(--accent-shadow);
}
.links a.primary[href]:hover { filter: brightness(1.15); background: var(--accent); color: var(--accent-ink); }

.links a.soon { opacity: 0.55; cursor: default; }
.links a.soon::after { content: " · soon"; }

/* Game cards */

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 16px;
  padding: var(--b);
}

.card { display: block; background: var(--panel); color: var(--ink); text-decoration: none; overflow: hidden; }
.card:hover { --line: var(--tag); }

.card .art { position: relative; aspect-ratio: 3 / 1; background: #000; overflow: hidden; }
.card .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .text { padding: 14px 16px 16px; }
.card .text p { color: var(--dim); margin: 0; }

.tag { display: inline-block; font-family: var(--pixel); font-size: 16px; color: var(--tag); margin-bottom: 4px; }

/* Game page banner */

.banner { position: relative; width: 100%; aspect-ratio: 3 / 1; background: #000; overflow: hidden; margin-bottom: 28px; }
.banner.wide { aspect-ratio: 16 / 9; }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.facts { padding-left: 20px; }
.facts li { margin-bottom: 8px; }
.facts li::marker { color: var(--tag); }

.panel { background: var(--panel); padding: 20px; margin: 20px var(--b) 0; }
.panel p:last-child { margin-bottom: 0; }

/* ---- footer ------------------------------------------------------------- */

footer.site {
  background: var(--head-bg);
  border-top: var(--b) solid var(--line);
  padding: 24px 0 32px;
  color: var(--dim);
}

footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
footer.site .links { margin: 0; }
footer.site .credit { width: 100%; font-size: 13px; font-family: var(--sans); opacity: 0.8; }
footer.site .credit a { color: inherit; }

@media (max-width: 640px) {
  nav.tabs { margin-left: 0; width: 100%; gap: 8px; }
  .hero img.logo { width: 128px; height: 128px; }
  h1 { font-size: 32px; }
}

/* =========================================================================
   STUDIO - home, mods, forum: MagPi Media's black and red, kept plain
   ========================================================================= */

body.theme-studio h1 { color: var(--ink); text-shadow: 4px 4px 0 var(--accent-shadow); }
body.theme-studio h2 { color: var(--ink); border-bottom: var(--b) solid var(--accent); padding-bottom: 8px; display: inline-block; }
body.theme-studio .card:hover { --line: var(--accent); }

.insert-coin {
  display: inline-block;
  font-family: var(--pixel);
  font-size: 16px;
  color: var(--tag);
  text-decoration: none;
  animation: blink 1.2s steps(1) infinite;
}
.insert-coin:hover { animation: none; color: var(--ink); }

@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .insert-coin { animation: none; } }

.coin-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin: 32px 0; padding: var(--b); }
.coin-slots .panel { margin: 0; display: flex; flex-direction: column; }
.coin-slots .panel h3 { color: var(--tag); }
.coin-slots .panel p { color: var(--dim); flex: 1; }
.coin-slots .links { margin-bottom: 0; }

/* =========================================================================
   BLOCKOUTTD - its itch.io page: the dogfight sky, a dark column, yellow
   pixel text and blue buttons
   ========================================================================= */

body.theme-td {
  --bg: #000;
  --bg-image: url("td-sky.png?v=34bf349d");
  --head-bg: rgb(2, 1, 19);
  --column: rgb(2, 1, 19);
  --panel: #1b1a2c;
  --line: #110d52;
  --ink: #fcf900;
  --dim: #d8d6a0;
  --link: #1babff;
  --accent: #1babff;
  --accent-ink: #fff;
  --accent-shadow: #0696ea;
  --tag: #1babff;
  --max: 980px;
}

body.theme-td main,
body.theme-rts main { padding: 0 0 48px; }

body.theme-td main > .wrap,
body.theme-rts main > .wrap {
  background: var(--column);
  padding: 0 24px 40px;
  min-height: 60vh;
}

body.theme-td .banner,
body.theme-rts .banner { margin: 0 -24px 28px; width: calc(100% + 48px); }

body.theme-td h2,
body.theme-rts h2 { border-bottom: var(--b) solid var(--line); padding-bottom: 8px; }

/* =========================================================================
   BLOCKOUTRTS - the same page as BlockoutTD, drawn crisper: hairline
   borders, a clean body face, pixel headings only, over a scene of
   floating islands drawn from the game's own art.
   ========================================================================= */

body.theme-rts {
  --bg: #04030f;
  --bg-image: url("rts-scene.png?v=5f8d0ddd");   /* islands, bases and transports: Logs/Batch/showcase/tools/rts_islands.py */
  --sky-w: 2560;
  --sky-h: 1440;
  --head-bg: rgba(4, 3, 18, 0.96);
  --column: rgba(4, 3, 18, 0.94);
  --panel: #14132a;
  --line: #2a2580;
  --ink: #fdfb6a;
  --dim: #c9c8e6;
  --link: #3cb8ff;
  --accent: #1babff;
  --accent-ink: #fff;
  --accent-shadow: #0b7fd0;
  --tag: #3cb8ff;
  --b: 2px;
  --max: 1040px;
  --body-font: var(--sans);
  --body-size: 16px;
  --body-leading: 1.6;
}

body.theme-rts { background-position: center center; }
body.theme-rts p, body.theme-rts li { color: #e6e6f5; }
body.theme-rts .lede { color: var(--dim); }

/* =========================================================================
   CROWN & COG - medieval, pixel, papery
   ========================================================================= */

html:has(body.theme-crown) { color-scheme: light; }

body.theme-crown {
  --bg: #e8d9b5;
  /* paper grain, generated here rather than fetched */
  --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --head-bg: #d9c69a;
  --panel: #f3e8cc;
  --line: #3b2717;
  --ink: #2e1f12;
  --dim: #5d4630;
  --link: #8e2a20;
  --accent: #9b2c22;       /* wax-seal red */
  --accent-ink: #fbf1d6;
  --accent-shadow: #4a120d;
  --tag: #3c6e2f;
  --body-font: var(--serif);
  --body-size: 18px;
  --body-leading: 1.6;
  background-attachment: scroll;
  background-size: 240px 240px;
  background-position: 0 0;
}

body.theme-crown h1, body.theme-crown h2 { color: #7a1f17; }
body.theme-crown h2 { text-shadow: 2px 2px 0 rgba(59, 39, 23, 0.2); }
body.theme-crown h3 { color: var(--ink); }

body.theme-crown code { font-size: 0.9em; background: #e6d6ae; padding: 1px 5px; }

/* The header shot, edge to edge */

.crown-hero { position: relative; height: clamp(440px, 78vh, 720px); overflow: hidden; border-bottom: var(--b) solid var(--line); }
.crown-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.crown-hero-text { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 1; }

.crown-plate {
  max-width: 600px;
  padding: 20px 24px 12px;
  margin-left: var(--b);
  background: var(--panel);
  box-shadow:
    0 calc(-1 * var(--b)) 0 0 var(--line), 0 var(--b) 0 0 var(--line),
    calc(-1 * var(--b)) 0 0 0 var(--line), var(--b) 0 0 0 var(--line),
    8px 12px 0 0 rgba(46, 31, 18, 0.35);
}

.crown-plate h1 { margin: 4px 0 8px; }
.crown-plate .kicker { margin: 0; font-style: italic; color: var(--dim); }
.crown-plate .lede { color: var(--ink); }
.crown-plate .links { margin-bottom: 4px; }

body.theme-crown main { position: relative; padding-top: 24px; }

.crown-facts { list-style: none; padding: var(--b); margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 16px; }
.crown-facts li { background: var(--panel); padding: 4px 12px; font-size: 16px; }
.crown-facts b { font-family: var(--pixel); font-weight: normal; color: var(--accent); margin-right: 6px; }

.crown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; padding: var(--b); }
.crown-grid .panel { margin: 0; }
.crown-grid .panel h3 { font-family: var(--pixel); color: #7a1f17; }
.crown-grid .panel p { color: var(--dim); }

.crown-steps { padding-left: 24px; }
.crown-steps li { margin-bottom: 8px; padding-left: 4px; }
.crown-steps li::marker { color: var(--accent); font-family: var(--pixel); }

/* Pixel drawings of the pack's things down both sides, where there is room */

.crown-rail {
  position: absolute;
  top: 24px;
  bottom: 0;
  width: calc((100% - var(--max)) / 2);
  display: none;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  pointer-events: none;
}

.crown-rail.left { left: 0; }
.crown-rail.right { right: 0; }

.crown-icon {
  width: 80px;
  height: 80px;
  shape-rendering: crispEdges;
  filter: drop-shadow(4px 4px 0 rgba(46, 31, 18, 0.25));
  animation: crown-bob 4s steps(4) infinite;
}

.crown-rail .crown-icon:nth-child(even) { animation-delay: -2s; }
.crown-rail.right .crown-icon { animation-delay: -1s; }
.crown-rail.right .crown-icon:nth-child(even) { animation-delay: -3s; }

@keyframes crown-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) { .crown-icon { animation: none; } }
@media (min-width: 1320px) { .crown-rail { display: flex; } }

/* The aerial shot as the footer */

body.theme-crown footer.site {
  min-height: clamp(420px, 56vw, 1125px);
  padding: 0;
  display: flex;
  align-items: flex-end;
  color: var(--ink);
  background: url("crown-and-cog-footer.webp?v=403bc98b") center 40% / cover no-repeat;
  image-rendering: auto;
}

/* a slim strip along the bottom, so the shot shows almost whole */
body.theme-crown footer.site .wrap {
  max-width: none;
  width: 100%;
  background: rgba(243, 232, 204, 0.82);
  padding: 6px max(var(--gutter), calc((100% - var(--max)) / 2));
  gap: 8px 16px;
}
body.theme-crown footer.site .links { padding: var(--b); gap: 10px; }
body.theme-crown footer.site .links a { padding: 4px 10px; }
body.theme-crown footer.site .credit { width: auto; margin: 0; }