@font-face {
  font-family: "Unbounded";
  src: url("assets/fonts/unbounded-cyrillic-800-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Unbounded";
  src: url("assets/fonts/unbounded-latin-800-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-cyrillic-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-cyrillic-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-cyrillic-800-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-latin-800-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-cyrillic-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0d1017;
  --ink-soft: #171c28;
  --blue: #4c6fff;
  --orange: #ff6b2c;
  --pink: #ff3d8d;
  --paper: #f8faff;
  --muted: #aeb8cf;
  --line: rgba(248, 250, 255, 0.16);
  --display: "Unbounded", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow: 10px 10px 0 rgba(0, 0, 0, 0.32);
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--blue) var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}

body::before {
  position: fixed;
  z-index: 100;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 5px;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  color: var(--ink);
  background: var(--paper);
  font-weight: 800;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.mono {
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.boot-screen {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ink);
  background: var(--blue);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.boot-screen.is-done {
  visibility: hidden;
  opacity: 0;
}

.boot-panel {
  width: min(760px, 100%);
  min-width: 0;
  max-width: 100%;
}

.boot-logo {
  display: grid;
  width: 88px;
  height: 88px;
  margin-bottom: 40px;
  place-items: center;
  border: 5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--paper);
  font-family: var(--display);
  font-size: 25px;
  transform: rotate(-4deg);
}

.boot-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.boot-panel h1 {
  margin: 0 0 38px;
  font-family: var(--display);
  font-size: clamp(38px, 7vw, 86px);
  line-height: 0.98;
  text-transform: uppercase;
}

.boot-track {
  height: 16px;
  border: 3px solid var(--ink);
}

.boot-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--paper);
}

.boot-log {
  margin-top: 12px;
  font-size: 11px;
}

#party-canvas {
  position: fixed;
  z-index: 800;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cursor-layer {
  position: fixed;
  z-index: 750;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cursor-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid var(--paper);
  animation: spark-out 0.7s ease-out forwards;
  transform: rotate(45deg);
}

@keyframes spark-out {
  to { opacity: 0; transform: translateY(25px) rotate(135deg) scale(0.25); }
}

.toast {
  position: fixed;
  z-index: 850;
  right: 18px;
  bottom: 18px;
  max-width: min(390px, calc(100vw - 36px));
  padding: 14px 18px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--pink);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.utility-button {
  border: 2px solid var(--line);
  background: rgba(13, 16, 23, 0.82);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.sound-toggle {
  position: fixed;
  z-index: 700;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
}

.sound-toggle[aria-pressed="true"] {
  color: var(--ink);
  background: var(--orange);
  border-color: var(--ink);
}

.sound-icon {
  font-size: 17px;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: 96px clamp(24px, 5vw, 76px) 58px;
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr);
  gap: clamp(45px, 8vw, 130px);
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 26%, rgba(76, 111, 255, 0.28), transparent 32%),
    radial-gradient(circle at 20% 110%, rgba(255, 61, 141, 0.18), transparent 35%),
    var(--ink);
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(248, 250, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 250, 255, 0.11) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.system-bar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(160px, 18vw, 260px) 16px clamp(24px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

.online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #58ff8c;
  box-shadow: 0 0 10px #58ff8c;
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
}

.hero-title {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
}

.hero-title span {
  display: block;
}

.hero-name {
  position: relative;
  width: max-content;
  max-width: 100%;
  color: var(--paper);
  font-size: clamp(60px, 10vw, 150px);
  line-height: 0.83;
  letter-spacing: -0.065em;
  text-shadow: 7px 7px 0 var(--blue);
}

.hero-name::before {
  position: absolute;
  top: 15%;
  left: 3px;
  width: 100%;
  height: 20%;
  overflow: hidden;
  color: var(--pink);
  content: attr(data-text);
  transform: translateX(-4px);
  clip-path: inset(0 0 0 0);
  opacity: 0;
}

