/* PlayCalm Kids Corner: big buttons, cheerful colours. */
.main-kids { padding-bottom: 12px; }
.k-hero { display: flex; align-items: center; gap: 18px; margin: 20px 0 16px; padding: 18px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #FFF4D6, #FDE3EC 55%, #DDF1FB); border: 3px solid #F2B84B; color: #3A2A10; }
.k-hero h1 { font: 800 34px var(--font-head); margin: 0; }
.k-buddy { width: 150px; flex: 0 0 150px; }
.k-buddy svg { width: 100%; height: auto; }
.k-bubble { margin: 10px 0 0; background: #fff; border: 2px solid #F2B84B; border-radius: 18px; padding: 12px 16px; font-weight: 700; font-size: 19px; color: #3A2A10; position: relative; }
.k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.k-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 14px; min-height: 220px; border-radius: 24px;
  background: var(--card); border: 4px solid var(--k); box-shadow: 0 6px 0 var(--k); color: var(--text); text-decoration: none; font: inherit; cursor: pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out; }
.k-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--k); }
@media (hover: hover) and (pointer: fine) { .k-card:hover { transform: translateY(-2px); } }
.k-card strong { font: 800 24px var(--font-head); }
.k-desc { color: var(--text-2); font-size: 16px; }
.k-ico .game-icon-box { width: 84px; height: 84px; flex-basis: 84px; border-radius: 20px; }
.k-go { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--k); color: #2B2210; font-weight: 800; font-size: 19px; }
.k-card.soon { opacity: .85; }
.k-go.k-soon { background: var(--daily-bg); color: var(--daily); border: 2px solid var(--daily-line); }
.k-back { text-align: center; margin: 22px 0 0; }
:root[data-theme="dark"] .k-hero { background: linear-gradient(135deg, #3A3220, #3A2630 55%, #1F3440); border-color: #8A6A2A; color: #FFF4D6; }
:root[data-theme="dark"] .k-bubble { background: #26302C; color: #FFF4D6; border-color: #8A6A2A; }
@media (max-width: 640px) {
  .k-hero { flex-direction: column; text-align: center; padding: 14px; }
  .k-hero h1 { font-size: 28px; }
  .k-buddy { width: 120px; flex-basis: auto; }
  .k-card { min-height: 190px; }
}