/* ==========================================================================
   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; } }

/* Firefox jitters when scrolling a page whose body has a fixed (background-attachment: fixed) picture. Same picture, held on its own fixed layer instead. */
body { background: none; }
html::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('../images/woc-bg-city.svg') center bottom / cover no-repeat;
}

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