/* WEB-SKIN-V04: Records Mono owns a complete neutral interface palette. */
body[data-card-skin="records-mono"] {
  --void: #050607;
  --panel: #111416;
  --panel-2: #1a1e21;
  --line: #d4d8dc;
  --line-rgb: 212, 216, 220;
  --line-soft: rgba(212, 216, 220, 0.36);
  --text: #f4f5f5;
  --muted: #a3a9ae;
  --danger: #c8cbd0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.10), transparent 47%),
    radial-gradient(circle at 18% 62%, rgba(145, 151, 157, 0.07), transparent 34%),
    linear-gradient(180deg, #171a1d, #030405 76%);
}

body[data-card-skin="records-mono"] ::selection {
  color: #08090a;
  background: rgba(235, 237, 239, 0.80);
}

body[data-card-skin="records-mono"] .brand-panel,
body[data-card-skin="records-mono"] .join-card,
body[data-card-skin="records-mono"] .rules-card,
body[data-card-skin="records-mono"] .lobby-panel,
body[data-card-skin="records-mono"] .finish-panel,
body[data-card-skin="records-mono"] .table-shell,
body[data-card-skin="records-mono"] .game-header,
body[data-card-skin="records-mono"] .player-score,
body[data-card-skin="records-mono"] .capture-panel,
body[data-card-skin="records-mono"] .last-move-panel,
body[data-card-skin="records-mono"] .replay-panel,
body[data-card-skin="records-mono"] .room-tools-panel,
body[data-card-skin="records-mono"] .premium-panel,
body[data-card-skin="records-mono"] .final-score {
  border-color: var(--line-soft);
  background-color: rgba(12, 14, 16, 0.95);
}

body[data-card-skin="records-mono"] .brand-panel,
body[data-card-skin="records-mono"] .join-card,
body[data-card-skin="records-mono"] .rules-card,
body[data-card-skin="records-mono"] .lobby-panel,
body[data-card-skin="records-mono"] .finish-panel {
  background: linear-gradient(145deg, rgba(28, 31, 34, 0.97), rgba(6, 7, 8, 0.99));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

body[data-card-skin="records-mono"] .eyebrow,
body[data-card-skin="records-mono"] h1,
body[data-card-skin="records-mono"] .rules-card summary,
body[data-card-skin="records-mono"] .lobby-panel h2,
body[data-card-skin="records-mono"] .finish-panel h2,
body[data-card-skin="records-mono"] .large-code,
body[data-card-skin="records-mono"] .room-line strong,
body[data-card-skin="records-mono"] .score-title,
body[data-card-skin="records-mono"] .seat-status.online,
body[data-card-skin="records-mono"] .stack-count b,
body[data-card-skin="records-mono"] .rail-heading strong,
body[data-card-skin="records-mono"] #selectionHint,
body[data-card-skin="records-mono"] .final-score strong,
body[data-card-skin="records-mono"] #replayIndex,
body[data-card-skin="records-mono"] .premium-panel h2,
body[data-card-skin="records-mono"] .system-on b,
body[data-card-skin="records-mono"] .room-tools-field label {
  color: #f2f3f4;
}

body[data-card-skin="records-mono"] label,
body[data-card-skin="records-mono"] .motto,
body[data-card-skin="records-mono"] .room-line,
body[data-card-skin="records-mono"] .score-values,
body[data-card-skin="records-mono"] .stack-count,
body[data-card-skin="records-mono"] .rail-heading,
body[data-card-skin="records-mono"] .diagonal-key,
body[data-card-skin="records-mono"] .game-log,
body[data-card-skin="records-mono"] .final-score span,
body[data-card-skin="records-mono"] .rematch-status,
body[data-card-skin="records-mono"] .replay-text,
body[data-card-skin="records-mono"] .inspect-register,
body[data-card-skin="records-mono"] .room-tools-note {
  color: #aab0b5;
}

body[data-card-skin="records-mono"] .turn-message,
body[data-card-skin="records-mono"] .last-move,
body[data-card-skin="records-mono"] .history-slide,
body[data-card-skin="records-mono"] .rules-card {
  color: #e4e6e7;
}

body[data-card-skin="records-mono"] .or-line {
  color: #858b90;
}

body[data-card-skin="records-mono"] .or-line::before,
body[data-card-skin="records-mono"] .or-line::after {
  background: rgba(196, 201, 205, 0.34);
}

body[data-card-skin="records-mono"] input,
body[data-card-skin="records-mono"] .card-skin-select {
  border-color: rgba(185, 190, 195, 0.55);
  color: #f4f5f5;
  background: #090b0c;
}

body[data-card-skin="records-mono"] input:focus,
body[data-card-skin="records-mono"] .card-skin-select:focus {
  border-color: #e1e3e5;
  outline: none;
  box-shadow: 0 0 0 3px rgba(225, 227, 229, 0.13);
}

/* UI controls only. Card buttons are deliberately excluded. */
body[data-card-skin="records-mono"] button:not(.card):not(.secondary):not(.ghost):not(.end-room-button):not(.intake-button) {
  color: #090a0b;
  border-color: #f0f1f2;
  background: #d4d8dc;
  box-shadow: 0 0 20px rgba(220, 223, 226, 0.12);
}

body[data-card-skin="records-mono"] button.secondary {
  color: #eceeef;
  border-color: rgba(212, 216, 220, 0.68);
  background: rgba(22, 25, 27, 0.86);
}

body[data-card-skin="records-mono"] button.ghost {
  color: #c8ccd0;
  border-color: rgba(151, 157, 162, 0.52);
  background: #171a1d;
}

body[data-card-skin="records-mono"] .game-header {
  border-color: rgba(212, 216, 220, 0.40);
  background: rgba(9, 11, 12, 0.94);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.04);
}

body[data-card-skin="records-mono"] .connection.online {
  color: #f0f1f2;
  background: rgba(212, 216, 220, 0.11);
}

body[data-card-skin="records-mono"] .table-shell {
  border-color: rgba(212, 216, 220, 0.42);
  background: linear-gradient(180deg, rgba(15, 17, 19, 0.99), rgba(3, 4, 5, 0.99));
  box-shadow: inset 0 0 70px rgba(255, 255, 255, 0.035);
}

body[data-card-skin="records-mono"] .table-shell::before {
  background-image:
    linear-gradient(rgba(9, 11, 12, 0.72), rgba(2, 3, 4, 0.94)),
    radial-gradient(circle at center, rgba(235, 237, 239, 0.08), transparent 55%),
    var(--board);
  opacity: 0.55;
  filter: grayscale(1) contrast(1.20) brightness(0.70);
}

body[data-card-skin="records-mono"] .player-score {
  border-color: rgba(151, 157, 162, 0.54);
  background: rgba(10, 12, 13, 0.92);
}

body[data-card-skin="records-mono"] .player-score.active-seat {
  border-color: rgba(236, 238, 240, 0.90);
  box-shadow: 0 0 18px rgba(235, 237, 239, 0.10);
}

body[data-card-skin="records-mono"] .status-panel {
  border-left-color: #d4d8dc;
  background: linear-gradient(90deg, rgba(48, 52, 56, 0.88), rgba(15, 17, 19, 0.96));
}

body[data-card-skin="records-mono"] h3,
body[data-card-skin="records-mono"] .capture-panel summary,
body[data-card-skin="records-mono"] .rail-axis .axis-name {
  color: #d7dade;
}

body[data-card-skin="records-mono"] .rail-axis {
  color: #f0f1f2;
}

body[data-card-skin="records-mono"] .card-back-mini {
  border-color: rgba(212, 216, 220, 0.58);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.60), 0 0 8px rgba(255, 255, 255, 0.06);
}

