/* Mythical Whalers website.

   The site is drawn like the game: 640x360 game pixels, each one --px screen
   pixels wide, in the game's own colours, with frames cut from the game's GUI
   art (images/gui). Pixel art is only ever enlarged by whole numbers. */

:root {
  color-scheme: dark;

  /* The game's colours (constants.py and data/images/pallet.png) */
  --charcoal: #0d0e12;   /* CHARCOAL: every panel */
  --well: #232423;       /* the darker well inside trait rows */
  --cream: #fcf7cc;      /* CREAM: body text */
  --teal: #52d09b;       /* TEAL: titles */
  --teal-deep: #20976b;
  --rim-1: #2d221e;      /* the four rim browns, dark to bright */
  --rim-2: #4f3421;
  --rim-3: #865425;
  --rim-4: #c2862f;
  --yellow: #fffb40;     /* hovered text */
  --olive: #9fa746;      /* small labels, selected rims */
  --mist: #aea9c5;       /* quieter text */

  /* "MW Title" is the game's heading font and exists only once it has been
     published (builder/config.py FONTS). Until then titles use the body font.
     The names are the site's own so that a font installed on a visitor's
     computer can never stand in for one the site did not send. */
  --font-title: "MW Title", "MW Body", "Courier New", monospace;
  --font-body: "MW Body", "Courier New", monospace;

  /* One game pixel is this many CSS pixels. */
  --px: 2;
  /* The smallest step a picture may grow by: one device pixel. */
  --step: 1px;
}

/* On screens scaled to 125% or 175%, two CSS pixels are not a whole number of
   device pixels, and pixel art turns uneven. These keep a game pixel on whole
   device pixels: 3 at 125%, 4 at 175%. The value for 175% is 16/7
   (2.285714...) rounded up. A browser drops any fraction of a device pixel
   from a border's width, so rounded down, a 6-pixel border would be drawn 23
   device pixels wide where 24 are meant. */
@media (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) { :root { --px: 2.4; --step: 0.8px; } }
@media (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx) { :root { --step: 0.66667px; } }
@media (min-resolution: 1.75dppx) and (max-resolution: 1.99dppx) { :root { --px: 2.28572; --step: 0.57143px; } }
@media (min-resolution: 2dppx) and (max-resolution: 2.99dppx) { :root { --step: 0.5px; } }
@media (min-resolution: 3dppx) { :root { --step: 0.33333px; } }

/* A phone. Two CSS pixels to a game pixel leaves about twenty letters to a
   line, so everything is drawn smaller: 3 device pixels to a game pixel on a
   screen of 2 device pixels to a CSS pixel, and 5 on a screen of 3. */
@media (max-width: 759px) and (min-resolution: 2dppx) { :root { --px: 1.5; } }
@media (max-width: 759px) and (min-resolution: 2.5dppx) { :root { --px: 1.66667; } }

/* A window much wider than the game's 16:9 screen. The game fills such a
   monitor by drawing its screen as tall as the monitor; the site draws
   everything one size bigger as soon as the whole menu scene still fits. */
@media (min-aspect-ratio: 22/10) and (min-width: 1920px) and (min-height: 1100px) and (max-resolution: 1.24dppx) { :root { --px: 3; } }
@media (min-aspect-ratio: 22/10) and (min-width: 2560px) and (min-height: 1450px) and (max-resolution: 1.24dppx) { :root { --px: 4; } }

* { box-sizing: border-box; }

