/* login.css — landing / auth screen.
 * The poster is shown WHOLE (3:2), sized to the viewport. The auth panel is positioned
 * RELATIVE TO THE IMAGE (percentages of .hero), so it stays locked onto the poster's
 * black box at ANY screen resolution / aspect ratio. */
#screen-login { align-items: center; justify-content: center; padding: 0; overflow: hidden; background: #000; }

.hero { position: relative; aspect-ratio: 3 / 2; width: min(100vw, 150vh); max-height: 100vh; }
.hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* overlay the poster's black box (these % are measured on the 1536x1024 art) */
.auth-panel { position: absolute; left: 6%; top: 36.5%; width: 32.5%; height: 53%;
  display: flex; flex-direction: column; justify-content: center; padding: 1.6%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 78%); }

.auth-btn { display: flex; align-items: center; justify-content: center; width: 100%;
  height: clamp(42px, 6.4vh, 58px); margin-bottom: clamp(8px, 1.4vh, 14px);
  border: 1px solid rgba(255,255,255,.25); border-radius: 12px;
  font-size: clamp(14px, 2vh, 19px); font-weight: 800; letter-spacing: 1px; cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff; }
.auth-btn.primary { background: linear-gradient(180deg, #e6473a, #b81e14); border: none; color: #fff; box-shadow: 0 6px 18px rgba(184,30,20,.4); }
.auth-btn:active { transform: translateY(1px); }

.auth-or { display: flex; align-items: center; color: #cabfa8; margin: clamp(4px,1vh,10px) 0 clamp(8px,1.4vh,14px); font-size: clamp(11px,1.4vh,13px); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.25); }
.auth-or span { padding: 0 12px; }

.social { display: flex; align-items: center; gap: 12px; width: 100%; height: clamp(38px, 5.6vh, 52px);
  margin-bottom: clamp(6px,1vh,10px); padding: 0 16px; border: none; border-radius: 12px;
  font-size: clamp(12px, 1.7vh, 15px); font-weight: 700; cursor: pointer; }
.social .sic { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; flex: none; }
.social.google { background: #fff; color: #1a1a1a; }
.social.google .sic { background: #fff; color: #4285F4; border: 1px solid #ddd; }
.social.facebook { background: #1877f2; color: #fff; }
.social.facebook .sic { background: #fff; color: #1877f2; }
.social:active { transform: translateY(1px); }

.welcome-hi { color: #fff; font-weight: 800; letter-spacing: 2px; font-size: clamp(11px,1.5vh,14px); margin-bottom: clamp(10px,2vh,18px); }
.welcome-hi b { display: block; color: #e6c368; font-size: clamp(20px,3.4vh,30px); letter-spacing: 1px; margin-top: 4px; }
.auth-switch { display: block; width: 100%; background: none; border: none; color: #cabfa8; text-decoration: underline; cursor: pointer; font-size: clamp(12px,1.5vh,14px); margin-top: clamp(6px,1.2vh,10px); }

.signup-input { width: 100%; height: 52px; border-radius: 12px; background: #0e0c08; border: 1px solid #2c2618;
  color: #fff; padding: 0 16px; text-align: center; font-size: 16px; margin-bottom: 12px; }
.signup-input:focus { outline: none; border-color: #b8912f; }
#signup-modal .modal-card { width: min(90vw, 360px); }

/* --- small / portrait screens: fill the screen, center the panel as a real card --- */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .hero { width: 100vw; height: 100vh; aspect-ratio: auto; max-height: none; }
  .hero-img { object-fit: cover; }
  .auth-panel { left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: min(340px, 88vw); height: auto; padding: 24px;
    background: rgba(8,6,4,.74); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; backdrop-filter: blur(5px); }
  .auth-btn { height: 52px; font-size: 17px; margin-bottom: 12px; }
  .social { height: 48px; font-size: 14px; margin-bottom: 10px; }
  .welcome-hi { font-size: 14px; } .welcome-hi b { font-size: 26px; }
}