:root { color-scheme: dark; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020611; color: #f4f8ff; }
button, input { font: inherit; }
.hidden { display: none !important; }
.auth-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 15%, #123471 0, #07122d 36%, #020611 78%); }
.auth-card { width: min(420px, 100%); padding: 34px; border: 1px solid rgba(70,230,255,.3); border-radius: 28px; background: rgba(7,18,45,.88); box-shadow: 0 24px 80px rgba(0,0,0,.45), inset 0 0 40px rgba(66,133,255,.08); backdrop-filter: blur(18px); }
.brand-mark { color: #46e6ff; font-size: 44px; text-align: center; text-shadow: 0 0 24px #46e6ff; }
.auth-card h1 { margin: 6px 0; text-align: center; font-size: 34px; }
.auth-card > p { margin: 0 0 26px; text-align: center; color: #91a4c9; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; padding: 5px; background: rgba(2,6,17,.6); border-radius: 14px; }
.auth-tabs button, .account-bar button { border: 0; color: #91a4c9; background: transparent; cursor: pointer; }
.auth-tabs button { padding: 10px; border-radius: 10px; }
.auth-tabs button.active { color: #061121; background: #46e6ff; font-weight: 700; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; color: #b9c7e4; font-size: 14px; }
input { width: 100%; padding: 13px 14px; color: #f4f8ff; border: 1px solid rgba(145,164,201,.35); border-radius: 12px; outline: none; background: rgba(2,6,17,.75); }
input:focus { border-color: #46e6ff; box-shadow: 0 0 0 3px rgba(70,230,255,.12); }
.primary-action { margin-top: 4px; padding: 14px; border: 0; border-radius: 14px; color: #03101f; background: linear-gradient(135deg,#46e6ff,#55f59a); font-weight: 800; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.form-message { min-height: 22px; margin: 16px 0 0 !important; color: #ff718e !important; font-size: 14px; }
.game-screen { width: 100%; height: 100dvh; position: relative; display: flex; flex-direction: column; background: #020611; }
.account-bar { position: fixed; z-index: 5; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid rgba(70,230,255,.18); border-radius: 999px; background: rgba(2,6,17,.74); backdrop-filter: blur(10px); font-size: 12px; }
#sync-status { color: #91a4c9; }
#sync-status.pending { color: #ffb238; }
#admin-link { color: #55f59a; text-decoration: none; }
.account-bar button { color: #f4f8ff; }
.canvas-shell { width: 100%; flex: 1 1 auto; min-height: 0; touch-action: none; }
#game-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
@media (min-width: 900px) { .canvas-shell { width: min(56.2vh, 750px); margin: 0 auto; box-shadow: 0 0 90px rgba(35,94,190,.28); } }