/* =========================================================================
   Capa visual cyberpunk industrial (Midgar / Blade Runner / GITS / Akira).
   Sin neones, sin LEDs y sin brillos: metal mate, óxido, hormigón y tipografía
   técnica. Se carga después de styles.css y solo actúa bajo body.cyber.
   ========================================================================= */

body.cyber {
  --bg: #070a0b;
  --bg-deep: #040607;
  --panel: rgba(15, 20, 21, 0.95);
  --panel-solid: #101516;
  --panel-soft: rgba(27, 34, 34, 0.82);
  --ink: #d9d2c2;
  --ink-soft: #b9b2a3;
  --muted: #8b938f;
  --muted-2: #626b69;
  --gold: #b9763d;
  --gold-bright: #d79a5b;
  --gold-dim: #7b5234;
  --line: rgba(185, 118, 61, 0.3);
  --line-soft: rgba(218, 212, 198, 0.09);
  --danger: #b6503b;
  --green: #7e9d88;
  --violet: #8c8199;
  --board-light: #948c79;
  --board-dark: #505b59;
  --board-line: rgba(7, 11, 12, 0.5);
  --frame-1: #2a3032;
  --frame-2: #151a1c;
  --frame-3: #080b0c;
  --frame-edge: #8d5c3a;
  --radius: 2px;
  --shadow: 6px 6px 0 rgba(0, 0, 0, 0.28);
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

body.cyber {
  background:
    linear-gradient(180deg, rgba(7, 10, 11, 0.35), rgba(4, 6, 7, 0.88)),
    repeating-linear-gradient(90deg, rgba(190, 190, 170, 0.028) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(190, 190, 170, 0.022) 0 1px, transparent 1px 96px),
    radial-gradient(900px 560px at 50% -10%, rgba(126, 74, 35, 0.22), transparent 62%),
    radial-gradient(760px 540px at 100% 100%, rgba(44, 73, 69, 0.16), transparent 65%),
    #070a0b;
}
body.cyber::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(104deg, transparent 0 23px, rgba(206, 214, 202, 0.035) 23px 24px, transparent 24px 61px);
}

/* --------------------------------------------------------------- tipografía */
body.cyber .brand-title,
body.cyber .modal-title,
body.cyber .card-title,
body.cyber .turn-side,
body.cyber .rules-section h3,
body.cyber .gameover-panel .modal-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}
body.cyber .brand-title { font-size: clamp(20px, 2.05vw, 27px); line-height: 1.05; white-space: normal; text-shadow: none; }
body.cyber .brand-kicker,
body.cyber .card-eyebrow,
body.cyber .modal-eyebrow,
body.cyber .badge,
body.cyber .turn-banner-main,
body.cyber .turn-banner-sub,
body.cyber .player-state,
body.cyber .btn,
body.cyber .action-btn,
body.cyber .move-num,
body.cyber .move-san,
body.cyber .board-status,
body.cyber .coord,
body.cyber .piece-badge,
body.cyber .setting-name,
body.cyber .setting-help,
body.cyber .seg button,
body.cyber .theme-picker button,
body.cyber .rules-nav a,
body.cyber .footer {
  font-family: var(--font-mono);
}
body.cyber .brand-kicker { font-size: 8.5px; letter-spacing: 0.19em; color: var(--muted); }
body.cyber .card-eyebrow { font-size: 8px; letter-spacing: 0.18em; color: var(--gold); }
body.cyber .card-eyebrow::before { content: "// "; color: var(--gold-dim); }
body.cyber .card-title { font-size: 15px; line-height: 1.25; margin: 5px 0 8px; color: var(--ink); }
body.cyber .modal-eyebrow { letter-spacing: 0.18em; }
body.cyber .modal-title { font-size: clamp(25px, 3.4vw, 34px); line-height: 1.02; }
body.cyber .modal-lead { color: var(--muted); }
body.cyber .rules-section h3 { font-size: 18px; letter-spacing: 0.04em; color: var(--gold-bright); }
body.cyber .gameover-panel .modal-title { font-size: clamp(24px, 4vw, 34px); }

