:root {
  --ink: #0d0b11;
  --soot: #17141d;
  --plum: #231c2b;
  --brass: #c9a45c;
  --brass-dim: #7d6638;
  --bone: #e8dfcc;
  --ash: #8d8698;
  --oxblood: #8a2433;
  --lamp: #f2c96b;

  --display: 'Limelight', 'Copperplate', 'Georgia', serif;
  --pixel: 'Silkscreen', 'Courier New', monospace;

  /* Stepped "ziggurat" corners, the art deco signature shape. */
  --step: 10px;
  --ziggurat: polygon(
    0 calc(var(--step) * 2), var(--step) calc(var(--step) * 2), var(--step) var(--step), calc(var(--step) * 2) var(--step), calc(var(--step) * 2) 0,
    calc(100% - var(--step) * 2) 0, calc(100% - var(--step) * 2) var(--step), calc(100% - var(--step)) var(--step), calc(100% - var(--step)) calc(var(--step) * 2), 100% calc(var(--step) * 2),
    100% calc(100% - var(--step) * 2), calc(100% - var(--step)) calc(100% - var(--step) * 2), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step) * 2) calc(100% - var(--step)), calc(100% - var(--step) * 2) 100%,
    calc(var(--step) * 2) 100%, calc(var(--step) * 2) calc(100% - var(--step)), var(--step) calc(100% - var(--step)), var(--step) calc(100% - var(--step) * 2), 0 calc(100% - var(--step) * 2)
  );
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--bone);
  font-family: var(--pixel);
  background:
    radial-gradient(ellipse at 30% 0%, #2b2136 0%, transparent 55%),
    linear-gradient(#120f17, var(--ink));
  background-attachment: fixed;
}

/* Film grain over everything: the grunge layer. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid var(--lamp);
  outline-offset: 3px;
}

.creator {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 16px 48px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    'marquee marquee'
    'stage wardrobe'
    'exit exit';
  gap: 24px;
}

/* ---------- Marquee ---------- */

.marquee {
  grid-area: marquee;
  text-align: center;
}

.marquee__stamp {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  filter: brightness(1.6);
}

.marquee__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 8vw, 76px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  text-shadow: 3px 3px 0 #000, 5px 5px 0 rgba(138, 36, 51, 0.7);
}

.marquee__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ash);
}

.marquee__sub::before,
.marquee__sub::after {
  content: '';
  width: min(18vw, 120px);
  height: 7px;
  border-top: 1px solid var(--brass-dim);
  border-bottom: 1px solid var(--brass-dim);
}

/* ---------- Stage ---------- */

.stage {
  grid-area: stage;
  /* Stays in view while the wardrobe scrolls. */
  position: sticky;
  top: 16px;
  align-self: start;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 56px;
  overflow: hidden;
  clip-path: var(--ziggurat);
  background: var(--brass-dim);
}

/* The brass edge is the .stage background showing around this inset copy of the shape. */
.stage::before {
  content: '';
  position: absolute;
  inset: 1px;
  clip-path: var(--ziggurat);
  background:
    radial-gradient(ellipse 60% 75% at 50% 0%, rgba(242, 201, 107, 0.2), transparent 70%),
    linear-gradient(#1d1725, #0b090e);
}

/* Sunburst rising behind the character. */
.stage__fan {
  position: absolute;
  left: 50%;
  bottom: 56px;
  width: 150%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(201, 164, 92, 0.16) 0deg 5deg, transparent 5deg 10deg);
  -webkit-mask-image: radial-gradient(circle at 50% 100%, transparent 18%, #000 19%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 100%, transparent 18%, #000 19%, transparent 70%);
}

.stage__sprite {
  position: relative;
  z-index: 1;
  width: 256px;
  height: 384px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 22px rgba(242, 201, 107, 0.12));
}

.stage__ground {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 68px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--step) * 2), calc(100% - var(--step)) calc(100% - var(--step) * 2), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step) * 2) calc(100% - var(--step)), calc(100% - var(--step) * 2) 100%, calc(var(--step) * 2) 100%, calc(var(--step) * 2) calc(100% - var(--step)), var(--step) calc(100% - var(--step)), var(--step) calc(100% - var(--step) * 2), 0 calc(100% - var(--step) * 2));
  background:
    radial-gradient(ellipse 110px 12px at 50% 12px, rgba(0, 0, 0, 0.75), transparent),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, 0.45) 46px 48px),
    linear-gradient(#2a2430, #131017);
  border-top: 2px solid #000;
}

/* ---------- Wardrobe ---------- */

.wardrobe {
  grid-area: wardrobe;
  display: flex;
  flex-direction: column;
  background: var(--soot);
  border: 1px solid var(--brass-dim);
  box-shadow: 6px 6px 0 #000;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--brass-dim);
}

.tab {
  flex: 1 1 0;
  min-width: 84px;
  padding: 14px 10px 12px;
  background: none;
  border: 0;
  border-right: 1px solid rgba(125, 102, 56, 0.4);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
}

.tab:last-child { border-right: 0; }
.tab:hover { color: var(--bone); }

.tab[aria-selected='true'] {
  color: var(--ink);
  background: var(--brass);
}

.panel {
  padding: 22px 20px 26px;
  display: grid;
  gap: 26px;
}

.group__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}

.group__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--brass-dim), transparent);
}

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 6px 8px;
  background: var(--plum);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(232, 223, 204, 0.06);
}

.item:hover { background: #2d2437; }

.item[aria-pressed='true'] {
  border-color: var(--brass);
  box-shadow: inset 0 0 0 1px var(--brass), 3px 3px 0 #000;
}

.item__thumb {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.item__name {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}

.item[aria-pressed='true'] .item__name { color: var(--bone); }

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--chip);
  border: 2px solid #000;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.28), inset 3px 3px 0 rgba(255, 255, 255, 0.14);
  /* Octagon: clipped corners, like a deco tile. */
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.swatch:hover { transform: translateY(-2px); }

.swatch[aria-pressed='true'] {
  box-shadow: inset 0 0 0 3px var(--bone), inset 0 0 0 5px #000;
}

/* ---------- Exit ---------- */

.exit {
  grid-area: exit;
  text-align: center;
}

.exit__button {
  padding: 16px 44px 14px;
  background: var(--oxblood);
  border: 0;
  clip-path: var(--ziggurat);
  --step: 5px;
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone);
}

.exit__button:hover { background: #a52c3f; }

.exit__soon {
  margin: 16px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ash);
}

/* ---------- Narrow screens ---------- */

@media (max-width: 760px) {
  .creator {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'marquee' 'stage' 'wardrobe' 'exit';
  }

  .stage {
    position: relative;
    top: auto;
    min-height: 380px;
  }

  .stage__sprite {
    width: 192px;
    height: 288px;
  }
}

.panel__note {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--oxblood);
  background: rgba(138, 36, 51, 0.14);
  font-size: 12px;
  line-height: 1.5;
  color: var(--bone);
}

[hidden] { display: none !important; }

/* ---------- City ---------- */

