:root{color-scheme:dark;--bg:#080705;--panel:#130f0b;--panel2:#1b140e;--gold:#e3bc77;--gold2:#ffd995;--line:rgba(222,178,103,.22);--text:#eee4d3;--muted:#9e9281;--green:#82c79b;--red:#e48272;--deck-card:62px;--slot-card:82px}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#38200f 0,transparent 38%),linear-gradient(#0f0c08,#070604);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.shell{min-height:100vh;padding:24px;display:grid;place-items:center}.panel{width:min(1080px,100%);border:1px solid rgba(214,169,91,.35);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 15%),linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 30px 90px #0009,inset 0 0 70px #0006;padding:30px 42px 34px}.header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-bottom:22px;border-bottom:1px solid var(--line)}.eyebrow{margin:0 0 6px;color:#8f7147;font:700 11px/1 Georgia,serif;letter-spacing:.28em}h1{margin:0;color:#ead4aa;font:600 clamp(30px,4vw,46px)/1 Georgia,serif}.subline{margin:9px 0 0;color:var(--muted);font-size:13px}.header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.ghost,.secondary,.primary{border-radius:10px;min-height:42px;padding:0 15px;border:1px solid var(--line);cursor:pointer;color:#cfbea3;background:#0a080650;transition:border-color .16s,color .16s,filter .16s,transform .16s}.ghost:hover,.secondary:hover{border-color:#b88c52;color:var(--gold2);transform:translateY(-1px)}button:disabled{opacity:.35;cursor:not-allowed;transform:none!important}.scorebar{display:grid;grid-template-columns:1.1fr 1fr 2fr .8fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}.scorebar>div{min-height:74px;padding:12px 14px;border:1px solid rgba(223,180,106,.12);border-radius:12px;background:#0d0a0755}.scorebar span,.scorebar small{display:block;color:var(--muted);font-size:11px}.scorebar strong{display:block;color:#ead5b0;font-size:24px;margin:2px 0}.score-main strong{font-size:32px;color:var(--gold2)}.progress-wrap{display:flex;flex-direction:column;justify-content:center}.progress-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.progress-meta strong{font-size:12px;margin:0;color:#d8c4a4}.progress{height:8px;border-radius:999px;background:#060504;overflow:hidden;border:1px solid rgba(255,255,255,.04)}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#956a30,#e2b967);transition:width .35s ease}.selection-area{padding:26px 0 28px;text-align:center}.combo-copy{min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}.combo-copy>div{text-align:left}.combo-copy span,.combo-copy small{display:block;color:var(--muted);font-size:12px}.combo-copy strong{display:block;font-size:20px;color:#ead5b0}.status-dot{width:9px;height:9px;border-radius:50%;background:#776c5f;box-shadow:0 0 0 5px #ffffff08}.status-dot.valid{background:var(--green);box-shadow:0 0 16px #65c78d99}.status-dot.invalid{background:var(--red);box-shadow:0 0 16px #e46d5d88}
/* Wichtig: eigener Klassenname, damit eine ausgewählte Karte unten NICHT die Größe dieses Containers erbt. */
.selected-cards{display:flex;justify-content:center;align-items:center;gap:24px;min-height:138px;perspective:800px}.slot{position:relative;width:var(--slot-card);aspect-ratio:38/52;border:0;background:transparent;padding:0;cursor:pointer;transition:filter .16s}.slot img,.deck-card img{width:100%;height:100%;display:block;object-fit:contain;image-rendering:auto;-ms-interpolation-mode:bicubic;filter:drop-shadow(0 7px 8px #0008) contrast(1.035) saturate(1.025);pointer-events:none;user-select:none}.slot.empty{opacity:.18;cursor:default;filter:grayscale(1)}.slot:not(.empty):hover{filter:brightness(1.06)}.slot.just-added:after{content:"";position:absolute;inset:-5px;border:1px solid rgba(255,207,120,.9);border-radius:7px;pointer-events:none;animation:slotRing .48s ease-out}@keyframes slotRing{0%{opacity:0;box-shadow:0 0 0 0 rgba(226,174,80,0)}35%{opacity:1;box-shadow:0 0 15px 3px rgba(226,174,80,.34)}100%{opacity:0;box-shadow:0 0 0 7px rgba(226,174,80,0)}}.selection-actions{display:flex;justify-content:center;gap:10px;margin-top:12px}.primary{border-color:#b98c49;background:linear-gradient(#7f5727,#5a3c1c);color:#fff0cf;font-weight:700;box-shadow:inset 0 1px #ffffff18}.primary:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-1px)}.deck-area{padding-top:24px;border-top:1px solid var(--line)}.deck-head,.history-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:16px}.deck-head span,.history-head span{display:block;color:#d8c4a5;font:600 14px Georgia,serif}.deck-head small,.history-head small{color:var(--muted);font-size:11px}.legend{display:flex!important;align-items:center;gap:6px;font:11px system-ui!important;color:var(--muted)!important}.legend i{width:7px;height:7px;border-radius:50%;background:var(--green)}
/* Feste, bewusst kleinere Kartengröße. Dadurch werden die kleinen Original-Metin2-Sprites nicht unnötig aufgeblasen. */
.deck{display:grid;grid-template-columns:repeat(8,var(--deck-card));gap:10px 12px;justify-content:center;max-width:100%;margin:auto}.deck-card{position:relative;width:var(--deck-card);aspect-ratio:38/52;border:0;background:transparent;padding:0;cursor:pointer;border-radius:6px;transition:filter .14s}.deck-card:before{content:"";position:absolute;inset:-4px;border-radius:8px;border:1px solid transparent;box-shadow:0 0 0 rgba(220,166,70,0);pointer-events:none;transition:border-color .18s,box-shadow .18s}.deck-card:hover:not(.used):not(.selected){filter:brightness(1.07)}
/* Auswahl ändert NIE die Kartengröße. Nur eine dezente animierte Umrandung. */
.deck-card.selected{z-index:2}.deck-card.selected:before{border-color:#e7b967;animation:selectedGlow 1.35s ease-in-out infinite}@keyframes selectedGlow{0%,100%{box-shadow:0 0 4px rgba(217,157,59,.28),inset 0 0 3px rgba(255,219,150,.08)}50%{box-shadow:0 0 13px rgba(217,157,59,.62),0 0 3px rgba(255,224,164,.7),inset 0 0 6px rgba(255,219,150,.14)}}.deck-card.used{cursor:not-allowed;filter:grayscale(1) brightness(.38);opacity:.48}.deck-card.used:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#d9c9af;font-size:22px;text-shadow:0 2px 5px #000}.history-area{padding-top:24px;margin-top:24px;border-top:1px solid var(--line)}.history{display:flex;gap:8px;flex-wrap:wrap}.history-item{display:flex;align-items:center;gap:8px;border:1px solid rgba(220,177,105,.12);border-radius:10px;padding:8px 10px;background:#0b08065c;color:#c9b89d;font-size:11px}.history-item strong{color:#e9cd9f}.history-item.positive strong{color:#9dd3aa}.mini-cards{display:flex}.mini-cards img{width:22px;height:auto;margin-left:-4px;filter:drop-shadow(0 2px 2px #0008)}.mini-cards img:first-child{margin-left:0}
@media(max-width:780px){:root{--deck-card:clamp(38px,9.4vw,56px);--slot-card:76px}.shell{padding:0}.panel{border-radius:0;min-height:100vh;padding:22px 14px}.header{flex-direction:column}.header-actions{width:100%;justify-content:flex-start}.scorebar{grid-template-columns:1fr 1fr}.progress-wrap{grid-column:1/-1;order:3}.selected-cards{gap:14px;min-height:128px}.deck{gap:8px 6px}.deck-head{align-items:flex-start;flex-direction:column}.subline{max-width:520px}}
@media(max-width:450px){:root{--deck-card:clamp(33px,10vw,43px);--slot-card:68px}.scorebar{grid-template-columns:1fr 1fr}.remaining{display:none}.selection-actions{flex-direction:column}.primary,.secondary{width:100%}.deck{gap:7px 4px}.selected-cards{gap:11px;min-height:116px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}