/* A separate login presentation for player.html. Shared authentication IDs
   retain the original Firebase/Turnstile behavior; no original styles changed. */
.p-account-overlay{position:fixed;inset:0;z-index:30000;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(0,0,0,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;overflow:auto;overscroll-behavior:contain;color:var(--p-text);transition:opacity .2s}
.p-account-overlay.active{opacity:1;visibility:visible;pointer-events:auto}
.p-account-overlay *{box-sizing:border-box}
.p-account-card{position:relative;width:min(100%,420px);padding:32px;max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:28px;border:1px solid var(--p-divider);background:var(--p-bg);box-shadow:0 24px 80px #0003;font:14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:var(--p-text)}
.p-account-card button,.p-account-card input{font:inherit;appearance:none;-webkit-appearance:none;color:inherit}
.p-account-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--p-hover);color:var(--p-secondary)!important;font-size:24px!important;line-height:1;cursor:pointer}
.p-account-mark{width:56px;height:56px;display:grid;place-items:center;border-radius:15px;background:var(--p-accent);color:white;margin:0 auto 18px}
.p-account-mark svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.p-account-heading{text-align:center;margin-bottom:26px}
.p-account-heading h2{margin:4px 0 8px;font-size:27px;line-height:1.3;letter-spacing:-.7px;font-weight:700}
.p-account-heading p{margin:0;color:var(--p-secondary);font-size:13px;line-height:1.6}
.p-account-heading p:first-child{font-weight:600;font-size:12px}
.p-account-fields{display:grid;gap:10px}
.p-account-fields label{font-size:12px;font-weight:600;color:var(--p-secondary)}
.p-account-fields input{width:100%;min-height:48px;border:1px solid var(--p-divider);border-radius:11px;background:var(--p-surface);padding:12px 14px;font-size:16px;margin:0;outline:none}
.p-account-fields input:focus{border-color:var(--p-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-accent) 12%,transparent)}
.p-account-fields input::placeholder{color:var(--p-secondary)}
.p-account-captcha{min-height:65px;margin:4px 0 8px;max-width:100%;overflow:hidden}
.p-account-submit,.p-account-google{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:24px;border:1px solid var(--p-divider);padding:11px 15px;font-weight:600!important;cursor:pointer}
.p-account-card .p-account-submit{background:var(--p-accent)!important;color:#fff!important;border-color:transparent}
.p-account-submit:disabled{opacity:.4!important;cursor:default!important}
.p-account-google{background:var(--p-surface)}
.p-account-google svg{width:19px;height:19px;flex:none}
.p-account-error{color:#e13a47;font-size:12px;margin:0;overflow-wrap:anywhere}
.p-account-error:empty{display:none}
.p-account-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--p-secondary);font-size:12px}
.p-account-divider:before,.p-account-divider:after{content:"";height:1px;flex:1;background:var(--p-divider)}
.p-account-profile{text-align:center}
.p-account-profile img{width:72px;height:72px;object-fit:cover;border-radius:50%;margin:auto}
.p-account-profile h3{font-size:21px;margin:14px 0 5px}
.p-account-profile p{color:var(--p-secondary);font-size:13px;overflow-wrap:anywhere}
.p-account-profile button{margin-top:24px}
.p-account-card :focus-visible{outline:2px solid var(--p-accent);outline-offset:3px}
@media(max-width:420px){.p-account-card{padding:28px 22px}.p-account-overlay{padding-inline:12px}.p-account-heading{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.p-account-overlay{transition:none}}

.player-app #login-modal-overlay{display:grid!important;transition:opacity .24s,visibility 0s .24s}
.player-app #login-modal-overlay.active{transition-delay:0s}
.p-account-card{transform:translateY(14px) scale(.97);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.p-account-overlay.active .p-account-card{transform:translateY(0) scale(1)}
@media(prefers-reduced-motion:reduce){.p-account-card,.player-app #login-modal-overlay{transition:none}}
