/* Collectible card faces (js/cardui.js) and the deck builder / pack screens (js/decks.js).
   Rarity frames: bronze = copper and dark wood, silver = brushed steel and cool greys, gold =
   gilded filigree on warm parchment, platinum = pale platinum with turquoise accents and a slow
   shimmer. The art window paints a small scene per strategy category behind the card's emblem. */

.ccard { --w: 168px; --rim: #8a5a2b; --rim-hi: #e0a868; --rim-lo: #4a2c12; --paper: #f1e3c4; --paper-2: #dcc69a; --ink: #2b1f12; --gem: #c97a3a;
	position: relative; width: var(--w); aspect-ratio: 5 / 7; flex: none; font-size: calc(var(--w) * 10 / 168); user-select: none; border-radius: 0.9em;
	background: linear-gradient(145deg, var(--rim-hi), var(--rim) 35%, var(--rim-lo) 70%, var(--rim) 100%); padding: 0.55em;
	box-shadow: 0 0.3em 0 rgba(0, 0, 0, .35), 0 1.2em 2.4em rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .18s, box-shadow .18s; }
.ccard.s-sm { --w: 112px; }
.ccard.s-lg { --w: 290px; }
.ccard .cc-frame { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 0.55em; overflow: hidden; color: var(--ink);
	background: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .5), transparent 55%), linear-gradient(180deg, var(--paper), var(--paper-2));
	box-shadow: inset 0 0 0 0.15em rgba(0, 0, 0, .35), inset 0 0 1.4em rgba(80, 50, 10, .25); }

/* rarities */
.ccard.r-bronze { --rim: #9a6233; --rim-hi: #e3a66a; --rim-lo: #4b2a10; --paper: #efe0c0; --paper-2: #d5bb8c; --gem: #d08a4a; }
.ccard.r-bronze .cc-frame::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .25;
	background: repeating-linear-gradient(90deg, rgba(90, 55, 20, .25) 0 0.15em, transparent 0.15em 1.1em); }
