/* ==========================================================================
   Truhen-Deal (Solo-Spiel „deal“) – Tisch aus js/truhen-deal.js (.td-*), Pixelgrafiken als SVG-Symbole.
   JS-Verträge: .td[data-phase=idle|pick|open|offer|final|done][data-result]; .td-chest.is-closed|.is-open|.is-own|.is-live;
   .is-new + --k = geht mit Verzögerung k × --td-step auf (Truhe, Betrag auf der Tafel, Sprechblase); .td-val.is-gone;
   #actionRow.td-wait + --k = Knöpfe erscheinen erst nach dem Aufdecken.
   Bewegungen nur transform/opacity, nie an prefers-reduced-motion gekoppelt (Inhaber-Entscheidung).
   ========================================================================== */
body.tc-redesign.tc-max #gameOverlay .theater-table.theme-deal { --world: var(--mx-gold) !important; --scene: url('/assets/games/deal.svg'); }
body.tc-redesign.tc-max #siteMain #game-deal { --card-accent: #ffc93c; }

#gameOverlay .td {
  --td-step: 430ms;
  --td-wood: #3a2714;
  --td-ink: #0d0f18;
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 14px 16px 12px;
  border: 3px solid var(--td-ink);
  border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #2c1e12, #20150c);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .08), inset -2px -2px 0 rgba(0, 0, 0, .4), 0 26px 54px -28px rgba(0, 0, 0, .9);
  color: var(--mx-text, #f2f5fb);
  font-family: var(--mx-font-body, 'Onest'), system-ui, sans-serif;
  container-type: inline-size;
  container-name: td;
}
#gameOverlay .td-px { display: block; width: 100%; height: 100%; image-rendering: pixelated; shape-rendering: crispEdges; }

/* ------------------------------------------------------------ Händler und Sprechblase */
#gameOverlay .td-trader { display: flex; align-items: center; gap: 12px; min-height: 76px; }
#gameOverlay .td-face {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  padding: 4px;
  border: 3px solid var(--td-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #6fb2ea, #4b86c7);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .3), inset -2px -2px 0 rgba(0, 0, 0, .28);
}
#gameOverlay .td-say {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-width: 0;
  padding: 10px 14px 11px;
  border: 3px solid var(--td-ink);
  border-radius: 8px;
  background: #f4e8c8;
  box-shadow: inset 0 -4px 0 rgba(120, 84, 30, .22);
  color: #2b1d0d;
}
#gameOverlay .td-say::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-left: 3px solid var(--td-ink);
  border-bottom: 3px solid var(--td-ink);
  background: #f4e8c8;
  transform: translateY(-50%) rotate(45deg);
}
#gameOverlay .td-say-name { flex-basis: 100%; color: #8a5a17; font: 700 11px/1.2 var(--mx-font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; }
#gameOverlay .td-say-text { font: 600 15px/1.35 var(--mx-font-body, sans-serif); }
#gameOverlay .td-offer { color: #0b6a3c; font: 800 30px/1 var(--tg-num, var(--mx-font-display, sans-serif)); font-variant-numeric: tabular-nums; white-space: nowrap; }
#gameOverlay .td-result {
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
  justify-items: end;
  padding: 9px 14px 10px;
  border: 3px solid var(--td-ink);
  border-radius: 8px;
  background: rgba(12, 10, 22, .9);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .12), inset -2px -2px 0 rgba(0, 0, 0, .4);
}
#gameOverlay .td-result span { color: var(--mx-text-2, #a9b5ce); font: 700 11px/1 var(--mx-font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; }
#gameOverlay .td-result b { font: 800 26px/1 var(--tg-num, var(--mx-font-display, sans-serif)); font-variant-numeric: tabular-nums; white-space: nowrap; }
#gameOverlay .td-result.is-win b { color: var(--mx-gold, #ffc93c); }
#gameOverlay .td-result.is-part b { color: #e6edf9; }
#gameOverlay .td-result.is-lose b { color: #ff8b96; }

