@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    background: #F4F0E8;
    min-height: 100vh;
    overflow-x: hidden;
    color: #3B3128;
}

/* Header */
.header {
    text-align: center;
    padding: 32px 20px 8px;
}

.header h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.4rem;
    color: #3B3128;
    letter-spacing: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.header p {
    color: #8A7E6B;
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* Pond area */
.pond {
    position: relative;
    margin: 24px auto;
    width: 90%;
    max-width: 920px;
    min-height: 400px;
    background: #2A7A9C;
    border-radius: 50% / 28%;
    padding: 40px 30px;
    box-shadow: none;
    display: block;
    border: 3px solid #1E6480;
    overflow: hidden;
}

.pond-inner {
    position: relative;
    width: 100%;
    min-height: 360px;
}

.pond::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50% / 28%;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='320'%3E%3Cpath d='M0,40 Q75,30 150,40 T300,40 T450,40 T600,40' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1.2'/%3E%3Cpath d='M0,80 Q75,70 150,80 T300,80 T450,80 T600,80' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3Cpath d='M-30,120 Q60,112 150,120 T300,120 T450,120 T600,120' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.2'/%3E%3Cpath d='M0,160 Q80,150 160,160 T320,160 T480,160 T640,160' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3Cpath d='M-20,200 Q70,192 160,200 T320,200 T480,200 T640,200' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.2'/%3E%3Cpath d='M0,240 Q80,232 160,240 T320,240 T480,240 T640,240' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3Cpath d='M-10,280 Q75,272 160,280 T320,280 T480,280 T640,280' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Duck base styles */
.duck {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bob 4s ease-in-out infinite;
    cursor: default;
}

.duck:nth-child(2n) { animation-delay: -0.7s; }
.duck:nth-child(3n) { animation-delay: -1.4s; }
.duck:nth-child(4n) { animation-delay: -2.1s; }
.duck:nth-child(5n) { animation-delay: -2.8s; }

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.duck-svg {
    display: block;
}

.duck-word {
    position: absolute;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* --- Parent (mama) duck --- */
.duck.parent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: bobParent 4s ease-in-out infinite;
}

@keyframes bobParent {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% - 5px)); }
}

.duck.baby {
    z-index: 1;
}

.duck.parent .duck-svg {
    width: 200px;
    height: 140px;
}

.duck.parent .duck-word {
    top: 90px;
    left: 40.5%;
    transform: translate(-50%, -50%);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.15rem;
    color: #F4F0E8;
    letter-spacing: 3px;
    text-shadow: none;
}

/* --- Baby duck --- */
.duck.baby .duck-svg {
    width: 70px;
    height: 52px;
}

.duck.baby .duck-word {
    top: 46px;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    color: #5A4510;
    letter-spacing: 1.5px;
}

/* Baby duck bob animation */
.duck.baby {
    transform-origin: center center;
    animation: bob 4s ease-in-out infinite;
}

/* === Duckling entrance animation === */
.duck-slot.entering {
    animation: ducklingPlop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.duck-slot.entering .duck.baby {
    animation: ducklingWiggle 0.6s ease-in-out forwards;
}

@keyframes ducklingPlop {
    0% {
        opacity: 0;
        transform: scale(0) translateY(-30px);
    }
    50% {
        opacity: 1;
        transform: scale(1.25) translateY(2px);
    }
    75% {
        transform: scale(0.92) translateY(-1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes ducklingWiggle {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-8deg); }
    50% { transform: rotate(6deg); }
    70% { transform: rotate(-3deg); }
    85% { transform: rotate(1deg); }
}

/* Splash ripple under duckling */
.splash-ripple {
    position: absolute;
    left: 50%;
    top: 65%;
    width: 0;
    height: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: splashExpand 0.7s ease-out forwards;
}

.splash-ripple:nth-child(2) {
    animation-delay: 0.1s;
}

@keyframes splashExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
        border-width: 2px;
    }
    100% {
        width: 90px;
        height: 30px;
        opacity: 0;
        border-width: 1px;
    }
}

/* Rare duck glow */
.duck-slot.rare-slot .duck.baby {
    filter: drop-shadow(0 0 6px rgba(212, 149, 43, 0.7));
}

