@font-face {
    font-family: "Yekan";
    font-style: normal;
    font-weight: 400;
    src: url("../font/yekan/Sans.woff") format("woff");
}
@font-face {
    font-family: "Yekan";
    font-style: normal;
    font-weight: 700;
    src: url("../font/yekan/Sans.woff") format("woff");
}
@font-face {
    font-family: "BYekan";
    font-style: normal;
    font-weight: 400;
    src: url("../font/yekan/Sans.woff") format("woff");
}
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/lato/S6uyw4BMUTPHjx4wXiWtFCc.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../font/lato/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Palette mirrors the in-app lobby tokens (galaxy/exact-lobby.css). */
:root {
    --bg: #161314;
    --surface-top: #1c1716;
    --surface-bottom: #211a17;
    --border: rgba(212, 187, 156, 0.12);
    --border-strong: rgba(212, 187, 156, 0.2);
    --text-primary: #f4eae9;
    --text-secondary: #d7bb9c;
    --text-muted: #a48d80;
    --text-dim: #74645c;
    --text-gold: #f0c978;
    --teal: #16c4de;
    --teal-bright: #46dff2;
    --teal-mid: #46dff2;
    --teal-dark: #0e8fa3;
    --purple: #a845df;
    --purple-bright: #d36bff;
    --purple-deep: #5a2878;
    --gold: #d59a50;
    --gold-bright: #e9be78;
    --gold-light: #f0c978;
    --shadow-panel: 0 8px 25px rgba(0, 0, 0, 0.28);
    --soft-glow-purple: 0 0 14px rgba(168, 69, 223, 0.25);
    --soft-glow-teal: 0 0 14px rgba(22, 196, 222, 0.2);
    --soft-glow-gold: 0 0 12px rgba(213, 154, 80, 0.16);
    /* Left menu gold interaction — same tokens as galaxy/exact-lobby.css */
    --menu-gold: #f3c847;
    --menu-gold-glow: rgba(243, 200, 71, 0.28);
    --menu-gold-bg: linear-gradient(90deg, rgba(212, 160, 70, 0.08), rgba(212, 160, 70, 0.16) 100%);
    --menu-gold-border: rgba(243, 200, 71, 0.85);
    --menu-gold-text: #f0d7a4;
    --menu-gold-text-cta: #ffffff;
    --menu-gold-shadow:
        0 0 10px rgba(243, 200, 71, 0.22),
        inset 0 0 12px rgba(243, 200, 71, 0.05);
    --menu-gold-shadow-active:
        0 0 14px rgba(243, 200, 71, 0.28),
        inset 0 0 12px rgba(243, 200, 71, 0.08),
        inset 0 1px 0 rgba(255, 220, 160, 0.12);
    --menu-gold-transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}

html, body { height: 100%; margin: 0; padding: 0; }
html { direction: rtl; }
body.fa-ui,
body {
    align-items: center;
    background: #090b10;
    color: var(--text-primary);
    display: flex;
    font-family: "BYekan", Tahoma, "Segoe UI", sans-serif;
    justify-content: center;
    overflow: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
body.fa-ui .ltr-field,
body .ltr-field {
    font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-variant-numeric: tabular-nums lining-nums;
}

.login,
.login *,
.login input,
.login textarea,
.login button,
.login label,
.login a,
.login h1,
.login h2,
.login h3,
.login p,
.login span {
    font-family: "BYekan", Tahoma, "Segoe UI", sans-serif;
}

.login input.ltr-field,
.login .ltr-field {
    font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.login.pkr-reset-result {
    background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface-bottom) 100%);
    border: 1px solid rgba(233, 190, 120, 0.22);
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 22px 56px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(233, 190, 120, 0.12);
    box-sizing: border-box;
    margin: 56px auto 24px;
    max-width: 420px;
    padding: 56px 36px 28px;
    position: relative;
    text-align: right;
    width: 92%;
}

