/* Last Draw – Daily Draw
   Nutzt die Farben des Last-Draw-Themes, mit Fallbacks. */

.ldd {
	--ldd-bg: var(--ld-table, #0E111A);
	--ldd-card: var(--ld-card, #161A25);
	--ldd-line: var(--ld-line, #2A3040);
	--ldd-cream: var(--ld-cream, #FBF6EA);
	--ldd-muted: var(--ld-muted, #A3A7B3);
	--ldd-red: var(--ld-red, #E33639);
	--ldd-head: var(--global-heading-font-family, "Barlow Condensed", "Arial Narrow", sans-serif);
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem) var(--global-content-edge-padding, 1.5rem);
	color: var(--ldd-cream);
}

.ldd-head { max-width: 40rem; }
.ldd-title { margin: 0; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 0.95; }
.ldd-lead { margin: 0.75rem 0 0; font-size: 1.2rem; color: var(--ldd-muted); }
.ldd-testnote {
	display: inline-block;
	margin: 1rem 0 0;
	padding: 0.35em 0.8em;
	border: 1px solid var(--ldd-red);
	border-radius: 6px;
	color: var(--ldd-cream);
	font-size: 0.95rem;
}

/* ---------- Bühne ---------- */
.ldd-stage {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
	margin: clamp(2rem, 5vw, 3.5rem) 0;
}
@media (max-width: 760px) {
	.ldd-stage { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

.ldd-deck {
	position: relative;
	width: min(100%, 320px);
	aspect-ratio: 63 / 88;
	perspective: 1400px;
}

.ldd-card {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	border: 3px solid var(--ldd-cream);
	background: var(--ldd-card);
	overflow: hidden;
}
.ldd-card--stack:nth-child(1) { transform: translate(-14px, 10px) rotate(-6deg); opacity: 0.4; }
.ldd-card--stack:nth-child(2) { transform: translate(-7px, 5px) rotate(-3deg); opacity: 0.7; }

.ldd-card--back {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(135deg, rgba(251,246,234,0.035) 0 2px, transparent 2px 14px),
		var(--ldd-bg);
}
.ldd-card--back img { width: 58%; height: auto; }

/* Umdrehen */
.ldd-flip { position: absolute; inset: 0; }
.ldd-flip__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.9s cubic-bezier(.2,.75,.2,1);
}
.ldd-flip__inner > .ldd-card--back,
.ldd-flip__front { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ldd-flip__front { position: absolute; inset: 0; transform: rotateY(180deg); }
.ldd-flip.is-lifting .ldd-flip__inner { transform: translateY(-18px) rotate(-2deg); transition-duration: 0.35s; }
.ldd-flip.is-flipped .ldd-flip__inner { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
	.ldd-flip__inner { transition: none; }
}

/* ---------- Kartenvorderseite ---------- */
.ldd-card--front {
	--rc: #A3A7B3;
	display: flex;
	flex-direction: column;
	padding: 10px;
	border-color: var(--rc);
	background: #12151F;
}
.ldd-r-uncommon { --rc: #5B8DEF; }
.ldd-r-rare     { --rc: #E33639; }
.ldd-r-super    { --rc: #D9A93F; }
.ldd-r-secret   { --rc: #FBF6EA; }

.ldd-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 2px 4px 8px;
}
.ldd-card__name {
	font-family: var(--ldd-head);
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1;
	color: var(--ldd-cream);
}
.ldd-card__gem {
	flex: none;
	width: 14px;
	height: 14px;
	background: var(--rc);
	transform: rotate(45deg);
	border-radius: 2px;
}
.ldd-card__art {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background:
		radial-gradient(120% 90% at 50% 30%, hsl(var(--hue) 55% 38%) 0%, hsl(var(--hue) 45% 16%) 55%, #0B0D14 100%);
	overflow: hidden;
}
.ldd-card__art img { width: 62%; height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5)); }
.ldd-card__rarity {
	margin: 8px 4px 0;
	font-family: var(--ldd-head);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--rc);
}
.ldd-card__text {
	margin: 2px 4px 0;
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--ldd-muted);
	min-height: 2.7em;
}
.ldd-card__num {
	margin: 6px 4px 0;
	font-size: 0.75rem;
	color: var(--ldd-muted);
	opacity: 0.7;
	text-align: right;
}

/* Super Rare: goldener Schimmer im Bild */
.ldd-r-super .ldd-card__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 220, 140, 0.35) 48%, transparent 62%);
}

/* Secret Rare: Regenbogen-Folie über der ganzen Karte */
.ldd-foil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: color-dodge;
	opacity: 0.55;
	background:
		linear-gradient(115deg,
			rgba(255, 0, 90, 0.35), rgba(255, 170, 0, 0.35), rgba(80, 255, 140, 0.35),
			rgba(0, 170, 255, 0.35), rgba(190, 70, 255, 0.35), rgba(255, 0, 90, 0.35));
	background-size: 300% 300%;
}
@media (prefers-reduced-motion: no-preference) {
	.ldd-foil { animation: ldd-foil 4s linear infinite; }
	@keyframes ldd-foil { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
}

/* ---------- Panel ---------- */
.ldd-draw-btn { font-size: 1.35rem; padding: 0.6em 1.6em; }
.ldd-draw-btn[disabled] {
	cursor: default;
	background: transparent;
	border: 1px solid var(--ldd-line);
	color: var(--ldd-muted);
}

.ldd-result { margin-top: 1.25rem; max-width: 34rem; }
.ldd-result h2 { margin: 0 0 0.35rem; font-size: clamp(2rem, 5vw, 3rem); }
.ldd-result p { margin: 0.4rem 0; color: var(--ldd-muted); }
.ldd-result .ldd-rarity { color: var(--rc, var(--ldd-cream)); font-family: var(--ldd-head); font-weight: 600; font-size: 1.3rem; }
.ldd-prize {
	margin-top: 1rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--ldd-line);
	border-left: 4px solid var(--ldd-red);
	border-radius: 8px;
	background: var(--ldd-card);
	color: var(--ldd-cream);
}
.ldd-prize code { font-size: 1.15rem; color: var(--ldd-cream); background: transparent; }
.ldd-example { display: inline-block; margin-left: 0.35em; color: var(--ldd-muted); font-size: 0.9em; }

/* ---------- Sammlung ---------- */
.ldd-block { margin-top: clamp(2.5rem, 6vw, 4rem); }
.ldd-block h2 {
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--ldd-line);
}
.ldd-count { color: var(--ldd-muted); font-size: 0.6em; font-weight: 600; margin-left: 0.3em; }

.ldd-collection {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 14px;
}
.ldd-slot { position: relative; aspect-ratio: 63 / 88; }
.ldd-slot .ldd-card { border-width: 2px; border-radius: 10px; }
.ldd-slot .ldd-card__name { font-size: 0.95rem; }
.ldd-slot .ldd-card__top { padding-bottom: 5px; }
.ldd-slot .ldd-card__gem { width: 9px; height: 9px; }
.ldd-slot .ldd-card__rarity { font-size: 0.75rem; margin-top: 5px; }
.ldd-slot .ldd-card__text, .ldd-slot .ldd-card__num { display: none; }
.ldd-slot .ldd-card--front { padding: 6px; }
.ldd-slot--missing .ldd-card { opacity: 0.35; border-color: var(--ldd-line); }
.ldd-slot--missing .ldd-card--back img { width: 40%; filter: grayscale(1); }
.ldd-qty {
	position: absolute;
	right: -6px;
	bottom: -6px;
	z-index: 3;
	min-width: 26px;
	padding: 0 6px;
	height: 26px;
	border-radius: 13px;
	background: var(--ldd-red);
	color: var(--ldd-cream);
	font-family: var(--ldd-head);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 26px;
	text-align: center;
}

/* ---------- Tabelle ---------- */
.ldd-odds { width: 100%; border-collapse: collapse; }
.ldd-odds th, .ldd-odds td { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--ldd-line); text-align: left; vertical-align: top; }
.ldd-odds th { font-family: var(--ldd-head); font-weight: 600; font-size: 1.05rem; color: var(--ldd-muted); }
.ldd-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 0.6em;
	background: var(--c);
	transform: rotate(45deg);
	border-radius: 2px;
}
.ldd-rules { margin-top: 1rem; color: var(--ldd-muted); font-size: 0.95rem; max-width: 70ch; }
.ldd-coupons { list-style: none; padding: 0; margin: 0; }
.ldd-coupons li { padding: 0.5rem 0; border-bottom: 1px solid var(--ldd-line); }