.hero-level {
  width: max-content;
  margin-top: 21px;
  padding: 7px 12px 9px;
  color: var(--ink);
  background: var(--orange);
  font-size: clamp(27px, 4.8vw, 72px);
  line-height: 1;
  transform: rotate(-1.5deg);
}

.hero-unlocked {
  margin-top: 13px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: clamp(20px, 3vw, 43px);
  letter-spacing: 0.1em;
  line-height: 1;
}

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

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

.hero-lead {
  max-width: 650px;
  margin: 34px 0 0;
  color: #d8deeb;
  font-size: clamp(16px, 1.8vw, 21px);
}

.hero-actions {
  display: flex;
  margin-top: 32px;
  align-items: center;
  gap: 20px;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 56px;
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  box-shadow: 6px 6px 0 var(--blue);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.primary-button:hover,
.secondary-button:hover {
  box-shadow: 2px 2px 0 var(--pink);
  transform: translate(4px, 4px);
}

.hero-hint {
  color: #7f8aa3;
  font-size: 9px;
  line-height: 1.45;
}

.hero-visual {
  width: min(430px, 100%);
  justify-self: center;
  perspective: 1100px;
}

.portrait-shadow {
  position: absolute;
  inset: 10% -10% -5% 12%;
  background: var(--pink);
  clip-path: polygon(7% 0, 100% 4%, 92% 100%, 0 88%);
  transform: rotate(5deg);
}

.portrait-frame {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--paper);
  box-shadow: 16px 18px 0 rgba(0, 0, 0, 0.35);
  transform: rotate(2.5deg);
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
}

.window-bar {
  display: flex;
  height: 30px;
  padding: 0 9px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  font-size: 8px;
  font-weight: 700;
}

.portrait-frame img {
  width: 100%;
  max-height: 68svh;
  object-fit: cover;
  object-position: 50% 37%;
  filter: saturate(0.9) contrast(1.04);
}

.portrait-scan {
  position: absolute;
  inset: 30px 0 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 5px, rgba(13, 16, 23, 0.09) 5px 6px);
}

.level-sticker {
  position: absolute;
  right: -34px;
  bottom: 13%;
  display: grid;
  width: 114px;
  height: 114px;
  place-items: center;
  color: var(--ink);
  background: var(--orange);
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--paper);
  transform: rotate(9deg);
}

.level-sticker span {
  margin-bottom: -30px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.level-sticker strong {
  font-family: var(--display);
  font-size: 48px;
  line-height: 1;
}

.approved-stamp {
  position: absolute;
  bottom: -20px;
  left: -37px;
  padding: 11px 16px;
  color: var(--pink);
  border: 4px solid var(--pink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-8deg);
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: 18px;
  left: clamp(24px, 5vw, 76px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 9px;
}

.scroll-cue span {
  width: 42px;
  height: 1px;
  background: currentColor;
}

.section-shell {
  width: min(1420px, calc(100% - 48px));
  margin: 0 auto;
}

.archive {
  padding-top: 128px;
  padding-bottom: 80px;
}

.section-heading {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.55fr);
  gap: 60px;
}

.section-heading h2,
.stats-intro h2,
.danger-content h2,
.cake-heading h2,
.birthday-message h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 7.2vw, 108px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.section-heading h2 span {
  color: var(--blue);
}

.section-heading > p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 17px;
}

