/* ========================================
   DOPPELKOPF - Candy Theme
   Fredoka Font, warme Farben, freundlich
   ======================================== */

:root {
    /* Candy-Farbpalette */
    --candy-bg-dark: #1a4a2e;
    --candy-bg-mid: #236b3e;
    --candy-bg-light: #2d8a50;
    --candy-accent: #ffb347;
    --candy-accent-glow: rgba(255, 179, 71, 0.4);
    --candy-pink: #ff6b9d;
    --candy-blue: #4ecdc4;
    --candy-purple: #a855f7;
    --candy-red: #ef4444;
    --candy-green: #22c55e;
    --candy-yellow: #fbbf24;
    --candy-text: #fef3c7;
    --candy-text-muted: rgba(254, 243, 199, 0.5);
    --candy-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    --candy-shadow-glow: 0 0 20px var(--candy-accent-glow);
    --candy-radius: 16px;
    --candy-radius-sm: 10px;

    /* Karten */
    --card-width: 110px;
    --card-height: 165px;
    --card-width-sm: 70px;
    --card-height-sm: 105px;
    --card-shadow: 2px 4px 12px rgba(0, 0, 0, 0.35);
    --transition-fast: 0.2s ease;
    --transition-med: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Globale Fredoka-Schrift ---- */
body, html {
    font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif !important;
}

/* ---- WDT-Komponenten-Overrides ---- */
.k-button, .k-chip, .k-dialog, .k-alert,
.wdt-button, .wdt-chip, .wdt-dialog-title,
[class*="wdt-"] {
    font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif !important;
}

/* Buttons runder + freundlicher */
.k-button {
    border-radius: var(--candy-radius-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.k-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--candy-shadow) !important;
}

.k-button:active {
    transform: translateY(0px) scale(0.97) !important;
}

/* Primary Buttons: Candy-Orange */
.k-button.k-button-solid-primary,
.k-button[themecolor="primary"] {
    background: linear-gradient(135deg, #ffb347, #ff9500) !important;
    border: none !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
}

.k-button.k-button-solid-primary:hover {
    background: linear-gradient(135deg, #ffc56e, #ffaa33) !important;
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.5) !important;
}

/* Chips runder */
.k-chip {
    border-radius: 20px !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 500 !important;
}

/* AppBar */
.k-appbar {
    background: linear-gradient(135deg, #1a3a28, #0d2818) !important;
    border-bottom: 2px solid rgba(255, 179, 71, 0.2) !important;
    font-family: 'Fredoka', sans-serif !important;
}

/* Dialoge */
.k-dialog {
    border-radius: var(--candy-radius) !important;
    overflow: hidden;
    font-family: 'Fredoka', sans-serif !important;
}

.k-dialog .k-dialog-titlebar {
    background: linear-gradient(135deg, #236b3e, #1a4a2e) !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 600 !important;
    color: var(--candy-accent) !important;
}

/* WDTPaper */
.k-card, .wdt-paper {
    border-radius: var(--candy-radius) !important;
}

/* Alerts freundlicher */
.k-alert {
    border-radius: var(--candy-radius-sm) !important;
    font-family: 'Fredoka', sans-serif !important;
}

/* ---- Game Board ---- */
.game-board {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(78, 205, 196, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at center, var(--candy-bg-light) 0%, var(--candy-bg-mid) 40%, var(--candy-bg-dark) 100%);
    overflow: hidden;
    font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
    user-select: none;
}

.game-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 45%, rgba(255, 179, 71, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 85% 55%, rgba(78, 205, 196, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.game-board svg {
    display: block;
}

/* ---- Trick Area ---- */
.trick-card {
    position: absolute;
    transition: all var(--transition-med);
    filter: drop-shadow(var(--card-shadow));
}

.trick-card.pos-north { transform: translateY(-60px) rotate(-2deg); }
.trick-card.pos-south { transform: translateY(60px) rotate(2deg); }
.trick-card.pos-west  { transform: translateX(-75px) rotate(-5deg); }
.trick-card.pos-east  { transform: translateX(75px) rotate(5deg); }

.trick-card.card-enter {
    animation: cardPlayToCenter var(--transition-med) forwards;
}

@keyframes cardPlayToCenter {
    from { opacity: 0; transform: scale(0.5) translateY(80px); }
    to   { opacity: 1; }
}

/* Trick collect animations */
.trick-collect-south { animation: trickCollectSouth 0.6s ease-in forwards; }
.trick-collect-north { animation: trickCollectNorth 0.6s ease-in forwards; }
.trick-collect-west  { animation: trickCollectWest 0.6s ease-in forwards; }
.trick-collect-east  { animation: trickCollectEast 0.6s ease-in forwards; }

@keyframes trickCollectSouth { to { opacity: 0; transform: translateY(250px) scale(0.3) rotate(5deg); } }
@keyframes trickCollectNorth { to { opacity: 0; transform: translateY(-250px) scale(0.3) rotate(-5deg); } }
@keyframes trickCollectWest  { to { opacity: 0; transform: translateX(-300px) scale(0.3) rotate(-10deg); } }
@keyframes trickCollectEast  { to { opacity: 0; transform: translateX(300px) scale(0.3) rotate(10deg); } }

/* ---- Player Hand ---- */
.hand-card {
    position: relative;
    transition: transform var(--transition-fast), margin var(--transition-fast), filter var(--transition-fast);
    cursor: default;
    margin: 0 -15px;
    filter: drop-shadow(var(--card-shadow));
    z-index: 1;
}

.hand-card:hover {
    z-index: 20;
}

.hand-card.playable {
    cursor: grab;
}

.hand-card.playable:hover {
    transform: translateY(-25px) scale(1.08);
    filter: drop-shadow(3px 8px 16px rgba(255, 179, 71, 0.4));
    z-index: 20;
}

.hand-card.not-playable {
    filter: drop-shadow(var(--card-shadow)) brightness(0.6) saturate(0.5);
    opacity: 0.6;
}

.hand-card.selected {
    transform: translateY(-30px) scale(1.1);
    filter: drop-shadow(0 0 20px rgba(255, 179, 71, 0.8));
}

.hand-card.dragging {
    opacity: 0.25;
}

.hand-card.dealing {
    animation: dealCard 0.4s ease-out forwards;
    opacity: 0;
}

@keyframes dealCard {
    from {
        opacity: 0;
        transform: translateY(-300px) translateX(var(--deal-offset, 0px)) rotate(var(--deal-rotation, 0deg)) scale(0.3);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
}

/* ---- Opponent Cards ---- */
.opponent-card {
    transition: transform var(--transition-fast);
    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.3));
}

.opponent-card.active-turn {
    animation: pulseTurn 1.2s ease-in-out infinite;
}

@keyframes pulseTurn {
    0%, 100% { filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.3)); }
    50% { filter: drop-shadow(0 0 16px rgba(255, 179, 71, 0.7)); }
}

/* ---- Game Log ---- */
.game-log {
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 179, 71, 0.3) transparent;
}

.game-log::-webkit-scrollbar { width: 4px; }
.game-log::-webkit-scrollbar-thumb { background: rgba(255, 179, 71, 0.3); border-radius: 2px; }

.log-entry {
    padding: 1px 0;
    font-size: 0.72rem;
    color: rgba(254, 243, 199, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    animation: fadeInLog 0.3s ease;
}

.log-entry:last-child {
    color: rgba(254, 243, 199, 0.9);
}

@keyframes fadeInLog {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Drag Ghost (JS-erzeugt) ---- */
.sol-drag-ghost {
    filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.5));
    transform: rotate(3deg);
}

/* ---- Drop Zone Highlight ---- */
.drop-target-hover {
    box-shadow: 0 0 30px rgba(255, 179, 71, 0.6) !important;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    :root {
        --card-width: 80px;
        --card-height: 120px;
        --card-width-sm: 50px;
        --card-height-sm: 75px;
    }
    .hand-card { margin: 0 -12px; }
}

@media (max-width: 600px) {
    :root {
        --card-width: 60px;
        --card-height: 90px;
        --card-width-sm: 40px;
        --card-height-sm: 60px;
    }
    .hand-card { margin: 0 -8px; }
}