:root {
    --bg: #07080c;
    --surface: rgba(20, 21, 27, .92);
    --surface-2: rgba(28, 29, 36, .9);
    --surface-3: rgba(35, 36, 44, .88);
    --border: rgba(255, 255, 255, .085);
    --border-strong: rgba(255, 255, 255, .14);
    --text: #f2f3f5;
    --muted: #a9abb5;
    --muted-2: #737682;
    --gold: #d79a36;
    --gold-light: #f1bf62;
    --gold-dark: #9a621e;
    --blurple: #5865f2;
    --blurple-hover: #4752c4;
    --green: #23a55a;
    --red: #da373c;
    --yellow: #f0b232;
    --shadow: 0 24px 80px rgba(0, 0, 0, .44);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 11px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { color: var(--text); background: var(--bg); font-family: inherit; }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   Shared background
   ───────────────────────────────────────────────────────────── */
.eauth-bg,
.emu-background {
    position: fixed;
    inset: 0;
    background-image: url('../img/login-background.jpg');
    background-size: cover;
    background-position: center;
    transform: scale(1.015);
    z-index: -3;
}

.eauth-scrim,
.emu-background-shade {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 50% 38%, rgba(8, 10, 18, .28), rgba(6, 7, 11, .79) 69%),
        linear-gradient(90deg, rgba(5, 6, 10, .82), rgba(7, 8, 13, .57) 44%, rgba(4, 5, 9, .82));
    backdrop-filter: blur(1.5px);
}

/* ─────────────────────────────────────────────────────────────
   Login page – kept close to the previous version
   ───────────────────────────────────────────────────────────── */
