/* ═══════════════════════════════════════════════
   ELEMENTE-GEBURTSTAG v2 — Enhanced Stylesheet
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Fredoka+One&display=swap');

:root {
  --fire:    #ff4e1a;
  --fire2:   #ff9500;
  --fire3:   #ffe066;
  --water:   #00aaff;
  --water2:  #00e5cc;
  --water3:  #b3f0ff;
  --air:     #a78bfa;
  --air2:    #e0c3fc;
  --air3:    #f0e6ff;
  --earth:   #4ade80;
  --earth2:  #a3e635;
  --earth3:  #d9f99d;
  --dark:    #0f0520;
  --dark2:   #1a0a2e;
  --glass:   rgba(255,255,255,0.08);
  --radius:  1.4rem;
  --shadow:  0 8px 40px rgba(0,0,0,0.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', 'Fredoka One', cursive, sans-serif;
  background: var(--dark);
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ── Animated starfield background ──────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(255,78,26,.3) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 10%, rgba(0,170,255,.28) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 85%, rgba(74,222,128,.22) 0%, transparent 45%),
    radial-gradient(ellipse at 5%  75%, rgba(167,139,250,.25) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(255,149,0,.1) 0%, transparent 60%),
    var(--dark);
  animation: bgBreath 8s ease-in-out infinite alternate;
}
@keyframes bgBreath {
  0%   { filter: hue-rotate(0deg)   saturate(1)   brightness(1);   }
  50%  { filter: hue-rotate(10deg)  saturate(1.15) brightness(1.05); }
  100% { filter: hue-rotate(-10deg) saturate(1.2)  brightness(1.1); }
}

/* Stars */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background-image:
    radial-gradient(1px 1px at 10%  8%,  rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 30%  15%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 55%  5%,  rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 75%  20%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90%  8%,  rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 20%  40%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 45%  35%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 65%  50%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 80%  45%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 5%   60%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 35%  70%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 60%  75%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 92%  65%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 15%  90%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 50%  92%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 82%  88%, rgba(255,255,255,.6) 0%, transparent 100%);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: .7; }
  50%  { opacity: 1; }
  100% { opacity: .5; }
}

/* ── Canvas layer (fire/water/air/earth animations) ── */
#elementCanvas {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; width: 100%; height: 100%;
}

