/* ──────────────────────────────────────────────────────────────────────────── UoM Wireless Security CTF Palette: Purple #660099 · Yellow #FFCC33 · Grey #999999 Type: Open Sans (UI) · Share Tech Mono (data/frequencies) Theming: colours route through CSS variables so the app supports a dark (default) and a light theme. Toggle by setting data-theme="light" on . · --tx / --ac are *rgb triplets* used as rgba(var(--tx),A) so every text opacity flips with the theme from a single place. · The spectrum/waterfall display, the mission briefing and the terminal stay dark in both themes — they are "screens" that read best dark. ──────────────────────────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* brand — identical in both themes */ --p:#660099; --pd:#4a006e; --pdd:#2d0043; --pm:#7a00b8; --pl:#9933bb; --y:#FFCC33; --yd:#e6b000; --grd:#555555; --ok:#5fd38a; --bad:#ff7a7a; /* themable surfaces */ --bg:#0e0016; --bgm:#160020; --bgp:#1c0029; --app-bg:#0a000f; --inset:#0c0014; --screen:#090010; --gr:#999999; --bdr:rgba(102,0,153,0.28); --bdrb:rgba(102,0,153,0.6); /* themable text — rgb triplets, used as rgba(var(--tx),A) / rgb(var(--tx)) */ --tx:255,255,255; /* primary content text */ --ac:255,204,51; /* accent text (yellow on dark, purple on light) */ /* title bar (purple+white on dark; light surface on light) */ --bar-bg:#4a006e; /* = --pd */ --bar-fg:255,255,255; /* bar text rgb */ --bar-acc:#FFCC33; /* = --y — freq digits, name accent, underline */ --bar-acc-rgb:255,204,51; /* accent rgb, for alpha variants */ --bar-btn-bg:rgba(0,0,0,.18); --bar-btn-bdr:rgba(255,255,255,.16); /* the FFT/waterfall "screen" + freq axis */ --axis-bg:#06000c; /* effects */ --shadow:rgba(0,0,0,.6); --scrim:rgba(6,0,12,.82); --ov-grad:radial-gradient(circle at 50% 30%, #1a0030 0%, #08000f 70%); /* ── Type scale ────────────────────────────────────────────────────────── One size per UI role so similar parts (labels, body, headings) match, and every size is fluid: clamp(floor, grows-with-viewport, ceiling) so the UI stays legible from a laptop up to a 4K/8K display instead of staying tiny. The vw term is ~0 on a normal laptop and only kicks in on large screens. */ --fs-xs: clamp(12.5px, 0.16vw + 10px, 19px); /* labels, sub-labels, badges, fine print */ --fs-sm: clamp(14px, 0.18vw + 11px, 21px); /* default body / button text */ --fs-md: clamp(15.5px, 0.20vw + 12px, 24px); /* lead paragraphs, emphasis */ --fs-lg: clamp(18.5px, 0.24vw + 14px, 28px); /* sub-headings */ --fs-xl: clamp(22px, 0.30vw + 16px, 34px); /* freq digits, modal titles */ --fs-2xl: clamp(26px, 0.34vw + 19px, 40px); /* display / hero */ } [data-theme="light"] { --bg:#f4eff9; --bgm:#ece4f3; --bgp:#ffffff; --app-bg:#e6def0; --inset:#f7f3fb; --screen:#f1ecf7; /* the FFT/waterfall display goes light too */ --gr:#6a6276; --grd:#8a8294; --bdr:rgba(102,0,153,0.18); --bdrb:rgba(102,0,153,0.40); --tx:42,18,58; /* near-black plum */ --ac:122,0,184; /* readable purple accent */ /* light title bar: light surface, dark text, purple accents */ --bar-bg:#e8dff3; --bar-fg:42,18,58; --bar-acc:#7a00b8; --bar-acc-rgb:122,0,184; --bar-btn-bg:rgba(102,0,153,.07); --bar-btn-bdr:rgba(102,0,153,.26); --axis-bg:#e3d9ee; --shadow:rgba(80,40,110,.20); --scrim:rgba(40,20,60,.45); --ov-grad:radial-gradient(circle at 50% 30%, #efe7f7 0%, #ddd2ec 70%); } html, body { width:100%; height:100%; background:var(--app-bg); overflow:hidden; } body { font-family:'Open Sans',sans-serif; color:rgb(var(--tx)); } .hidden { display:none !important; } /* ════════════ generic overlay ════════════ */ .overlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:var(--ov-grad); } .overlay.show { display:flex; } /* ════════════ LOGIN ════════════ */ .login-card { width:420px; max-width:92vw; background:var(--bgp); border:1px solid var(--bdrb); border-radius:12px; padding:34px 36px 26px; text-align:center; box-shadow:0 30px 80px var(--shadow), 0 0 0 1px rgba(255,204,51,.06); } .login-badge { width:46px; height:46px; margin:0 auto 14px; border-radius:8px; background:var(--y); color:var(--pd); font-weight:700; font-size:var(--fs-xl); display:flex; align-items:center; justify-content:center; } .login-title { font-size:var(--fs-xl); font-weight:700; letter-spacing:.3px; color:rgb(var(--tx)); } .login-title span { color:rgb(var(--ac)); } .login-sub { font-size:var(--fs-xs); letter-spacing:3px; color:var(--gr); margin-top:6px; } .login-story { font-size:var(--fs-md); line-height:1.7; color:rgba(var(--tx),.72); margin:18px 0 22px; text-align:left; } .login-story strong { color:rgb(var(--ac)); font-weight:600; } .login-label { display:block; text-align:left; font-size:var(--fs-xs); letter-spacing:2px; text-transform:uppercase; color:var(--gr); font-weight:600; margin-bottom:7px; } .login-input { width:100%; background:var(--inset); border:1px solid var(--bdrb); border-radius:6px; color:rgb(var(--tx)); font-family:'Share Tech Mono',monospace; font-size:var(--fs-lg); padding:11px 13px; letter-spacing:.5px; outline:none; transition:border-color .15s; } .login-input:focus { border-color:rgb(var(--ac)); } #login-pass-wrap { margin-top:16px; } .login-error { min-height:16px; margin:8px 0 2px; font-size:var(--fs-xs); color:var(--bad); text-align:left; } .login-go { width:100%; margin-top:10px; background:var(--pd); border:1px solid var(--pm); border-radius:6px; color:#fff; font-family:'Open Sans',sans-serif; font-weight:600; font-size:var(--fs-sm); padding:11px; cursor:pointer; letter-spacing:.4px; transition:background .14s, border-color .14s; } .login-go:hover { background:var(--pm); border-color:var(--y); } .login-go.compact { width:auto; margin-top:0; padding:11px 18px; } .login-foot { margin-top:16px; font-size:var(--fs-xs); color:rgba(var(--tx),.5); line-height:1.5; } /* ════════════ LOADING ════════════ */ .loading-box { text-align:center; } .loading-ring { width:54px; height:54px; margin:0 auto 22px; border-radius:50%; border:3px solid rgba(102,0,153,.35); border-top-color:var(--y); animation:spin .9s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .loading-title { font-size:var(--fs-md); font-weight:600; letter-spacing:.5px; color:rgb(var(--tx)); } .loading-line { margin-top:8px; font-size:var(--fs-xs); color:rgba(var(--ac),.7); font-family:'Share Tech Mono',monospace; letter-spacing:.5px; min-height:16px; } /* ════════════ ROOT / TITLE BAR ════════════ */ /* The title bar stays purple in both themes; force white text on it. */ #root { display:flex; flex-direction:column; width:100vw; height:100vh; background:var(--bg); overflow:hidden; } #titlebar { background:var(--bar-bg); height:48px; min-height:48px; display:flex; align-items:center; padding:0 14px; gap:10px; border-bottom:2px solid var(--bar-acc); flex-shrink:0; user-select:none; color:rgb(var(--bar-fg)); } #tb-badge { background:var(--y); border-radius:3px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm); color:var(--pd); flex-shrink:0; } #tb-name { font-size:var(--fs-md); font-weight:600; letter-spacing:.5px; } #tb-name span { color:var(--bar-acc); } .tb-div { width:1px; height:22px; background:rgba(var(--bar-fg),.18); margin:0 4px; } #tb-sub { font-size:var(--fs-xs); color:rgba(var(--bar-fg),.5); letter-spacing:.5px; } #freq-display { display:flex; align-items:baseline; gap:1px; margin-left:14px; font-family:'Share Tech Mono',monospace; } .freq-group { display:flex; align-items:baseline; } .freq-digit { font-size:var(--fs-xl); color:var(--bar-acc); line-height:1; padding:2px; border-radius:3px; cursor:ns-resize; transition:background .12s; position:relative; } .freq-digit:hover { background:rgba(var(--bar-acc-rgb),.16); } .freq-digit.dim { color:rgba(var(--bar-acc-rgb),.3); } .digit-tooltip { position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); background:rgba(20,0,36,.96); border:1px solid var(--pm); border-radius:4px; padding:3px 8px; font-size:var(--fs-xs); color:rgba(255,204,51,.7); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; font-family:'Open Sans',sans-serif; letter-spacing:.5px; z-index:100; } .freq-digit:hover .digit-tooltip { opacity:1; } .freq-sep { font-size:var(--fs-md); color:rgba(var(--bar-acc-rgb),.4); padding:0 1px; } .freq-unit { font-size:var(--fs-xs); color:rgba(var(--bar-acc-rgb),.35); margin-left:5px; letter-spacing:1px; align-self:flex-end; padding-bottom:4px; } #tb-actions { margin-left:auto; display:flex; align-items:center; gap:8px; } .tb-btn { background:var(--bar-btn-bg); border:1px solid var(--bar-btn-bdr); border-radius:6px; color:rgba(var(--bar-fg),.82); font-family:'Open Sans',sans-serif; font-size:var(--fs-xs); font-weight:600; padding:6px 11px; cursor:pointer; letter-spacing:.3px; transition:border-color .14s, background .14s; } .tb-btn:hover { border-color:var(--bar-acc); background:var(--bar-btn-bg); } #tb-user { display:flex; align-items:center; gap:6px; max-width:150px; background:var(--bar-btn-bg); border:1px solid var(--bar-btn-bdr); border-radius:6px; padding:5px 10px; font-size:var(--fs-sm); font-weight:600; color:rgb(var(--bar-fg)); } #tb-user .tu-ico { font-size:var(--fs-xs); opacity:.7; flex-shrink:0; } #tb-user #score-user { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #score-badge { background:var(--bar-btn-bg); border:1px solid var(--bar-acc); border-radius:6px; padding:5px 12px; font-size:var(--fs-sm); font-weight:700; color:var(--bar-acc); font-family:'Share Tech Mono',monospace; min-width:62px; text-align:center; } .sb-pts { font-size:var(--fs-md); } #ws-badge { font-family:'Share Tech Mono',monospace; font-size:var(--fs-xs); padding:3px 9px; border-radius:10px; letter-spacing:1px; border:1px solid; flex-shrink:0; transition:color .3s,border-color .3s; } .badge-disconnected { color:rgba(var(--bar-acc-rgb),.4); border-color:rgba(var(--bar-acc-rgb),.2); } .badge-connected { color:var(--bar-acc); border-color:rgba(var(--bar-acc-rgb),.5); } .badge-error { color:#d9352f; border-color:rgba(217,53,47,.5); } /* ════════════ BODY / SIDEBAR ════════════ */ #body { display:flex; flex:1; overflow:hidden; min-height:0; } #sidebar { width:210px; min-width:250px; background:var(--bgm); border-right:1px solid var(--bdr); display:flex; flex-direction:column; padding:12px 10px; gap:12px; overflow-y:auto; } .sidebar-section { display:flex; flex-direction:column; } .slabel { font-size:var(--fs-xs); font-weight:600; letter-spacing:2px; color:var(--gr); text-transform:uppercase; margin-bottom:6px; } .band-btn, .demod-btn { width:100%; background:var(--bgp); border:1px solid var(--bdr); border-radius:5px; padding:7px 9px; text-align:left; cursor:pointer; color:rgba(var(--tx),.6); font-family:'Open Sans',sans-serif; margin-bottom:5px; transition:border-color .14s, background .14s, color .14s; } .band-btn:hover, .demod-btn:hover { border-color:var(--pl); color:rgba(var(--tx),.92); background:rgba(102,0,153,.14); } .band-btn.active { background:rgba(102,0,153,.22); border-color:var(--pm); color:rgb(var(--tx)); } .band-btn .bf { font-size:var(--fs-sm); font-weight:600; display:block; margin-bottom:2px; } .band-btn .bl { font-size:var(--fs-xs); opacity:.55; } .band-btn.active .bl { color:rgb(var(--ac)); opacity:1; } .demod-btn { font-size:var(--fs-sm); display:flex; align-items:center; gap:8px; } .demod-btn.active { background:rgba(102,0,153,.22); border-color:var(--y); color:rgb(var(--tx)); } .dbadge { font-size:var(--fs-xs); font-weight:700; padding:2px 5px; border-radius:3px; border:1px solid currentColor; min-width:28px; text-align:center; letter-spacing:.3px; flex-shrink:0; } .demod-btn.active .dbadge { background:var(--y); border-color:var(--y); color:var(--pd); } .dinfo { margin-left:auto; flex-shrink:0; width:15px; height:15px; border-radius:50%; border:1px solid currentColor; font-size:var(--fs-xs); font-weight:700; font-style:italic; font-family:Georgia,'Times New Roman',serif; line-height:13px; text-align:center; opacity:.55; cursor:help; transition:opacity .15s,background .15s; } .dinfo:hover { opacity:1; background:rgba(102,0,153,.3); } .demod-fig { margin:0 0 7px; } .demod-fig svg { display:block; margin:0 auto; width:100%; height:auto; } #demod-info { position:fixed; z-index:30; width:260px; max-width:42vw; padding:11px 26px 12px 12px; border:1px solid var(--pl); border-radius:6px; background:var(--bgp); box-shadow:0 8px 26px var(--shadow); font-size:var(--fs-xs); line-height:1.5; color:rgba(var(--tx),.85); } #demod-info-x { position:absolute; top:5px; right:5px; width:18px; height:18px; padding:0; border:1px solid var(--bdr); border-radius:3px; background:transparent; color:rgba(var(--tx),.6); font-size:var(--fs-sm); line-height:1; cursor:pointer; } #demod-info-x:hover { border-color:var(--y); color:rgb(var(--tx)); background:rgba(102,0,153,.25); } .sqsec { border-top:1px solid var(--bdr); padding-top:12px; } .ctrl-row { display:flex; align-items:center; gap:6px; margin-top:5px; } .ctrl-row label { font-size:var(--fs-xs); color:var(--gr); } .ctrl-row input[type=range] { flex:1; accent-color:var(--pm); } .ctrl-val { font-size:var(--fs-xs); color:rgb(var(--ac)); min-width:38px; font-weight:600; font-family:'Share Tech Mono',monospace; } /* ════════════ CONTENT / FFT / WATERFALL (always dark "screen") ════════════ */ #content { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; } #fft-wrap { height:155px; min-height:155px; background:var(--screen); border-bottom:1px solid var(--bdr); position:relative; flex-shrink:0; } canvas#fft { display:block; width:100%; height:100%; cursor:crosshair; } #wf-wrap { flex:1; position:relative; overflow:hidden; min-height:0; } canvas#wf-data, canvas#wf-overlay { position:absolute; top:0; left:0; width:100%; height:100%; display:block; } canvas#wf-overlay { cursor:crosshair; } .panel-label { position:absolute; top:5px; left:7px; font-size:var(--fs-xs); color:rgba(153,153,153,.5); letter-spacing:1.5px; font-weight:600; text-transform:uppercase; pointer-events:none; z-index:5; } #hover-freq { position:absolute; top:5px; right:8px; font-size:var(--fs-xs); color:rgba(var(--ac),.85); font-family:'Share Tech Mono',monospace; pointer-events:none; z-index:5; letter-spacing:.5px; } #freq-axis { position:absolute; bottom:0; left:0; right:0; height:20px; background:var(--axis-bg); border-top:1px solid var(--bdr); display:flex; align-items:center; padding:0 4px; pointer-events:none; z-index:6; } #bw-badge { display:none; position:absolute; top:6px; right:8px; font-size:var(--fs-xs); color:rgba(var(--ac),.7); font-family:'Share Tech Mono',monospace; pointer-events:none; z-index:6; letter-spacing:.5px; } #hint-pop { display:none; position:absolute; bottom:28px; left:50%; transform:translateX(-50%); background:rgba(28,0,41,.97); border:1px solid rgba(180,60,0,.55); border-radius:5px; padding:9px 14px; font-size:var(--fs-xs); color:#ffaa88; z-index:20; max-width:90%; text-align:center; pointer-events:none; } #hint-pop.show { display:block; animation:fi .18s ease; } @keyframes fi { from{opacity:0;transform:translateX(-50%) translateY(6px);} to{opacity:1;transform:translateX(-50%) translateY(0);} } /* ════════════ STATUS BAR ════════════ */ #statusbar { background:var(--bgm); border-top:1px solid var(--bdr); height:42px; min-height:42px; display:flex; align-items:center; padding:0 16px; gap:12px; flex-shrink:0; } .stlabel { font-size:var(--fs-xs); font-weight:600; letter-spacing:2px; color:var(--gr); text-transform:uppercase; flex-shrink:0; } #stmsg { font-size:var(--fs-sm); color:rgba(var(--tx),.7); } #stmsg .blink { animation:blink .9s step-end infinite; } @keyframes blink { 50% { opacity:0; } } #decode-btn { margin-left:auto; background:var(--pd); border:1px solid var(--pm); border-radius:5px; color:#fff; font-family:'Open Sans',sans-serif; font-size:var(--fs-xs); font-weight:600; padding:6px 16px; cursor:pointer; letter-spacing:.3px; transition:background .14s,border-color .14s; flex-shrink:0; } #decode-btn:not(:disabled):hover { background:var(--pm); border-color:var(--y); } #decode-btn:disabled { opacity:.28; cursor:default; } /* ════════════ MODALS (mission / leaderboard) ════════════ */ .modal-overlay { background:var(--scrim); z-index:210; } .modal-card { width:580px; max-width:94vw; max-height:88vh; overflow:auto; background:var(--bgp); border:1px solid var(--bdrb); border-radius:10px; padding:24px 28px; box-shadow:0 30px 80px var(--shadow); } .modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .modal-head span { font-size:var(--fs-lg); font-weight:700; color:rgb(var(--tx)); } .modal-x { background:transparent; border:none; color:var(--gr); font-size:var(--fs-xl); line-height:1; cursor:pointer; } .modal-x:hover { color:rgb(var(--ac)); } .modal-eyebrow { font-size:var(--fs-xs); letter-spacing:3px; font-weight:700; color:rgb(var(--ac)); margin-bottom:8px; } .modal-brief { font-size:var(--fs-md); line-height:1.72; color:rgba(var(--tx),.8); } .cipher-wrap { margin-top:13px; } .cipher-label { font-size:var(--fs-xs); letter-spacing:1px; font-weight:700; color:rgb(var(--ac)); margin-bottom:6px; } .cipher-text { font-family:'Share Tech Mono',monospace; font-size:var(--fs-lg); letter-spacing:1px; color:rgb(var(--tx)); background:rgba(102,0,153,.18); border:1px solid var(--bdrb); border-radius:5px; padding:11px 13px; word-break:break-all; user-select:all; text-align:center; } .cipher-note { font-size:var(--fs-xs); color:rgba(var(--tx),.6); margin-top:6px; } /* ── Morse beacon (ch2) decode chart ── */ .morse-wrap { margin-top:13px; } .morse-label { font-size:var(--fs-xs); letter-spacing:1px; font-weight:700; color:rgb(var(--ac)); margin-bottom:6px; } .morse-note { font-size:var(--fs-xs); line-height:1.6; color:rgba(var(--tx),.7); margin-bottom:9px; } .morse-note strong { color:rgb(var(--ac)); font-weight:600; } .morse-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:5px 10px; background:rgba(102,0,153,.14); border:1px solid var(--bdrb); border-radius:5px; padding:11px 13px; } .morse-cell { display:flex; align-items:baseline; gap:7px; font-family:'Share Tech Mono',monospace; padding:2px 2px; } .morse-cell .mk { color:rgb(var(--ac)); font-weight:700; font-size:var(--fs-sm); width:11px; flex-shrink:0; } .morse-cell .mc { color:rgb(var(--tx)); font-size:var(--fs-sm); letter-spacing:1px; white-space:nowrap; } .hints-wrap { margin-top:12px; } .hints-head { font-size:var(--fs-xs); color:rgba(var(--ac),.9); margin-bottom:7px; } .hints-cost { color:rgba(255,120,120,.9); font-size:var(--fs-xs); margin-left:3px; } .hint-item { margin:6px 0; } .hint-item.revealed { font-size:var(--fs-sm); line-height:1.55; color:rgb(var(--tx)); background:rgba(102,0,153,.16); border:1px solid var(--bdr); border-left:3px solid rgb(var(--ac)); border-radius:4px; padding:8px 11px; } .hint-reveal { font-size:var(--fs-xs); cursor:pointer; padding:7px 11px; border-radius:4px; border:1px dashed var(--bdrb); background:transparent; color:rgba(var(--tx),.85); } .hint-reveal:hover { border-color:rgb(var(--ac)); color:rgb(var(--tx)); background:rgba(102,0,153,.18); } .hint-locked { display:inline-block; font-size:var(--fs-xs); padding:7px 11px; border-radius:4px; border:1px dashed var(--bdrb); color:rgba(var(--tx),.4); opacity:.65; cursor:not-allowed; } .hr-cost { color:rgba(255,120,120,.9); margin-left:3px; } .submit-block { margin-top:18px; border-top:1px solid var(--bdr); padding-top:16px; } .submit-row { display:flex; gap:8px; } .submit-row .login-input { flex:1; font-size:var(--fs-sm); padding:9px 11px; } .flag-result { min-height:18px; margin-top:9px; font-size:var(--fs-sm); font-weight:600; } .flag-result.ok { color:var(--ok); } .flag-result.bad { color:var(--bad); } .solve-celebrate { text-align:center; font-size:var(--fs-md); padding:10px 8px; margin-top:10px; border:1px solid var(--ok); border-radius:6px; background:rgba(0,200,120,.10); animation:solvePulse .45s ease; color:rgb(var(--tx)); } .solve-celebrate .solve-next { margin-top:8px; font-size:var(--fs-xs); font-weight:500; opacity:.85; } .solve-celebrate .solve-next-btn { margin-top:12px; } .solve-celebrate .solve-lesson { text-align:left; margin-top:10px; padding:9px 11px; border-radius:6px; background:rgba(102,0,153,.16); border:1px solid var(--bdr); border-left:3px solid rgb(var(--ac)); font-size:var(--fs-sm); font-weight:400; line-height:1.6; color:rgba(var(--tx),.88); } .solve-celebrate .sl-label { display:block; font-size:var(--fs-xs); letter-spacing:1.5px; font-weight:700; text-transform:uppercase; color:rgb(var(--ac)); margin-bottom:5px; } @keyframes solvePulse { from{transform:scale(.92);opacity:.2;} to{transform:scale(1);opacity:1;} } .mission-flip { animation:missionFlip .45s ease; } @keyframes missionFlip { from{opacity:.25;transform:translateY(10px);} to{opacity:1;transform:none;} } .logout-skip-btn { width:100%; margin-top:9px; } /* ════════════ REMOTE SHELL (ch3) — terminal always dark ════════════ */ .shell-wrap { margin-top:12px; } .shell-open { width:100%; padding:11px; font-size:var(--fs-sm); font-weight:600; cursor:pointer; border:1px solid var(--ok); border-radius:6px; color:#cfeede; background:rgba(0,200,120,.12); } .shell-open:hover { background:rgba(0,200,120,.2); color:#fff; } .shell-note { margin-top:7px; font-size:var(--fs-xs); color:rgba(var(--tx),.6); } #mission-bus .shell-note { color:rgba(var(--tx),.82); line-height:1.5; } #mission-bus .shell-open { margin-top:10px; } .cmd-chip { font-family:'Share Tech Mono',monospace; font-size:.92em; padding:1px 5px; border-radius:4px; background:rgba(102,0,153,.16); border:1px solid var(--bdr); color:rgb(var(--tx)); } #terminal .term-card { width:min(860px, 94vw); height:min(80vh, 640px); display:flex; flex-direction:column; background:#05080a; border:1px solid #1c3a2a; border-radius:9px; overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.7); font-family:'Share Tech Mono',monospace; } .term-head { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#0c1512; border-bottom:1px solid #1c3a2a; flex-shrink:0; } .term-dots { display:flex; gap:6px; align-items:center; } .term-dots i { width:11px; height:11px; border-radius:50%; background:#2a4a3a; display:block; } .term-dots.ghost { visibility:hidden; } /* keeps the title optically centred */ .term-dot { width:12px; height:12px; border-radius:50%; border:none; padding:0; display:block; cursor:pointer; position:relative; line-height:0; } .term-dot.red { background:#ff5f56; } .term-dot.yellow { background:#ffbd2e; } .term-dot.green { background:#27c93f; } .term-dot:hover { filter:brightness(1.12); } .term-dot::after { /* macOS-style glyph, on hover of the cluster */ content:attr(data-glyph); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:700; color:rgba(0,0,0,.6); opacity:0; } #term-controls:hover .term-dot::after { opacity:1; } .term-title { flex:1; text-align:center; font-size:var(--fs-sm); color:#7fae93; letter-spacing:.5px; } /* Green = full-screen the terminal */ #terminal .term-card.maxed { width:100vw; height:100vh; max-width:100vw; border-radius:0; border-width:0 0 1px 0; } .term-output { flex:1; overflow-y:auto; padding:12px 14px; font-size:var(--fs-sm); line-height:1.5; color:#9df0b8; white-space:pre-wrap; word-break:break-word; outline:none; } .term-output .term-echo { color:#e6e6e6; } .term-output .term-banner { color:#5fd0ff; } .term-output .term-err { color:#ff9b8a; } .term-inputline { display:flex; align-items:center; padding:6px 14px 12px; flex-shrink:0; } .term-prompt { color:#5fd0ff; font-size:var(--fs-sm); white-space:pre; flex-shrink:0; } .term-input { flex:1; background:none; border:none; outline:none; color:#e6e6e6; font-family:'Share Tech Mono',monospace; font-size:var(--fs-sm); padding:0 0 0 2px; } .challist-label { font-size:var(--fs-xs); letter-spacing:2px; color:var(--gr); text-transform:uppercase; font-weight:600; margin:18px 0 8px; } .chal-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:6px; border:1px solid var(--bdr); background:var(--inset); margin-bottom:6px; } .chal-row.active { border-color:var(--pm); background:rgba(102,0,153,.14); } .chal-row.solved { border-color:rgba(95,211,138,.5); } .chal-row.locked { opacity:.5; } .chal-ico { font-size:var(--fs-md); width:20px; text-align:center; flex-shrink:0; } .chal-meta { flex:1; min-width:0; } .chal-title { font-size:var(--fs-sm); font-weight:600; color:rgb(var(--tx)); } .chal-state { font-size:var(--fs-xs); color:var(--gr); margin-top:1px; } .chal-pts { font-size:var(--fs-sm); font-weight:700; color:rgb(var(--ac)); font-family:'Share Tech Mono',monospace; flex-shrink:0; } /* ════════════ LEADERBOARD ════════════ */ .lb-rows { display:flex; flex-direction:column; gap:4px; } .lb-row { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:6px; background:var(--inset); border:1px solid var(--bdr); } .lb-row.me { border-color:rgb(var(--ac)); background:rgba(var(--ac),.10); } .lb-rank { font-family:'Share Tech Mono',monospace; font-size:var(--fs-sm); color:var(--gr); width:32px; flex-shrink:0; } .lb-row.me .lb-rank, .lb-row:nth-child(1) .lb-rank { color:rgb(var(--ac)); } .lb-name { flex:1; font-size:var(--fs-md); font-weight:600; color:rgb(var(--tx)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lb-pts { font-family:'Share Tech Mono',monospace; font-size:var(--fs-md); font-weight:700; color:rgb(var(--ac)); } .lb-empty { font-size:var(--fs-sm); color:var(--gr); text-align:center; padding:18px; } .lb-mine { margin-top:12px; font-size:var(--fs-xs); color:rgba(var(--tx),.6); text-align:center; } /* ════════════ MISSION BRIEFING (first-run storyboard — always dark) ════════════ */ .briefing-overlay { background:rgba(3,0,8,.93); z-index:220; } .briefing-card { position:relative; width:min(560px,92vw); background:#0c0710; border:1px solid var(--bdr); border-top:3px solid #e23b3b; border-radius:10px; padding:30px 30px 22px; box-shadow:0 24px 80px rgba(0,0,0,.72); color:#fff; } .briefing-card::before { /* faint classified hatch */ content:''; position:absolute; inset:0; pointer-events:none; opacity:.04; border-radius:inherit; overflow:hidden; background:repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 16px); } .briefing-stamp { position:absolute; top:20px; right:-4px; transform:rotate(8deg); border:3px solid rgba(226,59,59,.7); color:rgba(226,59,59,.85); font-family:'Share Tech Mono',monospace; font-weight:700; letter-spacing:3px; font-size:var(--fs-md); padding:4px 12px; border-radius:4px; text-transform:uppercase; } .briefing-eyebrow { font-family:'Share Tech Mono',monospace; font-size:var(--fs-xs); letter-spacing:3px; color:#e2825b; margin-bottom:10px; } .briefing-title { font-size:var(--fs-2xl); font-weight:700; color:#fff; letter-spacing:.5px; margin-bottom:14px; } .briefing-body { font-size:var(--fs-lg); line-height:1.75; color:rgba(255,255,255,.85); min-height:104px; } .briefing-body strong { color:var(--y); font-weight:600; } .briefing-foot { display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:12px; } .briefing-dots { display:flex; gap:7px; } .briefing-dots .bd { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); transition:background .2s; } .briefing-dots .bd.on { background:#e23b3b; } .briefing-actions { display:flex; align-items:center; gap:12px; } @keyframes briefIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } .brief-in { animation:briefIn .28s ease; } /* ════════════ GUIDED TOUR ════════════ */ #tour { position:fixed; inset:0; z-index:300; } #tour-backdrop { position:absolute; inset:0; background:rgba(4,0,10,.72); } .tour-highlight { position:relative; z-index:301; outline:2px solid rgb(var(--ac)); outline-offset:3px; border-radius:6px; /* Lifted above the dark backdrop — give transparent targets (e.g. the freq display, sidebar sections) an opaque surface so their text stays readable, especially the purple-on-light digits in the light theme. */ background:var(--bg); } /* Keep each target on the surface colour it normally lives on. */ #freq-display.tour-highlight { background:var(--bar-bg); } .sidebar-section.tour-highlight { background:var(--bgm); } #tour-pop { position:absolute; z-index:302; width:260px; background:var(--bgp); border:1px solid rgb(var(--ac)); border-radius:8px; padding:14px 16px; box-shadow:0 16px 50px var(--shadow); } .tour-step { font-size:var(--fs-xs); letter-spacing:2px; color:rgb(var(--ac)); font-weight:700; margin-bottom:6px; } .tour-body { font-size:var(--fs-md); line-height:1.62; color:rgba(var(--tx),.85); } .tour-fig { margin-top:11px; } .tour-fig svg { display:block; width:100%; height:auto; background:rgba(var(--tx),.04); border:1px solid var(--bdr); border-radius:7px; padding:6px 4px; } .tour-fig:empty { display:none; } .tour-foot { display:flex; align-items:center; justify-content:space-between; margin-top:14px; } .tour-skip { background:transparent; border:none; color:var(--gr); font-size:var(--fs-xs); cursor:pointer; } .tour-skip:hover { color:rgb(var(--tx)); } .tour-next { background:var(--pd); border:1px solid var(--pm); border-radius:5px; color:#fff; font-family:'Open Sans',sans-serif; font-weight:600; font-size:var(--fs-xs); padding:6px 14px; cursor:pointer; } .tour-next:hover { background:var(--pm); border-color:var(--y); } /* ════════════ ADMIN DASHBOARD ════════════ */ .admin-wrap { position:absolute; inset:0; overflow-y:auto; padding:20px 24px 40px; background:var(--bg); font-family:'Open Sans',sans-serif; } .admin-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:16px; margin-bottom:18px; border-bottom:2px solid rgb(var(--ac)); } .admin-title { font-size:var(--fs-lg); font-weight:700; color:rgb(var(--ac)); } .admin-headline { font-size:var(--fs-sm); color:rgba(var(--tx),.7); } .admin-headline span { color:rgb(var(--tx)); font-weight:700; font-family:'Share Tech Mono',monospace; } .admin-actions { margin-left:auto; display:flex; gap:8px; } .admin-danger { border-color:rgba(255,122,122,.5) !important; color:var(--bad) !important; } .admin-danger:hover { background:rgba(255,122,122,.12) !important; border-color:var(--bad) !important; } .admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } @media (max-width:780px) { .admin-grid { grid-template-columns:1fr; } } .admin-card { background:var(--bgp); border:1px solid var(--bdr); border-radius:9px; padding:16px 18px; } .admin-card-h { font-size:var(--fs-xs); letter-spacing:2px; text-transform:uppercase; font-weight:700; color:var(--gr); margin-bottom:12px; } .admin-wrap > .admin-card { margin-bottom:16px; } /* recover a locked call sign */ .admin-help { font-size:var(--fs-sm); line-height:1.6; color:rgba(var(--tx),.7); margin:0 0 12px; } .admin-setpass { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .admin-setpass .login-input { flex:1; min-width:160px; margin:0; } .admin-setpass .tb-btn { flex-shrink:0; } .admin-note { font-size:var(--fs-sm); margin-top:10px; min-height:1em; color:rgba(var(--tx),.7); } .admin-note.ok { color:#5fd08a; } /* funnel */ .fn-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .fn-label { width:150px; flex-shrink:0; font-size:var(--fs-sm); color:rgba(var(--tx),.82); } .fn-bar { flex:1; height:16px; background:var(--inset); border:1px solid var(--bdr); border-radius:4px; overflow:hidden; } .fn-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--pm),var(--y)); background-repeat:no-repeat; background-position:left center; } .fn-count { width:34px; text-align:right; font-family:'Share Tech Mono',monospace; font-size:var(--fs-sm); font-weight:700; color:rgb(var(--ac)); } /* per challenge */ .ch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--bdr); } .ch-row:last-child { border-bottom:none; } .ch-name { font-size:var(--fs-sm); font-weight:600; color:rgb(var(--tx)); } .ch-stat { font-size:var(--fs-sm); color:rgba(var(--tx),.6); } .ch-stat strong { color:var(--ok); } /* recent feed */ .admin-recent { max-height:340px; overflow-y:auto; font-family:'Share Tech Mono',monospace; } .rc-row { display:flex; gap:12px; padding:5px 0; font-size:var(--fs-sm); border-bottom:1px solid rgba(102,0,153,.12); } .rc-ts { color:var(--gr); flex-shrink:0; } .rc-user { color:rgb(var(--ac)); width:130px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rc-ev { color:rgba(var(--tx),.75); } .rc-empty { color:var(--gr); font-size:var(--fs-sm); padding:14px 0; } /* registered-player list + detail */ .admin-count { font-size:var(--fs-sm); font-weight:400; color:var(--gr); margin-left:4px; } .ul-search { width:100%; margin:4px 0 12px; padding:8px 11px; font-size:var(--fs-sm); } .admin-userlist { max-height:360px; overflow-y:auto; } .ul-row { display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:6px; border-bottom:1px solid rgba(102,0,153,.12); cursor:pointer; transition:background .12s; } .ul-row:hover { background:rgba(102,0,153,.16); } .ul-row:last-child { border-bottom:none; } .ul-name { flex:1; font-size:var(--fs-sm); font-weight:700; color:rgb(var(--ac)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ul-meta { font-size:var(--fs-sm); color:rgba(var(--tx),.6); flex-shrink:0; } .ul-meta strong { color:var(--ok); } .ul-login { width:150px; flex-shrink:0; text-align:right; font-family:'Share Tech Mono',monospace; font-size:var(--fs-xs); color:var(--gr); } @media (max-width:680px) { .ul-login { display:none; } } /* detail modal */ .um-profile { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-bottom:16px; } .um-profile > div { font-size:var(--fs-sm); color:rgb(var(--tx)); } .um-k { display:block; font-size:var(--fs-xs); letter-spacing:1.5px; text-transform:uppercase; color:var(--gr); font-weight:700; margin-bottom:2px; } .um-sec-h { font-size:var(--fs-xs); letter-spacing:1.5px; text-transform:uppercase; font-weight:700; color:rgb(var(--ac)); margin:14px 0 7px; } .um-item { font-size:var(--fs-sm); color:rgba(var(--tx),.88); padding:4px 0; } .um-ok { color:var(--ok); } .um-hint { filter:grayscale(.1); } .um-dim { color:var(--gr); font-size:var(--fs-xs); } .um-empty { font-size:var(--fs-sm); color:var(--gr); padding:3px 0; } /* ════════════ LIGHT-THEME TARGETED FIXES ════════════ */ /* The "open remote shell" button lives on a light card in light mode; its very pale green text needs darkening to stay readable. */ [data-theme="light"] .shell-open { color:#1c7a4e; } [data-theme="light"] .shell-open:hover { color:#0e5e3a; }