/* ==========================================================================
   Monouchi — monouchi.com
   Sumi ink on aged paper with a single vermilion accent — restrained,
   high-contrast, thin rules and a lot of negative space.

   The palette and both font stacks are lifted verbatim from the game's
   ui.css so the site and the start screen read as one continuous surface.
   No webfonts are loaded, by design — the game loads none either.
   ========================================================================== */

:root {
  /* Ink and paper — exact values from game/src/ui/ui.css */
  --ink: #14110d;
  --ink-soft: rgba(20, 17, 13, 0.62);
  --paper: #ece5d8;
  --paper-warm: #f4efe4;
  --paper-edge: #ded5c4;
  --vermilion: #9c2b1b;
  --vermilion-bright: #c4402c;
  --rule: rgba(20, 17, 13, 0.28);
  --rule-faint: rgba(20, 17, 13, 0.14);

  /* Font stacks — exact values from game/src/ui/ui.css. System only. */
  --serif: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Songti SC',
           'Source Han Serif', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  --wrap: 64rem;
  --wrap-text: 42rem;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(120% 90% at 50% 30%,
      var(--paper-warm) 0%, var(--paper) 55%, var(--paper-edge) 100%);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--vermilion);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--vermilion-bright);
}

:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: var(--vermilion);
  color: var(--paper-warm);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.5rem, 8vw, 4.25rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); }

p {
  margin: 0 0 1.1em;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}

main {
  flex: 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--ink);
  color: var(--paper-warm);
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: 0.75rem;
  color: var(--paper-warm);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
}

.brand img {
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.35rem 0;
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover {
  color: var(--vermilion);
  border-bottom-color: var(--vermilion);
}

.site-nav a[aria-current="page"] {
  color: var(--vermilion);
  border-bottom-color: var(--rule);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: clamp(3.5rem, 10vw, 6.5rem) 0 clamp(2.5rem, 7vw, 4.5rem);
}

.hero-mark {
  display: block;
  font-family: var(--serif);
  font-size: 2.125rem;
  line-height: 1;
  color: var(--vermilion);
  margin-bottom: 1.1rem;
}

.hero-logo {
  width: clamp(5.5rem, 16vw, 8rem);
  height: auto;
  margin: 0 auto 0.5rem;
}

.hero .tagline {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  color: var(--ink);
  margin: 0.4em auto 0.9em;
  max-width: 34ch;
}

.hero .sub {
  color: var(--ink-soft);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-rule {
  width: 4.5rem;
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.6rem auto;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
  border-top: 1px solid var(--rule-faint);
}

.section:first-of-type {
  border-top: 0;
}

.kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}

.section > .wrap > p,
.prose p,
.prose ul {
  max-width: var(--wrap-text);
}

.lede {
  font-size: 1.1875rem;
}

.quiet {
  color: var(--ink-soft);
}

.small {
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Buttons and store state
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn-primary {
  background: var(--vermilion);
  color: var(--paper-warm);
  border-color: var(--vermilion);
}

.btn-primary:hover {
  background: var(--vermilion-bright);
  border-color: var(--vermilion-bright);
  color: var(--paper-warm);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--paper-warm);
}

/* Store availability. These are honest "not yet" states — no store badge
   artwork is used until the app is actually listed. When a real URL is set
   in config.js, site.js turns the chip into a link automatically. */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.5rem 0 0;
}

.store-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--rule);
  padding: 0.65rem 1.1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: rgba(244, 239, 228, 0.6);
  text-decoration: none;
}

