:root{color-scheme:dark;--acid:#d7ff43;--ink:#090b0a;--muted:#9b9e99;--gold:#c99a47}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#070706;color:#f4f3ec;font-family:Manrope,sans-serif;background-image:radial-gradient(circle at 50% 0,#342814 0,transparent 38%)}
nav{width:min(1500px,calc(100% - 40px));height:78px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #44351f;color:#bca77e;font:700 10px DM Mono;letter-spacing:.12em}
.back{color:var(--acid);text-decoration:none}
main{padding:40px 0 90px}
header{width:min(1500px,calc(100% - 40px));margin:0 auto 28px}
header>span{color:var(--gold);font:500 10px DM Mono;letter-spacing:.18em}
h1{margin:8px 0 4px;font-size:clamp(30px,4vw,58px);letter-spacing:-.045em}
header p{margin:0;color:var(--muted)}
.hall-scroll{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-color:var(--gold) #16120c}
.hall-stage{position:relative;width:min(100vw,1979px);min-width:920px;aspect-ratio:1979/793;margin:auto;background:#0b0906 center/100% 100% no-repeat;box-shadow:0 28px 90px #000c}
.portrait{position:absolute;overflow:visible;background:#0a0907;box-shadow:inset 0 0 25px #000}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .5s,transform .8s}
.portrait.ready img{opacity:1;transform:scale(1)}
.portrait-left{left:24.35%;top:43.1%;width:13.55%;height:32.1%}
.portrait-center{left:42.64%;top:43.1%;width:13.82%;height:32.1%}
.portrait-right{left:60.79%;top:43.1%;width:14.37%;height:32.1%}
.portrait-hearts,.portrait-title{position:absolute;left:50%;z-index:2;display:block;width:145%;transform:translateX(-50%);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portrait-hearts{top:122.5%;color:#fff3c7;font:800 clamp(11px,.86vw,17px) DM Mono;letter-spacing:.04em;text-shadow:0 2px 3px #000,0 0 8px #000,0 0 14px #d7a83b}
.portrait-title{top:139%;color:#f2dfb5;font:700 clamp(9px,.75vw,15px) Manrope;text-shadow:0 2px 5px #000,0 0 14px #000}
.portrait:not(.ready) .portrait-hearts,.portrait:not(.ready) .portrait-title{display:none}
.hall-status{min-height:20px;margin:18px auto 0;color:var(--muted);text-align:center;font:10px DM Mono}
@media(max-width:940px){.hall-stage{margin-left:12px}.hall-scroll:after{content:'Seitlich wischen, um die gesamte Hall of Öl zu sehen';display:block;position:sticky;left:12px;width:max-content;margin:8px 12px 0;color:#88785e;font:9px DM Mono}}
@media(max-width:600px){nav{width:calc(100% - 24px);height:64px}nav>span{display:none}main{padding-top:26px}header{width:calc(100% - 24px);margin-bottom:18px}header p{font-size:13px}.hall-stage{min-width:860px}}