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

html {
    background: #87CEEB;
}

body {
    font-family: 'Quicksand', sans-serif;
    color: #fff;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    background: linear-gradient(180deg,
        #87CEEB 0%,
        #5CC8D9 15%,
        #30B8C4 30%,
        #1AACAE 50%,
        #0D9494 70%,
        #087A7A 85%,
        #055E5E 100%
    );
}

/* Underwater caustic light shimmer */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.07;
    background:
        radial-gradient(ellipse at 20% 45%, rgba(255,255,255,0.8), transparent 50%),
        radial-gradient(ellipse at 75% 35%, rgba(255,255,255,0.6), transparent 45%),
        radial-gradient(ellipse at 50% 75%, rgba(255,255,255,0.7), transparent 40%);
    animation: caustic 10s ease-in-out infinite alternate;
}
@keyframes caustic {
    0%   { transform: scale(1) translate(0, 0); opacity: 0.07; }
    50%  { transform: scale(1.12) translate(2%, -1%); opacity: 0.10; }
    100% { transform: scale(0.95) translate(-1%, 2%); opacity: 0.07; }
}

/* Warm sun glow top-right */
body::after {
    content: '';
    position: fixed;
    top: -70px;
    right: 8%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle,
        rgba(255,220,100,0.30),
        rgba(255,185,60,0.12) 45%,
        transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1rem;
    padding-bottom: 160px;
    width: 100%;
    min-height: 100vh;
    gap: 0.5rem;
}

h1 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5), 0 0 25px rgba(255,255,255,0.1);
    font-family: 'Luckiest Guy', sans-serif;
    text-align: center;
}

.subtitle {
    font-size: 1.2rem;
    color: #fff1b8;
    margin-bottom: 1.5rem;
    font-style: italic;
    font-family: 'Quicksand', sans-serif;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.drink-container {
    position: relative;
    margin-bottom: 2.5rem;
    animation: sway 5s ease-in-out infinite;
    transform-origin: bottom center;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
.drink-container svg {
    width: 180px;
    height: 240px;
}
@keyframes sway {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
}

/* Animated liquid wave inside glass */
@keyframes liquid-wave {
    0%   { d: path('M50,110 Q70,105 90,110 Q110,115 130,110 L130,160 Q90,175 50,160 Z'); }
    50%  { d: path('M50,110 Q70,115 90,110 Q110,105 130,110 L130,160 Q90,175 50,160 Z'); }
    100% { d: path('M50,110 Q70,105 90,110 Q110,115 130,110 L130,160 Q90,175 50,160 Z'); }
}
.liquid-path {
    animation: liquid-wave 2s ease-in-out infinite;
}

/* SVG bubble animation */
@keyframes svg-rise {
    0%   { transform: translateY(0); opacity: 0.6; }
    100% { transform: translateY(-30px); opacity: 0; }
}
.svg-bubble {
    animation: svg-rise 2s ease-in infinite;
}

.status-line {
    min-height: 1.6em;
    text-align: center;
}
#loading {
    font-size: 1.2rem;
    color: #fff1b8;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.55);
}
#loading.hidden {
    display: none;
}

.count {
    font-size: 1.1rem;
    color: #fff1b8;
    margin-bottom: 2rem;
    font-family: 'Quicksand', sans-serif;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.55);
    display: none;
}
.count.visible {
    display: block;
}

.ticker-wrap {
    width: 100%;
    max-width: 900px;
    overflow: hidden;
    background: rgba(0,40,60,0.25);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 1.2rem 0;
    margin-bottom: 2rem;
    backdrop-filter: blur(6px);
    display: none;
}
.ticker-wrap.visible {
    display: block;
}
.ticker {
    display: flex;
    width: max-content;
    animation: scroll-ticker linear infinite;
}
.ticker-item {
    flex-shrink: 0;
    padding: 0.4rem 1.5rem;
    font-size: 1rem;
    color: #fff;
    white-space: nowrap;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.ticker-item .flag { color: #fff1b8; }
@keyframes scroll-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Ocean waves at bottom */
.ocean {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 110px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.wave-layer {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
}
.wave-layer svg {
    width: 100%;
    height: 100%;
}
.wave-layer:nth-child(1) {
    animation: drift1 7s ease-in-out infinite alternate;
    opacity: 0.35;
}
.wave-layer:nth-child(2) {
    animation: drift2 11s ease-in-out infinite alternate-reverse;
    opacity: 0.25;
    bottom: -8px;
}
.wave-layer:nth-child(3) {
    animation: drift3 9s ease-in-out infinite alternate;
    opacity: 0.18;
    bottom: -18px;
}
@keyframes drift1 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}
@keyframes drift2 {
    0%   { transform: translateX(-10%); }
    100% { transform: translateX(-30%); }
}
@keyframes drift3 {
    0%   { transform: translateX(-5%); }
    100% { transform: translateX(-20%); }
}

/* Swimming sea life */
.fish {
    position: fixed;
    font-size: 20px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
}

@media (max-width: 600px) {
    h1 { font-size: 1.8rem; }
    .drink-container svg { width: 140px; height: 190px; }
    .content { padding: 2rem 1rem; padding-bottom: 140px; }
}