/* =============================================================
   ART STYLES — CRANKED TO MAX. BOLD. COLORFUL. ALIVE.
   Every mode has a VISIBLE, DISTINCT atmosphere
   ============================================================= */

/* =====================================================
   ⚔️ AOT — CYBER HORROR (Tricky Mode)
   RED. PULSING. TERRIFYING.
   ===================================================== */

#tricky-content {
  animation: rumbleTremor 0.12s steps(2) infinite;
}
@keyframes rumbleTremor {
  0% { transform: translate(0,0); }
  50% { transform: translate(0.4px,-0.5px); }
}

/* STRONG chromatic aberration */
#tricky-content .tricky-card h3 {
  text-shadow: -2px 0 rgba(255,0,50,0.4), 2px 0 rgba(0,100,255,0.35) !important;
}

/* VISIBLE heartbeat pulse — red glow */
#tricky-content .tricky-card {
  animation: heartbeat 2s ease-in-out infinite !important;
  border: 1px solid rgba(255,60,40,0.2) !important;
}
@keyframes heartbeat {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,50,30,0), inset 0 0 0 0 rgba(255,50,30,0); }
  15% { box-shadow: 0 0 25px rgba(255,50,30,0.12), inset 0 0 20px rgba(255,50,30,0.04); border-color: rgba(255,60,40,0.4); }
  30% { box-shadow: 0 0 5px rgba(255,50,30,0); border-color: rgba(255,60,40,0.15); }
  45% { box-shadow: 0 0 18px rgba(255,50,30,0.08), inset 0 0 15px rgba(255,50,30,0.03); border-color: rgba(255,60,40,0.3); }
}

/* Crimson fog bleed — TOP and BOTTOM */
#tricky-content::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: 
    linear-gradient(180deg, rgba(200,30,20,0.08) 0%, transparent 20%),
    linear-gradient(0deg, rgba(200,30,20,0.06) 0%, transparent 15%),
    radial-gradient(ellipse at 20% 80%, rgba(200,30,20,0.05), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(200,30,20,0.04), transparent 50%);
}

/* Screen tear — VISIBLE */
#tricky-content .tricky-card {
  position: relative; overflow: hidden;
}
#tricky-content .tricky-card::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 10%, rgba(255,60,40,0.4) 30%, rgba(255,60,40,0.6) 50%, rgba(255,60,40,0.4) 70%, transparent 90%);
  animation: tearSweep 5s linear infinite;
  pointer-events: none; z-index: 2;
}
@keyframes tearSweep {
  0% { top: -2px; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* =====================================================
   ⚔️ AOT — BIO-MECHANICAL (Study Mode)
   LIVING. GROWING. CONNECTED.
   ===================================================== */

/* VISIBLE spine connector */
#study-content { position: relative; }
#study-content::before {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,80,40,0.25) 10%, rgba(255,80,40,0.3) 50%, rgba(255,80,40,0.25) 90%, transparent);
  z-index: 0; pointer-events: none;
  animation: spineGlow 2s ease-in-out infinite alternate;
}
@keyframes spineGlow { from{opacity:0.5;width:2px;} to{opacity:1;width:3px;} }

/* VISIBLE pulsing nodes */
#study-content .card { position: relative; }
#study-content .card::before,
#study-content .card::after {
  content: '';
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,80,40,0.6);
  animation: nodeGlow 2s ease-in-out infinite;
  z-index: 1; pointer-events: none;
  box-shadow: 0 0 10px rgba(255,80,40,0.4), 0 0 20px rgba(255,80,40,0.2);
}
#study-content .card::before { top: -4px; left: 50%; transform: translateX(-50%); }
#study-content .card::after { bottom: -4px; left: 50%; transform: translateX(-50%); animation-delay: 1s; }
@keyframes nodeGlow {
  0%,100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 8px rgba(255,80,40,0.3); }
  50% { transform: translateX(-50%) scale(1.8); box-shadow: 0 0 16px rgba(255,80,40,0.6), 0 0 30px rgba(255,80,40,0.2); }
}

/* Organic borders + warm tint */
#study-content .card {
  border-radius: 18px 10px 16px 12px !important;
  border-left: 3px solid rgba(255,80,40,0.2) !important;
  background: linear-gradient(135deg, rgba(30,12,8,0.5), rgba(15,8,5,0.3)) !important;
}

