:root {
    --auth-accent: #51d9c6;
    --auth-accent-bright: #8cf7e8;
    --auth-warm: #f0a35a;
    --auth-ink: #050d16;
    --auth-panel: rgba(7, 16, 27, .92);
    --auth-field: rgba(2, 9, 17, .72);
    --auth-text: #f3f8fb;
    --auth-muted: #8ca1b0;
    --auth-danger: #ff9caa;
}

html,
body.auth-page {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--auth-ink) !important;
    color: var(--auth-text) !important;
    color-scheme: dark !important;
    font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif !important;
}

.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

.auth-page .game-bg,
.auth-page .main-shell {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

.auth-stage {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: clamp(18px, 3vw, 44px) !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #050d16 url('/images/auth/allgames-auth-landscape-v3.png') center / cover no-repeat !important;
}

.auth-stage::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(12, 38, 53, .04) 0 22%, rgba(3, 9, 16, .3) 76%),
        linear-gradient(90deg, rgba(2, 8, 14, .42), transparent 27% 73%, rgba(2, 8, 14, .42)),
        linear-gradient(0deg, rgba(2, 7, 13, .68), transparent 48%, rgba(2, 8, 14, .24)) !important;
}

.auth-stage::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    pointer-events: none !important;
    border: 1px solid rgba(121, 222, 211, .1) !important;
    background-image:
        linear-gradient(rgba(130, 230, 218, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(130, 230, 218, .018) 1px, transparent 1px) !important;
    background-size: 64px 64px !important;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, .54) !important;
}

.auth-panel {
    position: relative !important;
    z-index: 10 !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: min(1180px, calc(100vw - 56px)) !important;
    max-width: none !important;
    height: min(660px, calc(100dvh - 52px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr) !important;
    overflow: hidden !important;
    transform: none !important;
    border: 1px solid rgba(142, 235, 222, .3) !important;
    border-radius: 28px !important;
    background: rgba(5, 13, 23, .78) !important;
    box-shadow: 0 38px 110px rgba(0, 0, 0, .67), 0 0 0 1px rgba(255, 255, 255, .025) inset, 0 1px 0 rgba(255, 255, 255, .08) inset !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    scrollbar-width: none !important;
}

.auth-panel::-webkit-scrollbar {
    display: none !important;
}

.auth-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(115deg, rgba(255, 255, 255, .045), transparent 18% 82%, rgba(81, 217, 198, .025)) !important;
}

.auth-panel::after {
    content: "" !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 4 !important;
    width: 7px !important;
    height: 7px !important;
    border: 0 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background: var(--auth-accent) !important;
    box-shadow: 0 0 0 5px rgba(81, 217, 198, .09), 0 0 18px rgba(81, 217, 198, .62) !important;
}

