/* ============================================================
   LOGSTYLE.CSS — Shared styles for SOVEREIGN authentication pages
   login.html, signup.html, complete-profile.html, reset-password.html
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0e14;
  font-family: 'Cinzel', serif;
  padding: 1.5rem;
  position: relative;
  overflow-x: hidden;
}

/* ----- WORLD MAP BACKGROUND (faint) ----- */
.world-bg {
  position: fixed;
  inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" opacity="0.07"><path fill="%23b8a88a" d="M200,200 L250,180 L300,210 L320,170 L370,190 L400,150 L450,170 L490,140 L530,170 L580,150 L620,180 L670,150 L720,180 L760,150 L800,180 L840,150 L880,180 L920,160 L960,190 L1000,170 L1040,200 L1080,180 L1120,210 L1160,190 L1180,220 L1150,250 L1110,240 L1070,260 L1030,250 L990,270 L950,250 L910,270 L870,250 L830,270 L790,250 L750,270 L710,250 L670,270 L630,250 L590,270 L550,250 L510,270 L470,250 L430,270 L390,250 L350,270 L310,250 L270,270 L230,250 L190,270 L160,240 L180,210 Z"/><path fill="%23b8a88a" d="M400,400 L450,380 L500,410 L540,390 L580,420 L620,400 L660,430 L700,410 L740,440 L780,420 L820,450 L860,430 L900,460 L940,440 L980,470 L1020,450 L1060,480 L1100,460 L1120,490 L1080,510 L1040,500 L1000,520 L960,500 L920,520 L880,500 L840,520 L800,500 L760,520 L720,500 L680,520 L640,500 L600,520 L560,500 L520,520 L480,500 L440,520 L400,500 L360,520 L320,500 L280,520 L240,500 L200,520 L160,500 L180,470 L220,490 L260,470 L300,490 L340,470 L380,490 L420,470 L460,490 L500,470 L540,490 L580,470 L620,490 L660,470 L700,490 L740,470 L780,490 L820,470 L860,490 L900,470 L940,490 L980,470 L1020,490 L1060,470 L1100,490 L1120,460 L1080,440 L1040,460 L1000,440 L960,460 L920,440 L880,460 L840,440 L800,460 L760,440 L720,460 L680,440 L640,460 L600,440 L560,460 L520,440 L480,460 L440,440 L400,460 L360,440 L320,460 L280,440 L240,460 L200,440 L160,460 L140,420 L180,400 Z"/><circle cx="300" cy="550" r="40" fill="%23b8a88a"/><circle cx="700" cy="600" r="60" fill="%23b8a88a"/><circle cx="950" cy="520" r="45" fill="%23b8a88a"/></svg>') no-repeat center/cover;
  pointer-events: none;
  z-index: 0;
}

/* faint symbols ☭ and stars */
.symbol-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  color: rgba(200, 180, 140, 0.06);
  font-size: 5rem;
  font-family: 'Playfair Display', serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  letter-spacing: 8rem;
  padding: 3rem;
}
.symbol-overlay span {
  opacity: 0.5;
  transform: rotate(4deg);
}

/* ----- MAIN CARD (glass) ----- */
.auth-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 520px;
  background: rgba(18, 22, 30, 0.8);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-radius: 3rem 1rem 3rem 1rem;
  border: 1px solid rgba(200, 180, 140, 0.3);
  box-shadow: 
    0 20px 50px rgba(0,0,0,0.8),
    0 0 40px rgba(200, 160, 80, 0.25),
    0 0 80px rgba(200, 160, 80, 0.12),
    inset 0 0 40px rgba(200, 160, 80, 0.05);
  padding: 2.5rem 2rem 2.2rem;
  transition: box-shadow 0.3s ease;
  animation: cardEntry 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(30px) scale(0.97);
}

/* Login page uses floatGlow, signup/complete-profile use candleGlow */
.auth-card.login-card {
  animation: cardEntry 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatGlow 6s infinite alternate 0.9s;
  max-width: 460px;
  background: rgba(18, 22, 30, 0.75);
  box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(200, 180, 140, 0.1) inset;
}
.auth-card.signup-card {
  animation: cardEntry 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards, candleGlow 4s infinite alternate ease-in-out;
}