/* The hidden attribute hides an element whatever display its class gives it.
   Without this rule a card (display: flex) stays visible when the filter hides it. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--charcoal) url(/images/gui/sea-tile.png) 0 0 / calc(24px * var(--px)) repeat;
  color: var(--cream);
  font: 400 calc(16px * var(--px)) / calc(18px * var(--px)) var(--font-body);
  image-rendering: pixelated;
  cursor: url(/images/gui/cursor.png) 6 2, auto;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  margin: 0;
  font: 400 calc(16px * var(--px)) / calc(16px * var(--px)) var(--font-title);
  color: var(--teal);
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--teal); cursor: url(/images/gui/cursor.png) 6 2, pointer; }
a:hover { color: var(--yellow); }

:focus-visible {
  outline: calc(1px * var(--px)) solid var(--yellow);
  outline-offset: calc(1px * var(--px));
}

.skip {
  position: absolute;
  left: calc(4px * var(--px));
  top: calc(-40px * var(--px));
  z-index: 10;
  padding: calc(2px * var(--px)) calc(4px * var(--px));
  background: var(--charcoal);
}
.skip:focus { top: calc(4px * var(--px)); }

.olive { color: var(--olive); }
.dim { color: var(--mist); }

/* The site is one column as wide as the game's screen. */
.wrap {
  max-width: calc(640px * var(--px));
  margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Pictures                                                            */
/* ------------------------------------------------------------------ */

/* Pixel art. --w is the picture's real width, set in the HTML. The picture
   takes the largest whole multiple of one device pixel per art pixel that fits
   its column, up to --max. If even its real size does not fit, it shrinks. */
img { max-width: 100%; height: auto; }

.pixel {
  display: block;
  margin-inline: auto;
  width: min(100%, var(--max, 640px));
  width: max(min(100%, calc(var(--w) * 1px)),
             round(down, min(100%, var(--max, 640px)), calc(var(--w) * var(--step))));
}

/* Screenshots of other programs and photographs: smoothed, never enlarged. */
.photo {
  display: block;
  image-rendering: auto;
}

/* A four-frame sprite strip, 250 ms a frame, like tools.animate_strip.
   --w and --h are one frame's size. */
.sprite {
  display: block;
  flex: none;
  width: calc(var(--w) * var(--zoom, 1) * 1px * var(--px));
  height: calc(var(--h) * var(--zoom, 1) * 1px * var(--px));
  background-repeat: no-repeat;
  background-size: calc(var(--w) * var(--zoom, 1) * 4px * var(--px)) 100%;
  animation: strip 1s steps(4) infinite;
}
@keyframes strip { to { background-position-x: calc(var(--w) * var(--zoom, 1) * -4px * var(--px)); } }

/* A small icon, such as a status effect's, at the site's pixel size. */
.mini { flex: none; width: calc(var(--w) * 1px * var(--px)); height: auto; }

/* ------------------------------------------------------------------ */
/* Frames: the pieces in images/gui                                    */
/* ------------------------------------------------------------------ */

/* A window is a stack: .win-head (title bar), any number of .win-mid, and a
   .win-foot. The corner knots stick out 12 game pixels past the rim, so a
   window under another window stands 30 below it: room for both sets of
   knots and 6 pixels between them. */
.win { margin: calc(12px * var(--px)) calc(12px * var(--px) - 16px); min-width: 0; }
.win + .win { margin-top: calc(30px * var(--px)); }

.panel {
  border: calc(6px * var(--px)) solid transparent;
  border-image: url(/images/gui/panel.png) 27 fill / calc(27px * var(--px)) / calc(12px * var(--px)) stretch;
  padding: calc(5px * var(--px)) calc(8px * var(--px));
}

.win-head {
  position: relative;
  border-style: solid;
  border-color: transparent;
  border-width: calc(6px * var(--px));
  border-image: url(/images/gui/window-head.png) 27 27 6 27 fill / calc(27px * var(--px)) calc(27px * var(--px)) calc(6px * var(--px)) / calc(12px * var(--px)) calc(12px * var(--px)) 0 stretch;
  padding: 0 calc(6px * var(--px));
  min-height: calc(26px * var(--px));
  text-align: center;
}
.win-head > h1, .win-head > h2 { line-height: calc(14px * var(--px)); }

/* A title bar with the close button's cell at its right end. */
.win-head.has-x {
  border-right-width: calc(27px * var(--px));
  border-image-source: url(/images/gui/window-head-x.png);
  border-image-slice: 27 39 6 27 fill;
  border-image-width: calc(27px * var(--px)) calc(39px * var(--px)) calc(6px * var(--px)) calc(27px * var(--px));
}
.win-x {
  position: absolute;
  top: calc(1px * var(--px));
  right: calc(-20px * var(--px));
  width: calc(13px * var(--px));
  height: calc(13px * var(--px));
  background: url(/images/gui/close.png) 0 0 / 100% 100% no-repeat;
}
.win-x:hover, .win-x:focus-visible { background-image: url(/images/gui/close-hover.png); }

.win-mid, .win-foot {
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(6px * var(--px)) calc(6px * var(--px));
  padding: calc(6px * var(--px)) calc(8px * var(--px));
  min-width: 0;
}
.win-mid {
  border-image: url(/images/gui/window-mid.png) 0 27 6 27 fill / 0 calc(27px * var(--px)) calc(6px * var(--px)) / 0 calc(12px * var(--px)) stretch;
}
.win-foot {
  border-image: url(/images/gui/window-foot.png) 0 27 27 27 fill / 0 calc(27px * var(--px)) calc(27px * var(--px)) / 0 calc(12px * var(--px)) calc(12px * var(--px)) stretch;
}

/* The tooltip frame, used for cards. */
.tip {
  border: calc(7px * var(--px)) solid transparent;
  border-image: url(/images/gui/tooltip.png) 8 fill / calc(8px * var(--px)) stretch;
  padding: calc(2px * var(--px)) calc(3px * var(--px));
  min-width: 0;
}

/* The game's button. The text stands where TextButton (buttons.py) blits it:
   9 pixels in from the left of a button 17 wider than the text, with its
   baseline 16 pixels down. That gives m5x7's 7-pixel capitals 9 pixels of
   room on all four sides. Centring the line of text instead puts them part
   of a pixel low, because the font keeps more room above a capital than
   below it. So the line has no height (line-height 0), and align-items:
   baseline rests the text on the bottom edge of the ::before box, which
   starts under the 6-pixel border and is 10 pixels tall. */
.btn {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  height: calc(25px * var(--px));
  border-style: solid;
  border-color: transparent;
  border-width: calc(6px * var(--px)) calc(7px * var(--px));
  border-image: url(/images/gui/btn.png) 12 8 12 8 fill / calc(12px * var(--px)) calc(8px * var(--px)) stretch;
  padding: 0 calc(1px * var(--px)) 0 calc(2px * var(--px));
  background: none;
  font: 400 calc(16px * var(--px)) / 0 var(--font-title);
  color: var(--teal);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: url(/images/gui/cursor.png) 6 2, pointer;
}
.btn::before { content: ""; height: calc(10px * var(--px)); }
.btn:hover, .btn:focus-visible { border-image-source: url(/images/gui/btn-hover.png); color: var(--yellow); }
.btn[aria-current], .btn.is-on { border-image-source: url(/images/gui/btn-selected.png); color: var(--cream); }

/* An item slot: a 32-pixel icon sits 5 pixels in from each edge. The icon is
   drawn at its own height, as the game blits it: three trait icons are 33
   pixels tall and run one pixel onto the frame's lower rim. */
.slot {
  display: inline-block;
  flex: none;
  width: calc(42px * var(--px));
  height: calc(42px * var(--px));
  padding: calc(5px * var(--px));
  background: url(/images/gui/slot.png) 0 0 / 100% 100% no-repeat;
}
.slot > img { display: block; width: calc(32px * var(--px)); height: auto; }
a:hover > .slot, a:focus-visible > .slot { background-image: url(/images/gui/slot-hover.png); }

/* A portrait frame (48-pixel portrait) and a faction banner frame (48x64). */
.portrait {
  display: inline-block;
  flex: none;
  width: calc(58px * var(--px));
  height: calc(58px * var(--px));
  padding: calc(5px * var(--px));
  background: url(/images/gui/portrait.png) 0 0 / 100% 100% no-repeat;
}
.portrait > img { display: block; width: calc(48px * var(--px)); height: calc(48px * var(--px)); }
a:hover > .portrait, a:focus-visible > .portrait { background-image: url(/images/gui/portrait-hover.png); }
.banner {
  display: inline-block;
  flex: none;
  width: calc(58px * var(--px));
  height: calc(74px * var(--px));
  padding: calc(5px * var(--px));
  background: url(/images/gui/banner.png) 0 0 / 100% 100% no-repeat;
}
.banner > img { display: block; width: calc(48px * var(--px)); height: calc(64px * var(--px)); }

.rule {
  height: calc(5px * var(--px));
  background: linear-gradient(to bottom, var(--rim-1) 0 20%, var(--rim-2) 20% 40%, var(--rim-3) 40% 60%, var(--rim-2) 60% 80%, var(--rim-1) 80% 100%);
}

/* ------------------------------------------------------------------ */
/* Page shell                                                          */
/* ------------------------------------------------------------------ */

.site-nav { background: var(--charcoal); }
.site-nav .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4px * var(--px)) calc(5px * var(--px));
  padding: calc(5px * var(--px)) 16px;
}
.brand {
  margin-right: auto;
  font: 400 calc(16px * var(--px)) / 1 var(--font-title);
  color: var(--cream);
  text-decoration: none;
}
/* The tagline follows the name after a dash. */
.tagline::before { content: "- "; }
.site-nav nav { display: flex; flex-wrap: wrap; gap: calc(3px * var(--px)); }
/* On a phone the name is the link home, and the Home button gives up its
   place so the others fit on one line. The tagline does not fit beside the
   name there, so it takes the line under it, without the dash. */
