/* ============================================
   DOMINIC LIMA SANTOS — Dragon Kingdom Site
   ============================================ */

:root {
  --fire1: #ff4500;
  --fire2: #ff6a00;
  --fire3: #ffaa00;
  --lava:  #ff2200;
  --dark:  #1a0a00;
  --dark2: #2d0f00;
  --purple:#4b0082;
  --ember: #ff8c00;
  --green: #00ff88;
  --blue:  #00cfff;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Baloo 2', cursive;
  background: #1a0a00;
  color: #fff;
  overflow-x: hidden;
}

/* ── LANG SWITCHER ── */
.lang-switcher {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 9999;
  display: flex;
  gap: .4rem;
}
.lang-btn {
  font-family: 'Fredoka One', cursive;
  font-size: .85rem;
  padding: .35rem .8rem;
  border: 2px solid rgba(255,100,0,.5);
  border-radius: 999px;
  background: rgba(26,10,0,.85);
  color: #ffaa00;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(6px);
}
.lang-btn:hover, .lang-btn.active {
  background: linear-gradient(135deg, var(--fire1), var(--fire3));
  color: #fff;
  border-color: var(--fire3);
  box-shadow: 0 0 12px rgba(255,100,0,.6);
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,10,0,.35) 0%, rgba(26,10,0,.6) 100%);
  z-index: 1;
}
.hero-particles, .hero-rain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
  text-align: center;
}
.hero-dragon-wrap {
  position: relative;
}
.hero-dragon {
  width: 280px;
  height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(255,100,0,.8)) drop-shadow(0 0 60px rgba(255,50,0,.4));
  animation: dragonFloat 3s ease-in-out infinite, wingFlap 0.6s ease-in-out infinite alternate;
}
@keyframes dragonFloat {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50%       { transform: translateY(-20px) rotate(2deg); }
}
@keyframes wingFlap {
  0%   { filter: drop-shadow(0 0 30px rgba(255,100,0,.8)) drop-shadow(0 0 60px rgba(255,50,0,.4)) scaleX(1); }
  100% { filter: drop-shadow(0 0 40px rgba(255,150,0,1)) drop-shadow(0 0 80px rgba(255,80,0,.6)) scaleX(1.04); }
}

