:root {
  /* Interface captions: **Space Mono** from Google Fonts for coordinates */
  --basement: #050403;
  --charcoal: #15110F;
  --orange: #FF5A1F;
  --amber: #FFD18A;
  --red: #8F1D12;
  --ash: #6A625A;
  --display: "Bungee", Impact, fantasy;
  --accent: "Monoton", "Courier New", monospace;
  --mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--basement); color: var(--amber); }

body { font-family: var(--mono); cursor: crosshair; }

.site-shell { display: flex; height: 100vh; width: 600vw; transform: translate3d(0,0,0); will-change: transform; }

.panel { position: relative; width: 100vw; height: 100vh; flex: 0 0 100vw; overflow: hidden; background: linear-gradient(180deg, #050403 0%, #050403 41%, #15110F 100%); border-right: 10px solid #050403; }

.panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(106,98,90,.2) 1px, transparent 1px), linear-gradient(0deg, rgba(106,98,90,.14) 1px, transparent 1px); background-size: 13vw 100%, 100% 17vh; opacity: .35; }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: .45; background-image: radial-gradient(circle at 20% 30%, rgba(255,209,138,.08) 0 1px, transparent 2px), radial-gradient(circle at 80% 60%, rgba(106,98,90,.11) 0 1px, transparent 2px); background-size: 19px 23px, 31px 29px; mix-blend-mode: screen; }