.store-chip .store-kicker {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.store-chip .store-label {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

a.store-chip:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
}

/* --------------------------------------------------------------------------
   Game cards (index)
   -------------------------------------------------------------------------- */

.games-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.game-card {
  border: 1px solid var(--rule);
  background: rgba(244, 239, 228, 0.55);
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.game-card--flagship {
  background: var(--paper-warm);
  border-color: var(--ink);
}

.game-card h3 {
  margin-bottom: 0.35em;
}

.game-card .game-tagline {
  font-family: var(--serif);
  color: var(--ink);
  margin-bottom: 0.7em;
}

.game-card p:last-of-type {
  margin-bottom: 1.2em;
}

.game-card .card-cta {
  margin-top: auto;
}

.status {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: 1px solid currentColor;
  margin-bottom: 1rem;
}

.status--soon {
  color: var(--vermilion);
}

.status--dev {
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  .games-grid {
    grid-template-columns: 1fr 1fr;
  }

  .game-card--flagship {
    grid-column: 1 / -1;
    padding: 2.2rem 2rem 2rem;
  }
}

/* --------------------------------------------------------------------------
   Feature layout (the-field)
   -------------------------------------------------------------------------- */

.feature-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feature-grid--thirds {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.feature {
  border: 1px solid var(--rule-faint);
  border-top: 1px solid var(--rule);
  background: rgba(244, 239, 228, 0.55);
  padding: 1.4rem 1.3rem 1.1rem;
}

.feature h3 {
  margin-bottom: 0.4em;
}

.feature p {
  font-size: 0.9375rem;
  color: var(--ink);
}

.feature .quiet {
  color: var(--ink-soft);
}

/* Data table (attacks, tiers) */
.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
}

caption {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.6rem;
}

th, td {
  text-align: left;
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--rule-faint);
  vertical-align: top;
}

thead th {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}

td .serif, th .serif {
  font-family: var(--serif);
  font-size: 1.05rem;
}

/* Difficulty cards: the blurbs are the game's own text */
.difficulty-card blockquote {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}

.difficulty-card .quiet {
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Screenshots
   -------------------------------------------------------------------------- */

.shots-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .shots-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.shot {
  margin: 0;
}

.shot .shot-frame {
  border: 1px solid var(--rule);
  background:
    linear-gradient(160deg, rgba(20, 17, 13, 0.05), rgba(20, 17, 13, 0.02)),
    var(--paper-warm);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot figcaption {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding-top: 0.5rem;
}

/* A screenshot that has not arrived yet: hide the broken image and show a
   quiet paper placeholder instead. site.js adds .is-pending on img error. */
.shot.is-pending img {
  display: none;
}

.shot .shot-pending {
  display: none;
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 1rem;
}

.shot.is-pending .shot-pending {
  display: block;
}

.shot-hero {
  max-width: 52rem;
  margin: 2.25rem auto 0;
}

/* --------------------------------------------------------------------------
   FAQ (support)
   -------------------------------------------------------------------------- */

.faq {
  max-width: var(--wrap-text);
}

.faq dt {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 1.6rem 0 0.4rem;
}

.faq dd {
  margin: 0 0 0.5rem;
  color: var(--ink);
}

.contact-block {
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  padding: 1.4rem 1.5rem;
  max-width: var(--wrap-text);
  margin: 1.5rem 0;
}

.contact-block p {
  margin: 0;
}

.contact-block .contact-email {
  font-family: var(--serif);
  font-size: 1.35rem;
}

/* --------------------------------------------------------------------------
   Legal pages / drafts
   -------------------------------------------------------------------------- */

.draft-note {
  display: inline-block;
  border: 1px solid var(--vermilion);
  color: var(--vermilion);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  margin-bottom: 1.4rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  padding: 2rem 0 2.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.footer-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer-nav a:hover {
  color: var(--vermilion);
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: var(--vermilion);
}

@media (min-width: 48rem) {
  .footer-inner {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   Consent banner — gates Google Analytics / Tag Manager.
   Accept and Decline are equally prominent, deliberately.
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--paper-warm);
  border-top: 1px solid var(--ink);
  box-shadow: 0 -8px 24px rgba(20, 17, 13, 0.12);
}

.consent-inner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.consent-text {
  margin: 0;
  font-size: 0.9375rem;
  max-width: 46rem;
}

.consent-actions {
  display: flex;
  gap: 0.75rem;
}

.consent-actions .btn {
  flex: 1 1 0;
  max-width: 14rem;
  padding: 0.7rem 1rem;
}

/* Decline is styled with the same weight as Accept — a filled button of
   equal size. A grey text link next to a big Accept is a dark pattern. */
.consent .btn-decline {
  background: var(--ink);
  color: var(--paper-warm);
  border-color: var(--ink);
}

.consent .btn-decline:hover {
  background: #322c24;
  border-color: #322c24;
  color: var(--paper-warm);
}

@media (min-width: 48rem) {
  .consent-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}