/* Growth animation */
#study-content .card {
  animation: bioGrow 600ms cubic-bezier(0.22,1,0.36,1) both !important;
}
@keyframes bioGrow {
  from { opacity:0; transform: scale(0.9) rotate(-0.5deg); filter: brightness(0.6); }
  to { opacity:1; transform: scale(1) rotate(0); filter: brightness(1); }
}

/* =====================================================
   👁️ LAIN — GLITCH ART (Code Lab)
   PURPLE. CORRUPTED. DIGITAL CHAOS.
   ===================================================== */

/* Purple atmosphere */
#codelab-content::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(124,106,239,0.08), transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(168,85,247,0.06), transparent 50%);
}

/* VISIBLE VHS tracking bar */
#codelab-content .code-block { position: relative; overflow: hidden; }
#codelab-content .code-block::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(124,106,239,0.5) 20%, rgba(168,85,247,0.7) 50%, rgba(124,106,239,0.5) 80%, transparent);
  animation: vhsSweep 4s linear infinite;
  pointer-events: none; z-index: 2;
  box-shadow: 0 0 10px rgba(124,106,239,0.3);
}
@keyframes vhsSweep { 0%{top:-4px} 100%{top:100%} }

/* RGB split on hover */
#codelab-content .code-block:hover {
  text-shadow: -2px 0 rgba(255,0,100,0.3), 2px 0 rgba(0,255,200,0.3) !important;
  border-color: rgba(168,85,247,0.3) !important;
}

/* Purple glow on code cards */
#codelab-content .code-lab-card {
  border: 1px solid rgba(124,106,239,0.15) !important;
  box-shadow: 0 0 20px rgba(124,106,239,0.06), inset 0 0 15px rgba(124,106,239,0.02) !important;
  animation: lainPulse 4s ease-in-out infinite;
}
@keyframes lainPulse {
  0%,100% { box-shadow: 0 0 15px rgba(124,106,239,0.05); border-color: rgba(124,106,239,0.12); }
  50% { box-shadow: 0 0 25px rgba(124,106,239,0.1); border-color: rgba(124,106,239,0.25); }
}

/* Pixel dissolve on entry */
#codelab-content .code-lab-card {
  animation: glitchEntry 500ms cubic-bezier(0.22,1,0.36,1) both !important;
}
@keyframes glitchEntry {
  0% { opacity:0; filter: saturate(3) hue-rotate(40deg) contrast(1.5); transform: translateX(-5px); }
  40% { filter: saturate(1.5) hue-rotate(10deg); }
  100% { opacity:1; filter: none; transform: translateX(0); }
}

/* =====================================================
   👁️ LAIN — DARK ACADEMIA (Revision Mode)
   WARM. SCHOLARLY. AMBER GLOW.
   ===================================================== */

/* Warm amber atmosphere */
#mode-revision::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 40% 50%, rgba(180,140,60,0.06), transparent 60%),
    radial-gradient(ellipse at 60% 80%, rgba(160,120,40,0.04), transparent 50%);
}

/* Parchment cards */
#mode-revision .card {
  background: linear-gradient(135deg, rgba(35,28,18,0.9), rgba(25,20,12,0.95)) !important;
  border: 1px solid rgba(180,140,60,0.12) !important;
  border-left: 3px solid rgba(180,140,60,0.2) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 40px rgba(180,140,60,0.04), 0 4px 20px rgba(0,0,0,0.2) !important;
}

/* Serif headings with gold */
#mode-revision .card h2 {
  font-family: 'Georgia', 'Times New Roman', serif !important;
  font-style: italic;
  color: rgba(220,180,100,0.85) !important;
  text-shadow: 0 0 20px rgba(220,180,100,0.1);
}

/* VISIBLE candlelight flicker */
#mode-revision .bookmark-star {
  animation: candle 2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,180,40,0.4));
}
@keyframes candle {
  0%,100% { opacity:0.5; filter: drop-shadow(0 0 4px rgba(255,180,40,0.2)); }
  25% { opacity:0.9; filter: drop-shadow(0 0 10px rgba(255,180,40,0.5)); }
  50% { opacity:0.4; filter: drop-shadow(0 0 3px rgba(255,180,40,0.15)); }
  75% { opacity:1; filter: drop-shadow(0 0 12px rgba(255,180,40,0.6)); }
}

