/* Reverse Vector's pages: the Blueprint mood (the family style's third, for the
   company). Tokens come from tokens.css (generated); this file is written by
   hand. The games' cards take their own moods through [data-mood]. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--type-rv-body);
  font-optical-sizing: auto;
  color: var(--ink);
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--brand-blueprint-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-blueprint-major) 1px, transparent 1px),
    linear-gradient(var(--ground-pattern) 1px, transparent 1px),
    linear-gradient(90deg, var(--ground-pattern) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--space-5); }
@media (max-width: 600px) { .wrap { padding: 0 var(--space-4); } }

/* The drawing's annotation voice: capitals, tracked, dim. */
.label {
  font: var(--type-rv-label);
  letter-spacing: var(--track-rv-label);
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 var(--space-3);
}
.display {
  font: var(--type-rv-display);
  font-size: clamp(40px, 6.2vw, 64px);
  letter-spacing: var(--track-rv-display);
  margin: 0;
  text-wrap: balance;
}
.title {
  font: var(--type-rv-title);
  font-size: clamp(30px, 4.4vw, 40px);
  letter-spacing: var(--track-rv-title);
  margin: 0;
}
h2 { font: var(--type-rv-heading); margin: 0 0 var(--space-4); }

/* The rule: the family's bar under a title. It draws itself in once. */
.rule {
  width: 96px; height: 4px; background: var(--rule);
  margin: var(--space-4) 0 var(--space-5);
  transform-origin: left; animation: rule-in 200ms ease-out both;
}
@keyframes rule-in { from { transform: scaleX(0); } }

.lede { max-width: 34em; margin: 0 0 var(--space-6); }
.lede, .prose p { color: var(--ink); }
.prose p { max-width: 36em; margin: 0 0 var(--space-4); }
.dim { color: var(--ink-dim); }

/* Buttons: hairline boxes; the chosen one gold. */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 600 16px/1.2 var(--font-ui);
  padding: 12px 20px;
  color: var(--ink); background: var(--panel-raised);
  border: var(--line-blueprint) solid var(--edge); border-radius: var(--corner-blueprint);
  text-decoration: none;
  transition: color 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: transparent; color: var(--accent); }
.btn .arrow { width: 18px; height: 10px; }

/* The header. */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 80px; }
.top .brand img { height: 34px; width: auto; }
.top nav { display: flex; gap: var(--space-5); }
.top nav a {
  font: var(--type-rv-label); letter-spacing: var(--track-rv-label); text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; padding: var(--space-2) 0;
}
.top nav a:hover { color: var(--accent); }
.top-line { border-bottom: 1px solid var(--edge); }
@media (max-width: 600px) {
  .top .brand img { height: 26px; }
  .top nav { gap: var(--space-4); }
}
@media (max-width: 420px) { .top nav a:nth-child(2) { display: none; } }

/* The hero: the words, and the mark as its own drawing. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--space-7); align-items: center;
  padding-top: clamp(48px, 9vw, 112px); padding-bottom: clamp(48px, 8vw, 104px);
}
.hero .display { max-width: 11em; }
.sheet { margin: 0; }
.sheet img { width: 100%; max-width: 520px; margin-left: auto; }
.sheet figcaption { text-align: right; margin-top: var(--space-3); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-6); }
  .sheet img { margin: 0 auto; max-width: 420px; }
  .sheet figcaption { text-align: center; }
}

section.block { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--edge); }

/* The games: each card in its own game's mood. Both cards are built alike:
   the screenshots on the left fill the card's height (the big one gives way,
   so there's never an empty foot under them), the words on the right end with
   the "More about" link. */
