/* ===================== GLOBAL RESET ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===================== ACCESSIBILITY: FOCUS STYLES ===================== */

button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: 2px solid #ff4081;
  outline-offset: 2px;
}

/* ===================== HELPER CLASSES ===================== */

.hidden {
  display: none !important;
}

.show-block {
  display: block !important;
}

.show-inline {
  display: inline-block !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ===================== PARTICLES BACKGROUND ===================== */
#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(circle at center, #0a0a23, #000015); 
}

/* ===================== HTML & BODY ===================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  background: radial-gradient(circle at center, #1a1a40, #0a0a23);
  color: #fff;
  line-height: 1.6;
  opacity: 0;
  transition: opacity 1.5s ease;
  overflow-x: hidden;
  
}

body.fade-in {
  opacity: 1;
}

/* ===================== HEADINGS ===================== */
h1.main-title {
  text-align: center;
  font-size: 2.8rem;
 color: #9bafff;
text-shadow: 0 0 15px rgba(127, 95, 255, 0.6);
  margin-bottom: 2rem;
}

/* ===================== SCROLL FADE-IN ===================== */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 8.5s ease-out, transform 8s ease-out;
}

.fade-in-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================== VS TOGGLE BUTTONS ===================== */
.vs-toggle-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 3rem 0;
}

.vs-toggle-buttons button {
  background: linear-gradient(135deg, #6f00ff, #8e2de2);
  color: white;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 0 10px #b94fff88;
  transition: background 0.3s, transform 0.2s;
}

.vs-toggle-buttons button:hover {
  background: linear-gradient(135deg, #8e2de2, #6f00ff);
  transform: scale(1.05);
}

/* ===================== GOJO SUKUNA EMAIL INTERACTIVE ===================== */

input[type="email"]:invalid {
  border-color: #ff0048;
  box-shadow: 0 0 8px #ff0048;
}
input[type="email"]:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 10px #00f0ff;
  outline: none;
  background-color: #111c2b;
}

input[type="email"]:valid {
  border-color: #00ff99;
  box-shadow: 0 0 8px #00ff99;
}

/* ===================== GOKU SUPERMAN EMAIL INTERACTIVE ===================== */

.goku-strongest-form-input[type="email"]:invalid {
  border-color: #ff0048;
  box-shadow: 0 0 8px #ff0048;
}
.goku-strongest-form-input[type="email"]:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 10px #00f0ff;
  outline: none;
  background-color: #111c2b;
}

.goku-strongest-form-input[type="email"]:valid {
  border-color: #00ff99;
  box-shadow: 0 0 8px #00ff99;
}

/* ===================== MATCHUP SECTION TOGGLE ===================== */
.matchup-section {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  position: absolute;
  width: 100%;
  display: none;
}

.matchup-section.visible {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  display: block;
}

