:root {
  --lime: #CCFF00; --night: #0A1D22; --ink: #22160A; --wood: #A8692F; --oak: #4A2A12;
  --brass: #C9A24B; --brass-hi: #F1D88A; --brass-dk: #6B4F17; --paper: #F1E6C6;
  --sw: min(100vw, 177.7778vh);
  --u: calc(var(--sw) / 2560);
  --sl: calc((100vw - var(--sw)) / 2);
  --st: calc((100vh - var(--sw) * .5625) / 2);
  --display: "Grenze Gotisch", serif;
  --text: "Bricolage Grotesque", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { width: 100%; height: 100%; overflow: hidden; background: #06130F; color: var(--paper); font-family: var(--text) }
[hidden] { display: none !important }
.L { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none }

#world {
  position: fixed; inset: 0;
  transform: translate(var(--shx, 0px), var(--shy, 0px)) scale(var(--zoom, 1));
  transform-origin: calc(var(--sl) + 1280 * var(--u)) calc(var(--st) + 720 * var(--u));
}
#plate {
  position: absolute;
  left: calc(var(--sl) - 640 * var(--u)); top: calc(var(--st) - 128 * var(--u));
  width: calc(3840 * var(--u)); height: calc(1696 * var(--u));
  background: url(../assets/L0_bleed_plate.jpg) center/100% 100% no-repeat;
}
#safe { position: absolute; left: var(--sl); top: var(--st); width: var(--sw); height: calc(var(--sw) * .5625); z-index: 1 }

.shadow { position: absolute; z-index: 20; border-radius: 50%; background: radial-gradient(closest-side, rgba(3, 10, 8, .55), rgba(3, 10, 8, 0)); pointer-events: none }
#sh-post { left: calc(400 * var(--u)); top: calc(1080 * var(--u)); width: calc(170 * var(--u)); height: calc(36 * var(--u)) }
#sh-idle { left: calc(1070 * var(--u)); top: calc(1040 * var(--u)); width: calc(430 * var(--u)); height: calc(70 * var(--u)) }
#sh-open { left: calc(800 * var(--u)); top: calc(1045 * var(--u)); width: calc(400 * var(--u)); height: calc(66 * var(--u)); opacity: 0 }
body.final #sh-idle { opacity: 0 }
body.final #sh-open { opacity: 1 }

#rays-wrap {
  position: absolute; z-index: 10; pointer-events: none; mix-blend-mode: screen; display: none; opacity: 0;
  left: calc(560 * var(--u)); top: calc(40 * var(--u)); width: calc(1440 * var(--u)); height: calc(1400 * var(--u));
}
#rays { position: absolute; inset: 0 }
#rays::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(closest-side at 50% 47%, rgba(230, 255, 120, .75), rgba(204, 255, 0, .25) 35%, rgba(204, 255, 0, 0) 70%);
  -webkit-mask: radial-gradient(closest-side at 50% 47%, #000 20%, transparent 100%);
  mask: radial-gradient(closest-side at 50% 47%, #000 20%, transparent 100%);
}
#rays-spin {
  position: absolute; inset: 0; transform-origin: 50% 47%;
  background: repeating-conic-gradient(from 0deg at 50% 47%, rgba(204, 255, 0, .20) 0 4deg, rgba(204, 255, 0, 0) 4deg 13deg);
  -webkit-mask: radial-gradient(closest-side at 50% 47%, #000 20%, transparent 100%);
  mask: radial-gradient(closest-side at 50% 47%, #000 20%, transparent 100%);
  animation: rayspin 60s linear infinite;
}
@keyframes rayspin { to { transform: rotate(360deg) } }
body.final #rays-wrap { display: block; opacity: 1; animation: rayspulse 4s ease-in-out infinite }
@keyframes rayspulse { 0%, 100% { opacity: 1 } 50% { opacity: .85 } }

#portal {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 30; display: none;
  pointer-events: none; overflow: hidden;
  -webkit-mask: url(../assets/P_portal_mask.png) 0 0/100% 100% no-repeat;
  mask: url(../assets/P_portal_mask.png) 0 0/100% 100% no-repeat;
}
body.final #portal { display: block }
#portal-img { position: absolute; left: calc(1074 * var(--u)); top: calc(380 * var(--u)); width: calc(390 * var(--u)); transform-origin: 50% 50% }
body.final #portal-img { animation: pushin 12s ease-in-out infinite alternate }
@keyframes pushin { from { transform: scale(1) } to { transform: scale(1.08) } }
.candles i {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc((920 - var(--h)) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  border-radius: calc(3 * var(--u));
  background: linear-gradient(180deg, #9BE81A, #CCFF00);
  border: calc(3 * var(--u)) solid #0E1500;
  box-shadow: 0 0 calc(16 * var(--u)) rgba(204, 255, 0, .7);
  animation: candleRise calc(var(--d) * 1s) linear infinite;
  animation-delay: calc(var(--t) * -1s);
}
.candles i::before, .candles i::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: calc(2 * var(--u)); height: calc(9 * var(--u));
  background: #EFFFBB; border-radius: calc(1 * var(--u));
}
.candles i::before { top: calc(-12 * var(--u)) }
.candles i::after { bottom: calc(-12 * var(--u)) }
@keyframes candleRise {
  0% { transform: translate(0, 0); opacity: 0 }
  10% { opacity: 1 }
  50% { transform: translate(calc(var(--sway, 6) * var(--u) * -1), calc(-310 * var(--u))) }
  85% { opacity: 1 }
  100% { transform: translate(calc(var(--sway, 6) * var(--u)), calc(-620 * var(--u))); opacity: 0 }
}
.candles b {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%;
  background: rgba(234, 255, 160, .95); box-shadow: 0 0 calc(10 * var(--u)) rgba(204, 255, 0, .9);
  animation: twinkle 2.6s ease-in-out infinite;
  animation-delay: calc(var(--t) * 1s);
}
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.7) } 50% { opacity: 1; transform: scale(1.15) } }

