/* 外圍頁帳戶面板精簡顯示（勿在 report 活動頁覆寫背景） */

html:has(body.peripheral-auth-page) {
    touch-action: auto !important;
    overscroll-behavior: auto !important;
    height: auto !important;
}

/* 僅 MemoryMaster / leaderboard：還原可捲動（主站 style.css 延遲載入時仍安全） */
body.peripheral-auth-page:not(.theme-campaign-v5) {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
    background-color: unset !important;
}

/* report 活動頁：保留木桌背景；style.css 載入後仍以 !important 守住 */
body.peripheral-auth-page.theme-campaign-v5 {
    height: auto !important;
    min-height: 100vh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
    background-color: #fff8ee !important;
    background-image: url('img/ReportTheme/Background_MemoryReport.png') !important;
    background-position: center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

body.peripheral-auth-page #peripheral-auth-root {
    position: fixed;
    inset: 0;
    z-index: 200000;
    pointer-events: none;
}

body.peripheral-auth-page #peripheral-auth-root .mask {
    position: fixed;
    inset: 0;
    z-index: 200000;
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.peripheral-auth-page #peripheral-auth-root .mask[style*="display: block"],
body.peripheral-auth-page #peripheral-auth-root .mask[style*="display:block"] {
    display: block !important;
}

body.peripheral-auth-page .LoginPanel,
body.peripheral-auth-page .MyAccountPanel,
body.peripheral-auth-page .MyRewardPanel {
    position: relative;
    z-index: 200001;
    pointer-events: auto;
    visibility: visible;
}

body.peripheral-auth-page .MyRewardDetailPanel {
    z-index: 200002;
}

body.peripheral-auth-page #_itemblock,
body.peripheral-auth-page #MemoryAnalyzeButton,
body.peripheral-auth-page #EncyclopediaButton,
body.peripheral-auth-page #MyAccountTodayCanPlayCountDiv,
body.peripheral-auth-page #BindChefInputBoxDiv,
body.peripheral-auth-page #ChefBearIdDiv {
    display: none !important;
}

/* 外圍頁：我的帳戶面板精簡與定位（主站 style.css 載入後覆寫） */
body.peripheral-auth-page .MyAccountPanel {
    --peripheral-account-avatar-size: calc(var(--vh, 1vh) * 12.5);
    --peripheral-account-avatar-left: calc(var(--vh, 1vh) * 3.5 + var(--peripheral-account-avatar-size) / 6);
    --peripheral-logout-btn-width: calc(calc(var(--vh, 1vh) * 5.5) * 3.058823529411765);
    --peripheral-close-nudge: calc(var(--peripheral-logout-btn-width) / 6);
    margin: calc(var(--vh, 1vh) * 12) auto auto auto !important;
    overflow: visible;
}

body.peripheral-auth-page .MyAccountPanelCloseButton {
    --peripheral-close-btn-size: calc(var(--vh, 1vh) * 10);
    position: absolute !important;
    right: calc(var(--vh, 1vh) * -2.5 + var(--peripheral-close-nudge)) !important;
    top: calc(var(--vh, 1vh) * -2.5 + var(--peripheral-close-nudge)) !important;
    left: auto !important;
    width: var(--peripheral-close-btn-size) !important;
    height: var(--peripheral-close-btn-size) !important;
    margin: 0 !important;
    background: url('./img/UI/Button_Close.png') no-repeat !important;
    background-size: 100% 100% !important;
}

body.peripheral-auth-page #AccuountTitleContent {
    margin: 0 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: calc(var(--vh, 1vh) * 20) !important;
    overflow: visible;
}

/* 外圍頁不顯示頂部「PLAYER」標題圖 */
body.peripheral-auth-page #AccuountTitleContent::before {
    display: none !important;
    content: none !important;
}

body.peripheral-auth-page #AccountAvatar {
    margin: 0 !important;
    position: absolute !important;
    left: var(--peripheral-account-avatar-left) !important;
    top: calc(var(--vh, 1vh) * 6) !important;
    width: var(--peripheral-account-avatar-size) !important;
    height: var(--peripheral-account-avatar-size) !important;
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 50%;
    z-index: 3;
}

/* 名字：面板內、頭像右側（對齊主站 Frame_Mine 版面） */
body.peripheral-auth-page #AccountIdContentDiv {
    margin: 0 !important;
    position: absolute !important;
    left: calc(var(--peripheral-account-avatar-left) + var(--peripheral-account-avatar-size) + var(--vh, 1vh) * 1.5) !important;
    right: calc(var(--vh, 1vh) * 5) !important;
    top: calc(var(--vh, 1vh) * 9) !important;
    width: auto !important;
    text-align: left !important;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}

body.peripheral-auth-page #AccountIdContent,
body.peripheral-auth-page #AccountIdContent * {
    position: static !important;
    display: block !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    color: saddlebrown !important;
    -webkit-text-fill-color: saddlebrown !important;
    font-size: calc(var(--vh, 1vh) * 2.8) !important;
    font-weight: bold !important;
    z-index: 5 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.peripheral-auth-page .MyAccountButton {
    margin-left: calc(var(--vh, 1vh) * 8.5) !important;
}