/* ===================== GOJO SUKUNA HOVERS ===================== */
.gojo-container {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gojo-container:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 20px #8b5cf6,
    0 0 40px #00ffff,
    0 0 60px #ffffff;
  border: 2px solid transparent;
  border-image: linear-gradient(to right, #c084fc, #00ffff, #9333ea) 1;
  transition: all 0.3s ease-in-out;
}

.sukuna-container {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sukuna-container:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 20px #ff0055,
    0 0 40px #ff66c4,
    0 0 60px #ffffff;
  border: 2px solid transparent;
  border-image: linear-gradient(to right, #ff0055, #ff66c4, #ffffff) 1;
  transition: all 0.3s ease-in-out;
}

/* ===================== GOJO SUKUNA CARDS ===================== */
.characters-section {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  max-width: 100vw; 
  padding: 0 1rem;
}

.strongest-box,
.most-cursed-box {
  background-color: #12112b;
  border: 2px solid #3f3f66;
  border-radius: 15px;
  padding: 1.5rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 0 20px rgba(111, 227, 255, 0.3);
  text-align: center;
  flex: 1;
  z-index: 1;
  position:relative;
  overflow: hidden;

}

.strongest-box::before,
.most-cursed-box::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  pointer-events: none;
  z-index: 0;
  border-radius: 20px;
  background: radial-gradient(circle, #6fe3ff33, transparent 60%);
  animation: pulse 2s infinite ease-in-out;
}

.gojo-container .attack-name {
  color: #00bfff; 
  text-shadow: 0 0 5px rgba(0, 191, 255, 0.5);
}


.sukuna-container .attack-name {
  color: #ff3d00;
}

/* ===================== GOJO SUKUNA AUDIO BUTTON ===================== */
.play-voice {
  margin-top: 1rem;
  background: linear-gradient(to right, #ff4de7, #b94fff);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease;
}

.play-voice:hover {
  transform: scale(1.05);
  background: linear-gradient(to right, #ff66cc, #d36bff);
}

/* ===================== GOJO SUKUNA IMAGES ===================== */
.gojo2,
.sukuna2 {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin-bottom: 1rem;
  object-fit: cover;
  box-shadow: 0 0 5px rgba(111, 227, 255, 0.3);

}

/* ===================== GOJO SUKUNA LABELS ===================== */
.section-title {
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.gojo {
 color: #8B5CF6;
  font-weight: 700;
  font-size: 1.5rem;
  text-shadow: 0 0 10px #c084fc;
    
}

.sukuna {
  color: #ff0055;
  font-weight: 700;
  font-size: 1.5rem;
   text-shadow: 0 0 10px #ff5e8e;
}

.gojo-quote,
.sukuna-quote {
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #ccc;
}

.gojo-techniques,
.sukuna-techniques {
  font-weight: 600;
  margin-top: 1rem;
  font-size: 1rem;
}

.gojo-list,
.sukuna-list {
  text-align: left;
  margin-top: 0.5rem;
  font-size: 1rem;
  list-style: disc;
  margin-left: 1.2rem;
}

/* ===================== GOJO SUKUNA MENU ===================== */
.cafes-section {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin: 3rem 0;
}

.menu-card {
  background-color: #1d1c3b;
  padding: 1.5rem;
  border-radius: 15px;
  width: 325px;
  box-shadow: 0 0 15px rgba(255, 77, 231, 0.3);
  text-align: center;
}

.menu-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.menu-card h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
}

article {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
  color: #eee;
}

/* ===================== GOJO SUKUNA MENU HOVER GLOW ===================== */
#gojo-menu:hover, #sukuna-menu:hover {
  box-shadow: 0 0 25px #6fe3ff, 0 0 40px #6fe3ff66;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

#sukuna-menu:hover {
  box-shadow: 0 0 25px #ff4d92, 0 0 40px #ff4d9266;
}

/* ===================== GOJO SUKUNA VOTE FORM ===================== */
.form-section {
  display: flex;
  justify-content: center;
  margin: 3rem 0;
}

.strongest-form {
  background: radial-gradient(circle at top left, #1f0037, #000000 90%);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 0 30px 5px rgba(148, 0, 211, 0.4), 0 0 60px 10px rgba(255, 0, 128, 0.2);
  width: 100%;
  max-width: 550px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  animation: sukunaGojoAura 2.5s infinite ease-in-out alternate;
}

.strongest-form:hover {
  border-color: #dd0b0b;
  box-shadow: 0 0 35px 8px rgba(255, 0, 221, 0.5), 0 0 80px 15px rgba(255, 255, 255, 0.1);
  transform: scale(1.015);
}

.strongest-form h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #fff;
  background: linear-gradient(to right, #00eaff, #ff0077);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

fieldset {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1.2rem;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}

legend {
  padding: 0 10px;
  font-size: 0.95rem;
  color: #ccc;
}

label {
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.25rem;
  color: #eee;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.5rem;
  border: none;
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  background-color: #1a1a2e;
  color: #fff;
  transition: 0.3s ease;
}

input[type="radio"] {
  margin-right: 0.4rem;
  accent-color: #ff00c8;
  transform: scale(1.2);
}

button[type="submit"] {
  background: linear-gradient(to right, #00cfff, #ff0090);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.35s ease;
}

button[type="submit"]:hover {
  box-shadow: 0 0 20px 8px rgba(255, 0, 221, 0.6);
  transform: scale(1.05);
}

.vote-result {
  margin-top: 1rem;
  font-weight: bold;
  color: #7df9ff;
  animation: fadeIn 1s ease-in-out;
}

/* ===================== FORM ERROR MESSAGES ===================== */
.error-message {
  color: #ff4d6d;
  font-size: 0.8rem;
  margin-top: 0.2rem;
  display: block;
}


/* ===================== LIVE POLL CHART ===================== */
.poll-section {
   background-color: rgba(18, 17, 43, 0.85);
   border: 2px solid #3f3f66;
   border-radius: 20px;
   padding: 2rem;
   margin: 2rem auto;
   max-width: 600px;
   box-shadow: 0 0 20px rgba(111, 227, 255, 0.2);
   text-align: center;
   color: #fff;
   backdrop-filter: blur(8px);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.poll-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #fff;
}

#pollChart {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.poll-section:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
}

/* ===================== VOTE COUNT DISPLAY ===================== */
.vote-counts {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
}

.vote-counts .vote-box {
  padding: 1rem 2rem;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: transform 0.3s ease;
  width: 150px;
}

.vote-counts .vote-box:hover {
  transform: scale(1.05);
}

.vote-box h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.vote-box p {
  font-size: 2rem;
  font-weight: bold;
}

/* Gojo theme */
.vote-box.gojo {
  background-color: #101e36;
  border: 2px solid #7f38ff;
}

.vote-box.gojo:hover {
  box-shadow: 0 0 25px 5px rgba(103, 5, 201, 0.6);
}

.vote-box.gojo h3 {
  color: #b374ea;
}

.vote-box.sukuna {
  background-color: #3a1a1a;
  border: 2px solid #ff2a6d;
}

.vote-box.sukuna:hover {
  box-shadow: 0 0 25px 5px rgba(255, 42, 109, 0.6);
}

.vote-box.sukuna h3 {
  color: #f3366b;
}
.vote-box p {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
}

/* ========== FORM FADE OUT ========== */
.strongest-form form.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.vote-result.visible {
  display: block;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* ===================== GOJO SUKUNA QUIZ ===================== */
.trivia-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 2rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

#quiz-container {
  background-color: #1b1b3a;
  border: 2px solid #5f5fff;
  border-radius: 15px;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
  box-shadow: 0 0 20px rgba(95, 95, 255, 0.4);
  color: white;
  text-align: center;
    transition: all 0.3s ease;
}

#quiz-choices label {
  display: block;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  background: #29294d;
  border: 1px solid #5f5fff;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#quiz-choices input[type="radio"] {
  margin-right: 0.5rem;
}

#quiz-choices label:hover {
  background: #3a3a6a;
}

#next-question-btn {
  margin-top: 1rem;
  padding: 0.7rem 2rem;
  background: linear-gradient(to right, #7f5fff, #a84fff);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s ease;
}

#next-question-btn:hover {
  transform: scale(1.05);
}

#quiz-container:hover {
  transform: scale(1.03);
  box-shadow: 0 0 30px rgba(127, 95, 255, 0.6);
  border-color: #a84fff;
  transition: all 0.3s ease;
}

/* ===================== GLOWING TEXT SHADOW FOR HEADERS ===================== */
h1.main-title {
  text-shadow: 0 0 10px #ff4de7, 0 0 20px #ff4de7;
}

#gojo-menu h1 {
  color: #6fe3ff;
  text-shadow: 0 0 5px #6fe3ff88;
}

