:root{color-scheme:dark;--gold:#e2c07c;--jade:#77d3b0;--text:#e8e8de;--muted:#93a69b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#0b161c;color:var(--text);font-family:'Trebuchet MS',Arial,sans-serif}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible{outline:2px solid #96eac2;outline-offset:2px}img{max-width:100%;display:block}[hidden]{display:none!important}.preview-screen{height:100%;display:grid;grid-template-rows:43px minmax(240px,1fr) 124px 39px;position:relative}.battle-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 19px;border-bottom:1px solid #bda26340;background:linear-gradient(#20302c,#0e1b20);position:relative;z-index:20}.battle-title{font-family:Georgia,serif;font-size:11px;font-weight:400;letter-spacing:1.5px;color:#d1c6a5}.battle-title b{color:var(--gold);font-weight:400}.battle-header>span:nth-child(2){font-size:8px;color:#bac8b4;letter-spacing:1px;text-transform:uppercase}.battle-header>div{display:flex;gap:6px}.battle-header button{border:1px solid #9a90604d;background:#132125;padding:5px 11px;font-size:9px;border-radius:2px;min-height:27px}.battle-header button[aria-pressed=true]{background:#91c9a722;color:var(--jade);border-color:#89c9a78c}.battle-header button:disabled{color:#647c6d}.battlefield{position:relative;overflow:hidden;background:linear-gradient(0deg,#09151c55,#071a2940),url(assets/temple-arena.webp) center 57%/cover;isolation:isolate}.field-light{position:absolute;inset:0;background:radial-gradient(ellipse at 48% 15%,#f4d38b29,transparent 70%);pointer-events:none}.field-terrain{position:absolute;bottom:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;z-index:3;pointer-events:none;animation:terrain-in .5s ease-out}.field-unit{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:clamp(95px,16vw,180px);height:clamp(95px,16vw,180px);transform:translate(-50%,-82%);z-index:var(--depth);border:0;background:none;padding:0;color:inherit}.unit-art{width:100%;height:100%;display:block;transform-origin:50% 80%;filter:drop-shadow(0 9px 6px #0008);will-change:transform}.unit-label{font-size:8px;position:absolute;bottom:1px;left:0;right:0;text-align:center;text-shadow:0 1px 4px #000,0 1px 4px #000;color:#e6e4cd;letter-spacing:.2px;z-index:2}.unit-hp{position:absolute;bottom:-5px;left:26%;right:26%;height:3px;border-radius:3px;background:#040b18c9;box-shadow:0 0 0 1px #c0ba9433;overflow:hidden;z-index:2}.unit-hp>i{display:block;height:100%;background:linear-gradient(#ace3ab,#61976c);transition:width .4s}.field-unit.enemy .unit-hp>i{background:linear-gradient(#e4a18b,#bf665a)}.field-unit.is-target:after,.field-unit.is-actor:after{content:'';position:absolute;left:25%;right:25%;bottom:8%;height:12%;border:1px solid #eace8ddd;border-radius:50%;box-shadow:0 0 12px #ffbf6a99,inset 0 0 12px #eab06633;z-index:-1}.field-unit.is-actor:after{border-color:#74e0c6;box-shadow:0 0 12px #5ddbad99}.field-unit.is-ko .unit-label{color:#ac9896}.field-unit.is-ready .unit-art{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--element) 65%,transparent))}.field-unit.is-hit .unit-art{filter:brightness(1.4) drop-shadow(0 0 5px #e6c885);transition:filter .12s}.field-unit.is-attacking{z-index:110}.field-unit:disabled{opacity:1}.unit-barrier{position:absolute;inset:25% 10% 6%;border:1px solid #91dcec50;border-radius:50%;background:radial-gradient(ellipse,transparent,#88d8fc08);box-shadow:0 0 11px #acdafa44;pointer-events:none}.unit-barrier[hidden]{display:none}
.battle-hud{position:relative;z-index:120;background:linear-gradient(#1c2d2e,#0b161d);border-top:1px solid #d7bc724d;padding:11px 20px 8px}.hud-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:8px;color:#c3cab4;letter-spacing:.4px}.hud-heading small{font-size:7px;text-transform:uppercase;color:#91baa2}.squad-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.squad-unit{display:grid;grid-template-rows:58px 25px;position:relative;background:#0b1720;border:1px solid #929c7033;transition:border-color .2s}.squad-button{width:100%;background:linear-gradient(125deg,#36564229,#07151d);border:0;display:flex;gap:10px;align-items:center;padding:5px 8px;text-align:left;min-width:0}.squad-button>img{width:44px;height:49px;object-fit:contain;flex-shrink:0}.squad-button>span{min-width:0;flex-grow:1;display:block}.squad-button strong{font-family:Georgia,serif;font-size:15px;font-weight:400;display:block;line-height:1.2}.squad-button small{font-size:7px;color:#99b2a2;display:block;margin-top:4px;line-height:1.2}.hud-hp,.hud-spirit{height:3px;width:100%;display:block;background:#030b168c;margin-top:4px;overflow:hidden}.hud-hp>i,.hud-spirit>i{display:block;height:100%;background:linear-gradient(#b1d8a7,#5e9570);transition:width .3s}.hud-spirit>i{background:linear-gradient(#e6d598,#b6904d)}.skill-button{display:flex;align-items:center;justify-content:center;gap:6px;background:#b1b27108;border:0;border-top:1px solid #97a27b33;font-size:7px;letter-spacing:.8px;text-transform:uppercase;color:#dbcba0;min-height:25px}.skill-button>img{height:18px;width:18px}.skill-button:disabled{color:#789385}.squad-unit.is-ready{border-color:#efd38d8c;box-shadow:0 0 8px #c9a55822}.squad-unit.is-ready .skill-button{color:#fae6a8;background:linear-gradient(110deg,#dbb56535,#0d1d2199);text-shadow:0 0 8px #fdd371}.squad-unit.is-pending .squad-button{background:linear-gradient(125deg,#5b927546,#0d1a2199)}.squad-unit.is-spent .squad-button{opacity:.55}.squad-unit.is-ko{opacity:.45}.battle-note{position:relative;z-index:121;margin:0;background:#09161d;color:#9fb4a5;font-size:9px;padding:9px 20px;border-top:1px solid #a8aa7330;line-height:1.5;display:flex;align-items:center;overflow:hidden}
.start-overlay,.result-overlay{position:absolute;inset:0;z-index:130;display:grid;place-content:center;background:linear-gradient(110deg,#071421dc,#091a2880);text-align:center;padding:20px}.start-panel{width:min(520px,100%);padding:20px 35px 26px;border:1px solid #c9b27177;background:radial-gradient(ellipse at top,#1f3734d9,#0a1623f0);box-shadow:0 15px 60px #0008}.start-panel>img{margin:0 auto 12px;width:41px;height:41px}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:7px;color:var(--gold);display:block}.start-panel h1{font-family:Georgia,serif;font-size:38px;font-weight:400;line-height:1.12;margin:12px 0 15px;text-shadow:0 3px 10px #0005}.start-panel h1 em{color:var(--gold);font-style:normal}.start-panel p{font-size:10px;line-height:1.9;color:#aec2b0;margin:0 0 17px}.gold-button{border:1px solid #efcf8d;background:linear-gradient(110deg,#e5d39e,#c89e4f);color:#1e2418;box-shadow:inset 0 -2px 0 #4a47224d,0 8px 14px #0006;padding:11px 20px;min-height:37px;letter-spacing:1px;text-transform:uppercase;font-size:8px;font-weight:700}.gold-button:disabled{opacity:.65}.demo-note{font-size:7px;display:block;color:#7f9d86;margin-top:15px;line-height:1.7}.load-error{color:#f2b490;font-size:9px;display:block;margin-top:11px}.result-overlay{background:radial-gradient(ellipse,#17293abe,#08151fe0);z-index:145}.result-overlay>div{max-width:590px;width:100%}.result-overlay img{height:min(210px,35vh);width:100%;object-fit:contain;filter:drop-shadow(0 0 14px #d6b7612a);animation:result-in .6s ease-out}.result-overlay p{font-size:9px;color:#b3c2ac;margin:15px 0 20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cutin{position:absolute;inset:0;z-index:115;pointer-events:none;overflow:visible;isolation:isolate;animation:cutin-arrive .3s ease-out}.cutin-aura{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--skill-color) 13%,transparent),transparent 90%);border-block:1px solid color-mix(in srgb,var(--skill-color) 35%,transparent);box-shadow:inset 0 0 80px color-mix(in srgb,var(--skill-color) 17%,transparent)}.cutin>img{position:absolute;left:0;top:0;width:60%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--skill-color) 27%,transparent));animation:cinematic-hero 1.75s ease-out}.cutin-copy{position:absolute;right:5%;top:27%;width:40%;text-align:left;z-index:4;text-shadow:0 2px 9px #000,0 4px 15px #000}.cutin-copy>span{font-size:7px;letter-spacing:1.8px;text-transform:uppercase;color:#e3d4a6}.cutin-copy h2{font-family:Georgia,serif;font-size:clamp(22px,3.5vw,40px);line-height:1.08;font-weight:400;color:var(--skill-color);margin:13px 0 14px;text-shadow:0 2px 0 #553d30,0 3px 12px #000}.cutin-copy small{font-size:9px;color:#cfdbbf;letter-spacing:1px}.cutin #cutin-fx{position:absolute;left:70%;top:50%;width:min(43%,300px);aspect-ratio:3/4;transform:translate(-50%,-50%);background-size:400% 200%;background-repeat:no-repeat;z-index:3}.damage-pop{position:absolute;top:5%;left:50%;display:flex;transform:translateX(-50%);animation:damage-rise 1s ease-out forwards;pointer-events:none;z-index:140;filter:drop-shadow(0 2px 3px #000);white-space:nowrap}.damage-digit{display:block;height:24px;width:24px;margin-inline:-3px;background-image:url(assets/combat-digits-gold.webp);background-size:96px 72px}.damage-pop.heal{filter:hue-rotate(55deg) drop-shadow(0 2px 3px #000)}.combat-callout{position:absolute;z-index:141;left:50%;top:8%;transform:translateX(-50%);width:min(245px,70%);pointer-events:none;display:flex;flex-direction:column;gap:2px;animation:label-burst 1.5s forwards}.combat-callout img{height:49px;width:100%;object-fit:contain}.impact-burst{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,#fff3abcc,#eda15466 27%,transparent 68%);box-shadow:0 0 20px #f5c48b66;animation:impact .5s ease-out forwards;pointer-events:none;z-index:139}
@keyframes terrain-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes cutin-arrive{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:none}}@keyframes cinematic-hero{0%{transform:translateX(-30px) scale(.96)}25%{transform:translateX(0) scale(1)}100%{transform:translateX(7px) scale(1.02)}}@keyframes damage-rise{0%{opacity:0;transform:translate(-50%,12px) scale(.7)}20%{opacity:1;transform:translate(-50%,-5px) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-55px) scale(.9)}}@keyframes label-burst{0%{opacity:0;transform:translateX(-50%) scale(.6)}20%{opacity:1;transform:translateX(-50%) scale(1.07)}75%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-20px)}}@keyframes impact{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}@keyframes result-in{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@media(max-width:620px){.preview-screen{grid-template-rows:39px minmax(240px,1fr) 134px 49px}.battle-header{padding-inline:10px;gap:8px}.battle-title{font-size:8px;letter-spacing:1px}.battle-title b{display:block;line-height:1.5}.battle-header>span:nth-child(2){font-size:6px;letter-spacing:.5px;max-width:97px;text-align:center}.battle-header button{font-size:8px;padding:4px 9px;min-height:27px}.battle-header #reset-button span{display:none}.battle-hud{padding:10px 9px 8px}.hud-heading{font-size:6px;letter-spacing:.2px;gap:10px;line-height:1.5}.hud-heading small{font-size:6px;letter-spacing:.1px;text-align:right}.squad-strip{gap:5px}.squad-unit{grid-template-rows:78px 24px}.squad-button{flex-direction:column;gap:0;padding:3px 4px 5px;text-align:center}.squad-button>img{height:37px;width:40px}.squad-button>span{width:100%}.squad-button strong{font-size:11px}.squad-button small{font-size:5px;margin-top:2px}.hud-hp,.hud-spirit{height:2px;margin-top:3px}.skill-button{font-size:5px;letter-spacing:.1px;gap:2px}.skill-button>img{width:15px;height:15px}.battle-note{font-size:7px;line-height:1.7;padding:7px 11px}.field-unit{width:clamp(93px,27vw,145px);height:clamp(93px,27vw,145px)}.unit-label{font-size:6px}.start-overlay{padding:15px}.start-panel{padding:18px 22px 23px}.start-panel h1{font-size:33px}.start-panel p{font-size:9px}.demo-note{font-size:6px}.start-panel>img{width:36px;height:36px}.gold-button{font-size:7px;letter-spacing:.7px;padding:11px 15px}.cutin>img{left:-2%;width:70%}.cutin-copy{right:3%;width:44%;top:30%}.cutin-copy h2{font-size:22px}.cutin-copy>span{font-size:5px;letter-spacing:1px}.cutin-copy small{font-size:7px}.cutin #cutin-fx{width:55%;left:70%}.combat-callout{width:min(180px,70%)}.combat-callout img{height:37px}.damage-digit{height:20px;width:20px;background-size:80px 60px;margin-inline:-3px}.result-overlay img{height:180px}.result-overlay p{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.damage-pop,.combat-callout{opacity:1}.cutin{animation:none}.impact-burst{display:none}}