body[data-card-skin="records-mono"] .card:not(.empty),
body[data-card-skin="records-mono"] .mini-card,
body[data-card-skin="records-mono"] .replay-card {
  border-color: rgba(230, 232, 234, 0.86);
}

body[data-card-skin="records-mono"] .card.selectable.selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(218, 221, 224, 0.34), 0 12px 22px rgba(0, 0, 0, 0.74);
}

body[data-card-skin="records-mono"] .card.empty {
  border-color: rgba(151, 157, 162, 0.58);
  color: #747b80;
  background-color: rgba(17, 20, 22, 0.78);
}

body[data-card-skin="records-mono"] .intake-button {
  color: #cfd3d6;
  border-color: rgba(170, 175, 180, 0.58);
  background: rgba(13, 15, 17, 0.97);
}

body[data-card-skin="records-mono"] .intake-button.ready {
  color: #08090a;
  border-color: #f1f2f3;
  background: #d4d8dc;
  box-shadow: 0 0 24px rgba(232, 234, 236, 0.18);
}

body[data-card-skin="records-mono"] .capture-panel {
  border-color: rgba(151, 157, 162, 0.42);
  background: rgba(10, 12, 13, 0.94);
}

body[data-card-skin="records-mono"] .last-move-panel {
  border-color: rgba(151, 157, 162, 0.36);
  background: rgba(7, 8, 9, 0.95);
}

