/* Phase 7 — original dark-fantasy audiovisual finishing layer */
:root{color-scheme:dark;--p7-gold:#f3dcad;--p7-sky:#a9dafe;--p7-violet:#a78aff}
#app{background:radial-gradient(ellipse 120% 55% at 50% -15%,#30477a 0%,transparent 85%),linear-gradient(180deg,#101d39,#080d1c)}
header{background:linear-gradient(110deg,#101931,#16244a 60%,#17142e);border-bottom:1px solid #5871a355;box-shadow:0 6px 18px #070b1588;position:relative;z-index:3;gap:8px}
header b{text-shadow:0 0 20px #9762df5c;color:#f4e5c8;white-space:nowrap;font-size:clamp(16px,4vw,19px)}
header .tiny{letter-spacing:.1em;font-size:9px;text-align:center}
#phase7AudioSettings{flex:none;border:1px solid #5874a0;background:linear-gradient(110deg,#2b375e,#1c2846);border-radius:9px;color:#cfe1ff;font-weight:800;font-size:10px;padding:8px 7px;min-height:35px;cursor:pointer}
#phase7AudioSettings:focus-visible{outline:2px solid #ffdc8a;outline-offset:2px}
#home{background:radial-gradient(ellipse 120% 45% at 50% 0%,#4a327b33,transparent 72%)}
#home .metrics>div{background:linear-gradient(140deg,#243255,#141e39);border-color:#5871a07a;color:#b1c6e2;letter-spacing:.08em}
#home .metrics strong{font-size:19px;color:#f8e2b4;text-shadow:0 0 12px #f4cd7838}
#heroPanel{box-shadow:inset 0 0 35px #685ce53a,0 9px 20px #020610b5;border-color:#6880bb}
#heroPanel:before{content:"";position:absolute;left:-40%;right:-40%;height:110%;background:conic-gradient(from 0deg,transparent 0 24%,#2d6ce113 25% 30%,transparent 31% 56%,#ba68fa11 58% 60%,transparent 62%);animation:p7HeroHalo 35s linear infinite;pointer-events:none}
@keyframes p7HeroHalo{to{transform:rotate(360deg)}}
.btn{transition:transform .12s,filter .12s,box-shadow .12s;background:linear-gradient(125deg,#433279,#314c8a);box-shadow:0 3px 11px #05081c77,inset 0 1px 0 #ffffff2b;font-weight:800;letter-spacing:.01em}
.btn:active,.btn.p7-pressed{transform:scale(.97);filter:brightness(1.15)}
.btn:not(:disabled):focus-visible{outline:2px solid #ffe1a2;outline-offset:3px}
.stage,.skill-deck,.hub-preview{border-color:#576ba182;box-shadow:inset 0 1px 0 #ffffff10}
#game{background:linear-gradient(180deg,#111b34,#0b1327)}
#battleStage{text-shadow:0 0 12px #a18bea60}
.battle-top{background:linear-gradient(#122044,#111a30);border-bottom:1px solid #5875a733}
.enemybox{border-top:1px solid #6792ad36;border-bottom:1px solid #6792ad36}
.enemybox.telegraph{box-shadow:inset 0 0 30px #fc41652a}
.enemybox.awakening{box-shadow:inset 0 0 40px #906aff50}
#boardWrap{background:linear-gradient(145deg,#111e3a,#0b132b);isolation:isolate}
#board{border:1px solid #728ac7;box-shadow:0 0 0 2px #5972a530,inset 0 0 22px #030719,0 0 16px #7970ec27}
#moveHUD{color:#d7def9}
#moveTrack{box-shadow:inset 0 1px 5px #01071ab5,0 0 14px #6578d033}
#moveFill{background:linear-gradient(90deg,#8864ed,#80e0ff,#c2b5ff);background-size:180% 100%;animation:p7GaugeFlow 2s linear infinite}
@keyframes p7GaugeFlow{to{background-position:180% 0}}
#moveTime{color:#ffe0ac}
#notice{color:#f4e3ff;letter-spacing:.035em;text-shadow:0 0 10px #b569fa,0 3px 8px #02050e}
.bar{border-color:#647ab661}
.combat-controls .btn{box-shadow:inset 0 1px 0 #ffffff32,0 2px 10px #090b1f}
#phase7BattleFX{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5;isolation:isolate}
.p7-flare{position:absolute;pointer-events:none;inset:0;animation:p7Blaze .73s both;opacity:0}
.p7-flare.slash,.p7-flare.skill{background:linear-gradient(147deg,transparent 42%,#c7faff00 46%,#d9ffffdc 49%,#52b2f9d4 50%,transparent 54%),linear-gradient(153deg,transparent 49%,#ac7df759 52%,transparent 56%)}
.p7-flare.awaken,.p7-flare.phase{background:radial-gradient(circle at 50% 40%,#e6d1ffad,#856ffb70 28%,transparent 65%);animation-duration:.88s}
.p7-flare.hit{background:linear-gradient(125deg,transparent,#ff74895e 50%,transparent);animation-duration:.38s}
.p7-flare.shield{background:radial-gradient(ellipse at 50% 44%,transparent 34%,#8bdcffb9 38%,#a4d6ff40 46%,transparent 54%)}
@keyframes p7Blaze{0%{opacity:0;transform:scale(.62)}26%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
#phase7BoardFX{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.p7-spark{position:absolute;display:block;left:var(--px);top:var(--py);width:6px;height:6px;background:var(--c);box-shadow:0 0 10px var(--c),0 0 16px var(--c);border-radius:50%;animation:p7Spark .53s ease-out both;will-change:transform}
@keyframes p7Spark{0%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}}
#phase7ComboLabel{position:absolute;top:27%;left:50%;z-index:7;font-weight:1000;font-size:clamp(17px,5vw,28px);white-space:nowrap;pointer-events:none;color:#fff7d7;text-shadow:0 2px 8px #0b0a24,0 0 17px #a563fd;opacity:0;transform:translate(-50%,-10%)}
#phase7ComboLabel.active{animation:p7ComboPop .77s ease-out both}
@keyframes p7ComboPop{0%{opacity:0;transform:translate(-50%,30%) scale(.58)}18%{opacity:1;transform:translate(-50%,-13%) scale(1.16)}37%{transform:translate(-50%,-22%) scale(1)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-72%) scale(1.05)}}
.overlay.p7-victory .modal{border-color:#c7a56d;box-shadow:0 0 65px #a0782c46,inset 0 1px #ffeab62e}
.overlay.p7-defeat .modal{border-color:#8a6b9e}
.modal{background:radial-gradient(ellipse at 50% -30%,#65559a66,transparent 80%),linear-gradient(#202d50,#111932);box-shadow:0 18px 60px #000a}
.modal h1{letter-spacing:.09em;text-shadow:0 0 15px #f2dd9b88}
.evolve-overlay,.cinematic{filter:saturate(1.05)}
.hub-window{background:radial-gradient(ellipse at 25% -15%,#6746b33d,transparent 80%),linear-gradient(#111d36,#080e1e)}
.hub-tabs button.active{box-shadow:0 0 17px #b57fff53,inset 0 1px #fff3}
#phase7AudioPanel[hidden]{display:none!important}
#phase7AudioPanel{position:fixed;inset:0;z-index:90;background:#020715e6;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(9px)}
.p7-audio-card{width:min(100%,400px);border:1px solid #8195d9;border-radius:21px;background:linear-gradient(147deg,#1d2c51,#131b34 70%,#291b46);padding:21px 19px;box-shadow:0 17px 55px #000c,inset 0 1px #ffffff23}
.p7-audio-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:13px}
.p7-audio-head strong{font-size:20px;color:#fff0cc}.p7-audio-head small{display:block;color:#a4bce4;font-size:10px;letter-spacing:.19em}
.p7-audio-head button{width:40px;height:40px;background:#253556;border:1px solid #7182ba;border-radius:10px;color:white;font-size:20px}
.p7-audio-card label{font-size:13px;font-weight:800;color:#e0e6ff;display:flex;justify-content:space-between;align-items:center;margin:15px 0 7px}
.p7-audio-card input[type=range]{width:100%;accent-color:#ba91ff;min-height:28px}
.p7-audio-card input[type=checkbox]{width:22px;height:22px;accent-color:#9e7cf7}
.p7-audio-card p{font-size:11px;color:#9bb0d0;line-height:1.7;margin:14px 0 0}
@media(max-width:350px){header{padding:6px}header b{font-size:15px}header .tiny{display:none}#phase7AudioSettings{font-size:9px}}
@media(prefers-reduced-motion:reduce){#heroPanel:before,#moveFill,.p7-spark,.p7-flare,#phase7ComboLabel{animation:none!important}.p7-spark,.p7-flare{display:none}.btn{transition:none}}