:root {
    --bg: #0c1126;
    --panel: rgba(20, 28, 60, 0.78);
    --panel-strong: #151d3d;
    --text: #f7f8ff;
    --muted: #aeb6d2;
    --line: rgba(255, 255, 255, 0.1);
    --accent: #7f6dff;
    --accent-2: #52d6ff;
    --success: #63e6be;
    --danger: #ff758f;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 20% 10%, rgba(127, 109, 255, 0.17), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(82, 214, 255, 0.12), transparent 34%),
        linear-gradient(145deg, #090d1d, #111832 60%, #0b1024);
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.global-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(5, 9, 25, .82);
    backdrop-filter: blur(13px) saturate(1.25);
    opacity: 0;
    transition: opacity .2s ease;
}
.global-loader[hidden] { display: none; }
.global-loader.is-visible { opacity: 1; }
.loader-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(350px, calc(100vw - 40px));
    padding: 30px 30px 27px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 31px;
    background: linear-gradient(145deg, rgba(30,42,88,.96), rgba(12,20,49,.95));
    box-shadow: 0 32px 90px rgba(0,0,0,.52), 0 0 55px rgba(82,214,255,.13);
}
.loader-card strong { margin-top: 16px;font-size: 21px;font-weight: 950;letter-spacing: -.02em; }
.loader-card small { margin-top: 4px;color: var(--muted);font-size: 13px;font-weight: 800; }
.loader-brand-orbit { position:relative;width:104px;height:104px;display:grid;place-items:center; }
.loader-brand-orbit::before,
.loader-brand-orbit::after { content:"";position:absolute;inset:1px;border:2px solid transparent;border-top-color:#52d6ff;border-right-color:#7f6dff;border-radius:50%;animation:loaderSpin 1.35s linear infinite; }
.loader-brand-orbit::after { inset:9px;border-top-color:#ffe119;border-right-color:transparent;border-bottom-color:#e6194b;animation-direction:reverse;animation-duration:1.05s; }
.loader-brand-orbit img { width:72px;height:72px;object-fit:cover;border-radius:22px;box-shadow:0 10px 28px rgba(0,0,0,.38); }
.loader-orbit-dot { position:absolute;z-index:3;width:9px;height:9px;border-radius:50%;box-shadow:0 0 13px currentColor;animation:loaderPulse .85s ease-in-out infinite alternate; }
.loader-orbit-dot.dot-one { top:0;left:47px;background:#52d6ff;color:#52d6ff; }
.loader-orbit-dot.dot-two { right:8px;bottom:17px;background:#ffe119;color:#ffe119;animation-delay:.18s; }
.loader-orbit-dot.dot-three { left:7px;bottom:21px;background:#e6194b;color:#e6194b;animation-delay:.36s; }
.loader-bottles { display:flex;align-items:end;gap:7px;height:35px;margin-top:17px; }
.loader-bottles span { position:relative;width:15px;height:28px;border:2px solid rgba(226,235,255,.82);border-top:0;border-radius:0 0 7px 7px;overflow:hidden;animation:loaderBottle 1s ease-in-out var(--loader-delay) infinite alternate; }
.loader-bottles span::before { content:"";position:absolute;left:2px;right:2px;bottom:2px;height:66%;border-radius:2px 2px 5px 5px;background:var(--loader-liquid);animation:loaderLiquid .8s ease-in-out var(--loader-delay) infinite alternate; }
.loader-glow { position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(75px);opacity:.24;animation:loaderGlow 2s ease-in-out infinite alternate; }
.loader-glow-one { background:#7f6dff;transform:translate(-45%,-38%); }
.loader-glow-two { background:#22d3ee;transform:translate(48%,42%);animation-delay:.7s; }
body.server-loading { overflow:hidden; }
@keyframes loaderSpin { to { transform:rotate(360deg); } }
@keyframes loaderPulse { to { transform:scale(1.65);opacity:.55; } }
@keyframes loaderBottle { to { transform:translateY(-6px); } }
@keyframes loaderLiquid { to { height:88%;filter:brightness(1.18); } }
@keyframes loaderGlow { to { transform:translate(0,0) scale(1.2);opacity:.36; } }
@media (prefers-reduced-motion:reduce) {
    .loader-brand-orbit::before,.loader-brand-orbit::after,.loader-orbit-dot,.loader-bottles span,.loader-bottles span::before,.loader-glow { animation-duration:2.5s; }
}

.home-shell, .game-shell {
    position: relative;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 38px 0 54px;
    min-height: 100vh;
    isolation: isolate;
}

.ambient {
    position: fixed;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.16;
    pointer-events: none;
    z-index: -1;
}
.ambient-one { top: 6%; left: 1%; background: #7867ff; }
.ambient-two { right: 3%; bottom: 4%; background: #42ccff; }

.hero-card, .level-panel, .board-card {
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(26, 35, 73, 0.9), rgba(15, 22, 49, 0.82));
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.hero-card {
    border-radius: 34px;
    padding: 42px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.hero-card::after {
    content: "";
    position: absolute;
    inset: auto -80px -110px auto;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 0 0 28px rgba(255,255,255,.02), 0 0 0 60px rgba(255,255,255,.012);
}

.brand-mark {
    width: 116px;
    height: 116px;
    border-radius: 28px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 10px;
    padding: 17px;
    background: linear-gradient(145deg, rgba(127,109,255,.28), rgba(82,214,255,.13));
    border: 1px solid rgba(255,255,255,.11);
}
.mini-bottle {
    width: 29px;
    height: 72px;
    border: 3px solid rgba(255,255,255,.75);
    border-top: 0;
    border-radius: 0 0 13px 13px;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    transform: rotate(4deg);
}
.mini-bottle:nth-child(2) { height: 62px; transform: rotate(-7deg); }
.mini-bottle i { height: 50%; background: var(--liquid); display: block; }

.eyebrow {
    margin: 0 0 7px;
    color: #8fa4ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
}
.hero-card h1, .section-heading h2, .win-card h2 { margin: 0; }
.hero-card h1 { font-size: clamp(34px, 5vw, 62px); line-height: 1; letter-spacing: -0.045em; }
.hero-copy { max-width: 590px; color: var(--muted); margin: 15px 0 0; font-size: 17px; line-height: 1.55; }

.primary-button, .secondary-button, .icon-button {
    border: 0;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}
.primary-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 17px;
    background: linear-gradient(135deg, #806eff, #6254ee);
    color: white;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(95, 77, 239, .28);
}
.primary-button:hover, .secondary-button:hover:not(:disabled), .icon-button:hover { transform: translateY(-2px); }
.primary-button:active, .secondary-button:active:not(:disabled), .icon-button:active { transform: translateY(0); }

.level-panel { margin-top: 24px; border-radius: 30px; padding: 28px; }
.section-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 20px; }
.section-heading h2 { font-size: 30px; }
.level-count { color: var(--muted); font-weight: 800; font-size: 14px; }
.level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.level-card {
    min-height: 130px;
    padding: 18px;
    border-radius: 21px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.level-card:hover { transform: translateY(-4px); background: rgba(127,109,255,.1); border-color: rgba(143,130,255,.34); }
.level-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(127,109,255,.14);
    color: #bdb4ff;
    font-weight: 900;
}
.level-name { font-weight: 900; margin-top: 16px; }
.level-meta { color: var(--muted); font-size: 12px; margin-top: 3px; }

.game-shell { width: min(1050px, calc(100% - 28px)); }
.game-header {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    gap: 14px;
    margin-bottom: 17px;
}
.icon-button {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: rgba(255,255,255,.07);
    color: white;
    border: 1px solid var(--line);
    font-size: 22px;
    font-weight: 900;
}
.level-title { text-align: center; }
.level-title span { display: block; color: #8999cc; font-size: 11px; letter-spacing: .13em; font-weight: 900; }
.level-title strong { display: block; font-size: 23px; margin-top: 2px; }

.game-status {
    display: grid;
    grid-template-columns: 120px 1fr 120px;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.status-pill, .status-message {
    min-height: 62px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.045);
    border-radius: 18px;
}
.status-pill { display: flex; align-items: center; justify-content: center; gap: 9px; }
.status-label { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.status-pill strong { font-size: 20px; }
.status-message { display: grid; place-items: center; color: #d8dcf0; font-weight: 800; transition: color .15s ease; }
.status-message.error { color: #ff8ca2; }
.status-message.success { color: #72e9c4; }

.board-card { border-radius: 30px; padding: 34px 26px 24px; }
.game-board {
    min-height: 430px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(16px, 3vw, 31px);
    flex-wrap: wrap;
    padding: 40px 16px 28px;
}
.bottle-wrap {
    position: relative;
    width: 78px;
    height: 190px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: transform .2s cubic-bezier(.22,.8,.25,1), filter .2s ease;
}
.bottle-wrap:hover { transform: translateY(-5px); }
.bottle-wrap.selected { transform: translateY(-22px); filter: drop-shadow(0 10px 14px rgba(126,109,255,.26)); }
.bottle-wrap.invalid { animation: shake .34s ease; }
.bottle-wrap.pouring-left { transform: translateY(-16px) rotate(-24deg); transform-origin: 50% 75%; }
.bottle-wrap.pouring-right { transform: translateY(-16px) rotate(24deg); transform-origin: 50% 75%; }

.bottle-neck {
    position: absolute;
    top: 1px;
    left: 50%;
    width: 40px;
    height: 36px;
    transform: translateX(-50%);
    border-left: 4px solid rgba(225,234,255,.72);
    border-right: 4px solid rgba(225,234,255,.72);
    background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.04));
    z-index: 2;
}
.bottle-neck::before {
    content: "";
    position: absolute;
    width: 46px;
    height: 9px;
    left: 50%;
    top: -4px;
    transform: translateX(-50%);
    border: 4px solid rgba(225,234,255,.78);
    border-radius: 8px;
    background: rgba(20,28,60,.65);
}
.bottle {
    position: relative;
    width: 72px;
    height: 156px;
    border: 4px solid rgba(225,234,255,.72);
    border-top: 0;
    border-radius: 8px 8px 22px 22px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255,255,255,.045), transparent 25%, transparent 70%, rgba(255,255,255,.06)),
        rgba(255,255,255,.018);
    box-shadow: inset 8px 0 12px rgba(255,255,255,.02), inset -7px 0 12px rgba(255,255,255,.02);
}
.bottle::after {
    content: "";
    position: absolute;
    inset: 8px auto 19px 7px;
    width: 6px;
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 4;
}
.liquid-layer {
    position: absolute;
    left: 0;
    right: 0;
    height: 25%;
    bottom: calc(var(--slot) * 25%);
    background: var(--liquid);
    box-shadow: inset 0 8px 12px rgba(255,255,255,.08), inset 0 -8px 10px rgba(0,0,0,.08);
    transition: bottom .25s ease, opacity .2s ease, transform .25s ease;
}
.liquid-layer.top::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -1px;
    right: -1px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--liquid), white 12%);
}
.bottle-index {
    position: absolute;
    bottom: -26px;
    color: rgba(255,255,255,.27);
    font-size: 10px;
    font-weight: 900;
}

.game-actions { display: flex; justify-content: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.secondary-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 122px;
    min-height: 47px;
    padding: 0 18px;
    border-radius: 15px;
    color: #e9ebf9;
    background: rgba(255,255,255,.065);
    border: 1px solid var(--line);
    font-weight: 900;
}
.secondary-button:disabled { opacity: .35; cursor: not-allowed; }
.hint-line { text-align: center; color: var(--muted); font-size: 13px; margin-top: 16px; }
.hint-line span { color: #c4bdff; font-weight: 900; margin-right: 5px; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5,8,20,.72);
    backdrop-filter: blur(12px);
    overflow: hidden;
    isolation: isolate;
}
.modal-backdrop[hidden] { display: none; }
.fail-backdrop { background:rgba(5,10,28,.88);backdrop-filter:blur(8px); }
.fail-card { max-width:430px;text-align:center;border-color:rgba(255,91,119,.34);box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 45px rgba(255,77,109,.12); }
.fail-mark { display:grid;place-items:center;width:66px;height:66px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(145deg,#ff6b81,#d92f52);color:white;font-size:42px;font-weight:950;box-shadow:0 13px 35px rgba(255,77,109,.3); }
.fail-card h2 { margin-bottom:10px; }
.fail-copy { margin:0 0 24px;color:var(--muted);font-weight:700; }
.fail-actions { grid-template-columns:1fr; }
.fail-actions .primary-button { width:100%; }
.win-card {
    position: relative;
    z-index: 3;
    width: min(460px, 100%);
    border-radius: 30px;
    padding: 36px;
    text-align: center;
    background: linear-gradient(145deg, #1b2550, #121a38);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 35px 90px rgba(0,0,0,.55);
    animation: pop .32s cubic-bezier(.2,.9,.25,1.2);
}
.confetti-mark { font-size: 52px; color: #ffd166; margin-bottom: 8px; text-shadow: 0 0 35px rgba(255,209,102,.4); }
.win-card h2 { font-size: 34px; }
.win-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.win-actions { margin-top: 24px; display: grid; gap: 10px; }

@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }

@media (max-width: 850px) {
    .hero-card { grid-template-columns: auto 1fr; }
    .hero-card .primary-button { grid-column: 1 / -1; }
    .level-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .game-board { gap: 18px; min-height: 410px; }
}

@media (max-width: 600px) {
    .home-shell, .game-shell { width: min(100% - 18px, 1050px); padding-top: 18px; }
    .hero-card { padding: 25px 20px; border-radius: 25px; grid-template-columns: 1fr; }
    .brand-mark { width: 88px; height: 88px; }
    .hero-card h1 { font-size: 39px; }
    .hero-copy { font-size: 15px; }
    .level-panel { padding: 19px; border-radius: 24px; }
    .level-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .game-header { grid-template-columns: 48px 1fr 48px; }
    .icon-button { width: 48px; height: 48px; border-radius: 14px; }
    .level-title strong { font-size: 19px; }
    .game-status { grid-template-columns: 86px 1fr 86px; gap: 7px; }
    .status-pill, .status-message { min-height: 53px; border-radius: 14px; }
    .status-pill { flex-direction: column; gap: 0; }
    .status-pill strong { font-size: 17px; }
    .status-message { font-size: 12px; text-align: center; padding: 0 8px; }
    .board-card { padding: 22px 8px 18px; border-radius: 23px; }
    .game-board { min-height: 415px; gap: 12px; padding: 32px 5px 26px; }
    .bottle-wrap { width: 59px; height: 163px; }
    .bottle { width: 55px; height: 129px; border-width: 3px; border-radius: 7px 7px 18px 18px; }
    .bottle-neck { width: 31px; height: 34px; border-width: 0 3px; }
    .bottle-neck::before { width: 37px; border-width: 3px; }
    .game-actions { gap: 8px; }
    .secondary-button { min-width: 110px; }
}

/* v2: 200 levels, realistic dragging, external sign-in */
.top-nav {
    position: relative;
    z-index: 50;
    width: min(1180px, calc(100% - 28px));
    margin: 14px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}
.top-brand { color: #eef1ff; font-weight: 900; letter-spacing: -.02em; }
.top-account { display: flex; align-items: center; gap: 12px; }
.top-account form { margin: 0; }
.signed-user { color: var(--muted); max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-profile-chip { display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:4px 11px 4px 5px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.045); }
.user-profile-avatar { position:relative;width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(135deg,#7f6dff,#3dc7ee);color:white;font-size:12px;font-weight:900;box-shadow:0 5px 13px rgba(61,92,225,.26); }
.user-profile-avatar img,.ranking-row .avatar img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit; }
.ranking-row .avatar { position:relative;overflow:hidden; }
.nav-action {
    display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.055); color: #eef1ff;
    font: inherit; font-weight: 800; cursor: pointer;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero-login { min-height: 54px; text-decoration: none; }
.difficulty-tabs { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }
.difficulty-tab {
    border: 1px solid var(--line); background: rgba(255,255,255,.045); color: #abb4d3; border-radius: 13px;
    padding: 9px 13px; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer;
}
.difficulty-tab span { opacity: .55; margin-left: 4px; }
.difficulty-tab.active { background: rgba(127,109,255,.17); color: white; border-color: rgba(143,130,255,.45); }
.level-card[hidden] { display: none !important; }
.level-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.difficulty-badge { color: #8999cc; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

.bottle-wrap { touch-action: none; -webkit-user-drag: none; }
.bottle-wrap.holding { transform: translateY(-10px) scale(1.025); }
.bottle-wrap.dragging {
    transform: translate3d(var(--drag-x), var(--drag-y), 0) scale(1.08) rotate(2deg) !important;
    filter: drop-shadow(0 18px 18px rgba(0,0,0,.34)); z-index: 40; pointer-events: none;
    transition: none;
}
.bottle-wrap.drop-valid { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 0 14px rgba(78,215,168,.48)); }
.bottle-wrap.drop-valid .bottle { border-color: rgba(112,235,198,.96); }
.bottle-wrap.drop-invalid { animation: shake .34s ease; filter: drop-shadow(0 0 10px rgba(255,92,122,.3)); }
.bottle-wrap.animating-pour { pointer-events: none; }
.pour-stream {
    position: fixed; height: 7px; border-radius: 999px; transform-origin: 0 50%; z-index: 29;
    background: var(--stream-color); box-shadow: 0 0 10px color-mix(in srgb, var(--stream-color), white 20%);
    animation: streamPulse .12s linear infinite alternate; pointer-events: none;
}
.pour-stream::after { content:""; position:absolute; inset:-2px 0; background:rgba(255,255,255,.13); border-radius:inherit; }
@keyframes streamPulse { from { height: 5px; opacity: .86; } to { height: 8px; opacity: 1; } }

.login-shell { width: min(520px, calc(100% - 28px)); margin: 70px auto; }
.login-card {
    border: 1px solid var(--line); background: rgba(19,27,59,.93); border-radius: 30px; padding: 34px;
    box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.login-card h1 { font-size: clamp(30px, 5vw, 42px); margin: 3px 0 8px; letter-spacing: -.035em; }
.back-link { display: inline-block; color: #aeb7d7; margin-bottom: 28px; font-weight: 800; }
.login-copy, .login-note { color: var(--muted); line-height: 1.55; }
.login-note { font-size: 12px; margin: 22px 0 0; }
.login-alert { margin: 16px 0; padding: 12px 14px; background: rgba(255,92,122,.1); border: 1px solid rgba(255,92,122,.25); border-radius: 13px; color: #ffabb9; }
.social-login-list { display: grid; gap: 13px; margin-top: 24px; }
.social-login-list form { display:grid;gap:4px;margin:0; }
.social-login {
    width:100%;min-height:56px;padding:0 12px;display:grid;grid-template-columns:28px 1fr 28px;
    align-items:center;gap:10px;border-radius:8px;cursor:pointer;direction:ltr;
    transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease;
}
.social-login:focus-visible { outline:3px solid rgba(138,180,248,.55);outline-offset:3px; }
.social-login:not(:disabled):active { transform:translateY(1px); }
.social-login:disabled { opacity:.52;cursor:not-allowed;filter:saturate(.7); }
.provider-icon,.provider-balance { width:28px;height:28px;display:grid;place-items:center; }
.provider-icon svg { display:block;width:21px;height:21px; }
.provider-label { overflow:hidden;text-align:center;white-space:nowrap;text-overflow:ellipsis; }
.provider-availability { justify-self:end;color:#8f98ba;font-size:10px;font-weight:800; }
.social-login.google { color:#1f1f1f;background:#fff;border:1px solid #747775;font-family:"Google Sans",Roboto,Arial,sans-serif;font-size:14px;font-weight:500;line-height:20px; }
.social-login.google:not(:disabled):hover { background:#f8faff;border-color:#5f6368;box-shadow:0 1px 3px rgba(60,64,67,.3); }
.social-login.microsoft { color:#5e5e5e;background:#fff;border:1px solid #8c8c8c;font-family:"Segoe UI",Arial,sans-serif;font-size:15px;font-weight:600; }
.social-login.microsoft:not(:disabled):hover { color:#2f2f2f;background:#f5f5f5;border-color:#666;box-shadow:0 1px 3px rgba(0,0,0,.24); }
.social-login.facebook { color:#fff;background:#1877f2;border:1px solid #1877f2;font-family:Helvetica,Arial,sans-serif;font-size:15px;font-weight:700; }
.social-login.facebook:not(:disabled):hover { background:#166fe5;border-color:#166fe5;box-shadow:0 2px 5px rgba(24,119,242,.32); }
.social-login.facebook .provider-icon { color:#fff; }

@media (max-width: 800px) {
    .level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .game-board { gap: 15px; padding-left: 4px; padding-right: 4px; }
    .bottle-wrap { width: 68px; transform-origin: center bottom; }
}
@media (max-width: 520px) {
    .top-nav { width: calc(100% - 20px); }
    .signed-user { display: none; }
    .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .level-panel { padding: 18px; }
    .game-status { grid-template-columns: 84px 1fr 84px; }
    .status-message { font-size: 12px; padding: 0 6px; text-align: center; }
    .bottle-wrap { width: 58px; height: 170px; }
    .bottle { width: 58px; height: 138px; }
    .bottle-neck { width: 34px; }
    .bottle-neck::before { width: 40px; }
}

/* v3 competitive challenge layer */
.challenge-layout {
    width: min(1480px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 22px;
    align-items: start;
}
.challenge-layout .game-shell { width: 100%; }
.timer-pill strong { font-variant-numeric: tabular-nums; min-width: 72px; text-align: center; }
.champions-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 16px;
    padding-top: 28px;
    z-index: 8;
}
.ranking-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 25px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(24,34,72,.96), rgba(14,21,48,.96));
    box-shadow: 0 24px 65px rgba(0,0,0,.24);
}
.ranking-card::before {
    content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-95px; top:-105px;
    background: radial-gradient(circle, rgba(126,109,255,.26), transparent 70%); pointer-events:none;
}
.champion-card {
    border-color: rgba(255,209,102,.22);
    background: linear-gradient(155deg, rgba(48,40,65,.97), rgba(19,24,52,.97) 62%);
}
.champion-card::before { background: radial-gradient(circle, rgba(255,209,102,.22), transparent 68%); }
.champion-crown {
    position:absolute; right:18px; top:12px; font-size:42px; color:#ffd166; transform:rotate(8deg);
    text-shadow:0 0 24px rgba(255,209,102,.34); opacity:.9;
}
.ranking-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:14px; }
.ranking-head h3 { margin:1px 0 0; font-size:21px; letter-spacing:-.025em; }
.live-badge {
    display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; font-size:9px; font-weight:900;
    letter-spacing:.08em; color:#7ff0cd; background:rgba(78,215,168,.09); border:1px solid rgba(78,215,168,.22);
}
.live-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:#4ed7a8; box-shadow:0 0 10px #4ed7a8; }
.champion-copy { margin:-5px 0 14px; font-size:11px; color:#8f98ba; line-height:1.5; max-width:245px; }
.ranking-list { display:grid; gap:7px; max-height:430px; overflow:auto; padding-right:2px; scrollbar-width:thin; }
.rank-row {
    display:grid; grid-template-columns:32px 34px minmax(0,1fr) auto; gap:8px; align-items:center;
    min-height:49px; padding:6px 7px; border-radius:14px; border:1px solid transparent; background:rgba(255,255,255,.025);
}
.rank-row:nth-child(1) { background:linear-gradient(90deg, rgba(255,209,102,.11), rgba(255,255,255,.025)); }
.rank-row:nth-child(2) { background:linear-gradient(90deg, rgba(205,216,235,.08), rgba(255,255,255,.02)); }
.rank-row:nth-child(3) { background:linear-gradient(90deg, rgba(231,151,92,.08), rgba(255,255,255,.02)); }
.rank-row.is-you { border-color:rgba(132,118,255,.55); background:rgba(126,109,255,.11); box-shadow:inset 0 0 18px rgba(126,109,255,.055); }
.rank-position { text-align:center; font-size:11px; color:#7f89ac; font-weight:900; }
.rank-1,.rank-2,.rank-3 { font-size:18px; }
.rank-avatar {
    width:32px; height:32px; display:grid; place-items:center; border-radius:10px; color:#fff; font-size:12px; font-weight:900;
    background:linear-gradient(135deg, #7f6dff, #4d8dff); box-shadow:0 5px 14px rgba(79,91,220,.2);
}
.rank-name { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:800; color:#e9edff; }
.rank-score { text-align:right; font-variant-numeric:tabular-nums; font-size:12px; color:#fff; font-weight:900; }
.rank-score small { display:block; margin-top:1px; font-size:9px; color:#7782a8; font-weight:800; }
.your-rank { margin-top:10px; padding:10px 12px; border-radius:12px; text-align:center; color:#c8c2ff; background:rgba(126,109,255,.08); font-size:11px; font-weight:900; }
.empty-ranking { padding:28px 10px; text-align:center; color:#6f789c; font-size:12px; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 10px; }
.result-grid > div { padding:13px 8px; border-radius:15px; background:rgba(255,255,255,.045); border:1px solid var(--line); }
.result-grid span { display:block; font-size:9px; color:#7d87aa; letter-spacing:.1em; font-weight:900; }
.result-grid strong { display:block; margin-top:3px; font-size:20px; font-variant-numeric:tabular-nums; }

@media (max-width: 1180px) {
    .challenge-layout { grid-template-columns:minmax(0,1fr) 310px; gap:14px; }
    .ranking-card { padding:16px; }
}
@media (max-width: 980px) {
    .challenge-layout { width:min(100% - 18px, 1050px); grid-template-columns:1fr; }
    .champions-sidebar { position:static; grid-template-columns:1fr 1fr; padding-top:0; padding-bottom:28px; }
    .ranking-list { max-height:330px; }
}
@media (max-width: 650px) {
    .champions-sidebar { grid-template-columns:1fr; }
    .challenge-layout { width:calc(100% - 18px); }
    .result-grid { gap:6px; }
    .result-grid strong { font-size:16px; }
}


/* v4 realistic interaction + progression */
html[dir="rtl"] body{font-family:"Cairo",system-ui,sans-serif}.compact-hero{grid-template-columns:auto 1fr}.progress-strip{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.progress-strip>div{min-width:130px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid var(--line)}.progress-strip small{display:block;color:var(--muted);font-weight:800}.progress-strip strong{font-size:25px}.champion-home{margin-top:24px}.champion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.champion-card{display:flex;gap:13px;align-items:center;padding:16px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid var(--line)}.champion-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#7f6dff,#52d6ff);font-weight:900;overflow:hidden}.champion-avatar img{width:100%;height:100%;object-fit:cover}.champion-card span,.champion-card small{display:block;color:var(--muted)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:16px}.play-column{min-width:0}.level-title em{display:block;color:var(--muted);font-size:11px;font-style:normal}.competition-sidebar{display:flex;flex-direction:column;gap:14px}.ranking-panel,.max-level-badge{border:1px solid var(--line);background:rgba(20,28,60,.78);border-radius:22px;padding:16px}.ranking-heading{display:flex;gap:10px;align-items:center;margin-bottom:11px}.ranking-heading>span{font-size:25px}.ranking-heading small,.ranking-heading strong{display:block}.ranking-heading small{color:var(--muted);font-size:10px}.ranking-list{display:grid;gap:6px}.ranking-row{display:grid;grid-template-columns:32px 30px 1fr auto;gap:7px;align-items:center;padding:7px;border-radius:12px;background:rgba(255,255,255,.035);font-size:12px}.ranking-row.is-you{outline:1px solid rgba(99,230,190,.5);background:rgba(99,230,190,.08)}.ranking-row .avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(127,109,255,.18);font-weight:900}.player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-name small{display:block;color:var(--muted)}.champion-row{grid-template-columns:34px 30px 1fr}.max-level-badge{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(127,109,255,.15),rgba(82,214,255,.08))}.max-level-badge>span{font-size:28px}.max-level-badge small,.max-level-badge strong{display:block}.max-level-badge strong{font-size:24px}
.bottle-wrap{touch-action:none;will-change:transform;transition:transform .22s cubic-bezier(.2,.75,.25,1),filter .2s;z-index:1}.bottle-wrap.selected{transform:translateY(-42px) scale(1.035);filter:drop-shadow(0 18px 18px rgba(126,109,255,.34));z-index:6}.bottle-wrap.selected::after{content:"";position:absolute;bottom:-22px;width:45px;height:7px;border-radius:50%;background:rgba(127,109,255,.3);filter:blur(3px)}.bottle-wrap.dragging{transform:translate(var(--drag-x),var(--drag-y)) translateY(-38px) scale(1.07);z-index:50;filter:drop-shadow(0 24px 22px rgba(0,0,0,.45));transition:none;cursor:grabbing}.bottle-wrap.drop-valid{transform:translateY(-11px) scale(1.05);filter:drop-shadow(0 0 14px rgba(99,230,190,.55))}.bottle-wrap.drop-invalid{filter:drop-shadow(0 0 12px rgba(255,117,143,.55))}.bottle-wrap.pour-to-right,.bottle-wrap.pour-to-left{transform:translateX(var(--pour-x)) translateY(-105px);z-index:40;transition:transform .22s cubic-bezier(.2,.8,.2,1)}.bottle-wrap.pour-to-right.tilted{transform:translateX(calc(var(--pour-x) - 30px)) translateY(-112px) rotate(58deg)}.bottle-wrap.pour-to-left.tilted{transform:translateX(calc(var(--pour-x) + 30px)) translateY(-112px) rotate(-58deg)}.bottle-wrap.receiving{filter:drop-shadow(0 0 17px rgba(82,214,255,.4))}
.glass-bottle{position:absolute;bottom:0;width:64px;height:153px;border:4px solid rgba(225,234,255,.74);border-top:0;border-radius:0 0 24px 24px;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.12) 25%,rgba(255,255,255,.025) 60%,rgba(255,255,255,.07));box-shadow:inset 7px 0 12px rgba(255,255,255,.04),inset -7px 0 14px rgba(0,0,0,.12)}.glass-highlight{position:absolute;z-index:20;left:9px;top:12px;width:7px;height:90px;border-radius:9px;background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,.02));filter:blur(.4px);pointer-events:none}.glass-bottom{position:absolute;z-index:20;bottom:5px;left:10px;right:10px;height:7px;border-radius:50%;background:rgba(255,255,255,.12);filter:blur(1px)}.liquid-stack{position:absolute;inset:0;overflow:hidden}.liquid-layer{position:absolute;left:0;right:0;bottom:calc(var(--slot) * 25%);height:25%;background:linear-gradient(90deg,color-mix(in srgb,var(--fill),black 12%),var(--fill) 45%,color-mix(in srgb,var(--fill),white 15%));box-shadow:inset 0 5px 7px rgba(255,255,255,.12),inset 0 -5px 8px rgba(0,0,0,.13);overflow:visible}.liquid-wave{position:absolute;left:-5%;top:-4px;width:110%;height:10px;border-radius:50%;background:color-mix(in srgb,var(--fill),white 22%);box-shadow:0 2px 4px rgba(0,0,0,.1);animation:liquidWave 2.4s ease-in-out infinite alternate}.liquid-shine{position:absolute;inset:2px auto 2px 8px;width:5px;border-radius:50%;background:rgba(255,255,255,.16)}.liquid-bubble{position:absolute;width:5px;height:5px;border:1px solid rgba(255,255,255,.35);border-radius:50%;bottom:3px;animation:bubble 3.4s linear infinite}.liquid-bubble.b1{left:25%}.liquid-bubble.b2{left:67%;width:3px;height:3px;animation-delay:1.2s}.pour-stream{position:absolute;z-index:60;top:14px;width:10px;height:84px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.38),var(--stream-color) 36%,color-mix(in srgb,var(--stream-color),white 18%));transform-origin:top;filter:drop-shadow(0 0 4px rgba(82,214,255,.35));animation:streamPulse .18s ease-in-out infinite alternate}.pour-stream.right{right:-7px;transform:rotate(-8deg)}.pour-stream.left{left:-7px;transform:rotate(8deg)}
@keyframes liquidWave{from{transform:translateX(-2%) scaleY(.8)}to{transform:translateX(2%) scaleY(1.15)}}@keyframes bubble{0%{transform:translateY(0);opacity:0}20%{opacity:.6}100%{transform:translateY(-26px);opacity:0}}@keyframes streamPulse{from{width:8px;opacity:.75}to{width:11px;opacity:1}}
.admin-shell{width:min(1200px,calc(100% - 32px));margin:35px auto}.admin-shell.narrow{width:min(850px,calc(100% - 32px))}.admin-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.admin-head h1{margin:0;font-size:36px}.admin-table-wrap,.admin-form{border:1px solid var(--line);background:var(--panel);border-radius:24px;padding:20px;overflow:auto}.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}.admin-table small{color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.admin-form label{display:grid;gap:6px;margin-bottom:14px;font-weight:800}.admin-form input,.admin-form textarea{width:100%;background:rgba(255,255,255,.055);border:1px solid var(--line);color:white;border-radius:12px;padding:11px;font:inherit}.admin-form textarea{font-family:ui-monospace,Consolas,monospace}.admin-form .check{display:flex;align-items:center}.admin-form .check input{width:auto}.validation{color:#ff8ca2}.admin-message{padding:12px 16px;background:rgba(99,230,190,.1);border:1px solid rgba(99,230,190,.3);border-radius:14px;margin-bottom:14px}
@media(max-width:950px){.game-layout{grid-template-columns:1fr}.competition-sidebar{display:grid;grid-template-columns:1fr 1fr}.max-level-badge{grid-column:1/-1}.champion-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.competition-sidebar,.champion-grid,.form-grid{grid-template-columns:1fr}.compact-hero{grid-template-columns:1fr}.game-board{gap:12px;padding-inline:2px}.bottle-wrap{width:64px;transform:scale(.92);transform-origin:bottom center}.bottle-wrap.selected{transform:translateY(-38px) scale(.96)}}
.pour-stream{background:linear-gradient(90deg,rgba(255,255,255,.38),var(--stream-color) 38%,color-mix(in srgb,var(--stream-color),white 18%));}
.bottle-wrap.tilted .liquid-layer{transition:transform .16s ease,transform-origin .16s ease;}
.bottle-wrap.pour-to-right.tilted .liquid-layer{transform:rotate(-58deg) scale(1.15);transform-origin:75% 50%;}
.bottle-wrap.pour-to-left.tilted .liquid-layer{transform:rotate(58deg) scale(1.15);transform-origin:25% 50%;}

.game-load-error{max-width:560px;margin:auto;padding:20px 24px;border:1px solid rgba(255,117,143,.35);border-radius:16px;background:rgba(255,72,105,.08);color:#ff9aae;font-weight:800;text-align:center;line-height:1.6}

/* v6: flask-shaped bottles and pointer-accurate liquid transfer */
.bottle-wrap {
    width: 88px;
    height: 198px;
    align-items: center;
    cursor: grab;
    transform-origin: 50% 70%;
    will-change: transform;
    transition: transform .24s cubic-bezier(.2,.82,.22,1), filter .2s ease;
}
.bottle-wrap:hover { transform: translateY(-5px) scale(1.015); }
.bottle-wrap.selected {
    transform: translateY(-26px) scale(1.035);
    filter: drop-shadow(0 17px 17px rgba(126,109,255,.3));
}
.bottle-wrap.dragging {
    transform: translate3d(var(--drag-x),var(--drag-y),0) scale(1.06);
    filter: drop-shadow(0 22px 18px rgba(0,0,0,.42));
    transition: none;
    cursor: grabbing;
    z-index: 80;
}
.bottle-wrap.drop-valid {
    transform: translateY(-12px) scale(1.07);
    filter: drop-shadow(0 0 16px rgba(99,230,190,.72));
}
.bottle-wrap.drop-invalid {
    filter: drop-shadow(0 0 15px rgba(255,117,143,.7));
}
.bottle-wrap.receiving {
    transform: translateY(-6px) scale(1.025);
    filter: drop-shadow(0 0 19px rgba(82,214,255,.56));
}
.bottle-wrap.pour-to-right,
.bottle-wrap.pour-to-left {
    transform: translate3d(var(--pour-x),var(--pour-y),0);
    transform-origin: 50% 28%;
    z-index: 70;
    transition: transform .26s cubic-bezier(.2,.82,.22,1);
}
.bottle-wrap.pour-to-right.tilted {
    transform: translate3d(var(--pour-x),var(--pour-y),0) rotate(57deg);
}
.bottle-wrap.pour-to-left.tilted {
    transform: translate3d(var(--pour-x),var(--pour-y),0) rotate(-57deg);
}
.bottle-svg {
    width: 84px;
    height: 190px;
    display: block;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 8px 8px rgba(1,6,24,.22));
}
.bottle-glass {
    fill: rgba(91,126,205,.075);
}
.bottle-outline {
    fill: none;
    stroke: rgba(202,220,255,.84);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bottle-rim {
    fill: rgba(17,34,77,.92);
    stroke: rgba(202,220,255,.86);
    stroke-width: 3.5;
}
.bottle-highlight {
    fill: none;
    stroke: rgba(255,255,255,.58);
    stroke-width: 5;
    stroke-linecap: round;
    opacity: .8;
}
.liquid-stack { pointer-events: none; }
.liquid-layer {
    position: static;
    background: none;
    box-shadow: none;
    overflow: visible;
    transform-box: fill-box;
    transform-origin: center;
}
.liquid-layer rect { fill: var(--fill); }
.liquid-surface {
    fill: color-mix(in srgb,var(--fill),white 14%);
    opacity: 0;
    transform-origin: center;
}
.liquid-layer.is-top .liquid-surface {
    opacity: 1;
    animation: flaskWave 1.9s ease-in-out infinite alternate;
}
.liquid-glint {
    fill: none;
    stroke: rgba(255,255,255,.27);
    stroke-width: 4;
    stroke-linecap: round;
}
.bottle-wrap.tilted .liquid-layer { transform: none; transition: none; }
.liquid-layer.is-draining { animation: liquidDrain .3s ease-in forwards; }
.liquid-layer.is-filling { animation: liquidFill .34s cubic-bezier(.18,.8,.28,1) both; }
.pour-stream-global {
    position: fixed;
    z-index: 90;
    height: 9px;
    border-radius: 999px;
    pointer-events: none;
    transform-origin: 0 50%;
    background: linear-gradient(180deg,color-mix(in srgb,var(--stream-color),white 28%),var(--stream-color) 48%,color-mix(in srgb,var(--stream-color),black 8%));
    box-shadow: 0 0 8px color-mix(in srgb,var(--stream-color),transparent 28%);
    animation: streamFlow .12s ease-in-out infinite alternate, streamAppear .46s ease both;
}
@keyframes flaskWave { from { transform: translateX(-2px) scaleY(.82); } to { transform: translateX(2px) scaleY(1.12); } }
@keyframes liquidDrain { to { opacity: 0; transform: translateY(-24px) scaleY(.25); } }
@keyframes liquidFill { from { opacity: .2; transform: translateY(-38px) scaleY(.35); } to { opacity: 1; transform: none; } }
@keyframes streamFlow { from { height: 7px; } to { height: 10px; } }
@keyframes streamAppear { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 18%,78% { opacity: 1; clip-path: inset(0); } 100% { opacity: 0; clip-path: inset(0); } }

@media (max-width:650px) {
    .bottle-wrap { width: 70px; height: 180px; transform: none; }
    .bottle-svg { width: 72px; height: 170px; }
    .bottle-wrap.selected { transform: translateY(-24px) scale(1.02); }
    .bottle-wrap.dragging { transform: translate3d(var(--drag-x),var(--drag-y),0) scale(1.04); }
}

/* Full-screen verified-win celebration */
body.celebration-open { overflow: hidden; }
.celebration-effects,
.confetti-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.celebration-effects {
    z-index: 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%,rgba(255,209,102,.2),transparent 22%),
        conic-gradient(from 0deg at 50% 50%,rgba(255,77,109,.13),rgba(34,211,238,.13),rgba(99,230,190,.13),rgba(167,139,250,.15),rgba(255,77,109,.13));
    opacity: 0;
}
.modal-backdrop.celebrating .celebration-effects {
    opacity: 1;
    animation: celebrationHue 7s linear infinite, celebrationReveal .5s ease-out both;
}
.celebration-orb {
    position: absolute;
    width: min(58vw,760px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(75px);
    opacity: .34;
    mix-blend-mode: screen;
}
.orb-one { left:-18%; top:-30%; background:#ff3d81; animation:orbFloatOne 6s ease-in-out infinite alternate; }
.orb-two { right:-20%; bottom:-38%; background:#00d9ff; animation:orbFloatTwo 7s ease-in-out infinite alternate; }
.orb-three { left:32%; top:30%; width:min(35vw,470px); background:#8b5cf6; animation:orbPulse 4s ease-in-out infinite alternate; }
.confetti-field { z-index: 2; overflow: hidden; }
.confetti-piece {
    position: absolute;
    left: var(--x);
    top: -12vh;
    width: var(--size);
    height: calc(var(--size) * 1.8);
    border-radius: 2px;
    background: var(--confetti);
    box-shadow: 0 0 8px color-mix(in srgb,var(--confetti),transparent 45%);
    opacity: 0;
    animation: confettiFall var(--duration) cubic-bezier(.18,.72,.28,1) var(--delay) infinite;
}
.confetti-piece:nth-child(3n) { border-radius: 50%; height: var(--size); }
.confetti-piece:nth-child(4n) { clip-path: polygon(50% 0,100% 100%,0 100%); }
.modal-backdrop.celebrating .win-card {
    animation: celebrationCard .65s cubic-bezier(.16,1,.3,1) both;
    border-color: rgba(255,220,125,.55);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08),0 30px 100px rgba(0,0,0,.6),0 0 65px rgba(126,109,255,.28);
}
.modal-backdrop.celebrating .confetti-mark { animation:trophyCelebrate 1.15s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes celebrationReveal { from { opacity:0; transform:scale(1.12); } to { opacity:1; transform:none; } }
@keyframes celebrationHue { to { filter:hue-rotate(360deg); } }
@keyframes orbFloatOne { to { transform:translate(22vw,18vh) scale(1.18); } }
@keyframes orbFloatTwo { to { transform:translate(-24vw,-14vh) scale(1.12); } }
@keyframes orbPulse { to { transform:scale(1.45); opacity:.5; } }
@keyframes confettiFall {
    0% { opacity:0; transform:translate3d(0,-8vh,0) rotate(0); }
    8% { opacity:1; }
    100% { opacity:.95; transform:translate3d(var(--drift),120vh,0) rotate(var(--turn)); }
}
@keyframes celebrationCard { from { opacity:0; transform:translateY(30px) scale(.82); } 70% { transform:translateY(-5px) scale(1.025); } to { opacity:1; transform:none; } }
@keyframes trophyCelebrate { 0% { opacity:0; transform:scale(.3) rotate(-20deg); } 60% { transform:scale(1.25) rotate(8deg); } 100% { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) {
    .modal-backdrop.celebrating .celebration-effects,
    .modal-backdrop.celebrating .win-card,
    .modal-backdrop.celebrating .confetti-mark,
    .celebration-orb { animation:none; }
    .confetti-piece { display:none; }
}

/* Endless Adventures project branding */
:root {
    --brand-gold:#ffc928;
    --brand-orange:#ff8a18;
    --brand-purple:#8b43e8;
    --brand-cyan:#14c9f4;
}
body {
    background:
        radial-gradient(circle at 18% 8%,rgba(20,201,244,.14),transparent 28%),
        radial-gradient(circle at 82% 78%,rgba(139,67,232,.16),transparent 34%),
        radial-gradient(circle at 52% 44%,rgba(255,201,40,.055),transparent 30%),
        linear-gradient(145deg,#040d22,#0b1a3b 58%,#061127);
}
.top-brand { display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:900;letter-spacing:-.025em;text-shadow:0 2px 12px rgba(0,0,0,.3); }
.top-brand img { width:46px;height:46px;object-fit:cover;border-radius:13px;border:1px solid rgba(255,201,40,.58);box-shadow:0 6px 18px rgba(0,0,0,.3),0 0 18px rgba(20,201,244,.12); }
.top-brand span { background:linear-gradient(90deg,#fff 8%,#ffe275 52%,#fff);background-clip:text;-webkit-background-clip:text;color:transparent; }
.brand-logo-mark {
    width:clamp(190px,23vw,270px);
    height:auto;
    aspect-ratio:1;
    padding:0;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(255,201,40,.42);
    background:#061532;
    box-shadow:0 24px 55px rgba(0,0,0,.36),0 0 35px rgba(20,201,244,.12);
}
.brand-logo-mark img { width:100%;height:100%;display:block;object-fit:cover; }
.brand-kicker { color:#ffd55b; }
.hero-card { border-color:rgba(255,201,40,.18); }
.hero-card::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(20,201,244,.045),transparent 38%,rgba(139,67,232,.06)); }
.login-card { border-color:rgba(255,201,40,.2);background:linear-gradient(155deg,rgba(14,31,69,.97),rgba(12,19,48,.97)); }
.login-brand { display:flex;align-items:center;gap:12px;width:max-content;margin:0 auto 24px;color:#fff;font-size:18px;font-weight:900;letter-spacing:-.02em; }
.login-brand img { width:72px;height:72px;object-fit:cover;border-radius:18px;border:1px solid rgba(255,201,40,.48);box-shadow:0 10px 25px rgba(0,0,0,.3); }
.login-brand span { background:linear-gradient(90deg,#fff,#ffd75f);background-clip:text;-webkit-background-clip:text;color:transparent; }
.primary-button { background:linear-gradient(135deg,#8846ea,#4c77f1 60%,#18aee0);box-shadow:0 12px 30px rgba(88,74,230,.32); }

@media (max-width:650px) {
    .brand-logo-mark { width:min(260px,82vw);justify-self:center; }
    .compact-hero { text-align:center; }
    .compact-hero .primary-button { margin-inline:auto; }
    .progress-strip { justify-content:center; }
}
@media (max-width:430px) {
    .top-brand span { display:none; }
    .top-brand img { width:42px;height:42px; }
    .login-brand { font-size:16px; }
    .login-brand img { width:60px;height:60px; }
}

/* Independent difficulty progression tracks */
.difficulty-panel { margin-top:24px;padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:30px;background:linear-gradient(145deg,rgba(20,30,66,.92),rgba(10,20,47,.88));box-shadow:var(--shadow); }
.difficulty-heading { align-items:center; }
.difficulty-heading .level-count { max-width:470px;text-align:end;line-height:1.45; }
.difficulty-track-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.difficulty-track { --track:#7f6dff;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:275px;padding:19px;border:1px solid color-mix(in srgb,var(--track),transparent 68%);border-radius:22px;background:linear-gradient(150deg,color-mix(in srgb,var(--track),transparent 88%),rgba(255,255,255,.025));transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.difficulty-track::after { content:"";position:absolute;width:150px;height:150px;right:-75px;top:-80px;border-radius:50%;background:var(--track);filter:blur(55px);opacity:.16;pointer-events:none; }
.difficulty-track:hover { transform:translateY(-4px);border-color:color-mix(in srgb,var(--track),white 10%);box-shadow:0 18px 38px rgba(0,0,0,.22); }
.difficulty-track-link { color:inherit;text-decoration:none;cursor:pointer; }
.difficulty-track-link:focus-visible { outline:3px solid color-mix(in srgb,var(--track),white 25%);outline-offset:4px; }
.track-card-action { position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:15px;color:color-mix(in srgb,var(--track),white 42%);font-weight:900; }
.modal-close { position:absolute;z-index:4;inset-block-start:14px;inset-inline-end:14px;display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(7,12,35,.55);color:#fff;text-decoration:none;font-size:27px;line-height:1;transition:transform .16s ease,background .16s ease; }
.modal-close:hover { transform:rotate(8deg) scale(1.06);background:rgba(255,255,255,.14); }
.difficulty-easy { --track:#63e6be; }.difficulty-normal { --track:#4dabf7; }.difficulty-tricky { --track:#b197fc; }.difficulty-hard { --track:#ff6b6b; }.difficulty-expert { --track:#22d3ee; }.difficulty-master { --track:#ffd43b; }.difficulty-legend { --track:#f783ac; }
.difficulty-track-head { display:flex;align-items:center;gap:12px;position:relative;z-index:1; }
.difficulty-icon { width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--track),transparent 82%);font-size:24px; }
.difficulty-track-head small { color:#8791b5;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase; }
.difficulty-track h3 { margin:1px 0 0;font-size:21px; }
.difficulty-range { margin:16px 0;color:#aeb7d7;font-size:12px;font-weight:800; }
.track-progress-row { display:flex;justify-content:space-between;gap:10px;margin-top:auto;color:#8f99bd;font-size:11px;font-weight:800; }
.track-progress-row strong { color:#fff; }
.track-progress { height:8px;margin-top:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07); }
.track-progress i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--track),white 5%),var(--track));box-shadow:0 0 12px color-mix(in srgb,var(--track),transparent 30%); }
.track-current { margin:10px 0;color:color-mix(in srgb,var(--track),white 28%);font-size:11px;font-weight:900; }
.track-button { display:flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:0 13px;border:1px solid color-mix(in srgb,var(--track),transparent 48%);border-radius:13px;background:color-mix(in srgb,var(--track),transparent 82%);color:#fff;font-size:13px;font-weight:900;transition:transform .16s ease,background .16s ease; }
.track-button:hover { transform:translateY(-2px);background:color-mix(in srgb,var(--track),transparent 72%); }

@media (max-width:900px) { .difficulty-track-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
    .difficulty-panel { padding:18px;border-radius:24px; }
    .difficulty-heading { align-items:flex-start;flex-direction:column; }
    .difficulty-heading .level-count { text-align:start; }
    .difficulty-track-grid { grid-template-columns:1fr; }
    .difficulty-track { min-height:255px; }
}

/* Viewport-fitted gameplay, sealed bottles, and completion magic */
body.game-page {
    height:100dvh;
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
    overscroll-behavior:none;
}
.game-page .top-nav { flex:0 0 auto;min-height:46px;margin-top:6px; }
.game-page main { min-height:0;overflow:hidden; }
.game-page .game-shell {
    width:min(1180px,calc(100% - 18px));
    height:100%;
    min-height:0;
    padding:7px 0 9px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.game-page .game-header {
    flex:0 0 auto;
    grid-template-columns:44px 1fr 44px;
    gap:9px;
    margin-bottom:6px;
}
.game-page .icon-button { width:42px;height:42px;border-radius:13px; }
.game-page .back-button svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease; }
.game-page .back-button:hover svg { transform:translateX(-2px); }
[dir="rtl"] .game-page .back-button svg { transform:scaleX(-1); }
[dir="rtl"] .game-page .back-button:hover svg { transform:scaleX(-1) translateX(-2px); }
.game-page .level-title span { font-size:9px; }
.game-page .level-title strong { font-size:18px;line-height:1.05; }
.game-page .level-title em { font-size:9px; }
.game-page .game-layout { flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 265px;gap:10px; }
.game-page .play-column { min-height:0;display:flex;flex-direction:column; }
.game-page .game-status { flex:0 0 auto;grid-template-columns:100px 1fr 100px;gap:8px;margin-bottom:7px; }
.game-page .status-pill,.game-page .status-message { min-height:46px;border-radius:14px; }
.game-page .status-pill strong { font-size:17px; }
.game-page .status-message { padding-inline:8px;text-align:center;font-size:13px; }
.game-page .board-card {
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:8px 10px 9px;
    border-radius:23px;
    overflow:hidden;
}
.game-page .game-board {
    flex:1;
    min-height:0;
    width:100%;
    display:grid;
    grid-template-columns:repeat(var(--fit-columns,6),var(--bottle-width,66px));
    grid-auto-rows:var(--bottle-height,148px);
    place-content:center;
    place-items:center;
    align-content:center;
    justify-content:center;
    gap:var(--fit-gap,6px);
    padding:4px;
    overflow:visible;
}
.game-page .bottle-wrap {
    width:var(--bottle-width,66px);
    height:var(--bottle-height,148px);
    min-width:0;
}
.game-page .bottle-svg { width:100%;height:100%; }
.game-page .game-actions { flex:0 0 auto;padding-top:7px;gap:8px; }
.game-page .secondary-button { min-width:108px;min-height:39px;padding-inline:14px;border-radius:12px;font-size:13px; }
.game-page .competition-sidebar { min-height:0;gap:8px;overflow:hidden; }
.game-page .ranking-panel,.game-page .max-level-badge { padding:11px;border-radius:17px;min-height:0; }
.game-page .ranking-heading { margin-bottom:7px; }
.game-page .ranking-heading>span { font-size:20px; }
.game-page .ranking-list { min-height:0;overflow:auto; }
.game-page .ranking-row { padding:5px;min-height:37px; }
.game-page .max-level-badge { flex:0 0 auto; }

.bottle-wrap.completed-away { visibility:hidden;pointer-events:none; }
.bottle-wrap.sealing { pointer-events:none;z-index:95;filter:drop-shadow(0 0 14px rgba(255,210,73,.7)); }
.bottle-wrap.sealing .bottle-svg { animation:sealedGlow .72s ease-in-out infinite alternate; }
.bottle-cork {
    position:absolute;
    z-index:110;
    top:2.5%;
    left:27%;
    width:46%;
    height:9%;
    border:1px solid rgba(78,35,11,.72);
    border-radius:5px 5px 3px 3px;
    opacity:0;
    background:
        repeating-linear-gradient(90deg,transparent 0 5px,rgba(79,36,12,.22) 5px 7px),
        linear-gradient(180deg,#f4bb65,#b96a27 58%,#713715);
    box-shadow:inset 0 2px rgba(255,231,174,.55),0 5px 9px rgba(0,0,0,.34),0 0 13px rgba(255,198,80,.25);
    transform:translateY(-180%) scale(.75) rotate(-8deg);
    animation:corkDrop .48s cubic-bezier(.18,.9,.25,1.22) .05s forwards;
}
.bottle-cork::after { content:"";position:absolute;left:-4%;right:-4%;bottom:13%;height:2px;border-radius:4px;background:rgba(75,31,9,.42); }
.bottle-magic { position:absolute;z-index:105;inset:-12%;border-radius:50%;pointer-events:none;animation:magicOrbit 1.1s linear infinite; }
.bottle-magic::before,.bottle-magic::after { content:"";position:absolute;inset:12%;border:2px solid rgba(255,211,73,.72);border-radius:50%;box-shadow:0 0 13px #ffc928,inset 0 0 12px rgba(255,201,40,.32);animation:magicRing .75s ease-in-out infinite alternate; }
.bottle-magic::after { inset:21%;border-style:dashed;animation-direction:alternate-reverse; }
.bottle-magic i {
    position:absolute;
    left:50%;
    top:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ffe778;
    box-shadow:0 0 8px #ffc928,0 0 16px rgba(255,201,40,.8);
    opacity:0;
    transform:rotate(var(--spark-angle)) translateY(calc(var(--bottle-height,148px) * -.48)) scale(.45);
    animation:magicSpark .72s ease-in-out var(--spark-delay) infinite alternate;
}
.bottle-wrap.vanishing { animation:bottleAscend .52s cubic-bezier(.4,0,.8,.2) forwards; }
@keyframes corkDrop { 0%{opacity:0;transform:translateY(-180%) scale(.75) rotate(-8deg)} 68%{opacity:1;transform:translateY(12%) scale(1.05) rotate(2deg)} 100%{opacity:1;transform:none} }
@keyframes sealedGlow { to{filter:drop-shadow(0 0 13px rgba(255,213,77,.85)) brightness(1.11)} }
@keyframes magicOrbit { to{transform:rotate(360deg)} }
@keyframes magicRing { from{opacity:.35;transform:scale(.88)} to{opacity:1;transform:scale(1.1)} }
@keyframes magicSpark { from{opacity:.18} to{opacity:1;transform:rotate(var(--spark-angle)) translateY(calc(var(--bottle-height,148px) * -.55)) scale(1.15)} }
@keyframes bottleAscend { 0%{opacity:1} 45%{opacity:1;transform:translateY(-24%) scale(1.06)} 100%{opacity:0;transform:translateY(-115%) scale(.72);filter:blur(5px) drop-shadow(0 0 25px #ffc928)} }

@media (max-width:950px) {
    .game-page .game-layout { grid-template-columns:1fr; }
    .game-page .competition-sidebar { display:none; }
}
@media (max-width:600px) {
    .game-page .top-nav { width:calc(100% - 14px);min-height:42px;margin-top:3px; }
    .game-page .top-brand img { width:38px;height:38px;border-radius:11px; }
    .game-page .nav-action { min-height:34px;padding-inline:9px;font-size:12px; }
    .game-page .user-profile-chip { min-height:35px;padding-right:7px; }
    .game-page .signed-user { display:none; }
    .game-page .game-shell { width:calc(100% - 10px);padding:4px 0 5px; }
    .game-page .game-header { grid-template-columns:38px 1fr 38px;margin-bottom:3px; }
    .game-page .icon-button { width:36px;height:36px;font-size:18px; }
    .game-page .level-title strong { font-size:16px; }
    .game-page .game-status { grid-template-columns:76px 1fr 76px;gap:5px;margin-bottom:4px; }
    .game-page .status-pill,.game-page .status-message { min-height:40px;border-radius:11px; }
    .game-page .status-pill { flex-direction:column;gap:0; }
    .game-page .status-pill strong { font-size:14px; }
    .game-page .status-message { font-size:10px;padding-inline:4px; }
    .game-page .board-card { padding:5px 5px 6px;border-radius:18px; }
    .game-page .game-board { padding:2px; }
    .game-page .game-actions { padding-top:4px; }
    .game-page .secondary-button { min-width:94px;min-height:35px;font-size:12px; }
}
@media (max-height:620px) {
    .game-page .top-brand span,.game-page .signed-user { display:none; }
    .game-page .top-brand img { width:35px;height:35px; }
    .game-page .top-nav { min-height:37px;margin-top:2px; }
    .game-page .game-header { margin-bottom:2px; }
    .game-page .level-title span,.game-page .level-title em { display:none; }
    .game-page .game-status { margin-bottom:3px; }
    .game-page .status-pill,.game-page .status-message { min-height:35px; }
    .game-page .game-actions { padding-top:3px; }
    .game-page .secondary-button { min-height:32px; }
}
@media (prefers-reduced-motion:reduce) {
    .bottle-cork,.bottle-magic,.bottle-magic::before,.bottle-magic::after,.bottle-magic i,.bottle-wrap.sealing .bottle-svg { animation-duration:.01ms;animation-iteration-count:1; }
}

/* Six-bottle completion packages */
.bottle-pack-panel {
    min-height:0;
    padding:11px;
    border:1px solid rgba(255,201,40,.24);
    border-radius:17px;
    background:linear-gradient(145deg,rgba(54,42,66,.9),rgba(22,27,57,.9));
    box-shadow:inset 0 0 24px rgba(255,201,40,.035);
}
.bottle-pack-heading { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px; }
.bottle-pack-heading small,.bottle-pack-heading strong { display:block; }
.bottle-pack-heading small { color:#d6b75a;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; }
.bottle-pack-heading strong { margin-top:2px;font-size:13px; }
.bottle-package-list { display:grid;gap:7px;max-height:150px;overflow:auto;padding-right:2px;scrollbar-width:thin; }
.bottle-package { padding:7px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035); }
.bottle-package>small { display:block;margin-bottom:5px;color:#8f98bb;font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase; }
.bottle-package-slots { display:grid;grid-template-columns:repeat(6,1fr);gap:4px;align-items:end; }
.package-mini-bottle {
    position:relative;
    display:block;
    width:18px;
    height:31px;
    margin:auto;
    overflow:hidden;
    border:2px solid rgba(211,224,255,.55);
    border-top-width:3px;
    border-radius:5px 5px 7px 7px;
    background:rgba(255,255,255,.025);
    opacity:.32;
}
.package-mini-bottle::before {
    content:"";
    position:absolute;
    left:1px;
    right:1px;
    bottom:1px;
    height:0;
    border-radius:2px 2px 4px 4px;
    background:var(--package-fill,transparent);
    box-shadow:inset 2px 0 rgba(255,255,255,.17),0 0 7px color-mix(in srgb,var(--package-fill),transparent 40%);
}
.package-mini-bottle.is-filled { opacity:1;border-color:rgba(225,235,255,.82);animation:packageBottlePop .35s cubic-bezier(.18,.9,.25,1.22) both; }
.package-mini-bottle.is-filled::before { height:76%;animation:packageLiquidFill .45s cubic-bezier(.18,.85,.25,1) both; }
@keyframes packageBottlePop { from{opacity:0;transform:translateY(7px) scale(.65)} to{opacity:1;transform:none} }
@keyframes packageLiquidFill { from{height:0} to{height:76%} }

@media (max-width:950px) {
    .game-page .game-layout { grid-template-rows:minmax(0,1fr) auto; }
    .game-page .competition-sidebar { display:block;overflow:hidden; }
    .game-page .competition-sidebar>:not(.bottle-pack-panel) { display:none; }
    .game-page .bottle-pack-panel { display:flex;align-items:center;gap:10px;padding:5px 8px; }
    .game-page .bottle-pack-heading { flex:0 0 auto;margin:0; }
    .game-page .bottle-package-list { flex:1;display:flex;gap:6px;max-height:none;overflow-x:auto;overflow-y:hidden; }
    .game-page .bottle-package { flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:4px 6px; }
    .game-page .bottle-package>small { margin:0; }
    .game-page .package-mini-bottle { width:14px;height:24px;border-width:1.5px;border-top-width:2px; }
}
@media (max-width:520px) {
    .game-page .bottle-pack-heading small { display:none; }
    .game-page .bottle-pack-heading strong { margin:0;font-size:11px;white-space:nowrap; }
    .game-page .bottle-pack-panel { gap:6px;padding:4px 5px; }
    .game-page .bottle-package { gap:3px;padding:3px 4px; }
    .game-page .bottle-package>small { display:none; }
    .game-page .bottle-package-slots { gap:2px; }
    .game-page .package-mini-bottle { width:12px;height:20px; }
}