:root {
  --ink:#f8f3ff; --muted:#b9acd2; --deep:#100b22; --panel:#21173e;
  --purple:#8d5bff; --blue:#4cc9ff; --gold:#ffd76a; --danger:#ff5c78;
  --tile-size:min(15.1vw,74px); --gap:min(1.2vw,6px);
  font-family:Inter,ui-rounded,"Trebuchet MS",system-ui,sans-serif; color:var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--deep);user-select:none;touch-action:none}
button{font:inherit;color:inherit;border:1px solid #69568d;background:#30234f;border-radius:14px;padding:12px 18px;cursor:pointer;transition:transform .14s,filter .14s,box-shadow .14s}
button:hover{filter:brightness(1.15)} button:active{transform:scale(.97)} button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
button.primary{border:0;background:linear-gradient(135deg,#9c67ff,#5c65ea);box-shadow:0 8px 22px #6b43d955;font-weight:800}
.text-button{background:transparent;border-color:transparent;color:var(--muted)}
#app,.screen{width:100%;height:100%}.screen{display:none;position:absolute;inset:0}.screen.active{display:flex}
#menu-screen{align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 25%,#513c8666 0,#21173fbb 40%,#100b22ef 78%),url("assets/generated/dungeons/starless-apex.png") center 28%/cover}
.stars,.stars:before{position:absolute;inset:0;content:"";background-image:radial-gradient(#fff 1px,transparent 1px);background-size:37px 43px;opacity:.3;animation:drift 18s linear infinite}
.stars:before{transform:translate(13px,21px);background-size:61px 53px;opacity:.4}
.menu-card,.panel{position:relative;width:min(88vw,420px);text-align:center;padding:30px 26px;border:1px solid #8f7ab566;border-radius:28px;background:linear-gradient(160deg,#2e2152dd,#17102ddd);box-shadow:0 24px 70px #080510aa, inset 0 1px #ffffff22;backdrop-filter:blur(8px)}
.crest{width:64px;height:64px;margin:0 auto 12px;display:grid;place-items:center;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-size:34px;box-shadow:0 0 28px #ffd76a55}.crest.small{width:50px;height:50px;font-size:26px}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--gold);font-weight:800}h1{font-size:clamp(48px,14vw,68px);line-height:.76;margin:20px 0;text-transform:uppercase;letter-spacing:-.06em}h1 span{color:var(--gold);font-family:Georgia,serif;font-style:italic}h2{font-size:30px;margin:8px 0 20px}.tagline,.muted{color:var(--muted);line-height:1.45}.menu-actions{display:grid;gap:10px;margin-top:26px}.high-score{font-size:12px;color:var(--muted);margin:20px 0 0}.high-score strong{color:var(--gold)}
#tutorial-screen,#credits-screen,#result-screen{align-items:center;justify-content:center;padding:18px;background:radial-gradient(circle at top,#3c2b6c,#100b22 70%)}.tutorial-panel{text-align:left}.tutorial-panel h2{text-align:center}.tutorial-panel>.eyebrow{text-align:center}.tutorial-panel ol{padding-left:22px;color:#ded6eb;line-height:1.4;font-size:14px}.tutorial-panel li{margin:10px 0}.tutorial-panel button{width:100%;margin-top:8px}.tutorial-demo{height:90px;display:flex;align-items:center;justify-content:center;gap:6px}.demo-tile{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;font-weight:900}.drag-path{color:var(--gold);font-size:24px}.glow{box-shadow:0 0 15px currentColor}
#credits-screen .compact-panel{max-height:calc(100dvh - 36px);overflow:auto}.credits-sub{margin:-10px 0 15px;color:var(--muted);font-size:13px}.credits-list{display:grid;gap:9px;margin-bottom:16px;text-align:left}.credit-card{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #ffffff1c;border-radius:12px;background:#0e0a1d88;color:#e9e2f4;font-size:13px;line-height:1.45}.credit-card b{color:var(--gold)}.credit-card small{color:var(--muted)}.credit-card a{color:#72ddff}.credit-icon{display:grid;flex:0 0 27px;height:27px;place-items:center;border-radius:50%;background:#6d4ca755;color:var(--gold);font-weight:900}
.compact-panel{display:grid;gap:10px}.compact-panel p{line-height:1.5}.result-panel{width:min(88vw,380px)}.final-score{display:grid;margin:20px 0;padding:16px;border-block:1px solid #ffffff22;color:var(--muted)}.final-score strong{font-size:42px;color:var(--gold)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0 25px}.stats div{background:#ffffff0a;padding:10px 4px;border-radius:10px}.stats dt{font-size:10px;color:var(--muted)}.stats dd{margin:5px 0 0;font-weight:900;color:var(--gold)}.result-panel button{width:100%;margin-top:8px}
#game-screen{flex-direction:column;max-width:540px;left:50%;transform:translateX(-50%);background:linear-gradient(#15112d,#241744);box-shadow:0 0 60px #000}
.game-hud{height:7%;min-height:45px;display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top,0) 14px 0;background:#100b22dd;border-bottom:1px solid #ffffff16}.game-hud>div{display:grid}.hud-label{text-transform:uppercase;letter-spacing:.13em;font-size:8px;color:var(--muted)}.game-hud strong{font-size:13px}.score-box{text-align:right;margin-left:auto;margin-right:15px}.icon-button{width:36px;height:34px;padding:0;border-radius:9px}
#battlefield{position:relative;height:31%;min-height:180px;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#604994 0,#282052 40%,#15122f 75%)}#battlefield:before{content:"";position:absolute;left:-10%;right:-10%;bottom:-45px;height:100px;border-radius:50%;background:#100d28;box-shadow:0 -10px 30px #8b60ff55}.realm-label{position:absolute;left:12px;top:9px;color:#c7b8df;font:italic 12px Georgia,serif;letter-spacing:.1em}
#enemy-area{position:absolute;inset:20px 0 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}#enemy-sprite{position:relative;width:100px;height:110px;display:grid;place-items:center;font-size:75px;color:#dcb7ff;filter:drop-shadow(0 10px 9px #0008);animation:float 2.4s ease-in-out infinite}#enemy-area.hit #enemy-sprite{animation:hit .28s}.boss #enemy-sprite{transform:scale(1.22);color:var(--gold)}#enemy-name{font:700 14px Georgia,serif;text-shadow:0 2px 4px #000}.enemy-hp{width:150px;height:8px;margin-top:5px;background:#160b22;border-radius:8px;overflow:hidden;border:1px solid #ffffff22}#enemy-hp-fill{height:100%;width:100%;background:linear-gradient(90deg,#c42e66,#ff7191);transition:width .35s}#enemy-countdown{position:absolute;right:calc(50% - 74px);bottom:25px;width:28px;height:28px;display:grid;place-items:center;background:#170d28;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-weight:900;font-size:12px}
#effects-layer{position:absolute;inset:0;pointer-events:none}.float-text{position:absolute;left:50%;top:45%;font-size:24px;font-weight:1000;text-shadow:0 2px 5px #000;animation:rise .9s forwards}.float-text.heal{color:#77f19a}.float-text.combo{top:15%;color:var(--gold);font-style:italic;font-size:31px}.attack-flash{position:absolute;left:50%;top:45%;width:80px;height:8px;background:currentColor;box-shadow:0 0 18px currentColor;transform:translate(-50%,-50%) rotate(-25deg);animation:slash .35s forwards}
.finale-blaze{position:absolute;z-index:12;inset:0;overflow:hidden;opacity:0;transition:opacity .35s}.finale-blaze:before,.finale-blaze:after{content:"";position:absolute;left:50%;top:48%;width:160%;height:16px;background:linear-gradient(90deg,transparent,#ff482e,#fff7b0,#ff482e,transparent);box-shadow:0 0 24px #ff3d20,0 0 60px #ffb13b;transform:translate(-50%,-50%) rotate(-18deg) scaleX(0);transform-origin:center}.finale-blaze:after{transform:translate(-50%,-50%) rotate(18deg) scaleX(0)}.finale-blaze .blaze-ring,.finale-blaze .blaze-core{position:absolute;left:50%;top:48%;border-radius:50%;transform:translate(-50%,-50%)}.finale-blaze .blaze-ring{width:40px;height:40px;border:5px solid #fff3b0;box-shadow:0 0 20px #fff,0 0 65px #ff3b19}.finale-blaze .blaze-core{width:16px;height:16px;background:white;box-shadow:0 0 25px 12px #ffeb83,0 0 75px 35px #ff351d}.finale-blaze strong{position:absolute;left:50%;top:18%;width:100%;color:#fff5c9;font:italic 1000 30px Georgia,serif;letter-spacing:.1em;text-align:center;text-shadow:0 0 8px #fff,0 0 20px #ff3b1f,0 3px 4px #000;transform:translateX(-50%) scale(.7);opacity:0}.finale-charging .finale-blaze{opacity:.65}.finale-charging .blaze-ring{animation:blazeCharge 1.2s ease-in infinite}.finale-blaze.strike{opacity:1}.finale-blaze.strike:before{animation:blazeSlash 1.1s ease-out both}.finale-blaze.strike:after{animation:blazeSlashAlt 1.1s .12s ease-out both}.finale-blaze.strike .blaze-ring{animation:blazeBurst 1.15s ease-out both}.finale-blaze.strike .blaze-core{animation:blazeCore 1.1s ease-out both}.finale-blaze.strike strong{animation:blazeTitle 1.65s .15s ease-out both}.finale-ignited .tile.fire{animation:runeInferno .55s ease-in-out infinite alternate;box-shadow:inset 0 5px 8px #fff7,inset 0 -6px 10px #8d0000,0 0 14px #ff5a2d}.finale-ignited .tile.fire:nth-child(3n){animation-delay:-.18s}.finale-ignited .tile.fire:nth-child(3n+1){animation-delay:-.36s}#enemy-area.finale-struck #enemy-sprite{animation:bossFinalHit .22s linear infinite;filter:brightness(3) drop-shadow(0 0 18px #fff) drop-shadow(0 0 38px #ff3b23)}#enemy-area.finale-dying #enemy-sprite{animation:bossDissolve 1.9s cubic-bezier(.5,0,.8,1) forwards}.finale-impact{animation:battleQuake .12s linear 7}.finale-aftermath:after{content:"";position:absolute;z-index:10;inset:0;background:radial-gradient(circle at 50% 45%,#fff 0,#ffca70 8%,#9e35cb88 28%,transparent 62%);animation:sealAftermath 1.9s ease-out both;pointer-events:none}
#board.finale-ready{cursor:grab;filter:drop-shadow(0 0 10px #ff9b42)}#board.finale-ready:after{content:"DRAG ANY RUNE";position:absolute;z-index:9;left:50%;top:50%;padding:8px 13px;border:1px solid #ffe08a;border-radius:999px;background:#170b20e8;color:#fff2bd;font-size:11px;font-weight:1000;letter-spacing:.12em;white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%);animation:finalMovePrompt .8s ease-in-out infinite alternate}#board.finale-ready .tile.fire{animation:runeInferno .55s ease-in-out infinite alternate;box-shadow:inset 0 5px 8px #fff7,inset 0 -6px 10px #8d0000,0 0 14px #ff5a2d}
.party-section{height:16%;min-height:95px;padding:7px 9px 4px;background:#18102e;border-block:1px solid #ffffff12}#party{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.hero{position:relative;height:58px;padding:0;overflow:hidden;border-radius:10px;border:1px solid var(--hero);background:linear-gradient(145deg,#372653,#1a122d)}.hero .portrait{font-size:26px;filter:drop-shadow(0 2px 3px #000)}.hero .hero-name{position:absolute;bottom:2px;left:0;right:0;font-size:8px;font-weight:800}.hero .charge{position:absolute;inset:auto 0 0;height:4px;background:var(--hero);transform-origin:left;transition:transform .25s}.hero .cooldown{position:absolute;top:2px;right:3px;font-size:9px;padding:2px 4px;background:#110b20cc;border-radius:6px}.hero.ready{box-shadow:0 0 14px var(--hero);animation:ready 1s infinite}.hero:disabled{filter:grayscale(.7);cursor:not-allowed}.player-health{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:9px}.player-health>span{font-weight:900;color:#ff91aa}.player-hp-track{height:7px;flex:1;background:#0e091a;border-radius:10px;overflow:hidden}.player-hp-track div{height:100%;background:linear-gradient(90deg,#e73d64,#ff8c9f);transition:width .3s}.player-health strong{width:72px;text-align:right}
.puzzle-section{flex:1;min-height:0;padding:5px 7px calc(6px + env(safe-area-inset-bottom,0));background:linear-gradient(#241640,#130d25)}.move-row{height:25px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}#status-text{width:115px;white-space:nowrap}.timer-track{height:5px;flex:1;background:#0d0818;border-radius:5px;overflow:hidden}#timer-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--danger),var(--gold),var(--blue));transform-origin:left}
#board{position:relative;margin:auto;width:calc(var(--tile-size)*6 + var(--gap)*5);height:calc(var(--tile-size)*5 + var(--gap)*4);max-height:100%;touch-action:none}.tile{position:absolute;width:var(--tile-size);height:var(--tile-size);display:grid;place-items:center;border-radius:22%;color:white;font-size:calc(var(--tile-size)*.48);font-weight:1000;border:2px solid #ffffff66;box-shadow:inset 0 5px 8px #ffffff33,inset 0 -6px 10px #0004,0 3px 4px #0008;transition:transform .14s ease,opacity .2s,filter .15s;will-change:transform}.tile:after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px solid #ffffff35}.tile.selected{z-index:5;filter:brightness(1.25);box-shadow:0 0 18px currentColor,inset 0 4px #ffffff55;transform:var(--pos) scale(1.12)!important}.tile.clearing{animation:clear .35s forwards}.fire{background:linear-gradient(145deg,#ff8b55,#bd2948);color:#ffd4b8}.water{background:linear-gradient(145deg,#58d8ff,#2867d7);color:#d9f8ff}.nature{background:linear-gradient(145deg,#7ee67a,#268e59);color:#e5ffcf}.light{background:linear-gradient(145deg,#ffe66e,#d28b28);color:#fffbd5}.dark{background:linear-gradient(145deg,#bd74ec,#61339f);color:#efd9ff}.heart{background:linear-gradient(145deg,#ff8dac,#d83d7c);color:#ffe0eb}.rainbow{background:conic-gradient(#ff526e,#ffd95c,#65e489,#55cfff,#a779ff,#ff65cd,#ff526e);color:#fff;box-shadow:inset 0 4px 9px #fff8,inset 0 -6px 10px #44276a88,0 0 12px #fff8}.rainbow:after{border-color:#fff9;box-shadow:0 0 8px #fff}
#board{position:relative;margin:auto;width:calc(var(--tile-size)*6 + var(--gap)*5);height:calc(var(--tile-size)*5 + var(--gap)*4);max-height:100%;touch-action:none}.tile{position:absolute;width:var(--tile-size);height:var(--tile-size);display:grid;place-items:center;border-radius:22%;color:white;font-size:calc(var(--tile-size)*.48);font-weight:1000;border:2px solid #ffffff66;box-shadow:inset 0 5px 8px #ffffff33,inset 0 -6px 10px #0004,0 3px 4px #0008;transition:transform .14s ease,opacity .2s,filter .15s;will-change:transform}.tile:after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px solid #ffffff35}.tile.selected{z-index:5;filter:brightness(1.25);box-shadow:0 0 18px currentColor,inset 0 4px #ffffff55;transform:var(--pos) scale(1.12)!important}.tile.clearing{animation:clear .35s forwards}.fire{background:linear-gradient(145deg,#ff8b55,#bd2948);color:#ffd4b8}.water{background:linear-gradient(145deg,#58d8ff,#2867d7);color:#d9f8ff}.nature{background:linear-gradient(145deg,#7ee67a,#268e59);color:#e5ffcf}.light{background:linear-gradient(145deg,#ffe66e,#d28b28);color:#fffbd5}.dark{background:linear-gradient(145deg,#bd74ec,#61339f);color:#efd9ff}.heart{background:linear-gradient(145deg,#ff8dac,#d83d7c);color:#ffe0eb}.rainbow{background:conic-gradient(#ff526e,#ffd95c,#65e489,#55cfff,#a779ff,#ff65cd,#ff526e);color:#fff;box-shadow:inset 0 4px 9px #fff8,inset 0 -6px 10px #44276a88,0 0 12px #fff8}.rainbow:after{border-color:#fff9;box-shadow:0 0 8px #fff}.rune-icon{position:relative;z-index:1;width:64%;height:64%;overflow:visible;color:#fff;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px #0005);pointer-events:none}.rune-icon.filled{fill:#fff;stroke:none}.rune-symbol-fallback{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.modal{display:none;position:fixed;z-index:20;inset:0;align-items:center;justify-content:center;background:#080510cc;backdrop-filter:blur(5px)}.modal.open{display:flex}.modal .panel{width:min(82vw,330px)}

/* Story prologue and forest tutorial. */
.story-screen{align-items:flex-end!important;background-image:url("assets/generated/story/forest-final-test.png")!important;background-position:center!important;background-size:cover!important;overflow:hidden}.story-screen.fall-scene{background-image:url("assets/generated/story/fall-into-the-ruin.png")!important}.story-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 24%,#0c0811aa 62%,#08050def 100%);transition:background .35s}.fall-scene .story-shade{background:linear-gradient(180deg,#08050d22,#11091c77 55%,#08050df5)}.story-panel{width:min(100%,540px);border-radius:24px 24px 0 0;border-bottom:0;padding:22px 24px calc(18px + env(safe-area-inset-bottom,0));background:linear-gradient(160deg,#271b47f2,#100b21fa);text-align:left}.story-panel h2{min-height:36px;text-align:left;margin:5px 0 8px}.story-panel>.eyebrow{text-align:left;margin:0}.story-copy{min-height:64px;margin:0;color:#eee7f8;font-size:14px;line-height:1.5}.story-progress{display:flex;justify-content:center;gap:7px;margin:14px 0 4px}.story-progress span{width:7px;height:7px;border-radius:50%;background:#74638e}.story-progress span.active{width:20px;border-radius:7px;background:var(--gold)}
.novel-screen{align-items:stretch;justify-content:center;overflow:hidden;background:#050408}.novel-backdrop{position:absolute;inset:0;background-position:center;background-size:cover;transition:opacity .25s,filter .25s}.novel-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08051010 30%,#080510b8 78%,#080510f5)}.novel-character{position:absolute;bottom:12%;width:min(82vh,680px);height:82%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 20px #000b);transition:opacity .22s,transform .28s}.novel-character.left{left:clamp(-260px,-28vh,-120px)}.novel-character.right{right:clamp(-260px,-28vh,-120px);transform:scaleX(-1)}.novel-character.inactive{opacity:.42;filter:grayscale(.55) brightness(.65) drop-shadow(0 12px 20px #000b)}.novel-character.hidden{opacity:0}.novel-blackout{position:absolute;inset:0;background:#020204;opacity:0;pointer-events:none;transition:opacity .4s}.novel-screen.black .novel-blackout{opacity:1}.novel-dialogue{position:absolute;z-index:3;left:3%;right:3%;bottom:calc(3% + env(safe-area-inset-bottom,0));min-height:142px;display:grid;grid-template-rows:auto 1fr auto;gap:6px;padding:18px 20px;text-align:left;border:1px solid #b89be566;border-radius:18px;background:linear-gradient(135deg,#211439f5,#0d0918fa);box-shadow:0 12px 35px #000c}.novel-dialogue span{color:var(--gold);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.novel-dialogue strong{font-size:16px;line-height:1.5}.novel-dialogue em{justify-self:end;color:#bbaed0;font-size:10px;font-style:normal}.novel-skip{position:absolute;z-index:4;right:10px;top:calc(8px + env(safe-area-inset-top,0));font-size:11px}
#guide-overlay{display:none;position:fixed;z-index:60;inset:0;pointer-events:none}#guide-overlay.active{display:block}.guide-mask{position:absolute;background:#09070dbd;pointer-events:auto}.guide-mask.top{left:0;right:0;top:0}.guide-mask.bottom{left:0;right:0;bottom:0}.guide-mask.left{left:0}.guide-mask.right{right:0}#guide-hand{position:absolute;z-index:2;font-size:34px;filter:drop-shadow(0 3px 4px #000);animation:guidePoint .8s ease-in-out infinite}.guide-bubble,#guide-bubble{position:absolute;z-index:3;width:min(84vw,350px);padding:13px 15px;border:1px solid #ffd76a88;border-radius:15px;background:#171025f5;box-shadow:0 10px 28px #000b;pointer-events:auto}#guide-bubble span{color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}#guide-bubble p{margin:5px 0 0;font-size:13px;line-height:1.4}#guide-bubble button{display:none;width:100%;margin-top:10px;padding:8px}#guide-bubble.requires-next button{display:block}.tile.sealed{filter:grayscale(.85) brightness(.55)}.tile.sealed:before{content:"×";position:absolute;z-index:2;color:#fff;font-size:.7em;text-shadow:0 2px 5px #000}.boss-notice{position:absolute;z-index:7;left:50%;top:8%;width:82%;padding:10px;border:1px solid #ef83ff;border-radius:12px;background:#160d24ee;text-align:center;transform:translateX(-50%);animation:abilityNotice 2.4s both}.boss-notice strong{display:block;color:#ef83ff}.boss-notice span{font-size:11px}.game-hud.tutorial .score-box{visibility:hidden}
.tile.tutorial-source{z-index:4;box-shadow:0 0 0 3px #fff,0 0 24px var(--gold),inset 0 5px 8px #ffffff55;animation:ready .7s infinite}.tile.tutorial-destination{z-index:3;box-shadow:0 0 0 3px #64e8ff,0 0 22px #64e8ff}.tile.tutorial-destination:before{content:"↓";position:absolute;top:-30px;color:#fff;font-size:24px;text-shadow:0 2px 4px #000}

/* Imported H5 Games artwork; original gradients and glyphs remain as fallbacks. */
#battlefield{background-size:cover;background-position:center 43%;transition:background-image .45s}
#battlefield:before{background:#100d28cc}.realm-label{color:#f2e9ff;text-shadow:0 2px 5px #000}
#enemy-sprite{width:130px;height:120px}
#enemy-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}#enemy-glyph{display:none}.boss #enemy-sprite{width:190px;height:145px;transform:none}
.weakness{margin-top:2px;padding:2px 7px;border:1px solid currentColor;border-radius:8px;background:#0d0918cc;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.weakness.fire{color:#ff8b6c}.weakness.water{color:#67d9ff}.weakness.nature{color:#7ee68a}.weakness.light{color:#ffe576}.weakness.dark{color:#c98aff}
.hero{min-width:0}.hero .portrait{position:absolute;inset:0}.hero .portrait img{width:100%;height:100%;object-fit:cover}.hero .portrait span{position:absolute;inset:0;display:grid;place-items:center;z-index:-1}
.hero .hero-role{position:absolute;top:3px;left:3px;max-width:45px;padding:1px 3px;border-radius:4px;background:#100b22b8;color:#ddd2ef;font-size:6px;line-height:1.15;text-transform:uppercase;text-align:left}.hero .hero-name{bottom:5px;text-shadow:0 1px 3px #000}
#game-title span{display:block;font-size:.61em;letter-spacing:-.07em;margin-top:.28em}
.copyright{margin:12px 0 0;color:#8f82a6;font-size:8px;line-height:1.5;letter-spacing:.05em;text-transform:uppercase}
.volume-control{display:grid;grid-template-columns:1fr auto;gap:5px 12px;text-align:left;padding:9px 5px;color:var(--muted);font-size:13px}.volume-control output{color:var(--gold);font-weight:900}.volume-control output:after{content:"%"}.volume-control input{grid-column:1/-1;width:100%;height:6px;accent-color:var(--purple);cursor:grab}.volume-control input:active{cursor:grabbing}.volume-control input:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
#skill-cut-in{position:fixed;z-index:40;top:0;bottom:0;left:50%;width:min(100%,540px);display:none;overflow:hidden;pointer-events:none;transform:translateX(-50%);background:#25252bd1;backdrop-filter:grayscale(1) brightness(.48) blur(1px)}#skill-cut-in.active{display:block;animation:cutInBackdrop 2s ease both}.skill-streaks{display:none}#skill-character-art{position:absolute;right:clamp(-230px,-22vh,-130px);bottom:-1.5vh;width:min(96vh,800px);height:min(96vh,800px);max-width:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(-16px 4px 18px #000a);animation:heroCutIn 2s cubic-bezier(.2,.8,.2,1) both}.skill-callout{position:absolute;z-index:2;left:5%;bottom:12%;display:grid;max-width:78%;padding:11px 16px;border-left:4px solid var(--skill-color);background:linear-gradient(90deg,#17171ced 25%,transparent);text-align:left;text-shadow:0 2px 5px #000;animation:calloutCutIn 2s ease both}.skill-callout span{color:var(--skill-color);font-size:13px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.skill-callout strong{font:italic 800 clamp(25px,9vw,48px) Georgia,serif;line-height:1;color:white}
#skill-cut-in.preview,#skill-cut-in.preview #skill-character-art,#skill-cut-in.preview .skill-callout{animation:none!important;opacity:1}
.party-section{height:auto;min-height:0;flex:0 0 auto}.shield-health{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:8px;visibility:hidden;opacity:0;transition:opacity .2s}.shield-health.active{visibility:visible;opacity:1}.shield-health>span{width:34px;color:var(--gold);font-weight:900}.shield-track{height:6px;flex:1;overflow:hidden;border:1px solid #ffd76a66;border-radius:8px;background:#17100b}.shield-track div{height:100%;width:0;background:linear-gradient(90deg,#e8a72d,#fff18a);box-shadow:0 0 9px #ffd76a;transition:width .3s}.shield-health strong{width:72px;text-align:right;color:#ffeaa0}
.move-row #status-text{overflow:hidden;text-overflow:ellipsis}
.float-text.shield{color:var(--gold);font-size:18px}.ability-notice{position:absolute;z-index:5;left:50%;top:12%;width:min(86%,360px);display:grid;gap:3px;padding:10px 15px;border:1px solid #ffd76a99;border-radius:12px;background:#151020f0;box-shadow:0 8px 25px #000a,0 0 18px #8d5bff55;text-align:center;animation:abilityNotice 3s ease both}.ability-notice strong{color:var(--gold);font:italic 800 19px Georgia,serif}.ability-notice span{color:#f3edff;font-size:12px;line-height:1.35}
@keyframes float{50%{transform:translateY(-7px)}}@keyframes drift{to{transform:translateY(43px)}}@keyframes rise{to{transform:translate(-10px,-70px);opacity:0}}@keyframes hit{30%{transform:translateX(14px) rotate(5deg);filter:brightness(3)}}@keyframes slash{to{transform:translate(-50%,-50%) rotate(-25deg) scaleX(2);opacity:0}}@keyframes clear{50%{transform:var(--pos) scale(1.25)}to{transform:var(--pos) scale(0);opacity:0}}@keyframes ready{50%{filter:brightness(1.35)}}@keyframes cutInBackdrop{0%,100%{opacity:0}8%,95%{opacity:1}}@keyframes heroCutIn{0%{transform:translateX(105%) skewX(-6deg)}12%{transform:translateX(0) skewX(0)}95%{transform:translateX(0);opacity:1}100%{transform:translateX(-6%);opacity:0}}@keyframes calloutCutIn{0%{transform:translateX(-110%);opacity:0}14%,95%{transform:translateX(0);opacity:1}100%{transform:translateX(8%);opacity:0}}@keyframes abilityNotice{0%{transform:translate(-50%,-12px);opacity:0}8%,88%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,-5px);opacity:0}}@keyframes streakSlide{to{transform:translateX(-80px)}}
@keyframes runeInferno{to{filter:brightness(1.55) saturate(1.35);transform:var(--pos) scale(1.05)}}@keyframes blazeCharge{0%{transform:translate(-50%,-50%) scale(.4);opacity:.25}70%{opacity:1}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}@keyframes blazeSlash{0%{transform:translate(-50%,-50%) rotate(-18deg) scaleX(0)}35%{transform:translate(-50%,-50%) rotate(-18deg) scaleX(1)}100%{transform:translate(-50%,-50%) rotate(-18deg) scaleX(1.3);opacity:0}}@keyframes blazeSlashAlt{0%{transform:translate(-50%,-50%) rotate(18deg) scaleX(0)}35%{transform:translate(-50%,-50%) rotate(18deg) scaleX(1)}100%{transform:translate(-50%,-50%) rotate(18deg) scaleX(1.3);opacity:0}}@keyframes blazeBurst{0%{transform:translate(-50%,-50%) scale(.25);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}@keyframes blazeCore{0%{transform:translate(-50%,-50%) scale(.25)}45%{transform:translate(-50%,-50%) scale(5);opacity:1}100%{transform:translate(-50%,-50%) scale(16);opacity:0}}@keyframes blazeTitle{20%{opacity:1;transform:translateX(-50%) scale(1.12)}70%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.25)}}@keyframes bossFinalHit{25%{transform:translate(-9px,4px) rotate(-2deg)}75%{transform:translate(9px,-3px) rotate(2deg)}}@keyframes bossDissolve{0%{opacity:1;transform:scale(1);filter:brightness(2) saturate(1.5)}18%{transform:scale(1.12);filter:brightness(5)}55%{opacity:.8;transform:scale(.92) translateY(-8px);filter:brightness(2) hue-rotate(55deg) blur(1px)}100%{opacity:0;transform:scale(.2) translateY(-80px) rotate(9deg);filter:brightness(6) blur(8px)}}@keyframes battleQuake{25%{transform:translate(4px,-2px)}75%{transform:translate(-4px,2px)}}@keyframes sealAftermath{0%{opacity:1;transform:scale(.2)}38%{opacity:.9;transform:scale(1.1)}100%{opacity:0;transform:scale(1.8)}}
@keyframes finalMovePrompt{to{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 18px #ff8b39}}
.novel-screen{right:auto;left:50%;width:min(100%,540px);max-width:540px;transform:translateX(-50%)}
.novel-character.lilith{width:min(55vh,470px);height:72%;right:-50px}
#guide-hand{color:var(--gold);font-size:38px;font-weight:1000;line-height:1}
#defeat-banner{display:none;position:fixed;z-index:70;inset:0;align-items:center;justify-content:center;pointer-events:none;background:#09050dcc;text-transform:uppercase}#defeat-banner.active{display:flex;animation:defeatBackdrop 1.55s both}#defeat-banner span{padding:12px 34px;border-block:2px solid #ff5c78;color:#ff718a;font:italic 1000 clamp(54px,18vw,92px) Georgia,serif;letter-spacing:.08em;text-shadow:0 0 22px #ff214f,0 5px 8px #000;animation:defeatText 1.55s cubic-bezier(.15,.8,.2,1) both}
@keyframes guidePoint{50%{transform:translateY(8px)}}
@keyframes defeatBackdrop{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}@keyframes defeatText{0%{opacity:0;transform:scale(1.8)}18%,78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.96)}}
@media (min-width:700px){body{background:radial-gradient(circle,#322458,#0c0818)}:root{--tile-size:min(10vh,74px);--gap:6px}}
@media (max-height:700px){#battlefield{height:27%;min-height:136px}.party-section{height:auto;min-height:0}.hero{height:47px}#enemy-sprite{height:90px;font-size:60px}.tile{font-size:calc(var(--tile-size)*.4)}}

/* Imported elemental emblems retain the symbol in the DOM for screen readers and fallback. */
.tile-icon{position:relative;z-index:1;width:72%;height:72%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px #0005)}
.tile-symbol{position:relative;z-index:1}
.tile-icon+.tile-symbol{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}