:root {
  color-scheme: dark;
  --ink: #06080b;
  --night: #0a1018;
  --stone: #17202a;
  --stone-light: #31404d;
  --bronze: #b58a4d;
  --bronze-hot: #f2ca7c;
  --chalk: #e8e4d8;
  --muted: #89939b;
  font-family: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

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

button { font: inherit; }

.game {
  --progress: calc(var(--floor) / 7);
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 500px;
  overflow: hidden;
  color: var(--chalk);
  background:
    radial-gradient(circle at 50% 12%, rgba(92, 132, 156, .16), transparent 30%),
    linear-gradient(#06090e, #080b10 55%, #030405);
}

.night,
.tower,
.blackout,
.rebuild-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.night {
  z-index: -4;
  background: linear-gradient(#080f18, #090c11 70%);
}

.stars {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    radial-gradient(circle, rgba(213, 226, 229, .9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(213, 226, 229, .55) 0 .7px, transparent 1.2px);
  background-position: 11% 17%, 63% 9%;
  background-size: 137px 151px, 193px 179px;
  mask-image: linear-gradient(to bottom, #000, transparent 62%);
}

.moon-slit {
  position: absolute;
  top: -4vh;
  left: 50%;
  width: clamp(72px, 11vw, 150px);
  height: 28vh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 5%, #d7e1dd 0 8%, #78919a 25%, transparent 69%);
  filter: blur(1px);
  opacity: .62;
}

.tower {
  z-index: -2;
  transition: filter 800ms ease, opacity 900ms ease;
}

.wall {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 31vw;
  min-width: 220px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 57px 100%,
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 100% 43px,
    linear-gradient(90deg, #080b0f, #17212a 68%, #202c35);
  box-shadow: inset -22px 0 60px rgba(0,0,0,.45);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

.wall-left {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 81% 100%, 0 100%);
  transform: translateX(calc((1 - var(--progress)) * -7%));
}

.wall-right {
  right: 0;
  transform: scaleX(-1) translateX(calc((1 - var(--progress)) * -7%));
  clip-path: polygon(0 0, 100% 0, 81% 100%, 0 100%);
}

.vault {
  position: absolute;
  top: -16vh;
  width: 55vw;
  height: 53vh;
  border: clamp(18px, 3vw, 52px) solid #1d2831;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  opacity: .96;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.5));
  transition: transform 1s cubic-bezier(.2,.9,.2,1);
}

.vault-left {
  left: -25vw;
  transform: rotate(35deg) translateY(calc((1 - var(--progress)) * -8vh));
}

.vault-right {
  right: -25vw;
  transform: rotate(-35deg) translateY(calc((1 - var(--progress)) * -8vh));
}

.course {
  position: absolute;
  left: 6vw;
  right: 6vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(119, 141, 151, .25), transparent);
  box-shadow: 0 1px rgba(0,0,0,.8);
  transform: translateY(calc((1 - var(--progress)) * 11vh));
  transition: transform 900ms cubic-bezier(.16,.84,.26,1);
}

.course-a { top: 29%; }
.course-b { top: 54%; }
.course-c { top: 78%; }

.rise-light {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(44vw, 560px);
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(136, 167, 178, calc(.035 + var(--progress) * .08)), transparent);
  transition: background 1s ease;
}

.completed-levels {
  position: absolute;
  inset: 7vh 17vw 5vh;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  opacity: 0;
  transform: perspective(650px) rotateX(-6deg) scaleY(.72);
  transform-origin: 50% 100%;
  transition: opacity 1.2s ease, transform 1.8s cubic-bezier(.15,.8,.2,1);
}

.completed-levels::before,
.completed-levels::after {
  content: '';
  position: absolute;
  top: -4%;
  bottom: -4%;
  width: 2px;
  background: linear-gradient(transparent, rgba(222, 188, 113, .68), transparent);
  box-shadow: 0 0 28px rgba(215, 181, 106, .3);
}

.completed-levels::before { left: 13%; }
.completed-levels::after { right: 13%; }

.completed-levels i {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8d6b35 13%, #e0c27e 50%, #8d6b35 87%, transparent);
  box-shadow: 0 0 15px rgba(222, 185, 105, .35), 0 -8px 35px rgba(126, 168, 181, .08);
}

.game.is-complete .completed-levels {
  opacity: .82;
  transform: perspective(650px) rotateX(-1deg) scaleY(1);
}

.game.is-complete .rise-light {
  background: linear-gradient(90deg, transparent, rgba(164, 200, 209, .19), transparent);
}

.dust {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d7c58f;
  opacity: .28;
  box-shadow: 48px 83px #9f9572, -71px 177px #8e876c, 119px 239px #beb085, -102px 331px #9a8f69, 25px 416px #d7c58f;
  animation: drift 11s ease-in-out infinite alternate;
}

.dust-a { top: 14%; left: 38%; }
.dust-b { top: 8%; right: 35%; animation-delay: -5s; }

@keyframes drift {
  to { transform: translate3d(12px, -35px, 0); opacity: .5; }
}

.intro,
.ending {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(7vh, env(safe-area-inset-bottom));
  width: min(88vw, 620px);
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 2px 24px #000;
}

.eyebrow,
.floor-name {
  margin: 0 0 .65rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: #9ca6aa;
}

h1,
h2 {
  margin: 0;
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.055em;
}

h1 { font-size: clamp(3.2rem, 10vw, 7.8rem); }
h2 { font-size: clamp(2.8rem, 8vw, 6.2rem); }

.lede,
.ending-copy {
  margin: 1.25rem auto 1.5rem;
  font-size: clamp(.95rem, 2vw, 1.12rem);
  line-height: 1.55;
  color: #b5bdbe;
}

.begin,
.again {
  min-width: 220px;
  min-height: 58px;
  padding: .8rem 1.5rem;
  border: 1px solid rgba(224, 198, 142, .48);
  border-radius: 999px;
  color: #f7ebcd;
  background: linear-gradient(#46371f, #201b13);
  box-shadow: 0 10px 45px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.14);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.begin span { display: block; font-size: 1rem; }
.begin small { display: block; margin-top: .25rem; color: #b9a984; font: .66rem ui-monospace, monospace; letter-spacing: .05em; }

.begin:hover,
.begin:focus-visible,
.again:hover,
.again:focus-visible {
  transform: translateY(-2px);
  border-color: #f1d796;
  outline: none;
  background: linear-gradient(#5b4729, #282015);
}

.headphones {
  margin: .9rem 0 0;
  color: #747e82;
  font: .68rem ui-monospace, monospace;
}

.chamber {
  position: absolute;
  z-index: 4;
  inset: 0;
}

.chamber[hidden],
.intro[hidden],
.ending[hidden] { display: none; }

.chamber-copy {
  position: absolute;
  z-index: 4;
  top: max(6.5vh, calc(env(safe-area-inset-top) + 20px));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: min(80vw, 520px);
  text-shadow: 0 2px 15px #000;
}

.floor-name { margin-bottom: .5rem; color: #8e999e; }

.instruction {
  margin: 0;
  font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  font-style: italic;
  color: #d8d5ca;
  transition: opacity 200ms ease;
}

.bells {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 13vh;
  bottom: 3vh;
  width: min(78vw, 860px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 2vw, 28px);
}

.bell {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  opacity: .67;
  transform-origin: 50% 18%;
  transition: opacity 300ms ease, filter 250ms ease, transform 160ms ease;
}

.bell::before {
  content: '';
  position: absolute;
  inset: 7% 8% 10%;
  border-left: 1px solid rgba(111, 134, 145, .12);
  border-right: 1px solid rgba(111, 134, 145, .12);
}

.rope {
  position: absolute;
  z-index: 1;
  top: -5vh;
  left: 50%;
  width: 3px;
  height: 58%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #352d24, #82725a 45%, #332a21);
  box-shadow: 0 0 13px rgba(0,0,0,.75);
}

.bell:nth-child(2) .rope { height: 49%; }
.bell:nth-child(3) .rope { height: 44%; }
.bell:nth-child(4) .rope { height: 54%; }

.bell-body {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 48%;
  width: clamp(50px, 8.5vw, 100px);
  height: clamp(58px, 9.6vw, 112px);
  transform: translate(-50%, -50%);
  border-radius: 46% 46% 18% 18% / 28% 28% 12% 12%;
  background:
    radial-gradient(ellipse at 38% 24%, rgba(255,236,181,.28), transparent 24%),
    linear-gradient(90deg, #3d2c1a, #a77b3e 38%, #6a4926 66%, #241a12);
  border-bottom: 8px solid #211710;
  box-shadow: 0 19px 25px rgba(0,0,0,.6), inset 0 -9px 12px rgba(0,0,0,.45), 0 0 0 1px rgba(226,186,105,.13);
}

.bell-body::before {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -7px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(90deg, #261a10, #b1844c 42%, #392414);
  box-shadow: 0 4px 7px #000;
}

.bell-body::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -23px;
  width: 12px;
  height: 20px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #aa804a;
  box-shadow: 0 3px 9px #000;
}

.key {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(2vh, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(179, 162, 126, .2);
  border-radius: 50%;
  color: #9a9486;
  font: .7rem ui-monospace, monospace;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.game.is-player .bell:hover,
.game.is-player .bell:focus-visible { opacity: .92; outline: none; }

.game:not(.is-player) .bell { cursor: default; }

.bell.is-ringing {
  opacity: 1;
  filter: drop-shadow(0 0 20px rgba(237, 193, 105, .48));
  animation: toll 460ms cubic-bezier(.2,.8,.3,1);
}

.bell.is-ringing .bell-body {
  background:
    radial-gradient(ellipse at 38% 24%, rgba(255,247,211,.55), transparent 26%),
    linear-gradient(90deg, #5b3c1c, #e0ad5a 40%, #8b5b28 68%, #291a0e);
}

.bell.is-ringing .key {
  color: #f8e7b8;
  border-color: #cfa65e;
  background: rgba(122, 89, 40, .33);
}

@keyframes toll {
  0% { transform: rotate(0deg); }
  28% { transform: rotate(-2.4deg); }
  62% { transform: rotate(1.6deg); }
  100% { transform: rotate(0deg); }
}

.memory {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(max(3vh, env(safe-area-inset-bottom)) + 52px);
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
}

.memory i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #60666a;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03);
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.memory i.is-heard {
  background: var(--bronze-hot);
  box-shadow: 0 0 10px rgba(238, 193, 101, .75);
  transform: scale(1.35);
}

.floor-marks {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: max(18px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column-reverse;
  gap: 9px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  list-style: none;
}

.floor-marks li {
  width: 27px;
  height: 1px;
  color: transparent;
  background: #36414a;
  transition: width 500ms ease, background 500ms ease, color 500ms ease;
}

.floor-marks span {
  position: relative;
  top: -5px;
  left: 34px;
  font: .56rem ui-monospace, monospace;
  letter-spacing: .08em;
}

.floor-marks li.is-built {
  width: 44px;
  color: #807760;
  background: #9c7b47;
}

.sound-toggle {
  position: absolute;
  z-index: 20;
  top: max(16px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  min-width: 48px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: #727b7e;
  background: transparent;
  font: .65rem ui-monospace, monospace;
  cursor: pointer;
}

.sound-toggle:hover,
.sound-toggle:focus-visible { color: #d7d2c4; outline: 1px solid #67604f; outline-offset: 5px; }

.blackout {
  z-index: 10;
  background: #020304;
  opacity: 0;
  transition: opacity 1.35s ease;
}

.dark-cue {
  position: absolute;
  z-index: 13;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #a6aaab;
  font-style: italic;
  letter-spacing: .03em;
  opacity: 0;
  pointer-events: none;
}

.game.is-blind .blackout { opacity: 1; }
.game.is-blind .chamber-copy { z-index: 13; }
.game.is-blind .floor-name,
.game.is-blind .instruction,
.game.is-blind .memory { opacity: 0; }
.game.is-blind .bells { z-index: 14; }
.game.is-blind .bell { opacity: 0; }
.game.is-blind.is-player .bell { pointer-events: auto; }
.game.is-blind.is-player .key { opacity: .22; }
.game.is-blind.is-player .dark-cue { opacity: .72; }
.game.is-blind.is-fallback .bell.is-ringing { opacity: .34; }
.game.is-blind.is-fallback .dark-cue::after { content: ' Follow the glints.'; }

.rebuild-burst {
  z-index: 12;
  left: 50%;
  right: auto;
  width: 3px;
  opacity: 0;
  transform: translateX(-50%);
  background: linear-gradient(transparent, #f4dda0 45%, transparent);
  box-shadow: 0 0 80px 30px rgba(228, 192, 116, .3);
}

.game.is-rebuilding .blackout { opacity: 0; transition-duration: 600ms; }
.game.is-rebuilding .rebuild-burst { animation: rebuild 1.1s cubic-bezier(.16,.8,.22,1); }
.game.is-final-rise .rebuild-burst { animation: final-rise 2.25s cubic-bezier(.1,.78,.18,1); }

@keyframes rebuild {
  0% { opacity: 0; transform: translateX(-50%) scaleY(.05); }
  22% { opacity: 1; }
  75% { opacity: .7; transform: translateX(-50%) scaleX(14) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(60) scaleY(1); }
}

@keyframes final-rise {
  0% { opacity: 0; transform: translateX(-50%) scaleX(1) scaleY(.02); }
  12% { opacity: .8; }
  55% { opacity: 1; transform: translateX(-50%) scaleX(18) scaleY(1); }
  78% { opacity: .7; transform: translateX(-50%) scaleX(95) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(130) scaleY(1); }
}

.game.is-wrong .tower { animation: shudder 440ms linear; filter: saturate(.5) sepia(.2); }

@keyframes shudder {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  43% { transform: translateX(4px); }
  65% { transform: translateX(-2px); }
}

.ending {
  bottom: 10vh;
  animation: ending-arrives 900ms ease both;
}

@keyframes ending-arrives {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.ending-copy { color: #c9c6bc; }

.again { display: block; margin: 0 auto 1.15rem; font-size: .9rem; }

.home-link {
  display: inline-block;
  min-height: 44px;
  padding: 13px 8px;
  color: #7f898c;
  font: .67rem ui-monospace, monospace;
  text-underline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  .game { min-height: 440px; }
  .intro { bottom: max(5.5vh, calc(env(safe-area-inset-bottom) + 12px)); }
  .lede { margin-top: .85rem; margin-bottom: 1.1rem; }
  .bells { width: 100vw; gap: 0; bottom: 0; top: 14vh; }
  .bell::before { inset-inline: 0; }
  .bell-body { top: 43%; }
  .key { bottom: max(2.5vh, env(safe-area-inset-bottom)); }
  .floor-marks { left: max(10px, env(safe-area-inset-left)); }
  .floor-marks li { width: 16px; }
  .floor-marks li.is-built { width: 25px; }
  .floor-marks span { left: 28px; }
  .wall { width: 38vw; min-width: 130px; }
  .completed-levels { inset-inline: 10vw; }
  .sound-toggle { font-size: 0; width: 46px; }
  .sound-toggle::after { content: '◌'; font-size: 1.2rem; }
  .sound-toggle[aria-pressed="true"]::after { content: '×'; }
}

@media (max-height: 610px) and (orientation: landscape) {
  .intro { bottom: 4vh; }
  h1 { font-size: clamp(2.6rem, 9vw, 5rem); }
  .lede { margin: .6rem auto .75rem; }
  .headphones { display: none; }
  .begin { min-height: 50px; padding: .5rem 1.2rem; }
  .chamber-copy { top: 5vh; }
  .bells { top: 6vh; bottom: 0; width: min(70vw, 760px); }
  .bell-body { top: 47%; }
  .key { bottom: 2vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}