/* ==========================================================================
   WORLD OF CRIMINALS — NEON SYNDICATE THEME
   Obsidian base. Cyan = interactive. Green = money. Crimson = danger.
   Violet = atmosphere. Chrome = structure. Gold = rare (crystals, rank).
   Load after your old stylesheet. Element selectors restyle legacy markup;
   .woc-* classes drive the new components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- 1. Tokens ---------- */
:root {
  --obsidian: #05060b;
  --charcoal: #0b0e14;
  --panel: rgba(12, 15, 26, .78);
  --panel-solid: #0c0f1a;
  --edge: rgba(122, 140, 170, .28);

  --cyan: #19e6ff;
  --blue: #2f6bff;
  --green: #39ff88;
  --crimson: #ff2a4d;
  --violet: #8a3dff;
  --chrome: #c9d3e0;
  --gold: #e0b84a;

  --text: #d6deeb;
  --text-dim: #7d8aa3;

  --f-display: 'Chakra Petch', 'Bank Gothic', 'Eurostile', 'Arial Narrow', sans-serif;
  --f-body: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

  --glow-cyan: 0 0 14px rgba(25, 230, 255, .45);
  --glow-green: 0 0 14px rgba(57, 255, 136, .45);
  --glow-red: 0 0 14px rgba(255, 42, 77, .5);
  --glow-violet: 0 0 18px rgba(138, 61, 255, .45);

  --woc-game-width: 930px;  /* ONE source of truth: the game column AND the banner use this */

  --chamfer: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --chamfer-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ---------- 2. Atmosphere: city, rain, light sweep ---------- */
html { background: var(--obsidian); }
body {
  margin: 0; min-height: 100vh;
  color: var(--text); font: 14px/1.55 var(--f-body);
  background: url('../images/woc-bg-city.svg') center bottom / cover no-repeat fixed, var(--obsidian);
}
/* rain: two parallax sheets */
body::before, body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
body::before {
  background: repeating-linear-gradient(104deg, rgba(150, 215, 255, .09) 0 1px, transparent 1px 26px);
  background-size: 260px 260px; animation: woc-rain 1.1s linear infinite; opacity: .55;
}
body::after {
  background:
    repeating-linear-gradient(106deg, rgba(190, 150, 255, .07) 0 1px, transparent 1px 41px),
    linear-gradient(100deg, transparent 40%, rgba(25, 230, 255, .05) 50%, transparent 60%);
  background-size: 410px 410px, 220% 100%; animation: woc-rain 1.7s linear infinite, woc-sweep 16s ease-in-out infinite alternate; opacity: .6;
}
@keyframes woc-rain { to { background-position: -80px 260px, 0 0; } }
@keyframes woc-sweep { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 100% 0; } }

/* ---------- 3. Game column (wrap your page: <div class="woc-shell">) ---------- */
.woc-shell {
  position: relative; z-index: 1;
  box-sizing: border-box; width: var(--woc-game-width); max-width: 100%; margin: 0 auto;
  background: linear-gradient(180deg, rgba(8, 10, 18, .9), rgba(5, 6, 11, .94));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-left: 1px solid var(--edge); border-right: 1px solid var(--edge);
  box-shadow: 0 0 0 1px #000, 0 0 60px rgba(138, 61, 255, .22), 0 0 140px rgba(25, 230, 255, .08);
}
.woc-shell::before, .woc-shell::after { /* chrome edge strips */
  content: ''; position: absolute; top: 0; bottom: 0; width: 2px; pointer-events: none;
  background: linear-gradient(180deg, var(--cyan), transparent 30%, transparent 70%, var(--violet));
  opacity: .7;
}
.woc-shell::before { left: -1px; } .woc-shell::after { right: -1px; }

/* ---------- 4. Hero banner (your art) + brand + HUD ---------- */
/* Banner — locked to the game column.
   Markup (preferred): put <header class="woc-hero"> as the FIRST child of .woc-shell, so it shares
   the column's parent, width and borders. If your template can't move it, it still aligns: outside
   the shell it takes the same --woc-game-width and centring.
   Art: 2172 x 380 (5.72:1). The box uses that exact ratio, so the whole banner is always visible:
   no crop, no stretch, at every width (930px column -> ~163px tall; 390px phone -> ~68px tall). */
.woc-hero { position: relative; z-index: 1; box-sizing: border-box; display: block;
  width: 100%; max-width: var(--woc-game-width); margin: 0 auto; aspect-ratio: 2172 / 380; height: auto; overflow: hidden;
  background: #05060b; border-bottom: 1px solid rgba(25, 230, 255, .55); box-shadow: 0 1px 0 rgba(25, 230, 255, .6), 0 10px 30px -12px rgba(138, 61, 255, .55); }
.woc-shell > .woc-hero { max-width: none; }
.woc-hero > a { position: absolute; inset: 0; display: block; }
.woc-hero picture { display: contents; }
.woc-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; transition: filter .4s; }
.woc-hero::before { /* bottom fade into the game column */
  content: ''; position: absolute; inset: auto 0 0 0; height: 14%; z-index: 4; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(5, 6, 11, .6)); }