.city {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.city__frame {
  position: relative;
  border: 1px solid var(--brass-dim);
  box-shadow: 6px 6px 0 #000;
  background: #000;
}

.city__street {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  /* Extra room on the right for the full screen button. */
  padding: 12px 52px 12px 14px;
  pointer-events: none;
  font-size: clamp(9px, 1.5vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

.hud p { margin: 0; }

.hud__clock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 30%;
  color: var(--brass);
}

.hud__clock span:last-child { color: var(--ash); }

.hud__goal {
  max-width: 55%;
  text-align: right;
  line-height: 1.5;
  color: var(--bone);
}

/* ---------- Study timer ---------- */

.timer {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em;
  background: rgba(13, 11, 17, 0.8);
  border: 1px solid var(--brass-dim);
  font-size: clamp(9px, 1.5vw, 13px);
  white-space: nowrap;
}

/* The goal stops short of the timer while it is up. */
.timer:not([hidden]) ~ .hud .hud__goal { max-width: 36%; }

.timer__time {
  min-width: 4.2em;
  padding: 0 0.2em;
  text-align: center;
  font-size: 1.3em;
  letter-spacing: 0.08em;
  color: var(--bone);
}

.timer__button {
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  line-height: 1;
  background: none;
  border: 1px solid var(--brass-dim);
  color: var(--brass);
}

.timer__button:hover { border-color: var(--brass); color: var(--lamp); }
.timer__button:disabled { opacity: 0.35; cursor: default; }
.timer.is-running .timer__time { color: var(--lamp); }
.timer.is-done { border-color: var(--lamp); }
.timer.is-done .timer__time { color: var(--lamp); animation: timer-blink 1s steps(2, start) infinite; }

@keyframes timer-blink { to { visibility: hidden; } }

.card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: rgba(8, 6, 11, 0.9);
}

.card p { margin: 0; }

.card__time {
  font-size: clamp(12px, 2.2vw, 18px);
  letter-spacing: 0.3em;
  color: var(--oxblood);
  filter: brightness(1.6);
}

.card__place {
  font-family: var(--display);
  font-size: clamp(28px, 7vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  text-shadow: 3px 3px 0 #000, 5px 5px 0 rgba(138, 36, 51, 0.7);
}

.card__note {
  max-width: 34em;
  font-size: clamp(10px, 1.6vw, 13px);
  line-height: 1.7;
  color: var(--bone);
}

.card--ending { gap: 16px; }

.dialog {
  position: absolute;
  left: 3%;
  right: 3%;
  /* Sits under the clock so the people talking stay in view. */
  top: 15%;
  padding: 12px 16px 12px;
  background: rgba(13, 11, 17, 0.94);
  border: 1px solid var(--brass);
  box-shadow: 4px 4px 0 #000;
}

.dialog p { margin: 0; }

.dialog__who {
  margin-bottom: 6px !important;
  font-size: clamp(9px, 1.4vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}

.dialog__text {
  font-size: clamp(11px, 1.9vw, 16px);
  line-height: 1.6;
  color: var(--bone);
}

.dialog__choices {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.dialog__choices:empty { display: none; }

.choice {
  padding: 7px 10px;
  text-align: left;
  background: var(--plum);
  border: 1px solid #000;
  font-size: clamp(10px, 1.6vw, 14px);
  line-height: 1.4;
}

.choice:hover,
.choice:focus-visible {
  background: var(--brass);
  color: var(--ink);
}

.choice__key {
  margin-right: 10px;
  color: var(--brass);
}

.choice:hover .choice__key,
.choice:focus-visible .choice__key { color: var(--ink); }

.dialog__hint {
  margin-top: 6px !important;
  text-align: right;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
}

.pad {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.pad__button {
  min-width: 64px;
  padding: 14px 16px 12px;
  background: var(--soot);
  border: 1px solid var(--brass-dim);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.pad__button:active { background: var(--brass); color: var(--ink); }
.pad__button--talk { flex: 1; background: var(--oxblood); border-color: #000; }
.pad__button--quiet { color: var(--ash); }

.city__keys {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ash);
}

/* Hold two lines of space so the box does not grow while a line types out. */
.dialog__text { min-height: 3.2em; }

.hud__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  margin: 0;
  text-align: center;
  pointer-events: none;
  font-size: clamp(9px, 1.5vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lamp);
  text-shadow: 2px 2px 0 #000;
}

/* ---------- Challenges ---------- */

.minigame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 14px);
  padding: 12px 16px;
  text-align: center;
  background: rgba(8, 6, 11, 0.93);
}

.minigame p,
.minigame h2 { margin: 0; }

.minigame__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 4vw, 34px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}

.minigame__status,
.minigame__clue {
  font-size: clamp(10px, 1.7vw, 15px);
  line-height: 1.5;
  color: var(--bone);
}

.minigame__clue { color: var(--lamp); }

.minigame__help {
  font-size: clamp(8px, 1.2vw, 11px);
  letter-spacing: 0.1em;
  color: var(--ash);
}

.strings {
  display: flex;
  gap: clamp(8px, 2vw, 18px);
}

.strings__pad {
  width: clamp(44px, 10vw, 84px);
  height: clamp(60px, 16vw, 140px);
  border: 2px solid #000;
  background: var(--string);
  box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.35);
  filter: brightness(0.55);
  font-size: clamp(12px, 2vw, 18px);
  color: #000;
}

.strings__pad--0 { --string: #e8a23c; }
.strings__pad--1 { --string: #e879b0; }
.strings__pad--2 { --string: #5fc48a; }
.strings__pad--3 { --string: #9a6be0; }

.strings__pad.is-lit {
  filter: brightness(1.25);
  box-shadow: 0 0 18px var(--string);
}

.shelf {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(4px, 1vw, 10px);
}

.shelf__record {
  padding: clamp(2px, 0.5vw, 5px);
  background: var(--plum);
  border: 1px solid #000;
  line-height: 0;
}

.shelf__record:hover,
.shelf__record:focus-visible { background: var(--brass); }
.shelf__record:disabled { opacity: 0.25; cursor: default; background: var(--plum); }
.shelf__record.is-right { background: #5fc48a; }

.shelf__cover {
  width: clamp(30px, 7.5vw, 72px);
  height: clamp(30px, 7.5vw, 72px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tuner__name {
  min-width: 16ch;
  padding: 8px 14px;
  background: #0b1512;
  border: 1px solid var(--brass-dim);
  font-size: clamp(14px, 3vw, 26px);
  letter-spacing: 0.12em;
  white-space: pre;
  color: #7fe0b0;
}

.tuner__meter,
.tuner__track {
  position: relative;
  width: min(80%, 520px);
  height: 12px;
  background: var(--soot);
  border: 1px solid var(--brass-dim);
}

.tuner__fill {
  height: 100%;
  width: 0;
  background: var(--oxblood);
}

.tuner__fill.is-strong { background: #5fc48a; }

.tuner__track {
  height: 26px;
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--brass-dim) 9px 10px), var(--soot);
}

.tuner__needle {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 4px;
  margin-left: -2px;
  background: var(--lamp);
  box-shadow: 0 0 8px var(--lamp);
}

.tuner__buttons {
  display: flex;
  gap: 12px;
}

.exit__skip {
  display: block;
  margin: 14px auto 0;
  padding: 6px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--brass-dim);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

.exit__skip:hover { color: var(--bone); }

/* ---------- Elevator and music player ---------- */

.lift__floors {
  display: grid;
  gap: 4px;
  width: min(86%, 420px);
}

.lift__floor {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(3px, 0.7vw, 6px) 12px;
  text-align: left;
  background: var(--soot);
  border: 1px solid var(--brass-dim);
  font-size: clamp(10px, 1.7vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lift__floor:hover:not(:disabled),
.lift__floor:focus-visible { background: var(--brass); color: var(--ink); }
.lift__floor:disabled { opacity: 0.45; cursor: default; }

.lift__number {
  flex: none;
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--floor, var(--brass));
  color: #000;
}

.lift__name { flex: 1; }

.lift__tag {
  font-size: 0.75em;
  color: var(--lamp);
}

.lift__floor:hover:not(:disabled) .lift__tag { color: var(--ink); }

.player {
  margin-top: 16px;
  padding: 14px;
  background: var(--soot);
  border: 1px solid var(--brass-dim);
  box-shadow: 6px 6px 0 #000;
}

.player p { margin: 0; }

.player__title {
  margin-bottom: 10px !important;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}

.player iframe {
  display: block;
  width: 100%;
  height: 152px;
  border: 0;
  border-radius: 12px;
}

.player__note {
  margin-top: 10px !important;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ash);
}

/* ---------- Decorating your floor ---------- */

/* The panel keeps to the left so the room can be seen changing beside it. */
.decor {
  right: auto;
  width: 44%;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(3px, 0.7vw, 7px);
  padding: 10px 12px;
  overflow-y: auto;
  text-align: left;
  border-right: 1px solid var(--brass-dim);
}

.decor .minigame__title { font-size: clamp(14px, 2.6vw, 24px); }

.decor__label {
  font-size: clamp(8px, 1.2vw, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

/* A piece's name and choices share a line; its colours go underneath. */
.decor__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
}

.decor__row .decor__label { min-width: 5.5em; }
.decor__options + .decor__swatches { flex-basis: 100%; }

.decor__link,
.decor__options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.decor__input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  background: var(--ink);
  border: 1px solid var(--brass-dim);
  color: var(--bone);
  font: inherit;
  font-size: clamp(9px, 1.3vw, 12px);
}

.decor__input:focus-visible { outline: 2px solid var(--lamp); }

.decor__status {
  font-size: clamp(8px, 1.2vw, 11px);
  color: var(--lamp);
}

.decor__status:empty { display: none; }

.decor__option {
  padding: 4px 9px;
  background: var(--soot);
  border: 1px solid var(--brass-dim);
  font-size: clamp(9px, 1.3vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.decor__option:hover,
.decor__option[aria-pressed='true'] { background: var(--brass); color: var(--ink); }

.decor__swatches { gap: 5px; }

.decor__swatches .swatch {
  width: clamp(16px, 2.6vw, 26px);
  height: clamp(16px, 2.6vw, 26px);
  clip-path: none;
}

.decor__swatches .swatch[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--bone), inset 0 0 0 4px #000;
}

.decor__done {
  align-self: flex-start;
  margin-top: clamp(4px, 1vw, 10px);
  background: var(--oxblood);
}

/* ---------- Full screen ---------- */

/* Only the game goes full screen. The music player stays on the page behind
   it and keeps playing; leave full screen to pause or skip. */
.fullscreen {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 7px;
  background: rgba(13, 11, 17, 0.8);
  border: 1px solid var(--brass-dim);
  color: var(--brass);
}

.fullscreen:hover { border-color: var(--brass); color: var(--lamp); }

.fullscreen svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}

.fullscreen__shrink { display: none; }
.city__screen.is-full .fullscreen__grow { display: none; }
.city__screen.is-full .fullscreen__shrink { display: inline; }

/* A one-time callout under the button, with an arrow pointing up at it. */
.fullscreen-tip {
  position: absolute;
  top: 52px;
  right: 8px;
  z-index: 5;
  width: min(230px, calc(100% - 16px));
  margin: 0;
  padding: 9px 12px 8px;
  background: var(--soot);
  border: 1px solid var(--brass);
  box-shadow: 3px 3px 0 #000;
  pointer-events: none;
  animation: tip-bob 1s steps(2, end) infinite;
}

.fullscreen-tip::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 10px;
  width: 9px;
  height: 9px;
  background: var(--soot);
  border-top: 1px solid var(--brass);
  border-left: 1px solid var(--brass);
  transform: rotate(45deg);
}

.fullscreen-tip__title,
.fullscreen-tip__text { display: block; }

.fullscreen-tip__title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lamp);
}

.fullscreen-tip__text {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--bone);
}

@keyframes tip-bob {
  50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .fullscreen-tip { animation: none; }
}

/* Touch screens need the walk buttons, which stay behind on the page. */
@media (hover: none) and (pointer: coarse) {
  .fullscreen, .fullscreen-tip { display: none; }
  .hud { padding-right: 14px; }
}

.city__screen.is-full {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  font-family: var(--pixel);
  color: var(--bone);
}

/* The frame keeps its usual size and is scaled up to fit (see game.js), so
   the text and challenges grow with the picture. */
.city__screen.is-full .city__frame {
  flex: none;
  width: 1000px;
  border: 0;
  box-shadow: none;
  transform: scale(var(--fit, 1));
}

/* ---------- First-visit Spotify note ---------- */

/* Floats over the top of the page without taking clicks from anything beside it. */
.notice {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 10;
  width: min(calc(100% - 24px), 620px);
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 48px 12px 16px;
  background: var(--soot);
  border: 1px solid var(--brass);
  box-shadow: 4px 4px 0 #000;
  animation: notice-drop 0.4s steps(5, end);
}

.notice__text {
  flex: 1 1 240px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--bone);
}

.notice__link {
  padding: 9px 14px 7px;
  background: var(--oxblood);
  border: 1px solid #000;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
}

.notice__link:hover { background: #a52c3f; }

.notice__link:focus-visible {
  outline: 2px solid var(--lamp);
  outline-offset: 3px;
}

.notice__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 1;
  background: none;
  border: 1px solid var(--brass-dim);
  font-size: 16px;
  color: var(--brass);
}

.notice__close:hover { border-color: var(--brass); color: var(--lamp); }

@keyframes notice-drop {
  from { transform: translate(-50%, -140%); }
}

@media (prefers-reduced-motion: reduce) {
  .notice { animation: none; }
}