/* Meme Theme - Chaotic Internet Culture */
html[data-color="meme"]{ --brand-h:45; }

/* Typography - Basis Fonts */
html[data-color="meme"] {
  font-family: var(--font-basis-primary);
}
html[data-color="meme"] .muted,
html[data-color="meme"] .help,
html[data-color="meme"] .label {
  font-family: var(--font-basis-secondary);
}

html[data-theme="dark"][data-color="meme"]{
  --bg: #1a1a2e;
  --card: #16213e;
  --text: #ffffff;
  --muted: #ffd93d;
  --line: #3a3a5c;
  --surface-2: #1f1f3a;
  --surface-3: #252550;
}

html[data-theme="light"][data-color="meme"]{
  --bg: #fff8e1;
  --card: #ffffff;
  --text: #1a1a2e;
  --muted: #ff6b35;
  --line: #ffe082;
  --surface-2: #fffde7;
  --surface-3: #fff9c4;
}

/* Meme collage background - MASSIVE MEME WALL - 70+ MEMES SPREAD OUT */
html[data-color="meme"] body{
  background-color: var(--bg);
  color: var(--text);
  position: relative;
  /* Multi-layer meme collage background - evenly distributed grid */
  background-image:
    /* Grid Row 1 (0-10% height) - 8 memes */
    url('../images/Drake.png'),
    url('../images/Distracted boy.png'),
    url('../images/This is fine 3.jpg'),
    url('../images/Crying Michael Jordan pleure.jpg'),
    url('../images/Expanding brain cerveau mind 2.jpg'),
    url('../images/Shrek.jpg'),
    url('../images/Spiderman hey.jpg'),
    url('../images/The scroll of truth.jpg'),
    /* Grid Row 2 (10-20% height) - 8 memes */
    url('../images/Putting on clown makeup maquillage.jpg'),
    url('../images/Tom surprise.jpg'),
    url('../images/Three-headed dragon.jpg'),
    url('../images/Hard to swallow pills pilules médicaments avaler.jpg'),
    url('../images/Scoubidou reveal.jpg'),
    url('../images/Madagascar pinguoin.jpg'),
    url('../images/Joker sign slam.jpg'),
    url('../images/They don_t know.jpg'),
    /* Grid Row 3 (20-30% height) - 8 memes */
    url('../images/Hulk tacos.jpg'),
    url('../images/Kirby sign.jpg'),
    url('../images/Small brain vs big brain petit gros cerveau.jpg'),
    url('../images/i sleep Real shit black.jpg'),
    url('../images/Naruto hiding.jpg'),
    url('../images/Toy Story woody buzz regarde.jpg'),
    url('../images/Pirate.jpg'),
    url('../images/Silence.jpg'),
    /* Grid Row 4 (30-40% height) - 8 memes */
    url('../images/Strong opinions.jpg'),
    url('../images/Tom et Jerry.jpg'),
    url('../images/Rick Morty - What is my purpose.jpg'),
    url('../images/Teletubbies in a circle.jpg'),
    url('../images/Swole doge Jotaro  vs cheems.jpg'),
    url('../images/Soyjak fans vs Chad fans.jpg'),
    url('../images/Old Hulk vs new Hulk.jpg'),
    url('../images/Minecraft ores.jpg'),
    /* Grid Row 5 (40-50% height) - 8 memes */
    url('../images/Gravity fall feuille papier lire paper read.jpg'),
    url('../images/Golden Wind 1.jpg'),
    url('../images/chat Waffles cat gauffre.jpg'),
    url('../images/Tombe.jpg'),
    url('../images/Moon better.jpg'),
    url('../images/Upgrade go back keyboard clavier.jpg'),
    url('../images/I think I forgot something.jpg'),
    url('../images/Joker You think this is funny.jpg'),
    /* Grid Row 6 (50-60% height) - 8 memes */
    url('../images/Jonah hill dropping coffee.jpg'),
    url('../images/Kirby speech.jpg'),
    url('../images/Hulk Regretful regrets.jpg'),
    url('../images/Minecraft furnace.jpg'),
    url('../images/Minecarft craft.jpg'),
    url('../images/Minecraft apple.jpg'),
    url('../images/Spider-Man explaining to Zendaya.jpg'),
    url('../images/Spiderman 4.jpg'),
    /* Grid Row 7 (60-70% height) - 8 memes */
    url('../images/Soda fountain mix.jpg'),
    url('../images/Tom et Jerry gap.jpg'),
    url('../images/Tom Hanks vs tank.jpg'),
    url('../images/Trying to explain.jpg'),
    url('../images/Video games.jpg'),
    url('../images/What if you wanted to go to heaven.jpg'),
    url('../images/There is no.jpg'),
    url('../images/Talk like a fucking idiot.jpg'),
    /* Grid Row 8 (70-80% height) - 8 memes */
    url('../images/Student assaulting another.jpg'),
    url('../images/SrGrafo - Smartest man alive.jpg'),
    url('../images/SrGrafo - Preaching to the mob.jpg'),
    url('../images/SrGrafo - Only someone stupid would fall for that.jpg'),
    url('../images/SrGrafo - Giants looking at a peasant geants bleu orange dieux gods.jpg'),
    url('../images/Rick Morty adventure card.jpg'),
    url('../images/Prince Charles - chaise roulante Wheel thief.jpg'),
    url('../images/POV girls 1.jpg'),
    /* Grid Row 9 (80-90% height) - 8 memes */
    url('../images/POV girls 2.jpg'),
    url('../images/Ninja turtles growing up tortue splinter.jpg'),
    url('../images/Nick fury looks at pink guy homme combinaison rose voiture.jpg'),
    url('../images/Monika T-Posing over Sans.jpg'),
    url('../images/monkey singe pc Sinjed.jpg'),
    url('../images/Mei No.jpg'),
    url('../images/Masters blessing chevalier epee.jpg'),
    url('../images/Man smacking cards down on table cartes.jpg'),
    /* Grid Row 10 (90-100% height) - 8 memes */
    url('../images/Let_s keep this on.jpg'),
    url('../images/Jerry smith looking through viewfinder.jpg'),
    url('../images/Its blank kung ffu panda.jpg'),
    url('../images/Indiana Jones totem - clean 2.jpg'),
    url('../images/Huge swole man ordering food.jpg'),
    url('../images/Hit door hommen kick man door porte pied.png'),
    url('../images/Furry vs dog.jpg'),
    url('../images/Flex tape ad Phil swift slaps on flex scotch eau coule .jpg');
  background-position:
    /* Row 1 - evenly spaced across width at 2% height */
    2% 2%, 14% 3%, 27% 1%, 40% 4%, 53% 2%, 66% 3%, 79% 1%, 92% 4%,
    /* Row 2 - at 12% height */
    5% 12%, 18% 14%, 31% 11%, 44% 13%, 57% 12%, 70% 14%, 83% 11%, 96% 13%,
    /* Row 3 - at 22% height */
    1% 22%, 13% 24%, 26% 21%, 39% 23%, 52% 22%, 65% 24%, 78% 21%, 91% 23%,
    /* Row 4 - at 32% height */
    8% 32%, 21% 34%, 34% 31%, 47% 33%, 60% 32%, 73% 34%, 86% 31%, 99% 33%,
    /* Row 5 - at 42% height */
    3% 42%, 16% 44%, 29% 41%, 42% 43%, 55% 42%, 68% 44%, 81% 41%, 94% 43%,
    /* Row 6 - at 52% height */
    6% 52%, 19% 54%, 32% 51%, 45% 53%, 58% 52%, 71% 54%, 84% 51%, 97% 53%,
    /* Row 7 - at 62% height */
    1% 62%, 14% 64%, 27% 61%, 40% 63%, 53% 62%, 66% 64%, 79% 61%, 92% 63%,
    /* Row 8 - at 72% height */
    4% 72%, 17% 74%, 30% 71%, 43% 73%, 56% 72%, 69% 74%, 82% 71%, 95% 73%,
    /* Row 9 - at 82% height */
    7% 82%, 20% 84%, 33% 81%, 46% 83%, 59% 82%, 72% 84%, 85% 81%, 98% 83%,
    /* Row 10 - at 92% height */
    2% 92%, 15% 94%, 28% 91%, 41% 93%, 54% 92%, 67% 94%, 80% 91%, 93% 93%;
  background-size:
    /* Row 1 */
    75px 75px, 70px 55px, 65px 50px, 60px 60px, 80px 60px, 55px 55px, 70px 55px, 65px 70px,
    /* Row 2 */
    60px 65px, 55px 55px, 75px 55px, 55px 55px, 70px 65px, 65px 65px, 60px 60px, 55px 55px,
    /* Row 3 */
    65px 65px, 55px 55px, 70px 55px, 75px 60px, 60px 60px, 65px 50px, 55px 70px, 65px 65px,
    /* Row 4 */
    70px 70px, 55px 55px, 50px 50px, 70px 55px, 65px 65px, 60px 60px, 65px 50px, 55px 70px,
    /* Row 5 */
    75px 60px, 70px 65px, 60px 60px, 55px 55px, 70px 50px, 65px 70px, 60px 55px, 70px 60px,
    /* Row 6 */
    55px 70px, 70px 55px, 60px 65px, 55px 50px, 55px 55px, 60px 60px, 75px 60px, 65px 65px,
    /* Row 7 */
    70px 55px, 60px 60px, 55px 55px, 50px 65px, 65px 50px, 70px 70px, 55px 55px, 65px 60px,
    /* Row 8 */
    65px 65px, 70px 55px, 75px 60px, 60px 60px, 80px 65px, 55px 55px, 60px 60px, 55px 55px,
    /* Row 9 */
    65px 55px, 60px 60px, 80px 55px, 70px 75px, 55px 55px, 50px 50px, 55px 55px, 60px 60px,
    /* Row 10 */
    55px 55px, 60px 60px, 65px 75px, 75px 55px, 60px 60px, 55px 70px, 50px 55px, 70px 55px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Overlay to fade memes and make content readable */
html[data-theme="dark"][data-color="meme"] body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.88);
  pointer-events: none;
  z-index: 0;
}

