/* Component appearance and behavior come from @material/web.
   Application CSS defines the theme, typography roles, and page layout only. */
:root {
  color-scheme: light;
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #31111d;
  --md-sys-color-surface: #fef7ff;
  --md-sys-color-surface-dim: #ded8e1;
  --md-sys-color-surface-bright: #fef7ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-surface-container-highest: #e6e0e9;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;
  --md-sys-color-inverse-surface: #322f35;
  --md-sys-color-inverse-on-surface: #f5eff7;
  --md-sys-color-inverse-primary: #d0bcff;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-ref-typeface-brand: Roboto;
  --md-ref-typeface-plain: Roboto;
  font: 400 calc(14px * var(--font-scale, 1))/calc(20px * var(--font-scale, 1)) Roboto, system-ui, sans-serif;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-on-primary-container: #eaddff;
  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;
  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-container: #ffd8e4;
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3b383e;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-surface-container-high: #2b2930;
  --md-sys-color-surface-container-highest: #36343b;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;
  --md-sys-color-error: #f2b8b5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-on-error-container: #f9dedc;
  --md-sys-color-inverse-surface: #e6e0e9;
  --md-sys-color-inverse-on-surface: #322f35;
  --md-sys-color-inverse-primary: #6750a4;
}
/* Alternative accent schemes remain available alongside the hackathon identity.
   Each accent supplies matching surfaces and foregrounds for both brightnesses. */
