@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--ink:#f2ead9;--muted:#aaa394;--gold:#d8b76b;--gold2:#846537;--panel:rgba(12,15,22,.91);--line:rgba(216,183,107,.24);--fire:#e85d3f;--nature:#55a96b;--water:#55aee8;--stone:#d39a55;--wind:#a68ce0}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080a10;color:var(--ink);font-family:Inter,system-ui,sans-serif}button,a{font:inherit}.hidden{display:none!important}button{color:inherit}.start-screen{min-height:100dvh;display:grid;place-items:center;background:url('assets/art/grimorio-key-art.png') center/cover fixed;position:relative;overflow:hidden}.start-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,5,9,.96),rgba(3,5,9,.76) 46%,rgba(3,5,9,.12)),linear-gradient(0deg,rgba(3,5,9,.75),transparent 55%)}.back-link{position:absolute;z-index:2;top:24px;left:28px;color:#d7d9d3;text-decoration:none;font-size:13px}.start-content{position:relative;z-index:1;width:min(610px,calc(100% - 36px));margin-right:min(38vw,620px);text-align:center}.eyebrow{font:700 11px/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.28em;color:var(--gold)}.start-content h1{font:700 clamp(42px,6vw,76px)/.96 Cinzel,serif;letter-spacing:.07em;margin:12px 0 18px;text-shadow:0 4px 32px #000}.start-content h1 span{font-size:.58em;letter-spacing:.2em}.intro{color:#c9cbc6;line-height:1.65;max-width:550px;margin:0 auto 24px}.difficulty{border:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px}.difficulty legend{position:absolute;clip:rect(0 0 0 0)}.difficulty label{cursor:pointer}.difficulty input{position:absolute;opacity:0}.difficulty span{display:flex;flex-direction:column;gap:4px;border:1px solid rgba(255,255,255,.14);background:rgba(7,9,13,.78);padding:12px 5px;border-radius:4px;transition:.2s}.difficulty small{color:#9ea29b;font-size:10px}.difficulty input:checked+span{border-color:var(--gold);background:rgba(94,70,30,.42);box-shadow:0 0 22px rgba(216,183,107,.12)}.primary-button{border:1px solid #e0c276;background:linear-gradient(#80632e,#4e391c);padding:13px 24px;border-radius:3px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 18px #0008,inset 0 1px #f4dc9b66}.primary-button:hover{filter:brightness(1.14)}.start-links{display:flex;justify-content:center;gap:22px;margin-top:16px}.start-links button,.start-links a,.top-actions button,.text-button{border:0;background:none;color:#bbb7aa;text-decoration:none;cursor:pointer;font-size:12px}.start-links a:hover,.start-links button:hover{color:var(--gold)}
.game-screen{min-height:100dvh;background:radial-gradient(circle at 50% 25%,rgba(75,64,106,.18),transparent 35%),linear-gradient(rgba(5,7,12,.66),rgba(5,7,12,.9)),url('assets/art/grimorio-key-art.png') center/cover fixed;padding-bottom:24px}.topbar{height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 22px;border-bottom:1px solid var(--line);background:#080a10e8;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.brand,.panel-title{display:flex;align-items:center;gap:10px}.brand-mark,.panel-title>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--gold2);border-radius:50%;color:var(--gold)}.brand div,.panel-title div{display:flex;flex-direction:column}.brand b{font:600 15px Cinzel,serif}.brand small,.panel-title small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.13em}.route{display:flex;align-items:center;gap:6px}.route-node{width:34px;height:34px;border:1px solid #5d5749;background:#13151b;color:#8c887e;border-radius:50%;display:grid;place-items:center;font:700 12px Cinzel}.route-node.active{border-color:var(--gold);color:#ffe39a;box-shadow:0 0 16px #d8b76b4d}.route-node.done{background:#604a25;color:#f4db9d;border-color:#ad8a4b}.route-line{width:18px;height:1px;background:#4f493e}.top-actions{justify-self:end;display:flex;gap:12px}.top-actions button{border:1px solid #ffffff14;padding:7px 10px;border-radius:3px}.battlefield{display:grid;grid-template-columns:minmax(190px,250px) minmax(460px,1fr) minmax(190px,250px);gap:14px;max-width:1500px;margin:18px auto 12px;padding:0 16px}.panel{border:1px solid var(--line);background:linear-gradient(145deg,rgba(24,20,19,.94),rgba(9,12,18,.95));box-shadow:0 12px 30px #0007,inset 0 1px #ffffff0a;border-radius:5px}.relic-panel,.instability-panel{padding:15px}.panel-title{border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:12px}.panel-title b{font:600 13px Cinzel}.rewards-empty{font:italic 13px/1.6 Alegreya;color:#8f8b82}.reward-item{padding:10px 0;border-bottom:1px solid #ffffff0d}.reward-item b{font:600 12px Cinzel;color:#e4ca89}.reward-item small{display:block;color:#aaa394;line-height:1.35;margin-top:4px}.encounter-panel{min-height:400px;padding:16px;display:grid;grid-template-rows:auto 1fr auto}.enemy{text-align:center}.enemy-header{display:flex;align-items:flex-start;justify-content:center;gap:18px}.enemy-crest{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-size:30px;border:1px solid currentColor;background:#090b10;box-shadow:0 0 22px color-mix(in srgb,currentColor 30%,transparent)}.enemy h2{font:600 clamp(22px,3vw,34px) Cinzel;margin:0 0 5px}.enemy-meta{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}.hp-line{height:10px;border:1px solid #5a433d;background:#140e0d;border-radius:6px;overflow:hidden;max-width:560px;margin:13px auto 6px}.hp-line i{display:block;height:100%;background:linear-gradient(90deg,#8c261f,#e65f42);transition:width .35s}.hp-values{font:700 12px Inter}.reaction-copy{margin:10px auto 0;max-width:600px;color:#bdb7aa;font:500 14px/1.4 Alegreya}.spell-preview{display:grid;place-items:center;align-content:center;min-height:150px}.preview-empty{text-align:center;color:#77766f}.preview-empty b{display:block;font:500 16px Cinzel;color:#aaa394;margin-bottom:8px}.combo-result{text-align:center}.combo-result small{color:var(--gold);text-transform:uppercase;letter-spacing:.15em}.combo-result h3{font:600 25px Cinzel;margin:6px}.damage-total{font:700 42px Cinzel;color:#f3d387}.damage-total span{font:500 12px Inter;color:#aaa394;text-transform:uppercase}.formula{font-size:11px;color:#8e8d87}.action-bar{display:flex;justify-content:center;gap:10px;min-height:44px}.secondary-button{border:1px solid #696253;background:#17171a;padding:11px 16px;border-radius:3px;cursor:pointer}.secondary-button:disabled,.primary-button:disabled{opacity:.35;cursor:not-allowed}.instability-orbit{width:132px;height:132px;border-radius:50%;margin:18px auto;display:grid;place-items:center;position:relative;background:conic-gradient(var(--gold) var(--fill),#252329 0);box-shadow:0 0 28px #0009}.instability-orbit::before{content:"";position:absolute;inset:9px;background:#0e1016;border-radius:50%;border:1px solid #645332}.instability-value{z-index:1;text-align:center}.instability-value strong{display:block;font:700 39px Cinzel}.instability-value small{color:#a7a294}.instability-pips{display:flex;gap:4px;justify-content:center}.instability-pips i{width:11px;height:5px;background:#302d2c;border:1px solid #4d4537}.instability-pips i.filled{background:#dfbb63;box-shadow:0 0 7px #d8b76b}.turn-box{text-align:center;border-block:1px solid var(--line);padding:12px}.turn-box small{display:block;color:var(--muted);text-transform:uppercase;font-size:9px}.turn-box strong{font:600 26px Cinzel}.deck-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.deck-stats span{text-align:center;background:#ffffff06;padding:8px}.deck-stats small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.hand-area{max-width:1360px;margin:auto;padding:0 16px}.hand-heading{display:flex;justify-content:space-between;align-items:end;margin:5px 3px 10px}.hand-heading div{display:flex;flex-direction:column}.hand-heading small{text-transform:uppercase;color:var(--gold);letter-spacing:.15em;font-size:9px}.hand-heading b{font:500 16px Cinzel}.hand-heading p{margin:0;color:#8f8d87;font-size:11px}.hand{display:flex;gap:10px;justify-content:center;min-height:210px}.card{--element:#aaa;position:relative;width:142px;aspect-ratio:5/7;border:2px solid color-mix(in srgb,var(--element) 60%,#7f6d4a);border-radius:8px;overflow:hidden;background:#121318;box-shadow:0 8px 20px #000b,inset 0 0 0 3px #100e0c;cursor:pointer;transition:transform .18s,filter .18s,box-shadow .18s;isolation:isolate}.card::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,transparent 28%,#0c0d12 72%),var(--art) center top/cover}.card::after{content:"";position:absolute;inset:5px;border:1px solid #dfc77a50;border-radius:4px;pointer-events:none}.card:hover{transform:translateY(-8px);filter:brightness(1.08)}.card.selected{transform:translateY(-18px);box-shadow:0 0 0 2px #ffe49a,0 16px 30px #000,0 0 24px color-mix(in srgb,var(--element) 50%,transparent)}.card-value{position:absolute;top:10px;left:10px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#090b10e8;border:1px solid var(--element);font:700 25px Cinzel;color:#fff;text-shadow:0 2px #000}.card-value.adjusted{color:#fff2ad;box-shadow:0 0 14px color-mix(in srgb,var(--element) 75%,transparent)}.card-value.adjusted small{position:absolute;right:-9px;bottom:-7px;min-width:23px;padding:2px 4px;border-radius:9px;background:#11151d;border:1px solid var(--element);color:#fff;font:700 9px Inter,sans-serif;text-shadow:none}.card.modified.selected{box-shadow:0 0 26px color-mix(in srgb,var(--element) 68%,transparent),inset 0 0 0 3px #100e0c}.card-element{position:absolute;top:13px;right:12px;color:var(--element);font-size:23px;text-shadow:0 2px 4px #000}.card-copy{position:absolute;inset:auto 8px 9px;text-align:center;background:#0b0c11e8;border:1px solid #c5a85c55;padding:9px 4px}.card-copy b{display:block;font:600 11px/1.25 Cinzel}.card-copy small{display:block;color:var(--element);font-size:9px;text-transform:uppercase;margin-top:5px}.chronicle{max-width:900px;margin:14px auto 0;padding:10px 14px}.chronicle .panel-title{margin:0;padding:0 0 7px}.chronicle .panel-title>span{width:25px;height:25px}.chronicle ol{margin:9px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;color:#97958f;font:500 12px Alegreya}.chronicle li:first-child{color:#e2d5b7}
dialog{max-width:760px;width:calc(100% - 32px);color:var(--ink);background:linear-gradient(145deg,#211914,#0c1018);border:1px solid var(--gold2);border-radius:6px;padding:28px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#03050ad9;backdrop-filter:blur(5px)}dialog h2{font:600 30px Cinzel;margin:6px 0 18px}.dialog-close{position:absolute;right:14px;top:10px;border:0;background:none;color:#aaa;font-size:28px;cursor:pointer}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rules-grid section{border:1px solid var(--line);padding:13px}.rules-grid b{font:600 13px Cinzel;color:#e2c778}.rules-grid p{font:500 14px/1.5 Alegreya;color:#bdb8ac;margin:6px 0 0}.manual-link{display:inline-block;color:var(--gold);margin-top:18px}.reward-dialog{text-align:center}.reward-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.reward-choice{border:1px solid var(--line);background:#11131a;padding:18px 12px;min-height:180px;cursor:pointer;color:inherit}.reward-choice:hover{border-color:var(--gold);transform:translateY(-3px)}.reward-choice span{display:block;color:var(--gold);font-size:9px;text-transform:uppercase;letter-spacing:.12em}.reward-choice b{display:block;font:600 16px Cinzel;margin:18px 0 10px}.reward-choice small{color:#aaa49a;line-height:1.45}.end-dialog{text-align:center}.end-stats{display:flex;justify-content:center;gap:10px;margin:22px 0}.end-stats span{min-width:110px;padding:12px;background:#ffffff08}.end-stats small{display:block;color:#aaa;text-transform:uppercase;font-size:9px}.end-stats b{font:600 25px Cinzel}
@media(max-width:1050px){.battlefield{grid-template-columns:190px 1fr}.instability-panel{grid-column:1}.encounter-panel{grid-column:2;grid-row:1/3}.relic-panel{grid-column:1}.hand{overflow-x:auto;justify-content:flex-start;padding:16px 4px 8px}.card{flex:0 0 132px}.start-content{margin-right:0;background:#06080bbd;padding:24px;border:1px solid #ffffff12}.topbar{grid-template-columns:1fr auto}.route{order:3;grid-column:1/3;justify-content:center}.topbar{height:auto}.top-actions{grid-column:2;grid-row:1}}
@media(max-width:720px){.difficulty{grid-template-columns:1fr 1fr}.battlefield{display:flex;flex-direction:column;padding:0 10px}.encounter-panel{order:1}.instability-panel{order:2}.relic-panel{order:3}.topbar{padding:8px 10px}.brand small{display:none}.route-node{width:28px;height:28px}.route-line{width:8px}.top-actions button{padding:6px;font-size:10px}.hand-heading p{display:none}.card{flex-basis:124px}.chronicle{margin-inline:10px}.chronicle ol{grid-template-columns:1fr}.rules-grid,.reward-choices{grid-template-columns:1fr}.reward-choices{max-height:55vh;overflow:auto}.start-screen{background-position:63% center}.start-content{padding:18px 12px}.start-content h1{font-size:39px}.battlefield{margin-top:10px}.enemy-header{gap:10px}.enemy-crest{width:52px;height:52px}.encounter-panel{min-height:380px}}

/* Audio controls and presentation-only arcane effects. */
.ambient-layer{position:fixed;inset:70px 0 0;width:100vw;height:calc(100dvh - 70px);display:block;z-index:12;pointer-events:none;contain:strict;opacity:.48;mix-blend-mode:screen}.game-screen{position:relative;isolation:isolate}.game-screen>.topbar,.game-screen>.battlefield,.game-screen>.hand-area,.game-screen>.chronicle{position:relative}.game-screen>.topbar{z-index:20}.game-screen>.battlefield,.game-screen>.hand-area,.game-screen>.chronicle{z-index:1}
.audio-icon{width:32px;height:32px!important;padding:0!important;border-radius:50%!important;display:grid;place-items:center;color:var(--gold)!important;font-size:15px!important}.audio-icon[aria-pressed="false"]{color:#66645f!important;opacity:.62;text-decoration:line-through}.fx-layer{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden}.arcane-particle{position:absolute;left:0;top:0;width:var(--size);height:var(--size);border-radius:50%;background:var(--color);box-shadow:0 0 8px var(--color),0 0 18px color-mix(in srgb,var(--color) 70%,transparent);transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%));opacity:0;animation:arcane-burst .9s cubic-bezier(.16,.74,.25,1) var(--delay) forwards}.arcane-particle.element-fire{border-radius:60% 10% 60% 40%}.arcane-particle.element-water{border-radius:70% 30% 65% 35%}.arcane-particle.element-stone{border-radius:2px}.arcane-particle.element-wind{height:2px;width:calc(var(--size) * 2.2);border-radius:4px}.arcane-particle.element-nature{border-radius:90% 0 90% 0}.spell-trail{position:absolute;left:0;top:0;width:84px;height:9px;border-radius:50%;background:linear-gradient(90deg,transparent,var(--color),#fff);box-shadow:0 0 14px var(--color),0 0 32px var(--color);transform:translate(var(--x),var(--y));transform-origin:left center;animation:spell-flight .58s cubic-bezier(.2,.65,.25,1) forwards}.enemy.is-hit{animation:enemy-hit .55s ease}.enemy.is-defeated{animation:enemy-defeat .72s ease}.spell-preview.is-casting .combo-result{animation:cast-pulse .58s ease}.hand.is-recanalising{animation:recanalise .62s ease}.instability-orbit.is-unstable{animation:instability-warning .7s ease}.reward-dialog.is-rewarded,.end-dialog.is-victory{animation:reward-arrive .68s ease}.end-dialog.is-defeat{animation:defeat-arrive .7s ease}.route-node.active{animation:active-node 2.4s ease-in-out infinite}.card.selected{box-shadow:0 16px 34px #000d,0 0 26px color-mix(in srgb,var(--element) 58%,transparent),inset 0 0 0 2px #f7de9d99}.enemy-crest{animation:crest-breathe 3.2s ease-in-out infinite}
@keyframes arcane-burst{0%{opacity:0;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%)) scale(.25)}18%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) scale(.05) rotate(240deg)}}
@keyframes spell-flight{0%{opacity:0;transform:translate(var(--x),var(--y)) scaleX(.2)}20%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x) + var(--tx)),calc(var(--y) + var(--ty))) scaleX(1.4)}}
@keyframes enemy-hit{20%{transform:translateX(-8px);filter:brightness(1.8)}45%{transform:translateX(7px)}70%{transform:translateX(-3px)}}@keyframes enemy-defeat{30%{filter:brightness(2.2);transform:scale(1.04)}100%{filter:brightness(.4);transform:scale(.95)}}@keyframes cast-pulse{40%{transform:scale(1.06);filter:brightness(1.5)}}@keyframes recanalise{45%{transform:translateY(10px) scale(.97);filter:blur(2px);opacity:.55}}@keyframes instability-warning{25%,65%{transform:scale(1.08);box-shadow:0 0 42px #e85d3faa}}@keyframes reward-arrive{0%{opacity:0;transform:scale(.9) translateY(20px)}65%{transform:scale(1.025)}}@keyframes defeat-arrive{25%{transform:translateX(-8px);filter:saturate(.4)}50%{transform:translateX(8px)}}@keyframes active-node{50%{box-shadow:0 0 26px #d8b76b99}}@keyframes crest-breathe{50%{transform:scale(1.04);filter:brightness(1.17)}}
@media(prefers-reduced-motion:reduce){.arcane-particle,.spell-trail{display:none}.enemy-crest,.route-node.active{animation:none}.enemy.is-hit,.enemy.is-defeated,.spell-preview.is-casting .combo-result,.hand.is-recanalising,.instability-orbit.is-unstable,.reward-dialog.is-rewarded,.end-dialog.is-victory,.end-dialog.is-defeat{animation:none}}
.audio-controls{display:flex;justify-content:center;gap:8px}.start-audio{margin:0 0 14px}.audio-toggle{border:1px solid rgba(255,255,255,.16);background:rgba(7,9,13,.72);color:#c8ccc6;border-radius:20px;padding:7px 13px;cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.audio-toggle span{color:var(--gold);margin-right:4px}.audio-toggle[aria-pressed="false"]{color:#717772;border-color:rgba(255,255,255,.08);text-decoration:line-through}.audio-toggle[aria-pressed="false"] span{color:#717772}.dialog-particle{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;z-index:2;background:var(--color);box-shadow:0 0 10px var(--color);pointer-events:none;opacity:0;animation:dialog-burst .9s cubic-bezier(.16,.74,.25,1) var(--delay) forwards}@keyframes dialog-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.05) rotate(220deg)}}@media(prefers-reduced-motion:reduce){.dialog-particle{display:none}}

/* Cinematic spell impacts */
.spell-projectile{position:absolute;left:0;top:0;width:112px;height:18px;border-radius:50%;background:radial-gradient(circle at 88% 50%,#fff 0 8%,var(--color) 18%,transparent 64%),linear-gradient(90deg,transparent,var(--color));filter:drop-shadow(0 0 8px var(--color)) drop-shadow(0 0 20px var(--color));transform:translate(calc(var(--x) - 8px),calc(var(--y) - 9px)) rotate(var(--angle)) scaleX(.25);transform-origin:8px 50%;animation:spell-projectile-flight .62s cubic-bezier(.22,.72,.23,1) forwards}.spell-projectile::before,.spell-projectile::after{content:"";position:absolute;right:4px;top:50%;width:25px;height:25px;border:2px solid #fff;border-radius:50%;transform:translateY(-50%);box-shadow:0 0 12px var(--color),inset 0 0 9px var(--color)}.spell-projectile::after{width:42px;height:42px;border-color:var(--color);opacity:.62}.impact-ring{position:absolute;left:0;top:0;width:50px;height:50px;border:5px solid #fff;border-radius:50%;box-shadow:0 0 15px #fff,0 0 35px var(--color),inset 0 0 24px var(--color);opacity:0;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%)) scale(.15);animation:impact-ring-expand .62s cubic-bezier(.12,.7,.26,1) var(--delay) forwards}.impact-ring::after{content:"";position:absolute;inset:-15px;border:3px dashed var(--color);border-radius:50%;animation:impact-rune-spin .65s linear}.battle-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--color) 72%,#fff),transparent 42%);mix-blend-mode:screen;opacity:0;animation:battle-flash .42s ease var(--delay)}.damage-number{position:absolute;left:0;top:0;color:#fff7d5;font:900 clamp(28px,4vw,48px)/1 Cinzel,serif;-webkit-text-stroke:2px #431a52;text-shadow:0 4px 0 #431a52,0 0 12px #fff,0 0 28px var(--color);opacity:0;transform:translate(calc(var(--x) - 50%),var(--y)) scale(.45);animation:damage-number-rise .9s cubic-bezier(.2,.75,.2,1) var(--delay) forwards}.damage-number.critical{font-size:clamp(38px,5vw,62px);color:#fff29d}.damage-number.blocked{font-size:clamp(17px,2vw,25px);letter-spacing:.08em;color:#d7e8ff;-webkit-text-stroke:1px #24345f;text-shadow:0 3px #24345f,0 0 18px #87c9ff}.enemy-stage.is-impacted{animation:stage-impact .7s ease}.enemy-stage.is-impacted .enemy-impact-core{position:absolute;z-index:4;left:50%;top:48%;width:35%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 5%,var(--enemy-color) 18%,transparent 68%);mix-blend-mode:screen;animation:enemy-impact-core .65s ease forwards}.enemy-art.is-hit{animation:enemy-art-hit .64s cubic-bezier(.2,.75,.2,1)}.enemy-art.is-defeated{animation:enemy-art-defeated 2.35s cubic-bezier(.2,.72,.18,1) forwards;transform-origin:50% 68%;will-change:transform,filter,opacity,clip-path}.hp-wrap{position:relative}.hp-line{position:relative}.hp-line b{position:absolute;inset:0 auto 0 var(--hp-after,var(--hp-current));width:max(0px,calc(var(--hp-before,var(--hp-current)) - var(--hp-after,var(--hp-current))));background:linear-gradient(90deg,#fff6a1,#ffea55);opacity:0;box-shadow:0 0 12px #fff36e}.hp-wrap.is-damaged .hp-line{animation:hp-bar-hit .82s ease}.hp-wrap.is-damaged .hp-line i{animation:hp-fill-pulse .82s ease}.hp-wrap.is-damaged .hp-line b{animation:hp-lag-drain .9s ease .1s}.hp-wrap.is-damaged .hp-values{animation:hp-values-hit .8s ease;color:#fff4a5}
@keyframes spell-projectile-flight{0%{opacity:0;transform:translate(calc(var(--x) - 8px),calc(var(--y) - 9px)) rotate(var(--angle)) scaleX(.2)}14%{opacity:1}76%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x) + var(--tx) - 8px),calc(var(--y) + var(--ty) - 9px)) rotate(var(--angle)) scaleX(1.15)}}
@keyframes impact-ring-expand{0%{opacity:0;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%)) scale(.15)}20%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%)) scale(3.8) rotate(45deg)}}@keyframes impact-rune-spin{to{transform:rotate(135deg)}}@keyframes battle-flash{15%{opacity:.52}100%{opacity:0}}@keyframes damage-number-rise{0%{opacity:0;transform:translate(calc(var(--x) - 50%),var(--y)) scale(.45)}24%{opacity:1;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 22px)) scale(1.25)}55%{transform:translate(calc(var(--x) - 50%),calc(var(--y) - 30px)) scale(1)}100%{opacity:0;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 78px)) scale(.9)}}@keyframes stage-impact{18%{transform:scale(1.035);box-shadow:0 0 40px var(--enemy-color),0 8px 0 #15102e}42%{transform:scale(.985)}70%{transform:scale(1.008)}}@keyframes enemy-impact-core{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.7)}}@keyframes enemy-art-hit{0%{transform:scale(1)}15%{transform:translateX(-13px) rotate(-1deg) scale(1.055);filter:brightness(2.4) saturate(.45)}34%{transform:translateX(11px) rotate(1deg) scale(1.035)}55%{transform:translateX(-6px) scale(1.02);filter:brightness(1.25) saturate(1.3)}100%{transform:none;filter:none}}@keyframes enemy-art-defeated{0%{transform:scale(1);filter:none;opacity:1;clip-path:inset(0 0 0 0)}12%{transform:translateX(-12px) rotate(-1deg) scale(1.09);filter:brightness(3.2) saturate(.35);opacity:1}25%{transform:translateX(9px) rotate(1deg) scale(1.055);filter:brightness(1.8) saturate(.55);opacity:1}42%{transform:translateY(4px) scale(1.02);filter:brightness(1.3) saturate(.8);opacity:.94;clip-path:inset(0 0 0 0)}68%{transform:translateY(20px) scale(.97);filter:brightness(.72) saturate(.45) contrast(1.25);opacity:.68;clip-path:inset(8% 3% 0 4%)}86%{transform:translateY(40px) scale(.88) rotate(-2deg);filter:brightness(.38) grayscale(.62) blur(1px);opacity:.28;clip-path:inset(32% 9% 0 12%)}100%{transform:translateY(62px) scale(.76) rotate(3deg);filter:brightness(.15) grayscale(1) blur(4px);opacity:0;clip-path:inset(78% 18% 0 20%)}}@keyframes hp-bar-hit{20%,55%{transform:translateX(-4px)}38%,72%{transform:translateX(4px)}}@keyframes hp-fill-pulse{25%{filter:brightness(2);box-shadow:0 0 18px #ffdd65}}@keyframes hp-lag-drain{0%,25%{opacity:1}100%{opacity:0}}@keyframes hp-values-hit{25%{transform:scale(1.22);filter:brightness(1.7)}60%{transform:scale(.96)}}
@media(prefers-reduced-motion:reduce){.spell-projectile,.impact-ring,.battle-flash,.damage-number{animation:none;display:none}.enemy-stage.is-impacted,.enemy-art.is-hit,.enemy-art.is-defeated,.hp-wrap.is-damaged .hp-line,.hp-wrap.is-damaged .hp-line i,.hp-wrap.is-damaged .hp-line b,.hp-wrap.is-damaged .hp-values{animation:none}}


/* Production pass: active powers, status clarity, persistence, and end-state polish. */
.continue-button{display:block;margin:10px auto 0;width:min(280px,100%)}.daily-note{margin:10px 0 0;color:#8f8b82;font:600 10px Inter;text-transform:uppercase;letter-spacing:.13em}
.techniques{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;min-height:0;margin:0 auto 10px}.techniques:empty{display:none}.techniques-label{font:700 9px Inter;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.techniques button{border:1px solid #665638;background:#11141a;padding:7px 10px;border-radius:3px;cursor:pointer;text-align:left}.techniques button:hover,.techniques button.armed{border-color:var(--gold);background:#372b17;box-shadow:0 0 14px #d8b76b25}.techniques b,.techniques small{display:block}.techniques b{font:600 10px Cinzel;color:#e4ca89}.techniques small{font-size:8px;color:#9d988c;margin-top:2px}
.card.locked{filter:grayscale(.65) brightness(.55);cursor:not-allowed}.card-lock{position:absolute;inset:42% 5px auto;background:#0a0e17dd;color:#abd9ff;border:1px solid #7eb2d4;font:800 9px Inter;letter-spacing:.13em;padding:5px;z-index:3}.condition-row{display:flex;justify-content:center;gap:6px;margin-top:8px}.condition-row span,.barrier-badge{display:inline-block;border:1px solid #8a7042;background:#2a2114;color:#e6c97d;border-radius:20px;padding:4px 8px;font:700 9px Inter;text-transform:uppercase;letter-spacing:.08em}.barrier-badge{text-align:center;margin-top:10px;border-color:#5793ba;color:#a8ddff;background:#10212d}
.reward-item>span{display:block;color:#8e8064;font:700 8px Inter;text-transform:uppercase;letter-spacing:.12em;margin-bottom:3px}.replacement-picker{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}.replacement-picker p{font:600 12px Cinzel;color:#e3c77f}.replacement-picker button{border:1px solid #695735;background:#1a1712;color:#d9c48e;padding:8px;margin:4px;cursor:pointer}.record-copy{min-height:20px;color:#e4ca89;font:600 13px Cinzel}.end-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,20px);opacity:0;pointer-events:none;border:1px solid var(--gold2);background:#090b10ed;color:#eee2c6;padding:10px 16px;border-radius:4px;box-shadow:0 8px 30px #000;transition:.2s}.toast.visible{opacity:1;transform:translate(-50%,0)}
button:focus-visible,a:focus-visible{outline:2px solid #ffe09a;outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:700px){.techniques{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.techniques button{flex:0 0 auto}.daily-note{font-size:8px}.end-actions>*{width:100%}}

/* Colorful fantasy art refresh, v2. */
:root{--ink:#fff8ea;--muted:#c9c1da;--gold:#ffd66b;--gold2:#ba7cff;--panel:rgba(31,25,65,.91);--line:rgba(192,146,255,.34);--fire:#ff664f;--nature:#5bd67e;--water:#4ecbff;--stone:#f2ad55;--wind:#b58cff}
html,body{background:#171338}.start-screen{background-image:url('assets/art/grimorio-color-key-art.webp');background-position:center;background-size:cover}.start-shade{background:linear-gradient(90deg,rgba(24,13,62,.96),rgba(27,15,65,.84) 42%,rgba(24,12,54,.08) 72%),linear-gradient(0deg,rgba(13,10,37,.72),transparent 60%)}.back-link{color:#fff7dc}.start-content{margin-right:min(40vw,680px)}.eyebrow{color:#ffe071;text-shadow:0 2px 10px #5a29a8}.start-content h1{color:#fff6dc;text-shadow:0 4px 0 #523694,0 9px 28px #180f43}.start-content h1 span{color:#ffe071}.intro{color:#f2eafd}.difficulty span{border:2px solid rgba(204,177,255,.28);background:rgba(39,23,82,.78);border-radius:14px;box-shadow:inset 0 1px #fff2}.difficulty input:checked+span{border-color:#ffdd71;background:linear-gradient(145deg,#7045ba,#3f277e);box-shadow:0 0 24px #cc82ff66,inset 0 1px #fff5}.primary-button{border:2px solid #fff0a5;background:linear-gradient(180deg,#ffcb55,#e77739);color:#301c55;border-radius:14px;box-shadow:0 5px 0 #8b3f33,0 8px 24px #1b0e48aa,inset 0 2px #fff7bb;font-weight:900}.secondary-button{border-radius:12px!important}.audio-toggle{background:#352264cc;border-color:#b894ff66}.start-links button,.start-links a{color:#eee6ff}.game-screen{background-image:radial-gradient(circle at 50% 20%,rgba(106,72,222,.32),transparent 38%),linear-gradient(rgba(20,13,49,.74),rgba(12,10,33,.92)),url('assets/art/grimorio-color-key-art.webp')}.topbar{background:#201746ed;border-bottom:2px solid #8e6acc66}.brand-mark,.panel-title>span{background:linear-gradient(145deg,#714bc2,#3f287f);border:2px solid #d5b3ff;color:#ffe275;box-shadow:inset 0 1px #fff5}.route-node{border:2px solid #816ab2;background:#32265d;color:#c5b8da}.route-node.active{background:#6948bb;border-color:#ffe26f;color:#fff5be}.route-node.done{background:#2a9b75;border-color:#7ff2bd}.panel{border:2px solid var(--line);background:linear-gradient(145deg,rgba(55,39,104,.94),rgba(25,21,61,.96));border-radius:18px;box-shadow:0 12px 30px #10092799,inset 0 2px #ffffff10}.encounter-panel{overflow:hidden;position:relative;min-height:590px;padding:14px;grid-template-rows:auto 1fr auto auto}.encounter-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 24%,#9d79ff22,transparent 42%);pointer-events:none}.enemy{position:relative;z-index:1}.enemy-stage{width:min(100%,440px);aspect-ratio:16/10;margin:0 auto 8px;position:relative;overflow:hidden;border-radius:22px;border:3px solid color-mix(in srgb,var(--enemy-color) 75%,#fff);background:radial-gradient(circle,#6f54b4,#241947 70%);box-shadow:0 8px 0 #15102e,0 12px 28px #0b071b99,0 0 25px color-mix(in srgb,var(--enemy-color) 40%,transparent)}.enemy-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,10,42,.78));pointer-events:none}.enemy-art{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .25s}.enemy:hover .enemy-art{transform:scale(1.025)}.enemy-stage.art-missing .enemy-art{display:none}.enemy-level{position:absolute;z-index:2;top:10px;left:10px;background:#291b55e8;border:2px solid #fff4;border-radius:20px;padding:5px 9px;color:#fff;font:900 10px Inter;letter-spacing:.08em}.enemy-crest{position:absolute;z-index:2;right:10px;bottom:10px;width:48px;height:48px;border:3px solid currentColor;background:#211545e8;font-size:23px;box-shadow:0 3px 0 #0e0a24,0 0 18px currentColor}.enemy-identity{margin-top:2px}.enemy h2{font-family:Cinzel,serif;color:#fff6d5;text-shadow:0 3px 0 #4c3282;margin:0 0 3px}.enemy-meta{color:#d9cfee}.hp-wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;max-width:560px;margin:7px auto 0}.hp-line{width:100%;max-width:none;height:15px;margin:0;border:2px solid #ffc1a5;background:#3b1746;box-shadow:inset 0 2px 4px #160a25}.hp-line i{background:linear-gradient(90deg,#ff4c57,#ff9a4e,#ffe06a);box-shadow:inset 0 2px #fff6}.hp-values{background:#291b55;border-radius:10px;padding:4px 8px;color:#fff}.reaction-copy{background:#241a4dcc;border:1px solid #9b78d766;border-radius:12px;padding:8px 12px;color:#e9e2f5}.reaction-copy b{color:#ffd86b;margin-right:7px;text-transform:uppercase;font:800 9px Inter;letter-spacing:.1em}.spell-preview{position:relative;z-index:1}.preview-empty b,.combo-result h3{color:#fff0ad}.damage-total{color:#ffd75e!important;text-shadow:0 3px #6d3c6e}.action-bar{position:relative;z-index:1}.hand-area{background:linear-gradient(180deg,#261a54eb,#171238f5);border-top:2px solid #8f6bc866}.hand{gap:12px}.card{border:3px solid color-mix(in srgb,var(--element) 80%,#fff);border-radius:17px;overflow:hidden;background:#2c2058;box-shadow:0 7px 0 #100c29,0 10px 18px #0c081aaa;isolation:isolate}.card::before{inset:0;background-image:linear-gradient(180deg,transparent 48%,rgba(20,12,48,.42) 60%,rgba(18,11,43,.96) 81%),var(--art);background-size:cover;background-position:center}.card::after{content:"";position:absolute;inset:5px;border:1px solid #fff5;border-radius:11px;pointer-events:none;z-index:1}.card:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:0 12px 0 #100c29,0 18px 27px #0c081acc,0 0 24px color-mix(in srgb,var(--element) 55%,transparent)}.card.selected{transform:translateY(-17px);border-color:#fff2a6;box-shadow:0 9px 0 #7a4f9b,0 18px 32px #0c081acc,0 0 29px var(--element)}.card-value,.card-element{z-index:3;background:linear-gradient(145deg,#fff5c8,#ffd056);color:#38204e;border:2px solid #fff8d6;box-shadow:0 3px 0 #7b4371;font-weight:900}.card-value{left:8px;top:8px;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;font-size:19px}.card-element{right:8px;top:8px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center}.card-rarity{position:absolute;z-index:3;top:49px;left:10px;color:#fff3a2;font-size:8px;text-shadow:0 1px 5px #44175e}.card-copy{z-index:3;left:7px;right:7px;bottom:7px;padding:9px 5px 6px;border-radius:10px;background:linear-gradient(180deg,#352263dd,#201542f5);border:1px solid #fff4}.card-copy b{color:#fff7d8;text-shadow:0 2px #3a236c}.card-copy small{color:color-mix(in srgb,var(--element) 55%,#fff)}.reward-item{background:#261b4b;border:1px solid #8564b755;border-radius:10px;padding:9px;margin:7px 0}.reward-item b{color:#ffe080}.instability-dot{box-shadow:0 0 10px #d5a2ff}.turn-box,.deck-stats span{background:#2b2054;border-radius:12px}.chronicle{border-radius:16px}.toast{background:#5c3ba5!important;border:2px solid #d4b3ff!important;border-radius:14px!important}
@media(max-width:1050px){.encounter-panel{min-height:540px}.enemy-stage{max-width:380px}}
@media(max-width:720px){.start-screen{background-position:64% center}.start-shade{background:linear-gradient(0deg,rgba(22,12,57,.98) 0 58%,rgba(22,12,57,.3))}.start-content{margin:34vh auto 0}.battlefield{padding:0 9px}.encounter-panel{min-height:0;padding:10px}.enemy-stage{width:100%;max-width:390px;aspect-ratio:16/10}.enemy h2{font-size:23px}.enemy-meta{font-size:9px}.reaction-copy{font-size:12px}.card{border-radius:13px}.card-value{width:30px;height:30px;font-size:16px}.card-element{width:27px;height:27px}.card-rarity{top:43px}.hand{padding-bottom:15px}}
@media(prefers-reduced-motion:reduce){.enemy:hover .enemy-art,.card:hover,.card.selected{transform:none}}