html[data-theme="light"][data-color="meme"] body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 248, 225, 0.92);
  pointer-events: none;
  z-index: 0;
}

/* Floating meme animations */
@keyframes float1 {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50% { transform: translate(10px, -15px) rotate(5deg); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0) rotate(3deg); }
  50% { transform: translate(-15px, 10px) rotate(-3deg); }
}

@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-1deg); }
  75% { transform: translateX(2px) rotate(1deg); }
}

/* Animated featured memes on top of the collage */
html[data-color="meme"] body::after{
  content: "";
  position: fixed;
  bottom: 5%;
  right: 3%;
  width: 150px;
  height: 120px;
  background: url('../images/This is fine 3.jpg') center/contain no-repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
  animation: float1 8s ease-in-out infinite;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

/* More animated memes using container pseudo-elements */
html[data-color="meme"] .container::before{
  content: "";
  position: fixed;
  top: 8%;
  left: 2%;
  width: 130px;
  height: 130px;
  background: url('../images/Drake.png') center/contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
  animation: float2 10s ease-in-out infinite;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

html[data-color="meme"] .container::after{
  content: "";
  position: fixed;
  top: 50%;
  right: 2%;
  width: 110px;
  height: 110px;
  background: url('../images/Crying Michael Jordan pleure.jpg') center/contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
  animation: float1 12s ease-in-out infinite reverse;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

/* Container styling */
html[data-color="meme"] .container{
  border: 3px solid;
  border-image: linear-gradient(45deg, #ff6b35, #ffd93d, #4ecdc4, #ff6b9d) 1;
  border-radius: 0;
  padding-top: 28px;
  padding-bottom: 28px;
  box-shadow: 
    0 0 0 2px var(--bg),
    0 0 30px rgba(255, 107, 53, 0.2),
    0 25px 60px rgba(0, 0, 0, 0.3);
  background: var(--card);
  position: relative;
}

/* Card styling - comic book feel */
html[data-color="meme"] .card{
  border: 2px solid var(--line);
  box-shadow: 
    4px 4px 0 rgba(0, 0, 0, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

/* Themed cards with meme energy */
html[data-color="meme"] .themed-card::before{
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 217, 61, 0.2), rgba(78, 205, 196, 0.2));
  opacity: 1;
}

html[data-color="meme"] .themed-card{
  color: #ffffff;
  border: 2px solid rgba(255, 217, 61, 0.5);
  box-shadow: 
    4px 4px 0 rgba(255, 107, 53, 0.3),
    0 10px 40px rgba(0, 0, 0, 0.3);
}

html[data-color="meme"] .themed-card .label,
html[data-color="meme"] .themed-card .muted,
html[data-color="meme"] .themed-card #currentName,
html[data-color="meme"] .themed-card #currentRoom,
html[data-color="meme"] .themed-card #currentTimeRange,
html[data-color="meme"] .themed-card #elapsedOut,
html[data-color="meme"] .themed-card #leftOut,
html[data-color="meme"] .themed-card #nextName,
html[data-color="meme"] .themed-card #nextRoom,
html[data-color="meme"] .themed-card #nextTimeRange,
html[data-color="meme"] .themed-card #nextInOut,
html[data-color="meme"] .themed-card #untilOut{
  color: #fff8e1 !important;
}

/* Light mode text colors */
html[data-theme="light"][data-color="meme"] .label,
html[data-theme="light"][data-color="meme"] .muted,
html[data-theme="light"][data-color="meme"] .subclock,
html[data-theme="light"][data-color="meme"] .clock,
html[data-theme="light"][data-color="meme"] .countdown,
html[data-theme="light"][data-color="meme"] #dateOut,
html[data-theme="light"][data-color="meme"] #clockOut,
html[data-theme="light"][data-color="meme"] #elapsedOut,
html[data-theme="light"][data-color="meme"] #leftOut,
html[data-theme="light"][data-color="meme"] #currentName,
html[data-theme="light"][data-color="meme"] #nextName{
  color: #1a1a2e;
}

html[data-theme="light"][data-color="meme"] #clockOut{
  color: #ff6b35;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(255, 217, 61, 0.5);
  font-family: 'Impact', 'Arial Black', sans-serif;
  letter-spacing: 1px;
}

html[data-theme="light"][data-color="meme"] .pill{
  border: 2px solid #ff6b35;
  background: linear-gradient(120deg, rgba(255, 107, 53, 0.15), rgba(255, 217, 61, 0.15));
  color: #ff6b35;
  font-weight: 700;
  text-transform: uppercase;
}

html[data-theme="light"][data-color="meme"] #schoolState,
html[data-theme="light"][data-color="meme"] #tzOut,
html[data-theme="light"][data-color="meme"] #dateOut{
  color: #ff6b35;
}

/* Dark mode text colors */
html[data-theme="dark"][data-color="meme"] .label,
html[data-theme="dark"][data-color="meme"] .muted,
html[data-theme="dark"][data-color="meme"] .subclock,
html[data-theme="dark"][data-color="meme"] .clock,
html[data-theme="dark"][data-color="meme"] .countdown,
html[data-theme="dark"][data-color="meme"] #dateOut,
html[data-theme="dark"][data-color="meme"] #clockOut,
html[data-theme="dark"][data-color="meme"] #elapsedOut,
html[data-theme="dark"][data-color="meme"] #leftOut,
html[data-theme="dark"][data-color="meme"] #currentName,
html[data-theme="dark"][data-color="meme"] #nextName{
  color: #ffd93d;
}

html[data-theme="dark"][data-color="meme"] #clockOut{
  color: #ffd93d;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  white-space: nowrap;
  text-shadow: 
    2px 2px 0 #ff6b35,
    -1px -1px 0 #ff6b9d;
  font-family: 'Impact', 'Arial Black', sans-serif;
  letter-spacing: 2px;
  animation: shake 0.5s ease-in-out infinite;
}

html[data-theme="dark"][data-color="meme"] .pill{
  border: 2px solid #ffd93d;
  background: linear-gradient(120deg, rgba(255, 217, 61, 0.2), rgba(255, 107, 53, 0.15));
  color: #ffd93d;
  font-weight: 700;
  text-transform: uppercase;
}