.auth-intro {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    padding: clamp(30px, 3.5vw, 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(121, 220, 208, .16);
    background:
        radial-gradient(circle at 11% 10%, rgba(77, 213, 195, .18), transparent 31%),
        linear-gradient(145deg, rgba(12, 36, 48, .89), rgba(5, 15, 25, .95));
}

.auth-intro::before {
    content: "";
    position: absolute;
    right: -130px;
    bottom: -150px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(108, 230, 212, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(108, 230, 212, .027), 0 0 0 86px rgba(108, 230, 212, .014);
}

.auth-intro::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 34%;
    background: linear-gradient(transparent, var(--auth-accent), transparent);
    box-shadow: 0 0 20px rgba(81, 217, 198, .4);
}

.auth-brand {
    position: relative !important;
    z-index: 2;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: max-content !important;
    max-width: 100%;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transform: none !important;
    color: #fff !important;
    text-shadow: none !important;
}

.auth-brand-mark {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 auto;
    display: grid !important;
    place-items: center !important;
    overflow: hidden;
    transform: none !important;
    border: 1px solid rgba(175, 255, 241, .64) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #83edda, #2aa59c) !important;
    box-shadow: 0 13px 32px rgba(30, 176, 162, .25), inset 0 1px rgba(255, 255, 255, .55) !important;
    animation: none !important;
}

.auth-brand-mark::before {
    content: "" !important;
    position: absolute !important;
    inset: auto -9px -11px auto !important;
    width: 31px !important;
    height: 31px !important;
    border: 6px solid rgba(4, 34, 39, .13) !important;
    border-radius: 50% !important;
}

.auth-brand-mark i {
    display: none !important;
}

.auth-brand-mark b {
    position: relative;
    z-index: 1;
    color: #05242a;
    font: italic 1000 27px/1 Arial, sans-serif;
    letter-spacing: -3px;
}

.auth-brand div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-brand strong {
    position: static !important;
    color: #f4fbff !important;
    font: 950 19px/1 Arial, sans-serif !important;
    letter-spacing: .17em !important;
    text-shadow: none !important;
    animation: none !important;
}

.auth-brand strong::after {
    display: none !important;
}

.auth-brand small {
    color: #71899a !important;
    font-size: 7px !important;
    font-weight: 850 !important;
    letter-spacing: .19em !important;
}

.auth-intro-copy {
    position: relative;
    z-index: 2;
    margin: auto 0;
}

.auth-kicker,
.auth-panel-header > span {
    display: block !important;
    color: var(--auth-accent) !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: .22em !important;
}

.auth-intro-copy h1 {
    margin: 14px 0 16px;
    color: #f4f9fc;
    font-size: clamp(34px, 3.3vw, 47px);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -.06em;
}

.auth-intro-copy h1 em {
    color: var(--auth-accent-bright);
    font-style: normal;
    text-shadow: 0 0 28px rgba(81, 217, 198, .14);
}

.auth-intro-copy p {
    max-width: 360px;
    margin: 0;
    color: #93a8b7;
    font-size: 12px;
    font-weight: 640;
    line-height: 1.7;
    word-break: keep-all;
}

.auth-game-list,
.auth-join-steps {
    position: relative;
    z-index: 2;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.auth-game-list span {
    min-width: 0;
    height: 43px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(126, 217, 205, .17);
    border-radius: 11px;
    background: rgba(3, 13, 22, .48);
    color: #b3c5d1;
    font-size: 10px;
    font-weight: 830;
    white-space: nowrap;
}

.auth-game-list span:last-child {
    grid-column: auto;
}

.auth-game-list i {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: rgba(81, 217, 198, .12);
    color: #72e7d5;
    font-size: 10px;
    font-style: normal;
}

.auth-join-steps {
    list-style: none;
}

.auth-join-steps li {
    min-width: 0;
    min-height: 62px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    border: 1px solid rgba(126, 217, 205, .15);
    border-radius: 11px;
    background: rgba(3, 13, 22, .45);
    color: #a9bdca;
    font-size: 9px;
    font-weight: 760;
    word-break: keep-all;
}

.auth-join-steps b {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: rgba(81, 217, 198, .15);
    color: #78e8d6;
    font-size: 9px;
}

.auth-landscape-label {
    position: relative;
    z-index: 2;
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #718899;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .11em;
}

.auth-landscape-label i {
    color: var(--auth-accent);
    font-size: 15px;
    font-style: normal;
    transform: scaleX(1.35);
}

.auth-landscape-label b {
    margin-left: auto;
    padding: 6px 9px;
    border: 1px solid rgba(81, 217, 198, .16);
    border-radius: 999px;
    background: rgba(81, 217, 198, .07);
    color: #7dcbbf;
    font-size: 8px;
    letter-spacing: 0;
}

.auth-content {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    padding: clamp(28px, 3.5vw, 46px) clamp(32px, 4vw, 54px);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(circle at 100% 0, rgba(81, 217, 198, .065), transparent 29%),
        linear-gradient(135deg, rgba(255, 255, 255, .023), transparent 36%),
        var(--auth-panel);
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 218, 200, .25) transparent;
}

.auth-content::before {
    content: "SECURE PLAYER GATE";
    position: absolute;
    right: 54px;
    bottom: 18px;
    color: rgba(115, 151, 165, .25);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .25em;
    pointer-events: none;
}

.auth-content::-webkit-scrollbar {
    width: 4px;
}

.auth-content::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(99, 218, 200, .25);
}

.auth-mode-switch {
    position: relative;
    z-index: 2;
    width: min(250px, 100%);
    min-height: 40px;
    margin: 0 0 22px auto;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border: 1px solid rgba(119, 166, 187, .18);
    border-radius: 13px;
    background: rgba(1, 8, 15, .6);
}

.auth-mode-switch a {
    min-height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #758999;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.auth-mode-switch a.active {
    border-color: rgba(110, 233, 215, .34);
    background: linear-gradient(120deg, rgba(54, 169, 158, .35), rgba(21, 75, 83, .25));
    color: #dcfff9;
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(22, 112, 105, .13);
}

