@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --screen: #E8E7D9;
  --lit: #23261C;
  --ghost: #C9C8B7;
  --secondary: #6E7263;
  --font-display: 'Silkscreen', 'Courier New', monospace;
  --font-body: 'Space Mono', 'Courier New', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

/* Nothing may widen the page: iOS Safari ignores overflow-x on body alone, so a
   splash poking past the right edge made the whole title screen sit off centre
   and jitter with its pulse. clip, not hidden, so html never becomes a scroller. */
html {
  overflow-x: clip;
}

body {
  background: var(--screen);
  color: var(--lit);
  font-family: var(--font-body);
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Persistent scene above whichever screen is showing. */
#hill-stage {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: none;
  position: relative;
}

/* Sisyphus speaking, over the sky on the left where the hill never reaches. */
#speech {
  position: absolute;
  left: 13%;
  top: 22%;
  max-width: 56%;
  background: var(--screen);
  border: 2px solid var(--lit);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  z-index: 2;
}

#speech::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: -10px;
  width: 10px;
  height: 10px;
  background: var(--screen);
  border-left: 2px solid var(--lit);
  border-bottom: 2px solid var(--lit);
}

#hill-container {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Endless climbs: one layer per hill, the next one stacked behind while the
   camera pans onto it. */
.hill-layer {
  display: flex;
  justify-content: center;
  width: 100%;
}

.hill-layer.next {
  position: absolute;
  inset: 0;
}

#hill-container svg {
  width: 100%;
  height: auto;
}

/* Pixel grid overlay, ~5% opacity, sits over the whole screen */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background-image:
    repeating-linear-gradient(0deg, rgba(35,38,28,0.05) 0px, rgba(35,38,28,0.05) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(35,38,28,0.05) 0px, rgba(35,38,28,0.05) 1px, transparent 1px, transparent 4px);
}

button {
  font-family: var(--font-display);
  background: var(--screen);
  color: var(--lit);
  border: 2px solid var(--lit);
  border-radius: 0;
  padding: 14px 20px;
  font-size: 16px;
  cursor: pointer;
  min-height: 48px;
  box-shadow: none;
}

button:active {
  background: var(--lit);
  color: var(--screen);
}

/* Screens are flex columns that can be taller than the window. A button's
   explicit min-height replaces the automatic one, so a flex-shrunk button
   with a two-line label ("Unlimited climbs with Uphill+" on a phone) kept
   its 48px and the second line spilled over whatever came next. */
.screen > button,
.screen > input {
  flex-shrink: 0;
}

/* Held state after a successful clipboard write — the same inversion as
   :active, but it stays up long enough to be read. */
button.copied {
  background: var(--lit);
  color: var(--screen);
}

button:disabled {
  opacity: 0.4;
  cursor: default;
}

.screen {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  gap: 16px;
}

/* Question screen: prompt sits under the hill, the answer controls are
   pushed toward the bottom of the screen where a thumb can reach them. */
#question-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#question-container > :last-child {
  margin-top: auto;
}

#question-container button {
  display: block;
  width: 100%;
}

#question-container input {
  display: block;
  width: 100%;
}

.answer-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Reveal screen: explanation up top, continue at the thumb. */
#btn-continue {
  margin-top: auto;
}

.hidden {
  display: none !important;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.5px;
}

.label {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* A player's own scores, under the day in the archive list. */
.archive-scores {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}

.prompt {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-btn {
  text-align: left;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 15px;
  white-space: normal;
}

/* An order pick stays tappable (to take it back), so it's marked by the
   press inversion rather than the faded disabled look. */
.option-btn.picked {
  background: var(--lit);
  color: var(--screen);
}

/* Endless skip: quieter than the answers, under them. */
.skip-btn {
  margin-top: 14px;
  width: 100%;
  border-style: dashed;
  color: var(--secondary);
}

/* Endless flag and map pictures: small, hard-edged pixels. */
.q-picture {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.q-flag canvas {
  width: 180px;
  height: auto;
  image-rendering: pixelated;
  border: 3px solid var(--lit);
}

.q-map svg {
  width: 200px;
  height: 160px;
  fill: var(--lit);
}

/* Endless match: tap a left item to choose it, the chosen one marked; a
   paired one shows an × to undo it. */
.match-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 15px;
}

.match-slots li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 8px;
  border: 2px solid var(--ghost);
}

.match-slots li {
  cursor: pointer;
}

.match-slots li.current {
  border-color: var(--lit);
}

.match-undo {
  margin-left: auto;
  color: var(--secondary);
  visibility: hidden;
}

.match-slots li.paired .match-undo {
  visibility: visible;
}

.match-left {
  font-weight: 700;
}

.match-right:empty::before {
  content: '?';
  color: var(--secondary);
}

.reveal-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--lit);
}

/* One line per point, with a small gap between them. */
.reveal-point {
  display: block;
}

.reveal-point + .reveal-point {
  margin-top: 0.6em;
}

/* Results: the questions got wrong, each with the right answer and why.
   Separated by the same faint rule as the title screen's tagline. */
.missed {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.missed-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--ghost);
}

.missed-prompt {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}

.missed-list {
  list-style: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

.missed-yours,
.missed-answer {
  font-family: var(--font-body);
  font-size: 14px;
}

.missed-yours {
  color: var(--secondary);
}

.missed-answer {
  font-weight: 700;
}

.missed-order {
  list-style: none;
  line-height: 1.5;
}

/* Emoji squares sit taller than their em box, so the rows need a little more
   room than text would. */
.share-block {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
  white-space: pre;
  background: var(--ghost);
  padding: 12px;
  overflow-x: auto;
  flex: none; /* scrollable boxes shrink inside a flex column otherwise */
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.mute-toggle {
  min-height: 40px;
  padding: 6px 10px;
  font-size: 12px;
}

input[type="text"], input[type="number"], input[type="email"] {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px;
  border: 2px solid var(--lit);
  background: var(--screen);
  color: var(--lit);
  border-radius: 0;
  min-height: 48px;
  width: 100%;
}

.title-footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fact {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--lit);
  margin-top: 4px;
}

/* Collapsed by default. The summary is a label with a + that turns into a
   - when open; the text is the same small print as the fact of the day. */
.how-to-play summary {
  cursor: pointer;
  list-style: none;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.how-to-play summary::-webkit-details-marker {
  display: none;
}

.how-to-play summary::before {
  content: '+';
  width: 1ch;
}

.how-to-play[open] summary::before {
  content: '-';
}

.how-to-play[open] summary {
  margin-bottom: 8px;
}

.how-to-play p + p {
  margin-top: 8px;
}

.how-to-play p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--secondary);
}

.tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--secondary);
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--ghost);
}

.featured-badge {
  align-self: center;
  line-height: 0;
}

.featured-badge img {
  display: block;
  height: auto;
}

.result-badge {
  font-family: var(--font-display);
  font-size: 14px;
  padding: 2px 8px;
  border: 2px solid var(--lit);
  align-self: flex-start;
}

/* Mouse and trackpad: the one hover the design allows is an inverted block. */
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) {
    background: var(--lit);
    color: var(--screen);
  }
}

/* Desktop. The phone layout pushes answers to the bottom of the viewport for
   thumb reach; on a tall window that strands them, so here everything sits
   under the hill and the hill is capped by height instead of width. */
@media (min-width: 760px) {
  #hill-stage,
  .screen {
    max-width: 680px;
  }

  #hill-stage {
    padding-top: 32px;
  }

  #hill-container svg {
    width: auto;
    height: 38vh;
    max-width: 100%;
  }

  .screen {
    padding: 16px 24px 40px;
  }

  /* The hill is capped by height, so on a wide window it comes out narrower
     than the column. Narrow the top bar and the question and reveal screens
     to the hill's width (132x78 art, plus each one's side padding) so they
     sit squarely around it. */
  body[data-screen="screen-question"] #hill-stage,
  body[data-screen="screen-reveal"] #hill-stage {
    max-width: min(680px, calc(38vh * 132 / 78 + 32px));
  }

  #screen-question,
  #screen-reveal {
    max-width: min(696px, calc(38vh * 132 / 78 + 48px));
  }

  #question-container {
    flex: none;
  }

  #question-container > :last-child {
    margin-top: 0;
  }

  #btn-continue {
    margin-top: 8px;
    align-self: flex-start;
    min-width: 220px;
  }

  #screen-results button,
  #screen-archive button,
  #screen-unavailable button {
    align-self: flex-start;
    min-width: 260px;
  }

  /* The results screen carries more below the hill, so it gets less of it. */
  body[data-screen="screen-results"] #hill-container svg {
    height: 26vh;
  }

  /* No hill on the title screen, so the footer follows the content instead
     of being stranded at the bottom of a tall window. */
  .title-footer {
    margin-top: 0;
    padding-top: 56px;
  }

  #signup-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    max-width: 420px;
  }

  #signup-area input {
    max-width: 420px;
  }

  .prompt {
    font-size: 19px;
  }

  .reveal-text {
    font-size: 16px;
  }

  .share-block {
    align-self: flex-start;
  }
}

/* Title-screen splash on special days, tilted and pulsing like a game
   title's splash text. Yellow is one of the garden's flower colours, the
   only other place colour appears; the hard dark shadow keeps it readable
   on the pale screen. */
/* The + after the logo: only there for Uphill+ players. Gold with a hard
   pixel shadow and a glint now and then; a Supporter's cycles through the
   warm colours with sparkles either side. */
.logo-plus {
  display: none;
  position: relative;
  margin-left: 4px;
  color: #d9a31f;
  text-shadow: 2px 2px 0 var(--lit);
}

#logo.plus .logo-plus,
#logo.supporter .logo-plus {
  display: inline-block;
}

#logo.plus .logo-plus {
  animation: plus-glint 5s steps(1) infinite;
}

#logo.supporter .logo-plus {
  animation: supporter-glow 2.4s steps(1) infinite;
}

#logo.supporter .logo-plus::before,
#logo.supporter .logo-plus::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: #d9a31f;
  box-shadow: 0 -3px #e07b24, 0 3px #e07b24, -3px 0 #e07b24, 3px 0 #e07b24;
  animation: sparkle 1.6s steps(1) infinite;
}

#logo.supporter .logo-plus::before {
  top: 0;
  right: -10px;
}

#logo.supporter .logo-plus::after {
  bottom: 4px;
  right: -16px;
  animation-delay: 0.8s;
}

@keyframes plus-glint {
  0%, 88% { color: #d9a31f; }
  90% { color: #f2c94c; }
  93% { color: #fff3b0; }
  96% { color: #f2c94c; }
}

@keyframes supporter-glow {
  0% { color: #d9a31f; }
  17% { color: #f2c94c; }
  33% { color: #fff3b0; }
  50% { color: #f2c94c; }
  67% { color: #e07b24; }
  83% { color: #d4483b; }
}

@keyframes sparkle {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #logo .logo-plus,
  #logo .logo-plus::before,
  #logo .logo-plus::after {
    animation: none;
  }
}

.title-wrap {
  position: relative;
  display: inline-block;
  align-self: flex-start;
}

.special-splash {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  translate: 0 -50%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: #E3C64A;
  text-shadow: 2px 2px 0 var(--lit), -1px -1px 0 var(--lit), 1px -1px 0 var(--lit), -1px 1px 0 var(--lit);
  white-space: nowrap;
  transform: rotate(-14deg);
  transform-origin: center;
  animation: splash-pulse 0.9s ease-in-out infinite;
  pointer-events: none;
}

/* Halloween's splash goes pumpkin orange, the wardrobe's own pumpkin colour. */
.special-splash.halloween {
  color: #E07B24;
}

/* Narrow phones: the splash must still end inside the screen, pulse included. */
@media (max-width: 400px) {
  .special-splash {
    font-size: 13px;
    left: calc(100% + 10px);
  }
}

@keyframes splash-pulse {
  0%, 100% { transform: rotate(-14deg) scale(1); }
  50% { transform: rotate(-14deg) scale(1.12); }
}

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

/* Title: Hats and Uphill+ side by side. */
#title-row > button {
  width: 100%;
}

.title-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

/* Stats: him at the top, a grid of big numbers, a bar per score, a strip of
   the last fortnight. */
.stats-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.stats-hero .outfit-pic {
  width: 112px;
  height: 112px;
}

#stats-body,
#stats-signin {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#stats-body.hidden,
#stats-signin.hidden {
  display: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stat {
  border: 2px solid var(--ghost);
  padding: 10px 8px 8px;
  text-align: center;
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--lit);
}

.stat span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--secondary);
}

.stats-chart {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 3px;
  align-items: end;
  height: 96px;
}

.stats-chart div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.stats-chart i {
  display: block;
  background: var(--lit);
  min-height: 2px;
}

.stats-chart i.empty {
  background: var(--ghost);
}

.stats-chart span {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 10px;
  text-align: center;
  color: var(--secondary);
}

.stats-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.stats-days span {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ghost);
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--secondary);
}

.stats-days span.played {
  background: var(--lit);
  border-color: var(--lit);
  color: var(--screen);
}

.stats-days span.perfect {
  background: var(--secondary);
  border-color: var(--secondary);
}

.stats-days span.today {
  border-style: dashed;
  border-color: var(--lit);
}

#plus-buy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#plus-buy button {
  width: 100%;
}

.plus-list {
  margin: 0;
  padding-left: 1.2em;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--lit);
}

/* Wardrobe: the outfit on top, a tab per slot, a grid of cards. Locked
   ones are faded. */
.wardrobe-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.outfit-pic {
  width: 84px;
  height: 84px;
}

.wardrobe-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wardrobe-tabs button {
  flex: 1 1 auto;
  padding: 6px 8px;
  min-width: 0;
  font-size: 12px;
}

.wardrobe-tabs button.active {
  background: var(--lit);
  color: var(--screen);
}

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

.item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
}

/* What a tapped item needs: pinned to the bottom so it's seen wherever the
   grid is scrolled to. */
.wardrobe-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--screen);
  border-top: 2px solid var(--lit);
  box-shadow: 0 -4px 0 rgba(35, 38, 28, 0.12);
  z-index: 20;
}

.wardrobe-sheet p {
  margin: 0;
  text-align: center;
}

.wardrobe-sheet button:not(.link-btn) {
  width: 100%;
}

.item-card .item-state {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lit);
}

.item-card.locked .item-pic,
.item-card.locked .title-tag {
  opacity: 0.3;
}

.item-card.worn {
  border-width: 3px;
}

.item-pic {
  width: 56px;
  height: 56px;
}

.item-name {
  font-family: var(--font-display);
  font-size: 12px;
}

.item-how {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.3;
  color: var(--secondary);
}

.item-news {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-news .item-pic,
.item-news .title-tag {
  flex: none;
}

/* The count and, when one's worn, the title beside it. */
.bar-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* A worn title in the top bar: outlined and small, so it's there without
   shouting. */
.bar-title {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  border: 1px solid currentColor;
  padding: 1px 4px;
  line-height: 1.2;
}

/* A title: a small inverted badge. */
.title-tag {
  display: inline-block;
  margin: 0;
  padding: 2px 8px;
  background: var(--lit);
  color: var(--screen);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* In a card the title is the picture, so it has to fit the card. */
.item-card .title-tag {
  max-width: 100%;
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 2px 4px;
  margin: 4px 0;
  overflow: hidden;
}

/* Small text links under the title and on About. */
.footer-links {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--secondary);
  text-align: center;
}

.footer-links a,
.link-btn {
  color: inherit;
  text-decoration: underline;
}

/* A button that reads as a link: no box, no caps. */
button.link-btn {
  display: inline;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.plus-hint {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--secondary);
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--lit);
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feedback-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--font-body);
  font-size: 14px;
}

.feedback-form textarea {
  font: inherit;
  font-size: 15px;
  padding: 8px;
  border: 2px solid var(--lit);
  background: var(--screen);
  color: var(--lit);
  resize: vertical;
}

/* The bot trap: off screen for people, still there for form-filling bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

/* Privacy and terms: plain reading pages. */
body.legal main {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

body.legal h1 {
  font-family: var(--font-display);
}

body.legal h2 {
  font-family: var(--font-display);
  font-size: 16px;
  margin-top: 12px;
}

body.legal ul {
  padding-left: 1.2em;
}

body.legal a {
  color: var(--lit);
}

.feedback-kinds input {
  accent-color: var(--lit);
}

/* A beer mat question can run over lines (1, 11, 21, ...). */
#scan-question {
  white-space: pre-line;
}

/* Coming Sunday: the new buttons, shown locked. Dashed and faded so they
   read as not yet, with the day on them. */
.teaser {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.teaser-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

button.locked {
  border-style: dashed;
  color: var(--secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

button.locked:active {
  background: var(--screen);
  color: var(--lit);
}

.lock-day {
  font-size: 10px;
  letter-spacing: 0.1em;
}

.teaser-row button {
  min-width: 0 !important;
}

/* Locked buttons don't light up: nothing's behind them yet. */
@media (hover: hover) and (pointer: fine) {
  button.locked:hover:not(:disabled) {
    background: var(--screen);
    color: var(--lit);
  }
}


/* Signed in as / Sign in, and the email form it opens, under the menu. */
#account-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}