@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('fonts/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders Display'; font-weight: 800; font-display: swap; src: url('fonts/big-shoulders-display-800.woff2') format('woff2'); }

:root {
  --lobby: #0f2a23;
  --lobby-raised: #183a31;
  --felt: #121212;
  --groove: rgb(255 255 255 / .05);
  --letter: #f5f2e9;
  --letter-dim: #aaa597;
  --ink: #1a1a1a;
  --brass: #c9a44c;
  --brass-light: #e6c877;
  --sign: #c8321e;
  --win: #69dc97;
  --warm: #f4c44f;
  --cool: #93dbdc;
  --cold: #8cb4f5;
  --error: #ffb4a6;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --board: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  color: var(--letter);
  font: 400 1rem/1.5 var(--body);
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .02) 0 1px, transparent 1px 32px), var(--lobby);
}

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

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header */
.top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  max-width: 70rem;
  margin: 0 auto;
  padding: .5rem 1rem;
}
.brand { text-align: center; }
.logo { margin: 0; font: 800 2.1rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.logo span { display: inline-block; margin-left: .08em; padding: 0 .16em; color: #fff; background: var(--sign); transform: rotate(-2deg); }
.dateline { margin: .2rem 0 0; color: var(--brass-light); font: 600 .875rem/1.2 var(--board); letter-spacing: .1em; text-transform: uppercase; }

.icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--letter); background: none; border: 0; border-radius: 8px; cursor: pointer; transition: background-color .15s; }
.icon:hover { background: rgb(255 255 255 / .08); }

/* Layout */
main { display: grid; gap: .875rem; max-width: 36rem; margin: 0 auto; padding: .25rem 1rem 2rem; }

/* Progress through the day's apartments */
.progress { display: flex; align-items: center; justify-content: space-between; gap: 1rem; outline: none; }
.progress p { margin: 0; color: var(--letter); font: 700 1.25rem/1 var(--board); letter-spacing: .06em; text-transform: uppercase; }
.pips { display: flex; gap: .375rem; }
.pip { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 2px solid var(--brass); border-radius: 3px; opacity: .55; }
.pip.current { background: rgb(201 164 76 / .25); opacity: 1; }
.pip.won { color: var(--win); border-color: var(--win); opacity: 1; }
.pip.lost { color: var(--error); border-color: var(--error); opacity: 1; }
.play { display: grid; gap: .875rem; min-width: 0; }

