:root {
    --night-top: #071a3d;
    --night-middle: #061127;
    --night-bottom: #01030b;
    --glow: #5ee7ff;
    --slot: rgba(157, 224, 255, 0.42);
    --success: #65f6a5;
    --font-main: 'Nunito', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

body {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: #fff;
    font-family: var(--font-main);
    background: linear-gradient(180deg, var(--night-top) 0%, var(--night-middle) 42%, var(--night-bottom) 100%);
}

.night-sky,
.star-field,
.moon-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.star-field {
    opacity: 0.5;
    background-image:
        radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 28% 34%, #82d9ff 0 1px, transparent 1.5px),
        radial-gradient(circle at 48% 12%, #fff 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 67% 29%, #d5c8ff 0 1px, transparent 1.6px),
        radial-gradient(circle at 88% 16%, #fff 0 1px, transparent 1.5px);
    background-size: 310px 240px;
}

.star-field-b {
    opacity: 0.28;
    transform: translate(80px, 100px) scale(1.25);
}

.moon-glow {
    width: 52vw;
    height: 52vw;
    max-width: 520px;
    max-height: 520px;
    left: auto;
    bottom: auto;
    border-radius: 50%;
    transform: translate(34%, -38%);
    background: radial-gradient(circle, rgba(68, 150, 255, 0.24), rgba(41, 92, 190, 0.08) 42%, transparent 70%);
}

.game-header .back-button,
.game-header .wallet-display {
    background: rgba(9, 25, 58, 0.82);
    color: #f5fbff;
    border-color: rgba(126, 211, 255, 0.38);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.game-header .back-button.disabled {
    color: #a8bdd8;
    background: rgba(8, 19, 42, 0.74);
}

.game-container {
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    height: 100%;
    margin: 0 auto;
    padding: 74px 18px 20px;
    display: grid;
    grid-template-rows: auto auto auto minmax(260px, 1fr);
    justify-items: center;
    gap: 8px;
}

.emoji-display {
    width: 132px;
    height: 132px;
    border: 0;
    border-radius: 34px;
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.2), rgba(51, 112, 198, 0.12) 48%, rgba(9, 26, 65, 0.64));
    box-shadow: inset 0 0 0 2px rgba(151, 222, 255, 0.24), 0 14px 35px rgba(0,0,0,0.36), 0 0 34px rgba(74, 170, 255, 0.12);
    color: #fff;
    font-size: 5.7rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    animation: emoji-float 3.2s ease-in-out infinite;
}

.emoji-display img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.word-display {
    min-height: 72px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(5px, 1.4vw, 10px);
    position: relative;
}

.letter-slot {
    width: clamp(34px, 9vw, 58px);
    height: clamp(52px, 12vw, 72px);
    border-bottom: 4px solid var(--slot);
    display: grid;
    place-items: center;
    color: transparent;
    font: 900 clamp(2rem, 7vw, 3.1rem) 'Nunito', sans-serif;
    text-shadow: none;
    transition: color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

.letter-slot.filled {
    color: #fff;
    border-color: var(--success);
    filter: drop-shadow(0 0 10px rgba(101, 246, 165, 0.7));
    animation: slot-pop 0.38s cubic-bezier(.2,1.4,.45,1);
}

.letter-slot.shake {
    animation: slot-shake 0.36s ease;
}

.instruction {
    color: #b9d8f4;
    font-size: clamp(0.72rem, 2.8vw, 0.95rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
    min-height: 20px;
}

.bubble-field {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;
    overflow: hidden;
    border-radius: 36px;
    background: radial-gradient(ellipse at center, rgba(34, 91, 164, 0.16), rgba(0, 0, 0, 0.06) 70%);
}

.letter-bubble {
    --size: 76px;
    --x: 50%;
    --y: 50%;
    --delay: 0s;
    --duration: 3.8s;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    transform: translate(-50%, -50%);
    border: 2px solid rgba(220, 247, 255, 0.72);
    border-radius: 50%;
    color: #fff;
    font: 900 clamp(1.8rem, 7vw, 2.7rem) 'Nunito', sans-serif;
    text-shadow: 0 2px 5px rgba(0,0,0,0.35), 0 0 12px rgba(255,255,255,0.35);
    cursor: pointer;
    box-shadow: inset 9px 12px 18px rgba(255,255,255,0.2), inset -10px -12px 20px rgba(7,16,58,0.28), 0 8px 20px rgba(0,0,0,0.28), 0 0 17px var(--bubble-glow);
    background:
        radial-gradient(circle at 30% 23%, rgba(255,255,255,0.86) 0 4%, transparent 5%),
        radial-gradient(circle at 36% 30%, rgba(255,255,255,0.24), transparent 23%),
        var(--bubble-color);
    animation: bubble-drift var(--duration) ease-in-out var(--delay) infinite alternate;
}

.letter-bubble:active {
    filter: brightness(1.18);
}

.letter-bubble.wrong {
    animation: bubble-wrong 0.42s ease;
    border-color: #ff8eac;
}

.letter-bubble.popping {
    pointer-events: none;
    animation: bubble-pop 0.24s ease-out forwards;
}

.bubble-field.celebrating .letter-bubble {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    animation: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

.flying-letter {
    position: fixed;
    z-index: 100;
    display: grid;
    place-items: center;
    color: #fff;
    font: 900 2.6rem 'Nunito', sans-serif;
    text-shadow: 0 0 14px var(--glow);
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(.2,.8,.3,1), opacity 0.42s ease;
}

.reward-toast {
    position: fixed;
    z-index: 120;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    min-width: min(82vw, 340px);
    padding: 18px 26px;
    border: 3px solid rgba(101, 246, 165, 0.8);
    border-radius: 26px;
    color: #fff;
    background: rgba(5, 24, 50, 0.94);
    box-shadow: 0 0 45px rgba(71, 224, 255, 0.35);
    text-align: center;
    font: 900 1.5rem 'Nunito', sans-serif;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(.2,1.3,.4,1), opacity 0.25s ease;
}

.reward-toast.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.confetti {
    position: fixed;
    top: -18px;
    z-index: 200;
    width: 12px;
    height: 16px;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 7px currentColor;
    animation-name: night-confetti-fall;
    animation-timing-function: cubic-bezier(.18,.72,.35,1);
    animation-fill-mode: forwards;
}

@keyframes emoji-float { 50% { transform: translateY(-7px); } }
@keyframes bubble-drift { from { margin-top: -5px; } to { margin-top: 7px; } }
@keyframes bubble-pop { to { transform: translate(-50%, -50%) scale(1.35); opacity: 0; } }
@keyframes bubble-wrong { 25% { transform: translate(-58%, -50%); } 75% { transform: translate(-42%, -50%); } }
@keyframes slot-pop { 60% { transform: scale(1.28); } }
@keyframes slot-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes night-confetti-fall {
    0% { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(0deg) scale(0.8); }
    10% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--confetti-drift, 35px), 108vh, 0) rotate(760deg) scale(1.05); }
}

@media (max-width: 520px) {
    .game-container {
        padding: 68px 8px 8px;
        grid-template-rows: auto auto auto minmax(230px, 1fr);
        gap: 4px;
    }

    .emoji-display {
        width: 104px;
        height: 104px;
        border-radius: 28px;
        font-size: 4.5rem;
    }

    .word-display { min-height: 61px; }
    .letter-slot { width: clamp(30px, 8.6vw, 42px); height: 55px; }
    .bubble-field { min-height: 230px; border-radius: 24px; }
    .letter-bubble { --size: 64px; }
}

@media (max-height: 650px) {
    .game-container { padding-top: 62px; }
    .emoji-display { width: 82px; height: 82px; font-size: 3.7rem; border-radius: 22px; }
    .word-display { min-height: 52px; }
    .letter-slot { height: 48px; font-size: 1.9rem; }
    .bubble-field { min-height: 190px; }
    .letter-bubble { --size: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .emoji-display,
    .letter-bubble { animation: none; }
    .flying-letter { transition-duration: 0.12s; }
}