:root{color-scheme:dark;--pink:#f33195}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#100b12;color:#eee}
body{font-family:Arial,Helvetica,sans-serif}
[hidden]{display:none!important}
button,a{-webkit-tap-highlight-color:transparent}
.arena{min-height:100svh;background:linear-gradient(#05040b25,#08051018 65%,#0b050a70),url('assets/arena.webp') center/cover fixed;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:24px 32px 25px;position:relative}
header{display:flex;align-items:flex-start;justify-content:space-between;width:100%;position:relative;z-index:6;gap:20px}
.ticker{font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;font-size:clamp(23px,2.25vw,38px);letter-spacing:.045em;color:#ddd;text-shadow:0 2px 0 #555,0 4px 10px #000;text-decoration:none}
.project-controls{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
nav{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.metal-button{min-width:94px;min-height:42px;font-size:18px;padding:8px 19px;color:#eee}
.metal-button:hover,.metal-button:focus-visible{--button-image:url('assets/button-normal.webp');filter:brightness(1.2) drop-shadow(0 0 8px #f3319570);outline-color:var(--pink)}
.contract{font-family:monospace;font-size:14px;display:flex;align-items:center;gap:8px;text-shadow:0 2px 3px #000}
[data-project-ca]{max-width:240px;overflow-wrap:anywhere}
.ca-status{border-left:1px solid #777;padding-left:12px;margin-left:4px;color:#efc2d7}
h1{position:relative;z-index:3;text-align:center;font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;font-size:clamp(45px,6.3vw,98px);letter-spacing:.015em;line-height:1;margin:24px 0 8px;background:linear-gradient(#fff 10%,#bdbfc4 38%,#eee 51%,#7d7f86 88%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 5px 1px #171319) drop-shadow(0 7px 8px #000)}
h1 span{color:var(--pink)}
.stage{position:relative;width:min(1480px,100%,calc((100svh - 260px)*1.85));aspect-ratio:1.85;margin:auto;flex-shrink:0}
.monitor{position:absolute;left:0;bottom:0;width:80%;aspect-ratio:1672/940;z-index:2;filter:drop-shadow(0 18px 12px #000c)}
.monitor-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.screen{position:absolute;left:0;top:0;width:1000px;height:562.5px;background:#050406;transform-origin:0 0;overflow:hidden;z-index:1;backface-visibility:hidden}
video{display:block;width:100%;height:100%;object-fit:contain;background:#050406}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0002 0px,#0002 1px,transparent 1px,transparent 4px);box-shadow:inset 0 0 35px #0008;opacity:.32}
.silverback{position:absolute;right:0;bottom:1%;width:34%;height:auto;z-index:4;pointer-events:none;filter:drop-shadow(0 16px 8px #0008);transform-origin:70% 100%}
.sound-control{position:absolute;left:28%;bottom:7.8%;z-index:5;border:1px solid #7778;background:#111c;color:#efccde;padding:5px 9px;font:12px monospace;letter-spacing:.07em;cursor:pointer;border-radius:2px}
.sound-control:hover{color:white;border-color:var(--pink)}
.sound-control:focus-visible,.play-fallback:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.play-fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #aaa;background:#0009;color:#fff;padding:16px 28px;font-size:24px;cursor:pointer}
.tagline{position:relative;z-index:5;text-align:center;font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(21px,2.1vw,34px);letter-spacing:.05em;text-shadow:0 3px 5px #000;margin:12px 0 6px}
.tagline strong{color:var(--pink);font-weight:inherit}
.forest-signature{--signature-colour:#f33195;--signature-size:200px}
@media(min-width:1000px) and (max-height:830px){h1{font-size:70px;margin-top:14px}.stage{width:min(1320px,calc((100svh - 244px)*1.85))}.arena{padding-top:20px}}
@media(max-width:700px){
 .arena{padding:20px 15px 82px;background-attachment:scroll;background-position:52% center;min-height:100svh}
 header{flex-direction:column;align-items:center;gap:18px}
 .ticker{font-size:24px;letter-spacing:.075em}
 .project-controls{align-items:center;width:100%}
 nav{justify-content:center;gap:8px;width:100%}
 .metal-button{min-width:85px;min-height:44px;font-size:17px;padding:8px 14px}
 .contract{font-size:13px;gap:6px}
 [data-project-ca]{max-width:195px}
 h1{font-size:clamp(39px,10vw,67px);margin:28px 0 0;max-width:100%;line-height:1.08}
 h1 span{display:block;font-size:1.22em}
 .stage{aspect-ratio:1.08;width:100%;margin:5px 0 0}
 .silverback{width:55%;right:-2%;bottom:15%;z-index:1}
 .monitor{width:108%;left:-4%;bottom:0;z-index:2}
 .sound-control{font-size:10px;padding:5px 7px;min-height:26px}
 .tagline{font-size:clamp(20px,5.2vw,28px);line-height:1.22;margin:19px 0 0;max-width:320px}
 .tagline strong{display:block}
 .forest-signature{--signature-size:180px}
}
@media(prefers-reduced-motion:reduce){.silverback{animation:none}}