@media (max-width: 759px) {
  .site-nav nav a[href="/"] { display: none; }
  .tagline { display: block; }
  .tagline::before { content: none; }
}

/* The first window's knots stand 6 game pixels under the line above the page,
   the room two windows leave between theirs. */
.main { padding: calc(6px * var(--px)) 16px calc(9px * var(--px)); }

.site-foot { background: var(--charcoal); color: var(--mist); }
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(3px * var(--px)) calc(12px * var(--px));
  padding: calc(6px * var(--px)) 16px calc(8px * var(--px));
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: calc(8px * var(--px)); }

.stack { display: flex; flex-direction: column; gap: calc(6px * var(--px)); min-width: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(5px * var(--px)); }
.split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(5px * var(--px)); }

/* Running text: a column about sixty characters wide. */
.prose { max-width: 26em; margin-inline: auto; display: flex; flex-direction: column; gap: calc(6px * var(--px)); }
.prose p { text-wrap: pretty; }
.prose a { text-decoration: underline; }
.prose h2 { margin-top: calc(4px * var(--px)); }
/* A list sits as close to its paragraph as two paragraphs do to each other. */
.prose ul { margin: 0; padding-left: calc(10px * var(--px)); display: flex; flex-direction: column; gap: calc(2px * var(--px)); }
.prose .pixel, .prose .photo, .prose .player { margin-inline: auto; }

