/* ==========================================================================
   deesgames new design system (2026-09 redesign).
   The page is the game's sea; content sits in the game's own purple menu
   panels; the one warm note is HUD gold (buttons, ticker). Colours are the
   game's, from brand-colours/colours.css. Legacy pages still use style.css.
   ========================================================================== */

:root {
  --sea:          #639bff;   /* MapOceanTile's main colour (the game's sky blue) */
  --sea-deep:     #639bff;   /* game sky */
  --panel-outline:#322b5e;
  --panel-face:   #534a93;
  --panel-hi:     #ceaaed;
  --panel-lo:     #393273;
  --panel-inside: #14102a;
  --parchment:    #fcf5e6;
  --ink:          #40334c;
  --gold:         #ffcd75;
  --gold-dark:    #b77f35;
  --plum:         #8c43b2;
  --grass:        #5a9e4a;
  --text:         #ffffff;               /* the game's primary text */
  --text-dim:     rgb(255 255 255 / 0.7); /* the game's secondary text */
  --tile:         #221c3e;   /* MenuRowStrip face: list rows, tiles, inputs */
  --rule:         #2a2450;   /* row separators */
  --muted:        #5c50a4;   /* socket light: de-emphasised marks */
  --dialog-ink:   #060608;   /* GooseDialogBox outline */
  --dialog-shade: #e3e6ff;   /* GooseDialogBox lower shade */
  --on-sea:       #2a2140;   /* text straight on the sea: dark ink by day */

  --px: 3px;                 /* one art pixel at the page's main scale */
  --measure: 62ch;
  --font-display: var(--font-body);   /* small UI labels; titles use the game sprites */
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: light;
}
/* No dark variant: the game always draws its world on the bright day sea
   (its night is only a light tint), and all content already sits on the
   game's dark menu panels. The studio pages have their own dark mode. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--sea);
  background-image: url("../assets/map/MapOceanTile.png");
  background-size: calc(96px * var(--px));
  image-rendering: pixelated;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
}

img.px, .px img { image-rendering: pixelated; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-body); font-weight: 700; line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: clamp(26px, 4vw, 34px); }
h3 { font-size: 22px; }
p { margin: 0 0 14px; max-width: var(--measure); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Site bar ------------------------------------------------------------ */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1180px; margin: 0 auto; padding: 14px 20px;
}
.bar-brand img { display: block; width: 136px; height: auto; }   /* 1x: pixel art only at whole scales */
.bar-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bar-nav a {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--on-sea); text-decoration: none;
  padding: 6px 10px; border-radius: 6px;
}
.bar-nav a:hover, .bar-nav a[aria-current] { background: rgb(20 16 42 / 0.14); box-shadow: inset 0 -3px 0 var(--on-sea); }

/* ---- Menu panel: the game's purple chrome -------------------------------
   Outline, a light bevel on top/left, a dark bevel bottom/right, then the
   face colour as a thick frame round a near-black interior. Built from stacked
   box-shadows so it scales with no image and stays crisp. */
.panel {
  position: relative;
  border: calc(var(--px) * 12) solid transparent;
  border-image: url("../assets/ui/MenuPanel.png") 24 fill / calc(var(--px) * 12) / 0 stretch;
  image-rendering: pixelated;
  padding: 6px 10px 10px;
  filter: drop-shadow(0 calc(var(--px) * 2) 0 rgb(20 16 42 / 0.35));
}

/* ---- Game chrome shared by all game pages ---------------------------------
   Pills: the game's MenuPill art. Selected = the lavender pill with the gold
   ring and a soft gold glow, never a gold fill (MenuChrome MenuFilterPill). */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 0 2px;
  border: 8px solid transparent; border-width: 8px 14px;
  border-image: url("../assets/ui/MenuPill_off.png") 8 14 fill / 8px 14px stretch;
  image-rendering: pixelated;
  color: #fff; font-weight: 700; font-size: 15px; line-height: 14px; text-decoration: none;
  background: none; cursor: pointer; white-space: nowrap;
}
.pill:hover { filter: brightness(1.12); }
.pill.is-on, .pill[aria-current], .pill[aria-pressed="true"] {
  border-image-source: url("../assets/ui/MenuPill_on.png");
  filter: drop-shadow(0 0 4px rgb(255 205 117 / 0.6));
}
/* List rows and tiles: the game's MenuRowStrip. */
.tile {
  border: 18px solid transparent;
  border-image: url("../assets/ui/MenuRowStrip.png") 12 fill / 18px stretch;
  image-rendering: pixelated;
}
/* The game's one light surface: the goose dialog box. White, near-black
   outline, lavender shade low and left. */