.login.pkr-auth-shell {
    background: transparent;
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
    flex-shrink: 0;
    margin: auto;
    max-width: min(460px, 94vw);
    padding: clamp(16px, 3vh, 28px) 0;
    position: relative;
    text-align: right;
    width: min(460px, 94vw);
}
.login .form-container { height: auto; margin: 0 auto; width: 100%; }
.login .loading {
    background: rgba(0, 0, 0, 0) url("../img/loginload.gif") no-repeat scroll center center;
    display: none;
    height: 66px;
    left: 50%;
    margin-left: -33px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 66px;
    z-index: 20;
}
.login .logo {
    align-items: center;
    display: flex;
    height: auto;
    justify-content: center;
    left: 50%;
    margin-left: min(-45vw, -110px);
    position: absolute;
    top: -48px;
    width: min(240px, 52vw);
    z-index: 3;
}

.login .logo .login-logo {
    display: block;
    height: auto;
    max-height: 88px;
    object-fit: contain;
    width: 100%;
}
.login .formrow { clear: both; margin: 0 0 12px; padding: 0; }
.login .formrow::after { clear: both; content: ""; display: block; }
.login .formrow span,
.login .textarearow span {
    color: var(--text-secondary); display: block; float: none; font-size: 12px; line-height: 1.7; margin-bottom: 4px; width: auto;
}
.login:not(.pkr-auth-shell) .formrow input,
.login:not(.pkr-auth-shell) .ltr-field {
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: 5px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45); box-sizing: border-box;
    color: var(--text-primary); direction: ltr; float: none; font-family: inherit; font-size: 14px; height: 40px; margin: 0; padding: 8px 12px; text-align: left;
    transition: border-color 200ms ease, box-shadow 200ms ease; width: 100%;
}
.login:not(.pkr-auth-shell) .formrow input:focus {
    border-color: var(--teal);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(24, 195, 207, 0.35),
        0 0 14px rgba(24, 195, 207, 0.16);
    outline: none;
}
.login .btnrow { margin: 16px 0 10px; }
.login.pkr-auth-shell .btnrow,
.login.pkr-auth-shell .pkr-auth-btnrow {
    margin: 0;
}
.login .loginbtn {
    background: var(--menu-gold-bg);
    border: 1px solid var(--menu-gold-border);
    border-radius: 14px;
    box-shadow: var(--menu-gold-shadow);
    color: var(--menu-gold-text-cta);
    cursor: pointer;
    display: block;
    font-size: 16px;
    font-weight: 800;
    height: 46px;
    letter-spacing: 0;
    line-height: 44px;
    margin: 0 auto;
    text-align: center;
    transition: var(--menu-gold-transition);
    width: 100%;
}
.login .btnsrow { text-align: center; }
.login .btnsrow.txt { color: #ffffff; font-size: 12px; margin-top: 18px; }
.login .btnsrow.txt a {
    background: none; border: 0; box-shadow: none; color: #ffffff; cursor: pointer; display: inline; font-size: 12px; margin: 0 5px; padding: 0;
    transition: color 200ms ease, opacity 200ms ease;
}
.login .btnsrow.txt a:hover { color: #ffffff; opacity: 0.82; text-decoration: underline; }
.popup .supportbtnsrow a:hover { border-color: var(--teal-bright); }
.login .loginbtn:hover,
.login .loginbtn:focus-visible {
    box-shadow: var(--menu-gold-shadow-active);
    color: var(--menu-gold-text-cta);
    outline: none;
}

.login .loginbtn:active {
    box-shadow: var(--menu-gold-shadow-active);
}
.login span.note { color: var(--gold); display: block; font-size: 12px; margin-top: 14px; text-align: center; }
.fade {
    background: #000; bottom: 0; display: none; left: 0; opacity: 0.28; position: fixed; right: 0; top: 0; z-index: 900;
}

.pkr-auth-stage {
    height: 100dvh;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 0;
}

.pkr-auth-lobby {
    direction: ltr;
    display: grid;
    filter: blur(5px) saturate(0.92);
    grid-template-columns: 196px minmax(0, 1fr) 210px;
    grid-template-rows: 58px minmax(0, 1fr);
    height: calc(100% + 28px);
    inset: -14px;
    position: absolute;
    transform: scale(1.04);
    width: calc(100% + 28px);
}

.pkr-auth-top,
.pkr-auth-side {
    direction: rtl;
}

.pkr-auth-top {
    align-items: center;
    background: rgba(12, 14, 18, 0.88);
    border-bottom: 1px solid rgba(233, 190, 120, 0.18);
    display: flex;
    grid-column: 1 / -1;
    padding: 0 18px;
}

.pkr-auth-top img {
    display: block;
    height: 40px;
    object-fit: contain;
    width: auto;
}

.pkr-auth-side {
    background: rgba(13, 15, 20, 0.9);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px 12px;
}

.pkr-auth-side.is-left { border-left: 1px solid rgba(255, 255, 255, 0.06); }
.pkr-auth-side.is-right { border-right: 1px solid rgba(255, 255, 255, 0.06); }

.pkr-auth-nav,
.pkr-auth-table-row,
.pkr-auth-side-title {
    align-items: center;
    color: rgba(244, 234, 233, 0.86);
    display: flex;
    font-size: 13px;
    gap: 8px;
    min-width: 0;
}

.pkr-auth-nav {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
}

.pkr-auth-side-title {
    color: #e9be78;
    font-weight: 700;
    margin-bottom: 4px;
}

.pkr-auth-table-row {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(233, 190, 120, 0.16);
    border-radius: 10px;
    padding: 10px;
}

.pkr-auth-table {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.pkr-auth-table img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.pkr-auth-veil {
    background: rgba(8, 6, 10, 0.42);
    inset: 0;
    position: absolute;
}

.login.pkr-auth-shell {
    position: relative;
    z-index: auto;
}

html,
body.fa-ui {
    overflow-x: clip;
}

@media (max-width: 800px) {
    .pkr-auth-lobby {
        grid-template-columns: 1fr;
        grid-template-rows: 48px minmax(0, 1fr);
    }

    .pkr-auth-side {
        display: none;
    }

    .pkr-auth-table {
        grid-column: 1;
        grid-row: 2;
    }

    .pkr-auth-top img {
        height: 32px;
    }
}

@media (max-width: 640px) {
    .pkr-auth-lobby {
        filter: blur(4px) saturate(0.94);
    }

    .pkr-auth-veil {
        background: rgba(8, 6, 10, 0.36);
    }
}
.login:not(.pkr-auth-shell) .forgetform,
.supportform,
.resetform {
    background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface-bottom) 100%);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 18px 44px rgba(0, 0, 0, 0.5);
    box-sizing: border-box; display: none;
    left: 50%; min-height: 220px; padding: 18px 24px 22px; position: fixed; text-align: right; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); z-index: 1000;
}
.popup .loader { display: none; left: 50%; margin-left: -28px; position: absolute; text-align: center; top: 140px; }
.popup .loader img { margin: 0 auto; width: 57px; }
.popup h3 { color: var(--gold-bright); font-weight: 700; margin: 4px 0 8px; text-align: center; }
.popup .popupnote { color: var(--text-secondary); display: block; font-size: 13px; line-height: 1.7; margin: 8px auto 16px; text-align: center; }
.popup .supportbtnsrow { display: flex; flex-direction: row-reverse; gap: 8px; justify-content: center; margin-top: 18px; }
.supportbtnsrow a {
    background: linear-gradient(180deg, #211a17 0%, var(--bg) 100%); border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-primary); cursor: pointer;
    display: block; flex: 1 1 0; float: none; font-size: 12px; font-weight: 700; height: 32px; line-height: 32px; margin: 0; text-align: center;
    transition: border-color 200ms ease;
}
.supportform .textarearow { clear: both; margin-bottom: 8px; }
.supportform .textarearow textarea {
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: 5px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45); box-sizing: border-box; color: var(--text-primary);
    float: none; font-family: inherit; font-size: 13px; height: 96px; margin: 0; padding: 8px 10px; resize: vertical; text-align: right;
    transition: border-color 200ms ease; width: 100%;
}
.supportform .textarearow textarea:focus { border-color: var(--teal); outline: none; }
.popup .formrow span { width: auto; }
.popup span.note { color: var(--gold); display: block; font-size: 12px; margin-top: 12px; text-align: center; }
@media screen and (max-width: 480px) {
.login.pkr-auth-shell { margin-top: calc(64px + env(safe-area-inset-top, 0px)); padding: 52px 0 22px; width: min(460px, calc(100vw - 30px)); }
.login .loginbtn { min-height: 44px; }
}
@media screen and (max-width: 360px) {
.login.pkr-auth-shell { padding: 48px 0 20px; }
.login .formrow span { font-size: 11px; }
}
@media screen and (max-width: 480px) {
body:not(.galaxy-ui) {
	align-items: flex-start;
	min-height: 100dvh;
	overflow-x: clip;
	overflow-y: auto;
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.login:not(.pkr-auth-shell) .forgetform,
.supportform,
.resetform {
	max-height: min(88dvh, calc(100svh - 48px));
	overflow-y: auto;
	top: calc(32px + env(safe-area-inset-top, 0px));
}
}

/* ── Mobile: auth card ── */
@media (max-width: 640px) {
	body.fa-ui {
		align-items: center;
		justify-content: center;
		min-height: 100dvh;
		overflow-x: clip;
		overflow-y: auto;
		padding:
			max(12px, env(safe-area-inset-top, 0px))
			max(12px, env(safe-area-inset-right, 0px))
			max(12px, env(safe-area-inset-bottom, 0px))
			max(12px, env(safe-area-inset-left, 0px));
	}

	.login.pkr-auth-shell {
		margin: auto;
		max-width: min(460px, calc(100vw - 30px));
		padding: clamp(36px, 10vw, 44px) 0 clamp(18px, 4vw, 22px);
		width: min(460px, calc(100vw - 30px));
	}

	.login .logo {
		margin-left: min(-45vw, -90px);
		top: clamp(-36px, -10vw, -40px);
		width: min(180px, 52vw);
	}

	.login .logo .login-logo {
		max-height: clamp(52px, 14vw, 64px);
	}

	.login .formrow {
		margin-bottom: 8px;
	}

	.login .formrow span,
	.login .textarearow span {
		font-size: clamp(11px, 3.2vw, 12px);
		margin-bottom: 3px;
	}

	.login:not(.pkr-auth-shell) .formrow input,
	.login:not(.pkr-auth-shell) .ltr-field {
		font-size: 16px;
		height: 42px;
		padding: 8px 12px;
	}

	.login .btnrow {
		margin: 12px 0 8px;
	}

	.login .loginbtn {
		font-size: clamp(14px, 4vw, 15px);
		height: 44px;
		line-height: 42px;
		min-height: 44px;
	}

	.login .btnsrow.txt,
	.login .btnsrow.txt a {
		font-size: 11px;
	}

	.login span.note {
		font-size: 11px;
		margin-top: 10px;
	}

	.login:not(.pkr-auth-shell) .forgetform,
	.supportform,
	.resetform {
		max-width: min(92vw, 340px);
		padding: 16px 18px 18px;
		width: min(92vw, 340px);
	}

	.popup h3 {
		font-size: 15px;
	}

	.popup .popupnote {
		font-size: 12px;
		margin-bottom: 12px;
	}
}


.login.pkr-auth-shell .forgetform span.note.is-error,
.login.pkr-auth-shell #registerform span.note.is-error {
	color: #ffb4b4;
}