/* Latin motto dividers */
#mode-revision .card:nth-child(3n)::after {
  content: '— scientia est potentia —';
  display: block; text-align: center;
  font-size: 0.6rem; font-style: italic;
  color: rgba(180,140,60,0.35); letter-spacing: 0.12em;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(180,140,60,0.1);
}
#mode-revision .card:nth-child(5n)::after {
  content: '— veritas lux in tenebris —';
}

/* =====================================================
   💀 CYBERPUNK — NEON NOIR (Exam Mode)
   BLUE NEON. RAIN. ELECTRIC.
   ===================================================== */

/* VISIBLE rain effect */
#exam-content::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: 
    repeating-linear-gradient(90deg, transparent 0, transparent 100px, rgba(14,165,233,0.04) 100px, rgba(14,165,233,0.04) 101px),
    repeating-linear-gradient(90deg, transparent 0, transparent 200px, rgba(14,165,233,0.03) 200px, rgba(14,165,233,0.03) 201px);
  animation: rainFall 1.5s linear infinite;
}
@keyframes rainFall { from{transform:translateY(-200px)} to{transform:translateY(200px)} }

/* Neon blue atmosphere */
#exam-content::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: 
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.3) 100%),
    radial-gradient(ellipse at 20% 90%, rgba(14,165,233,0.06), transparent 40%),
    radial-gradient(ellipse at 80% 10%, rgba(236,72,153,0.04), transparent 40%);
}

/* Neon flicker on score */
#exam-content .score-bar {
  border: 1px solid rgba(14,165,233,0.15) !important;
  box-shadow: 0 0 15px rgba(14,165,233,0.06), inset 0 0 10px rgba(14,165,233,0.03) !important;
  animation: neonPulse 3s ease-in-out infinite;
}
@keyframes neonPulse {
  0%,100% { box-shadow: 0 0 15px rgba(14,165,233,0.06); border-color: rgba(14,165,233,0.15); }
  3% { box-shadow: 0 0 0; border-color: rgba(14,165,233,0.05); }
  5% { box-shadow: 0 0 20px rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.25); }
  50% { box-shadow: 0 0 10px rgba(14,165,233,0.05); }
  53% { box-shadow: 0 0 0; }
  55% { box-shadow: 0 0 15px rgba(14,165,233,0.08); }
}

/* Cards with neon bottom line */
#exam-content .card {
  border-bottom: 2px solid rgba(14,165,233,0.15) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25), 0 2px 0 rgba(14,165,233,0.08) !important;
}

/* STRONG halation on correct */
#exam-content .opt-btn.correct {
  box-shadow: 0 0 30px rgba(16,185,129,0.25), 0 0 60px rgba(16,185,129,0.1), inset 0 0 20px rgba(16,185,129,0.05) !important;
}

/* =====================================================
   💀 CYBERPUNK — VAPORWAVE (How to Study)
   PINK. TEAL. SUNSET. DREAMY.
   ===================================================== */

/* VISIBLE sunset gradient */
#mode-howto::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg,
    rgba(147,51,234,0.06) 0%,
    rgba(236,72,153,0.08) 25%,
    rgba(251,146,60,0.06) 45%,
    rgba(14,165,233,0.05) 70%,
    transparent 100%
  );
}

/* Pastel tinted cards */
#mode-howto .card {
  background: linear-gradient(135deg, rgba(147,51,234,0.06), rgba(236,72,153,0.05), rgba(14,165,233,0.06)) !important;
  border: 1px solid rgba(236,72,153,0.12) !important;
  box-shadow: 0 4px 24px rgba(236,72,153,0.06), 0 0 0 1px rgba(147,51,234,0.04) !important;
}

/* Gentle breathing */
#mode-howto .card { animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.005)} }

/* GRADIENT text headers */
#mode-howto .card h2 {
  font-style: italic !important;
  background: linear-gradient(90deg, #ec4899, #a855f7, #0ea5e9) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(236,72,153,0.2));
}

