/* Warfallow — экран входа: битва на весь экран, логотип сверху по центру, белая вертикальная карточка справа. */
body[data-screen="login"] .topbar, body[data-screen="login"] .backdrop, body[data-screen="login"] .stage { display: none; }
.login-screen { position: fixed; inset: 0; z-index: 30; overflow: hidden; background: #07090d; }
.login-screen[hidden] { display: none; }
.login-battle { position: absolute; inset: 0; overflow: hidden; }
.login-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.06); transform-origin: 50% 65%; will-change: transform; animation: art-in 1.6s ease both; }
@keyframes art-in { from { opacity: 0; filter: blur(8px) brightness(.4); } to { opacity: 1; filter: none; } }
.login-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 820px) { .login-art { object-position: 38% 50%; } }
.login-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 45% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(5,7,12,.55), rgba(5,7,12,0) 26%, rgba(5,7,12,0) 80%, rgba(5,7,12,.55)), linear-gradient(90deg, rgba(5,7,12,0) 62%, rgba(5,7,12,.45)); }

.login-brand { position: absolute; top: clamp(18px, 5vh, 56px); left: 0; right: calc(min(380px, 100vw - 32px) + clamp(16px, 4vw, 64px) + 12px); display: grid; justify-items: center; gap: 6px; pointer-events: none; padding: 0 16px; }
.login-logo { width: min(820px, 100%); height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.75)); animation: logo-in 1.2s cubic-bezier(.2,.8,.2,1) both, logo-glow 6s ease-in-out 1.2s infinite; }
.login-brand::before { content: ''; position: absolute; inset: -40px -10% -30px; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(10,6,4,.62), rgba(10,6,4,.35) 45%, rgba(10,6,4,0) 72%); }
@keyframes logo-in { from { opacity: 0; transform: translateY(-14px) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes logo-glow { 0%, 100% { filter: drop-shadow(0 10px 18px rgba(0,0,0,.75)) drop-shadow(0 0 0 rgba(255,180,80,0)); } 50% { filter: drop-shadow(0 10px 18px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(255,170,70,.45)); } }

.login-card { position: absolute; right: clamp(16px, 4vw, 64px); top: 50%; transform: translateY(-50%); width: min(380px, calc(100vw - 32px)); min-height: min(560px, 82vh);
  display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px 28px 22px; max-height: calc(100vh - 28px); overflow-y: auto; border-radius: 24px; background: #ffffff; color: #15181d;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.6) inset; animation: card-in .9s .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes card-in { from { opacity: 0; transform: translate(28px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.login-crest { width: 40px; height: auto; margin: 0 auto 2px; filter: brightness(.25); }
.login-card h1 { font-family: var(--serif); font-weight: 500; font-size: 1.85rem; text-align: center; color: #15181d; margin: 0; }
.login-lead { text-align: center; color: #5b6470; font-size: .92rem; line-height: 1.45; margin: 0 0 10px; }
.login-buttons { display: grid; gap: 12px; }
.auth-btn { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 14px;
  font: 600 1rem/1 var(--sans); text-decoration: none; text-align: center; cursor: pointer; transition: transform .12s, box-shadow .12s, filter .12s; }
.auth-btn svg { width: 22px; height: 22px; }
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.auth-btn:focus-visible { outline: 3px solid #f0b54a; outline-offset: 2px; }
.auth-btn.google { background: #fff; color: #1f1f1f; border: 1px solid #c7ccd3; }
.auth-btn.vk { background: #0077ff; color: #fff; }
.auth-btn.dev { grid-template-columns: 1fr; background: #f1ead9; color: #5a3e12; border: 1px dashed #c9a35b; }
.auth-btn.off { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.login-note { min-height: 1.2em; text-align: center; font-size: .86rem; color: #a3341f; margin: 2px 0 0; }
.login-note.info { color: #5b6470; }
.login-legal { margin-top: auto; padding-top: 10px; text-align: center; font-size: .74rem; color: #8a929c; line-height: 1.45; }
.login-legal a { color: #49515c; }

@media (max-width: 820px) {
  .login-brand { right: 0; }
  .login-logo { width: min(560px, 92vw); }
  .login-battle { bottom: 42vh; }
  .login-screen { background: linear-gradient(#2a1a10, #07090d 60%); }
  .login-card { top: auto; bottom: 14px; left: 50%; right: auto; transform: translateX(-50%); min-height: 0; padding: 22px 20px 16px; border-radius: 20px; animation: none; }
  .login-crest, .login-lead { display: none; }
  .login-card h1 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .login-logo, .login-motto, .login-card { animation: none; } }
.account-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text); } .account-chip b { font-weight: 600; color: var(--gold-2); }
@media (max-width: 560px) { .account-chip b { display: none; } }

/* вход и регистрация по почте */
.login-or { display: flex; align-items: center; gap: 10px; color: #8a929c; font-size: .8rem; margin: 4px 0 0; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: #e2e5ea; }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: #f1f3f6; }
.login-tabs button { min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: #5b6470; font: 600 .92rem var(--sans); cursor: pointer; }
.login-tabs button[aria-selected="true"] { background: #fff; color: #15181d; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.auth-form { display: grid; gap: 10px; }
.auth-form[hidden] { display: none; }
.auth-form input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #cfd4db; background: #fff; color: #15181d; font: 1rem var(--sans); }
.auth-form input::placeholder { color: #8f97a1; }
.auth-form input:focus { outline: none; border-color: #c9952f; box-shadow: 0 0 0 3px rgba(240,181,74,.3); }
.auth-form input[aria-invalid="true"] { border-color: #d0533c; }
.auth-field { position: relative; }
.auth-field input { padding-right: 112px; }
.login-avail { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 600; pointer-events: none; }
.login-avail.ok { color: #2f8a4a; } .login-avail.bad { color: #c2412b; }
.auth-submit { min-height: 48px; border: 0; border-radius: 12px; cursor: pointer; font: 700 1rem var(--sans); color: #1b1408;
  background: linear-gradient(180deg, #f3cd7a, #d39b3d); box-shadow: 0 6px 16px rgba(211,155,61,.35); transition: transform .12s, filter .12s; }
.auth-submit:hover { transform: translateY(-1px); filter: brightness(1.05); }
.auth-submit:disabled { opacity: .6; cursor: progress; transform: none; }
.login-card .login-lead { margin-bottom: 4px; }
@media (max-width: 820px) { .login-or { margin-top: 0; } .auth-form input, .auth-btn { min-height: 44px; } .login-card { gap: 9px; } }
@media (max-height: 760px) and (min-width: 821px) { .login-crest, .login-lead { display: none; } }

/* Широкие экраны: вся панорама целиком (оба замка), прижата к низу; сверху — размытое продолжение неба под логотип. */
.login-sky { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: 50% 0; filter: blur(26px) brightness(.85) saturate(1.1); }
@media (min-width: 821px) {
  .login-art { top: auto; bottom: 0; height: auto; aspect-ratio: 2560 / 1097; object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); transform-origin: 50% 100%; }
}
@media (min-width: 821px) and (min-aspect-ratio: 2560/1097) { .login-art { -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 820px) { .login-sky { display: none; } }

/* согласие при регистрации */
.auth-consent { display: flex; gap: 8px; align-items: flex-start; font-size: .76rem; line-height: 1.4; color: #5b636e; text-align: left; cursor: pointer; padding: 2px 2px 0; }
.auth-form .auth-consent input { margin: 2px 0 0; min-height: 0; padding: 0; box-shadow: none; width: 16px; height: 16px; flex: none; accent-color: #b98c45; }
.auth-consent a { color: #3d5a80; }
.auth-consent.need { color: #b3261e; }
.auth-consent.need input { outline: 2px solid #b3261e; outline-offset: 1px; }

/* документы и cookie — только вне матча */
.site-legal { position: fixed; left: 0; bottom: 0; z-index: 40; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 7px 16px; font-size: .74rem; color: rgba(240,226,200,.72);
  background: linear-gradient(to top, rgba(8,6,4,.78), rgba(8,6,4,0)); border-top-right-radius: 10px; }
.site-legal a { color: rgba(240,226,200,.85); text-decoration: none; border-bottom: 1px solid rgba(240,226,200,.25); }
.site-legal a:hover { color: #f0d39a; border-color: currentColor; }
.site-legal-ru::before { content: "🇷🇺 "; }
.cookie-banner { position: fixed; z-index: 45; left: 16px; bottom: 40px; max-width: 430px; display: flex; gap: 14px; align-items: center; padding: 12px 14px 12px 16px;
  background: rgba(20,14,10,.94); border: 1px solid rgba(216,179,106,.45); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); color: #eadfcb; font-size: .82rem; line-height: 1.45; }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; }
.cookie-banner a { color: #ecc982; }
.cookie-banner .btn { flex: none; padding: 8px 16px; }
/* показываем только на входе, в главном меню и в списке игр; в лобби, отсчёте и самой игре — нет */
body:not([data-screen="login"]):not([data-screen="title"]):not([data-screen="games"]) :is(.site-legal, .cookie-banner),
body:not([data-phase="lobby"]) :is(.site-legal, .cookie-banner) { display: none !important; }
@media (max-width: 820px) {
  .site-legal { right: 0; justify-content: center; gap: 2px 12px; padding: 6px 10px; border-radius: 0; font-size: .7rem; }
  .site-legal > span:first-child { display: none; }
  .cookie-banner { left: 10px; right: 10px; top: 52px; bottom: auto; max-width: none; font-size: .78rem; } /* ниже кнопок звука */
  body[data-screen="login"] .site-legal { display: none; } /* на телефоне ссылки — в самой карточке входа */
}
@media (min-width: 821px) { .login-legal-docs { display: none; } }