/* BBQ-Design „Glut und Leinen“
   Anthrazit wie Gusseisen, Grillrost in der Brettmitte mit Glut von unten, Leinen-Beige, Glut-Orange als Akzent.
   Alles steht unter :root[data-theme="bbq"], das klassische Aussehen bleibt unberuehrt. Nur CSS bis Chrome 94. */
:root[data-theme="bbq"] {
  --bg: #151413;
  --surface: #1e1c1a;
  --raised: #282523;
  --line: #3b3632;
  --ink: #f0e7d7;
  --ink-2: #c4b8a6;
  --ink-3: #8f8576;
  --gold: #f08d3e;
  --plus: #9fcf7a;
  --minus: #f2665a;
  --paper: #ede3cf;
  --cell: #e9e0cc;
  --board-ink: #221f1c;
  --felt: #1a1918;
  --bbq-felt-hi: #2c2826;
  --bbq-weave: transparent;
  --bbq-frame: #d98a4c;
  --bbq-gold-2: #f6a660;
  --bbq-on-gold: #2a1205;
  --bbq-gold-soft: #f08d3e2e;
  --bbq-hover: #322e2b;
  --bbq-bar: #151413ee;
  --bbq-chip: #1f1c1af0;
  --bbq-veil-1: #15141399;
  --bbq-veil-2: #151413e6;
  --bbq-c-ink: #efe4d2;
  --bbq-c-ink-2: #cdbfa9;
  --bbq-c-ink-3: #a08f78;
  --bbq-cell-hover: #f4ecdb;
  --bbq-page: radial-gradient(70% 55% at 22% 108%, #6a2c1038 0, #0000 70%), radial-gradient(90% 70% at 70% -10%, #2a2725 0, #151413 60%);
  --bbq-centre: radial-gradient(65% 45% at 50% 100%, #ff7a2a40 0, #ff7a2a14 50%, #0000 75%), radial-gradient(120% 100% at 50% 50%, #0000 50%, #00000066 100%), repeating-linear-gradient(90deg, #0000 0 calc(6.25% - 7px), #0f0e0d calc(6.25% - 7px) calc(6.25% - 5px), #2b2825 calc(6.25% - 5px) calc(6.25% - 3.500px), #22201d calc(6.25% - 3.500px) 6.25%);
}

/* ---- Gemeinsam: feste Gruentoene aus app.css auf die Design-Farben umstellen ---- */
:root[data-theme="bbq"] body { background: var(--bbq-page); background-attachment: fixed; }
:root[data-theme="bbq"] .btn:hover { background: var(--bbq-hover); }
:root[data-theme="bbq"] .btn.primary:hover { background: var(--bbq-gold-2); }
:root[data-theme="bbq"] .btn.primary, :root[data-theme="bbq"] .seg button.on, :root[data-theme="bbq"] .toggle.on, :root[data-theme="bbq"] .iconbtn.on, :root[data-theme="bbq"] .tag.turn, :root[data-theme="bbq"] .aucpill, :root[data-theme="bbq"] .soundhint, :root[data-theme="bbq"] .statchip.live, :root[data-theme="bbq"] .dice button:active { color: var(--bbq-on-gold); }
:root[data-theme="bbq"] .tk.bank { background: var(--raised); }
:root[data-theme="bbq"] .tag.lead { box-shadow: inset 0 0 0 1px var(--gold); }
:root[data-theme="bbq"] .bar, :root[data-theme="bbq"] .replaybar { background: var(--bbq-bar); }
:root[data-theme="bbq"] .c-timer, :root[data-theme="bbq"] .go-pill, :root[data-theme="bbq"] .fx-pill, :root[data-theme="bbq"] .los-card, :root[data-theme="bbq"] .fx-heir { background: var(--bbq-chip); }
:root[data-theme="bbq"] .fx-back { background: radial-gradient(circle, var(--raised) 0, var(--bg) 75%); box-shadow: 0 0 0 calc(var(--cq) * .3) var(--bbq-gold-soft); }
:root[data-theme="bbq"] .los-fx { background: radial-gradient(circle, var(--bbq-veil-1) 0, var(--bbq-veil-2) 70%); }
:root[data-theme="bbq"] .tv .board { box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 7) #000b, 0 0 0 2px var(--bbq-gold-soft); }
:root[data-theme="bbq"] .prow.turn { box-shadow: 0 0 0 1px var(--gold), 0 0 calc(var(--u) * 2.400) var(--bbq-gold-soft); }
:root[data-theme="bbq"] .who button.on, :root[data-theme="bbq"] .dealtile.on, :root[data-theme="bbq"] .dealrow.on, :root[data-theme="bbq"] .mebanner.hot, :root[data-theme="bbq"] .dev.pending { background: var(--bbq-gold-soft); }
:root[data-theme="bbq"] .keypad button:active, :root[data-theme="bbq"] .cardrow:active, :root[data-theme="bbq"] .seatbid:active, :root[data-theme="bbq"] .rollbtn:active { background: var(--bbq-gold-soft); }
:root[data-theme="bbq"] .housepick, :root[data-theme="bbq"] .rule.houserule { border-color: var(--bbq-gold-soft); }
:root[data-theme="bbq"] .dl-free { background: var(--paper); }
/* Brettmitte: Texte */
:root[data-theme="bbq"] .c-sub, :root[data-theme="bbq"] .c-roll, :root[data-theme="bbq"] .c-bids, :root[data-theme="bbq"] .dl-who small { color: var(--bbq-c-ink-2); }
:root[data-theme="bbq"] .c-flow, :root[data-theme="bbq"] .c-tx span { color: var(--bbq-c-ink); }
:root[data-theme="bbq"] .c-txlabel { color: var(--bbq-c-ink-3); }
/* Brett: Felder bleiben wie im Original, nur das Papier wird waermer; Besitzfarben unberuehrt */
:root[data-theme="bbq"] .board .cell:not(.owned) .f-bg { fill: var(--cell); }
:root[data-theme="bbq"] .board .cell[role="button"]:not(.owned):hover .f-bg { fill: var(--bbq-cell-hover); }
/* Brettmitte: SVG-Filz aus board.js ausblenden, Filz und Deko als Ebene unter dem SVG (Figuren bleiben oben) */
:root[data-theme="bbq"] .board-wrap { z-index: 0; border-radius: 10px; background: #111; }
:root[data-theme="bbq"] .board .b-edge, :root[data-theme="bbq"] .board > rect:nth-of-type(2), :root[data-theme="bbq"] .board > rect:nth-of-type(3) { fill: transparent; }
:root[data-theme="bbq"] .board > rect:nth-of-type(4) { stroke: var(--bbq-frame); stroke-opacity: .5; }
:root[data-theme="bbq"] .board > rect:nth-of-type(5) { stroke: var(--bbq-frame); stroke-opacity: .2; }
:root[data-theme="bbq"] .board-wrap::before { content: ""; position: absolute; top: 13.64%; left: 13.64%; right: 13.64%; bottom: 13.64%; z-index: -1; pointer-events: none; background: var(--bbq-centre), radial-gradient(75% 75% at 50% 42%, var(--bbq-felt-hi), var(--felt)); }

/* ---- Deko: Schriftzug und Karte ---- */
/* Schriftzug wie Glut, ohne Schimmer-Animation */
:root[data-theme="bbq"] .c-mark { background: linear-gradient(180deg, #ffd6a0 0%, #f59a4a 48%, #c4501e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: none; }
/* Karte: Leinen mit Glut-Streifen */
:root[data-theme="bbq"] .c-card.themed { color: #2c2218; border-radius: calc(var(--cq) * .5); padding-top: calc(var(--cq) * 1.600);
  background: repeating-linear-gradient(0deg, #ffffff14 0 1px, #0000 1px 3px), repeating-linear-gradient(90deg, #6a50300f 0 1px, #0000 1px 3px), #eee4d0;
  box-shadow: inset 0 calc(var(--cq) * .6) 0 var(--gold), inset 0 0 calc(var(--cq) * 1.600) #7a4a2026, 0 calc(var(--cq) * 1) calc(var(--cq) * 3) #000c, 0 0 calc(var(--cq) * 5) #f08d3e1f; }
:root[data-theme="bbq"] .c-card.themed small { color: #b0521c; }
:root[data-theme="bbq"] .c-card.themed.chest { box-shadow: inset 0 calc(var(--cq) * .6) 0 #6f8a8f, inset 0 0 calc(var(--cq) * 1.600) #4a5a5c26, 0 calc(var(--cq) * 1) calc(var(--cq) * 3) #000c; }
:root[data-theme="bbq"] .c-card.themed.chest small { color: #4f6c72; }