/*
 * หน้าแรกมือถือ (แนวนอน) — แนว MMORPG โมบาย
 * ฮีโร่มุมซ้ายล่าง · CTA/ล็อกอินกะทัดรัดทางขวา
 * เปิดเมื่อ html.touch-play
 */

html.touch-play .screen-login {
    --m-gold: #e8c547;
    --m-gold-dim: #a88420;
    --m-ink: #0c0a08;
    --m-panel: rgba(10, 8, 6, 0.88);
    overflow: hidden;
}

html.touch-play .screen-login .login-m-actions,
html.touch-play .screen-login .login-m-back {
    display: none;
}

/* —— ฮีโร่: มุมซ้ายล่าง —— */
html.touch-play .screen-login .login-hero-figure {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    margin: 0;
    pointer-events: none;
    line-height: 0;
}

html.touch-play .screen-login .login-hero-img {
    position: absolute;
    left: max(-6px, env(safe-area-inset-left, 0px) - 4px);
    right: auto;
    bottom: max(-10px, calc(-1 * env(safe-area-inset-bottom, 0px) - 6px));
    width: min(38vw, 220px);
    height: auto;
    max-height: 92%;
    object-fit: contain;
    object-position: left bottom;
    filter: saturate(1.05) contrast(1.04);
    opacity: 0.95;
    animation: login-m-hero-in 0.85s ease-out both;
}

@keyframes login-m-hero-in {
    from {
        opacity: 0;
        transform: translate3d(-14px, 8px, 0);
    }
    to {
        opacity: 0.95;
        transform: translate3d(0, 0, 0);
    }
}

html.touch-play .screen-login .login-scene-veil {
    background:
        linear-gradient(
            75deg,
            rgba(6, 5, 4, 0.25) 0%,
            rgba(6, 5, 4, 0.2) 28%,
            rgba(6, 5, 4, 0.55) 58%,
            rgba(6, 5, 4, 0.82) 100%
        ),
        linear-gradient(180deg, rgba(6, 5, 4, 0.4) 0%, transparent 30%, transparent 58%, rgba(6, 5, 4, 0.7) 100%);
}

html.touch-play .screen-login .login-shell {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    grid-template-areas: unset;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: max(8px, env(safe-area-inset-top, 0px))
        max(10px, env(safe-area-inset-right, 0px))
        max(8px, env(safe-area-inset-bottom, 0px))
        max(10px, env(safe-area-inset-left, 0px));
    gap: 0;
    overflow: hidden;
    box-sizing: border-box;
}

html.touch-play .screen-login .login-brand-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    max-width: none;
    padding: 0;
    min-height: 0;
    pointer-events: none;
}

html.touch-play .screen-login .login-hero {
    text-align: right;
    padding: 0;
    margin: 0;
    max-width: 52%;
    animation: login-m-brand-in 0.7s ease-out both;
}

@keyframes login-m-brand-in {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

html.touch-play .screen-login .login-brand {
    align-items: flex-end;
    gap: 0;
    margin: 0;
}

html.touch-play .screen-login .login-brand-tabard {
    font-size: clamp(22px, 6.5vmin, 30px);
    letter-spacing: 0.04em;
    line-height: 1;
}

html.touch-play .screen-login .login-brand-online {
    font-size: clamp(10px, 2.8vmin, 12px);
    margin-top: 1px;
}

html.touch-play .screen-login .login-hero-eyebrow {
    display: none;
}

html.touch-play .screen-login .login-hero-tagline {
    margin: 4px 0 0;
    font-size: clamp(11px, 2.9vmin, 13px);
    font-weight: 500;
    color: rgba(255, 236, 179, 0.9);
    text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, 0.5);
    max-width: 14em;
    margin-left: auto;
}

html.touch-play .screen-login .login-hero-desc {
    display: none;
}

html.touch-play .screen-login .login-world-status {
    margin: 6px 0 0 auto;
    padding: 2px 8px;
    width: max-content;
    font-size: clamp(10px, 2.5vmin, 11px);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(232, 197, 71, 0.3);
    border-radius: 999px;
}

/* มือถือ — ไม่โชว์ Facebook / วิกิ */
html.touch-play .screen-login .login-social {
    display: none !important;
}

/* —— CTA มุมขวาล่าง (กะทัดรัด) —— */
html.touch-play .screen-login .login-main {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0;
    min-height: 0;
    max-width: none;
    width: 100%;
}