.eauth-body { overflow: hidden; background: #06070b; }
.eauth-stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
    isolation: isolate;
}
.eauth-wrap {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 72px 24px 76px;
}
.eauth-card {
    width: min(390px, calc(100vw - 40px));
    padding: 28px 30px 25px;
    border: 1px solid rgba(255, 255, 255, .105);
    border-radius: 18px;
    background: rgba(25, 26, 32, .91);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
    backdrop-filter: blur(22px);
    text-align: center;
}
.eauth-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 15px;
    padding: 9px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    border: 1px solid rgba(215, 154, 54, .3);
    background: linear-gradient(145deg, rgba(215, 154, 54, .13), rgba(255, 255, 255, .03));
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 12px 34px rgba(0, 0, 0, .28);
}
.eauth-avatar img { width: 100%; height: 100%; object-fit: contain; }
.eauth-card h1 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.035em; }
.eauth-card .eauth-sub { margin: 7px 0 21px; color: var(--muted); font-size: 13px; }
.eauth-card .eauth-sub b { color: var(--text); font-weight: 650; }
.eauth-scopes {
    display: grid;
    gap: 11px;
    padding: 15px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .19);
    border: 1px solid rgba(255, 255, 255, .055);
    text-align: left;
}
.eauth-scope { display: flex; align-items: center; gap: 10px; }
.eauth-scope .check {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
}
.eauth-scope .check img { width: 11px; height: 11px; fill: none; stroke: white; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eauth-scope > span:last-child { color: #d4d6dc; font-size: 12px; }
.eauth-discord-btn {
    width: 100%;
    min-height: 46px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    color: white;
    background: #4752c4;
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 12px 28px rgba(88, 101, 242, .23);
    transition: transform .16s ease, background .16s ease;
}
.eauth-discord-btn:hover { background: #1a1b24; transform: translateY(-1px); box-shadow: 0 12px 28px #1a1b24; border: 1px solid rgba(255, 255, 255, .055); color: #5865f2}
.eauth-discord-btn img { width: 20px; height: 20px; fill: currentColor; }
.eauth-legal { margin: 15px 5px 0; color: #777a85; font-size: 10.5px; line-height: 1.55; }
.eauth-stats {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 999px;
    background: rgba(18, 19, 24, .79);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .23);
    backdrop-filter: blur(16px);
}
.eauth-stat {
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    color: #aeb1bb;
    font-size: 11px;
    cursor: pointer;
}
.eauth-stat:hover { color: white; }
.eauth-stat b { color: white; font-size: 12px; }
.eauth-stat-divider { width: 1px; height: 17px; background: rgba(255, 255, 255, .09); }
.eauth-dot { width: 7px; height: 7px; border-radius: 50%; }
.eauth-dot-game { background: var(--green); box-shadow: 0 0 9px rgba(35, 165, 90, .65); }
.eauth-dot-discord { background: var(--blurple); box-shadow: 0 0 9px rgba(88, 101, 242, .65); }
.eauth-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: 54px;
    padding: 0 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(200, 203, 213, .5);
    font-size: 11px;
    background: linear-gradient(to top, rgba(4, 5, 8, .75), transparent);
}
.eauth-foot-item { position: relative; display: flex; align-items: center; }
.eauth-foot-btn {
    border: 0;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    background: transparent;
    cursor: pointer;
}
.eauth-foot-btn:hover { color: rgba(240, 242, 248, .85); }
.eauth-foot-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eauth-language-static { cursor: default; }
.eauth-language-static:hover { color: inherit; }

/* login drawer and shared list style */
.eauth-drawer-overlay,
.emu-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .48);
    backdrop-filter: blur(3px);
    transition: opacity .2s ease;
}
.eauth-drawer-overlay.open,
.emu-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.eauth-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 91;
    width: min(340px, 92vw);
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    background: #17181d;
    border-left: 1px solid var(--border);
    box-shadow: -22px 0 70px rgba(0, 0, 0, .45);
    transition: transform .22s ease;
}
.eauth-drawer.open { transform: translateX(0); }
.eauth-drawer-head {
    min-height: 70px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.eauth-drawer-head-title { display: flex; align-items: center; gap: 10px; }
.eauth-drawer-head-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(215, 154, 54, .12); }
.eauth-drawer-head-icon img { width: 15px; fill: none; stroke: var(--gold-light); stroke-width: 2; }
.eauth-drawer-head h3 { margin: 0; font-size: 14px; }
.eauth-drawer-head-sub { margin: 2px 0 0; color: var(--muted-2); font-size: 10px; }
.eauth-drawer-close,
.emu-drawer-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
}
.eauth-drawer-close:hover,
.emu-drawer-close:hover { background: rgba(255, 255, 255, .09); }
.eauth-drawer-close img,
.emu-drawer-close img { width: 14px; fill: none; stroke: #aeb1ba; stroke-width: 2; stroke-linecap: round; }
.eauth-drawer-body { flex: 1; overflow: auto; padding: 14px; }
.eauth-drawer-section { margin-bottom: 16px; }
.eauth-drawer-section-head { display: flex; align-items: center; gap: 8px; padding: 7px 6px; color: #b5b7c1; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.eauth-drawer-dot { width: 7px; height: 7px; border-radius: 50%; }
.eauth-drawer-count { margin-left: auto; color: white; }
.eauth-drawer-row,
.drawer-list-row {
    min-height: 47px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
}
.eauth-drawer-row:hover,
.drawer-list-row:hover { background: rgba(255, 255, 255, .04); }
.eauth-drawer-avatar-wrap,
.drawer-list-avatar { position: relative; width: 32px; height: 32px; flex: 0 0 32px; }
.eauth-drawer-avatar,
.drawer-list-avatar img,
.drawer-list-avatar > i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    object-fit: cover;
    background: #2d3038;
    color: #d7d9df;
    font-size: 12px;
    font-style: normal;
}
.eauth-drawer-status,
.drawer-list-avatar > em {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid #17181d;
    border-radius: 50%;
    background: var(--green);
}
.eauth-drawer-info,
.drawer-list-copy { min-width: 0; display: grid; gap: 2px; }
.eauth-drawer-info b,
.drawer-list-copy b { overflow: hidden; color: #e8e9ed; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.eauth-drawer-info small,
.drawer-list-copy small { overflow: hidden; color: var(--muted-2); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.eauth-drawer-note,
.drawer-empty { margin: 8px; padding: 14px; border: 1px dashed var(--border); border-radius: 11px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.eauth-drawer-loading,
.emu-loading { min-height: 90px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.eauth-drawer-loading span,
.emu-loading span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); animation: loadingDot .9s infinite alternate; }
.eauth-drawer-loading span:nth-child(2), .emu-loading span:nth-child(2) { animation-delay: .15s; }
.eauth-drawer-loading span:nth-child(3), .emu-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes loadingDot { to { opacity: .25; transform: translateY(-4px); } }


@media (max-width: 760px) {
    .eauth-wrap { padding-left: 14px; padding-right: 14px; }
}

@media (max-height: 720px) {
    .eauth-stage { min-height: 560px; }
    .eauth-wrap { padding-top: 60px; padding-bottom: 55px; gap: 10px; }
    .eauth-card { padding-top: 21px; padding-bottom: 19px; }
    .eauth-avatar { width: 53px; height: 53px; margin-bottom: 11px; }
    .eauth-card h1 { font-size: 19px; }
    .eauth-card .eauth-sub { margin-bottom: 14px; }
    .eauth-scopes { padding: 12px; gap: 8px; }
    .eauth-discord-btn { margin-top: 14px; }
    .eauth-legal { margin-top: 10px; }
}

/* V8.6.0 — all launcher/login icons are real PNG files. */
.eauth-scope .check img { width: 11px; height: 11px; object-fit: contain; }
.eauth-discord-btn > img { width: 22px; height: 22px; object-fit: contain; }
.eauth-foot-icon { width: 14px; height: 14px; object-fit: contain; }
.eauth-drawer-head-icon > img { width: 16px; height: 16px; object-fit: contain; }
.eauth-drawer-close > img { width: 14px; height: 14px; object-fit: contain; opacity: .82; }


/* V8.9.0 — preserve scrolling without showing native scrollbar chrome. */
html,
body,
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }