/* 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 ---- */
/* 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; }
/* ---- Karten: Picknickdecke ----
   Leise Karos wie eine Picknickdecke, Kopfband in Randfarbe mit Kartentitel und Symbol. */
:root[data-theme="bbq"] .c-card.themed.chance, :root[data-theme="bbq"] .fx-flip.chance { --edge: #f08d3e; --edge-deep: #a9501a; --edge-ink: #2a1205; --edge-soft: #f08d3e33; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1205' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2.5' fill='%232a1205' fill-opacity='.18'/%3E%3Cpath d='M9.8 9.5a2.3 2.3 0 1 1 3.7 1.8c-.9.6-1.5 1.2-1.5 2.2M12 16.8v.01'/%3E%3C/svg%3E"); --check: #f08d3e1c; --card-bg: repeating-linear-gradient(0deg, var(--check) 0 calc(var(--cq) * 1.300), #0000 0 calc(var(--cq) * 2.600)), repeating-linear-gradient(90deg, var(--check) 0 calc(var(--cq) * 1.300), #0000 0 calc(var(--cq) * 2.600)), #f2e9d6; }
:root[data-theme="bbq"] .c-card.themed.chest, :root[data-theme="bbq"] .fx-flip.chest { --edge: #3f7fbf; --edge-deep: #285c91; --edge-ink: #ffffff; --edge-soft: #3f7fbf3d; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11h16v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19z' fill='%23ffffff' fill-opacity='.18'/%3E%3Cpath d='M4 11V9a4.5 4.5 0 0 1 4.5-4.5h7A4.5 4.5 0 0 1 20 9v2M4 14h16M12 4.5V11'/%3E%3Crect x='10.4' y='12.5' width='3.2' height='4' rx='.8' fill='%23ffffff'/%3E%3C/svg%3E"); --check: #3f7fbf1c; --card-bg: repeating-linear-gradient(0deg, var(--check) 0 calc(var(--cq) * 1.300), #0000 0 calc(var(--cq) * 2.600)), repeating-linear-gradient(90deg, var(--check) 0 calc(var(--cq) * 1.300), #0000 0 calc(var(--cq) * 2.600)), #f2e9d6; }
/* Karte: ein Hintergrund fuer alle Karten, Rand orange (Ereignis) oder blau (Gemeinschaft). Gilt fuer die Karte in der Brettmitte und die grosse Karte beim Ziehen. */
:root[data-theme="bbq"] .c-card.themed { position: relative; min-width: 62%; max-width: 86%; padding: calc(var(--cq) * 1.400) calc(var(--cq) * 2.600) calc(var(--cq) * 1.800);
  border: calc(var(--cq) * .75) solid var(--edge); border-radius: calc(var(--cq) * 1.400); background: var(--card-bg); color: #21170d; transform: none;
  box-shadow: 0 calc(var(--cq) * 1.200) calc(var(--cq) * 3.500) #000d, 0 0 calc(var(--cq) * 5) var(--edge-soft); }
:root[data-theme="bbq"] .c-card.themed small { display: flex; align-items: center; justify-content: center; gap: calc(var(--cq) * .8); margin-bottom: calc(var(--cq) * .7);
  font: 700 calc(var(--cq) * 1.850) var(--sans); letter-spacing: .02em; color: var(--edge-deep); }
:root[data-theme="bbq"] .c-card.themed small::before, :root[data-theme="bbq"] .fx-front small::before { content: ""; flex: none; width: 1.450em; height: 1.450em; background: var(--icon) center / contain no-repeat; }
:root[data-theme="bbq"] .c-card.themed b { display: block; font: 600 calc(var(--cq) * 3.300)/1.220 var(--serif); color: #21170d; }
:root[data-theme="bbq"] .fx-flip .fx-front { border: calc(var(--cq) * .9) solid var(--edge); background: var(--card-bg); color: #21170d; }
:root[data-theme="bbq"] .fx-flip .fx-front small { display: flex; align-items: center; justify-content: center; gap: calc(var(--cq) * .8); color: var(--edge-deep); }
:root[data-theme="bbq"] .fx-flip .fx-front .fx-who { color: #21170d; }
:root[data-theme="bbq"] .fx-flip .fx-cover { border: calc(var(--cq) * .9) solid var(--edge); color: var(--edge-ink);
  background: radial-gradient(circle at 50% 42%, #fff3 0, #0000 55%), repeating-linear-gradient(45deg, var(--edge) 0 calc(var(--cq) * 1.400), var(--edge-deep) 0 calc(var(--cq) * 2.800)); }
:root[data-theme="bbq"] .c-card.themed { padding-top: 0; overflow: hidden; }
:root[data-theme="bbq"] .c-card.themed small { margin: 0 calc(var(--cq) * -2.600) calc(var(--cq) * 1.300); padding: calc(var(--cq) * .7) calc(var(--cq) * 2) calc(var(--cq) * .9); background: var(--edge); color: var(--edge-ink); }
:root[data-theme="bbq"] .fx-flip .fx-front { place-content: stretch; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; padding-top: 0; overflow: hidden; }
:root[data-theme="bbq"] .fx-flip .fx-front small { justify-self: stretch; margin: 0 calc(var(--cq) * -2.600); padding: calc(var(--cq) * .9) calc(var(--cq) * 2); background: var(--edge); color: var(--edge-ink); }