/* ══ RightCortex Arcade — shared COMPONENTS (tokens are in arcade-tokens.css) ════════════════════════════════════
 *
 * Pairs with /arcade.js. Include on any page:
 *     <link rel="stylesheet" href="/arcade.css">
 *
 * 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 arcade.js files would produce two badges. Stamp DOES need the tokens
 * though — those live in /arcade-tokens.css, which every page loads.
 */

/* 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)}


/* 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)}