/* ============================================ */
/* VARIABLES & BASE RESET */
/* ============================================ */
:root {
  --bg-primary: #3b8fff;
  --card-purple: #4636cb;
  --card-purple-dark: #120a56;
  --card-red: #e11d48;
  --card-red-dark: #9f1239;
  --button-yellow: #FFEB3B;
  --button-gray: #95A5A6;
  --text-white: #FFFFFF;
  --text-dark: #2C3E50;
  --shadow-outline: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Arial Black', Arial, sans-serif;
  background: var(--bg-primary);
  min-height: 100vh;
  color: var(--text-white);
  line-height: 1.5;
}
#app { min-height: 100vh; padding: 20px; }

/* ============================================ */
/* TYPOGRAPHY */
/* ============================================ */
h1, h2, p, .section-title {
  color: var(--text-white) !important;
  text-shadow: var(--shadow-outline) !important;
  text-align: center;
}
.form-title { font-size: 28px; margin-bottom: 20px; }
.hero-text h1 { font-size: 32px; margin-bottom: 8px; }
.hero-text p { font-size: 20px; margin-bottom: 24px; }
.section-title { font-size: 26px; text-transform: uppercase; margin-bottom: 24px; }

/* ============================================ */
/* LAYOUT & VIEWS */
/* ============================================ */
.view {
  display: none;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
  animation: pageEnter 0.4s ease-out forwards;
}
.view.active { display: block; }
.center-container { display: flex; justify-content: center; margin-top: 20px; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* COMPONENTS */
/* ============================================ */
.logo-container { display: flex; justify-content: center; margin-bottom: 24px; }
.logo { width: 250px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); }

.activity-feed {
  display: flex; justify-content: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap;
}
.activity-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: rgba(255, 255, 255, 0.95); border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.activity-card img { width: 40px; height: 40px; border-radius: 4px; object-fit: contain; }
.activity-card .username { font-weight: 900; color: var(--text-dark); font-size: 14px; }
.activity-card .timestamp { color: #7F8C8D; font-size: 12px; font-weight: bold; }

.brainrot-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 800px; margin: 0 auto;
}
@media (min-width: 640px) { .brainrot-grid { grid-template-columns: repeat(4, 1fr); } }

.brainrot-card {
  position: relative; border-radius: 8px; overflow: hidden; cursor: pointer;
  transition: transform 0.2s; aspect-ratio: 1 / 1.15; border: 2px solid #fff;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
.brainrot-card:hover { transform: scale(1.05); }
.brainrot-card.red { background-color: var(--card-red); }
.brainrot-card.purple { background-color: var(--card-purple); }
.brainrot-card img { width: 100%; height: 75%; object-fit: contain; padding: 10px; }
.card-footer {
  position: absolute; bottom: 0; width: 100%; padding: 8px; text-align: center;
  font-weight: 900; font-size: 14px; color: #fff; text-shadow: 1px 1px 0 #000;
}
.brainrot-card.red .card-footer { background-color: var(--card-red-dark); }
.brainrot-card.purple .card-footer { background-color: var(--card-purple-dark); }

.brainrot-card.small { width: 150px; height: 150px; margin: 0 auto; aspect-ratio: auto; cursor: default; }
.brainrot-card.small:hover { transform: none; }
.brainrot-card.small img { height: 100%; padding: 0; object-fit: cover; }

.input-field {
  width: 100%; max-width: 320px; display: block; margin: 0 auto 16px;
  padding: 16px; border: 2px solid #BDC3C7; border-radius: 6px;
  font-family: inherit; font-size: 16px; font-weight: bold; text-align: center;
  outline: none; transition: border-color 0.2s;
}
.input-field:focus { border-color: var(--card-purple); }

.btn-primary, .btn-secondary {
  width: 100%; max-width: 320px; display: block; margin: 0 auto 16px;
  padding: 16px; border: none; border-radius: 6px; font-family: inherit;
  font-size: 18px; font-weight: 900; cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2); transition: transform 0.1s, box-shadow 0.1s;
}
.btn-primary { background-color: var(--button-yellow); color: var(--text-dark); }
.btn-secondary { background-color: var(--button-gray); color: #fff; }
.btn-primary:active, .btn-secondary:active {
  transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.confirmation-cards { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; }
.avatar-card {
  width: 150px; height: 150px; background: var(--card-purple); border-radius: 8px;
  overflow: hidden; border: 2px solid #fff; position: relative;
}
.avatar-card.red { background-color: var(--card-red); }
.avatar-card img { width: 100%; height: 100%; object-fit: cover; }
.avatar-footer {
  position: absolute; bottom: 0; width: 100%; padding: 8px; background: rgba(0,0,0,0.6);
  text-align: center; font-weight: 900; font-size: 14px; text-shadow: 1px 1px 0 #000;
}

.spinner-container { margin: 20px auto; text-align: center; }
.spinner { animation: spin 1s linear infinite; width: 40px; height: 40px; color: #fff; }
.status-message { font-size: 18px; font-weight: bold; margin-bottom: 20px; }

#verify-btn { position: relative; overflow: hidden; animation: verifyScale 2s infinite; }
#verify-btn-span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; background: rgba(255, 255, 255, 0.4);
  z-index: 0; pointer-events: none; animation: pulseGlow 2s infinite;
}
.verify-btn-text { position: relative; z-index: 2; }

/* ============================================ */
/* ANIMATIONS */
/* ============================================ */
.input-shake { animation: inputShake 0.3s ease; }
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  25%, 75% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes verifyScale { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.05); } }
@keyframes pulseGlow { 
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1); } 
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } 
}