:root{color-scheme:dark;font-family:"Noto Serif SC","Songti SC","STSong",serif;background:#061321;color:#eef9ff;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#173958 0,#081827 45%,#030b12 100%)}
body{min-height:100vh;overflow:hidden}
.game-shell{width:min(100vw,1780px);height:100vh;margin:0 auto;padding:14px 20px 18px;display:flex;flex-direction:column;gap:12px}
.game-header{height:58px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.brand-lockup{display:flex;align-items:center;gap:12px}
.brand-lockup p,.brand-lockup h1{margin:0}
.brand-lockup p{font:600 10px/1.4 ui-sans-serif,sans-serif;letter-spacing:.26em;color:#8ebed0}
.brand-lockup h1{font-size:22px;letter-spacing:.12em;font-weight:700}
.brand-seal{width:45px;height:45px;border:1px solid #d59e6f;display:grid;place-items:center;background:linear-gradient(145deg,#853725,#bd7043);box-shadow:inset 0 0 0 3px #612619,0 5px 16px #0008;font-size:13px;letter-spacing:.08em}
.header-actions{display:flex;gap:8px}
.header-actions button{border:1px solid #9bc9d855;background:#102a3dcc;color:#dff7ff;border-radius:999px;padding:8px 15px;font:600 12px ui-sans-serif,sans-serif;cursor:pointer}
.battle-frame{position:relative;flex:1;min-height:0;aspect-ratio:16/9;margin:auto;max-width:100%;max-height:calc(100vh - 102px);border:1px solid #9fd8e35e;border-radius:18px;overflow:hidden;background:#102f45;box-shadow:0 26px 80px #000b,inset 0 0 0 1px #fff1}
#game-canvas{display:block;width:100%;height:100%;touch-action:none}
.screen-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 52% 46%,transparent 48%,#03131d30 73%,#02080fc7 110%);box-shadow:inset 0 0 90px #03121c99}
.hud{position:absolute;inset:18px 22px auto;display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);align-items:start;gap:20px;pointer-events:none}
.health-card{display:flex;align-items:center;gap:10px;min-width:0}
.boss-health{justify-content:flex-end}
.portrait{width:50px;height:50px;flex:0 0 50px;border-radius:50%;padding:3px;background:linear-gradient(145deg,#d8faff,#408aa2);box-shadow:0 3px 13px #0008}
.boss-portrait{background:linear-gradient(145deg,#ffd9a6,#bc321e)}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.health-copy{width:min(430px,100%)}
.health-copy p{margin:0 3px 5px;display:flex;justify-content:space-between;gap:12px;font:700 12px ui-sans-serif,sans-serif;text-shadow:0 2px 5px #000}
.health-copy p b{font-size:10px;color:#dbf7ff}
.bar{height:13px;border:2px solid #d9f7ffbb;background:#07151fd9;border-radius:999px;overflow:hidden;position:relative;box-shadow:0 4px 14px #0008}
.bar i,.bar em{position:absolute;inset:0 auto 0 0;width:100%;border-radius:999px;transition:width .2s ease}
.player-health .bar i{background:linear-gradient(90deg,#2b9ec7,#77e5ff);box-shadow:inset 0 0 8px #d9ffff}
.boss-health .bar i{background:linear-gradient(90deg,#e54329,#ffad48);box-shadow:inset 0 0 8px #fff1a9}
.bar em{background:linear-gradient(90deg,#826affaa,#dfc7ffcc);mix-blend-mode:screen}
.stage-chip{text-align:center;min-width:180px;padding:7px 18px 8px;border:1px solid #e6fbff3d;background:linear-gradient(180deg,#0c2639dd,#071723a8);clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);text-shadow:0 2px 5px #000}
.stage-chip small,.stage-chip strong,.stage-chip span{display:block}
.stage-chip small{font:700 8px ui-sans-serif,sans-serif;letter-spacing:.36em;color:#8de0f4}
.stage-chip strong{font-size:16px;letter-spacing:.14em}
.stage-chip span{font:500 9px ui-sans-serif,sans-serif;color:#a7c7d1}
.weapon-rack{position:absolute;left:21px;bottom:47px;display:flex;align-items:center;gap:6px;padding:7px;border:1px solid #ccebf034;background:#061825b5;border-radius:12px;backdrop-filter:blur(10px)}
.weapon-title{font:700 10px ui-sans-serif,sans-serif;letter-spacing:.2em;color:#86bfd1;padding:0 5px}
.weapon-chip{display:flex;align-items:center;gap:6px;opacity:.42;filter:saturate(.5);transition:.2s}
.weapon-chip.is-active{opacity:1;filter:none}
.weapon-chip i{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;overflow:hidden;font-style:normal;color:#dffaff;background:radial-gradient(circle,#164864,#071c2c);border:1px solid #bdeeff88;box-shadow:inset 0 0 9px #7ae8ff22}
.weapon-chip i img{width:28px;height:28px;display:block;object-fit:contain;filter:drop-shadow(0 0 4px #73e8ff99)}
.weapon-chip span{font:700 9px ui-sans-serif,sans-serif;white-space:nowrap}
.weapon-chip b{display:block;font-size:8px;color:#87d9ef;margin-top:1px}
.boss-warning{position:absolute;left:50%;top:92px;transform:translate(-50%,-10px);text-align:center;background:linear-gradient(90deg,transparent,#641918d9 18%,#641918d9 82%,transparent);width:440px;padding:9px 40px;opacity:0;pointer-events:none;transition:.2s}
.boss-warning.is-visible{opacity:1;transform:translate(-50%,0)}
.boss-warning small,.boss-warning strong,.boss-warning span{display:block}
.boss-warning small{font:700 9px ui-sans-serif,sans-serif;letter-spacing:.35em;color:#ffb17c}
.boss-warning strong{font-size:18px;letter-spacing:.22em;color:#ffe2b1}
.boss-warning span{font:600 10px ui-sans-serif,sans-serif;color:#ffc7ad}
.combo{position:absolute;right:32px;bottom:58px;text-align:right;opacity:.25;transition:.2s;text-shadow:0 2px 5px #000}
.combo.is-active{opacity:1}
.combo small{display:block;font:700 9px ui-sans-serif,sans-serif;letter-spacing:.2em}
.combo strong{font:italic 800 38px/1 ui-sans-serif,sans-serif;color:#f7ecb8}
.combo strong::after{content:" COMBO";font-size:10px;margin-left:4px}
.toast{position:absolute;left:50%;bottom:110px;transform:translate(-50%,10px);padding:8px 20px;border:1px solid #b9ecff66;background:#082033df;border-radius:999px;font:700 12px ui-sans-serif,sans-serif;opacity:0;transition:.2s;pointer-events:none}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.battle-dialogue{position:absolute;right:28px;bottom:116px;width:min(310px,36%);display:flex;align-items:center;gap:10px;padding:9px 13px 9px 9px;border:1px solid #b7edff4d;border-radius:14px;background:linear-gradient(105deg,#071a27e8,#102b3ac7);box-shadow:0 14px 34px #0008,inset 0 0 22px #62d9ff0b;backdrop-filter:blur(9px);opacity:0;transform:translate(14px,6px);transition:opacity .2s ease,transform .24s ease;pointer-events:none;z-index:5}
.battle-dialogue.is-visible{opacity:.88;transform:translate(0,0)}
.battle-dialogue img{width:46px;height:46px;flex:0 0 46px;object-fit:cover;object-position:center;border-radius:50%;border:1px solid #d9fbff99;box-shadow:0 0 14px #55e7ff45}
.battle-dialogue div{min-width:0}
.battle-dialogue small{display:block;margin-bottom:2px;font:700 9px ui-sans-serif,sans-serif;letter-spacing:.18em;color:#83e7f8}
.battle-dialogue p{margin:0;font:600 11px/1.45 ui-sans-serif,sans-serif;color:#effcff;text-shadow:0 2px 5px #000}
.control-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:20px;font:600 9px ui-sans-serif,sans-serif;color:#d4eff6bb;white-space:nowrap;text-shadow:0 2px 4px #000}
.control-hint kbd{font:700 8px ui-sans-serif,sans-serif;border:1px solid #d4f3f466;border-radius:3px;padding:2px 4px;margin-right:3px;background:#071722a8}
.modal{position:absolute;inset:0;display:grid;place-items:center;background:#020b12a8;backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.25s;z-index:20}
.modal.is-visible{opacity:1;visibility:visible}
.start-panel,.result-panel{width:min(690px,88%);padding:40px 52px 38px;text-align:center;border:1px solid #c4effc55;background:linear-gradient(145deg,#102f43ee,#081827f2);box-shadow:0 28px 80px #000b,inset 0 0 60px #45c8e30d;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px),0 24px)}
.start-badge{display:inline-block;border:1px solid #dca06b99;color:#ffd29b;padding:5px 12px;font:700 9px ui-sans-serif,sans-serif;letter-spacing:.22em}
.start-panel>p,.result-panel>p{margin:18px 0 5px;font:700 11px ui-sans-serif,sans-serif;letter-spacing:.3em;color:#7fdaf1}
.start-panel h2,.result-panel h2{margin:0 0 14px;font-size:28px;letter-spacing:.08em}
.start-panel>span,.result-panel>span{display:block;color:#b9d2db;font:500 13px/1.8 ui-sans-serif,sans-serif}
.feature-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:22px 0}
.feature-row b{font:700 10px ui-sans-serif,sans-serif;border:1px solid #7cc6d855;border-radius:999px;padding:6px 10px;color:#c4ecf5}
.primary-button{border:1px solid #c9f8ff99;background:linear-gradient(135deg,#1688aa,#44c4d9);color:#fff;border-radius:4px;padding:12px 34px;font:800 13px ui-sans-serif,sans-serif;letter-spacing:.16em;cursor:pointer;box-shadow:0 8px 28px #1fc3df42}
.result-panel{width:min(540px,84%)}
.result-rune{width:72px;height:72px;margin:0 auto 8px;display:grid!important;place-items:center;border-radius:50%;border:1px solid #f7ddb4;background:radial-gradient(circle,#bc704b,#51241e);font-size:32px!important;color:#fff1c6!important}
.result-stats{margin:18px auto;display:flex;justify-content:center;gap:24px;font:700 11px ui-sans-serif,sans-serif;color:#b4dde8}
.result-stats b{display:block;font-size:18px;color:#fff}
@media(max-width:900px){.game-shell{padding:0}
.game-header{display:none}
.battle-frame{width:100vw;height:100vh;max-height:none;border:0;border-radius:0;aspect-ratio:auto}
.hud{inset:10px 10px auto;grid-template-columns:1fr 1fr}
.stage-chip{display:none}
.health-card{gap:5px}
.portrait{width:36px;height:36px;flex-basis:36px}
.health-copy p span{font-size:9px}
.weapon-rack{left:8px;bottom:42px;transform:scale(.82);transform-origin:left bottom}
.control-hint{bottom:8px}
.start-panel{padding:25px}
.start-panel h2{font-size:22px}
.boss-warning{top:62px;width:min(86%,440px)}
}
.health-copy p em{font-style:normal;font-size:9px;color:#ffc786;margin-left:6px;letter-spacing:.08em}
.boss-bar .phase-mark{position:absolute;z-index:2;top:-2px;bottom:-2px;width:2px;background:#fff4c9;box-shadow:0 0 8px #ffce6e}
.boss-bar .phase-mark-a{left:42%}
.boss-bar .phase-mark-b{left:74%}
.spirit-meter{position:absolute;left:23px;bottom:94px;width:230px;padding:8px 10px;border:1px solid #a9eff052;background:#061825bd;border-radius:10px;backdrop-filter:blur(10px);font-family:ui-sans-serif,sans-serif}
.spirit-meter div{display:flex;justify-content:space-between;gap:8px;align-items:center}
.spirit-meter small{font-size:9px;letter-spacing:.16em;color:#9de7ef}
.spirit-meter strong{font-size:9px;color:#e7feff}
.spirit-meter>span{display:block;height:5px;margin-top:6px;border-radius:999px;background:#06111a;overflow:hidden}
.spirit-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#37cce6,#d8fcff,#ffe69a);box-shadow:0 0 12px #66ecff;transition:width .15s}
@media(max-width:900px){
.health-copy p em{display:none}
.spirit-meter{left:8px;bottom:81px;transform:scale(.78);transform-origin:left bottom}
.control-hint span:nth-child(n+3){display:none}
.battle-dialogue{right:8px;bottom:82px;width:42%;transform:scale(.82) translate(14px,6px);transform-origin:right bottom}
.battle-dialogue.is-visible{transform:scale(.82) translate(0,0)}
}