/* ==========================================================================
   The Game – Anthrazit-Filz, dunkler Karton mit Kupferdruck
   ========================================================================== */
.tg, .tg-card, .tg-face { --copper: #d0843f; --copper-2: #e7b071; --rust: #b9442f; }
.tg { position: absolute; inset: 6px 8px 8px; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; overflow: hidden; color: #f1e7d4; container-type: inline-size; }
.tg.table { padding: 12px 24px 22px; gap: 18px; }

.tg-rail { flex: none; margin: 0 -4px; }

/* Stapel; darunter der Nachziehstapel (Karten fliegen von dort auf die Hand) */
.tg-pilesWrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.tg-piles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: min(520px, calc((100dvh - 560px) * 2.86)); margin: 0 auto 8px; }
.tg-deck { position: relative; flex: none; width: clamp(38px, 11cqw, 54px); aspect-ratio: 5 / 7; transition: opacity .3s; }
.tg-deck .bk { position: absolute; inset: 0; border-radius: 7px; background: var(--grain), repeating-linear-gradient(45deg, #2a2320 0 5px, #241e1b 5px 10px); box-shadow: inset 0 0 0 1.5px var(--copper), 2px 2px 0 #14100e, 4px 4px 0 #0d0a09, 0 10px 14px -6px rgba(0, 0, 0, .6); }
.tg-deck.empty .bk { background: none; box-shadow: inset 0 0 0 1.5px rgba(208, 132, 63, .35); }
.tg-deck.empty .pile-cnt { opacity: .6; }
.tg-pile { position: relative; width: 100%; aspect-ratio: 5 / 7; container-type: inline-size; border-radius: 10px; cursor: pointer; transition: transform .25s var(--spring), filter .2s, opacity .2s; }
.tg-face, .tg-card { position: relative; overflow: hidden; border-radius: 10px; background: var(--grain), linear-gradient(170deg, #34302c, #211d1a); box-shadow: inset 0 0 0 2px #46403a, 0 3px 6px rgba(0, 0, 0, .45), 0 10px 16px -8px rgba(0, 0, 0, .6); }
.tg-face::after, .tg-card::after { content: ""; position: absolute; inset: 6cqw; border-radius: 6%; border: .8cqw solid rgba(208, 132, 63, .35); pointer-events: none; }
.tg-pile .tg-face { position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--edge), 3px 4px 0 -1px #15110f, 6px 7px 0 -2px #0f0c0a, 0 14px 18px -8px rgba(0, 0, 0, .7); }
.tg-pile.up { --edge: var(--copper); } .tg-pile.down { --edge: var(--rust); }
.tg-arrows { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.up .tg-arrows { top: 10cqw; } .down .tg-arrows { bottom: 10cqw; }
.tg-arrows svg { width: 22cqw; height: 8cqw; margin-bottom: -2cqw; }
.up .tg-arrows svg { color: var(--copper); } .down .tg-arrows svg { color: var(--rust); }
.tg-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 42cqw/1 var(--display); font-variation-settings: "opsz" 144, "SOFT" 20; letter-spacing: -.04em; color: var(--copper-2); }
.tg-n.t3 { font-size: 32cqw; }
.tg-cap { position: absolute; left: 0; right: 0; text-align: center; font: 800 7.5cqw var(--text); letter-spacing: .16em; color: #a8988a; text-transform: uppercase; }
.up .tg-cap { bottom: 9cqw; } .down .tg-cap { top: 9cqw; }
.tg-pile.ok { transform: translateY(-5px); }
.tg-pile.ok .tg-face { box-shadow: inset 0 0 0 2px var(--edge), 0 0 0 3px var(--mustard), 0 16px 22px -8px rgba(0, 0, 0, .7); }
.tg-pile.no { opacity: .35; filter: saturate(.3); }
.tg-pile.hover { transform: scale(1.07) rotate(-1deg); }
.tg-pile.pop .tg-face { animation: tgPop .5s var(--spring); }
@keyframes tgPop { 0% { transform: translate(-10px, -30px) rotate(-10deg) scale(.85); } 100% { transform: none; } }
.tg-pile.markmode { animation: tgWobble 1.2s ease-in-out infinite; }
@keyframes tgWobble { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
.tg-tag { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); z-index: 3; white-space: nowrap; background: var(--grain), var(--mustard); color: #2b1d08; font: 800 10.5px var(--text); padding: 3px 8px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.tg-trick { position: absolute; left: 50%; top: 30%; z-index: 4; transform: translateX(-50%); padding: 4px 10px; border-radius: 4px; background: var(--grain), var(--paper); color: var(--ink); font: 800 13px var(--display); pointer-events: none; animation: tgTrick 1.6s var(--ease) forwards; white-space: nowrap; box-shadow: var(--shadow-1); }
@keyframes tgTrick { 0% { opacity: 0; transform: translate(-50%, 10px) rotate(-6deg) scale(.7); } 20% { opacity: 1; transform: translate(-50%, 0) rotate(-3deg) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -44px) rotate(-3deg); } }
.tg-marks { position: absolute; left: 0; right: 0; bottom: -15px; z-index: 3; display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; }
.tg-mark { display: flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border-radius: 99px; color: #fff6ea; background: var(--rust); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); animation: popIn .35s var(--spring); }
.tg-mark.good { background: var(--teal); }
.tg-mark .av { --s: 18px; }
.tg-mark .ic { width: 15px; height: 15px; stroke-width: 2.1; }

/* Zug beenden: Punkte = gelegte / nötige Karten */
.tg-pips { display: inline-flex; gap: 5px; margin-left: 10px; }
.tg-pips i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 246, 234, .6); }
.tg-pips i.on { background: #fff6ea; box-shadow: none; }
.btn.end .av { --s: 26px; }
.tg-back { width: 100%; height: 100%; border-radius: 10px; background: var(--grain), repeating-linear-gradient(45deg, #2a2320 0 6px, #241e1b 6px 12px); box-shadow: inset 0 0 0 2px var(--copper); }
.tg-pile.tg-land .tg-face { animation: tgLand .4s var(--spring); }
@keyframes tgLand { 40% { transform: scale(1.06) rotate(-1deg); } }

/* Hand */
/* Hand: Platz für zwei Reihen ist immer reserviert – die Stapel darüber bleiben stehen, wenn nur noch eine Reihe übrig ist */
.tg-hand { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 8px; touch-action: none; padding-top: 4px; max-width: 520px; width: 100%; margin: 0 auto;
  min-height: calc((min(520px, 100cqw) - 24px) * .7 + 12px); }
.tg-card { aspect-ratio: 5 / 7; container-type: inline-size; cursor: grab; touch-action: none; transition: transform .2s var(--spring), opacity .2s, box-shadow .2s; }
.tg-card .tg-n { font-size: 42cqw; } .tg-card .tg-n.t3 { font-size: 32cqw; }
.tg-card .c { position: absolute; font: 800 14cqw/1 var(--display); color: #a8988a; font-style: normal; z-index: 2; }
.tg-card .c1 { top: 10cqw; left: 12cqw; } .tg-card .c2 { bottom: 10cqw; right: 12cqw; transform: rotate(180deg); }
.tg-card .st { position: absolute; right: 10cqw; top: 9cqw; z-index: 2; padding: 1cqw 3cqw; border-radius: 2cqw; font: 800 10cqw/1 var(--text); color: #2b1d08; background: var(--mustard); }
.tg-card.sel { transform: translateY(-12px) rotate(-2deg); box-shadow: inset 0 0 0 2px var(--copper), 0 0 0 3px var(--mustard), 0 18px 22px -8px rgba(0, 0, 0, .7); }
.tg-card.dead { opacity: .45; }
.tg-card.held { opacity: .2; }
.tg-card.deal { animation: fxDeal .5s var(--spring) backwards; }
.tg-card.wait { cursor: default; }
.tg-ghost { position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -75%) scale(1.1) rotate(-5deg); box-shadow: inset 0 0 0 2px var(--copper), 0 0 0 3px var(--mustard), 0 24px 40px rgba(0, 0, 0, .6); }

.tg-actions { flex: none; display: flex; gap: 8px; padding-top: 6px; max-width: 520px; width: 100%; margin: 0 auto; }
.tg-actions .btn { flex: 1; }
.tg-actions .btn.mark { flex: none; }
.tg-actions .btn[hidden] { display: none; }
.tg-actions .btn.mark.on { --bg: var(--teal); --fg: #f1fbf8; --edge: var(--teal-d); }

/* Tisch */
.tg.table .tg-deck { width: clamp(54px, 6cqw, 84px); }
.tg.table .tg-piles { max-width: min(1100px, 130vh); gap: clamp(16px, 3vw, 40px); }
.tg.table .tg-pile { cursor: default; }
.tg.table .tg-marks { bottom: -22px; }
.tg.table .tg-mark .av { --s: 30px; } .tg.table .tg-mark .ic { width: 22px; height: 22px; }
.tg.table .tg-trick { font-size: 24px; }

@media (max-height: 680px) {
  .tg-hand { gap: 6px; min-height: calc((min(520px, 100cqw) - 18px) * .7 + 10px); } .tg-piles { gap: 8px; }
}

/* Tisch-Physik: frühere Karten liegen sichtbar unter der obersten */
.tg-under { position: absolute; inset: 0; }
.tg-under .pile-under .tg-card { border-radius: 10px; }