/* ── Floating particles ───────────────────────────── */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particle {
  position: absolute;
  border-radius: 50%;
  opacity: .7;
  animation: floatUp linear infinite;
}
.particle.fire  {
  background: radial-gradient(circle, #fff6, var(--fire3), var(--fire2), var(--fire));
  box-shadow: 0 0 12px var(--fire2), 0 0 24px var(--fire);
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
}
.particle.water {
  background: radial-gradient(circle, #fff5, var(--water3), var(--water2), var(--water));
  box-shadow: 0 0 8px var(--water2);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.particle.air {
  background: radial-gradient(circle, #fff8, var(--air3), var(--air2), var(--air));
  box-shadow: 0 0 8px var(--air2);
}
.particle.earth {
  background: radial-gradient(circle, #fff5, var(--earth3), var(--earth2), var(--earth));
  box-shadow: 0 0 8px var(--earth2);
  border-radius: 40% 60% 55% 45%;
}
@keyframes floatUp {
  0%   { transform: translateY(110vh) rotate(0deg)   scale(.4); opacity: 0; }
  8%   { opacity: .8; }
  90%  { opacity: .5; }
  100% { transform: translateY(-15vh)  rotate(900deg) scale(1.4); opacity: 0; }
}

/* ── Element symbol decorations (SVG + emoji) ─────── */
.el-deco {
  position: fixed; pointer-events: none; z-index: 0;
  font-size: 3rem; opacity: .08;
  animation: eldeco 12s ease-in-out infinite;
  user-select: none;
}
.el-deco:nth-child(1) { top: 5%;  left: 3%;  animation-delay: 0s; }
.el-deco:nth-child(2) { top: 10%; right: 4%; animation-delay: 2s; }
.el-deco:nth-child(3) { top: 45%; left: 2%;  animation-delay: 4s; font-size:2rem; }
.el-deco:nth-child(4) { top: 55%; right: 3%; animation-delay: 1s; font-size:2.5rem; }
.el-deco:nth-child(5) { top: 80%; left: 5%;  animation-delay: 3s; font-size:2rem; }
.el-deco:nth-child(6) { top: 85%; right: 5%; animation-delay: 5s; }
@keyframes eldeco {
  0%,100% { transform: translateY(0) rotate(-8deg) scale(1);   opacity: .06; }
  50%     { transform: translateY(-20px) rotate(8deg) scale(1.1); opacity: .14; }
}

/* ── Element rune SVG watermarks ─────────────────── */
.rune-bg {
  position: fixed; pointer-events: none; z-index: 0;
  opacity: .04; width: 220px; height: 220px;
  animation: runeSpin 20s linear infinite;
}
.rune-bg.fire  { top: -40px;  left: -40px;  fill: var(--fire2);  animation-direction: normal; }
.rune-bg.water { top: -40px;  right: -40px; fill: var(--water);  animation-direction: reverse; }
.rune-bg.earth { bottom:-40px;left: -40px;  fill: var(--earth);  animation-direction: reverse; }
.rune-bg.air   { bottom:-40px;right: -40px; fill: var(--air);    animation-direction: normal; }
@keyframes runeSpin { to { transform: rotate(360deg); } }

/* ── Nav ─────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.4rem;
  background: rgba(15,5,32,.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.nav-brand {
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem; font-weight: 400;
  background: linear-gradient(90deg, var(--fire2), var(--water), var(--air2), var(--earth2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-decoration: none;
  filter: drop-shadow(0 0 8px rgba(255,149,0,.4));
}
.nav-links { display: flex; gap: .6rem; align-items: center; }
.nav-links a, .nav-links button {
  padding: .4rem .9rem; border-radius: 2rem;
  font-size: .9rem; font-weight: 800; text-decoration: none;
  cursor: pointer; border: none; transition: all .25s; font-family: inherit;
}
.btn-nav-party  { background: linear-gradient(135deg,var(--fire),var(--fire2)); color:#fff; box-shadow:0 3px 12px rgba(255,78,26,.4); }
.btn-nav-gifts  { background: linear-gradient(135deg,var(--water),var(--water2)); color:#fff; box-shadow:0 3px 12px rgba(0,170,255,.4); }
.btn-nav-logout { background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.15) !important; }
.nav-links a:hover, .nav-links button:hover { transform: scale(1.09) translateY(-2px); filter: brightness(1.15); }

/* ── Element banner strip ────────────────────────── */
.element-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 0;
}
.el-banner-item {
  padding: .6rem;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  position: relative; overflow: hidden;
}
.el-banner-item.fire  { background: linear-gradient(180deg,rgba(255,78,26,.3),transparent); }
.el-banner-item.water { background: linear-gradient(180deg,rgba(0,170,255,.3),transparent); }
.el-banner-item.air   { background: linear-gradient(180deg,rgba(167,139,250,.3),transparent); }
.el-banner-item.earth { background: linear-gradient(180deg,rgba(74,222,128,.3),transparent); }
.el-banner-item .big  { font-size: 1.8rem; animation: elBounce 2.5s ease-in-out infinite; }
.el-banner-item:nth-child(2) .big { animation-delay: .3s; }
.el-banner-item:nth-child(3) .big { animation-delay: .6s; }
.el-banner-item:nth-child(4) .big { animation-delay: .9s; }
@keyframes elBounce {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-6px) scale(1.15); }
}

/* ── Hero ─────────────────────────────────────────── */
.hero { text-align: center; padding: 3rem 1rem 1.5rem; position: relative; }
.hero-title-wrap { position: relative; display: inline-block; }
.hero h1 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  line-height: 1.05;
  background: linear-gradient(135deg, var(--fire3) 0%, var(--fire2) 20%, var(--water) 45%, var(--air2) 70%, var(--earth2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 30px rgba(255,149,0,.5));
  animation: heroGlow 3s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  0%   { filter: drop-shadow(0 0 20px rgba(255,149,0,.4)); }
  50%  { filter: drop-shadow(0 0 40px rgba(0,229,204,.5)); }
  100% { filter: drop-shadow(0 0 30px rgba(167,139,250,.5)); }
}
.hero-sub { font-size: 1.1rem; color: rgba(255,255,255,.75); max-width: 500px; margin: .6rem auto 0; }

/* ── Animated element symbols row ────────────────── */
.element-symbols {
  display: flex; justify-content: center; gap: 1.2rem;
  margin: 1.4rem 0; flex-wrap: wrap; padding: 0 1rem;
}
.el-sym {
  width: 70px; height: 70px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  position: relative;
  animation: symPulse 3s ease-in-out infinite;
  cursor: default;
}
.el-sym::before {
  content: '';
  position: absolute; inset: -3px; border-radius: 50%;
  animation: symRing 3s linear infinite;
}
.el-sym.fire  { background: radial-gradient(circle,rgba(255,78,26,.4),rgba(255,149,0,.2)); }
.el-sym.water { background: radial-gradient(circle,rgba(0,170,255,.4),rgba(0,229,204,.2)); animation-delay:.5s; }
.el-sym.air   { background: radial-gradient(circle,rgba(167,139,250,.4),rgba(224,195,252,.2)); animation-delay:1s; }
.el-sym.earth { background: radial-gradient(circle,rgba(74,222,128,.4),rgba(163,230,53,.2)); animation-delay:1.5s; }
.el-sym.fire::before  { border: 2px solid var(--fire2); box-shadow: 0 0 16px var(--fire2), inset 0 0 10px rgba(255,149,0,.2); }
.el-sym.water::before { border: 2px solid var(--water2); box-shadow: 0 0 16px var(--water2), inset 0 0 10px rgba(0,229,204,.2); }
.el-sym.air::before   { border: 2px solid var(--air2); box-shadow: 0 0 16px var(--air2), inset 0 0 10px rgba(167,139,250,.2); }
.el-sym.earth::before { border: 2px solid var(--earth2); box-shadow: 0 0 16px var(--earth2), inset 0 0 10px rgba(163,230,53,.2); }
@keyframes symPulse {
  0%,100% { transform: scale(1)   translateY(0); }
  50%     { transform: scale(1.1) translateY(-6px); }
}
@keyframes symRing {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}
.el-sym-label { font-size: .65rem; font-weight: 800; text-align: center; margin-top: .3rem; text-transform: uppercase; letter-spacing: .07em; opacity: .8; }
.el-sym-wrap  { display: flex; flex-direction: column; align-items: center; }

/* ── Wave divider ────────────────────────────────── */
.wave-divider { width: 100%; overflow: hidden; line-height: 0; margin: .5rem 0; }
.wave-divider svg { display: block; width: 100%; }

/* ── Glass card ──────────────────────────────────── */
.card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding: 1.8rem;
  transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,0,0,.5); }

