:root {
  --ink: #2f1b1e;
  --muted: #7a555d;
  --surface: rgba(255, 252, 249, 0.76);
  --surface-strong: rgba(255, 248, 244, 0.95);
  --surface-soft: rgba(255, 252, 247, 0.55);
  --line: rgba(74, 33, 39, 0.18);
  --accent: #c84762;
  --accent-dark: #9a2b46;
  --shadow: 0 24px 60px rgba(98, 20, 40, 0.22);
  --bg-layer-1: radial-gradient(circle at 8% 4%, #ffe9c5 0%, rgba(255, 233, 197, 0) 32%);
  --bg-layer-2: radial-gradient(circle at 90% 10%, #ffd5d8 0%, rgba(255, 213, 216, 0) 28%);
  --bg-layer-3: linear-gradient(130deg, #fff8ef 0%, #ffe8e8 45%, #ffe6d1 100%);
  --btn-subtle-bg: #fff8f6;
  --tile-border: rgba(105, 32, 47, 0.3);
  --tile-bg: #fff8f5;
  --section-blur: 4px;
  --heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M256 448l-22.6-20.4C130 334.6 64 274.2 64 198 64 135 113 86 176 86c35.9 0 70.4 16.7 92 43.4C289.6 102.7 324.1 86 360 86c63 0 112 49 112 112 0 76.2-66 136.6-169.4 229.6L280 448c-6.8 6.1-17.2 6.1-24 0z'/%3E%3C/svg%3E");
}

body.theme-black {
  --ink: #ece9ef;
  --muted: #b8b5c0;
  --surface: rgba(20, 21, 25, 0.76);
  --surface-strong: rgba(24, 25, 30, 0.94);
  --surface-soft: rgba(16, 17, 22, 0.6);
  --line: rgba(188, 186, 200, 0.22);
  --accent: #d5d3dd;
  --accent-dark: #a3a5b1;
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.45);
  --bg-layer-1: radial-gradient(circle at 5% 6%, rgba(148, 153, 167, 0.22) 0%, rgba(148, 153, 167, 0) 40%);
  --bg-layer-2: radial-gradient(circle at 90% 12%, rgba(94, 99, 115, 0.32) 0%, rgba(94, 99, 115, 0) 35%);
  --bg-layer-3: linear-gradient(145deg, #090a0d 0%, #15161c 45%, #20222c 100%);
  --btn-subtle-bg: #23242c;
  --tile-border: rgba(201, 203, 215, 0.3);
  --tile-bg: #111217;
  --section-blur: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "DM Sans", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background: var(--bg-layer-1), var(--bg-layer-2), var(--bg-layer-3);
  overflow-x: hidden;
}

.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.shape {
  position: absolute;
  border-radius: 999px;
  filter: blur(1px);
  opacity: 0.75;
}

.shape-a {
  width: 22rem;
  height: 22rem;
  top: -8rem;
  left: -4rem;
  background: linear-gradient(130deg, rgba(255, 199, 175, 0.8), rgba(255, 153, 154, 0.5));
  animation: driftA 18s ease-in-out infinite;
}

.shape-b {
  width: 28rem;
  height: 28rem;
  right: -12rem;
  bottom: -10rem;
  background: linear-gradient(180deg, rgba(241, 127, 145, 0.58), rgba(255, 208, 163, 0.48));
  animation: driftB 22s ease-in-out infinite;
}

.shape-c {
  width: 14rem;
  height: 14rem;
  top: 40%;
  left: 52%;
  background: linear-gradient(180deg, rgba(255, 234, 197, 0.95), rgba(255, 199, 222, 0.45));
  animation: driftC 12s ease-in-out infinite;
}

body.theme-black .shape-a {
  background: linear-gradient(130deg, rgba(132, 137, 153, 0.4), rgba(68, 72, 85, 0.25));
}

body.theme-black .shape-b {
  background: linear-gradient(180deg, rgba(87, 92, 108, 0.45), rgba(145, 151, 171, 0.2));
}

body.theme-black .shape-c {
  background: linear-gradient(180deg, rgba(178, 183, 201, 0.3), rgba(79, 86, 107, 0.2));
}

.hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hearts-back {
  z-index: 1;
}

.hearts-front {
  z-index: 3;
}

.heart {
  position: absolute;
  width: 0.72rem;
  height: 0.72rem;
  background: rgba(200, 71, 98, 0.35);
  transform: rotate(calc(45deg + var(--heart-angle, 0deg)));
  border-radius: 0.12rem;
  filter: drop-shadow(0 0 10px rgba(200, 71, 98, 0.32));
  animation: heartFloat linear infinite;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
}

.heart::before {
  left: -50%;
  top: 0;
}

.heart::after {
  left: 0;
  top: -50%;
}

body.theme-black .heart {
  background: rgba(214, 214, 226, 0.34);
  filter: drop-shadow(0 0 10px rgba(211, 217, 233, 0.3));
}

.penguins {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.penguins-back {
  z-index: 1;
  pointer-events: none;
}

.penguins-front {
  z-index: 4;
  pointer-events: none;
}

.penguin-rewards {
  --rewards-offset-x: 0px;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  min-width: 13rem;
  display: grid;
  gap: 0.4rem;
  padding: 0.58rem 0.66rem;
  border: 1px solid rgba(120, 41, 61, 0.22);
  border-radius: 0.72rem;
  background: rgba(255, 251, 247, 0.72);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(88, 26, 43, 0.2);
  opacity: 0;
  transform: translate3d(var(--rewards-offset-x), 12px, 0);
  transition: opacity 240ms ease, transform 280ms cubic-bezier(0.2, 0.9, 0.25, 1);
  pointer-events: none;
}

.penguin-rewards.is-visible {
  opacity: 1;
  transform: translate3d(var(--rewards-offset-x), 0, 0);
  pointer-events: auto;
}

.penguin-rewards.is-collapsed {
  --rewards-offset-x: calc(100% + 0.9rem);
}

.penguin-rewards.is-visible.is-collapsed {
  pointer-events: none;
}

.penguin-dock-toggle {
  --dock-open-rise: 7.4rem;
  position: fixed;
  right: 0;
  bottom: 1.22rem;
  z-index: 11;
  border: 1px solid rgba(120, 41, 61, 0.24);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: rgba(255, 251, 247, 0.86);
  color: rgba(98, 33, 49, 0.95);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.56rem 0.76rem 0.56rem 0.62rem;
  box-shadow: 0 8px 20px rgba(88, 26, 43, 0.2);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(104%);
  transition: opacity 220ms ease, transform 240ms ease, background 180ms ease, color 180ms ease;
}

.penguin-dock-toggle.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.penguin-dock-toggle.is-open {
  background: rgba(255, 241, 244, 0.95);
  color: rgba(106, 29, 46, 0.95);
}

.penguin-dock-toggle.is-visible.is-open {
  transform: translate(0, calc(var(--dock-open-rise) * -1));
}

.penguin-dock-toggle:focus-visible {
  outline: 3px solid rgba(205, 76, 104, 0.46);
  outline-offset: 2px;
}

.penguin-score,
.kiss-count {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(104, 34, 52, 0.92);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kiss-count {
  color: rgba(92, 30, 45, 0.86);
}

.kiss-spend {
  border: 1px solid rgba(117, 39, 59, 0.26);
  background: linear-gradient(135deg, rgba(215, 88, 118, 0.26), rgba(250, 209, 178, 0.44));
  color: #581f2d;
  border-radius: 999px;
  padding: 0.5rem 0.72rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.kiss-spend:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(130, 42, 64, 0.25);
}

.kiss-spend:disabled {
  opacity: 0.55;
  cursor: default;
}

.kiss-spend:focus-visible {
  outline: 3px solid rgba(205, 76, 104, 0.46);
  outline-offset: 2px;
}

.penguin-pop {
  position: fixed;
  transform: translateX(-50%);
  color: rgba(104, 34, 52, 0.95);
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 0 4px 10px rgba(255, 237, 242, 0.75);
  pointer-events: none;
  animation: penguinPop 920ms ease forwards;
}

.caption-particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.caption-particle {
  position: absolute;
  padding: 0.26rem 0.52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(120, 41, 61, 0.18);
  color: rgba(106, 43, 58, 0.86);
  font-size: 0.73rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(3px);
  animation: captionFloat linear infinite;
}

body.theme-black .caption-particle {
  background: rgba(26, 28, 36, 0.45);
  border-color: rgba(206, 214, 232, 0.22);
  color: rgba(224, 229, 242, 0.84);
}

.penguin-floater {
  position: absolute;
  display: block;
  width: 88px;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  pointer-events: none;
  touch-action: manipulation;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transform: translate3d(0, 0, 0) scaleX(var(--penguin-flip, 1));
  opacity: var(--penguin-opacity-back, 0.28);
  filter: drop-shadow(0 8px 16px rgba(32, 8, 15, 0.3));
  transition: opacity 240ms ease;
}

.penguin-floater img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: penguinFloat var(--penguin-float-duration, 14s) ease-in-out infinite;
  animation-delay: var(--penguin-float-delay, 0s);
  will-change: transform;
}

.penguin-floater.is-front {
  pointer-events: auto;
  cursor: pointer;
  opacity: var(--penguin-opacity-front, 0.72);
}

.penguin-floater.is-back {
  pointer-events: none;
  opacity: var(--penguin-opacity-back, 0.28);
}

.penguin-floater:focus-visible {
  outline: 3px solid rgba(199, 72, 101, 0.55);
  outline-offset: 4px;
}

body.theme-black .penguin-floater {
  filter: drop-shadow(0 9px 18px rgba(0, 0, 0, 0.6));
}

body.theme-black .penguin-rewards {
  border-color: rgba(206, 214, 232, 0.28);
  background: rgba(20, 22, 29, 0.72);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.48);
}

body.theme-black .penguin-dock-toggle {
  border-color: rgba(208, 216, 236, 0.3);
  background: rgba(20, 22, 29, 0.84);
  color: rgba(234, 239, 250, 0.95);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

body.theme-black .penguin-dock-toggle.is-open {
  background: rgba(35, 38, 48, 0.95);
}

body.theme-black .penguin-score,
body.theme-black .kiss-count {
  color: rgba(229, 233, 244, 0.92);
}

body.theme-black .kiss-spend {
  border-color: rgba(208, 216, 236, 0.3);
  background: linear-gradient(130deg, rgba(216, 220, 232, 0.3), rgba(109, 115, 136, 0.42));
  color: #f0f2f8;
}

body.theme-black .kiss-spend:disabled {
  opacity: 0.5;
}

body.theme-black .penguin-pop {
  color: rgba(231, 236, 247, 0.98);
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

.gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(255, 244, 236, 0.58);
  backdrop-filter: blur(6px);
  z-index: 12;
  transition: opacity 450ms ease, visibility 450ms ease;
}

.gate.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.gate-card {
  width: min(34rem, 100%);
  padding: 2rem 1.5rem;
  border-radius: 1.3rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 260ms ease;
}

.gate-card.shake {
  animation: shake 420ms ease;
}

.eyebrow {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.step {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.gate-question {
  margin: 0.8rem 0 0;
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  line-height: 1.15;
}

.gate-note {
  margin: 0.9rem 0 0;
  color: var(--muted);
  min-height: 1.2rem;
}

.gate-password {
  margin-top: 1rem;
  display: grid;
  gap: 0.38rem;
  text-align: left;
}

.gate-password label {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.gate-password-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.66rem;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  font: inherit;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  padding: 0.6rem 0.68rem;
}

.gate-password-input:focus-visible {
  outline: 3px solid rgba(205, 76, 104, 0.44);
  outline-offset: 2px;
}

.gate-password-input::placeholder {
  color: rgba(122, 85, 93, 0.72);
}

.gate-password[hidden] {
  display: none;
}

.gate-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 0.7rem;
}

.btn {
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0.72rem 1.2rem;
  min-width: 6rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-main {
  background: linear-gradient(125deg, var(--accent) 0%, #de7184 100%);
  color: #fff;
  border-color: transparent;
}

body.theme-black .btn-main {
  background: linear-gradient(125deg, #9ca2b4 0%, #d2d5de 100%);
  color: #16181e;
}

body.theme-black .gate-password-input {
  background: rgba(20, 22, 29, 0.76);
  border-color: rgba(208, 216, 236, 0.28);
  color: #eef1f9;
}

body.theme-black .gate-password-input::placeholder {
  color: rgba(193, 199, 216, 0.72);
}

.btn-main:hover {
  box-shadow: 0 10px 24px rgba(151, 42, 66, 0.32);
}

.btn-subtle {
  background: var(--btn-subtle-bg);
  color: var(--ink);
}

.site {
  position: relative;
  z-index: 2;
  max-width: 82rem;
  margin: 0 auto;
  padding: 2.4rem 1.2rem 3.2rem;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 540ms ease, transform 540ms ease;
}

.site.is-visible {
  opacity: 1;
  transform: none;
}

.hero {
  text-align: center;
  padding: 0.4rem 0.2rem 0.5rem;
}

.hero h2 {
  margin: 0.15rem 0 0;
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero-sub {
  margin: 0.65rem auto 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.03rem;
}

.hero-controls {
  margin-top: 1rem;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.theme-toggle {
  border-radius: 999px;
  border: 1px solid rgba(145, 41, 66, 0.34);
  padding: 0.68rem 1.3rem;
  background: linear-gradient(135deg, rgba(215, 88, 118, 0.34), rgba(250, 209, 178, 0.52));
  color: #4d1523;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(130, 42, 64, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.theme-toggle:focus-visible {
  outline: 3px solid rgba(205, 76, 104, 0.5);
  outline-offset: 3px;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(130, 42, 64, 0.3);
}

body.theme-black .theme-toggle {
  border-color: rgba(216, 220, 232, 0.4);
  background: linear-gradient(130deg, rgba(216, 220, 232, 0.34), rgba(109, 115, 136, 0.44));
  color: #f6f8ff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.46);
}

body.theme-black .theme-toggle:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.music-controls {
  position: fixed;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 9;
  display: grid;
  gap: 0.45rem;
  justify-items: stretch;
  width: min(24rem, calc(100vw - 1.8rem));
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(120, 41, 61, 0.22);
  border-radius: 0.72rem;
  background: rgba(255, 251, 247, 0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(88, 26, 43, 0.2);
}

.transport {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
  justify-content: flex-start;
}

.transport-btn {
  border: 1px solid rgba(117, 39, 59, 0.28);
  background: rgba(255, 252, 249, 0.7);
  color: #5d2231;
  border-radius: 999px;
  padding: 0.5rem 0.78rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 3.8rem;
}

.transport-main {
  background: linear-gradient(135deg, rgba(215, 88, 118, 0.34), rgba(250, 209, 178, 0.52));
}

.queue-label {
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: auto;
}

.queue-select {
  border: 1px solid rgba(117, 39, 59, 0.22);
  background: rgba(255, 255, 255, 0.82);
  color: #612836;
  border-radius: 0.45rem;
  padding: 0.4rem 0.55rem;
  min-width: 10.5rem;
  flex: 1 1 10.5rem;
}

.now-playing {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.theme-black .transport-btn {
  border-color: rgba(208, 216, 236, 0.3);
  background: rgba(33, 35, 44, 0.8);
  color: #e8ebf6;
}

body.theme-black .music-controls {
  border-color: rgba(206, 214, 232, 0.24);
  background: rgba(16, 18, 24, 0.75);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.48);
}

body.theme-black .transport-main {
  background: linear-gradient(130deg, rgba(216, 220, 232, 0.34), rgba(109, 115, 136, 0.44));
}

body.theme-black .queue-select {
  border-color: rgba(208, 216, 236, 0.3);
  background: rgba(20, 22, 29, 0.9);
  color: #e8ebf6;
}

.collage-wrap {
  margin-top: 1.2rem;
  padding: 0 0 0.4rem;
}

.section-head h3 {
  margin: 0;
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.62rem;
}

.section-head p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.meta-line {
  font-size: 0.95rem;
}

.collage {
  margin-top: 1.2rem;
  columns: 3 17.4rem;
  column-gap: 1.1rem;
}

.tile {
  --tilt: 0deg;
  --tilt-sway: 0deg;
  --float-depth: 14px;
  --float-delay: 0s;
  --float-offset: 0px;
  --float-x: 0px;
  --tile-scale: 1;
  position: relative;
  margin: 0 0 1rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  font: inherit;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  -webkit-mask-image: var(--heart-mask);
  mask-image: var(--heart-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  box-shadow: none;
  filter: drop-shadow(0 12px 22px rgba(93, 25, 42, 0.24));
  transform: translate(var(--float-x), var(--float-offset)) rotate(var(--tilt)) scale(var(--tile-scale));
  break-inside: avoid;
  animation: bob 6.5s ease-in-out infinite;
  animation-delay: var(--float-delay);
  cursor: pointer;
  transition: transform 240ms ease, filter 240ms ease;
}

.tile:hover {
  animation-play-state: paused;
  transform: translate(var(--float-x), calc(var(--float-offset) - 12px)) rotate(var(--tilt))
    scale(calc(var(--tile-scale) + 0.03));
  filter: drop-shadow(0 16px 32px rgba(89, 23, 40, 0.34));
}

body.theme-black .tile {
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.5));
}

body.theme-black .tile:hover {
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.62));
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile.wide {
  aspect-ratio: 1.1 / 1;
}

.tile.tall {
  aspect-ratio: 0.88 / 1;
}

.tile.big {
  aspect-ratio: 1 / 1;
}

.tile.missing {
  display: grid;
  place-items: center;
  padding: 0.85rem;
  background:
    linear-gradient(140deg, rgba(255, 233, 213, 0.9), rgba(255, 208, 215, 0.88));
}

.tile.missing::after {
  display: none;
}

.tile:focus-visible {
  outline: 3px solid rgba(196, 58, 88, 0.52);
  outline-offset: 2px;
}

.tile-placeholder {
  text-align: center;
}

.tile-placeholder p {
  margin: 0;
  color: #6f3a46;
}

.tile-placeholder .file {
  margin-top: 0.45rem;
  font-size: 0.76rem;
  color: #7b4651;
}

.footer-note {
  margin: 1.9rem 0 0;
  text-align: center;
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: 1.05rem;
  color: #6f3a46;
}

.footer-note p {
  margin: 0.3rem 0;
}

body.theme-black .footer-note {
  color: #c8c3d0;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(27, 11, 16, 0.84);
  display: grid;
  place-items: center;
  padding: 1.1rem;
  touch-action: pan-y;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-close {
  position: absolute;
  top: 0.95rem;
  right: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.lightbox-image {
  width: min(92vw, 78rem);
  max-height: 84vh;
  object-fit: contain;
  border-radius: 0.8rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.lightbox-caption {
  margin: 0.7rem 0 0;
  color: rgba(255, 236, 244, 0.95);
  display: none;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}

@keyframes driftA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(16px, 10px) scale(1.05);
  }
}

@keyframes driftB {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-14px, -20px) scale(1.07);
  }
}

@keyframes driftC {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(10px, -10px) scale(0.95);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translate(var(--float-x), var(--float-offset)) rotate(var(--tilt)) scale(var(--tile-scale));
  }
  50% {
    transform: translate(calc(var(--float-x) * -1), calc(var(--float-offset) - var(--float-depth)))
      rotate(calc(var(--tilt) + var(--tilt-sway))) scale(var(--tile-scale));
  }
}

@keyframes heartFloat {
  0% {
    transform: translate(0, 0)
      rotate(calc(45deg + var(--heart-angle, 0deg) + var(--spin-start, 0deg))) scale(0.76);
    opacity: 0;
  }
  10% {
    opacity: 0.72;
  }
  22% {
    transform: translate(var(--drift-mid-x, 0px), -26vh)
      rotate(calc(45deg + var(--heart-angle, 0deg) + var(--spin-mid, 0deg)))
      scale(0.9);
    opacity: 0.9;
  }
  48% {
    transform: translate(calc(var(--drift-mid-x, 0px) * -0.55), -52vh)
      rotate(calc(45deg + var(--heart-angle, 0deg) + var(--spin-late, 0deg))) scale(1.08);
    opacity: 0.98;
  }
  74% {
    transform: translate(var(--drift-late-x, 0px), -84vh)
      rotate(calc(45deg + var(--heart-angle, 0deg) + var(--spin-end, 0deg))) scale(1.16);
    opacity: 0.88;
  }
  100% {
    transform: translate(var(--drift-end-x, 0px), -120vh)
      rotate(calc(45deg + var(--heart-angle, 0deg) + var(--spin-end, 0deg))) scale(1.22);
    opacity: 0;
  }
}

@keyframes penguinFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(var(--penguin-tilt-start, 0deg));
  }
  34% {
    transform: translate(var(--penguin-drift-x, 0px), var(--penguin-drift-y, -8px))
      rotate(var(--penguin-tilt-end, 2deg));
  }
  68% {
    transform: translate(calc(var(--penguin-drift-x, 0px) * -0.65), calc(var(--penguin-drift-y, -8px) * 0.6))
      rotate(calc(var(--penguin-tilt-start, 0deg) * -1));
  }
}

@keyframes captionFloat {
  0% {
    transform: translate(0, 0) rotate(-1deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--caption-drift-x, 0px), -120vh) rotate(1deg);
    opacity: 0;
  }
}

@keyframes walkerTapFlash {
  0%,
  100% {
    filter: var(--walker-shadow);
  }
  50% {
    filter: var(--walker-flash) brightness(1.08);
  }
}

@keyframes penguinPop {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(-50% + var(--pop-drift, 0px))) translateY(-42px);
    opacity: 0;
  }
}

@media (max-width: 60rem) {
  .site {
    padding-top: 2.1rem;
  }

  .transport {
    gap: 0.36rem;
  }

  .queue-select {
    min-width: 8.6rem;
  }

  .collage {
    columns: 2 15.5rem;
  }
}

@media (max-width: 42rem) {
  .gate-card {
    padding: 1.6rem 1rem;
  }

  .hero h2 {
    font-size: clamp(1.8rem, 10vw, 2.5rem);
  }

  .site {
    padding-bottom: 9rem;
  }

  .theme-toggle {
    width: 100%;
  }

  .music-controls {
    top: auto;
    left: 0.55rem;
    right: 0.55rem;
    bottom: calc(0.55rem + env(safe-area-inset-bottom));
    width: auto;
    border-radius: 0.92rem;
    padding: 0.65rem;
  }

  .penguin-rewards {
    right: 0.55rem;
    top: auto;
    bottom: calc(9.45rem + env(safe-area-inset-bottom));
    min-width: 10rem;
    max-width: calc(100vw - 1.1rem);
  }

  .penguin-dock-toggle {
    --dock-open-rise: 6.4rem;
    bottom: calc(10.08rem + env(safe-area-inset-bottom));
    font-size: 0.68rem;
    padding: 0.5rem 0.72rem 0.5rem 0.58rem;
  }

  .meta-line {
    display: grid;
    gap: 0.28rem;
  }

  .transport {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .queue-label,
  .queue-select {
    grid-column: span 3;
    justify-self: stretch;
  }

  .queue-label {
    margin-left: 0;
  }

  .queue-select {
    min-width: 0;
    width: 100%;
  }

  .collage {
    columns: 1;
    column-gap: 0;
  }

  .tile {
    animation: bob 16.8s ease-in-out infinite;
    animation-delay: calc(var(--float-delay) * 0.45);
    --float-depth: 8px;
    filter: drop-shadow(0 8px 14px rgba(77, 18, 35, 0.18));
  }

  .tile:nth-child(odd) {
    animation-duration: 18.4s;
  }

  .tile:hover {
    transform: translate(var(--float-x), calc(var(--float-offset) - 8px)) rotate(var(--tilt))
      scale(calc(var(--tile-scale) + 0.016));
    filter: drop-shadow(0 10px 16px rgba(82, 20, 37, 0.24));
  }

  .caption-particle {
    backdrop-filter: none;
  }

  .heart {
    filter: drop-shadow(0 0 7px rgba(200, 71, 98, 0.22));
  }

  .penguin-floater {
    filter: drop-shadow(0 4px 8px rgba(32, 8, 15, 0.2));
  }

  .lightbox-image {
    width: 94vw;
  }
}