#spill {
  position: absolute; z-index: 40; display: none; pointer-events: none; mix-blend-mode: screen;
  left: calc(980 * var(--u)); top: calc(990 * var(--u)); width: calc(600 * var(--u)); height: calc(190 * var(--u));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(204, 255, 0, .55), rgba(204, 255, 0, 0));
}
body.final #spill { display: block }

#post { position: absolute; z-index: 50; left: calc(382 * var(--u)); top: calc(455 * var(--u)); width: calc(180 * var(--u)); pointer-events: none }
#planks { position: absolute; inset: 0; z-index: 51; pointer-events: none }
.plank {
  position: absolute; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  width: calc(420 * var(--u)); height: calc(137 * var(--u));
  color: #F6E7C1; text-decoration: none;
  font: 700 calc(34 * var(--u))/1 var(--text); font-stretch: 80%; letter-spacing: .01em;
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(30, 14, 4, .8);
  transform: rotate(var(--base, 0deg));
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
#plank-buy { left: calc(300 * var(--u)); top: calc(500 * var(--u)) }
#plank-x { left: calc(232 * var(--u)); top: calc(645 * var(--u)) }
#plank-lore { left: calc(296 * var(--u)); top: calc(790 * var(--u)) }
.plank img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.plank span { position: relative; padding-right: calc(40 * var(--u)) }
.plank.left img { transform: scaleX(-1) }
.plank.left span { padding: 0 0 0 calc(40 * var(--u)) }
.plank:hover, .plank:focus-visible { transform: rotate(calc(var(--base, 0deg) + 3deg)) }
.plank:hover span, .plank:focus-visible span { color: var(--lime) }
.plank b { color: var(--lime) }
.plank:focus-visible { outline: calc(3 * var(--u)) solid var(--lime); outline-offset: calc(4 * var(--u)) }

#mat {
  position: absolute; z-index: 60; cursor: copy; transform-origin: 50% 85%;
  left: calc(1050 * var(--u)); top: calc(1046 * var(--u)); width: calc(460 * var(--u)); height: calc(195 * var(--u));
}
#mat img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
#mat .txt {
  position: absolute; left: 12%; right: 12%; top: 22%; bottom: 16%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: perspective(calc(600 * var(--u))) rotateX(38deg);
  color: #E9DDB8; text-align: center; pointer-events: none;
}
#mat .t1 { font: 600 calc(22 * var(--u))/1.1 var(--text); opacity: .85 }
#mat .t2 { font: 800 calc(30 * var(--u))/1.15 var(--text); color: var(--lime); font-variant-numeric: tabular-nums; letter-spacing: .02em }

