*, *::before, *::after { box-sizing: border-box; }
:root {
    --ink: #171717; --bg: #191919; --menu: #c9c9c3; --game: #e5e4dc;
    --paper: #fffef8; --blue: #123d61; --green: #17672f; --red: #a52d39;
    --muted: #62625d; --warm: #8b4b28; --line: #aaa9a2; --focus: #006dcc;
    --quiet: #41413e; --selected: #aaa9a2; --hover: #edede7; --inset: #d6d5ce;
    --workspace: #f7f6ee; --soft: #eeede6; --hint: #f3e5c8; --flipped: #dcebf3;
    --raised-shadow: #b4b3ac; --hard-shadow: #000;
    --body-font: Verdana, Geneva, sans-serif;
    --ui-label-font: "Courier New", monospace; --math-font: "Courier New", monospace;
    --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 280ms;
    --motion-ease: cubic-bezier(.2, .8, .2, 1); --motion-spring: cubic-bezier(.2, .9, .25, 1.15);
    --dark-ink: #f2f0e8; --dark-bg: #090b0d; --dark-menu: #20262b;
    --dark-game: #151a1e; --dark-paper: #252c32; --dark-blue: #79bff2;
    --dark-green: #69d58a; --dark-red: #ff8994; --dark-muted: #b8bec3;
    --dark-warm: #f0aa72; --dark-line: #667078; --dark-focus: #67b7ff;
    --dark-quiet: #c7ccd0; --dark-selected: #3b464f; --dark-hover: #303941;
    --dark-inset: #282f35; --dark-workspace: #1b2126; --dark-soft: #232a30;
    --dark-hint: #3a3024; --dark-flipped: #273f50; --dark-raised-shadow: #050607;
    --midnight-ink: #eef3ff; --midnight-bg: #000000; --midnight-menu: #07090f;
    --midnight-game: #000000; --midnight-paper: #0c111c; --midnight-blue: #7db9ff;
    --midnight-green: #70e0ad; --midnight-red: #ff8da1; --midnight-muted: #aeb8cc;
    --midnight-warm: #f4bc7d; --midnight-line: #46526b; --midnight-focus: #7dc4ff;
    --midnight-quiet: #c1cade; --midnight-selected: #18233a; --midnight-hover: #121a2b;
    --midnight-inset: #0a0f1a; --midnight-workspace: #03050a; --midnight-soft: #080d16;
    --midnight-hint: #211a0c; --midnight-flipped: #10233b;
    --midnight-raised-shadow: #000000;
    --sunset-ink: #f1d8ba; --sunset-bg: #17100e; --sunset-menu: #32201b;
    --sunset-game: #241713; --sunset-paper: #3a2620; --sunset-blue: #e5b36a;
    --sunset-green: #a9cf81; --sunset-red: #f09a8c; --sunset-muted: #c2a58e;
    --sunset-warm: #ffbd73; --sunset-line: #7b594a; --sunset-focus: #ffd08a;
    --sunset-quiet: #d8bba2; --sunset-selected: #574032; --sunset-hover: #49342b;
    --sunset-inset: #3d2922; --sunset-workspace: #2c1d18; --sunset-soft: #35231d;
    --sunset-hint: #48331f; --sunset-flipped: #513628; --sunset-raised-shadow: #0d0807;
    --pastel-ink: #342b48; --pastel-bg: #c9e9ff; --pastel-menu: #ffd6e7;
    --pastel-game: #fff0c9; --pastel-paper: #f8f2ff; --pastel-blue: #285b9b;
    --pastel-green: #1f755e; --pastel-red: #a23b68; --pastel-muted: #62566f;
    --pastel-warm: #87511b; --pastel-line: #9d86b3; --pastel-focus: #005fcc;
    --pastel-quiet: #594866; --pastel-selected: #d9c5f2; --pastel-hover: #e7dcfa;
    --pastel-inset: #d8f1ea; --pastel-workspace: #fef7ff; --pastel-soft: #e4f4ff;
    --pastel-hint: #fff0b8; --pastel-flipped: #ffd5e8;
    --pastel-raised-shadow: #8b72a0; --pastel-hard-shadow: #4c3d5b;
    color-scheme: light;
}
:root[data-color-scheme="dark"] {
    --ink: var(--dark-ink); --bg: var(--dark-bg); --menu: var(--dark-menu);
    --game: var(--dark-game); --paper: var(--dark-paper); --blue: var(--dark-blue);
    --green: var(--dark-green); --red: var(--dark-red); --muted: var(--dark-muted);
    --warm: var(--dark-warm); --line: var(--dark-line); --focus: var(--dark-focus);
    --quiet: var(--dark-quiet); --selected: var(--dark-selected); --hover: var(--dark-hover);
    --inset: var(--dark-inset); --workspace: var(--dark-workspace); --soft: var(--dark-soft);
    --hint: var(--dark-hint); --flipped: var(--dark-flipped);
    --raised-shadow: var(--dark-raised-shadow); --hard-shadow: var(--dark-raised-shadow);
    color-scheme: dark;
}
:root[data-color-scheme="midnight"] {
    --ink: var(--midnight-ink); --bg: var(--midnight-bg); --menu: var(--midnight-menu);
    --game: var(--midnight-game); --paper: var(--midnight-paper);
    --blue: var(--midnight-blue); --green: var(--midnight-green); --red: var(--midnight-red);
    --muted: var(--midnight-muted); --warm: var(--midnight-warm);
    --line: var(--midnight-line); --focus: var(--midnight-focus);
    --quiet: var(--midnight-quiet); --selected: var(--midnight-selected);
    --hover: var(--midnight-hover); --inset: var(--midnight-inset);
    --workspace: var(--midnight-workspace); --soft: var(--midnight-soft);
    --hint: var(--midnight-hint); --flipped: var(--midnight-flipped);
    --raised-shadow: var(--midnight-raised-shadow);
    --hard-shadow: var(--midnight-raised-shadow);
    color-scheme: dark;
}
:root[data-color-scheme="sunset"] {
    --ink: var(--sunset-ink); --bg: var(--sunset-bg); --menu: var(--sunset-menu);
    --game: var(--sunset-game); --paper: var(--sunset-paper); --blue: var(--sunset-blue);
    --green: var(--sunset-green); --red: var(--sunset-red); --muted: var(--sunset-muted);
    --warm: var(--sunset-warm); --line: var(--sunset-line); --focus: var(--sunset-focus);
    --quiet: var(--sunset-quiet); --selected: var(--sunset-selected);
    --hover: var(--sunset-hover); --inset: var(--sunset-inset);
    --workspace: var(--sunset-workspace); --soft: var(--sunset-soft);
    --hint: var(--sunset-hint); --flipped: var(--sunset-flipped);
    --raised-shadow: var(--sunset-raised-shadow); --hard-shadow: var(--sunset-raised-shadow);
    color-scheme: dark;
}
:root[data-color-scheme="pastel"] {
    --ink: var(--pastel-ink); --bg: var(--pastel-bg); --menu: var(--pastel-menu);
    --game: var(--pastel-game); --paper: var(--pastel-paper); --blue: var(--pastel-blue);
    --green: var(--pastel-green); --red: var(--pastel-red); --muted: var(--pastel-muted);
    --warm: var(--pastel-warm); --line: var(--pastel-line); --focus: var(--pastel-focus);
    --quiet: var(--pastel-quiet); --selected: var(--pastel-selected);
    --hover: var(--pastel-hover); --inset: var(--pastel-inset);
    --workspace: var(--pastel-workspace); --soft: var(--pastel-soft);
    --hint: var(--pastel-hint); --flipped: var(--pastel-flipped);
    --raised-shadow: var(--pastel-raised-shadow); --hard-shadow: var(--pastel-hard-shadow);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme]) {
        --ink: var(--dark-ink); --bg: var(--dark-bg); --menu: var(--dark-menu);
        --game: var(--dark-game); --paper: var(--dark-paper); --blue: var(--dark-blue);
        --green: var(--dark-green); --red: var(--dark-red); --muted: var(--dark-muted);
        --warm: var(--dark-warm); --line: var(--dark-line); --focus: var(--dark-focus);
        --quiet: var(--dark-quiet); --selected: var(--dark-selected); --hover: var(--dark-hover);
        --inset: var(--dark-inset); --workspace: var(--dark-workspace); --soft: var(--dark-soft);
        --hint: var(--dark-hint); --flipped: var(--dark-flipped);
        --raised-shadow: var(--dark-raised-shadow); --hard-shadow: var(--dark-raised-shadow);
        color-scheme: dark;
    }
}
body {
    margin: 0; min-height: 100vh; min-height: 100svh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
        env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--bg); color: var(--ink);
    font: 1rem/1.45 var(--body-font);
    transition: background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease);
}
html[lang^="zh"] { --body-font: "Microsoft YaHei", "Noto Sans CJK SC", "PingFang SC", sans-serif; --ui-label-font: var(--body-font); }
html[lang^="zh-Hant"] { --body-font: "Microsoft JhengHei", "Noto Sans CJK TC", "PingFang TC", sans-serif; }
html[lang^="ja"] { --body-font: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; --ui-label-font: var(--body-font); }
html[lang^="ko"] { --body-font: "Malgun Gothic", "Noto Sans KR", sans-serif; --ui-label-font: var(--body-font); }
html[lang^="ar"] { --body-font: Tahoma, "Noto Naskh Arabic", sans-serif; --ui-label-font: var(--body-font); }
html[lang^="ur"] { --body-font: "Noto Nastaliq Urdu", "Noto Naskh Arabic", Tahoma, sans-serif; --ui-label-font: var(--body-font); }
html[lang^="bn"] { --body-font: "Noto Sans Bengali", sans-serif; --ui-label-font: var(--body-font); }
html[lang^="hi"] { --body-font: "Noto Sans Devanagari", Mangal, sans-serif; --ui-label-font: var(--body-font); }
html:is([lang^="ar"], [lang^="ur"], [lang^="bn"], [lang^="hi"], [lang^="zh"], [lang^="ja"], [lang^="ko"]) :is(.section-label, .mode-group-label, #message strong, #flips strong) { letter-spacing: normal; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 5px var(--paper) !important; }
#wrapper {
    width: 1180px; max-width: calc(100% - 32px);
    height: calc(100svh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: min(600px, calc(100svh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    display: flex; margin: 24px auto; border: 2px solid var(--ink);
    box-shadow: 6px 6px var(--hard-shadow); background: var(--game);
    transition: background-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
}
body.sidebar-right #wrapper, html[dir="rtl"] #wrapper { flex-direction: row-reverse; }
body.sidebar-left #wrapper { flex-direction: row; }
#menu {
    width: clamp(280px, 29vw, 330px); min-height: 0; flex: none; padding: 16px 14px; background: var(--menu);
    border-right: 2px solid var(--ink);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
    transition: width var(--motion-slow) var(--motion-ease), padding var(--motion-slow) var(--motion-ease),
        background-color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease);
}
body.sidebar-right #menu, html[dir="rtl"] #menu { border-right: 0; border-left: 2px solid var(--ink); }
body.sidebar-left #menu { border-left: 0; border-right: 2px solid var(--ink); }
html[dir="rtl"] #menu, html[dir="rtl"] #game { text-align: right; }
.menu-heading { display: flex; align-items: start; gap: 10px; }
.menu-heading > div { min-width: 0; flex: 1; }
#sidebar_toggle { flex: none; padding: 5px 8px; }
h1 { margin: 4px 0; font: bold 1.45rem/1 "Courier New", monospace; letter-spacing: -.06em; }
.section-label {
    font-family: var(--ui-label-font); font-size: .7rem; font-weight: bold; letter-spacing: .12em; text-transform: uppercase;
}
.tagline { margin: 0 0 15px; color: var(--quiet); font-size: .78rem; }
#view_buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 6px 0 13px; }
#view_buttons button { min-width: 0; padding: 7px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 2px 2px var(--ink); overflow-wrap: anywhere; hyphens: auto; }
#view_buttons button.active { border-inline-start-width: 4px; background: var(--selected); font-weight: bold; box-shadow: 2px 2px var(--ink); }
#mode_buttons { display: grid; gap: 7px; margin: 6px 0 12px; }
.mode-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.mode-group-label {
    grid-column: 1 / -1; color: var(--muted);
    font-family: var(--ui-label-font); font-size: .65rem; font-weight: bold; letter-spacing: .08em; text-transform: uppercase;
}
#mode_buttons button, .primary, .secondary, .small-button {
    border: 1px solid var(--ink); background: var(--paper); box-shadow: 2px 2px var(--ink);
    transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease),
        background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease);
}
#view_buttons button, .about-links a {
    transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease),
        background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease);
}
#mode_buttons button { min-width: 0; padding: 7px 8px; text-align: start; overflow-wrap: anywhere; hyphens: auto; }
#mode_buttons button:hover, .primary:hover, .secondary:hover { background: var(--hover); }
#view_buttons button:hover, #mode_buttons button:hover, .primary:hover, .secondary:hover, .about-links a:hover {
    transform: translate(-1px, -1px); box-shadow: 3px 3px var(--ink);
}
#view_buttons button:active, #mode_buttons button:active, .primary:active, .secondary:active, .small-button:active,
.about-links a:active { transform: translate(1px, 1px); box-shadow: 1px 1px var(--ink); }
#mode_buttons button.active { border-inline-start-width: 4px; background: var(--selected); font-weight: bold; box-shadow: 2px 2px var(--ink); }
#mode_info { display: grid; gap: 4px; padding: 8px 9px; border: 1px solid var(--ink); background: var(--inset); font-size: .7rem; }
#mode_info strong { font-family: var(--ui-label-font); font-size: .8rem; font-weight: bold; text-transform: uppercase; }
#game {
    container: game / inline-size;
    display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column;
    padding: 20px 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