@keyframes floatGlow {
  0% { box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(200, 180, 140, 0.1) inset; transform: translateY(0px); }
  100% { box-shadow: 0 40px 80px rgba(180, 140, 80, 0.2), 0 0 0 1px rgba(220, 200, 160, 0.2) inset; transform: translateY(-6px); }
}

@keyframes candleGlow {
  0% {
    box-shadow: 
      0 20px 50px rgba(0,0,0,0.8),
      0 0 30px rgba(200, 160, 80, 0.15),
      0 0 70px rgba(200, 160, 80, 0.08),
      inset 0 0 30px rgba(200, 160, 80, 0.03);
  }
  50% {
    box-shadow: 
      0 20px 50px rgba(0,0,0,0.8),
      0 0 55px rgba(210, 180, 100, 0.35),
      0 0 110px rgba(200, 160, 80, 0.18),
      inset 0 0 50px rgba(210, 180, 100, 0.08);
  }
  100% {
    box-shadow: 
      0 20px 50px rgba(0,0,0,0.8),
      0 0 35px rgba(200, 160, 80, 0.20),
      0 0 80px rgba(200, 160, 80, 0.10),
      inset 0 0 35px rgba(200, 160, 80, 0.05);
  }
}

@keyframes cardEntry {
  0% { opacity: 0; transform: translateY(30px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}

/* ----- FLAGS (faint) in bg of card ----- */
.flag-decor {
  position: absolute;
  font-size: 2.8rem;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  letter-spacing: 0.5rem;
}
.flag-decor:nth-child(1) { top: 10px; left: 10px; transform: rotate(-10deg); }
.flag-decor:nth-child(2) { bottom: 10px; right: 10px; transform: rotate(12deg); }
.flag-decor:nth-child(3) { top: 50%; left: 5%; transform: rotate(25deg); }
.flag-decor:nth-child(4) { bottom: 20%; right: 5%; transform: rotate(-20deg); }

.card-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.card-header h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: 6px;
  color: #e3d6b0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 30px rgba(180, 140, 80, 0.15);
  border-bottom: 1px solid rgba(200, 180, 140, 0.25);
  display: inline-block;
  padding-bottom: 0.4rem;
  margin-bottom: 0.3rem;
}
.card-header .sub {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  color: #b8a88a;
  letter-spacing: 3px;
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 0.7;
}
.card-header .sub.reset-sub {
  font-size: 0.75rem;
}

/* ----- FORM ----- */
.auth-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.auth-form.login-form {
  gap: 1.5rem;
}

.input-group {
  position: relative;
  border-bottom: 1px solid rgba(200, 180, 140, 0.2);
  padding-bottom: 0.2rem;
  transition: border-color 0.3s;
}
.input-group:focus-within {
  border-color: #c9b382;
}

.input-group i {
  position: absolute;
  left: 0;
  bottom: 0.6rem;
  color: #b8a88a;
  font-size: 1rem;
  transition: 0.2s;
}
.input-group input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #f0ead8;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0.6rem 0.6rem 0.6rem 2rem;
  letter-spacing: 0.5px;
}
.input-group input::placeholder {
  color: #7a705a;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 0.8rem;
}
.input-group input:focus + i {
  color: #e3d6b0;
}

/* Username availability - hidden by default */
.input-hint {
  font-size: 0.65rem;
  text-align: right;
  padding-right: 0.3rem;
  margin-top: 0.1rem;
  letter-spacing: 0.3px;
  opacity: 0;
  transition: opacity 0.3s ease;
  height: 1.2rem;
}
.input-hint.visible {
  opacity: 1;
}
.input-hint .available {
  color: #6a8c6a;
}
.input-hint .unavailable {
  color: #b55a5a;
}

/* Password mismatch - hidden by default */
.password-hint {
  font-size: 0.65rem;
  color: #b55a5a;
  text-align: right;
  padding-right: 0.3rem;
  margin-top: 0.1rem;
  letter-spacing: 0.3px;
  opacity: 0;
  transition: opacity 0.3s ease;
  height: 1.2rem;
}
.password-hint.visible {
  opacity: 1;
}