body[data-card-skin="records-mono"] .final-score {
  border-color: rgba(170, 175, 180, 0.52);
  background: #0b0d0e;
}

body[data-card-skin="records-mono"] .final-score.winner {
  border-color: #eff0f1;
  box-shadow: 0 0 24px rgba(235, 237, 239, 0.13);
}

body[data-card-skin="records-mono"] .toast {
  border-color: #d4d8dc;
  background: rgba(13, 15, 17, 0.98);
  box-shadow: 0 10px 40px black, 0 0 18px rgba(255, 255, 255, 0.06);
}

body[data-card-skin="records-mono"] .slide-result-banner {
  border-color: #eceeef;
  color: #08090a;
  background: #d4d8dc;
  box-shadow: 0 0 26px rgba(235, 237, 239, 0.18);
}

body[data-card-skin="records-mono"] .star-trace.gold-trace {
  color: #ffffff;
  background: rgba(38, 41, 44, 0.88);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.70), inset 0 0 7px rgba(255, 255, 255, 0.18);
}

body[data-card-skin="records-mono"] .star-trace.black-trace {
  color: #aeb3b7;
  border-color: #777d82;
  background: rgba(3, 4, 5, 0.90);
  box-shadow: 0 0 10px rgba(155, 160, 165, 0.42), inset 0 0 6px rgba(190, 194, 198, 0.08);
}

body[data-card-skin="records-mono"].camera-mode .rail-area {
  border-color: rgba(212, 216, 220, 0.40);
  background: rgba(18, 21, 23, 0.70);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.035);
}

body[data-card-skin="records-mono"].shutdown-mode .table-shell {
  border-color: rgba(245, 246, 247, 0.88);
  box-shadow: 0 0 28px rgba(235, 237, 239, 0.16);
}

body[data-card-skin="records-mono"].shutdown-mode .status-panel {
  border-left-color: #f0f1f2;
  background: linear-gradient(90deg, rgba(212, 216, 220, 0.18), rgba(13, 15, 17, 0.97));
}

body[data-card-skin="records-mono"].shutdown-mode::after {
  border-color: #f0f1f2;
  color: #f0f1f2;
  background: rgba(7, 8, 9, 0.97);
  box-shadow: 0 0 44px rgba(235, 237, 239, 0.22);
}

body[data-card-skin="records-mono"] .premium-modal {
  background: rgba(2, 3, 4, 0.88);
}

body[data-card-skin="records-mono"] .premium-panel {
  border-color: rgba(212, 216, 220, 0.48);
  background: linear-gradient(155deg, #202428, #090b0c 72%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.78), 0 0 36px rgba(255, 255, 255, 0.07);
}

body[data-card-skin="records-mono"] .inspect-systems > div {
  border-color: rgba(151, 157, 162, 0.42);
  background: #111416;
}

body[data-card-skin="records-mono"] .inspect-systems .system-on {
  border-color: rgba(230, 232, 234, 0.78);
}

body[data-card-skin="records-mono"] .inspect-gold {
  border-top-color: rgba(151, 157, 162, 0.42);
}

body[data-card-skin="records-mono"] .replay-panel {
  border-color: rgba(212, 216, 220, 0.44);
  background: rgba(10, 12, 13, 0.94);
}

body[data-card-skin="records-mono"] .room-tools-panel {
  border-color: rgba(212, 216, 220, 0.40);
  background: rgba(10, 12, 13, 0.97);
}

body[data-card-skin="records-mono"] .end-room-button {
  border-color: rgba(170, 175, 180, 0.62);
  color: #e7e9ea;
  background: rgba(28, 31, 34, 0.94);
  box-shadow: none;
}

body[data-card-skin="records-mono"] .end-room-button:not(:disabled):hover,
body[data-card-skin="records-mono"] .end-room-button:not(:disabled):focus-visible {
  border-color: #eff0f1;
  color: #ffffff;
  background: rgba(47, 51, 55, 0.98);
  box-shadow: 0 0 0 3px rgba(220, 223, 226, 0.10);
}

body[data-card-skin="records-mono"] .end-room-button:not(:disabled):active {
  color: #08090a;
  background: #d4d8dc;
}