/* ── Info grid ───────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  max-width: 940px; margin: 0 auto 2.5rem; padding: 0 1rem;
}
.info-card {
  border-radius: var(--radius); padding: 1.8rem 1.4rem;
  text-align: center; position: relative; overflow: hidden;
  transition: transform .35s, box-shadow .35s;
}
.info-card::after {
  content: attr(data-symbol);
  position: absolute; bottom: -10px; right: 4px;
  font-size: 5rem; opacity: .07; line-height: 1;
  pointer-events: none;
  animation: cardSymbol 6s ease-in-out infinite alternate;
}
@keyframes cardSymbol { 0%{transform:rotate(-5deg) scale(1)} 100%{transform:rotate(5deg) scale(1.05)} }
.info-card:hover { transform: scale(1.05) rotate(-.5deg); }
.info-card.fire  { background: linear-gradient(135deg,rgba(255,78,26,.28),rgba(255,149,0,.18)); border: 1.5px solid rgba(255,149,0,.45); box-shadow: 0 6px 24px rgba(255,78,26,.2); }
.info-card.water { background: linear-gradient(135deg,rgba(0,170,255,.28),rgba(0,229,204,.18)); border: 1.5px solid rgba(0,229,204,.45); box-shadow: 0 6px 24px rgba(0,170,255,.2); }
.info-card.air   { background: linear-gradient(135deg,rgba(167,139,250,.28),rgba(224,195,252,.18)); border: 1.5px solid rgba(167,139,250,.45); box-shadow: 0 6px 24px rgba(167,139,250,.2); }
.info-card.earth { background: linear-gradient(135deg,rgba(74,222,128,.28),rgba(163,230,53,.18)); border: 1.5px solid rgba(163,230,53,.45); box-shadow: 0 6px 24px rgba(74,222,128,.2); }
.ic-icon  { font-size: 2.8rem; margin-bottom: .5rem; display: block; }
.ic-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; opacity: .55; margin-bottom: .35rem; }
.ic-value { font-size: 1.05rem; font-weight: 800; line-height: 1.5; }
.ic-value a { color: var(--water3); text-decoration: underline dotted; }

/* ── Flame animation on fire card ────────────────── */
.flame-anim {
  display: inline-block;
  animation: flicker 1.5s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
@keyframes flicker {
  0%   { transform: scaleY(1)    rotate(-3deg); }
  33%  { transform: scaleY(1.12) rotate(2deg); }
  66%  { transform: scaleY(.95)  rotate(-1deg); }
  100% { transform: scaleY(1.08) rotate(3deg); }
}

/* ── Notes box ───────────────────────────────────── */
.notes-box { max-width: 660px; margin: 0 auto 2.5rem; padding: 0 1rem; }
.notes-inner {
  background: linear-gradient(135deg,rgba(167,139,250,.18),rgba(255,78,26,.1));
  border: 1.5px solid rgba(167,139,250,.35);
  border-radius: var(--radius); padding: 1.5rem 1.8rem;
  font-size: 1rem; line-height: 1.75; text-align: center;
  box-shadow: 0 4px 20px rgba(167,139,250,.15);
}
.notes-inner strong { color: var(--air2); }

/* ── Section header ──────────────────────────────── */
.section-header { text-align: center; padding: 1rem 1rem 1.6rem; }
.section-header h2 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.6rem,4vw,2.6rem); font-weight: 400;
  background: linear-gradient(90deg, var(--water), var(--air2), var(--water2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-header p { color: rgba(255,255,255,.65); margin-top: .4rem; font-size: 1rem; }

/* ── Gift grid ───────────────────────────────────── */
.gifts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.3rem; max-width: 980px; margin: 0 auto 1.5rem; padding: 0 1rem;
}
.gift-card {
  border-radius: var(--radius); padding: 1.6rem 1.3rem;
  text-align: center; cursor: pointer;
  transition: transform .3s, box-shadow .3s, opacity .3s;
  position: relative; user-select: none; overflow: hidden;
}
.gift-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  transition: opacity .3s;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 70%);
}
.gift-card:not(.taken):not(.mine):hover::before { opacity: 1; }
.gift-card.fire  { background: linear-gradient(145deg,rgba(255,78,26,.32),rgba(255,149,0,.2)); border: 2px solid rgba(255,149,0,.5); }
.gift-card.water { background: linear-gradient(145deg,rgba(0,170,255,.32),rgba(0,229,204,.2)); border: 2px solid rgba(0,229,204,.5); }
.gift-card.air   { background: linear-gradient(145deg,rgba(167,139,250,.32),rgba(224,195,252,.2)); border: 2px solid rgba(167,139,250,.5); }
.gift-card.earth { background: linear-gradient(145deg,rgba(74,222,128,.32),rgba(163,230,53,.2)); border: 2px solid rgba(163,230,53,.5); }
.gift-card:not(.taken):not(.mine):hover { transform: scale(1.07) rotate(.4deg); box-shadow: 0 14px 36px rgba(0,0,0,.45); }
.gift-card.taken:not(.mine) { opacity: .38; cursor: not-allowed; filter: grayscale(.7) blur(.4px); }
.gift-card.mine  { box-shadow: 0 0 0 3px #fff, 0 0 24px var(--water2), 0 8px 32px rgba(0,229,204,.3); transform: scale(1.05); }

/* Shimmer on available cards */
.gift-card.available {
  animation: shimmerBorder 3s ease-in-out infinite;
}
@keyframes shimmerBorder {
  0%,100% { box-shadow: 0 0 0 0px transparent; }
  50%     { box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 6px 24px rgba(255,255,255,.07); }
}

.gift-emoji { font-size: 3rem; display: block; margin-bottom: .6rem; animation: giftBounce 2.5s ease-in-out infinite; }
@keyframes giftBounce { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-7px) rotate(4deg)} }
.gift-name  { font-size: 1rem; font-weight: 900; margin-bottom: .4rem; }
.gift-desc  { font-size: .82rem; opacity: .72; line-height: 1.5; margin-bottom: .8rem; }
.gift-badge {
  display: inline-block; padding: .25rem .7rem; border-radius: 2rem;
  font-size: .75rem; font-weight: 800;
}
.gift-badge.available { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.gift-badge.taken-by  { background: rgba(255,78,26,.3); color: #ffb07a; }
.gift-badge.my-choice { background: rgba(0,229,204,.3); color: var(--water2); }

/* ── Taken overlay icon ───────────────────────────── */
.taken-lock {
  position: absolute; top: 8px; right: 10px;
  font-size: 1.3rem; opacity: .7;
  animation: lockWobble 2s ease-in-out infinite;
}
@keyframes lockWobble { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }

/* ── Own gift option ─────────────────────────────── */
.own-gift-box { max-width: 620px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.own-gift-box .card {
  border-color: rgba(163,230,53,.35);
  background: linear-gradient(135deg,rgba(74,222,128,.12),rgba(167,139,250,.1));
  box-shadow: 0 4px 20px rgba(74,222,128,.15);
}
.own-gift-box h3 { font-size: 1.2rem; font-weight: 900; margin-bottom: .5rem; }
.own-gift-box p  { font-size: .9rem; opacity: .75; line-height: 1.6; }

/* ── Element label chips ─────────────────────────── */
.el-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .65rem; border-radius: 2rem;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.el-chip.fire  { background: rgba(255,78,26,.25); color: var(--fire2); }
.el-chip.water { background: rgba(0,170,255,.25); color: var(--water2); }
.el-chip.air   { background: rgba(167,139,250,.25); color: var(--air2); }
.el-chip.earth { background: rgba(74,222,128,.25); color: var(--earth2); }

/* ── Login page ──────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 2rem 1rem;
}
.login-box {
  width: min(440px, 100%);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 2rem; backdrop-filter: blur(20px);
  box-shadow: 0 16px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
  padding: 2.8rem 2.2rem; text-align: center;
}
.login-logo { font-size: 4rem; display: block; margin-bottom: .6rem; animation: logoSpin 6s ease-in-out infinite; }
@keyframes logoSpin {
  0%,100% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 10px rgba(255,149,0,.5)); }
  25%     { transform: scale(1.08) rotate(0deg); filter: drop-shadow(0 0 20px rgba(0,229,204,.6)); }
  50%     { transform: scale(1.05) rotate(3deg); filter: drop-shadow(0 0 15px rgba(167,139,250,.6)); }
  75%     { transform: scale(1.1) rotate(0deg); filter: drop-shadow(0 0 20px rgba(74,222,128,.6)); }
}
.login-box h1 { font-family:'Fredoka One',cursive; font-size: 2rem; margin-bottom: .3rem; }
.login-box .subtitle { font-size: .95rem; opacity: .7; margin-bottom: 2rem; line-height: 1.5; }

/* Four-element login badge row */
.login-elements {
  display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.8rem;
}
.login-el {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  animation: loginElPulse 2.5s ease-in-out infinite;
}
.login-el:nth-child(2) { animation-delay: .4s; }
.login-el:nth-child(3) { animation-delay: .8s; }
.login-el:nth-child(4) { animation-delay:1.2s; }
.login-el.fire  { background:rgba(255,78,26,.25); border:1.5px solid rgba(255,149,0,.5); }
.login-el.water { background:rgba(0,170,255,.25); border:1.5px solid rgba(0,229,204,.5); }
.login-el.air   { background:rgba(167,139,250,.25); border:1.5px solid rgba(167,139,250,.5); }
.login-el.earth { background:rgba(74,222,128,.25); border:1.5px solid rgba(163,230,53,.5); }
@keyframes loginElPulse {
  0%,100% { transform:scale(1);   box-shadow:none; }
  50%     { transform:scale(1.15); box-shadow:0 0 12px currentColor; }
}

.form-group { margin-bottom: 1.1rem; text-align: left; }
.form-group label { display: block; font-size: .85rem; font-weight: 800; margin-bottom: .4rem; opacity: .8; }
.form-group input {
  width: 100%; padding: .8rem 1.1rem; border-radius: 1rem;
  border: 2px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08); color: #fff;
  font-size: 1rem; font-family: inherit; outline: none; transition: all .25s;
}
.form-group input:focus { border-color: var(--water2); background: rgba(0,229,204,.1); box-shadow: 0 0 0 4px rgba(0,229,204,.1); }
.form-group input::placeholder { opacity: .35; }

.btn-login {
  width: 100%; padding: .95rem; border: none; border-radius: 1.3rem;
  background: linear-gradient(135deg, var(--fire), var(--fire2), var(--water2), var(--air));
  background-size: 300% 300%;
  color: #fff; font-size: 1.15rem; font-weight: 900; font-family: inherit;
  cursor: pointer; letter-spacing: .02em;
  animation: gradShift 4s ease infinite;
  transition: transform .25s, box-shadow .25s; margin-top: .6rem;
  box-shadow: 0 6px 24px rgba(255,78,26,.35);
}
.btn-login:hover { transform: scale(1.04) translateY(-1px); box-shadow: 0 10px 32px rgba(255,78,26,.55); }
@keyframes gradShift {
  0%  { background-position: 0%   50%; }
  50% { background-position: 100% 50%; }
  100%{ background-position: 0%   50%; }
}

.login-error {
  background: rgba(255,78,26,.2); border: 1.5px solid rgba(255,78,26,.5);
  border-radius: .9rem; padding: .75rem 1rem; font-size: .9rem;
  margin-bottom: 1rem; color: #ffb07a;
  animation: shake .4s ease;
}
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 60%{transform:translateX(8px)} 80%{transform:translateX(-4px)}
}

/* ── Alert flash ─────────────────────────────────── */
.flash {
  max-width: 660px; margin: 1rem auto; padding: .85rem 1.3rem;
  border-radius: 1rem; font-size: .95rem; text-align: center;
}
.flash.success { background:rgba(74,222,128,.18); border:1.5px solid var(--earth); color:var(--earth2); }
.flash.error   { background:rgba(255,78,26,.18);  border:1.5px solid var(--fire);  color:#ffb07a; }

/* ── Confirm overlay ─────────────────────────────── */
.confirm-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px); z-index:200;
  align-items:center; justify-content:center;
}
.confirm-overlay.active { display:flex; }
.confirm-box {
  background:rgba(15,5,32,.97); border:1.5px solid rgba(255,255,255,.18);
  border-radius:1.8rem; padding:2.2rem 2rem; max-width:400px; width:92%;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.7);
  animation:popIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from{transform:scale(.7) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.confirm-box h3  { font-size:1.35rem; font-weight:900; margin-bottom:.5rem; }
.confirm-box p   { font-size:.9rem; opacity:.75; margin-bottom:1.5rem; line-height:1.6; }
.confirm-box .emoji-big { font-size:3.5rem; display:block; margin-bottom:.7rem; animation:giftBounce 1.5s ease-in-out infinite; }
.confirm-btns { display:flex; gap:.8rem; justify-content:center; }
.btn-yes {
  padding:.7rem 1.5rem; border-radius:1rem; border:none; cursor:pointer;
  font-size:.95rem; font-weight:900; font-family:inherit;
  background:linear-gradient(135deg,var(--water),var(--water2)); color:#fff;
  transition:transform .2s; box-shadow:0 4px 14px rgba(0,170,255,.4);
}
.btn-yes:hover { transform:scale(1.07); }
.btn-no {
  padding:.7rem 1.5rem; border-radius:1rem;
  border:2px solid rgba(255,255,255,.18); background:transparent;
  color:rgba(255,255,255,.65); cursor:pointer;
  font-size:.95rem; font-weight:700; font-family:inherit; transition:transform .2s;
}
.btn-no:hover { transform:scale(1.04); }

/* ── CTA button ──────────────────────────────────── */
.btn-cta {
  display:inline-block; padding:.95rem 2.4rem; font-size:1.15rem; font-weight:900;
  font-family:inherit; border-radius:2rem; text-decoration:none; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--water),var(--water2));
  color:#fff; box-shadow:0 8px 28px rgba(0,170,255,.4);
  transition:transform .25s, box-shadow .25s; letter-spacing:.02em;
}
.btn-cta:hover { transform:scale(1.06) translateY(-2px); box-shadow:0 14px 36px rgba(0,170,255,.55); }

/* ── Responsive ──────────────────────────────────── */
@media(max-width:600px) {
  .info-grid  { grid-template-columns: 1fr 1fr; }
  .gifts-grid { grid-template-columns: 1fr 1fr; }
  nav         { flex-wrap:wrap; gap:.4rem; }
  .element-symbols { gap:.6rem; }
  .el-sym { width:56px; height:56px; font-size:1.6rem; }
}
@media(max-width:380px) {
  .info-grid, .gifts-grid { grid-template-columns:1fr; }
  .element-banner { grid-template-columns:repeat(2,1fr); }
}