@font-face{font-family:Cinzel;src:url("static/fonts/Cinzel.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url("static/fonts/AlegreyaSans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Alegreya Sans SC";src:url("static/fonts/AlegreyaSansSC-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{color-scheme:dark;--gold:#d8b971;--parchment:#f1e4c3;--gutter:clamp(24px,5vw,80px)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1b1712}
body{font:500 16px "Alegreya Sans",sans-serif;color:var(--parchment)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #ffe4a2;outline-offset:5px}
.arena{position:relative;isolation:isolate;height:100vh;height:100dvh;overflow:hidden}
.battlefield{position:absolute;inset:0;z-index:-2;background:#211b14}
.battlefield img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 48%;opacity:0;transition:opacity .4s ease;filter:saturate(.88)}
[data-scene="meteor"] [data-art="meteor"],[data-scene="ultima"] [data-art="ultima"],[data-scene="bahamut"] [data-art="bahamut"]{opacity:1}
.arena::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#211a12f2 0%,#211a12b8 23%,#211a1230 48%,transparent 72%),linear-gradient(0deg,#19140ff2 0%,#19140f66 15%,transparent 42%,transparent 77%,#19140f9c 100%)}
header{position:absolute;top:clamp(18px,3.5vh,34px);left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between}
.wordmark{display:flex;align-items:center;gap:10px;font:500 17px Cinzel,serif;letter-spacing:3px;text-shadow:0 2px 8px #000}
.wordmark span{color:var(--gold)}
.wordmark svg{width:17px;height:25px;fill:#d8b97126;stroke:var(--gold);stroke-width:1}
.fan-label{font:700 10px "Alegreya Sans SC",sans-serif;letter-spacing:2px;color:#b9ab91;text-shadow:0 1px 3px #000}
.invitation{position:absolute;left:var(--gutter);top:clamp(94px,26vh,270px)}
.eyebrow{margin:0 0 15px;color:var(--gold);font:700 clamp(10px,.85vw,13px) "Alegreya Sans SC",sans-serif;letter-spacing:2px;text-shadow:0 2px 3px #000}
h1{font:500 clamp(78px,9.6vw,158px)/.95 Cinzel,Georgia,serif;letter-spacing:-5px;margin:0 0 37px;color:var(--parchment);text-shadow:0 2px 0 #80704d,0 5px 0 #18120c}
.play{width:245px;min-height:60px;display:flex;align-items:center;gap:17px;padding:16px 24px;position:relative;border:1px solid #d8b971;background:#72572e;color:#fff0cb;box-shadow:inset 0 1px #f0d99b4d,inset 0 -3px #352416,0 3px 0 #130f0a;font:700 17px "Alegreya Sans SC",sans-serif;letter-spacing:2px;transition:background .18s,border-color .18s}
.play::after{content:"";position:absolute;inset:4px;border:1px solid #ddc18466;pointer-events:none}
.play svg{width:17px;height:17px;fill:currentColor}
.play:hover{background:#8c6b37;border-color:#f2d797}
.play:active{background:#574122;box-shadow:inset 0 2px 3px #352416}
.play-note{margin:13px 0 0;font-size:13px;color:#c0b298;letter-spacing:.4px;text-shadow:0 1px 3px #000}
.screen-note{display:none;font-size:14px;line-height:1.5;color:var(--gold)}
.abilities{position:absolute;left:var(--gutter);bottom:66px}
.abilities>p{margin:0 0 13px;font:700 12px "Alegreya Sans SC",sans-serif;letter-spacing:2px;color:#d9c59a;text-shadow:0 1px 3px #000}
.ability-options{display:flex;gap:13px}
.ability-options button{position:relative;width:clamp(126px,13.6vw,208px);aspect-ratio:1.72;padding:0;border:1px solid #9d896066;background:#211a12;cursor:pointer;color:var(--parchment);overflow:hidden;transition:border-color .18s}
.ability-options button::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#050810dc)}
.ability-options img{width:100%;height:100%;object-fit:cover;display:block;opacity:.76;transition:opacity .2s,transform .3s}
.ability-options span{position:absolute;bottom:11px;left:13px;z-index:1;font:500 clamp(12px,1.1vw,17px) Cinzel,serif;text-shadow:0 1px 4px #000}
.ability-options i{position:absolute;bottom:13px;right:11px;z-index:1;font:500 10px "Alegreya Sans",sans-serif;color:#d3bd939c}
.ability-options button:hover{border-color:var(--gold)}
.ability-options button:hover img{opacity:1;transform:scale(1.04)}
.ability-options button[aria-pressed="true"]{border-color:#e0c580;box-shadow:0 0 0 1px #21180d,0 0 0 2px #9c824c}
.ability-options button[aria-pressed="true"] img{opacity:1}
.ability-options button[aria-pressed="true"] span{color:#f5d990}
.scene-label{position:absolute;right:var(--gutter);bottom:77px;text-align:right;text-shadow:0 2px 12px #000}
.scene-label span{display:block;margin-bottom:5px;font:700 11px "Alegreya Sans SC",sans-serif;letter-spacing:2px;color:#cfb98c}
.scene-label strong{font:400 clamp(28px,3.5vw,54px)/1.1 Cinzel,serif}
footer{position:absolute;bottom:20px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.2px;color:#ac9d83;text-shadow:0 1px 3px #000}
@media(max-width:1000px){.ability-options{gap:10px}.scene-label{bottom:71px}.scene-label strong{font-size:32px}.scene-label span{font-size:9px;letter-spacing:1.5px}}
@media(max-width:767px){:root{--gutter:22px}.fan-label,.scene-label{display:none}.battlefield img{object-position:61% 50%}.arena::before{background:linear-gradient(90deg,#080b12ba,transparent 100%),linear-gradient(0deg,#080a10f2,transparent 55%,#080a1080)}.invitation{top:23vh}h1{font-size:clamp(62px,18vw,106px);letter-spacing:-3px;margin-bottom:24px}.eyebrow{font-size:9px;letter-spacing:2px}.abilities{right:var(--gutter);bottom:66px}.ability-options button{width:calc((100vw - 64px)/3)}.ability-options span{left:7px;bottom:9px;font-size:11px}.ability-options i{display:none}.abilities>p{font-size:10px;letter-spacing:1.5px}footer{font-size:8px;flex-direction:column;gap:4px;bottom:15px}}
@media(max-width:767px),(max-height:599px){.play,.play-note{display:none}.screen-note{display:block}}
@media(max-height:650px){.invitation{top:24vh}h1{font-size:clamp(66px,8vw,100px);margin-bottom:24px}.play{min-height:52px;padding-block:12px}.abilities{bottom:54px}.ability-options button{max-height:94px}.scene-label{bottom:62px}footer{bottom:16px}.abilities>p{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}