/* Cinematic arena. All decorative loops stop while the camera is active. */
:root{--arena-accent:#ffb547;--text:#eeeae2;--muted:#929396}
body{background:#090b0d}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.topbar{height:76px;padding:0 max(28px,calc((100vw - 1544px)/2));background:#090b0d;border-bottom:1px solid #ffffff0b}
.brand{font-size:28px;letter-spacing:.5px}.brand-mark{width:30px;height:36px}
.wallet-button{background:transparent;border-color:#ffffff1c;border-radius:4px;font-size:11px}.top-actions{gap:16px}
.arena-layout{max-width:1600px;padding:20px 28px 0}
.hero-panel{--look-x:0px;--look-y:0px;position:relative;height:clamp(580px,calc(100svh - 270px),800px);border:0;border-radius:8px;background:#0b0d10;isolation:isolate;overflow:hidden}
.hero-panel:after{content:'';position:absolute;inset:0;border:1px solid #ffffff0d;border-radius:inherit;pointer-events:none;z-index:9;background:linear-gradient(90deg,var(--arena-accent),transparent) left top/100px 1px no-repeat}
.hero-art{inset:-4%;width:108%;height:108%;max-width:none;object-position:55% 50%;transform:translate(calc(var(--look-x) * -.35),calc(var(--look-y) * -.35));z-index:-5;opacity:.56;transition:filter .8s}
.hero-panel[data-guardian="1"] .hero-art{filter:hue-rotate(155deg) saturate(.5)}.hero-panel[data-guardian="2"] .hero-art{filter:hue-rotate(245deg) saturate(.6)}
.hero-shade{z-index:-4;background:linear-gradient(90deg,#0a0c0ff5 0%,#0b0c10c9 28%,#0c0e1133 63%,#0c0d1033),linear-gradient(0deg,#0a0c10 0%,#0a0c1040 25%,transparent 55%,#0b0d1020)}
.arena-beam{position:absolute;left:45%;top:-70%;width:60%;height:180%;background:linear-gradient(100deg,transparent 30%,#ffe5b50a 45%,#ffe5b514 50%,transparent 60%);transform:rotate(22deg);pointer-events:none;z-index:-2;animation:beam-sway 16s ease-in-out infinite alternate}
.arena-haze{position:absolute;left:42%;bottom:5%;width:65%;height:45%;background:radial-gradient(ellipse,var(--arena-accent),transparent 68%);opacity:.12;pointer-events:none;animation:haze-drift 9s ease-in-out infinite alternate;z-index:-1}
.guardian-index{position:absolute;right:4%;top:-12%;font:800 clamp(290px,32vw,490px)/1 var(--display);color:transparent;-webkit-text-stroke:1px #ffffff0e;letter-spacing:-12px;z-index:-2;pointer-events:none}
#arena-atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.hero-content{position:absolute;left:0;top:50%;width:50%;padding:0 0 30px 5%;transform:translateY(-50%);z-index:5;pointer-events:none}
.hero-content button{pointer-events:auto}.hero-kicker{font-size:9px;letter-spacing:2.2px;color:#a6a6a9;gap:9px}
.hero-kicker .tiny-dot{width:5px;height:5px;border-radius:0;transform:rotate(45deg);background:var(--arena-accent)}.primary-button{position:relative;overflow:hidden;border-radius:3px;background:#ffb547;box-shadow:none;min-height:52px;transition:transform .25s,background .25s,box-shadow .25s}
.primary-button:before{content:'';position:absolute;inset:-100% -40%;background:linear-gradient(110deg,transparent 43%,#fff7 50%,transparent 57%);transform:translateX(-100%);transition:transform .65s;pointer-events:none}
.primary-button:hover:before{transform:translateX(100%)}.primary-button:hover{transform:translateY(-2px);box-shadow:0 8px 35px #ffb54720}.primary-button:active{transform:translateY(1px)}
.hero-content .primary-button{min-width:218px;min-height:57px;gap:28px;justify-content:space-between;text-transform:uppercase;font-size:12px;letter-spacing:1px;padding:16px 23px}
.hero-content .primary-button svg{transition:transform .3s}.hero-content .primary-button:hover svg{transform:translateX(5px)}
.camera-consent{font-size:9px;color:#7d8087;margin-top:17px;gap:7px}.camera-consent svg{width:12px;height:12px}
.guardian-platform{position:absolute;right:-1%;bottom:8%;width:60%;height:92%;pointer-events:none;transform:translate(var(--look-x),var(--look-y));z-index:1}
.guardian-shadow{position:absolute;left:22%;right:12%;bottom:11%;height:10%;background:radial-gradient(ellipse,#000e,transparent 70%);transform:scaleX(1.3)}
.arena-sigil{position:absolute;width:68%;aspect-ratio:1;right:9%;bottom:-13%;border:1px solid color-mix(in srgb,var(--arena-accent) 23%,transparent);border-radius:50%;transform:rotateX(68deg);box-shadow:0 0 40px color-mix(in srgb,var(--arena-accent) 8%,transparent)}
.arena-sigil:before,.arena-sigil:after{content:'';position:absolute;inset:8%;border:1px dashed color-mix(in srgb,var(--arena-accent) 32%,transparent);border-radius:50%;animation:sigil-turn 65s linear infinite}.arena-sigil:after{inset:-4%;border-style:solid;border-color:transparent var(--arena-accent);opacity:.4;animation-duration:35s;animation-direction:reverse}
.guardian-enter{position:absolute;inset:0}.guardian-breathe,.guardian-recoil{width:100%;height:100%;transform-origin:55% 86%}.guardian-breathe{animation:guardian-breathe 5s ease-in-out infinite}
#guardian-sprite,.guardian-echo{position:absolute;right:0;bottom:4%;width:100%;height:94%;object-fit:contain;filter:drop-shadow(0 18px 24px #0008);user-select:none;-webkit-user-drag:none}
.guardian-echo{pointer-events:none}.guardian-impact{position:absolute;left:55%;top:48%;width:0;height:0}.arena-shockwave{position:absolute;left:26%;top:23%;width:52%;aspect-ratio:1;border:1px solid var(--arena-accent);border-radius:50%;opacity:0;pointer-events:none}
.hero-enemy{position:absolute;top:38px;right:38px;bottom:auto;display:flex;align-items:flex-end;flex-direction:column;gap:5px;z-index:5;pointer-events:none}.hero-enemy>span{font-size:8px;letter-spacing:2px;color:#b0a392}.hero-enemy strong{font:800 29px/1 var(--display);letter-spacing:.7px;text-transform:uppercase}.hero-enemy small{font-size:10px;color:var(--arena-accent);letter-spacing:1px}
.guardian-roster{display:flex;position:absolute;bottom:25px;right:30px;width:54%;max-width:660px;z-index:6;gap:8px}
.guardian-option{position:relative;display:flex;flex:1;align-items:center;gap:9px;text-align:left;min-width:0;padding:10px 12px;border:1px solid #ffffff12;border-radius:4px;background:#0e1015c9;overflow:hidden;transition:border-color .3s,background .3s,transform .3s}
.guardian-option:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,color-mix(in srgb,var(--option-color,#ffb547) 13%,transparent),transparent);opacity:0;transition:opacity .4s;pointer-events:none}
.guardian-option.selected:before,.guardian-option:hover:before{opacity:1}.guardian-option:hover{transform:translateY(-4px);border-color:#ffffff50}.guardian-option.selected{border-color:color-mix(in srgb,var(--option-color,#ffb547) 60%,transparent)}
.guardian-option img{width:48px;height:55px;object-fit:contain;opacity:.6;filter:grayscale(.6);transition:transform .4s,filter .4s,opacity .4s;flex-shrink:0}.guardian-option:hover img,.guardian-option.selected img{transform:scale(1.12);filter:none;opacity:1}
.guardian-option>span{display:flex;flex-direction:column;gap:5px}.guardian-option strong{font:800 18px/1 var(--display);text-transform:uppercase;white-space:nowrap}.guardian-option small{font-size:7px;letter-spacing:.5px;color:#939198}.guardian-option b{display:none}.athlete{margin:0;min-width:230px;width:auto;gap:12px;padding:0}.athlete .avatar{width:35px;height:39px;background:#ffb54712;border-color:#ffb54730}.athlete .avatar svg{width:19px}.athlete strong{font-size:12px}.athlete small{font-size:9px;color:#767980}
.arena-footer{margin:0;padding:16px 4px 20px;border:0;gap:20px}.arena-footer>span{font-size:9px;color:#71747a}.arena-footer .text-button{font-size:10px}.arena-footer #practice-info{display:none}.tracking-tools{border-top:1px solid #ffffff13;padding-top:15px;margin-top:18px}.tracking-tools summary{font-size:11px}.tracking-tools p{font-size:11px;line-height:1.7}.tracking-tools button{font-size:11px;min-height:40px}
.page-intro h1{letter-spacing:-.5px}.page-intro p{display:none}.guide-card{background:#121519;border:1px solid #ffffff13;border-radius:6px}.guide-tip{display:none}.guide-card h2{font:800 28px var(--display)}.guide-card p{font-size:12px;line-height:1.8}.guide-note p{max-width:650px}
dialog{border-radius:12px;border:1px solid #ffffff25;background:#14171b;box-shadow:0 30px 100px #0009}dialog[open]{animation:dialog-arrive .3s cubic-bezier(.2,.75,.25,1)}dialog[open]::backdrop{background:#030609b8;backdrop-filter:blur(8px);animation:backdrop-arrive .25s}.dialog-heading h2{font:800 32px var(--display);letter-spacing:.3px}.setting-row{min-height:65px}.result-icon{background:#ffb54716;border-color:#ffb54740;border-radius:50%}.result-stats{background:#0e1013;border-color:#ffffff12}.result-stats strong{color:#ffcf84}.result-note{font-size:10px}.honesty-note{background:#ffffff04;border-color:#ffffff15}
/* The camera HUD prioritizes movement. Technical details live in the menu. */
.tracking-chip,.angle-chip,.depth-meter,.session-bar>.session-stat:nth-child(2),.battle-card .eyebrow,.health-label>span,.enemy-level,.camera-control-note{display:none!important}
.battle-card{top:24px;width:min(470px,calc(100% - 330px));min-height:98px;padding:17px 22px 18px 94px;border:1px solid #ffffff22;border-radius:12px;background:linear-gradient(115deg,#25201bf0,#12161aeb);box-shadow:0 12px 40px #0004;backdrop-filter:blur(10px)}
.enemy-top{margin-bottom:10px}#enemy-name{font:800 27px/1 var(--display);text-transform:uppercase;letter-spacing:1px}.monster-stage{left:5px;top:0;width:85px;height:98px}.health-label{position:absolute;right:22px;top:22px;margin:0}.health-label strong{font-size:11px;color:#eee4d5}.health-label small{color:#c4bdb1}.health-track{position:relative;height:5px;border:0;background:#ffffff12;border-radius:5px;overflow:hidden}
#health-trail{position:absolute;inset:0 auto 0 0;width:100%;background:#fff0d8;transition:width .7s .2s}#health-fill{position:relative;transition:width .2s ease-out;background:linear-gradient(90deg,#ff9957,#ffcf84)}
.time-stat{background:#101418b8;border:1px solid #ffffff17;border-radius:10px;padding:13px 18px;min-width:104px;text-align:center;backdrop-filter:blur(8px)}.time-stat>span{font-size:7px;letter-spacing:2px;color:#b0b2b6}#session-time{font:800 36px/1 var(--display);color:#ede9df;margin-top:5px}.time-stat.urgent{border-color:#ff815e80} .time-stat.urgent #session-time{color:#ff9d77}
.fullscreen-button{border-radius:9px;padding:12px 16px;background:#101418b8;border-color:#ffffff1c;font-size:11px;min-height:44px}.fullscreen-button:hover{background:#303239}.camera-controls .stop-button{border:1px solid #ffffff25;border-radius:7px;padding:11px 16px;background:#101418c9;font-size:11px;min-height:44px}
.session-bar>.session-stat:first-child{bottom:25px;width:142px;height:113px;border:1px solid #ffbc6155;border-radius:15px;background:linear-gradient(140deg,#34291ee8,#12161aeb);box-shadow:0 8px 38px #0005;backdrop-filter:blur(10px)}.session-bar>.session-stat:first-child>strong{font:800 65px/.9 var(--display);margin:0;color:#ffe1ac}.session-bar small{font-size:8px;letter-spacing:2px;margin-top:9px;color:#bcaf9b}.rep-shockwave{position:absolute;inset:-2px;border:1px solid #ffc567;border-radius:17px;opacity:0;pointer-events:none}#session-reps{display:inline-block}
.form-status{position:absolute;left:50%;bottom:155px;transform:translateX(-50%);width:max-content;max-width:min(460px,calc(100vw - 40px));padding:13px 22px;border:1px solid #ffc46c55;border-radius:10px;background:#1c1b17ed;text-align:center;box-shadow:0 8px 28px #0003;backdrop-filter:blur(8px)}.form-status>span{justify-content:center;font:800 21px/1 var(--display);letter-spacing:.6px;color:#ffce83}.form-status p{font-size:12px;line-height:1.5;color:#d1c9ba;margin:7px 0 0}.form-status[data-tone="guide"]{border-color:#ffffff24;background:#11171ce8}.form-status[data-tone="guide"]>span{color:#f0e8da}.form-status p:empty{display:none}.form-status[hidden]{display:none!important}
.counting-status{display:none!important}.preparation-status{background:#10151ce8;border:1px solid #ffffff28;border-radius:15px;max-width:380px;padding:28px;box-shadow:0 20px 60px #0005}.preparation-status>strong{font:800 30px var(--display);text-transform:uppercase;letter-spacing:1px}.preparation-status>span{font-size:110px;line-height:1;margin:5px 0}.preparation-status p{font-size:12px;line-height:1.7;color:#babfc4;margin:12px 0 0}.preparation-status[data-countdown="true"]{border-color:#ffb54745;max-width:260px}.preparation-status[data-countdown="true"] p{display:none}
.demo-tag{font-size:8px;letter-spacing:2px;padding:6px 11px;background:#11161dc9;border-color:#ffffff15;border-radius:4px}.demo-figure{background:radial-gradient(ellipse at 50% 50%,#33281e,#10141b 65%,#080b10)}.demo-scene{margin-top:-25px}.demo-body{stroke:#f8c97e}.demo-scene>svg{stroke-width:6;filter:drop-shadow(0 0 18px #ffb54717)}.demo-grid{opacity:.7}
.battle-impact{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:9;box-shadow:inset 0 -60px 100px #ffad3118}.battle-hit-origin{position:absolute;left:48px;top:48px;pointer-events:none}.impact-particle{position:absolute;left:0;top:0;width:4px;height:4px;pointer-events:none;border-radius:1px;z-index:9}.impact-slash{position:absolute;left:0;top:0;width:150px;height:3px;background:linear-gradient(90deg,transparent,#fff2cd,transparent);box-shadow:0 0 12px #ffb54780;pointer-events:none;z-index:10}
.encounter-notice{top:140px;max-width:calc(100% - 32px);border:1px solid #ffcb7460;border-radius:6px;background:#151617e8;color:#ffdb9d;padding:12px 26px;font:800 27px/1.1 var(--display);letter-spacing:2px;box-shadow:0 8px 30px #0004}
.ambient-paused .guardian-breathe,.ambient-paused .arena-haze,.ambient-paused .arena-beam,.ambient-paused .arena-sigil:before,.ambient-paused .arena-sigil:after{animation-play-state:paused}
@keyframes guardian-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.01,1.02)}}
@keyframes sigil-turn{to{transform:rotate(360deg)}}@keyframes haze-drift{to{transform:translateX(-7%) scale(1.15);opacity:.2}}@keyframes beam-sway{to{transform:translateX(-6%) rotate(15deg);opacity:.4}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.hero-content{padding-left:4%}.hero-content .primary-button{min-width:185px}.guardian-platform{width:64%;right:-5%}.guardian-roster{width:57%;right:22px}.guardian-option{padding:9px 8px;gap:5px}.guardian-option img{width:35px;height:45px}.guardian-option strong{font-size:16px}.hero-enemy{right:28px}.hero-panel{height:620px}}
@media(max-width:760px){.topbar{height:auto;min-height:72px;padding:14px 20px 0;gap:0;flex-wrap:wrap}.brand{font-size:24px}.top-actions{gap:8px}.wallet-button{padding:9px 10px;font-size:10px}.arena-layout{padding:12px 14px 0}.hero-panel{height:710px;border-radius:7px}.hero-art{object-position:65% center;opacity:.5}.hero-shade{background:linear-gradient(0deg,#090d11 0%,#0a0d10 21%,#0a0d1080 44%,transparent 70%),linear-gradient(90deg,#090d1060,transparent)}.guardian-index{font-size:290px;top:-4%;right:3%}.guardian-platform{width:100%;height:390px;right:0;bottom:auto;top:1px}.guardian-shadow{bottom:7%}.arena-sigil{bottom:-17%;width:63%;right:16%}#guardian-sprite,.guardian-echo{height:96%;bottom:2%}.hero-enemy{top:24px;left:22px;right:auto;align-items:flex-start;gap:4px}.hero-enemy>span{font-size:6px;letter-spacing:1.2px}.hero-enemy strong{font-size:22px}.hero-enemy small{font-size:8px}.hero-content{top:auto;left:24px;right:24px;bottom:126px;width:auto;transform:none;padding:0}.hero-kicker{font-size:7px;letter-spacing:1.5px}.hero-content .primary-button{min-width:180px;min-height:52px;padding:14px 17px;font-size:11px}.camera-consent{font-size:8px;margin-top:12px}.guardian-roster{left:16px;right:16px;bottom:18px;width:auto;gap:6px}.guardian-option{flex-direction:column;gap:2px;padding:8px 3px 10px;text-align:center}.guardian-option img{width:46px;height:44px}.guardian-option strong{font-size:16px}.guardian-option small{display:none}.guardian-option>span{gap:0}.arena-beam{left:5%;width:110%}.arena-haze{left:10%;bottom:40%;width:100%;height:40%}.athlete{min-width:0}.athlete .avatar{width:29px;height:34px}.athlete strong{font-size:11px}.athlete small{font-size:8px}.arena-footer{padding:14px 2px 20px;gap:16px;flex-wrap:wrap}.arena-footer>span{font-size:8px;width:auto;margin-right:auto}.arena-footer .text-button{font-size:9px}.arena-footer [data-open-guide]{display:none}.guide-card p{font-size:12px}}
@media(max-width:600px){.battle-card{top:15px;left:50%;transform:translateX(-50%);width:calc(100% - 154px);min-height:73px;padding:13px 12px;border-radius:9px}.monster-stage{display:none}.enemy-top{margin-bottom:20px;flex-wrap:nowrap}#enemy-name{font-size:22px;letter-spacing:.3px}.health-label{top:37px;right:12px;left:12px;justify-content:flex-end}.health-label strong{font-size:8px}.health-label small{font-size:6px}.health-track{height:4px}.time-stat{left:10px;top:15px;min-width:61px;padding:10px 7px;border-radius:9px}.time-stat>span{font-size:6px}#session-time{font-size:26px}.play-toolbar{right:10px;top:15px}.fullscreen-button{min-width:44px;min-height:44px;padding:12px}.fullscreen-button>span{display:none}.session-bar>.session-stat:first-child{bottom:24px;width:112px;height:95px;border-radius:13px}.session-bar>.session-stat:first-child>strong{font-size:52px}.session-bar small{font-size:7px}.form-status{bottom:140px;padding:11px 16px;max-width:calc(100% - 32px);width:max-content;left:50%;border-radius:9px}.form-status>span{font-size:20px}.form-status p{font-size:11px;margin-top:5px}.camera-controls{right:12px;bottom:40px}.camera-controls .stop-button{font-size:9px;padding:10px;gap:5px}.camera-controls svg{width:13px;height:13px}.encounter-notice{top:111px;font-size:21px;letter-spacing:1px;white-space:normal;text-align:center}.battle-hit-origin{left:50%;top:30px}.preparation-status{padding:24px;max-width:320px;top:45%}.preparation-status>strong{font-size:26px}.demo-scene{width:280px;height:340px;margin-top:-35px}}
@media(max-width:360px){.session-bar>.session-stat:first-child{bottom:72px}.form-status{bottom:180px}.camera-controls{bottom:14px}.hero-content{left:18px;right:18px}.hero-content .primary-button{min-width:159px;font-size:10px}.hero-panel{height:675px}.guardian-platform{height:355px}.hero-content{bottom:122px}.hero-kicker{font-size:6px}.brand{font-size:21px}.wallet-button{font-size:9px}.athlete{gap:7px}.athlete small{max-width:130px}.guardian-option strong{font-size:14px}}
@media(max-height:500px) and (min-width:601px){.battle-card{top:12px;min-height:77px;padding-top:12px;padding-bottom:12px}.monster-stage{height:77px}.time-stat,.play-toolbar{top:12px}.session-bar>.session-stat:first-child{height:84px;width:116px;bottom:14px}.session-bar>.session-stat:first-child>strong{font-size:49px}.form-status{bottom:115px;padding:9px 18px}.form-status>span{font-size:19px}.form-status p{font-size:10px}.camera-controls{bottom:20px}.encounter-notice{top:100px;font-size:20px}.demo-scene{height:62vh}.preparation-status{top:53%;padding:15px}.preparation-status>span{font-size:70px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-art,.guardian-platform,.guardian-breathe{transform:none}#arena-atmosphere{display:none}}

/* Combat presentation: transient hits, distinct guardian behavior, real opponents in demo. */
.guardian-touch{position:absolute;inset:18% 14% 14% 20%;z-index:3;pointer-events:auto;border:0;background:transparent;cursor:crosshair;border-radius:45%;touch-action:manipulation}
.guardian-touch>span{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;border:1px solid #ffcf7f65;background:#13100de0;color:#ffe3af;padding:10px 15px;border-radius:30px;font:700 10px 'Segoe UI',sans-serif;letter-spacing:2px;opacity:0;transition:opacity .25s,translate .25s;translate:0 7px;white-space:nowrap}
.guardian-touch svg{width:14px;height:14px}.guardian-touch:hover>span,.guardian-touch:focus-visible>span{opacity:1;translate:0 0}.guardian-touch:focus-visible{outline:1px solid #ffcf7f80;outline-offset:-20px}
.hero-panel[data-guardian="1"] .guardian-breathe{animation:ice-hover 5s ease-in-out infinite}.hero-panel[data-guardian="2"] .guardian-breathe{animation:rift-hover 6s ease-in-out infinite}
.hero-panel[data-guardian="1"] .arena-sigil{border-color:#a5faff70}.hero-panel[data-guardian="2"] .arena-sigil{box-shadow:0 0 70px #b078ff24}
.combat-projectile{position:absolute;top:0;left:0;width:90px;height:4px;margin-left:-90px;border-radius:50%;background:linear-gradient(90deg,transparent,#ffab4a 40%,#fff6df);box-shadow:0 0 12px #ffb54799;pointer-events:none;z-index:8;transform-origin:right center}
.combat-word{position:absolute;left:50%;top:43%;pointer-events:none;z-index:9;color:#fff0cf;font:800 clamp(90px,13vw,180px)/1 var(--display);letter-spacing:3px;text-shadow:5px 5px 0 #b65c19,0 8px 45px #000b}
.defeat-fragment{position:absolute;object-fit:contain;z-index:8;pointer-events:none;filter:sepia(.25) brightness(1.5)}
.battle-card.enemy-critical{border-color:#ff935a70;box-shadow:0 0 28px #ff682b15}.battle-card.enemy-critical #health-fill{background:#ff8d58}
.sparring-stage{position:absolute;left:52%;top:19%;width:41%;height:60%;pointer-events:none;transform-origin:50% 90%}
#sparring-monster{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 25px #0008);position:relative}
.sparring-shadow{position:absolute;bottom:5%;left:15%;width:70%;height:12%;border:1px solid #ffb54735;border-radius:50%;background:radial-gradient(ellipse,#ffb54717,#0008 60%,transparent 72%);transform:rotateX(35deg)}
.demo-scene{position:absolute;left:15%;top:21%;width:30%;height:58%;margin:0;max-width:480px}
.demo-figure{background:linear-gradient(0deg,#080c13 0%,#111722b8 45%,#10131cbf),url('/assets/arena-empty.png') center 60%/cover}
.demo-grid{left:-20%;right:-175%;height:50%;opacity:.5;background-size:60px 60px}
.demo-body{stroke:url(#fighter-energy);stroke-width:13;filter:drop-shadow(0 0 8px #ffba5a30)}.demo-head{fill:url(#fighter-face);stroke-width:5}.demo-torso{stroke-width:26;stroke-linecap:round}.demo-arm{stroke-width:11}.demo-leg{stroke-width:15}
.fighter-aura{fill:none;stroke:#ffbf6815;stroke-width:1;stroke-dasharray:4 15}.demo-floor{stroke:#ffb54755}
#play-area[data-enemy="1"] .sparring-shadow{background:radial-gradient(ellipse,#9efbff17,#0008 60%,transparent 72%);border-color:#8be7ff50}#play-area[data-enemy="2"] .sparring-shadow{background:radial-gradient(ellipse,#bc8bff25,#0008 60%,transparent 72%);border-color:#b38bff50}
@keyframes ice-hover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes rift-hover{0%,100%{transform:translateY(-2px) scale(1)}50%{transform:translateY(-15px) scale(1.02)}}
@media(max-width:760px){.guardian-touch{inset:14% 12% 8%}.guardian-touch>span{bottom:3%;font-size:8px;padding:8px 12px;opacity:.8;translate:0 0}}
@media(max-width:600px){.sparring-stage{left:47%;top:23%;width:53%;height:38%}.demo-scene{left:1%;top:27%;width:55%;height:42%;margin:0}.demo-grid{left:0;right:-85%}.combat-projectile{width:60px;margin-left:-60px;height:3px}.combat-word{font-size:100px;top:43%}.demo-body{stroke-width:11}.demo-torso{stroke-width:22}}
@media(max-height:500px) and (min-width:601px){.demo-scene{top:22%;left:18%;width:29%;height:62%}.sparring-stage{left:52%;top:18%;width:32%;height:67%}.combat-word{top:45%;font-size:110px}}
@media(prefers-reduced-motion:reduce){.guardian-breathe{animation:none!important}.combat-projectile,.combat-word,.defeat-fragment{display:none!important}}

body.ambient-paused .hero-panel .guardian-breathe{animation-play-state:paused}

#play-area[data-enemy="1"]{--enemy-a:#43acbf;--enemy-b:#c3f8ff}
#play-area[data-enemy="2"]{--enemy-a:#8852db;--enemy-b:#d7b9ff}
#health-fill{background:linear-gradient(90deg,var(--enemy-a,#ff9957),var(--enemy-b,#ffcf84))}
#result-dialog[open] .result-icon{animation:victory-arrive .6s cubic-bezier(.2,.8,.2,1)}
#result-dialog[open] .result-stats>div{animation:score-arrive .5s .1s both}
#result-dialog[open] .result-stats>div:nth-child(2){animation-delay:.18s}
#result-dialog[open] .result-stats>div:nth-child(3){animation-delay:.26s}
@keyframes victory-arrive{0%{opacity:0;transform:scale(.5) rotate(-20deg)}65%{transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes score-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#result-dialog[open] .result-icon,#result-dialog[open] .result-stats>div{animation:none}}