/* Games hub and the teacher-authored game player. */
.sg-section { margin-bottom: 28px; }
.sg-section h2 { font-size: 18px; margin: 0 0 12px; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.sg-tile {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.sg-tile h3 { margin: 0; font-size: 16px; }
.sg-tile p { margin: 0; font-size: 13px; color: #4a5160; }
.sg-tile .sg-btn { margin-top: auto; align-self: flex-start; }
.sg-tile-icon { font-size: 28px; }
.sg-tile-meta { font-size: 12px !important; color: #6b7280 !important; }
.sg-toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; align-items: flex-end; }
.sg-toolbar label { display: flex; flex-direction: column; font-size: 12px; gap: 4px; }
.sg-toolbar input, .sg-toolbar select { padding: 6px 8px; border: 1px solid #cfd4dc; border-radius: 6px; min-width: 200px; }
.sg-pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; }
.sg-btn {
    border: 1px solid #cfd4dc;
    background: #fff;
    color: #1f2937;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 14px;
    cursor: pointer;
}
.sg-btn:disabled { opacity: 0.5; cursor: default; }
.sg-btn-primary { background: var(--brand-primary, #667eea); border-color: var(--brand-primary, #667eea); color: #fff; }
.sg-btn-quiet { border-color: transparent; color: #6b7280; }
.sg-btn-sm { padding: 2px 8px; font-size: 13px; }
.sg-empty { color: #6b7280; font-size: 14px; }
.sg-status { min-height: 1em; font-size: 13px; color: #4a5160; }
.sg-status-error { color: #b42318; }
.sg-player-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.sg-player-bar h2 { margin: 0; font-size: 18px; }
.sg-scorebar { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #4a5160; margin-bottom: 6px; }
.sg-progress { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.sg-progress > div { height: 100%; background: var(--brand-primary, #667eea); }
.sg-card { background: #fff; border: 1px solid #e2e5ec; border-radius: 10px; padding: 20px; max-width: 760px; }
.sg-prompt { font-size: 18px; margin: 0 0 14px; white-space: pre-wrap; }
.sg-media { max-width: 100%; max-height: 260px; display: block; margin: 8px 0; border-radius: 6px; }
.sg-options { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.sg-option { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #e2e5ec; border-radius: 6px; cursor: pointer; }
.sg-free { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; }
.sg-free input { padding: 8px; font-size: 16px; border: 1px solid #cfd4dc; border-radius: 6px; }
.sg-matching { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sg-match-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 1fr); gap: 12px; align-items: center; }
.sg-match-row select { padding: 6px; border: 1px solid #cfd4dc; border-radius: 6px; }
.sg-ordering { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.sg-ordering li span { display: inline-block; min-width: 200px; margin-right: 8px; }
.sg-hints { margin: 0 0 8px; padding-left: 18px; color: #4a5160; font-size: 14px; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sg-feedback.sg-correct { border-color: #34a853; background: #f1faf3; }
.sg-feedback.sg-incorrect { border-color: #e0a100; background: #fffaf0; }
.sg-feedback-title { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.sg-summary h3 { margin-top: 0; }
.sg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 600px) {
    .sg-match-row { grid-template-columns: 1fr; }
    .sg-toolbar input, .sg-toolbar select { min-width: 0; width: 100%; }
}

/* Character stage beside the question (stacked above it on narrow screens). */
.sg-play-layout { display: flex; flex-direction: column; gap: 12px; }
.sg-play-layout.sg-has-stage { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); align-items: start; }
.sg-stage { position: relative; height: 260px; border-radius: 10px; background: linear-gradient(#e8f0ff, #f7fbff 70%, #e3f1df 70%); border: 1px solid #e2e5ec; overflow: hidden; }
.sg-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sg-play-main { min-width: 0; }
.sg-hint-text { font-size: 13px; color: #4a5160; margin: 0 0 8px; }
.sg-prompt-small { font-size: 14px; color: #4a5160; }
.sg-free-big input { font-size: 22px; padding: 12px; }

/* multiple_choice_grid: big answer tiles. */
.sg-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg-options-grid .sg-option { min-height: 64px; justify-content: center; text-align: center; font-size: 17px; border-width: 2px; border-radius: 10px; }
.sg-option:has(input:checked) { border-color: var(--brand-primary, #667eea); background: #f2f4ff; }

/* match_pairs: tap-to-pair tiles. */
.sg-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sg-pair-col { display: flex; flex-direction: column; gap: 8px; }
.sg-pair-tile { position: relative; min-height: 48px; padding: 8px 30px 8px 10px; border: 2px solid #cfd4dc; border-radius: 8px; background: #fff; font-size: 15px; text-align: left; cursor: pointer; }
.sg-pair-tile.sg-selected { border-color: var(--brand-primary, #667eea); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25); }
.sg-pair-tile.sg-paired { border-style: solid; background: #f6f7fb; }
.sg-pair-tile[data-pair-index="0"] { border-color: #1e88e5; }
.sg-pair-tile[data-pair-index="1"] { border-color: #43a047; }
.sg-pair-tile[data-pair-index="2"] { border-color: #e53935; }
.sg-pair-tile[data-pair-index="3"] { border-color: #8e24aa; }
.sg-pair-tile[data-pair-index="4"] { border-color: #fb8c00; }
.sg-pair-tile[data-pair-index="5"] { border-color: #00897b; }
.sg-pair-badge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-weight: 700; color: #4a5160; }

/* ordering_horizontal: a row of tiles. */
.sg-ordering-row { flex-direction: row; flex-wrap: wrap; padding-left: 0; list-style-position: inside; }
.sg-ordering-row li { border: 1px solid #cfd4dc; border-radius: 8px; padding: 8px; background: #fff; }
.sg-ordering-row li span { min-width: 0; display: block; margin: 0 0 6px; }

/* flashcard_flip. */
.sg-flashcard { max-width: 760px; perspective: 900px; }
.sg-flash-face { background: #fff; border: 1px solid #e2e5ec; border-radius: 12px; padding: 24px 20px; }
.sg-flash-front { min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; background: #fffdf3; }
.sg-flashcard.sg-flipped .sg-flash-back { animation: sg-flip-in 0.35s ease-out; }
@keyframes sg-flip-in { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }

/* speed_drill: draining time bar. */
.sg-drill-bar { height: 8px; background: #fde2e1; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.sg-drill-bar > div { height: 100%; width: 100%; background: #e53935; transition: width 0.25s linear; }
.sg-layout-speed_drill .sg-prompt { font-size: 24px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .sg-flashcard.sg-flipped .sg-flash-back { animation: none; }
    .sg-drill-bar > div { transition: none; }
}
@media (max-width: 760px) {
    .sg-play-layout.sg-has-stage { grid-template-columns: 1fr; }
    .sg-stage { height: 170px; }
}
@media (max-width: 420px) {
    .sg-options-grid { grid-template-columns: 1fr; }
    .sg-pairs { gap: 8px; }
    .sg-pair-tile { font-size: 14px; }
}

.sg-chip { display: inline-block; background: #eef; border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.sg-picked-why { margin: 0 0 8px; color: #4a5160; font-size: 14px; }
#sgMixItUp { margin-top: 10px; }
.sg-break-note { background: #eaf6ea; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
.sg-break-note { background: #eaf6ea; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }