/* Account UI, focused on desktop. Authentication rules stay in community/auth.js. */
.account-login-card { width: min(27rem, calc(100vw - 2rem)); border-color: #3c769e; box-shadow: 0 1rem 4rem #0009, 0 0 1.5rem #38bdf820; }
.account-login-card .modal-header { align-items: center; }
.account-login-card .modal-header small { font: 700 .6rem var(--font-pixel-ui); color: #69ccf3; letter-spacing: .1em; }
.account-login-card h2 { margin-top: .4rem; font-size: 1.1rem; }
.account-form { display: flex; flex-direction: column; gap: .85rem; padding: 1.4rem; }
.account-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .7rem; font-weight: 800; color: #c7d6e9; }
.account-form input:not([type="checkbox"]) { width: 100%; min-height: 2.8rem; border: 1px solid #38516e; border-radius: .5rem; background: #080f1e; color: #f8fafc; padding: .7rem .8rem; font-size: .9rem; text-transform: none !important; user-select: text; outline: none; }
.account-form input:focus { border-color: #38bdf8; box-shadow: 0 0 .6rem #38bdf82b; }
.account-form .account-remember { display: flex; align-self: flex-start; align-items: center; gap: .5rem; width: fit-content; font-size: .6rem; font-weight: 800; color: #c7d6e9; }
.account-remember input { accent-color: #38bdf8; width: 1rem; height: 1rem; }
.account-remember input { cursor: pointer; }
#accountPasswordHint, .account-guest-choice small { color: #91a5bf; font-size: .57rem; line-height: 1.5; }
#accountPasswordHint { margin-top: -.45rem; }
#accountStatus { min-height: 1rem; color: #7dd3fc; font-size: .7rem; }
#accountStatus.is-error { color: #fda4af; }
#accountSubmit { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.8rem; width: 100%; font-size: .8rem; }
.account-text-button, #accountGuest { align-self: center; width: fit-content; max-width: 100%; border: 1px solid #38516e; border-radius: .4rem; background: #142238; color: #7dd3fc; font-size: .7rem; font-weight: 800; cursor: pointer; padding: .5rem .8rem; }
.account-text-button:hover { color: #e0f2fe; text-shadow: 0 0 .6rem #38bdf8; }
.account-guest-choice { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-top: .9rem; border-top: 1px solid #334155; text-align: center; }
#accountGuest { color: #b7c5d8; }
.account-loading { display: none; width: .9rem; height: .9rem; border: 2px solid #ffffff55; border-top-color: white; border-radius: 50%; animation: accountSpin .8s linear infinite; }
.is-loading .account-loading { display: inline-block; }
@keyframes accountSpin { to {transform: rotate(360deg);} }
.profile-guest-prompt { display: flex; flex-direction: column; gap: .7rem; padding: .7rem 0; text-align: center; }
.profile-guest-prompt p { color: #e2e8f0; font-size: .75rem; line-height: 1.5; }
.profile-guest-prompt small { color: #94a3b8; font-size: .6rem; }
.trainer-profile-popover.is-guest :is(.trainer-profile-stats,.trainer-profile-team-section) { display: none; }
:is(#profileGuestPrompt,#profileAccountLogout,#accountConfirmField,#accountPasswordHint,.char-field-group)[hidden] { display: none !important; }
#profileAccountLogout { display: block; margin: .5rem auto 0; }
.character-creation-exit { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; height: 2rem; padding: .35rem .65rem; font-size: .7rem; line-height: 1; white-space: nowrap; }
#characterCreationModal .char-create-actions { justify-content: space-between; align-items: stretch; gap: .75rem; }
#btnCloseCharModal { height: auto; padding: .8125rem 1.25rem; border: .125rem solid #fb7185; border-radius: .5rem; background: linear-gradient(135deg,#ef4444,#b91c1c); color: #fff; font: 800 .95rem var(--font-pixel-ui); box-shadow: 0 .25rem .875rem #ef444444; }
#btnCloseCharModal:hover:not(:disabled) { background: linear-gradient(135deg,#f87171,#dc2626); box-shadow: 0 0 1rem #ef444488; }

/* One inset aligns the starter counter and footer actions; equal footer padding centers the buttons. */
html:not(.battlemon-mobile) #starterSelectionModal .starter-lab-fit-frame .starter-lab-card { --starter-action-inset: 1.5rem; overflow: clip; }
html:not(.battlemon-mobile) #starterSelectionModal .starter-select-header { padding-inline: var(--starter-action-inset); gap: 1rem; }
html:not(.battlemon-mobile) #starterSelectionModal .starter-hero-title { margin: 0; color: #fbbf24; }
html:not(.battlemon-mobile) #starterCounterPodium { flex: 0 0 auto; margin-left: auto; }
html:not(.battlemon-mobile) #starterSelectionModal .starter-select-body { padding-inline: var(--starter-action-inset); padding-bottom: 0; }
html:not(.battlemon-mobile) #starterSelectionModal .starter-actions-footer { margin-top: .25rem; padding-block: 1rem; align-items: center; }
/* Account entry/cadastro share the same highlighted action. */
#accountConfirmStatus { display:flex; align-items:center; gap:.35rem; margin-top:.15rem; font:800 .62rem/1.4 var(--font-clean); }
#accountConfirmStatus[hidden] { display:none !important; }
#accountConfirmStatus svg { width:1rem; height:1rem; flex-shrink:0; }
#accountConfirmStatus.is-valid { color:#6ee7b7; }
#accountConfirmStatus.is-invalid { color:#fda4af; }
#accountConfirm[aria-invalid="true"] { border-color:#f87171; box-shadow:0 0 .6rem #f8717122; }
#accountConfirmField:has(.is-valid) input { border-color:#4ade80; }
html:not(.battlemon-mobile) #accountSubmit { --spark-color:#96ffcc; position:relative; isolation:isolate; overflow:visible; border:1px solid #8df2c8; border-radius:.6rem; background:linear-gradient(145deg,#36d99d,#059669); color:#052c21; box-shadow:0 .2rem 0 #064e3b,0 0 1.1rem #34d39955,inset 0 1px #d1fae599; font-weight:900; }
html:not(.battlemon-mobile) #accountSubmit:hover:not(:disabled) { box-shadow:0 .2rem 0 #064e3b,0 0 1.7rem #34d39988,inset 0 1px #d1fae599; }
html:not(.battlemon-mobile) #accountSubmit:disabled { opacity:.5; }
html:not(.battlemon-mobile) #accountToggle { border-color:#34d39988; color:#9bf3cc; background:linear-gradient(135deg,#12392d,#0c2927); box-shadow:0 0 .65rem #34d39922; }
.account-sheen { display:none; }
html:not(.battlemon-mobile) #accountSubmit>.account-sheen { display:block; position:absolute; inset:1px; border-radius:inherit; overflow:hidden; pointer-events:none; }
html:not(.battlemon-mobile) .account-sheen:before { content:''; position:absolute; top:-40%; left:0; width:25%; height:180%; background:linear-gradient(90deg,transparent,#f2fffca6,transparent); transform:translate3d(-250%,0,0) skewX(-24deg); animation:accountDiagonalShine 4.2s ease-in-out infinite; }
@keyframes accountDiagonalShine { 0%,20%{transform:translate3d(-250%,0,0) skewX(-24deg)}65%,100%{transform:translate3d(600%,0,0) skewX(-24deg)} }
html:not(.battlemon-mobile) #accountClose { display:inline-flex; align-items:center; justify-content:center; width:2.15rem; height:2.15rem; min-width:2.15rem; padding:0; border:1px solid #486788; border-radius:.5rem; color:#c4d9f0; background:#16283e; font-size:1.4rem; }
html:not(.battlemon-mobile) #accountClose:hover { border-color:#60a5fa; color:#e2f3ff; box-shadow:0 0 .8rem #60a5fa77; }
html:not(.battlemon-mobile) #profileAccountLogout { display:flex; align-items:center; justify-content:center; gap:.4rem; width:fit-content; margin:.9rem 0 0 auto; padding:.5rem .7rem; color:#ffe4e6; border:1px solid #f8717180; border-radius:.45rem; background:linear-gradient(145deg,#b91c1c,#7f1d1d); box-shadow:0 0 .5rem #ef444422; font-size:.65rem; }
#profileAccountLogout svg { width:1rem; height:1rem; }
html:not(.battlemon-mobile) #profileAccountLogout:hover { border-color:#fda4af; box-shadow:0 0 .85rem #ef444466; }
@media(prefers-reduced-motion:reduce){html:not(.battlemon-mobile) .account-sheen:before { animation:none; } }

html:not(.battlemon-mobile) #accountForm.is-registering #accountSubmit { --spark-color:#e9b7ff; color:#fff; border-color:#d8b4fe; background:linear-gradient(145deg,#b16bf0,#7e22ce); box-shadow:0 .2rem 0 #581c87,0 0 1.3rem #a855f766,inset 0 1px #faf5ff66; }
html:not(.battlemon-mobile) #accountForm.is-registering #accountSubmit:hover:not(:disabled) { box-shadow:0 .2rem 0 #581c87,0 0 1.7rem #c084fc88; }
#accountForm #accountStatus:empty { min-height:0; margin:0; }
#accountForm #accountSubmit { margin-top:0; }

html:not(.battlemon-mobile) #accountForm:not(.is-registering) #accountToggle { --spark-color:#e9b7ff; position:relative; margin-top:0; color:#ead3ff; border-color:#b878ee; background:linear-gradient(145deg,#63338a,#48216d); box-shadow:0 0 .8rem #a855f744; }
html:not(.battlemon-mobile) #accountForm:not(.is-registering) #accountToggle:hover { box-shadow:0 0 1.2rem #a855f777; }
#accountForm .account-guest-choice { margin-top:0; }

/* Desktop login: sign in beside Guest, account creation below. */
html:not(.battlemon-mobile) .account-login-actions { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:.65rem; }
html:not(.battlemon-mobile) .account-login-actions :is(#accountSubmit,#accountGuest) { width:100%; height:100%; min-height:2.8rem; margin:0; align-self:stretch; font-size:.65rem; }
html:not(.battlemon-mobile) #accountToggle { order:2; margin:.15rem auto 0; }
html:not(.battlemon-mobile) .account-guest-choice { order:3; padding:0; border:0; }
html:not(.battlemon-mobile) .account-login-actions { padding-bottom:.85rem; border-bottom:1px solid #334155; }
html:not(.battlemon-mobile) #accountForm.is-registering .account-login-actions { grid-template-columns:1fr; }
html:not(.battlemon-mobile) #btnHardReset.confirming:hover:not(:disabled) { animation:forfeitNervousShake .22s linear infinite; }
@media(prefers-reduced-motion:reduce){html:not(.battlemon-mobile) #btnHardReset.confirming:hover{animation:none}}

html:not(.battlemon-mobile) :is(#trainerProfileAnchor,#homeTrainerProfileAnchor) { display:flex; align-items:center; gap:.55rem; }
html:not(.battlemon-mobile) #headerTrainerPill { border-radius:.45rem; min-height:2.25rem; padding:.2rem .65rem; }
html:not(.battlemon-mobile) #homeTrainerProfileButton { border-radius:.5rem; }
html:not(.battlemon-mobile) .reward-notifications-button { position:relative; color:#7dd3fc; flex-shrink:0; border:1px solid #38bdf880; background:#10243b; }
html:not(.battlemon-mobile) .reward-notifications-button svg { width:1.25rem; height:1.25rem; }
html:not(.battlemon-mobile) .reward-notifications-button:hover { transform:scale(1.06); box-shadow:0 0 1rem #38bdf866; }
html:not(.battlemon-mobile) .reward-notifications-button b { position:absolute; right:-.3rem; top:-.3rem; background:#e11d48; color:white; border-radius:1rem; padding:.1rem .25rem; font:.6rem var(--font-clean); }
html:not(.battlemon-mobile) .reward-notifications-button b[hidden] { display:none; }
.reward-notifications { position:fixed; inset:auto; margin:0; width:min(23rem,calc(100vw - 1rem)); max-height:min(28rem,70dvh); padding:.8rem; overflow:auto; color:#dbeafe; background:#0f192bf5; border:1px solid #38bdf8; border-radius:.7rem; box-shadow:0 0 1.5rem #38bdf833; }
.reward-notifications header { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.reward-notifications h2 { font:800 .75rem var(--font-pixel-ui); }
.reward-notifications header button { color:#cbd5e1; background:#1e293b; border:1px solid #475569; border-radius:.3rem; padding:.1rem .4rem; }
.reward-notifications-list { display:grid; gap:.5rem; margin-top:.7rem; }
.reward-notifications-list article { border:1px solid #334155; border-left:3px solid #34d399; background:#152338; border-radius:.4rem; padding:.65rem; }
.reward-notifications-list article[data-kind="shiny"] { border-left-color:#fde047; color:#fde047; }
.reward-notifications-list article[data-kind="pokemon"] { border-left-color:#38bdf8; }
.reward-notifications-list strong { font:800 .65rem var(--font-clean); }
.reward-notifications-list p { font:.72rem/1.5 var(--font-clean); margin:.3rem 0; }
.reward-notifications-list time { color:#94a3b8; font:.6rem var(--font-clean); }

/* Character creation: SAIR matches the next button's height; sprite + name centered in each card */
html:not(.battlemon-mobile) #characterCreationModal #btnCloseCharModal { width: auto; min-width: 6.5rem; height: auto; min-height: 0; padding: .8125rem 1.5rem; font-size: .95rem; letter-spacing: .04em; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; }
#characterCreationModal .char-avatar-option { justify-content: center; align-items: center; text-align: center; gap: .4rem; padding: .4rem .3rem; }
#characterCreationModal .char-avatar-option img { display: block; margin: 0 auto; }
#characterCreationModal .char-avatar-option span { display: block; width: 100%; text-align: center; }
#characterCreationModal .char-avatars-grid { grid-auto-rows: 6.9rem; max-height: 22.5rem; }
#characterCreationModal .char-create-actions { align-items: stretch; }
#characterCreationModal .char-create-actions > * { align-self: stretch; }
html:not(.battlemon-mobile) #characterCreationModal :is(#btnCloseCharModal, #btnProceedToStarters) { height: 3rem !important; min-height: 3rem !important; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }

/* Language step (first step of character creation) */
.lang-step-card { width: min(34rem, 94vw); }
.lang-step-sub { margin: .25rem 0 0; color: #7dd3fc; font: 700 .72rem var(--font-clean, inherit); letter-spacing: .04em; }
.lang-step-options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.lang-step-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 8.2rem; padding: .8rem; border: .0625rem solid #334155; border-radius: .7rem; background: linear-gradient(145deg, #111827, #0b1220); color: #e2e8f0; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s, background .18s; }
.lang-step-option .lang-flag { width: 3.6rem; height: auto; border-radius: .25rem; box-shadow: 0 0 0 1px #0009, 0 .3rem .8rem #0008; filter: grayscale(.6) brightness(.75); transition: filter .2s; }
.lang-step-option strong { font: 800 .95rem var(--font-pixel-ui); }
.lang-step-option small { color: #94a3b8; font: 700 .68rem var(--font-clean, inherit); }
.lang-step-option:hover { transform: translateY(-.1875rem); border-color: #38bdf8; }
.lang-step-option.is-active { border-color: #4ade80; background: linear-gradient(145deg, #14503a, #0b1220); box-shadow: 0 0 1rem #22c55e44; }
.lang-step-option.is-active .lang-flag { filter: none; }
.lang-step-option.is-active::after { content: '✓'; position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #22c55e; color: #fff; font: 800 .75rem/1 var(--font-pixel-ui); }
.lang-step-hint { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin: 1rem 0 .4rem; padding: .9rem 1rem 1.1rem; border: .125rem dashed #fbbf2488; border-radius: .7rem; background: #fbbf240d; text-align: center; }
.lang-step-hint p { margin: 0; color: #e2e8f0; font: 700 .8rem var(--font-clean, inherit); }
.lang-step-demo { position: relative; padding: .6rem .8rem; border-radius: .8rem; background: #0b1222; box-shadow: 0 0 0 .125rem #fbbf24, 0 0 1.2rem #fbbf2455; animation: langDemoPulse 1.6s ease-in-out infinite; pointer-events: none; }
.lang-step-demo::before { content: '▲'; position: absolute; left: 50%; top: -1.25rem; transform: translateX(-50%); color: #fbbf24; font-size: .9rem; animation: langDemoBob 1s ease-in-out infinite; }
.lang-step-demo .lang-switch { position: static; display: flex !important; }
@keyframes langDemoPulse { 50% { box-shadow: 0 0 0 .125rem #fde68a, 0 0 1.8rem #fbbf2488; } }
@keyframes langDemoBob { 50% { transform: translate(-50%, -.25rem); } }
html:not(.battlemon-mobile) #languageStepModal .char-create-actions { justify-content: space-between; align-items: stretch; gap: .75rem; margin-top: .8rem; }
html:not(.battlemon-mobile) #languageStepModal #btnLangStepExit { width: auto; min-width: 6.5rem; padding: 0 1.5rem; border: .125rem solid #fb7185; border-radius: .5rem; background: linear-gradient(135deg,#ef4444,#b91c1c); color: #fff; font: 800 .95rem var(--font-pixel-ui); }
html:not(.battlemon-mobile) #languageStepModal :is(#btnLangStepExit, #btnLangStepNext) { height: 3rem !important; min-height: 3rem !important; box-sizing: border-box; }
html:not(.battlemon-mobile) .lang-step-demo .lang-switch { position: static; display: flex !important; }
body:has(#languageStepModal.active) > #langSwitch { display: none !important; }
.lang-step-demo { width: max-content; }
.lang-step-demo { margin-top: .7rem; } .lang-step-demo::before { top: -1.05rem; font-size: .75rem; }

/* Jogar como guest: hover/foco/press no mesmo padrão dos demais botões */
#accountGuest { transition: transform .16s ease, color .16s, border-color .16s, background .16s, box-shadow .16s; }
#accountGuest:hover:not(:disabled) { color: #fff; border-color: #7dd3fc; background: linear-gradient(180deg, #1e3a5c, #142238); box-shadow: 0 0 .9rem #38bdf855, inset 0 1px #ffffff18; transform: translateY(-2px); }
#accountGuest:active:not(:disabled) { transform: translateY(1px) scale(.98); }
#accountGuest:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }