/* New Horizon — maximalist brutalist industrial. Palette 1: Signal Red & Black. */ /* Fonts are loaded via in each page (preconnect + stylesheet) so they don't render-block the way an @import does. */ :root{ --black:#0A0A0A; --panel:#161616; --steel:#3A3A3A; --line:#2A2A2E; --red:#E10600; --deep:#8B0000; --bone:#E8E6E1; --ash:#C8C5BE; --mut:#6b6b6b; --mono:'JetBrains Mono',monospace; --disp:'Anton',sans-serif; --script:'Petit Formal Script',cursive; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* kill the OS scrollbar — page still scrolls (wheel/touch/keys), just no rail on the right */ html{scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar{width:0;height:0;display:none} body{ background:var(--black); color:var(--bone); font-family:var(--mono); font-size:15px; line-height:1.6; overflow-x:hidden; /* faint scanlines + grain */ background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px); } a{color:inherit} .mono-cap{font-family:var(--mono);text-transform:uppercase;letter-spacing:3px;font-size:11px;color:var(--mut)} .red{color:var(--red)} .reg{font-size:.55em;vertical-align:.5em} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} /* ── ticker / marquee ── */ .ticker{border-bottom:1px solid var(--line);background:#060606;overflow:hidden;white-space:nowrap} .ticker .run{display:inline-block;padding:8px 0;animation:scroll 28s linear infinite;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--ash)} .ticker .run span{margin:0 28px;color:var(--mut)} .ticker .run b{color:var(--red);font-weight:700} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── top bar ── */ .bar{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:12px} .brand img{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(225,6,0,.35))} .brand .name{font-family:var(--disp);font-size:22px;letter-spacing:1px;text-transform:uppercase} .bar .right{display:flex;gap:18px;align-items:center} .bar .right a{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ash);text-decoration:none} .bar .right a:hover{color:var(--red)} /* ── hero ── */ .hero{position:relative;padding:64px 0 48px;border-bottom:1px solid var(--line);overflow:hidden} .hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.18;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 75%)} .hero .inner{position:relative;display:grid;grid-template-columns:1.4fr .9fr;gap:32px;align-items:center} .eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap} .tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 10px;border:1px solid var(--steel);color:var(--ash)} .tag.solid{background:var(--red);color:var(--black);border-color:var(--red)} h1.title{font-family:var(--disp);font-size:clamp(56px,10vw,118px);line-height:.86;text-transform:uppercase;letter-spacing:1px} h1.title .l2{color:var(--red)} .script{font-family:var(--script);font-size:clamp(26px,4vw,40px);color:var(--red);margin:14px 0 6px;text-transform:none;letter-spacing:0} .lede{max-width:520px;color:var(--ash);margin:18px 0 28px} .cta-row{display:flex;gap:14px;flex-wrap:wrap} .btn{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:14px 26px;border:1px solid var(--steel);background:transparent;color:var(--bone);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:.15s} .btn:hover{border-color:var(--red);color:var(--red)} .btn.primary{background:var(--red);color:var(--black);border-color:var(--red)} .btn.primary:hover{background:#ff1a14;color:var(--black)} .btn:disabled{opacity:.4;cursor:not-allowed} .hero-art{position:relative;display:flex;justify-content:center;align-items:center} .hero-art img{width:100%;max-width:340px;filter:drop-shadow(0 0 40px rgba(225,6,0,.25));animation:float 6s ease-in-out infinite} .hero-art .ring{position:absolute;inset:0;margin:auto;width:300px;height:300px;border:1px dashed var(--steel);border-radius:50%;animation:spin 40s linear infinite;opacity:.5} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes spin{to{transform:rotate(360deg)}} /* ── shader background (shader-bg.js) ── */ /* sits under .grid-bg / content inside .hero or .page-head */ .nh-shader{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.6;pointer-events:none} .page-head{overflow:hidden} .page-head .wrap{position:relative;z-index:1} /* corner ticks on cards */ .tick{position:relative} .tick::before,.tick::after{content:'';position:absolute;width:10px;height:10px;border:2px solid var(--red)} .tick::before{top:-1px;left:-1px;border-right:0;border-bottom:0} .tick::after{bottom:-1px;right:-1px;border-left:0;border-top:0} /* ── sections ── */ section.block{padding:72px 0;border-bottom:1px solid var(--line)} .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:34px} .sec-head .num{font-family:var(--mono);font-size:11px;color:var(--deep);letter-spacing:2px} .sec-head h2{font-family:var(--disp);font-size:clamp(32px,5vw,56px);text-transform:uppercase;line-height:.95} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .card{border:1px solid var(--line);background:var(--panel);padding:26px;position:relative} .card .ix{font-family:var(--mono);font-size:10px;color:var(--deep);letter-spacing:2px;text-transform:uppercase} .card h3{font-family:var(--disp);font-size:26px;text-transform:uppercase;margin:12px 0 10px;letter-spacing:1px} .card p{color:var(--ash);font-size:14px} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .step{border:1px solid var(--line);padding:22px;background:#0d0d0d} .step .n{font-family:var(--disp);font-size:40px;color:var(--red);line-height:1} .step h4{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:10px 0 8px} .step p{font-size:13px;color:var(--ash)} /* ── join / verify panel ── */ #join{background:#060606} .join-shell{border:1px solid var(--steel);background:var(--panel);max-width:680px;margin:0 auto} .join-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);background:#0a0a0a} .join-head .badge{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--mut)} .join-head .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);display:inline-block;margin-right:8px;animation:pulse 1.6s infinite} @keyframes pulse{50%{opacity:.3}} .join-body{padding:34px} .stepbar{display:flex;gap:8px;margin-bottom:26px} .stepbar .s{flex:1;height:4px;background:var(--steel)} .stepbar .s.on{background:var(--red)} .pane{display:none} .pane.on{display:block} .pane h3{font-family:var(--disp);font-size:30px;text-transform:uppercase;margin-bottom:10px} .pane p{color:var(--ash);font-size:14px;margin-bottom:22px} .field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px} .field label{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mut)} .field input{background:var(--black);border:1px solid var(--steel);color:var(--bone);font-family:var(--mono);font-size:15px;padding:14px;outline:none} .field input:focus{border-color:var(--red)} .who{font-family:var(--mono);font-size:13px;color:var(--ash);border-left:2px solid var(--deep);padding-left:12px;margin-bottom:22px} .who b{color:var(--bone)} .msg{font-family:var(--mono);font-size:13px;padding:12px 14px;border:1px solid var(--steel);margin-bottom:18px;display:none} .msg.err{display:block;border-color:var(--red);color:#ff6b66;background:rgba(225,6,0,.06)} .msg.ok{display:block;border-color:#2faa4f;color:#7fe39a;background:rgba(47,170,79,.06)} .applied-box{margin-top:20px;padding:18px;border:1px dashed var(--steel);display:flex;flex-direction:column;gap:14px;align-items:flex-start} .applied-box .mono-cap{margin:0} .applied-box .btn{width:auto} .success{text-align:center;padding:14px 0} .success .big{font-family:var(--disp);font-size:54px;color:var(--red);text-transform:uppercase;line-height:.9} .success .chk{font-size:48px} /* footer */ footer{padding:48px 0 64px} footer .grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px} footer .fine{font-family:var(--mono);font-size:11px;color:var(--mut);letter-spacing:1px} .community-seal{width:74px;height:74px;filter:invert(1);opacity:.85;transition:opacity .15s} .community-seal:hover{opacity:1} .flag{display:inline-grid;grid-template-rows:repeat(3,3px);gap:2px;width:26px;vertical-align:middle;margin-left:8px} .flag i{background:var(--bone)} .flag i:nth-child(2){background:var(--red)} @media(max-width:860px){ .hero .inner{grid-template-columns:1fr}.hero-art{order:-1} .cards,.steps{grid-template-columns:1fr 1fr} } @media(max-width:560px){.cards,.steps{grid-template-columns:1fr}} /* ── mobile nav ── */ @media(max-width:760px){ .bar{flex-wrap:wrap;gap:12px;padding:14px 0} .bar .right{flex-wrap:wrap;gap:10px 14px;width:100%;justify-content:flex-start} .bar .right a{font-size:10px;letter-spacing:1.5px} .bar .right .btn{padding:10px 16px;font-size:11px;margin-left:auto} .brand .name{font-size:19px} } @media(max-width:400px){ .bar .right{gap:8px 11px} .bar .right .btn{width:100%;justify-content:center;margin-left:0} } /* ── sub-pages (about / news) ── */ .bar .right a.active{color:var(--red)} .page-head{padding:64px 0 28px;border-bottom:1px solid var(--line);position:relative} .page-head .eyebrow{margin-bottom:16px} .page-title{font-family:var(--disp);font-size:clamp(54px,9vw,120px);line-height:.9; text-transform:uppercase;letter-spacing:1px} .page-title .l2{color:var(--red)} .page-head .script{margin-top:14px} .block.alt{background:#0d0d0d;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .prose{max-width:780px;display:flex;flex-direction:column;gap:16px} .prose p{font-family:var(--mono);font-size:15px;line-height:1.7;color:var(--ash)} .prose b{color:var(--bone)} .cta-band .prose{margin:0 0 26px} /* news feed */ .feed{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)} .post{background:var(--black);padding:28px 26px;transition:background .15s} .post:hover{background:#0d0d0d} .post-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px} .post-date{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--mut)} .post h3{font-family:var(--disp);font-size:26px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px} .post p{font-family:var(--mono);font-size:14px;line-height:1.7;color:var(--ash);max-width:760px} .post-link{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:12px;font-weight:700; letter-spacing:1px;text-transform:uppercase;color:var(--red);text-decoration:none} .post-link:hover{color:var(--bone)} .post-link.muted{color:var(--mut);cursor:default} /* ── member ID card (3D holographic glass) ── */ .card-stage{ perspective:1100px; display:flex; justify-content:center; align-items:center; padding:40px 0 20px; position:relative; } /* soft prism glow behind the glass so the blur has something to refract */ .card-stage::before{ content:""; position:absolute; width:540px; height:360px; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(225,6,0,.35),transparent 60%), radial-gradient(circle at 70% 70%,rgba(60,120,255,.25),transparent 60%), radial-gradient(circle at 50% 40%,rgba(120,255,160,.18),transparent 55%); filter:blur(40px); z-index:0; } .idcard{ --mx:50%; --my:50%; --rx:0deg; --ry:0deg; --rank:#E10600; position:relative; z-index:1; width:440px; max-width:92vw; aspect-ratio:1.585/1; border-radius:18px; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .12s ease-out, box-shadow .25s; background:linear-gradient(135deg,rgba(28,28,32,.72),rgba(10,10,12,.78)); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04) inset, 0 1px 0 rgba(255,255,255,.25) inset; overflow:hidden; cursor:none; } /* holographic rainbow film, position-reactive, only where the glare is */ .idcard-holo{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:.5; background: repeating-linear-gradient(115deg, rgba(255,0,90,.35) 0%, rgba(255,200,0,.30) 12%, rgba(40,255,140,.30) 24%, rgba(0,180,255,.32) 36%, rgba(160,60,255,.34) 48%, rgba(255,0,90,.35) 60%); background-size:220% 220%; background-position:var(--mx) var(--my); -webkit-mask-image:radial-gradient(220px 220px at var(--mx) var(--my),#000 0%,transparent 70%); mask-image:radial-gradient(220px 220px at var(--mx) var(--my),#000 0%,transparent 70%); } /* white specular glare following the cursor */ .idcard-glare{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; background:radial-gradient(260px 260px at var(--mx) var(--my),rgba(255,255,255,.45),transparent 60%); } .idcard-scan{ position:absolute; inset:0; pointer-events:none; opacity:.35; background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px); mix-blend-mode:overlay; } .idcard-content{ position:relative; z-index:2; height:100%; padding:22px 24px; display:flex; flex-direction:column; transform:translateZ(40px); } .idcard-head{display:flex; justify-content:space-between; align-items:flex-start} .idcard-org{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-size:18px; letter-spacing:1px} .idcard-org img{width:26px; height:26px; filter:drop-shadow(0 0 6px rgba(225,6,0,.6))} .idcard-kind{font-family:var(--mono); font-size:9px; line-height:1.3; letter-spacing:2px; color:var(--ash); text-align:right; opacity:.8} .idcard-main{display:flex; gap:18px; align-items:center; margin-top:auto} .idcard-portrait{position:relative; flex:0 0 auto} .idcard-portrait img{width:78px; height:78px; border-radius:50%; object-fit:cover; display:block; background:#111} .idcard-portrait-ring{position:absolute; inset:-4px; border-radius:50%; padding:2px; background:conic-gradient(from 0deg,#E10600,#ffc800,#28ff8c,#00b4ff,#a03cff,#E10600); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 6s linear infinite} .idcard-fields{min-width:0; flex:1} .idcard-name{font-family:var(--disp); font-size:30px; line-height:.95; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .idcard-row{display:flex; flex-direction:column; margin-top:8px} .idcard-lbl{font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--mut); text-transform:uppercase} .idcard-val{font-family:var(--mono); font-size:14px; color:var(--bone); margin-top:2px} .idcard-rank{display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#fff; padding:5px 10px; border:1px solid color-mix(in srgb,var(--rank) 60%,transparent); background:color-mix(in srgb,var(--rank) 18%,transparent); border-radius:3px; width:fit-content} .idcard-rank-dot{width:7px; height:7px; border-radius:50%; background:var(--rank); box-shadow:0 0 8px var(--rank)} .idcard-roles{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px} .idcard-role{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:1.5px; line-height:1; text-transform:uppercase; color:var(--ash); padding:5px 8px; border:1px solid color-mix(in srgb,var(--ash) 45%,transparent); border-radius:3px; background:color-mix(in srgb,var(--ash) 8%,transparent)} .idcard-foot{display:flex; justify-content:space-between; align-items:flex-end; margin-top:16px} .idcard-num{display:flex; flex-direction:column} .idcard-num b{font-family:var(--mono); font-size:20px; letter-spacing:2px; color:var(--bone)} .idcard-stamp{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:1.5px; color:#7fe39a; border:1px solid #2faa4f; padding:5px 9px; border-radius:3px; background:rgba(47,170,79,.08); transform:rotate(-3deg)} .idcard-stamp.pending{color:#ffcf6b; border-color:#a9791f; background:rgba(169,121,31,.1)} .idcard-rows{display:flex; gap:22px; flex-wrap:wrap} @media(max-width:480px){ .idcard-name{font-size:24px} .idcard-content{padding:18px} .idcard-rows{gap:14px} } /* ── card colour themes (set --theme tint + glow; rank stays its own accent) ── */ .idcard.theme-red{ --theme:#E10600; background:linear-gradient(135deg,rgba(40,18,18,.74),rgba(12,8,8,.8)); border-color:rgba(225,6,0,.30); box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(225,6,0,.10) inset, 0 0 38px -12px rgba(225,6,0,.55), 0 1px 0 rgba(255,255,255,.22) inset; } .idcard.theme-blue{ --theme:#00b4ff; background:linear-gradient(135deg,rgba(14,26,40,.76),rgba(7,11,16,.82)); border-color:rgba(0,180,255,.32); box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,180,255,.10) inset, 0 0 38px -12px rgba(0,180,255,.55), 0 1px 0 rgba(255,255,255,.22) inset; } .idcard.theme-gold{ --theme:#ffc800; background:linear-gradient(135deg,rgba(40,33,12,.76),rgba(14,11,6,.82)); border-color:rgba(255,200,0,.34); box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,200,0,.10) inset, 0 0 38px -12px rgba(255,200,0,.5), 0 1px 0 rgba(255,255,255,.22) inset; } .idcard.theme-blue .idcard-org img,.idcard.theme-gold .idcard-org img{ filter:drop-shadow(0 0 6px color-mix(in srgb,var(--theme) 70%,transparent))} /* ── theme picker ── */ .card-themes{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px} .theme-swatch{width:24px; height:24px; border-radius:50%; border:2px solid rgba(255,255,255,.25); cursor:pointer; padding:0; transition:transform .15s, box-shadow .15s; outline:none} .theme-swatch:hover{transform:scale(1.12)} .theme-swatch.active{transform:scale(1.18); border-color:#fff} .theme-swatch.t-red{background:#E10600; box-shadow:0 0 10px rgba(225,6,0,.7)} .theme-swatch.t-blue{background:#00b4ff; box-shadow:0 0 10px rgba(0,180,255,.7)} .theme-swatch.t-gold{background:#ffc800; box-shadow:0 0 10px rgba(255,200,0,.7)} /* ── details under the card ── */ .card-detail{max-width:440px; margin:26px auto 0} .card-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); border-radius:10px; overflow:hidden} .cd-item{display:flex; flex-direction:column; gap:4px; padding:12px 14px; background:rgba(14,14,16,.85)} .cd-item.cd-id{grid-column:1 / -1} .cd-lbl{font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--mut); text-transform:uppercase} .cd-val{font-family:var(--mono); font-size:14px; color:var(--bone); display:flex; align-items:center; gap:10px} .cd-val.ok{color:#7fe39a} .cd-val.no{color:#ffcf6b} .cd-copy{font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--bone); cursor:pointer; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:4px; padding:3px 7px} .cd-copy:hover{background:rgba(255,255,255,.12)} .cd-copy.copied{color:#7fe39a; border-color:#2faa4f} @media(max-width:480px){ .card-detail-grid{grid-template-columns:1fr} } /* ── custom cursor (desktop only, added by cursor.js) ── */ .nh-cursor-on, .nh-cursor-on a, .nh-cursor-on button, .nh-cursor-on input{cursor:none} .nh-cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none; margin:-13px 0 0 -13px;opacity:0;transition:opacity .18s} .nh-cursor.on{opacity:1} .nh-cursor-ring{position:absolute;inset:0;width:26px;height:26px;border:1px solid var(--red); border-radius:2px;box-shadow:0 0 8px rgba(225,6,0,.7),inset 0 0 4px rgba(225,6,0,.4); transition:transform .14s ease,border-color .14s,box-shadow .14s} /* corner ticks on the reticle */ .nh-cursor-ring::before,.nh-cursor-ring::after{content:"";position:absolute;width:5px;height:5px} .nh-cursor-ring::before{top:-2px;left:-2px;border-top:1px solid var(--red);border-left:1px solid var(--red)} .nh-cursor-ring::after{bottom:-2px;right:-2px;border-bottom:1px solid var(--red);border-right:1px solid var(--red)} .nh-cursor-core{position:absolute;top:11px;left:11px;width:4px;height:4px;background:var(--red); border-radius:50%;box-shadow:0 0 6px rgba(225,6,0,.9);transition:transform .14s} .nh-cursor.hot .nh-cursor-ring{transform:scale(1.45) rotate(45deg);border-color:var(--bone); box-shadow:0 0 12px rgba(225,6,0,.9),inset 0 0 6px rgba(225,6,0,.5)} .nh-cursor.hot .nh-cursor-core{transform:scale(.5)} .nh-cursor.down .nh-cursor-ring{transform:scale(.8)} /* officer live search dropdown */ .field{position:relative} .search-results{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:6px; background:#0a0a0a;border:1px solid var(--steel);max-height:340px;overflow-y:auto; box-shadow:0 14px 40px rgba(0,0,0,.6)} .sr-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left; background:none;border:0;border-bottom:1px solid var(--line);padding:11px 14px; color:var(--bone);cursor:pointer;font-family:inherit} .sr-item:last-child{border-bottom:0} .sr-item:hover{background:var(--panel)} .sr-av{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--steel);flex:0 0 auto} .sr-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .sr-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sr-handle{font-family:var(--mono);font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sr-tag{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--red);flex:0 0 auto} .sr-empty{padding:14px;font-family:var(--mono);font-size:12px;color:var(--mut)} /* logged-in user chip (replaces the nav login button) */ .userchip{display:inline-flex;align-items:center;gap:8px} .userchip-id{display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 6px; border:1px solid var(--steel);border-radius:999px;text-decoration:none;color:var(--bone); font-family:var(--mono);font-size:13px;letter-spacing:.5px;transition:border-color .15s,color .15s} .userchip-id:hover{border-color:var(--red);color:var(--red)} .userchip-id img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--steel)} .userchip-id span{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .userchip-out{background:none;border:1px solid var(--steel);color:var(--mut);width:32px;height:32px; border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:inline-flex; align-items:center;justify-content:center;transition:border-color .15s,color .15s} .userchip-out:hover{border-color:var(--red);color:var(--red)} /* officer member roster table */ .roster-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel); scrollbar-width:thin;scrollbar-color:var(--steel) transparent} .roster-wrap::-webkit-scrollbar{height:8px} .roster-wrap::-webkit-scrollbar-track{background:#0a0a0a} .roster-wrap::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:0} .roster-wrap::-webkit-scrollbar-thumb:hover{background:var(--red,#E10600)} .roster{width:100%;border-collapse:collapse;font-size:14px;min-width:720px} .roster thead th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:2px; text-transform:uppercase;color:var(--mut);padding:14px 16px;border-bottom:1px solid var(--steel);white-space:nowrap} .roster tbody td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--bone);vertical-align:middle} .roster tbody tr:last-child td{border-bottom:0} .roster tbody tr:hover{background:#0d0d0d} .roster .r-member{min-width:180px} .roster .r-member-in{display:flex;align-items:center;gap:10px} .roster .r-member img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--steel);flex:0 0 auto} .roster .r-mono{font-family:var(--mono);font-size:12px;color:var(--ash);white-space:nowrap} .pill{font-family:var(--mono);font-size:10px;letter-spacing:1px;padding:3px 8px;border:1px solid;border-radius:999px;white-space:nowrap} .pill.yes{color:#28ff8c;border-color:#28ff8c} .pill.no{color:var(--mut);border-color:var(--steel)} /* officer side rail */ /* Compact officer button parked in the empty top-left of the global nav; opens a dropdown. Small footprint so it never covers a page's own left tabs. */ .officer-rail{position:fixed;top:32px;left:16px;z-index:200} .officer-rail-toggle{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px; background:var(--red);color:#0a0a0a;border:0;border-radius:4px;cursor:pointer;line-height:1; font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.5px; box-shadow:3px 3px 0 rgba(0,0,0,.5)} .officer-rail-toggle .bars{position:relative;width:14px;height:10px;flex:0 0 auto} .officer-rail-toggle .bars,.officer-rail-toggle .bars::before,.officer-rail-toggle .bars::after{ display:block;border-top:2px solid #0a0a0a;box-sizing:border-box} .officer-rail-toggle .bars::before,.officer-rail-toggle .bars::after{content:"";position:absolute;left:0;width:14px; transition:transform .15s ease,top .15s ease} .officer-rail-toggle .bars::before{top:3px} .officer-rail-toggle .bars::after{top:8px} .officer-rail.open .officer-rail-toggle .bars{border-top-color:transparent} .officer-rail.open .officer-rail-toggle .bars::before{top:3px;transform:rotate(45deg)} .officer-rail.open .officer-rail-toggle .bars::after{top:3px;transform:rotate(-45deg)} .officer-rail-menu{display:none;position:absolute;top:38px;left:0;min-width:196px;background:#0b0b0b; border:1px solid var(--steel);border-radius:4px;box-shadow:6px 6px 0 rgba(0,0,0,.5);padding:6px} .officer-rail.open .officer-rail-menu{display:flex;flex-direction:column} .officer-rail-link{display:flex;align-items:center;gap:11px;padding:11px 12px;text-decoration:none; color:var(--ash);font-family:var(--mono);font-size:12px;letter-spacing:1px;white-space:nowrap; border-radius:3px;transition:background .12s,color .12s} .officer-rail-link:hover{background:var(--panel);color:var(--bone)} .officer-rail-link.active{background:rgba(225,6,0,.12);color:var(--red)} .officer-rail-link .ic{width:18px;text-align:center;font-size:15px;flex:0 0 auto} @media(max-width:760px){.officer-rail{top:auto;bottom:12px;left:12px} .officer-rail-menu{top:auto;bottom:38px}} /* news editor */ .editor-shell{border:1px solid var(--line);background:var(--panel);max-width:900px} .editor-bar{display:flex;flex-wrap:wrap;gap:4px;padding:10px;border-bottom:1px solid var(--steel);background:#0a0a0a} .editor-bar button,.editor-bar select,.editor-bar label.tool{background:var(--black);border:1px solid var(--steel); color:var(--bone);font-family:var(--mono);font-size:12px;padding:6px 9px;cursor:pointer;border-radius:3px} .editor-bar button:hover{border-color:var(--red);color:var(--red)} .editor-bar input[type=color]{width:30px;height:30px;padding:0;border:1px solid var(--steel);background:none;cursor:pointer;border-radius:3px} .editor-bar .sep{width:1px;background:var(--line);margin:2px 4px} .editor-area{min-height:320px;padding:20px;color:var(--bone);font-size:15px;line-height:1.6;outline:none} .editor-area:empty::before{content:attr(data-placeholder);color:var(--mut)} .editor-area img,.editor-area video,.editor-area iframe{max-width:100%;height:auto;border-radius:4px;margin:8px 0} .editor-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px;border-top:1px solid var(--steel)} .editor-foot .grow{flex:1} .article-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);background:var(--panel);margin-top:10px} .article-row .ar-title{flex:1;font-weight:600} .article-row .ar-meta{font-family:var(--mono);font-size:11px;color:var(--mut)} .article-row .pill{cursor:default} /* public news article (DB-rendered) */ .article-full{border:1px solid var(--line);background:var(--panel);padding:30px;margin-bottom:24px} .article-full .a-cover{width:100%;max-height:380px;object-fit:cover;border-radius:4px;margin-bottom:18px} .article-full h3.a-title{font-family:var(--disp);font-size:30px;margin:0 0 8px} .article-full .a-meta{font-family:var(--mono);font-size:11px;color:var(--mut);margin-bottom:18px} .article-full .a-body img,.article-full .a-body video,.article-full .a-body iframe{max-width:100%;height:auto;border-radius:4px;margin:10px 0} .article-full .a-body iframe{width:100%;aspect-ratio:16/9} /* article body typography — shared by the public News feed (.a-body) and the editor/preview (.editor-area), so what officers type is what readers get. Without these, H2/H3/quote/list from the toolbar render as unstyled browser defaults in the body mono font and look "broken". */ .a-body h2,.editor-area h2{font-family:var(--disp);font-size:26px;letter-spacing:.5px;text-transform:uppercase;line-height:1.1;margin:22px 0 10px} .a-body h3,.editor-area h3{font-family:var(--disp);font-size:20px;letter-spacing:.5px;text-transform:uppercase;line-height:1.15;margin:18px 0 8px} .a-body h2:first-child,.a-body h3:first-child,.editor-area h2:first-child,.editor-area h3:first-child{margin-top:0} .a-body p,.editor-area p{margin:0 0 12px;color:var(--ash);line-height:1.7} .a-body blockquote,.editor-area blockquote{margin:14px 0;padding:10px 16px;border-left:3px solid var(--red);background:rgba(225,6,0,.05);color:var(--bone);font-style:italic} .a-body ul,.a-body ol,.editor-area ul,.editor-area ol{margin:0 0 12px;padding-left:24px;color:var(--ash)} .a-body li,.editor-area li{margin:4px 0} .a-body li::marker,.editor-area li::marker{color:var(--red)} .a-body a,.editor-area a{color:var(--red);text-decoration:underline;text-underline-offset:3px} .a-body a:hover,.editor-area a:hover{color:var(--bone)} .a-body hr,.editor-area hr{border:0;border-top:1px solid var(--line);margin:18px 0} .a-body pre,.editor-area pre{background:#0d0d0d;border:1px solid var(--line);padding:12px 14px;overflow-x:auto;margin:0 0 12px} .a-body code,.editor-area code{font-family:var(--mono);font-size:13px;color:var(--bone)} .a-body table,.editor-area table{border-collapse:collapse;margin:0 0 12px;max-width:100%} .a-body td,.a-body th,.editor-area td,.editor-area th{border:1px solid var(--steel);padding:6px 10px;font-size:13px} /* news editor: split compose + live preview */ .compose-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:8px} .compose-grid .editor-shell{max-width:none;margin:0} .foot-check{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--bone)} .foot-check .hint{color:var(--mut)} .preview-col{position:sticky;top:16px} .preview-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .preview-head .num{font-family:var(--mono);font-size:11px;color:var(--mut);letter-spacing:2px} .preview-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(225,6,0,.5);animation:livepulse 1.8s infinite} @keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(225,6,0,.5)}70%{box-shadow:0 0 0 7px rgba(225,6,0,0)}100%{box-shadow:0 0 0 0 rgba(225,6,0,0)}} .preview-frame{border:1px solid var(--line);background:var(--black);padding:14px;max-height:78vh;overflow:auto} .preview-frame .article-full{margin:0} @media(max-width:900px){.compose-grid{grid-template-columns:1fr}.preview-col{position:static}} /* ── intro boot sequence (added by reveal.js, runs once on load) ── */ .nh-boot{position:fixed;inset:0;z-index:10000;background:var(--black); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px); transition:opacity .4s ease, visibility .4s} .nh-boot.gone{opacity:0;visibility:hidden} .nh-boot-logo{width:84px;height:84px;filter:drop-shadow(0 0 22px rgba(225,6,0,.55)); animation:nh-boot-pulse 1s ease-in-out infinite} .nh-boot-name{font-family:var(--disp);font-size:34px;letter-spacing:2px;text-transform:uppercase; position:relative;color:var(--bone)} .nh-boot-name::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0; background:var(--black);mix-blend-mode:multiply;animation:nh-boot-glitch 1.1s steps(2) infinite} .nh-boot-line{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase; color:var(--mut);min-height:14px} .nh-boot-line b{color:var(--red)} .nh-boot-bar{width:240px;max-width:60vw;height:3px;background:var(--steel);overflow:hidden;position:relative} .nh-boot-bar i{position:absolute;inset:0;width:0;background:var(--red);box-shadow:0 0 10px var(--red)} @keyframes nh-boot-pulse{50%{transform:scale(1.08);filter:drop-shadow(0 0 34px rgba(225,6,0,.85))}} @keyframes nh-boot-glitch{0%,100%{opacity:0;clip-path:inset(0 0 100% 0)} 20%{opacity:.6;clip-path:inset(20% 0 40% 0);transform:translateX(-2px)} 40%{opacity:0;clip-path:inset(60% 0 10% 0);transform:translateX(2px)} 60%{opacity:.5;clip-path:inset(40% 0 50% 0);transform:translateX(-1px)}} /* ── scroll reveal (added by reveal.js via IntersectionObserver) ── */ .nh-rv{opacity:0;transform:translateY(26px); clip-path:inset(0 100% 0 0); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), clip-path .7s cubic-bezier(.22,.61,.36,1)} .nh-rv.in{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)} /* red edge that rides the clip as the element wipes in */ .nh-rv{position:relative} .nh-rv::after{content:"";position:absolute;top:0;bottom:0;width:2px; background:var(--red);box-shadow:0 0 12px 2px rgba(225,6,0,.7); right:0;opacity:0;transition:opacity .3s} .nh-rv:not(.in)::after{opacity:1;animation:none} .nh-rv.in::after{opacity:0;transition:opacity .5s .25s} /* soft variant — fade + slide only, no clip (for elements whose glow spills outside their box, e.g. the hero prism and the 3D ID card) */ .nh-rv-soft{opacity:0;transform:translateY(26px);clip-path:none; transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)} .nh-rv-soft.in{opacity:1;transform:translateY(0)} .nh-rv-soft::after{display:none} /* stagger children inside a revealed grid */ .nh-rv-stagger>*{opacity:0;transform:translateY(20px); transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)} .nh-rv-stagger.in>*{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){ .nh-rv,.nh-rv-stagger>*{opacity:1;transform:none;clip-path:none;transition:none} .nh-rv::after{display:none} .nh-boot{display:none} } /* ── Fleet registry — ship renders ──────────────────────────────────────── */ /* Combined-fleet gallery */ .ship-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:20px} .ship-card{border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden} .ship-card-img{aspect-ratio:16/9;background:#0d0d0d;display:flex;align-items:center;justify-content:center} .ship-card-img img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15) contrast(1.05)} .ship-card.no-img .ship-card-img::after{content:'NO RENDER';font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--mut)} .ship-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-top:1px solid var(--line)} .ship-card-name{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--bone);line-height:1.2} .ship-card-count{font-family:var(--disp);font-size:22px;color:var(--red);line-height:1} /* Hangar table thumbnail */ .ship-thumb{width:78px;padding:6px!important} .ship-thumb img{width:70px;height:40px;object-fit:cover;display:block;border:1px solid var(--line)} .ship-thumb.no-img{width:78px} /* Picker preview */ .ship-preview{display:flex;align-items:center;gap:12px;margin-top:10px} .ship-preview img{width:120px;height:68px;object-fit:cover;border:1px solid var(--line);background:#0d0d0d;display:block} .ship-preview.no-img img{display:none} /* Bulk import panels */ .import-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .import-card{border:1px solid var(--line);background:#0d0d0d;padding:20px} .import-card h4{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--bone);margin:0 0 6px} .import-card .mono-cap{margin:0 0 12px} .import-card input,.import-card textarea{width:100%;background:#060606;border:1px solid var(--line);color:var(--bone);font-family:var(--mono);font-size:13px;padding:10px 12px;margin-bottom:10px} .import-card input:focus,.import-card textarea:focus{outline:none;border-color:var(--red)} .import-card textarea{resize:vertical;min-height:84px} .fleet-toggle{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--bone);cursor:pointer;margin-bottom:10px} .fleet-toggle input{width:18px;height:18px;accent-color:var(--red);cursor:pointer} #fleetPublicLink a{color:var(--red);word-break:break-all} tr.r-click{cursor:pointer;transition:background .15s ease} tr.r-click:hover{background:rgba(225,6,0,.08)} /* Expandable news articles */ .a-body.a-clamp{max-height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 68%,transparent);mask-image:linear-gradient(#000 68%,transparent)} .a-body.a-clamp.a-open{max-height:none;-webkit-mask-image:none;mask-image:none} .a-more{margin-top:16px} /* Danger button (founder member removal) */ .btn.danger{border-color:var(--red);color:var(--red)} .btn.danger:hover{background:var(--red);color:#0a0a0a} /* Blue Discord join button */ .btn.discord{background:#5865F2;border-color:#5865F2;color:#fff} .btn.discord:hover{background:#4752c4;border-color:#4752c4;color:#fff} /* ============ STARMAP ============ */ .map-shell{display:grid;grid-template-columns:280px 1fr 340px;gap:0;height:calc(100vh - 96px);min-height:560px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .map-side,.map-detail{background:#0b0c10;overflow:hidden;display:flex;flex-direction:column} .map-side{border-right:1px solid var(--line)} .map-detail{border-left:1px solid var(--line);padding:22px 20px;overflow-y:auto} .map-stage{position:relative;background:#05060a;overflow:hidden} #mapCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none} .map-side-head{padding:14px 14px 10px;border-bottom:1px solid var(--line)} .map-tabs{display:flex;gap:6px;flex-wrap:wrap} .map-tab{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase; padding:7px 12px;background:#111318;border:1px solid var(--line);color:var(--ash);cursor:pointer;transition:.15s} .map-tab:hover:not(:disabled){border-color:var(--red);color:var(--red)} .map-tab.active{background:var(--red);border-color:var(--red);color:#0a0a0a} .map-tab.soon{opacity:.4;cursor:not-allowed} .map-search{margin-top:10px;width:100%;background:#111318;border:1px solid var(--line);color:var(--bone); font-family:var(--mono);font-size:12px;padding:9px 10px;letter-spacing:.5px} .map-search:focus{border-color:var(--red);outline:none} .map-tree{flex:1;overflow-y:auto;padding:8px 6px; scrollbar-width:thin;scrollbar-color:var(--red) transparent} /* themed scrollbar — thin red rail, no default OS bar */ .map-tree::-webkit-scrollbar{width:8px} .map-tree::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(225,6,0,.04),transparent);border-left:1px solid var(--line)} .map-tree::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--red),var(--deep)); border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 6px rgba(225,6,0,.5)} .map-tree::-webkit-scrollbar-thumb:hover{background:var(--red);background-clip:padding-box} .tree-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0; color:var(--ash);font-family:var(--mono);font-size:12px;padding:7px 8px;cursor:pointer;border-radius:3px} .tree-row:hover{background:#15171d;color:var(--bone)} .tree-row.sel{background:rgba(225,6,0,.14);color:#fff} .tree-row .tdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 6px currentColor} .tree-row .tico{width:15px;height:15px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; filter:drop-shadow(0 0 4px currentColor)} .tree-row .tico svg{width:15px;height:15px;display:block} .tree-row .tname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tree-row .ttype{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--mut)} .map-legend{display:flex;flex-wrap:wrap;gap:10px 14px;padding:12px 14px;border-top:1px solid var(--line); font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mut)} .map-legend span{display:flex;align-items:center;gap:6px} .map-legend .lg{width:9px;height:9px;border-radius:50%} .lg-planet{background:#c8a15a} .lg-station{background:#cfd6e0} .lg-rest{background:#7fd0b0} .lg-belt{background:#8a8c7a} .lg-ground{background:var(--red);box-shadow:0 0 5px var(--red);border-radius:2px} .lg-jump{background:transparent;border:2px solid #b98bff;box-shadow:0 0 5px #b98bff;box-sizing:border-box} .lg-qt{background:transparent;border:2px solid #7fd0ff;border-radius:2px;transform:rotate(45deg);box-sizing:border-box} .map-modebar{position:absolute;top:14px;left:14px;z-index:3;display:flex;align-items:center;gap:10px; background:rgba(8,10,15,.72);backdrop-filter:blur(6px);padding:8px 12px;border:1px solid var(--line)} .map-mode-label{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--mut)} .map-lore{display:flex;align-items:center;gap:7px;margin-left:10px;padding-left:12px;border-left:1px solid var(--line); font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ash);cursor:pointer;user-select:none} .map-lore input{accent-color:var(--red);width:14px;height:14px;cursor:pointer} .map-tab.lore{border-style:dashed} .map-tab.lore.active{border-style:solid} .dp-badge.lore{border-color:#c25b7a;color:#e58bab;letter-spacing:1px} .map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--mut);background:#05060a} .map-loading[hidden]{display:none} .map-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3; font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--mut);pointer-events:none; background:rgba(8,10,15,.55);padding:5px 12px;border:1px solid var(--line)} .dp-kicker{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--red)} .dp-title{font-family:var(--disp);font-size:34px;line-height:1;margin:6px 0 12px;text-transform:uppercase} .dp-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .dp-badge{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase; padding:5px 9px;border:1px solid var(--line);color:var(--ash)} .dp-desc{color:var(--ash);font-size:14px;line-height:1.6;margin:0 0 8px} .dp-sec{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--mut); margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--line)} .svc-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px} .svc-list li{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--bone)} .svc-dot{width:6px;height:6px;border-radius:50%;background:#28ff8c;box-shadow:0 0 6px #28ff8c;flex:0 0 auto} .svc-ic{flex:0 0 auto;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:#28ff8c;filter:drop-shadow(0 0 4px rgba(40,255,140,.5))} .svc-ic svg{width:16px;height:16px;display:block} .dp-none{font-family:var(--mono);font-size:12px;color:var(--mut)} .dp-tags{display:flex;flex-wrap:wrap;gap:6px} .dp-tag{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase; padding:4px 8px;background:#111318;border:1px solid var(--line);color:var(--ash)} .dp-tag.mine{border-color:rgba(40,255,140,.4);color:#7fe39a;background:rgba(40,255,140,.06)} .dp-back{background:none;border:0;color:var(--mut);font-family:var(--mono);font-size:11px;letter-spacing:1px; cursor:pointer;padding:0;margin-bottom:14px} .dp-back:hover{color:var(--red)} .dp-hint{margin-top:18px;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--mut)} /* --- tactical panel --- */ .btn.sm{font-size:11px;letter-spacing:1px;padding:8px 12px} .tac-tabs{display:flex;gap:6px;margin:6px 0 14px;border-bottom:1px solid var(--line)} .tac-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);cursor:pointer; font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:8px 6px} .tac-tab.on{color:var(--bone);border-bottom-color:var(--red)} .tac-tab:hover{color:var(--bone)} .tac-actions{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .tac-list,.tac-hist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px} .tac-item{display:flex;align-items:center;gap:9px;padding:8px 9px;background:#111318;border:1px solid var(--line);border-radius:3px} .tac-item .tac-k{flex:0 0 auto;font-size:13px;filter:drop-shadow(0 0 5px currentColor)} .tac-item .tac-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;cursor:pointer;overflow:hidden} .tac-item .tac-body b{font-family:var(--mono);font-size:12px;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tac-meta{font-family:var(--mono);font-size:10px;color:var(--mut);letter-spacing:.5px} .tac-del{flex:0 0 auto;background:none;border:0;color:var(--mut);cursor:pointer;font-size:13px;padding:2px 4px} .tac-del:hover{color:var(--red)} .tac-f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-family:var(--mono);font-size:11px; letter-spacing:1px;text-transform:uppercase;color:var(--ash)} .tac-f input,.tac-f select,.tac-f textarea{background:#0c0e13;border:1px solid var(--line);color:var(--bone); font-family:var(--mono);font-size:13px;padding:9px 10px;text-transform:none;letter-spacing:0;resize:vertical} .tac-f input:focus,.tac-f select:focus,.tac-f textarea:focus{border-color:var(--red);outline:none} .tac-h{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:baseline;padding:7px 9px; background:#111318;border:1px solid var(--line);border-radius:3px;font-family:var(--mono);font-size:11px} .tac-h-who{color:var(--bone);font-weight:700} .tac-h-act{color:var(--red);text-transform:uppercase;font-size:10px;letter-spacing:1px} .tac-h-lbl{color:var(--ash);grid-column:1 / -1} .tac-h-t{color:var(--mut);font-size:10px;grid-column:1 / -1} @media(max-width:900px){ .map-shell{grid-template-columns:1fr;grid-template-rows:auto 60vh auto;height:auto} .map-side{border-right:0;border-bottom:1px solid var(--line);max-height:34vh} .map-detail{border-left:0;border-top:1px solid var(--line)} } @media(max-width:600px){ /* phone: canvas gets most of the viewport, panels compress */ .map-shell{grid-template-rows:auto 62dvh auto} .map-side{max-height:30dvh} .map-side-head{padding:10px 10px 8px} .map-tab{padding:6px 10px;font-size:10px} .map-legend{gap:8px 10px;padding:10px} .map-modebar{top:8px;left:8px;right:8px;flex-wrap:wrap;gap:6px 8px;padding:6px 8px} .map-lore{margin-left:0;padding-left:8px} .map-hint{display:none} /* fingers already know; frees canvas space */ .map-detail{padding:16px 14px;max-height:52dvh} .dp-title{font-size:27px} .svc-list{grid-template-columns:1fr} }