@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#f6f4ef;background:#101217;font-synthesis:none;--orange:#ff9958;--muted:#a5a9b5;--line:#30343e}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,input:focus-visible{outline:3px solid #bdccff;outline-offset:4px}button{border:0}button,input{min-height:48px}input{width:100%;background:#191c24;border:1px solid #424754;border-radius:8px;color:white;padding:14px 16px;font-size:1rem}label{font-size:.875rem;display:block;margin:0 0 10px}label span{float:right;color:var(--muted);font-size:.8rem}p{line-height:1.6}.lobby{max-width:540px;margin:auto;min-height:100svh;padding:32px 28px;background:radial-gradient(ellipse at 100% 15%,#482b253b,transparent 60%)}.brand{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:700;letter-spacing:.12em}.sigil{color:var(--orange);font-size:2rem}.pill{margin-left:auto;border:1px solid #42434a;border-radius:4px;padding:6px;font-size:.65rem;letter-spacing:.08em}.intro{padding:40px 0 18px}.eyebrow{font-size:.75rem;letter-spacing:.12em;font-weight:700;color:var(--muted)}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(4rem,15vw,5.5rem);font-weight:700;line-height:.93;letter-spacing:-.025em;margin:18px 0 22px;text-transform:uppercase}h1 em{font-style:normal;color:var(--orange)}.intro>p:last-child{color:#b4b6bf}.join-panel{margin-top:12px}.join-panel input{margin-bottom:20px}.room-input{text-transform:uppercase;letter-spacing:.2em}.primary{background:var(--orange);color:#24160e;border-radius:8px;font-weight:700;padding:16px 20px;width:100%;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#ffb681}#join-status{text-align:center;font-size:.875rem;color:var(--muted);min-height:24px}.lobby-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:12px}.text-button{background:transparent;color:#d6d8df;text-decoration:underline;text-underline-offset:5px;font-size:.875rem;padding:0}.fine{font-size:.8rem;color:var(--muted);line-height:1.6}.lobby>.fine{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}dialog{max-width:420px;width:calc(100% - 32px);padding:24px;background:#191c24;color:white;border:1px solid var(--line);border-radius:16px}dialog::backdrop{background:#000a}dialog p{color:#bec1ca;font-size:.9rem}dialog h2{margin-top:0}.arena{height:100svh;min-height:660px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#283142,#121720 75%)}#camera{position:absolute;width:100%;height:100%;object-fit:cover}.camera-shade{position:absolute;inset:0;background:linear-gradient(#080c15c9,transparent 25%,transparent 40%,#0a101bbb 65%,#0a101b 100%);pointer-events:none}.hud-top{position:absolute;top:max(18px,env(safe-area-inset-top));left:18px;right:18px;display:flex;align-items:center;gap:14px;z-index:3}#phase{font-weight:700;margin-top:3px;font-size:1rem}.icon-button,.small-button{background:#18202be8;border:1px solid #5961706b;border-radius:8px;padding:8px 14px;font-size:.875rem}.icon-button{font-size:1.5rem}.hud-top #copy{margin-left:auto}.status-strip{position:absolute;top:85px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:.75rem;color:#c8cbd3;z-index:2}.camera-prompt{position:absolute;top:19%;width:280px;left:50%;transform:translateX(-50%);text-align:center;z-index:3}.camera-prompt h2{margin:8px}.camera-prompt p{font-size:.875rem}.camera-prompt .primary{justify-content:center}.camera-prompt .sigil{font-size:3rem}.reticle{position:absolute;top:40%;left:50%;width:62px;height:62px;transform:translate(-50%,-50%);pointer-events:none;color:#e6e8eb88}.reticle i{position:absolute;width:15px;height:15px;border:2px solid currentColor}.reticle i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.reticle i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}.reticle i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.reticle i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}.reticle.locked{color:var(--orange);filter:drop-shadow(0 0 7px #ff9b57)}.target-status{position:absolute;top:calc(40% + 44px);left:12px;right:12px;text-align:center;font-size:.875rem;text-shadow:0 2px 6px black;pointer-events:none}.players{position:absolute;bottom:286px;left:20px;right:20px;display:flex;gap:8px;overflow-x:auto;padding:12px 0;z-index:3}.player{background:#131c28eb;border:1px solid #536074;border-radius:8px;min-width:105px;max-width:160px;padding:10px 12px;text-align:left;flex-shrink:0}.player b{font-size:.875rem;display:block;overflow:hidden;text-overflow:ellipsis}.player small{font-size:.75rem;color:#b0b9c9}.player.selected{border-color:var(--orange);background:#312a25ed}.player.dead{opacity:.45}.bottom-hud{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:20px;right:20px;z-index:3}.health-row{display:flex;gap:14px;align-items:center;margin-bottom:16px}.health-row strong{display:block;font-size:1.4rem}.health-row small{font-size:.8rem;color:var(--muted);font-weight:400}.health-track{height:6px;background:#3c4452;flex:1;border-radius:4px;overflow:hidden}#health-fill{height:100%;width:100%;background:#b8e8bc;transition:width .25s}.health-row>.small-button{font-size:.75rem;max-width:112px}.spells{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.spell{border-radius:10px;border:1px solid #566073;background:#1b2432dc;min-height:100px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}.spell.fire{border-color:#bd713f;background:#36271fed}.spell b{font-size:.875rem}.spell small{font-size:.75rem;color:#b9c0cc;margin-top:4px}.spell-symbol{font-size:1.6rem;color:#c2d1fc;line-height:1.1;margin-bottom:7px}.fire .spell-symbol{color:var(--orange)}.cooldown{position:absolute;inset:0;background:#10151de8;display:none;align-items:center;justify-content:center;font-weight:bold;font-size:1.4rem}.actions{display:flex;gap:10px;margin-top:12px}.voice{background:#edf0f6;color:#192233;font-weight:700;padding:14px;border-radius:8px;flex:1}.voice.listening{background:var(--orange)}.hint{text-align:center;font-size:.75rem;color:#a8b2c2;margin:10px 0 0}.person-box{position:absolute;border:1px dashed #eef3ffa6;background:transparent;min-height:0;padding:0;z-index:1;border-radius:8px}.person-box.paired{border:2px solid #ffad6f}.person-label{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#131b28ed;border:1px solid #586577;border-radius:5px;padding:6px 10px;font-size:.8rem;pointer-events:none}.person-label meter{display:block;width:100%;height:6px;margin-top:5px}.person-box:focus-visible{outline-offset:2px}#toast{position:absolute;top:115px;left:24px;right:24px;text-align:center;font-size:.875rem;color:#ffe0c2;z-index:5;text-shadow:0 2px 3px black}#fx{position:absolute;inset:0;pointer-events:none;z-index:4}[hidden]{display:none!important}@media(min-width:700px){.arena{width:480px;max-height:1000px;margin:auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.lobby{padding-top:48px}}@media(max-height:740px){.intro{padding-top:25px}h1{font-size:4rem}.players{bottom:274px}.spell{min-height:88px}.camera-prompt{top:17%}.camera-prompt .sigil{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.geo-label{position:absolute;transform:translate(-50%,-50%);min-width:115px;max-width:170px;background:#141c2bec;border:1px solid #9eacc1a6;border-radius:8px;padding:8px 12px;text-align:center;pointer-events:none;z-index:2;box-shadow:0 3px 15px #0005}.geo-label b{display:block;font-size:.875rem;overflow:hidden;text-overflow:ellipsis}.geo-label small{font-size:.75rem;color:#bac5d6}.geo-label meter{display:block;width:100%;height:10px;margin:4px 0}.geo-label.aimed{border-color:var(--orange);background:#3a2b21ed;box-shadow:0 0 15px #f9934133}.player{min-height:60px}.voice{font-size:.875rem}