#sukuna-menu h1 {
  color: #ff4d92;
  text-shadow: 0 0 5px #ff4d9288;
}

/* ===================== GOJO SUKUNA MAGAZINE ARTICLE CONTAINER ===================== */
.magazine-container {
  background-color: #0d0d0d;
  color: #f5f5f5;
  padding: 2rem;
  margin: 4rem auto;
  max-width: 900px;
  height: 650px;
  overflow-y: auto;
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(255, 105, 180, 0.3);
  font-family: 'Outfit', sans-serif;
  scrollbar-width: thin;
  scrollbar-color: #ff66cc #1a1a1a;
  transition: box-shadow 0.3s ease-in-out;

}

/* Custom Scrollbar for WebKit */
.magazine-container::-webkit-scrollbar {
  width: 8px;
}

.magazine-container::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.magazine-container::-webkit-scrollbar-thumb {
  background-color: #ff66cc;
  border-radius: 10px;
}

/* ===================== GOJO SUKUNA MAGAZINE HEADER ===================== */
.mag-title {
  font-family: 'Anton', sans-serif;
  font-size: 2.5rem;
  color: #ff3c78;
  margin-bottom: 0.5rem;
  position: relative;
  top: 0;
  background: #0d0d0d;
  padding: 0.5rem 0;
  z-index: 1;
  text-align: center;
}

.gojo-sukuna-sub {
  text-align: center;
  font-size: 1rem;
  color: #00ffff;
  margin-bottom: 1.5rem;
}

/* ===================== GOJO SUKUNA AUTHOR + SOCIAL ICONS ===================== */
.author {
  text-align: center;
  margin-bottom: 1rem;
}

.author-name a {
  color: #ff66cc;
  text-decoration: none;
}

.publish-date {
  font-size: 0.9rem;
  color: #aaa;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.social-icons i {
  color: #ccc;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.social-icons i:hover {
  color: #ff66cc;
}

/* ===================== GOJO SUKUNA PARAGRAPHS ===================== */
.first-paragraph,
.magazine-container p {
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 1.12rem;
  
}

.first-paragraph::first-letter {
  float: left;
  font-size: 3rem;
  line-height: 1;
  padding-right: 0.2rem;
  color: #ff3c78;
  font-family: 'Georgia', serif;
}

/* ===================== GOJO SUKUNA QUOTE BLOCK ===================== */
.quote {
  position: relative;
  font-size: 1.8rem;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-weight: 800;
  color: #ff66cc;
  background: linear-gradient(to right, #00ffff, #ff66cc);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px rgba(255, 102, 204, 0.5);
  padding: 1rem;
  margin: 2rem auto;
  max-width: 600px;
  line-height: 1.6;
}

/* ===================== FANCY QUOTE ICON ===================== */
.quote::before {
  content: "“";
  font-size: 3rem;
  color: #ff66cc;
  position: absolute;
  top: -20px;
  left: -15px;
}

.quote::after {
  content: "”";
  font-size: 3rem;
  color: #ff66cc;
  position: absolute;
  bottom: -20px;
  right: -1px;
}

/* ===================== GOJO SUKUNA HISTORY ===================== */
.text-with-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
}

.brief-history {
  flex: 1 1 45%;
  background-color: #1a1a1a;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.brief-history > p {
  color: #00ffff;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.lists {
  list-style-type: none;
  padding-left: 0;
}

.lists li p {
  font-size: 0.95rem;
  color: #f5f5f5;
  margin-bottom: 1rem;
}

.list-title {
  color: #ff3c78;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.list-subtitle {
  color: #00ffff;
  margin-bottom: 0.2rem;
}

/* ===================== GOJO SUKUNA IMAGES ===================== */
.image-wrapper {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.image-wrapper img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.image-quote .quote {
  font-style: italic;
  color: #ff66cc;
  font-size: 1rem;
  font-weight: bold;
  margin: 0.5rem 0;
}

/* ===================== GOJO SUKUNA QUOTE BOX STYLE ===================== */
.highlight-box {
  background-color: #1a1a1a;
  border: 1px solid #ff33aa;
  padding: 1rem;
  margin: 2rem 0;
  border-radius: 8px;
  font-weight: 600;
  color: #ffccff;
  text-align: center;
}

/* ===================== GOJO SUKUNA FIGURE IMAGE STYLES ===================== */
.magazine-container figure {
  margin: 2rem 0;
  text-align: center;
}

.magazine-container figure img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px #ff00ff88;

}

.magazine-container figure figcaption {
  margin-top: 0.5rem;
  color: #aaa;
  font-size: 0.85rem;
  font-style: italic;
}

@media (min-width: 768px) {
  .magazine-container article {
    column-count: 2;
    column-gap: 2rem;
  }
}

/* ===================== DEBATE SECTION ===================== */

.debate-section {
  background-color: #1a1a2e;
  padding: 2rem;
  border-radius: 16px;
  margin-top: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  box-shadow:    0 0 20px rgba(127, 79, 255, 0.2),    0 0 40px rgba(0, 240, 255, 0.2);
  animation: formAura 3s ease-in-out infinite alternate;
  -webkit-animation: formAura 3s ease-in-out infinite alternate;
}