/* ------------------------------------------------------------ Tisch: Tafel links/rechts, Truhen in der Mitte */
#gameOverlay .td-table { display: grid; grid-template-columns: minmax(96px, 132px) minmax(0, 1fr) minmax(96px, 132px); gap: 14px; align-items: center; }
#gameOverlay .td-vals { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#gameOverlay .td-val {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px 8px;
  border: 2px solid var(--td-ink);
  border-radius: 6px;
  background: #223152;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .12), inset -2px -2px 0 rgba(0, 0, 0, .35);
  color: #d6e4ff;
  font: 800 18px/1 var(--tg-num, var(--mx-font-display, sans-serif));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#gameOverlay .td-val.is-high { background: #6a4a0c; color: #ffe08a; }
#gameOverlay .td-val.is-top { background: linear-gradient(180deg, #ffd65a, #e9a81c); color: #2a1a00; }
#gameOverlay .td-val::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
#gameOverlay .td-val.is-gone { opacity: .3; }
#gameOverlay .td-val.is-won { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .2), 0 0 0 3px var(--mx-gold, #ffc93c), 0 0 18px -2px rgba(255, 201, 60, .7); }
#gameOverlay .td-val.is-gone::after { transform: scaleX(1); }
#gameOverlay .td-val.is-gone.is-new { animation: tdGone .3s ease-out calc(var(--k, 0) * var(--td-step) + 160ms) both; }
#gameOverlay .td-val.is-gone.is-new::after { animation: tdStrike .26s ease-out calc(var(--k, 0) * var(--td-step) + 160ms) both; }

#gameOverlay .td-chests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; justify-items: center; }
#gameOverlay .td-chest {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  max-width: 112px;
  min-height: 0;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  cursor: default;
  opacity: 1;
  transition: transform .14s cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
