@import "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&display=swap";:root{--font-body:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-heading:"Noto Serif SC", "Songti SC", "SimSun", serif;--font-weight-body:400;--font-weight-bold:700;--font-weight-heading:900;--color-black:#070604;--color-black-alpha:#070604bd;--color-white:white;--color-grey:#8b7d55;--color-grey-dark:#3e3420;--color-crystal:#f3ba2f;--color-crystal-light:#ffe08a}a{color:inherit;text-decoration:none}html,body,.app{width:100%;height:100%;font-family:var(--font-body);font-weight:var(--font-weight-body);margin:0;padding:0;overflow:hidden}body{font-size:clamp(20px,4vmin,26px);line-height:1.35}.app{background:radial-gradient(circle at 58% 45%, #f3ba2f21, transparent 38%), var(--color-black);color:#fff8df}.app h1,.app h2,.app h3,.app h4,.app h5,.app h6{font-family:var(--font-heading);font-weight:var(--font-weight-heading);margin:0}.app h1{text-shadow:0 0 28px #f3ba2f61;font-size:clamp(34px,11vmin,112px);line-height:1.05}.app h2{font-size:clamp(32px,9vmin,86px)}.app h3{font-size:clamp(26px,5.6vmin,56px)}.app h4{font-size:clamp(20px,3.3vmin,34px)}.app a,.app a:visited{color:var(--color-crystal-light);pointer-events:all}.app a:hover,.app a:visited:hover{color:var(--color-crystal)}.top-bar{z-index:100;pointer-events:none;justify-content:space-between;align-items:center;font-size:80%;display:flex;position:absolute;top:1em;left:1em;right:1em}.top-bar .left,.top-bar .right{align-items:center;gap:.5em;display:flex}.top-bar .left{gap:1em}.top-bar .left>*{justify-content:center;align-items:center;gap:.5em;display:none}.top-bar button{--size:40px;--border-color:var(--color-grey);width:var(--size);height:var(--size);background-color:var(--color-black-alpha);border:solid 2px var(--border-color);cursor:pointer;pointer-events:all;border-radius:40px;justify-content:center;align-items:center;display:none;position:relative}.top-bar button svg{transition:transform .2s ease-in-out}.top-bar button.show-unless{display:flex}.top-bar button[data-off] svg{transform:scale(.8)}.top-bar button[data-off]:after{content:"";background-color:var(--border-color);width:100%;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)}.top-bar button:hover,.top-bar button:active{--border-color:var(--color-crystal)}.count{font-variant-numeric:tabular-nums}.health-bar{border:2px solid var(--color-grey);background-color:var(--color-black-alpha);width:260px;height:20px;position:relative;overflow:hidden}.health-bar:after{content:"";transform-origin:0;transform:scaleX(calc(1 * var(--health)));background:linear-gradient(90deg,#f3ba2f,#fff0a8);position:absolute;inset:5px}.canvas,.overlay,.screens{width:100%;max-width:2000px;height:100%;max-height:100vw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.screens{pointer-events:none;max-width:1280px;margin:0 auto}.screens>*{--pad:5vmin;inset:var(--pad);justify-content:center;place-items:stretch stretch;display:none;position:absolute}.screens>:after{grid-area:space}.screens .spells{inset:unset;z-index:10;grid-template-rows:1fr;grid-template-columns:1fr 1fr 1fr;justify-content:center;align-items:center;gap:1.5rem;max-width:46%;padding:.5rem 1.5rem;display:none;bottom:3vmin;right:3vmin}.screens .spells .spell-path{width:50px;position:relative}.screens .spells .spell-path .check{opacity:0;transition-property:opacity,transform;transition-duration:.4s;transition-timing-function:cubic-bezier(.52,-.47,.37,1);position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.screens .spells .spell-path svg{fill:none;width:100%}.screens .spells .info{flex-direction:column;display:none}.screens .spells .info h4{margin-bottom:1rem}.screens .spells .info p{font-size:20px}.screens .spells .charge-path{stroke-width:6px;stroke-dasharray:var(--length) var(--length);stroke-dashoffset:calc(((1 - var(--charge))) * var(--length))}.screens .spells .guide-path{stroke:#fff3}.screens .spells .spell-details{z-index:2;flex-direction:row;align-items:center;gap:3rem;display:flex}.screens .spells .background{border:solid 2px var(--color-grey);background:linear-gradient(135deg,#070604db,#2d2107c2);position:absolute;inset:0;box-shadow:0 0 28px #f3ba2f1f}.screens .spells.corner{cursor:pointer;pointer-events:all;display:grid}.screens .spells.corner .spell-path.ready .check{opacity:1;transform:translate(-50%,-200%)}.screens .spells.corner:hover .background{border-color:var(--color-crystal)}.screens .spells.full{grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr;gap:2rem;padding:2rem 3rem;display:grid;bottom:50%;transform:translateY(50%)}.screens .spells.full .spell-path{width:160px}.screens .spells.full .spell-path .check{transition:none}.screens .spells.full .spell-path svg{--charge:1!important}.screens .spells.full .info{display:flex}.screens .content{text-align:center;text-wrap:pretty;flex-direction:column;grid-area:content;justify-content:center;align-items:center;display:flex}.screens .content>:not(:last-child){margin-bottom:clamp(20px,5vmin,50px)}.screens .button-row{flex-flow:wrap;justify-content:center;gap:.7em;margin:0;padding:0;list-style:none;display:flex}.screens button{--border-color:var(--color-grey);color:var(--color-white);pointer-events:all;cursor:pointer;font-family:var(--font-body);font-weight:var(--font-weight-body)}.screens button:not(.simple,.no-style){border:2px solid var(--border-color);background:linear-gradient(#f3ba2f33,#070604d1);padding:.28em 1.35em;font-size:28px;box-shadow:0 0 18px #f3ba2f1a}.screens button.simple{text-decoration:underline;-webkit-text-decoration-color:var(--border-color);-webkit-text-decoration-color:var(--border-color);text-decoration-color:var(--border-color);text-underline-offset:5px;background-color:#0000;border:none;font-size:20px;text-decoration-thickness:2px}.screens button:hover,.screens button:active{--border-color:var(--color-crystal)}.screens p{max-width:600px;margin:0}.token-panel{pointer-events:all;background:linear-gradient(#070604b8,#2d210780);border:1px solid #f3ba2f6b;flex-direction:column;align-items:center;gap:.65rem;width:min(520px,88vw);padding:.8rem 1rem;display:flex;box-shadow:0 0 24px #f3ba2f1a}.token-panel__row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;width:100%;display:flex}.token-status,.token-panel__meta{color:var(--color-crystal-light);font-size:clamp(14px,2.2vmin,18px);line-height:1.35}.token-panel__meta{color:#fff8dfd1}.screens button.token-challenge{padding:.25em 1.1em;font-size:20px}.screens button.token-challenge:disabled{cursor:not-allowed;opacity:.45}.activity-panel{pointer-events:all;background:#030c119e;border:1px solid #9bcfff52;gap:.7rem;width:min(520px,88vw);padding:.75rem 1rem;display:grid}.activity-panel h4{font-family:var(--font-body);color:var(--color-crystal);margin-bottom:.35rem;font-size:clamp(15px,2.3vmin,19px)}.activity-panel p,.activity-panel__meta{color:#fff8dfc7;margin:0;font-size:clamp(13px,2vmin,16px);line-height:1.35}.activity-panel__actions{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.activity-panel__actions .simple{font-size:clamp(14px,2.1vmin,17px)}.impact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;display:grid}.impact-grid span,.player-card{background:#07060475;border:1px solid #f3ba2f3d}.impact-grid span{gap:.1rem;padding:.45rem .35rem;display:grid}.impact-grid strong{color:var(--color-crystal-light);font-variant-numeric:tabular-nums;font-size:clamp(16px,2.4vmin,21px)}.impact-grid small{color:#fff8dfad;font-size:clamp(11px,1.7vmin,13px)}.player-card{color:#fff8dfd1;padding:.55rem .65rem;font-size:clamp(13px,1.9vmin,16px);line-height:1.35}.leaderboard-panel,.score-summary{pointer-events:all;width:min(520px,88vw)}.leaderboard-panel{background:#07060494;border:1px solid #ffe08a42;padding:.75rem 1rem}.leaderboard-panel h4{font-family:var(--font-body);color:var(--color-crystal-light);margin-bottom:.55rem;font-size:clamp(16px,2.5vmin,20px)}.leaderboard-list{flex-direction:column;gap:.35rem;width:100%;margin:0;padding:0;font-size:clamp(13px,2vmin,17px);list-style:none;display:flex}.leaderboard-list li,.score-summary{color:#fff8dfdb;grid-template-columns:2.5rem 1fr auto;align-items:center;gap:.65rem;display:grid}.leaderboard-list .empty{text-align:center;color:#fff8df9e;display:block}.leaderboard-rank,.leaderboard-score{color:var(--color-crystal-light);font-variant-numeric:tabular-nums}.leaderboard-player{text-overflow:ellipsis;white-space:nowrap;text-align:left;min-width:0;overflow:hidden}.leaderboard-list.compact{max-width:460px}.score-summary{color:var(--color-crystal-light);background:#070604a3;border:1px solid #f3ba2f59;grid-template-columns:1fr;padding:.75rem 1rem;font-size:clamp(15px,2.2vmin,19px)}.gameplay-panel{pointer-events:all;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;width:min(760px,88vw);display:grid}.gameplay-panel section{text-align:left;background:#070604ad;border:1px solid #f3ba2f57;min-height:150px;padding:.9rem}.gameplay-panel h4{font-family:var(--font-body);color:var(--color-crystal-light);margin-bottom:.55rem;font-size:clamp(16px,2.3vmin,21px)}.gameplay-panel p{color:#fff8dfd1;font-size:clamp(14px,2vmin,17px);line-height:1.45}.gameplay-steps{pointer-events:all;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;width:min(760px,88vw);display:grid}.gameplay-steps span{color:var(--color-crystal);background:#030c119e;border:1px solid #9bcfff52;padding:.55rem .45rem;font-size:clamp(13px,2vmin,16px)}.loading-bar{background-color:var(--color-grey-dark);width:260px;height:2px;position:relative;overflow:hidden}.loading-bar:after{content:"";background-color:var(--color-crystal);transform-origin:0;width:100%;height:100%;transform:scaleX(calc(1 * var(--loaded)));position:absolute;top:0;left:0}[data-state=IDLE] #sounds-button,[data-state=INIT] #sounds-button,[data-state=INIT] #sounds-button{display:none}[data-state=LOADING] [data-screen=LOADING]{grid-template-columns:0 1fr;grid-template-areas:"space content";display:grid}[data-state=LOADING] #sounds-button,[data-state=LOAD_ERROR] #sounds-button{display:none}[data-state=TITLE_SCREEN] [data-screen=TITLE_SCREEN]{grid-template-columns:1fr 1fr;grid-template-areas:"space content";display:grid}[data-state=TITLE_SCREEN] [data-screen=TITLE_SCREEN] .content{transform:translateY(-2.8vmin)}[data-state=TITLE_SCREEN] [data-screen=TITLE_SCREEN] h1{font-size:clamp(32px,7.6vmin,78px);line-height:1.08em}[data-state=TITLE_SCREEN] [data-screen=TITLE_SCREEN] .content>:not(:last-child){margin-bottom:clamp(10px,2.2vmin,22px)}[data-state=TITLE_SCREEN] .token-panel,[data-state=TITLE_SCREEN] .activity-panel,[data-state=TITLE_SCREEN] .leaderboard-panel{padding:.6rem .85rem}[data-state=GAMEPLAY] [data-screen=GAMEPLAY]{grid-template-columns:1fr;grid-template-areas:"content";display:grid}[data-state=GAMEPLAY] [data-screen=GAMEPLAY] .content{gap:clamp(12px,2.5vmin,24px)}[data-state=INSTRUCTIONS_CRYSTAL] [data-screen=INSTRUCTIONS_CRYSTAL]{grid-template-rows:1fr 1.2fr;grid-template-areas:"space""content";display:grid}[data-state=INSTRUCTIONS_DEMON] [data-screen=INSTRUCTIONS_DEMON]{grid-template-columns:1.5fr 1fr;grid-template-areas:"content space";display:grid}[data-state=INSTRUCTIONS_DEMON] [data-screen=INSTRUCTIONS_DEMON] .content{justify-content:flex-end}[data-state=INSTRUCTIONS_CAST] [data-screen=INSTRUCTIONS_CAST]{grid-template-columns:0 1fr;grid-template-areas:"space content";display:grid}#spell-guide{opacity:0;width:70%;max-width:400px;transition:opacity 1s ease-in-out}#spell-guide.show{opacity:.5}[data-state=INSTRUCTIONS_SPELLS] [data-screen=INSTRUCTIONS_SPELLS]{grid-template-columns:1fr 1.5fr;grid-template-areas:"content space";display:grid}[data-state=GAME_RUNNING] #health-bar,[data-state=SPECIAL_SPELL] #health-bar,[data-state=GAME_RUNNING] #demon-state,[data-state=SPECIAL_SPELL] #demon-state,[data-state=GAME_RUNNING] #pause-button,[data-state=SPECIAL_SPELL] #pause-button,[data-state=ENDLESS_MODE] #endless-mode,[data-state=ENDLESS_SPECIAL_SPELL] #endless-mode,[data-state=ENDLESS_MODE] #close-button,[data-state=ENDLESS_SPECIAL_SPELL] #close-button,[data-state=ENDLESS_MODE] #pause-button,[data-state=ENDLESS_SPECIAL_SPELL] #pause-button,[data-state=ENDLESS_SPELL_OVERLAY] #endless-mode{display:flex}[data-state=PAUSED] [data-screen=PAUSED],[data-state=ENDLESS_PAUSE] [data-screen=PAUSED]{grid-template-rows:2fr 1fr;grid-template-areas:"space""content";display:grid}[data-state=PAUSED] [data-screen=PAUSED] .content,[data-state=ENDLESS_PAUSE] [data-screen=PAUSED] .content{justify-content:flex-end}[data-state=PAUSED] #paused,[data-state=ENDLESS_PAUSE] #paused,[data-state=PAUSED] #pause-button,[data-state=ENDLESS_PAUSE] #pause-button,[data-state=ENDLESS_PAUSE] #close-button{display:flex}[data-state=SPELL_OVERLAY] [data-screen=SPELL_OVERLAY],[data-state=ENDLESS_SPELL_OVERLAY] [data-screen=SPELL_OVERLAY]{grid-template-columns:1fr 2fr;grid-template-areas:"content space";display:grid}[data-state=SPELL_OVERLAY] #health-bar,[data-state=SPELL_OVERLAY] #demon-state{display:flex}[data-state=GAME_OVER] [data-screen=GAME_OVER]{grid-template-columns:0 1fr;grid-template-areas:"space content";display:grid}[data-state=GAME_OVER] [data-screen=GAME_OVER] .content{justify-content:flex-end}[data-state=WINNER] [data-screen=WINNER]{grid-template-columns:0 1fr;grid-template-areas:"space content";display:grid}[data-state=WINNER] [data-screen=WINNER] .content{justify-content:flex-end}.charging-notification{border:solid 1px var(--color-crystal);color:var(--color-crystal-light);pointer-events:none;opacity:0;background-color:#070604db;padding:.5em 1em;transition-property:opacity,transform;transition-duration:.3s;transition-timing-function:ease-in-out;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}.charging-notification p{margin:0;padding:0}.charging-notification.show{opacity:1;transform:translate(-50%,-50%)}.debug-panels{color:#fff;z-index:100;pointer-events:none;flex-flow:column wrap;gap:10px;padding:10px;display:flex;position:absolute;bottom:0;left:0}.panel{border:1px solid #fff;width:250px;max-width:250px;padding:10px}.panel p{margin:0;padding:0}.panel button{color:#444;cursor:pointer;pointer-events:all;background-color:#f9f9f9;border:0;padding:6px 10px;font-size:1em}.panel>div{position:relative!important}#spell-path{stroke:red;stroke-width:2px;fill:none}#spell-points circle{fill:#fff}#spells{width:0;height:0;position:absolute;top:0;left:0;overflow:hidden}.controls{flex-flow:wrap;gap:12px;display:flex}.state{padding-bottom:.5em}.spell-stat{border-left:5px solid #0000;padding:0 1rem;font-size:14px}.spell-stat:not(:last-child){padding-bottom:1rem}.spell-stat .spell-preview{stroke:#fff;stroke-width:2px;fill:none;width:60px}.spell-stat .score{white-space:nowrap;text-overflow:ellipsis;width:120px;font-size:1.4em;display:inline;overflow:hidden}.spell-stat div{flex-direction:row;align-items:center;gap:2rem;display:flex}.spell-stat.cast{border-left:5px solid red}.debug-overlays{pointer-events:none}.clear-interface .debug-panels,.clear-interface .debug-overlays,.clear-interface .audio-controls,.clear-interface .top-bar,.clear-interface .screens{display:none}.debug-layout .top-bar{outline:2px solid purple}.debug-layout .screens{outline:2px solid green}.debug-layout .screens>:after{content:"SPACE";background-color:#f005;outline:2px solid red;justify-content:center;align-items:center;display:grid}.debug-layout .content{background-color:#00f5;outline:2px solid #00f}.sr-only{width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}@media (width<=760px){.gameplay-panel,.gameplay-steps{grid-template-columns:1fr}.gameplay-panel section{min-height:auto}}