/* Clover page: fun toon branding. Chunky outlines, hard offset shadows, bouncy greens. */
.toon { --leaf: #F0457B; --leaf-2: #FF8FB1; --leaf-deep: #3A0C20; --ink: #14060C; --pop: #FFD43B; --sky: #7CC8FF;
  --toon: "Baloo 2", "Geist", ui-rounded, system-ui, sans-serif; background: #1A0610; }
.toon h1, .toon h2, .toon h3 { font-family: var(--toon); letter-spacing: -0.01em; }
.toon h1 { font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 800; line-height: .98; }
.toon h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; }
.toon h3 { font-size: 1.5rem; font-weight: 800; }
.toon .band { border-top: 0; }
.t-hero { padding: clamp(56px, 9vw, 112px) 0; background: radial-gradient(circle at 15% 20%, rgba(255, 143, 177, .18), transparent 40%), radial-gradient(circle at 85% 70%, rgba(255, 212, 59, .12), transparent 35%), #1A0610; }
.t-hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.t-hero__text { display: grid; gap: 22px; }
.t-hero .lede { color: #FBD6E2; }
.t-badge { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--leaf); color: var(--ink); font: 800 1rem var(--toon); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.t-badge img { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.t-mascot { position: relative; justify-self: center; width: min(420px, 100%); aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: var(--leaf); border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); display: grid; place-items: center; overflow: hidden; animation: wobble 6s ease-in-out infinite; }
.t-mascot img { width: 82%; height: auto; }
@keyframes wobble { 50% { border-radius: 55% 45% 48% 52% / 52% 58% 42% 48%; transform: rotate(-2deg); } }
.t-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 16px; font: 800 1.1rem var(--toon); text-decoration: none; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.t-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.t-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.t-btn--leaf { background: var(--leaf); color: var(--ink); }
.t-btn--pop { background: var(--pop); color: var(--ink); }
.t-btn--leaf:hover, .t-btn--pop:hover { color: var(--ink); }
.t-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.t-card { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 24px; border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); color: var(--ink); }
.t-card p, .t-card li { color: #3A1022; }
.t-card ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-weight: 500; }
.t-card--leaf { background: var(--leaf-2); }
.t-card--pop { background: var(--pop); }
.t-card--sky { background: var(--sky); }
.t-card--cream { background: #F3F7E9; }
.t-card .emoji { font-size: 2.2rem; line-height: 1; }
.t-band { background: var(--leaf-deep); }
.t-band .intro { color: #F7C6D6; }
.t-gold { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px; border-radius: 26px; background: linear-gradient(135deg, #FFE27A, #F5B90A); color: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.t-gold h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.t-gold p { color: #3B2C00; }
.t-gold .coin { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #FFF4C2; border: 4px solid var(--ink); font: 800 2rem var(--toon); }
.t-note { color: #E8A9BE; font-size: .95rem; }
@media (max-width: 900px) { .t-hero__in { grid-template-columns: 1fr; } .t-cards { grid-template-columns: 1fr; } .t-gold { grid-template-columns: 1fr; justify-items: start; } }
@media (prefers-reduced-motion: reduce) { .t-mascot { animation: none; } .t-btn { transition: none; } }
/* toon icons */
.ticon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: rgba(255, 255, 255, .55); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.ticon svg { width: 46px; height: 46px; display: block; }
.t-gold .coin svg { width: 50px; height: 50px; display: block; }
/* clover scene and loader */
.toon { background: transparent; }
.t-hero { background: radial-gradient(circle at 15% 20%, rgba(255, 143, 177, .16), transparent 40%), radial-gradient(circle at 85% 70%, rgba(255, 212, 59, .1), transparent 35%); }
.t-band { background: rgba(58, 12, 32, .78); }
.toon .scene::before { background: radial-gradient(circle, rgba(240, 69, 123, .4), transparent 65%); }
.toon .scene::after { background: radial-gradient(circle, rgba(255, 212, 59, .25), transparent 65%); }
.toon .top { background: rgba(26, 6, 16, .72); }
.toon .loader { background: #1A0610; }
.toon .loader__pulse { stroke: #F0457B; filter: drop-shadow(0 0 8px rgba(240, 69, 123, .65)); }
.toon .loader__name { font-family: var(--toon); font-weight: 800; color: #F7C6D6; }
/* facelift: Clover badge sits cleanly, no squeezed white disc */
.t-badge { gap: 8px; padding: 5px 16px 5px 8px; background: #FFF4F7; }
.t-badge img { width: 40px; height: 40px; border: 0; border-radius: 0; background: none; object-fit: contain; }
.toon .loader__logo { display: none; }
/* Clover field: soft colour wash with drifting clovers drawn by clover-bg.js */
body.toon { background: transparent; }
.clover-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(900px 600px at 10% 0%, rgba(240, 69, 123, .22), transparent 60%),
  radial-gradient(800px 600px at 100% 100%, rgba(255, 212, 59, .10), transparent 60%),
  #1A0610; }
.clover-field canvas { width: 100%; height: 100%; display: block; }