.auth-mode-switch a:hover:not(.active) {
    color: #b6c8d2;
}

.auth-mode-switch a:focus-visible,
.auth-primary-button:focus-visible,
.auth-guest-button:focus-visible,
.auth-signup-callout:focus-visible,
.auth-password-toggle:focus-visible,
.pwa-install-card button:focus-visible {
    outline: 3px solid rgba(111, 230, 210, .26);
    outline-offset: 2px;
}

.auth-panel-header > span {
    margin: 0 0 7px !important;
}

.auth-panel-header h2 {
    margin: 0;
    color: #f7fbfd;
    font-size: clamp(28px, 3.4vh, 36px);
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -.055em;
}

.auth-panel-header p {
    margin: 8px 0 21px !important;
    color: #8499a9 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.48 !important;
}

.auth-form {
    display: grid !important;
    gap: 12px !important;
}

.auth-login-form,
.auth-register-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    column-gap: 13px !important;
}

.auth-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px !important;
}

.auth-field label {
    position: static !important;
    width: max-content !important;
    min-height: 19px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #bbc8d1 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
}

.auth-field label::before {
    display: none !important;
}

.auth-field label b {
    min-width: 21px;
    height: 19px;
    padding: 0 4px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(107, 224, 204, .31);
    border-radius: 6px;
    background: rgba(55, 158, 151, .12);
    color: #72e2cf;
    font-size: 8px;
}

.auth-field input,
.auth-page .auth-stage .auth-field input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 15px !important;
    border: 1px solid rgba(109, 158, 182, .3) !important;
    border-radius: 11px !important;
    outline: none !important;
    background: var(--auth-field) !important;
    color: #f5f9fb !important;
    -webkit-text-fill-color: #f5f9fb !important;
    box-shadow: inset 3px 0 rgba(81, 217, 198, .17), inset 0 1px rgba(255, 255, 255, .035), 0 8px 25px rgba(0, 0, 0, .08) !important;
    font-size: 13px !important;
    font-weight: 650;
    transform: none !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.auth-field input::placeholder,
.auth-page .auth-stage .auth-field input::placeholder {
    color: #5f7484 !important;
    -webkit-text-fill-color: #5f7484 !important;
}

.auth-field input:focus,
.auth-page .auth-stage .auth-field input:focus {
    border-color: #65dfcd !important;
    background: rgba(5, 18, 29, .95) !important;
    box-shadow: 0 0 0 3px rgba(96, 218, 197, .09), inset 3px 0 #65dfcd !important;
}

.auth-field .auth-masked-input {
    -webkit-text-security: disc;
}

.auth-input-wrap {
    position: relative;
    width: 100%;
}

.auth-input-wrap input {
    padding-right: 65px !important;
}

.auth-password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 8px;
    min-width: 45px;
    height: 30px;
    padding: 0 8px;
    transform: translateY(-50%);
    border: 1px solid rgba(111, 224, 202, .24);
    border-radius: 7px;
    background: rgba(20, 49, 59, .9);
    color: #abe9df;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.auth-password-toggle[aria-pressed="true"] {
    border-color: rgba(111, 224, 202, .55);
    background: rgba(51, 129, 124, .36);
    color: #dcfff8;
}

.auth-field-hint {
    min-height: 13px;
    padding-left: 2px;
    color: #667d8e;
    font-size: 8px;
    font-weight: 650;
    line-height: 1.3;
}

.auth-save-row {
    grid-column: 1;
    min-width: 0;
    min-height: 46px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(109, 158, 182, .15);
    border-radius: 11px;
    background: rgba(2, 10, 18, .34);
    color: #b2c0ca;
    font-size: 10px;
    font-weight: 800;
    user-select: none;
    cursor: pointer;
}

.auth-save-row input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--auth-accent);
}

.auth-save-row span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-save-row small {
    margin: 0;
    color: #667c8d;
    font-size: 8px;
    font-weight: 650;
    white-space: nowrap;
}

