/* Shared student presentation. Loaded after legacy styles; no effect on content or completion rules. */
:root {
  --student-ink: #102754;
  --student-muted: #647087;
  --student-page: #f7f9fc;
  --student-primary: #ffdb4d;
  --student-cyan: #55dfff;
  --student-soft: #e4faff;
  --student-success: #176342;
  --student-success-soft: #e9f6ef;
  --student-line: #dce4ef;
  --student-shadow: 0 6px 22px rgb(16 39 84 / 6%);
  --teacher-navy: var(--student-ink);
  --teacher-text: var(--student-ink);
  --teacher-muted: var(--student-muted);
  --teacher-line: var(--student-line);
  --teacher-panel-line: var(--student-line);
  --teacher-shadow-card: var(--student-shadow);
  --teacher-shadow-panel: var(--student-shadow);
  --teacher-shadow-button: 0 3px 0 rgb(16 39 84 / 12%);
}
html { color-scheme: light; }
body, body.auth-page, body.prototype-body {
  color: var(--student-ink);
  background: var(--student-page);
  font-family: Nunito, system-ui, sans-serif;
}
:where(button, a, select, input, summary):focus-visible {
  outline: 3px solid #245bb1 !important;
  outline-offset: 4px;
}
:where(button, select) { font: inherit; }
.student-style-picker {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px;
  color: var(--student-muted); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.student-style-picker select {
  min-height: 44px; padding: 8px 30px 8px 12px; border: 1px solid var(--student-line);
  border-radius: 12px; color: var(--student-ink); background: white; cursor: pointer;
}
h1, h2, h3, .module-title, .prototype-title-block h1 { color: var(--student-ink); font-weight: 800; line-height: 1.15; }
h1, .prototype-title-block h1 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
:where(.pill, .tag, .count-badge, .selected-program, .video-badge, .vocabulary-status, .assignment-mini-badge) {
  box-shadow: none; font-weight: 700;
}
body .module-action.play, body .player-button.primary, body .auth-button,
body .assignment-open-button, body .assignment-toggle-button, body .grammar-module-button,
body .grammar-button-primary, body .world-action, body .complete-button,
body #practice-save, body #practice-submit {
  background: var(--student-primary) !important; color: var(--student-ink) !important;
  border: 1px solid transparent; border-radius: 14px; min-height: 48px;
  box-shadow: var(--teacher-shadow-button); font-weight: 800;
}
body .player-button.secondary, body .player-button.quiet, body .module-action.done,
body .change-avatar, body .logout-button, body .icon-button, body .patatas-back, body .detail-back {
  color: var(--student-ink) !important; background: white !important;
  border: 1px solid var(--student-line); border-radius: 14px; min-height: 44px;
  box-shadow: none; font-weight: 700;
}
body .filter-chip { min-height: 44px; box-shadow: none; border-radius: 12px; }
body .filter-chip.is-active { background: var(--student-soft) !important; color: var(--student-ink) !important; outline: 2px solid var(--student-cyan); outline-offset: -2px; }
body button:disabled, body .player-button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
body .complete-button.is-completed, body .done-badge, body .vocabulary-status-fully-completed {
  color: var(--student-success) !important; background: var(--student-success-soft) !important; box-shadow: none;
}
/* A compact, common header replaces the old fixed purple sidebar. */
body .app-shell { width: min(1280px, 100%); margin: 0 auto; padding: 20px 28px 48px; }
body .hero { padding: 0; background: transparent; border: 0; box-shadow: none; margin: 0 0 24px; }
body .topbar, body .prototype-header, body .program-top {
  position: static; inset: auto; width: 100%; height: auto; min-height: 88px;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 20px; border: 1px solid var(--student-line); border-radius: 22px;
  background: white; box-shadow: var(--student-shadow); margin: 0 0 24px;
}
body .topbar .brand, body .prototype-header .brand, body .program-top .auth-logo-link {
  width: auto; padding: 0; border: 0; background: transparent; box-shadow: none;
}
body .topbar .brand-logo, body .prototype-header .brand-logo, body .program-top .auth-logo {
  width: 148px; height: 78px; max-height: 78px; object-fit: contain; border-radius: 0; filter: none;
}
/* `.topbar .user-menu` from the old sidebar outranks a bare `body .user-menu` on desktop. */
body .user-menu, body .topbar .user-menu { width: auto; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
body .user-menu .change-avatar, body .user-menu .logout-button { width: auto; padding: 10px 12px; font-size: 14px; }
body .user-menu .pill { max-width: 180px; }
body .nav-avatar { width: 42px; height: 42px; box-shadow: none; }
body .welcome { padding: 8px 4px; }
body .welcome h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
body .welcome .selected-program { margin-top: 10px; }
/* Game collection: navigation and progress span the row, never become game cards. */
body .modules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.activity-toolbar { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 4px; }
body .activity-toolbar .patatas-back { flex: 0 0 auto; width: auto; padding: 12px 16px; align-self: center; }
body .activity-toolbar .vocabulary-progress-panel {
  flex: 1 1 300px; display: grid; gap: 6px; min-height: 0; padding: 18px 22px;
  background: white; border: 1px solid var(--student-line); border-radius: 18px; box-shadow: none;
}
.vocabulary-progress-panel progress { width: 100%; height: 10px; accent-color: var(--student-success); }
.vocabulary-progress-panel small { color: var(--student-muted); font-weight: 600; }
body .module-card { padding: 20px; min-height: 0; gap: 14px; border: 1px solid var(--student-line); border-radius: 22px; box-shadow: var(--student-shadow); background: white; }
body .module-card::before { display: none; }
body .module-card .module-art { width: 58px; height: 58px; border-radius: 16px; background: var(--student-soft) !important; color: var(--student-ink); box-shadow: none; }
body .module-card .module-art span { font-size: 26px; }
body .module-card .module-title { font-size: 1.25rem; margin: 10px 0 16px; }
body .module-card .module-meta { gap: 6px; }
body .module-card .module-action { padding: 11px 20px; }
body .module-card.is-completed { border-color: #9dc9af; background: #fbfefc; }
body .progress-sync-status { color: var(--student-success); background: var(--student-success-soft); padding: 10px 14px; border-radius: 12px; }
body .progress-sync-status.is-error, body .scenario-feedback.is-error { color: #ae2c43; background: #fff1f2; }
/* Native frames share the same chrome; the embedded provider owns its game/video. */
body .player-view { padding: 16px; background: rgb(16 39 84 / 56%); overflow-y: auto; }
body .player-panel {
  width: min(1180px, 100%); min-height: 0; height: calc(100dvh - 32px);
  padding: 18px; border: 1px solid var(--student-line); border-radius: 24px;
  background: white; box-shadow: 0 20px 80px rgb(16 39 84 / 22%); gap: 12px;
}
body .player-topbar { padding: 0; }
body .player-title-wrap h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 4px 0; }
body .player-category { color: var(--student-muted); font-size: 12px; }
body .game-frame-wrap, body .video-frame-wrap { min-height: 0; height: 100%; border: 1px solid var(--student-line); border-radius: 16px; box-shadow: none; }
body .game-frame, body .video-frame { width: 100%; height: 100%; min-height: 0; }
body .player-actions { gap: 10px; padding: 0; display: flex; flex-wrap: wrap; }
body .player-actions .player-button { flex: 0 1 auto; width: auto; padding: 12px 22px; font-size: 15px; }
body .player-actions .player-button.primary { flex: 1 1 180px; }
/* World, route, library and profile share surfaces and type. */
body .prototype-shell, body .program-shell, body .profile-shell { width: min(1200px, 100%); padding: 20px 24px 48px; margin: auto; }
body .program-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
body .program-card::before { display: none; }
body .prototype-user { gap: 10px; }
body .prototype-title-block { margin-block: 20px; }
body .scenario-card, body .backpack-card, body .detail-heading, body .detail-pdf { border-radius: 22px; box-shadow: var(--student-shadow); }
body .adventure-hero { color: var(--student-ink); background: var(--student-soft); border: 1px solid #b8e6ef; border-radius: 22px; box-shadow: none; }
body .adventure-hero h1, body .adventure-hero p { color: var(--student-ink); }
body .adventure-hero::before, body .adventure-hero::after { display: none; }
body .adventure-summary { box-shadow: none; border-radius: 18px; }
body .adventure-navigator { border-color: var(--student-line); border-radius: 18px; box-shadow: none; }
body .adventure-navigator button, body .adventure-world-button { box-shadow: none; border-radius: 12px; min-height: 44px; }
body .adventure-stop-card { box-shadow: var(--student-shadow); border-color: var(--student-line); border-radius: 22px; }
body .adventure-stop-card strong { font-weight: 800; }
body .adventure-dialog { border-radius: 24px; }
body .adventure-dialog-content { padding: 24px; }
body .adventure-dialog-landscape { height: 110px; }
body .adventure-resource-zone { border-radius: 18px; box-shadow: none; }
body .adventure-dialog-navigation button, body .adventure-dialog-navigation a { min-height: 48px; box-shadow: none; border-radius: 12px; }
body .avatar-shell { width: min(960px, 100%); padding: 24px; }
body .avatar-card { border: 1px solid var(--student-line); border-radius: 24px; padding: 28px; box-shadow: var(--student-shadow); }
body .avatar-card::before { display: none; }
body .avatar-card .auth-logo { width: 170px; max-height: 96px; filter: none; }
body .avatar-card .auth-copy h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
body .avatar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body .avatar-option { border-radius: 18px; box-shadow: none; }
body .avatar-option img { background: var(--student-soft) !important; box-shadow: none; border-radius: 14px; }
body .avatar-option.is-selected { border-color: #176342; background: var(--student-success-soft); }
body .tp-top { background: white; color: var(--student-ink); border-bottom: 1px solid var(--student-line); flex-wrap: wrap; gap: 12px; }
body .tp-top a { color: var(--student-ink); }
/* Studio keeps identical tasks and controls in a quieter, compact arrangement. */
[data-student-style="studio"] .adventure-board { padding: 16px; background: white; border: 1px solid var(--student-line); border-radius: 20px; box-shadow: none; }
[data-student-style="studio"] :is(.adventure-cloud,.adventure-spark,.adventure-connector,.adventure-scene-bridge,.adventure-dialog-orbit) { display: none; }
[data-student-style="studio"] .adventure-scene { min-height: 0; padding: 18px; border: 0; background: transparent; box-shadow: none; }
[data-student-style="studio"] .adventure-scene::before, [data-student-style="studio"] .adventure-scene::after { display: none; }
[data-student-style="studio"] .adventure-scene-heading { background: var(--student-page); color: var(--student-ink); border-radius: 14px; box-shadow: none; }
[data-student-style="studio"] .adventure-trail { padding-top: 20px; gap: 12px; }
[data-student-style="studio"] .adventure-stop { min-height: 0; }
[data-student-style="studio"] .adventure-stop-button { width: 100%; margin: 0; flex-direction: row; text-align: left; padding: 0; }
[data-student-style="studio"] .adventure-stop-marker { flex: 0 0 48px; width: 48px; height: 48px; border-width: 3px; font-size: 22px; box-shadow: none; }
[data-student-style="studio"] .adventure-avatar { display: none; }
[data-student-style="studio"] .adventure-stop-card { flex: 1; padding: 16px 20px; border-radius: 16px; box-shadow: none; }
[data-student-style="studio"] .adventure-stop-card strong { font-size: 1.15rem; }
[data-student-style="studio"] .adventure-materials { justify-content: flex-start; }
[data-student-style="studio"] .adventure-stop-status { align-self: flex-start; }
[data-student-style="studio"] .adventure-dialog-landscape { height: 72px; }
@media (max-width: 800px) {
  body .modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .topbar .user-menu { order: 3; width: 100%; justify-content: flex-start; }
}
@media (max-width: 540px) {
  body .app-shell, body .prototype-shell, body .program-shell, body .profile-shell { padding: 12px 12px 32px; }
  body .topbar, body .prototype-header, body .program-top { gap: 10px; padding: 12px; border-radius: 18px; margin-bottom: 18px; }
  body .prototype-user, body .program-user { width: auto; flex-wrap: wrap; display: flex; }
  body .prototype-header .brand-logo, body .program-top .auth-logo, body .topbar .brand-logo { width: 118px; height: 62px; }
  body .student-style-picker { margin-left: auto; }
  body .user-menu .pill { max-width: 150px; }
  body .modules-grid { grid-template-columns: 1fr; }
  body .activity-toolbar .vocabulary-progress-panel { padding: 16px; }
  body .module-card { padding: 18px; }
  body .player-view { padding: 0; }
  body .player-panel { height: 100dvh; padding: 12px; border-radius: 0; border: 0; gap: 10px; }
  body .player-actions .player-button { flex: 1 1 140px; padding: 10px 12px; font-size: 14px; }
  body .adventure-dialog-content { padding: 18px; }
  body .avatar-shell { padding: 12px; }
  body .avatar-card { padding: 20px; }
  body .avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-student-style="studio"] .adventure-board, [data-student-style="studio"] .adventure-scene { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Keep small scene position markers distinct from action targets. */
body .adventure-scene-dots button { min-height: 0; }
body .adventure-hero h1, body .adventure-hero p { font-weight: 800; text-shadow: none; }
body:not(.auth-page) { padding-left: 0; }
body:not(.auth-page) .section-heading h2 { color: var(--student-ink); text-shadow: none; }
body:not(.auth-page) .section-heading .eyebrow { color: var(--student-muted); }
body .topbar .change-avatar::before, body .topbar .logout-button::before,
body .topbar .user-menu .pill::before { content: none; }
body .topbar .user-menu .pill, body .topbar .change-avatar, body .topbar .logout-button {
  justify-content: center; min-height: 44px; border-radius: 12px; box-shadow: none;
}
body details.assignments-panel { padding: 0; border: 1px solid var(--student-line); border-radius: 16px; margin-bottom: 20px; box-shadow: none; }
body details.assignments-panel::before { display: none; }
body details.assignments-panel summary { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; }
body details.assignments-panel summary::after { content: '+'; font-size: 24px; }
body details.assignments-panel[open] summary::after { content: '−'; }
body details.assignments-panel summary h2 { font-size: 1.05rem; }
body details.assignments-panel summary .eyebrow { display: none; }
body details.assignments-panel .assignments-list { padding: 0 20px 20px; }
body .topbar .change-avatar::before { content: none !important; }
/* Desktop leftovers of the old sidebar (styles.css, min-width: 1024px) stacked the player header
   and painted its buttons white on white. Only index.html uses .topbar. */
body .topbar .brand { margin: 0; }
body .topbar .user-menu { margin-top: 0; }
body .topbar .nav-avatar { width: 42px; height: 42px; margin-top: 0; box-shadow: none; }
body .topbar .user-menu .pill, body .topbar .change-avatar, body .topbar .logout-button {
  width: auto; padding: 10px 12px; font-size: 14px;
  color: var(--student-ink) !important; background: white !important; border: 1px solid var(--student-line);
}
body .topbar .user-menu #currentUserName { max-width: 180px; min-height: 44px; padding-block: 0; white-space: nowrap; text-overflow: ellipsis; }
body .topbar .change-avatar:hover, body .topbar .logout-button:hover { background: var(--student-soft) !important; }
body .adventure-dialog::backdrop { background: rgb(16 39 84 / 56%); backdrop-filter: blur(3px); }
body .adventure-dialog-card, body .adventure-dialog-content { background: white; }
body .adventure-dialog h2 { color: var(--student-ink); font-weight: 800; letter-spacing: -.02em; }
body .adventure-resource-zone { background: var(--student-page); border: 1px solid var(--student-line); }
body .adventure-resource-heading strong, body .adventure-action strong { color: var(--student-ink); font-weight: 800; }
body .adventure-action { min-height: 78px; background: white; border: 1px solid var(--student-line); border-radius: 16px; box-shadow: none; }
body .adventure-action > span:first-child { color: var(--student-ink); background: var(--student-soft); }
body .adventure-action-video { grid-column: auto; }
body .adventure-action:hover { border-color: #245bb1; }
body .adventure-dialog-close { width: 44px; height: 44px; border: 1px solid var(--student-line); color: var(--student-ink); box-shadow: none; }
[data-student-style="studio"] .adventure-dialog-landscape { min-height: 72px; padding: 12px; background: var(--student-soft) !important; }
[data-student-style="studio"] .adventure-dialog-landscape::before,
[data-student-style="studio"] .adventure-dialog-landscape::after { display: none; }
[data-student-style="studio"] .adventure-dialog-theme-icon { width: 44px; height: 44px; font-size: 22px; border: 0; transform: none; box-shadow: none; }
body #playerDone[aria-pressed="true"], body #videoWatched[aria-pressed="true"] { color: var(--student-success) !important; background: var(--student-success-soft) !important; box-shadow: none; }
body .avatar-option.is-selected { position: relative; }
body .avatar-option.is-selected::after { content: '✓'; position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: 50%; color: white; background: var(--student-success); }
@media (max-width: 540px) { body .adventure-dialog-actions { grid-template-columns: 1fr; } }
body .download-button, body .detail-pdf button {
  color: var(--student-ink); background: var(--student-primary); border: 1px solid transparent;
  border-radius: 14px; min-height: 48px; box-shadow: var(--teacher-shadow-button); font-weight: 800;
}
body .backpack-file-icon, body .detail-pdf-icon { background: var(--student-soft); color: var(--student-ink); }
body .audio-card, body .support-card { border: 1px solid var(--student-line); background: white; border-radius: 20px; box-shadow: var(--student-shadow); }
body details.assignments-panel summary .count-badge { margin-left: auto; }
@media (max-width: 540px) {
  body :is(.prototype-header,.program-top,.topbar) > :is(.brand,.auth-logo-link) { order: 1; }
  body :is(.prototype-header,.program-top,.topbar) > .student-style-picker { order: 2; gap: 5px; font-size: 12px; }
  body :is(.prototype-user,.program-user) { order: 3; width: 100%; justify-content: flex-start; }
}
/* Entry and invitation screens use the same neutral shell for students and guardians. */
body .auth-shell { width: min(100%, 540px); padding: 28px 18px; }
body .auth-shell.activation-shell { width: min(100%, 620px); }
body .auth-card {
  padding: 32px; gap: 22px; border: 1px solid var(--student-line);
  border-radius: 24px; background: white; box-shadow: var(--student-shadow);
}
body .auth-card::before { display: none; }
body .auth-card .auth-logo { width: 184px; height: 104px; object-fit: contain; border-radius: 0; filter: none; }
body .auth-card .auth-copy h1 { font-size: clamp(1.75rem, 5vw, 2.3rem); color: var(--student-ink); font-weight: 800; line-height: 1.15; }
body .auth-card .auth-copy p:last-child { color: var(--student-muted); font-weight: 600; line-height: 1.5; }
body .auth-card .eyebrow { color: #245bb1; }
body .auth-card .auth-form label { color: var(--student-ink); font-weight: 700; }
body .auth-card .auth-form input {
  min-height: 52px; padding: 12px 14px; border: 1px solid var(--student-line);
  border-radius: 12px; color: var(--student-ink); background: var(--student-page);
  font-size: 16px; font-weight: 600;
}
body .auth-card .auth-form input:focus { border-color: #245bb1; background: white; box-shadow: 0 0 0 3px rgb(85 223 255 / 25%); }
body .auth-card .auth-button { padding: 13px 18px; line-height: 1.4; }
body .auth-card .auth-message { min-height: 0; color: #ae2c43; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
body .auth-card .auth-message:empty { display: none; }
body .auth-card > .auth-message { color: var(--student-muted); }
body .auth-card .auth-link { color: var(--student-muted); font-size: .9rem; font-weight: 600; line-height: 1.6; }
body .auth-card .auth-link a { color: #245bb1; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
body .activation-parent-note, body .activation-account { border: 1px solid #b8e6ef; border-radius: 14px; background: var(--student-soft); }
body .activation-parent-note span, body .activation-account small { color: var(--student-muted); font-weight: 600; line-height: 1.5; }
body .activation-account-value { color: var(--student-ink); font-weight: 800; }
body .activation-status { min-height: 0; padding: 14px 16px; border: 1px solid var(--student-line); border-radius: 14px; background: var(--student-page); color: var(--student-ink); font-weight: 600; line-height: 1.5; }
body .activation-status[data-state="success"], body .auth-card .auth-message[data-state="success"] { color: var(--student-success); background: var(--student-success-soft); padding: 14px 16px; border-radius: 14px; }
body .activation-status[data-state="error"] { color: #ae2c43; background: #fff1f2; border-color: #f2c8d0; }
body .activation-status[data-state="warning"] { color: #725300; background: #fff8df; border-color: #e8d99d; }
body .activation-help { color: var(--student-muted); font-weight: 600; line-height: 1.5; }
@media (max-width: 540px) {
  body .auth-shell, body .auth-shell.activation-shell { padding: 16px 12px; }
  body .auth-card { padding: 24px 20px; border-radius: 20px; gap: 18px; }
  body .auth-card .auth-logo { width: 160px; height: 90px; }
}

/* Avatar onboarding: two visual choices, backed by the same presentation preference. */
.avatar-card [hidden] { display: none !important; }
.style-options { border: 0; padding: 0; margin: 24px 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-width: 0; }
.style-legend { padding: 0; margin-bottom: 12px; font-weight: 800; }
.style-option { display: block; position: relative; padding: 16px; background: white; border: 2px solid var(--student-line); border-radius: 20px; cursor: pointer; min-width: 0; }
.style-option:has(input:checked) { border-color: #245bb1; background: #f2f8ff; }
.style-option:has(input:focus-visible) { outline: 3px solid #245bb1; outline-offset: 4px; }
.style-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.style-choice { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 22px; color: var(--student-ink); }
.style-check { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--student-line); border-radius: 50%; color: transparent; background: white; font-size: 17px; }
input:checked ~ .style-choice .style-check { color: white; background: #245bb1; border-color: #245bb1; }
.style-preview { display: block; overflow: hidden; border: 1px solid var(--student-line); border-radius: 12px; background: var(--student-page); font-size: 11px; color: var(--student-ink); }
.preview-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: white; }
.preview-header img { width: 26px; height: 26px; object-fit: contain; }
.preview-continue { display: flex; align-items: center; justify-content: space-between; padding: 10px; gap: 4px; }
.preview-continue b { padding: 6px 8px; border-radius: 8px; background: var(--student-primary); }
.preview-islands { display: block; position: relative; aspect-ratio: 3 / 2; background: url('assets/worlds/tortilla-three-islands-world-v1.webp') center / cover; }
.preview-islands span { position: absolute; padding: 5px 7px; background: rgb(255 255 255 / 95%); border-radius: 8px; font-weight: 800; }
.preview-islands span:nth-child(1) { left: 12%; top: 52%; }
.preview-islands span:nth-child(2) { right: 6%; top: 26%; }
.preview-islands span:nth-child(3) { right: 9%; bottom: 15%; }
.preview-studio { display: flex; align-items: flex-start; gap: 6px; padding: 14px 8px; aspect-ratio: 3 / 2; box-sizing: border-box; }
.preview-studio > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 5px; border: 1px solid var(--student-line); border-radius: 10px; background: white; font-weight: 800; text-align: center; }
.preview-studio i { margin: auto; display: grid; place-items: center; width: 30px; height: 30px; background: var(--student-soft); border-radius: 8px; font-style: normal; }
.style-description { display: block; margin-top: 14px; color: var(--student-ink); font-size: 15px; line-height: 1.5; }
.style-note { color: var(--student-muted); font-size: 14px; line-height: 1.5; }
.style-actions { display: flex; gap: 12px; margin-top: 20px; }
.style-actions > button { flex: 1; }
@media (max-width: 640px) {
  .style-options { grid-template-columns: 1fr; gap: 16px; }
  .preview-studio { flex-direction: column; justify-content: flex-start; }
  .preview-studio > span { flex: 0 0 auto; width: 100%; flex-direction: row; align-items: center; padding: 8px; }
  .preview-studio i { margin: 0; width: 24px; height: 24px; }
  .style-actions { flex-direction: column-reverse; }
  .style-actions > button { width: 100%; }
}

/* Teacher tasks: one row per topic, its film and game side by side (assignment-ui.js). */
body .assignments-list > .assignment-topics { grid-column: 1 / -1; display: grid; gap: 20px; min-width: 0; }
body .assignment-level { display: grid; gap: 10px; min-width: 0; }
body .assignment-level-title {
  display: flex; align-items: center; gap: 8px; margin: 0;
  color: var(--student-muted); font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
body .assignment-level-title span {
  min-width: 24px; padding: 2px 8px; border-radius: 999px; text-align: center;
  color: var(--student-ink); background: var(--student-page); border: 1px solid var(--student-line); letter-spacing: 0;
}
body .assignment-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
body .assignment-topic {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 16px; border: 1px solid var(--student-line); border-radius: 18px; background: white;
}
body .assignment-topic.is-new { border-color: #f1d98a; background: #fffdf3; }
body .assignment-topic-copy { display: grid; justify-items: start; gap: 4px; min-width: 0; flex: 1 1 150px; }
body .assignment-topic-copy :is(h3, h4) { margin: 0; font-size: 1.1rem; line-height: 1.2; overflow-wrap: anywhere; }
body .assignment-topic-copy p { margin: 0; color: var(--student-muted); font-size: .88rem; font-weight: 700; }
body .assignment-topic-status {
  padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap;
  color: #7a4f00; background: #fff0bd;
}
body .assignment-topic-status[data-status="in_progress"] { color: #1d57ad; background: #e9f2ff; }
body .assignment-topic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body .assignment-topic-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 96px; padding: 10px 16px; cursor: pointer;
}
body .assignment-topic-button span { font-size: .8rem; }
body .assignment-topic-done, body .assignment-topic-unavailable {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: 14px;
  font-size: .9rem; font-weight: 800;
}
body .assignment-topic-done { color: var(--student-success); background: var(--student-success-soft); }
body .assignment-topic-unavailable { color: var(--student-muted); background: var(--student-page); border: 1px dashed var(--student-line); }
@media (max-width: 540px) {
  body .assignment-topic-actions { width: 100%; }
  body .assignment-topic-actions > * { flex: 1 1 0; }
}