.hero-title-box {
  background: rgba(26,10,0,.75);
  border: 3px solid rgba(255,100,0,.5);
  border-radius: 28px;
  padding: 1.5rem 2.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(255,80,0,.3), inset 0 0 30px rgba(255,50,0,.1);
  max-width: 600px;
}
.hero-name {
  font-family: 'Bangers', cursive;
  font-size: clamp(3.5rem, 10vw, 7rem);
  letter-spacing: 4px;
  line-height: 1;
  margin-bottom: .2rem;
  text-shadow: 0 0 20px rgba(255,100,0,.9), 3px 3px 0 #000;
}
.name-d  { color: #ff4500; }
.name-o  { color: #ff6a00; }
.name-m  { color: #ffaa00; }
.name-i  { color: #ff4500; }
.name-n  { color: #ff6a00; }
.name-i2 { color: #ffaa00; }
.name-c  { color: #ff4500; }

.hero-surname {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: #ffcc66;
  text-shadow: 2px 2px 0 #000, 0 0 15px rgba(255,180,0,.6);
  margin-bottom: 1rem;
}
.hero-badges {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
}
.badge {
  font-family: 'Fredoka One', cursive;
  font-size: .85rem;
  padding: .3rem .9rem;
  border-radius: 999px;
  font-weight: 700;
}
.badge-fire   { background: linear-gradient(135deg,#ff4500,#ff8c00); color:#fff; box-shadow:0 3px 12px rgba(255,69,0,.5); }
.badge-dragon { background: linear-gradient(135deg,#4b0082,#8b00ff); color:#fff; box-shadow:0 3px 12px rgba(75,0,130,.5); }
.badge-lava   { background: linear-gradient(135deg,#8b0000,#ff2200); color:#fff; box-shadow:0 3px 12px rgba(139,0,0,.5); }

.hero-welcome {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  color: #ffcc66;
  margin-bottom: 1.2rem;
}
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  padding: .7rem 2rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: scale(1.08); }
.btn-fire {
  background: linear-gradient(135deg,#ff4500,#ff8c00,#ffcc00);
  color: #fff;
  box-shadow: 0 6px 24px rgba(255,100,0,.6), 0 0 0 3px rgba(255,150,0,.3);
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.btn-fire:hover { box-shadow: 0 8px 32px rgba(255,100,0,.9), 0 0 0 4px rgba(255,200,0,.5); }

/* Embers */
.embers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ember {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffcc00, #ff4500);
  animation: emberRise linear infinite;
  box-shadow: 0 0 6px #ff8c00;
}
@keyframes emberRise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 1; }
  100% { transform: translateY(-100vh) translateX(var(--dx)) scale(0); opacity: 0; }
}

/* Rain drops */
.rain-drop {
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(100,180,255,.6));
  border-radius: 2px;
  animation: rainFall linear infinite;
}
@keyframes rainFall {
  0%   { transform: translateY(-20px); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ── ABOUT ── */
.about-section {
  background: linear-gradient(180deg, #1a0a00 0%, #2d0f00 50%, #1a0a00 100%);
  padding: 4rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.about-section::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #ff4500, #ff8c00, #ffcc00, #ff8c00, #ff4500);
  animation: lavaFlow 3s linear infinite;
  background-size: 200% 100%;
}
@keyframes lavaFlow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
.about-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}
.about-dragon-img { flex: 0 0 260px; text-align: center; }
.about-dragon { width: 240px; filter: drop-shadow(0 0 20px rgba(255,100,0,.7)); }
.bounce-anim { animation: dragonFloat 3s ease-in-out infinite; }
.about-text { flex: 1; min-width: 260px; }

.section-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 2px;
  margin-bottom: 1rem;
}
.fire-text {
  background: linear-gradient(135deg, #ff4500, #ff8c00, #ffcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255,100,0,.5));
}
.about-text p {
  font-size: 1.1rem;
  color: #ffcc99;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.about-icons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.about-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  background: rgba(255,100,0,.15);
  border: 2px solid rgba(255,100,0,.3);
  border-radius: 16px;
  padding: .8rem 1rem;
  min-width: 70px;
}
.about-icon-item span { font-size: 2rem; }
.about-icon-item small { font-family: 'Fredoka One', cursive; font-size: .75rem; color: #ffcc66; }

/* ── GAME SECTION ── */
.game-section {
  background: linear-gradient(180deg, #1a0a00 0%, #0d0500 100%);
  padding: 3rem 1rem 4rem;
  position: relative;
}
.game-section-inner { max-width: 1200px; margin: 0 auto; }
.game-section-header { text-align: center; margin-bottom: 1.5rem; }
.game-section-icon { font-size: 3rem; display: block; margin-bottom: .5rem; animation: dragonFloat 2s ease-in-out infinite; }
.game-section-desc { color: #ffcc99; font-size: 1rem; font-weight: 600; margin-top: .5rem; }

/* HUD */
.game-hud {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hud-item {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  color: #ffcc00;
  background: rgba(255,100,0,.2);
  border: 2px solid rgba(255,100,0,.4);
  border-radius: 999px;
  padding: .4rem 1.2rem;
  text-shadow: 0 0 8px rgba(255,200,0,.6);
}

/* Canvas */
.game-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 0 4px #ff4500, 0 0 40px rgba(255,69,0,.6), 0 0 80px rgba(255,100,0,.3);
}
#gameCanvas {
  display: block;
  width: 100%;
  height: auto;
  background: #0d0500;
}

/* Game overlay */
.game-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,3,0,.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.game-overlay-box {
  text-align: center;
  padding: 2.5rem 3rem;
  background: rgba(26,10,0,.95);
  border: 3px solid rgba(255,100,0,.5);
  border-radius: 24px;
  box-shadow: 0 0 40px rgba(255,69,0,.4);
  max-width: 460px;
}
.game-overlay-icon { font-size: 4rem; margin-bottom: .5rem; animation: dragonFloat 2s ease-in-out infinite; }
.game-overlay-title {
  font-family: 'Bangers', cursive;
  font-size: 2.5rem;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #ff4500, #ffcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .5rem;
}
.game-overlay-sub { color: #ffcc99; font-size: 1rem; margin-bottom: 1.5rem; }
.game-start-btn {
  font-family: 'Bangers', cursive;
  font-size: 1.6rem;
  letter-spacing: 2px;
  padding: .7rem 2.5rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4500, #ff8c00, #ffcc00);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255,100,0,.6);
  transition: transform .2s, box-shadow .2s;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.game-start-btn:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(255,100,0,.9); }

/* Touch controls — iPad optimized */
.touch-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin-top: 1.4rem;
  padding: .5rem;
}
.touch-row {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: center;
}
.touch-spacer { width: 76px; height: 76px; }
.touch-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 1.6rem;
  width: 76px; height: 76px;
  border: 3px solid rgba(255,100,0,.5);
  border-radius: 18px;
  background: rgba(255,100,0,.2);
  color: #ffcc00;
  cursor: pointer;
  transition: all .12s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.touch-big {
  width: 76px; height: 76px;
  font-size: 1.6rem;
}
.touch-fire {
  width: 90px; height: 90px;
  font-size: 2.2rem;
  background: linear-gradient(135deg, rgba(255,69,0,.5), rgba(255,200,0,.3));
  border: 3px solid #ff8c00;
  box-shadow: 0 0 20px rgba(255,100,0,.5);
  border-radius: 50%;
}
.touch-btn:active, .touch-btn.pressed {
  background: rgba(255,100,0,.65);
  transform: scale(.88);
  box-shadow: 0 0 20px rgba(255,100,0,.9);
}
.touch-fire:active, .touch-fire.pressed {
  background: linear-gradient(135deg, rgba(255,100,0,.9), rgba(255,220,0,.7));
  transform: scale(.88);
  box-shadow: 0 0 30px rgba(255,150,0,1);
}
.touch-hint {
  font-family: 'Fredoka One', cursive;
  font-size: .9rem;
  color: rgba(255,180,80,.7);
  margin-top: .3rem;
  text-align: center;
}

/* ── FOOTER ── */
.footer {
  position: relative;
  background: linear-gradient(180deg, #0d0500 0%, #1a0a00 100%);
  padding: 4rem 1rem 2rem;
  overflow: hidden;
  text-align: center;
}
.footer-lava {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, #ff4500, #ff8c00, #ffcc00, #ff8c00, #ff4500);
  background-size: 200% 100%;
  animation: lavaFlow 2s linear infinite;
  box-shadow: 0 0 20px rgba(255,100,0,.8);
}
.footer-embers { position: absolute; inset: 0; pointer-events: none; }
.footer-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.footer-hearts { font-size: 1.4rem; margin-bottom: 1.5rem; letter-spacing: .3rem; }
.footer-msg-box {
  background: rgba(255,100,0,.1);
  border: 3px solid rgba(255,100,0,.4);
  border-radius: 24px;
  padding: 2rem 2.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 40px rgba(255,69,0,.2);
}
.footer-icon { font-size: 3.5rem; margin-bottom: .5rem; }
.footer-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: 2px;
  background: linear-gradient(135deg, #ff4500, #ff8c00, #ffcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .8rem;
}
.footer-text { color: #ffcc99; font-size: 1rem; line-height: 1.7; }
.footer-stars { font-size: 1.3rem; letter-spacing: .5rem; margin-bottom: 1rem; }
.footer-copy { color: rgba(255,180,100,.5); font-size: .85rem; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .hero-dragon { width: 200px; height: 200px; }
  .hero-title-box { padding: 1rem 1.5rem; }
  .about-inner { flex-direction: column; align-items: center; text-align: center; }
  .about-icons { justify-content: center; }
  .touch-btn { width: 56px; height: 56px; font-size: 1.2rem; }
}