html[data-theme="dark"][data-color="meme"] #schoolState,
html[data-theme="dark"][data-color="meme"] #tzOut,
html[data-theme="dark"][data-color="meme"] #dateOut{
  color: #ffd93d;
}

/* Progress bar - rainbow gradient */
html[data-color="meme"] .progress{
  background: linear-gradient(90deg, #ff6b35, #ffd93d, #4ecdc4, #ff6b9d, #a855f7);
  background-size: 200% 100%;
  animation: rainbow 3s linear infinite;
  box-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
}

html[data-color="meme"] .progress-wrap{
  background: rgba(255, 217, 61, 0.1);
  border: 2px solid rgba(255, 217, 61, 0.3);
  border-radius: 4px;
}

/* Buttons with meme style */
html[data-color="meme"] .btn{
  background: linear-gradient(135deg, #ff6b35, #ffd93d);
  border: 2px solid #1a1a2e;
  box-shadow: 3px 3px 0 #1a1a2e;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.1s ease;
}

html[data-color="meme"] .btn:hover{
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #1a1a2e;
}

html[data-color="meme"] .btn:active{
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #1a1a2e;
}

/* Icon buttons */
html[data-color="meme"] .icon-btn:hover{
  background: rgba(255, 217, 61, 0.2);
  transform: scale(1.1) rotate(5deg);
}

/* Chips */
html[data-color="meme"] .chip{
  border: 2px solid var(--line);
  font-weight: 700;
}

html[data-color="meme"] .chip[aria-pressed="true"]{
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 217, 61, 0.3));
  border-color: #ff6b35;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

/* Schedule table */
html[data-color="meme"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.15), rgba(255, 217, 61, 0.1));
  border-left: 4px solid #ff6b35;
}

