.at-home{overflow:auto}.at-home #app{display:none}.front-door[hidden]{display:none}
.front-door{min-height:100dvh;position:relative;background:linear-gradient(90deg,#08151cee 0%,#08151cbe 45%,#08151c66),url('assets/arenas-v47/moon.png') center/cover fixed;color:#e4eee4;padding:clamp(20px,4vw,64px);box-sizing:border-box}
.front-door button{color:inherit;font:inherit;cursor:pointer}.front-door button:focus-visible{outline:2px solid #e5c282;outline-offset:4px}.front-door .kicker{color:#d8bb83;letter-spacing:3px;font-size:10px}
.home-content{max-width:620px;min-height:calc(100dvh - 128px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin-left:5vw}.home-crest{color:#ddc18b;font:58px Georgia;margin-bottom:14px}.home-content h1{font:clamp(36px,5.7vw,80px) Georgia;letter-spacing:clamp(4px,1vw,12px);margin:12px 0}.home-content>p{font:22px/1.6 Georgia;color:#b6c9c9;margin:15px 0 30px}
.home-choices{display:grid;gap:12px;width:min(100%,450px)}.home-choices button{display:grid;grid-template-columns:36px 1fr 30px;text-align:left;gap:5px 15px;padding:21px 22px;border:1px solid #829b9244;background:linear-gradient(110deg,#193339dd,#18333a44);border-radius:12px;transition:transform .2s,border-color .2s,background .2s}.home-choices button:hover{transform:translateX(7px);border-color:#dab77b;background:#204146de}.home-choices button>span{grid-row:1/3;color:#bdad7d;align-self:center;font-size:13px}.home-choices strong{font:23px Georgia}.home-choices small{font-size:12px;color:#99b3b6}.home-choices b{grid-column:3;grid-row:1/3;align-self:center;font-size:25px;color:#d9c797}.home-signature{font-size:9px;letter-spacing:3px;color:#8ca6a7;margin-top:32px}.multiplayer-entry{max-width:650px;margin:20vh auto;padding:36px;background:#132b2dde;border:1px solid #ceb27d55;border-radius:18px}.multiplayer-entry h1{font:36px Georgia}.multiplayer-entry p{line-height:1.8;color:#b2c7c7}.multiplayer-entry button{margin-top:20px}
.guardian-catalog{max-width:1320px;margin:auto}.guardian-catalog>header{display:flex;align-items:center;gap:25px;margin-bottom:25px}.guardian-catalog>header h1{font:36px Georgia;margin:0}.guardian-catalog>header>span{margin-left:auto;font-size:11px;color:#99b1ac}.catalog-back,.catalog-idle{background:none;border:1px solid #789f9455;padding:10px 14px;border-radius:8px;font-size:12px!important}.catalog-layout{display:grid;grid-template-columns:215px minmax(300px,1fr) 330px;gap:22px;align-items:start}.guardian-roster{display:grid;gap:5px;max-height:calc(100dvh - 180px);overflow:auto;padding-right:5px}.guardian-roster button{background:#18323788;border:1px solid transparent;display:flex;align-items:center;gap:12px;text-align:left;border-radius:10px;padding:5px 10px}.guardian-roster button.selected{background:#32473edd;border-color:#d8bc7a88}.guardian-roster button:hover{border-color:#a8c6bc88}.guardian-roster strong{font:14px Georgia;display:block}.guardian-roster small{font-size:8px;color:#b8bd9c;letter-spacing:1px}.roster-idle{width:56px;height:58px;position:relative;flex-shrink:0}.roster-idle .native-portrait{overflow:hidden;position:relative}.roster-idle img{position:absolute;max-width:none}
.guardian-sheet,.guardian-techniques{border:1px solid #72968d44;background:linear-gradient(140deg,#183532ef,#101f2aed);border-radius:16px;overflow:hidden}.guardian-heading{padding:25px 25px 0}.guardian-heading h2{font:30px Georgia;margin:8px 0 0}.guardian-stage{width:100%;aspect-ratio:4/3;margin:12px 0 0;position:relative;background:#101b20}.guardian-stage canvas.pixi-arena{width:100%!important;height:100%!important;display:block;object-fit:contain}.guardian-vitals{display:flex;gap:24px;margin:18px 25px 12px;font-size:11px;color:#a9d0c1}.guardian-vitals b{font-size:19px;color:#e8eed6;margin:0 3px}.guardian-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 20px;padding:10px 25px}.guardian-stats>div{display:flex;justify-content:space-between;align-items:center;gap:10px}.guardian-stats small{font-size:9px;color:#9cbaac}.guardian-stats span{display:flex;gap:4px}.guardian-stats i{width:5px;height:5px;border-radius:50%;background:#405754}.guardian-stats i.on{background:#d2bd80;box-shadow:0 0 4px #d2bd8033}.guardian-passive{padding:0 25px 20px;color:#9eb9b3;line-height:1.6;font-size:12px}.guardian-techniques{padding:23px}.catalog-skills{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:15px 0 24px}.catalog-skills button{position:relative;background:#0d2026;border:1px solid #638b8055;border-radius:10px;min-height:92px;padding:14px 6px;color:#acccc1}.catalog-skills button.selected{background:#294339;border-color:#e2c989;color:#f0e5bc}.catalog-skills button:hover{border-color:#d4bb85}.catalog-skills svg{width:29px;height:29px;display:block;margin:0 auto 8px}.catalog-skills strong{font-size:10px;font-weight:500;display:block}.catalog-skills small{position:absolute;right:5px;top:5px;font-size:8px;color:#d8c28b}.catalog-technique-detail h3{font:25px Georgia;color:#e5d09d;margin:0 0 12px}.catalog-technique-detail p{font-size:13px;line-height:1.7;color:#bcd0c5}.catalog-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:15px 12px;margin:20px 0}.catalog-facts small{font-size:9px;color:#91b1a5;display:block;margin-bottom:4px}.catalog-facts b{font-size:16px;color:#ede3c3}.base-note{display:block;font-size:10px;color:#91a8a4;line-height:1.5}.catalog-idle{margin-top:18px}.catalog-hint{text-align:center;color:#d3c29a;padding:30px 0;font:20px/1.6 Georgia}.catalog-hint small{color:#9cb3af;font:12px 'Segoe UI'}
.hero-vitals{display:flex;align-items:center;gap:7px;color:#a6d2c0;font-size:11px;margin:8px 0}.hero-vitals b{font-size:19px;color:#e5ecdd;font-variant-numeric:tabular-nums}.hero-vitals small{font-size:10px;color:#91a8a1}
.inspector-resources{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px;margin:10px 0}.inspector-resources .training-wallet{margin:0;grid-column:auto!important;grid-row:auto!important}.inspector-resources .hero-vitals{margin:0;grid-column:auto!important;grid-row:auto!important;flex-wrap:wrap;justify-content:center;gap:2px 5px;padding:5px;border:1px solid #87b7a755;border-radius:10px;background:#17322d}.inspector-resources .hero-vitals small{flex-basis:100%;text-align:center;font-size:9px}.side-panel .hero-head .inspector-resources{grid-column:1/-1}
.compact-sheet .attribute-detail{display:grid;grid-template-columns:1fr auto;align-items:center}.compact-sheet .upgrade-visual{grid-column:1/-1}.upgrade-visual{display:grid;gap:5px;margin-top:8px}.insight-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;border-radius:5px;background:#0b212688;font-size:11px}.insight-row>span{display:flex;align-items:center;gap:7px;color:#bcd1c6}.insight-row svg{width:16px;height:16px}.insight-row>span>i{font-style:normal;font-size:7px;color:#bca36c}.insight-row>div{display:flex;align-items:center;gap:10px;white-space:nowrap}.insight-row small{font-size:11px;color:#8ba39a}.insight-row>div>i{font-style:normal;color:#d5bd85}.insight-row b{color:#a9edcb;font-size:12px}.upgrade-note{font-size:9px;color:#849f95;margin-top:5px}.attribute-pips i.capped{opacity:.25}.compact-sheet .attribute-card small{min-height:12px}.attributes-sheet.compact-sheet{max-height:92dvh;overflow:auto}
@media(max-width:1100px){.catalog-layout{grid-template-columns:170px minmax(260px,1fr) 280px;gap:12px}.guardian-techniques{padding:16px}.guardian-roster button{padding:4px}.guardian-roster strong{font-size:12px}.guardian-stage{aspect-ratio:4/3}.guardian-stats{gap:12px 9px;padding:10px 15px}}
@media(max-width:850px){.front-door{padding:20px}.home-content{min-height:calc(100dvh - 40px);margin-left:0}.catalog-layout{grid-template-columns:minmax(0,1fr) minmax(230px,.8fr)}.guardian-roster{grid-column:1/-1;display:flex;overflow-x:auto;max-height:none;gap:8px;padding-bottom:8px}.guardian-roster button{min-width:160px}.guardian-catalog>header>span{display:none}.guardian-catalog>header h1{font-size:28px}.guardian-sheet{min-width:0}}
@media(max-width:580px){.catalog-layout{grid-template-columns:1fr}.guardian-heading h2{font-size:26px}.guardian-stage{max-height:340px}.guardian-techniques{padding:20px}.catalog-skills{grid-template-columns:repeat(3,1fr);margin-bottom:16px}.catalog-skills button{min-height:86px}.catalog-facts{grid-template-columns:repeat(3,1fr)}.guardian-passive{margin-bottom:0}.guardian-catalog>header{gap:15px}.home-content>p{font-size:19px}.home-content h1{letter-spacing:4px}.hero-vitals{grid-column:1/-1;margin:3px 0}.compact-sheet .attribute-detail{grid-template-columns:1fr}.compact-sheet .attribute-detail .primary-button{width:100%}.insight-row{font-size:10px}.compact-sheet .attributes-layout{margin-top:5px}.attributes-modal{padding:8px}}
@media(prefers-reduced-motion:reduce){.home-choices button{transition:none}}
.technique-resource-demo{display:grid;gap:15px;margin:19px 0 22px;padding:14px 12px;background:#0c2026aa;border:1px solid #74978833;border-radius:10px}
.resource-demo-row header{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;margin-bottom:8px;color:#aec8bc}.resource-demo-row header b{font-size:12px;font-variant-numeric:tabular-nums;color:#e3ecd9}.resource-demo-row header i{font-style:normal;color:#6e928a;padding:0 4px}
.resource-demo-track{height:12px;background:#06151c;border:1px solid #7eaea433;border-radius:6px;position:relative;isolation:isolate}
.resource-demo-fill,.resource-demo-ghost{display:block;position:absolute;inset:0;border-radius:5px;transform-origin:left;animation:resource-demo-drain 4.2s ease-in-out infinite;background:linear-gradient(90deg,#2a9d75,#9ae4b1);box-shadow:0 0 8px #69dda933}
.resource-demo-ghost{background:#ef827b;box-shadow:none;animation-name:resource-demo-echo;opacity:.75}
.aura .resource-demo-fill{background:linear-gradient(90deg,#246dbb,#99dff6);box-shadow:0 0 8px #81bfff33}.aura .resource-demo-ghost{background:#c4a8fc}
.resource-demo-loss{position:absolute;right:8px;top:-2px;font-size:11px;font-weight:700;color:#ffbbb0;text-shadow:0 1px 5px #06151c;pointer-events:none;animation:resource-demo-loss 4.2s ease-in-out infinite;z-index:2}.aura .resource-demo-loss{color:#cbecff}
@keyframes resource-demo-drain{0%,14%{transform:scaleX(1)}34%,86%{transform:scaleX(var(--remaining-ratio))}96%,100%{transform:scaleX(1)}}
@keyframes resource-demo-echo{0%,21%{transform:scaleX(1)}47%,86%{transform:scaleX(var(--remaining-ratio))}96%,100%{transform:scaleX(1)}}
@keyframes resource-demo-loss{0%,13%{opacity:0;transform:translateY(2px)}22%,44%{opacity:1;transform:translateY(-7px)}62%,100%{opacity:0;transform:translateY(-13px)}}
@media(prefers-reduced-motion:reduce){.resource-demo-fill,.resource-demo-ghost{animation:none;transform:scaleX(var(--remaining-ratio))}.resource-demo-loss{animation:none;opacity:0}}