.archive-desk {
  position: relative;
  min-height: 2180px;
  margin-top: 90px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(76, 111, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(76, 111, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.archive-desk::before {
  position: absolute;
  top: 22px;
  right: 24px;
  color: #5b6477;
  content: "DRAG_FILES.exe";
  font-family: var(--mono);
  font-size: 10px;
}

.photo-window {
  position: absolute;
  z-index: 2;
  width: clamp(235px, 24vw, 350px);
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  touch-action: none;
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.photo-window:hover,
.photo-window:focus-within {
  z-index: 20;
  box-shadow: 14px 14px 0 var(--blue);
}

.photo-window.is-dragging {
  z-index: 60;
  box-shadow: 18px 18px 0 var(--pink);
  cursor: grabbing;
}

.drag-handle {
  cursor: grab;
  user-select: none;
}

.photo-open {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: #cbd2df;
  border: 0;
  cursor: zoom-in;
}

.photo-open img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.05);
  transition: filter 0.25s ease, transform 0.35s ease;
}

.photo-window:hover img,
.photo-window:focus-within img {
  filter: saturate(1.08) contrast(1);
  transform: scale(1.025);
}

.photo-window p {
  min-height: 78px;
  margin: 0;
  padding: 14px 16px 16px;
  font-size: 14px;
  line-height: 1.3;
}

.photo-window p strong {
  font-weight: 800;
}

.photo-01 { top: 90px; left: 5%; --card-transform: rotate(-3deg); }
.photo-02 { top: 40px; right: 8%; --card-transform: rotate(2deg); }
.photo-03 { top: 430px; left: 37%; --card-transform: rotate(3.5deg); }
.photo-04 { top: 650px; left: 3%; --card-transform: rotate(2deg); }
.photo-05 { top: 740px; right: 5%; --card-transform: rotate(-4deg); }
.photo-06 { top: 1040px; left: 31%; --card-transform: rotate(-1deg); }
.photo-07 { top: 1350px; left: 3%; --card-transform: rotate(-2.5deg); }
.photo-08 { top: 1410px; right: 4%; --card-transform: rotate(3deg); }
.photo-09 { top: 1690px; left: 36%; --card-transform: rotate(1deg); }
.photo-10 { top: 1800px; right: 8%; --card-transform: rotate(-3deg); }

.stats {
  display: grid;
  padding-top: 130px;
  padding-bottom: 150px;
  align-items: start;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1fr);
  gap: clamp(44px, 6vw, 96px);
}

.section-heading > *,
.stats > *,
.cake-heading > * {
  min-width: 0;
}

.stats-intro {
  position: sticky;
  top: 110px;
}

.stats-intro h2 {
  max-width: 100%;
  font-size: clamp(36px, 3.6vw, 56px);
}

.stats-intro > p:last-child {
  max-width: 460px;
  color: var(--muted);
}

.stats-board {
  width: 100%;
  min-width: 0;
  padding: clamp(26px, 4vw, 50px);
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--blue);
  box-shadow: 16px 16px 0 var(--pink);
}

.stat-row + .stat-row {
  margin-top: 38px;
}

.stat-label {
  display: flex;
  margin-bottom: 9px;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.stat-label span {
  font-weight: 800;
}

.stat-label strong {
  font-size: 12px;
}

.stat-track {
  position: relative;
  height: 15px;
  overflow: visible;
  border: 2px solid var(--ink);
  background: #dce1ea;
}

.stat-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--blue);
  transition: width 1.1s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.stats-board.is-active .stat-row .stat-track span {
  width: min(calc(var(--value) * 1%), 100%);
}

.stat-row small {
  display: block;
  margin-top: 6px;
  color: #596176;
  font-size: 8px;
}

.stat-row.overpowered .stat-track span {
  position: relative;
  background: var(--pink);
}

.stat-row.calmness .stat-track span {
  background: var(--orange);
}

.stat-row.calmness .stat-label strong,
.stat-row.calmness small {
  color: #c74718;
}

.stat-row.overpowered .stat-track span::after {
  position: absolute;
  top: -7px;
  right: -28px;
  width: 34px;
  height: 25px;
  background: var(--pink);
  content: "";
  clip-path: polygon(0 35%, 38% 35%, 55% 0, 70% 35%, 100% 35%, 80% 60%, 92% 100%, 55% 75%, 25% 100%, 32% 62%);
}