/* ------------------------------------------------------------------ */
/* Home: the game's main menu                                          */
/* ------------------------------------------------------------------ */

/* The stage is the game's 640x360 menu, anchored to the right so the castle
   and ship stay in view on a narrow screen. Layers and timings are those of
   Menu.main_menu and Window.run in gui.py: sea and castle change frame every
   150 ms; back clouds move one pixel every five frames at 60 frames a second,
   the front cloud one every three. */
/* In a window wider than the scene, the band beside it is the game's black,
   as when the game fills a monitor wider than its own screen, and the clouds
   drift on across it. The band is what cuts the scene off at its edges. */
.hero-band { background: var(--charcoal); overflow: hidden; }
.hero { position: relative; background: var(--charcoal); overflow: hidden; --hpx: 1; }
.stage-wrap { position: relative; height: calc(232px * var(--hpx)); overflow: hidden; }
.stage { position: absolute; top: 0; right: 0; width: calc(640px * var(--hpx)); height: calc(360px * var(--hpx)); }
.layer { position: absolute; inset: 0; background-repeat: no-repeat; background-size: calc(640px * var(--hpx)) auto; }
.cloud { background-repeat: repeat-x; background-position: var(--x0) 0; animation: drift var(--t) steps(640) infinite; }
.cloud-1 { background-image: url(/images/menu/cloud-1.png); --x0: 0px; --t: 53.33s; }
.cloud-2 { background-image: url(/images/menu/cloud-2.png); --x0: calc(-214px * var(--hpx)); --t: 53.33s; }
.cloud-3 { background-image: url(/images/menu/cloud-3.png); --x0: calc(-427px * var(--hpx)); --t: 53.33s; }
.cloud-4 { background-image: url(/images/menu/cloud-4.png); --x0: calc(-320px * var(--hpx)); --t: 32s; }
@keyframes drift { to { background-position: calc(var(--x0) - 640px * var(--hpx)) 0; } }
.strip { background-size: calc(640px * var(--hpx)) calc(4320px * var(--hpx)); animation: frames 1.8s steps(12) infinite; }
.castle { background-image: url(/images/menu/castle.png); }
.sea { background-image: url(/images/menu/sea.png); }
@keyframes frames { to { background-position: 0 calc(-4320px * var(--hpx)); } }