#c-frame { position: absolute; z-index: 70; left: 0; top: 0; width: 100%; height: 100%; display: none; pointer-events: none }
.char { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none }
#hoodor-idle { z-index: 80; transform-origin: calc(1266 * var(--u)) calc(1075 * var(--u)) }
#idle-inner { position: absolute; inset: 0; transform-origin: calc(1266 * var(--u)) calc(1075 * var(--u)) }
body.idle #idle-inner { animation: breath 3.2s ease-in-out infinite }
@keyframes breath { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(1.012) } }
#c-blink { opacity: 0; transition: opacity .06s linear }
#hoodor-open { z-index: 90; display: none; opacity: 0; transform-origin: calc(1012 * var(--u)) calc(1075 * var(--u)) }
body.final #hoodor-idle { display: none }
body.final #hoodor-open { display: block; opacity: 1; animation: breath2 3.6s ease-in-out infinite }
@keyframes breath2 { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(1.008) } }

#crack {
  position: absolute; z-index: 85; pointer-events: none;
  left: calc(1405 * var(--u)); top: calc(470 * var(--u)); width: calc(70 * var(--u)); height: calc(560 * var(--u));
  background: radial-gradient(closest-side, rgba(204, 255, 0, .55), rgba(204, 255, 0, 0));
  filter: blur(calc(10 * var(--u)));
  mix-blend-mode: screen;
  transform-origin: 100% 50%;
  transform: scaleX(var(--crackfill, 1));
  opacity: var(--crackop, .65);
}
body.idle #crack { animation: crackpulse 2.4s ease-in-out infinite }
@keyframes crackpulse { 0%, 100% { opacity: .5 } 50% { opacity: .8 } }
body.final #crack { display: none }

#hoodor-hit {
  position: absolute; z-index: 95; cursor: grab;
  left: calc(1043 * var(--u)); top: calc(354 * var(--u)); width: calc(479 * var(--u)); height: calc(722 * var(--u));
}
body.final #hoodor-hit { left: calc(790 * var(--u)); top: calc(330 * var(--u)); width: calc(380 * var(--u)); height: calc(750 * var(--u)) }
body.holding #hoodor-hit, body.holding #plate-btn { cursor: grabbing }

#door-cta {
  position: absolute; z-index: 100; display: none;
  left: calc(1147 * var(--u)); top: calc(417 * var(--u)); width: calc(242 * var(--u)); height: calc(571 * var(--u));
  flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; color: #0E1500; text-align: center; cursor: pointer;
}
body.final #door-cta { display: flex }
#door-cta::before {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: calc(520 * var(--u)); height: calc(420 * var(--u)); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 220, .55), rgba(255, 255, 220, 0));
  animation: ctaglow 1.6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ctaglow { from { opacity: .45 } to { opacity: 1 } }
#door-cta .k1 { position: relative; white-space: nowrap; font: 800 calc(68 * var(--u))/.82 var(--display); text-shadow: 0 0 calc(18 * var(--u)) rgba(255, 255, 220, .9) }
#door-cta .k2 {
  position: relative; white-space: nowrap; margin-top: calc(16 * var(--u));
  font: 800 calc(21 * var(--u))/1.15 var(--text);
  background: #0E1500; color: var(--lime);
  padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u));
  transition: transform .2s ease;
}
#door-cta:hover .k2 { transform: scale(1.05) }
#safe:has(#door-cta:hover) #portal-img { filter: brightness(1.18) }
#door-cta:focus-visible { outline: calc(3 * var(--u)) solid var(--lime); outline-offset: calc(6 * var(--u)) }

#bubbles { position: absolute; inset: 0; z-index: 110; pointer-events: none }
.bubble {
  position: absolute; background: #FFFDF2; color: #1A1208;
  border: calc(4 * var(--u)) solid #1A1208; border-radius: calc(40 * var(--u));
  padding: calc(14 * var(--u)) calc(26 * var(--u));
  font: 700 calc(36 * var(--u))/1.1 var(--text);
  white-space: nowrap;
}
.bubble::after {
  content: ""; position: absolute; width: calc(30 * var(--u)); height: calc(30 * var(--u));
  background: #FFFDF2;
  border-right: calc(4 * var(--u)) solid #1A1208;
  border-bottom: calc(4 * var(--u)) solid #1A1208;
}
.bubble.tail-r::after { right: calc(30 * var(--u)); bottom: calc(-19 * var(--u)); transform: rotate(45deg) }
.bubble.tail-l::after { left: calc(30 * var(--u)); bottom: calc(-19 * var(--u)); transform: rotate(135deg) }
#bub-final {
  left: calc(640 * var(--u)); top: calc(330 * var(--u)); max-width: calc(330 * var(--u));
  white-space: normal; display: none; opacity: 0;
}
#bub-final small { display: block; font: 600 calc(20 * var(--u))/1.2 var(--text); opacity: .6; margin-top: calc(6 * var(--u)) }

#fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 92; pointer-events: none }

.note { position: absolute; z-index: 120; pointer-events: none; width: calc(350 * var(--u)); left: calc(2110 * var(--u)); top: calc(640 * var(--u)) }
.note .paper {
  position: relative; background: linear-gradient(170deg, #F6ECCF, #E5D3A2); color: #2A1C0C;
  padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u));
  font: 600 calc(25 * var(--u))/1.22 var(--text);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .45);
  clip-path: polygon(0 3%, 8% 0, 30% 2%, 55% 0, 80% 3%, 100% 0, 98% 40%, 100% 70%, 97% 100%, 60% 98%, 30% 100%, 3% 97%, 0 60%);
}
.note .paper b { font-weight: 800 }
.note img { position: absolute; width: calc(300 * var(--u)); left: calc(-286 * var(--u)); top: calc(-4 * var(--u)); transform: rotate(-6deg); transform-origin: 100% 50% }

#plate-btn {
  position: absolute; z-index: 130; cursor: grab; overflow: hidden; padding: 0;
  left: calc(1010 * var(--u)); top: calc(1262 * var(--u)); width: calc(540 * var(--u)); height: calc(132 * var(--u));
  border: 0; border-radius: calc(18 * var(--u));
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 45%, #A9822F 100%);
  box-shadow: inset 0 0 0 calc(4 * var(--u)) #E7C772, inset 0 0 0 calc(7 * var(--u)) var(--brass-dk), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .55);
  color: #3A2A08; font-family: var(--text);
}
#plate-btn::before, #plate-btn::after {
  content: ""; position: absolute; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF2C0, #7A5A1A);
  top: calc(16 * var(--u)); left: calc(18 * var(--u));
  box-shadow: calc(490 * var(--u)) 0 0 #9C7726, 0 calc(86 * var(--u)) 0 #9C7726, calc(490 * var(--u)) calc(86 * var(--u)) 0 #9C7726;
}
#plate-btn .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(204, 255, 0, 0), rgba(204, 255, 0, .85));
  mix-blend-mode: multiply;
}
#plate-btn .faces { position: relative; display: block; width: 100%; height: 100% }
#plate-btn .face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .3s ease;
}
#plate-btn .final-face { opacity: 0 }
body.plate-final #plate-btn .idle-face { opacity: 0 }
body.plate-final #plate-btn .final-face { opacity: 1 }
#plate-btn .big { font: 800 calc(78 * var(--u))/.9 var(--display); letter-spacing: .06em; text-shadow: 0 calc(2 * var(--u)) 0 #F7E3A0 }
#plate-btn .small { font: 600 calc(21 * var(--u))/1.2 var(--text); opacity: .8; margin-top: calc(4 * var(--u)) }
#plate-btn .timer { font: 800 calc(44 * var(--u))/1 var(--text); font-variant-numeric: tabular-nums; letter-spacing: .02em; margin-top: calc(2 * var(--u)) }
#plate-btn .line-hold { display: none }
body.holding #plate-btn .line-idle { display: none }
body.holding #plate-btn .line-hold { display: block }
#plate-btn:focus-visible { outline: calc(3 * var(--u)) solid var(--lime); outline-offset: calc(4 * var(--u)) }

#sign { position: fixed; z-index: 140; left: 50%; top: 0; width: calc(470 * var(--u)); transform: translateX(-50%); pointer-events: none }
#sign .swing { position: relative; margin-top: calc(-46 * var(--u)); transform-origin: 50% 0; animation: signsway 5s ease-in-out infinite alternate }
@keyframes signsway { from { transform: rotate(-1.2deg) } to { transform: rotate(1.2deg) } }
#sign img { width: 100%; display: block }
#sign .txt { position: absolute; left: 0; right: 0; top: 41%; bottom: 9%; display: flex; flex-direction: column; align-items: center; justify-content: center }
#sign h1 {
  font: 900 calc(106 * var(--u))/.8 var(--display); color: var(--lime); letter-spacing: .02em;
  text-shadow: 0 calc(-2 * var(--u)) 0 rgba(0, 0, 0, .65), 0 calc(3 * var(--u)) 0 rgba(255, 255, 220, .25), 0 0 calc(24 * var(--u)) rgba(204, 255, 0, .35);
}
#sign p { font: 700 calc(22 * var(--u))/1 var(--text); color: #F2DEB0; margin-top: calc(8 * var(--u)); letter-spacing: .03em }