/* Game controls */
.controls {
    text-align: center;
    padding: 24px 20px;
}

.input-area {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#guess-input {
    padding: 12px 22px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    border: 2px solid #C4B89A;
    border-radius: 0;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    width: 240px;
    background: #FFFDF8;
    color: #3B3128;
    transition: border-color 0.2s;
}

#guess-input::placeholder {
    color: #A89B85;
    letter-spacing: 1px;
    text-transform: none;
}

#guess-input:focus {
    border-color: #D4952B;
    box-shadow: none;
}

#submit-btn {
    padding: 12px 28px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    background: #D4952B;
    color: #FFFFFF;
    border: none;
    border-radius: 0;
    cursor: pointer;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background-color 0.15s;
    box-shadow: 0 3px 0 #A8741F;
}

#submit-btn:hover {
    background: #BF8526;
}

#submit-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #A8741F;
}

/* Message area */
.message {
    margin-top: 14px;
    font-size: 0.9rem;
    min-height: 22px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #8A7E6B;
}

.message.error {
    color: #BF4A37;
}

.message.success {
    color: #2B7A78;
}

.message.rare {
    color: #D4952B;
    font-weight: 600;
}

/* Score */
.score-area {
    text-align: center;
    padding: 6px 20px 16px;
    font-size: 0.95rem;
    color: #8A7E6B;
    letter-spacing: 0.5px;
}

.score-area span {
    font-weight: 600;
    color: #D4952B;
}

/* Found words list */
.found-words {
    text-align: center;
    padding: 0 20px 40px;
}

.found-words h3 {
    color: #8A7E6B;
    margin-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.found-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.found-list .word-tag {
    background: rgba(212, 149, 43, 0.10);
    border: 1px solid rgba(212, 149, 43, 0.20);
    padding: 5px 14px;
    border-radius: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #8B6A1E;
    font-weight: 500;
}

.found-list em {
    color: #A89B85;
    font-style: normal;
    font-size: 0.85rem;
}

/* Letter keyboard (mobile) */
.letter-keyboard {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 0 10px;
}

.kb-letter, .kb-action {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    width: 48px;
    height: 48px;
    border: 2px solid #C4B89A;
    border-radius: 6px;
    background: #FFFDF8;
    color: #3B3128;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.1s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.kb-letter:active {
    background: #EDE8D8;
    transform: scale(0.93);
}

.kb-backspace {
    background: #E8E2D4;
    font-size: 1.4rem;
}

.kb-backspace:active {
    background: #D8D0C0;
    transform: scale(0.93);
}

.kb-submit {
    background: #D4952B;
    color: #FFFFFF;
    border-color: #A8741F;
    font-size: 1rem;
    letter-spacing: 2px;
    width: 64px;
}

.kb-submit:active {
    background: #BF8526;
    transform: scale(0.93);
}

@media (max-width: 600px) {
    .letter-keyboard {
        display: flex;
    }
}

/* Loading */
.loading {
    text-align: center;
    padding: 60px;
    font-size: 1.1rem;
    color: #A89B85;
}

/* === Celebration === */
.pond.celebrate {
    animation: pondGlow 2s ease-in-out 3;
}

@keyframes pondGlow {
    0%, 100% {
        box-shadow: 0 4px 0 1px #134E68;
        border-color: #134E68;
    }
    50% {
        box-shadow: 0 4px 0 1px #A8741F;
        border-color: #D4952B;
    }
}

/* Sparkles */
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 0;
    pointer-events: none;
    z-index: 10;
    animation: sparkleFloat 2s ease-out forwards;
}

@keyframes sparkleFloat {
    0% {
        opacity: 1;
        transform: scale(0) translateY(0);
    }
    30% {
        opacity: 1;
        transform: scale(1.2) translateY(-20px);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(-80px);
    }
}

/* Win banner */
.win-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    animation: bannerAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.win-banner span {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    color: #FFFFFF;
    background: #D4644A;
    padding: 12px 28px;
    border-radius: 0;
    border: none;
    text-shadow: none;
    letter-spacing: 2px;
    white-space: nowrap;
    box-shadow: 0 4px 0 #A84832;
}

@keyframes bannerAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}