.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--px)); padding: calc(8px * var(--px)) 16px; text-align: center; }
.logo { display: block; width: calc(206px * var(--hpx)); max-width: 100%; height: auto; }
.menu { display: flex; flex-direction: column; align-items: stretch; gap: calc(5px * var(--px)); }

@media (min-width: 760px) {
  .hero { --hpx: var(--px); height: calc(300px * var(--hpx)); overflow: visible; }
  .stage-wrap { position: absolute; inset: 0; height: auto; overflow: visible; }
  /* Each cloud strip runs three more of its 640-pixel tiles past the scene on
     either side. A whole number of tiles leaves the clouds inside the scene
     exactly where they were. */
  .cloud { left: calc(-1920px * var(--hpx)); right: calc(-1920px * var(--hpx)); }
  .hero-copy { align-items: flex-start; gap: calc(33px * var(--px)); padding: calc(24px * var(--px)) 0 0 calc(34px * var(--px)); max-width: calc(250px * var(--px)); }
  .hero-copy .logo { animation: bob 1.05s steps(8) infinite alternate; }
  .menu { align-items: flex-start; }
}
@keyframes bob { from { transform: translateY(calc(-3px * var(--px))); } to { transform: translateY(calc(3px * var(--px))); } }

/* What you do: screenshots chosen with radio buttons. The radio buttons, their
   labels in .feat-tabs and the panes in .panes are written in the same order:
   the first radio button shows the first pane and lights the first label, and
   so on for up to four. The names of the tabs are only in the page. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.feat-tabs { display: flex; flex-wrap: wrap; gap: calc(4px * var(--px)); margin-bottom: calc(7px * var(--px)); }
.pane { display: none; margin: 0; gap: calc(7px * var(--px)) calc(11px * var(--px)); align-items: start; }
.pane figcaption { display: flex; flex-direction: column; gap: calc(4px * var(--px)); min-width: 0; }
.pane .pixel { outline: calc(1px * var(--px)) solid var(--rim-2); }
[name="feat"]:nth-of-type(1):checked ~ .panes > :nth-child(1),
[name="feat"]:nth-of-type(2):checked ~ .panes > :nth-child(2),
[name="feat"]:nth-of-type(3):checked ~ .panes > :nth-child(3),
[name="feat"]:nth-of-type(4):checked ~ .panes > :nth-child(4) { display: grid; }
[name="feat"]:nth-of-type(1):checked ~ .feat-tabs > :nth-child(1),
[name="feat"]:nth-of-type(2):checked ~ .feat-tabs > :nth-child(2),
[name="feat"]:nth-of-type(3):checked ~ .feat-tabs > :nth-child(3),
[name="feat"]:nth-of-type(4):checked ~ .feat-tabs > :nth-child(4) { border-image-source: url(/images/gui/btn-selected.png); color: var(--cream); }
[name="feat"]:nth-of-type(1):focus-visible ~ .feat-tabs > :nth-child(1),
[name="feat"]:nth-of-type(2):focus-visible ~ .feat-tabs > :nth-child(2),
[name="feat"]:nth-of-type(3):focus-visible ~ .feat-tabs > :nth-child(3),
[name="feat"]:nth-of-type(4):focus-visible ~ .feat-tabs > :nth-child(4) { outline: calc(1px * var(--px)) solid var(--yellow); outline-offset: calc(1px * var(--px)); }
@media (min-width: 1100px) {
  .pane { grid-template-columns: auto minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Cards, the devlog and the team                                      */
/* ------------------------------------------------------------------ */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(168px * var(--px))), 1fr)); gap: calc(5px * var(--px)); }
a.card { display: flex; flex-direction: column; gap: calc(3px * var(--px)); color: var(--cream); text-decoration: none; }
a.card:hover h3, a.card:focus-visible h3 { color: var(--yellow); }
a.card:hover, a.card:focus-visible { color: var(--cream); }

.post-meta { text-align: center; }

