:root {
    --bg: #020617;
    --panel: rgba(2, 10, 34, .96);
    --blue: #0b62ff;
    --gold: #ffb000;
    --text: #f7f8ff;
    --muted: #bbc8e9;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}
button, input { font: inherit; }
a { color: inherit; }

.auth-page {
    position: relative;
    min-height: 100vh;
    padding: clamp(12px, 1.3vw, 24px) clamp(12px, 2vw, 38px) 28px;
    isolation: isolate;
}

.space-bg {
    position: fixed;
    inset: 0;
    z-index: -5;
    background-color: #020617;
    background-image:
        linear-gradient(180deg, rgba(1, 4, 18, .16), rgba(1, 5, 24, .15)),
        url('../../images/background_main.webp'),
        radial-gradient(circle at 50% 20%, rgba(21, 83, 255, .36), transparent 35%),
        radial-gradient(circle at 50% 100%, rgba(120, 0, 255, .26), transparent 42%),
        linear-gradient(180deg, #020617 0%, #07102d 62%, #030516 100%);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.asset-frame { position: relative; }
.asset-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.asset-fallback { display: none; }
.asset-frame.asset-missing > .asset-image { display: none; }
.asset-frame.asset-missing > .asset-fallback { display: grid; }

.brand-shell {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    height: clamp(100px, 14vw, 180px);
    margin-bottom: clamp(-22px, -2.4vw, -8px);
    pointer-events: none;
}
.brand-logo {
    width: min(720px, 47vw);
    min-width: 390px;
    height: 100%;
}
.logo-fallback {
    width: 100%;
    height: 100%;
    place-content: center;
    text-align: center;
    padding: 7px 42px 17px;
    border: 3px solid #1788ff;
    border-radius: 44% 44% 26% 26%;
    background: rgba(4, 24, 77, .9);
    box-shadow: 0 0 24px #146dff, inset 0 0 28px rgba(0, 76, 255, .55);
    text-shadow: 0 4px 0 #071132, 0 0 22px #2d75ff;
    font-style: italic;
}
.logo-fallback > span { font-size: clamp(48px, 6vw, 92px); font-weight: 1000; letter-spacing: -7px; line-height: .82; }
.brand-video { color: #eef5ff; }
.brand-lotto { color: #ffb219; }
.logo-fallback small { display: block; margin-top: 8px; color: #ffd05a; font-size: 17px; letter-spacing: 9px; font-style: normal; font-weight: 900; }

.auth-stage {
    position: relative;
    z-index: 3;
    width: min(1510px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(230px, 330px) minmax(500px, 650px) minmax(230px, 330px);
    gap: clamp(16px, 2vw, 34px);
    align-items: end;
}

.side-features {
    display: grid;
    gap: 18px;
    padding-bottom: 12px;
}
.side-features-left { transform: translateY(-4px); }
.side-features-right { transform: translateY(-4px); }

.feature-card {
    min-height: 120px;
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 15px;
    align-items: center;
    padding: 13px 17px;
    border: 2px solid #536bff;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(10, 27, 79, .96), rgba(2, 8, 27, .97));
    box-shadow: 0 0 20px rgba(42, 64, 255, .48), inset 0 0 24px rgba(20, 61, 185, .3);
    backdrop-filter: blur(2px);
}
.feature-asset {
    width: 112px;
    height: 92px;
}
.feature-asset .asset-fallback {
    width: 82px;
    height: 82px;
    place-items: center;
    align-self: center;
    justify-self: center;
    border-radius: 17px;
    border: 2px solid #d99317;
    background: radial-gradient(circle, #5c2b08, #0f0d25);
    color: #ffd13e;
    font-size: 32px;
    font-weight: 1000;
}
.feature-card h2 { margin: 0 0 6px; color: #ffc939; font-size: clamp(21px, 1.5vw, 27px); line-height: 1.05; }
.feature-card p { margin: 0; color: #f2f5ff; font-size: 16px; line-height: 1.35; }

.auth-panel {
    position: relative;
    padding: 8px;
    border-radius: 32px;
    background: linear-gradient(145deg, #f5a70a, #ffdc64 20%, #2c7cff 56%, #f1a70b);
    box-shadow: 0 0 30px rgba(17, 104, 255, .78);
}
.panel-inner {
    border-radius: 25px;
    padding: 27px 38px 21px;
    background: linear-gradient(180deg, rgba(3, 15, 48, .985), rgba(1, 8, 28, .99));
    border: 2px solid rgba(132, 177, 255, .56);
    box-shadow: inset 0 0 34px rgba(5, 60, 171, .37);
}
.welcome-copy { text-align: center; }
.welcome-copy h1 {
    margin: 0;
    color: #ffd04c;
    font-size: clamp(30px, 2.6vw, 43px);
    line-height: 1.05;
    text-shadow: 0 2px 0 #6a3500;
}
.welcome-copy h1 span { white-space: nowrap; }
.welcome-copy p { margin: 10px 0 17px; font-size: 20px; color: white; }

.primary-actions { display: grid; gap: 11px; }
.primary-actions form { margin: 0; }
.image-action {
    display: block;
    width: 100%;
    min-height: 70px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}
.image-action:hover { transform: translateY(-2px) scale(1.005); filter: brightness(1.08); }
.image-action:active { transform: translateY(1px); }
.image-action:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 15px; }
.image-action .asset-image { max-height: 82px; }

.game-button {
    width: 100%;
    min-height: 68px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 15px;
    padding: 16px 22px;
    color: #fff;
    font-size: 25px;
    font-weight: 900;
    cursor: pointer;
    text-shadow: 0 2px 1px rgba(0, 0, 0, .55);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 4px 0 rgba(0, 0, 0, .36), 0 0 14px currentColor;
}
button.game-button { display: block; }
.game-button-green { background: linear-gradient(#24d847, #07851a); }
.game-button-blue { background: linear-gradient(#2187ff, #0044be); }
.game-button-gold { background: linear-gradient(#ffbf19, #d77500); }

.social-divider { display: flex; align-items: center; gap: 12px; color: #cbd4e8; margin: 18px 0 13px; }
.social-divider::before,
.social-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #f7b725, transparent); }
.social-divider span { white-space: nowrap; }
.social-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 12px;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, .72);
    transition: transform .15s ease, filter .15s ease;
}
.social-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.social-google { background: #fff; color: #1b1b1b; }
.social-apple { background: #111; color: #fff; }
.social-symbol { font-size: 26px; font-weight: 1000; line-height: 1; }
.social-symbol-google { color: #4285f4; font-family: Arial, sans-serif; }
.legal-links { display: flex; justify-content: center; gap: 17px; margin-top: 20px; color: #6caaff; }
.legal-links a { text-decoration: none; }
.agreement { margin: 10px 0 0; color: #bcc7df; font-size: 12px; text-align: center; }

.guest-note {
    position: relative;
    z-index: 3;
    width: min(770px, calc(100% - 24px));
    margin: 15px auto 0;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 28px;
    padding: 10px 24px;
    border: 2px solid #3c59e8;
    background: rgba(9, 14, 48, .95);
    box-shadow: 0 0 18px rgba(44, 64, 255, .58);
}
.guest-note strong { color: #ffd33b; }
.guest-note span { display: block; margin-top: 3px; color: #c6cde2; font-size: 14px; }
.guest-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #d8a85b;
    border: 2px solid #fff3b0;
    color: #382006;
}

.floating-balls { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.floating-ball { position: absolute; width: clamp(64px, 7vw, 116px); aspect-ratio: 1; }
.floating-ball .asset-fallback {
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, .3);
    background: radial-gradient(circle at 38% 28%, #fff 0 8%, #8793ff 9% 30%, #3b1b91 70%);
    color: #101633;
    font-size: clamp(25px, 3vw, 42px);
    font-weight: 1000;
    box-shadow: inset 0 0 17px rgba(255, 255, 255, .85), 0 0 24px rgba(91, 83, 255, .8);
}
.ball-27 { top: 24px; left: 24px; }
.ball-56 { top: 28%; left: 19px; }
.ball-31 { bottom: 8%; left: 2px; width: clamp(52px, 5vw, 82px); opacity: .55; }
.ball-15 { bottom: -15px; left: 30px; }
.ball-7 { top: 24px; right: 27px; }
.ball-63 { top: 28%; right: 18px; }
.ball-22 { bottom: 8%; right: -3px; width: clamp(52px, 5vw, 82px); opacity: .55; }
.ball-80 { bottom: -15px; right: 28px; }

.flash { padding: 11px 14px; border-radius: 10px; margin-bottom: 13px; text-align: center; }
.flash-error { background: rgba(255, 54, 77, .18); border: 1px solid #ff5c70; }
.flash-info { background: rgba(66, 145, 255, .18); border: 1px solid #4b96ff; }

.modal { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; padding: 18px; }
.modal.is-open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 3, 14, .8); backdrop-filter: blur(7px); }
.modal-card {
    position: relative;
    width: min(460px, 100%);
    padding: 28px;
    border-radius: 22px;
    border: 2px solid #367cff;
    background: linear-gradient(180deg, #071b4a, #03091e);
    box-shadow: 0 0 35px rgba(33, 102, 255, .7);
}
.modal-card h2 { margin: 0 0 20px; text-align: center; color: #ffd24b; }
.modal-close { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; color: #fff; font-size: 32px; cursor: pointer; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 6px; color: #dce6ff; font-weight: 700; }
.auth-form input { width: 100%; border: 1px solid #4f74c9; border-radius: 10px; padding: 13px; color: #fff; background: #07122d; outline: none; }
.auth-form input:focus { border-color: #66a6ff; box-shadow: 0 0 0 3px rgba(47, 122, 255, .22); }
.modal-open { overflow: hidden; }

.game-page { min-height: 100vh; padding: 24px; background: #03091d; }
.game-header { max-width: 1200px; margin: 0 auto 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.mini-logo { color: #ffbd23; text-decoration: none; font-size: 34px; font-weight: 1000; font-style: italic; text-shadow: 0 0 14px #1b72ff; }
.mini-logo span { color: #fff; }
.player-info { display: flex; align-items: center; gap: 16px; }
.player-info form { margin: 0; }
.small-button { border: 1px solid #5b86ff; background: #0d2d78; color: #fff; border-radius: 10px; padding: 9px 15px; text-decoration: none; cursor: pointer; }
.lobby-shell { max-width: 1100px; margin: 0 auto; }
.lobby-hero { text-align: center; padding: 40px; border: 2px solid #4874ff; border-radius: 28px; background: rgba(4, 14, 43, .92); box-shadow: 0 0 30px rgba(30, 79, 255, .5); }
.eyebrow { color: #ffd044; letter-spacing: 5px; font-weight: 900; }
.lobby-hero h1 { margin: 5px 0 12px; font-size: clamp(34px, 5vw, 64px); }
.lobby-hero p { color: #c8d4ef; max-width: 760px; margin: 0 auto 25px; font-size: 18px; line-height: 1.5; }
.lobby-hero .game-button { max-width: 460px; margin-inline: auto; }
.lobby-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.lobby-card { padding: 24px; border: 1px solid #435fbc; border-radius: 20px; background: rgba(4, 13, 39, .94); text-align: center; }
.lobby-icon { display: block; color: #ffc638; font-size: 50px; font-weight: 1000; }
.lobby-card h2 { margin: 10px 0; }
.lobby-card p { color: #b8c5e3; min-height: 48px; }
.lobby-card button { border: 1px solid #5484ff; background: #0b3baf; color: #fff; border-radius: 10px; padding: 10px 18px; cursor: pointer; }
.save-progress { margin-top: 20px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #6b52e4; border-radius: 18px; background: rgba(17, 12, 65, .9); }
.save-progress p { margin: 4px 0 0; color: #c4c9df; }
.demo-toast { position: fixed; right: 24px; bottom: 24px; padding: 16px 20px; border-radius: 12px; background: #0c8b2b; color: #fff; box-shadow: 0 0 22px rgba(21, 212, 73, .5); }
.simple-page { min-height: 100vh; padding: 50px 20px; background: #061027; }
.simple-page main { max-width: 800px; margin: auto; padding: 30px; border-radius: 18px; background: #0b1c45; }
.simple-page a { color: #7db5ff; }

@media (max-width: 1230px) {
    .auth-stage { grid-template-columns: minmax(190px, 250px) minmax(480px, 610px) minmax(190px, 250px); gap: 14px; }
    .feature-card { grid-template-columns: 80px 1fr; min-height: 105px; padding: 11px; }
    .feature-asset { width: 78px; height: 74px; }
    .feature-card h2 { font-size: 20px; }
    .feature-card p { font-size: 13px; }
}

@media (max-width: 930px) {
    .auth-page { padding: 12px; }
    .brand-shell { height: 120px; margin-bottom: -14px; }
    .brand-logo { width: min(560px, 82vw); min-width: 0; }
    .auth-stage { display: block; max-width: 620px; }
    .side-features { display: none; }
    .floating-ball { opacity: .55; }
    .ball-56, .ball-63, .ball-31, .ball-22 { display: none; }
    .guest-note { max-width: 600px; }
}

@media (max-width: 580px) {
    .auth-page { padding: 8px; }
    .brand-shell { height: 94px; margin-bottom: -8px; }
    .brand-logo { width: 94vw; }
    .logo-fallback { padding-inline: 22px; }
    .logo-fallback > span { font-size: 44px; letter-spacing: -5px; }
    .logo-fallback small { letter-spacing: 4px; font-size: 11px; }
    .auth-panel { padding: 5px; border-radius: 24px; }
    .panel-inner { border-radius: 19px; padding: 21px 13px 17px; }
    .welcome-copy h1 { font-size: 27px; }
    .welcome-copy p { margin-bottom: 15px; font-size: 16px; }
    .image-action { min-height: 58px; }
    .image-action .asset-image { max-height: 70px; }
    .game-button { min-height: 58px; font-size: 20px; padding: 13px 10px; }
    .social-actions { grid-template-columns: 1fr; }
    .social-divider span { font-size: 13px; }
    .legal-links { gap: 8px; flex-wrap: wrap; font-size: 13px; }
    .guest-note { border-radius: 18px; padding: 10px 13px; font-size: 14px; }
    .guest-note span { font-size: 12px; }
    .guest-avatar { width: 42px; height: 42px; }
    .floating-ball { width: 58px; }
    .ball-27 { top: 8px; left: 4px; }
    .ball-7 { top: 8px; right: 4px; }
    .ball-15 { bottom: -9px; left: -6px; }
    .ball-80 { bottom: -9px; right: -6px; }
    .lobby-grid { grid-template-columns: 1fr; }
    .game-header, .player-info, .save-progress { align-items: stretch; flex-direction: column; }
    .lobby-hero { padding: 26px 16px; }
}