/* Listing photo */
.photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--felt); border: 5px solid var(--brass); border-radius: 4px; box-shadow: 0 10px 30px rgb(0 0 0 / .4); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo.failed img { visibility: hidden; }
.missing { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 2rem; color: var(--letter-dim); text-align: center; }
.sign { position: absolute; left: .625rem; bottom: .625rem; padding: .3rem .625rem .375rem; color: #fff; line-height: 1; text-align: center; background: var(--sign); border: 2px solid #fff; border-radius: 3px; box-shadow: 0 3px 10px rgb(0 0 0 / .45); transform: rotate(-2deg); }
.sign b { display: block; font: 800 1.25rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.sign span { font: 700 1rem/1.1 var(--board); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.photo-count { position: absolute; top: .5rem; right: .5rem; margin: 0; padding: .1rem .5rem; color: #fff; font: 700 1rem/1.4 var(--board); letter-spacing: .05em; font-variant-numeric: tabular-nums; background: rgb(0 0 0 / .65); border-radius: 3px; }
.photo-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; color: #fff; background: rgb(0 0 0 / .6); border: 0; border-radius: 50%; cursor: pointer; transition: background-color .15s; }
.photo-nav:hover { background: rgb(0 0 0 / .85); }
#photoPrev { left: .5rem; }
#photoNext { right: .5rem; }

/* Directory board */
.board {
  background-color: var(--felt);
  background-image: repeating-linear-gradient(180deg, var(--groove) 0 1px, rgb(0 0 0 / .5) 1px 2px, transparent 2px 8px);
  border: 5px solid var(--brass);
  border-radius: 4px;
}
#rows { margin: 0; padding: 0; list-style: none; }
.row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .625rem;
  min-height: 4.25rem;
  padding: .5rem .75rem;
  font-family: var(--board);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.row + .row { border-top: 1px solid rgb(201 164 76 / .35); }
.row.current { background: rgb(201 164 76 / .12); box-shadow: inset 3px 0 0 var(--brass-light); }
.unit { color: var(--brass-light); font-size: 1.5rem; font-weight: 700; }
.label { display: block; color: var(--letter-dim); font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.value { display: block; font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.value.locked { display: inline-flex; align-items: center; gap: .3rem; color: var(--letter-dim); font-size: 1rem; font-weight: 500; }
.guess { text-align: right; }
.amount { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.amount.blank { color: var(--letter-dim); }
.verdict { display: inline-flex; align-items: center; gap: .2rem; font-size: .875rem; font-weight: 700; line-height: 1.2; }
.win .verdict, .win .amount { color: var(--win); }
.warm .verdict, .legend .warm b { color: var(--warm); }
.cool .verdict, .legend .cool b { color: var(--cool); }
.cold .verdict, .legend .cold b { color: var(--cold); }

.settle { animation: settle .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes settle { from { opacity: 0; transform: translateY(-8px); } }

/* Guess form */
#guessForm { display: grid; gap: .5rem; }
.field-label { color: var(--brass-light); font: 600 1rem/1.2 var(--board); letter-spacing: .08em; text-transform: uppercase; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.money { display: flex; align-items: center; gap: .25rem; height: 3.25rem; padding: 0 .75rem; color: var(--ink); font: 700 1.5rem var(--board); background: var(--letter); border-radius: 4px; }
.money:focus-within { outline: 3px solid var(--brass-light); outline-offset: 2px; }
.money input { flex: 1; width: 100%; min-width: 0; padding: 0; color: inherit; font: inherit; font-variant-numeric: tabular-nums; background: none; border: 0; outline: none; }
.money input::placeholder { color: #77736a; }
.money small { color: #55524a; font: 600 1rem var(--board); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.25rem; font: 700 1.25rem/1 var(--board); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: background-color .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn.primary { color: var(--ink); background: var(--brass); border: 0; }
.btn.primary:hover { background: var(--brass-light); }
.btn.ghost { color: var(--letter); background: none; border: 2px solid var(--brass); }
.btn.ghost:hover { background: rgb(201 164 76 / .15); }

#slider { width: 100%; height: 44px; margin: 0; background: none; accent-color: var(--brass); cursor: pointer; }
.scale { display: flex; justify-content: space-between; margin-top: -.75rem; color: var(--letter-dim); font: 600 .875rem var(--board); letter-spacing: .04em; }
.error { min-height: 1.5em; margin: 0; color: var(--error); font-size: .9375rem; font-weight: 500; }

/* Result */
#result { padding: 1.25rem; text-align: center; background: var(--lobby-raised); border: 1px solid rgb(201 164 76 / .5); border-radius: 4px; outline: none; animation: settle .35s ease-out both; }
.result-title { margin: 0; color: var(--brass-light); font: 700 1.5rem/1.1 var(--board); letter-spacing: .06em; text-transform: uppercase; }
.result-rent { margin: .4rem 0 .25rem; font: 800 3.75rem/1 var(--display); font-variant-numeric: tabular-nums; }
.result-rent small { margin-left: .1em; font: 700 1.25rem var(--board); letter-spacing: .04em; }
.result-place, .result-best { margin: 0; }
.result-place { font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.day-end { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgb(201 164 76 / .4); }
.day-score { margin: 0 0 .75rem; font: 700 1.5rem/1.1 var(--board); letter-spacing: .05em; text-transform: uppercase; }
.next { margin: 1rem 0 0; color: var(--letter-dim); font-size: .9375rem; }
.next time { color: var(--letter); font-weight: 600; font-variant-numeric: tabular-nums; }

/* How to play and FAQ, in the page so search engines and new players can read them */
.about { width: 100%; max-width: 44rem; margin: 1.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgb(201 164 76 / .4); }
:is(.about, .doc) h2 { margin: 1.75rem 0 .5rem; color: var(--brass-light); font: 700 1.5rem/1.15 var(--board); letter-spacing: .06em; text-transform: uppercase; }
.about h2:first-child { margin-top: 0; }
:is(.about, .doc) h3 { margin: 1rem 0 .15rem; font: 700 1.25rem/1.2 var(--board); letter-spacing: .03em; }
:is(.about, .doc) p { margin: 0 0 .625rem; }
:is(.about, .doc) :is(ol, ul) { margin: 0 0 .75rem; padding-left: 1.25rem; }
:is(.about, .doc) a { color: var(--brass-light); }

/* Rules, about and legal pages */
a.logo { color: var(--letter); text-decoration: none; }
.doc { display: block; max-width: 44rem; }
.doc h1 { margin: .5rem 0 .75rem; font: 700 2.25rem/1.1 var(--board); letter-spacing: .04em; text-transform: uppercase; }
.doc .btn { margin-top: 1rem; }
.crumbs { color: var(--letter-dim); font-size: .875rem; }
.updated { color: var(--letter-dim); font-size: .9375rem; }

/* Links on every page */
.site-footer { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; color: var(--letter-dim); font-size: .9375rem; text-align: center; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.25rem; }
.site-footer a { display: inline-block; padding: .7rem .25rem; color: var(--letter); }
.site-footer p { margin: .25rem 0 0; }

/* 404 page */
.not-found { justify-items: center; padding-top: 5rem; text-align: center; }
.not-found .sign { position: static; display: inline-block; }
.not-found h1 { margin: 1.5rem 0 0; color: var(--brass-light); font: 700 2rem/1.1 var(--board); letter-spacing: .05em; text-transform: uppercase; }
.not-found p { margin: 0; }

/* Dialogs */
dialog { width: min(26rem, calc(100vw - 2rem)); padding: 0; color: var(--letter); background: var(--felt); border: 5px solid var(--brass); border-radius: 4px; }
dialog::backdrop { background: rgb(0 0 0 / .65); }
.sheet { position: relative; padding: 1.25rem; }
.close { position: absolute; top: .25rem; right: .25rem; }
dialog h2 { margin: 0 2.5rem .75rem 0; font: 700 1.625rem/1.1 var(--board); letter-spacing: .06em; text-transform: uppercase; }
dialog h3 { margin: 1.25rem 0 .5rem; color: var(--letter-dim); font: 600 1rem/1.2 var(--board); letter-spacing: .08em; text-transform: uppercase; }
dialog p { margin: 0 0 .75rem; }
.steps, .legend { margin: 0 0 .75rem; padding-left: 1.25rem; }
.legend { padding: 0; list-style: none; }
.fine { margin: 0; color: var(--letter-dim); font-size: .875rem; }

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 0; text-align: center; }
.numbers dd { margin: 0; font: 800 2.25rem/1 var(--display); font-variant-numeric: tabular-nums; }
.numbers dt { color: var(--letter-dim); font: 600 .875rem/1.3 var(--board); letter-spacing: .06em; text-transform: uppercase; }
.bar-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: center; gap: .5rem; margin-top: .3rem; font-family: var(--board); font-weight: 700; }
.bar { display: block; min-width: 1.75rem; padding: .05rem .5rem; color: var(--ink); text-align: right; background: var(--brass); }

#toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); padding: .6rem 1rem; color: var(--ink); font-weight: 600; background: var(--letter); border-radius: 4px; opacity: 0; pointer-events: none; transform: translate(-50%, 1rem); transition: opacity .18s, transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Desktop keeps the photo and the board on one screen. */
@media (min-width: 900px) {
  main { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; column-gap: 2rem; max-width: 70rem; }
  .progress, .about { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}