.vskids-grid{display:grid;gap:16px}
.vskids-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vskids-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vskids-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:768px){.vskids-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.vskids-grid{grid-template-columns:1fr}}

.vskids-card{background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.06);overflow:hidden;display:flex;flex-direction:column}
.vskids-thumb img{width:100%;height:auto;display:block}
.vskids-body{padding:14px}
.vskids-title{margin:.2em 0}
.vskids-type{font-size:.85em;opacity:.7;margin-bottom:.25em}
.vskids-excerpt{margin:.25em 0 .75em}
.vskids-btn{display:inline-block;background:#ffcd00;border:none;border-radius:999px;padding:10px 16px;font-weight:700;text-decoration:none;color:#2a2a2a;cursor:pointer;transition:transform .05s}
.vskids-btn:active{transform:translateY(1px)}

.vskids-puzzle{max-width:520px}
.vskids-puzzle-canvas{width:100%;height:auto;background:#fafafa;border:2px solid #eee;border-radius:8px}
.vskids-puzzle-ui{margin-top:8px;display:flex;align-items:center;gap:12px}

.vskids-coloring{max-width:820px}
.vskids-coloring-canvas{width:100%;height:auto;border:2px solid #eee;border-radius:8px;background:#fff}
.vskids-tools{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}

.vskids-audio iframe{width:100%}

/* Memory grid */
.vskids-memory-grid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));max-width:720px}
@media (max-width:640px){.vskids-memory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vskids-cardflip{position:relative;aspect-ratio:3/4;border:none;cursor:pointer;perspective:800px;border-radius:10px;overflow:hidden;background:#f5f5f5}
.vskids-cardflip .front,.vskids-cardflip .back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .3s;backface-visibility:hidden}
.vskids-cardflip .front{background:#ffcd00;font-weight:800}
.vskids-cardflip .back{transform:rotateY(180deg)}
.vskids-cardflip.open .front{transform:rotateY(180deg)}
.vskids-cardflip.open .back{transform:rotateY(0)}
.vskids-cardflip.matched{outline:3px solid #4caf50}
.vskids-memory-ui{margin-top:10px;display:flex;gap:12px;align-items:center}

/* Badges */
.vskids-badges-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.vskids-badges-list li{background:#fff;border-radius:999px;padding:8px 12px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.vskids-badges .medal{margin-right:6px}

/* Kids modus */
.vskids-mode{font-size:1.15rem}
.vskids-mode .vskids-btn{padding:12px 18px;font-size:1rem}
.vskids-exit{margin-top:18px}
.vskids-exit details summary{cursor:pointer;font-weight:700}
.vskids-exit input{width:80px;margin:0 8px}

/* Storybook */
.vskids-story-header{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.vskids-story-cover{width:120px;height:auto;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.vskids-story-title{margin:.1em 0}
.vskids-story-char{opacity:.7;font-size:.9em}
.vskids-story-toc{margin:6px 0 10px}
.vskids-story-toc ol{margin:.5em 0 0 1.25em}
.vskids-story-pages{position:relative;max-width:820px}
.vskids-story-page{background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:18px;min-height:320px;line-height:1.6}
.vskids-story-page p{margin:0 0 .9em}
.vskids-story-page h2{margin-top:0}
.vskids-story-nav{display:flex;gap:12px;align-items:center;justify-content:center;margin:12px 0}
.vskids-story-actions{display:flex;gap:10px;justify-content:center}
.vskids-story-toc button{background:none;border:none;padding:0;color:#1a73e8;cursor:pointer}
.vskids-story-toc button:hover{text-decoration:underline}

/* HUB */
.vskids-hub{margin:8px 0 16px}
.vskids-hub-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.vskids-hub-tabs{display:flex;gap:6px;flex-wrap:wrap}
.vskids-hub-tab{background:#fff;border:1px solid #eee;border-radius:999px;padding:8px 12px;cursor:pointer}
.vskids-hub-tab.is-active{background:#ffcd00;border-color:#ffcd00;font-weight:700}
.vskids-hub-filters{display:flex;gap:8px;align-items:center}
.vskids-hub-search{padding:8px 10px;border:1px solid #e3e3e3;border-radius:8px;min-width:200px}
.vskids-hub-character{padding:8px 10px;border:1px solid #e3e3e3;border-radius:8px}
.vskids-hub-panel{display:none}
.vskids-hub-panel.is-active{display:block}
.vskids-hub-panel h3{margin:10px 0 8px}

.vskids-pagination .page-numbers a,
.vskids-pagination .page-numbers span {
  display:inline-block; padding:8px 12px; border:1px solid #eee; border-radius:999px; text-decoration:none;
}
.vskids-pagination .page-numbers .current { background:#ffcd00; border-color:#ffcd00; font-weight:700; }