/* Parent benefits, the 12 adventure worlds (Flow art) and the game cards (Flow icons). */
.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.why-card { padding: 1.1rem 1.1rem 1rem; background: var(--panel); border: 2px solid #f1dfae; border-radius: 22px; box-shadow: 0 4px 0 rgba(217, 131, 0, .25); }
.why-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; font-size: 1.5rem; background: linear-gradient(160deg, #fff1c9, #ffe0ea); }
.why-card h3 { margin: .6rem 0 .3rem; font: 800 1.15rem/1.2 var(--font-display); }
.why-card p { margin: 0; color: var(--ink-soft); font-weight: 700; font-size: .95rem; }

.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; margin-top: 1.25rem; }
.world-card { overflow: hidden; background: var(--panel); border: 3px solid var(--honey); border-radius: 24px; box-shadow: 0 6px 0 var(--honey-deep), 0 16px 32px rgba(37, 75, 69, .12); display: flex; flex-direction: column; }
.world-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.world-body { padding: .9rem 1rem 1.05rem; }
.world-body h3 { margin: 0; font: 800 1.3rem/1.15 var(--font-display); }
.world-tag { display: inline-block; margin: .35rem 0 .55rem; padding: .15rem .65rem; border-radius: 99px; background: #fff1c9; color: #8a5200; font-weight: 800; font-size: .82rem; }
.world-body p { margin: .3rem 0 0; font-size: .95rem; }
.world-benefit { color: #1f5a4b; }

.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.play-card { display: grid; grid-template-columns: 76px 1fr; gap: .9rem; align-items: start; padding: 1rem; background: var(--panel); border: 2px solid #f1dfae; border-radius: 22px; box-shadow: 0 4px 0 rgba(217, 131, 0, .25); }
.play-card .ico { width: 76px; height: 76px; border-radius: 20px; background-size: 400% 400%; background-repeat: no-repeat; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.play-card h3 { margin: 0 0 .25rem; font: 800 1.15rem/1.2 var(--font-display); }
.play-card p { margin: 0; font-size: .93rem; }
.play-benefit { margin-top: .35rem !important; color: #1f5a4b; font-weight: 800; }
.sub-h { margin-top: 2.2rem; }
@media (max-width: 600px) { .play-card { grid-template-columns: 60px 1fr; } .play-card .ico { width: 60px; height: 60px; } }