/* ══ RightCortex Arcade — shared theme ════════════════════════════════════ * * Pairs with /arcade.js. Include on any page: * * * Everything is scoped to body.arcade, so with the mode off a page is exactly * what it was before. Nothing here targets a specific page's layout ids — * crew.html, index.html and stamp.html share no structural selectors at all, so * this file styles only the badge it injects plus generic, safe surfaces (the * CRT overlay and monospace treatment of headings/buttons). Per-page detail — * maze walls, pellets, dot tracks — lives in that page. * * NOT loaded by stamp.html: it has its own fuller implementation, and loading * both would produce two badges. */ /* ── THEME TOKENS ──────────────────────────────────────────────────────── * Every themed rule below reads these, so a new theme is a token block plus a * cast in arcade-themes.js — no new CSS. `data-theme` is set on by * arcade.js from the worn character's id. * * --arc-accent primary neon (frames, headings) * --arc-gold progress/score highlight * --arc-wall heavy structural colour (Stamp's maze walls) * --arc-panel panel background * --arc-scan scanline strength — the screen texture * --arc-radius how soft the furniture is; the factions differ in silhouette */ /* Defaults live on :root, NOT on body.arcade — the settings toggle renders while arcade mode is OFF (that is how you turn it on), and a token that resolves to nothing makes every color-mix() using it invalid. */ :root{ --arc-accent:#00d4ff; --arc-gold:#ffd23f; --arc-wall:#2b45e8; --arc-panel:#0a121c; --arc-ink:#c3d3de; --arc-dim:#4a5a68; --arc-scan:rgba(255,255,255,.03); --arc-radius:6px; --arc-font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* The collectible. Each faction picks up something different, which is half of why the UI stopped reading as Pac-Man-with-new-paint. */ --arc-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.2' fill='%23ffd23f'/%3E%3C/svg%3E"); } /* Forge — hot metal on gunmetal, hard edges. */ body.arcade[data-theme="forge"]{ --arc-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6,2.2 L9.5,4.3 L9.5,7.7 L6,9.8 L2.5,7.7 L2.5,4.3 Z' fill='%23d9a441'/%3E%3C/svg%3E"); --arc-accent:#d9782a; --arc-gold:#d9a441; --arc-wall:#4a3a26; --arc-panel:#0f0d0c; --arc-scan:rgba(255,170,90,.028); --arc-radius:1px; } /* Aether — violet-gold light, soft and rounded. */ body.arcade[data-theme="aether"]{ --arc-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6,1.8 L8.6,6 L6,10.2 L3.4,6 Z' fill='%23c9b877'/%3E%3C/svg%3E"); --arc-accent:#8f7fc4; --arc-gold:#c9b877; --arc-wall:#3d2f6b; --arc-panel:#0b0912; --arc-scan:rgba(180,160,230,.03); --arc-radius:3px; } /* Hive — bioluminescent green on deep purple, organic. */ body.arcade[data-theme="hive"]{ --arc-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cellipse cx='6' cy='6' rx='2.5' ry='3.6' fill='%23a8bf4a'/%3E%3C/svg%3E"); --arc-accent:#7fa83a; --arc-gold:#a8bf4a; --arc-wall:#3a2044; --arc-panel:#0d0810; --arc-scan:rgba(140,190,80,.03); --arc-radius:10px; } /* The badge arcade.js injects into whatever header a page has. */ #rcArcBadge{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer; background:var(--arc-panel);border:1px solid #2a3a52;border:1px solid color-mix(in srgb,var(--arc-accent) 34%,transparent);border-radius:var(--arc-radius); padding:4px 9px;margin-right:10px;font-size:11px;font-weight:700;letter-spacing:.06em; font-variant-numeric:tabular-nums;user-select:none; font-family:var(--arc-font); transition:box-shadow .18s,border-color .18s} #rcArcBadge:hover{border-color:currentColor;box-shadow:0 0 12px -2px currentColor} #rcArcBadge .rc-arc-lv{background:#16233a;background:color-mix(in srgb,var(--arc-accent) 16%,transparent);border:1px solid #2a3a52;border:1px solid color-mix(in srgb,var(--arc-accent) 34%,transparent);border-radius:2px;padding:1px 5px;font-size:10px;color:var(--arc-ink)} .rc-arc-sprite{display:block} /* CRT glass. pointer-events:none, so it can never intercept a click, and it is one composited layer rather than anything per-element. */ body.arcade::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none; background:repeating-linear-gradient(180deg,var(--arc-scan) 0 1px,transparent 1px 3px), radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.38) 100%)} /* Generic arcade typography — chrome only. Deliberately does NOT touch body text, table cells or form inputs: those are the things people read under time pressure, and monospacing them costs real reading speed. */ body.arcade .tab, body.arcade .btn, body.arcade .panel-title, body.arcade .ph-title, body.arcade .group-label, body.arcade .module-name, body.arcade .header-tagline{ font-family:var(--arc-font); letter-spacing:.07em;text-transform:uppercase} body.arcade .panel, body.arcade .module{border-color:#1d3352;border-color:color-mix(in srgb,var(--arc-accent) 22%,transparent);border-radius:var(--arc-radius)} body.arcade .panel:hover, body.arcade .module:hover{border-color:var(--arc-accent);box-shadow:0 0 18px -8px var(--arc-accent)} /* Score panel — opened by the badge, on whatever page you happen to be on. */ .rc-arc-ov{position:fixed;inset:0;background:rgba(2,4,8,.86);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px} .rc-arc-box{background:var(--arc-panel);border:2px solid var(--arc-accent);border-radius:var(--arc-radius);padding:20px;max-width:430px;width:100%; max-height:88vh;overflow-y:auto;box-shadow:0 0 40px -6px var(--arc-accent);font-family:var(--arc-font)} .rc-arc-hdr{text-align:center;font-size:15px;font-weight:700;color:var(--arc-accent);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 0 12px var(--arc-accent)} .rc-arc-sub{text-align:center;font-size:10px;color:#5a6a75;margin-top:5px;letter-spacing:.08em;text-transform:uppercase} .rc-arc-bar{height:9px;border-radius:5px;background:#0d1826;border:1px solid #1d2c40;margin:14px 0 4px;overflow:hidden} .rc-arc-fill{height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--arc-gold) 70%,#000),var(--arc-gold));box-shadow:0 0 10px -2px var(--arc-gold)} .rc-arc-eh{margin:22px 0 8px;font-size:11px;color:#3f6f8f;letter-spacing:.14em;text-transform:uppercase;font-weight:700} .rc-arc-row2{display:flex;align-items:flex-start;gap:10px;padding:8px 2px;border-bottom:1px solid #101c2c} .rc-arc-row2.maxed{opacity:.45} .rc-arc-pts2{min-width:34px;color:var(--arc-gold);font-weight:700;font-size:12px} .rc-arc-lbl2{flex:1;font-size:12px;color:#c3d3de} .rc-arc-note{font-size:10px;color:#4a5a68;margin-top:2px} .rc-arc-cap{font-size:9px;color:#4a5a68;white-space:nowrap;padding-top:2px} .rc-arc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:13px;border-top:1px dashed #1d2c40} .rc-arc-foot a{font-size:10px;color:#3f6f8f;text-decoration:none;letter-spacing:.05em;text-transform:uppercase} .rc-arc-foot a:hover{color:var(--arc-accent)} .rc-arc-close{background:none;border:1px solid #1d2c40;color:#9eadb5;border-radius:4px;padding:6px 14px;font-size:11px;cursor:pointer;font-family:inherit;text-transform:uppercase;letter-spacing:.06em} /* The self-service toggle row, used on the Crew profile. */ .rc-arc-row{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 14px;border:1px dashed #2b3f5e;border-radius:8px;background:#0a1119;margin-top:10px} .rc-arc-row .rc-arc-lbl{font-size:13px;color:#e8eef2} .rc-arc-row .rc-arc-desc{font-size:11px;color:#5a6a75;margin-top:3px;line-height:1.45} .rc-arc-sw{width:34px;height:19px;border-radius:10px;background:#1a2530;position:relative;cursor:pointer;flex-shrink:0;border:none;transition:background .2s} .rc-arc-sw.on{background:#00d4ff44;background:color-mix(in srgb,var(--arc-accent) 27%,transparent)} .rc-arc-sw::after{content:'';position:absolute;width:15px;height:15px;border-radius:50%;background:#3a4a55;top:2px;left:2px;transition:all .2s} .rc-arc-sw.on::after{background:var(--arc-accent);left:17px} /* Theme chips + character grid inside the score panel. */ #rcArcThemes{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:7px} .rc-arc-chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px 7px;cursor:pointer; background:none;border:1px solid #1d2c40;border-radius:var(--arc-radius);color:var(--arc-dim); font-family:inherit;font-size:9px;letter-spacing:.05em;text-transform:uppercase;transition:all .15s} .rc-arc-chip:hover{border-color:var(--arc-accent);color:var(--arc-ink)} .rc-arc-chip.on{border-color:var(--arc-accent);color:var(--arc-accent);box-shadow:0 0 12px -4px var(--arc-accent)} .rc-arc-chip-art{display:block} #rcArcCast{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:7px} .rc-arc-cell{border:1px solid #1d2c40;border-radius:var(--arc-radius);padding:9px 3px 6px;text-align:center; cursor:pointer;background:rgba(0,0,0,.25);transition:all .15s} .rc-arc-cell:not(.locked):hover{border-color:var(--arc-accent);transform:translateY(-2px)} .rc-arc-cell.on{border-color:var(--arc-gold);box-shadow:0 0 12px -4px var(--arc-gold)} .rc-arc-cell.locked{cursor:not-allowed;opacity:.45} .rc-arc-cell.locked .rc-arc-cell-art{filter:grayscale(1) brightness(.5)} .rc-arc-cell-art{display:flex;justify-content:center;margin-bottom:5px} .rc-arc-cell-n{font-size:9px;color:var(--arc-ink);text-transform:uppercase;letter-spacing:.04em} .rc-arc-cell-l{font-size:8.5px;color:var(--arc-dim);margin-top:2px} .rc-arc-cell.on .rc-arc-cell-l{color:var(--arc-gold)} /* Legion — olive drab and gunmetal, hard edges. Human infantry. */ body.arcade[data-theme="legion"]{ --arc-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6,2.2 L9.6,9.4 L6,7.6 L2.4,9.4 Z' fill='%23c9b26a'/%3E%3C/svg%3E"); --arc-accent:#8fa87a; --arc-gold:#c9b26a; --arc-wall:#3f4a3a; --arc-panel:#0d100c; --arc-scan:rgba(180,200,160,.03); --arc-radius:2px; } /* Painted portrait layered over the vector sprite. The SVG sits underneath as the fallback, so a character with no generated art still renders. */ .rc-arc-fig{position:relative;display:inline-block;flex-shrink:0;vertical-align:middle} .rc-arc-fig>.rc-arc-sprite{position:absolute;inset:0} .rc-arc-fig>.rc-arc-img{position:absolute;inset:0;display:block;border-radius:22%;object-fit:cover; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}