/* ═══════════════════════════════════════════════════════════ THEME SYSTEM — 5 themes via data-theme on Default: steel (improved dark), others: ironclad, ghost, void, biohazard ═══════════════════════════════════════════════════════════ */ /* SHARED INVARIANTS */ :root { --fd:'Orbitron',sans-serif;--fb:'Chakra Petch',sans-serif;--fm:'Share Tech Mono',monospace; --ch:12px;--ch-sm:7px;--ch-lg:16px; --gold:#ffcc00;--gold2:#ffe044;--gold-dim:rgba(255,204,0,0.1); --gold-glow:0 0 10px rgba(255,204,0,0.8),0 0 28px rgba(255,204,0,0.25); --danger:#ff1a00;--danger2:#ff3d22;--danger-dim:rgba(255,26,0,0.13); --danger-glow:0 0 8px rgba(255,26,0,0.7),0 0 20px rgba(255,26,0,0.2); --void:#bb44ff;--void2:#cc77ff;--void-dim:rgba(187,68,255,0.1); --void-glow:0 0 10px rgba(187,68,255,0.6),0 0 24px rgba(187,68,255,0.18); --bevel-in:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -1px 0 rgba(0,0,0,0.7),inset 1px 0 0 rgba(255,255,255,0.05),inset -1px 0 0 rgba(0,0,0,0.5); --bevel-raised:0 1px 0 rgba(255,255,255,0.12),0 -1px 0 rgba(0,0,0,0.6),0 4px 16px rgba(0,0,0,0.8),0 1px 0 rgba(255,255,255,0.06); --shadow-panel:0 6px 28px rgba(0,0,0,0.9),0 1px 0 rgba(255,255,255,0.05),0 -1px 0 rgba(0,0,0,0.5); --shadow-card:0 4px 18px rgba(0,0,0,0.8),0 1px 0 rgba(255,255,255,0.06); --shadow-deep:0 12px 40px rgba(0,0,0,0.95),0 4px 12px rgba(0,0,0,0.6); } /* ── THEME: STEEL (improved dark — default) ── */ :root, [data-theme="steel"] { --bg0:#0a0d14;--bg1:#0e1220;--bg2:#121828;--bg3:#161d30;--bg4:#1b2238; --plate:#10141f;--plate2:#161c2c;--rim:#232c40;--rim2:#2d3850;--rim3:#3a4860; --fire:#ff7a20;--fire2:#ff9944;--fire3:#ffbb66;--fire-dim:rgba(255,122,32,0.14); --fire-glow:0 0 12px rgba(255,122,32,0.8),0 0 30px rgba(255,122,32,0.3); --fire-glow-sm:0 0 6px rgba(255,122,32,0.7),0 0 14px rgba(255,122,32,0.25); --plasma:#00d4ff;--plasma2:#44e4ff;--plasma-dim:rgba(0,212,255,0.1); --plasma-glow:0 0 10px rgba(0,212,255,0.7),0 0 28px rgba(0,212,255,0.2); --acid:#00ffbb;--acid2:#55ffd4;--acid-dim:rgba(0,255,187,0.1); --acid-glow:0 0 8px rgba(0,255,187,0.6),0 0 20px rgba(0,255,187,0.18); --t1:#d8e6f8;--t2:#7a90b8;--t3:#4a5878; --metal-a:linear-gradient(160deg,#181e2e 0%,#111520 30%,#1a2033 55%,#0e1220 80%,#131828 100%); --metal-b:linear-gradient(180deg,#141c28 0%,#0e1420 50%,#111828 100%); --metal-c:linear-gradient(135deg,#131828 0%,#0f1420 100%); --header-bg:linear-gradient(180deg,#1c2438 0%,#141c2c 50%,#101520 100%); --tabs-bg:linear-gradient(180deg,#121828 0%,#0c1018 100%); --page-bg:#0a0d14; --card-border-t:rgba(255,255,255,0.12); --card-chamfer:rgba(255,122,32,0.55); --scheme-name:'STEEL'; } /* ── THEME: IRONCLAD (warm amber/brown industrial) ── */ [data-theme="ironclad"] { --bg0:#0f0a06;--bg1:#160e08;--bg2:#1c1209;--bg3:#22160b;--bg4:#281c0e; --plate:#180e08;--plate2:#201408;--rim:#3a2010;--rim2:#4a2c16;--rim3:#5c3820; --fire:#e87820;--fire2:#f09030;--fire3:#f8aa50;--fire-dim:rgba(232,120,32,0.18); --fire-glow:0 0 12px rgba(232,120,32,0.85),0 0 30px rgba(232,120,32,0.35); --fire-glow-sm:0 0 6px rgba(232,120,32,0.7),0 0 14px rgba(232,120,32,0.3); --plasma:#ffa020;--plasma2:#ffb840;--plasma-dim:rgba(255,160,32,0.12); --plasma-glow:0 0 10px rgba(255,160,32,0.7),0 0 28px rgba(255,160,32,0.25); --acid:#c8e840;--acid2:#d8f060;--acid-dim:rgba(200,232,64,0.1); --acid-glow:0 0 8px rgba(200,232,64,0.6),0 0 20px rgba(200,232,64,0.2); --t1:#f0d8b8;--t2:#a07848;--t3:#6a4828; --metal-a:linear-gradient(160deg,#221508 0%,#180e06 30%,#2a1a0a 55%,#160c04 80%,#1e1208 100%); --metal-b:linear-gradient(180deg,#201408 0%,#160e06 50%,#1c1208 100%); --metal-c:linear-gradient(135deg,#1e1408 0%,#160e04 100%); --header-bg:linear-gradient(180deg,#2c1a08 0%,#201008 50%,#180e04 100%); --tabs-bg:linear-gradient(180deg,#1c1008 0%,#120a04 100%); --page-bg:#0f0a06; --card-border-t:rgba(255,180,80,0.15); --card-chamfer:rgba(232,120,32,0.6); --scheme-name:'IRONCLAD'; } /* ── THEME: GHOST (clean slate — light tactical) ── */ [data-theme="ghost"] { --bg0:#f0f4f8;--bg1:#e8edf4;--bg2:#dde4ee;--bg3:#d2dae8;--bg4:#c8d0e0; --plate:#e4eaf2;--plate2:#d8e0ec;--rim:#b8c4d8;--rim2:#a8b8cc;--rim3:#96a8c0; --fire:#c83000;--fire2:#e04010;--fire3:#f05830;--fire-dim:rgba(200,48,0,0.08); --fire-glow:0 0 8px rgba(200,48,0,0.5),0 0 20px rgba(200,48,0,0.2); --fire-glow-sm:0 0 4px rgba(200,48,0,0.4),0 0 10px rgba(200,48,0,0.15); --plasma:#0060c8;--plasma2:#0080e8;--plasma-dim:rgba(0,96,200,0.08); --plasma-glow:0 0 8px rgba(0,96,200,0.4),0 0 20px rgba(0,96,200,0.15); --acid:#008048;--acid2:#00a060;--acid-dim:rgba(0,128,72,0.08); --acid-glow:0 0 6px rgba(0,128,72,0.4),0 0 16px rgba(0,128,72,0.15); --t1:#1a2030;--t2:#4a5870;--t3:#8898b0; --metal-a:linear-gradient(160deg,#e8eef8 0%,#dde4f0 30%,#e4eaf4 55%,#d8e0ec 80%,#e0e8f4 100%); --metal-b:linear-gradient(180deg,#e4eaf4 0%,#d8e2f0 50%,#e0e8f4 100%); --metal-c:linear-gradient(135deg,#e8eef8 0%,#d8e2f0 100%); --header-bg:linear-gradient(180deg,#d0dae8 0%,#c4d0e4 50%,#b8c8dc 100%); --tabs-bg:linear-gradient(180deg,#dce6f0 0%,#d0dcea 100%); --page-bg:#f0f4f8; --card-border-t:rgba(255,255,255,0.9); --card-chamfer:rgba(200,48,0,0.4); --scheme-name:'GHOST'; --bevel-in:inset 0 1px 0 rgba(255,255,255,0.8),inset 0 -1px 0 rgba(0,0,0,0.08),inset 1px 0 0 rgba(255,255,255,0.5),inset -1px 0 0 rgba(0,0,0,0.06); --shadow-card:0 2px 12px rgba(0,0,0,0.12),0 1px 0 rgba(255,255,255,0.9); } /* ── THEME: VOID (deep cosmic purple) ── */ [data-theme="void"] { --bg0:#040208;--bg1:#07040f;--bg2:#0a0614;--bg3:#0e081c;--bg4:#120b22; --plate:#090614;--plate2:#0e0a1c;--rim:#261848;--rim2:#321e58;--rim3:#402868; --fire:#aa44ff;--fire2:#cc66ff;--fire3:#dd99ff;--fire-dim:rgba(170,68,255,0.15); --fire-glow:0 0 12px rgba(170,68,255,0.85),0 0 30px rgba(170,68,255,0.35),0 0 60px rgba(170,68,255,0.12); --fire-glow-sm:0 0 6px rgba(170,68,255,0.7),0 0 14px rgba(170,68,255,0.3); --plasma:#ff44aa;--plasma2:#ff66bb;--plasma-dim:rgba(255,68,170,0.1); --plasma-glow:0 0 10px rgba(255,68,170,0.65),0 0 24px rgba(255,68,170,0.2); --acid:#44ffdd;--acid2:#66ffee;--acid-dim:rgba(68,255,221,0.1); --acid-glow:0 0 8px rgba(68,255,221,0.6),0 0 20px rgba(68,255,221,0.18); --t1:#e0d4ff;--t2:#8870b8;--t3:#4a3878; --metal-a:linear-gradient(160deg,#120c24 0%,#0c0818 30%,#180e2c 55%,#080612 80%,#100a20 100%); --metal-b:linear-gradient(180deg,#100c20 0%,#0a0818 50%,#0e0a1c 100%); --metal-c:linear-gradient(135deg,#120c22 0%,#0a0818 100%); --header-bg:linear-gradient(180deg,#1c1038 0%,#120c28 50%,#0e0820 100%); --tabs-bg:linear-gradient(180deg,#100c20 0%,#080614 100%); --page-bg:#040208; --card-border-t:rgba(200,150,255,0.15); --card-chamfer:rgba(170,68,255,0.6); --scheme-name:'VOID'; } /* ── THEME: BIOHAZARD (terminal green on black) ── */ [data-theme="biohazard"] { --bg0:#010804;--bg1:#021008;--bg2:#03160a;--bg3:#041e0e;--bg4:#062812; --plate:#021008;--plate2:#04180c;--rim:#0c3018;--rim2:#104020;--rim3:#185028; --fire:#00ff66;--fire2:#33ff88;--fire3:#66ffaa;--fire-dim:rgba(0,255,102,0.12); --fire-glow:0 0 12px rgba(0,255,102,0.85),0 0 30px rgba(0,255,102,0.3); --fire-glow-sm:0 0 6px rgba(0,255,102,0.7),0 0 14px rgba(0,255,102,0.25); --plasma:#00ccff;--plasma2:#33ddff;--plasma-dim:rgba(0,204,255,0.1); --plasma-glow:0 0 10px rgba(0,204,255,0.65),0 0 24px rgba(0,204,255,0.2); --acid:#ccff00;--acid2:#ddff33;--acid-dim:rgba(204,255,0,0.1); --acid-glow:0 0 8px rgba(204,255,0,0.6),0 0 20px rgba(204,255,0,0.18); --t1:#b0ffcc;--t2:#408860;--t3:#205838; --metal-a:linear-gradient(160deg,#061a0c 0%,#041208 30%,#082014 55%,#030e06 80%,#061610 100%); --metal-b:linear-gradient(180deg,#071a0c 0%,#040e06 50%,#06160a 100%); --metal-c:linear-gradient(135deg,#07180c 0%,#040e06 100%); --header-bg:linear-gradient(180deg,#0a2810 0%,#071c0c 50%,#041408 100%); --tabs-bg:linear-gradient(180deg,#081c0c 0%,#041008 100%); --page-bg:#010804; --card-border-t:rgba(0,255,102,0.2); --card-chamfer:rgba(0,255,102,0.5); --scheme-name:'BIOHAZARD'; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;overflow:hidden;background:var(--bg0)} body{font-family:var(--fb);color:var(--t1);font-size:13px;display:flex;flex-direction:column; transition:background .3s,color .3s} /* Subtle scanline overlay — only on dark themes */ :root body::after,[data-theme="steel"] body::after,[data-theme="void"] body::after,[data-theme="biohazard"] body::after,[data-theme="ironclad"] body::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:9999; background:repeating-linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0) 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px)} /* Vignette */ body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998; background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,0.5) 100%)} [data-theme="ghost"] body::before{background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,0.08) 100%)} /* ══════════════════════════════════════════ COCKPIT HEADER — armored command bridge ══════════════════════════════════════════ */ #hdr{ display:flex;align-items:center;padding:0 16px;height:56px; background:var(--header-bg); border-bottom:2px solid var(--rim); flex-shrink:0;gap:12px;position:relative; box-shadow:var(--bevel-in),0 6px 32px rgba(0,0,0,0.6),0 1px 0 rgba(255,255,255,0.05); transition:background .3s; } /* Forge-glow bottom seam */ #hdr::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent 0%,rgba(255,106,0,0.06) 15%,rgba(255,106,0,0.6) 50%,rgba(255,106,0,0.06) 85%,transparent 100%); box-shadow:0 0 12px rgba(255,106,0,0.3);z-index:2} /* Brushed metal top highlight */ #hdr::before{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.14) 30%,rgba(255,255,255,0.18) 50%,rgba(255,255,255,0.14) 70%,transparent)} #gtitle{ font-family:var(--fd);font-size:15px;font-weight:800;letter-spacing:4px;text-transform:uppercase; color:var(--fire);text-shadow:var(--fire-glow);flex-shrink:0; position:relative;padding-right:16px; } #gtitle::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%); width:1px;height:28px;background:linear-gradient(to bottom,transparent,var(--rim3),transparent)} /* Resource chips — PCB chip style */ #resbar{display:flex;gap:5px;flex:1;overflow:hidden;align-items:center} .rchip{ display:flex;align-items:center;gap:4px; background:var(--metal-b); border:1px solid var(--rim2); border-top-color:rgba(255,255,255,0.10); border-left-color:rgba(255,255,255,0.06); border-bottom-color:rgba(0,0,0,0.6); border-right-color:rgba(0,0,0,0.4); padding:4px 10px;font-size:10px;white-space:nowrap;flex-shrink:0; clip-path:polygon(var(--ch-sm) 0,100% 0,100% calc(100% - var(--ch-sm)),calc(100% - var(--ch-sm)) 100%,0 100%,0 var(--ch-sm)); font-family:var(--fm);transition:all .15s; box-shadow:var(--bevel-in),0 2px 8px rgba(0,0,0,0.5) } .rchip:hover{border-color:var(--fire);box-shadow:var(--bevel-in),0 0 12px rgba(255,106,0,0.2),0 2px 8px rgba(0,0,0,0.5)} .rchip .rv{color:var(--fire2);font-weight:600;font-size:12px;font-family:var(--fd);letter-spacing:.5px} .rchip .rn{color:var(--t3);font-size:8px;letter-spacing:1.5px;text-transform:uppercase} .rchip .rico{font-size:12px;line-height:1} #hdr-r{display:flex;gap:6px;align-items:center;flex-shrink:0} #tick-d{color:var(--t3);font-size:9px;font-family:var(--fm);letter-spacing:1px} .hbtn{ background:linear-gradient(160deg,#161c2c 0%,#0f1220 50%,#0c0f1c 100%); border:1px solid var(--rim2);border-top-color:rgba(255,255,255,0.09); border-bottom-color:rgba(0,0,0,0.6); color:var(--t2);padding:6px 13px;font-family:var(--fd);font-size:10px;font-weight:700; cursor:pointer;letter-spacing:2px;text-transform:uppercase;transition:all .15s; clip-path:polygon(var(--ch-sm) 0,100% 0,100% calc(100% - var(--ch-sm)),calc(100% - var(--ch-sm)) 100%,0 100%,0 var(--ch-sm)); box-shadow:var(--bevel-in),0 2px 6px rgba(0,0,0,0.5) } .hbtn:hover{border-color:var(--fire);color:var(--fire);background:linear-gradient(160deg,rgba(255,106,0,0.12),rgba(255,106,0,0.04));box-shadow:var(--bevel-in),var(--fire-glow-sm)} .hbtn:active{transform:translateY(1px);box-shadow:var(--bevel-in)} /* ══════════════════════════════════════════ EVENT TICKER — mission data strip ══════════════════════════════════════════ */ #evt-banner{ display:flex;align-items:center;gap:12px;padding:5px 18px;flex-shrink:0; background:linear-gradient(90deg,var(--bg0),var(--bg2),var(--bg0)); border-bottom:1px solid var(--rim);font-family:var(--fm);position:relative; } #evt-banner::before{content:'◀ SYS';position:absolute;left:4px;font-size:8px;color:var(--t3);letter-spacing:1px} #evt-banner::after{content:'SYS ▶';position:absolute;right:4px;font-size:8px;color:var(--t3);letter-spacing:1px} #evt-banner.show{ background:linear-gradient(90deg,var(--bg0),rgba(255,102,0,0.07),var(--bg0)); border-bottom-color:rgba(255,102,0,0.4); animation:evtPulse 2.5s ease-in-out infinite } @keyframes evtPulse{0%,100%{opacity:.9}50%{opacity:1;border-bottom-color:var(--fire)}} .evt-txt{flex:1;font-size:10px;color:var(--t1);letter-spacing:.5px} .evt-timer{ font-family:var(--fm);font-size:10px;color:var(--fire2); background:linear-gradient(135deg,#0c0e18,#0a0c14); border:1px solid rgba(255,102,0,0.3);padding:2px 8px; clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); box-shadow:0 0 6px rgba(255,102,0,0.15) } /* ══════════════════════════════════════════ GROUPED DROPDOWN NAV — 3D forge panels ══════════════════════════════════════════ */ /* ── NAV BAR CONTAINER ── */ #nav-bar{ display:flex;align-items:stretch; background:var(--tabs-bg); border-bottom:2px solid var(--rim); flex-shrink:0;position:relative;z-index:200; box-shadow:0 4px 24px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.06); transition:background .3s; } /* Forge seam along bottom edge */ #nav-bar::after{ content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;z-index:201; background:linear-gradient(90deg,transparent 0%,var(--fire) 30%,var(--fire2) 50%,var(--fire) 70%,transparent 100%); box-shadow:0 0 12px rgba(255,122,32,0.4); opacity:0.35; } /* ── GROUP CONTAINER ── */ .nav-group{ position:relative; } .nav-group:not(:last-child)::after{ content:'';position:absolute;right:0;top:20%;bottom:20%;width:1px; background:linear-gradient(to bottom,transparent,var(--rim3),transparent); pointer-events:none; } /* ── GROUP TRIGGER BUTTON ── */ .nav-btn{ display:flex;align-items:center;gap:7px; padding:0 20px;height:46px; font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase; background:transparent;border:none;color:var(--t2);cursor:pointer; position:relative;white-space:nowrap; transition:color .15s,background .15s; user-select:none; } .nav-btn-icon{font-size:14px;line-height:1;filter:grayscale(0.5);transition:filter .15s,transform .2s} .nav-btn-label{letter-spacing:2.5px} .nav-btn-arrow{ font-size:9px;opacity:0.5;margin-left:2px; transition:transform .25s cubic-bezier(0.34,1.56,0.64,1),opacity .15s; display:inline-block; } /* Hover state */ .nav-btn:hover{color:var(--t1);background:rgba(255,255,255,0.03)} .nav-btn:hover .nav-btn-icon{filter:none;transform:scale(1.15)} .nav-btn:hover .nav-btn-arrow{opacity:0.9} /* Top highlight bar on hover */ .nav-btn::before{ content:'';position:absolute;top:0;left:10%;right:10%;height:2px; background:linear-gradient(90deg,transparent,var(--fire2),transparent); transform:scaleX(0);transform-origin:center; transition:transform .2s ease;opacity:0.6; } .nav-btn:hover::before,.nav-group.open .nav-btn::before{transform:scaleX(1)} /* Active group state */ .nav-group.has-active .nav-btn{color:var(--fire2)} .nav-group.has-active .nav-btn-icon{filter:none;text-shadow:0 0 8px currentColor} .nav-group.has-active .nav-btn::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--fire),var(--fire2),var(--fire),transparent); box-shadow:var(--fire-glow-sm); } /* Open state */ .nav-group.open .nav-btn{color:var(--fire2);background:var(--fire-dim)} .nav-group.open .nav-btn-arrow{transform:rotate(180deg);opacity:1} /* ── DROPDOWN PANEL ── */ .nav-dropdown{ position:absolute;top:100%;left:0; min-width:200px; /* 3D: start folded back like a panel hinging open */ transform-origin:top center; transform:rotateX(-90deg) translateY(-8px); opacity:0; pointer-events:none; transition: transform .28s cubic-bezier(0.34,1.2,0.64,1), opacity .2s ease; z-index:300; /* perspective on parent for 3D effect */ } .nav-group.open .nav-dropdown{ transform:rotateX(0deg) translateY(0); opacity:1; pointer-events:auto; } /* perspective wrapper */ .nav-group{perspective:600px;perspective-origin:top center} .nav-drop-inner{ background:linear-gradient(160deg,var(--bg3) 0%,var(--bg1) 40%,var(--bg2) 100%); border:1px solid var(--rim2); border-top:1px solid var(--fire-dim); border-bottom-color:rgba(0,0,0,0.7); box-shadow: 0 16px 48px rgba(0,0,0,0.9), 0 4px 16px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,122,32,0.06); overflow:hidden; /* Chamfer bottom-right corner */ clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); } /* Metallic header strip at top of dropdown */ .nav-drop-inner::before{ content:'';display:block;height:2px; background:linear-gradient(90deg,transparent,var(--fire) 20%,var(--fire2) 50%,var(--fire) 80%,transparent); box-shadow:0 0 8px rgba(255,122,32,0.5); } /* ── DROPDOWN ITEMS ── */ .tb{ display:block;width:100%;padding:11px 18px; font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.04); color:var(--t2);cursor:pointer;white-space:nowrap; text-align:left;position:relative; transition:color .1s,background .1s,padding-left .15s; } .tb:last-child{border-bottom:none} /* Left accent line on hover */ .tb::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--fire); transform:scaleY(0);transform-origin:center; transition:transform .15s ease; } .tb:hover{ color:var(--t1); background:linear-gradient(90deg,rgba(255,122,32,0.08),transparent); padding-left:22px; } .tb:hover::before{transform:scaleY(1)} /* Active tab inside dropdown */ .tb.active{ color:var(--fire2); background:linear-gradient(90deg,rgba(255,122,32,0.15),rgba(255,122,32,0.04)); padding-left:22px; } .tb.active::before{transform:scaleY(1);box-shadow:0 0 6px rgba(255,122,32,0.6)} /* Active dot */ .tb.active::after{ content:'●';position:absolute;right:12px;top:50%;transform:translateY(-50%); font-size:6px;color:var(--fire2); text-shadow:0 0 6px var(--fire); animation:activeDot 1.5s ease-in-out infinite; } /* ── BREADCRUMB: active tab label ── */ #nav-active-crumb{ display:flex;align-items:center;gap:6px; margin-left:auto;padding:0 18px; font-family:var(--fd);font-size:9px;letter-spacing:2px; color:var(--t3); white-space:nowrap; border-left:1px solid var(--rim); } #nav-crumb-group{color:var(--t2);text-transform:uppercase} .nav-crumb-sep{color:var(--fire);opacity:0.5;font-size:11px} #nav-crumb-tab{color:var(--fire2);text-transform:uppercase} /* ── STAGGER ANIMATION for dropdown items ── */ .nav-group.open .tb{ animation:dropItemIn .2s ease both; } .nav-group.open .tb:nth-child(1){animation-delay:.04s} .nav-group.open .tb:nth-child(2){animation-delay:.08s} .nav-group.open .tb:nth-child(3){animation-delay:.12s} .nav-group.open .tb:nth-child(4){animation-delay:.16s} .nav-group.open .tb:nth-child(5){animation-delay:.20s} @keyframes dropItemIn{ from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:translateX(0)} } /* ── MOBILE: bottom sheet dropdowns ── */ @media(max-width:640px){ #nav-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch; position:fixed;bottom:0;left:0;right:0;top:auto; border-top:2px solid var(--rim);border-bottom:none; box-shadow:0 -4px 20px rgba(0,0,0,0.8);z-index:500;height:52px; } #nav-bar::after{top:-2px;bottom:auto;height:2px;opacity:0.5} .nav-group{flex-shrink:0} .nav-btn{height:52px;padding:0 14px;gap:4px} .nav-btn-label{font-size:8px;letter-spacing:1px} .nav-btn-icon{font-size:12px} .nav-btn-arrow{display:none} /* Dropdowns open upward on mobile */ .nav-dropdown{top:auto;bottom:100%; transform-origin:bottom center; transform:rotateX(90deg) translateY(8px); } .nav-group.open .nav-dropdown{transform:rotateX(0deg) translateY(0)} #nav-active-crumb{display:none} #main{padding-bottom:52px} } @media(max-width:380px){ .nav-btn{padding:0 10px} .nav-btn-label{font-size:7px} } /* ══════════════════════════════════════════ MAIN ARENA — tactical holodisplay ══════════════════════════════════════════ */ #main{ flex:1;overflow:hidden;position:relative; background-color:var(--bg0); background-image: /* Hex-like cross-grid */ linear-gradient(rgba(255,106,0,0.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,106,0,0.022) 1px,transparent 1px), /* Secondary fine grid */ linear-gradient(rgba(0,204,255,0.008) 1px,transparent 1px), linear-gradient(90deg,rgba(0,204,255,0.008) 1px,transparent 1px); background-size:48px 48px, 48px 48px, 12px 12px, 12px 12px; } #main::before{ content:'';position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,106,0,0.05) 0%,transparent 100%), radial-gradient(ellipse 40% 60% at 0% 60%,rgba(0,204,255,0.025) 0%,transparent 100%), radial-gradient(ellipse 40% 60% at 100% 60%,rgba(0,204,255,0.025) 0%,transparent 100%) } .tp{display:none;height:100%;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:var(--rim) transparent} .tp.active{display:block} /* LAYOUT GRID */ .pg{display:grid;gap:12px} .pg2{grid-template-columns:1fr 1fr} .pg3{grid-template-columns:1fr 1fr 1fr} .pgw{grid-template-columns:2fr 1fr} .pgwl{grid-template-columns:3fr 2fr} .pg32{grid-template-columns:3fr 2fr} /* ══════════════════════════════════════════ ARMORED PANEL CARDS — 3D forge-plate ══════════════════════════════════════════ */ .card{ background:var(--metal-a); border:1px solid var(--rim2); border-top-color:var(--card-border-t); border-left-color:rgba(255,255,255,0.07); border-bottom-color:rgba(0,0,0,0.3); border-right-color:rgba(0,0,0,0.2); padding:14px;position:relative;margin-bottom:12px; clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch)); box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,0.05); transition:border-color .2s,box-shadow .2s,background .3s } .card:last-child{margin-bottom:0} /* Chamfer edge highlight — angled specular */ .card::before{ content:'';position:absolute;top:0;left:var(--ch);right:0;height:1px; background:linear-gradient(90deg,var(--card-chamfer) 0%,rgba(255,255,255,0.06) 40%,transparent) } /* Corner rivet — machined bolt */ .card::after{ content:'';position:absolute;bottom:8px;right:8px;width:8px;height:8px; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,0.25),var(--rim3) 50%,var(--bg0)); border-radius:50%; box-shadow:inset 0 1px 0 rgba(0,0,0,0.9),0 1px 0 rgba(255,255,255,0.08),0 0 4px rgba(0,0,0,0.5) } .card:hover{border-top-color:rgba(255,255,255,0.14);box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,0.07),0 0 0 1px rgba(255,106,0,0.05)} /* Card title */ .ctit{ font-family:var(--fd);font-size:11px;font-weight:800;letter-spacing:3.5px;text-transform:uppercase; color:var(--fire2);margin-bottom:12px;display:flex;align-items:center;gap:8px; position:relative;padding-bottom:8px } .ctit::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px; background:linear-gradient(90deg,rgba(255,106,0,0.5),rgba(255,106,0,0.15) 40%,transparent)} .csub{font-size:12px;color:var(--t2);margin-bottom:10px;line-height:1.7;font-weight:400} /* ══════════════════════════════════════════ QUALITY TIERS ══════════════════════════════════════════ */ .q-common{color:var(--t1)} .q-uncommon{color:#33ee77} .q-rare{color:var(--plasma)} .q-elite{color:var(--void)} .q-legendary{color:var(--gold);text-shadow:var(--gold-glow)} .qtag{ display:inline-block;padding:2px 7px;font-size:9px;letter-spacing:1.5px; font-family:var(--fd);font-weight:600;text-transform:uppercase; clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px) } .qtag.common{background:rgba(100,115,140,0.15);border:1px solid rgba(100,115,140,0.3);color:var(--t2)} .qtag.uncommon{background:rgba(51,238,119,0.1);border:1px solid rgba(51,238,119,0.35);color:#33ee77} .qtag.rare{background:var(--plasma-dim);border:1px solid rgba(0,191,255,0.35);color:var(--plasma)} .qtag.elite{background:var(--void-dim);border:1px solid rgba(170,68,255,0.35);color:var(--void)} .qtag.legendary{background:var(--gold-dim);border:1px solid rgba(255,204,0,0.45);color:var(--gold)} /* ══════════════════════════════════════════ HEAT GAUGES — HD extruded charge bars ══════════════════════════════════════════ */ .pw{ background:linear-gradient(180deg,#010204 0%,#030508 60%,#050810 100%); border:1px solid rgba(0,0,0,0.8); border-top-color:rgba(0,0,0,0.95);border-bottom-color:rgba(255,255,255,0.06); border-left-color:rgba(0,0,0,0.7);border-right-color:rgba(0,0,0,0.7); height:12px;position:relative;overflow:hidden;margin:5px 0; clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); box-shadow:inset 0 3px 8px rgba(0,0,0,0.95),inset 0 1px 3px rgba(0,0,0,0.8),0 1px 0 rgba(255,255,255,0.04) } /* Machined tick marks */ .pw::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none; background:repeating-linear-gradient(90deg,transparent,transparent 11px,rgba(0,0,0,0.25) 11px,rgba(0,0,0,0.25) 12px)} .pf{height:100%;position:relative;z-index:1;will-change:width} /* Plasma shimmer sweep */ .pf::before{content:'';position:absolute;inset:0;z-index:2; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.18) 50%,transparent 100%); background-size:80px 100%;animation:barShimmer 1.6s linear infinite} @keyframes barShimmer{0%{background-position:-80px 0}100%{background-position:calc(100% + 80px) 0}} /* Bright plasma leading edge */ .pf::after{content:'';position:absolute;top:0;right:0;width:3px;height:100%; background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5)); box-shadow:0 0 10px rgba(255,255,255,0.8),0 0 20px rgba(255,255,255,0.4);z-index:4} /* Bar colours — full 3D depth gradient */ .pf.amber{ background:linear-gradient(180deg,rgba(255,180,80,0.3) 0%,var(--fire2) 15%,var(--fire) 50%,rgba(160,50,0,0.9) 100%); box-shadow:0 0 10px rgba(255,106,0,0.5),inset 0 1px 0 rgba(255,180,80,0.4) } .pf.cyan{ background:linear-gradient(180deg,rgba(100,240,255,0.3) 0%,var(--plasma2) 15%,var(--plasma) 50%,rgba(0,80,160,0.9) 100%); box-shadow:0 0 10px rgba(0,204,255,0.5),inset 0 1px 0 rgba(100,240,255,0.4) } .pf.green{ background:linear-gradient(180deg,rgba(100,255,200,0.3) 0%,var(--acid2) 15%,var(--acid) 50%,rgba(0,80,50,0.9) 100%); box-shadow:0 0 10px rgba(0,255,170,0.5),inset 0 1px 0 rgba(100,255,200,0.4) } .pf.purple{ background:linear-gradient(180deg,rgba(220,150,255,0.3) 0%,var(--void2) 15%,var(--void) 50%,rgba(80,20,150,0.9) 100%); box-shadow:0 0 10px rgba(187,68,255,0.5),inset 0 1px 0 rgba(220,150,255,0.4) } .pf.red{ background:linear-gradient(180deg,rgba(255,120,100,0.3) 0%,var(--danger2) 15%,var(--danger) 50%,rgba(120,15,0,0.9) 100%); box-shadow:0 0 10px rgba(255,26,0,0.6),inset 0 1px 0 rgba(255,120,100,0.4) } .plbl{display:flex;justify-content:space-between;font-size:11px;color:var(--t2);font-family:var(--fm)} /* ── ACTIVE ITEM PULSE ── */ @keyframes activePulse{0%,100%{box-shadow:var(--bevel-in),0 0 8px rgba(255,102,0,0.08)}50%{box-shadow:var(--bevel-in),0 0 18px rgba(255,102,0,0.22),0 0 1px rgba(255,102,0,0.4)}} .item.active{animation:activePulse 2s ease-in-out infinite} @keyframes activeBarBorder{0%,100%{border-color:rgba(0,191,255,0.3)}50%{border-color:rgba(0,191,255,0.7)}} .item.active-c{animation:activeBarBorder 2s ease-in-out infinite} /* ── FLOATING RESOURCE NUMBERS ── */ .floater{position:fixed;pointer-events:none;z-index:10000;font-family:var(--fd);font-size:13px;font-weight:700; letter-spacing:1px;animation:floatUp 1.2s ease-out forwards} @keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}60%{opacity:1;transform:translateY(-28px) scale(1.1)}100%{opacity:0;transform:translateY(-55px) scale(0.9)}} /* ── SPARK PARTICLES ── */ .spark{position:fixed;pointer-events:none;z-index:10001;width:4px;height:4px;border-radius:50%; animation:sparkFly var(--dur,0.8s) ease-out forwards} @keyframes sparkFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}} /* ── PING RING ── */ .ping{position:fixed;pointer-events:none;z-index:10000;border-radius:50%; animation:pingRing 0.6s ease-out forwards} @keyframes pingRing{0%{opacity:0.8;transform:scale(0.3);width:10px;height:10px;margin:-5px}100%{opacity:0;transform:scale(1);width:40px;height:40px;margin:-20px}} /* ── SPINNING COGS on active cards ── */ @keyframes cogSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes cogSpinRev{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}} .cog-spin{display:inline-block;animation:cogSpin 2s linear infinite} .cog-spin-r{display:inline-block;animation:cogSpinRev 3s linear infinite} /* ── BLINKING ACTIVE INDICATOR ── */ @keyframes activeDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(0.7)}} .active-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid); box-shadow:0 0 6px var(--acid);animation:activeDot 1s ease-in-out infinite;vertical-align:middle} /* ── CARD SCAN LINE ── */ @keyframes scanLine{0%{top:-2px}100%{top:100%}} .card-scanning::after{content:'';display:none} .card-scanning{position:relative;overflow:hidden} .card-scanning .scan-ray{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,102,0,0.4),transparent);pointer-events:none;animation:scanLine 2s linear infinite;z-index:10} /* ══════════════════════════════════════════ TACTICAL BUTTONS — 3D combat controls ══════════════════════════════════════════ */ .btn{ display:inline-block;padding:7px 16px; font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase; cursor:pointer;border:1px solid;transition:all .1s; position:relative;overflow:hidden; clip-path:polygon(var(--ch-sm) 0,100% 0,100% calc(100% - var(--ch-sm)),calc(100% - var(--ch-sm)) 100%,0 100%,0 var(--ch-sm)); box-shadow:var(--bevel-in),0 3px 8px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.04) } /* Specular sheen */ .btn::before{content:'';position:absolute;top:0;left:0;right:0;height:40%; background:linear-gradient(180deg,rgba(255,255,255,0.08),transparent);pointer-events:none} .btn:hover::before{background:linear-gradient(180deg,rgba(255,255,255,0.14),transparent)} /* Press depth effect */ .btn:active{transform:translateY(1px);box-shadow:var(--bevel-in),0 1px 3px rgba(0,0,0,0.5)} .btn:active::before{background:linear-gradient(180deg,rgba(0,0,0,0.1),transparent)} .btn.a{color:var(--fire2);border-color:rgba(255,106,0,0.7);border-bottom-color:rgba(255,106,0,0.4); background:linear-gradient(180deg,rgba(255,106,0,0.14),rgba(255,106,0,0.06))} .btn.a:hover{box-shadow:var(--bevel-in),var(--fire-glow),0 3px 8px rgba(0,0,0,0.5);border-color:var(--fire)} .btn.c{color:var(--plasma2);border-color:rgba(0,204,255,0.6);border-bottom-color:rgba(0,204,255,0.3); background:linear-gradient(180deg,rgba(0,204,255,0.12),rgba(0,204,255,0.04))} .btn.c:hover{box-shadow:var(--bevel-in),var(--plasma-glow),0 3px 8px rgba(0,0,0,0.5);border-color:var(--plasma)} .btn.g{color:var(--acid2);border-color:rgba(0,255,170,0.5);border-bottom-color:rgba(0,255,170,0.25); background:linear-gradient(180deg,rgba(0,255,170,0.10),rgba(0,255,170,0.04))} .btn.g:hover{box-shadow:var(--bevel-in),var(--acid-glow),0 3px 8px rgba(0,0,0,0.5)} .btn.r{color:var(--danger2);border-color:rgba(255,26,0,0.6);border-bottom-color:rgba(255,26,0,0.3); background:linear-gradient(180deg,rgba(255,26,0,0.12),rgba(255,26,0,0.04))} .btn.r:hover{box-shadow:var(--bevel-in),var(--danger-glow),0 3px 8px rgba(0,0,0,0.5)} .btn.p{color:var(--void2);border-color:rgba(187,68,255,0.5);border-bottom-color:rgba(187,68,255,0.25); background:linear-gradient(180deg,rgba(187,68,255,0.10),rgba(187,68,255,0.04))} .btn.p:hover{box-shadow:var(--bevel-in),var(--void-glow),0 3px 8px rgba(0,0,0,0.5)} .btn.d,.btn:disabled{opacity:.25;cursor:not-allowed;pointer-events:none;filter:grayscale(0.8)} .btn.sm{padding:4px 11px;font-size:10px;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)} .btn.full{width:100%;text-align:center;display:block} /* ══════════════════════════════════════════ LIST ITEMS — hull plating ══════════════════════════════════════════ */ .item{ background:var(--metal-c); border:1px solid var(--rim);border-top-color:rgba(255,255,255,0.07);border-bottom-color:rgba(0,0,0,0.5); padding:11px 13px;margin-bottom:7px; clip-path:polygon(var(--ch-sm) 0,100% 0,100% calc(100% - var(--ch-sm)),calc(100% - var(--ch-sm)) 100%,0 100%,0 var(--ch-sm)); transition:border-color .12s,background .12s;position:relative; box-shadow:var(--bevel-in) } .item::before{content:'';position:absolute;top:0;left:var(--ch-sm);right:0;height:1px; background:linear-gradient(90deg,rgba(255,102,0,0.3),transparent)} .item:hover{border-color:var(--rim3);background:linear-gradient(160deg,#0f1222,#0c0f1c)} .item.active{border-color:var(--fire);border-top-color:rgba(255,180,80,0.4);background:linear-gradient(160deg,rgba(255,106,0,0.10),rgba(255,106,0,0.04));box-shadow:var(--bevel-in),0 0 16px rgba(255,106,0,0.15)} .item.active-c{border-color:var(--plasma);border-top-color:rgba(100,240,255,0.4);background:linear-gradient(160deg,rgba(0,204,255,0.08),rgba(0,204,255,0.02));box-shadow:var(--bevel-in),0 0 12px rgba(0,204,255,0.12)} .item.locked{opacity:.30;filter:grayscale(0.7)} .ioc{display:inline-block;padding:3px 9px;font-size:11px;font-family:var(--fm); background:linear-gradient(135deg,var(--bg0),#030408); border:1px solid var(--rim);border-top-color:rgba(255,255,255,0.06);border-bottom-color:rgba(0,0,0,0.6); clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); box-shadow:inset 0 1px 3px rgba(0,0,0,0.7)} .ioc.i{color:var(--t2)}.ioc.o{color:var(--acid)}.ioc.miss{color:var(--danger2);border-color:rgba(255,26,0,0.4)} /* ══════════════════════════════════════════ SKILL BARS ══════════════════════════════════════════ */ .skr{padding:9px 0;border-bottom:1px solid rgba(30,36,52,0.6)} .skr:last-child{border-bottom:none} .skh{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} .skn{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:1px;color:var(--t1)} .skl{font-family:var(--fd);font-size:11px;font-weight:700;color:var(--fire2);background:var(--bg0);padding:2px 9px; clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px); border:1px solid rgba(255,102,0,0.3);box-shadow:0 0 6px rgba(255,102,0,0.1)} .skxb{background:var(--bg0);border:1px solid var(--rim);height:7px;overflow:hidden;margin:3px 0; clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)} .skxf{height:100%;background:linear-gradient(90deg,rgba(180,60,0,0.7),var(--fire),var(--fire2));transition:width .4s ease;box-shadow:var(--fire-glow)} .skb{font-size:10px;color:var(--acid);font-family:var(--fm);letter-spacing:.5px} /* ══════════════════════════════════════════ STATUS TAGS ══════════════════════════════════════════ */ .stag{ font-family:var(--fm);font-size:9px;letter-spacing:2px;padding:2px 8px;text-transform:uppercase; clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px) } .stag.idle{background:var(--acid-dim);color:var(--acid);border:1px solid rgba(0,255,136,0.3);box-shadow:0 0 6px rgba(0,255,136,0.08)} .stag.busy{background:var(--fire-dim);color:var(--fire2);border:1px solid rgba(255,102,0,0.35);animation:busyBlink 1.2s ease-in-out infinite} @keyframes busyBlink{0%,100%{opacity:1}50%{opacity:.55}} .stag.mission{background:var(--plasma-dim);color:var(--plasma2);border:1px solid rgba(0,191,255,0.3)} .stag.done{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(255,204,0,0.35)} .stag.locked{background:rgba(0,0,0,0.4);color:var(--t3);border:1px solid var(--rim)} /* ══════════════════════════════════════════ FRAME STATS GRID — tactical HUD readout ══════════════════════════════════════════ */ .statg{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:10px 0} .statc{ background:linear-gradient(180deg,#0a0d18 0%,#060910 50%,#080b14 100%); border:1px solid var(--rim); border-top-color:rgba(255,255,255,0.07); border-bottom-color:rgba(0,0,0,0.7); padding:8px 4px;text-align:center; clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); box-shadow:inset 0 2px 6px rgba(0,0,0,0.9),inset 0 -1px 0 rgba(255,255,255,0.03),0 1px 0 rgba(255,255,255,0.04); position:relative; } /* Hologram scan line on hover */ .statc:hover{border-top-color:rgba(255,106,0,0.4);box-shadow:inset 0 2px 6px rgba(0,0,0,0.9),0 0 8px rgba(255,106,0,0.08)} .statv{font-family:var(--fd);font-size:15px;font-weight:800;color:var(--fire2);line-height:1; text-shadow:0 0 8px rgba(255,106,0,0.4)} .statl{font-size:7px;color:var(--t3);letter-spacing:2.5px;text-transform:uppercase;margin-top:3px;font-family:var(--fm)} /* ══════════════════════════════════════════ FACTION BARS ══════════════════════════════════════════ */ .faction-row{margin-bottom:10px} .frow-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px} .fname{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:1.5px} .frep{font-size:10px;font-family:var(--fm)} .fbar-bg{height:8px;background:var(--bg0);border:1px solid var(--rim); clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)} .fbar-fill{height:100%;transition:width .5s ease} .faction-ironclad .fname{color:#ff8833}.faction-ironclad .fbar-fill{background:linear-gradient(90deg,#a03300,#ff6600)}.faction-ironclad .frep{color:#ff8833} .faction-nova .fname{color:var(--plasma)}.faction-nova .fbar-fill{background:linear-gradient(90deg,#004488,var(--plasma))}.faction-nova .frep{color:var(--plasma)} .faction-void .fname{color:var(--void)}.faction-void .fbar-fill{background:linear-gradient(90deg,#440088,var(--void))}.faction-void .frep{color:var(--void)} .faction-bonus{font-size:9px;color:var(--t3);margin-top:2px;font-style:italic} /* ══════════════════════════════════════════ WORLD MAP ══════════════════════════════════════════ */ #world-map-svg{width:100%;height:380px;background:var(--bg0);border:1px solid var(--rim);display:block; box-shadow:inset 0 0 40px rgba(0,0,0,0.8),inset 0 0 80px rgba(0,191,255,0.02)} .map-node{cursor:pointer;transition:all .2s} .map-node circle{transition:all .2s} .map-node:hover circle{filter:brightness(1.6);drop-shadow:0 0 6px currentColor} .map-node text{font-family:'Share Tech Mono',monospace;font-size:9px;fill:var(--t2);pointer-events:none} .map-node.unlocked text{fill:var(--t1)} .map-node.active-mission text{fill:var(--plasma)} /* ══════════════════════════════════════════ UPGRADE BAY ══════════════════════════════════════════ */ .ug-item{ background:var(--metal-c); border:1px solid var(--rim);padding:11px 13px;margin-bottom:8px; clip-path:polygon(var(--ch-sm) 0,100% 0,100% calc(100% - var(--ch-sm)),calc(100% - var(--ch-sm)) 100%,0 100%,0 var(--ch-sm)); box-shadow:var(--bevel-in);transition:border-color .15s } .ug-item:hover{border-color:var(--rim2)} .ug-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .ug-name{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--t1);letter-spacing:.5px} .ug-lv{font-family:var(--fm);font-size:11px;color:var(--fire2);background:var(--bg0);padding:2px 8px; clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px); border:1px solid rgba(255,102,0,0.25)} .ug-desc{font-size:12px;color:var(--t2);margin-bottom:5px;font-weight:400} .ug-effect{font-size:11px;color:var(--acid);margin-bottom:6px;font-family:var(--fm)} .ug-cost{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px} /* ══════════════════════════════════════════ SPECIALISTS ══════════════════════════════════════════ */ .spec-card{ background:var(--metal-c); border:1px solid var(--rim);padding:14px;margin-bottom:8px; clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch)); box-shadow:var(--bevel-in) } .spec-card.active-spec{border-color:rgba(0,255,170,0.4);box-shadow:var(--bevel-in),0 0 16px rgba(0,255,170,0.08)} .spec-avatar{font-size:32px;margin-bottom:6px;display:block} .spec-name{font-family:var(--fd);font-size:13px;font-weight:700;letter-spacing:2px;color:var(--t1);margin-bottom:2px} .spec-role{font-size:12px;color:var(--t2);margin-bottom:8px;font-weight:400} .spec-bonuses{font-size:11px;color:var(--acid);margin-bottom:8px;font-family:var(--fm)} /* ══════════════════════════════════════════ NOTIFICATIONS — terminal popups ══════════════════════════════════════════ */ #notifs{position:fixed;bottom:14px;right:14px;z-index:1000;display:flex;flex-direction:column-reverse;gap:6px;pointer-events:none} .notif{ background:var(--metal-b); border-left:3px solid;border-top:1px solid;border-right:1px solid;border-bottom:1px solid; padding:10px 16px;font-size:12px;min-width:240px;max-width:340px; font-family:var(--fb);letter-spacing:.3px;line-height:1.5; clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px); animation:nIn .18s ease-out,nOut .3s ease-in 2.7s forwards; box-shadow:0 8px 28px rgba(0,0,0,0.9) } .notif.amber{border-color:var(--fire);color:var(--fire2);background:linear-gradient(135deg,rgba(255,106,0,0.10),rgba(255,106,0,0.03))} .notif.cyan{border-color:var(--plasma);color:var(--plasma2);background:linear-gradient(135deg,rgba(0,204,255,0.08),transparent)} .notif.green{border-color:var(--acid);color:var(--acid2);background:linear-gradient(135deg,rgba(0,255,170,0.07),transparent)} .notif.red{border-color:var(--danger2);color:#ff7766;background:linear-gradient(135deg,rgba(255,26,0,0.09),transparent)} .notif.purple{border-color:var(--void);color:var(--void2);background:linear-gradient(135deg,rgba(187,68,255,0.08),transparent)} .notif.gold{border-color:var(--gold);color:var(--gold2);background:linear-gradient(135deg,rgba(255,204,0,0.09),transparent);box-shadow:0 8px 28px rgba(0,0,0,0.9),0 0 22px rgba(255,204,0,0.14)} .notif.plasma{border-color:var(--plasma);color:var(--plasma2);background:linear-gradient(135deg,rgba(0,212,255,0.08),transparent)} @keyframes nIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} @keyframes nOut{from{opacity:1}to{opacity:0;transform:translateX(10px)}} /* ══════════════════════════════════════════ MISC UTILITIES ══════════════════════════════════════════ */ .slbl{ font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:3px; color:var(--t2);text-transform:uppercase;margin-bottom:8px;padding-bottom:5px; border-bottom:1px solid rgba(40,52,72,0.9) } .tag{display:inline-block;padding:2px 9px;font-size:10px;letter-spacing:1.5px;font-family:var(--fd);font-weight:600; clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)} .tag.a{background:var(--fire-dim);color:var(--fire2);border:1px solid rgba(255,106,0,.35)} .tag.c{background:var(--plasma-dim);color:var(--plasma2);border:1px solid rgba(0,204,255,.35)} .tag.g{background:var(--acid-dim);color:var(--acid);border:1px solid rgba(0,255,170,.35)} .tag.r{background:var(--danger-dim);color:var(--danger2);border:1px solid rgba(255,26,0,.35)} .tag.p{background:var(--void-dim);color:var(--void2);border:1px solid rgba(187,68,255,.35)} .risk-bar{display:flex;gap:2px} .rp{width:10px;height:6px;background:var(--rim); clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px)} .rp.on{background:var(--danger2);box-shadow:0 0 5px rgba(255,26,0,0.7)} #alog{font-size:11px;color:var(--t2);max-height:110px;overflow-y:auto;background:var(--bg0);border:1px solid var(--rim);padding:7px;font-family:var(--fm)} .ale{padding:3px 0;border-bottom:1px solid rgba(20,24,36,.6)} .alt{color:var(--t3);margin-right:5px;font-size:10px} .al-amber{color:var(--fire2)}.al-cyan{color:var(--plasma)}.al-green{color:var(--acid)}.al-red{color:var(--danger2)} hr.div{border:none;border-top:1px solid var(--rim);margin:10px 0} .flex{display:flex}.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px} .mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px} .ai-c{align-items:center}.jc-sb{justify-content:space-between} ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg0)}::-webkit-scrollbar-thumb{background:var(--rim3);border-radius:2px} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .spin{animation:spin 1s linear infinite;display:inline-block} @keyframes glow-pulse{0%,100%{opacity:.5}50%{opacity:1}} .gpulse{animation:glow-pulse 2s ease-in-out infinite} /* ══════════════════════════════════════════ MARKET TABLE ══════════════════════════════════════════ */ .mkt-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.3fr;gap:6px;align-items:center;padding:9px 11px;border-bottom:1px solid rgba(20,24,36,0.8);font-size:12px;font-family:var(--fm);transition:background .1s} .mkt-row:hover{background:rgba(255,106,0,0.04)} .mkt-hdr{color:var(--t2);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;font-family:var(--fd);font-weight:700;border-bottom:1px solid var(--rim2)!important} .mkt-price-up{color:var(--acid)}.mkt-price-dn{color:var(--danger2)}.mkt-price-n{color:var(--t2)} .mkt-spike{background:rgba(255,204,0,0.06)!important;border-left:2px solid var(--gold)} .mkt-qty{background:var(--bg0);border:1px solid var(--rim);color:var(--t1);font-family:var(--fm);font-size:12px;width:55px;padding:4px 7px;text-align:center; clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)} .mkt-qty:focus{outline:none;border-color:var(--fire)} @keyframes priceUp{0%{background:rgba(0,255,170,.2)}100%{background:transparent}} @keyframes priceDn{0%{background:rgba(255,26,0,.2)}100%{background:transparent}} .price-flash-up{animation:priceUp .5s ease-out}.price-flash-dn{animation:priceDn .5s ease-out} /* ══════════════════════════════════════════ ACHIEVEMENTS ══════════════════════════════════════════ */ .ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px} .ach-card{ background:var(--metal-c); border:1px solid var(--rim);padding:12px;position:relative;overflow:hidden; clip-path:polygon(var(--ch-sm) 0,100% 0,100% calc(100% - var(--ch-sm)),calc(100% - var(--ch-sm)) 100%,0 100%,0 var(--ch-sm)); box-shadow:var(--bevel-in);transition:all .2s } .ach-card.unlocked{border-color:rgba(255,204,0,.4);background:linear-gradient(135deg,rgba(255,204,0,0.04),rgba(255,204,0,0.01))} .ach-card.unlocked::before{content:'';position:absolute;top:0;left:var(--ch-sm);right:0;height:1px;background:linear-gradient(90deg,var(--gold),transparent)} .ach-card.locked{opacity:.3;filter:grayscale(1)} .ach-icon{font-size:26px;margin-bottom:5px;display:block} .ach-name{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--t1);margin-bottom:3px} .ach-desc{font-size:9px;color:var(--t2);margin-bottom:5px;line-height:1.5;font-weight:300} .ach-bonus{font-size:9px;color:var(--acid);font-family:var(--fm)} .ach-stamp{position:absolute;top:7px;right:8px;font-size:16px} /* ══════════════════════════════════════════ LEGACY RING ══════════════════════════════════════════ */ .prestige-ring{ display:flex;align-items:center;justify-content:center;width:90px;height:90px; border-radius:50%;border:3px solid var(--gold); font-family:var(--fd);font-size:26px;font-weight:700;color:var(--gold); text-shadow:var(--gold-glow); box-shadow:0 0 30px rgba(255,204,0,.3),0 0 60px rgba(255,204,0,.1),inset 0 0 20px rgba(255,204,0,.06); margin:0 auto 14px;background:radial-gradient(circle,rgba(255,204,0,.08),transparent); animation:prestigePulse 3s ease-in-out infinite } @keyframes prestigePulse{0%,100%{box-shadow:0 0 30px rgba(255,204,0,.3),0 0 60px rgba(255,204,0,.1)}50%{box-shadow:0 0 50px rgba(255,204,0,.5),0 0 80px rgba(255,204,0,.2)}} .prestige-bonus{ background:rgba(255,204,0,.05);border:1px solid rgba(255,204,0,.2); padding:9px 14px;font-size:11px;color:var(--gold2);margin-bottom:8px;text-align:center; clip-path:polygon(var(--ch-sm) 0,100% 0,100% calc(100% - var(--ch-sm)),calc(100% - var(--ch-sm)) 100%,0 100%,0 var(--ch-sm)) } @keyframes capFlash{0%,100%{border-color:var(--rim2)}50%{border-color:var(--danger2);box-shadow:var(--bevel-in),0 0 6px rgba(255,34,0,0.3)}} .rchip-cap{animation:capFlash 1.5s ease-in-out infinite} .rchip-cap .rv{color:var(--danger2)!important} /* ── TITLE FLICKER ── */ @keyframes titleFlicker{0%,94%,100%{opacity:1}96%{opacity:.8}97%{opacity:1}98%{opacity:.85}99%{opacity:1}} #gtitle{animation:titleFlicker 9s ease-in-out infinite} /* ── NOTIFY BOUNCE ── */ @keyframes nIn{from{opacity:0;transform:translateX(28px) scale(0.92)}70%{transform:translateX(-3px) scale(1.02)}to{opacity:1;transform:none}} @keyframes nOut{from{opacity:1}to{opacity:0;transform:translateX(20px)}} /* ── SECTION DIVIDER ── */ .sec-div{display:flex;align-items:center;gap:8px;margin:12px 0 8px} .sec-div::before,.sec-div::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rim2))} .sec-div::after{background:linear-gradient(90deg,var(--rim2),transparent)} .sec-div span{font-family:var(--fd);font-size:9px;letter-spacing:3px;color:var(--t3);white-space:nowrap} /* ── COMBAT LOG ── */ .clog{font-size:10px;color:var(--t2);max-height:130px;overflow-y:auto;background:var(--bg0);border:1px solid var(--rim);padding:6px;font-family:var(--fm)} .clog-e{padding:2px 0;border-bottom:1px solid rgba(15,18,28,.8);line-height:1.5} .clog-e.hit{color:var(--danger2)}.clog-e.crit{color:var(--fire2)}.clog-e.reward{color:var(--acid)}.clog-e.event-line{color:var(--plasma)} /* ── GHOST THEME OVERRIDES (light bg needs dark text) ── */ [data-theme="ghost"] .card { box-shadow:0 2px 12px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.8); } [data-theme="ghost"] .item { border-color:var(--rim); } [data-theme="ghost"] .tb { color:var(--t2); } [data-theme="ghost"] .tb.active { color:var(--fire); background:rgba(200,48,0,0.08); } [data-theme="ghost"] #main { background-image: linear-gradient(rgba(200,48,0,0.015) 1px,transparent 1px), linear-gradient(90deg,rgba(200,48,0,0.015) 1px,transparent 1px); } [data-theme="ghost"] .mkt-row:hover { background:rgba(200,48,0,0.04); } [data-theme="ghost"] .rchip .rn { color:var(--t2); } [data-theme="ghost"] .skxf { background:linear-gradient(90deg,rgba(150,40,0,0.7),var(--fire),var(--fire2)); } [data-theme="ghost"] .pw { background:rgba(0,0,0,0.08); border-color:rgba(0,0,0,0.15); } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — tablet, mobile, browser resize ═══════════════════════════════════════════════════════════ */ /* Tablet (≤900px) — collapse 3-col to 2-col */ @media (max-width:900px) { .pg3 { grid-template-columns:1fr 1fr; } .pgwl,.pg32 { grid-template-columns:1fr 1fr; } .statg { grid-template-columns:repeat(3,1fr); } #world-map-svg { height:260px; } .ach-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } .mkt-row { grid-template-columns:2fr 1fr 1fr 4fr; font-size:11px; } .mkt-row > span:nth-child(3) { display:none; } /* hide buy price col */ } /* Mobile/small (≤640px) — single column, bottom tab bar */ @media (max-width:640px) { /* Header: shrink and stack */ #hdr { height:48px; padding:0 10px; gap:8px; } #gtitle { font-size:11px; letter-spacing:2px; } #gtitle::after { display:none; } #tick-d { display:none; } /* Resource bar: tiny chips, horizontal scroll */ #resbar { gap:3px; } .rchip { padding:3px 7px; font-size:9px; } .rchip .rv { font-size:10px; } .rchip .rn { display:none; } /* Event banner: compact */ #evt-banner { padding:4px 12px; } #evt-banner::before, #evt-banner::after { display:none; } /* TABS: move to bottom as icon-only bar */ #tabs-wrap { position:fixed; bottom:0; left:0; right:0; top:auto; z-index:500; border-top:2px solid var(--rim); border-bottom:none; box-shadow:0 -4px 20px rgba(0,0,0,0.7); overflow:visible; } #tabs-wrap::after { display:none; } #tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; height:52px; align-items:center; } .tb { padding:8px 10px; font-size:8px; letter-spacing:0.5px; min-width:52px; text-align:center; flex-shrink:0; line-height:1.2; } /* Main: leave room for bottom tab bar */ #main { padding-bottom:52px; } html, body { overflow:hidden; } .tp { padding:10px; } /* All grids collapse to single column */ .pg2,.pg3,.pgw,.pgwl,.pg32 { grid-template-columns:1fr; } /* Cards */ .card { padding:11px; } .ctit { font-size:10px; letter-spacing:2px; } /* Stats grid: 3-col on mobile */ .statg { grid-template-columns:repeat(3,1fr); gap:4px; } .statv { font-size:13px; } .statl { font-size:6px; } /* Market: simplified */ .mkt-row { grid-template-columns:1.5fr 1fr 4fr; font-size:10px; gap:4px; padding:7px 8px; } .mkt-row > span:nth-child(2), .mkt-row > span:nth-child(3) { display:none; } .mkt-hdr > span:nth-child(2), .mkt-hdr > span:nth-child(3) { display:none; } .mkt-qty { width:44px; font-size:11px; } /* World map: smaller */ #world-map-svg { height:200px; } /* Notifications: narrower */ #notifs { right:8px; bottom:60px; } .notif { min-width:180px; max-width:260px; font-size:11px; padding:8px 12px; } /* Buttons: slightly larger touch targets */ .btn { padding:8px 14px; } .btn.sm { padding:6px 10px; } /* Achievements */ .ach-grid { grid-template-columns:repeat(2,1fr); gap:6px; } .ach-card { padding:10px; } .ach-icon { font-size:22px; } /* Specialists grid */ .pg2.specialists-grid { grid-template-columns:1fr; } } /* Very small (≤380px) */ @media (max-width:380px) { #gtitle { font-size:9px; letter-spacing:1px; } .rchip { padding:2px 5px; font-size:8px; } .btn { padding:7px 10px; font-size:9px; letter-spacing:1.5px; } .ach-grid { grid-template-columns:1fr; } .statg { grid-template-columns:repeat(2,1fr); } } /* Ensure scrollable content doesn't get clipped */ .tp { -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* ═══════════════════════════════════════════════════════════ AUTH OVERLAY — Cinematic Login Screen Big Bad Pug Studios · Idle Mechwright ═══════════════════════════════════════════════════════════ */ #auth-overlay { position:fixed;inset:0;z-index:10000; background:#040610; display:flex;flex-direction:column; overflow:hidden; font-family:'Chakra Petch',sans-serif; } /* ── Animated background ── */ .aol-bg { position:absolute;inset:0;pointer-events:none; } .aol-grid { position:absolute;inset:0; background-image: linear-gradient(rgba(255,106,0,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,106,0,0.04) 1px,transparent 1px); background-size:60px 60px; animation:aolGridDrift 20s linear infinite; } @keyframes aolGridDrift { 0%{background-position:0 0} 100%{background-position:60px 60px} } #aol-particles { position:absolute;inset:0;width:100%;height:100%; } .aol-scanlines { position:absolute;inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.12) 2px,rgba(0,0,0,0.12) 4px); } .aol-vignette { position:absolute;inset:0; background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.75) 100%); } /* ── Corner brackets ── */ .aol-corner { position:absolute;width:28px;height:28px;border-color:#ff6a00;border-style:solid;z-index:2; } .aol-tl { top:16px;left:16px;border-width:2px 0 0 2px; } .aol-tr { top:16px;right:16px;border-width:2px 2px 0 0; } .aol-bl { bottom:44px;left:16px;border-width:0 0 2px 2px; } .aol-br { bottom:44px;right:16px;border-width:0 2px 2px 0; } /* ── Top bar ── */ .aol-topbar { position:relative;z-index:3; display:flex;justify-content:space-between;align-items:center; padding:12px 40px; border-bottom:1px solid rgba(255,106,0,0.15); background:rgba(4,6,16,0.8); } .aol-studio-name { font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700; letter-spacing:4px;color:#ff7a20; display:flex;align-items:center;gap:8px; } .aol-studio-dot { width:7px;height:7px;border-radius:50%; background:#ff7a20; box-shadow:0 0 8px #ff7a20,0 0 20px rgba(255,122,32,0.5); animation:aolDotPulse 2s ease-in-out infinite; } @keyframes aolDotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.85)} } .aol-topbar-status { display:flex;align-items:center;gap:6px; font-family:'Share Tech Mono',monospace;font-size:10px; color:rgba(0,255,187,0.8);letter-spacing:2px; } .aol-ping { width:6px;height:6px;border-radius:50%;background:#00ffbb; box-shadow:0 0 6px #00ffbb; animation:aolPing 1.5s ease-in-out infinite; } @keyframes aolPing { 0%,100%{opacity:1} 50%{opacity:0.3} } /* ── Main layout ── */ .aol-main { position:relative;z-index:3; flex:1;display:flex;align-items:center;justify-content:center; gap:0;padding:20px 40px; max-width:1100px;width:100%;margin:0 auto; } /* ── LEFT — Brand ── */ .aol-brand { flex:1;display:flex;flex-direction:column; align-items:center;justify-content:center; padding:30px 40px 30px 20px;gap:20px; } /* Mech display */ .aol-mech-wrap { position:relative;display:flex;align-items:center;justify-content:center; width:220px;height:220px; } .aol-mech-glow { position:absolute;width:160px;height:160px;border-radius:50%; background:radial-gradient(circle,rgba(255,106,0,0.25) 0%,rgba(255,106,0,0.08) 50%,transparent 70%); animation:aolGlowPulse 3s ease-in-out infinite; } @keyframes aolGlowPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.7} } .aol-mech-ring { position:absolute;border-radius:50%;border:1px solid; animation:aolRingSpin linear infinite; } .aol-ring1 { width:190px;height:190px;border-color:rgba(255,106,0,0.2);animation-duration:12s; } .aol-ring2 { width:215px;height:215px;border-color:rgba(255,106,0,0.1);border-style:dashed;animation-duration:20s;animation-direction:reverse; } @keyframes aolRingSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } .aol-mech-svg { width:150px;height:170px; filter:drop-shadow(0 0 16px rgba(255,106,0,0.9)) drop-shadow(0 0 40px rgba(255,106,0,0.4)) drop-shadow(0 0 80px rgba(255,106,0,0.15)); position:relative;z-index:2; } /* Game title */ .aol-game-title { text-align:center; } .aol-title-idle { font-family:'Orbitron',sans-serif;font-size:15px;font-weight:400; letter-spacing:12px;color:rgba(255,255,255,0.5);margin-bottom:2px; } .aol-title-mech { font-family:'Orbitron',sans-serif;font-size:38px;font-weight:900; letter-spacing:6px;color:#ff7a20; text-shadow:0 0 20px rgba(255,122,32,0.8),0 0 50px rgba(255,122,32,0.3); line-height:1; animation:aolTitlePulse 4s ease-in-out infinite; } @keyframes aolTitlePulse { 0%,100%{text-shadow:0 0 20px rgba(255,122,32,0.8),0 0 50px rgba(255,122,32,0.3)} 50%{text-shadow:0 0 30px rgba(255,122,32,1),0 0 70px rgba(255,122,32,0.5),0 0 120px rgba(255,122,32,0.15)} } .aol-title-line { width:80px;height:2px;margin:10px auto;background:linear-gradient(90deg,transparent,#ff7a20,transparent); } .aol-title-tag { font-family:'Share Tech Mono',monospace;font-size:10px; letter-spacing:4px;color:rgba(255,255,255,0.35); } /* Feature pills */ .aol-features { display:flex;gap:8px;flex-wrap:wrap;justify-content:center; } .aol-features span { font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700; letter-spacing:2px;color:rgba(255,255,255,0.5); border:1px solid rgba(255,106,0,0.25);padding:5px 10px; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); background:rgba(255,106,0,0.05);transition:all .2s; } .aol-features span:hover { color:#ff9944;border-color:rgba(255,106,0,0.6);background:rgba(255,106,0,0.1); } /* ── Divider ── */ .aol-divider-v { width:1px;height:380px;align-self:center;flex-shrink:0; background:linear-gradient(to bottom,transparent,rgba(255,106,0,0.4),transparent); } /* ── RIGHT — Panel ── */ .aol-panel { flex:0 0 380px;padding:30px 20px 30px 40px;display:flex;flex-direction:column;gap:0; } .aol-panel-hdr { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px; } .aol-panel-title { font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800; letter-spacing:4px;color:rgba(255,255,255,0.7); } .aol-conn-status { display:flex;align-items:center;gap:5px; font-family:'Share Tech Mono',monospace;font-size:9px; color:rgba(0,255,187,0.7);letter-spacing:1px; } .aol-conn-dot { width:5px;height:5px;border-radius:50%;background:#00ffbb; box-shadow:0 0 4px #00ffbb;animation:aolPing 1.5s ease-in-out infinite; } .aol-panel-line { height:1px;margin-bottom:20px; background:linear-gradient(90deg,rgba(255,106,0,0.5),rgba(255,106,0,0.1),transparent); } /* ── Tabs ── */ #auth-tabs { display:flex;gap:2px;margin-bottom:22px; border-bottom:1px solid rgba(255,106,0,0.15); } .auth-tab { flex:1;padding:10px 8px; font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px; background:transparent;border:none;border-bottom:2px solid transparent; color:rgba(255,255,255,0.35);cursor:pointer;transition:all .2s;margin-bottom:-1px; display:flex;align-items:center;justify-content:center;gap:6px; } .auth-tab span { font-size:8px;opacity:0.5; } .auth-tab:hover { color:rgba(255,255,255,0.65); } .auth-tab.active { color:#ff9944;border-bottom-color:#ff7a20; } .auth-tab.active span { opacity:1;color:#ff7a20; } /* ── Form fields ── */ .auth-form { display:flex;flex-direction:column;gap:14px; } .aol-field { display:flex;flex-direction:column;gap:5px; } .aol-label { font-family:'Share Tech Mono',monospace;font-size:9px; letter-spacing:3px;color:rgba(255,106,0,0.7); } .auth-form input { background:rgba(255,255,255,0.03); border:none;border-bottom:1px solid rgba(255,255,255,0.12); border-left:2px solid rgba(255,106,0,0.3); padding:10px 12px;color:#e8e8f0; font-family:'Chakra Petch',sans-serif;font-size:13px; outline:none;transition:all .2s;letter-spacing:.5px; } .auth-form input:focus { background:rgba(255,106,0,0.04); border-bottom-color:rgba(255,106,0,0.6); border-left-color:#ff7a20; box-shadow:-2px 0 12px rgba(255,106,0,0.1); } .auth-form input::placeholder { color:rgba(255,255,255,0.2);font-size:12px; } /* ── Submit button ── */ .aol-submit { position:relative;margin-top:4px;padding:13px 20px; background:transparent; border:1px solid rgba(255,106,0,0.5); border-left:3px solid #ff7a20; color:#ff9944;cursor:pointer; font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;letter-spacing:4px; display:flex;justify-content:space-between;align-items:center; clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); transition:all .2s;overflow:hidden; } .aol-submit::before { content:'';position:absolute;inset:0; background:linear-gradient(90deg,rgba(255,106,0,0.08),transparent); } .aol-submit:hover:not(:disabled) { border-color:#ff7a20;color:#fff; box-shadow:0 0 20px rgba(255,106,0,0.3),inset 0 0 20px rgba(255,106,0,0.05); } .aol-submit:active:not(:disabled) { transform:translateY(1px); } .aol-submit:disabled { opacity:0.4;cursor:not-allowed; } .aol-btn-icon { font-size:10px;opacity:0.7; } /* Error */ .auth-error { font-family:'Share Tech Mono',monospace;font-size:10px; color:#ff3d22;letter-spacing:.5px;min-height:16px; padding-left:4px;border-left:2px solid transparent;transition:border-color .2s; } .auth-error:not(:empty) { border-left-color:#ff3d22; } /* Panel footer */ .aol-panel-footer p { font-family:'Chakra Petch',sans-serif;font-size:10px; color:rgba(255,255,255,0.2);letter-spacing:.5px; text-align:center;line-height:1.5; } /* ── Bottom bar ── */ .aol-bottombar { position:relative;z-index:3; display:flex;justify-content:center;align-items:center;gap:12px; padding:8px 40px;height:36px; border-top:1px solid rgba(255,106,0,0.12); background:rgba(4,6,16,0.9); font-family:'Share Tech Mono',monospace;font-size:9px; color:rgba(255,255,255,0.25);letter-spacing:2px;text-transform:uppercase; } .aol-sep { color:rgba(255,106,0,0.4); } /* ── Mobile ── */ @media (max-width:768px) { .aol-topbar { padding:10px 20px; } .aol-corner { display:none; } .aol-main { flex-direction:column;padding:10px 20px;gap:20px;justify-content:flex-start;overflow-y:auto; } .aol-brand { padding:20px 20px 0;gap:12px; } .aol-mech-wrap { width:140px;height:140px; } .aol-mech-svg { width:95px;height:108px; } .aol-ring1 { width:120px;height:120px; } .aol-ring2 { width:138px;height:138px; } .aol-mech-glow { width:100px;height:100px; } .aol-title-mech { font-size:26px; } .aol-divider-v { width:60%;height:1px;align-self:center;background:linear-gradient(to right,transparent,rgba(255,106,0,0.4),transparent); } .aol-panel { flex:none;width:100%;padding:0 0 20px; } .aol-bottombar { font-size:8px;gap:6px;padding:6px 10px; } } .aol-studio-logo { width:26px;height:26px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(255,106,0,0.7)); border-radius:4px; }