.ccard.r-silver { --rim: #8d97a6; --rim-hi: #f2f6fb; --rim-lo: #4c5562; --paper: #eef1f4; --paper-2: #c9d1da; --ink: #1f2731; --gem: #c9d3df; }
.ccard.r-gold { --rim: #b8862b; --rim-hi: #fff0a8; --rim-lo: #6e4a10; --paper: #fbf0cf; --paper-2: #ead08a; --gem: #ffd257;
	box-shadow: 0 0.3em 0 rgba(0, 0, 0, .35), 0 1.2em 2.4em rgba(0, 0, 0, .45), 0 0 1.4em rgba(255, 200, 80, .35), inset 0 0 0 1px rgba(255, 255, 255, .4); }
.ccard.r-gold .cc-frame { box-shadow: inset 0 0 0 0.15em rgba(120, 80, 10, .5), inset 0 0 0 0.45em rgba(255, 220, 130, .35), inset 0 0 1.4em rgba(120, 80, 10, .3); }
.ccard.r-platinum { --rim: #b9cdd2; --rim-hi: #ffffff; --rim-lo: #6f8c94; --paper: #f4fbfb; --paper-2: #d4ece9; --ink: #13282b; --gem: #3fd6c8;
	box-shadow: 0 0.3em 0 rgba(0, 0, 0, .35), 0 1.2em 2.4em rgba(0, 0, 0, .45), 0 0 1.8em rgba(80, 240, 220, .45), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.ccard.r-platinum::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
	background: linear-gradient(115deg, transparent 30%, rgba(160, 255, 245, .55) 45%, rgba(255, 255, 255, .7) 50%, rgba(160, 255, 245, .45) 55%, transparent 70%);
	background-size: 300% 100%; animation: cc-shimmer 4.5s ease-in-out infinite; }
@keyframes cc-shimmer { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }

/* art window: a painted scene per category behind the emblem */
.cc-art { position: relative; flex: 0 0 43%; margin: 0.45em 0.45em 0; border-radius: 0.35em; display: grid; place-items: center; overflow: hidden; background-size: cover; background-position: center;
	box-shadow: inset 0 0 0 0.12em rgba(0, 0, 0, .45), inset 0 -1.6em 2em rgba(0, 0, 0, .25); }
.c-produktion .cc-art { background-color: #c9a24a; background-image: radial-gradient(70% 50% at 70% 20%, #fff2b8, transparent 70%), linear-gradient(180deg, #8fc2e8 0 38%, #e4c35a 38% 62%, #b8892e 62%); }
.c-handel .cc-art { background-color: #3c7aa8; background-image: radial-gradient(70% 50% at 25% 15%, #fff6d0, transparent 70%), linear-gradient(180deg, #f2c27a 0 34%, #4f92c4 34% 70%, #2a5b86 70%); }
.c-militaer .cc-art { background-color: #7a2a20; background-image: radial-gradient(80% 60% at 50% 30%, #f5b36a, transparent 70%), linear-gradient(180deg, #5b2a3a 0 45%, #7a6a5a 45% 70%, #3b2c22 70%); }
.c-schutz .cc-art { background-color: #6a7a6a; background-image: radial-gradient(70% 50% at 50% 10%, #e8f4ff, transparent 70%), linear-gradient(180deg, #9cb6c8 0 40%, #8d8a7c 40% 75%, #5d5a50 75%); }
.c-punkte .cc-art { background-color: #4a2a6a; background-image: radial-gradient(70% 55% at 50% 25%, #ffd98a, transparent 70%), linear-gradient(180deg, #3a2460 0 50%, #6a3f86 50% 72%, #2a1640 72%); }
.c-kontrolle .cc-art { background-color: #2a2a34; background-image: radial-gradient(60% 45% at 70% 25%, #ff9a5a, transparent 70%), linear-gradient(180deg, #1c2030 0 45%, #3a2f2a 45% 72%, #17120f 72%); }
.cc-art[style*='background-image'] .cc-icon { opacity: 0; }
.cc-icon { font-size: 4.6em; line-height: 1; filter: drop-shadow(0 0.12em 0.15em rgba(0, 0, 0, .55)); }
.cc-cost { position: absolute; left: 0.3em; right: 0.3em; bottom: 0.3em; display: flex; flex-wrap: wrap; gap: 0.2em; justify-content: center; }
.cc-chip { display: inline-flex; align-items: center; gap: 0.1em; padding: 0.05em 0.35em; border-radius: 99em; font: 700 1.05em/1.3 'Alegreya', serif; color: #fff;
	background: rgba(15, 10, 5, .72); box-shadow: 0 0 0 1px rgba(255, 230, 170, .35); }
.cc-chip.miss { background: rgba(140, 20, 10, .85); }
.cc-chip.free { font-size: 0.95em; }
.cc-name { margin: 0.45em 0.5em 0; text-align: center; font: 800 1.45em/1.08 'Cinzel', serif; letter-spacing: .02em; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); overflow-wrap: anywhere; hyphens: auto; }
.cc-name.long { font-size: 1.2em; }
.cc-type { margin: 0.2em 0.6em 0; text-align: center; font: 700 0.95em 'Alegreya', serif; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 65%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--rim) 55%, transparent); padding-bottom: 0.25em; }
.cc-text { flex: 1; min-height: 0; overflow: hidden; margin: 0.35em 0.6em 0; font: 500 1.12em/1.22 'Alegreya', serif; text-align: center; color: var(--ink); display: flex; flex-direction: column; gap: 0.2em; }
.cc-stats { font-weight: 800; }
.cc-foot { display: flex; align-items: center; gap: 0.4em; padding: 0.3em 0.6em 0.45em; font: 700 0.9em 'Alegreya', serif; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.cc-gem { width: 0.95em; height: 0.95em; transform: rotate(45deg); background: radial-gradient(circle at 35% 35%, #fff, var(--gem) 55%, color-mix(in srgb, var(--gem) 50%, #000)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0.5em var(--gem); }
.cc-when { margin-left: auto; font-style: italic; }
.ccard.s-sm .cc-text, .ccard.s-sm .cc-foot .cc-cat { display: none; }
.ccard.s-sm .cc-art { flex-basis: 55%; }
.ccard.s-sm .cc-name { font-size: 1.6em; }
.ccard.locked { filter: grayscale(.85) brightness(.75); }
.ccard.locked::before { content: '🔒'; position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; z-index: 2; filter: drop-shadow(0 2px 3px #000); }
.cc-count { position: absolute; top: -0.7em; right: -0.7em; z-index: 3; min-width: 2.6em; padding: 0.25em 0.5em; border-radius: 99em; text-align: center; font: 800 1.2em 'Cinzel', serif;
	color: #2a1a06; background: linear-gradient(180deg, #ffe7a0, #d9a441); box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, .5), 0 0 0 1px #5a3a10; }
.cc-count.none { background: linear-gradient(180deg, #8a8a8a, #555); color: #eee; }

/* card back (draw pile) */
.ccard-back { position: relative; width: 112px; aspect-ratio: 5 / 7; border-radius: 12px; display: grid; place-items: center; color: #f5d98a;
	background: radial-gradient(circle at 50% 45%, #7a1d14, #3a0b07 75%); box-shadow: inset 0 0 0 4px #c9a24f, inset 0 0 0 7px #3a0b07, inset 0 0 0 8px rgba(201, 162, 79, .6), 0 4px 0 #1e0603, 0 6px 0 #c9a24f, 0 8px 0 #1e0603, 0 14px 22px rgba(0, 0, 0, .5); }
.ccard-back .cb-crest { font-size: 46px; text-shadow: 0 2px 4px #000; }
.ccard-back b { position: absolute; bottom: -30px; font: 800 14px 'Cinzel', serif; color: #fff; text-shadow: 0 1px 3px #000; }

/* ---------- deck builder ---------- */
.collection { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; color: #f3e7cc; font-family: 'Alegreya', Georgia, serif;
	background: radial-gradient(1200px 600px at 30% -10%, rgba(201, 162, 79, .18), transparent 60%), linear-gradient(180deg, #1b1510, #0d0a07); }
.col-head { display: flex; align-items: center; gap: 18px; padding: 12px 22px; border-bottom: 1px solid rgba(201, 162, 79, .35); background: linear-gradient(180deg, #2a2016, #18120c); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.col-head h1 { margin: 0; font: 800 22px 'Cinzel', serif; letter-spacing: 3px; color: #ffd76a; text-shadow: 0 2px 4px #000; }
.col-tabs { display: flex; gap: 4px; }
.col-tab { font: 700 14px 'Cinzel', serif; letter-spacing: 1px; color: #d8c9a4; background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
.col-tab.on { color: #ffd76a; border-color: rgba(201, 162, 79, .6); background: rgba(201, 162, 79, .12); }
.col-purse { margin-left: auto; display: flex; gap: 14px; align-items: center; font-weight: 700; }
.col-purse b { color: #ffd76a; font-size: 18px; }
.col-lvl { padding: 3px 10px; border-radius: 99px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px rgba(201, 162, 79, .5); }
.col-x { font-size: 26px; line-height: 1; background: none; border: 0; color: #f3e7cc; cursor: pointer; padding: 0 4px; }
.col-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 360px; }
.col-left { min-height: 0; display: flex; flex-direction: column; }
.col-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 22px; border-bottom: 1px solid rgba(201, 162, 79, .18); }
.col-filter input, .col-filter select { font: 600 14px 'Alegreya', serif; color: #f3e7cc; background: rgba(0, 0, 0, .4); border: 1px solid rgba(201, 162, 79, .4); border-radius: 6px; padding: 6px 10px; }
.col-filter input { width: 200px; }
.chip-f { font: 700 12.5px 'Alegreya', serif; color: #d8c9a4; background: rgba(0, 0, 0, .35); border: 1px solid rgba(201, 162, 79, .3); border-radius: 99px; padding: 4px 11px; cursor: pointer; }
.chip-f.on { color: #1a1206; background: linear-gradient(180deg, #ffe08a, #c9a24f); border-color: #ffe08a; }
.chip-f.r-bronze.on { background: linear-gradient(180deg, #f0b47a, #a8652e); }
.chip-f.r-silver.on { background: linear-gradient(180deg, #ffffff, #9aa6b4); }
.chip-f.r-platinum.on { background: linear-gradient(180deg, #e8fffc, #4fd8cc); }
.col-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 26px 18px; align-content: start; justify-items: center; }
.col-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.col-cell .ccard { cursor: pointer; }
.col-cell .ccard:hover { transform: translateY(-6px) scale(1.03); }
.col-cell .ccard.full { opacity: .55; }
.col-cell .unlock { font: 700 12px 'Alegreya', serif; color: #ffd76a; background: rgba(0, 0, 0, .5); border: 1px solid rgba(201, 162, 79, .5); border-radius: 99px; padding: 3px 10px; cursor: pointer; }
.col-cell .unlock:disabled { opacity: .45; cursor: default; }
.col-cell .indeck { position: absolute; top: -8px; left: -8px; z-index: 3; padding: 2px 8px; border-radius: 99px; font: 800 12px 'Cinzel', serif; color: #fff; background: #2c7a2c; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

.col-deck { min-height: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(36, 28, 20, .95), rgba(20, 15, 10, .95)); border-left: 1px solid rgba(201, 162, 79, .35); box-shadow: -10px 0 30px rgba(0, 0, 0, .4); }
.col-deck.drop { box-shadow: inset 0 0 0 3px #ffd76a, -10px 0 30px rgba(0, 0, 0, .4); }
.dk-top { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid rgba(201, 162, 79, .2); }
.dk-row { display: flex; gap: 6px; align-items: center; }
.dk-row select, .dk-row input { flex: 1; min-width: 0; font: 700 14px 'Alegreya', serif; color: #f3e7cc; background: rgba(0, 0, 0, .4); border: 1px solid rgba(201, 162, 79, .4); border-radius: 6px; padding: 6px 8px; }
.dk-btn { font: 700 12px 'Alegreya', serif; color: #f3e7cc; background: linear-gradient(180deg, #4a3622, #2a1e12); border: 1px solid rgba(201, 162, 79, .55); border-radius: 6px; padding: 6px 9px; cursor: pointer; white-space: nowrap; }
.dk-btn:hover:not(:disabled) { filter: brightness(1.2); }
.dk-btn:disabled { opacity: .45; cursor: default; }
.dk-btn.good { background: linear-gradient(180deg, #2f7a35, #17461b); color: #fff7c8; }
.dk-btn.bad { background: linear-gradient(180deg, #7a2a1d, #45110a); }
.dk-stats { padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid rgba(201, 162, 79, .2); font-size: 13px; }
.dk-count { font: 800 26px 'Cinzel', serif; color: #ffd76a; }
.dk-count small { font-size: 14px; color: #b9ab8c; }
.dk-bars { display: grid; grid-template-columns: 62px 1fr 44px; gap: 4px 8px; align-items: center; }
.dk-bar { height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.dk-bar i { display: block; height: 100%; border-radius: 99px; }
.dk-bar.over i { background: #d0402c !important; }
.dk-types, .dk-res { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-types span, .dk-res span { padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px rgba(201, 162, 79, .3); }
.dk-errors { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.dk-errors li { color: #ff9a8a; }
.dk-errors li.ok { color: #8dff9a; }
.dk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.dk-line { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; background: rgba(0, 0, 0, .3); border-left: 4px solid var(--rc, #888); }
.dk-line:hover { background: rgba(120, 30, 20, .35); }
.dk-line .n { font: 800 13px 'Cinzel', serif; color: #ffd76a; min-width: 22px; }
.dk-line .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dk-line .ic { font-size: 18px; }
.dk-line .rm { color: #ff9a8a; font-weight: 800; }
.dk-empty { padding: 30px 16px; text-align: center; color: #b9ab8c; font-style: italic; }

/* packs */
.packs { flex: 1; min-height: 0; overflow-y: auto; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.pack-row { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; }
.pack { width: 190px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pack-box { width: 170px; height: 230px; border-radius: 14px; display: grid; place-items: center; font-size: 64px; cursor: pointer; transition: transform .2s;
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), inset 0 0 40px rgba(0, 0, 0, .45), 0 16px 30px rgba(0, 0, 0, .55); }
.pack-box:hover { transform: translateY(-8px) rotate(-1.5deg); }
.pack-box.bronze { background: linear-gradient(160deg, #e3a66a, #7a4419); }
.pack-box.silver { background: linear-gradient(160deg, #ffffff, #7c8796); }
.pack-box.gold { background: linear-gradient(160deg, #fff0a8, #a8761c); }
.pack-box.platinum { background: linear-gradient(160deg, #ffffff, #8fd8d2 50%, #4c8f97); }
.pack h3 { margin: 0; font: 800 16px 'Cinzel', serif; color: #ffd76a; }
.pack p { margin: 0; font-size: 12.5px; color: #b9ab8c; text-align: center; }
.pack-open { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
/* Each card turns over: the back narrows to an edge, then the face widens out of it (2D, robust). */
.flip { position: relative; width: 168px; aspect-ratio: 5 / 7; animation: flip-rise .5s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--i) * .35s); }
.flip > * { position: absolute; inset: 0; }
.flip .ccard-back { width: 100%; animation: flip-back .7s ease-in both; animation-delay: calc(var(--i) * .35s + .45s); }
.flip .ccard { animation: flip-face .7s ease-out both; animation-delay: calc(var(--i) * .35s + .45s); }
@keyframes flip-rise { from { transform: translateY(40px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flip-back { 0% { transform: scaleX(1); } 50%, 100% { transform: scaleX(0); visibility: hidden; } }
@keyframes flip-face { 0%, 50% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.flip.r-gold::after, .flip.r-platinum::after { content: ''; position: absolute; inset: -30px; border-radius: 50%; z-index: -1; opacity: 0; animation: rare-burst 1.6s ease-out both; animation-delay: calc(var(--i) * .35s + .8s); }
.flip.r-gold::after { background: radial-gradient(circle, rgba(255, 210, 90, .8), transparent 65%); }
.flip.r-platinum::after { background: radial-gradient(circle, rgba(120, 255, 240, .9), transparent 65%); }
@keyframes rare-burst { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }

/* card zoom in the game and the deck table */
.deck-table .dt-piles { display: flex; gap: 60px; justify-content: center; align-items: flex-end; padding: 30px 0 40px; }
.deck-table .dt-pile { display: flex; flex-direction: column; align-items: center; gap: 38px; }
.deck-table .dt-pile .ccard { --w: 112px; }
.dt-label { font: 700 13px 'Cinzel', serif; color: #f5e6c0; letter-spacing: 1px; }

@media (max-width: 900px) {
	.col-body { grid-template-columns: 1fr; grid-template-rows: 1fr 46%; }
	.col-deck { border-left: 0; border-top: 1px solid rgba(201, 162, 79, .35); }
	.col-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 10px; padding: 14px; }
	.col-grid .ccard { --w: 116px; }
	.col-head { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
}