html.touch-play .screen-login .login-card {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.touch-play .screen-login .login-card::before {
    display: none;
}

html.touch-play .screen-login .login-card-badge {
    display: none;
}

/* —— ประกาศเล่นผ่าน PC เท่านั้น —— */
html.touch-play .screen-login .login-m-pc-notice {
    display: none;
    width: min(100%, 280px);
    margin: 0 0 8px auto;
    padding: 10px 14px 12px;
    text-align: right;
    border-radius: 10px;
    border: 1px solid rgba(232, 197, 71, 0.45);
    background:
        linear-gradient(180deg, rgba(40, 28, 10, 0.92) 0%, rgba(16, 12, 6, 0.94) 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    animation: login-m-cta-in 0.65s ease-out both;
}

html.touch-play .screen-login.login-m-pc-blocked.login-m-splash .login-m-pc-notice:not([hidden]) {
    display: block;
}

html.touch-play .screen-login .login-m-pc-notice-title {
    margin: 0;
    font-size: clamp(14px, 3.6vmin, 16px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--m-gold);
    text-shadow: 0 1px 0 #000;
}

html.touch-play .screen-login .login-m-pc-notice-text {
    margin: 4px 0 0;
    font-size: clamp(12px, 3vmin, 13px);
    color: rgba(255, 236, 179, 0.88);
    line-height: 1.35;
}

html.touch-play .screen-login.login-m-pc-blocked.login-m-splash .login-guest-block {
    display: none !important;
}

html.touch-play .screen-login.login-m-pc-blocked [data-login-m-open-register],
html.touch-play .screen-login.login-m-pc-blocked [data-show-register],
html.touch-play .screen-login.login-m-pc-blocked .login-divider-or {
    display: none !important;
}

html.touch-play .screen-login.login-m-splash .login-guest-block {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 4px;
    animation: login-m-cta-in 0.65s ease-out 0.12s both;
}

@keyframes login-m-cta-in {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

html.touch-play .screen-login .login-guest-btn {
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 7px 14px 8px;
    border-radius: 999px;
    border: 1px solid #6b5214;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
        linear-gradient(180deg, #f3d56a 0%, #e0b020 55%, #b8860b 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 0 #5a4210,
        0 4px 10px rgba(0, 0, 0, 0.28);
    color: #1a1204;
    gap: 6px;
}

html.touch-play .screen-login .login-guest-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 0 #5a4210;
}

html.touch-play .screen-login .login-guest-btn::after {
    display: none;
}

html.touch-play .screen-login .login-guest-btn-text {
    gap: 0;
    align-items: center;
}

html.touch-play .screen-login .login-guest-btn-text strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

html.touch-play .screen-login .login-guest-btn-text small {
    display: none;
}

html.touch-play .screen-login .login-guest-btn-arrow {
    display: none;
}

html.touch-play .screen-login .login-m-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    width: auto;
    max-width: none;
    margin: 0;
}

html.touch-play .screen-login.login-m-splash .login-m-actions {
    display: flex;
}

html.touch-play .screen-login .login-m-chip {
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(232, 197, 71, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 236, 179, 0.1) 0%, transparent 55%),
        rgba(14, 11, 8, 0.82);
    color: #ffe9a8;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

html.touch-play .screen-login .login-m-chip:active {
    transform: translateY(1px);
    box-shadow: none;
}

html.touch-play .screen-login .login-m-chip-ghost {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
        rgba(8, 8, 8, 0.55);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 248, 225, 0.9);
    font-weight: 500;
}

html.touch-play .screen-login.login-m-splash .login-error:not(:empty) {
    display: block;
    width: min(220px, 48vw);
    margin: 4px 0 0 auto;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(80, 16, 16, 0.75);
    border: 1px solid rgba(255, 100, 100, 0.35);
    font-size: clamp(10px, 2.6vmin, 12px);
    text-align: center;
}

html.touch-play .screen-login.login-m-splash .login-divider-account,
html.touch-play .screen-login.login-m-splash .login-panel,
html.touch-play .screen-login.login-m-splash .login-m-back {
    display: none !important;
}

html.touch-play .screen-login .login-page-footer {
    display: none;
}

html.touch-play .screen-login .pwa-install-banner {
    display: none !important;
}

/* —— โหมดบัญชี: แผงเล็กทางขวา · ฮีโร่ไม่จาง —— */
html.touch-play .screen-login.login-m-account .login-brand-col {
    display: none;
}

html.touch-play .screen-login.login-m-account .login-hero-figure {
    opacity: 1;
}

html.touch-play .screen-login.login-m-account .login-hero-img {
    filter: saturate(1.05) contrast(1.04);
    opacity: 0.95;
    animation: none;
}

html.touch-play .screen-login.login-m-account .login-main {
    flex: 1;
    justify-content: center;
    align-items: flex-end;
    max-width: none;
    margin: 0;
    width: 100%;
}

html.touch-play .screen-login.login-m-account .login-card {
    width: min(220px, 42vw);
    padding: 8px 10px 10px;
    background: var(--m-panel);
    border: 1px solid rgba(232, 197, 71, 0.3);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-height: calc(100% - 6px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html.touch-play .screen-login.login-m-account .login-m-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 6px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 236, 179, 0.95);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

html.touch-play .screen-login.login-m-account .login-guest-block,
html.touch-play .screen-login.login-m-account .login-m-actions,
html.touch-play .screen-login.login-m-account .login-divider-account {
    display: none !important;
}

html.touch-play .screen-login.login-m-account .login-panel {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

html.touch-play .screen-login.login-m-account .login-panel-heading {
    margin: 0 0 2px;
    font-size: 12px;
}

html.touch-play .screen-login.login-m-account .login-field {
    gap: 2px;
}

html.touch-play .screen-login.login-m-account .login-field > span:not(.login-field-box),
html.touch-play .screen-login.login-m-account .login-field-label-row {
    font-size: 10px;
}

html.touch-play .screen-login.login-m-account .login-forgot-inline {
    font-size: 10px;
}

html.touch-play .screen-login.login-m-account .login-field-box {
    min-height: 32px;
    border-radius: 6px;
    padding: 0 6px;
}

html.touch-play .screen-login.login-m-account .login-field-ico {
    display: none;
}

html.touch-play .screen-login.login-m-account .login-field input {
    font-size: 16px; /* กัน iOS zoom */
    padding: 4px 0;
}

html.touch-play .screen-login.login-m-account .login-remember {
    font-size: 10px;
    gap: 4px;
    margin: 0;
}

html.touch-play .screen-login.login-m-account .login-submit {
    width: auto;
    align-self: stretch;
    min-height: 0;
    margin-top: 2px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid #6b5214;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 45%),
        linear-gradient(180deg, #f0d060 0%, #c9a227 100%);
    color: #1a1204;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 0 #5a4210;
}

html.touch-play .screen-login.login-m-account .login-register-btn {
    width: auto;
    align-self: stretch;
    min-height: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 248, 225, 0.92);
}

html.touch-play .screen-login.login-m-account .login-divider {
    margin: 4px 0;
}

html.touch-play .screen-login.login-m-account .login-divider-text {
    font-size: 9px;
}

html.touch-play .screen-login.login-m-account .login-notice {
    padding: 5px 7px;
    font-size: 10px;
    line-height: 1.35;
}

html.touch-play .screen-login.login-m-account .login-password-hint {
    font-size: 9px;
    margin: 0;
    line-height: 1.3;
}

html.touch-play .screen-login.login-m-account .login-switch {
    font-size: 10px;
    margin: 2px 0 0;
}

html.touch-play .screen-login.login-m-account .login-error {
    font-size: 10px;
    margin-top: 4px;
}

html.touch-play .screen-login.login-m-account .login-forgot-panel p,
html.touch-play .screen-login.login-m-account .login-verify-panel p {
    font-size: 10px;
    line-height: 1.35;
    margin: 0 0 4px;
}

html.touch-play .screen-login.login-m-account .verify-title {
    font-size: 12px;
    margin: 0 0 4px;
}

@media (max-height: 360px) {
    html.touch-play .screen-login .login-hero-img {
        width: min(32vw, 160px);
        max-height: 85%;
    }

    html.touch-play .screen-login .login-guest-btn {
        padding: 5px 12px 6px;
    }

    html.touch-play .screen-login .login-m-chip {
        padding: 4px 9px;
    }

    html.touch-play .screen-login .login-brand-tabard {
        font-size: clamp(18px, 5.5vmin, 24px);
    }

    html.touch-play .screen-login.login-m-account .login-card {
        width: min(200px, 40vw);
        padding: 6px 8px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.touch-play .screen-login .login-hero-img,
    html.touch-play .screen-login .login-hero,
    html.touch-play .screen-login.login-m-splash .login-guest-block {
        animation: none !important;
    }
}