:root:not([data-palette]), :root[data-palette="blue"] {
  --md-sys-color-primary: #00639b;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cce5ff;
  --md-sys-color-on-primary-container: #001d32;
  --md-sys-color-secondary: #51606f;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d5e4f6;
  --md-sys-color-on-secondary-container: #0d1d2a;
  --md-sys-color-tertiary: #685779;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #efdbff;
  --md-sys-color-on-tertiary-container: #231533;
  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-surface-dim: #d9dae0;
  --md-sys-color-surface-bright: #f8f9ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f3fa;
  --md-sys-color-surface-container: #eceef4;
  --md-sys-color-surface-container-high: #e7e8ee;
  --md-sys-color-surface-container-highest: #e1e2e9;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-on-surface-variant: #41474e;
  --md-sys-color-outline: #72787f;
  --md-sys-color-outline-variant: #c1c7cf;
  --md-sys-color-inverse-surface: #2e3135;
  --md-sys-color-inverse-on-surface: #eff0f7;
  --md-sys-color-inverse-primary: #95ccff;
}
:root[data-theme="dark"]:not([data-palette]), :root[data-theme="dark"][data-palette="blue"] {
  --md-sys-color-primary: #95ccff;
  --md-sys-color-on-primary: #003353;
  --md-sys-color-primary-container: #004b76;
  --md-sys-color-on-primary-container: #cce5ff;
  --md-sys-color-secondary: #b9c8da;
  --md-sys-color-on-secondary: #233240;
  --md-sys-color-secondary-container: #394857;
  --md-sys-color-on-secondary-container: #d5e4f6;
  --md-sys-color-tertiary: #d3bfe6;
  --md-sys-color-on-tertiary: #392a49;
  --md-sys-color-tertiary-container: #504061;
  --md-sys-color-on-tertiary-container: #efdbff;
  --md-sys-color-surface: #101418;
  --md-sys-color-surface-dim: #101418;
  --md-sys-color-surface-bright: #36393e;
  --md-sys-color-surface-container-lowest: #0b0f13;
  --md-sys-color-surface-container-low: #191c20;
  --md-sys-color-surface-container: #1d2024;
  --md-sys-color-surface-container-high: #272a2f;
  --md-sys-color-surface-container-highest: #323539;
  --md-sys-color-on-surface: #e1e2e9;
  --md-sys-color-on-surface-variant: #c1c7cf;
  --md-sys-color-outline: #8b9199;
  --md-sys-color-outline-variant: #41474e;
  --md-sys-color-inverse-surface: #e1e2e9;
  --md-sys-color-inverse-on-surface: #2e3135;
  --md-sys-color-inverse-primary: #00639b;
}
:root[data-palette="green"] {
  --md-sys-color-primary: #006c4c;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #89f8c7;
  --md-sys-color-on-primary-container: #002114;
  --md-sys-color-secondary: #4d6358;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #cfe9d9;
  --md-sys-color-on-secondary-container: #092016;
  --md-sys-color-tertiary: #3d6373;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #c1e8fb;
  --md-sys-color-on-tertiary-container: #001f29;
  --md-sys-color-surface: #f5fbf5;
  --md-sys-color-surface-dim: #d6dcd6;
  --md-sys-color-surface-bright: #f5fbf5;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #eff5ef;
  --md-sys-color-surface-container: #e9efe9;
  --md-sys-color-surface-container-high: #e3e9e3;
  --md-sys-color-surface-container-highest: #dde4de;
  --md-sys-color-on-surface: #171d19;
  --md-sys-color-on-surface-variant: #404943;
  --md-sys-color-outline: #707973;
  --md-sys-color-outline-variant: #bfc9c1;
  --md-sys-color-inverse-surface: #2c322e;
  --md-sys-color-inverse-on-surface: #edf3ed;
  --md-sys-color-inverse-primary: #6cdbac;
}
:root[data-theme="dark"][data-palette="green"] {
  --md-sys-color-primary: #6cdbac;
  --md-sys-color-on-primary: #003825;
  --md-sys-color-primary-container: #005138;
  --md-sys-color-on-primary-container: #89f8c7;
  --md-sys-color-secondary: #b3ccbd;
  --md-sys-color-on-secondary: #1f352a;
  --md-sys-color-secondary-container: #354b40;
  --md-sys-color-on-secondary-container: #cfe9d9;
  --md-sys-color-tertiary: #a5ccde;
  --md-sys-color-on-tertiary: #073543;
  --md-sys-color-tertiary-container: #244c5b;
  --md-sys-color-on-tertiary-container: #c1e8fb;
  --md-sys-color-surface: #0f1511;
  --md-sys-color-surface-dim: #0f1511;
  --md-sys-color-surface-bright: #353b36;
  --md-sys-color-surface-container-lowest: #0a100c;
  --md-sys-color-surface-container-low: #171d19;
  --md-sys-color-surface-container: #1b211d;
  --md-sys-color-surface-container-high: #252b27;
  --md-sys-color-surface-container-highest: #303631;
  --md-sys-color-on-surface: #dde4de;
  --md-sys-color-on-surface-variant: #bfc9c1;
  --md-sys-color-outline: #89938c;
  --md-sys-color-outline-variant: #404943;
  --md-sys-color-inverse-surface: #dde4de;
  --md-sys-color-inverse-on-surface: #2c322e;
  --md-sys-color-inverse-primary: #006c4c;
}
:root[data-palette="rose"] {
  --md-sys-color-primary: #a00065;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffd6ec;
  --md-sys-color-on-primary-container: #3e0027;
  --md-sys-color-secondary: #86516e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffd6ec;
  --md-sys-color-on-secondary-container: #351126;
  --md-sys-color-tertiary: #785298;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #efdbff;
  --md-sys-color-on-tertiary-container: #2d0d47;
  --md-sys-color-surface: #fff5fb;
  --md-sys-color-surface-dim: #f0d2e3;
  --md-sys-color-surface-bright: #fff5fb;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #ffebf5;
  --md-sys-color-surface-container: #ffe0f0;
  --md-sys-color-surface-container-high: #fbd5e9;
  --md-sys-color-surface-container-highest: #f6dbe9;
  --md-sys-color-on-surface: #2d1424;
  --md-sys-color-on-surface-variant: #634457;
  --md-sys-color-outline: #986d86;
  --md-sys-color-outline-variant: #e8b4d0;
  --md-sys-color-inverse-surface: #431c34;
  --md-sys-color-inverse-on-surface: #ffedf6;
  --md-sys-color-inverse-primary: #ff8bce;
}
:root[data-theme="dark"][data-palette="rose"] {
  --md-sys-color-primary: #ff8bce;
  --md-sys-color-on-primary: #590039;
  --md-sys-color-primary-container: #810052;
  --md-sys-color-on-primary-container: #ffd6ec;
  --md-sys-color-secondary: #f5b0d4;
  --md-sys-color-on-secondary: #4e1937;
  --md-sys-color-secondary-container: #6d3053;
  --md-sys-color-on-secondary-container: #ffd6ec;
  --md-sys-color-tertiary: #e0b6ff;
  --md-sys-color-on-tertiary: #43205d;
  --md-sys-color-tertiary-container: #5d3877;
  --md-sys-color-on-tertiary-container: #efdbff;
  --md-sys-color-surface: #240d1e;
  --md-sys-color-surface-dim: #240d1e;
  --md-sys-color-surface-bright: #593247;
  --md-sys-color-surface-container-lowest: #1a0715;
  --md-sys-color-surface-container-low: #2d1424;
  --md-sys-color-surface-container: #39142c;
  --md-sys-color-surface-container-high: #482039;
  --md-sys-color-surface-container-highest: #572c46;
  --md-sys-color-on-surface: #f6dbe9;
  --md-sys-color-on-surface-variant: #e8b4d0;
  --md-sys-color-outline: #bc88a5;
  --md-sys-color-outline-variant: #634457;
  --md-sys-color-inverse-surface: #f6dbe9;
  --md-sys-color-inverse-on-surface: #431c34;
  --md-sys-color-inverse-primary: #a00065;
}
.palette-swatch { display: block; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--md-sys-color-outline); }
.palette-swatch.blue { background: #95ccff; }
.palette-swatch.purple { background: #d0bcff; }
.palette-swatch.green { background: #6cdbac; }
.palette-swatch.rose { background: #ff8bce; }
.connection-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--md-sys-color-on-surface-variant); font-size: calc(12px * var(--font-scale, 1)); }
.connection-status.disconnected { color: var(--md-sys-color-error); }
.invite-actions, .question-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.review-rounds, .review-round { display: grid; gap: 24px; min-width: 0; }
.review-round { border-bottom: 1px solid var(--md-sys-color-outline-variant); padding-bottom: 24px; overflow-wrap: anywhere; }
.report-reason { white-space: pre-wrap; }
#questionFormTitle { scroll-margin-top: 96px; }
/* Scale official Material typography together with application text. */
:root {
 --md-sys-typescale-body-large-size: calc(16px * var(--font-scale, 1));
 --md-sys-typescale-body-large-line-height: calc(24px * var(--font-scale, 1));
 --md-sys-typescale-body-medium-size: calc(14px * var(--font-scale, 1));
 --md-sys-typescale-body-medium-line-height: calc(20px * var(--font-scale, 1));
 --md-sys-typescale-body-small-size: calc(12px * var(--font-scale, 1));
 --md-sys-typescale-body-small-line-height: calc(16px * var(--font-scale, 1));
 --md-sys-typescale-label-large-size: calc(14px * var(--font-scale, 1));
 --md-sys-typescale-label-large-line-height: calc(20px * var(--font-scale, 1));
 --md-sys-typescale-label-medium-size: calc(12px * var(--font-scale, 1));
 --md-sys-typescale-label-medium-line-height: calc(16px * var(--font-scale, 1));
 --md-sys-typescale-title-medium-size: calc(16px * var(--font-scale, 1));
 --md-sys-typescale-title-medium-line-height: calc(24px * var(--font-scale, 1));
}
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, p { margin: 0; }
h1 { font: 400 calc(28px * var(--font-scale, 1))/calc(36px * var(--font-scale, 1)) Roboto, sans-serif; }
h2 { font: 400 calc(24px * var(--font-scale, 1))/calc(32px * var(--font-scale, 1)) Roboto, sans-serif; }
.app-container { max-width: 680px; min-height: 100svh; margin: auto; padding-top: env(safe-area-inset-top); }
.app-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 64px; font-size: calc(22px * var(--font-scale, 1)); line-height: calc(28px * var(--font-scale, 1)); }
.app-header > span { flex: 1; }
.main-tabs { position: sticky; top: 0; z-index: 3; background: var(--md-sys-color-surface); }
md-primary-tab { flex: 1 0 auto; min-width: max-content; }
.content-area { padding: 16px 24px calc(32px + env(safe-area-inset-bottom)); }
.screen, .teacher-tab-content { display: none; }
.screen.active, .teacher-tab-content.active { display: flex; flex-direction: column; gap: 24px; }
#duelInvites { display: grid; gap: 12px; padding: 20px; border-radius: 24px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
#duelLobby {
  --md-list-container-color: var(--md-sys-color-secondary-container);
  --md-list-item-container-color: var(--md-sys-color-secondary-container);
  background: var(--md-sys-color-secondary-container);
}
#duelLobby md-list-item { --md-list-item-container-color: var(--md-sys-color-secondary-container); }
#duelAlert { width: 100%; margin-bottom: 24px; }
#duelWaiting { display: flex; align-items: center; gap: 16px; }
#duelWaiting md-circular-progress { flex-shrink: 0; }
#duelWaiting h2 { font-size: calc(22px * var(--font-scale, 1)); line-height: calc(28px * var(--font-scale, 1)); }
#duelWaiting p { margin-top: 8px; color: var(--md-sys-color-on-surface-variant); }
#duelPreparation { display: grid; gap: 16px; }
#duelCountdown { text-align: center; font-size: calc(48px * var(--font-scale, 1)); line-height: calc(56px * var(--font-scale, 1)); color: var(--md-sys-color-primary); }
body[data-waiting="true"] #screen-duel .timer-container,
body[data-waiting="true"] #screen-duel .question-card,
body[data-waiting="true"] #screen-duel .answers-grid,
body[data-waiting="true"] #screen-duel .centered { display: none; }
.page-heading { display: grid; gap: 8px; }
.eyebrow, .hero-eyebrow { color: var(--md-sys-color-primary); font-size: calc(12px * var(--font-scale, 1)); line-height: calc(16px * var(--font-scale, 1)); font-weight: 500; letter-spacing: .5px; }
.user-pill { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--md-sys-color-surface-container-low); border-radius: 24px; }
.user-info { flex: 1; min-width: 0; }
.avatar-img, .avatar-duel, .leader-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.user-name { font-size: calc(16px * var(--font-scale, 1)); line-height: calc(24px * var(--font-scale, 1)); font-weight: 500; }
.user-meta { font-size: calc(12px * var(--font-scale, 1)); line-height: calc(16px * var(--font-scale, 1)); color: var(--md-sys-color-on-surface-variant); }
.arena-hero-card, .question-card, .result-card, .leader-card { display: flex; flex-direction: column; gap: 16px; }
.hero-title { font-size: calc(40px * var(--font-scale, 1)); line-height: calc(44px * var(--font-scale, 1)); font-weight: 500; letter-spacing: -1px; max-width: 9em; }
.hero-subtitle, .muted, .footnote, .notice, .leader-card > p { color: var(--md-sys-color-on-surface-variant); }
.footnote { font-size: calc(12px * var(--font-scale, 1)); line-height: calc(16px * var(--font-scale, 1)); }
.section-title { font-size: calc(22px * var(--font-scale, 1)); line-height: calc(28px * var(--font-scale, 1)); }
.small-chip { display: inline-flex; align-items: center; gap: 8px; font-size: calc(12px * var(--font-scale, 1)); line-height: calc(16px * var(--font-scale, 1)); font-weight: 500; color: var(--md-sys-color-primary); }
.leader-card-main { display: flex; align-items: center; gap: 16px; }
.leader-card .leader-avatar { width: 56px; height: 56px; }
.leader-name { font-size: calc(22px * var(--font-scale, 1)); line-height: calc(28px * var(--font-scale, 1)); }
.leader-xp { color: var(--md-sys-color-primary); }
.leader-details { min-width: 0; flex: 1; }
.list-caption { display: flex; align-items: center; gap: 12px; }
md-list { background: transparent; width: 100%; }
md-list:empty, .notice:empty { display: none; }
md-list-item { --md-list-item-container-color: transparent; }
md-list-item [slot="headline"], md-list-item [slot="supporting-text"] { overflow-wrap: anywhere; }
md-list-item [slot="end"] { white-space: nowrap; }
md-filled-button, md-filled-tonal-button, md-outlined-button, md-text-button { align-self: stretch; }
.duel-scoreboard { display: flex; align-items: center; gap: 16px; }
.duel-score-center { flex: 1; min-width: 0; text-align: center; }
.duel-names { display: flex; justify-content: space-around; gap: 8px; font-size: calc(12px * var(--font-scale, 1)); line-height: calc(16px * var(--font-scale, 1)); }
.duel-names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-score, .xp-gained-value { font-size: calc(36px * var(--font-scale, 1)); line-height: calc(44px * var(--font-scale, 1)); color: var(--md-sys-color-primary); }
.timer-container { display: grid; gap: 8px; }
#duelQuestionStart, #quizQuestionStart { scroll-margin-top: calc(16px + env(safe-area-inset-top)); }
body[data-screen="duel"], body[data-screen="quiz"] { overflow-anchor: none; }
.timer-header { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; }
.timer-digits { color: var(--md-sys-color-primary); font-variant-numeric: tabular-nums; }
.urgent { color: var(--md-sys-color-error); --md-linear-progress-active-indicator-color: var(--md-sys-color-error); }
.question-topic { color: var(--md-sys-color-primary); font-size: calc(12px * var(--font-scale, 1)); }
.question-title { overflow-wrap: anywhere; }
.answers-grid { display: grid; gap: 12px; }
.answer-btn { width: 100%; height: auto; min-height: 48px; }
.answer-text { padding-block: 8px; white-space: normal; overflow-wrap: anywhere; }
.answer-btn.correct {
  --md-outlined-button-disabled-label-text-color: var(--md-sys-color-primary);
  --md-outlined-button-disabled-label-text-opacity: 1;
  --md-outlined-button-disabled-icon-color: var(--md-sys-color-primary);
  --md-outlined-button-disabled-icon-opacity: 1;
}
.answer-btn.wrong {
  --md-outlined-button-disabled-label-text-color: var(--md-sys-color-error);
  --md-outlined-button-disabled-label-text-opacity: 1;
  --md-outlined-button-disabled-icon-color: var(--md-sys-color-error);
  --md-outlined-button-disabled-icon-opacity: 1;
}
.explanation-box { display: grid; grid-template-columns: 24px 1fr; gap: 8px; }
.explanation-box p { grid-column: 2; }
.result-title { font-size: calc(36px * var(--font-scale, 1)); line-height: calc(44px * var(--font-scale, 1)); white-space: pre-line; }
.result-score-summary { color: var(--md-sys-color-primary); }
.teacher-access { display: grid; gap: 8px; }
.teacher-access strong { font-size: calc(16px * var(--font-scale, 1)); line-height: calc(24px * var(--font-scale, 1)); font-weight: 500; }
.teacher-tabs { width: 100%; }
.subject-actions { display: flex; }
#subjectForm { scroll-margin-top: 96px; }
md-secondary-tab { flex: 1 0 auto; min-width: max-content; }
form { display: flex; flex-direction: column; gap: 24px; }
md-outlined-text-field, md-outlined-select { width: 100%; min-width: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
legend { margin-bottom: 16px; font-size: calc(12px * var(--font-scale, 1)); line-height: calc(16px * var(--font-scale, 1)); color: var(--md-sys-color-on-surface-variant); }
.option-input-row { display: flex; align-items: center; gap: 16px; }
md-radio { flex-shrink: 0; }
md-dialog { max-width: min(560px, calc(100vw - 32px)); }
md-icon svg { width: 24px; height: 24px; fill: currentColor; }
.status-error { color: var(--md-sys-color-error); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Surfaces and spacing frame official Material controls without replacing them. */
.app-header { font-weight: 500; letter-spacing: -.3px; }
.main-tabs { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.connection-status { min-height: 24px; margin-bottom: 16px; }
.page-heading h1 { letter-spacing: -.5px; overflow-wrap: anywhere; }
.page-heading .eyebrow { overflow-wrap: anywhere; }
.user-pill .avatar-img { width: 48px; height: 48px; }
#userBadge { max-width: 35%; overflow-wrap: anywhere; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-radius: 12px; padding: 6px 10px; }
.arena-hero-card { padding: 28px; border-radius: 32px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); gap: 20px; }
.arena-hero-card .hero-eyebrow, .arena-hero-card .hero-subtitle { color: inherit; }
.arena-hero-card .hero-subtitle { font-size: calc(16px * var(--font-scale, 1)); line-height: calc(24px * var(--font-scale, 1)); }
.arena-hero-card md-filled-button { min-height: 48px; margin-top: 4px; }
.home-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; }
.home-actions > * { width: 100%; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-heading > div { display: grid; gap: 6px; }
.section-heading > md-filled-tonal-button { flex-shrink: 0; align-self: center; }
#subjectsCount { padding: 8px 12px; border-radius: 12px; background: var(--md-sys-color-surface-container-high); }
.subject-grid { display: grid; gap: 12px; padding: 0; }
.subject-tile { border-radius: 24px; overflow: hidden; background: var(--md-sys-color-surface-container-low); --md-list-item-container-color: var(--md-sys-color-surface-container-low); --md-list-item-leading-space: 12px; --md-list-item-trailing-space: 16px; --md-list-item-top-space: 12px; --md-list-item-bottom-space: 12px; }
.subject-artwork { width: 64px; height: 64px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; overflow: hidden; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.subject-artwork img { width: 100%; height: 100%; object-fit: cover; }
.subject-artwork md-icon { --md-icon-size: 28px; }
.subject-tile [slot="supporting-text"] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.question-card, .result-card, .leader-card { padding: 24px; border-radius: 28px; background: var(--md-sys-color-surface-container-low); }
.result-card { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.duel-scoreboard { padding: 20px 16px; border-radius: 24px; background: var(--md-sys-color-surface-container-low); }
#duelPreparation { padding: 20px; border-radius: 24px; background: var(--md-sys-color-surface-container-low); }
.teacher-access { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 24px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.teacher-access > div { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.teacher-access > md-icon { flex-shrink: 0; }
.teacher-tabs { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
#subjectsList { padding: 0; }
#subjectsList md-list-item { --md-list-item-leading-space: 0; --md-list-item-trailing-space: 0; --md-list-item-top-space: 12px; --md-list-item-bottom-space: 12px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
#subjectsList .subject-artwork { width: 48px; height: 48px; border-radius: 12px; }
#subjectsList .subject-actions { flex-direction: column; }
#subjectForm { padding: 20px; border-radius: 28px; background: var(--md-sys-color-surface-container-low); }
.subject-image-editor { display: grid; gap: 12px; }
.subject-image-preview { aspect-ratio: 16 / 9; max-height: 240px; border-radius: 20px; overflow: hidden; background: var(--md-sys-color-surface-container-highest); }
.subject-image-preview > img { width: 100%; height: 100%; object-fit: contain; display: block; }
#subjectImagePlaceholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--md-sys-color-on-surface-variant); }
#subjectImagePlaceholder md-icon { --md-icon-size: 36px; }
.image-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.image-actions > * { flex-grow: 1; }
.review-round { padding: 20px; border: 0; border-radius: 24px; background: var(--md-sys-color-surface-container-low); }
@media (min-width: 600px) {
  .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena-hero-card { padding: 32px; }
}
@media (min-width: 760px) {
  body { background: var(--md-sys-color-surface-container); }
  .app-container { background: var(--md-sys-color-surface); border-inline: 1px solid var(--md-sys-color-outline-variant); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body[data-screen="duel"] .main-tabs, body[data-screen="result"] .main-tabs, body[data-screen="quiz"] .main-tabs { display: none; }
@media (max-width: 359px) {
  .content-area { padding-inline: 16px; }
  .hero-title { font-size: calc(28px * var(--font-scale, 1)); line-height: calc(36px * var(--font-scale, 1)); }
  .app-header { padding-inline: 8px; }
}