/* Account page: same backdrop, translucent white card and dark buttons as the store */

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-image: url("/static/banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.account-container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 32px;
    max-width: 520px;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    margin: 24px auto;
}

.account-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.account-title {
    margin: 0;
}

.back-link {
    font-size: 0.85rem;
    color: #555;
    text-decoration: none;
}

.back-link:hover {
    color: #000;
    text-decoration: underline;
}

/* Primary button, same look as the store's .cart-add-btn */
.acc-btn {
    width: 100%;
    height: 36px;
    border: none;
    border-radius: 5px;
    background-color: #2c2c2c;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
    letter-spacing: 0.3px;
}

.acc-btn:hover:not(:disabled) {
    background-color: #444;
}

.acc-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.link-btn {
    border: none;
    background: none;
    padding: 0;
    color: #555;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}

.link-btn:hover {
    color: #000;
}

.auth-lead {
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #333;
}

/* The normal-size Turnstile widget is fixed at 300x65, so the only way to match the input
   width is to scale the whole widget. fitCaptcha() in account.js computes the
   factor from the measured container width. */
.auth-captcha {
    margin-bottom: 16px;
    overflow: hidden;
}

/* Turnstile wraps its iframe in a div of its own */
.auth-captcha > div {
    width: 300px;
    transform-origin: 0 0;
}

.hint {
    font-size: 0.78rem;
    color: #666;
    line-height: 1.45;
}

.hint-warn {
    color: #96570d;
}

/* Hint that only opens while filling the form: takes no space otherwise, fades in
   once the caret enters any of the inputs */
.bind-hint {
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.25s ease, margin-bottom 0.25s ease;
}

.bind-hint.is-open {
    max-height: 6rem;
    margin-bottom: 1rem;
    opacity: 1;
}

/* The heading is gone, so the list keeps its own gap from the card edge */
#binding-list {
    margin-top: 4px;
}

.bind-section {
    margin-top: 1.5rem;
}

.section-title {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ddd;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.signed-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 0.85rem;
    color: #444;
}

.signed-as {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* Sign Out 平时不显示，鼠标移到这一行、键盘聚焦到它、或在触屏上点一下邮箱才露出来。
   藏法用 opacity + pointer-events，两种更直觉的写法都不行：
   - display:none 出现时会把整行重新排版，邮箱跳一下
   - visibility:hidden 会把它从 Tab 顺序和无障碍树里一起摘掉，读屏和纯键盘用户
     就彻底够不到退出了
   opacity:0 让它始终留在 Tab 顺序里，键盘一聚焦（:focus-within）就现身；
   pointer-events:none 保证看不见的时候也点不到 */
.signed-bar #signout-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.signed-bar:hover #signout-btn,
.signed-bar:focus-within #signout-btn,
.signed-bar.show-signout #signout-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Linked accounts list */
.binding-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background-color: rgba(255, 255, 255, 0.7);
}

.binding-name {
    font-weight: 600;
    font-size: 0.95rem;
    word-break: break-all;
}

.binding-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.binding-actions .acc-btn {
    height: 30px;
    font-size: 0.78rem;
}

.acc-btn-ghost {
    background-color: transparent;
    color: #a33;
    border: 1px solid #d9b3b3;
}

.acc-btn-ghost:hover:not(:disabled) {
    background-color: #f7ecec;
    color: #a33;
}

.empty-state {
    font-size: 0.82rem;
    color: #777;
    padding: 12px;
    text-align: center;
    border: 1px dashed #ccc;
    border-radius: 5px;
}

/* Device ID display */
.device-id-box {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    word-break: break-all;
}

.device-id-box code {
    color: #222;
    font-size: 0.9rem;
}

.nav-pills .nav-link {
    color: #444;
    font-size: 0.88rem;
}

.nav-pills .nav-link.active {
    background-color: #2c2c2c;
}

.binding-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.platform-chip {
    font-size: 0.72rem;
    line-height: 1.4;
    padding: 1px 7px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #eee;
    color: #444;
}

/* The row that was just linked: a short green fade so it stands out from the ones already there */
.binding-item-new {
    animation: binding-flash 2.5s ease-out;
}

@keyframes binding-flash {
    0%, 40% {
        background-color: #dff5e1;
        border-color: #8fd39a;
    }
    100% {
        background-color: rgba(255, 255, 255, 0.7);
        border-color: #ddd;
    }
}

/* Android app (?app=1): the page opens in a browser tab over the landscape game, about 780x340
   on a Galaxy S10. Fill the screen, tighten the spacing, keep each linked account on one line
   and, in landscape, put the two halves of each view side by side so one screen holds them. */
.app-mode body {
    align-items: flex-start;
}

.app-mode .account-container {
    max-width: 960px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 12px 16px;
    border-radius: 0;
    box-shadow: none;
}

.app-mode .account-head,
.app-mode .auth-lead,
.app-mode .signed-bar {
    margin-bottom: 8px;
}

.app-mode .account-title {
    font-size: 1.1rem;
}

/* Name with the platform chips under it on the left, Play and Unlink on the right */
.app-mode .binding-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
}

.app-mode .binding-platforms {
    margin-top: 2px;
}

.app-mode .binding-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: center;
    margin-top: 0;
}

.app-mode .binding-actions .acc-btn {
    width: auto;
    padding: 0 20px;
}

.app-mode .binding-actions .acc-btn-ghost,
.app-mode .binding-actions .acc-btn-ghost:hover:not(:disabled) {
    padding: 0 4px;
    border: none;
    background: none;
    text-decoration: underline;
}

@media (orientation: landscape) {
    .app-mode #view-auth,
    .app-mode #view-account {
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }

    .app-mode #view-auth > *,
    .app-mode #view-account > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .app-mode .bind-section {
        margin-top: 0;
    }
}