/* Section title */
.debate-section h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 0 10px #d42626;
}
#debateComments {
  max-height: 350px; /* Adjust as needed */
  overflow-y: auto;
  margin-top: 1.5rem;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: #00ffff #1a1a2e;
  border-top: 1px solid #444;
  padding-top: 1rem;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.15);
}
/* ===================== DEBATE COMMENTS SCROLL ===================== */
#debateComments::-webkit-scrollbar {
  width: 8px;
}

#debateComments::-webkit-scrollbar-track {
  background: #1a1a2e;
}

#debateComments::-webkit-scrollbar-thumb {
  background-color: #00ffff;
  border-radius: 10px;
}

/* ===================== PROFILE PIC UPLOAD ===================== */

.profile-pic-preview {
  margin-top: 10px;
}

.debate-profile-pic {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #00ffff;
 box-shadow:
      0 0 5px #00ffff,
      0 0 12px #ff3c3c,
      0 0 20px #b154f6;
  display: inline-block;
}

/* ===================== FILE INPUT ===================== */
#debateForm input[type="file"] {
  background-color: #2b2b4b;
  color: #ccc;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid #555;
  cursor: pointer;
  transition: 0.3s ease;
}

#debateForm input[type="file"]::file-selector-button {
  background: linear-gradient(90deg, #7f4fff, #b154f6);
  border: none;
  padding: 0.3rem 0.7rem;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

/* ===================== FORM STYLES ===================== */
#debateForm label {
  display: block;
  margin: 0.5rem 0;
  color: #ddd;
}

#debateForm input:not([type="file"]) {
  padding: 0.5rem;
  margin-top: 0.2rem;
  border-radius: 6px;
  font-size: 1rem;
  color: #fff;
  background-color: #1e1e2e;
  border: 2px solid #555;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#debateForm select {
  padding: 0.5rem;
  margin-top: 0.2rem;
  border-radius: 6px;
  font-size: 1rem;
  color: #fff;
  background-color: #1e1e2e;
  border: 2px solid #555;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#debateForm textarea {
  resize: none;
  min-height: 120px;
  padding: 0.5rem;
  margin-top: 0.2rem;
  border-radius: 6px;
  font-size: 1rem;
  color: #fff;
  background-color: #1e1e2e;
  border: 2px solid #555;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#debateForm button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(90deg, #7f4fff, #b154f6);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(200, 120, 255, 0.4);
  transition: background 0.3s ease, transform 0.2s ease;
}

#debateForm button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(191, 120, 255, 0.6);
}

/* ===================== COMMENT CONTAINER ===================== */
#debateComments {
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  color: #ffffff;
  margin-top: 2rem;
}

/* ===================== COMMENT BOX ===================== */
.comment-box {
  background: #2b2b4b;
  margin-bottom: 1rem;
  padding: 1rem;
  border-left: 4px solid;
  border-radius: 8px;
  line-height: 1.5;
  font-size: 0.95rem;
  color: #ffffff;
  box-shadow: none;
  transition: background 0.3s ease;
}

.comment-box:hover {
  background-color: #34345a;
}

/* ===================== GOJO & SUKUNA STYLES ===================== */
.comment-box.gojo {
  border-color: #00bfff;
}

.comment-box.sukuna {
  border-color: #ff4d6d;
}

/* ===================== TEXT STYLING ===================== */
.comment-box strong {
  font-weight: 600;
  color: #d0d0ff;
  margin-bottom: 0.4rem;
  display: block;
}

.comment-box p {
  margin: 0;
  color: #e0e0e0;
}

/* ===================== TIMESTAMP STYLING  ===================== */
.comment-box .timestamp {
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 0.4rem;
  display: block;
}

/* ===================== REMOVE GLOW EFFECTS ===================== */
#debateComments .gojo,
#debateComments .sukuna,
#debateComments strong,
#debateComments p {
  text-shadow: none !important;
}

/* ===================== GOJO SUKUNA FUN BATTLE ===================== */
.battle-section {
  text-align: center;
  margin: 3rem 0;
  padding: 2rem;
  background-color: #1a1a40;
  border-radius: 20px;
  box-shadow: 0 0 20px #6fe3ff50;
}

.battle-characters {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.fighter img {
  width: 100px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

.fighter button {
  background-color: #ff4de7;
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 1rem;
  box-shadow: 0 0 10px #ff4de780;
}

.fighter button:hover {
  background-color: #ff74f0;
}

/* ===================== HEALTH BARS ===================== */
.health-bar {
  width: 120px;
  height: 16px;
  background-color: #222;
  border: 2px solid #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
}

.health-fill {
  height: 100%;
  width: 100%;
  transition: width 0.3s ease;
}

#gojo-health {
  background-color: #00f0ff; /* cyan */
}

#sukuna-health {
  background-color: #ff0055; /* magenta */
}


.battle-result {
  font-weight: bold;
  margin-top: 1rem;
  color: #fff;
}

.flash-effect {
  animation: flash 0.3s ease;
}

.shake-effect {
  animation: shake 0.4s ease;
}

/* ===================== RESTART BUTTONS ===================== */
#gojo-sukuna-restart,
#goku-superman-restart {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background-color: #ff4de7; /* pink for Gojo-Sukuna */
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 10px #ff4de7a0;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#goku-superman-restart {
  background-color: #ffd700; /* gold for Goku-Superman */
  box-shadow: 0 0 10px #ffd700a0;
}

#gojo-sukuna-restart:hover {
  background-color: #ff74f0;
  transform: scale(1.05);
}

#goku-superman-restart:hover {
  background-color: #ff9900;
  transform: scale(1.05);
}

/* ===================== GOKU & SUPERMAN IMAGE ===================== */

.goku2,
.superman2 {
  width: 130px;
  height: 130px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  margin: 0 auto 1rem auto;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(111, 227, 255, 0.4);
  display: block;
}

