@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap";:root{font-family:Noto Sans SC,system-ui,sans-serif;color:#f4eee0;background:#111822;font-synthesis:none}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #ffda93;outline-offset:3px}#app{position:relative;isolation:isolate}#game-canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 55% 42%,transparent 39%,rgba(5,8,15,.21) 72%,rgba(3,5,10,.73) 100%)}.topbar{position:absolute;z-index:3;top:0;left:0;right:0;height:84px;padding:0 35px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#0c121bde,#0c121b6b 68%,transparent);pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;text-shadow:0 3px 16px #000}.brand-mark{color:#e4b669;font-size:30px;text-shadow:0 0 18px #e7ae5b9c}.brand strong{display:block;font:600 22px/1.1 Cinzel,Noto Sans SC,serif;letter-spacing:.17em}.brand small{display:block;margin-top:6px;color:#ccb58a;font:600 8px/1 Cinzel,serif;letter-spacing:.34em}.top-actions{display:flex;align-items:center;gap:8px}.turn-chip,.move-chip{display:inline-flex;align-items:center;justify-content:center;height:34px;border-radius:20px;font-size:11px;letter-spacing:.1em;white-space:nowrap}.turn-chip{padding:0 16px;color:#ffe3aa;background:#61462bba;border:1px solid #e3b86e75;box-shadow:0 0 20px #d3933730}.turn-chip:before{content:"";width:5px;height:5px;margin-right:9px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor}.turn-chip.enemy{color:#b9e3ff;background:#1b3d58bd;border-color:#80c4fb70;box-shadow:0 0 20px #439eff30}.move-chip{padding:0 12px;color:#aaadad;border:1px solid #c2c5c43c;background:#101824a1}.icon-btn{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;color:#e9dec8;background:#c8d7e511;border:1px solid #dce7f145;font-size:17px;transition:background .2s,border-color .2s,transform .2s}.icon-btn:hover,.icon-btn:focus-visible{background:#c7d8e633;border-color:#efca86a8;transform:translateY(-1px)}.icon-btn:disabled,.secondary-btn:disabled{opacity:.42;cursor:default;transform:none}.side-panel{position:absolute;z-index:3;top:50%;left:38px;transform:translateY(-43%);width:250px;pointer-events:none}.side-panel>*{pointer-events:auto}.side-eyebrow,.eyebrow{color:#d9b879;font:600 10px/1.3 Cinzel,serif;letter-spacing:.25em}.side-panel h1{margin:15px 0 13px;font:600 36px/1.31 Cinzel,Noto Sans SC,serif;letter-spacing:.04em;text-shadow:0 4px 20px #000b}.side-panel h1 em{font-style:normal;color:#f1c785}.chapter-line{display:flex;align-items:center;gap:8px;color:#baad97;font:600 8px/1.3 Cinzel,serif;letter-spacing:.12em}.chapter-line i{display:block;flex:1;height:1px;background:linear-gradient(90deg,#caa86b8c,transparent)}#message{min-height:58px;margin:13px 0 15px;color:#eee2cd;font-size:12px;line-height:1.85;text-shadow:0 2px 9px #000c}.army-card,.status-card{background:linear-gradient(125deg,#293441dd,#121923d9);border:1px solid #d7c19640;box-shadow:0 12px 34px #0006,inset 0 1px #fff1;-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px)}.army-card{padding:15px 16px 13px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}.army-row{display:flex;justify-content:space-between;align-items:center;color:#cbd5db;font-size:11px;letter-spacing:.04em}.army-row span{display:flex;gap:8px;align-items:center}.army-row i{display:block;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 11px currentColor}.army-row.gold{color:#f0c47f}.army-row.blue{color:#8dccfa}.army-row strong{font:600 12px Cinzel,serif;letter-spacing:.08em}.army-track{height:4px;margin:12px 1px;background:#71bafa91;border-radius:3px;overflow:hidden}.army-track i{display:block;width:50%;height:100%;background:linear-gradient(90deg,#b37d39,#eac57e);box-shadow:0 0 10px #f4c77c;transition:width .5s ease}.status-card{margin-top:9px;padding:14px 16px 15px;border-radius:2px}.status-label{color:#b9a98d;font:600 9px/1.4 Cinzel,Noto Sans SC,serif;letter-spacing:.13em}.selected-info{margin-top:6px;min-height:27px;color:#ffe0a9;font-size:18px;font-weight:600}.piece-tip{margin-top:4px;color:#c7c9c5;font-size:10px;line-height:1.6}.side-actions{display:flex;gap:7px;margin-top:10px}.secondary-btn{border:1px solid #cbd6db65;color:#ece1ce;background:#101923b3;border-radius:3px;padding:9px 11px;font-size:10px;line-height:1.3;transition:border-color .2s,background .2s,transform .2s}.secondary-btn:hover{background:#3b4b57e6;border-color:#e6c88b;transform:translateY(-1px)}.side-actions .secondary-btn{flex:1;white-space:nowrap}.side-actions span{margin-left:4px;color:#eccb8d}.bottom-bar{position:absolute;z-index:3;bottom:17px;left:50%;transform:translate(-50%);display:flex;gap:26px;align-items:center;white-space:nowrap;color:#dcc7a0;font-size:10px;letter-spacing:.08em;text-shadow:0 2px 10px #000;pointer-events:none}.bottom-bar span+span{color:#b9c4c6}.impact-flash{position:absolute;z-index:4;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 55% 48%,#fff0c155,#f5b36d19 26%,transparent 64%)}.impact-flash.active{animation:impact .42s ease-out both}@keyframes impact{0%{opacity:.72}to{opacity:0}}.battle-callout{position:absolute;z-index:4;top:14%;left:50%;transform:translate(-50%,-12px);min-width:250px;padding:10px 26px;text-align:center;color:#ffe1ad;background:linear-gradient(90deg,transparent,#17222bdf 15%,#17222bdf 85%,transparent);border-top:1px solid #edc0789c;border-bottom:1px solid #edc0789c;box-shadow:0 0 32px #e8ae5e25;font-size:15px;font-weight:600;letter-spacing:.13em;opacity:0;pointer-events:none}.battle-callout.visible{animation:callout 2.2s both}@keyframes callout{0%{opacity:0;transform:translate(-50%,-12px)}8%,72%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,6px)}}.modal-backdrop{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background-image:linear-gradient(90deg,#07101bc2,#08111cad 48%,#07101bc2),url(/assets/menu/storybook-keyart.webp);background-size:cover;background-position:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-backdrop.hidden{display:none}.intro-card{position:relative;width:min(500px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow-y:auto;padding:41px 48px 38px;text-align:center;border:1px solid #e7bf7a89;background:radial-gradient(circle at 50% -20%,#405365,transparent 47%),linear-gradient(150deg,#202e3ae9,#101923f7 78%);box-shadow:0 30px 100px #000c,inset 0 1px #ffffff20}.intro-card:before,.intro-card:after{content:"";position:absolute;width:16px;height:16px;border-color:#ebbf7c}.intro-card:before{top:10px;left:10px;border-top:1px solid;border-left:1px solid}.intro-card:after{right:10px;bottom:10px;border-right:1px solid;border-bottom:1px solid}.intro-glyph{color:#ffd18a;font-size:39px;text-shadow:0 0 30px #f3ac5c}.intro-card h2{margin:16px 0 12px;color:#fff0d2;font:600 46px/1.2 Cinzel,Noto Sans SC,serif;letter-spacing:.16em;text-shadow:0 4px 20px #0009}.intro-divider{display:flex;align-items:center;gap:13px;width:75%;margin:0 auto 20px;color:#edc785}.intro-divider i{flex:1;height:1px;background:linear-gradient(90deg,transparent,#d7ac6f)}.intro-divider i:last-child{transform:rotate(180deg)}.intro-card p{margin:0;color:#d5d1c7;font-size:13px;line-height:1.9}.intro-rules{display:flex;justify-content:space-between;gap:6px;margin:25px 0;color:#ebd2a7;font-size:10px;white-space:nowrap}.intro-rules span{display:flex;align-items:center;gap:6px}.intro-rules b{display:grid;place-items:center;width:21px;height:21px;border:1px solid #cda46d88;border-radius:50%;color:#edc98d;font:600 9px Cinzel,serif}.intro-card .view-tip{margin:-9px 0 18px;color:#bcb5aa;font-size:11px;letter-spacing:.02em}.primary-btn{width:100%;padding:13px 22px;color:#201c17;font-size:14px;font-weight:700;letter-spacing:.1em;border:1px solid #f5d29a;background:linear-gradient(100deg,#bd884b,#ecc78b 52%,#bc8951);box-shadow:0 9px 30px #b67a3e52,inset 0 1px #fff8;transition:filter .2s,transform .2s}.primary-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.primary-btn span{float:right}.intro-card #showcase-btn,.ending-card #ending-undo-btn{width:100%;margin-top:10px;padding:11px}.ending-card{padding-top:55px;padding-bottom:50px}.ending-card p{margin-bottom:25px}@media(max-width:780px){.topbar{height:65px;padding:0 13px}.brand{gap:8px}.brand-mark{font-size:24px}.brand strong{font-size:16px;letter-spacing:.11em}.brand small{font-size:6px;letter-spacing:.24em}.top-actions{gap:5px}.turn-chip{height:30px;padding:0 9px;font-size:9px}.turn-chip:before{margin-right:5px}.move-chip{display:none}.icon-btn{width:30px;height:30px;font-size:15px}.side-panel{inset:auto 12px 43px;transform:none;width:auto;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.side-eyebrow,.side-panel h1,.chapter-line,.army-card,.status-card{display:none}#message{min-height:0;margin:0;padding:8px 10px;max-width:235px;background:#111b27d9;border:1px solid #d4be924a;font-size:10px;line-height:1.5;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.side-actions{margin:0}.side-actions .secondary-btn{padding:8px;font-size:9px}.side-actions #showcase-replay-btn{display:none}.bottom-bar{bottom:12px;gap:0;font-size:9px}.bottom-bar span+span{display:none}.battle-callout{top:13%;min-width:190px;padding:8px 15px;font-size:12px}.intro-card{padding:30px 24px}.intro-card h2{font-size:34px}.intro-rules{gap:4px;font-size:9px;flex-wrap:wrap;justify-content:center}}@media(max-height:650px)and (min-width:781px){.side-panel{transform:translateY(-36%)}.side-panel h1{font-size:29px;margin:8px 0}#message{min-height:0;margin:7px 0}.army-card,.status-card{padding:8px 12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}:root{color:#f4f3ee;background:#070d18}.vignette{background:radial-gradient(ellipse at 55% 38%,transparent 31%,rgba(4,9,18,.19) 64%,rgba(1,4,11,.78) 100%)}.topbar{background:linear-gradient(#06101ee8,#06101e88 67%,transparent)}.brand-mark{color:#ffd67f;text-shadow:0 0 8px #ffce69,0 0 28px #f2a12f}.brand strong{letter-spacing:.13em}.brand small{color:#8cdef4}.side-eyebrow,.eyebrow{color:#89deed}.side-panel h1 em{color:#ffc978;text-shadow:0 0 22px #eb9f444d}.chapter-line{color:#98acb7}.chapter-line i{background:linear-gradient(90deg,#67d5ee9c,transparent)}.army-card,.status-card{background:linear-gradient(133deg,#132438e8,#06101de8);border:1px solid #68cce750;box-shadow:0 14px 42px #0009,0 0 25px #209de51a,inset 0 1px #cde7ff20}.status-label{color:#8cbbcf}.selected-info{color:#ffdb94}.piece-tip{color:#b2c5d2}.secondary-btn{background:#091827cc;border-color:#6dbad375;color:#e4f4f7}.secondary-btn:hover{background:#173650;border-color:#81e6ff;box-shadow:0 0 22px #28c9fa38}.icon-btn{color:#c7f2ff;background:#0c294580;border-color:#8cdae770}.icon-btn:hover{background:#164466;border-color:#b5f5ff;box-shadow:0 0 18px #47d9ff66}.turn-chip{background:#573721c9;border-color:#ffca6c9c;box-shadow:0 0 24px #e89e3840}.turn-chip.enemy{background:#123f58cb;border-color:#6ce2ff9c;box-shadow:0 0 24px #16c9ff40}.impact-flash{background:radial-gradient(circle at 55% 50%,#fff9d7a0,#f8bc5269 17%,#31d5ff36 35%,transparent 68%)}.impact-flash.active{animation:impact .55s ease-out both}.battle-callout{color:#fff3d6;background:linear-gradient(90deg,transparent,#09253be9 15%,#09253be9 85%,transparent);border-color:#87e7ff;box-shadow:0 0 45px #33cdfc55;text-shadow:0 0 18px #e8be70}.modal-backdrop{background-image:linear-gradient(90deg,#050c19a8,#07102484 50%,#050c19a8),url(/assets/menu/storybook-keyart.webp);background-position:center;background-size:cover}.intro-card{border-color:#6edcff9c;background:radial-gradient(circle at 50% -10%,#21557b75,transparent 53%),linear-gradient(145deg,#0a2135ef,#06101df6 78%);box-shadow:0 28px 110px #000d,0 0 46px #2ebcec3b,inset 0 1px #c0ecff40;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.intro-card:before,.intro-card:after{border-color:#88e8ff}.intro-glyph{color:#ffe3a2;text-shadow:0 0 16px #ffcc5c,0 0 40px #49cfff}.intro-card h2{color:#fff8e9;text-shadow:0 0 26px #5adfff66,0 4px 18px #000c}.intro-card h2 span{font:700 13px Cinzel,serif;letter-spacing:.05em;color:#8de9ff;vertical-align:top}.intro-divider{color:#7eeaff}.intro-divider i{background:linear-gradient(90deg,transparent,#72def0)}.intro-card p{color:#d5e5eb}.intro-rules{color:#d8f5f8}.intro-rules b{border-color:#8deaff99;color:#acf3ff}.primary-btn{background:linear-gradient(100deg,#c98f3f,#ffe0a0 49%,#ce9045);border-color:#ffe0a0;box-shadow:0 9px 35px #f3a14457,0 0 28px #ffc05a31,inset 0 1px #fff9}.bottom-bar{color:#ffdc9e}.bottom-bar span+span{color:#a2c6d3}.showcase-card{width:min(650px,calc(100vw - 28px));padding:32px 38px 34px}.showcase-card h2{margin:10px 0 7px;font-size:35px}.showcase-card p{font-size:12px}.showcase-close{position:absolute;right:16px;top:12px;border:0;background:none;color:#bcdeea;font-size:28px;line-height:1;z-index:2}.showcase-close:hover{color:#fff}.beast-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:25px}.beast-grid button{display:flex;flex-direction:column;align-items:start;justify-content:center;min-height:87px;padding:11px 13px;border:1px solid #77d8f473;color:#fff5dd;background:linear-gradient(140deg,#1a3d55c9,#0c2033da);text-align:left;transition:transform .18s,border-color .18s,box-shadow .18s}.beast-grid button:hover,.beast-grid button:focus-visible{transform:translateY(-3px);border-color:#ffd38d;box-shadow:0 0 25px #49d8fa55;background:linear-gradient(140deg,#28536dc9,#11314ade)}.beast-grid strong{font-size:23px;font-weight:600}.beast-grid span{margin-top:5px;color:#9ddced;font-size:10px;white-space:nowrap}@media(max-width:780px){.intro-card h2{font-size:32px}.showcase-card{padding:25px 22px}.showcase-card h2{font-size:30px}.beast-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:16px}.beast-grid button{min-height:64px;padding:7px 10px}.beast-grid strong{font-size:18px}.beast-grid span{font-size:9px}.side-panel #message{background:#06182be8;border-color:#71d8ef80}}:root{color:#324e50;background:#d7ede9}.vignette{background:radial-gradient(ellipse at 53% 43%,transparent 50%,#5c868525 77%,#2a66504a 100%)}.topbar{background:linear-gradient(#f8f3dcf2,#eef6e3b5 62%,transparent)}.brand{text-shadow:0 2px 10px #fff9}.brand-mark{color:#ee8a48;text-shadow:0 0 18px #f7b46f}.brand strong{color:#315c51;font-family:Noto Sans SC,system-ui,sans-serif;font-weight:800;letter-spacing:.08em}.brand small{color:#6d9f91;font-family:Noto Sans SC,system-ui,sans-serif;letter-spacing:.22em}.turn-chip{color:#704a33;background:#ffebc9ec;border-color:#e7af78;box-shadow:0 5px 15px #d6965733}.turn-chip.enemy{color:#3d6682;background:#d8f1f4e8;border-color:#8fcbd9;box-shadow:0 5px 15px #6db7d533}.move-chip{color:#547568;background:#f8f5e7dc;border-color:#b2cfb3}.icon-btn{color:#3e7772;background:#fdf7e9da;border-color:#a9d6bb;box-shadow:0 4px 12px #7b9d8f36}.icon-btn:hover{color:#ba6840;background:#fff3d9;border-color:#f4bc7f;box-shadow:0 5px 16px #db9f644d}.side-eyebrow,.eyebrow{color:#5e9f89;font-family:Noto Sans SC,system-ui,sans-serif;font-weight:800}.side-panel h1{color:#2c574e;text-shadow:0 2px 11px #f8fff9;font-family:Noto Sans SC,system-ui,sans-serif;font-weight:900}.side-panel h1 em{color:#ed8b51;text-shadow:0 2px 10px #fff9}.chapter-line{color:#6b9a83}.chapter-line i{background:linear-gradient(90deg,#67ad8e9c,transparent)}#message{color:#365d51;text-shadow:0 1px 8px #fff;background:#fff9e5c9;padding:8px 10px;border-radius:10px;box-shadow:0 3px 12px #6d977328}.army-card,.status-card{background:linear-gradient(145deg,#fff9e9f2,#edf7e4ee);border:1px solid #92c4a2;box-shadow:0 12px 30px #466e6040,inset 0 1px #fff}.army-row{color:#567469}.army-row.gold{color:#bd7644}.army-row.blue{color:#5c98ac}.army-track{background:#9ecad1}.army-track i{background:linear-gradient(90deg,#ed8c52,#ffc97c);box-shadow:none}.status-label{color:#6a9b84}.selected-info{color:#ce7448}.piece-tip{color:#608474}.secondary-btn{color:#4a705c;background:#fffaebeb;border-color:#92bda1;border-radius:12px;box-shadow:0 4px 11px #759e8740}.secondary-btn:hover{color:#965d40;background:#fff1d5;border-color:#ebb67c;box-shadow:0 5px 16px #dbac6e66}.side-actions span{color:#dc8757}.bottom-bar{color:#407661;text-shadow:0 2px 9px #fff;background:#fff9e5d9;border-radius:20px;padding:6px 13px;box-shadow:0 4px 15px #66927b3b}.bottom-bar span+span{color:#639b91}.impact-flash{background:radial-gradient(circle at 55% 52%,#fff1c6b0,#ffd7a178 21%,#b0e8d94c 43%,transparent 66%)}.battle-callout{color:#794c38;background:linear-gradient(90deg,transparent,#fffae9f5 13%,#fffae9f5 87%,transparent);border-color:#e9aa6d;box-shadow:0 8px 25px #d78e6859;text-shadow:none;border-radius:14px}.modal-backdrop{background-image:linear-gradient(90deg,#f2f6def2,#f1f9d944 43%,#d7eee725 75%),url(/assets/menu/storybook-keyart.webp);background-position:center;background-size:cover;-webkit-backdrop-filter:none;backdrop-filter:none}.intro-card{border:2px solid #f8d59e;border-radius:26px;background:linear-gradient(145deg,#fffdf1f2,#f4f5dcf0);box-shadow:0 24px 68px #4d6b4c88,inset 0 2px #fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.intro-card:before,.intro-card:after{display:none}.intro-glyph{color:#ee925e;text-shadow:0 0 22px #f7ca8c}.intro-card h2{color:#315e4e;text-shadow:none;font-family:Noto Sans SC,system-ui,sans-serif;font-weight:900;letter-spacing:.07em}.intro-card h2 span{color:#eb9062;font-family:Noto Sans SC,system-ui,sans-serif}.intro-divider{color:#e6a675}.intro-divider i{background:linear-gradient(90deg,transparent,#e8b27e)}.intro-card p{color:#5e7764}.intro-rules{color:#597c69}.intro-rules b{color:#ce8352;border-color:#e9b788;background:#fff3df}.intro-card .view-tip{color:#829584}.primary-btn{color:#624228;border:1px solid #f2bd76;border-radius:13px;background:linear-gradient(100deg,#f6bd78,#ffdd9e 52%,#f3ba71);box-shadow:0 8px 22px #d999564d,inset 0 1px #fff}.primary-btn:hover{filter:brightness(1.06);transform:translateY(-2px)}.showcase-close{color:#6c9e8d}.showcase-close:hover{color:#d6824e}.beast-grid button{border:1px solid #a4c6a0;border-radius:15px;color:#385e53;background:linear-gradient(145deg,#fff9e3,#eaf5d8);box-shadow:0 4px 11px #78a68c38}.beast-grid button:hover,.beast-grid button:focus-visible{border-color:#f0a968;box-shadow:0 7px 18px #d5a16b77;background:#fff0ce}.beast-grid span{color:#ce8159}@media(max-width:780px){.side-panel #message{color:#3e6558;background:#fffaf0ec;border-color:#a4c99e}.modal-backdrop{background-position:59% center}.intro-card{background:#fffaf0f3}.brand strong{font-size:15px}.battle-callout{top:12%}}