html[data-color="meme"] .schedule th{
  border-bottom: 3px solid #ffd93d;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Status badges */
html[data-color="meme"] .status--current{
  background: linear-gradient(135deg, #ff6b35, #ffd93d);
  color: #1a1a2e;
  font-weight: 800;
  text-transform: uppercase;
  border: 2px solid #1a1a2e;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

html[data-color="meme"] .status--next{
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
  color: #1a1a2e;
  font-weight: 800;
  text-transform: uppercase;
  border: 2px solid #1a1a2e;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

html[data-color="meme"] .status--done{
  background: rgba(128, 128, 128, 0.3);
  text-decoration: line-through;
}

/* Dialogs/Modals */
html[data-color="meme"] dialog{
  border: 3px solid;
  border-image: linear-gradient(45deg, #ff6b35, #ffd93d, #4ecdc4) 1;
  box-shadow: 
    6px 6px 0 rgba(0, 0, 0, 0.3),
    0 25px 80px rgba(0, 0, 0, 0.5);
}

html[data-color="meme"] dialog::backdrop{
  background: rgba(26, 26, 46, 0.9);
}

/* Tips section - comic speech bubble style */
html[data-color="meme"] section:last-of-type{
  border: 2px solid #ffd93d;
  position: relative;
}

/* Fun hover effects */
html[data-color="meme"] .card:hover{
  transform: rotate(-0.5deg);
  transition: transform 0.2s ease;
}

/* Scrollbar styling */
html[data-color="meme"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #ff6b35, #ffd93d);
  border: 2px solid #1a1a2e;
}

html[data-color="meme"] ::-webkit-scrollbar-track{
  background: rgba(255, 217, 61, 0.1);
}

/* Impact font for headers in meme theme */
html[data-color="meme"] .onboard-title,
html[data-color="meme"] .modal-header strong{
  font-family: 'Impact', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ========================================
   MEME IMAGE BACKGROUNDS FOR UI ELEMENTS
   ======================================== */

/* Pills with meme backgrounds */
html[data-color="meme"] #schoolState{
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.85), rgba(255, 217, 61, 0.85)),
    url('../images/This is fine 3.jpg') center/cover no-repeat !important;
  border: 2px solid #ff6b35 !important;
  padding: 6px 14px !important;
}

html[data-color="meme"] #tzOut{
  background: 
    linear-gradient(135deg, rgba(78, 205, 196, 0.85), rgba(68, 160, 141, 0.85)),
    url('../images/Kirby sign.jpg') center/cover no-repeat !important;
  border: 2px solid #4ecdc4 !important;
  padding: 6px 14px !important;
}

/* Status badges with meme backgrounds */
html[data-color="meme"] .status--current{
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.9), rgba(255, 217, 61, 0.9)),
    url('../images/Shrek.jpg') center/cover no-repeat !important;
  position: relative;
  overflow: hidden;
}

