*{box-sizing:border-box}html{background:#100e0c;color:#e5d8bf}body{margin:0;font-family:Georgia,"Times New Roman",serif;background:radial-gradient(ellipse at 50% 50%,#2a2117 0,#15120f 53%,#090909 100%)}
.preview-bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 30px;border-bottom:1px solid #91744533;color:#ab9674;font:11px/1.4 system-ui,sans-serif;letter-spacing:.2em}
button{font:12px system-ui,sans-serif;color:#e1c994;background:#231d15;border:1px solid #6e5737;border-radius:4px;padding:9px 13px;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #f0ce83;outline-offset:5px}
.stage{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr minmax(310px,430px) 1fr;align-items:center;max-width:1680px;min-height:calc(100svh - 118px);margin:0 auto;padding:45px 35px;overflow:hidden}
.atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.halo{position:absolute;width:46%;height:72%;top:20%;border-radius:50%;filter:blur(60px);opacity:.18;animation:ambient 8s ease-in-out infinite alternate}.ice{left:-9%;background:#428c9a}.fire{right:-9%;background:#9b4c25;animation-delay:-4s}
.actor{position:relative;min-width:0;cursor:default;outline:0;--glow:#b8d6e4;--glow2:#6899b9;--phase:0;transform:translate3d(var(--px,0px),0,0);transition:transform .6s ease}
.actor-elf{margin-right:-60px;z-index:1}.actor-warrior{margin-left:-55px;--glow:#d6b58d;--glow2:#b56b39;animation-delay:-2s}
.character{position:relative;transform-origin:50% 96%;animation:breathe 5s ease-in-out infinite;will-change:transform}.actor-warrior .character{animation-duration:5.9s;animation-delay:-2.6s}
.character img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 15px #0008);position:relative;z-index:1;pointer-events:none}
.rim{position:absolute;inset:0;z-index:0;background:var(--glow);mask-image:var(--char);mask-size:100% 100%;-webkit-mask-image:var(--char);-webkit-mask-size:100% 100%;filter:blur(10px);opacity:.1;transition:opacity .6s,background .6s}
.actor.charged .rim,.actor:focus-visible .rim{opacity:.5}.actor:focus-visible:after{content:"";position:absolute;inset:8% 15%;border:1px solid #cfb88680;border-radius:50%;pointer-events:none}
.weapon-light{position:absolute;left:11%;top:65%;width:23%;height:17%;z-index:2;background:radial-gradient(ellipse,var(--glow),var(--glow2) 30%,transparent 70%);filter:blur(13px);opacity:.25;mix-blend-mode:screen;animation:weapon-pulse 2.8s ease-in-out infinite;transition:background .5s}
.actor-warrior .weapon-light{left:5%;top:54%;width:30%;height:23%;animation-delay:-1s}
.weapon-spark{position:absolute;left:21%;top:73%;width:4px;height:4px;z-index:3;border-radius:50%;background:#fff;box-shadow:0 0 10px 4px var(--glow),0 0 30px 9px var(--glow2);animation:glint 3.4s ease-in-out infinite}.actor-warrior .weapon-spark{left:19%;top:65%;animation-delay:-1.7s}
.ground{display:block;position:absolute;left:27%;right:5%;bottom:-1%;height:4%;border-radius:50%;filter:blur(12px);background:#0008;z-index:-1}
.content{position:relative;z-index:3;text-align:center;padding:5px 12px 25px;text-shadow:0 2px 12px #000}.eyebrow{font:10px system-ui,sans-serif;letter-spacing:.35em;color:#aa916a;margin:0 0 24px}h1{font-size:clamp(48px,5.5vw,82px);line-height:.95;font-weight:normal;letter-spacing:-.04em;color:#e8c386;margin:0}h1 span{display:block;font-size:1.1em;margin-top:6px}.divider{display:flex;align-items:center;gap:12px;color:#ad8350;margin:24px auto 18px;max-width:210px;font-size:13px}.divider:before,.divider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#947447)}.divider:after{transform:rotate(180deg)}.tagline{font-size:24px;font-style:italic;color:#d2b58c;margin:0 0 18px}.intro{font-size:14px;line-height:1.7;color:#a89a84;margin:0 0 26px}
nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:350px;margin:0 auto}nav a{display:flex;align-items:center;justify-content:center;min-height:47px;padding:11px 10px;border:1px solid #715634;background:linear-gradient(#2c2318b3,#17120ed9);color:#e5c48a;text-decoration:none;font-size:14px;box-shadow:inset 0 0 10px #c1903d09;transition:border-color .2s,background .2s}nav a:hover{border-color:#d8b46d;background:#42301b}.hint{font:11px/1.6 system-ui,sans-serif;color:#827563;margin:22px 0 0}footer{position:relative;z-index:4;text-align:center;padding:16px 25px;color:#827563;border-top:1px solid #91744522;font:11px/1.6 system-ui,sans-serif;background:#0d0b0999}
.ember{position:absolute;bottom:-10px;left:var(--x);height:var(--size);width:var(--size);border-radius:50%;background:#dfac65;box-shadow:0 0 6px #e69b47;opacity:0;animation:ember var(--duration) linear infinite;animation-delay:var(--delay)}
@keyframes breathe{0%,100%{transform:translateY(0) rotate(-.25deg) scaleY(1)}50%{transform:translateY(-5px) rotate(.3deg) scaleY(1.006)}}@keyframes ambient{to{opacity:.3;transform:scale(1.08)}}@keyframes weapon-pulse{0%,100%{opacity:.15;transform:scale(.9)}50%{opacity:.65;transform:scale(1.12)}}@keyframes glint{0%,35%,65%,100%{opacity:0;transform:scale(.25)}50%{opacity:.9;transform:scale(1)}}@keyframes ember{0%{opacity:0;transform:translateY(0)}10%{opacity:.7}85%{opacity:.25}100%{opacity:0;transform:translate(var(--drift),-75vh)}}
body.paused *,body.paused *:before,body.paused *:after{animation-play-state:paused!important;transition:none!important}body.paused .actor{transform:none}
@media(max-width:900px){.stage{grid-template-columns:1fr 310px 1fr;padding:60px 0 35px;min-height:680px}.actor{width:135%;max-width:450px}.actor-elf{margin-left:-25%;margin-right:0}.actor-warrior{margin-left:0}.content{padding:20px 0}.tagline{font-size:20px}.intro{font-size:13px}.preview-bar{padding:13px 18px;letter-spacing:.08em}}
@media(max-width:600px){.stage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;min-height:auto;padding:30px 12px 20px;gap:0}.content{grid-column:1/-1;grid-row:1;padding-bottom:15px}.content h1{font-size:56px}.content h1 span{display:inline;margin-left:8px;font-size:1em}.eyebrow{margin-bottom:14px}.divider{margin:17px auto 13px}.tagline{font-size:21px;margin-bottom:12px}.intro{margin-bottom:20px}.hint{margin-top:15px}.actor{grid-row:2;width:100%;margin:0;max-width:none;pointer-events:auto}.actor-elf{margin-left:0;z-index:1}.actor-warrior{margin-left:0}.preview-bar span{font-size:9px;max-width:130px}.preview-bar button{font-size:10px;padding:8px}.halo{width:70%;top:35%}footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.actor{transform:none!important}}
.actor{--glow:var(--idle-glow,#b8d6e4);--glow2:var(--idle-glow2,#6899b9)}
.actor-warrior{--glow:var(--idle-glow,#d6b58d);--glow2:var(--idle-glow2,#b56b39)}
.actor .weapon-light{left:var(--wx,11%);top:var(--wy,65%);width:var(--ww,23%);height:var(--wh,17%)}
.actor .weapon-spark{left:var(--sx,21%);top:var(--sy,73%)}
.content nav a{position:relative;padding-left:38px;overflow:visible}
.content nav{gap:20px 18px}
.content nav .c6fx-sword{left:20px;top:50%;bottom:auto;margin:0;transform-origin:center;animation:previewSwordFloat 3.2s ease-in-out infinite}
@keyframes previewSwordFloat{0%,100%{transform:translate(-50%,-50%) scale(.35)}50%{transform:translate(-50%,calc(-50% - 2px)) scale(.35)}}
.c6fx-s7 .c6fx-sword{--br:1.75;--r1:20px;--r2:48px;--c1:rgba(255,255,245,1);--c2:rgba(255,35,30,1);--b1:rgba(255,255,245,1);--b2:rgba(255,65,30,.85);--sp:#fff;--tint:rgba(255,85,50,.35);--fire:1;--fs:1.7}
.c6fx-s7 .c6fx-spark{width:6px;height:6px;animation-duration:.75s;box-shadow:0 0 8px 4px #fff,0 0 20px 8px #ff5533}
.c6fx-s7 .c6fx-svg{animation:c6fxOvercharge .65s ease-in-out infinite alternate}
@keyframes c6fxOvercharge{from{filter:brightness(1.4) drop-shadow(0 0 10px #fff) drop-shadow(0 0 25px #ff3020)}to{filter:brightness(2) drop-shadow(0 0 18px #fff) drop-shadow(0 0 40px #ff6040)}}
.preview-chat{position:fixed;right:18px;bottom:18px;z-index:20;display:flex;align-items:center;gap:8px;border:1px solid #c19a58;background:#211a12;color:#f2d5a2;padding:12px 16px;text-decoration:none;border-radius:30px;box-shadow:0 6px 24px #0007;font:13px system-ui,sans-serif}
/* Keep a clear corridor around the menu for every randomized pair. */
.stage{column-gap:28px}
.actor{transform:translate3d(calc(var(--out,0px) + var(--px,0px)),0,0)}
.actor-elf{margin-right:0;--out:-18px}
.actor-warrior{margin-left:0;--out:18px}
body.paused .actor{transform:translateX(var(--out,0px))}
@media(max-width:900px){.stage{column-gap:20px;padding-left:16px;padding-right:16px}.actor{width:100%}.actor-elf{margin-left:0;--out:-6px}.actor-warrior{margin-left:0;--out:6px}}
@media(max-width:600px){.stage{column-gap:12px;padding-left:12px;padding-right:12px}.actor-elf,.actor-warrior{--out:0px;margin:0}.content{padding-left:0;padding-right:0}}

footer a{color:#bc9f73;text-decoration:none;text-underline-offset:3px}footer a:hover{text-decoration:underline}