:root {
  --s: 2; /* CSS px per DS pixel, set by main.js */
  --u: calc(var(--s) * 1px);
  --cream: #f6f0e6;
  --ink: #3b2d2b;
  --rose: #c9606f;
  --gold: #b08d57;
  --pearl-hi: #fdfcf9;
  --pearl-lo: #e8e2d8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  overscroll-behavior: none; /* no rubber-band scrolling on phones */
}

body {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .17 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: "Instrument Serif", Georgia, serif;
}

.page {
  /* svh = the viewport with the phone's browser toolbars showing, so the page
     never runs taller than what's visible (100vh would, on mobile) */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  padding: 32px 16px 40px;
}

.title { text-align: center; }

.kicker {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1;
  letter-spacing: -0.01em;
}

h1 em {
  font-style: italic;
  color: var(--rose);
  padding: 0 0.08em;
}

/* pearl bezel around the DS-sized screen */
.frame {
  padding: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 10);
  background: linear-gradient(160deg, var(--pearl-hi), var(--pearl-lo));
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(120, 100, 80, 0.12),
    0 2px 6px rgba(60, 40, 30, 0.12),
    0 24px 48px -24px rgba(60, 40, 30, 0.45);
}

#scene {
  display: block;
  width: calc(var(--u) * 256);
  height: calc(var(--u) * 192);
  border-radius: calc(var(--u) * 2);
  image-rendering: pixelated;
  background: #1f1f24;
}

/* Diamond/Pearl message window, drawn on a canvas from the game's graphics */
.msgbox {
  display: block;
  width: calc(var(--u) * 256);
  height: calc(var(--u) * 48);
  image-rendering: pixelated;
  cursor: pointer;
}

.sound {
  margin: 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  font: italic 15px/1 "Instrument Serif", Georgia, serif;
  letter-spacing: 0.02em;
  color: rgba(59, 45, 43, 0.6);
  cursor: pointer;
}

.sound:hover,
.sound:focus-visible { color: var(--rose); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}