/* ----- BUTTONS ----- */
.btn-primary {
  background: transparent;
  border: 1px solid #c9b382;
  color: #e3d6b0;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 4px;
  padding: 0.9rem 1.5rem;
  border-radius: 2rem 0.5rem 2rem 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-top: 0.2rem;
  background: rgba(200, 180, 140, 0.04);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.btn-primary:hover {
  background: rgba(200, 180, 140, 0.15);
  border-color: #e3d6b0;
  box-shadow: 0 0 30px rgba(200, 180, 140, 0.12);
  transform: scale(1.01);
  letter-spacing: 5px;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  letter-spacing: 4px !important;
}

.btn-secondary {
  background: transparent;
  border: 1px solid #6a5f4a;
  color: #b8a88a;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  letter-spacing: 3px;
  padding: 0.7rem 1.2rem;
  border-radius: 1.5rem 0.3rem 1.5rem 0.3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-size: 0.75rem;
  background: rgba(0,0,0,0.15);
}
.btn-secondary:hover {
  background: rgba(200, 180, 140, 0.08);
  border-color: #b8a88a;
  color: #d4c09a;
}

/* ----- LINKS ----- */
.forgot-link {
  text-align: right;
  font-size: 0.75rem;
  margin-top: -0.5rem;
}
.forgot-link a {
  color: #a08d6e;
  text-decoration: none;
  border-bottom: 1px dotted rgba(160, 141, 110, 0.3);
  transition: 0.2s;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
}
.forgot-link a:hover {
  color: #d4c09a;
  border-bottom-color: #d4c09a;
}

.switch-prompt {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #7a705a;
}
.switch-prompt a {
  color: #c9b382;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted #c9b382;
  transition: 0.2s;
  margin-left: 6px;
}
.switch-prompt a:hover {
  color: #e3d6b0;
  border-bottom-color: #e3d6b0;
}

/* ----- STATUS MESSAGES ----- */
#loginMessage, #formMessage {
  display: none;
  margin-top: 0.4rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  text-align: center;
}
#loginMessage.error, #formMessage.error {
  background: rgba(181, 90, 90, 0.12);
  border: 1px solid rgba(181, 90, 90, 0.4);
  color: #e0a3a3;
}
#loginMessage.success, #formMessage.success {
  background: rgba(106, 140, 106, 0.12);
  border: 1px solid rgba(106, 140, 106, 0.4);
  color: #a9d0a9;
}

/* ----- UPLOAD & FLAG PREVIEW ----- */
.upload-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
  border: 1px dashed rgba(200, 180, 140, 0.25);
  border-radius: 1rem 0.3rem 1rem 0.3rem;
  padding: 0.7rem 1rem;
  background: rgba(0,0,0,0.15);
  transition: border-color 0.3s;
  cursor: pointer;
}
.upload-area:hover {
  border-color: #c9b382;
}
.upload-area i {
  color: #b8a88a;
  font-size: 1.3rem;
}
.upload-area span {
  color: #b8a88a;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}
.upload-area input[type="file"] {
  display: none;
}
.upload-area .file-name {
  color: #d4c09a;
  font-size: 0.75rem;
  margin-left: auto;
  opacity: 0.6;
}

.crop-hint {
  font-size: 0.65rem;
  color: #7a705a;
  text-align: right;
  letter-spacing: 0.3px;
  margin-top: 0.2rem;
  opacity: 0.6;
}
.crop-hint i {
  margin-right: 4px;
}

.flag-preview-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.3rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(200, 180, 140, 0.1);
  min-height: 80px;
}
.flag-preview-box {
  width: 90px;
  height: 60px;
  border: 2px solid rgba(200, 180, 140, 0.3);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.flag-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flag-preview-box .placeholder {
  color: #7a705a;
  font-size: 0.6rem;
  letter-spacing: 1px;
  text-align: center;
}
.flag-preview-info {
  flex: 1;
  color: #b8a88a;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}
.flag-preview-info .filename {
  color: #d4c09a;
  font-weight: 600;
}
.flag-preview-info .dimensions {
  color: #7a705a;
  font-size: 0.6rem;
  margin-top: 2px;
}

/* ----- COUNTRY SELECTION & MAP ----- */
.country-section-heading {
  color: #d4c09a;
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0.3rem 0 0.5rem 0;
  border-bottom: 1px solid rgba(200, 180, 140, 0.15);
  padding-bottom: 0.3rem;
  font-weight: 600;
}
.country-section-heading i {
  margin-right: 8px;
  color: #c9b382;
}

.map-placeholder {
  width: 100%;
  height: 150px;
  border: 2px dashed rgba(200, 180, 140, 0.2);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
}
.map-placeholder:hover {
  border-color: rgba(200, 180, 140, 0.4);
  background: rgba(0,0,0,0.3);
}
.map-placeholder i {
  font-size: 2.5rem;
  color: #7a705a;
  opacity: 0.5;
}
.map-placeholder span {
  color: #7a705a;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.map-placeholder .click-hint {
  color: #5a5040;
  font-size: 0.55rem;
  letter-spacing: 1px;
}

/* Map container styles */
#mapContainer svg {
  width: 100%;
  height: auto;
  display: block;
}

#mapContainer .country {
  cursor: pointer;
  transition: all 0.2s ease;
}

