* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #07141f;
    /* 禁用移动端长按选中 / 双击缩放 / 高亮，跑酷需要干净的点击手感 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

#app {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #07141f;
}
#game-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #07141f;
}
#game-container canvas {
    display: block;
    touch-action: none;
}

/* 登录 / 个人中心覆盖在 Phaser 画布之上；战队列表不用原生 select，避免移动 WebView 转屏。 */
.account-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    color: #f7f3ed;
    background:
        radial-gradient(circle at 70% 20%, rgba(198, 148, 63, .18), transparent 36%),
        linear-gradient(135deg, rgba(5, 17, 25, .97), rgba(20, 37, 45, .96));
    -webkit-user-select: text;
    user-select: text;
    touch-action: auto;
}
.account-card {
    width: min(620px, calc(100vw - 40px));
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 28px 38px 32px;
    border: 1px solid rgba(234, 198, 139, .45);
    border-radius: 22px;
    background: rgba(10, 27, 37, .94);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .48), inset 0 1px rgba(255,255,255,.06);
    scrollbar-color: rgba(216, 173, 101, .55) transparent;
    scrollbar-width: thin;
}
.account-card::-webkit-scrollbar { width: 6px; }
.account-card::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(216, 173, 101, .55); }
.account-brand { color: #d8ad65; font-size: 11px; letter-spacing: 4px; text-align: center; }
.account-kicker { margin-top: 18px; color: #bfcbd0; font-size: 13px; letter-spacing: 3px; text-align: center; }
.account-card h1 { margin: 6px 0 8px; font-size: 30px; letter-spacing: 2px; text-align: center; }
.account-subtitle { color: #9eafb7; font-size: 13px; line-height: 1.7; text-align: center; }
.account-content { margin-top: 22px; }
.account-avatar {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    place-items: center;
    border: 1px solid #d8ad65;
    border-radius: 50%;
    color: #ffe4b3;
    background: #8c1d18;
    font-size: 28px;
}
.account-actions { display: grid; gap: 10px; max-width: 360px; margin: auto; }
.account-form { display: grid; gap: 14px; }
.account-form > label, .team-fields label, .form-field {
    display: grid;
    gap: 7px;
    color: #dce6e9;
    font-size: 13px;
}
.account-form input[type="text"], .account-form input:not([type]), .account-form select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(199, 222, 232, .26);
    border-radius: 9px;
    outline: none;
    color: #fff;
    background: #102733;
    font: inherit;
    -webkit-user-select: text;
    user-select: text;
}
.account-form input:focus, .account-form select:focus { border-color: #d8ad65; box-shadow: 0 0 0 3px rgba(216,173,101,.12); }
.account-form input:disabled, .account-form select:disabled { opacity: .62; }
.team-choice { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }
.team-choice legend { width: 100%; margin-bottom: 6px; color: #dce6e9; font-size: 13px; }
.choice-pill { padding: 8px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; color: #bdcbd1; font-size: 13px; cursor: pointer; }
.choice-pill:has(input:checked) { border-color: #d8ad65; color: #ffe5b6; background: rgba(216,173,101,.12); }
.team-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.04); }
.team-fields[hidden] { display: none; }
.team-picker { position: relative; }
.team-picker-trigger {
    position: relative;
    width: 100%;
    height: 42px;
    padding: 0 38px 0 12px;
    border: 1px solid rgba(199, 222, 232, .26);
    border-radius: 9px;
    color: #fff;
    background: #102733;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.team-picker-trigger::after {
    content: '▾';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #d8ad65;
}
.team-picker-trigger[aria-expanded="true"]::after { content: '▴'; }
.team-picker-trigger:disabled { cursor: default; opacity: .58; }
.team-picker-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: min(190px, 34vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(216, 173, 101, .5);
    border-radius: 10px;
    background: #0b202b;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.team-picker-menu[hidden] { display: none; }
.team-picker-option {
    display: block;
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: 7px;
    color: #dce7eb;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.team-picker-option:hover, .team-picker-option.is-selected { color: #ffe4b3; background: rgba(216, 173, 101, .16); }
.account-benefit { color: #e5c58e; font-size: 12px; line-height: 1.6; }
.account-error { min-height: 18px; color: #ff8983; font-size: 12px; }
.account-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.account-primary, .account-secondary, .account-link {
    min-height: 42px;
    padding: 0 20px;
    border-radius: 9px;
    font: inherit;
    cursor: pointer;
}
.account-primary { border: 1px solid #f4d69f; color: #10202a; background: #dcb875; font-weight: 700; }
.account-primary:disabled { cursor: wait; opacity: .55; }
.account-secondary { border: 1px solid rgba(220,184,117,.55); color: #f5dcae; background: rgba(220,184,117,.08); }
.account-link { border: 0; color: #b8c7cd; background: transparent; }

@media (max-height: 620px) {
    .account-card { padding: 18px 28px 22px; }
    .account-kicker { margin-top: 10px; }
    .account-card h1 { font-size: 24px; }
    .account-content { margin-top: 12px; }
    .account-form { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
    .team-choice, .account-benefit, .account-error, .account-form-actions { grid-column: 1 / -1; }
    .team-fields { grid-column: 1 / -1; }
}

#rotate-hint {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #07141f;
    color: #f3e6d8;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}
#rotate-hint .rotate-icon { font-size: 64px; animation: tilt 1.6s ease-in-out infinite; }
#rotate-hint p { font-size: 16px; letter-spacing: 2px; }
#rotate-hint .sub { font-size: 13px; opacity: .55; letter-spacing: 4px; }

@keyframes tilt {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-90deg); }
}

/* 竖屏且屏幕较窄时提示横屏；平板/桌面不打扰 */
@media (orientation: portrait) and (max-width: 820px) {
    #rotate-hint { display: flex; }
    #game-container { visibility: hidden; }
}