.runaway-button {
  justify-self: start;
  align-self: end;
  padding: 12px 17px;
  color: var(--muted);
  background: transparent;
  border: 1px dashed #68728a;
  font-size: 9px;
  cursor: pointer;
  transition: transform 0.18s ease, color 0.18s ease;
}

.danger-zone {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--orange);
}

.danger-tape {
  width: 120%;
  margin-left: -10%;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  border-block: 2px solid var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(-1.2deg);
}

.danger-tape span {
  display: block;
  width: max-content;
  padding: 9px 0;
  animation: tape-move 12s linear infinite;
}

.danger-tape-bottom {
  transform: rotate(1.2deg);
}

.danger-tape-bottom span {
  animation-direction: reverse;
}

@keyframes tape-move { to { transform: translateX(-30%); } }

.danger-content {
  display: flex;
  min-height: 880px;
  padding-top: 120px;
  padding-bottom: 120px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.danger-content .eyebrow {
  color: var(--ink);
}

.danger-content h2 {
  font-size: clamp(52px, 9vw, 138px);
}

.danger-content h2 span {
  -webkit-text-stroke: 3px var(--ink);
  color: transparent;
}

.danger-copy {
  max-width: 570px;
  margin: 30px auto 0;
  font-size: 18px;
  font-weight: 700;
}

.danger-button {
  position: relative;
  display: flex;
  width: min(430px, 100%);
  min-height: 138px;
  margin-top: 55px;
  padding: 24px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: var(--paper);
  background: var(--pink);
  border: 6px solid var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.danger-button:hover {
  box-shadow: 7px 7px 0 var(--ink);
  transform: translate(7px, 7px) rotate(-1deg);
}

.danger-button-label {
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 39px);
}

.danger-button-sub {
  margin-top: 8px;
  font-size: 8px;
}

.danger-button:disabled {
  cursor: wait;
  filter: grayscale(0.5);
}

.combo-readout {
  display: none;
  margin-top: 50px;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  font-weight: 700;
}

.combo-readout strong {
  display: grid;
  width: 90px;
  height: 90px;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--display);
  font-size: 38px;
}

.combo-readout.is-active {
  display: flex;
}

.combo-complete {
  margin-top: 44px;
}

.combo-complete p {
  font-size: 11px;
  font-weight: 700;
}

.combo-complete .primary-button {
  margin-top: 8px;
  box-shadow: 7px 7px 0 var(--pink);
}

.party-mode .hero-name::before {
  opacity: 0.9;
  animation: glitch-slice 0.32s steps(2) infinite;
}

.party-mode .photo-window {
  animation: card-rumble 0.28s ease-in-out infinite alternate;
}

.party-mode .danger-zone {
  animation: danger-flash 0.45s steps(2) infinite;
}

.party-mode .sound-toggle {
  animation: button-spin 1s ease-in-out infinite alternate;
}

@keyframes glitch-slice {
  0% { clip-path: inset(6% 0 65% 0); transform: translate(8px, -2px); }
  50% { clip-path: inset(48% 0 30% 0); transform: translate(-6px, 2px); }
  100% { clip-path: inset(78% 0 4% 0); transform: translate(4px, -1px); }
}

@keyframes card-rumble {
  to { margin-top: -4px; margin-left: 3px; }
}

@keyframes danger-flash {
  50% { background: var(--blue); }
}

@keyframes button-spin {
  to { transform: rotate(3deg); }
}

.floating-message {
  position: fixed;
  z-index: 810;
  max-width: calc(100vw - 30px);
  padding: 14px 18px;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--pink);
  font-family: var(--mono);
  font-size: clamp(11px, 2vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  animation: message-pop 1.8s ease forwards;
  pointer-events: none;
}

@keyframes message-pop {
  0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  15%, 75% { opacity: 1; transform: scale(1) rotate(1deg); }
  100% { opacity: 0; transform: scale(0.85) translateY(-30px); }
}

.cake-zone {
  position: relative;
  padding-top: 150px;
  padding-bottom: 160px;
}

.cake-zone::before {
  position: absolute;
  z-index: -1;
  top: 12%;
  right: -20vw;
  width: 55vw;
  height: 55vw;
  border: 1px solid rgba(76, 111, 255, 0.26);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(76, 111, 255, 0.03), 0 0 0 160px rgba(76, 111, 255, 0.025);
  content: "";
}

.cake-heading {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
  gap: 50px;
}

.cake-heading .eyebrow,
.cake-heading h2 {
  grid-column: 1;
}

.cake-heading h2 {
  font-size: clamp(47px, 7vw, 104px);
}

.cake-heading > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 17px;
}

.cake-stage {
  position: relative;
  display: flex;
  min-height: 610px;
  margin-top: 95px;
  padding: 80px 30px 40px;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 107, 44, 0.15), transparent 30%),
    linear-gradient(rgba(248, 250, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 250, 255, 0.035) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}

.cake-counter {
  position: absolute;
  top: 24px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 9px;
}

.cake-counter strong {
  color: var(--orange);
  font-family: var(--display);
  font-size: 31px;
}

.candles {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(650px, 90%);
  margin-bottom: -10px;
  align-items: end;
  grid-template-columns: repeat(14, 1fr);
  gap: clamp(2px, 0.8vw, 9px);
}

.candle {
  position: relative;
  width: clamp(10px, 1.4vw, 17px);
  height: clamp(58px, 7vw, 86px);
  padding: 0;
  justify-self: center;
  background: repeating-linear-gradient(145deg, var(--paper) 0 7px, var(--blue) 7px 14px);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.candle:nth-child(3n) { height: clamp(68px, 8vw, 100px); }
.candle:nth-child(4n) { background: repeating-linear-gradient(145deg, var(--paper) 0 7px, var(--pink) 7px 14px); }
.candle:nth-child(5n) { background: repeating-linear-gradient(145deg, var(--paper) 0 7px, var(--orange) 7px 14px); }

.candle:hover {
  transform: translateY(-5px);
}

.flame {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  width: 16px;
  height: 27px;
  border-radius: 50% 50% 45% 45%;
  background: var(--orange);
  box-shadow: 0 0 15px var(--orange), 0 0 34px rgba(255, 107, 44, 0.68);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: flame-dance 0.5s ease-in-out infinite alternate;
}

.flame::after {
  position: absolute;
  right: 4px;
  bottom: 2px;
  left: 4px;
  height: 14px;
  border-radius: 50%;
  background: #fff29d;
  content: "";
}

@keyframes flame-dance {
  to { transform: translateX(-50%) rotate(5deg) scaleY(0.88); }
}

.candle.is-out {
  filter: grayscale(1) brightness(0.5);
  cursor: default;
}

.candle.is-out .flame {
  opacity: 0;
  transform: translate(-50%, -15px) scale(0);
}

.cake {
  position: relative;
  z-index: 2;
  width: min(720px, 92%);
  height: 300px;
  filter: drop-shadow(0 30px 32px rgba(0, 0, 0, 0.36));
}

.cake-top,
.cake-middle,
.cake-bottom,
.cake-plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.cake-top {
  z-index: 4;
  top: 0;
  width: 86%;
  height: 76px;
  border-radius: 50%;
  background: var(--paper);
  border: 5px solid var(--ink);
}

.cake-middle {
  z-index: 3;
  top: 36px;
  display: grid;
  width: 86%;
  height: 162px;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background: var(--orange);
  border: 5px solid var(--ink);
  border-top: 0;
}

.cake-middle::before,
.cake-middle::after {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 18px solid var(--pink);
  border-radius: 50%;
  content: "";
}

.cake-middle::before { left: -55px; }
.cake-middle::after { right: -55px; }

.cake-middle > span {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: 86px;
  line-height: 1;
  text-shadow: 4px 4px 0 var(--paper);
  transform: rotate(-4deg);
}

.cake-bottom {
  z-index: 2;
  top: 164px;
  width: 86%;
  height: 72px;
  border-radius: 50%;
  background: #c94d22;
  border: 5px solid var(--ink);
}

.cake-plate {
  z-index: 1;
  top: 205px;
  width: 100%;
  height: 65px;
  border-radius: 50%;
  background: var(--blue);
  border: 5px solid var(--ink);
}

.frosting-drop {
  position: absolute;
  z-index: 5;
  top: 44px;
  width: 28px;
  height: 54px;
  border-radius: 0 0 50% 50%;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-top: 0;
}

.drop-1 { left: 17%; }
.drop-2 { left: 54%; height: 72px; }
.drop-3 { right: 18%; height: 45px; }

.cake-stage.is-complete .cake {
  animation: cake-win 0.7s cubic-bezier(0.2, 1.5, 0.5, 1);
}

@keyframes cake-win {
  40% { transform: scale(1.08) rotate(-2deg); }
  70% { transform: scale(0.97) rotate(1deg); }
}

.birthday-message {
  margin-top: 80px;
  padding: clamp(30px, 6vw, 80px);
  color: var(--ink);
  background: var(--paper);
  border: 6px solid var(--blue);
  box-shadow: 18px 18px 0 var(--pink);
}

.message-kicker {
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.birthday-message h2 {
  max-width: 960px;
  font-size: clamp(38px, 5.2vw, 76px);
  text-wrap: balance;
}

.birthday-message > p:not(.message-kicker, .message-sign) {
  max-width: 920px;
  margin: 34px 0 0;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.55;
}

.message-sign {
  margin: 34px 0;
  color: #4c5365;
  font-weight: 800;
}

.message-sign span {
  color: var(--pink);
}

.secondary-button {
  color: var(--paper);
  background: var(--ink);
  box-shadow: 6px 6px 0 var(--orange);
}

.footer {
  display: flex;
  padding: 24px clamp(24px, 5vw, 76px);
  justify-content: space-between;
  gap: 20px;
  color: #768096;
  border-top: 1px solid var(--line);
  font-size: 9px;
}

.photo-dialog {
  width: min(860px, calc(100% - 28px));
  max-height: 92svh;
  padding: 0;
  overflow: visible;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 15px 15px 0 var(--blue);
}

.photo-dialog::backdrop {
  background: rgba(13, 16, 23, 0.87);
  backdrop-filter: blur(9px);
}

.photo-dialog img {
  width: 100%;
  max-height: 75svh;
  object-fit: contain;
  background: var(--ink);
}

.photo-dialog p {
  margin: 0;
  padding: 18px 22px 21px;
  font-size: 17px;
  font-weight: 800;
}

.dialog-close {
  position: absolute;
  z-index: 2;
  top: -18px;
  right: -18px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--paper);
  background: var(--pink);
  border: 3px solid var(--ink);
  font-size: 26px;
  cursor: pointer;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.photo-window.reveal.is-visible {
  transform: var(--card-transform, rotate(0));
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
    padding-top: 110px;
    padding-bottom: 110px;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding-top: 30px;
  }

  .hero-visual {
    width: min(500px, 86%);
  }

  .system-date {
    display: none;
  }

  .section-heading,
  .stats,
  .cake-heading {
    grid-template-columns: 1fr;
  }

  .stats-intro {
    position: static;
  }

  .runaway-button {
    display: none;
  }

  .cake-heading > p:last-child {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (min-width: 981px) and (max-width: 1200px) {
  .stats {
    grid-template-columns: minmax(0, 0.8fr) minmax(500px, 1fr);
    gap: 40px;
  }

  .stats-intro h2 {
    font-size: clamp(34px, 3.45vw, 42px);
  }
}

@media (max-width: 760px) {
  .boot-panel h1 {
    font-size: 26px;
  }

  .sound-toggle {
    top: 11px;
    right: 11px;
  }

  .system-bar {
    padding: 15px 144px 15px 18px;
  }

  .system-bar span:last-child {
    display: none;
  }

  .hero {
    padding-inline: 20px;
  }

  .hero-name {
    max-width: 100%;
    font-size: clamp(50px, 18.2vw, 78px);
  }

  .hero-level {
    font-size: clamp(25px, 10vw, 44px);
  }

  .hero-unlocked {
    max-width: 100%;
    font-size: clamp(15px, 4.5vw, 19px);
    letter-spacing: 0.06em;
  }

  .hero-title,
  .hero-lead,
  .hero-actions {
    min-width: 0;
    max-width: 100%;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .level-sticker {
    right: -28px;
    width: 96px;
    height: 96px;
  }

  .approved-stamp {
    left: -18px;
  }

  .section-shell {
    width: min(100% - 28px, 1420px);
  }

  .archive {
    padding-top: 95px;
  }

  .section-heading {
    gap: 28px;
  }

  .archive-desk {
    display: grid;
    min-height: auto;
    margin-top: 55px;
    padding: 50px 14px 30px;
    grid-auto-columns: 82vw;
    grid-auto-flow: column;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .archive-desk::after {
    position: absolute;
    top: 16px;
    left: 14px;
    color: var(--muted);
    content: "← ЛИСТАЙ ФОТО →";
    font-family: var(--mono);
    font-size: 9px;
  }

  .archive-desk::before {
    display: none;
  }

  .photo-window,
  .photo-01,
  .photo-02,
  .photo-03,
  .photo-04,
  .photo-05,
  .photo-06,
  .photo-07,
  .photo-08,
  .photo-09,
  .photo-10 {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    align-self: start;
    scroll-snap-align: center;
    touch-action: pan-x pan-y;
    transform: none;
  }

  .photo-window.reveal.is-visible {
    transform: none;
  }

  .photo-open img {
    max-height: 60svh;
  }

  .drag-handle {
    cursor: default;
  }

  .stats {
    padding-top: 90px;
    padding-bottom: 110px;
    gap: 38px;
  }

  .stats-intro h2 {
    font-size: clamp(28px, 8vw, 34px);
    letter-spacing: -0.055em;
  }

  .stats-intro,
  .stats-board,
  .stat-row {
    min-width: 0;
    max-width: 100%;
  }

  .eyebrow {
    overflow-wrap: anywhere;
  }

  .stats-board {
    padding: 25px 19px;
    overflow: hidden;
    box-shadow: 9px 9px 0 var(--pink);
  }

  .stat-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .danger-content {
    min-height: 720px;
    padding-block: 90px;
  }

  .danger-content h2 span {
    -webkit-text-stroke-width: 2px;
  }

  .danger-button {
    min-height: 120px;
    box-shadow: 9px 9px 0 var(--ink);
  }

  .cake-zone {
    padding-top: 105px;
    padding-bottom: 110px;
  }

  .cake-zone::before {
    right: 0;
  }

  .cake-heading h2 {
    font-size: clamp(39px, 10.5vw, 46px);
    letter-spacing: -0.055em;
  }

  .cake-stage {
    min-height: 500px;
    margin-top: 60px;
    padding-inline: 7px;
  }

  .candles {
    width: 96%;
    gap: 1px;
  }

  .candle {
    width: 9px;
    border-width: 1px;
  }

  .flame {
    width: 12px;
    height: 21px;
  }

  .cake {
    width: 100%;
    height: 250px;
  }

  .cake-middle > span {
    font-size: 64px;
  }

  .cake-counter {
    right: auto;
    left: 16px;
  }

  .birthday-message {
    box-shadow: 9px 9px 0 var(--pink);
  }

  .footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .cursor-layer,
  #party-canvas { display: none; }
  .photo-window { transform: none !important; }
  .reveal { opacity: 1; transform: none; }
}