#gameOverlay .td-chest-art { position: relative; display: block; width: 100%; aspect-ratio: 1; }
#gameOverlay .td-chest-art .td-px { position: absolute; inset: 0; }
#gameOverlay .td-chest .td-art-open { opacity: 0; }
#gameOverlay .td-chest.is-open .td-art-closed { opacity: 0; }
#gameOverlay .td-chest.is-open .td-art-open { opacity: .6; }
#gameOverlay .td-chest-no {
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 26px;
  padding: 3px 6px 2px;
  border: 2px solid var(--td-ink);
  border-radius: 5px;
  background: #1a2238;
  color: #dfe7f7;
  font: 800 14px/1 var(--tg-num, var(--mx-font-display, sans-serif));
  text-align: center;
  transform: translateX(-50%);
}
#gameOverlay .td-chest.is-open .td-chest-no { opacity: .55; }
#gameOverlay .td-chest-val {
  position: absolute;
  left: 50%;
  top: 4%;
  padding: 3px 7px 2px;
  border: 2px solid var(--td-ink);
  border-radius: 6px;
  background: #223152;
  color: #d6e4ff;
  font: 800 17px/1 var(--tg-num, var(--mx-font-display, sans-serif));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
  z-index: 2;
}
#gameOverlay .td-chest.is-high .td-chest-val { background: #6a4a0c; color: #ffe08a; }
#gameOverlay .td-chest.is-top .td-chest-val { background: linear-gradient(180deg, #ffd65a, #e9a81c); color: #2a1a00; }
#gameOverlay .td-chest-tag {
  position: absolute;
  left: 50%;
  top: -7px;
  padding: 3px 7px 2px;
  border: 2px solid var(--td-ink);
  border-radius: 5px;
  background: var(--mx-gold, #ffc93c);
  color: #2a1a00;
  font: 800 10.5px/1 var(--mx-font-body, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateX(-50%);
  z-index: 3;
}
#gameOverlay .td-chest.is-own.is-open .td-chest-tag { top: auto; bottom: 22px; }
#gameOverlay .td-chest.is-own::before {
  content: '';
  position: absolute;
  inset: -5px -5px -3px;
  border: 3px solid var(--mx-gold, #ffc93c);
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 22px -4px rgba(255, 201, 60, .7);
  pointer-events: none;
}
#gameOverlay .td-chest.is-own.is-open .td-art-open { opacity: 1; }
#gameOverlay .td-chest.is-own.is-open .td-chest-val { top: 2%; font-size: 20px; }

/* Anklickbar: Truhe hebt sich, wippt beim Wählen leicht */
#gameOverlay .td-chest.is-live { cursor: pointer; }
#gameOverlay .td-chest.is-live:hover, #gameOverlay .td-chest.is-live:focus-visible { transform: translateY(-5px); outline: none; }
#gameOverlay .td-chest.is-live:focus-visible .td-chest-no { background: var(--mx-gold, #ffc93c); color: #2a1a00; }
#gameOverlay .td-chest.is-live:active { transform: translateY(-1px) scale(.97); }
#gameOverlay .td[data-phase="pick"] .td-chest.is-live .td-chest-art { animation: tdBob 1.6s ease-in-out calc(var(--b, 0) * -1s) infinite; }
#gameOverlay .td[data-phase="pick"] .td-chest:nth-child(3n + 1) { --b: .5; }
#gameOverlay .td[data-phase="pick"] .td-chest:nth-child(3n + 2) { --b: 1.1; }
/* Angebot liegt auf dem Tisch: die Truhen warten */
#gameOverlay .td[data-phase="offer"] .td-chest.is-closed .td-chest-art,
#gameOverlay .td[data-phase="final"] .td-chest.is-closed .td-chest-art { opacity: .82; }

/* Frisch geöffnet: erst nach k Schritten wechselt das Bild, dann springt der Betrag heraus */
#gameOverlay .td-chest.is-open.is-new .td-art-closed { animation: tdHide 1ms linear calc(var(--k, 0) * var(--td-step)) both; }
#gameOverlay .td-chest.is-open.is-new .td-art-open { animation: tdLid .28s cubic-bezier(.3, 1.5, .5, 1) calc(var(--k, 0) * var(--td-step)) both; }
#gameOverlay .td-chest.is-own.is-open.is-new .td-art-open { animation-name: tdLidOwn; }
#gameOverlay .td-chest.is-open.is-new .td-chest-val { animation: tdVal .34s cubic-bezier(.3, 1.5, .5, 1) calc(var(--k, 0) * var(--td-step) + 110ms) both; }
#gameOverlay .td-chest.is-open.is-new .td-chest-no { animation: tdDim .2s linear calc(var(--k, 0) * var(--td-step)) both; }
#gameOverlay .td-say.is-new { animation: tdSay .3s cubic-bezier(.3, 1.4, .5, 1) calc(var(--k, 0) * var(--td-step) + 140ms) both; }
#gameOverlay .td-result.is-new { animation: tdSay .34s cubic-bezier(.3, 1.5, .5, 1) 1.1s both; }
#gameOverlay .td-chest.is-result .td-chest-art { animation: tdWin 1s ease-in-out 1.2s 2 both; }
#gameOverlay #actionRow.td-wait #gameActions > * { animation: tdBtn .26s ease-out calc(var(--k, 0) * 430ms + 200ms) both; }

@keyframes tdHide { from { opacity: 1; } to { opacity: 0; } }
@keyframes tdLid { from { opacity: 0; transform: translateY(6px) scale(.86); } to { opacity: .6; transform: none; } }
@keyframes tdLidOwn { from { opacity: 0; transform: translateY(6px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes tdVal { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.5); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes tdDim { from { opacity: 1; } to { opacity: .55; } }
@keyframes tdGone { from { opacity: 1; } to { opacity: .3; } }
@keyframes tdStrike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tdSay { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tdBob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@keyframes tdWin { 0%, 100% { transform: none; } 50% { transform: translateY(-6px) scale(1.06); } }
@keyframes tdBtn { from { opacity: 0; visibility: hidden; transform: translateY(6px); } to { opacity: 1; visibility: visible; transform: none; } }

/* ------------------------------------------------------------ Fußzeile: Runden und Hinweis */
#gameOverlay .td-foot { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 22px; color: rgba(242, 232, 208, .82); font: 600 13px/1.3 var(--mx-font-body, sans-serif); text-align: center; }
#gameOverlay .td-steps { display: flex; gap: 5px; }
#gameOverlay .td-step { width: 18px; height: 8px; border: 2px solid var(--td-ink); border-radius: 3px; background: rgba(255, 255, 255, .12); }
#gameOverlay .td-step.is-done { background: #8a6a2a; }
#gameOverlay .td-step.is-now { background: var(--mx-gold, #ffc93c); }

/* ------------------------------------------------------------ Optionen: Spielart */
#gameOverlay .td-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
#gameOverlay .td-mode {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  gap: 3px;
  min-height: 0;
  margin: 0;
  padding: 9px 8px 8px;
  border: 2px solid var(--mx-line, #28365a);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--mx-text, #f2f5fb);
  text-align: center;
  cursor: pointer;
  transition: border-color .14s, background-color .14s, transform .14s;
}
#gameOverlay .td-mode b { font: 800 15px/1.1 var(--mx-font-body, sans-serif); }
#gameOverlay .td-mode span { color: var(--mx-text-2, #a9b5ce); font: 600 11.5px/1.25 var(--mx-font-body, sans-serif); }
#gameOverlay .td-mode:hover { border-color: rgba(255, 201, 60, .55); }
#gameOverlay .td-mode:active { transform: scale(.97); }
#gameOverlay .td-mode.is-on { border-color: var(--mx-gold, #ffc93c); background: rgba(255, 201, 60, .14); }
#gameOverlay .td-mode.is-on span { color: #ffe08a; }

/* ------------------------------------------------------------ Schmaler Tisch: Tafel über und unter den Truhen */
@container td (max-width: 620px) {
  #gameOverlay .td-table { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #gameOverlay .td-vals { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  #gameOverlay .td-val { min-height: 30px; padding: 3px 2px; font-size: 14px; }
  #gameOverlay .td-chests { gap: 12px 8px; }
  #gameOverlay .td-chest { max-width: 92px; }
  #gameOverlay .td-chest-val { font-size: 14px; padding: 2px 5px; }
  #gameOverlay .td-chest.is-own.is-open .td-chest-val { font-size: 16px; }
  #gameOverlay .td-chest-tag { font-size: 9.5px; padding: 2px 5px; }
}
@container td (max-width: 460px) {
  #gameOverlay .td-trader { gap: 8px; min-height: 64px; flex-wrap: wrap; }
  #gameOverlay .td-face { width: 52px; height: 52px; padding: 3px; }
  #gameOverlay .td-say { padding: 8px 10px 9px; flex-basis: 0; }
  #gameOverlay .td-say-text { font-size: 13.5px; }
  #gameOverlay .td-offer { font-size: 25px; }
  #gameOverlay .td-result { flex-basis: 100%; justify-items: center; grid-auto-flow: column; align-items: baseline; gap: 10px; padding: 7px 12px; }
  #gameOverlay .td-result b { font-size: 22px; }
  #gameOverlay .td-val { font-size: 12.5px; }
  #gameOverlay .td-foot { flex-direction: column; gap: 5px; }
}
/* Handy: Der Tisch wird nicht verkleinert, sondern gescrollt – sonst wären die Truhen zu klein zum Antippen.
   (immersive.js setzt zoom/width inline; hier bewusst überstimmt.) */
@media (max-width: 560px) {
  body.tc-redesign #gameOverlay .theater-table.theme-deal #gameBoard { overflow-x: hidden !important; overflow-y: auto !important; align-items: flex-start !important; }
  body.tc-redesign #gameOverlay .theater-table.theme-deal .tc-stage-content { zoom: 1 !important; width: 100% !important; }
  #gameOverlay .td { gap: 9px; padding: 10px 9px 9px; }
}