/* Ausbaustapel card table (zoom mode): face-down stacks on a wooden table, dealt cards, a close-up. */
.ctable { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px; animation: ct-in .35s ease-out; }
.ct-room { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(40, 26, 12, .55), rgba(8, 6, 4, .92) 75%); backdrop-filter: blur(4px); }
.ct-wood { position: relative; width: min(1180px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 26px; padding: 22px 26px 18px; overflow: hidden;
	background:
		repeating-linear-gradient(92deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 9px, rgba(255, 220, 160, .05) 9px 11px, transparent 11px 23px),
		repeating-linear-gradient(90deg, transparent 0 180px, rgba(0, 0, 0, .18) 180px 183px),
		radial-gradient(ellipse at 30% 20%, #8a5a33, transparent 60%),
		linear-gradient(180deg, #6e4424, #4a2c16);
	box-shadow: inset 0 0 0 3px #2d1a0c, inset 0 0 0 7px #a87a45, inset 0 0 0 9px #2d1a0c, inset 0 18px 40px rgba(255, 210, 150, .12), inset 0 -30px 60px rgba(0, 0, 0, .45), 0 30px 80px rgba(0, 0, 0, .7);
	color: #f3e6c7; transform-origin: 50% 60%; animation: ct-zoom .45s cubic-bezier(.2, .9, .3, 1.1); }
.ct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ct-head h2 { margin: 0; font-family: 'Cinzel', serif; font-size: 26px; color: #f0d48c; text-shadow: 0 2px 0 #2d1a0c; letter-spacing: .04em; }
.ct-head p { margin: 4px 0 0; font-family: 'Alegreya', serif; font-size: 16px; color: #ead9b4; max-width: 760px; }
.ct-head .x { background: rgba(0, 0, 0, .3); border: 1px solid #a87a45; color: #f3e6c7; width: 38px; height: 38px; border-radius: 50%; font-size: 24px; cursor: pointer; flex: none; }
.ct-felt { flex: 1; min-height: 0; overflow: auto; border-radius: 18px; padding: 26px 18px; background: radial-gradient(ellipse at 50% 35%, #2f5a43, #1d3a2b 70%, #142a1f); box-shadow: inset 0 0 0 2px rgba(196, 154, 82, .55), inset 0 8px 30px rgba(0, 0, 0, .55); }

/* face-down stacks */
.tc-stacks { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 34px 40px; padding: 30px 0 18px; }
.ts-wrap { position: relative; display: flex; flex-direction: column; align-items: center; transition: transform .25s; }
.ts-wrap.up { transform: translateY(-14px); }
.tstack { position: relative; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; font: inherit; color: inherit; }
.tstack:disabled, .tstack.off { cursor: default; opacity: .45; filter: grayscale(.5); }
.ts-pile { position: relative; display: block; width: 132px; height: 184px; }
.ts-pile::before { content: ''; position: absolute; inset: 0; border-radius: 12px; background: #e9dcb8; transform: translate(calc(var(--layers) * 1px), calc(var(--layers) * 2.2px)); box-shadow: 0 1px 0 #b9a77c, 0 2px 0 #e9dcb8, 0 3px 0 #b9a77c, 0 4px 0 #e9dcb8, 0 5px 0 #b9a77c, 0 14px 22px rgba(0, 0, 0, .55); }
.ts-back { position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
	background: radial-gradient(circle at 50% 50%, transparent 0 26px, rgba(240, 212, 140, .7) 27px 29px, transparent 30px 40px, rgba(240, 212, 140, .45) 41px 42px, transparent 43px),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px), linear-gradient(160deg, #8e2a1d, #5c160e);
	box-shadow: inset 0 0 0 5px #e9dcb8, inset 0 0 0 7px #c49a52, inset 0 0 0 9px #5c160e; transition: transform .2s, box-shadow .2s; }
.ts-back b { font-family: 'Cinzel', serif; font-size: 40px; color: #f0d48c; text-shadow: 0 2px 0 #3a0d07; }
.tstack:not(:disabled):not(.off):hover .ts-back { transform: translateY(-8px) rotate(-1.5deg); box-shadow: inset 0 0 0 5px #e9dcb8, inset 0 0 0 7px #f0d48c, inset 0 0 0 9px #5c160e, 0 0 26px rgba(240, 212, 140, .55); }
.ts-count { position: relative; z-index: 1; margin-top: 16px; font-family: 'Alegreya', serif; font-size: 15px; color: #ead9b4; background: rgba(0, 0, 0, .35); padding: 2px 10px; border-radius: 99px; }
.ts-taken { position: absolute; top: 76px; font-family: 'Cinzel', serif; font-size: 13px; background: rgba(0, 0, 0, .7); color: #f0d48c; padding: 4px 8px; border-radius: 6px; transform: rotate(-8deg); }
.ts-menu { position: absolute; top: 46%; z-index: 3; display: flex; flex-direction: column; gap: 6px; min-width: 190px; padding: 10px; border-radius: 12px; background: rgba(30, 20, 10, .94); border: 1px solid #c49a52; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); animation: ct-in .2s ease-out; }
.ts-menu .btn { width: 100%; justify-content: space-between; }

/* dealt cards */
.tc-spread { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; }
.tc-slot { position: relative; transform: rotate(var(--r)); transition: transform .2s; }
.tc-slot:hover { transform: rotate(0) translateY(-8px) scale(1.04); z-index: 2; }
.tc-spread.deal .tc-slot { animation: ct-deal .5s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: calc(var(--i) * 45ms); }
.tcard { position: relative; width: min(138px, 11vw, 15.5vh); aspect-ratio: 138 / 196; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 9px 9px; border: 0; border-radius: 12px; cursor: pointer; font-family: 'Alegreya', serif; color: #2b2116; text-align: center;
	background: linear-gradient(180deg, #f6edd6, #e2d0a6); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 0 0 5px var(--kc, #8a6a3a), 0 4px 0 #9c8559, 0 12px 22px rgba(0, 0, 0, .5); }
.tcard.green { --kc: #4f8a3c; background: linear-gradient(180deg, #f1f4df, #cfdcae); }
.tcard.red { --kc: #a8442f; background: linear-gradient(180deg, #f7e3d6, #e2b39f); }
.tcard.unit { --kc: #44608e; background: linear-gradient(180deg, #e9ecf4, #bfc8dc); }
.tcard.action { --kc: #b08a1e; background: linear-gradient(180deg, #fbf0c9, #e9cf7d); }
.tcard.picked { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 0 0 5px var(--kc), 0 0 0 4px #f0d48c, 0 0 30px rgba(240, 212, 140, .8), 0 12px 22px rgba(0, 0, 0, .5); }
.tc-kind { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--kc); padding: 1px 8px; border-radius: 99px; }
.tc-icon { font-size: 40px; line-height: 1.1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.tc-name { max-width: 100%; font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; line-height: 1.1; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.tc-name.long { font-size: 11.5px; }
.tcard.big .tc-name.long { font-size: 21px; }
.tc-stats { font-size: 12px; font-weight: 700; }
.tc-text { font-size: clamp(9.5px, 1.3vh, 11.5px); line-height: 1.2; flex: 1; min-height: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.tc-cost { font-size: 12px; display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.tc-badge { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f0d48c; color: #3a2410; font-family: 'Cinzel', serif; font-weight: 800; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); z-index: 2; }

/* close-up */
.ct-zoom { position: fixed; inset: 0; z-index: 61; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: rgba(8, 6, 4, .72); backdrop-filter: blur(3px); animation: ct-in .2s ease-out; padding: 16px; }
.ct-zoom-card { animation: ct-lift .35s cubic-bezier(.2, .9, .3, 1.2); }
.tcard.big { width: min(300px, 78vw, 44vh); aspect-ratio: 300 / 424; padding: 18px 18px 16px; gap: 8px; cursor: default; }
.tcard.big .tc-kind { font-size: 13px; padding: 2px 12px; }
.tcard.big .tc-icon { font-size: 92px; }
.tcard.big .tc-name { font-size: 26px; }
.tcard.big .tc-stats { font-size: 17px; }
.tcard.big .tc-text { font-size: 17px; -webkit-line-clamp: 9; }
.tcard.big .tc-cost { font-size: 16px; }
.ct-zoom-act { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* footer: lock-in bar and hand */
.ct-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px; font-family: 'Alegreya', serif; font-size: 16px; }
.ct-foot > span { color: #f0d48c; }
.ct-hand { display: flex; gap: 6px; flex-wrap: wrap; }
.ct-hand button { font: 600 14px 'Alegreya', serif; padding: 6px 10px; border-radius: 8px; border: 1px solid #a87a45; background: rgba(0, 0, 0, .3); color: #f3e6c7; cursor: pointer; }
.ct-hand button.sel { background: #c49a52; color: #2b1a0c; }
.ct-hand button:disabled { opacity: .5; cursor: default; }

@keyframes ct-in { from { opacity: 0; } }
@keyframes ct-zoom { from { opacity: 0; transform: perspective(900px) rotateX(28deg) scale(.7) translateY(80px); } }
@keyframes ct-deal { from { opacity: 0; transform: translate(-40vw, 30vh) rotate(-30deg) scale(.6); } }
@keyframes ct-lift { from { transform: scale(.55) rotate(-6deg); opacity: .3; } }

@media (max-width: 700px) {
	.ctable { padding: 8px; }
	.ct-wood { padding: 14px 12px 12px; border-radius: 18px; }
	.ct-head h2 { font-size: 20px; }
	.ct-head p { font-size: 14px; }
	.ct-felt { padding: 16px 8px; }
	.tc-stacks { gap: 24px 18px; }
	.ts-pile { width: 92px; height: 128px; }
	.ts-back b { font-size: 30px; }
	.tcard { width: 104px; padding: 7px 6px; }
	.tc-icon { font-size: 30px; }
	.tc-name { font-size: 12px; }
	.tc-text { display: none; }
}

/* redraws of an open table (state updates) must not replay the opening animations */
.ctable.again, .ctable.again .ct-zoom.again, .ct-zoom.again .ct-zoom-card { animation: none !important; }