.auth-primary-button {
    position: relative;
    grid-column: 2;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid #8df1e2;
    border-radius: 11px;
    background: linear-gradient(115deg, #72e4d3, #3bbeb1 58%, #2a968f);
    color: #042126;
    box-shadow: 0 12px 30px rgba(43, 185, 171, .2), inset 0 1px rgba(255, 255, 255, .55);
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.auth-primary-button::before {
    content: "";
    position: absolute;
    top: -110%;
    left: -45%;
    width: 30%;
    height: 320%;
    transform: rotate(26deg);
    background: rgba(255, 255, 255, .28);
    transition: left .35s ease;
}

.auth-primary-button:hover::before {
    left: 118%;
}

.auth-primary-button i {
    position: relative;
    font-size: 8px;
    font-style: normal;
    letter-spacing: .2em;
}

.auth-register-submit,
.auth-message,
.auth-password-match {
    grid-column: 1 / -1;
}

.auth-message {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 121, 142, .42);
    border-radius: 9px;
    background: rgba(126, 31, 48, .2);
    color: #ffc2cb;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.auth-message.success {
    border-color: rgba(78, 218, 177, .4);
    background: rgba(31, 124, 94, .18);
    color: #a9f4dd;
}

.auth-password-match {
    min-height: 13px;
    margin: -5px 0 -3px;
    color: #758999;
    font-size: 9px;
    font-weight: 800;
    text-align: right;
}

.auth-password-match.matched {
    color: #71dfc1;
}

.auth-password-match.mismatched {
    color: var(--auth-danger);
}

.auth-quick-entry {
    margin-top: 16px;
    padding-top: 16px;
    display: grid;
    grid-template-columns: 1.22fr .78fr;
    gap: 10px;
    border-top: 1px solid rgba(112, 162, 184, .14);
}

.auth-guest-form,
.auth-guest-form-compact {
    min-width: 0;
    margin: 0;
}

.auth-guest-button {
    width: 100%;
    min-height: 59px;
    padding: 8px 13px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(143, 186, 205, .27);
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(25, 52, 67, .83), rgba(8, 23, 35, .86));
    color: #e5eef3;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    text-align: left;
    cursor: pointer;
}

.auth-guest-button:hover {
    border-color: rgba(125, 223, 209, .4);
    background: linear-gradient(120deg, rgba(30, 66, 78, .86), rgba(10, 28, 42, .9));
}

.auth-guest-button:disabled {
    opacity: .72;
    cursor: wait;
}

.auth-guest-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(117, 228, 211, .38);
    border-radius: 10px;
    background: rgba(58, 181, 168, .12);
    color: #74e2d0;
    font-size: 13px;
    font-weight: 950;
}

.auth-guest-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.auth-guest-copy strong,
.auth-guest-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-guest-copy strong {
    color: #e9f2f6;
    font-size: 10px;
    font-weight: 900;
}

.auth-guest-copy small {
    color: #6d8393;
    font-size: 8px;
    font-weight: 650;
}

.auth-guest-button > i {
    color: #76dcca;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .14em;
}

.auth-signup-callout {
    min-width: 0;
    min-height: 59px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid rgba(240, 163, 90, .22);
    border-radius: 12px;
    background: rgba(240, 163, 90, .055);
    color: #f2c69e;
    text-decoration: none;
}

.auth-signup-callout:hover {
    border-color: rgba(240, 163, 90, .38);
    background: rgba(240, 163, 90, .09);
}

