/* Visual polish for the child home (interface pass). Loaded after home-v4.css. Classes only. */
body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 246, 200, 0.55), transparent 55%),
    url("/assets/home/world-bg-v3.jpg") center / cover no-repeat fixed,
    #8fd3ff;
}

/* Cards: colored fill is see-through so the scene shows behind the art */
.h4-tile {
  -webkit-backdrop-filter: blur(3px) saturate(1.1);
  backdrop-filter: blur(3px) saturate(1.1);
}
.h4-character-maker { background: linear-gradient(180deg, rgba(183, 123, 255, 0.72), rgba(124, 60, 240, 0.62)); }
.h4-storyverse { background: linear-gradient(180deg, rgba(255, 214, 107, 0.72), rgba(255, 159, 46, 0.62)); }
.h4-narrator { background: linear-gradient(180deg, rgba(126, 232, 138, 0.72), rgba(47, 179, 90, 0.62)); }
.h4-library { background: linear-gradient(180deg, rgba(126, 200, 255, 0.72), rgba(47, 123, 224, 0.62)); }
.h4-print { background: linear-gradient(180deg, rgba(255, 163, 209, 0.72), rgba(240, 72, 142, 0.62)); }
.h4-games { background: linear-gradient(180deg, rgba(127, 230, 255, 0.72), rgba(42, 166, 232, 0.62)); }

/* Logo: the supplied PNG is used as-is (no HTML lettering or plate) */
.h4-logo { display: block; width: min(100%, 520px); justify-self: center; }
.h4-logo-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(30, 15, 0, 0.45)); }

/* Logo: dimensional letters and a gold rim on the plate */
.h4-logo-plate {
  background: linear-gradient(180deg, #d9994f 0%, #8a4b1c 60%, #5e3212 100%);
  border: 5px solid #ffd978;
  box-shadow: 0 16px 28px -8px rgba(30, 15, 0, 0.75), inset 0 4px 0 rgba(255, 255, 255, 0.4), inset 0 -6px 0 rgba(0, 0, 0, 0.25);
}
.h4-logo-word {
  text-shadow: 0 5px 0 #0b3a7a, 0 10px 14px rgba(0, 0, 0, 0.45);
  -webkit-text-stroke: 3px #123c8c;
}
.h4-logo-word .h4-ai {
  color: #fff27a;
  -webkit-text-stroke: 3px #b34a00;
  text-shadow: 0 5px 0 #b34a00, 0 10px 14px rgba(0, 0, 0, 0.45);
}
.h4-logo-word .h4-lab {
  color: #ffb13b;
  -webkit-text-stroke: 3px #8a2c00;
  text-shadow: 0 5px 0 #8a2c00, 0 10px 14px rgba(0, 0, 0, 0.45);
}
.h4-logo-tag {
  background: linear-gradient(180deg, #b77bff, #5b25d6);
  border-color: #fff;
  box-shadow: 0 6px 12px -4px rgba(40, 10, 100, 0.6);
}

/* Cards: glossy top, inner light, soft colored glow */
.h4-tile {
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 30px -12px rgba(20, 10, 60, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.55), inset 0 -10px 18px rgba(0, 0, 0, 0.12);
}
.h4-tile::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 4px;
  height: 38%;
  border-radius: 26px 26px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.h4-tile-art {
  width: 70%;
  height: 66%;
  top: 4%;
}

/* Icon badges: ringed, like the target */
.h4-badge {
  width: 46px;
  height: 46px;
  font-size: 20px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15));
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Titles: heavier shadow for contrast on bright art */
.h4-tile-title {
  text-shadow: 0 3px 0 rgba(60, 20, 90, 0.55), 0 0 14px rgba(0, 0, 0, 0.2);
  padding-left: 18px;
}

/* Subtitle pills: frosted and slightly tinted to match each card */
.h4-tile-sub {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.25);
  color: #3a2470;
}

/* Top controls: match the logo's gold rim */
.h4-points, .h4-gear, .h4-hello {
  border-color: #fff;
  box-shadow: 0 10px 20px -8px rgba(30, 15, 90, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}
.h4-hello {
  background: linear-gradient(180deg, rgba(70, 40, 120, 0.7), rgba(40, 20, 80, 0.6));
}