/* Shared paper, watercolor washes and tiny hand-drawn stars. */
html { background: #f7f4e9; }
body {
  background-image: radial-gradient(ellipse at 8% 15%, #bdcfd92e, transparent 40%), radial-gradient(ellipse at 93% 70%, #d4c68e24, transparent 42%);
  background-color: #f7f4e9;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='290' viewBox='0 0 340 290'%3E%3Cg fill='none' stroke='%23b49b60' stroke-opacity='.2' stroke-width='1'%3E%3Cpath d='M41 33l2 7 7 2-7 2-2 7-2-7-7-2 7-2zM281 197l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/g%3E%3Cg fill='%23b49b60' fill-opacity='.18'%3E%3Ccircle cx='198' cy='67' r='1'/%3E%3Ccircle cx='112' cy='243' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.welcome { display: flex; align-items: center; text-align: left; gap: 24px; padding: 18px 0 28px; }
.welcome-prince { width: 38%; max-width: 320px; height: auto; flex-shrink: 0; mix-blend-mode: multiply; mask-image: radial-gradient(ellipse, #000 52%, #000c 65%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse, #000 52%, #000c 65%, transparent 74%); }
.welcome-copy { flex: 1; min-width: 0; }
.welcome h1 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; }
.welcome h1, .world h2, .brand { font-family: "Hanzi Kai", "STKaiti", "KaiTi", "Songti SC", serif; }
.eyebrow { color: #8a7753; }
.world { border-color: #cccbb8; border-radius: 48% 3% 45% 4% / 3% 45% 4% 48%; box-shadow: 0 5px 15px #7e80600b; background: #fffdf6d9; }
.scene, .garden .scene { height: 150px; background: radial-gradient(ellipse, #d7e5df80, transparent 72%); }
.garden .scene { background: radial-gradient(ellipse, #e8dfae70, transparent 72%); }
.scene::after { display: none; }
.scene svg { width: 100%; height: 100%; }
.world-body { padding: 18px 28px 25px; }
.world h2 { font-weight: 600; }
.go { background: #627e70; border-radius: 18px 12px 17px 13px; }
.garden .go { background: #8b8b58; }
.outside { background: #eae8d959; border-color: #c6c3a6; border-radius: 20px 28px 22px 26px; }
.kids-nav { background: #f7f4e9ed; border-color: #d8d4bf; }
/* Keep the mathematics objects interactive over a quieter painted garden. */
body.kids-math { --brand: #a47d44; --good: #68896b; --hint: #b28a3d; --card: #fffdf6; --muted: #736c5b; --ink: #3f4c44; }
.kids-math .top { background: #fffdf5d9; box-shadow: 0 1px 0 #d8d4bf; }
.kids-math .top h1 { color: #657d68; font-family: "STKaiti", "KaiTi", serif; }
.kids-math .garden { background: radial-gradient(ellipse at 25% 10%, #f8f2d6aa, transparent 50%), linear-gradient(#dce5e8, #edf0e6 62%, #ced9b6 63%, #b7c69f); border-bottom: 2px solid #a4b18b; }
.kids-math .stat, .kids-math .icon-btn { background: #eee9d9; box-shadow: none; }
@media (max-width: 620px) {
  .welcome { flex-direction: column; gap: 0; padding: 10px 0 25px; text-align: center; }
  .welcome-prince { width: 180px; }
  .welcome p { font-size: 15px; }
  .scene, .garden .scene { height: 130px; }
}