.games { display: grid; gap: var(--space-7); }
.game {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch;
  color: var(--ink); background: var(--ground);
  border: var(--line-night) solid var(--edge); border-radius: var(--corner-night);
  box-shadow: var(--float);
  overflow: hidden;
}
.game-media { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2px; background: var(--ground); min-height: 0; }
.game-media > img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.game-media .thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.game-media .thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.game-text { padding: clamp(24px, 3.2vw, 40px); display: flex; flex-direction: column; }
.game-text p { margin: 0 0 var(--space-4); }
.game-name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; margin: 0; }
.game-tag { color: var(--ink-dim); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-2) 0 var(--space-5); }
.facts div { border-top: 1px solid var(--edge); padding-top: var(--space-2); }
.facts dt { font: 600 11px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.facts dd { margin: 4px 0 0; font-weight: 600; }
.game .actions { margin: 0; }
/* "More about ...": a quiet link at the card's foot, with the mark's arrow. */
.more {
  display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-3);
  margin-top: auto; padding-top: var(--space-4);
  font: 700 16px/1.2 var(--font-ui); color: var(--accent); text-decoration: none;
}
.more .arrow { width: 26px; height: 12px; transition: transform 160ms ease-out; }
.more:hover .arrow, .more:focus-visible .arrow { transform: translateX(4px); }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
/* A button to a Discord server: Discord's own white symbol, as given. */
.btn.discord img { width: 22px; height: auto; }

/* Wrong Ends, by night: dense, straight edges, the blue rule. */
.game[data-mood="night"] { font: 500 16px/1.5 var(--font-ui); }
.game[data-mood="night"] .game-name { font-size: clamp(48px, 5.4vw, 64px); line-height: .92; letter-spacing: 2px; text-shadow: var(--lift); }
.game[data-mood="night"] .game-rule { width: 96px; height: 4px; background: var(--rule); margin: var(--space-4) 0 var(--space-3); }
.game[data-mood="night"] .btn { border-radius: var(--corner-night); background: var(--panel-raised); }
.game[data-mood="night"] .btn:hover { background: var(--panel-hover); color: var(--ink); border-color: var(--accent); }
.game[data-mood="night"] .btn.primary { background: var(--accent); color: var(--on-accent); }
.game[data-mood="night"] .btn.primary:hover { background: var(--panel-hover); color: var(--ink); }

/* Rolling Deep, by day: the felt, round corners, the toy lip, gold. */
.game[data-mood="day"] {
  font: 600 16px/1.5 var(--font-ui);
  background: #1b4d32 repeating-linear-gradient(-35deg, var(--ground) 0 26px, var(--ground-pattern) 26px 56px);
  border: var(--line-day) solid var(--edge); border-radius: var(--corner-day-lg);
  box-shadow: var(--lift), var(--float);
}
.game[data-mood="day"] .game-media { background: transparent; padding: var(--space-4); gap: var(--space-3); }
.game[data-mood="day"] .game-media img { border-radius: var(--corner-day); border: var(--line-day) solid var(--edge); }
.game[data-mood="day"] .game-media .thumbs { gap: var(--space-3); }
.game[data-mood="day"] .game-name {
  font-size: clamp(48px, 5.4vw, 66px); line-height: .9; letter-spacing: 3px; color: var(--accent);
  -webkit-text-stroke: 9px var(--edge); paint-order: stroke fill; text-shadow: 0 6px 0 var(--edge);
}
.game[data-mood="day"] .voice { font: 400 24px/1.25 var(--font-voice); color: var(--ink-dim); margin: var(--space-3) 0 var(--space-4); }
.game[data-mood="day"] .facts div { border-top-color: rgba(255, 246, 222, .25); }
.game[data-mood="day"] .btn {
  border-radius: var(--corner-day); border: var(--line-day) solid var(--edge); box-shadow: var(--lift);
  background: var(--panel-raised); color: var(--ink); font-weight: 800;
}
.game[data-mood="day"] .btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--edge); }
.chip {
  display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2);
  margin: 0; padding: 8px 16px; border-radius: var(--corner-day);
  background: var(--panel-raised); border: var(--line-day) solid var(--edge); box-shadow: 0 4px 0 var(--edge);
  font: 800 15px/1.25 var(--font-ui); color: var(--ink);
}
.chip i { flex: none; width: 10px; height: 10px; border-radius: var(--pill); background: var(--accent); }
@media (max-width: 860px) {
  .game { grid-template-columns: 1fr; }
  .game-media > img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .facts { grid-template-columns: 1fr 1fr; }
}

/* The studio: who we are beside how the mark is drawn (Fig. 2, three stages
   from brand/rv_mark.py), then the studio as a drawing's parts list. */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.drawn { margin: var(--space-7) 0 0; border: 1px solid var(--edge); background: rgba(13, 35, 64, .72); padding: var(--space-6) var(--space-6) var(--space-5); box-shadow: var(--float); }
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.stages li { display: flex; flex-direction: column; gap: var(--space-3); }
.stages li + li { border-left: 1px dashed var(--edge); padding-left: var(--space-6); }
.stages img { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.stages span { font-size: 15px; line-height: 1.45; color: var(--ink-dim); }
.stages b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border: 1px solid var(--accent); border-radius: 50%; font: 700 12px/1 var(--font-ui); color: var(--accent); vertical-align: 1px; }
.drawn figcaption { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--edge); }
@media (max-width: 960px) { .studio { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .stages { grid-template-columns: 1fr; }
  .stages li { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .stages li + li { border-left: 0; padding-left: 0; border-top: 1px dashed var(--edge); padding-top: var(--space-3); }
}

/* The parts list: a drawing's bill of materials, hairlines and balloons. */
.parts { margin: 0; }
.parts h3 { margin-bottom: var(--space-3); }
.parts table { width: 100%; border-collapse: collapse; border: 1px solid var(--edge); background: rgba(13, 35, 64, .72); }
.parts th, .parts td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--edge); }
.parts thead th { font: 600 11px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); border-top: 0; background: var(--panel); }
.parts tbody th { font-weight: 650; white-space: nowrap; }
.parts td:first-child, .parts thead th:first-child { width: 64px; text-align: center; border-right: 1px solid var(--edge); }
.parts tbody td:last-child { color: var(--ink-dim); }
.balloon { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--accent); border-radius: 50%; font: 700 13px/1 var(--font-ui); color: var(--accent); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .parts th, .parts td { padding: var(--space-2) var(--space-3); }
  .parts td:first-child, .parts thead th:first-child { width: 44px; }
  .parts tbody th { white-space: normal; }
}

/* Contact: the form (functions/contact.js takes it; assets/js/contact.js
   sends it in place), and Wrong Ends' Discord beside it. */
.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.form {
  display: grid; gap: var(--space-4);
  padding: clamp(20px, 3vw, 32px); border: 1px solid var(--edge); background: rgba(13, 35, 64, .72); box-shadow: var(--float);
}
.form-intro { margin: 0; color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field > span { font: var(--type-rv-label); letter-spacing: var(--track-rv-label); text-transform: uppercase; color: var(--ink-dim); }
.field input, .field select, .field textarea {
  width: 100%; font: 450 17px/1.4 var(--font-ui); color: var(--ink);
  padding: 11px 14px; background: var(--ground); border: 1px solid var(--edge); border-radius: var(--corner-blueprint);
  transition: border-color 160ms ease-out;
}
.field select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-dim) 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 150px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(201, 220, 255, .4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.form.js .field input:user-invalid, .form.js .field textarea:user-invalid { border-color: var(--bad); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:empty { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.form-foot .btn .arrow { width: 22px; height: 11px; }
.btn:disabled { opacity: .55; cursor: wait; }
.form-note { margin: 0; font-size: 15px; color: var(--ink-dim); }
.form-note a { color: var(--accent); }
.form-status { margin: 0; min-height: 1.4em; font-weight: 600; }
.form-status:empty { display: none; }
.form-status[data-kind="ok"] { color: var(--good); }
.form-status[data-kind="bad"] { color: var(--bad); }
.form-status[data-kind="wait"] { color: var(--ink-dim); }
.form.sent .form-status { padding: var(--space-3) var(--space-4); border: 1px solid var(--good); background: rgba(95, 210, 122, .08); }
.discord-card.stack { grid-template-columns: auto minmax(0, 1fr); margin-top: 0; }
.discord-card.stack .dc-go { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* The footer: a drawing's title block. */
.titleblock { padding-bottom: var(--space-7); }
.titleblock .block-grid {
  display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
  border: 1px solid var(--edge);
}
.titleblock .cell { padding: var(--space-3) var(--space-4); border-left: 1px solid var(--edge); min-width: 0; }
.titleblock .cell:first-child { border-left: 0; display: flex; align-items: center; }
.titleblock .cell img { height: 26px; width: auto; }
.titleblock .k { font: 600 10px/1.3 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.titleblock .v { font: 600 14px/1.4 var(--font-ui); font-variant-numeric: tabular-nums; margin-top: 2px; }
@media (max-width: 700px) {
  .titleblock .block-grid { grid-template-columns: 1fr 1fr; }
  .titleblock .cell:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--edge); }
  .titleblock .cell:nth-child(2) { border-left: 0; }
  .titleblock .cell:nth-child(4) { border-left: 0; border-top: 1px solid var(--edge); }
  .titleblock .cell:nth-child(5) { border-top: 1px solid var(--edge); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rule { animation: none; }
}

/* A policy: long prose on the sheet, kept to a readable measure. */
.policy { max-width: 820px; padding-top: clamp(40px, 7vw, 80px); padding-bottom: var(--space-7); }
.policy h2 { font: var(--type-rv-heading); margin: var(--space-7) 0 var(--space-3); scroll-margin-top: var(--space-5); }
.policy h3 { font: 650 17px/1.3 var(--font-ui); margin: var(--space-5) 0 var(--space-2); color: var(--ink); }
.policy p, .policy li { max-width: 40em; }
.policy p { margin: 0 0 var(--space-4); }
.policy ul { margin: 0 0 var(--space-4); padding-left: 1.2em; }
.policy li { margin-bottom: var(--space-2); }
.policy li::marker { color: var(--rule); }
.policy a { color: var(--accent); }
.policy .short { border: 1px solid var(--edge); background: var(--panel); padding: var(--space-5) var(--space-5) var(--space-2); margin: var(--space-5) 0 0; }
.policy .short h2 { margin-top: 0; }
.table { overflow-x: auto; margin: 0 0 var(--space-4); }
.policy table { border-collapse: collapse; width: 100%; font-size: 16px; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--edge); }
.policy th { font: 600 11px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); border-top: 0; }
/* A gap still to fill in: loud on purpose. */
mark.gap { background: transparent; color: var(--accent); border: 1px dashed var(--accent); padding: 0 4px; }

/* A game's own page: the card at the top in the game's mood, then the
   sheet's blocks; each screenshot framed in its game's mood (.shot). */
.crumbs { padding-top: var(--space-5); }
.crumbs a { color: var(--ink-dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); }
.game-page { padding-top: var(--space-2); padding-bottom: clamp(32px, 5vw, 56px); }
.game .note { color: var(--ink-dim); font-size: 15px; margin: 0; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.features li { border: 1px solid var(--edge); background: var(--panel); padding: var(--space-5); }
.features h3 { font: 650 17px/1.3 var(--font-ui); margin: 0 0 var(--space-2); color: var(--ink); }
.features p { margin: 0; color: var(--ink); }
.features .who { margin-top: var(--space-3); color: var(--ink-dim); font-size: 15px; }
@media (max-width: 960px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin: var(--space-6) 0 0; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gallery figcaption { margin-top: var(--space-2); font-size: 15px; color: var(--ink-dim); }
.shot[data-mood="day"] img { border-radius: var(--corner-day); border: var(--line-day) solid var(--edge); box-shadow: var(--lift); }
.shot[data-mood="night"] img { border-radius: var(--corner-night); border: var(--line-night) solid var(--edge); box-shadow: var(--float); }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }

.foot-links { display: flex; gap: var(--space-5); margin: var(--space-3) 0 0; }
.foot-links a { font: var(--type-rv-label); letter-spacing: var(--track-rv-label); text-transform: uppercase; color: var(--ink-dim); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
/* The company's details (UK law asks for them on its website): filled from
   tools/company.json by tools/fill_company.py. */
.legal { margin: var(--space-3) 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-dim); }

/* ---- A game's own page, in its game's mood -------------------------------------
   <body data-mood="day"> (Rolling Deep: the felt, like its card) or "night"
   (Wrong Ends: black, like its card). The tokens follow the mood, so the
   header, the crumbs and the footer's title block adapt by themselves; the
   page's top is the card without its frame (.game.bare), and the maker's
   plate (.plate) brings the company's blueprint back at the foot. */
body[data-mood="day"] {
  font: 600 17px/1.55 var(--font-ui);
  background: #1b4d32 repeating-linear-gradient(-35deg, var(--ground) 0 26px, var(--ground-pattern) 26px 56px);
}
body[data-mood="night"] { font: 500 17px/1.6 var(--font-ui); background: var(--ground); }
body[data-mood="day"] .top-line { background: rgba(13, 42, 26, .45); border-bottom: var(--line-day) solid var(--edge); }
body[data-mood="night"] .top-line { background: #0d0f14; }
body[data-mood] .top nav a:hover, body[data-mood] .crumbs a:hover { color: var(--accent); }
body[data-mood="day"] section.block { border-top: 0; }
body[data-mood="day"] .label { font-weight: 800; }
body[data-mood="day"] .title {
  font: 400 clamp(36px, 5vw, 54px)/1.05 var(--font-display); letter-spacing: 1px;
  color: var(--ink); text-shadow: 0 4px 0 var(--edge);
}
body[data-mood="day"] .rule { width: 120px; height: 8px; border-radius: 4px; box-shadow: 0 3px 0 var(--edge); }
body[data-mood="night"] .title {
  font: 400 clamp(34px, 4.6vw, 50px)/1.05 var(--font-display); letter-spacing: 1.5px;
  text-transform: uppercase; text-shadow: var(--lift);
}
body[data-mood="day"] .features li {
  background: var(--panel); border: var(--line-day) solid var(--edge); border-radius: var(--corner-day-lg);
  box-shadow: var(--lift);
}
body[data-mood="day"] .features h3 { font: 800 19px/1.3 var(--font-ui); }
body[data-mood="day"] .features p { font-weight: 600; }
body[data-mood="night"] .features li {
  background: #101218; border: var(--line-night) solid var(--edge); border-top: 2px solid var(--rule);
  border-radius: var(--corner-night);
}
body[data-mood="night"] .features h3 { font: 700 18px/1.3 var(--font-ui); }
body[data-mood="night"] .features .who { color: var(--accent); }
body[data-mood="day"] .titleblock .block-grid { border-width: 2px; }
body[data-mood="day"] .titleblock .cell { border-left-width: 2px; }

/* The top of a game's page: the card, unframed, on the page's own ground. */
.game.bare { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; gap: var(--space-6); align-items: center; }
.game.bare .game-media { grid-template-rows: auto auto; }
.game.bare .game-media > img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
.game.bare .game-media { background: transparent; padding: 0; }
.game.bare .game-text { padding: var(--space-4) 0; justify-content: center; }
.game.bare .game-name { font-size: clamp(60px, 7.4vw, 96px); }
.game.bare .more { padding-top: var(--space-5); }
.game[data-mood="night"].bare .game-media { gap: var(--space-2); }
.game[data-mood="night"].bare .game-media .thumbs { gap: var(--space-2); }
.game[data-mood="night"].bare .game-media img { border: var(--line-night) solid var(--edge); border-radius: var(--corner-night); }
.game.bare .note { margin-top: var(--space-3); }
@media (max-width: 860px) { .game.bare .game-text { padding: 0; } }

/* The maker's plate: the company's blueprint, set into a game's page. */
.plate {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: center;
  padding: clamp(28px, 4.5vw, 56px);
  font: var(--type-rv-body); color: var(--ink);
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--brand-blueprint-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-blueprint-major) 1px, transparent 1px),
    linear-gradient(var(--ground-pattern) 1px, transparent 1px),
    linear-gradient(90deg, var(--ground-pattern) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  border: var(--line-blueprint) solid var(--edge); border-radius: var(--corner-blueprint);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}
.plate-fig { margin: 0; }
.plate-fig img { width: 100%; max-width: 340px; margin: 0 auto; }
.plate .label { font-weight: 600; color: var(--ink-dim); }
.plate-name { margin: 0 0 var(--space-5); line-height: 0; }
.plate-name img { width: min(100%, 300px); height: auto; }
.plate p { margin: 0 0 var(--space-4); max-width: 32em; }
.plate .more { padding-top: var(--space-5); }
.plate .plate-tag {
  font: var(--type-rv-display); font-size: clamp(26px, 3.2vw, 36px); letter-spacing: var(--track-rv-display);
  margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--edge);
}
@media (max-width: 760px) {
  .plate { grid-template-columns: 1fr; }
  .plate-fig img { max-width: 220px; margin: 0; }
}

/* A link to a Discord server: Discord's white symbol on its Blurple, as given
   (sources/discord/README.md has their rules), in a panel of the page's mood. */
.discord-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: center;
  margin-top: var(--space-6); padding: var(--space-5);
  color: var(--ink); background: var(--panel-raised); text-decoration: none;
  border: var(--line-blueprint) solid var(--edge); border-radius: var(--corner-blueprint);
  transition: border-color 160ms ease-out;
}
.discord-card:hover, .discord-card:focus-visible { border-color: #5865f2; }
.discord-card .dc-tile { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; background: #5865f2; }
.discord-card .dc-tile img { width: 42px; height: auto; }
.discord-card strong { display: block; font: 700 19px/1.3 var(--font-ui); margin-bottom: var(--space-1); }
.discord-card .dc-sub { display: block; color: var(--ink-dim); font-size: 16px; line-height: 1.5; }
.discord-card .dc-go {
  display: inline-flex; align-items: center; gap: var(--space-3); white-space: nowrap;
  padding: 12px 20px; border-radius: 4px; background: #5865f2; color: #fff; font: 600 16px/1.2 var(--font-ui);
  transition: background-color 160ms ease-out;
}
.discord-card .dc-go .arrow { width: 22px; height: 11px; }
.discord-card:hover .dc-go { background: #4752c4; }
@media (max-width: 680px) {
  .discord-card { grid-template-columns: auto minmax(0, 1fr); }
  .discord-card .dc-go { grid-column: 1 / -1; justify-self: start; }
  .discord-card .dc-tile { width: 56px; height: 56px; border-radius: 12px; }
  .discord-card .dc-tile img { width: 32px; }
}

/* The 404 and the controller's resting page: one message, the page's mood. */
.lost { min-height: calc(100vh - 81px); }
.lost .display { font-size: clamp(36px, 5vw, 56px); }
.lost .actions { gap: var(--space-3); }
.note-page { min-height: calc(100vh - 84px); }
body[data-mood="day"] .note-page .btn {
  border-radius: var(--corner-day); border: var(--line-day) solid var(--edge); box-shadow: var(--lift);
  background: var(--panel-raised); color: var(--ink); font-weight: 800;
}
body[data-mood="day"] .note-page .btn:hover { background: var(--accent); color: var(--on-accent); }