#game_toolbar { display: flex; justify-content: flex-end; min-height: 28px; margin-bottom: 8px; }
.toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
#game_toolbar #sidebar_toggle_play { padding: 4px 8px; }
.quick-select { position: relative; display: inline-grid; align-items: center; }
.quick-select::after {
    content: '▾'; position: absolute; inset-inline-end: 8px; color: var(--ink);
    font: bold .7rem/1 "Courier New", monospace; pointer-events: none;
}
.quick-select-icon {
    position: absolute; z-index: 1; inset-inline-start: 8px;
    font: bold 1rem/1 "Courier New", monospace; pointer-events: none;
}
.quick-select select {
    width: 100%; min-height: 2rem; padding-block: 4px; padding-inline: 28px 24px; appearance: none;
    border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
    box-shadow: 2px 2px var(--ink); font-family: var(--ui-label-font); font-size: .72rem; font-weight: bold;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease),
        background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease);
}
.quick-language { width: clamp(8rem, 18vw, 11rem); }
.quick-theme { width: clamp(7rem, 15vw, 9rem); }
.quick-select select:hover { transform: translate(-1px, -1px); background: var(--hover); box-shadow: 3px 3px var(--ink); }
.quick-select select:active { transform: translate(1px, 1px); box-shadow: 1px 1px var(--ink); }
.quick-select select[aria-busy="true"] { cursor: progress; opacity: .65; }
.screen > h2 { margin: 0 0 16px; font-family: var(--ui-label-font); font-size: 1.1rem; font-weight: bold; text-transform: uppercase; }
#play_screen:not([hidden]) {
    display: grid; min-height: 0; flex: 1;
    grid-template-rows: auto auto minmax(0, 1fr); gap: 12px;
}
#play_hud { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .75fr); gap: 12px; }
#play_hud:has(#round_bar[hidden]) { grid-template-columns: minmax(0, 1fr); }
#play_notices { display: grid; min-width: 0; align-content: start; gap: 7px; }
#play_screen #custom_panel { grid-row: 2; margin-top: 0; }
#play_screen #workspace { grid-row: 3; }
#message { padding: 11px 14px; border: 1px solid var(--ink); border-inline-start-width: 5px; background: var(--inset); }
#message.is-updating { animation: message-update var(--motion-base) var(--motion-ease); }
#message strong { display: block; font-family: var(--ui-label-font); font-size: .78rem; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; }
#message_text { font-size: .85rem; }
#message_text, #mode_info, .field-note { overflow-wrap: anywhere; }
#achievement_notice { color: var(--green); font-family: var(--ui-label-font); font-size: .75rem; font-weight: bold; }
#achievement_notice.is-updating { animation: notice-pop var(--motion-slow) var(--motion-spring); }
#learning_goal {
    display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: baseline;
    padding: 8px 11px; border: 1px dashed var(--warm); background: var(--hint);
}
#learning_goal strong { color: var(--warm); font-family: var(--ui-label-font); font-size: .75rem; font-weight: bold; text-transform: uppercase; }
#learning_goal code { color: var(--blue); direction: ltr; unicode-bidi: isolate; }
#round_bar {
    display: flex; min-width: 0; flex-wrap: wrap; gap: 6px 8px; align-content: start; align-items: center;
    padding: 10px 11px; border: 1px solid var(--line); background: var(--soft);
    font-size: .72rem; color: var(--muted);
}
#round_label { margin-inline-end: auto; color: var(--ink); font-family: var(--ui-label-font); font-size: .82rem; font-weight: bold; text-transform: uppercase; }
.round-kind { padding: 2px 7px; border: 1px solid var(--line); background: var(--paper); }
.round-kind.challenge { color: var(--red); border-color: var(--red); }
.round-kind.warmup { color: var(--green); border-color: var(--green); }
#workspace {
    display: flex; min-height: 0; flex-direction: column; padding: 15px 17px;
    border: 2px solid var(--ink); background: var(--workspace); box-shadow: 4px 4px var(--raised-shadow);
}
#flips { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .78rem; }
#flips strong { margin-inline-end: auto; color: var(--ink); font-family: var(--ui-label-font); font-size: .75rem; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; }
.flip-allowance { white-space: nowrap; }
#flip_count { color: var(--ink); font-weight: bold; }
#problem { min-height: 82px; display: flex; flex: 1; align-items: center; overflow-x: auto; padding: 8px 2px 13px; white-space: nowrap; font: 1.45rem var(--math-font); }
#problem.can-scroll { scrollbar-width: thin; }
#problem.can-scroll:not(.at-scroll-end) { box-shadow: inset -12px 0 9px -12px var(--ink); }
#problem, #feedback code, #history code { direction: ltr; text-align: left; unicode-bidi: isolate; }
#problem .number {
    min-width: 2.4rem; min-height: 2.4rem; padding: 1px 6px; border: 1px solid var(--ink);
    background: var(--paper); color: var(--blue); box-shadow: 2px 2px var(--ink);
    font: 1.65rem var(--math-font); font-variant-numeric: tabular-nums;
    touch-action: manipulation;
    transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease),
        background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
    #problem .number:not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 2px 4px var(--ink); }
}
#problem .number:not([aria-disabled="true"]):active { transform: translate(1px, 1px); box-shadow: 1px 1px var(--ink); }
#problem .number.flipped { color: var(--blue); background: var(--flipped); animation: number-flip var(--motion-base) var(--motion-spring); }
#problem .number[aria-disabled="true"] { cursor: default; opacity: .75; }
#problem.is-new-round .equation-side { animation: equation-enter var(--motion-slow) var(--motion-ease) both; }
#problem.is-new-round .equals { animation: equation-enter var(--motion-slow) 60ms var(--motion-ease) both; }
#problem .number.hint-target { outline: 2px dashed var(--warm); outline-offset: 3px; }
#problem .number.hint-target:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
#problem .number.gamepad-focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.equation-side.hint-side { background: var(--hint); outline: 2px dashed var(--warm); outline-offset: 4px; }
.operator, .equals { font-weight: bold; }
#actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; border-top: 1px solid var(--line); padding-top: 13px; }
#custom_progress { margin-inline-end: auto; font-family: var(--ui-label-font); font-size: .78rem; font-weight: bold; }
#feedback { margin-top: 14px; padding: 10px; border: 1px solid var(--line); background: var(--soft); font-size: .78rem; }
#feedback.is-updating { animation: feedback-enter var(--motion-slow) var(--motion-ease); transform-origin: top; }
#feedback p { margin: 0 0 5px; }
#feedback details { margin: 7px 0; }
#feedback summary { cursor: pointer; color: var(--blue); font-weight: bold; }
#feedback ol { margin: 6px 0; padding-inline-start: 24px; }
#feedback .alternate-solution { color: var(--green); font-weight: bold; }
#feedback .move-effect { padding: 6px 8px; border-inline-start: 3px solid var(--blue); background: var(--paper); }
#feedback .learning-reflection { color: var(--warm); }
#feedback code { display: block; overflow-x: auto; color: var(--blue); white-space: nowrap; }
#timer_label { padding: 2px 8px; color: var(--red); border: 1px solid var(--red); background: var(--paper); font-weight: bold; }
.primary { padding: 9px 14px; font-family: var(--ui-label-font); font-size: .85rem; font-weight: bold; text-transform: uppercase; }
#session_summary { width: 100%; margin: 2px 0 0; color: var(--muted); }
#session_summary_values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
#session_summary .session-stat { display: grid; min-width: 0; gap: 1px; padding: 6px 3px 0; text-align: center; }
#session_summary .session-stat + .session-stat { border-inline-start: 1px solid var(--line); }
#session_summary dt, #session_summary dd { margin: 0; }
#session_summary .summary-value { order: -1; color: var(--ink); font-size: .78rem; }
#session_summary .summary-label { overflow-wrap: anywhere; font-size: .62rem; line-height: 1.3; }
.panel-body { padding: 8px 3px 18px; overflow-x: auto; }
.difficulty-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.difficulty-grid article { padding: 9px; border: 1px solid var(--line); background: var(--soft); font-size: .72rem; }
.difficulty-grid h4 { margin: 0 0 5px; font-family: var(--ui-label-font); font-size: .78rem; font-weight: bold; }
.wave-note { margin: 10px 0 0; font-size: .78rem; color: var(--muted); }
#custom_panel { margin-top: 18px; padding: 13px; border: 1px solid var(--ink); background: var(--inset); }
#custom_panel > summary { cursor: pointer; color: var(--blue); font-family: var(--ui-label-font); font-size: .8rem; font-weight: bold; text-transform: uppercase; }
#custom_panel[open] > summary { margin-bottom: 12px; }
#custom_form { display: grid; gap: 12px; }
#custom_form fieldset { margin: 0; border: 1px solid var(--line); }
#custom_form legend { font-family: var(--ui-label-font); font-size: .75rem; font-weight: bold; text-transform: uppercase; }
#custom_operations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-size: .78rem; }
.check-option { display: flex; align-items: center; gap: 5px; min-height: 28px; }
.field-note { margin: 8px 0 0; color: var(--muted); font-size: .7rem; }
.custom-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.custom-fields label { display: grid; gap: 3px; font-size: .75rem; }
input[type="number"], input[type="text"], select {
    width: 100%; padding: 5px; border: 1px solid var(--ink); background: var(--paper);
}
input[type="checkbox"], input[type="range"] { accent-color: var(--blue); }
#history { margin: 0; padding: 0; }
#history li { list-style: none; padding: 9px 6px; border-bottom: 1px solid var(--line); }
#history li.correct { color: var(--green); } #history li.incorrect { color: var(--red); }
#history code { display: block; overflow-x: auto; padding-top: 4px; color: inherit; white-space: nowrap; }
.history-summary { font-size: .72rem; font-weight: bold; }
.history-date { color: var(--muted); font-weight: normal; }
.history-item-actions { display: flex; gap: 6px; margin-top: 6px; }
.history-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
#history_page { margin-inline-end: auto; font-size: .72rem; color: var(--muted); }
.secondary, .small-button { padding: 5px 9px; font-size: .72rem; }
table { width: 100%; min-width: 610px; border-collapse: collapse; font-size: .78rem; }
th, td { padding: 7px; border-bottom: 1px solid var(--line); text-align: start; }
.stats-actions { margin-top: 10px; text-align: end; }
.summary-value { color: var(--blue); font-family: var(--ui-label-font); font-size: 1.05rem; font-weight: bold; }
.summary-label { color: var(--muted); font-size: .68rem; text-transform: uppercase; }
#achievement_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 0; padding: 0; }
#achievement_list li { display: grid; list-style: none; padding: 8px; border: 1px solid var(--line); font-size: .7rem; }
#achievement_list li strong { font-family: var(--ui-label-font); font-size: .75rem; font-weight: bold; }
#achievement_list .locked { color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: .78rem; }
.settings-grid label { min-width: 0; }
.settings-grid label:has(select) { display: grid; align-content: start; gap: 4px; }
.settings-grid label:has(input[type="checkbox"]) {
    display: flex; align-items: center; gap: 7px; padding: 7px 8px;
    border: 1px solid var(--line); background: var(--soft);
}
html.large-text { font-size: 118.75%; }
body.high-contrast { --game: #fff; --menu: #fff; --paper: #fff; --line: #333; --muted: #333; --blue: #003b6f; }
body.high-contrast {
    --workspace: #fff; --soft: #fff; --inset: #fff; --hint: #fff; --flipped: #fff;
}
:root[data-color-scheme="dark"] body.high-contrast,
:root[data-color-scheme="midnight"] body.high-contrast,
:root[data-color-scheme="sunset"] body.high-contrast {
    --ink: rgb(255, 255, 255); --bg: rgb(0, 0, 0); --game: rgb(0, 0, 0);
    --menu: rgb(0, 0, 0); --paper: rgb(0, 0, 0); --workspace: rgb(0, 0, 0);
    --soft: rgb(0, 0, 0); --inset: rgb(0, 0, 0); --hint: rgb(0, 0, 0);
    --flipped: rgb(0, 0, 0); --line: rgb(255, 255, 255); --muted: rgb(255, 255, 255);
    --quiet: rgb(255, 255, 255); --blue: rgb(141, 206, 255);
    --raised-shadow: rgb(255, 255, 255); --hard-shadow: rgb(255, 255, 255);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme]) body.high-contrast {
        --ink: rgb(255, 255, 255); --bg: rgb(0, 0, 0); --game: rgb(0, 0, 0);
        --menu: rgb(0, 0, 0); --paper: rgb(0, 0, 0); --workspace: rgb(0, 0, 0);
        --soft: rgb(0, 0, 0); --inset: rgb(0, 0, 0); --hint: rgb(0, 0, 0);
        --flipped: rgb(0, 0, 0); --line: rgb(255, 255, 255);
        --muted: rgb(255, 255, 255); --quiet: rgb(255, 255, 255);
        --blue: rgb(141, 206, 255); --raised-shadow: rgb(255, 255, 255);
        --hard-shadow: rgb(255, 255, 255);
    }
}
body.reduced-clutter .options-extras, body.reduced-clutter #achievement_list { display: none; }
body.increased-text-spacing { line-height: 1.7; letter-spacing: .025em; word-spacing: .08em; }
html:is([lang^="ar"], [lang^="ur"], [lang^="bn"], [lang^="hi"], [lang^="zh"], [lang^="ja"], [lang^="ko"]) body.increased-text-spacing { letter-spacing: normal; }
body.increased-text-spacing #problem { letter-spacing: normal; word-spacing: normal; }
body.increased-text-spacing #session_summary .summary-label { line-height: inherit; }
#wrapper.sidebar-collapsed #menu { width: 62px; padding: 14px 8px; overflow-y: hidden; scrollbar-gutter: auto; }
#wrapper.sidebar-collapsed #menu .menu-heading > div,
#wrapper.sidebar-collapsed #menu > :not(.menu-heading) { display: none; }
#wrapper.sidebar-collapsed #menu .menu-heading { justify-content: center; }
#wrapper.sidebar-collapsed #sidebar_toggle { font-size: 0; }
#wrapper.sidebar-collapsed #sidebar_toggle::after { content: '☰'; font-size: 1rem; }
.options-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 16px; align-items: start; }
.options-difficulty { grid-column: 1 / -1; }
.screen-panel { padding: 15px; border: 1px solid var(--ink); background: var(--workspace); }
.screen-panel h3 { margin: 0 0 10px; font-family: var(--ui-label-font); font-size: .82rem; font-weight: bold; text-transform: uppercase; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.about-copy p { margin: 0 0 12px; }
.about-intro, .about-author, .about-privacy { grid-column: 1 / -1; }
.about-intro p { max-width: 68ch; }
.about-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.about-links a {
    display: block; height: 100%; padding: 8px 10px; border: 1px solid var(--line); background: var(--paper);
    box-shadow: 2px 2px var(--raised-shadow); font-family: var(--ui-label-font); font-size: .72rem; font-weight: bold; overflow-wrap: anywhere;
    text-decoration: none;
}
.about-links a:hover { background: var(--hover); }
body.underline-links a { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .18em; }
.about-author .about-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.support-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-version { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.app-version div { display: flex; flex-wrap: wrap; gap: 3px 7px; align-items: baseline; }
.app-version dt, .app-version dd { margin: 0; }
.app-version dt::after { content: ':'; }
.app-version dd { color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
footer { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; text-align: center; }
.screen:not([hidden]) { animation: screen-enter var(--motion-slow) var(--motion-ease) both; }
.screen:not([hidden]) .screen-panel { animation: panel-enter var(--motion-slow) var(--motion-ease) both; }
.screen:not([hidden]) .screen-panel:nth-child(2) { animation-delay: 35ms; }
.screen:not([hidden]) .screen-panel:nth-child(3) { animation-delay: 70ms; }
.screen:not([hidden]) .screen-panel:nth-child(4) { animation-delay: 105ms; }
@keyframes screen-enter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes panel-enter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes equation-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes number-flip {
    0% { transform: scale(1); }
    55% { transform: scale(.9); }
    100% { transform: scale(1); }
}
@keyframes message-update {
    0% { transform: translateX(0); }
    45% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}
@keyframes feedback-enter {
    from { opacity: 0; transform: translateY(-5px) scaleY(.98); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes notice-pop {
    from { opacity: 0; transform: translateY(4px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
[hidden] { display: none !important; }
@container game (max-width: 660px) {
    #play_hud { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    #round_bar { padding-block: 8px; }
    #message { padding-block: 8px; }
    #play_screen:not([hidden]) { gap: 9px; }
}
@container game (max-width: 430px) {
    #message_text { font-size: .78rem; }
    #round_bar { gap: 5px 7px; padding: 7px 8px; }
    #session_summary_values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #session_summary .session-stat:nth-child(odd) { border-inline-start: 0; }
    #session_summary .session-stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
    #actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #custom_progress, #submit { grid-column: 1 / -1; margin-inline-end: 0; }
    #actions > button { min-width: 0; padding-inline: 5px; }
    #workspace { padding-inline: 11px; }
}
@media (max-width: 960px) {
    #game { padding: 16px 13px; }
    .difficulty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #mode_info { display: none; }
    #score_label { display: none; }
    #problem { font-size: 1.05rem; }
    #problem .number { min-width: 44px; min-height: 44px; padding: 4px 8px; font-size: 1.2rem; }
    #session_summary { order: 5; margin-top: 0; }
    #achievement_list, .settings-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .about-intro, .about-author, .about-privacy { grid-column: auto; }
    .about-links, .about-author .about-links, .support-links { grid-template-columns: 1fr; }
    .about-links a { min-height: 44px; }
    .options-grid { grid-template-columns: 1fr; }
    #actions > button { flex: 1 1 9rem; min-height: 44px; }
    #custom_progress { flex-basis: 100%; }
    #view_buttons button, #mode_buttons button, select, .primary, .secondary, .small-button {
        min-height: 44px;
    }
    input[type="number"], input[type="text"], input[type="range"] { min-height: 44px; }
    .quick-select select { min-width: 44px; }
    .check-option, .settings-grid label:has(input[type="checkbox"]) { min-height: 44px; }
    input[type="checkbox"] { width: 24px; height: 24px; flex: none; }
    .panel-body th:first-child, .panel-body td:first-child {
        position: sticky; z-index: 1; inset-inline-start: 0; background: var(--workspace);
        box-shadow: 1px 0 var(--line);
    }
    html[dir="rtl"] .panel-body th:first-child, html[dir="rtl"] .panel-body td:first-child {
        box-shadow: -1px 0 var(--line);
    }
    .panel-body th:first-child { z-index: 2; }
}
@media (min-width: 641px) and (max-width: 960px) {
    #wrapper {
        width: auto; max-width: none;
        height: calc(100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        min-height: min(600px, calc(100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        margin: 10px;
    }
    #menu {
        width: clamp(240px, 32vw, 300px); min-height: 0; overflow-y: auto;
        overscroll-behavior: contain; scrollbar-gutter: stable;
    }
    #game { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
    #wrapper.sidebar-collapsed #menu { overflow-y: hidden; scrollbar-gutter: auto; }
}
@media (max-width: 640px) {
    #wrapper {
        position: relative; display: block; width: auto; max-width: none;
        height: calc(100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        min-height: min(480px, calc(100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        margin: 10px; padding-top: 58px; overflow: hidden;
    }
    body.sidebar-right #wrapper, body.sidebar-left #wrapper, html[dir="rtl"] #wrapper { flex-direction: column; }
    #menu {
        position: absolute; z-index: 30; inset: 0; width: 100%; height: 100%;
        padding: 14px; border-right: 0; border-bottom: 2px solid var(--ink);
        box-shadow: 0 5px var(--hard-shadow);
    }
    body.sidebar-right #menu, body.sidebar-left #menu, html[dir="rtl"] #menu {
        border-inline: 0; border-bottom: 2px solid var(--ink);
    }
    #game { height: 100%; }
    #sidebar_toggle_play { display: none; }
    #view_buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #mode_buttons { grid-template-columns: 1fr; }
    .mode-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .difficulty-grid { grid-template-columns: 1fr; }
    #wrapper.sidebar-collapsed #menu {
        inset-block-end: auto; width: 100%; height: 58px; padding: 7px 10px;
        box-shadow: none;
    }
    #wrapper.sidebar-collapsed #menu .menu-heading > div { display: block; }
    #wrapper.sidebar-collapsed #menu > :not(.menu-heading) { display: none; }
    #wrapper.sidebar-collapsed #menu .menu-heading { height: 42px; justify-content: space-between; align-items: center; }
    #wrapper.sidebar-collapsed #menu .tagline { display: none; }
    #wrapper.sidebar-collapsed #menu h1 { margin: 0; font-size: clamp(1rem, 5vw, 1.3rem); }
}
@media (max-width: 420px) {
    #custom_operations, .custom-fields { grid-template-columns: 1fr; }
    .mode-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #game_toolbar, .toolbar-controls { justify-content: flex-start; }
    .toolbar-controls { width: 100%; }
}
@media (max-height: 600px) {
    #wrapper { max-width: calc(100% - 16px); min-height: 0; margin-block: 8px; }
    #menu { padding-block: 10px; }
    .tagline { margin-bottom: 10px; }
    #view_buttons { margin-bottom: 10px; }
    #mode_buttons { gap: 6px; margin-bottom: 8px; }
    #game { padding-block: 10px; }
    #game_toolbar { margin-bottom: 4px; }
    #message { padding-block: 7px; }
    #play_screen:not([hidden]) { gap: 7px; }
    #play_hud { gap: 7px; }
    #round_bar { padding-block: 6px; }
    #workspace { padding-block: 10px; }
    #problem { min-height: 64px; padding-block: 7px 10px; }
}
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
    scroll-behavior: auto !important; transition: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) *,
    :root:not([data-motion="full"]) *::before,
    :root:not([data-motion="full"]) *::after {
        scroll-behavior: auto !important; transition: none !important; animation: none !important;
    }
}
@media (forced-colors: active) {
    :focus-visible, #problem .number.hint-target, #problem .number.gamepad-focus, .equation-side.hint-side {
        outline: 3px solid CanvasText;
    }
    #view_buttons button.active, #mode_buttons button.active, #problem .number.flipped {
        border: 3px solid CanvasText;
    }
    .quick-select select { border-color: CanvasText; }
}