.dialog {
  background: #fff; color: var(--ink);
  border: 2px solid var(--dialog-ink); border-radius: 8px;
  box-shadow: inset 3px -3px 0 var(--dialog-shade), 0 3px 0 rgb(20 16 42 / 0.35);
}

/* ---- Gold HUD button ------------------------------------------------------ */
.btn-gold {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  color: var(--ink); text-decoration: none;
  background: var(--gold);
  padding: 14px 24px 16px;
  border: var(--px) solid var(--ink);
  border-radius: calc(var(--px) * 3);
  box-shadow:
    inset 0 var(--px) 0 #ffe3a8,
    inset 0 calc(var(--px) * -2) 0 var(--gold-dark),
    0 calc(var(--px) * 2) 0 var(--ink);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
.btn-gold img { width: 36px; height: 36px; }
.btn-gold:hover { transform: translateY(calc(var(--px) * -1)); box-shadow:
    inset 0 var(--px) 0 #ffe3a8, inset 0 calc(var(--px) * -2) 0 var(--gold-dark),
    0 calc(var(--px) * 3) 0 var(--ink); }
.btn-gold:active { transform: translateY(var(--px)); box-shadow:
    inset 0 var(--px) 0 #ffe3a8, inset 0 calc(var(--px) * -2) 0 var(--gold-dark),
    0 var(--px) 0 var(--ink); }

/* ---- Footer ------------------------------------------------------------- */
.foot {
  max-width: 1180px; margin: 40px auto 0; padding: 24px 20px 40px;
  font-size: 15px; color: var(--on-sea);
}
.foot p { max-width: none; margin-bottom: 6px; }
.foot a { color: var(--on-sea); }
.foot p + p a { margin-right: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  :root { --px: 2px; }
  body { font-size: 16px; }
  .bar { padding: 10px 16px; }
  .bar-brand img { width: 102px; image-rendering: auto; }   /* too small for 1x: scale smoothly, never drop pixel rows */
  .bar-nav { gap: 0; flex-wrap: nowrap; }
  .bar-nav a { font-size: 16px; padding: 6px 6px; }
}

/* ---- Prose inside panels (support, and later the guide pages) ---------- */
.panel h1 { font-size: clamp(32px, 5vw, 44px); }
.panel h2 { margin-top: 30px; }
.panel ul { padding-left: 22px; max-width: var(--measure); }
.panel li { margin-bottom: 6px; }
.panel details {
  max-width: var(--measure);
  border-top: 2px solid var(--panel-lo);
  padding: 12px 0;
}
.panel details:last-of-type { border-bottom: 2px solid var(--panel-lo); }
.panel summary {
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: 18px;
  display: flex; justify-content: space-between; gap: 12px;
}
.panel summary::-webkit-details-marker { display: none; }
.panel summary::after { content: "+"; font-size: 24px; color: var(--gold); line-height: 1; }
.panel details[open] summary::after { content: "\2212"; }
.panel details p { margin: 10px 0 4px; color: var(--text-dim); }

/* The app icon, shown the way iOS shows it. The exported art already carries
   the rounded-square (squircle) corners; this adds Apple's hairline edge. */
.app-icon { border-radius: 22.37%; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12), 0 2px 6px rgb(20 16 42 / 0.25); image-rendering: auto; }

/* Numbers in the game's HUD face: SF Rounded bold on Apple devices. */
.stat-value, .mc-price strong, .wiki-stat dd, .lv, .viz-bar-value, .control output {
  font-family: ui-rounded, "SF Pro Rounded", var(--font-body);
}

/* The Sigil sprite in running text (see js/sigils.js and the build transform). */
img.sigil { width: 1em; height: 1em; vertical-align: -0.14em; margin-left: 0.08em; image-rendering: auto; }