.woc-hero::after { /* rain + scanlines over the art */
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(104deg, rgba(170, 225, 255, .10) 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  background-size: 240px 240px, auto; animation: woc-rain 1s linear infinite; mix-blend-mode: screen; opacity: .4; }
.woc-fx { position: absolute; z-index: 3; pointer-events: none; mix-blend-mode: screen; border-radius: 50%; }
.woc-fx--logo { left: 51%; top: 55%; width: 32%; height: 125%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 42, 77, .3), rgba(47, 107, 255, .16) 55%, transparent 80%); animation: woc-pulse 4.5s ease-in-out infinite; }
.woc-fx--btc { left: 26.5%; top: 28%; width: 10%; height: 62%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(25, 230, 255, .6), transparent 80%); animation: woc-flicker 6s steps(1) infinite; }
.woc-fx--sign { left: 89%; top: 25%; width: 10%; height: 62%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 42, 77, .6), transparent 80%); animation: woc-flicker 7.3s steps(1) infinite reverse; }
.woc-fx--moon { left: 36.9%; top: 15%; width: 8%; height: 40%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(200, 225, 255, .55), transparent 75%); animation: woc-pulse 9s ease-in-out infinite; }
.woc-fx--heli { left: 69%; top: 23%; width: 6px; height: 6px; background: #ff2a4d; box-shadow: 0 0 12px 4px #ff2a4d, 0 0 30px 10px rgba(255, 42, 77, .5); animation: woc-beacon 1.2s steps(1) infinite; }
.woc-fx--visor { left: 14.2%; top: 33%; width: 5%; height: 26%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(47, 107, 255, .7), transparent 80%); animation: woc-flicker 8.6s steps(1) infinite; }
.woc-fx--sweep { inset: 0; width: auto; border-radius: 0; background: linear-gradient(105deg, transparent 42%, rgba(25, 230, 255, .16) 50%, rgba(255, 42, 77, .1) 54%, transparent 62%); background-size: 260% 100%; animation: woc-sweep 9s ease-in-out infinite alternate; }
@keyframes woc-pulse { 50% { opacity: .45; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes woc-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .35; } 10% { opacity: 1; } 52% { opacity: .55; } 54% { opacity: 1; } 91% { opacity: .2; } 93% { opacity: 1; } }
@keyframes woc-beacon { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .08; } }
.woc-hero:hover .woc-fx--logo { animation-duration: 1.6s; }
.woc-hero:hover .woc-hero__art { filter: saturate(1.25) brightness(1.1); }

.woc-brand { display: block; margin: 0 0 12px; padding: 8px 4px 4px; text-align: center; background: radial-gradient(closest-side, rgba(138, 61, 255, .25), transparent); }
.woc-brand img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 12px rgba(47, 107, 255, .55)) drop-shadow(0 0 16px rgba(255, 42, 77, .4)); transition: filter .25s, transform .25s; animation: woc-bob 6s ease-in-out infinite; }
.woc-brand:hover img { filter: drop-shadow(0 0 16px rgba(25, 230, 255, .9)) drop-shadow(0 0 22px rgba(255, 42, 77, .7)); transform: scale(1.04); }
@keyframes woc-bob { 50% { transform: translateY(-3px); } }

.woc-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 22px; padding: 10px 16px; margin: 0; background: linear-gradient(180deg, rgba(5, 6, 11, .92), rgba(12, 15, 26, .85)); border-bottom: 1px solid var(--edge); }
.woc-meter { display: grid; grid-template-columns: 50px 1fr 38px; align-items: center; gap: 8px; margin: 3px 0; font: 600 11px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--chrome); }
.woc-meter output { text-align: right; font: 500 11px var(--f-mono); color: var(--text); }
.woc-bar { position: relative; height: 8px; background: #03040a; border: 1px solid #1c2233; border-radius: 1px; overflow: hidden; clip-path: var(--chamfer-sm); }
.woc-bar > i { display: block; height: 100%; width: var(--v, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 50%, rgba(0,0,0,.3)), var(--c, var(--cyan));
  box-shadow: 0 0 10px var(--c, var(--cyan)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.woc-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.55) 9px 10px); }