/* ===================== GOKU & SUPERMAN CARD BOXES ===================== */
.kryptonian-box,
.saiyan-box {
  background-color: #12112b;
  border: 2px solid #3f3f66;
  border-radius: 15px;
  padding: 1.5rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 0 20px rgba(111, 227, 255, 0.3);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;

}

/* ===================== GOKU & SUPERMAN CARD TEXT ===================== */
.goku {
  color: #6fe3ff;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-shadow: 0 0 5px #6fe3ff88;


}
.superman {
  color: #ff3c3c;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-shadow: 0 0 5px #ff3c3c88;
}


.goku-container .attack-name {
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.4);
}


.superman-container .attack-name {
  color: #ff4500;
  text-shadow: 0 0 5px rgba(255, 69, 0, 0.4);
}

/* ===================== GOKU SUPERMAN QUOTES ===================== */

/* Quotes */
.goku-quote,
.superman-quote {
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
  color: #ccc;
}

/* Subtitles */
.goku-techniques,
.superman-techniques {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

/* Lists */
.goku-list li,
.superman-list li {
  margin-bottom: 0.3rem;
  line-height: 1.4;
  color: #fff;
  text-align: left;
}

/* ===================== GOKU & SUPERMAN BUTTONS ===================== */
#goku-superman .play-voice {
  margin-top: 1rem;
  background: linear-gradient(to right, #00bfff, #1e90ff);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease;
}

#goku-superman .play-voice:hover {
  transform: scale(1.05);
  background: linear-gradient(to right, #1e90ff, #00bfff);
}

/* ===================== GOKU & SUPERMAN BOX GLOW EFFECT ===================== */
.saiyan-box::before,
.kryptonian-box::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  pointer-events: none;
  z-index: 0;
  border-radius: 20px;
  background: radial-gradient(circle, #6fe3ff33, transparent 60%);
  animation: pulse 2s infinite ease-in-out;

}

/* ===================== GOKU & SUPERMAN HOVERS ===================== */
.goku-container,
.superman-container {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.goku-container:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px #00bfff, 0 0 50px #00bfff;
}

.superman-container:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px #ffcc00, 0 0 50px #ffcc0066;
}

/* === GOKU HOVER AURA === */
.saiyan-box:hover {
  border: 2px solid transparent;
  border-image: linear-gradient(to right, #ffffff, #00ffff, #facc15) 1;
  box-shadow:
    0 0 15px #00ffff,
    0 0 30px #ffffff,
    0 0 45px #facc15;
  transition: all 0.3s ease-in-out;
}

/* === SUPERMAN HOVER AURA === */
.kryptonian-box:hover {
  border: 2px solid transparent;
  border-image: linear-gradient(to right, #ffffff, #1e90ff, #ff3c3c) 1;
  box-shadow:
    0 0 15px #1e90ff,
    0 0 30px #ffffff,
    0 0 45px #ff3c3c;
  transition: all 0.3s ease-in-out;
}

/* === FADE-IN EFFECT FOR ANIME MATCHUP SECTIONS  === */
.visible {
  animation: fadeIn 0.4s ease-in-out;
}

/* ===================== GOKU SUPERMAN VOTE FORM ===================== */
.goku-form-section {
  display: flex;
  justify-content: center;
  margin: 3rem 0;
}

.goku-strongest-form {
  background: radial-gradient(circle at top left, #1f0037, #000000 90%);
  padding: 2rem;
  border-radius: 20px;
  box-shadow:
    0 0 10px #fff200,
    0 0 30px 5px rgba(255, 215, 0, 0.4),
    0 0 60px 10px rgba(255, 0, 0, 0.25);
  width: 100%;
  max-width: 550px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  animation: auraPulse 1.5s ease-in-out infinite;
}

.goku-strongest-form:hover {
  box-shadow:    0 0 10px #fff200, 0 0 35px 10px rgba(255, 242, 0, 0.5),    0 0 50px 15px rgba(255, 60, 60, 0.3);
  transition: all 0.4s ease-in-out;
  transform: scale(1.02);
}

.goku-strongest-form h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #ffd700, #ff0707);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.goku-strongest-form button[type="submit"] {
  background: linear-gradient(to right, #e3d807, #ff3c3c);
  box-shadow: 0 0 15px rgba(255, 60, 60, 0.4);
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.35s ease;

}

.goku-strongest-form button[type="submit"]:hover {
  box-shadow: 0 0 20px 8px rgba(243, 3, 3, 0.6);
  transform: scale(1.08);
}


#gokuFormContainer input[type="radio"] {
  margin-right: 0.4rem;
  accent-color: #ffd700;
  transform: scale(1.2);
  filter: drop-shadow(0 0 4px #ffd700);
}

#gokuFormContainer .vote-result {
  margin-top: 1rem;
  font-weight: bold;
  color: #ffd700;
  animation: fadeIn 1s ease-in-out;
}

#gokuFormContainer .hidden {
  display: none;
}

/* ===================== LIVE POLL CHART GOKU SUPERMAN ===================== */
#gokuPollChart {
  max-width: 100%;
  height: 300px !important;
  display: block;
}

/* ===================== VOTE COUNT DISPLAY GOKU SUPERMAN ===================== */
.vote-box.goku {
  background-color: #1e1f3b;
  border: 2px solid #ffa500;
}

.vote-box.goku:hover {
  box-shadow: 0 0 25px 5px rgba(255, 165, 0, 0.6);
}

.vote-box.goku h3 {
  color: #f3af30;
}

.vote-box.superman {
  background-color: #1a2a3a;
  border: 2px solid #ae1515;
}

