:root{color-scheme:dark;--cyan:#4de7ff;--blue:#278dff;--mint:#57f0bf;--gold:#ffc94a;--pink:#ff4a91;--red:#ff4469;--ink:#08162f;--panel:rgba(7,20,47,.86);--line:rgba(122,226,255,.3);font-family:"Segoe UI",Tahoma,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050b1d;color:#fff}button,input,select{font:inherit}button{color:#fff;border:1px solid rgba(116,220,255,.35);background:linear-gradient(180deg,rgba(28,63,111,.92),rgba(8,24,55,.94));border-radius:12px;padding:12px 18px;cursor:pointer;transition:.18s transform,.18s filter,.18s border-color}button:hover{filter:brightness(1.18);border-color:var(--cyan)}button:active{transform:scale(.97)}button.primary{background:linear-gradient(135deg,#0ba7d4,#2366e5 55%,#734ee5);border-color:#72efff;box-shadow:0 0 24px rgba(51,190,255,.32)}button.wide{width:100%;margin-top:10px}.hidden{display:none!important}
#game-shell,#viewport,#viewport canvas{position:absolute;inset:0;width:100%;height:100%}#viewport{background-color:#050b1d;background-image:url("../assets/maps/cyber-lane-environment-v2-clean.png");background-position:center;background-size:100% 100%;background-repeat:no-repeat}#viewport canvas{display:block;background:transparent}
#hud{position:absolute;inset:0;pointer-events:none}.team-card{position:absolute;top:18px;width:33%;height:72px;display:flex;align-items:center;gap:12px;padding:10px 18px;background:linear-gradient(90deg,rgba(4,25,55,.92),rgba(9,33,71,.62));border:1px solid var(--line);clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%)}.team-card.ally{left:22px;border-left:4px solid var(--cyan)}.team-card.enemy{right:22px;justify-content:flex-end;text-align:right;clip-path:polygon(6% 0,100% 0,100% 100%,6% 100%,0 50%);border-right:4px solid var(--pink)}.portrait{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:900;border:2px solid #fff;box-shadow:0 0 16px currentColor}.portrait.numan{color:#ffd34f;background:radial-gradient(circle,#fff,#80ddff)}.portrait.hacker{color:#fff;background:radial-gradient(circle,#663278,#130b21)}.team-copy{flex:1;min-width:0}.team-copy>b{display:block;font-size:20px;letter-spacing:.7px}.team-copy>span{display:block;font-size:10px;color:#a9c8df;letter-spacing:1.2px}.team-card>strong{font-size:14px;color:#dff8ff}.meter{height:7px;margin-top:6px;background:rgba(0,0,0,.5);border-radius:8px;overflow:hidden}.meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#38d8ff,#64f3b7);transition:.2s width}.enemy .meter i{background:linear-gradient(90deg,#ff7eaa,#ff345f)}
.match-center{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:150px;height:94px;text-align:center;padding:7px 10px;background:radial-gradient(circle,#153d76,#071329 70%);border:3px solid rgba(111,225,255,.75);border-radius:50%;box-shadow:0 0 22px rgba(55,188,255,.35)}.match-center small{display:block;color:#a9dff2;font-weight:700}.match-center b{display:block;font-size:30px;line-height:34px}.match-center span{font-size:12px;color:#ffe28a}
#objective-strip{position:absolute;top:102px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.5px;white-space:nowrap}#objective-strip span,#objective-strip em{padding:5px 10px;background:rgba(4,17,41,.78);border:1px solid rgba(120,213,255,.25);border-radius:20px;font-style:normal}#objective-strip span.destroyed{text-decoration:line-through;opacity:.45;border-color:#ff5d7e}#objective-strip span.locked:after{content:" · LOCKED";color:#ffd86d}
#status-panel{position:absolute;top:145px;left:18px;display:grid;gap:6px;width:152px}#status-panel div{display:flex;justify-content:space-between;padding:6px 9px;border-left:3px solid var(--cyan);background:rgba(5,20,47,.76);font-size:10px}#status-panel span{color:#99bdd6}#status-panel b{color:#7cf0c3}
#event-feed{position:absolute;left:18px;bottom:122px;width:300px;padding:10px 14px;border-left:4px solid var(--cyan);background:linear-gradient(90deg,rgba(4,20,48,.9),rgba(4,20,48,.35));text-shadow:0 2px 8px #000}#event-feed b{display:block;font-size:12px;color:var(--cyan)}#event-feed span{font-size:13px}#boss-callout{position:absolute;left:50%;top:155px;transform:translateX(-50%);font-size:26px;font-weight:900;color:#fff;text-shadow:0 0 18px var(--pink);opacity:0;transition:.25s opacity}#boss-callout.show{opacity:1}
#skill-dock{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;pointer-events:auto}#skill-dock button{position:relative;width:125px;height:92px;padding:9px 5px 5px;border-radius:18px;background:linear-gradient(180deg,rgba(13,43,84,.95),rgba(4,16,38,.96));box-shadow:inset 0 0 18px rgba(49,192,255,.12),0 8px 28px rgba(0,0,0,.35)}#skill-dock button.cooldown{filter:grayscale(.8) brightness(.65);cursor:not-allowed}#skill-dock kbd{position:absolute;right:6px;top:5px;font-size:9px;color:#c9edff;background:#06142d;padding:3px 5px;border-radius:6px}#skill-dock i{display:grid;place-items:center;margin:0 auto 4px;width:38px;height:38px;border:2px solid #69e6ff;border-radius:50%;box-shadow:0 0 14px rgba(76,225,255,.4);font-style:normal}.scan-icon{background:repeating-radial-gradient(circle,#4de7ff 0 2px,transparent 3px 8px)}.quarantine-icon{background:radial-gradient(circle,#60efbb 0 25%,transparent 27%),conic-gradient(#60efbb,transparent,#60efbb)}.shield-icon{background:linear-gradient(135deg,#ffe889,#e59d1f);clip-path:polygon(50% 0,90% 15%,82% 72%,50% 100%,18% 72%,10% 15%)}.dragon-icon{color:#fff;background:radial-gradient(circle,#169bff,#0a3e9f)}#skill-dock b{display:block;font-size:10px}#skill-dock span{font-size:9px;color:#7ee6ff}#skill-dock .ultimate{border-color:#ffd65e}
#controls-hint{position:absolute;right:18px;bottom:20px;width:225px;padding:8px 12px;text-align:right;font-size:10px;color:#b8d1e1;background:rgba(4,16,38,.72);border-radius:10px}#gamepad-status{position:absolute;right:18px;bottom:62px;font-size:9px;color:#8caec6}#pause-button{pointer-events:auto;position:absolute;right:18px;top:145px;width:40px;height:40px;padding:0;border-radius:50%}
.screen{position:absolute;inset:0;z-index:20}.cover-backdrop{position:absolute;inset:0;background:url("../assets/concepts/numanh-ai-moba-concept-v3-center-towers.png") center/cover no-repeat;filter:saturate(.82) blur(1.5px);transform:scale(1.01)}.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,11,28,.98) 0%,rgba(2,11,28,.91) 39%,rgba(2,11,28,.35) 70%,rgba(2,11,28,.56) 100%),linear-gradient(0deg,rgba(2,9,25,.84),transparent 55%)}.cover-content{position:absolute;left:7vw;top:50%;transform:translateY(-48%);max-width:570px}.eyebrow{display:inline-block;padding:7px 12px;border:1px solid rgba(100,229,255,.55);border-radius:20px;color:#9eeeff;font-size:11px;font-weight:800;letter-spacing:1.4px;background:rgba(8,34,65,.65)}.cover-content h1{margin:18px 0 9px;font-size:clamp(48px,6vw,88px);line-height:.88;letter-spacing:-3px;text-shadow:0 8px 40px #000}.cover-content h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#5deaff,#6cecc6,#ffd464);background-clip:text;-webkit-background-clip:text}.cover-content p{font-size:18px;color:#d3e9f5}.cover-features{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.cover-features span{padding:6px 9px;border-radius:7px;background:rgba(19,89,134,.46);border:1px solid rgba(91,223,255,.32);font-size:10px;font-weight:800;color:#bdf4ff;letter-spacing:.6px}.cover-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 18px}.cover-content>small{color:#90aec4;letter-spacing:1px}.version{position:absolute;right:22px;bottom:18px;font-size:11px;color:#9ab4c7}
.modal-screen{display:grid;place-items:center;background:rgba(2,7,20,.78);backdrop-filter:blur(8px)}.modal-card{width:min(620px,92vw);max-height:90vh;overflow:auto;padding:24px;background:linear-gradient(145deg,rgba(12,37,74,.98),rgba(5,15,37,.98));border:1px solid rgba(104,225,255,.45);border-radius:24px;box-shadow:0 28px 90px #000}.modal-card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.modal-card header h2,.modal-card h2{margin:2px 0 0;font-size:26px}.modal-card small{color:#71e6ff;font-weight:800;letter-spacing:1.3px}.close-modal{width:40px;height:40px;padding:0;border-radius:50%;font-size:24px}.modal-card>label{display:grid;grid-template-columns:1fr auto;gap:8px;margin:15px 0;color:#d6e8f3}.modal-card input[type=range]{grid-column:1/-1;width:100%;accent-color:#45dcff}.modal-card select{grid-column:1/-1;padding:10px;color:#fff;background:#071a39;border:1px solid rgba(110,215,255,.35);border-radius:10px}.file-row input{display:none}.file-row span{grid-column:1/-1;padding:12px;border:1px dashed #59dff3;border-radius:10px;text-align:center;cursor:pointer;color:#8deaff}.settings-note{padding:12px;background:rgba(0,0,0,.22);border-radius:12px;color:#b9cfdd}.settings-note p{margin:5px 0 0;font-size:12px}.settings-note code{color:#ffe285}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.controller-card{width:min(720px,92vw)}#controller-live{text-align:center;padding:20px;background:rgba(0,0,0,.2);border-radius:18px}.pad-orb{font-size:55px}#controller-live b,#controller-live span{display:block;margin-top:6px}.mapping-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.mapping-grid span{padding:10px;text-align:center;background:rgba(70,165,225,.12);border-radius:10px;color:#88dfff}.mapping-grid b{display:block;color:#fff;font-size:11px}.compact{width:min(380px,90vw);text-align:center}.result-card{text-align:center}.result-card #result-icon{font-size:64px;color:#ffe064}.result-card p{color:#b9d1df}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.result-stats span{padding:12px 5px;background:rgba(60,170,230,.12);border-radius:12px;font-size:10px;color:#8fb5cc}.result-stats b{display:block;font-size:22px;color:#fff;margin-top:5px}
@media(max-width:900px){.team-card{width:39%;height:64px;top:10px}.team-copy>b{font-size:14px}.portrait{width:40px;height:40px}.match-center{transform:translateX(-50%) scale(.82);transform-origin:top center}.cover-content{left:5vw}.cover-content h1{letter-spacing:-1px}#objective-strip,#status-panel,#controls-hint{display:none}#skill-dock{bottom:10px;gap:5px}#skill-dock button{width:92px;height:78px}#event-feed{bottom:96px;width:240px}.mapping-grid{grid-template-columns:repeat(2,1fr)}}

/* v0.3.0 — cinematic MOBA presentation */
#screen-vignette,#screen-scanlines{position:absolute;inset:0;pointer-events:none;z-index:2}
#screen-vignette{background:radial-gradient(ellipse at 50% 50%,transparent 48%,rgba(0,4,18,.08) 76%,rgba(0,3,15,.34) 100%);mix-blend-mode:multiply}
#screen-scanlines{opacity:.035;background:repeating-linear-gradient(0deg,rgba(130,225,255,.15) 0,rgba(130,225,255,.15) 1px,transparent 1px,transparent 4px)}
#hud{z-index:4}
.team-card{top:16px;height:82px;width:35%;padding:10px 25px;background:linear-gradient(90deg,rgba(3,18,43,.96),rgba(8,39,77,.82) 72%,rgba(8,39,77,.25));border-top:2px solid rgba(84,213,255,.72);border-bottom:2px solid rgba(35,122,206,.7);box-shadow:0 5px 24px rgba(0,0,0,.38),inset 0 0 25px rgba(34,155,255,.1)}
.team-card.enemy{background:linear-gradient(270deg,rgba(25,6,35,.96),rgba(60,10,56,.82) 72%,rgba(60,10,56,.25));border-color:rgba(255,57,125,.65)}
.portrait{width:62px;height:62px;border-width:3px;background-size:cover;box-shadow:0 0 0 4px rgba(5,22,49,.8),0 0 22px currentColor}
.portrait.numan{font-size:0;background:url("../assets/numan-v3/idle.png") center 16%/115% auto no-repeat,radial-gradient(circle,#fff,#80ddff)}
.portrait.hacker{font-size:0;background:radial-gradient(ellipse at 50% 55%,#eee 0 20%,#160d25 22% 50%,#55184f 52%,#130b21 70%)}
.portrait{position:relative;overflow:hidden;background:#07152e!important;flex:0 0 auto}
.portrait img{position:absolute;display:block;height:auto;max-width:none;object-fit:initial;transform:none;filter:drop-shadow(0 0 6px currentColor)}
.portrait.numan img{width:215%;left:-88%;top:-62%}
.portrait.hacker img{width:230%;left:-69%;top:-36%}
.team-copy>b{font-size:22px;text-shadow:0 2px 8px #000}.team-copy>span{font-size:9px;letter-spacing:1.7px}.team-card>strong{min-width:58px;font-size:13px;padding:5px 7px;border-radius:8px;background:rgba(0,0,0,.28)}
.meter{height:11px;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 0 12px rgba(51,221,255,.18)}
.match-center{top:4px;width:168px;height:112px;border-width:4px;background:radial-gradient(circle at 50% 45%,#153d76 0,#071329 58%,#020817 100%);box-shadow:0 0 0 8px rgba(4,20,45,.82),0 0 35px rgba(55,188,255,.38),inset 0 0 20px rgba(70,213,255,.2)}
.match-center:after{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid transparent;border-left-color:#4de7ff;border-right-color:#ff3d83;transform:rotate(-18deg)}
.match-center b{font-size:36px;line-height:40px}.match-center small{font-size:11px}.match-center span{font-weight:900}
#objective-strip{display:none}
#status-panel{top:118px;left:auto;right:18px;width:165px}
#status-panel div{border-left:0;border-right:3px solid var(--cyan);background:linear-gradient(270deg,rgba(5,20,47,.88),rgba(5,20,47,.35));box-shadow:0 7px 16px rgba(0,0,0,.2)}
#event-feed{left:22px;top:118px;bottom:auto;width:305px;border-radius:0 12px 12px 0;backdrop-filter:blur(6px)}
#minimap-panel{position:absolute;left:20px;bottom:18px;width:292px;padding:8px 8px 10px;background:linear-gradient(145deg,rgba(5,20,43,.96),rgba(6,13,30,.92));border:2px solid rgba(95,214,255,.5);border-radius:20px 20px 34px 20px;box-shadow:0 14px 35px rgba(0,0,0,.5),inset 0 0 22px rgba(27,147,231,.12);pointer-events:none;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 88%,92% 100%,8% 100%,0 90%)}
#minimap-panel header{display:flex;justify-content:space-between;padding:0 7px 5px;font-size:9px;letter-spacing:1px;color:#8ceaff}#minimap-panel header span{color:#65efb9}#minimap{display:block;width:100%;height:132px;border-radius:10px;background:#071329}
#skill-dock{bottom:14px;gap:18px;align-items:flex-end}
#skill-dock button{width:116px;height:132px;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;filter:drop-shadow(0 12px 12px rgba(0,0,0,.45))}
#skill-dock button:hover{transform:translateY(-5px);filter:brightness(1.16) drop-shadow(0 15px 18px rgba(0,0,0,.5))}
#skill-dock button.cooldown{filter:grayscale(.85) brightness(.55) drop-shadow(0 10px 10px rgba(0,0,0,.45))}
#skill-dock i{width:78px;height:78px;margin:0 auto 6px;border-width:4px;box-shadow:0 0 0 6px rgba(4,18,42,.85),0 0 22px rgba(76,225,255,.55),inset 0 0 18px rgba(255,255,255,.22)}
#skill-dock .ultimate i{border-color:#ffe26d;box-shadow:0 0 0 6px rgba(4,18,42,.85),0 0 28px rgba(255,202,50,.52),inset 0 0 18px rgba(255,255,255,.2)}
#skill-dock kbd{top:auto;bottom:0;right:42px;min-width:32px;text-align:center;border:1px solid rgba(202,237,255,.6);font-size:10px}
#skill-dock b{font-size:11px;text-shadow:0 2px 5px #000}#skill-dock span{display:block;margin-top:2px;font-size:8px}
#controls-hint{right:16px;bottom:18px;width:220px;background:linear-gradient(270deg,rgba(5,20,44,.9),rgba(5,20,44,.2));border-right:3px solid rgba(92,219,255,.5)}
#gamepad-status{right:18px;bottom:64px}
#pause-button{top:118px;background:rgba(4,18,41,.8);backdrop-filter:blur(4px)}
@media(max-width:1100px){#minimap-panel{transform:scale(.78);transform-origin:left bottom}#skill-dock{gap:6px}#skill-dock button{width:88px;height:108px}#skill-dock i{width:60px;height:60px}#skill-dock kbd{right:28px}.team-card{width:38%}}

/* v0.5.0 — full MOBA systems */
#game-shell{overflow:hidden}#viewport{transform-origin:center center;will-change:transform;transition:none}
.team-copy b em{display:inline-block;margin-left:5px;padding:2px 5px;border-radius:6px;background:rgba(0,0,0,.32);color:#ffe075;font-size:9px;font-style:normal;vertical-align:middle}
.xp-meter{height:3px;margin-top:3px;background:rgba(0,0,0,.5);border-radius:4px;overflow:hidden}.xp-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffe168,#70f0ff);transition:.2s width}
#mode-badge{display:block;margin:-2px auto 1px;color:#7feaff;font-size:8px;font-style:normal;font-weight:900;letter-spacing:1px}.match-center small{line-height:14px}
.mode-select{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:18px;max-width:590px}.mode-select label{position:relative;cursor:pointer}.mode-select input{position:absolute;opacity:0}.mode-select span{display:block;min-height:72px;padding:13px 14px;border:1px solid rgba(103,216,255,.32);border-radius:13px;background:rgba(5,22,50,.8);transition:.18s transform,.18s border-color,.18s box-shadow}.mode-select b,.mode-select small{display:block}.mode-select b{color:#8ceeff;font-size:12px;letter-spacing:.7px}.mode-select small{margin-top:6px;color:#a8c4d8;font-size:10px}.mode-select input:checked+span{border-color:#74efff;background:linear-gradient(135deg,rgba(9,105,153,.82),rgba(30,47,112,.86));box-shadow:0 0 22px rgba(52,204,255,.28);transform:translateY(-2px)}
#kill-feed{position:absolute;right:20px;top:310px;width:330px;display:grid;gap:6px}.kill-row{padding:8px 12px;border-right:3px solid var(--cyan);border-radius:9px 0 0 9px;background:linear-gradient(270deg,rgba(5,25,55,.94),rgba(5,25,55,.25));font-size:11px;font-weight:800;text-align:right;animation:killIn .2s ease-out}.kill-row.enemy{border-color:var(--pink);color:#ffc2d8}@keyframes killIn{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:none}}
#minimap-panel{pointer-events:auto}.ping-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:5px}.ping-row button{padding:5px 2px;border-radius:6px;font-size:7px;letter-spacing:.3px}
#status-panel{width:178px}#status-panel div{font-size:9px}#ai-state{color:#ff87c0!important}#target-mode,#zoom-value{color:#ffe074!important}
.result-stats{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.mode-select{grid-template-columns:1fr}.mode-select span{min-height:55px;padding:9px 12px}#kill-feed{top:110px;right:10px;width:230px}.ping-row{display:none}.result-stats{grid-template-columns:repeat(2,1fr)}}

/* ==== v0.6 additions: mana bar, low-mana skill state, ultimate screen flash ==== */
.mana-meter{position:relative;height:9px;margin-top:4px;background:rgba(0,0,0,.55);border:1px solid rgba(120,190,255,.28);border-radius:7px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.mana-meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#2f7bff,#7fd0ff);box-shadow:0 0 8px rgba(90,170,255,.7);transition:.15s width}
.mana-meter small{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;letter-spacing:.4px;color:#eaf6ff;text-shadow:0 1px 2px #000;pointer-events:none}
#skill-dock button.nomana{filter:grayscale(.5) brightness(.82) saturate(1.2)}
#skill-dock button.nomana span{color:#7fc4ff!important}
#skill-dock button.nomana:not(.cooldown) i{border-color:#2f7bff;box-shadow:0 0 0 6px rgba(4,18,42,.85),0 0 16px rgba(47,123,255,.6),inset 0 0 14px rgba(120,190,255,.25)}
#screen-flash{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;z-index:60}