.woc-bar--energy { --c: #19e6ff; } .woc-bar--will { --c: #8a3dff; } .woc-bar--brave { --c: #e0b84a; }
.woc-bar--exp { --c: #2f6bff; } .woc-bar--health { --c: #ff2a4d; } .woc-bar--cash { --c: #39ff88; }
.woc-bar--heat > i { --c: #ff2a4d; background: linear-gradient(90deg, #8a3dff, #ff2a4d); animation: woc-heat 1.4s ease-in-out infinite; }
.woc-bar.is-critical > i { animation: woc-heat .6s ease-in-out infinite; }
@keyframes woc-heat { 50% { filter: brightness(1.5); box-shadow: 0 0 20px #ff2a4d; } }

/* ---------- 5. Command navigation (icon dock) ---------- */
.woc-nav {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
  margin: 0; padding: 10px 12px; list-style: none;
  background: linear-gradient(180deg, rgba(12, 15, 26, .9), rgba(5, 6, 11, .6));
  border-bottom: 1px solid var(--edge);
}
.woc-nav a {
  --ico-accent: var(--cyan); --tone: var(--cyan);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 2px 7px; color: var(--chrome); text-decoration: none;
  font: 600 10px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(25, 32, 52, .85), rgba(9, 11, 20, .9));
  border: 1px solid var(--edge); clip-path: var(--chamfer-sm);
  transition: transform .14s ease, color .14s, background .14s, border-color .14s, filter .14s;
}
.woc-nav svg { width: 28px; height: 28px; transition: transform .2s ease, filter .2s ease; }
.woc-nav a::after { /* bottom neon bar */
  content: ''; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; background: var(--tone);
  box-shadow: 0 0 10px var(--tone); transform: scaleX(0); transition: transform .2s ease;
}
.woc-nav a:hover, .woc-nav a:focus-visible {
  color: #fff; transform: translateY(-3px); outline: none; border-color: var(--tone);
  background: linear-gradient(180deg, rgba(25, 44, 70, .95), rgba(9, 14, 28, .95));
  filter: drop-shadow(0 0 8px var(--tone));
}
.woc-nav a:hover svg, .woc-nav a:focus-visible svg { transform: scale(1.14); filter: drop-shadow(0 0 5px var(--tone)); }
.woc-nav a:hover::after, .woc-nav a:focus-visible::after, .woc-nav a[aria-current="page"]::after { transform: scaleX(1); }
.woc-nav a[aria-current="page"] { color: #fff; border-color: var(--tone); background: linear-gradient(180deg, rgba(25, 70, 90, .75), rgba(9, 18, 32, .95)); box-shadow: inset 0 0 18px rgba(25, 230, 255, .22); }
.woc-nav a:active { transform: translateY(1px) scale(.95); filter: brightness(1.7) drop-shadow(0 0 14px var(--tone)); }
.woc-nav a[data-tone="green"] { --tone: var(--green); --ico-accent: var(--green); }
.woc-nav a[data-tone="violet"] { --tone: var(--violet); --ico-accent: var(--violet); }
.woc-nav a[data-tone="red"] { --tone: var(--crimson); --ico-accent: var(--crimson); }
.woc-nav a[data-tone="gold"] { --tone: var(--gold); --ico-accent: var(--gold); }
/* tooltip */
.woc-nav a[data-tip]:hover::before, .woc-nav a[data-tip]:focus-visible::before {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 20; white-space: nowrap;
  padding: 5px 9px; font: 500 11px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text);
  background: #05060b; border: 1px solid var(--tone); box-shadow: 0 0 12px rgba(0,0,0,.8);
}
/* ---------- 5b. Neon notification badges (driven by woc-notify.js — never hand-write counts) ---------- */
.woc-nav > li, .woc-menu > li { position: relative; }
.woc-badge {
  /* --nb: line colour, --nb-rgb: glow channel values */
  --nb: #5ff0ff; --nb-rgb: 25, 230, 255;
  position: absolute; z-index: 6; top: -7px; right: -6px;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 21px; height: 21px; padding: 0 6px; overflow: hidden;
  font: 700 11.5px/1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; text-transform: none;
  color: #fff; text-shadow: 0 0 2px #fff, 0 0 8px rgba(var(--nb-rgb), .95);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 45%),
    radial-gradient(120% 130% at 50% 0%, rgba(var(--nb-rgb), .32), rgba(4, 5, 10, .97) 62%), #04050a;
  border: 1px solid var(--nb); border-radius: 999px;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .9), 0 0 7px rgba(var(--nb-rgb), .75), 0 0 18px rgba(var(--nb-rgb), .38), inset 0 0 7px rgba(var(--nb-rgb), .4);
  pointer-events: none; user-select: none;
  opacity: 1; scale: 1; translate: 0 0;
  transition: opacity .28s ease, scale .34s cubic-bezier(.3, 1.6, .5, 1), translate .14s ease, border-color .3s, box-shadow .3s, min-width .25s;
  animation: woc-badge-breathe 5s ease-in-out infinite;
}
.woc-badge[hidden] { display: none; }
.woc-badge.is-empty { opacity: 0; scale: .35; }
.woc-badge.is-wide { padding: 0 5px; }
.woc-badge.is-xwide { padding: 0 5px; font-size: 10.5px; letter-spacing: -.05em; }
.woc-badge__num { display: inline-block; font-weight: 700; }

/* channel tones */
.woc-badge--cyan   { --nb: #5ff0ff; --nb-rgb: 25, 230, 255; }
.woc-badge--blue   { --nb: #6f9bff; --nb-rgb: 47, 107, 255; }
.woc-badge--violet { --nb: #b98aff; --nb-rgb: 138, 61, 255; }
.woc-badge--red    { --nb: #ff5a74; --nb-rgb: 255, 42, 77; }
.woc-badge--green  { --nb: #7dffb0; --nb-rgb: 57, 255, 136; }
.woc-badge--gold   { --nb: #f2d27a; --nb-rgb: 224, 184, 74; }

/* placement: icon dock (top-right corner, rides the hover lift) */
.woc-nav > li:hover > .woc-badge, .woc-nav > li:focus-within > .woc-badge { translate: 0 -3px; }
/* placement: sidebar menu (right edge, vertically centred) */
.woc-menu > li > .woc-badge { top: 50%; right: 10px; margin-top: -10.5px; }
.woc-menu > li > a:has(+ .woc-badge:not([hidden])) { padding-right: 46px; }
/* placement: any other link (inline, after the label) */
.woc-badge--inline { position: relative; top: auto; right: auto; margin-left: 7px; vertical-align: 1px; }

/* idle: a slow, low-amplitude breath — present, never flashing */
@keyframes woc-badge-breathe {
  50% { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .9), 0 0 10px rgba(var(--nb-rgb), .9), 0 0 24px rgba(var(--nb-rgb), .5), inset 0 0 9px rgba(var(--nb-rgb), .55); }
}
.woc-badge.is-urgent { animation-duration: 2.8s; }

/* arrival: brightness spike + overshoot + one restrained flicker + expanding rings */
.woc-badge.is-arriving { animation: woc-badge-arrive .95s cubic-bezier(.2, .8, .2, 1) 1, woc-badge-breathe 5s ease-in-out .95s infinite; overflow: visible; }
.woc-badge.is-arriving::before, .woc-badge.is-arriving::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--nb); box-shadow: 0 0 12px rgba(var(--nb-rgb), .9);
  animation: woc-badge-ring .9s cubic-bezier(.1, .7, .3, 1) both;
}
.woc-badge.is-arriving::after { animation-delay: .16s; border-width: 1px; }
@keyframes woc-badge-arrive {
  0%   { transform: scale(1);    filter: brightness(1); }
  16%  { transform: scale(1.38); filter: brightness(2.1) saturate(1.3); box-shadow: 0 0 0 1.5px #000, 0 0 16px rgba(var(--nb-rgb), 1), 0 0 38px rgba(var(--nb-rgb), .8), inset 0 0 12px rgba(var(--nb-rgb), .9); }
  30%  { transform: scale(.92);  filter: brightness(1.3); }
  33%  { filter: brightness(.55); }
  36%  { filter: brightness(1.7); }
  52%  { transform: scale(1.07); filter: brightness(1.15); }
  100% { transform: scale(1);    filter: brightness(1); }
}
@keyframes woc-badge-ring {
  0%   { opacity: .95; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.3); }
}

/* count change: digits roll in the direction of change */
.woc-badge__num.is-up   { animation: woc-num-up .38s cubic-bezier(.2, .9, .3, 1.2); }
.woc-badge__num.is-down { animation: woc-num-down .38s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes woc-num-up   { from { transform: translateY(85%);  opacity: 0; filter: blur(2px); } }
@keyframes woc-num-down { from { transform: translateY(-85%); opacity: 0; filter: blur(2px); } }

/* legacy "(N)" text is kept in the DOM for accuracy, hidden visually; .woc-sr = screen-reader only */
.woc-notify-src, .woc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  /* no motion: colour, border and static glow still make the count obvious */
  .woc-badge, .woc-badge.is-arriving { animation: none !important; transition: opacity .01s; box-shadow: 0 0 0 1.5px #000, 0 0 10px rgba(var(--nb-rgb), .9), 0 0 22px rgba(var(--nb-rgb), .45), inset 0 0 8px rgba(var(--nb-rgb), .5); }
  .woc-badge.is-arriving::before, .woc-badge.is-arriving::after { display: none; }
}

/* ---------- 6. Layout: sidebar + main ---------- */
.woc-layout { display: flex; align-items: stretch; }
.woc-sidebar { flex: 0 0 196px; padding: 12px 10px; background: linear-gradient(180deg, rgba(14, 17, 30, .85), rgba(5, 6, 11, .6)); border-right: 1px solid var(--edge); }
.woc-main { flex: 1; min-width: 0; padding: 20px 24px 32px; }

.woc-profile { margin-bottom: 12px; padding: 10px; text-align: center; font-size: 12px; background: var(--panel); border: 1px solid var(--edge); clip-path: var(--chamfer); }
.woc-profile b { color: var(--text-dim); font-weight: 500; }
.woc-name { color: var(--cyan); font: 700 14px var(--f-display); text-shadow: var(--glow-cyan); }
.woc-money { color: var(--green); font-family: var(--f-mono); text-shadow: var(--glow-green); }
.woc-crystal, .woc-cipher { color: #7ff3ff; font-family: var(--f-mono); text-shadow: 0 0 10px rgba(25, 230, 255, .55); }
.woc-danger { color: var(--crimson); text-shadow: var(--glow-red); }

.woc-menu { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.woc-menu a {
  position: relative; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 8px 14px;
  font: 600 12px var(--f-display); letter-spacing: .05em; color: var(--chrome); text-decoration: none;
  background: linear-gradient(90deg, rgba(25, 32, 52, .8), rgba(9, 11, 20, .6)); border: 1px solid var(--edge); clip-path: var(--chamfer-sm);
  transition: padding .15s, color .15s, background .15s, border-color .15s;
}
.woc-menu a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cyan); box-shadow: var(--glow-cyan); opacity: .35; transition: opacity .15s; }
.woc-menu a:hover { padding-left: 20px; color: #fff; border-color: var(--cyan); background: linear-gradient(90deg, rgba(25, 70, 95, .8), rgba(9, 14, 28, .6)); }
.woc-menu a:hover::before, .woc-menu a[aria-current="page"]::before { opacity: 1; }
.woc-menu a.is-staff::before { background: var(--violet); box-shadow: var(--glow-violet); }
.woc-menu a.is-danger::before { background: var(--crimson); box-shadow: var(--glow-red); }
.woc-menu em { font: 500 11px var(--f-mono); font-style: normal; color: var(--text-dim); }

/* ---------- 7. Typography ---------- */
h1, h2, h3, h4 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 700; letter-spacing: .04em; color: #fff; text-shadow: 0 0 16px rgba(25, 230, 255, .25); }
h1 { font-size: 24px; } h2 { font-size: 19px; } h3 { font-size: 15px; color: var(--chrome); }
a { color: var(--cyan); text-decoration: none; transition: color .12s, text-shadow .12s; }
a:hover { color: #fff; text-shadow: var(--glow-cyan); }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
hr { border: 0; height: 1px; margin: 18px 0; background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent); opacity: .6; }
.woc-lede { padding: 10px 14px; margin: 0 0 18px; text-align: center; color: var(--chrome); background: linear-gradient(90deg, transparent, rgba(138, 61, 255, .2), transparent); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }

/* ---------- 8. Districts (home directory) ---------- */
.woc-directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.woc-district { padding: 0 0 8px; background: var(--panel); border: 1px solid var(--edge); clip-path: var(--chamfer); }
.woc-district h3 { margin: 0 0 6px; padding: 9px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--tone, var(--cyan));
  background: linear-gradient(90deg, rgba(25, 230, 255, .14), transparent); border-bottom: 1px solid var(--edge); text-shadow: 0 0 10px var(--tone, var(--cyan)); }
.woc-district[data-tone="green"] { --tone: var(--green); } .woc-district[data-tone="red"] { --tone: var(--crimson); }
.woc-district[data-tone="violet"] { --tone: var(--violet); } .woc-district[data-tone="gold"] { --tone: var(--gold); }
.woc-district h3 { background: linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--cyan)) 18%, transparent), transparent); }
.woc-district a { display: block; padding: 3px 14px; color: var(--text); transition: padding .12s, color .12s; }
.woc-district a::before { content: '\203A'; margin-right: 6px; color: var(--tone, var(--cyan)); opacity: 0; transition: opacity .12s; }
.woc-district a:hover { padding-left: 20px; color: #fff; }
.woc-district a:hover::before { opacity: 1; }

/* ---------- 9. Tables, panels, dividers ---------- */
table { border-collapse: collapse; color: var(--text); }
.woc-panel { margin-bottom: 14px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--edge); border-top: 2px solid var(--cyan); clip-path: var(--chamfer); }
.woc-table { width: 100%; background: var(--panel); border: 1px solid var(--edge); }
.woc-table th { padding: 8px 10px; text-align: left; font: 600 11px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); background: rgba(25, 230, 255, .07); border-bottom: 1px solid var(--cyan); }
.woc-table td { padding: 7px 10px; border-bottom: 1px solid #151a28; }
.woc-table tbody tr:hover td { background: rgba(138, 61, 255, .14); }
.woc-divider { margin: 16px -24px; padding: 8px 24px; text-align: center; font: 600 12px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
  background: linear-gradient(90deg, transparent, rgba(25, 230, 255, .14), transparent); border-top: 1px solid var(--edge); border-bottom: 1px solid #000; }

/* ---------- 10. Forms ---------- */
input[type=text], input[type=password], input[type=number], input[type=email], input:not([type]), select, textarea {
  font: 13px var(--f-mono); color: var(--cyan); padding: 6px 9px; background: #03040a;
  border: 1px solid #1f2740; border-bottom-color: rgba(25, 230, 255, .55); border-radius: 0; box-shadow: inset 0 2px 8px rgba(0,0,0,.9);
  transition: border-color .15s, box-shadow .15s;
}
textarea, select, input { max-width: 100%; box-sizing: border-box; } /* legacy cols="50" notepad can't push phones sideways */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: inset 0 2px 8px rgba(0,0,0,.9), var(--glow-cyan); }
select option { background: var(--panel-solid); color: var(--text); }
input[type=checkbox], input[type=radio] { accent-color: var(--cyan); }
label { color: var(--text-dim); }

/* ---------- 11. Buttons ---------- */
button, input[type=submit], input[type=button], .woc-btn {
  --b: var(--cyan);
  position: relative; cursor: pointer; padding: 10px 22px; color: var(--b);
  font: 700 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b) 22%, #05060b), color-mix(in srgb, var(--b) 6%, #05060b));
  border: 1px solid var(--b); clip-path: var(--chamfer-sm); box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  text-shadow: 0 0 8px var(--b); transition: color .14s, background .14s, filter .14s, transform .1s;
}
button:hover, input[type=submit]:hover, input[type=button]:hover, .woc-btn:hover { color: #05060b; background: var(--b); text-shadow: none; filter: drop-shadow(0 0 10px var(--b)); }
button:active, input[type=submit]:active, .woc-btn:active { transform: scale(.96); filter: brightness(1.4) drop-shadow(0 0 16px var(--b)); }
button:focus-visible, input[type=submit]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.woc-btn--money { --b: var(--green); } .woc-btn--danger { --b: var(--crimson); } .woc-btn--violet { --b: var(--violet); } .woc-btn--gold { --b: var(--gold); }
button:disabled, .woc-btn[disabled] { filter: grayscale(1) brightness(.5); cursor: not-allowed; }

/* ---------- 12. Terminal + crime feed ---------- */
.woc-terminal { position: relative; margin: 0 0 14px; padding: 12px 14px; overflow: hidden; font: 13px/1.6 var(--f-mono); color: var(--green);
  background: #03060a; border: 1px solid rgba(57, 255, 136, .4); box-shadow: inset 0 0 30px rgba(0,0,0,.9), 0 0 18px rgba(57, 255, 136, .1); text-shadow: 0 0 6px rgba(57, 255, 136, .5); }
.woc-terminal::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
.woc-terminal__prompt::before { content: '$ '; color: var(--cyan); }
.woc-terminal__cursor::after { content: '\2588'; margin-left: 3px; animation: woc-blink 1s steps(1) infinite; }
@keyframes woc-blink { 50% { opacity: 0; } }
.woc-feed { margin: 0 0 14px; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; font: 12.5px/1.45 var(--f-mono); background: #04050b; border: 1px solid var(--edge); }
.woc-feed li { display: flex; gap: 10px; padding: 7px 12px; border-bottom: 1px solid #111626; border-left: 3px solid transparent; }
.woc-feed li:hover { background: rgba(25, 230, 255, .05); }
.woc-feed time { flex: none; color: var(--text-dim); }
.woc-feed .win { border-left-color: var(--green); } .woc-feed .win span { color: var(--green); }
.woc-feed .fail { border-left-color: var(--violet); } .woc-feed .fail span { color: #b78cff; }
.woc-feed .alert { border-left-color: var(--crimson); background: rgba(255, 42, 77, .1); animation: woc-alert 2s ease-in-out infinite; } .woc-feed .alert span { color: var(--crimson); text-shadow: var(--glow-red); }
@keyframes woc-alert { 50% { background: rgba(255, 42, 77, .22); } }
.woc-alert { padding: 10px 14px; margin: 0 0 12px; color: #ffd0d8; background: linear-gradient(90deg, rgba(255, 42, 77, .3), rgba(255, 42, 77, .05)); border: 1px solid var(--crimson); border-left-width: 4px; box-shadow: var(--glow-red); }

/* ---------- 13. Scrollbars + selection ---------- */
::selection { background: var(--violet); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--cyan) #05060b; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #05060b; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--cyan), var(--violet)); }


/* ---------- 14b. Cipher currency (woc-cipher.js builds the markup; never hand-write balances) ----------
   <span class="woc-cipher-amount">
     <span class="woc-cipher-icon woc-cipher-icon--sm" role="img" aria-label="Cipher">
       <span class="woc-cipher-icon__ring"></span>
       <span class="woc-cipher-icon__coin"><picture>…</picture><span class="woc-cipher-icon__shine"></span></span>
     </span>
     <span class="woc-cipher">160</span>
   </span>
   Motion = a flat image faked into depth: a restrained rotateY sway (±24°, never edge-on, so the C
   is never mirrored or unreadable) + a conic energy ring spinning behind it + a light sweep clipped
   to the emblem's own silhouette. Transform/opacity only, so it stays on the compositor. */
.woc-cipher-icon {
  --s: 22px; --spin: 7s; --sway: 6s;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--s); height: var(--s); vertical-align: -.32em; margin-right: .3em;
  perspective: calc(var(--s) * 6); isolation: isolate;
}
.woc-cipher-icon--sm { --s: 22px; margin-block: -6px; }  /* sidebar, inline balances (negative margin: never grows the row) */
.woc-cipher-icon--xs { --s: 18px; margin-block: -4px; }  /* dense tables, buttons */
.woc-cipher-icon--md { --s: 44px; vertical-align: middle; }   /* shop + reward cards */
.woc-cipher-icon--lg { --s: 88px; vertical-align: middle; --spin: 9s; --sway: 8s; } /* store hero / big balance */
.woc-cipher-icon__coin {
  position: relative; grid-area: 1 / 1; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: woc-cipher-sway var(--sway) ease-in-out infinite; will-change: transform;
  filter: drop-shadow(0 0 calc(var(--s) * .08) rgba(25, 230, 255, .75));
}
.woc-cipher-icon__coin img { display: block; width: 100%; height: 100%; }
.woc-cipher-icon__shine {          /* metallic sweep, masked to the emblem silhouette */
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(220, 250, 255, .75) 48%, rgba(25, 230, 255, .35) 53%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: url('../images/woc-cipher-96.webp') center / contain no-repeat; mask: url('../images/woc-cipher-96.webp') center / contain no-repeat;
  animation: woc-cipher-shine 5.5s ease-in-out infinite;
}
.woc-cipher-icon__ring {           /* rotating energy halo behind the coin */
  grid-area: 1 / 1; width: 128%; height: 128%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(25, 230, 255, .95) 16%, transparent 30%, transparent 52%, rgba(138, 61, 255, .7) 62%, transparent 76%);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 80%, #000 92%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 72%, #000 80%, #000 92%, transparent 100%);
  opacity: .8; animation: woc-cipher-spin var(--spin) linear infinite;
}
.woc-cipher-icon--sm .woc-cipher-icon__ring, .woc-cipher-icon--xs .woc-cipher-icon__ring { width: 136%; height: 136%; opacity: .4; }
.woc-cipher-icon--sm .woc-cipher-icon__coin, .woc-cipher-icon--xs .woc-cipher-icon__coin { --tilt: 16deg; filter: drop-shadow(0 0 2px rgba(25, 230, 255, .9)) brightness(1.15) contrast(1.1); }
@keyframes woc-cipher-sway {
  0%, 100% { transform: rotateY(calc(var(--tilt, 24deg) * -1)) rotateX(4deg) translateY(0); }
  50%      { transform: rotateY(var(--tilt, 24deg)) rotateX(-4deg) translateY(calc(var(--s) * -.04)); }
}
@keyframes woc-cipher-spin  { to { transform: rotate(360deg); } }
@keyframes woc-cipher-shine { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
.woc-cipher-icon:hover .woc-cipher-icon__coin { animation-duration: 2.4s; }

/* balance wrapper + earned/spent feedback */
.woc-cipher-amount { position: relative; display: inline; white-space: nowrap; }
.woc-cipher-amount .woc-cipher { transition: color .3s, text-shadow .3s; }
.woc-cipher-amount.is-earned .woc-cipher { animation: woc-cipher-earn 1.2s ease-out; }
.woc-cipher-amount.is-earned .woc-cipher-icon::after {
  content: ''; position: absolute; inset: -10%; border-radius: 50%; border: 2px solid #19e6ff; pointer-events: none;
  box-shadow: 0 0 12px #19e6ff, inset 0 0 8px #19e6ff; animation: woc-cipher-burst .9s cubic-bezier(.1, .7, .3, 1) both;
}
.woc-cipher-amount.is-earned .woc-cipher-icon__coin { animation: woc-cipher-flip .9s cubic-bezier(.2, .8, .2, 1), woc-cipher-sway var(--sway) ease-in-out .9s infinite; }
.woc-cipher-amount.is-spent .woc-cipher { animation: woc-cipher-spend 1.1s ease-out; }
.woc-cipher-amount.is-spent .woc-cipher-icon__coin { opacity: .75; transition: opacity .6s; }
@keyframes woc-cipher-earn  { 15% { color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px #19e6ff, 0 0 32px #19e6ff; } }
@keyframes woc-cipher-spend { 20% { color: #c9b6ff; text-shadow: 0 0 10px rgba(138, 61, 255, .8); } }
@keyframes woc-cipher-burst { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(2.2); } }
@keyframes woc-cipher-flip  { from { transform: rotateY(0) scale(1.25); } to { transform: rotateY(360deg) scale(1); } }
.woc-cipher-delta {
  position: absolute; left: 100%; top: -2px; margin-left: 4px; pointer-events: none;
  font: 700 11px/1 var(--f-mono); animation: woc-cipher-float 1.25s ease-out forwards;
}
.woc-cipher-delta.is-up   { color: #7ff3ff; text-shadow: 0 0 8px #19e6ff; }
.woc-cipher-delta.is-down { color: #b98aff; text-shadow: 0 0 8px rgba(138, 61, 255, .8); }
@keyframes woc-cipher-float { 0% { opacity: 0; transform: translateY(4px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* store / reward helpers */
.woc-cipher-card { display: grid; justify-items: center; gap: 8px; padding: 16px; text-align: center; background: var(--panel); border: 1px solid rgba(25, 230, 255, .35); border-top: 2px solid var(--cyan); clip-path: var(--chamfer); }
.woc-cipher-card .woc-cipher { font-size: 20px; font-weight: 500; }
.woc-btn .woc-cipher-icon { --s: 18px; margin: -4px .35em -4px 0; }
.woc-store { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.woc-cipher-card--hero { align-content: center; background: radial-gradient(closest-side, rgba(25, 230, 255, .14), transparent), var(--panel); }
.woc-cipher-card--hero .woc-cipher { font-size: 26px; }
.woc-cipher-card small { color: var(--text-dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 700px) { .woc-store { grid-template-columns: 1fr 1fr; } .woc-cipher-card--hero { grid-column: 1 / -1; } }

/* ---------- 14c. VIP donator badge ---------- */
.woc-vip-badge { display: inline-block; line-height: 0; vertical-align: middle; margin: 0 .15em; }
.woc-vip-badge picture { display: contents; }
img.woc-vip {
  width: 18px; height: 18px; /* 1em-ish beside 12–14px names; set --vip-size to override */
  width: var(--vip-size, 18px); height: var(--vip-size, 18px); object-fit: contain;
  vertical-align: middle; margin-top: -3px; margin-bottom: -3px; /* never grows the line box */
  filter: drop-shadow(0 0 2px rgba(224, 184, 74, .55)) drop-shadow(0 0 3px rgba(25, 230, 255, .35));
  transition: filter .25s, transform .25s;
}
a:hover img.woc-vip, img.woc-vip:hover, .woc-vip-badge:hover img.woc-vip {
  transform: scale(1.12);
  filter: drop-shadow(0 0 3px rgba(255, 220, 120, .95)) drop-shadow(0 0 7px rgba(25, 230, 255, .8)) brightness(1.15);
}
/* legacy server image, restyled before the script swaps it so the old square never shows */
img[src*="donator."]:not(.woc-vip) { content: url('../images/woc-vip-40.png'); width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-top: -3px; margin-bottom: -3px; }

/* ---------- 14. Responsive + motion ---------- */
@media (max-width: 860px) {
  .woc-hud { grid-template-columns: repeat(2, 1fr); }
  .woc-nav { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 700px) {
  body { background-attachment: scroll; }
  .woc-layout { flex-direction: column; }
  .woc-sidebar { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--edge); }
  .woc-menu { grid-template-columns: 1fr 1fr; }
  .woc-main { padding: 16px; } .woc-divider { margin-inline: -16px; }
  .woc-nav a[data-tip]:hover::before { display: none; }
  .woc-brand { max-width: 220px; margin-inline: auto; }
}
@media (max-width: 420px) { .woc-hud { grid-template-columns: 1fr; } .woc-nav { grid-template-columns: repeat(4, 1fr); } .woc-menu { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; }
  .woc-cipher-icon__coin { transform: none; } .woc-cipher-delta { display: none; }
  .woc-cipher-amount.is-earned .woc-cipher { color: #fff; text-shadow: 0 0 10px #19e6ff; } .woc-cipher-amount.is-spent .woc-cipher { color: #c9b6ff; } }

/* ---------- Performance: smoother site, much lighter on the PC ----------
   The two page-wide rain sheets used to animate background-position (the whole screen is repainted every frame, all the time, on every page),
   and the game column blurred whatever moved behind it (backdrop-filter), which the browser had to redo every frame as well.
   Now the sheets slide with transform (graphics card, no repaint), the blur is off (the column is ~92% opaque anyway) and the faint
   light sweep is a still image. Same look, a fraction of the work. */
body::before, body::after {
  inset: -410px 0 0 0; will-change: transform; contain: strict;
}
body::before { animation: woc-rain-t 1.1s linear infinite; }
body::after {
  background: repeating-linear-gradient(106deg, rgba(190, 150, 255, .07) 0 1px, transparent 1px 41px);
  background-size: 410px 410px; animation: woc-rain-t2 2.7s linear infinite;
}
/* the move is exactly one tile, so the loop restarts invisibly (the old one jumped sideways 80px every cycle = the flicker) */
@keyframes woc-rain-t { to { transform: translate3d(0, 260px, 0); } }
@keyframes woc-rain-t2 { to { transform: translate3d(0, 410px, 0); } }
.woc-shell { -webkit-backdrop-filter: none; backdrop-filter: none; }
.woc-hero::after { animation: none; mix-blend-mode: normal; }
.woc-fx--sweep { animation: none; }
/* Firefox redraws these glow/blend animations on the CPU every frame: still glows there, no movement */
@supports (-moz-appearance: none) {
  .woc-fx, .woc-fx--logo, .woc-fx--btc, .woc-fx--sign, .woc-fx--moon, .woc-fx--heli, .woc-fx--visor { animation: none !important; mix-blend-mode: normal; }
  .woc-bar > i, .woc-bar--heat > i { animation: none !important; }
  .woc-brand img { animation: none !important; }
}
/* nothing animates while the tab is not being looked at */
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none !important; } }

/* The city picture behind the game (neon signs, coloured dots, cars) is removed on purpose: the background is the dark colour with the rain over it. */
body { background: none; }

/* ---------- Footer: tidy, with the neon edge carried along the bottom ---------- */
.woc-footer { position: relative; padding: 16px 12px 20px; border-top: 1px solid rgba(25, 230, 255, .18); background: linear-gradient(180deg, rgba(25, 230, 255, 0), rgba(138, 61, 255, .07)); letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }
.woc-footer::after { content: ''; position: absolute; left: -1px; right: -1px; bottom: -2px; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--violet), var(--cyan) 50%, var(--violet)); box-shadow: 0 0 10px rgba(25, 230, 255, .75), 0 0 28px rgba(138, 61, 255, .55), 0 6px 40px rgba(25, 230, 255, .25); }

/* ---------- The frame around the whole game: black-market armour plating (thin, with running lights) ----------
   Thin gunmetal rails with a gold inner line and a blue neon glow, a blue light and a bright spark running along them, gold corner bolts,
   and a navy bar top and bottom with a bright blue glint sweeping along it. All of it sits OUTSIDE the game column
   (the column keeps its width) and none of it can make the page wider. The glints only move the thin frame pieces, never the page. */
@property --fr-p { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
body:not(.woc-landing) .woc-shell {
  --fr-w: 9px;                        /* rail thickness */
  --fr-gold: rgba(224, 184, 74, .7);
  border-left: 0; border-right: 0;
  border-top: 3px solid; border-image: linear-gradient(90deg, #0a2a66 0, #0a2a66 calc(var(--fr-p) - 22%), #6fe3ff var(--fr-p), #0a2a66 calc(var(--fr-p) + 22%), #0a2a66 100%) 1;
  box-shadow: 0 0 0 1px #000, 0 0 34px rgba(25, 150, 255, .34), 0 0 110px rgba(47, 107, 255, .22), 0 18px 60px rgba(0, 0, 0, .65);
  animation: woc-frame-glint 7s ease-in-out infinite;
}
body:not(.woc-landing) .woc-shell::before, body:not(.woc-landing) .woc-shell::after {
  content: ''; position: absolute; top: -3px; bottom: -3px; width: var(--fr-w); pointer-events: none; z-index: 3; opacity: 1;
  background:
    radial-gradient(circle at 50% 8px, #2b2008 0 1.3px, #ffe9a6 1.9px, transparent 2.4px) 0 0 / 100% 100% no-repeat,                       /* bolt on the top cap */
    radial-gradient(circle at 50% calc(100% - 8px), #2b2008 0 1.3px, #ffe9a6 1.9px, transparent 2.4px) 0 0 / 100% 100% no-repeat,          /* bolt on the bottom cap */
    linear-gradient(180deg, #f6dc8a, #b58a22 60%, #5a430d) 0 0 / 100% 16px no-repeat,                                                     /* gold cap, top */
    linear-gradient(0deg, #f6dc8a, #b58a22 60%, #5a430d) 0 100% / 100% 16px no-repeat,                                                    /* gold cap, bottom */
    linear-gradient(180deg, transparent 0, rgba(190, 240, 255, 0) 40%, #e6fbff 50%, rgba(190, 240, 255, 0) 60%, transparent 100%) 50% 0 / 2px 140px repeat-y, /* white-blue spark */
    linear-gradient(180deg, transparent 0, rgba(25, 150, 255, 0) 25%, #2fa8ff 50%, rgba(25, 150, 255, 0) 75%, transparent 100%) 50% 0 / 4px 420px repeat-y,    /* blue running light */
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 4px),                                                /* brushed lines */
    linear-gradient(90deg, #04050a 0, #232c40 35%, #34405e 50%, #1a2030 78%, #05060b 100%);                                                /* gunmetal */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .85), 0 0 12px rgba(40, 170, 255, .6), 0 0 28px rgba(47, 107, 255, .32);
  animation: woc-frame-run 5s linear infinite;
}
body:not(.woc-landing) .woc-shell::before { left: calc(-1 * var(--fr-w)); border-right: 1px solid var(--fr-gold); }
body:not(.woc-landing) .woc-shell::after  { right: calc(-1 * var(--fr-w)); border-left: 1px solid var(--fr-gold); animation-delay: -2.5s; }
/* the lights run DOWN the left rail and UP the right one, so the frame feels like it is circling the game */
@keyframes woc-frame-run { to { background-position: 0 0, 0 0, 0 0, 0 100%, 50% 140px, 50% 420px, 0 0, 0 0; } }
body:not(.woc-landing) .woc-shell::after { animation-direction: reverse; }
@keyframes woc-frame-glint { 0% { --fr-p: -25%; } 100% { --fr-p: 125%; } }
body:not(.woc-landing) .woc-footer { border-top: 1px solid rgba(224, 184, 74, .28); background: linear-gradient(180deg, rgba(25, 150, 255, 0), rgba(25, 150, 255, .07)); }
body:not(.woc-landing) .woc-footer::after {
  left: calc(-1 * var(--fr-w, 9px)); right: calc(-1 * var(--fr-w, 9px)); bottom: -3px; height: 3px;
  background: linear-gradient(90deg, #0a2a66 0, #0a2a66 calc(var(--fr-p) - 22%), #6fe3ff var(--fr-p), #0a2a66 calc(var(--fr-p) + 22%), #0a2a66 100%);
  box-shadow: 0 0 0 1px #000, 0 0 14px rgba(40, 170, 255, .65), 0 6px 34px rgba(47, 107, 255, .4);
  animation: woc-frame-glint 7s ease-in-out infinite reverse;
}
@media (max-width: 1250px) { /* no room outside the column: the rails shrink and sit just inside each edge */
  body:not(.woc-landing) .woc-shell { --fr-w: 3px; }
  body:not(.woc-landing) .woc-shell::before { left: 0; } body:not(.woc-landing) .woc-shell::after { right: 0; }
  body:not(.woc-landing) .woc-footer::after { left: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.woc-landing) .woc-shell, body:not(.woc-landing) .woc-footer::after, body:not(.woc-landing) .woc-shell::before, body:not(.woc-landing) .woc-shell::after { animation: none; }
}