/* ---------- Teaser für die Startseite ---------- */
.ldd-teaser {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--ld-line, #2A3040);
	border-left: 4px solid var(--ld-red, #E33639);
	border-radius: 10px;
	background: var(--ld-card, #161A25);
	color: var(--ld-cream, #FBF6EA);
	text-decoration: none;
}
.ldd-teaser:hover { border-color: rgba(251, 246, 234, 0.45); border-left-color: var(--ld-red, #E33639); color: var(--ld-cream, #FBF6EA); }
.ldd-teaser__card {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	aspect-ratio: 63 / 88;
	border: 2px solid var(--ld-cream, #FBF6EA);
	border-radius: 6px;
	background: var(--ld-table, #0E111A);
	transform: rotate(-6deg);
}
.ldd-teaser__card img { width: 70%; height: auto; }
.ldd-teaser__text { display: flex; flex-direction: column; flex: 1; }
.ldd-teaser__text strong { font-family: var(--global-heading-font-family, sans-serif); font-size: 1.6rem; line-height: 1.1; }
.ldd-teaser__text span { color: var(--ld-muted, #A3A7B3); }
.ldd-teaser__cta {
	flex: none;
	padding: 0.5em 1.2em;
	border-radius: 6px;
	background: var(--ld-red, #E33639);
	font-family: var(--global-heading-font-family, sans-serif);
	font-weight: 600;
	font-size: 1.1rem;
}
@media (max-width: 600px) {
	.ldd-teaser { flex-wrap: wrap; }
	.ldd-teaser__cta { width: 100%; text-align: center; }
}

/* ---------- Testwerkzeuge (nur Testphase) ---------- */
.ldd-testtools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.6rem 0.8rem;
	border: 1px dashed var(--ldd-line);
	border-radius: 8px;
}
.ldd-testtools__label { width: 100%; font-size: 0.85rem; color: var(--ldd-muted); }
.ldd-tool {
	padding: 0.35em 0.9em;
	border: 1px solid rgba(251, 246, 234, 0.35);
	border-radius: 6px;
	background: transparent;
	color: var(--ldd-cream);
	font-family: var(--ldd-head);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}
.ldd-tool:hover { border-color: var(--ldd-cream); background: transparent; color: var(--ldd-cream); }
.ldd-tool--danger { border-color: rgba(227, 54, 57, 0.6); color: #F08A8C; }
.ldd-tool--danger:hover { border-color: var(--ldd-red); color: var(--ldd-cream); }
.ldd-tool[disabled] { opacity: 0.5; cursor: default; }
@media (max-width: 760px) { .ldd-testtools { justify-content: center; } }

/* ==========================================================================
   v1.2.0 – Kartenwerte, Effekte, Duell
   ========================================================================== */

/* ---------- Kartenwerte ---------- */
.ldd-card__power {
	position: absolute;
	left: 8px;
	bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ldd-bg, #0E111A);
	border: 2px solid var(--rc);
	color: var(--ldd-cream, #FBF6EA);
	font-family: var(--ldd-head);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1;
}
.ldd-card__style {
	position: absolute;
	right: 8px;
	bottom: 10px;
	padding: 0.1em 0.55em;
	border-radius: 4px;
	font-family: var(--ldd-head);
	font-weight: 600;
	font-size: 0.85rem;
	background: rgba(14, 17, 26, 0.85);
}
.ldd-style-turnier { color: #FF7A7C; }
.ldd-style-handel  { color: #7FD4A0; }
.ldd-style-sammeln { color: #8FB2FF; }
.ldd-card__ability {
	margin: 2px 4px 0;
	font-size: 0.85rem;
	line-height: 1.3;
	color: var(--ldd-muted);
	min-height: 2.6em;
}
.ldd-card__ability strong { color: var(--ldd-cream); font-weight: 600; }

.ldd-r-boss   { --rc: #E33639; }
.ldd-r-boss .ldd-card__art { filter: saturate(1.2) contrast(1.1); }
.ldd-r-boss.ldd-card--front { background: #1A0E12; box-shadow: inset 0 0 0 1px rgba(227,54,57,0.4); }
.ldd-r-loaner { --rc: #6E7383; }
.ldd-r-loaner .ldd-card__art { filter: grayscale(0.8); }

.ldd-slot .ldd-card__power { width: 24px; height: 24px; font-size: 0.9rem; left: 4px; bottom: 4px; border-width: 1.5px; }
.ldd-slot .ldd-card__style { font-size: 0.65rem; right: 4px; bottom: 5px; padding: 0.05em 0.4em; }
.ldd-slot .ldd-card__ability { display: none; }

/* ---------- Effekte beim Ziehen ---------- */
.ldd-deck { isolation: isolate; }
.ldd-fx {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 5;
}
.ldd-fx--back { z-index: -1; }
.ldd-arena__end .ldd-fx, .ldd-arena__side .ldd-fx { z-index: 6; }
.ldd-spark {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--s);
	height: var(--s);
	margin: calc(var(--s) / -2);
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 10px var(--c), 0 0 20px var(--c);
	animation: ldd-spark 1.2s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes ldd-spark {
	0%   { transform: translate(0, 0) scale(1); opacity: 1; }
	100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
.ldd-ring {
	position: absolute;
	left: -60px;
	top: -60px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 4px solid var(--c);
	box-shadow: 0 0 30px var(--c);
	animation: ldd-ring 0.9s ease-out forwards;
}
@keyframes ldd-ring {
	from { transform: scale(0.3); opacity: 1; }
	to   { transform: scale(5); opacity: 0; }
}
.ldd-rays {
	position: absolute;
	left: -340px;
	top: -340px;
	width: 680px;
	height: 680px;
	border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 55%, transparent) 0deg 8deg, transparent 8deg 22deg);
	mask-image: radial-gradient(circle, #000 15%, transparent 65%);
	-webkit-mask-image: radial-gradient(circle, #000 15%, transparent 65%);
	animation: ldd-spin 6s linear infinite, ldd-fade-in 0.4s ease-out;
	transition: opacity 1s;
}
.ldd-rays--rainbow {
	background: repeating-conic-gradient(from 0deg,
		rgba(255,0,90,.55) 0deg 8deg, transparent 8deg 15deg,
		rgba(255,170,0,.55) 15deg 23deg, transparent 23deg 30deg,
		rgba(80,255,140,.55) 30deg 38deg, transparent 38deg 45deg,
		rgba(0,170,255,.55) 45deg 53deg, transparent 53deg 60deg);
}
.ldd-rays.is-fading { opacity: 0; }
@keyframes ldd-spin { to { transform: rotate(360deg); } }
@keyframes ldd-fade-in { from { opacity: 0; transform: scale(0.6); } }

.ldd-flash {
	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
	background: var(--c);
	animation: ldd-flash 0.65s ease-out forwards;
}
@keyframes ldd-flash { from { opacity: 1; } to { opacity: 0; } }

/* Vorspannung: Karte hebt ab, zittert, leuchtet */
.ldd-flip.is-charging .ldd-flip__inner {
	transform: translateY(-22px) scale(1.03);
	transition: transform 0.3s ease-out;
}
.ldd-flip.is-charging .ldd-card--back {
	box-shadow: 0 0 0 2px var(--glow), 0 0 30px var(--glow);
	animation: ldd-shake 0.12s linear infinite;
}
.ldd-flip.is-charging--rare .ldd-card--back,
.ldd-flip.is-charging--super .ldd-card--back { box-shadow: 0 0 0 3px var(--glow), 0 0 60px var(--glow), 0 0 120px var(--glow); }
.ldd-flip.is-charging--secret .ldd-card--back {
	animation: ldd-shake 0.08s linear infinite, ldd-rainbow-glow 0.9s linear infinite;
}
@keyframes ldd-shake {
	0% { transform: translate(0, 0) rotate(0); }
	25% { transform: translate(-2px, 1px) rotate(-0.6deg); }
	50% { transform: translate(2px, -1px) rotate(0.6deg); }
	75% { transform: translate(-1px, -1px) rotate(-0.3deg); }
	100% { transform: translate(0, 0) rotate(0); }
}
@keyframes ldd-rainbow-glow {
	0%   { box-shadow: 0 0 0 3px #FF005A, 0 0 70px #FF005A; }
	25%  { box-shadow: 0 0 0 3px #FFAA00, 0 0 70px #FFAA00; }
	50%  { box-shadow: 0 0 0 3px #50FF8C, 0 0 70px #50FF8C; }
	75%  { box-shadow: 0 0 0 3px #00AAFF, 0 0 70px #00AAFF; }
	100% { box-shadow: 0 0 0 3px #FF005A, 0 0 70px #FF005A; }
}
.ldd-deck.is-charging .ldd-card--stack { opacity: 0.25; transition: opacity 0.3s; }

/* Landung: Karte "schlägt ein" */
.ldd-deck.is-landed .ldd-flip { animation: ldd-land 0.5s cubic-bezier(.3,1.6,.5,1); }
@keyframes ldd-land { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ldd-deck.is-landed--super .ldd-flip__front .ldd-card,
.ldd-deck.is-landed--secret .ldd-flip__front .ldd-card { box-shadow: 0 0 50px var(--rc); }

.ldd-link { display: inline-block; margin-top: 0.5rem; color: var(--ldd-cream); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Duell ---------- */
.ldd-cardwrap { position: relative; width: 100%; aspect-ratio: 63 / 88; }

.ldd-boss {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin-top: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid rgba(227, 54, 57, 0.45);
	border-radius: 14px;
	background:
		radial-gradient(90% 120% at 100% 0%, hsl(var(--hue) 60% 22% / 0.6), transparent 60%),
		var(--ldd-card);
}
@media (max-width: 820px) { .ldd-boss { grid-template-columns: 1fr; } }
.ldd-boss__label { margin: 0; color: var(--ldd-red); font-family: var(--ldd-head); font-weight: 600; font-size: 1.1rem; }
.ldd-boss__name { margin: 0.2rem 0 0; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; }
.ldd-boss__text { margin: 0.6rem 0 0; color: var(--ldd-cream); font-size: 1.1rem; }
.ldd-boss__hint { margin: 1rem 0 0; color: var(--ldd-muted); font-size: 0.95rem; }
.ldd-boss__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ldd-boss__cards .ldd-card__name { font-size: 1.1rem; }
.ldd-boss__cards .ldd-card__power { width: 30px; height: 30px; font-size: 1.05rem; }
.ldd-boss__cards .ldd-card__ability,
.ldd-boss__cards .ldd-card__text { font-size: 0.78rem; }

.ldd-lineup {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 170px));
	gap: 14px;
}
.ldd-lineup__slot {
	position: relative;
	aspect-ratio: 63 / 88;
	border: 2px dashed var(--ldd-line);
	border-radius: 12px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.ldd-lineup__slot > span {
	position: absolute;
	bottom: -1.7rem;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--ldd-muted);
	font-family: var(--ldd-head);
	font-weight: 600;
}
.ldd-lineup__slot.is-filled { border-color: transparent; }
.ldd-lineup .ldd-pick__btn { position: absolute; inset: 0; }
.ldd-lineup .ldd-card__ability, .ldd-lineup .ldd-card__text, .ldd-lineup .ldd-card__num { display: none; }
.ldd-lineup .ldd-card__name { font-size: 1rem; }

.ldd-setup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.75rem; }
.ldd-setup__actions .ldd-testtools { margin-top: 0; }
.ldd-setup__hint { color: var(--ldd-muted); margin: 1rem 0 0; }
.ldd-setup__hint a { color: var(--ldd-cream); }
.ldd-pool__title { margin: 2rem 0 1rem; font-size: 1.5rem; }
.ldd-pool { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.ldd-setup.is-locked .ldd-pool, .ldd-setup.is-locked .ldd-lineup { pointer-events: none; opacity: 0.55; }

.ldd-pick__btn {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}
.ldd-pick__btn:hover { background: none; }
.ldd-pick__btn:focus-visible { outline: 2px solid var(--ldd-red); outline-offset: 3px; border-radius: 12px; }
.ldd-pick .ldd-card { transition: transform 0.15s; }
.ldd-pick__btn:hover .ldd-card { transform: translateY(-4px); }
.ldd-pick.is-selected .ldd-card { box-shadow: 0 0 0 3px var(--ldd-red); opacity: 0.5; }
.ldd-pick__pos {
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ldd-red);
	color: var(--ldd-cream);
	font-family: var(--ldd-head);
	font-weight: 700;
	font-size: 1.5rem;
	pointer-events: none;
}

/* Arena */
.ldd-arena {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--ldd-line);
	border-radius: 14px;
	background: radial-gradient(80% 60% at 50% 40%, #1B2030, var(--ldd-bg));
	scroll-margin-top: 120px;
}
.ldd-arena.is-shaking { animation: ldd-shake 0.1s linear 5; }
.ldd-arena__score {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	font-family: var(--ldd-head);
	font-weight: 700;
}
.ldd-arena__who { font-size: 1.3rem; color: var(--ldd-muted); }
.ldd-arena__who:last-child { text-align: right; }
.ldd-arena__points { font-size: clamp(2.5rem, 7vw, 4rem); line-height: 1; }
.ldd-arena__points.is-bump { animation: ldd-bump 0.4s ease-out; }
@keyframes ldd-bump { 0% { transform: scale(1.4); color: var(--ldd-red); } 100% { transform: scale(1); } }
.ldd-arena__round { text-align: center; color: var(--ldd-muted); margin: 0.4rem 0 1.25rem; font-family: var(--ldd-head); font-size: 1.15rem; }
.ldd-arena__field {
	display: grid;
	grid-template-columns: minmax(0, 220px) auto minmax(0, 220px);
	justify-content: center;
	align-items: center;
	gap: clamp(1rem, 5vw, 3.5rem);
}
.ldd-arena__side { position: relative; }
.ldd-arena__vs { font-family: var(--ldd-head); font-weight: 700; font-size: clamp(1.8rem, 5vw, 3rem); color: var(--ldd-red); }
.ldd-die {
	position: absolute;
	left: 50%;
	bottom: -22px;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--ldd-cream);
	color: var(--ldd-bg);
	font-family: var(--ldd-head);
	font-weight: 700;
	font-size: 1.6rem;
	box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}
.ldd-die.is-rolling { animation: ldd-roll 0.25s linear infinite; }
.ldd-die.is-set { animation: ldd-bump 0.35s ease-out; }
@keyframes ldd-roll { 0% { transform: translateX(-50%) rotate(0); } 100% { transform: translateX(-50%) rotate(360deg); } }

.ldd-cardwrap.is-entering-left  { animation: ldd-enter-l 0.5s cubic-bezier(.2,.8,.2,1); }
.ldd-cardwrap.is-entering-right { animation: ldd-enter-r 0.5s cubic-bezier(.2,.8,.2,1); }
@keyframes ldd-enter-l { from { transform: translateX(-80px) rotate(-10deg); opacity: 0; } }
@keyframes ldd-enter-r { from { transform: translateX(80px) rotate(10deg); opacity: 0; } }
.ldd-cardwrap.is-winner { animation: ldd-win 0.6s ease-out forwards; }
.ldd-cardwrap.is-winner .ldd-card { box-shadow: 0 0 0 3px var(--rc), 0 0 40px var(--rc); }
@keyframes ldd-win { 50% { transform: scale(1.08); } 100% { transform: scale(1.04); } }
.ldd-cardwrap.is-loser { animation: ldd-lose 0.5s ease-out forwards; }
@keyframes ldd-lose { 30% { transform: translateX(-6px); } 60% { transform: translateX(6px); } 100% { transform: scale(0.94); opacity: 0.45; filter: grayscale(1); } }
.ldd-cardwrap.is-tie .ldd-card { box-shadow: 0 0 0 2px var(--ldd-muted); }

.ldd-arena__calc {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 260px);
	justify-content: center;
	gap: clamp(2rem, 8vw, 6rem);
	margin-top: 2.5rem;
	text-align: center;
	min-height: 5.5rem;
}
.ldd-calc__sum { margin: 0; color: var(--ldd-muted); font-size: 0.95rem; }
.ldd-calc__bonus { color: #7FD4A0; }
.ldd-calc__total { margin: 0.1rem 0 0.4rem; font-family: var(--ldd-head); font-weight: 700; font-size: 2.6rem; line-height: 1; animation: ldd-bump 0.4s ease-out; }
.ldd-chip {
	display: inline-block;
	margin: 2px;
	padding: 0.1em 0.55em;
	border: 1px solid var(--ldd-line);
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--ldd-cream);
	background: var(--ldd-card);
}
.ldd-arena__skip { display: block; margin: 1rem auto 0; }
.ldd-arena__end { position: relative; margin-top: 1.5rem; }
.ldd-banner { text-align: center; padding: 1.25rem; border-radius: 12px; }
.ldd-banner__title { margin: 0; font-family: var(--ldd-head); font-weight: 700; font-size: clamp(3rem, 10vw, 5.5rem); line-height: 1; }
.ldd-banner--win .ldd-banner__title {
	background: linear-gradient(90deg, #FF005A, #FFAA00, #50FF8C, #00AAFF, #FF005A);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: ldd-foil 2.5s linear infinite;
}
.ldd-banner--loss .ldd-banner__title { color: var(--ldd-muted); }
.ldd-banner__text { margin: 0.6rem auto 1rem; max-width: 36rem; color: var(--ldd-muted); }
.ldd-arena__log { margin: 1.5rem 0 0; padding-left: 1.2rem; color: var(--ldd-muted); font-size: 0.95rem; }
.ldd-log__item--player { color: var(--ldd-cream); }

@media (max-width: 600px) {
	.ldd-arena__field { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.6rem; }
	.ldd-arena__calc { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.ldd-lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.ldd-boss__cards { gap: 6px; }
	.ldd-boss__cards .ldd-card__ability, .ldd-boss__cards .ldd-card__text { display: none; }
}

.ldd-styles { font-family: var(--ldd-head); font-weight: 600; font-size: 1.2rem; }

/* Rangliste */
.ldd-leaders { list-style: none; margin: 0; padding: 0; max-width: 32rem; }
.ldd-leaders li { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--ldd-line); }
.ldd-leaders__pos { font-family: var(--ldd-head); font-weight: 700; font-size: 1.3rem; color: var(--ldd-red); }
.ldd-leaders__val { color: var(--ldd-muted); }

@media (prefers-reduced-motion: reduce) {
	.ldd-cardwrap, .ldd-die, .ldd-arena, .ldd-calc__total, .ldd-arena__points, .ldd-flip .ldd-card--back { animation: none !important; }
}