.vote-box.superman:hover {
  box-shadow: 0 0 25px 5px rgba(226, 11, 11, 0.6);
}

.vote-box.superman h3 {
  color: #f02a2a;
}



/* ===================== GOKU SUPERMAN MENU ===================== */

.cafes-section {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin: 3rem 0;
}

#goku-menu {
  background-color: #1e1a2e;
  padding: 1.5rem;
  border-radius: 15px;
  width: 325px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); /* Yellow glow */
  text-align: center;
  transition: all 0.3s ease;
}

#goku-menu:hover {
  box-shadow: 0 0 30px #ffd700, 0 0 50px #ffd700aa;
  transform: scale(1.03);
}

#goku-menu img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

#goku-menu h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
}

#goku-menu article {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
  color: #eee;
}

/* Superman Card */
#superman-menu {
  background-color: #1a1d2e;
  padding: 1.5rem;
  border-radius: 15px;
  width: 325px;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
  text-align: center;
  transition: all 0.3s ease;
}

#superman-menu:hover {
  box-shadow: 0 0 30px #e10707, 0 0 50px #6d0202;
  transform: scale(1.03);
}

#superman-menu img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

#superman-menu h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
}

#superman-menu article {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
  color: #eee;
}



/* ===================== GOKU SUPERMAN QUIZ ===================== */
.goku-superman-trivia-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 2rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

#goku-superman-quiz-container {
  background-color: #1b1a3b;
  border: 2px solid #ffcc00;
  border-radius: 15px;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.4);
  color: white;
  text-align: center;
  transition: all 0.3s ease;
}

#goku-superman-quiz-choices label {
  display: block;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  background: #2a2a4f;
  border: 1px solid #ffcc00;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#goku-superman-quiz-choices input[type="radio"] {
  margin-right: 0.5rem;
}

#goku-superman-quiz-choices label:hover {
  background: #3a3a6a;
}

#goku-superman-next-question-btn {
  margin-top: 1rem;
  padding: 0.7rem 2rem;
  background: linear-gradient(to right, #ff9900, #ff0048);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s ease;
}

#goku-superman-next-question-btn:hover {
  transform: scale(1.05);
}

#goku-superman-quiz-container:hover {
  transform: scale(1.03);
  box-shadow: 0 0 30px rgba(255, 153, 0, 0.6);
  border-color: #ff0048;
  transition: all 0.3s ease;
}

/* ===================== GOKU SUPERMAN MAGAZINE ARTICLE CONTAINER ===================== */
.magazine-container.goku-superman {
  background-color: #0d0b00;
  color: #fffbea;
  padding: 2rem;
  margin: 4rem auto;
  max-width: 900px;
  height: 650px;
  overflow-y: auto;
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(255, 204, 0, 0.3);
  font-family: 'Outfit', sans-serif;
  scrollbar-width: thin;
  scrollbar-color: #ff0000 #1a1a1a;
  transition: box-shadow 0.3s ease-in-out;
}

.magazine-container.goku-superman::-webkit-scrollbar {
  width: 8px;
}

.magazine-container.goku-superman::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.magazine-container.goku-superman::-webkit-scrollbar-thumb {
  background-color: #ff0000;
  border-radius: 10px;
}

/* ===================== GOKU SUPERMAN HEADINGS & META ===================== */
.goku-superman-title {
  font-family: 'Anton', sans-serif;
  font-size: 2.5rem;
  color: #ffcc00;
  margin-bottom: 0.5rem;
  text-align: center;
}

.goku-superman-sub {
  text-align: center;
  font-size: 1rem;
  color: #ff6666;
  margin-bottom: 1.5rem;
}

.goku-superman-author {
  text-align: center;
  margin-bottom: 1rem;
}

.goku-superman-author-link {
  color: #ffcc00;
  text-decoration: none;
  font-weight: bold;
}

.goku-superman-publish-date {
  font-size: 0.9rem;
  color: #bbb;
}

/* ===================== GOKU SUPERMAN SOCIAL ICONS ===================== */
.goku-superman-social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.goku-superman-social-icons i {
  color: #fff;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.goku-superman-social-icons i:hover {
  color: #ffcc00;
}

/* ===================== GOKU SUPERMAN ARTICLE & FIRST PARAGRAPH ===================== */
.goku-superman-first-intro,
.magazine-container.goku-superman p {
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 1.12rem;
}

.goku-superman-first-intro::first-letter {
  float: left;
  font-size: 3rem;
  line-height: 1;
  padding-right: 0.2rem;
  color: #ff0000;
  font-family: 'Georgia', serif;
}

/* ===================== GOKU SUPERMAN QUOTE BLOCK ===================== */
.goku-superman-quote {
  position: relative;
  font-size: 1.8rem;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  font-weight: 800;
  color: #ffcc00;
  background: linear-gradient(to right, #ff0000, #ffff00);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
  padding: 1rem;
  margin: 2rem auto;
  max-width: 600px;
  line-height: 1.6;
}

/* ===================== FANCY QUOTE ICON ===================== */
.goku-superman-quote::before {
  content: "“";
  font-size: 3rem;
  color: #ffd700;
  position: absolute;
  top: -20px;
  left: -15px;
}

.goku-superman-quote::after {
  content: "”";
  font-size: 3rem;
  color: #ff0000;
  position: absolute;
  bottom: -20px;
  right: -1px;
}

/* ===================== GOKU SUPERMAN HISTORY ===================== */
.goku-superman-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
}

.goku-superman-brief-history {
  flex: 1 1 45%;
  background-color: #1a1a1a;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.goku-superman-brief-history > p {
  color: #ffcc00;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.goku-superman-lists {
  list-style-type: none;
  padding-left: 0;
}