#voice-status{color:#e9d2bb;min-height:1.2em;line-height:1.4}.players{bottom:322px}.camera-prompt{top:17%}

/* Visible cast feedback also works when the OS disables animation. */
#fx.cast-effect{--spell-color:#ffa03d;--spell-glow:#ff6200;contain:layout paint}
#fx.shield{--spell-color:#b0d0ff;--spell-glow:#4e85ff}
#fx.heal{--spell-color:#bfffc6;--spell-glow:#36d966}
.spell-burst{position:absolute;left:50%;top:40%;width:1px;height:1px;color:var(--spell-color)}
.spell-core{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,#fff 0 13%,#fff2a0 25%,var(--spell-color) 48%,var(--spell-glow) 67%,transparent 73%);box-shadow:0 0 36px 14px var(--spell-glow);animation:spell-core-burst 900ms ease-out both}
.spell-ring{position:absolute;left:-56px;top:-56px;width:112px;height:112px;border:5px solid var(--spell-color);border-radius:50%;box-shadow:0 0 22px var(--spell-glow),inset 0 0 20px var(--spell-glow);animation:spell-ring-burst 1000ms ease-out both}
.spell-feedback{position:absolute;left:0;top:76px;transform:translateX(-50%);padding:8px 16px;border:2px solid var(--spell-color);border-radius:7px;background:#111a25;color:#fff;font-weight:800;font-size:1rem;letter-spacing:.12em;white-space:nowrap;box-shadow:0 4px 14px #0009}
@keyframes spell-core-burst{0%{transform:scale(.45);opacity:1}25%{transform:scale(1.2);opacity:1}100%{transform:scale(.75);opacity:0}}
@keyframes spell-ring-burst{0%{transform:scale(.4);opacity:1}65%{opacity:1}100%{transform:scale(2.3);opacity:0}}
@media(prefers-reduced-motion:reduce){.spell-core,.spell-ring{display:none}.spell-feedback{top:54px}}

.spell-scene{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}#fx{z-index:5}.has-depth .spell-core,.has-depth .spell-ring{display:none}.has-depth .spell-feedback{top:90px;font-size:.875rem}
#shirt-open{margin-left:auto}.shirt-preview{position:relative;width:100%;background:#090d13;aspect-ratio:3/4;max-height:38svh;overflow:hidden}#shirt-camera{width:100%;height:100%;object-fit:fill;transform:scaleX(-1)}.shirt-guide{position:absolute;left:30%;top:40%;width:40%;height:30%;border:3px solid #ff9958;box-shadow:0 0 0 300px #0005;pointer-events:none}.shirt-actions{display:flex;gap:8px;margin:12px 0}.shirt-actions>*{flex:1}#shirt-swatch{width:48px;height:32px;border:2px solid white;border-radius:6px;margin:8px auto}.person-box{pointer-events:none}.person-box.matched{border:2px solid #ffad6f;box-shadow:0 0 12px #ff995822}.person-label b{display:block}.person-label small{font-size:.65rem;color:#eac6aa}.person-label{max-width:170px;overflow:hidden;text-overflow:ellipsis}#vision-status{max-width:55%;text-align:right}.players{pointer-events:none}#shirt-dialog{max-height:94svh;overflow:auto}
.status-strip{align-items:center;gap:8px}.status-strip #range-mode{font-size:.65rem;min-height:30px;padding:4px 8px;white-space:nowrap}.status-strip #vision-status{font-size:.65rem}.spell.fire.target-ready{box-shadow:0 0 18px #ff99586b;border-color:#ffe3ba}
/* Camera-first field layout: controls occupy the bottom ~150px. */
.arena{min-height:0;height:100dvh}.hud-top{top:max(10px,env(safe-area-inset-top));left:12px;right:12px;gap:9px}.hud-top .icon-button{min-height:38px;width:38px;padding:3px;font-size:1.2rem}.hud-top .small-button{min-height:36px;padding:6px 9px;font-size:.7rem}.hud-top .eyebrow{font-size:.6rem}#phase{font-size:.8rem;margin-top:1px}.status-strip{top:62px;left:12px;right:12px;font-size:.65rem}.status-strip #range-mode{min-height:26px;background:#111b29a8;border-radius:20px}.status-strip #vision-status{max-width:43%;text-shadow:0 1px 4px #000}.camera-shade{background:linear-gradient(#080c1577,transparent 16%,transparent 74%,#0a101b99 100%)}.bottom-hud{left:12px;right:12px;bottom:max(8px,env(safe-area-inset-bottom))}.health-row{gap:10px;margin-bottom:6px}.health-row>div:first-child{display:flex;gap:7px;align-items:center}.health-row .eyebrow{font-size:.6rem}.health-row strong{font-size:.95rem}.health-row small{display:none}.health-track{height:4px;max-width:125px}.health-row>.small-button{margin-left:auto;min-height:28px;font-size:.65rem;padding:4px 8px;background:#111b2999}.spells{gap:7px}.spell{min-height:57px;padding:5px;border-radius:12px;background:#121a26b5}.spell.fire{background:#36271fa8}.spell small{display:none}.spell-symbol{font-size:1.25rem;line-height:1;margin-bottom:3px}.spell b{font-size:.7rem}.actions{margin-top:7px;gap:7px}.actions button{min-height:36px;padding:8px 12px;font-size:.75rem}.voice{background:#edf0f6de}#voice-status{font-size:.65rem;margin:5px 0 0;min-height:0;text-shadow:0 1px 5px #000}#hint{display:none}.players{top:96px;bottom:auto;left:12px;right:12px;padding:0}.player{min-height:0;max-width:220px;padding:5px 9px;background:#131c2899}.player b,.player small{font-size:.65rem;display:inline}.player b{margin-right:8px}.round-live .players{display:none}.target-status{font-size:.75rem;top:calc(40% + 36px)}.reticle{width:48px;height:48px}#toast{top:132px;font-size:.8rem}.spell-feedback{font-size:.8rem}.camera-prompt{top:22%}.person-box{border-color:#eef3ff60}.person-box.matched{border-width:1px}.person-label{padding:4px 7px;font-size:.75rem}.person-label small{font-size:.6rem}@media(min-width:700px){.arena{max-height:none}}
#toast{top:auto;bottom:166px;pointer-events:none}.has-depth .spell-feedback{display:none}
.shirt-test{margin-top:14px;background:#233847;color:#e5f2ff;border:1px solid #63829a;font-size:.875rem}.shirt-test:hover{background:#30495d}
.shirt-guide{left:30%;top:32%;width:40%;height:10%}
.headband-mark{position:absolute;border:2px solid #a9ffe2;border-radius:3px;box-shadow:0 0 4px #000;pointer-events:none}
/* Four compact spells and continuously filling ten-unit mana meter. */
.spells{grid-template-columns:repeat(4,minmax(0,1fr))}.spell{min-height:60px}.spell.lightning{border-color:#897bdd;background:#292340b5}.lightning .spell-symbol{color:#d5c9ff}.spell.lightning.target-ready{box-shadow:0 0 16px #b4a0ff77;border-color:#e5dfff}.spell.needs-mana{filter:saturate(.5)}.mana-cost{position:absolute;top:4px;right:6px;font-size:.65rem;line-height:1.3;color:#e0c7ff;text-shadow:0 1px 2px #000}.mana-cost::before{content:'◆';font-size:.5rem;margin-right:2px}.mana-row{display:flex;align-items:center;gap:8px;margin:0 0 7px;font-size:.6rem;text-shadow:0 1px 4px #000}.mana-row>span{letter-spacing:.1em;color:#dac9f5}.mana-row>b{min-width:36px;text-align:right;font-variant-numeric:tabular-nums}#mana-track{height:7px;position:relative;background:#1c152adb;border:1px solid #c8a9f36b;border-radius:3px;flex:1;overflow:hidden}#mana-fill{height:100%;background:linear-gradient(90deg,#8c61dd,#ddb3ff);width:100%;transition:width .1s linear}.mana-segments{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#161020  calc(10% - 1px),#161020 10%)}#sound-toggle{font-size:.6rem;min-height:32px;padding:4px 6px;margin-left:auto}#shirt-open{margin-left:0}#toast{bottom:190px}
#own-shield{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;border:3px solid #a8d9ff;box-shadow:inset 0 0 35px 7px #579efa66;transition:opacity .15s}#own-shield.active{opacity:1}#shield-status{position:absolute;left:50%;top:91px;transform:translateX(-50%);z-index:3;pointer-events:none;font-size:.7rem;white-space:nowrap;padding:5px 9px;border-radius:20px;background:#152a49d9;border:1px solid #a0ceff;color:#d8edff}.person-box.shielded{border:2px solid #a8d9ff;box-shadow:0 0 16px #77b6ffbb,inset 0 0 24px #76b3ff66;border-radius:40%}.person-box.shielded .person-label{border-color:#a8d9ff}.person-box.shielded small{color:#c2e5ff}
#fx.lightning{--spell-color:#dfd5ff;--spell-glow:#866bff}.lightning .spell-core,.lightning .spell-ring{display:none}.lightning-bolt{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 5px #a67dff);animation:lightning-flash .35s linear both}.lightning-bolt polyline{fill:none;stroke:#f7f1ff;stroke-width:1.2;stroke-linejoin:bevel}.lightning .spell-feedback{display:none}@keyframes lightning-flash{0%,30%,65%{opacity:1}20%,50%{opacity:.35}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.lightning-bolt{animation:none}}
.arena.incoming-hit-fallback::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 70px #ff8c5ba8;z-index:2;pointer-events:none}
/* Stable headband overlay: one frame and label, updated at display cadence. */
.band-target{left:0;top:0;border:1.5px solid #d0eee788;border-radius:4px;min-width:0;will-change:transform;transition:none}.band-target.matched{border:2px solid #b9ffe1;box-shadow:0 0 7px #9affe133}.band-target.shielded{border-color:#a8d9ff;border-radius:9px;box-shadow:0 0 18px #77b6ff99,inset 0 0 14px #76b3ff55}.band-target-label{position:absolute;left:0;top:0;bottom:auto;margin:0;min-width:94px;max-width:152px;text-align:center;z-index:2;will-change:transform;transition:none;overflow:hidden}.band-target-label.shielded{border-color:#a8d9ff;color:#d7edff}.band-target-label.shielded small{color:#c2e5ff}.band-target-label b{overflow:hidden;text-overflow:ellipsis}.band-target-label meter{height:7px}.band-target-label small{display:block}.band-target.tracking-gap,.band-target-label.tracking-gap{opacity:.65}

.credits{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.78rem}.credits p{margin:0;line-height:1.7}.credits p+p{margin-top:8px}.credits a{color:var(--orange);text-underline-offset:3px}.credits a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

.brand-mark{display:block;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 3px 5px #0005)}.camera-mark{display:block;margin:0 auto;object-fit:contain}

/* A compact join page; game HUD styles stay separate. */
.lobby{max-width:480px;min-height:100svh;display:flex;flex-direction:column;padding:28px 24px max(22px,env(safe-area-inset-bottom));background:none}
.lobby .brand{gap:12px;font-size:1.4rem;letter-spacing:-.04em;font-weight:700}
.lobby .intro{padding:30px 0 0}
.lobby h1{font-family:inherit;font-size:clamp(2rem,8vw,2.6rem);font-weight:700;line-height:1.15;letter-spacing:-.04em;text-transform:none;margin:0 0 12px}
.lobby .intro p{margin:0;color:#b4b6bf;font-size:1rem;line-height:1.65}
.lobby .join-panel{margin-top:30px}
.lobby label{font-size:.95rem;font-weight:600;margin-bottom:9px}
.lobby input{min-height:54px;margin-bottom:12px;background:#191c24}
.lobby input::placeholder{color:#8f94a2}
.lobby #join{min-height:54px;justify-content:center;font-size:1rem}
.lobby #join-status{font-size:.8rem;margin:10px 0 0;min-height:24px}
.join-next{margin:20px 0 6px;padding-top:20px;border-top:1px solid var(--line);font-size:.875rem;color:#c2c5ce;line-height:1.6}
.headband-check{align-self:flex-start;min-height:44px;text-align:left;color:#f2c18f;font-size:.875rem;text-underline-offset:4px}
.camera-note{margin:2px 0 24px;color:var(--muted);font-size:.75rem}
.lobby .credits{margin-top:auto;padding-top:20px;font-size:.73rem;line-height:1.7}
@media(min-width:700px){.lobby{padding-top:40px;padding-bottom:28px}.lobby .intro{padding-top:40px}}

/* Decorative demo loop sits behind the join page and stops in the arena. */
.lobby{position:relative;isolation:isolate}
.lobby-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#152332}
#lobby-background{display:block;width:100%;height:100%}
.lobby-backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101217ab,#10121770 55%,#10121728),linear-gradient(0deg,#101217e8,transparent 45%,#10121755)}
.lobby .intro,.lobby .join-next,.lobby .camera-note,.lobby .credits,.lobby label,.lobby #join-status{text-shadow:0 1px 6px #000}
.lobby .intro p{color:#d1d6df}
.lobby .camera-note,.lobby .credits{color:#bfc8d3}
#background-toggle{margin-left:auto;flex:0 0 auto;width:44px;min-height:44px;padding:0;border:1px solid #ffffff26;border-radius:50%;background:#10121770;color:#d6dde5;font-size:.9rem}
@media(max-width:699px){.lobby-backdrop::after{background:linear-gradient(90deg,#101217c9,#10121766),linear-gradient(0deg,#101217ee,transparent 60%)}.lobby .intro{padding-top:24px}.lobby .join-panel{margin-top:24px}}