.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(200px * var(--px))), 1fr)); gap: calc(5px * var(--px)); }
.member { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(3px * var(--px)) calc(6px * var(--px)); align-items: start; align-content: start; }
.member h2 { grid-column: 1 / -1; }
.member .pixel { margin-inline: 0; }
@media (min-width: 760px) {
  .member { grid-template-columns: calc(64px * var(--px)) minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Wiki                                                                */
/* ------------------------------------------------------------------ */

.crumbs { padding: calc(4px * var(--px)) calc(12px * var(--px) - 16px) 0; color: var(--mist); }
h2.label { font: 400 calc(16px * var(--px)) / calc(16px * var(--px)) var(--font-body); color: var(--olive); text-transform: uppercase; }

/* A text box drawn with the button frame. */
.field {
  flex: 1 1 calc(110px * var(--px));
  min-width: 0;
  max-width: calc(280px * var(--px));
  height: calc(25px * var(--px));
  border-style: solid;
  border-color: transparent;
  border-width: calc(6px * var(--px)) calc(7px * var(--px));
  border-image: url(/images/gui/btn.png) 12 8 12 8 fill / calc(12px * var(--px)) calc(8px * var(--px)) stretch;
  background: none;
  padding: 0 calc(3px * var(--px));
  font: 400 calc(16px * var(--px)) / 1 var(--font-body);
  color: var(--teal);
}
.field::placeholder { color: var(--teal-deep); opacity: 1; }
.field:focus-visible { border-image-source: url(/images/gui/btn-hover.png); outline: none; }

/* Category tiles on the Wiki's front page. */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(108px * var(--px))), 1fr)); gap: calc(5px * var(--px)); }
/* Two tiles to a row on a phone. */
@media (max-width: 759px) {
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
a.cat { display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--px)); padding-top: calc(4px * var(--px)); padding-bottom: calc(3px * var(--px)); text-align: center; color: var(--cream); text-decoration: none; }
/* Every tile's picture sits in the same box, whatever its own size. */
.cat-art { display: flex; align-items: center; justify-content: center; min-height: calc(58px * var(--px)); }
.cat-art .mini { width: calc(var(--w) * 2px * var(--px)); }
.cat b, .entry-card b { display: block; font-weight: 400; font-family: var(--font-title); color: var(--teal); }
.cat span > span, .entry-card span > span { display: block; }
a.cat:hover, a.cat:focus-visible { color: var(--cream); }
a.cat:hover b, a.cat:focus-visible b, a.entry-card:hover b, a.entry-card:focus-visible b { color: var(--yellow); }

/* One entry on a category page: its picture, then its name and one line. */
a.entry-card { flex-direction: row; align-items: center; gap: calc(5px * var(--px)); }
.entry-card > span:last-child { min-width: 0; }

/* An entry page, laid out like the Bestiary. */
/* The scene a location's window shows, enlarged with the rest of the site. */
.scene { display: block; margin-inline: auto; --max: calc(256px * var(--px)); }
.entry-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(6px * var(--px)) calc(11px * var(--px)); align-items: start; }
.entry-art { display: flex; flex-wrap: wrap; gap: calc(3px * var(--px)); align-items: flex-start; }
.facts { display: flex; flex-direction: column; gap: calc(3px * var(--px)); min-width: 0; }
@media (min-width: 760px) {
  .entry-top { grid-template-columns: auto minmax(0, 1fr); }
}
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(100px * var(--px))), 1fr)); gap: calc(1px * var(--px)) calc(12px * var(--px)); max-width: calc(330px * var(--px)); }
.stat { display: flex; align-items: center; gap: calc(4px * var(--px)); }
.stat img { flex: none; width: calc(16px * var(--px)); height: calc(16px * var(--px)); }
.stat span { color: var(--teal); }
.stat b { margin-left: auto; font-weight: 400; }
.linkrow { display: flex; flex-wrap: wrap; gap: calc(3px * var(--px)) calc(8px * var(--px)); align-items: center; }
.chip { display: inline-flex; align-items: center; gap: calc(3px * var(--px)); min-width: 0; text-decoration: none; }
.tier { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(2px * var(--px)) calc(6px * var(--px)); align-items: center; }
@media (min-width: 760px) {
  .tier { grid-template-columns: calc(70px * var(--px)) minmax(0, 1fr); }
}

/* The Art post's recording: a still frame until Play is pressed. */
.player { display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--px)); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .cloud, .strip, .sprite, .hero-copy .logo { animation: none; }
}