body.peripheral-auth-page #MyRewardButton {
    margin-top: calc(var(--vh, 1vh) * 24) !important;
}

body.peripheral-auth-page .MyAccountPanel #LogOutButton {
    margin-top: calc(var(--vh, 1vh) * 36) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.peripheral-auth-page .MyAccountPanel #LogOutButton:hover,
body.peripheral-auth-page .MyAccountPanel #LogOutButton:active,
body.peripheral-auth-page .MyAccountPanel #LogOutButton:focus {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* 外圍頁登入面板：僅水平置中，保留主站原本垂直順序（FB → Google → Line → 分隔線 → 訪客） */
body.peripheral-auth-page .LoginPanel {
    --peripheral-login-btn-w: calc(calc(var(--vh, 1vh) * 10) * 2.929824561403509);
    width: min(calc(calc(var(--vh, 1vh) * 65) * 0.8198924731182796), 92vw) !important;
    max-width: 92vw !important;
    box-sizing: border-box !important;
    background-size: min(calc(calc(var(--vh, 1vh) * 65) * 0.8198924731182796), 92vw) calc(var(--vh, 1vh) * 65) !important;
}

body.peripheral-auth-page .LoginPanelCloseButton {
    position: absolute !important;
    right: calc(var(--vh, 1vh) * -0.5) !important;
    top: calc(var(--vh, 1vh) * 1) !important;
    left: auto !important;
    margin: 0 !important;
}

body.peripheral-auth-page .LoginPanel #LoginTitleContenDiv {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(var(--vh, 1vh) * 52) !important;
    margin: calc(var(--vh, 1vh) * 2.5) auto auto auto !important;
    text-align: center !important;
    z-index: 10 !important;
    pointer-events: none;
}

body.peripheral-auth-page .LoginPanel #LoginTitleContent {
    display: block !important;
    white-space: nowrap;
}

body.peripheral-auth-page .LoginPanel #ThirdPartyLoginBlock {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.peripheral-auth-page .LoginPanel #FacebookButtonDiv,
body.peripheral-auth-page .LoginPanel #GoogleButtonDiv {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    width: var(--peripheral-login-btn-w) !important;
    max-width: min(var(--peripheral-login-btn-w), 92vw) !important;
    min-height: calc(var(--vh, 1vh) * 10) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

body.peripheral-auth-page .LoginPanel #FacebookButtonDiv {
    margin-top: calc(var(--vh, 1vh) * 11) !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 4;
}

body.peripheral-auth-page .LoginPanel #GoogleButtonDiv {
    margin-top: calc(var(--vh, 1vh) * 20) !important;
    z-index: 3;
}

body.peripheral-auth-page .LoginPanel #LineButton,
body.peripheral-auth-page .LoginPanel--guest-select #GuestButton,
body.peripheral-auth-page .LoginPanel:not(.LoginPanel--guest-bind):not(.LoginPanel--in-game) #GuestButton {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    width: var(--peripheral-login-btn-w) !important;
    max-width: min(var(--peripheral-login-btn-w), 92vw) !important;
    z-index: 3;
}

body.peripheral-auth-page .LoginPanel #LineButton {
    margin-top: calc(var(--vh, 1vh) * 32) !important;
}

body.peripheral-auth-page .LoginPanel--guest-select #GuestButton,
body.peripheral-auth-page .LoginPanel:not(.LoginPanel--guest-bind):not(.LoginPanel--in-game) #GuestButton {
    margin-top: calc(var(--vh, 1vh) * 44) !important;
}

body.peripheral-auth-page .LoginPanel--guest-select #DecorationLine_Login,
body.peripheral-auth-page .LoginPanel:not(.LoginPanel--guest-bind):not(.LoginPanel--in-game) #DecorationLine_Login {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: calc(var(--vh, 1vh) * 42) !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    width: min(calc(var(--vh, 1vh) * 40.5), 85vw) !important;
    height: auto !important;
    z-index: 4;
}

body.peripheral-auth-page .LoginPanel--guest-select #LoginGuestContentDiv,
body.peripheral-auth-page .LoginPanel:not(.LoginPanel--guest-bind):not(.LoginPanel--in-game) #LoginGuestContentDiv {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: auto !important;
    margin: calc(var(--vh, 1vh) * 55) auto 0 auto !important;
    padding: 0 calc(var(--vh, 1vh) * 7) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* 覆寫 login-component.css 的 FB 左偏與縮放 */
body.peripheral-auth-page .LoginPanel #FacebookButtonDiv .fb-login-button {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

body.peripheral-auth-page .LoginPanel #FacebookButtonDiv .fb-login-button > span {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

body.peripheral-auth-page .LoginPanel #FacebookButtonDiv iframe,
body.peripheral-auth-page .LoginPanel #GoogleButtonDiv iframe {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 auto !important;
}

body.peripheral-auth-page .LoginPanel #GoogleButton,
body.peripheral-auth-page .LoginPanel #GoogleButton > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
}