/* ACTUATOR 2100 // CANON VISUAL RECONSTRUCTION */
:root{--ink:#070b13;--ally:#63e7fc;--hostile:#ff425f;--chrome:#c5d3e9;--signal:#f8bc74;color-scheme:dark}
body{font-family:'Rajdhani',sans-serif;background:#03080f}#game{background:#020811}
#stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#050911b0 0%,transparent 25%,transparent 70%,#03060b42 100%),repeating-linear-gradient(0deg,transparent 0,transparent 5px,#79bdeb08 6px);z-index:1}
.top{height:63px;border-bottom:1px solid #6c839653;padding:9px max(25px,env(safe-area-inset-right)) 9px max(25px,env(safe-area-inset-left));background:linear-gradient(90deg,#07111bf7,#0d1423f2 46%,#160c1af7);box-shadow:0 5px 24px #000b;backdrop-filter:blur(14px)}
.top:before{content:"";position:absolute;top:0;left:0;height:3px;width:43%;background:linear-gradient(90deg,#3ce7ff,#e1f7ff,transparent)}.top:after{content:"";position:absolute;top:0;right:0;height:3px;width:43%;background:linear-gradient(90deg,transparent,#fc537c,#fba371)}
.top .logo{font-family:Barlow Condensed,sans-serif;font-weight:900;font-size:clamp(20px,2.2vw,29px);letter-spacing:.1em;font-style:italic;color:#f0f5ff;text-shadow:0 0 20px #9dd8ff44}
.top .logo b{color:#fba56e}.top .logo em{color:#e9eef6;font-size:.79em}
.top .meta{font-size:10px;font-weight:700;color:#ffcc87;border-left:1px solid #fba1718a;padding-left:15px}
#mute,#pause{font:800 11px Rajdhani;letter-spacing:.13em;border:1px solid #8da7ba75;clip-path:polygon(0 0,90% 0,100% 30%,100% 100%,0 100%);background:#0c1624;padding:9px 18px}
.menu{background:radial-gradient(ellipse 58% 72% at 13% 36%,#132b419a,transparent 85%),radial-gradient(ellipse 45% 80% at 92% 62%,#74233677,transparent 90%),linear-gradient(100deg,#020911ed,#080d16ed 58%,#170b13e9);padding:85px max(22px,3.4vw) 24px}
.menu:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.24;background:repeating-linear-gradient(100deg,transparent 0 72px,#7aa9c915 73px,#0000 74px),linear-gradient(115deg,transparent 0 30%,#87d8fc16 30.05% 30.14%,transparent 30.2% 70%,#f45c7f19 70.05% 70.16%,transparent 70.25%)}
.heading{max-width:1430px;margin:0 auto 13px;position:relative;text-align:left;border-left:3px solid #eea577;padding-left:20px}
.heading small{font-size:12px;font-weight:700;color:#f0a46e;letter-spacing:.29em}.heading h1{font-size:clamp(48px,6.2vw,92px);letter-spacing:.07em;margin:4px 0 1px;font-style:italic;line-height:.91}
.heading h1 span{color:#eea16e;text-shadow:0 0 23px #ff6e789c}.heading h1 em{color:#e8f1f8}
.heading p{font-weight:700;font-size:12px;letter-spacing:.19em;color:#b5cadc}
.dossier-layout{max-width:1430px;margin:auto;display:grid;grid-template-columns:minmax(240px,31%) minmax(0,1fr);gap:12px;align-items:stretch;position:relative}
.character-spotlight{position:relative;overflow:hidden;min-height:505px;border:1px solid #5c86958a;background:linear-gradient(160deg,#11283b,#050810 67%);isolation:isolate;box-shadow:inset 0 0 50px #070c1c}
.character-spotlight:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 45% 35%,var(--splash) 0,transparent 60%);opacity:.28;z-index:-1}
.character-spotlight:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px #050911a6;background:linear-gradient(0deg,#050911 0,transparent 38%),repeating-linear-gradient(0deg,transparent 0 4px,#fff1 5px);mix-blend-mode:screen}
.spot-portrait{position:absolute;top:8%;left:-17%;height:85%;width:135%;object-fit:cover;object-position:center 20%;opacity:.95;filter:saturate(1.04) contrast(1.12) drop-shadow(0 0 25px #03050a);mask-image:linear-gradient(0deg,transparent 1%,black 22%,black 90%,transparent 100%);transition:filter .3s,opacity .25s}
.spot-runes{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 84% 20% at 40% 90%,var(--splash),transparent 90%),linear-gradient(95deg,transparent 0 86%,var(--splash) 86.1% 86.3%,transparent 86.4%)}
.spot-runes i{position:absolute;border:1px solid var(--splash);opacity:.24;transform:rotate(18deg);width:180px;height:180px;border-radius:50%;right:-77px;top:15%}
.spot-top{position:absolute;z-index:2;top:17px;left:17px;right:17px;display:flex;justify-content:space-between;color:#e2edf7;font-size:10px;font-weight:800;letter-spacing:.19em}
.spot-index{font-family:Barlow Condensed;font-size:30px;color:var(--splash);opacity:.75}
.spot-bottom{position:absolute;z-index:3;left:17px;right:17px;bottom:18px}.spot-bottom .faction-tag{display:inline-block;border-left:3px solid var(--splash);background:#0c1522c5;padding:3px 8px;letter-spacing:.18em;color:var(--splash);font-size:12px;font-weight:800}.spot-bottom h3{font:900 clamp(37px,4.3vw,63px)/.94 Barlow Condensed;letter-spacing:.07em;font-style:italic;margin:8px 0 4px;text-transform:uppercase;text-shadow:0 4px 25px #000}.spot-bottom p{font-size:12px;font-weight:600;max-width:350px;color:#b9cbda;line-height:1.25;margin:0}.spot-bottom .weapon-name{color:#ffce9b;font-weight:800;letter-spacing:.13em;margin-top:9px}
.panel{width:100%;max-width:none;background:linear-gradient(135deg,#081b2af9 0%,#0b1622f9 44%,#170f1afa 100%);border:1px solid #5d79876e;box-shadow:inset 0 1px #a1e6ff46,0 23px 65px #0008}
.sect{padding:12px 15px;background:linear-gradient(90deg,#122a3f,#120f20);font-size:12px;letter-spacing:.18em;border-bottom:1px solid #6a8a9b65}
.sect:before{content:'●';color:#53c9e8;margin-right:6px}.sect span:last-child{color:#c2cee0}
.roster{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:14px 13px 12px}
.card{height:clamp(114px,11.6vw,184px);border:1px solid #8592a052;clip-path:polygon(0 0,92% 0,100% 7%,100% 100%,8% 100%,0 94%);background:#0f1f31;box-shadow:none;transform:translateZ(0);transition:filter .18s,transform .18s}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:contrast(1.14) saturate(.85);transition:transform .26s,filter .26s;z-index:1}
.card:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 22%,#0915240d 42%,#040912e9 96%),linear-gradient(125deg,transparent 75%,var(--accent) 160%)}
.card:after{position:absolute;z-index:5}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}.card:hover img,.card.selected img{transform:scale(1.06);filter:contrast(1.14) saturate(1.2)}
.card.selected{border:2px solid #79fff2;box-shadow:0 0 20px #65ffef38}.card.darc.selected{border-color:#ff627d;box-shadow:0 0 20px #ff547638}
.card .body,.card .head,.card .hair{z-index:0}.card.has-photo .body,.card.has-photo .head,.card.has-photo .hair{display:none}
.card .name{z-index:4;padding:30px 8px 7px;background:linear-gradient(transparent,#040811de 80%);font-size:clamp(17px,1.6vw,24px);line-height:1;white-space:nowrap}
.card .name small{float:none;display:block;letter-spacing:.13em;font-size:8px;margin-top:2px}
.detail{padding:17px 18px;background:linear-gradient(95deg,#11283a,#181522);border-top:1px solid #729cb650;gap:8px}
.profile h2{font:900 clamp(26px,2.5vw,42px) Barlow Condensed;font-style:italic;letter-spacing:.08em}
.profile small{color:#f4b478;font-size:11px}.profile p{font-size:14px;color:#b9cad8}.profile span{display:block;margin-top:3px;letter-spacing:.06em;font-size:11px}
.options{gap:9px}.options select{height:44px;border:1px solid #7792a65e;color:#f5f7ff;background:#091b2c;min-width:130px;font-size:12px;font-weight:700}
.primary{height:45px;border:1px solid #ffbd8e;background:linear-gradient(115deg,#e9a46c,#fbce99 68%,#ffffff);color:#16111a;font:900 18px Barlow Condensed;letter-spacing:.13em;clip-path:polygon(0 0,94% 0,100% 28%,100% 100%,6% 100%,0 70%);box-shadow:0 0 20px #f0ab7c5a;transition:filter .18s,transform .15s}.primary:hover{filter:brightness(1.13)}.primary:active{transform:translateY(2px)}
.credit{max-width:1430px;text-align:left;color:#8fa3b7;letter-spacing:.16em;padding-left:5px;margin-top:12px}
#stage:not(:empty){filter:saturate(1.06) contrast(1.04)}
.hud{top:73px;left:4%;right:4%;gap:25px}
.fighter strong{font:900 clamp(26px,4vw,51px) Barlow Condensed;font-style:italic;letter-spacing:.09em;text-shadow:0 3px 16px #000b}
.fighter.right strong{color:#ffe9e8}.fighter:first-child strong{color:#e5f8ff}
.track{height:26px;border:2px solid #abc9d39c;transform:skewX(-16deg);box-shadow:inset 0 0 9px #000a,0 0 17px #0007;background:#070b19d5;padding:3px}
.bar{background:linear-gradient(90deg,#1d8fa8 0%,#7ffcf1 60%,#c6fff7);box-shadow:0 0 15px #42e6ed6f;transition:width .08s}.right .bar{background:linear-gradient(90deg,#ffbd7a,#ff4c77);box-shadow:0 0 17px #f74b7770}
.meter{height:10px;transform:skewX(-16deg);margin-top:5px;border-color:#d2dcf56e;background:#0a0b14c5}.meter div{background:linear-gradient(90deg,#a185ff,#edc5ff)}.right .meter div{background:linear-gradient(90deg,#f85b82,#ffcb89)}
.clock{min-width:107px;position:relative;margin-top:-5px}.clock:before{content:"SYNC // 2100";position:absolute;left:0;right:0;top:-13px;color:#d0b4bd;font-size:9px;letter-spacing:.14em}.clock strong{font:900 clamp(55px,6vw,86px)/.9 Barlow Condensed;letter-spacing:.04em;color:#f2efff;text-shadow:0 0 20px #b9e8ff66}.clock small{color:#ffc794;font-size:11px;letter-spacing:.12em}
.announce{font-size:clamp(65px,13vw,145px);font-weight:900;font-style:italic;color:#ffffff;text-shadow:0 0 70px #65e7fd,0 4px #101826;animation:actAnnounce .27s cubic-bezier(.15,.7,.2,1) both;pointer-events:none}
@keyframes actAnnounce{0%{opacity:0;transform:scale(1.45) skewX(-7deg)}100%{opacity:1;transform:scale(1) skewX(-7deg)}}
.controls button{border:1px solid #a1c5d28d;border-radius:9px;clip-path:polygon(0 0,88% 0,100% 17%,100% 100%,12% 100%,0 83%);min-width:67px;height:65px;background:linear-gradient(140deg,#0e2637d9,#0a1120df);font:900 15px Barlow Condensed;box-shadow:inset 0 1px #c6f5ff48,0 3px 20px #0009}
.attacks button{min-width:83px;border-radius:0}.attacks [data-attack=punch]{color:#d9fffd;border-color:#58dffa}.attacks [data-attack=kick]{color:#ffe2ba;border-color:#fba165}
.attacks [data-attack=special]{background:linear-gradient(120deg,#642d48cc,#2c214acc);border-color:#ff91d5;color:#ffe0f4}.attacks [data-hold=guard]{border-color:#aebfd7;color:#e6e9ff}
.foot{padding:8px 10px max(9px,env(safe-area-inset-bottom));background:linear-gradient(90deg,#071b2de8,#180e1be8);color:#bed2d9;font-weight:800;letter-spacing:.12em;border-top:1px solid #8299a052}
.combo-readout{position:absolute;z-index:8;top:23%;left:6%;font:900 clamp(23px,3.8vw,59px) Barlow Condensed;font-style:italic;color:#ffbc79;text-shadow:0 2px 20px #f9835c88;pointer-events:none;opacity:0;transform:skewX(-9deg);transition:opacity .2s}.combo-readout.show{opacity:1}.combo-readout small{display:block;color:#e7eeff;font:800 12px Rajdhani;letter-spacing:.15em}
.round-tag{position:absolute;top:159px;left:4%;z-index:8;font-size:10px;color:#abc4d3;letter-spacing:.18em;font-weight:800;pointer-events:none}
.end{background:radial-gradient(ellipse at center,#18253a99,#02080be9),#050914e8}
.end>div{border-color:#f1a87c;background:linear-gradient(130deg,#1d2e42,#17101c);box-shadow:0 0 60px #d3615a3a}.end h2{color:#fff6ea;font-style:italic;letter-spacing:.1em;text-shadow:0 0 37px #ffb978b2}
.menu .section-rail{position:absolute;right:4%;top:78px;color:#c4b4ad99;writing-mode:vertical-rl;font:800 10px Rajdhani;letter-spacing:.24em}
.menu #loreline{max-width:1430px;margin:10px auto 0;border-top:1px solid #6f87944a;padding:9px 4px;color:#e4c5b2;font-size:11px;letter-spacing:.17em;line-height:1.35}
@media(max-width:1050px){.dossier-layout{grid-template-columns:minmax(180px,28%) minmax(0,1fr)}.character-spotlight{min-height:510px}.roster{grid-template-columns:repeat(4,minmax(0,1fr))}.card{height:125px}.spot-bottom h3{font-size:37px}.options .primary{width:100%}}
@media(max-width:710px){.top{height:53px;padding:7px 13px}.top .logo{font-size:21px}.menu{padding:60px 10px 18px}.heading{padding-left:10px;margin-bottom:10px}.heading h1{font-size:clamp(43px,9.2vw,70px)}.heading small{font-size:9px}.heading p{font-size:9px}.dossier-layout{grid-template-columns:1fr;gap:8px}.character-spotlight{min-height:0;height:155px;display:flex;background:linear-gradient(110deg,#09192a,#250f20);border-color:#557a8d8c}.spot-portrait{left:auto;right:-8%;top:-80%;width:58%;height:250%;object-position:center 10%;opacity:.85}.spot-top{top:6px;left:12px}.spot-top span:nth-child(2){display:none}.spot-index{font-size:21px}.spot-bottom{left:12px;right:42%;bottom:8px}.spot-bottom h3{font-size:clamp(30px,7vw,48px);line-height:.8;margin:4px 0}.spot-bottom p{font-size:10px;line-height:1.2}.spot-bottom .weapon-name{display:none}.roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:7px}.card{height:clamp(103px,23vw,147px)}.card .name{font-size:clamp(14px,3.8vw,20px);padding:12px 5px 4px}.card .name small{font-size:7px}.sect{padding:7px;font-size:10px}.detail{padding:9px}.profile{min-width:100%}.profile h2{font-size:27px}.profile p{font-size:12px}.options{width:100%;gap:6px}.options select{min-width:0;flex:1;height:39px}.options .primary{height:43px}.credit{font-size:8px}.hud{top:62px;left:3%;right:3%;gap:6px}.fighter strong{font-size:clamp(19px,5.1vw,29px)}.track{height:18px}.meter{height:7px}.clock{min-width:56px}.clock:before{display:none}.clock strong{font-size:44px}.round-tag{top:130px;left:3%;font-size:8px}.controls button{min-width:49px;height:50px;font-size:13px}.attacks button{min-width:62px}.combo-readout{top:26%}.foot{font-size:8px}}
@media(max-height:580px) and (orientation:landscape){.menu{padding-top:46px}.top{height:40px}.heading h1{font-size:42px}.heading small{font-size:9px}.heading p{margin:2px 0 6px}.dossier-layout{grid-template-columns:22% 1fr}.character-spotlight{height:auto;min-height:230px;display:block}.spot-portrait{width:140%;height:90%;left:-15%;right:auto;top:4%}.spot-bottom{right:12px}.spot-bottom h3{font-size:25px}.spot-bottom p,.spot-bottom .weapon-name{display:none}.spot-top{top:7px}.roster{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:6px}.card{height:83px}.card .name{font-size:15px}.detail{padding:5px 7px}.profile{min-width:0}.profile h2{font-size:20px}.profile p{font-size:10px}.options{width:auto}.options select{height:33px;max-width:120px}.options .primary{height:33px;width:auto}.hud{top:45px}.fighter strong{font-size:20px}.clock strong{font-size:44px}.round-tag{top:106px}.controls button{height:40px;min-width:46px}.attacks button{min-width:55px}.foot{padding:2px}.menu #loreline{margin-top:5px;padding:4px}}
@media(prefers-reduced-motion:reduce){.card,.card img,.spot-portrait,.announce{transition:none!important;animation:none!important}}