#hanger { position: fixed; z-index: 140; right: calc(80 * var(--u)); top: 0; width: calc(250 * var(--u)); transform-origin: 50% 0; cursor: pointer }
#hanger .sway-h { animation: hangersway 4.3s ease-in-out infinite alternate; transform-origin: 50% 0 }
@keyframes hangersway { from { transform: rotate(-2deg) } to { transform: rotate(2deg) } }
#hanger .rope {
  width: calc(6 * var(--u)); height: calc(70 * var(--u)); margin: 0 auto;
  background: repeating-linear-gradient(160deg, #9B7748 0 calc(6 * var(--u)), #5E4220 calc(6 * var(--u)) calc(11 * var(--u)));
}
#hanger .flip { position: relative; height: calc(380 * var(--u)); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4, .1, .2, 1) }
body.hanger-final #hanger .flip { transform: rotateY(180deg) }
#hanger .card {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: calc(26 * var(--u)) calc(26 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  padding: calc(118 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
  text-align: center; box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .5);
}
#hanger .card::before {
  content: ""; position: absolute; left: 50%; top: calc(26 * var(--u)); width: calc(66 * var(--u)); height: calc(66 * var(--u));
  transform: translateX(-50%); border-radius: 50%; background: #0A1512;
  box-shadow: 0 0 0 calc(5 * var(--u)) currentColor, inset 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .8);
}
#hanger .card::after { content: ""; position: absolute; left: calc(122 * var(--u)); top: calc(80 * var(--u)); width: calc(6 * var(--u)); height: calc(26 * var(--u)); background: #0A1512; border-radius: 3px }
#hanger .idle-face-h { background: #0D1A16; color: var(--lime); border: calc(4 * var(--u)) solid var(--lime) }
#hanger .final-face-h { background: var(--lime); color: #0E1500; border: calc(4 * var(--u)) solid #0E1500; transform: rotateY(180deg) }
#hanger h2 { font: 800 calc(54 * var(--u))/.88 var(--display) }
#hanger p { font: 600 calc(19 * var(--u))/1.25 var(--text); margin-top: calc(14 * var(--u)) }
#hanger .clock { display: block; font: 800 calc(30 * var(--u))/1.1 var(--text); font-variant-numeric: tabular-nums; margin-top: calc(6 * var(--u)) }
#hanger .flip-hint { display: block; font: 600 calc(15 * var(--u))/1.2 var(--text); margin-top: calc(10 * var(--u)); opacity: .75 }
#hanger:focus-visible { outline: calc(3 * var(--u)) solid var(--lime); outline-offset: calc(4 * var(--u)) }

#badge {
  position: fixed; z-index: 140; right: calc(48 * var(--u)); bottom: calc(40 * var(--u));
  display: flex; align-items: center; gap: calc(14 * var(--u));
  padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(16 * var(--u));
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 50%, #9E7A2C);
  color: #2E2006;
  box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--brass-dk), 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .5);
}
#badge .logo { width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--lime); display: grid; place-items: center }
#badge .logo img { width: calc(30 * var(--u)); height: auto; display: block }
#badge .chain { display: flex; align-items: center }
#badge .chain i { width: calc(26 * var(--u)); height: calc(14 * var(--u)); border: calc(4 * var(--u)) solid #6B4F17; border-radius: calc(8 * var(--u)); margin-left: calc(-6 * var(--u)); transition: transform .3s ease }
#badge:hover .chain i:nth-child(1) { transform: rotate(14deg) }
#badge:hover .chain i:nth-child(2) { transform: rotate(-18deg) }
#badge:hover .chain i:nth-child(3) { transform: rotate(12deg) }
#badge:hover .chain i:nth-child(4) { transform: rotate(-10deg) }
#badge span { font: 700 calc(19 * var(--u))/1.1 var(--text) }
#badge b { display: block; font: 800 calc(25 * var(--u))/1 var(--text) }

