/* Brainy Lab child home (v4). Classes only, no inline styles (strict CSP). */
:root {
  --h4-navy: #2b1a6b;
  --h4-font: "Fredoka", "Baloo 2", "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #8fd3ff url("/assets/home/world-bg.jpg") center / cover no-repeat fixed; font-family: var(--h4-font); color: #fff; }

.h4-page { min-height: 100vh; padding: 14px 16px 28px; max-width: 1100px; margin: 0 auto; }

/* Top bar: greeting, logo, points, settings */
.h4-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.h4-hello { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(40, 20, 80, 0.55); border: 2px solid rgba(255, 255, 255, 0.85); color: #fff; text-decoration: none; font: 700 clamp(15px, 2.2vw, 20px) var(--h4-font); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6); }
.h4-hello img { width: clamp(44px, 6vw, 60px); height: clamp(44px, 6vw, 60px); border-radius: 50%; background: #fff; border: 3px solid #fff; object-fit: cover; }

.h4-logo { text-align: center; text-decoration: none; }
.h4-logo-plate { display: inline-block; padding: 8px 34px 10px; border-radius: 22px; background: linear-gradient(180deg, #c98a48, #7a4318 75%); border: 4px solid #f5c26b; box-shadow: 0 12px 24px -8px rgba(30, 15, 0, 0.7), inset 0 3px 0 rgba(255, 255, 255, 0.35); }
.h4-logo-word { display: block; font: 900 clamp(38px, 7vw, 72px)/1 var(--h4-font); letter-spacing: 1px; color: #7fd8ff; -webkit-text-stroke: 3px #0b3a7a; paint-order: stroke fill; text-shadow: 0 4px 0 #0b3a7a; }
.h4-logo-word .h4-ai { color: #ffd23f; -webkit-text-stroke: 3px #8a3b00; }
.h4-logo-word .h4-lab { color: #ff9f2e; -webkit-text-stroke: 3px #7a2a00; }
.h4-logo-tag { display: inline-block; margin-top: 4px; padding: 3px 16px; border-radius: 999px; background: linear-gradient(180deg, #9a5cff, #4a1fc0); border: 2px solid #e3d3ff; font: 700 clamp(12px, 1.8vw, 16px) var(--h4-font); color: #fff; }

.h4-tools { justify-self: end; display: inline-flex; align-items: center; gap: 10px; }
.h4-points { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 6px; border-radius: 999px; background: linear-gradient(180deg, #5a3cb0, #2b1a6b); border: 3px solid #fff; font: 900 22px var(--h4-font); color: #fff; box-shadow: 0 10px 20px -8px rgba(30, 15, 90, 0.6); }
.h4-points i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a0, #ffb800); font-style: normal; font-size: 20px; }
.h4-gear { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(180deg, #5a3cb0, #2b1a6b); border: 3px solid #fff; color: #fff; text-decoration: none; font-size: 24px; box-shadow: 0 10px 20px -8px rgba(30, 15, 90, 0.6); }

/* Six tiles */
.h4-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 20px); margin-top: clamp(14px, 3vw, 26px); }
.h4-tile { position: relative; display: block; min-height: clamp(190px, 28vw, 250px); border-radius: 30px; border: 4px solid rgba(255, 255, 255, 0.9); text-decoration: none; color: #fff; overflow: visible; box-shadow: 0 14px 26px -10px rgba(20, 10, 60, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.45); transition: transform 0.15s ease; }
.h4-tile:hover, .h4-tile:focus-visible { transform: translateY(-3px); }
.h4-tile:focus-visible { outline: 4px solid #ffd23f; outline-offset: 3px; }
.h4-tile-art { position: absolute; left: 50%; top: 6%; width: 64%; height: 62%; transform: translateX(-50%); object-fit: contain; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25)); }
.h4-tile-title { position: absolute; left: 0; right: 0; top: 60%; display: flex; align-items: center; gap: 8px; padding-left: 16px; font: 900 clamp(18px, 2.6vw, 26px)/1.05 var(--h4-font); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.h4-badge { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); border: 2px solid #fff; font-size: 18px; }
.h4-tile-sub { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: calc(100% - 28px); padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: #3a2470; font: 700 clamp(11px, 1.5vw, 15px) var(--h4-font); text-align: center; line-height: 1.2; }

.h4-character-maker { background: linear-gradient(180deg, #b77bff, #7c3cf0); }
.h4-storyverse { background: linear-gradient(180deg, #ffd66b, #ff9f2e); }
.h4-narrator { background: linear-gradient(180deg, #7ee88a, #2fb35a); }
.h4-library { background: linear-gradient(180deg, #7ec8ff, #2f7be0); }
.h4-print { background: linear-gradient(180deg, #ffa3d1, #f0488e); }
.h4-games { background: linear-gradient(180deg, #7fe6ff, #2aa6e8); }

/* Phones: two columns, labels stay readable */
@media (max-width: 720px) {
  .h4-tiles { grid-template-columns: repeat(2, 1fr); }
  .h4-tile { min-height: 0; aspect-ratio: 1 / 1.05; }
  .h4-top { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .h4-hello { justify-self: start; font-size: 15px; padding: 4px 12px 4px 4px; }
  .h4-hello img { width: 34px; height: 34px; }
  .h4-tools { justify-self: end; }
  .h4-gear { width: 40px; height: 40px; font-size: 18px; }
  .h4-top .h4-logo { grid-column: 1 / -1; width: 100%; }
  .h4-top .h4-logo-img { width: min(70%, 280px); margin: 0 auto; }
  .h4-tiles { gap: 10px; margin-top: 10px; }
}
@media (max-width: 420px) {
  .h4-page { padding: 10px 10px 20px; }
  .h4-tile-art { top: 4%; height: 56%; }
  .h4-tile-title { top: 58%; padding-left: 10px; font-size: 16px; }
  .h4-badge { width: 32px; height: 32px; font-size: 15px; }
}