* { box-sizing: border-box; }
html { font-size: calc(16px * var(--ll-font-scale)); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--ll-accent), transparent 72%), transparent 18rem),
    radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--ll-secondary-brand), transparent 78%), transparent 24rem),
    var(--ll-bg);
  color: var(--ll-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--ll-font-weight);
  line-height: var(--ll-line-height);
  transition: background-color var(--ll-motion-duration) ease, color var(--ll-motion-duration) ease;
}
a { color: var(--ll-primary); }
.skip-link { position: absolute; left: -999px; top: 1rem; }
.skip-link:focus { left: 1rem; z-index: 10; background: var(--ll-surface); padding: .75rem 1rem; border: 2px solid var(--ll-border); border-radius: .8rem; }
.site-header, .layout { width: min(1080px, calc(100% - 2rem)); margin: 0 auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; }
.app-masthead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(.75rem, 2vw, 1.25rem);
  align-items: center;
  margin-top: .65rem;
  padding: clamp(.65rem, 1.5vw, .9rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.brand { display: inline-flex; align-items: center; width: clamp(5.9rem, 12vw, 8.6rem); min-width: 5.9rem; }
.brand img { display: block; width: 100%; height: auto; object-fit: contain; }
.masthead-context { min-width: 0; display: grid; gap: .08rem; }
.masthead-context .eyebrow, .masthead-context p { margin-bottom: 0; }
.masthead-context h1 { margin: 0; font-size: clamp(1.2rem, 3vw, 2.15rem); line-height: 1; letter-spacing: -.045em; overflow-wrap: anywhere; }
.masthead-context p:not(.eyebrow) { color: var(--ll-muted); font-weight: 800; font-size: clamp(.86rem, 1.8vw, 1rem); overflow-wrap: anywhere; }
.masthead-actions { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; flex-wrap: wrap; }
.masthead-actions button { min-height: 2.45rem; padding: .5rem .75rem; border-radius: .75rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3rem, 9vw, 7.6rem); line-height: calc(.9 * min(var(--ll-line-height), 1.3)); letter-spacing: -.07em; margin-bottom: .4rem; }
h2 { font-size: clamp(1.65rem, 4vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.dashboard-title h1 { font-size: clamp(1.55rem, 3.5vw, 3.6rem); letter-spacing: -.045em; }
.eyebrow { color: var(--ll-secondary-brand); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.layout { min-height: calc(100vh - 7rem); display: grid; place-items: start center; padding: clamp(.75rem, 2vw, 1.25rem) 0 3rem; }
.identity-stage { width: min(880px, 100%); display: grid; gap: clamp(.9rem, 2.4vw, 1.45rem); text-align: center; }
.intro-copy p { margin-bottom: .7rem; }
.role-chooser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; transition: opacity var(--ll-motion-duration) ease, transform var(--ll-motion-duration) ease; }
.role-card,
.card,
.login-card,
.code-card {
  background: color-mix(in srgb, var(--ll-surface), transparent 3%);
  border: 1px solid var(--ll-border);
  box-shadow: var(--ll-shadow);
  backdrop-filter: blur(14px);
}
.role-card {
  min-height: clamp(8.5rem, 16vw, 12rem);
  border-radius: 1.45rem;
  padding: 1.15rem;
  color: var(--ll-text);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .25rem;
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition: transform var(--ll-motion-duration) ease, box-shadow var(--ll-motion-duration) ease, border-color var(--ll-motion-duration) ease, background var(--ll-motion-duration) ease;
}
.role-card span { color: var(--ll-muted); font-weight: 750; }
.role-card strong { font-size: clamp(1.35rem, 3vw, 2.1rem); letter-spacing: -.04em; }
.role-card.is-default { border-color: var(--ll-accent); }
.role-card:hover,
.role-card:focus-visible { transform: translateY(-4px) scale(1.02); border-color: var(--ll-secondary-brand); outline: none; box-shadow: var(--ll-shadow), 0 0 0 5px color-mix(in srgb, var(--ll-secondary-brand), transparent 78%); }
.role-chooser.is-leaving { opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; }
.role-chooser.is-attention { animation: safeBounce .48s ease both; }
.login-shell { display: grid; justify-items: center; gap: 1rem; animation: riseIn var(--ll-motion-duration) ease both; }
.login-card,
.code-card,
.preferences,
.card { border-radius: 1.5rem; padding: clamp(1.15rem, 4vw, 2rem); }
.login-card,
.code-card { width: min(430px, 100%); text-align: left; display: grid; gap: 1rem; transition: opacity var(--ll-motion-duration) ease, transform var(--ll-motion-duration) ease; }
.login-card.is-transitioning-out { opacity: 0; transform: translateY(10px) scale(.985); pointer-events: none; }
.code-card.is-transitioning-in { animation: riseIn var(--ll-motion-duration) ease both; }
.login-card[hidden], .code-card[hidden], .login-shell[hidden] { display: none; }
.support-copy { color: var(--ll-muted); margin-bottom: 0; }
.auth-status { min-height: 1.4em; margin: 0; color: var(--ll-muted); font-weight: 800; }
.auth-status[data-state="success"] { color: var(--ll-secondary-brand); }
.auth-status[data-state="error"] { color: var(--ll-danger, var(--ll-primary)); }
.auth-status[data-state="pending"] { color: var(--ll-primary); }
.back-link, .ghost, .accessibility-button { background: color-mix(in srgb, var(--ll-surface), transparent 14%); color: var(--ll-text); border: 1px solid var(--ll-border); }
.back-link { justify-self: start; min-height: 0; padding: .55rem .85rem; }
form { display: grid; gap: .85rem; }
label { display: grid; gap: .35rem; color: var(--ll-muted); font-weight: max(650, var(--ll-font-weight)); }
input, select, textarea, button, .button { min-height: var(--ll-touch-target); border-radius: .9rem; border: 1px solid var(--ll-border); padding: .7rem .9rem; font: inherit; }
input, select, textarea { width: 100%; background: var(--ll-input-bg, var(--ll-surface)); color: var(--ll-text); }
.masked-pin { -webkit-text-security: disc; text-security: disc; }

.school-search-field { position: relative; min-width: 0; }
.school-search-field input[role="combobox"] { padding-right: 2.35rem; }
.school-search-field input[role="combobox"].is-school-selected { border-color: var(--ll-secondary-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-secondary-brand), transparent 78%); }
.school-search-listbox {
  position: absolute;
  z-index: 24;
  inset-inline: 0;
  top: calc(100% - .05rem);
  max-block-size: min(18rem, 44vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: .35rem;
  padding: .45rem;
  border: 1px solid var(--ll-border);
  border-radius: 1rem;
  background: var(--ll-surface);
  color: var(--ll-text);
  box-shadow: var(--ll-shadow);
  min-width: 0;
}
.school-search-listbox[hidden] { display: none; }
.school-search-option {
  width: 100%;
  min-height: max(var(--ll-touch-target), 3.1rem);
  justify-content: flex-start;
  align-items: flex-start;
  display: grid;
  gap: .12rem;
  text-align: left;
  border-color: transparent;
  background: transparent;
  color: var(--ll-text);
  border-radius: .75rem;
  padding: .7rem .8rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.school-search-option:hover,
.school-search-option:focus-visible,
.school-search-option.is-active { background: color-mix(in srgb, var(--ll-primary), transparent 88%); border-color: var(--ll-border-focus, var(--ll-border)); transform: none; }
.school-search-option small { color: var(--ll-muted); font-weight: 750; }
.school-search-empty { padding: .8rem; color: var(--ll-muted); font-weight: 750; }

textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: none; box-shadow: var(--ll-focus); border-color: var(--ll-border-focus, var(--ll-border)); }
button, .button { display: inline-flex; align-items: center; justify-content: center; background: var(--ll-primary); color: var(--ll-primary-contrast); font-weight: 900; text-decoration: none; cursor: pointer; transition: transform var(--ll-motion-duration) ease, opacity var(--ll-motion-duration) ease; }
button:hover, .button:hover { transform: translateY(-1px); }
.dashboard { width: 100%; display: grid; gap: 1rem; min-width: 0; }
.dashboard-title, .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.portal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; min-width: 0; }
.admin-console { grid-template-columns: 1fr; align-items: stretch; }
.operating-console-panel { display: grid; gap: clamp(.9rem, 2vw, 1.25rem); }
.operating-console-hero { display: grid; gap: .45rem; }
.operating-console-hero h2 { margin-bottom: 0; }
.command-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .85rem; align-items: stretch; }
.command-tile {
  min-width: 0;
  min-height: 100%;
  border: 1px solid var(--ll-border);
  border-radius: 1.2rem;
  padding: clamp(.9rem, 2vw, 1.1rem);
  background: color-mix(in srgb, var(--ll-surface), var(--ll-secondary-brand) 5%);
  display: grid;
  gap: .55rem;
  align-content: start;
  box-shadow: 0 .8rem 1.8rem color-mix(in srgb, var(--ll-text), transparent 92%);
}
.command-tile--primary { background: color-mix(in srgb, var(--ll-surface), var(--ll-primary) 7%); }
.parent-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
.parent-child-tile { color: var(--ll-text); text-align: left; justify-content: stretch; justify-items: start; }
.parent-child-tile.is-selected { border-color: color-mix(in srgb, var(--ll-primary), var(--ll-border) 30%); box-shadow: var(--ll-focus); }
.parent-assignment-list .assignment-card { grid-template-areas: "main stats" "progress progress"; }
.parent-activity-list li > div:first-child { display: grid; gap: .15rem; }
.command-tile .eyebrow { margin-bottom: 0; }
.command-tile-count { display: block; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.05em; }
.command-tile-meta { color: var(--ll-muted); font-weight: 800; }
.operating-console-note { border-top: 1px solid var(--ll-border); padding-top: .85rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.card-actions button { flex: 1 1 8.5rem; }
.command-tile .card-actions { margin-top: auto; }
.command-tile .card-actions button { flex-basis: 100%; justify-content: center; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ll-touch-target); border-radius: 999px; border: 1px solid var(--ll-border); padding: .45rem .75rem; color: var(--ll-muted); font-weight: 850; background: color-mix(in srgb, var(--ll-surface), var(--ll-secondary-brand) 7%); }
.danger { border-color: color-mix(in srgb, var(--ll-danger, var(--ll-primary)), var(--ll-border) 55%); color: var(--ll-danger, var(--ll-primary)); }
.metric-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.metric-row span, .result-box { background: color-mix(in srgb, var(--ll-surface), var(--ll-primary) 6%); border: 1px solid var(--ll-border); border-radius: 1rem; padding: .75rem .9rem; }
.metric-row strong { font-size: 1.6rem; }
.admin-panel { display: grid; gap: 1rem; }
.reporting-panel { display: grid; gap: 1rem; }
.insight-grid, .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .85rem; }
.insight-card, .chart-card { min-width: 0; border: 1px solid var(--ll-border); border-radius: 1.15rem; background: color-mix(in srgb, var(--ll-surface), var(--ll-secondary-brand) 5%); padding: .95rem; display: grid; gap: .45rem; }
.insight-card span { color: var(--ll-muted); font-weight: 850; }
.insight-card strong { font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1; letter-spacing: -.04em; }
.insight-card p, .chart-card h3 { margin-bottom: 0; }
.chart-card { align-content: start; min-height: 14rem; }
.ll-chart { min-height: 9rem; display: grid; gap: .7rem; align-items: center; color: var(--ll-text); min-width: 0; }
.ll-chart--empty { place-items: center; text-align: center; border: 1px dashed var(--ll-border); border-radius: 1rem; padding: 1rem; color: var(--ll-muted); background: color-mix(in srgb, var(--ll-surface), transparent 10%); }
.ll-chart--empty p { margin: 0; }
.ll-chart-bars { margin: 0; display: grid; gap: .65rem; min-width: 0; }
.ll-chart-bar-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: .65rem; align-items: center; min-width: 0; }
.ll-chart-bar-row dt { color: var(--ll-muted); font-weight: 850; min-width: 0; overflow-wrap: anywhere; }
.ll-chart-bar-row dd { margin: 0; min-width: 0; min-height: var(--ll-touch-target); border-radius: 999px; border: 1px solid var(--ll-border); background: color-mix(in srgb, var(--ll-surface), var(--ll-text) 5%); overflow: hidden; }
.ll-chart-bar { box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; width: clamp(2.4rem, var(--ll-chart-value), 100%); max-width: 100%; min-height: var(--ll-touch-target); padding: .35rem .65rem; border-radius: inherit; background: color-mix(in srgb, var(--ll-primary), var(--ll-surface) 20%); color: var(--ll-primary-contrast); font-weight: 900; }
.ll-chart--ring { justify-items: center; text-align: center; }
.ll-chart--ring svg { width: min(8.5rem, 100%); transform: rotate(-90deg); overflow: visible; }
.ll-chart-ring-track, .ll-chart-ring-arc { fill: none; stroke-width: 16; }
.ll-chart-ring-track { stroke: color-mix(in srgb, var(--ll-surface), var(--ll-text) 12%); }
.ll-chart-ring-arc { stroke: var(--ll-primary); stroke-linecap: round; }
.ll-chart-ring-label { font-size: 1.8rem; line-height: 1; }
.inline-form { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.compact-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.compact-list li { display: flex; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--ll-border); padding-top: .55rem; }
.management-list li { align-items: center; }
.management-list li > div:first-child { display: grid; gap: .2rem; }
.compact-list span { color: var(--ll-muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { border-top: 1px solid var(--ll-border); padding: .65rem; text-align: left; vertical-align: top; }
.row-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.row-actions--compact { flex-wrap: nowrap; }
.row-actions--compact button { min-height: 2.35rem; padding: .45rem .7rem; }
.homework-manager { width: min(1120px, 96vw); min-height: min(760px, 86vh); overflow-x: hidden; overflow-y: auto; }
.homework-slider { display: block; width: 100%; overflow: visible; }
.homework-slide { display: none; min-width: 0; opacity: 0; transform: translateX(.75rem); }
.homework-slide, .homework-slide * { min-width: 0; }
.homework-slide.is-active { display: block; opacity: 1; pointer-events: auto; transform: translateX(0); animation: homeworkSlideIn var(--ll-motion-duration) ease both; }
.homework-row { inline-size: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left; background: transparent; color: inherit; border-color: var(--ll-border); }
.homework-row > div { display: grid; gap: .2rem; }
.homework-detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr); gap: 1rem; }
.mini-panel { border: 1px solid var(--ll-border); border-radius: 1rem; padding: 1rem; background: color-mix(in srgb, var(--ll-surface), var(--ll-text) 2%); }
.mini-panel h3 { margin-top: 0; }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
@keyframes homeworkSlideIn { from { opacity: 0; transform: translateX(.75rem); } to { opacity: 1; transform: translateX(0); } }
code { background: color-mix(in srgb, var(--ll-surface), var(--ll-text) 8%); border-radius: .45rem; padding: .1rem .35rem; }
.modal-layer { position: fixed; inset: 0; z-index: 20; display: none; }
.modal-layer.is-open { display: block; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2rem); background: color-mix(in srgb, var(--ll-text), transparent 55%); overflow: auto; }
.modal[hidden] { display: none; }
.modal-card { width: min(720px, 100%); min-width: 0; max-height: calc(100vh - 3rem); overflow: auto; background: color-mix(in srgb, var(--ll-surface), transparent 2%); border: 1px solid var(--ll-border); border-radius: 1.35rem; box-shadow: var(--ll-shadow); padding: clamp(1rem, 3vw, 1.5rem); display: grid; gap: 1rem; animation: riseIn var(--ll-motion-duration) ease both; }
.modal-card--compact { width: min(480px, 100%); }
.modal-card--wide { width: min(980px, 100%); }
.modal-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.modal-form-grid button { align-self: end; min-width: 0; }
.checkbox-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: .55rem; border: 1px solid var(--ll-border); border-radius: 1rem; padding: .85rem; }
.checkbox-grid legend { font-weight: 900; padding: 0 .35rem; }
.checkbox-grid label { display: flex; flex-direction: row; align-items: center; gap: .4rem; min-height: var(--ll-touch-target); margin: 0; }
.field-hint { display: block; margin-top: .25rem; color: var(--ll-muted); font-size: .9rem; font-weight: 600; }
.preferences { position: fixed; inset: auto 1rem 1rem auto; width: min(420px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; z-index: 9; }
.toast { position: fixed; left: 50%; bottom: 1rem; translate: -50% 0; background: var(--ll-text); color: var(--ll-surface); border-radius: 999px; padding: .75rem 1rem; opacity: 0; transition: opacity var(--ll-motion-duration) ease; pointer-events: none; z-index: 30; }
.toast.is-visible { opacity: 1; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes safeBounce { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-6px) scale(1.01); } 70% { transform: translateY(3px) scale(.995); } }
@media (max-width: 840px) { .role-chooser, .portal-grid, .inline-form, .modal-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; } h1 { font-size: clamp(3.2rem, 15vw, 5rem); } .dashboard-title h1 { font-size: clamp(1.45rem, 7vw, 2.6rem); } .app-masthead { grid-template-columns: auto minmax(0, 1fr); } .masthead-actions { grid-column: 1 / -1; justify-content: flex-start; } }
@media (max-width: 560px) { .site-header { align-items: stretch; } .app-masthead { grid-template-columns: 1fr; text-align: center; justify-items: center; margin-top: .5rem; } .brand { width: clamp(6.2rem, 34vw, 8rem); } .masthead-context h1 { font-size: clamp(1.35rem, 8vw, 2rem); } .masthead-actions { justify-content: center; inline-size: 100%; } .masthead-actions button { flex: 1 1 8rem; } .role-chooser, .portal-grid, .inline-form, .modal-form-grid, .command-tile-grid { grid-template-columns: 1fr; } .role-card { min-height: 7rem; } .dashboard-title, .panel-title, .compact-list li { align-items: stretch; flex-direction: column; } .login-card, .code-card { width: 100%; } .back-link { justify-self: stretch; } .school-search-listbox { position: fixed; inset-inline: 1rem; top: auto; bottom: max(.75rem, env(safe-area-inset-bottom)); max-block-size: min(16rem, 42vh); } .modal { padding: .5rem; align-items: start; } .modal-card { max-height: calc(100vh - 1rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* Slice 3: common game player and Times Table Dash */
.game-player-active { overflow: hidden; }
.game-player-layer { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(.5rem, 2vw, 1.5rem); }
.game-player-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 28, .62); backdrop-filter: blur(6px); }
.game-player-shell { position: relative; inline-size: min(1180px, 98vw); block-size: min(820px, 96vh); display: grid; grid-template-rows: auto auto auto 1fr; overflow: hidden; border: 1px solid var(--ll-border, rgba(255,255,255,.2)); border-radius: clamp(18px, 3vw, 32px); background: var(--ll-surface, #fff); color: var(--ll-text, #111827); box-shadow: 0 28px 80px rgba(0,0,0,.35); }
.game-player-chrome { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--ll-border, #d7dce8); }
.game-player-demo-banner { padding: .6rem clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--ll-border); background: color-mix(in srgb, var(--ll-accent) 28%, var(--ll-surface)); color: var(--ll-text); font-weight: 950; letter-spacing: .04em; text-align: center; }
.game-player-chrome h2 { margin: 0; }
.game-player-actions { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; }
.game-volume-control { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid var(--ll-border); border-radius: 999px; background: color-mix(in srgb, var(--ll-surface), var(--ll-text) 4%); }
.game-volume-control button { min-height: 2.25rem; padding: .35rem .65rem; border-radius: 999px; }
.game-volume-control [data-game-mute] { min-width: 7.2rem; }
.game-player-status { padding: .7rem clamp(1rem, 2vw, 1.5rem); background: color-mix(in srgb, var(--ll-accent, #6d5dfc) 12%, transparent); font-weight: 700; }
.game-player-stage { overflow: auto; padding: clamp(1rem, 2.5vw, 2rem); }
.game-player-layer[data-font-size="large"] { font-size: 1.13rem; }
.game-player-layer[data-font-size="extra-large"] { font-size: 1.28rem; }
.game-player-layer[data-font-weight="strong"], .game-player-layer[data-font-weight="bold"] { font-weight: 700; }
.game-player-layer[data-line-spacing="wide"] { line-height: 1.8; }
.game-player-layer[data-contrast-level="high"] .game-player-shell { border: 3px solid currentColor; }
.game-player-layer[data-theme="dark"] .game-player-shell { background: var(--ll-surface); color: var(--ll-text); }
.game-player-layer[data-touch-target-density="large"] button, .game-player-layer[data-touch-target-density="large"] input { min-height: 52px; }
.game-player-layer[data-timer-visibility="hidden"] [data-game-timer] { display: none; }
.game-player-layer[data-reduced-motion="true"] * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .game-player-layer *, .legend-sync-orb, .legend-sync-orb span, .student-achievement-toast, .assignment-progress-bar::before { animation: none !important; transition: none !important; } }
.student-dashboard-grid { grid-template-columns: repeat(2, minmax(20rem, 1fr)); gap: clamp(1.15rem, 2.6vw, 1.65rem); align-items: start; }
.legend-sync-panel { grid-column: 1 / -1; display: flex; align-items: center; gap: .85rem; min-width: 0; border: 1px solid color-mix(in srgb, var(--ll-accent), var(--ll-border) 45%); background: radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--ll-accent), transparent 72%), transparent 9rem), color-mix(in srgb, var(--ll-surface), var(--ll-primary) 4%); }
.legend-sync-panel strong { display: block; font-size: 1.05rem; line-height: 1.1; }
.legend-sync-panel p { margin: .15rem 0 0; color: var(--ll-muted); font-weight: 750; }
.legend-sync-orb { position: relative; inline-size: 3.2rem; block-size: 3.2rem; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 0deg, var(--ll-primary), var(--ll-accent), var(--ll-secondary-brand), var(--ll-primary)); box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--ll-primary), transparent 84%); animation: legendSpin 1.4s linear infinite; }
.legend-sync-orb::after { content: "★"; inline-size: 2.15rem; block-size: 2.15rem; display: grid; place-items: center; border-radius: inherit; background: var(--ll-surface); color: var(--ll-primary); font-weight: 950; }
.legend-sync-orb span { position: absolute; inline-size: .38rem; block-size: .38rem; border-radius: 50%; background: var(--ll-secondary-brand); animation: legendSparkle 1.2s ease-in-out infinite alternate; }
.legend-sync-orb span:nth-child(1) { inset: -.1rem auto auto 50%; }
.legend-sync-orb span:nth-child(2) { inset: auto -.05rem .65rem auto; animation-delay: .2s; }
.legend-sync-orb span:nth-child(3) { inset: auto auto .35rem .05rem; animation-delay: .4s; }
.student-achievement-toast { position: fixed; z-index: 1100; inset-block-start: max(1rem, env(safe-area-inset-top)); inset-inline-end: 1rem; width: min(26rem, calc(100vw - 2rem)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; padding: .75rem .9rem; border: 1px solid color-mix(in srgb, var(--ll-secondary-brand), transparent 45%); border-radius: 999px 1.2rem 1.2rem 999px; background: color-mix(in srgb, var(--ll-text), transparent 10%); color: var(--ll-surface); box-shadow: 0 1rem 3rem color-mix(in srgb, var(--ll-text), transparent 70%); opacity: 0; transform: translateY(-.65rem) scale(.97); transition: opacity var(--ll-motion-duration) ease, transform var(--ll-motion-duration) ease; backdrop-filter: blur(10px); }
.student-achievement-toast.is-visible { opacity: .94; transform: translateY(0) scale(1); }
.student-achievement-toast p, .student-achievement-toast span { margin: 0; color: color-mix(in srgb, var(--ll-surface), transparent 18%); font-weight: 800; }
.student-achievement-toast p { text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; }
.student-achievement-toast strong { display: block; font-size: clamp(1rem, 3vw, 1.28rem); line-height: 1.05; overflow-wrap: anywhere; }
.achievement-orb { inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--ll-secondary-brand), var(--ll-primary)); color: var(--ll-primary-contrast); font-size: 1.55rem; font-weight: 950; box-shadow: inset 0 0 0 .32rem color-mix(in srgb, var(--ll-surface), transparent 70%), 0 0 1.2rem color-mix(in srgb, var(--ll-secondary-brand), transparent 28%); }
@keyframes legendSpin { to { transform: rotate(360deg); } }
@keyframes legendSparkle { from { opacity: .35; transform: scale(.7); } to { opacity: 1; transform: scale(1.25); } }
.student-quest-card { border: 2px solid color-mix(in srgb, var(--ll-accent, #6d5dfc) 40%, transparent); }
.student-dashboard-grid .card { min-width: 0; padding: clamp(1rem, 2.2vw, 1.45rem); }
.student-dashboard-grid h2 { margin-bottom: .75rem; }
.assignment-card-list { display: grid; gap: .5rem; padding: 0; margin: .75rem 0 0; list-style: none; }
.assignment-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main stats" "main action" "progress progress"; gap: .35rem .6rem; align-items: center; padding: .55rem .6rem .62rem; border: 1px solid var(--ll-border); border-radius: .75rem; background: color-mix(in srgb, var(--ll-surface), var(--ll-accent, #6d5dfc) 3%); box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--ll-text), transparent 95%); }
.assignment-card.is-complete { border-color: color-mix(in srgb, var(--ll-secondary-brand), var(--ll-border) 35%); background: linear-gradient(90deg, color-mix(in srgb, var(--ll-secondary-brand), transparent 86%), color-mix(in srgb, var(--ll-surface), var(--ll-secondary-brand) 7%)); }
.assignment-card-main { grid-area: main; display: grid; gap: .1rem; min-width: 0; }
.assignment-card-main strong { font-size: .98rem; line-height: 1.08; overflow-wrap: anywhere; }
.assignment-complete-mark { font-size: .82em; vertical-align: .05em; }
.assignment-card-class { color: var(--ll-muted); font-weight: 750; font-size: .82rem; line-height: 1.16; overflow-wrap: anywhere; }
.assignment-due-chip { justify-self: start; margin-top: .1rem; border-radius: 999px; padding: .1rem .4rem; background: color-mix(in srgb, var(--ll-surface), var(--ll-primary) 7%); color: var(--ll-primary); font-size: .72rem; font-weight: 950; line-height: 1.2; }
.assignment-card.is-complete .assignment-due-chip { background: color-mix(in srgb, var(--ll-secondary-brand), transparent 84%); color: var(--ll-text); }
.assignment-stat-strip { grid-area: stats; display: flex; justify-content: flex-end; gap: .28rem; margin: 0; white-space: nowrap; }
.assignment-stat-strip div { display: contents; }
.assignment-stat-strip dt { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.assignment-stat-strip dd { margin: 0; border-radius: 999px; padding: .2rem .42rem; background: color-mix(in srgb, var(--ll-surface), var(--ll-text) 6%); color: var(--ll-text); font-size: .78rem; font-weight: 900; line-height: 1.1; }
.assignment-chips, .assignment-progress { display: flex; flex-wrap: wrap; gap: .4rem; }
.assignment-chips span, .assignment-progress span { border-radius: 999px; padding: .28rem .55rem; background: color-mix(in srgb, var(--ll-accent, #6d5dfc) 11%, transparent); font-size: .92rem; font-weight: 800; }
.assignment-progress span { background: color-mix(in srgb, var(--ll-surface), var(--ll-text) 6%); color: var(--ll-muted); }
.assignment-card button { grid-area: action; justify-self: end; min-height: 2rem; inline-size: max-content; max-inline-size: 7.5rem; padding: .35rem .55rem; border-radius: .25rem; font-size: .78rem; line-height: 1; white-space: nowrap; text-transform: lowercase; }
.assignment-progress-bar { grid-area: progress; position: relative; min-height: .66rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ll-border), var(--ll-text) 18%); border-radius: 999px; background: color-mix(in srgb, var(--ll-surface), var(--ll-text) 9%); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ll-text), transparent 82%); }
.assignment-progress-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--quest-progress, 0%); min-width: .35rem; border-radius: inherit; background-color: color-mix(in srgb, var(--ll-primary), var(--ll-surface) 12%); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ll-surface), transparent 72%) 0 .42rem, transparent .42rem .84rem); background-size: 1.2rem 1.2rem; animation: questStripeSlide 1.1s linear infinite; transition: width var(--ll-motion-duration) ease; }
.assignment-card.is-complete .assignment-progress-bar::before { background-color: color-mix(in srgb, var(--ll-secondary-brand), var(--ll-primary) 18%); }
.assignment-progress-bar span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ll-primary-contrast); text-shadow: 0 1px 2px color-mix(in srgb, var(--ll-text), transparent 45%); font-size: .58rem; font-weight: 950; line-height: 1; }
@keyframes questStripeSlide { to { background-position: 1.2rem 0; } }
.quest-meta, .ttd-hud { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.quest-meta span, .ttd-hud span { border-radius: 999px; padding: .3rem .55rem; background: color-mix(in srgb, var(--ll-accent, #6d5dfc) 12%, transparent); font-weight: 800; font-size: .9rem; }
.student-activity-list li { display: grid; grid-template-columns: minmax(4.5rem, .45fr) minmax(0, 1fr); align-items: start; }
.student-activity-list strong { font-size: .85rem; line-height: 1.1; }
.student-activity-list span { font-size: .88rem; line-height: 1.25; }
.ttd-game { min-height: 100%; display: grid; align-content: center; gap: 1.25rem; }
.ttd-card, .ttd-complete { max-width: 680px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 3rem); border-radius: 28px; background: color-mix(in srgb, var(--ll-surface, #fff) 92%, var(--ll-accent, #6d5dfc)); box-shadow: 0 16px 44px rgba(0,0,0,.12); text-align: center; }
.ttd-card.is-question-entering { animation: ttdQuestionIn var(--ll-motion-duration) ease both; }
.ttd-card h3 { font-size: clamp(3rem, 12vw, 7rem); margin: .4rem 0 1rem; }
.ttd-card form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; max-width: 520px; margin: 0 auto; }
.ttd-card input { text-align: center; font-size: 2rem; font-weight: 800; }
.ttd-feedback { min-height: 1.8em; font-weight: 800; }
.ttd-complete dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ttd-complete dt { font-weight: 700; }
.ttd-complete dd { margin: 0; font-size: 2rem; font-weight: 900; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes ttdQuestionIn { from { opacity: .72; transform: translateY(.35rem) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 920px) { .student-dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .game-player-chrome, .ttd-card form, .homework-detail-grid, .report-grid { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; } .assignment-card { grid-template-columns: 1fr; grid-template-areas: "main" "stats" "action" "progress"; align-items: stretch; } .assignment-stat-strip { justify-content: flex-start; flex-wrap: wrap; white-space: normal; } .assignment-card button { inline-size: 100%; max-inline-size: none; min-height: var(--ll-touch-target); border-radius: .85rem; } .legend-sync-panel { align-items: flex-start; } .student-achievement-toast { inset-inline: 1rem; width: auto; border-radius: 1.25rem; } .game-player-shell { inline-size: 100vw; block-size: 100vh; border-radius: 0; } }