/* Phase 7: cohesive visual polish, mobile-friendly home, settings and layered effects. */
:root{--ink:#09152b;--card:#142747;--edge:#dbb76d;--gold:#ffe6ad;--muted:#d2e0f7;--mint:#64e3b7;--pink:#ff7f9c;--blue:#93cdff}
html,body{background:radial-gradient(ellipse 75% 35% at 50% -12%,#4e64ad55,transparent),radial-gradient(ellipse at 80% 105%,#3d2d785e,transparent 65%),linear-gradient(#142246,#070e23)}
.page{max-width:985px}.mast{margin-bottom:14px}.brand{letter-spacing:-.035em;filter:drop-shadow(0 2px 2px #000);background:linear-gradient(180deg,#fffce0,#f2cd79 80%);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:1000}.phase{letter-spacing:1.25px;color:#b8cfff;font-weight:850}
.game-shell{background:linear-gradient(156deg,#4b6096 0,#182d59 14%,#101b39 80%,#46568e 100%);border-color:#e4c581;box-shadow:0 0 0 2px #192c4e,0 0 0 4px #c1a46b55,0 19px 45px #0009}
.arena{border:2px solid #e6c88c;box-shadow:inset 0 0 22px #051734,0 6px 15px #06112c99;background-position:center}.arena::before{background:linear-gradient(0deg,#080f2ec0,transparent 52%),radial-gradient(ellipse at 40% 30%,#c4e5ff20,transparent 55%);animation:arenaLuma 8s ease-in-out infinite alternate}.arena::after{box-shadow:inset 0 0 22px #06142e,0 0 0 1px #05132b}
.arena-vfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;mix-blend-mode:screen}
.hero{filter:drop-shadow(0 4px 0 #101628) drop-shadow(0 8px 4px #000a);will-change:transform}.hero.attack{animation:phase7Strike .35s cubic-bezier(.2,.9,.3,1)}.hero.winning{animation:phase7Victory .75s ease-in-out infinite alternate}.enemy-unit img{filter:drop-shadow(0 4px 5px #000b)}.enemy-unit.striking img{animation:enemyBounce .28s ease-out}.enemy-unit.windup{filter:drop-shadow(0 0 10px #ff5455)}
.board-wrap{background:radial-gradient(circle at 50% 24%,#314e87,#101a3d 88%);border:2px solid #678ab5;box-shadow:inset 0 0 30px #050b1bcc,0 3px 12px #0008}.board-wrap:before{content:'';position:absolute;inset:2px;pointer-events:none;border-radius:13px;box-shadow:0 0 0 1px #d6d4fd40 inset}.board-wrap.chrono-board:before{box-shadow:0 0 12px #74bfff inset}
.hp-track,.track{box-shadow:0 0 0 1px #071a37,inset 0 2px 5px #0008}.combo{font-weight:1000;color:#ffe38b;text-shadow:0 0 9px #ffe86d65}.iconbtn{border-color:#dfc482;background:linear-gradient(#375884,#20355e);box-shadow:inset 0 1px #fff3}.iconbtn:active,.toolbtn:active{transform:translateY(1px)}
.panel{background:linear-gradient(146deg,#1b335c,#101d3c);border:1px solid #7d98c0;box-shadow:inset 0 1px #ffffff16,0 6px 18px #0006}.panel h2{color:#ffe6a9}.toolbtn{border-radius:10px}.toast{background:linear-gradient(#385887,#1a2e54);border-color:#f1d18e}
.cutin-layer.show{animation:cutinPulse .73s ease-out both;box-shadow:0 0 24px #ffe59c55,0 6px 22px #091935}.cutin-layer:after{content:'';position:absolute;inset:0;background:linear-gradient(108deg,transparent 28%,#fff9ca70 46%,transparent 58%);transform:translateX(-160%);pointer-events:none}.cutin-layer.show:after{animation:cutinBeam .75s ease-out}.chrono-curtain.show::before{border-style:double;border-width:6px}.chrono-curtain.show{background:radial-gradient(circle,#a1b6ff20,#1c2ca578 60%,#060a2bad);}
.combo-splash{position:absolute;top:38%;left:8%;width:85%;text-align:center;z-index:9;pointer-events:none;display:none;transform:rotate(-7deg);font-size:clamp(20px,8vw,33px);font-weight:1000;line-height:1.05;color:#ffefb2;text-shadow:2px 3px 0 #341f4f,0 0 14px #ffae6b,0 0 24px #b78afa}.combo-splash.show{display:block;animation:comboReveal .82s both}.combo-splash small{display:block;font-size:11px;letter-spacing:2px;color:#fff}
/* Title / home screen. Elements deliberately re-use existing game character art. */
.home-modal{background:radial-gradient(circle at 50% 15%,#7585cc77,#071129eb 65%);padding:8px;z-index:30}.home-panel{width:min(100%,480px);max-height:94dvh;overflow-y:auto;border:2px solid #f4d78c;border-radius:18px;background:#121f3d;box-shadow:0 0 0 3px #3c5181,0 25px 75px #000d;position:relative;isolation:isolate}.home-sky{height:clamp(210px,35dvh,325px);position:relative;overflow:hidden;background:url('../assets/backgrounds/forest.jpg') center/cover no-repeat}.home-sky::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#132548 1%,#12284b24 65%,#3c54a53d)}.home-sky::after{content:'';position:absolute;left:50%;top:8%;width:160px;height:160px;transform:translateX(-50%);border-radius:50%;border:2px dashed #b5e6ff80;box-shadow:0 0 35px #5cabff99, inset 0 0 32px #c9e2ff78;animation:chronoRotate 22s linear infinite;pointer-events:none}.home-characters{position:absolute;bottom:-7px;inset-inline:3%;display:flex;align-items:end;justify-content:center;gap:0;z-index:3}.home-characters img{width:24%;max-height:150px;object-fit:contain;filter:drop-shadow(0 5px 3px #000d);animation:homeBob 3s ease-in-out infinite alternate}.home-characters img:nth-child(2){animation-delay:-.7s}.home-characters img:nth-child(3){animation-delay:-1.5s}.home-characters img:nth-child(4){animation-delay:-2.1s}.home-title{position:absolute;z-index:4;top:12px;left:0;right:0;text-align:center;text-shadow:0 3px 5px #070e3d,0 0 17px #060b44}.home-title em{display:block;font-style:normal;font-size:10px;color:#e6e5ff;font-weight:900;letter-spacing:3px}.home-title strong{display:block;font-size:clamp(23px,6vw,34px);font-weight:1000;letter-spacing:-.07em;color:#fff0be;-webkit-text-stroke:.65px #513a67}.home-title small{font-size:10px;color:#cde9ff;font-weight:900;letter-spacing:1px}.home-main{padding:14px 20px 18px;display:grid;gap:10px;background:linear-gradient(150deg,#1f3564,#111d3b)}.home-cta{background:linear-gradient(180deg,#ffebbd,#e9bd6c 53%,#b67e3c);border:2px solid #fff3d4;border-radius:12px;color:#432309;font-weight:1000;font-size:20px;letter-spacing:1px;min-height:54px;box-shadow:0 4px 0 #764c27,0 0 12px #fae29a55}.home-cta:active{transform:translateY(3px);box-shadow:0 1px 0 #764c27}.home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.home-actions button{background:linear-gradient(#3a5d8d,#213c6d);border:1px solid #b5c9ed;box-shadow:inset 0 1px #ffffff40;color:#f5e5ba;border-radius:10px;min-height:46px;font-weight:850;font-size:12px}.home-progress{font-size:11px;color:#d8e7ff;display:flex;justify-content:space-between;gap:10px}.home-footer{text-align:center;color:#a9c4e6;font-size:10px}
/* settings with real controls */
#settingsModal{z-index:35}.settings-dialog{width:min(100%,425px);max-height:90dvh;overflow-y:auto}.setting-row{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#152d50;border:1px solid #567da8;border-radius:10px;padding:9px 10px;margin:8px 0;color:#ecf2ff;font-size:13px;font-weight:850;text-align:left}.setting-row small{display:block;color:#aac8e9;font-size:10px;font-weight:500}.setting-toggle{min-width:72px;min-height:36px;background:#31466e!important;color:#fff!important;border:1px solid #8cadd4!important;border-radius:10px}.setting-toggle.active{background:linear-gradient(#e2f9ed,#56bf96)!important;color:#073a2e!important;border-color:#a5ffce!important}.setting-row input[type=range]{width:116px;accent-color:#f9d286}.setting-note{color:#a9c9e9!important;font-size:11px!important;text-align:left}
#stageModal .stage-choices button{position:relative;background:linear-gradient(#2e4b7b,#1a3156);box-shadow:inset 0 1px #ffffff1d,0 3px 8px #0003;transition:filter .12s}.stage-choices button:not(:disabled):active{filter:brightness(1.25)}#stageModal .stage-choices button.boss{background:linear-gradient(#643a64,#302243)}.stage-choices button.current{outline:2px solid #ffd786}
.training-card{background:linear-gradient(160deg,#284677,#152c4e);border-color:#8da5ce}.training-info img{filter:drop-shadow(0 4px 2px #0008)}.train-btn:not(:disabled):active{filter:brightness(1.13)}
/* accessibility / reduced motion and responsive sizing */
@keyframes phase7Strike{0%{transform:translate(0,0) scale(1)}40%{transform:translate(24px,-17px) scale(1.25) rotate(-10deg)}76%{transform:translate(8px,-8px) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@keyframes phase7Victory{0%{transform:translateY(0) rotate(-3deg)}100%{transform:translateY(-8px) rotate(4deg)}}
@keyframes enemyBounce{0%,100%{transform:translateX(0)}40%{transform:translate(-6px,-4px) rotate(-5deg)}70%{transform:translate(4px,2px)}}
@keyframes arenaLuma{to{filter:brightness(1.2)}}
@keyframes homeBob{to{transform:translateY(-7px)}}
@keyframes comboReveal{0%{opacity:0;transform:rotate(-10deg) scale(.3)}30%{opacity:1;transform:rotate(-7deg) scale(1.22)}80%{opacity:1}100%{opacity:0;transform:rotate(-4deg) scale(1)}}
@keyframes cutinPulse{0%{filter:brightness(2);opacity:0}20%{opacity:1;filter:brightness(1.3)}100%{opacity:1;filter:brightness(1)}}
@keyframes cutinBeam{to{transform:translateX(160%)}}
@media(max-width:380px){.topbar{gap:3px;padding:3px 1px 7px}.topbar .iconbtn{min-width:29px;padding:2px;font-size:12px}.topbar #trainOpen{min-width:34px;font-size:10px}.topbar #homeOpen{min-width:31px}.topbar #settingsOpen{min-width:30px}.stage-button{font-size:10px;max-width:123px}.stage-button .tiny{display:block;font-size:8px}.home-main{padding:12px}.home-sky{height:230px}.home-title strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){.home-characters img,.home-sky::after,.arena::before,.hero.winning{animation:none}.combo-splash.show{animation:none;display:block;opacity:1}.cutin-layer.show:after{animation:none}}
body.reduced-fx .home-characters img,body.reduced-fx .arena:before,body.reduced-fx .hero.winning{animation:none}
body.reduced-fx .arena.hit{animation:none}body.reduced-fx .cutin-layer.show:after{animation:none}
/* Final readability pass for mobile title artwork. */
.home-title{top:0;padding:12px 6px 23px;background:linear-gradient(180deg,#0c1a46db 0%,#1a2c5f6b 55%,transparent 100%)}
.home-title strong{color:#fff5ce;-webkit-text-stroke:0;text-shadow:0 2px 0 #594477,2px 3px 0 #152850,-2px 3px 0 #152850,0 4px 8px #061535,0 0 12px #fff5d0;font-weight:1000;line-height:1.27}
.home-title em,.home-title small{color:#f8fcff;text-shadow:0 1px 5px #061735,0 0 5px #08214c}

/* Phase8: readable, low-overhead diagnostic in the existing settings panel */
.performance-readout{font-variant-numeric:tabular-nums;color:#a6f8d8;font-weight:900;font-size:12px;white-space:nowrap;padding:6px 0}