.login .forgetform .forget-sent[hidden] {
	display: none !important;
}

.login .forgetform .forget-sent-mark {
	color: #8ee0b0;
	font-size: 15px;
	font-weight: 700;
	margin: 8px 0 0;
	text-align: center;
}

.login .pkr-reset-title {
	color: var(--gold-bright);
	font-size: 16px;
	margin: 12px 0 8px;
	text-align: center;
}

.login #pkr-reset-login[hidden] {
	display: none !important;
}

.login #registerform .reg-step[hidden],
.login #registerform .reg-done[hidden] {
	display: none !important;
}

.login #registerform .reg-step.is-shown {
	animation: pkr-reg-in 180ms ease;
}

@keyframes pkr-reg-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.login #registerform .pkr-otp {
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.45em;
	text-align: center;
}

.login #registerform .reg-email {
	color: #f3e6c8;
	font-size: 13px;
	margin: 0 0 12px;
	text-align: center;
}

.login #registerform .reg-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0 0;
	text-align: center;
}

.login #registerform .reg-links a {
	color: rgba(233, 190, 120, 0.9);
	cursor: pointer;
	font-size: 12px;
}

.login #registerform .reg-links a.is-wait {
	cursor: default;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.login #registerform .reg-step.is-shown {
		animation: none;
	}
}