:root {
  --night: #0b1530;
  --night-light: #1d3266;
  --red: #d62839;
  --red-dark: #7a0f1b;
  --gold: #f2b134;
  --gold-dark: #8a5a00;
  --green: #2a7a3b;
  --blue: #3b8fd9;
  --paper: #fdf6e3;
  --ink: #3a1d0f;
  --white: #ffffff;
  --pixel-font: 'Press Start 2P', ui-monospace, monospace;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(var(--night) 40%, var(--night-light));
  color: var(--white);
  font-family: var(--pixel-font);
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

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

/* Stops double-tap zoom on fast taps. Pinch zoom still works. */
button,
select,
.glass,
.gender-filter label {
  touch-action: manipulation;
}

.page-snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --- Flying Santa ----------------------------------------------------------- */

.santa {
  --santa-width: clamp(140px, 30vw, 220px);
  position: fixed;
  left: 0;
  width: var(--santa-width);
  pointer-events: none;
  z-index: 0;
  visibility: hidden;
}

.santa svg {
  display: block;
  width: 100%;
  animation: bob 0.8s ease-in-out infinite alternate;
}

.santa.flying {
  visibility: visible;
  animation: fly-across 9s linear;
}

@keyframes fly-across {
  from { transform: translateX(calc(-1 * var(--santa-width))); }
  to { transform: translateX(100vw); }
}

@keyframes bob {
  from { transform: translateY(-4px); }
  to { transform: translateY(4px); }
}

.top-bar,
main {
  position: relative;
  z-index: 1;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px 0;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

h1 {
  margin: 8px 0 12px;
  font-size: clamp(18px, 6vw, 28px);
  line-height: 1.5;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--red-dark);
}

h2 {
  font-size: 16px;
  color: var(--gold);
}

.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 0;
  font-size: 10px;
}

.intro,
.hint {
  font-size: 11px;
  margin: 8px auto 16px;
  max-width: 40ch;
}

.hint {
  opacity: 0.7;
  margin-top: 4px;
}

/* --- Buttons --------------------------------------------------------------- */

.pixel-button {
  background: var(--red);
  border: 3px solid var(--white);
  padding: 12px 16px;
  font-size: 11px;
  box-shadow: 0 4px 0 var(--red-dark);
}

/* 44px is the smallest comfortable touch target */
.pixel-button.small {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 10px;
}

.pixel-button.music-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

.music-note {
  display: inline-block;
  position: relative;
  font-size: 28px;
  line-height: 1;
}

.music-button[aria-pressed="true"] .music-note {
  animation: note-dance 0.6s steps(2) infinite alternate;
}

.music-button[aria-pressed="false"] .music-note::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 3px;
  margin-top: -1px;
  background: var(--white);
  /* A red edge keeps the note shape clear where the line crosses it. */
  box-shadow: 0 0 0 2px var(--red);
  transform: rotate(-45deg);
}

@keyframes note-dance {
  from { transform: translateY(1px) rotate(-12deg); }
  to { transform: translateY(-3px) rotate(12deg); }
}

.pixel-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--red-dark);
}

.pixel-button:focus-visible,
.hanging-tag:focus-visible .tag-body,
.gender-filter input:focus-visible + span,
.year-filter select:focus-visible,
.link-button:focus-visible {
  outline: 3px dashed var(--gold);
  outline-offset: 3px;
}

/* --- Filters -------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 16px;
  font-size: 10px;
}

.gender-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Hidden, but screen readers still read them */
.gender-filter legend,
.gender-filter input,
.year-filter span {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gender-filter label span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 10px;
  border: 3px solid var(--white);
  background: var(--night-light);
  cursor: pointer;
}

.gender-filter input:checked + span {
  background: var(--gold);
  color: var(--ink);
}

/* Stretch to the height of the girl/boy buttons */
.year-filter {
  display: flex;
  align-self: stretch;
}

/* Below 16px, iOS Safari zooms the page when the select gets focus. */
.year-filter select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 6px 28px 6px 10px;
  font: inherit;
  font-size: 16px;
  color: var(--white);
  background: var(--night-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='white'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 3px solid var(--white);
  border-radius: 0;
}

/* --- Snow globe ------------------------------------------------------------ */

.globe {
  width: min(100%, 480px);
  margin: 0 auto;
}

.glass {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #2c4f94, #0f2347 70%);
  border: 6px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), 0 0 40px rgba(120, 170, 255, 0.35);
  cursor: pointer;
}

#tree-art,
.globe-snow,
.tree-tags,
.shine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tree {
  display: block;
  width: 100%;
  height: 100%;
}

.globe-snow,
.shine {
  pointer-events: none;
}

.shine {
  background: radial-gradient(ellipse 30% 18% at 30% 18%, rgba(255, 255, 255, 0.35), transparent 70%);
}

.light {
  animation: blink 1.2s steps(1) infinite;
}

.light-1 {
  animation-delay: 0.4s;
}