.goku-superman-lists li p {
  font-size: 0.95rem;
  color: #f5f5f5;
  margin-bottom: 1rem;
}

.goku-superman-subtitle {
  color: #ff6666;
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* ===================== GOKU SUPERMAN IMAGES ===================== */
.goku-superman-image-wrapper {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.goku-superman-image-wrapper img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.1);
}

.goku-superman-image-quote {
  text-align: center;
  font-style: italic;
  font-weight: bold;
  color: #ff6666;
  font-size: 1rem;
  margin: 0.5rem 0;
}


/* ===================== GOKU SUPERMAN QUOTE BOX STYLE ===================== */
.goku-superman-highlight-box {
  background-color: #1a1a1a;
  border: 1px solid #ffcc00;
  padding: 1rem;
  margin: 2rem 0;
  border-radius: 8px;
  font-weight: 600;
  color: #fff3c7;
  text-align: center;
}

/* ===================== GOKU SUPERMAN FIGURE IMAGE STYLES ===================== */
.magazine-container.goku-superman figure {
  margin: 2rem 0;
  text-align: center;
}

.magazine-container.goku-superman figure img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px #ffcc0088;
}

.magazine-container.goku-superman figure figcaption {
  margin-top: 0.5rem;
  color: #aaa;
  font-size: 0.85rem;
  font-style: italic;
}

@media (min-width: 768px) {
  .magazine-container.goku-superman article {
    column-count: 2;
    column-gap: 2rem;
  }
}

/* ===================== GOKU SUPERMAN FUN BATTLE ===================== */
.battle-section {
  text-align: center;
  margin: 3rem 0;
  padding: 2rem;
  background-color: #1a1a40;
  border-radius: 20px;
  box-shadow: 0 0 20px #ffd70050;
}

.battle-characters {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.fighter img {
  width: 100px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

/* Attack Buttons */
.fighter button {
  border: none;
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 15px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 1rem;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Goku Yellow Button */
.goku-fighter button {
  background-color: #f6c300;
  color: #000;
  box-shadow: 0 0 10px #f6c30080;
}

.goku-fighter button:hover {
  background-color: #ffe145;
  box-shadow: 0 0 12px #fff176;
}

/* Superman Red Button */
.superman-fighter button {
  background-color: #e53935;
  box-shadow: 0 0 10px #e5393580;
}

.superman-fighter button:hover {
  background-color: #ff5c5c;
  box-shadow: 0 0 12px #ff8a80;
}

/* Health Bars */
.health-bar {
  height: 12px;
  width: 100px;
  background: #222;
  border-radius: 10px;
  margin: 0 auto;
  overflow: hidden;
}

#goku-health {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #f6c300, #fff176);
  transition: width 0.3s ease;
}

#superman-health {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #e53935, #ff7961);
  transition: width 0.3s ease;
}

/* Battle Result Text */
.battle-result {
  font-weight: bold;
  margin-top: 1rem;
  color: #fff;
}

/* Flash + Shake Animations */
.flash-effect {
  animation: flash 0.3s ease;
}

.shake-effect {
  animation: shake 0.4s ease;
}

@keyframes flash {
  0% { background-color: rgba(255, 255, 255, 0.2); }
  100% { background-color: transparent; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}


/* ===================== MUSIC PLAYER BOX ===================== */
.music-player {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.6rem;
  border-radius: 12px;
  font-size: 1rem;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  z-index: 999;
  width: 55px;
  height: 55px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#music-select {
  margin: 0.5rem 0;
  padding: 0.3rem;
  font-size: 1rem;
  border-radius: 5px;
}

#music-controls {
  position: relative;

}

/* ========== MUSIC COLLAPSE FIX ========== */
#music-controls.collapsed {
  display: none;
}

.music-player:hover {
  width: auto;
  height: auto;
  padding: 1rem 1.2rem;
  transform: scale(1.05);
}

#song-title {
  margin: 0;
  font-weight: bold;
  white-space: nowrap;
}

.music-player button {
  background-color: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.music-player button:hover {
  transform: scale(1.2);
}

.music-player::before {
  content: "🎵";
  font-size: 1.8rem;
  color: white;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  animation: iconPulse 2s infinite ease-in-out;
}

#volume-slider {
  width: 100px;
  margin-top: 10px;
  appearance: none;
  background: #fff;
  border-radius: 5px;
  height: 5px;
  outline: none;
  cursor: pointer;
}

#close-music-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
}

/* ===================== MUSIC PROGRESS BAR ===================== */
#progress-bar {
  width: 100%;
  height: 6px;
  background-color: #ccc;
  border-radius: 4px;
  outline: none;
  margin: 0.5rem 0;
}

#progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -3px;
}

#progress-bar::-moz-range-thumb {
  height: 12px;
  width: 12px;
  background: #007bff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
/* ===================== SPIRAL LOADER ===================== */
body.loading {
  overflow: hidden;
}

#spiral-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0f0c29;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.e-loadholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border: 5px solid #1B5F70;
  border-radius: 50%;
  box-sizing: border-box;
}

.e-loadholder::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border: 6px solid transparent;
  border: 6px dashed #1B5F70;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  animation: outerRotate2 30s linear infinite;
  transform-origin: center;
  -webkit-animation: outerRotate2 30s linear infinite;
}

.m-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 5px solid #3BB2D0;
  border-radius: 50%;
  text-align: center;
  color: #888;
  box-sizing: border-box;
  z-index: 20;
  text-transform: uppercase;
}

.m-loader::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  border: 5px solid transparent;
  border-right: 5px solid #3BB2D0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: outerRotate1 15s linear infinite;
  transform-origin: center;
}

.e-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border: 5px solid #56d7f0;
  border-radius: 50%;
  box-sizing: border-box;
  text-align: center;
  line-height: 140px;
  font-size: 1.4rem;
  animation: textColour 1s linear alternate infinite;
  z-index: 20;
}

.e-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border: 5px solid transparent;
  border-bottom: 5px solid #56d7f0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: outerRotate2 3.5s linear infinite;
  transform-origin: center;
}

.e-text::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border: 5px solid transparent;
  border-left: 5px solid #56d7f0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: outerRotate1 8s linear infinite;
  transform-origin: center;
}

#main-content {
  opacity: 0;
  transition: opacity 1.2s ease-in;
}

#spiral-loader span {
  color: #00e0ff;
  text-shadow: 0 0 10px #00e0ff, 0 0 20px #00e0ff;
}

/* ===================== KEYFRAMES ===================== */

/* === ROTATION EFFECTS === */
@keyframes outerRotate1 {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes outerRotate2 {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* === TEXT COLOR GLOW === */
@keyframes textColour {
  0% { color: #fff; }
  100% { color: #3BB2D0; }
}

/* === SOFT TEXT GLOW === */
@keyframes softGlow {
  0%, 100% {
    text-shadow: 0 0 6px #ffffff80, 0 0 12px #ffffff60;
  }
  50% {
    text-shadow: 0 0 12px #ffffffa0, 0 0 18px #ffffff70;
  }
}

/* === FLASH EFFECT === */
@keyframes flash {
  0% { background-color: rgba(255, 255, 255, 0.4); }
  100% { background-color: transparent; }
}

/* === SHAKE EFFECT === */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); }
}

/* === GENERAL PULSE === */
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* === FADE-IN (fast + smooth) === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === GOKU/SUPERMAN FORM GLOW === */
@keyframes auraPulse {
  0%, 100% {
    box-shadow:
      0 0 8px #fff200,
      0 0 15px 5px rgba(255, 242, 0, 0.3),
      0 0 22px 8px rgba(255, 60, 60, 0.2);
  }
  50% {
    box-shadow:
      0 0 9px #fff200,
      0 0 20px 7px rgba(255, 242, 0, 0.4),
      0 0 28px 10px rgba(255, 60, 60, 0.3);
  }
}

/* === GOJO/SUKUNA FORM GLOW === */
@keyframes sukunaGojoAura {
  0%, 100% {
    box-shadow:
      0 0 6px #ff0055,
      0 0 15px 5px rgba(148, 0, 211, 0.25),
      0 0 22px 8px rgba(255, 0, 100, 0.15);
  }
  50% {
    box-shadow:
      0 0 9px #ff0055,
      0 0 20px 7px rgba(148, 0, 211, 0.3),
      0 0 28px 10px rgba(255, 0, 100, 0.2);
  }
}

/* ===================== PULSE EFFECT AFTER LOAD ===================== */

#loader-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}


#pulse-canvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
    z-index: 1000;height: 100%;
}

/* ===================== RESPONSIVE MOBILE ===================== */
@media (max-width: 768px) {

  /* General layout fixes */
  html, body {
    overflow-x: hidden;
    padding: 0 1rem;
  }

  #page-wrapper {
    padding: 0 1rem;
  }

  /* Loader scaling */
  .e-loadholder {
    transform: translate(-50%, -50%) scale(0.85);
  }

  /* Flexbox column stacks */
  .characters-section,
  .cafes-section,
  .vote-counts,
  .vs-toggle-buttons {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .vs-toggle-buttons {
    margin: 2rem 0;
  }

  .form-section {
    margin: 2rem 0;
  }

  /* Content boxes (Gojo, Sukuna, Goku, etc.) */
  .strongest-box,
  .most-cursed-box,
  .saiyan-box,
  .kryptonian-box {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    box-sizing: border-box;
    min-height: 620px;
  }

  /* Main title */
  .main-title {
    font-size: 2.2rem;
    text-align: center;
    line-height: 1.3;
  }

  /* Form and input scaling */
  form, fieldset {
    width: 100%;
  }

  input[type="text"],
  textarea {
    width: 100%;
    max-width: 100%;
     font-size: 1rem;
  }

  form button,
  .vote-result button {
    width: 100%;
    max-width: 300px;
    margin: 1rem auto;
    font-size: 1rem;
  }

  /* Fighters section */
  .fighter {
    align-items: center;
    text-align: center;
  }

  .fighter img {
    width: 80px;
  }

  .fighter button {
    width: 100%;
    max-width: 200px;
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
  }

  .health-bar {
    width: 80px;
    height: 10px;
  }

  /* Debate and comments */
  .debate-section,
  .comment-box {
    width: 100%;
    padding: 1rem;
    word-break: break-word;
    box-sizing: border-box;
  }

  .comment-box img {
    width: 40px;
    height: 40px;
  }

  /* Magazine layout */
  .text-with-images {
    flex-direction: column;
  }

  .brief-history,
  .image-wrapper {
    flex: 1 1 100%;
  }

  .quote {
    font-size: 1.3rem;
  }

  .mag-title {
    font-size: 1.8rem;
  }

  .first-paragraph,
  .magazine-container p {
    font-size: 1rem;
  }

  .magazine-container {
    height: auto;
    max-height: 80vh;
  }

  /* Music player */
  .music-player {
    padding: 0.75rem;
    bottom: 20px;
    left: 10px;
    right: 10px;
  }

  .music-player::before {
    display: none;
  }

  #music-controls {
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  #music-controls button,
  #music-controls select {
    font-size: 0.95rem;
    padding: 0.4rem;
  }

  /* Poll chart canvas */
  canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }

}