.smoke-field { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.smoke-field span { position: absolute; bottom: 10vh; width: 18vw; height: 65vh; border-radius: 50%; background: radial-gradient(ellipse at bottom, rgba(255,90,31,.18), rgba(255,209,138,.05) 31%, transparent 68%); filter: blur(18px); animation: smoke 9s ease-in-out infinite alternate; transform: translateX(var(--smoke-x, 0px)); }
.smoke-field span:nth-child(1){ left: 12vw; animation-delay: -2s; }
.smoke-field span:nth-child(2){ left: 37vw; bottom: 3vh; animation-delay: -5s; }
.smoke-field span:nth-child(3){ left: 62vw; animation-delay: -1s; }
.smoke-field span:nth-child(4){ left: 82vw; bottom: 18vh; animation-delay: -7s; }

@keyframes smoke { from { transform: translateX(calc(var(--smoke-x, 0px) - 18px)) skewX(-4deg); opacity: .28; } to { transform: translateX(calc(var(--smoke-x, 0px) + 18px)) skewX(7deg); opacity: .55; } }

.coordinates, .panel-code { position: absolute; top: 24px; left: 28px; z-index: 3; color: var(--ash); font: 700 12px/1 var(--mono); letter-spacing: .16em; }

.entry .empty-wall { position: absolute; left: 8vw; right: 8vw; top: 12vh; bottom: 38vh; border: 2px solid rgba(106,98,90,.18); background: linear-gradient(90deg, transparent, rgba(255,90,31,.035), transparent); }

.wordmark { position: absolute; left: 3vw; bottom: -9.5vw; margin: 0; z-index: 3; font-family: var(--display); font-size: clamp(74px, 18vw, 270px); line-height: .75; letter-spacing: -.08em; color: var(--orange); text-shadow: 0 0 34px rgba(255,90,31,.55), 0 20px 0 #8F1D12; }

.bottom-ledge { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; z-index: 4; background: var(--orange); color: var(--basement); display: flex; align-items: center; padding-left: 28px; font: 700 12px var(--mono); letter-spacing: .22em; text-transform: uppercase; }

.stamp, .chamber-stamp { position: absolute; right: 4vw; bottom: 9vh; z-index: 4; border: 4px solid var(--orange); background: #15110F; color: var(--orange); padding: 16px 19px; font: 700 14px var(--mono); transform: rotate(-2deg); box-shadow: 8px 8px 0 #8F1D12; }

.chamber-title { position: absolute; left: 5vw; bottom: 17vh; z-index: 3; margin: 0; color: var(--orange); font-family: var(--display); font-size: clamp(62px, 11vw, 170px); line-height: .78; letter-spacing: -.05em; transform: scaleY(.82); }
.chamber-title.small { font-size: clamp(40px, 7vw, 110px); bottom: 76vh; color: var(--amber); }

.counter-block { position: absolute; z-index: 4; right: 8vw; bottom: 12vh; width: 38vw; min-height: 42vh; background: #15110F; border: 8px solid #050403; outline: 3px solid var(--orange); padding: 40px; color: var(--amber); box-shadow: 20px 24px 0 rgba(143,29,18,.8); }
.counter-block p { margin: 56px 0 28px; font-size: clamp(18px, 2.1vw, 34px); line-height: 1.12; }
.crawl-line { position: absolute; left: 28px; right: 28px; top: 28px; height: 8px; background: linear-gradient(90deg, var(--orange) 0 30%, transparent 30% 40%, var(--orange) 40% 70%, transparent 70%); background-size: 130px 100%; animation: fuse 2.2s linear infinite; box-shadow: 0 0 22px var(--orange); }
@keyframes fuse { to { background-position: 130px 0; } }

.ticket-row { display: flex; gap: 13px; flex-wrap: wrap; }
.ticket-row b, .blink-word { color: var(--orange); border: 2px solid var(--red); padding: 3px 8px; animation: blink 2.4s steps(1) infinite; }
.ticket-row b:nth-child(2), .blink-word:nth-child(2) { animation-delay: .7s; }
.ticket-row b:nth-child(3), .blink-word:nth-child(3) { animation-delay: 1.4s; }
@keyframes blink { 0%, 60% { color: var(--ash); } 61%, 100% { color: var(--orange); text-shadow: 0 0 18px var(--orange); } }

.icon-tile { border: 5px solid #050403; background: #15110F; color: var(--orange); box-shadow: 8px 9px 0 #050403, inset 0 0 0 2px rgba(255,90,31,.25); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.icon-tile svg { width: 58%; height: 58%; fill: currentColor; stroke: currentColor; stroke-width: 4; stroke-linejoin: miter; }
.icon-tile:hover, .icon-tile.is-hot { transform: translateY(-8px) rotate(1deg); background: #8F1D12; box-shadow: 0 0 40px rgba(255,90,31,.75), 8px 9px 0 #050403; color: #FFD18A; }
.icon-tile:active, .thumb-target.is-pressed { filter: saturate(1.5); }
.thumb-target.is-pressed::after, .panel.thumbed::after { content: ""; position: absolute; width: 74px; height: 74px; border-radius: 48% 52% 44% 56%; background: rgba(143,29,18,.82); box-shadow: 0 0 26px rgba(255,90,31,.35); right: 34px; bottom: 30px; z-index: 9; }

.glass-mark { position: absolute; left: 48vw; bottom: 13vh; z-index: 5; width: 120px; height: 120px; display: grid; place-items: center; transform: rotate(2deg); }
.icons-grid { position: absolute; z-index: 4; left: 8vw; right: 8vw; bottom: 11vh; display: grid; grid-template-columns: repeat(9, minmax(86px, 1fr)); gap: 15px; }
.icons-grid .icon-tile { height: 26vh; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--orange); }
.icons-grid .icon-tile:nth-child(odd){ transform: rotate(-1deg); }
.icons-grid .icon-tile:nth-child(even){ transform: rotate(1deg); }
.icons-grid .icon-tile:hover { transform: translateY(-9px) rotate(0deg); }

.vertical-title { position: absolute; left: 7vw; bottom: 6vh; margin: 0; z-index: 3; writing-mode: vertical-rl; transform: rotate(180deg); font: 400 clamp(54px, 8vw, 130px)/.9 var(--display); color: var(--orange); }
.rack { position: absolute; z-index: 4; left: 31vw; bottom: 9vh; display: flex; gap: 44px; align-items: end; height: 75vh; }
.candle { position: relative; width: 76px; height: 35vh; background: #FFD18A; border: 6px solid #050403; box-shadow: 0 0 55px rgba(255,90,31,.38), 16px 16px 0 #8F1D12; }
.candle:nth-child(2){ height: 54vh; } .candle:nth-child(3){ height: 45vh; } .candle:nth-child(4){ height: 63vh; }
.candle i { position: absolute; left: 50%; top: -53px; width: 28px; height: 48px; transform: translateX(-50%); background: radial-gradient(circle at 50% 70%, #FFD18A 0 20%, #FF5A1F 42%, transparent 70%); border-radius: 60% 60% 60% 60%; animation: flame 1.1s ease-in-out infinite alternate; }
.candle span { position: absolute; left: 12px; top: -3px; width: 22px; height: 58px; background: #FF5A1F; clip-path: polygon(0 0, 100% 0, 72% 100%, 18% 75%); }
@keyframes flame { from { transform: translateX(-50%) scale(.86) skewX(-4deg); } to { transform: translateX(-50%) scale(1.15) skewX(5deg); } }
.signal-copy { position: absolute; right: 7vw; bottom: 14vh; z-index: 3; width: 30vw; color: var(--ash); font-size: 18px; line-height: 1.55; }
.monoton-number { position: absolute; right: 7vw; top: 12vh; font: 400 16vw/.8 var(--accent); color: rgba(255,90,31,.22); text-shadow: 0 0 35px rgba(255,90,31,.4); }

.receipt-strip { position: absolute; left: 8vw; right: 8vw; bottom: 16vh; z-index: 4; min-height: 36vh; background: #FFD18A; color: #050403; border: 8px solid #050403; padding: 34px; box-shadow: 24px 24px 0 #8F1D12; display: grid; grid-template-columns: 170px 1fr 240px; gap: 30px; align-items: center; }
.receipt-strip span { font: 700 15px var(--mono); letter-spacing: .17em; color: #8F1D12; }
.receipt-strip p { font: 700 clamp(19px, 2.6vw, 43px)/1.08 var(--mono); margin: 0; text-transform: uppercase; }
.cropped-verb { position: absolute; left: 2vw; bottom: -12vh; z-index: 2; font: 400 25vw/.7 var(--display); color: rgba(255,90,31,.2); letter-spacing: -.08em; }

.exit { display: grid; place-items: end center; padding-bottom: 12vh; }
.seal { width: 130px; height: 130px; z-index: 4; display: grid; place-items: center; margin-bottom: 10vh; transform: rotate(-2deg); }
.exit-word { z-index: 4; margin: 0; font: 400 clamp(50px, 12vw, 190px)/.72 var(--display); color: #050403; -webkit-text-stroke: 3px #FF5A1F; text-shadow: 0 0 25px rgba(255,90,31,.5); }
.hot-underline { z-index: 4; width: 76vw; height: 26px; background: #FF5A1F; box-shadow: 0 0 35px #FF5A1F, 0 14px 0 #8F1D12; }
.final-line { z-index: 4; color: var(--ash); text-transform: uppercase; letter-spacing: .18em; }

.candle-nav { position: fixed; left: 24px; right: 24px; bottom: 18px; height: 58px; z-index: 20; display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
.candle-nav button { pointer-events: auto; position: relative; width: 15%; height: 43px; border: 0; background: transparent; color: var(--ash); font: 700 9px var(--mono); letter-spacing: .1em; text-align: left; padding: 20px 0 0; }
.candle-nav i { position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: #6A625A; }
.candle-nav i::after { content: ""; position: absolute; right: 0; top: -8px; width: 10px; height: 18px; background: var(--ash); border-radius: 50% 50% 45% 45%; }
.candle-nav button.active { color: var(--amber); }
.candle-nav button.active i { height: 8px; background: var(--orange); box-shadow: 0 0 20px var(--orange); }
.candle-nav button.active i::after { background: radial-gradient(circle, #FFD18A 0 22%, #FF5A1F 58%, transparent 70%); box-shadow: 0 0 23px #FF5A1F; }

.readout { position: fixed; right: 28px; top: 24px; z-index: 22; color: var(--orange); background: #050403; border: 2px solid #8F1D12; padding: 9px 12px; font: 700 12px var(--mono); letter-spacing: .16em; }

@media (max-width: 900px) {
  .counter-block, .signal-copy { width: 56vw; }
  .icons-grid { grid-template-columns: repeat(3, 1fr); top: 18vh; bottom: 12vh; overflow: hidden; }
  .icons-grid .icon-tile { min-height: 90px; height: auto; }
  .receipt-strip { grid-template-columns: 1fr; }
  .candle-nav span { display: none; }
}