/* One live skin, not a comparison mode. Geometry and game authority stay intact.
   Charcoal illustrations are original bitmaps; controls remain crisp live text. */
:root {
  --charcoal-ink: #25231f;
  --charcoal-muted: #625e55;
  --charcoal-paper: #f4ebd9;
  --charcoal-sheet: #fbf4e6;
  --font-ui: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: var(--font-ui);
}
[data-visual-style="loose-charcoal"],
[data-visual-style="loose-charcoal"] * { font-family: var(--font-ui) !important; }
html, body { background: #211f1c; }
[data-visual-style="loose-charcoal"] {
  color: var(--charcoal-ink);
  background: var(--charcoal-paper);
  box-shadow: none;
}
[data-visual-style="loose-charcoal"] :is(h1,h2,h3,p,span,small,strong,b,i,label,input) {
  color: var(--charcoal-ink);
  text-shadow: none;
}
[data-visual-style="loose-charcoal"] :is(button,input):focus-visible {
  outline: 4px dashed var(--charcoal-ink);
  outline-offset: 5px;
}
/* Uneven double strokes, no glossy fills, coloured paper or synthetic gradients. */
.controller-stage :is(.host-intro,.join-card,.waiting-crest,.host-wait,.access-error-view > div,.target-sheet),
.display-stage :is(.action-summary,.catch-overlay,.player-board) {
  border: 3px solid var(--charcoal-ink);
  border-radius: 3px 11px 5px 8px / 9px 4px 10px 3px;
  background: var(--charcoal-sheet);
  box-shadow: 3px 4px 0 var(--charcoal-paper), 5px 6px 0 var(--charcoal-ink);
}
.controller-stage :is(.host-intro,.join-card,.waiting-crest,.target-sheet)::before,
.controller-stage :is(.host-intro,.join-card,.waiting-crest,.target-sheet)::after,
.controller-stage :is(.catch-view,.finish-view)::before,
.display-stage .winner-overlay::before { display: none; }
.controller-stage::before,
.controller-stage::after { display: none; background: none; }
.controller-stage :is(.mobile-header,footer) {
  background: var(--charcoal-paper);
  border: 0;
  box-shadow: none;
}
.controller-stage .mobile-header { border-bottom: 4px double var(--charcoal-ink); }
.controller-stage .mobile-header h1 { font-family: var(--font-display); font-size: 34px; letter-spacing: .06em; }
.controller-stage .mobile-header > div { transform: rotate(-1deg); }
.controller-stage .mobile-header span { letter-spacing: .18em; }
.controller-stage footer { border-top: 3px double var(--charcoal-ink); }
.controller-stage :is(.mobile-header b,.count-picker,.team-name-inputs label,.team-status,.wine-counts b,
  .action-grid button,.action-hint,.catch-view p,.mobile-catch-timer,.catch-buttons button,
  .target-option,.target-sheet > button,.primary-button,.secondary-button,.finish-view > span,.toast,.join-card input) {
  border: 2px solid var(--charcoal-ink);
  border-radius: 2px 7px 3px 6px / 6px 3px 7px 2px;
  background: var(--charcoal-sheet);
  box-shadow: 2px 3px 0 #25231f35;
  color: var(--charcoal-ink);
  filter: none;
}
.controller-stage .host-intro { transform: rotate(-.4deg); padding-top: 10px; }
.controller-stage .host-intro > span { font-family: Georgia, serif; color: var(--charcoal-ink); }
.controller-stage .host-intro p { width: 100%; font-size: 17px; }
.controller-stage .team-name-inputs i {
  background: var(--charcoal-ink); border-radius: 38% 61% 43% 57%;
}
.controller-stage .team-name-inputs label:nth-child(even) i { background: transparent; border: 3px solid var(--charcoal-ink); }
.controller-stage .count-picker { border-width: 3px; }
.controller-stage .count-picker button { color: var(--charcoal-ink); }
.controller-stage .team-status { border-width: 3px; min-height: 86px; }
.controller-stage .team-status strong { font-family: var(--font-display); font-size: 25px; }
.controller-stage :is(.wine-counts i,.count-picker strong) { font-family: Georgia, serif; }
.controller-stage .hand-heading {
  border: 0; border-bottom: 2px dashed var(--charcoal-muted); border-radius: 0;
  background: none; box-shadow: none; padding: 10px 12px; transform: none;
}
.controller-stage .hand-grid {
  border: 0; background: none; box-shadow: none;
  padding: 12px 5px; gap: 12px;
}
.controller-stage :is(.hand-card,.catch-thief,.finish-wines img,.waiting-crest img) {
  border: 0; padding: 0; border-radius: 0; background: none;
  box-shadow: 2px 4px 0 #25231f36;
}
.controller-stage .hand-card img { border-radius: 0; }
.controller-stage .finish-wines img:nth-child(2) { transform: rotate(.4deg); }
.controller-stage .hand-card.selected {
  outline: 4px dashed var(--charcoal-ink); outline-offset: 4px;
  transform: translateY(-5px) rotate(-2deg);
}
.controller-stage .action-grid { gap: 14px; }
.controller-stage .action-grid button { min-height: 94px; padding: 13px 12px; }
.controller-stage .action-grid button b { font-family: var(--font-display); font-size: 23px; }
.controller-stage .action-grid button span { font-size: 14px; }
.controller-stage .action-grid button:not(:disabled),
.controller-stage button.primary-button,
.controller-stage .catch-button:not(:disabled) {
  color: var(--charcoal-sheet); background: var(--charcoal-ink);
  border-color: var(--charcoal-ink); box-shadow: 3px 4px 0 #25231f48;
}
.controller-stage .action-grid button:not(:disabled) :is(b,span) { color: var(--charcoal-sheet); }
.controller-stage button:not(.hand-card) { min-height: 84px; }
.controller-stage .count-picker { width: 300px; height: 88px; grid-template-columns: 84px 1fr 84px; }
.controller-stage .action-grid button:disabled,
.controller-stage .catch-button:disabled { opacity: 1; color: var(--charcoal-muted); border-style: dashed; box-shadow: none; }
.controller-stage .action-grid button:disabled :is(b,span) { color: var(--charcoal-muted); }
.controller-stage :is(.secondary-button,.allow-button,.target-sheet > button) { border-style: dashed; font-size: 17px; }
.controller-stage .secondary-button { height: 50px; }
.controller-stage .action-hint { border: 0; border-top: 2px solid var(--charcoal-ink); background: none; box-shadow: none; font-size: 16px; }
.controller-stage :is(.catch-view,.finish-view,.host-game-view,.access-error-view) { background: none; box-shadow: none; }
.controller-stage .waiting-crest b { color: var(--charcoal-ink); background: none; border: 2px dashed var(--charcoal-ink); }
.controller-stage .join-card input { padding: 8px 24px; letter-spacing: .12em; }
.controller-stage .join-card p { width: 100%; }
.controller-stage .join-card > small { font-size: 15px; font-weight: 900; }
.controller-stage .target-view { background: #25231fb8; }
.controller-stage .target-sheet { border-width: 4px 0 0; border-radius: 0; }
.controller-stage .target-option { min-height: 76px; }
.controller-stage .target-option i { background: none; border: 3px solid var(--charcoal-ink); border-radius: 50% 43% 58% 42%; width: 100%; }
.controller-stage .target-option b { font-size: 19px; }
.controller-stage .toast { background: var(--charcoal-ink); color: var(--charcoal-sheet); border-color: var(--charcoal-sheet); }
.controller-stage .mobile-catch-timer { padding: 0; background: var(--charcoal-paper); }
.controller-stage .mobile-catch-timer i { inset: 0 auto 0 0; max-width: 100%; border-radius: 0; background: var(--charcoal-ink); }
.controller-stage .mobile-catch-timer strong {
  width: 48px; height: 42px; margin: 3px auto; border-radius: 50%;
  background: var(--charcoal-sheet); color: var(--charcoal-ink); text-shadow: none;
}
/* Display: use the already-drawn charcoal courtyard; the table belongs to it. */
.charcoal-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.display-stage .paper-noise { display: none; }
.display-stage .action-summary { border-width: 5px; height: 360px; }
.display-stage .action-summary::before { display: none; }
.display-stage :is(.public-counters span,.public-pile b,.action-separator,.table-empty,.lobby-code,.catch-timer,.board-metric) {
  border: 3px solid var(--charcoal-ink);
  border-radius: 3px 12px 5px 8px / 10px 4px 8px 3px;
  background: var(--charcoal-sheet);
  box-shadow: 2px 3px 0 #25231f30;
}
.display-stage :is(.public-counters span,.public-pile b) { border-style: dashed; }
.display-stage .public-counters span { height: 62px; }
.display-stage .public-pile { grid-template-rows: 237px 64px; }
.display-stage .public-pile b { height: 64px; }
.display-stage .table-empty { border-style: dashed; font-family: var(--font-display); color: var(--charcoal-ink); }
.display-stage .lobby-code { border-width: 4px; }
.display-stage :is(.table-card,.public-pile img,.board-metric img,.catch-art img,.winner-wines img) {
  border: 0; border-radius: 0; box-shadow: 4px 6px 0 #25231f36;
}
.display-stage .player-board { border-width: 5px; background: #fbf4e6fa; }
.display-stage .board-number {
  position: absolute; top: 6%; left: 0; width: 100%; text-align: center;
  font: italic 70px/.95 Georgia, serif; letter-spacing: -.06em;
  transform: rotate(-4deg); color: var(--charcoal-muted);
}
.display-stage .horizontal .board-title { left: 6%; right: 6%; top: 34%; height: 22%; }
.display-stage .horizontal .board-metrics { left: 5%; right: 5%; top: 63%; bottom: 8%; gap: 3%; }
.display-stage .vertical .board-number { top: 7%; font-size: 85px; }
.display-stage .vertical .board-title { left: 7%; right: 7%; top: 23%; height: 12%; }
.display-stage .vertical .board-metrics { left: 9%; right: 9%; top: 40%; bottom: 8%; gap: 5%; }
.display-stage .board-metric { border-width: 2px; background: transparent; box-shadow: none; }
.display-stage .player-board.active { transform: translateY(-7px); filter: none; border-width: 7px; box-shadow: 8px 10px 0 var(--charcoal-ink); }
.display-stage .player-board.active .board-title { background: var(--charcoal-ink); border-radius: 3px 9px; }
.display-stage .player-board.active .board-title strong { color: var(--charcoal-sheet); }
.display-stage .player-board.threatened { animation: none; outline: 6px dashed var(--charcoal-ink); outline-offset: 8px; }
.display-stage .catch-overlay { border-width: 7px; box-shadow: 12px 16px 0 #25231f55; }
.display-stage .catch-timer { padding: 0; }
.display-stage .catch-timer i { inset: 0 auto 0 0; max-width: 100%; background: var(--charcoal-ink); border-radius: 0; }
.display-stage .catch-timer strong { width: 72px; height: 68px; margin: 5px auto; background: var(--charcoal-sheet); border-radius: 50%; color: var(--charcoal-ink); text-shadow: none; }
.display-stage .winner-overlay { background: var(--charcoal-paper); }
.display-stage .winner-overlay h2 { text-shadow: none; transform: rotate(-2deg); }
.display-stage .winner-overlay > span { padding: 18px 40px; border-bottom: 5px double var(--charcoal-ink); }
/* Equal-width score tickets: stable team order; no head-turning side towers. */
.display-stage .player-ring {
  inset: auto 80px 40px; height: 330px; display: grid;
  grid-template-columns: repeat(var(--winery-count, 4), minmax(0, 1fr)); gap: 28px;
}
.display-stage .player-board.score-ticket {
  position: relative; width: auto; height: 100%; min-width: 0;
  transform: none; border-width: 3px; border-top-width: 6px;
  box-shadow: 4px 6px 0 #25231f45;
}
.display-stage .score-ticket .board-number {
  top: 27px; left: 18px; width: 92px; font-size: 37px; line-height: 1;
}
.display-stage .score-ticket .board-title {
  position: absolute; left: 115px; right: 20px; top: 16px; height: 70px;
}
.display-stage .score-ticket .board-title strong { font-size: 44px; color: var(--charcoal-ink); }
.display-stage .score-ticket .board-turn-state {
  position: absolute; top: 99px; left: 24px; right: 24px; margin: 0;
  text-align: center; line-height: 1.2; font-size: 25px; color: var(--charcoal-muted);
}
.display-stage .score-ticket .board-metrics {
  position: absolute; left: 24px; right: 24px; top: 145px; bottom: 24px;
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 18px;
}
.display-stage .score-ticket .board-metric { border: 0; padding: 8px; gap: 10px; }
.display-stage .score-ticket .fresh-metric { border-right: 2px dashed var(--charcoal-muted); border-radius: 0; }
.display-stage .score-ticket .metric-label { font-size: 29px; }
.display-stage .score-ticket .metric-value { font-size: 43px; }
.display-stage .score-ticket .board-metric > img { width: 50px; height: 75px; box-shadow: none; }
.display-stage .score-ticket .aged-metric { grid-template-columns: auto auto; grid-auto-flow: row; gap: 7px 18px; }
.display-stage .cellar-slots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 14px; }
.display-stage .cellar-slot { width: 38px; height: 55px; border: 2px dashed #625e5580; border-radius: 3px 6px 2px 4px; }
.display-stage .cellar-slot.is-filled { border: 0; transform: rotate(-5deg); }
.display-stage .cellar-slot:nth-child(2).is-filled { transform: rotate(4deg); }
.display-stage .cellar-slot img { width: 100%; height: 100%; object-fit: contain; box-shadow: none; }
.display-stage .score-ticket.active { border-color: var(--charcoal-ink); box-shadow: 5px 7px 0 var(--charcoal-ink); }
.display-stage .score-ticket.active .board-title strong { color: var(--charcoal-sheet); }
.display-stage .score-ticket.status-danger .board-turn-state { font-weight: 900; text-decoration: underline wavy; text-underline-offset: 6px; }
.display-stage .score-ticket.status-winner .board-turn-state { color: var(--charcoal-ink); }
@media (prefers-reduced-motion: reduce) {
  [data-visual-style="loose-charcoal"] * { animation: none !important; transition: none !important; }
}

/* User-directed material pass: authentic charcoal strokes, black halo, card stock. */
.controller-stage[data-visual-style] :is(.host-intro,.join-card,.waiting-crest,.host-wait,.access-error-view > div,
  .mobile-header b,.count-picker,.team-name-inputs label,.team-status,.wine-counts b,.action-hint,
  .catch-view p,.mobile-catch-timer,.target-sheet,.target-option,.finish-view > span,.toast,.join-card input,
  .waiting-crest > b,button:not(.hand-card)) {
  border-style: solid;
  border-color: transparent;
  border-image-source: url('/assets/optimized/charcoal-frame-v1-1254.webp');
  border-image-slice: 160;
  border-image-width: 18px;
  border-image-outset: 8px;
  border-image-repeat: stretch;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: none;
}
.controller-stage[data-visual-style] .count-picker button { border-image: none; border: 0; }
.display-stage[data-visual-style] :is(.action-summary,.score-ticket,.public-counters span,.public-pile b,
  .action-separator,.table-empty,.lobby-code,.catch-overlay,.catch-timer) {
  border-style: solid;
  border-color: transparent;
  border-image-source: url('/assets/optimized/charcoal-frame-v1-1254.webp');
  border-image-slice: 160;
  border-image-width: 32px;
  border-image-outset: 14px;
  border-image-repeat: stretch;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: none;
}
.display-stage[data-visual-style] :is(.public-counters span,.public-pile b,.action-separator,.catch-timer) { border-image-width: 24px; border-image-outset: 10px; }
.display-stage[data-visual-style] .cellar-slot:not(.is-filled) {
  border: 0; border-image: url('/assets/optimized/charcoal-frame-v1-1254.webp') 160 / 10px / 3px stretch; opacity: .45;
}
.display-stage[data-visual-style] .score-ticket.active,
.display-stage[data-visual-style] .score-ticket.threatened {
  outline: none; box-shadow: none; animation: none;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, .85)) drop-shadow(0 0 30px rgba(0, 0, 0, .5));
}
.display-stage[data-visual-style] .score-ticket.status-danger .board-turn-state { text-decoration: none; color: var(--charcoal-ink); }
/* Card faces are untouched. Only the physical cut edge and layered stock sit outside. */
[data-visual-style] :is(.hand-card,.table-card,.public-pile > img,.catch-art img,.catch-thief,.finish-wines img,.winner-wines img,.waiting-crest img) {
  padding: 3px;
  border: 1px solid #fff9ec;
  border-radius: 2px;
  background: #fbf4e6;
  object-fit: contain;
  box-shadow: 1px 1px 0 #e5d9c3, 2px 2px 0 #c9b995, 3px 3px 0 #eee1c8,
    4px 4px 0 #b7a789, 5px 5px 0 #e5d9c3, 6px 6px 0 #a9987b, 8px 10px 7px #00000042;
}
.controller-stage[data-visual-style] .hand-card.selected { outline-style: solid; outline-width: 3px; outline-offset: 7px; }