#mapContainer .country:hover {
  opacity: 0.7;
  filter: brightness(1.2);
}

#mapContainer .country.selected {
  stroke: #c9b382;
  stroke-width: 4;
  filter: brightness(1.1);
}

#mapContainer .country-occupied {
  stroke: #6a8c6a;
  stroke-width: 3;
}

#mapContainer .country-unavailable {
  opacity: 0.3;
  cursor: not-allowed;
}

#mapContainer .country-taken {
  fill: #b5251f;
  opacity: 0.9;
  cursor: not-allowed;
  pointer-events: none;
}

.map-selection-info {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(0,0,0,0.2);
  border-radius: 0.3rem;
  font-size: 0.7rem;
  color: #b8a88a;
  text-align: center;
  letter-spacing: 0.5px;
}

.map-selection-info .selected-country {
  color: #e3d6b0;
  font-weight: 600;
}

/* ----- CROPPER OVERLAY ----- */
.cropper-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(4px);
}
.cropper-overlay.active {
  display: flex;
}
.cropper-container {
  background: #1a1e28;
  border-radius: 1.5rem;
  padding: 1.5rem;
  max-width: 700px;
  width: 100%;
  border: 1px solid rgba(200, 180, 140, 0.2);
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
}
.cropper-container .cropper-box {
  max-height: 450px;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #0b0e14;
}
.cropper-container #imageToCrop {
  max-width: 100%;
  display: block;
}
.cropper-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.2rem;
  justify-content: flex-end;
}
.cropper-actions .btn-crop {
  background: #c9b382;
  border: none;
  color: #0b0e14;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  padding: 0.6rem 1.8rem;
  border-radius: 2rem 0.5rem 2rem 0.5rem;
  cursor: pointer;
  letter-spacing: 2px;
  transition: 0.2s;
}
.cropper-actions .btn-crop:hover {
  background: #e3d6b0;
  transform: scale(1.02);
}
.cropper-actions .btn-cancel-crop {
  background: transparent;
  border: 1px solid #6a5f4a;
  color: #b8a88a;
  font-family: 'Cinzel', serif;
  padding: 0.6rem 1.8rem;
  border-radius: 2rem 0.5rem 2rem 0.5rem;
  cursor: pointer;
  letter-spacing: 2px;
  transition: 0.2s;
}
.cropper-actions .btn-cancel-crop:hover {
  border-color: #b8a88a;
  color: #e3d6b0;
}
.cropper-ratio-badge {
  color: #7a705a;
  font-size: 0.7rem;
  letter-spacing: 2px;
  margin-right: auto;
  align-self: center;
}

/* ----- ACTION ROW (buttons side by side) ----- */
.action-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
.action-row .btn-primary {
  flex: 2;
}
.action-row .btn-secondary {
  flex: 1;
}

/* ----- EMPIRE SIGIL (corner decoration) ----- */
.empire-sigil {
  position: absolute;
  bottom: 1.2rem;
  right: 1.5rem;
  font-size: 1.2rem;
  color: rgba(200, 180, 140, 0.12);
  letter-spacing: 0.2rem;
  z-index: 0;
}

/* ----- AUTH GATE (confirmation/reset status) ----- */
.auth-gate {
  text-align: center;
  padding: 1rem 0;
  color: #b8a88a;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.auth-gate a {
  color: #c9b382;
  text-decoration: none;
  border-bottom: 1px dotted #c9b382;
}
.auth-gate a:hover {
  color: #e3d6b0;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 550px) {
  .auth-card { 
    padding: 1.8rem 1.2rem; 
    max-width: 100%;
  }
  .card-header h1 { 
    font-size: 2rem; 
  }
  .action-row { 
    flex-direction: column; 
  }
  .cropper-container { 
    padding: 1rem; 
  }
}