/* ==========================================================================
   EVO-CLASS: ULTIMATE CARTOON UNIVERSE (LARGE FONT EDITION)
   ========================================================================== */

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

   :root {
       /* Cartoon Candy Palette */
       --primary: #FF5E7E;      /* Bubblegum Pink */
       --secondary: #00D4FF;    /* Electric Cyan */
       --accent: #FFD166;       /* Bright Banana */
       --accent-2: #845EC2;     /* Deep Purple Magic */
       --bg-sky: #A0E4FF;       /* Cartoon Sky Blue */
       --bg-sky-dark: #6BD0FF;
       --text-main: #2B2D42;    /* Very Dark Ink */
       --card-bg: #FFFFFF;      /* Pure White for reading areas */
       
       /* Chunky Cartoon Borders & Shadows */
       --border-thick: 6px solid var(--text-main);
       --shadow-solid: 8px 8px 0px rgba(43, 45, 66, 0.2);
       --shadow-deep: 12px 12px 0px rgba(43, 45, 66, 0.25);
       
       /* Bouncy Rounded Corners */
       --radius-sm: 15px;
       --radius-md: 25px;
       --radius-lg: 35px;
   }
   
   * { box-sizing: border-box; margin: 0; padding: 0; }
   
   body {
       font-family: 'Nunito', sans-serif;
       /* Base font size increased for scaling up em/rem */
       font-size: 18px; 
       
       /* Vibrant Sky Gradient + Polka Dots */
       background: radial-gradient(circle at center, var(--bg-sky) 0%, var(--bg-sky-dark) 100%);
       background-image: 
           radial-gradient(rgba(255,255,255,0.4) 3px, transparent 3px),
           radial-gradient(circle at center, var(--bg-sky) 0%, var(--bg-sky-dark) 100%);
       background-size: 35px 35px, 100% 100%;
       color: var(--text-main);
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
       overflow-x: hidden;
       line-height: 1.6;
       position: relative;
   }
   
   /* Floating clouds for the body background */
   body::before, body::after {
       content: '☁️';
       position: absolute;
       font-size: 10rem;
       opacity: 0.3;
       z-index: 0;
       animation: floatCloud 20s infinite linear;
       pointer-events: none;
   }
   body::before { top: 10%; left: -10%; animation-duration: 25s; }
   body::after { bottom: 20%; right: -10%; animation-duration: 35s; animation-direction: reverse; font-size: 15rem; }
   
   @keyframes floatCloud {
       0% { transform: translateX(0) scale(1); }
       50% { transform: translateX(300px) scale(1.1); }
       100% { transform: translateX(0) scale(1); }
   }
   
   /* --- Main Presentation Container --- */
   .slide-container {
       aspect-ratio: 16 / 9;
       width: 95vw;
       max-width: calc(90vh * 1.77778);
       height: auto;
       max-height: 90vh; 
       background: var(--card-bg);
       border: var(--border-thick);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-deep);
       display: flex;
       flex-direction: column;
       position: relative;
       overflow: hidden; 
       z-index: 10;
       animation: bounceInUI 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
   }
   
   /* --- Title Slide --- */
   .title-slide {
       background: linear-gradient(135deg, var(--accent-2) 0%, #D65DB1 100%);
       background-image: 
           radial-gradient(circle at 10% 20%, rgba(255,255,255,0.1) 100px, transparent 100px),
           radial-gradient(circle at 90% 80%, rgba(255,255,255,0.1) 150px, transparent 150px),
           linear-gradient(135deg, var(--accent-2) 0%, #D65DB1 100%);
       justify-content: center;
       align-items: center;
       text-align: center;
       padding: 3rem;
   }
   
   .title-slide h1 {
       font-family: 'Fredoka One', cursive;
       font-size: 6.5rem; /* Increased */
       color: #FFFFFF;
       text-shadow: 8px 8px 0px var(--text-main);
       margin-bottom: 2rem;
       line-height: 1.2;
       transform: rotate(-3deg);
   }
   
   .title-slide .media-placeholder {
       max-width: 700px;
       height: 400px;
       margin: 3rem auto;
       background: #FFF;
       border: var(--border-thick);
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-solid);
       padding: 10px;
       transform: rotate(2deg);
       transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   .title-slide .media-placeholder:hover { transform: scale(1.05) rotate(0deg); }
   
   /* --- Normal Content Slides --- */
   .slide-header {
       background: var(--primary);
       border-bottom: var(--border-thick);
       padding: 1.5rem 3rem; 
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-shrink: 0;
       position: relative;
       z-index: 10;
   }
   
   /* Shiny overlay on header */
   .slide-header::after {
       content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 30%;
       background: linear-gradient(rgba(255,255,255,0.3), transparent); pointer-events: none;
   }
   
   .slide-title h1 {
       font-family: 'Fredoka One', cursive;
       font-size: 3rem; /* Increased */
       color: #FFFFFF;
       text-shadow: 4px 4px 0px var(--text-main);
       margin-bottom: 0;
       line-height: 1.2;
       display: flex;
       align-items: center;
       gap: 15px;
   }
   
   .slide-title h1::before { content: '✨'; font-size: 2.8rem; filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.5)); }
   
   /* Slide Content Area */
   .slide-content {
       display: flex;
       flex: 1; 
       padding: 2.5rem 3.5rem;
       gap: 4rem;
       background: #FFF9F2; /* Very soft warm tone for reading */
       min-height: 0; 
   }
   
   .content-left {
       flex: 1.2;
       display: flex;
       flex-direction: column;
       gap: 2rem;
       min-height: 0; 
       overflow-y: auto; 
       padding-right: 20px;
   }
   
   /* Fun Chunky Scrollbar */
   .content-left::-webkit-scrollbar { width: 15px; }
   .content-left::-webkit-scrollbar-track { background: #FFE4E1; border-radius: 15px; border: 3px solid var(--text-main); }
   .content-left::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 15px; border: 3px solid var(--text-main); }
   .content-left::-webkit-scrollbar-thumb:hover { background: var(--primary); }
   
   .content-right {
       flex: 0.8;
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 0; 
       position: relative;
   }
   
   /* Media/Image Container */
   .media-placeholder {
       width: 100%;
       height: 100%; 
       border-radius: var(--radius-md);
       background: var(--accent);
       border: var(--border-thick);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       overflow: hidden;
       position: relative;
       box-shadow: var(--shadow-solid);
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       transform: rotate(1deg);
   }
   
   .media-placeholder:hover {
       transform: translateY(-8px) rotate(-1deg);
       box-shadow: 12px 12px 0px rgba(43, 45, 66, 0.3);
       background: var(--secondary);
   }
   
   .media-placeholder img {
       width: 100%;
       height: 100%;
       object-fit: contain; 
       padding: 15px;
       background: #FFF;
       border-radius: var(--radius-sm);
       border: 4px dashed var(--text-main);
       margin: 15px;
       width: calc(100% - 30px);
       height: calc(100% - 30px);
   }
   
   /* --- Typography & Content Hierarchy --- */
   .markdown-body {
       font-family: 'Nunito', sans-serif;
       color: var(--text-main);
   }
   
   .markdown-body h2 {
       color: var(--accent-2);
       font-family: 'Fredoka One', cursive;
       font-size: 2.5rem; /* Increased */
       margin: 0 0 1rem;
       text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
       display: inline-block;
       background: #E8F0FF;
       padding: 8px 20px;
       border-radius: 15px;
       border: 4px solid var(--text-main);
       transform: rotate(-1deg);
   }
   
   .markdown-body p {
       font-size: 1.8rem; /* Increased further */
       font-weight: 800;
       color: var(--text-main);
       line-height: 1.7;
   }
   
   /* Engaging Bullet Lists */
   .markdown-body ul {
       margin-bottom: 2rem;
       padding-left: 0;
   }
   
   .markdown-body li {
       font-size: 1.7rem; /* Increased further */
       font-weight: 800;
       margin-bottom: 1.5rem;
       position: relative;
       list-style: none;
       padding: 15px 25px 15px 70px;
       background: #FFF;
       border-radius: var(--radius-sm);
       border: 5px solid var(--text-main);
       box-shadow: 5px 5px 0px rgba(43, 45, 66, 0.15);
       color: var(--text-main);
       transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   .markdown-body li:hover { 
       transform: translateX(10px) scale(1.02); 
       background: var(--secondary);
       color: #FFF;
   }
   .markdown-body li::before {
       content: '⭐';
       position: absolute;
       left: 15px;
       top: 50%;
       transform: translateY(-50%);
       font-size: 2.2rem;
       filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.3));
   }
   
   /* Highlight Boxes (Blockquotes) */
   .markdown-body blockquote {
       padding: 2rem 2rem 2rem 4.5rem;
       background: var(--accent);
       border: var(--border-thick);
       margin: 2.5rem 0;
       border-radius: var(--radius-md);
       font-style: normal;
       font-weight: 900;
       font-size: 1.8rem; /* Increased further */
       color: var(--text-main);
       position: relative;
       box-shadow: var(--shadow-solid);
       transform: rotate(1deg);
   }
   .markdown-body blockquote::before {
       content: '💡';
       position: absolute;
       left: -25px;
       top: -25px;
       font-size: 3.5rem;
       background: #FFF;
       border: var(--border-thick);
       border-radius: 50%;
       width: 85px; height: 85px;
       display: flex; justify-content: center; align-items: center;
       transform: rotate(-15deg);
       box-shadow: 5px 5px 0px var(--text-main);
   }
   
   /* --- Interaction Bottom Box --- */
   .interaction-box {
       margin-top: auto;
       flex-shrink: 0;
       background: #FFF;
       border: var(--border-thick);
       padding: 1.5rem 2.5rem;
       border-radius: var(--radius-md);
       display: flex;
       gap: 2rem;
       align-items: center;
       box-shadow: var(--shadow-solid);
       position: relative;
       overflow: hidden;
       transform: rotate(-0.5deg);
   }
   
   .interaction-icon {
       font-size: 5rem; /* Increased */
       animation: jumpIcon 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
       filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.3));
   }
   
   .interaction-text {
       font-size: 1.8rem; /* Make interaction text bigger */
       font-weight: 900;
   }
   
   /* --- Voice Play Button --- */
   .notes-toggle {
       position: fixed;
       bottom: 40px;
       right: 40px;
       width: 100px; /* Increased */
       height: 100px;
       background: var(--primary); 
       border: var(--border-thick);
       border-radius: 50%;
       font-size: 3.5rem;
       cursor: pointer;
       box-shadow: 0 10px 0px var(--text-main), 0 18px 25px rgba(0,0,0,0.3);
       transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
       z-index: 100;
       display: flex;
       justify-content: center;
       align-items: center;
       color: #FFF;
       padding-bottom: 5px;
   }
   
   .notes-toggle:hover {
       transform: translateY(-5px) scale(1.1) rotate(15deg);
       background: var(--accent-2);
       box-shadow: 0 15px 0px var(--text-main), 0 25px 30px rgba(0,0,0,0.3);
   }
   .notes-toggle:active {
       transform: translateY(10px) scale(0.95);
       box-shadow: 0 0px 0px var(--text-main), 0 5px 10px rgba(0,0,0,0.3);
       padding-bottom: 0;
   }
   
   /* --- Animations --- */
   @keyframes bounceInUI {
       0% { opacity: 0; transform: scale(0.5) translateY(200px) rotate(-10deg); }
       60% { opacity: 1; transform: scale(1.05) translateY(-20px) rotate(3deg); }
       80% { transform: scale(0.95) translateY(10px) rotate(-1deg); }
       100% { transform: scale(1) translateY(0) rotate(0deg); }
   }
   
   @keyframes jumpIcon {
       0%, 100% { transform: translateY(0) scale(1); }
       50% { transform: translateY(-20px) scale(1.1) rotate(5deg); }
   }
   
   /* --- Mobile Responsiveness --- */
   @media screen and (max-width: 900px) {
       body { align-items: flex-start; height: auto; font-size: 16px; }
       .slide-container {
           width: 100vw; max-width: none; height: auto; min-height: 100vh;
           aspect-ratio: auto; border-radius: 0; box-shadow: none; border: none;
           overflow-y: auto; animation: none;
       }
       .slide-header { flex-direction: column; align-items: flex-start; padding: 2rem; }
       .slide-title h1 { font-size: 2.2rem; text-shadow: 3px 3px 0 var(--text-main); }
       .slide-content { flex-direction: column; padding: 2rem; gap: 2rem; overflow-y: visible; }
       .content-left, .content-right { width: 100%; flex: none !important; }
       .media-placeholder { height: 350px; transform: none; }
       .notes-toggle { width: 80px; height: 80px; font-size: 2.5rem; bottom: 20px; right: 20px; box-shadow: 0 8px 0px var(--text-main); }
       .notes-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 0px var(--text-main); }
       .notes-toggle:active { transform: translateY(8px); box-shadow: 0 0 0px var(--text-main); }
       .title-slide h1 { font-size: 4rem; }
       .title-slide .media-placeholder { height: 280px; transform: none; }
   }
   
   .danger-text { color: var(--primary) !important; font-weight: 900; text-shadow: 2px 2px 0px rgba(0,0,0,0.2); }

/* EvoClass mobile responsive fallback v2 */
@media screen and (max-width: 1024px), screen and (orientation: portrait) {
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  body { display: block !important; margin: 0 !important; padding: 0 !important; }
  body::before, body::after { display: none !important; }
  .slide-container { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 100svh !important; max-height: none !important; aspect-ratio: auto !important; overflow: visible !important; border-radius: 0 !important; }
  .slide-content { flex-direction: column !important; width: 100% !important; padding: clamp(20px, 5vw, 36px) !important; gap: clamp(20px, 5vw, 34px) !important; overflow: visible !important; }
  .content-left, .content-right { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; overflow: visible !important; }
  .scene-grid { width: 100% !important; max-width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(14px, 3.8vw, 22px) !important; }
  .scene-card, .scene-card-readable { min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left !important; font-size: clamp(1.45rem, 4.1vw, 2.15rem) !important; line-height: 1.16 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important; }
  .scene-card-readable .scene-text br { display:none !important; }
}
@media screen and (max-width: 560px) { .scene-grid { grid-template-columns: 1fr !important; } }