.light-2 {
  animation-delay: 0.8s;
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

.base {
  position: relative;
  width: 78%;
  height: 64px;
  margin: -14px auto 0;
  background: linear-gradient(#8a5a2e, #5a3418);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.plate {
  background: var(--gold);
  color: var(--ink);
  font-size: 9px;
  padding: 4px 8px;
  border: 2px solid var(--gold-dark);
  /* Side margin keeps the plate inside the sloped base; on small phones the text wraps. */
  margin: 8px 16px 0;
}

.shaking {
  animation: shake 0.5s;
}

@keyframes shake {
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
}

/* The elf hides behind the left side of the tree. It is first in .glass, so the tree paints on top. */
.elf {
  position: absolute;
  left: 40%;
  top: 40%;
  width: 18%;
  pointer-events: none;
  visibility: hidden;
}

.elf svg {
  display: block;
  width: 100%;
}

.elf.popping {
  visibility: visible;
  animation: elf-pop 1.6s steps(3);
}

@keyframes elf-pop {
  0%, 100% { transform: translateX(0); }
  15%, 80% { transform: translateX(-150%); }
  30% { transform: translateX(-150%) rotate(-8deg); }
  45% { transform: translateX(-150%) rotate(8deg); }
  60% { transform: translateX(-150%) rotate(-8deg); }
}

/* No movement: the elf is out for the same time, then goes back behind the tree. */
@keyframes elf-peek {
  0%, 100% { transform: translateX(-150%); }
}

/* --- Hanging tags ---------------------------------------------------------- */

.hanging-tag {
  --tag-width: clamp(30px, 8vw, 40px);
  --tag-height: calc(var(--tag-width) * 1.25);
  position: absolute;
  width: var(--tag-width);
  margin-left: calc(var(--tag-width) / -2);
  padding: 8px 0 0;
  background: none;
  border: 0;
  transform-origin: top center;
  animation: swing 3s ease-in-out infinite alternate;
}

/* String */
.hanging-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 10px;
  background: var(--gold);
}

.tag-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--tag-height);
  padding-top: 6px;
  font-size: 14px;
  line-height: 1;
  background: var(--red);
  color: var(--white);
  clip-path: polygon(25% 0, 75% 0, 100% 22%, 100% 100%, 0 100%, 0 22%);
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.25);
}

/* Hole */
.tag-body::before {
  content: '';
  position: absolute;
  top: 4px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  background: var(--night);
}

.hanging-tag.gold .tag-body {
  background: var(--gold);
  color: var(--ink);
}

.hanging-tag.blue .tag-body {
  background: var(--blue);
}

.hanging-tag.white .tag-body {
  background: var(--paper);
  color: var(--red);
}

.hanging-tag:focus-visible .tag-body {
  filter: brightness(1.2);
}

/* Touch screens keep :hover after a tap, so only use it where a pointer can hover. */
@media (hover: hover) {
  .hanging-tag:hover .tag-body {
    filter: brightness(1.2);
  }

  .hanging-tag:hover {
    animation-duration: 0.4s !important;
  }
}

.hanging-tag.taken {
  opacity: 0.25;
  cursor: default;
}

@keyframes swing {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}

/* --- Picked tag card ------------------------------------------------------- */

.tag-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px;
  background: rgba(5, 10, 25, 0.75);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tag-overlay[hidden] {
  display: none;
}

.tag-card {
  position: relative;
  width: min(100%, 380px);
  padding: 40px 20px 20px;
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--red);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  clip-path: polygon(20% 0, 80% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
}

.tag-hole {
  position: absolute;
  top: 14px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--night);
  border: 3px solid var(--gold);
}

.tag-heading {
  margin: 0 0 12px;
  color: var(--red);
  font-size: 11px;
}

.tag-text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
}

.tag-next {
  font-size: 11px;
  line-height: 1.8;
  margin: 0 0 12px;
}

.tag-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.tag-actions .pixel-button {
  color: var(--white);
}

/* --- My tags dialog ----------------------------------------------------------- */

dialog {
  width: min(100% - 32px, 480px);
  background: var(--night);
  color: var(--white);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border: 4px solid var(--gold);
  font-size: 11px;
}

dialog::backdrop {
  background: rgba(5, 10, 25, 0.75);
}

#my-tags-list {
  list-style: none;
  padding: 0;
  text-align: left;
}

#my-tags-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.2);
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  min-height: 44px;
  text-decoration: underline;
  font-size: 10px;
  line-height: 1.8;
}

/* --- Short screens ------------------------------------------------------- */

/* Less space above the globe, so more of the tree shows on the first screen. */
@media (max-height: 740px) {
  .top-bar {
    padding-top: 8px;
  }

  .partner img {
    width: auto;
    height: 28px;
  }

  h1 {
    margin: 4px 0 8px;
    font-size: clamp(16px, 5.5vw, 24px);
  }

  .intro {
    margin: 4px auto 10px;
  }

  .filters {
    margin-bottom: 10px;
  }
}

/* --- Motion and print ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hanging-tag,
  .light,
  .music-note,
  .shaking {
    animation: none;
  }

  .elf.popping {
    animation-name: elf-peek;
    animation-timing-function: linear;
  }
}

@media print {
  body {
    background: none;
  }

  body > :not(.tag-overlay) {
    display: none;
  }

  .tag-overlay {
    position: static;
    background: none;
  }

  .tag-actions {
    display: none;
  }
}