/* Preparation guides the player without covering the center of the camera. */
body[data-game-state="loading"] .battle-card,body[data-game-state="loading"] .time-stat,body[data-game-state="loading"] .session-bar,
body[data-game-state="preparing"] .battle-card,body[data-game-state="preparing"] .time-stat,body[data-game-state="preparing"] .session-bar{visibility:hidden}
.camera-empty{padding:35px 32px;background:linear-gradient(145deg,#1c252deb,#0b1219f5);border:1px solid #ffffff29;border-top:2px solid #ffb547;border-radius:3px;box-shadow:0 24px 90px #0006;backdrop-filter:blur(12px)}
.camera-empty h3{font:800 36px/1.1 var(--display);text-transform:uppercase;letter-spacing:.5px;margin:23px 0 16px}.camera-empty p{font-size:13px;line-height:1.8;color:#c3c6c8;margin-bottom:0}.camera-private{font-size:9px;color:#9da5ac;margin-top:22px}
.setup-emblem{position:relative;width:64px;height:64px;display:grid;place-items:center;margin:0 auto;border:1px solid #ffb54730;border-radius:50%;color:#ffd18e;background:#ffb54709}.setup-emblem>svg{width:25px;height:25px}.setup-emblem:after{content:'';position:absolute;inset:-5px;border:1px solid transparent;border-top-color:#ffca7b;border-right-color:#ffca7b44;border-radius:50%;animation:setup-orbit 2s linear infinite}
.preparation-status{top:auto;bottom:28px;left:28px;transform:none;width:min(390px,calc(100% - 220px));max-width:none;padding:20px 24px;border-radius:3px;border:1px solid #ffffff2b;border-left:2px solid #ffb547;text-align:left;background:#101920e8;box-shadow:0 10px 35px #0004}.preparation-status>strong{font:800 29px/1.05 var(--display);letter-spacing:.5px;display:block}.preparation-status p{font-size:12px;color:#c2c8cc;line-height:1.65;margin:8px 0 0}.preparation-status .setup-untimed{display:block;margin-top:12px;font-size:7px;letter-spacing:1.6px;color:#8f9aa5}
.preparation-status[data-countdown="true"]{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);width:200px;padding:25px 20px;text-align:center;border:1px solid #ffb54788;background:linear-gradient(150deg,#30271de0,#0b141fe8);box-shadow:0 0 0 8px #ffb54708,0 20px 80px #0005}.preparation-status[data-countdown="true"]>strong{font-size:19px;letter-spacing:2px;color:#dcc4a1}.preparation-status[data-countdown="true"]>span{font-size:112px;line-height:1;margin:8px 0 0}.preparation-status[data-countdown="true"] .setup-untimed{display:none}
@keyframes setup-orbit{to{transform:rotate(360deg)}}
@media(max-width:600px){.camera-empty{padding:29px 23px;width:calc(100% - 40px)}.camera-empty h3{font-size:31px}.camera-empty p{font-size:12px}.preparation-status{left:16px;right:16px;bottom:100px;top:auto;transform:none;width:auto;padding:17px 20px}.preparation-status>strong{font-size:25px}.preparation-status p{font-size:11px}.preparation-status .setup-untimed{font-size:6px;margin-top:9px}.preparation-status[data-countdown="true"]{left:50%;right:auto;top:45%;bottom:auto;width:170px;padding:20px}.preparation-status[data-countdown="true"]>span{font-size:96px}.preparation-status[data-countdown="true"]>strong{font-size:17px}}
@media(max-height:500px) and (min-width:601px){.camera-empty{padding:22px 30px;max-width:430px}.setup-emblem{width:42px;height:42px}.setup-emblem>svg{width:21px;height:21px}.camera-empty h3{font-size:29px;margin:17px 0 12px}.camera-empty p{font-size:11px}.camera-private{margin-top:16px;font-size:8px}.preparation-status{left:20px;bottom:20px;padding:14px 18px;width:min(370px,calc(100% - 210px))}.preparation-status>strong{font-size:23px}.preparation-status p{font-size:11px}.preparation-status .setup-untimed{margin-top:8px;font-size:6px}.preparation-status[data-countdown="true"]{top:50%;bottom:auto;left:50%;width:155px;padding:16px}.preparation-status[data-countdown="true"]>strong{font-size:16px}.preparation-status[data-countdown="true"]>span{font-size:87px}}
.effects-reduced .setup-emblem:after{animation:none}
@media(prefers-reduced-motion:reduce){.setup-emblem:after{animation:none}}

/* Short elemental reactions, bounded and removed by the motion controller. */
.impact-particle.element-0{width:5px;height:5px;clip-path:polygon(10% 0,100% 20%,80% 100%,0 80%)}
.impact-particle.element-1{width:5px;height:14px;clip-path:polygon(50% 0,100% 70%,50% 100%,0 70%);box-shadow:0 0 5px currentColor}
.impact-particle.element-2{width:8px;height:8px;border:1px solid currentColor;border-radius:0}
.elemental-ring{position:absolute;left:0;top:0;width:75px;height:75px;border:1px solid currentColor;border-radius:50%;pointer-events:none;z-index:9;opacity:0;box-shadow:0 0 12px color-mix(in srgb,currentColor 15%,transparent)}
.elemental-ring.element-0{border-style:dashed}.elemental-ring.element-1{border-radius:4px;width:65px;height:65px}.elemental-ring.element-2{border-width:2px;border-right-color:transparent;border-left-color:transparent}
.defeat-fragment{filter:brightness(1.25)}
.effects-reduced .elemental-ring{display:none!important}
@media(prefers-reduced-motion:reduce){.elemental-ring{display:none!important}}

/* The demonstration shows the same depth cue as the illustrated guide. */
.demo-body path{transition:d .1s linear}.demo-head{transition:cy .1s linear}
#play-area[data-enemy="1"] .demo-figure{background-image:linear-gradient(0deg,#080c13 0%,#111722b8 45%,#10131cbf),url('/assets/arena-frost-v1.png')}
#play-area[data-enemy="2"] .demo-figure{background-image:linear-gradient(0deg,#080c13 0%,#111722b8 45%,#10131cbf),url('/assets/arena-void-v1.png')}
@media(prefers-reduced-motion:reduce){.demo-body path,.demo-head{transition:none}}

/* Game menus use the same restrained edges and warm accent as the lobby. */
#settings-dialog,#battle-menu-dialog,#info-dialog{border-radius:3px;border-top:2px solid #ffb547;background:linear-gradient(145deg,#1c252b,#10171e 70%)}
#battle-menu-title{font:800 38px/1 var(--display);text-transform:uppercase;letter-spacing:.5px}
.dialog-heading h2{text-transform:uppercase}.dialog-heading .icon-button{width:44px;height:44px;border:1px solid #ffffff20;border-radius:3px}
.setting-row input[type="checkbox"]{appearance:none;position:relative;flex:0 0 42px;width:42px;height:24px;margin:0;border:1px solid #ffffff30;border-radius:14px;background:#070c12;transition:background .18s,border-color .18s}
.setting-row input[type="checkbox"]:after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;background:#7f8b95;border-radius:50%;transition:transform .18s,background .18s}
.setting-row input[type="checkbox"]:checked{background:#ffb547;border-color:#ffb547}.setting-row input[type="checkbox"]:checked:after{background:#21180b;transform:translateX(18px)}
.setting-row small{line-height:1.65;color:#a8b0b5}.setting-row select{min-height:44px;max-width:170px;border-radius:3px;color:#e5e5e1}
.tracking-tools summary{min-height:44px;align-content:center;font-size:11px}.battle-menu-actions .stop-button{border-radius:3px;background:#ffffff06}.battle-menu-actions .stop-button:hover{background:#ffffff10;border-color:#ffb54765}
@media(max-width:600px){.setting-row:has(select){display:grid;grid-template-columns:1fr;gap:12px}.setting-row select{width:100%;max-width:none}.setting-row{padding:19px 0}.setting-row small{font-size:11px}.camera-controls .stop-button{font-size:11px;min-height:44px}.settings-note{font-size:10px}.dialog-heading .icon-button{width:44px;height:44px}}

/* Live preview stays clear while the tracking runtime downloads. */
.camera-loading-status{position:absolute;z-index:6;left:28px;bottom:28px;width:min(360px,calc(100% - 240px));padding:16px 20px;border:1px solid #ffffff29;border-left:2px solid #ffb547;border-radius:3px;background:#101920e8;backdrop-filter:blur(8px)}
.camera-loading-status strong{display:block;font:700 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:.4px}
.camera-loading-status span{display:block;color:#c2c8cc;font-size:11px;line-height:1.5}
.camera-loading-status progress{display:block;width:100%;height:5px;margin:12px 0;accent-color:#ffb547}
@media(max-width:900px) and (orientation:portrait){
  .battle-screen video,.battle-screen #pose-canvas{object-fit:contain;object-position:center}
  .camera-loading-status{left:16px;right:16px;bottom:max(100px,calc(env(safe-area-inset-bottom) + 90px));width:auto;padding:14px 18px}
  .camera-loading-status strong{font-size:22px}
}