html[data-color="meme"] .status--next{
  background: 
    linear-gradient(135deg, rgba(78, 205, 196, 0.9), rgba(68, 160, 141, 0.9)),
    url('../images/Drake.png') center/cover no-repeat !important;
  position: relative;
  overflow: hidden;
}

html[data-color="meme"] .status--done{
  background: 
    linear-gradient(135deg, rgba(100, 100, 100, 0.9), rgba(80, 80, 80, 0.9)),
    url('../images/Crying Michael Jordan pleure.jpg') center/cover no-repeat !important;
}

/* Themed cards with meme overlays */
html[data-color="meme"] .themed-card:first-of-type{
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.92), rgba(255, 217, 61, 0.88)),
    url('../images/Expanding brain cerveau mind 2.jpg') right bottom/40% auto no-repeat,
    var(--card) !important;
}

html[data-color="meme"] .themed-card:last-of-type{
  background: 
    linear-gradient(135deg, rgba(78, 205, 196, 0.92), rgba(68, 160, 141, 0.88)),
    url('../images/Spiderman hey.jpg') right bottom/35% auto no-repeat,
    var(--card) !important;
}

/* Progress bar with meme texture */
html[data-color="meme"] .progress{
  background: 
    linear-gradient(90deg, rgba(255, 107, 53, 0.9), rgba(255, 217, 61, 0.9), rgba(78, 205, 196, 0.9)),
    url('../images/Tom et Jerry gap.jpg') center/cover no-repeat !important;
  background-size: 200% 100%, cover !important;
  animation: rainbow 3s linear infinite !important;
}

/* Main button with meme flair */
html[data-color="meme"] .btn{
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.95), rgba(255, 217, 61, 0.95)),
    url('../images/Strong opinions.jpg') center/cover no-repeat !important;
  position: relative;
  overflow: hidden;
}

/* Quick action buttons with different memes */
html[data-color="meme"] .quick-action{
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.9)),
    url('../images/Kirby speech.jpg') center/cover no-repeat !important;
  border: 2px solid var(--line) !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

html[data-color="meme"] .quick-action:hover{
  background: 
    linear-gradient(135deg, rgba(255, 217, 61, 0.85), rgba(255, 107, 53, 0.85)),
    url('../images/Kirby speech.jpg') center/cover no-repeat !important;
  transform: scale(1.05);
}

html[data-color="meme"] .quick-action.danger{
  background: 
    linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9)),
    url('../images/Joker sign slam.jpg') center/cover no-repeat !important;
}

/* Chip buttons with meme hints */
html[data-color="meme"] .chip[aria-pressed="true"]{
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.88), rgba(255, 217, 61, 0.88)),
    url('../images/upvote.jpg') center/cover no-repeat !important;
  border-color: #ff6b35 !important;
}

/* Icon buttons with meme hover */
html[data-color="meme"] .icon-btn{
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

html[data-color="meme"] .icon-btn:hover{
  background: 
    linear-gradient(135deg, rgba(255, 217, 61, 0.7), rgba(255, 107, 53, 0.7)),
    url('../images/Tom surprise.jpg') center/cover no-repeat !important;
  transform: scale(1.15) rotate(8deg);
}

/* Schedule table rows with meme accents */
html[data-color="meme"] .schedule tr.active{
  background: 
    linear-gradient(90deg, rgba(255, 107, 53, 0.2), rgba(255, 217, 61, 0.1), transparent),
    url('../images/Golden Wind 1.jpg') right center/60px auto no-repeat !important;
}

/* Table header with meme texture */
html[data-color="meme"] .schedule thead{
  background: 
    linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95)),
    url('../images/Small brain vs big brain petit gros cerveau.jpg') center/cover no-repeat !important;
}