/* ------------------------------------------------------------------ topbar */
body.cyber .topbar {
  border-bottom: 1px solid #333b39;
  padding-bottom: 14px;
}
body.cyber .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 9px, transparent 9px 18px);
  opacity: 0.45;
}
body.cyber .brand { gap: 12px; }
body.cyber .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 1px;
  color: var(--gold-bright);
  background: #0e1314;
  border: 1px solid #4b5451;
  box-shadow: inset 0 0 0 1px #000;
}
body.cyber .brand-mark svg { width: 32px; height: 32px; }
body.cyber .brand-mark::after { display: none; }

/* ----------------------------------------------------------------- botones */
body.cyber .btn {
  border-radius: 2px;
  border-color: #3b4340;
  background: #121819;
  color: var(--ink-soft);
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  font-weight: 700;
  padding: 9px 13px;
}
body.cyber .btn:hover { background: #1b2222; border-color: var(--gold); color: var(--ink); }
body.cyber .btn:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 2px; }
body.cyber .btn-ghost { border-color: #3b4340; background: transparent; }
body.cyber .btn-gold {
  color: #0b0e0d;
  background: var(--gold);
  border-color: var(--gold-bright);
  box-shadow: none;
}
body.cyber .btn-gold:hover { background: var(--gold-bright); color: #080b0a; }
body.cyber .btn-danger { color: #e0b0a3; border-color: rgba(182, 80, 59, 0.55); background: rgba(182, 80, 59, 0.1); }
body.cyber .btn-icon { border-radius: 2px; width: 38px; height: 38px; }
body.cyber .lang-btn {
  min-width: 38px;
  padding: 9px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
body.cyber .ico { width: 17px; height: 17px; }

/* ------------------------------------------------------------- jugadores */
body.cyber .player-bar {
  border-radius: 2px;
  border-color: #353d3b;
  background: #101516;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
  padding: 7px 11px;
}
body.cyber .player-bar.is-active {
  border-color: var(--gold);
  background: #171d1c;
  box-shadow: inset 4px 0 0 var(--gold), 3px 3px 0 rgba(0, 0, 0, 0.22);
}
body.cyber .player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 1px;
  border-color: #4b5451;
  background: #0a0e0f;
}
body.cyber .player-avatar--black {
  background: radial-gradient(circle at 35% 25%, #2a3230, #141a19);
}
body.cyber .player-avatar .avatar-art { width: 32px; height: 32px; }
body.cyber .player-name { font-size: 13px; letter-spacing: 0.04em; }
body.cyber .player-state { font-size: 9px; letter-spacing: 0.11em; color: var(--muted-2); }
body.cyber .state-dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: #46504d;
  box-shadow: none;
}
body.cyber .player-bar.is-active .state-dot { background: var(--gold); box-shadow: none; }
body.cyber .player-bar.is-active .player-state { color: var(--gold-bright); }
body.cyber .cap-piece.piece-white { --fill: #fbf7ec; --stroke: #6b6458; --accent: #6b6458; }
body.cyber .cap-piece.piece-black { --fill: #07090a; --stroke: #5a5f5b; --accent: #5a5f5b; }

/* --------------------------------------------------------------- turno */
body.cyber .turn-banner {
  border-radius: 2px;
  border: 1px solid #3a4240;
  border-left: 5px solid var(--gold);
  background: #111718;
  box-shadow: none;
  padding: 8px 12px;
}
body.cyber .turn-banner-orb {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--gold);
  border: 1px solid #0a0d0d;
  box-shadow: none;
}
body.cyber .turn-banner.is-black .turn-banner-orb { background: #c5bda9; border-color: #211b13; box-shadow: none; }
body.cyber .turn-banner-main { font-size: 11px; letter-spacing: 0.13em; color: var(--ink); }
body.cyber .turn-banner-sub { font-size: 9px; letter-spacing: 0.06em; color: var(--muted); }
body.cyber .turn-banner.is-your-turn {
  border-left-color: var(--green);
  background: linear-gradient(90deg, rgba(71, 107, 86, 0.28), #111718 45%);
}
body.cyber .turn-banner.is-your-turn .turn-banner-main { color: #b9d6c2; }
body.cyber .turn-banner.is-your-turn .turn-banner-sub { color: #8fae9a; }
body.cyber .turn-banner.is-check {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, rgba(135, 48, 36, 0.3), #111718 45%);
}
body.cyber .turn-banner.is-check .turn-banner-main { color: #e2b3a5; }
body.cyber .turn-banner.is-check .turn-banner-orb { background: var(--danger); }
body.cyber .turn-banner.is-thinking .turn-banner-orb { animation: none; background: transparent; border: 2px solid var(--gold); }
body.cyber .turn-banner.is-over { border-color: var(--gold-dim); }
body.cyber .turn-banner.is-over .turn-banner-main { color: var(--gold-bright); }
body.cyber .turn-banner.turn-flash { animation: cyberFlash 480ms steps(2); }
@keyframes cyberFlash {
  0% { background: #232a28; }
  100% { background: #111718; }
}

/* ----------------------------------------------------------------- tablero */
body.cyber .board-frame {
  border-radius: 2px;
  border: 1px solid #4b5451;
  background:
    repeating-linear-gradient(115deg, rgba(196, 185, 160, 0.035) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #2b3133, #141a1c 66%, #0a0d0e);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px #000;
}
body.cyber .board-frame::before {
  inset: 3px;
  border-radius: 0;
  border-color: rgba(185, 118, 61, 0.26);
}
body.cyber .board-frame::after {
  inset: 6px;
  border-radius: 0;
  border-color: rgba(0, 0, 0, 0.55);
}
body.cyber .board {
  border-radius: 0;
  border-color: #050707;
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.5), 0 0 0 2px #000;
}
body.cyber .square { box-shadow: inset 0 0 0 0.5px rgba(5, 8, 9, 0.5); }
body.cyber .square.light { background: #948c79; }
body.cyber .square.dark { background: #505b59; }
body.cyber .square.light::after,
body.cyber .square.dark::after { display: none; }
body.cyber .square .coord {
  font-family: var(--font-mono);
  font-size: calc(var(--sq) * 0.13);
  color: rgba(228, 219, 199, 0.4);
  letter-spacing: 0;
  font-weight: 600;
}
body.cyber .citadel {
  border-radius: 1px;
  color: #d8b184;
  background:
    repeating-linear-gradient(135deg, rgba(185, 118, 61, 0.13) 0 4px, transparent 4px 10px),
    linear-gradient(180deg, #29302f, #111617);
  border: 1px solid #665747;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 16px rgba(0, 0, 0, 0.45);
}
body.cyber .citadel::before { border-radius: 0; border-color: rgba(196, 160, 120, 0.3); }
body.cyber .citadel span { font-family: var(--font-mono); letter-spacing: 0.12em; color: #a99680; }
body.cyber .citadel.can-move {
  color: var(--gold-bright);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px #000;
  animation: none;
}
body.cyber .citadel.is-hint { box-shadow: inset 0 0 0 2px var(--green); }

/* Las piezas raster conservan su dibujo interior; solo se separan del metal
   con una sombra corta. */
body.cyber .piece-wrap { inset: 2.5%; }
body.cyber .piece {
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.58));
}
body.cyber .piece-wrap::before { display: none; }

/* Placas de identificación: grandes, rectangulares y con contraste real. */
body.cyber .piece-badge {
  min-width: max(13px, calc(var(--sq) * 0.19));
  height: max(12px, calc(var(--sq) * 0.18));
  padding: 0 2px;
  border-radius: 1px;
  border: 1px solid #7d6a50;
  background: #0b1011;
  color: #f1e7d2;
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(7px, calc(var(--sq) * 0.14), 12px);
  line-height: 1;
  letter-spacing: 0;
}
body.cyber .piece-white .piece-badge {
  background: #0b1011;
  color: #f1e7d2;
  border-color: #85745b;
}
body.cyber .piece-black .piece-badge {
  background: #e3dac7;
  color: #090c0c;
  border-color: #f4ead6;
}

body.cyber #playerBlack.is-active {
  border-color: #7d8a85;
  box-shadow: inset 4px 0 0 #d2cab8, 3px 3px 0 rgba(0, 0, 0, 0.22);
}
body.cyber #playerBlack.is-active .state-dot { background: #d2cab8; }
body.cyber #playerBlack.is-active .player-state { color: #d2cab8; }

/* Selección y ayudas: marcas de HUD, sin halos. */
body.cyber .square.is-selectable:hover { box-shadow: inset 0 0 0 1px rgba(185, 118, 61, 0.7); }
body.cyber .square.is-selected,
body.cyber .square.is-selected:hover {
  box-shadow: inset 0 0 0 2px var(--gold);
  outline: 1px solid #0a0d0d;
  outline-offset: -3px;
}
body.cyber .square.is-selected::before {
  background: rgba(185, 118, 61, 0.09);
}
body.cyber .square.is-last { box-shadow: inset 0 0 0 1px rgba(210, 202, 184, 0.5); }
body.cyber .square.is-last::before { background: rgba(210, 202, 184, 0.08); }
body.cyber .square.is-selected.has-black,
body.cyber .square.is-selected:has(.piece-black) { box-shadow: inset 0 0 0 2px #d2cab8; }
body.cyber .square.is-selected.has-black::before,
body.cyber .square.is-selected:has(.piece-black)::before { background: rgba(210, 202, 184, 0.08); }
body.cyber .square.is-check {
  background: rgba(124, 48, 36, 0.38);
  box-shadow: inset 0 0 0 2px var(--danger);
  animation: none;
}
body.cyber .square.is-premove-from,
body.cyber .square.is-premove-to {
  outline: 2px dashed rgba(126, 157, 136, 0.95);
  outline-offset: -4px;
  z-index: 5;
}
body.cyber .square.is-premove-from { box-shadow: inset 0 0 0 1px rgba(126, 157, 136, 0.45); }
body.cyber .square.is-premove-to {
  background-color: rgba(126, 157, 136, 0.16);
  box-shadow: inset 0 0 0 1px rgba(126, 157, 136, 0.45);
}
body.cyber .square.is-premove-option::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 18%;
  transform: translate(-50%, -50%);
  background: #7e9d88;
  border: 1px solid #0b100e;
  z-index: 1;
  pointer-events: none;
}
body.cyber .square.is-premove-capture::before {
  width: auto;
  height: auto;
  inset: 8%;
  transform: none;
  background: rgba(126, 157, 136, 0.12);
  border: 2px solid #7e9d88;
}
body.cyber .square.is-checker {
  box-shadow: inset 0 0 0 2px #c65a43;
  z-index: 4;
}
body.cyber .square.is-checker::after {
  content: "";
  display: block;
  position: absolute;
  top: 6%;
  right: 6%;
  width: 11%;
  height: 11%;
  transform: rotate(45deg);
  background: #c65a43;
  border: 1px solid #2b0e09;
  z-index: 6;
  pointer-events: none;
}
body.cyber .square.is-check .piece { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)); }
body.cyber .square.can-move::before {
  border-radius: 0;
  width: 18%;
  height: 18%;
  background: var(--gold);
  border: 1px solid #0b0e0d;
  box-shadow: none;
}
body.cyber .square.can-move:hover::before { background: var(--gold-bright); }
body.cyber .square.can-capture::before {
  border-radius: 0;
  inset: 8%;
  border: 2px solid var(--danger);
  background: rgba(182, 80, 59, 0.06);
  box-shadow: none;
}
body.cyber .square.can-capture:hover::before { border-color: #d06a51; box-shadow: none; }
body.cyber .square.is-hint-from,
body.cyber .square.is-hint-to {
  box-shadow: inset 0 0 0 2px var(--green);
}
body.cyber .square.is-swap-target {
  box-shadow: inset 0 0 0 2px var(--gold);
  cursor: pointer;
}
body.cyber .square.is-teleporting {
  box-shadow: inset 0 0 0 2px var(--gold);
}
body.cyber .landing-flash { border-radius: 0; border: 1px solid var(--gold); }
body.cyber .swap-beam-path { stroke: #d79a5b; filter: none; stroke-width: 2; stroke-dasharray: 7 7; }
body.cyber .swap-beam-orb { fill: #d79a5b; filter: none; }
body.cyber .swap-flash { border-radius: 0; border: 2px solid var(--gold); box-shadow: none; }
body.cyber .swap-label {
  border-radius: 1px;
  border-color: #7b5234;
  background: #0d1212;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
body.cyber .swap-label strong { font-family: var(--font-mono); color: var(--gold-bright); }
body.cyber .swap-label span { font-family: var(--font-mono); color: var(--muted); }

/* ------------------------------------------------------------ estado/acciones */
body.cyber .board-status {
  border-radius: 2px;
  border-color: #343c3a;
  background: #101516;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.cyber .status-ornament { color: var(--gold); }
body.cyber .board-status.is-check { border-color: var(--danger); background: rgba(124, 48, 36, 0.24); color: #dcb2a5; }
body.cyber .board-status.is-over { border-color: var(--gold-dim); background: rgba(90, 65, 35, 0.18); color: var(--gold-bright); }

body.cyber .sidebar { gap: 10px; }
body.cyber .card {
  border-radius: 2px;
  border-color: #343c3a;
  background: #101516;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
  padding: 14px 15px;
}
body.cyber .card::before {
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 72%);
  opacity: 0.7;
}
body.cyber .turn-card { padding-top: 16px; }
body.cyber .turn-row { margin: 6px 0 8px; }
body.cyber .turn-side { font-size: 21px; letter-spacing: 0.04em; }
body.cyber .turn-orb {
  width: 9px;
  height: 9px;
  border-radius: 0;
  background: var(--gold);
  border: 1px solid #0a0d0d;
  box-shadow: none;
}
body.cyber .turn-orb.is-black { background: #c5bda9; border-color: #211b13; box-shadow: none; }
body.cyber .badge {
  border-radius: 1px;
  border-color: #4c4439;
  background: #171b1a;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.1em;
  padding: 4px 6px;
}
body.cyber .status-main { font-size: 12px; letter-spacing: 0.02em; }
body.cyber .status-sub { font-size: 10px; color: var(--muted); }
body.cyber .thinking { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; color: var(--gold); }
body.cyber .thinking-dots i { border-radius: 0; background: var(--gold); animation: none; opacity: 0.6; }
body.cyber .thinking-dots i:nth-child(2) { opacity: 0.4; }
body.cyber .thinking-dots i:nth-child(3) { opacity: 0.25; }

body.cyber .actions-card { padding: 10px; }
body.cyber .actions-grid { gap: 5px; }
body.cyber .action-btn {
  border-radius: 1px;
  border-color: #343c3a;
  background: #151b1b;
  color: var(--ink-soft);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 8px;
}
body.cyber .action-btn:hover:not(:disabled) { background: #1d2423; border-color: var(--gold); color: var(--ink); }
body.cyber .action-btn--danger:hover:not(:disabled) { border-color: var(--danger); color: #e2b3a5; }
body.cyber .action-btn--swap { border-color: #5d4f3d; color: var(--gold-bright); background: rgba(185, 118, 61, 0.08); }
body.cyber .action-btn--pause { border-color: var(--gold); color: var(--gold-bright); background: rgba(185, 118, 61, 0.1); }
body.cyber .action-btn--pause:hover:not(:disabled) { background: rgba(185, 118, 61, 0.18); }
body.cyber .action-btn svg { width: 15px; height: 15px; opacity: 0.7; }

body.cyber .move-count {
  border-radius: 1px;
  background: #171b1a;
  border-color: #4c4439;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
}
body.cyber .moves-scroll { scrollbar-color: rgba(185, 118, 61, 0.35) transparent; }
body.cyber .move-row { border-radius: 0; border-bottom: 1px solid rgba(218, 212, 198, 0.055); }
body.cyber .move-row:nth-child(odd) { background: rgba(218, 212, 198, 0.025); }
body.cyber .move-san { font-family: var(--font-mono); font-size: 10.5px; border-radius: 0; color: var(--ink-soft); }
body.cyber .move-san.is-last { color: var(--gold-bright); background: rgba(185, 118, 61, 0.13); }
body.cyber .move-san .move-check { color: var(--danger); }
body.cyber .move-san .move-glyph { color: var(--gold); }
body.cyber .lore-card { background: #101516; }
body.cyber .lore-card p { color: var(--muted); }
body.cyber .lore-facts span { border-radius: 1px; border-color: #3b4340; color: var(--muted); font-family: var(--font-mono); font-size: 8px; }
body.cyber .text-link { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; color: var(--gold-bright); }

/* ------------------------------------------------------------------ modales */
body.cyber .modal-backdrop { background: rgba(3, 5, 6, 0.82); backdrop-filter: none; }
body.cyber .modal-actions--sticky { background: linear-gradient(180deg, transparent, #0f1415 38%); }
body.cyber .modal-panel {
  border-radius: 2px;
  border-color: #3d4542;
  background: #0f1415;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
}
body.cyber .modal-panel::-webkit-scrollbar-thumb { background: rgba(185, 118, 61, 0.35); border-radius: 0; }
body.cyber .modal-close { border-radius: 1px; border-color: #3d4542; background: #121819; }
body.cyber .seg { border-radius: 2px; background: #0b1011; border-color: #343c3a; padding: 2px; gap: 2px; }
body.cyber .seg button { border-radius: 1px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
body.cyber .seg button.is-active { color: #0b0e0d; background: var(--gold); box-shadow: none; }
body.cyber .rules-nav a { border-radius: 1px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; }
body.cyber .rule-note { border-radius: 0; border-left-color: var(--gold); background: rgba(185, 118, 61, 0.05); }
body.cyber .rule-note > b { font-family: var(--font-mono); font-size: 9px; }
body.cyber .rule-list li::marker { color: var(--gold); }
body.cyber .setting-row { border-bottom-color: rgba(218, 212, 198, 0.07); }
body.cyber .setting-name { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
body.cyber .setting-help { font-size: 9px; }
body.cyber .sound-test { border-radius: 1px; font-family: var(--font-mono); text-transform: uppercase; font-size: 8px; letter-spacing: 0.05em; }
body.cyber .switch { width: 40px; height: 21px; }
body.cyber .switch span { border-radius: 1px; background: #0b1011; border-color: #3b4340; }
body.cyber .switch span::after { width: 14px; height: 14px; border-radius: 0; background: #67706c; left: 2px; top: 2px; }
body.cyber .switch input:checked + span { background: #121817; border-color: var(--gold); }
body.cyber .switch input:checked + span::after { transform: translateX(19px); background: var(--gold); }
body.cyber .theme-picker button { border-radius: 1px; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.03em; }
body.cyber .theme-picker button.is-active { border-color: var(--gold); color: var(--gold-bright); background: rgba(185, 118, 61, 0.1); }
body.cyber .swatch { border-radius: 0; }
body.cyber .gameover-crown .gameover-art { width: 82px; height: 82px; }
body.cyber .gameover-stats { font-family: var(--font-mono); border-top-color: #343c3a; }
body.cyber .gameover-stats b { font-family: var(--font-mono); font-size: 12px; }
body.cyber .confirm-glyph { border-radius: 1px; }
body.cyber .footer { border-top-color: #2b3331; font-size: 8.5px; letter-spacing: 0.04em; color: var(--muted-2); }
body.cyber .footer-sep { color: var(--gold-dim); }
body.cyber .footer em { color: var(--muted); }
body.cyber .boot-notice { border-radius: 2px; border-color: #5a4a39; background: #0e1314; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3); }
body.cyber .boot-notice code { border-radius: 0; }

/* ------------------------------------------------------------------ temas */
body.cyber.theme-lapis {
  --board-light: #81939c;
  --board-dark: #3e5058;
  --board-line: rgba(5, 10, 12, 0.55);
  --frame-1: #26363b;
  --frame-2: #111b1e;
  --frame-3: #070d0f;
  --gold: #6f918b;
  --gold-bright: #9dbbb3;
  --gold-dim: #4e6763;
  --line: rgba(111, 145, 139, 0.3);
  --frame-edge: #6f918b;
}
body.cyber.theme-parchment {
  --board-light: #a08c6a;
  --board-dark: #5f5343;
  --board-line: rgba(12, 10, 7, 0.5);
  --frame-1: #35302a;
  --frame-2: #1b1815;
  --frame-3: #0d0b09;
  --gold: #a9763f;
  --gold-bright: #c79a61;
  --gold-dim: #70512f;
  --line: rgba(169, 118, 63, 0.3);
  --frame-edge: #a9763f;
}

body.cyber .swatch--timur { background: linear-gradient(135deg, #948c79 0 50%, #505b59 50% 100%); }
body.cyber .swatch--lapis { background: linear-gradient(135deg, #81939c 0 50%, #3e5058 50% 100%); }
body.cyber .swatch--parchment { background: linear-gradient(135deg, #a08c6a 0 50%, #5f5343 50% 100%); }

@media (max-width: 620px) {
  body.cyber .brand-title { font-size: 18px; letter-spacing: 0.02em; }
  body.cyber .brand-kicker { font-size: 7.5px; letter-spacing: 0.12em; }
  body.cyber .btn { font-size: 9px; padding: 8px 9px; }
  body.cyber .turn-banner-main { font-size: 9px; }
  body.cyber .turn-banner-sub { font-size: 8px; }
  body.cyber .piece-badge {
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    font-size: 8px;
  }
}

/* =========================================================================
   Legibilidad y página pública.
   La estética industrial se queda en el color, las aristas y los detalles;
   el texto vuelve a ser texto normal, con tamaños de lectura reales.
   ========================================================================= */

body.cyber { font-size: 15.5px; }

body.cyber .brand-title {
  font-family: var(--font-body);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
body.cyber .brand-kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--muted);
}

body.cyber .page-lead {
  width: min(100% - 40px, 1620px);
  margin: 0 auto 14px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
body.cyber .page-lead strong { color: var(--gold-bright); font-weight: 700; }
body.cyber .page-lead em { color: var(--muted); font-style: normal; }

body.cyber .card-eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
body.cyber .card-eyebrow::before { content: none; }
body.cyber .card-title {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.25;
  margin: 4px 0 8px;
}
body.cyber .turn-side {
  font-family: var(--font-body);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: none;
}
body.cyber .status-main { font-size: 15px; font-weight: 700; line-height: 1.35; }
body.cyber .status-sub { font-size: 13px; line-height: 1.5; }
body.cyber .badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}
body.cyber .thinking { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }

body.cyber .player-name { font-size: 14.5px; }
body.cyber .player-state {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.cyber .btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 9px 14px;
}
body.cyber .action-btn {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 9px 8px;
}

body.cyber .turn-banner-main {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
}
body.cyber .turn-banner-sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0;
  color: var(--muted);
}

body.cyber .board-status {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

body.cyber .move-num { font-size: 11px; }
body.cyber .move-san { font-size: 12.5px; }
body.cyber .move-row { padding: 5px 4px; }

body.cyber .lore-card p { font-size: 13.5px; line-height: 1.65; }
body.cyber .lore-facts span {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0;
}
body.cyber .text-link {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

body.cyber .modal-eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
body.cyber .modal-title,
body.cyber .gameover-panel .modal-title {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: none;
}
body.cyber .modal-lead { font-size: 14px; line-height: 1.55; }

body.cyber .seg button,
body.cyber .theme-picker button {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
}
body.cyber .rules-nav a {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
body.cyber .rules-section h3 {
  font-family: var(--font-body);
  font-size: 21px;
  letter-spacing: -0.01em;
  text-transform: none;
}
body.cyber .rules-section p,
body.cyber .rule-list li { font-size: 13.5px; line-height: 1.6; }
body.cyber .rule-note p { font-size: 13px; }
body.cyber .rule-note > b { font-family: var(--font-body); font-size: 10.5px; }

body.cyber .setting-name {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
body.cyber .setting-help {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 0;
}
body.cyber .sound-test { font-family: var(--font-body); font-size: 10.5px; text-transform: none; }
body.cyber .footer {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0;
  line-height: 1.5;
}

/* Guía de piezas: panel contextual de la barra derecha. */
body.cyber .guide-card.is-active { border-color: rgba(185, 118, 61, 0.62); }
body.cyber .guide-toggle {
  flex: none;
  padding: 5px 9px;
  border: 1px solid #4b5451;
  border-radius: 1px;
  background: #151b1b;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
body.cyber .guide-toggle:hover { border-color: var(--gold); color: var(--ink); }
body.cyber .guide-toggle[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold);
  color: #0b0e0d;
}
body.cyber .guide-idle {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}
body.cyber .guide-piece-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px 0 10px;
}
body.cyber .guide-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid #3b4340;
  background: #0b1011;
}
body.cyber .guide-icon .piece { width: 42px; height: 42px; display: block; object-fit: contain; }
body.cyber .guide-name { font-size: 15px; font-weight: 800; color: var(--ink); }
body.cyber .guide-letter {
  margin-top: 2px;
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.cyber .guide-text {
  margin: 0 0 9px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
body.cyber .guide-diagram-title {
  margin: 10px 0 5px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.cyber .guide-diagram {
  width: min(100%, 238px);
  margin: 0 auto;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  border: 1px solid #4b5451;
  background: #0b1011;
  overflow: hidden;
}
body.cyber .guide-cell {
  position: relative;
  box-shadow: inset 0 0 0 0.5px rgba(5, 8, 9, 0.45);
}
body.cyber .guide-cell.light { background: #948c79; }
body.cyber .guide-cell.dark { background: #505b59; }
body.cyber .guide-cell.is-origin {
  box-shadow: inset 0 0 0 2px #d79a5b;
  background: rgba(215, 154, 91, 0.28);
  z-index: 2;
}
body.cyber .guide-cell.is-origin .piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
body.cyber .guide-cell.is-move::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24%;
  height: 24%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f0d49b;
  border: 1px solid #51442f;
  box-shadow: none;
}
body.cyber .guide-cell.is-capture::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 2px solid #c65a43;
  background: rgba(198, 90, 67, 0.16);
  border-radius: 0;
}
body.cyber .guide-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 7px 0 9px;
  color: var(--muted-2);
  font-family: var(--font-body);
  font-size: 9.5px;
}
body.cyber .guide-legend > span { display: inline-flex; align-items: center; gap: 4px; }
body.cyber .guide-key { display: inline-block; width: 7px; height: 7px; }
body.cyber .guide-key--origin { border: 1px solid #d79a5b; background: rgba(215, 154, 91, 0.28); }
body.cyber .guide-key--move { border-radius: 50%; background: #f0d49b; }
body.cyber .guide-key--capture { border: 1px solid #c65a43; background: rgba(198, 90, 67, 0.16); }
body.cyber .guide-points {
  margin: 0;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
body.cyber .guide-points li::marker { color: var(--gold); }
body.cyber .guide-points b { color: var(--ink-soft); }

/* Etiquetas de piezas: discretas, no protagonistas. */
body.cyber .piece-badge {
  min-width: max(14px, calc(var(--sq) * 0.20));
  height: max(13px, calc(var(--sq) * 0.20));
  padding: 0 2px;
  font-size: clamp(8px, calc(var(--sq) * 0.14), 11px);
}

@media (max-width: 860px) {
  body.cyber .page-lead { width: calc(100% - 28px); font-size: 13.5px; }
  body.cyber .brand-kicker { font-size: 11px; }
  body.cyber .card-title { font-size: 18px; }
  body.cyber .turn-side { font-size: 24px; }
  body.cyber .btn { font-size: 12px; }
}
@media (max-width: 620px) {
  body.cyber .brand-title { font-size: 19px; }
  body.cyber .brand-kicker { font-size: 10px; }
  body.cyber .page-lead { font-size: 13px; margin-bottom: 10px; }
  body.cyber .btn { font-size: 11.5px; padding: 8px 10px; }
  body.cyber .turn-banner-main { font-size: 11.5px; }
  body.cyber .turn-banner-sub { font-size: 10px; }
  body.cyber .piece-badge {
    min-width: 11px;
    height: 11px;
    padding: 0 2px;
    font-size: 7px;
  }
}