.auth-signup-callout span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-signup-callout small {
    overflow: hidden;
    color: #846f61;
    font-size: 8px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-signup-callout b {
    color: #efbf91;
    font-size: 10px;
    font-weight: 900;
}

.auth-signup-callout > i {
    color: var(--auth-warm);
    font-size: 17px;
    font-style: normal;
}

.auth-register-bottom {
    margin-top: 13px;
    padding-top: 13px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(150px, .65fr);
    align-items: center;
    gap: 11px;
    border-top: 1px solid rgba(112, 162, 184, .14);
}

.auth-register-bottom .auth-guest-button {
    min-height: 49px;
}

.auth-switch-link {
    padding: 0;
    color: #718697;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

.auth-switch-link a {
    margin-left: 6px;
    color: #75dfcf;
    font-weight: 900;
    text-decoration: none;
}

.auth-switch-link a:hover {
    text-decoration: underline;
}

.auth-social-row {
    margin-top: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.auth-social-row > span {
    color: #647989;
    font-size: 8px;
    font-weight: 850;
    white-space: nowrap;
}

.auth-social-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.auth-social {
    min-height: 38px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    color: #242018;
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
}

.auth-social b {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 10px;
}

.auth-social em {
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
}

.auth-social.kakao { background: #fee500; }
.auth-social.google { background: #fff; }
.auth-social.google b { color: #4285f4; border: 1px solid #ddd; }
.auth-social.naver { background: #03c75a; color: #fff; }
.auth-social.naver b { background: #fff; color: #03a94e; }
.auth-social.disabled { filter: grayscale(.85); opacity: .38; pointer-events: none; }

.auth-footer-note {
    position: absolute;
    z-index: 4;
    right: clamp(18px, 3vw, 44px);
    bottom: 10px;
    color: rgba(125, 155, 169, .42);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .22em;
}

.pwa-install-layer[hidden] {
    display: none !important;
}

.pwa-install-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 22px;
    display: grid;
    place-items: center;
    background: rgba(1, 6, 11, .82);
    backdrop-filter: blur(14px);
    opacity: 1;
    transition: opacity .18s ease;
}

.pwa-install-layer[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}

.pwa-install-card {
    width: min(720px, calc(100vw - 34px));
    max-height: calc(100dvh - 34px);
    padding: 25px;
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr);
    grid-template-areas: "phone copy" "actions actions";
    align-items: center;
    gap: 20px 23px;
    overflow: auto;
    border: 1px solid rgba(119, 230, 214, .34);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(12, 32, 43, .98), rgba(4, 13, 23, .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .68), inset 0 1px rgba(255, 255, 255, .05);
}

.pwa-phone-turn {
    grid-area: phone;
    position: relative;
    width: 88px;
    height: 68px;
    display: grid;
    place-items: center;
}

.pwa-phone-turn span {
    width: 66px;
    height: 38px;
    display: block;
    border: 2px solid #66dfcd;
    border-radius: 8px;
    background: rgba(75, 214, 194, .08);
    box-shadow: 0 0 24px rgba(75, 214, 194, .15);
}

.pwa-phone-turn span::after {
    content: "";
    position: absolute;
    top: 31px;
    right: 15px;
    width: 3px;
    height: 8px;
    border-radius: 2px;
    background: #8ef3e4;
}

.pwa-phone-turn i {
    position: absolute;
    right: -2px;
    bottom: -1px;
    color: var(--auth-warm);
    font-size: 23px;
    font-style: normal;
}

.pwa-install-copy {
    grid-area: copy;
    min-width: 0;
}

.pwa-install-copy > span {
    color: var(--auth-accent);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .22em;
}

.pwa-install-copy h2 {
    margin: 7px 0 8px;
    color: #f4fafc;
    font-size: 25px;
    font-weight: 950;
    letter-spacing: -.045em;
}

.pwa-install-copy p {
    margin: 0;
    color: #8fa4b2;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
}

.pwa-install-steps {
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
    color: #9eb1bd;
    font-size: 10px;
    font-weight: 700;
    list-style: none;
}

.pwa-install-steps li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pwa-install-steps li::before {
    content: counter(list-item);
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 6px;
    background: rgba(81, 217, 198, .13);
    color: #79e6d4;
    font-size: 8px;
}

.pwa-install-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 8px;
}

.pwa-install-actions button {
    min-height: 43px;
    padding: 0 13px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.pwa-install-primary {
    border: 1px solid #8df1e2;
    background: linear-gradient(115deg, #72e4d3, #38afa5);
    color: #052126;
}

.pwa-install-copy-link {
    border: 1px solid rgba(121, 218, 204, .3);
    background: rgba(40, 115, 108, .18);
    color: #b7eee5;
}

.pwa-install-later {
    border: 1px solid rgba(137, 164, 180, .2);
    background: rgba(5, 14, 24, .5);
    color: #7f94a2;
}

@media (max-width: 1040px) {
    .auth-panel {
        width: calc(100vw - 34px) !important;
        grid-template-columns: minmax(290px, .68fr) minmax(470px, 1.32fr) !important;
    }

    .auth-intro {
        padding: 30px;
    }

    .auth-intro-copy h1 {
        font-size: 36px;
    }

    .auth-content {
        padding-right: 34px;
        padding-left: 34px;
    }

    .auth-game-list,
    .auth-join-steps {
        grid-template-columns: 1fr;
    }

    .auth-game-list span {
        height: 32px;
        justify-content: flex-start;
    }

    .auth-game-list span:nth-child(3),
    .auth-join-steps li:nth-child(3) {
        display: none;
    }

    .auth-join-steps li {
        min-height: 36px;
        padding: 6px 8px;
        flex-direction: row;
        align-items: center;
    }
}

@media (orientation: landscape) and (max-height: 620px) {
    .auth-stage {
        padding: 12px !important;
    }

    .auth-panel {
        width: calc(100vw - 24px) !important;
        height: calc(100dvh - 24px) !important;
        grid-template-columns: minmax(245px, .57fr) minmax(440px, 1.43fr) !important;
        border-radius: 21px !important;
    }

    .auth-intro {
        padding: 24px;
    }

    .auth-brand {
        gap: 9px !important;
    }

    .auth-brand-mark {
        width: 36px !important;
        height: 36px !important;
        border-radius: 11px !important;
    }

    .auth-brand-mark b {
        font-size: 22px;
    }

    .auth-brand strong {
        font-size: 15px !important;
    }

    .auth-brand small {
        font-size: 6px !important;
    }

    .auth-kicker,
    .auth-panel-header > span {
        font-size: 8px !important;
    }

    .auth-intro-copy h1 {
        margin: 9px 0 10px;
        font-size: clamp(26px, 4.8vh, 32px);
    }

    .auth-intro-copy p {
        font-size: 10px;
        line-height: 1.5;
    }

    .auth-game-list,
    .auth-join-steps {
        margin-bottom: 9px;
        gap: 6px;
    }

    .auth-game-list span {
        height: 30px;
        font-size: 9px;
    }

    .auth-game-list i,
    .auth-join-steps b {
        width: 19px;
        height: 19px;
        font-size: 8px;
    }

    .auth-join-steps li {
        min-height: 31px;
        padding: 4px 7px;
        font-size: 8px;
    }

    .auth-landscape-label {
        min-height: 24px;
    }

    .auth-content {
        padding: 18px 26px;
    }

    .auth-content::before,
    .auth-footer-note {
        display: none;
    }

    .auth-mode-switch {
        width: 220px;
        min-height: 34px;
        margin-bottom: 10px;
        padding: 3px;
        border-radius: 10px;
    }

    .auth-mode-switch a {
        min-height: 26px;
        border-radius: 7px;
        font-size: 9px;
    }

    .auth-panel-header > span {
        margin-bottom: 4px !important;
    }

    .auth-panel-header h2 {
        font-size: 24px;
    }

    .auth-panel-header p {
        margin: 5px 0 11px !important;
        font-size: 9px !important;
    }

    .auth-form {
        gap: 7px !important;
    }

    .auth-login-form,
    .auth-register-form {
        column-gap: 9px !important;
    }

    .auth-field {
        gap: 4px !important;
    }

    .auth-field label {
        min-height: 16px;
        gap: 5px;
        font-size: 9px !important;
    }

    .auth-field label b {
        min-width: 18px;
        height: 16px;
        font-size: 7px;
    }

    .auth-field input,
    .auth-page .auth-stage .auth-field input {
        height: 38px !important;
        padding: 0 12px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }

    .auth-input-wrap input {
        padding-right: 57px !important;
    }

    .auth-password-toggle {
        right: 6px;
        min-width: 40px;
        height: 25px;
        font-size: 8px;
    }

    .auth-field-hint {
        min-height: 10px;
        font-size: 7px;
    }

    .auth-save-row {
        min-height: 38px;
        padding: 0 10px;
        border-radius: 9px;
        font-size: 9px;
    }

    .auth-save-row small {
        font-size: 7px;
    }

    .auth-primary-button {
        height: 38px;
        border-radius: 9px;
        font-size: 11px;
    }

    .auth-quick-entry {
        margin-top: 9px;
        padding-top: 9px;
        gap: 8px;
    }

    .auth-guest-button,
    .auth-signup-callout {
        min-height: 48px;
        border-radius: 10px;
    }

    .auth-guest-button {
        grid-template-columns: 29px minmax(0, 1fr) auto;
        gap: 7px;
        padding: 6px 9px;
    }

    .auth-guest-icon {
        width: 29px;
        height: 29px;
        border-radius: 8px;
        font-size: 11px;
    }

    .auth-register-bottom {
        margin-top: 8px;
        padding-top: 8px;
    }

    .auth-register-bottom .auth-guest-button {
        min-height: 42px;
    }

    .auth-social-row {
        margin-top: 8px;
    }

    .auth-social {
        min-height: 31px;
    }
}

@media (orientation: landscape) and (max-height: 430px) {
    .auth-stage {
        padding: 7px !important;
    }

    .auth-panel {
        width: calc(100vw - 14px) !important;
        height: calc(100dvh - 14px) !important;
        grid-template-columns: minmax(178px, .43fr) minmax(400px, 1.57fr) !important;
        border-radius: 16px !important;
    }

    .auth-panel::after {
        top: 11px !important;
        right: 11px !important;
    }

    .auth-intro {
        padding: 15px 17px;
    }

    .auth-brand {
        gap: 7px !important;
    }

    .auth-brand-mark {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
    }

    .auth-brand-mark b {
        font-size: 18px;
    }

    .auth-brand strong {
        font-size: 13px !important;
    }

    .auth-brand small {
        font-size: 5px !important;
    }

    .auth-kicker {
        font-size: 7px !important;
        letter-spacing: .14em !important;
    }

    .auth-intro-copy h1 {
        margin: 7px 0 0;
        font-size: 23px;
        line-height: 1.12;
    }

    .auth-intro-copy p,
    .auth-game-list,
    .auth-join-steps {
        display: none;
    }

    .auth-landscape-label {
        min-height: 20px;
        gap: 5px;
        font-size: 7px;
    }

    .auth-landscape-label b {
        padding: 4px 6px;
        font-size: 7px;
    }

    .auth-content {
        padding: 11px 17px;
    }

    .auth-mode-switch {
        width: 178px;
        min-height: 29px;
        margin-bottom: 6px;
        padding: 2px;
        border-radius: 8px;
    }

    .auth-mode-switch a {
        min-height: 23px;
        font-size: 8px;
    }

    .auth-panel-header > span {
        font-size: 7px !important;
        letter-spacing: .17em !important;
    }

    .auth-panel-header h2 {
        font-size: 20px;
    }

    .auth-panel-header p {
        margin: 3px 0 7px !important;
        font-size: 8px !important;
    }

    .auth-form {
        gap: 5px !important;
    }

    .auth-field {
        gap: 2px !important;
    }

    .auth-field label {
        min-height: 14px;
        font-size: 8px !important;
    }

    .auth-field label b {
        min-width: 17px;
        height: 14px;
        border-radius: 5px;
        font-size: 6px;
    }

    .auth-field input,
    .auth-page .auth-stage .auth-field input {
        height: 34px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    .auth-password-toggle {
        height: 23px;
    }

    .auth-field-hint {
        display: none;
    }

    .auth-password-match {
        min-height: 10px;
        margin: -2px 0;
        font-size: 7px;
    }

    .auth-save-row,
    .auth-primary-button {
        min-height: 34px;
        height: 34px;
    }

    .auth-save-row {
        font-size: 8px;
    }

    .auth-save-row input {
        width: 13px;
        height: 13px;
    }

    .auth-save-row small {
        display: none;
    }

    .auth-primary-button {
        font-size: 10px;
    }

    .auth-quick-entry {
        margin-top: 6px;
        padding-top: 6px;
        gap: 6px;
    }

    .auth-guest-button,
    .auth-signup-callout {
        min-height: 42px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .auth-guest-icon {
        width: 27px;
        height: 27px;
    }

    .auth-guest-copy strong,
    .auth-signup-callout b {
        font-size: 9px;
    }

    .auth-guest-copy small,
    .auth-signup-callout small {
        font-size: 7px;
    }

    .auth-register-bottom {
        margin-top: 5px;
        padding-top: 5px;
        gap: 7px;
    }

    .auth-register-bottom .auth-guest-button {
        min-height: 37px;
    }

    .auth-switch-link {
        font-size: 8px;
    }

    .auth-social-row {
        margin-top: 5px;
        grid-template-columns: 1fr;
    }

    .auth-social-row > span {
        display: none;
    }

    .auth-social {
        min-height: 27px;
        font-size: 7px;
    }

    .auth-social b {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }

    .pwa-install-layer {
        padding: 8px;
    }

    .pwa-install-card {
        width: min(760px, calc(100vw - 16px));
        max-height: calc(100dvh - 16px);
        padding: 13px 15px;
        grid-template-columns: 62px minmax(250px, 1fr) minmax(220px, .75fr);
        grid-template-areas: "phone copy actions";
        gap: 13px;
        border-radius: 15px;
    }

    .pwa-phone-turn {
        width: 58px;
        height: 48px;
    }

    .pwa-phone-turn span {
        width: 50px;
        height: 29px;
        border-radius: 6px;
    }

    .pwa-phone-turn span::after {
        top: 22px;
        right: 5px;
    }

    .pwa-phone-turn i {
        font-size: 18px;
    }

    .pwa-install-copy h2 {
        margin: 4px 0;
        font-size: 18px;
    }

    .pwa-install-copy p,
    .pwa-install-steps {
        font-size: 8px;
    }

    .pwa-install-steps {
        margin-top: 6px;
        gap: 3px;
    }

    .pwa-install-steps li::before {
        width: 14px;
        height: 14px;
        font-size: 6px;
    }

    .pwa-install-actions {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .pwa-install-actions button {
        min-height: 31px;
        font-size: 8px;
    }
}

@media (orientation: landscape) and (max-width: 700px) {
    .auth-panel {
        grid-template-columns: minmax(155px, .34fr) minmax(390px, 1.66fr) !important;
    }

    .auth-intro {
        padding-right: 13px;
        padding-left: 13px;
    }

    .auth-brand div {
        gap: 2px;
    }

    .auth-brand strong {
        font-size: 11px !important;
        letter-spacing: .11em !important;
    }

    .auth-brand small,
    .auth-kicker,
    .auth-landscape-label > span {
        display: none !important;
    }

    .auth-intro-copy h1 {
        font-size: 19px;
    }

    .auth-landscape-label b {
        margin-left: 0;
    }

    .auth-content {
        padding-right: 12px;
        padding-left: 12px;
    }

    .auth-panel-header p {
        display: none;
    }

    .auth-panel-header h2 {
        margin-bottom: 6px;
    }

    .auth-guest-button > i,
    .auth-signup-callout > i {
        display: none;
    }

    .auth-guest-button {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .auth-guest-icon {
        width: 26px;
        height: 26px;
    }

    .auth-signup-callout small {
        display: none;
    }

    .auth-register-bottom {
        grid-template-columns: minmax(0, 1.25fr) minmax(120px, .75fr);
    }
}

@media (orientation: landscape) and (max-height: 355px) {
    .auth-panel-header > span,
    .auth-landscape-label {
        display: none !important;
    }

    .auth-mode-switch {
        margin-bottom: 4px;
    }

    .auth-panel-header h2 {
        margin-bottom: 4px;
        font-size: 17px;
    }

    .auth-quick-entry {
        margin-top: 4px;
        padding-top: 4px;
    }

    .auth-guest-button,
    .auth-signup-callout {
        min-height: 36px;
    }

    .auth-register-bottom {
        margin-top: 3px;
        padding-top: 3px;
    }
}

@media (max-width: 900px) and (orientation: portrait) {
    html,
    body.auth-page {
        height: auto !important;
        min-height: 100% !important;
        overflow: auto !important;
    }

    .auth-page .game-bg,
    .auth-page .main-shell {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    .auth-stage {
        height: auto !important;
        min-height: 100dvh !important;
        padding: 16px !important;
        align-items: start !important;
    }

    .auth-panel {
        width: min(520px, 100%) !important;
        height: auto !important;
        grid-template-columns: 1fr !important;
        border-radius: 22px !important;
    }

    .auth-intro {
        min-height: 155px;
        padding: 24px;
        border-right: 0;
        border-bottom: 1px solid rgba(121, 220, 208, .16);
    }

    .auth-intro-copy {
        margin: 24px 0 0;
    }

    .auth-intro-copy h1 {
        margin: 7px 0 0;
        font-size: 27px;
    }

    .auth-intro-copy p,
    .auth-game-list,
    .auth-join-steps,
    .auth-landscape-label {
        display: none;
    }

    .auth-content {
        padding: 25px 24px 30px;
        overflow: visible;
    }

    .auth-mode-switch {
        margin-right: auto;
        margin-bottom: 19px;
    }

    .auth-login-form,
    .auth-register-form {
        grid-template-columns: 1fr;
    }

    .auth-save-row,
    .auth-primary-button,
    .auth-register-submit,
    .auth-message,
    .auth-password-match {
        grid-column: 1;
    }

    .auth-quick-entry,
    .auth-register-bottom {
        grid-template-columns: 1fr;
    }

    .auth-footer-note {
        display: none;
    }

    .pwa-install-card {
        padding: 22px;
        grid-template-columns: 1fr;
        grid-template-areas: "phone" "copy" "actions";
        justify-items: center;
        text-align: center;
    }

    .pwa-install-actions {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .pwa-install-steps {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-primary-button::before,
    .pwa-install-layer {
        transition: none !important;
    }
}