#bell {
  position: fixed; z-index: 140; left: calc(48 * var(--u)); bottom: calc(40 * var(--u));
  display: flex; align-items: center; gap: calc(10 * var(--u));
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 calc(20 * var(--u))/1 var(--text); color: #E8DDBA; opacity: .85;
}
#bell:hover { opacity: 1 }
#bell svg { width: calc(44 * var(--u)); height: calc(44 * var(--u)) }
#bell .bell-body { fill: #C9A24B; stroke: #6B4F17; stroke-width: 2.5 }
#bell .bell-clap { fill: #6B4F17 }
#bell .strike { stroke: #E8DDBA; stroke-width: 3; stroke-linecap: round; visibility: hidden }
#bell.muted .strike { visibility: visible }
#bell:focus-visible { outline: calc(3 * var(--u)) solid var(--lime); outline-offset: calc(4 * var(--u)) }

#lore { position: fixed; inset: 0; z-index: 160; display: none }
#lore.open { display: block }
.lore-backdrop { position: absolute; inset: 0; background: rgba(4, 12, 10, .55) }
.scroll {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(760 * var(--u)); max-height: calc(860 * var(--u));
  background: linear-gradient(90deg, #D9C28C, #F6ECCF 7%, #F6ECCF 93%, #D9C28C);
  color: #2A1C0C; border-radius: calc(6 * var(--u));
  box-shadow: 0 calc(20 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, .6), inset 0 0 calc(70 * var(--u)) rgba(120, 84, 30, .35);
  padding: calc(70 * var(--u)) calc(56 * var(--u));
  transform-origin: 50% 0;
}
.roll {
  position: absolute; left: calc(-24 * var(--u)); right: calc(-24 * var(--u)); height: calc(34 * var(--u)); z-index: 2;
  background: linear-gradient(180deg, #E3C077, #A8692F 45%, #6B4F17);
  border: calc(3 * var(--u)) solid #33230B; border-radius: calc(17 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .45);
}
.roll-top { top: calc(-17 * var(--u)) }
.roll-bot { bottom: calc(-17 * var(--u)) }
.roll i {
  position: absolute; top: 50%; width: calc(26 * var(--u)); height: calc(26 * var(--u));
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F1D88A, #A9822F 70%, #6B4F17);
  border: calc(3 * var(--u)) solid #33230B;
}
.roll i:first-child { left: calc(-10 * var(--u)) }
.roll i:last-child { right: calc(-10 * var(--u)) }
.lore-text { font: 500 calc(30 * var(--u))/1.4 var(--text) }
.lore-text p + p { margin-top: .55em }
.lore-text .hold-line {
  font: 900 calc(72 * var(--u))/1 var(--display);
  color: var(--ink); text-align: center;
  margin: calc(30 * var(--u)) 0 calc(34 * var(--u));
}
.lore-text .hold-line + p { margin-top: 0 }
#lore-close {
  position: absolute; right: calc(34 * var(--u)); top: calc(-30 * var(--u)); z-index: 4;
  background: #2A1C0C; color: #F6ECCF; border: 0; cursor: pointer;
  padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: calc(10 * var(--u));
  font: 700 calc(22 * var(--u))/1 var(--text);
}
#lore-close:focus-visible { outline: calc(3 * var(--u)) solid var(--lime); outline-offset: calc(3 * var(--u)) }

#flash { position: fixed; inset: 0; z-index: 150; background: #F2FFC4; opacity: 0; pointer-events: none }

#loader {
  position: fixed; inset: 0; z-index: 200; background: #0A1D22;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease;
}
#loader.done { opacity: 0; pointer-events: none }
.loader-txt { font: 800 calc(46 * var(--u))/1 var(--display); color: var(--lime); letter-spacing: .04em; animation: loadpulse 1.6s ease-in-out infinite alternate }
@keyframes loadpulse { from { opacity: .55 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  body.idle #idle-inner { animation: none }
  body.final #hoodor-open { animation: none }
  body.idle #crack { animation: none; opacity: .7 }
  body.final #rays-wrap { animation: none; opacity: 1 }
  #rays-spin { animation: none }
  body.final #portal-img { animation: none }
  .candles i, .candles b { animation: none }
  #sign .swing, #hanger .sway-h { animation: none }
  #door-cta::before { animation: none; opacity: .8 }
  .loader-txt { animation: none }
  #badge .chain i { transition: none }
  .plank { transition: none }
}