/* WEB-SKIN-V10B: The Black-Index field-copy deck and restricted catalogue shell. */
.black-index-face { display: none; }

body[data-card-skin="black-index"] {
  --void: #050307;
  --panel: #09070f;
  --panel-2: #151020;
  --line: #a371f7;
  --line-rgb: 163, 113, 247;
  --line-soft: rgba(163, 113, 247, 0.40);
  --index-green: #39d353;
  --index-gold: #e3b341;
  --index-paper: #f4e9ec;
  --text: #f4e9ec;
  --muted: #b6a9c4;
  --danger: #ff6b91;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -18%, rgba(163, 113, 247, 0.25), transparent 43%),
    radial-gradient(circle at 15% 70%, rgba(57, 211, 83, 0.10), transparent 34%),
    linear-gradient(180deg, #150e20, #030205 78%);
}
body[data-card-skin="black-index"] ::selection { color: #09070f; background: rgba(57, 211, 83, 0.82); }

body[data-card-skin="black-index"] .brand-panel,
body[data-card-skin="black-index"] .join-card,
body[data-card-skin="black-index"] .rules-card,
body[data-card-skin="black-index"] .lobby-panel,
body[data-card-skin="black-index"] .finish-panel,
body[data-card-skin="black-index"] .table-shell,
body[data-card-skin="black-index"] .game-header,
body[data-card-skin="black-index"] .player-score,
body[data-card-skin="black-index"] .capture-panel,
body[data-card-skin="black-index"] .last-move-panel,
body[data-card-skin="black-index"] .replay-panel,
body[data-card-skin="black-index"] .room-tools-panel,
body[data-card-skin="black-index"] .premium-panel,
body[data-card-skin="black-index"] .final-score {
  border-color: rgba(163, 113, 247, 0.38);
  background-color: rgba(8, 5, 12, 0.95);
}
body[data-card-skin="black-index"] .brand-panel,
body[data-card-skin="black-index"] .join-card,
body[data-card-skin="black-index"] .rules-card,
body[data-card-skin="black-index"] .lobby-panel,
body[data-card-skin="black-index"] .finish-panel {
  background: linear-gradient(145deg, rgba(25, 16, 37, 0.98), rgba(5, 3, 8, 0.99));
  box-shadow: 0 20px 70px rgba(0,0,0,0.60), inset 0 0 0 1px rgba(57,211,83,0.035);
}

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

body[data-card-skin="black-index"] label,
body[data-card-skin="black-index"] .motto,
body[data-card-skin="black-index"] .room-line,
body[data-card-skin="black-index"] .score-values,
body[data-card-skin="black-index"] .stack-count,
body[data-card-skin="black-index"] .rail-heading,
body[data-card-skin="black-index"] .diagonal-key,
body[data-card-skin="black-index"] .game-log,
body[data-card-skin="black-index"] .final-score span,
body[data-card-skin="black-index"] .rematch-status,
body[data-card-skin="black-index"] .replay-text,
body[data-card-skin="black-index"] .inspect-register,
body[data-card-skin="black-index"] .room-tools-note { color: #b9abc6; }
body[data-card-skin="black-index"] .turn-message,
body[data-card-skin="black-index"] .last-move,
body[data-card-skin="black-index"] .history-slide,
body[data-card-skin="black-index"] .rules-card { color: #f4e9ec; }

body[data-card-skin="black-index"] input,
body[data-card-skin="black-index"] .card-skin-select { border-color: rgba(163,113,247,0.56); color: #f4e9ec; background: #09060d; }
body[data-card-skin="black-index"] input:focus,
body[data-card-skin="black-index"] .card-skin-select:focus { border-color: var(--index-green); outline: none; box-shadow: 0 0 0 3px rgba(57,211,83,0.15); }
body[data-card-skin="black-index"] button:not(.card):not(.secondary):not(.ghost):not(.end-room-button):not(.intake-button) { color: #09070f; border-color: #72eb83; background: var(--index-green); box-shadow: 0 0 22px rgba(57,211,83,0.18); }
body[data-card-skin="black-index"] button.secondary { color: #c8a8ff; border-color: rgba(163,113,247,0.74); background: rgba(21,11,31,0.88); }
body[data-card-skin="black-index"] button.ghost { color: #e0d6e8; border-color: rgba(163,113,247,0.38); background: #151020; }
body[data-card-skin="black-index"] .end-room-button { color: #ff9ab3; border-color: rgba(255,107,145,0.55); background: rgba(65,7,26,0.44); }

body[data-card-skin="black-index"] .game-header { background: rgba(8,5,12,0.94); box-shadow: 0 0 24px rgba(163,113,247,0.08); }
body[data-card-skin="black-index"] .connection.online { color: #67e77d; background: rgba(57,211,83,0.13); }
body[data-card-skin="black-index"] .table-shell { background: linear-gradient(180deg, rgba(12,8,18,0.99), rgba(3,2,5,0.99)); box-shadow: inset 0 0 76px rgba(163,113,247,0.055); }
body[data-card-skin="black-index"] .table-shell::before {
  background-image:
    linear-gradient(rgba(10,6,15,0.66), rgba(2,1,4,0.95)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(57,211,83,0.035) 40px),
    var(--board);
  opacity: 0.54;
  filter: grayscale(0.72) sepia(0.12) hue-rotate(225deg) saturate(1.45) contrast(1.24) brightness(0.56);
}
body[data-card-skin="black-index"] .player-score { border-color: rgba(163,113,247,0.43); background: rgba(8,5,13,0.92); }
body[data-card-skin="black-index"] .player-score.active-seat { border-color: rgba(57,211,83,0.90); box-shadow: 0 0 18px rgba(57,211,83,0.11); }
body[data-card-skin="black-index"] .status-panel { border-left-color: var(--index-green); background: linear-gradient(90deg, rgba(43,25,67,0.92), rgba(12,8,18,0.96)); }
body[data-card-skin="black-index"] h3,
body[data-card-skin="black-index"] .capture-panel summary,
body[data-card-skin="black-index"] .rail-axis .axis-name { color: #c5a3ff; }
body[data-card-skin="black-index"] .rail-axis { color: #eee5f3; }
body[data-card-skin="black-index"] .intake-button { color: #c4a5fa; border-color: rgba(163,113,247,0.58); background: rgba(7,4,11,0.97); }
body[data-card-skin="black-index"] .intake-button.ready { color: #071008; border-color: #72eb83; background: var(--index-green); box-shadow: 0 0 24px rgba(57,211,83,0.24); }
body[data-card-skin="black-index"] .toast { border-color: var(--index-green); background: rgba(9,6,14,0.99); box-shadow: 0 10px 40px black, 0 0 18px rgba(57,211,83,0.10); }
body[data-card-skin="black-index"] .slide-result-banner { color: #071008; border-color: #72eb83; background: var(--index-green); box-shadow: 0 0 28px rgba(57,211,83,0.26); }

body[data-card-skin="black-index"] .card-back-mini {
  position: relative;
  overflow: hidden;
  border-color: rgba(163,113,247,0.92);
  background-image:
    linear-gradient(19deg, transparent 47%, rgba(57,211,83,0.36) 48%, rgba(57,211,83,0.36) 50%, transparent 51%),
    repeating-linear-gradient(0deg, rgba(244,233,236,0.045) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #26163b, #09070f 58%, #1c102d) !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
  filter: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.68), 0 0 9px rgba(163,113,247,0.17);
}
body[data-card-skin="black-index"] .card-back-mini::before {
  content: "DO NOT\A RETAIN";
  white-space: pre;
  position: absolute;
  inset: 17% 8%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57,211,83,0.72);
  color: #5fe273;
  font-family: ui-monospace, monospace;
  font-size: 0.36rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  transform: rotate(-8deg);
  background: rgba(7,4,10,0.68);
}

body[data-card-skin="black-index"] .card:not(.empty),
body[data-card-skin="black-index"] .mini-card,
body[data-card-skin="black-index"] .replay-card,
body[data-card-skin="black-index"] #yourHand > button.card.selectable,
body[data-card-skin="black-index"] #yourHand > button.card.selectable:hover,
body[data-card-skin="black-index"] #yourHand > button.card.selectable:focus-visible,
body[data-card-skin="black-index"] #yourHand > button.card.selectable:active,
body[data-card-skin="black-index"] #yourHand > button.card.selectable:disabled {
  position: relative;
  overflow: hidden;
  border-color: rgba(163,113,247,0.94);
  background-color: #09070f !important;
  background-image: linear-gradient(155deg, #211334 0%, #08060c 54%, #180e27 100%) !important;
  box-shadow: 0 0 0 1px rgba(57,211,83,0.20) inset, 0 7px 17px rgba(0,0,0,0.74);
}
body[data-card-skin="black-index"] .card.selectable.selected { border-color: #85f197; box-shadow: 0 0 0 3px rgba(57,211,83,0.36), 0 0 29px rgba(163,113,247,0.24), 0 12px 22px rgba(0,0,0,0.82); }
body[data-card-skin="black-index"] .card.empty { border-color: rgba(163,113,247,0.52); color: #79688c; background-color: rgba(10,6,15,0.80); }

body[data-card-skin="black-index"] .black-index-face {
  position: absolute;
  inset: 2.2%;
  z-index: 3;
  display: grid;
  grid-template-rows: 7% 8% 16% 2% 9% 24% 16% 7% 11%;
  min-width: 0;
  min-height: 0;
  padding: 3.4%;
  border: 1px solid rgba(163,113,247,0.86);
  border-radius: 3%;
  color: #f4e9ec;
  background:
    repeating-linear-gradient(0deg, rgba(244,233,236,0.022) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(163,113,247,0.07), transparent 20%, transparent 80%, rgba(57,211,83,0.04)),
    rgba(8,5,12,0.97);
  box-shadow: 0 0 0 1px rgba(68,37,105,0.78), 0 0 10px rgba(163,113,247,0.10) inset;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(3px, 1.08vw, 6px);
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
  text-align: left;
  text-transform: uppercase;
}
body[data-card-skin="black-index"] .black-index-top,
body[data-card-skin="black-index"] .black-index-title,
body[data-card-skin="black-index"] .black-index-office,
body[data-card-skin="black-index"] .black-index-stars,
body[data-card-skin="black-index"] .black-index-value,
body[data-card-skin="black-index"] .black-index-line,
body[data-card-skin="black-index"] .black-index-footer { min-width: 0; }
body[data-card-skin="black-index"] .black-index-top { display: flex; justify-content: space-between; gap: 3%; color: #b99be8; font-size: 0.55em; white-space: nowrap; }
body[data-card-skin="black-index"] .black-index-top small:last-child { color: #58df70; text-align: right; }
body[data-card-skin="black-index"] .black-index-stamp { justify-self: end; align-self: center; padding: 2% 5%; border: 1px solid #39d353; color: #5fe273; font-size: 0.58em; font-weight: 900; letter-spacing: 0.08em; transform: rotate(-2deg); }
body[data-card-skin="black-index"] .black-index-title { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 5%; overflow: hidden; }
body[data-card-skin="black-index"] .black-index-title strong { align-self: center; color: #a371f7; font-family: Georgia, serif; font-size: 4.25em; line-height: 0.82; letter-spacing: -0.07em; text-shadow: 0 0 7px rgba(163,113,247,0.34); }
body[data-card-skin="black-index"] .black-index-title em { overflow: hidden; padding-bottom: 4%; color: #f4e9ec; font-size: 0.78em; font-style: normal; font-weight: 900; line-height: 1.04; text-overflow: ellipsis; }
body[data-card-skin="black-index"] .black-index-rule { align-self: center; height: 1px; background: linear-gradient(90deg, #a371f7, #39d353 70%, transparent); }
body[data-card-skin="black-index"] .black-index-office { display: flex; justify-content: space-between; align-items: center; gap: 4%; padding: 0 3%; border-left: 2px solid #39d353; color: #cdb7ee; background: rgba(57,211,83,0.055); }
body[data-card-skin="black-index"] .black-index-office b { overflow: hidden; font-size: 0.70em; text-overflow: ellipsis; white-space: nowrap; }
body[data-card-skin="black-index"] .black-index-office i { color: #58df70; font-size: 0.66em; font-style: normal; font-weight: 900; white-space: nowrap; }
body[data-card-skin="black-index"] .black-index-stars { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 1%; }
body[data-card-skin="black-index"] .black-index-channel { display: grid; grid-template-rows: 1fr auto auto; place-items: center; min-width: 0; color: #8d7aa1; }
body[data-card-skin="black-index"] .black-index-channel b { color: #2c1b3e; font-family: Georgia, serif; font-size: 3em; font-weight: 400; line-height: 0.95; text-shadow: 0 0 1px #a371f7; }
body[data-card-skin="black-index"] .black-index-channel.is-marked b { color: #39d353; text-shadow: 0 0 2px #dcffe2, 0 0 7px rgba(57,211,83,0.76); }
body[data-card-skin="black-index"] .black-index-channel i { margin-top: 8%; color: #e1d8e9; font-size: 0.85em; font-style: normal; font-weight: 900; }
body[data-card-skin="black-index"] .black-index-channel small { overflow: hidden; width: 100%; margin-top: 7%; color: #79698b; font-size: 0.41em; text-align: center; white-space: nowrap; }
body[data-card-skin="black-index"] .black-index-value { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: center; padding: 4% 6%; border: 1px solid rgba(163,113,247,0.58); border-radius: 3%; background: rgba(12,7,18,0.84); }
body[data-card-skin="black-index"] .black-index-value small { color: #c9adf6; font-size: 0.70em; font-weight: 900; }
body[data-card-skin="black-index"] .black-index-value b { grid-row: 2; color: #39d353; font-size: 2.65em; line-height: 0.82; }
body[data-card-skin="black-index"] .black-index-value code { grid-column: 2; grid-row: 1 / span 2; color: #eadff0; font-family: ui-monospace, monospace; font-size: 1.02em; letter-spacing: 0.08em; }
body[data-card-skin="black-index"] .black-index-line { align-self: center; overflow: hidden; color: #e3b341; font-size: 0.54em; font-weight: 900; line-height: 1.12; text-align: center; }
body[data-card-skin="black-index"] .black-index-footer { align-self: end; display: grid; gap: 12%; color: #d8cbe1; font-size: 0.54em; text-align: center; }
body[data-card-skin="black-index"] .black-index-footer small { color: #6f607e; font-size: 0.72em; }

body[data-card-skin="black-index"] .mini-card .black-index-face,
body[data-card-skin="black-index"] .replay-card .black-index-face { grid-template-rows: 34% 8% 38% 20%; padding: 5%; font-size: 3px; }
body[data-card-skin="black-index"] .mini-card .black-index-top,
body[data-card-skin="black-index"] .mini-card .black-index-stamp,
body[data-card-skin="black-index"] .mini-card .black-index-office,
body[data-card-skin="black-index"] .mini-card .black-index-value,
body[data-card-skin="black-index"] .mini-card .black-index-line,
body[data-card-skin="black-index"] .mini-card .black-index-footer,
body[data-card-skin="black-index"] .mini-card .black-index-title em,
body[data-card-skin="black-index"] .replay-card .black-index-top,
body[data-card-skin="black-index"] .replay-card .black-index-stamp,
body[data-card-skin="black-index"] .replay-card .black-index-office,
body[data-card-skin="black-index"] .replay-card .black-index-line,
body[data-card-skin="black-index"] .replay-card .black-index-footer,
body[data-card-skin="black-index"] .replay-card .black-index-channel small { display: none; }
body[data-card-skin="black-index"] .mini-card .black-index-title,
body[data-card-skin="black-index"] .replay-card .black-index-title { display: block; }
body[data-card-skin="black-index"] .mini-card .black-index-title strong,
body[data-card-skin="black-index"] .replay-card .black-index-title strong { font-size: 5em; }
body[data-card-skin="black-index"] .mini-card .black-index-channel b,
body[data-card-skin="black-index"] .replay-card .black-index-channel b { font-size: 2.45em; }
body[data-card-skin="black-index"] .mini-card .black-index-channel i { display: none; }
body[data-card-skin="black-index"] .replay-card .black-index-value { display: flex; justify-content: space-between; padding: 3% 6%; }
body[data-card-skin="black-index"] .replay-card .black-index-value b { font-size: 2em; }
body[data-card-skin="black-index"] .replay-card .black-index-value code { font-size: 0.8em; }

@media (max-width: 430px) {
  body[data-card-skin="black-index"] .black-index-face { font-size: clamp(2.8px, 1.2vw, 5px); }
  body[data-card-skin="black-index"] .black-index-title em { font-size: 0.69em; }
  body[data-card-skin="black-index"] .black-index-line { font-size: 0.48em; }
}