/* VISIBLE retro grid */
#mode-howto::after {
  content: '';
  position: fixed; bottom: 0; left: 0; right: 0; height: 35%;
  background:
    linear-gradient(rgba(236,72,153,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,51,234,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(300px) rotateX(55deg);
  transform-origin: bottom;
  pointer-events: none; z-index: 0;
  mask-image: linear-gradient(transparent, black 30%);
  -webkit-mask-image: linear-gradient(transparent, black 30%);
}

/* =====================================================
   🪞 BLACK MIRROR — SOCIAL SCORE (Compare)
   STERILE. COLD. WATCHING.
   ===================================================== */

/* VISIBLE surveillance indicator */
#compare-content::before {
  content: '👁️ SOCIAL CREDIT MONITORING ACTIVE';
  position: fixed; top: 110px; right: 24px;
  font-size: 0.55rem; font-family: monospace;
  color: rgba(150,150,170,0.4); letter-spacing: 0.12em;
  padding: 4px 12px; border: 1px solid rgba(150,150,170,0.1);
  border-radius: 4px; background: rgba(10,10,15,0.8);
  animation: monitorBlink 3s ease-in-out infinite; z-index: 10;
}
@keyframes monitorBlink { 0%,100%{opacity:0.3} 50%{opacity:0.7} }

/* Sterile clinical cards */
#compare-content .card {
  background: rgba(10,10,14,0.95) !important;
  border: 1px solid rgba(120,120,140,0.12) !important;
  border-radius: 2px !important;
}

/* COLD uppercase headers */
#compare-content .card h2 {
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  color: rgba(180,180,200,0.6) !important;
  text-transform: uppercase;
  font-size: 0.75rem !important;
}

/* Nosedive color bars on table rows */
#compare-content .cmp-table tr:nth-child(odd) td:first-child {
  border-left: 3px solid rgba(16,185,129,0.4);
}
#compare-content .cmp-table tr:nth-child(even) td:first-child {
  border-left: 3px solid rgba(240,180,41,0.4);
}

/* Remove ALL warmth */
#compare-content .card:hover {
  box-shadow: 0 0 0 1px rgba(120,120,140,0.08) !important;
  transform: none !important;
}

/* Table header — cold */
#compare-content .cmp-table th {
  background: rgba(15,15,22,0.95) !important;
  color: rgba(150,150,170,0.5) !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-size: 0.55rem !important;
  border-bottom: 1px solid rgba(120,120,140,0.08) !important;
}

/* =====================================================
   🪞 BLACK MIRROR — DIGITAL UNCANNY (Resources)
   RECORDING. WATCHING. UNCANNY VALLEY.
   ===================================================== */

/* VISIBLE REC indicator */
#others-content::before {
  content: '● REC  00:' attr(data-timer);
  position: fixed; top: 110px; right: 24px;
  font-size: 0.6rem; font-family: monospace; font-weight: 700;
  color: rgba(255,50,50,0.7); letter-spacing: 0.08em;
  padding: 4px 14px; border: 1px solid rgba(255,50,50,0.2);
  border-radius: 4px; background: rgba(10,10,10,0.9);
  animation: recPulse 1.2s steps(1) infinite; z-index: 10;
}
@keyframes recPulse { 0%,55%{opacity:1} 56%,100%{opacity:0.2} }

/* Screen recursion borders */
#others-content .card {
  border: 1px solid rgba(120,120,140,0.1) !important;
  box-shadow:
    inset 0 0 0 4px rgba(8,8,12,1),
    inset 0 0 0 5px rgba(120,120,140,0.08),
    inset 0 0 0 8px rgba(8,8,12,1),
    inset 0 0 0 9px rgba(120,120,140,0.04),
    0 0 0 1px rgba(120,120,140,0.06) !important;
  border-radius: 2px !important;
}

/* Museum placard headers */
#others-content .card h2,
#others-content h3 {
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(180,180,200,0.5) !important;
  font-weight: 400 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120,120,140,0.08);
}

/* VISIBLE watching eye */
#others-content::after {
  content: '👁';
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 10rem; opacity: 0.025;
  pointer-events: none; z-index: 0;
  animation: eyeWatch 6s ease-in-out infinite;
  filter: grayscale(1);
}
@keyframes eyeWatch {
  0%,100% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.02; }
  50% { transform: translate(-50%,-50%) scale(1.15); opacity: 0.04; }
}

/* =====================================================
   RESPONSIVE + REDUCED MOTION
   ===================================================== */
@media (max-width: 768px) {
  #tricky-content { animation: none !important; }
  #compare-content::before, #others-content::before { display:none; }
  #others-content::after { display:none; }
  #exam-content::before, #exam-content::after { display:none; }
  #howto-content::before, #howto-content::after { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0s !important; }
}