/* Modal headers with meme backgrounds */
html[data-color="meme"] .modal-header{
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 217, 61, 0.1)),
    url('../images/Scoubidou reveal.jpg') right center/80px auto no-repeat !important;
  border-bottom: 3px solid #ffd93d !important;
}

/* Onboarding card with meme accent */
html[data-color="meme"] .onboard-card{
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 248, 225, 0.97)),
    url('../images/The scroll of truth.jpg') right bottom/120px auto no-repeat !important;
  border: 3px solid #ffd93d !important;
  box-shadow: 6px 6px 0 rgba(255, 107, 53, 0.4) !important;
}

html[data-theme="dark"][data-color="meme"] .onboard-card{
  background: 
    linear-gradient(135deg, rgba(26, 26, 46, 0.97), rgba(22, 33, 62, 0.97)),
    url('../images/The scroll of truth.jpg') right bottom/120px auto no-repeat !important;
}

/* Welcome overlay with meme */
html[data-color="meme"] #welcome .onboard-card{
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.95), rgba(255, 217, 61, 0.95)),
    url('../images/Shrek.jpg') right center/100px auto no-repeat !important;
}

/* Tips section with meme background */
html[data-color="meme"] section:last-of-type{
  background: 
    linear-gradient(135deg, rgba(var(--card), 0.95), rgba(var(--card), 0.95)),
    url('../images/Rick Morty - What is my purpose.jpg') right center/80px auto no-repeat !important;
  border: 2px solid #ffd93d !important;
}

/* Kiosk button with meme */
html[data-color="meme"] .kiosk-exit-btn{
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.9), rgba(255, 217, 61, 0.9)),
    url('../images/Hit door hommen kick man door porte pied.png') center/cover no-repeat !important;
  border: 3px solid #1a1a2e !important;
}

/* Kiosk keypad buttons with memes */
html[data-color="meme"] .kiosk-key{
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.95)),
    url('../images/Minecraft apple.jpg') center/cover no-repeat !important;
  border: 2px solid #ffd93d !important;
  font-weight: 800;
}

html[data-color="meme"] .kiosk-key:hover{
  background: 
    linear-gradient(135deg, rgba(255, 217, 61, 0.9), rgba(255, 107, 53, 0.9)),
    url('../images/Minecraft apple.jpg') center/cover no-repeat !important;
  transform: scale(1.1);
}

/* Day over message with meme frame */
html[data-color="meme"] .dayover-message{
  border: 4px solid #ffd93d !important;
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 217, 61, 0.1)),
    url('../images/Teletubbies in a circle.jpg') center/cover no-repeat !important;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Tab buttons with meme hints */
html[data-color="meme"] .tab[aria-selected="true"]{
  background: 
    linear-gradient(135deg, rgba(255, 107, 53, 0.9), rgba(255, 217, 61, 0.9)),
    url('../images/Putting on clown makeup maquillage.jpg') center/cover no-repeat !important;
  color: #1a1a2e !important;
  font-weight: 800;
  border: 2px solid #1a1a2e !important;
}

/* Editor blocks container with meme texture */
html[data-color="meme"] .blocks-container{
  background: 
    linear-gradient(135deg, rgba(255, 248, 225, 0.98), rgba(255, 255, 255, 0.98)),
    url('../images/Gravity fall feuille papier lire paper read.jpg') right bottom/100px auto no-repeat !important;
  border: 2px dashed #ffd93d !important;
}

html[data-theme="dark"][data-color="meme"] .blocks-container{
  background: 
    linear-gradient(135deg, rgba(26, 26, 46, 0.98), rgba(22, 33, 62, 0.98)),
    url('../images/Gravity fall feuille papier lire paper read.jpg') right bottom/100px auto no-repeat !important;
}