@import url('/assets/fonts/noto-sans-sc-v1/wght.css');

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-sky: #ffffff;
  --surface-orange: #ffffff;
  --surface-green: #ffffff;
  --surface-navy: #123963;
  --text: #102b46;
  --muted: #49647a;
  --brand: #0877d1;
  --blue-deep: #075aa6;
  --accent: #f05a28;
  --emerald: #079455;
  --navy: #123963;
  --line: #97c6e5;
  --focus: #004c9e;
  --success: #067a45;
  --warning: #b53d13;
  --shadow: 0 10px 26px rgba(16, 60, 95, .1);
  --body-size: 1rem;
  --result-size: clamp(4rem, 6.4vw, 5.4rem);
  --radius: 16px;
  font-family: 'Noto Sans SC Variable', sans-serif;
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #071827;
  --surface: #0d2a43;
  --surface-strong: #123652;
  --surface-sky: #0d2a43;
  --surface-orange: #0d2a43;
  --surface-green: #0d2a43;
  --surface-navy: #061421;
  --text: #f3f9fd;
  --muted: #b7d5e7;
  --brand: #55b8ff;
  --blue-deep: #8bd2ff;
  --accent: #ff8459;
  --emerald: #4bd492;
  --navy: #8bd2ff;
  --line: #47738f;
  --focus: #ffd166;
  --success: #54dfa0;
  --warning: #ff9e77;
  --shadow: 0 10px 26px rgba(0, 0, 0, .26);
}

:root[data-contrast="high"] {
  --bg: #000;
  --surface: #000;
  --surface-strong: #000;
  --surface-sky: #000;
  --surface-orange: #000;
  --surface-green: #000;
  --surface-navy: #000;
  --text: #fff;
  --muted: #fff;
  --brand: #00ffff;
  --blue-deep: #00ffff;
  --accent: #ffff00;
  --emerald: #00ff7f;
  --navy: #00ffff;
  --line: #fff;
  --focus: #ff00ff;
  --success: #00ff7f;
  --warning: #ffff00;
  --shadow: none;
}

:root[data-font="standard"] { --body-size: .95rem; --result-size: clamp(3.7rem, 6vw, 5.05rem); }
:root[data-font="large"] { --body-size: 1rem; --result-size: clamp(4rem, 6.4vw, 5.4rem); }
:root[data-font="xlarge"] { --body-size: 1.1rem; --result-size: clamp(4.25rem, 6.8vw, 5.75rem); }

* { box-sizing: border-box; }
html { min-width: 0; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 0; overflow-x: clip; background: var(--bg); color: var(--text); font-size: var(--body-size); line-height: 1.45; }
body.home-page { background: #fff url('/assets/winner28-lottery-surface-v2.png') center 50px / min(1680px, 138vw) auto no-repeat fixed; }
:root[data-theme="dark"] body.home-page {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(4, 19, 32, .86), rgba(4, 19, 32, .86)), url('/assets/winner28-lottery-surface-v2.png');
  background-position: center 50px;
  background-size: min(1680px, 138vw) auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
:root[data-contrast="high"] body.home-page { background: var(--bg); }
a { color: inherit; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { min-height: 42px; }
img, canvas { max-width: 100%; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; left: 12px; top: 10px; z-index: 30; transform: translateY(-160%); padding: 10px 14px; background: var(--navy); color: #fff; border-radius: 8px; font-weight: 850; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.ui-icon,
.site-header nav a::before,
.header-button::before { width: 1.12em; height: 1.12em; display: inline-block; flex: 0 0 auto; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.icon-clock { -webkit-mask-image: url('/assets/icons/tabler-v3.49/clock.svg'); mask-image: url('/assets/icons/tabler-v3.49/clock.svg'); }
.icon-refresh { -webkit-mask-image: url('/assets/icons/tabler-v3.49/refresh.svg'); mask-image: url('/assets/icons/tabler-v3.49/refresh.svg'); }
.icon-history { -webkit-mask-image: url('/assets/icons/tabler-v3.49/history.svg'); mask-image: url('/assets/icons/tabler-v3.49/history.svg'); }
.icon-text-size { -webkit-mask-image: url('/assets/icons/tabler-v3.49/text-size.svg'); mask-image: url('/assets/icons/tabler-v3.49/text-size.svg'); }
.icon-volume { -webkit-mask-image: url('/assets/icons/tabler-v3.49/volume-2.svg'); mask-image: url('/assets/icons/tabler-v3.49/volume-2.svg'); }
.icon-contrast { -webkit-mask-image: url('/assets/icons/tabler-v3.49/contrast-2.svg'); mask-image: url('/assets/icons/tabler-v3.49/contrast-2.svg'); }

.site-header { width: min(1280px, 100%); margin: auto; min-height: 66px; padding: 7px 20px; display: grid; grid-template-columns: minmax(200px, 1fr) auto auto; align-items: center; gap: 14px; border-bottom: 3px solid var(--brand); background: var(--surface); }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; }
.brand img { width: 92px; height: 36px; flex: 0 0 auto; }
.brand span { display: grid; min-width: 0; line-height: 1.2; }
.brand strong { font-size: 1.28rem; letter-spacing: .03em; }
.brand small { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-header nav { display: flex; gap: 5px; }
.site-header nav a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 11px; border: 2px solid currentColor; border-radius: 8px; text-decoration: none; font-weight: 820; line-height: 1; }
.site-header nav a::before { content: ''; }
.site-header nav a:nth-child(1) { color: var(--brand); }
.site-header nav a:nth-child(1)::before { -webkit-mask-image: url('/assets/icons/tabler-v3.49/home.svg'); mask-image: url('/assets/icons/tabler-v3.49/home.svg'); }
.site-header nav a:nth-child(2) { color: var(--emerald); }
.site-header nav a:nth-child(2)::before { -webkit-mask-image: url('/assets/icons/tabler-v3.49/volume-2.svg'); mask-image: url('/assets/icons/tabler-v3.49/volume-2.svg'); }
.site-header nav a:nth-child(3) { color: var(--accent); }
.site-header nav a:nth-child(3)::before { -webkit-mask-image: url('/assets/icons/tabler-v3.49/cards.svg'); mask-image: url('/assets/icons/tabler-v3.49/cards.svg'); }
.site-header nav a:nth-child(4) { color: var(--navy); }
.site-header nav a:nth-child(4)::before { -webkit-mask-image: url('/assets/icons/tabler-v3.49/message-circle.svg'); mask-image: url('/assets/icons/tabler-v3.49/message-circle.svg'); }
.site-header nav a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.site-header nav a:hover { transform: translateY(-1px); }
.header-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 2px solid var(--navy); background: var(--surface); color: var(--navy); border-radius: 8px; padding: 6px 12px; font-weight: 850; cursor: pointer; }
.header-button::before { content: ''; -webkit-mask-image: url('/assets/icons/tabler-v3.49/moon-stars.svg'); mask-image: url('/assets/icons/tabler-v3.49/moon-stars.svg'); }
:root[data-theme="dark"] .header-button::before { -webkit-mask-image: url('/assets/icons/tabler-v3.49/sun.svg'); mask-image: url('/assets/icons/tabler-v3.49/sun.svg'); }

.page-shell { width: min(1240px, calc(100% - 24px)); margin: 10px auto 34px; }
.status-strip { min-height: 38px; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 6px 10px; margin-bottom: 8px; border: 1px solid var(--line); border-left: 5px solid var(--emerald); background: var(--surface); }
.status-strip strong { color: var(--success); }
.status-strip > [data-updated-time] { margin-right: auto; color: var(--muted); font-size: .88em; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); }
.status-strip[data-state="ready"] .status-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.text-button { min-height: 32px; padding: 3px 9px; border-color: var(--brand); color: var(--brand); }
.status-strip .text-button::before { content: ''; width: 1em; height: 1em; background: currentColor; -webkit-mask: url('/assets/icons/tabler-v3.49/refresh.svg') center / contain no-repeat; mask: url('/assets/icons/tabler-v3.49/refresh.svg') center / contain no-repeat; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(320px, .78fr); gap: 8px; }
.result-panel, .history-panel, .control-panel { min-width: 0; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.result-panel { min-height: 392px; padding: 18px 22px 14px; position: relative; overflow: hidden; border-color: var(--brand); background-color: #fff; background-image: url('/assets/winner28-lottery-surface-v2.png'); background-position: center 44%; background-size: cover; }
.result-panel::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(180deg, var(--brand) 0 46%, var(--accent) 46% 72%, var(--emerald) 72%); }
:root[data-theme="dark"] .result-panel {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(4, 25, 42, .8), rgba(4, 25, 42, .8)), url('/assets/winner28-lottery-surface-v2.png');
  background-position: center 44%;
  background-size: cover;
}
:root[data-contrast="high"] .result-panel { background: var(--surface); }
.history-panel { min-height: 392px; padding: 0 16px 10px; border-color: var(--navy); }
.history-panel > .section-heading { margin: -1px -17px 0; padding: 14px 16px 12px; border-radius: 14px 14px 0 0; background: var(--navy); color: #fff; }
.history-panel > .section-heading .eyebrow,
.history-panel > .section-heading .continuity { color: #fff; }
.section-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-heading.compact { align-items: center; }
.result-panel > .section-heading > div:first-child { padding: 7px 12px 8px; border-left: 5px solid var(--brand); border-radius: 7px; background: rgba(255, 255, 255, .94); box-shadow: 0 3px 10px rgba(16, 60, 95, .1); }
:root[data-theme="dark"] .result-panel > .section-heading > div:first-child { background: rgba(13, 42, 67, .94); box-shadow: 0 3px 10px rgba(0, 0, 0, .28); }
.eyebrow { margin: 0 0 2px; color: var(--brand); font-size: .7em; font-weight: 900; letter-spacing: .15em; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(1.65rem, 2.8vw, 2.2rem); line-height: 1.05; }
h2 { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.1; }
.history-panel h2 { display: flex; align-items: center; gap: 8px; }
.issue-block { display: flex; align-items: baseline; gap: 5px; min-width: 0; padding: 7px 12px; border-radius: 999px; background: var(--navy); color: #fff; white-space: nowrap; }
.issue-block span { font-size: .72em; }
.issue-block strong { font-size: 1.05em; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.draw-equation { position: relative; z-index: 1; min-height: 112px; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: clamp(5px, 1.1vw, 13px); margin: 18px auto 12px; font-size: clamp(1.75rem, 3.1vw, 2.65rem); font-weight: 950; line-height: 1; font-variant-numeric: tabular-nums; }
.number-ball, .sum-ball { width: 1.08em; height: 1.08em; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-size: var(--result-size); line-height: 1; color: #fff; border: 4px solid #fff; box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .13), 0 4px 10px rgba(12, 52, 81, .18); }
.number-ball { background: var(--brand); }
.number-ball[data-digit="1"] { background: var(--emerald); }
.number-ball[data-digit="2"] { background: var(--accent); }
.sum-ball { width: 1.38em; border-radius: .42em; background: var(--navy); }
:root[data-theme="dark"] .number-ball { color: #fff; border-color: #0d2a43; }
:root[data-contrast="high"] .number-ball { background: #fff; color: #000; border-color: #00ffff; }
:root[data-contrast="high"] .sum-ball { background: #ffff00; color: #000; border-color: #fff; }
.result-labels { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.result-labels span { min-width: 60px; padding: 4px 11px; border: 2px solid currentColor; border-radius: 999px; background: #fff; text-align: center; font-weight: 900; }
.result-labels span:nth-child(1) { color: var(--brand); }
.result-labels span:nth-child(2) { color: var(--accent); }
.result-labels span:nth-child(3) { color: var(--emerald); }
.result-labels span:nth-child(4) { background: var(--navy); color: #fff; border-color: var(--navy); }
:root[data-theme="dark"] .result-labels span { background: var(--surface); }
.result-meta { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(185px, .75fr); gap: 7px; margin-top: 12px; }
.result-meta p { min-height: 48px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px; margin: 0; padding: 6px 10px; border: 2px solid var(--brand); background: #fff; }
.result-meta p:nth-child(2) { border-color: var(--accent); background: var(--accent); color: #fff; }
.result-meta p:nth-child(2) strong { font-size: 1.4em; }
.result-meta span:not(.ui-icon) { color: var(--muted); font-size: .78em; }
.result-meta p:nth-child(2) span { color: #fff; }
.result-meta strong { min-width: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .result-meta p:first-child { background: #102f48; color: #f3f9fd; border-color: var(--brand); }
:root[data-theme="dark"] .result-meta p:first-child strong { color: #f3f9fd; }
.trust-note { position: relative; z-index: 1; margin: 8px 0 0; color: var(--muted); font-size: .78em; line-height: 1.3; }
.continuity, .voice-state { color: var(--muted); font-size: .78em; font-weight: 750; white-space: nowrap; }
.history-list { list-style: none; margin: 5px 0 0; padding: 0; display: grid; }
.history-list li { min-width: 0; min-height: 57px; display: grid; grid-template-columns: minmax(7.1ch, 1fr) auto auto; align-items: center; gap: 7px; padding: 7px 1px; border-bottom: 1px solid var(--line); }
.history-list li:last-child { border-bottom: 0; }
.history-list strong { color: var(--navy); font-variant-numeric: tabular-nums; }
.history-expression { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-label { min-width: 2.8em; padding: 3px 6px; border-radius: 5px; background: var(--accent); color: #fff; text-align: center; font-weight: 900; }
.history-list li:nth-child(even) .history-label { background: var(--emerald); }
.history-empty { display: block !important; color: var(--muted); }

.control-panel { margin-top: 10px; padding: 18px; border-color: var(--brand); }
.compact-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; box-shadow: none; }
.compact-controls .section-heading { display: grid; min-width: 128px; }
.compact-controls .voice-state { margin-top: 2px; }
.control-grid { display: grid; grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(190px, .8fr)); gap: 8px; margin-top: 16px; }
.compact-controls .control-grid { grid-template-columns: minmax(255px, 1.25fr) minmax(205px, 1fr) minmax(120px, .65fr); margin: 0; }
fieldset { min-width: 0; margin: 0; padding: 6px 7px 7px; border: 2px solid var(--line); border-radius: 10px; }
legend { padding-inline: 5px; color: var(--navy); font-size: .75em; font-weight: 900; }
legend .ui-icon { margin-right: 4px; vertical-align: -.15em; }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.segmented button, .primary-control { border: 2px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; padding: 7px 9px; font-weight: 850; cursor: pointer; }
.segmented button { min-height: 34px; }
.segmented button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.primary-control { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 54px; }
.control-grid > .primary-control:nth-of-type(1) { border-color: var(--emerald); color: var(--emerald); }
.control-grid > .primary-control:nth-of-type(2) { border-color: var(--accent); color: var(--accent); }
.primary-control[aria-pressed="true"] { background: var(--brand); color: #fff !important; border-color: var(--brand) !important; }
.control-help { color: var(--brand); font-size: .78em; font-weight: 800; white-space: nowrap; }
.shortcut-help { color: var(--muted); }
kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 5px; background: var(--surface); color: var(--text); text-align: center; }
.notice { margin-top: 14px; padding: 13px 16px; border: 2px solid var(--accent); border-left-width: 7px; background: var(--surface); border-radius: 9px; }
.notice p { margin: 4px 0 0; }
.feature-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.feature-links a { min-width: 0; display: grid; gap: 3px; padding: 16px; border: 2px solid var(--line); border-top: 6px solid var(--brand); border-radius: 10px; background: var(--surface); text-decoration: none; }
.feature-links a:nth-child(3n+2) { border-top-color: var(--accent); }
.feature-links a:nth-child(3n+3) { border-top-color: var(--emerald); }
.feature-links span { color: var(--muted); }
footer { min-height: 48px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; padding: 10px 16px 18px; color: var(--muted); font-size: .82em; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 15px; }
.footer-links a { color: var(--brand); font-weight: 800; }

.prose-page { max-width: 980px; margin-top: 18px; }
.prose-page .control-panel { background: var(--surface); border-top: 8px solid var(--brand); }
.guide-steps { display: grid; gap: 10px; padding-left: 1.5em; }
.guide-steps li { padding: 11px 13px; background: var(--surface); border: 2px solid var(--line); border-left: 7px solid var(--brand); border-radius: 8px; }
.guide-steps li:nth-child(3n+2) { border-left-color: var(--emerald); }
.guide-steps li:nth-child(3n+3) { border-left-color: var(--accent); }
.guide-steps li span { display: block; color: var(--muted); }
.primary-link { display: inline-block; padding: 10px 16px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 900; text-decoration: none; }
.editorial-note { margin-top: 12px; padding: 18px; border: 2px solid var(--brand); border-radius: 10px; background: var(--surface); }
.editorial-note h2 { margin-bottom: 7px; }
.editorial-note p { margin: 0; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.content-card { padding: 16px; border: 2px solid var(--line); border-top: 6px solid var(--brand); border-radius: 10px; background: var(--surface); }
.content-card:nth-child(3n+2) { border-top-color: var(--emerald); }
.content-card:nth-child(3n+3) { border-top-color: var(--accent); }
.content-card h2 { font-size: 1.2rem; }
.content-card p { margin-bottom: 0; }

.chat-shell { max-width: 1160px; }
.chat-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.chat-connection { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 0; }
.chat-connection > span { width: 12px; height: 12px; border-radius: 50%; background: var(--warning); }
.chat-connection[data-state="connected"] > span { background: var(--success); }
.chat-card { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: min(720px, 78vh); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.chat-profile { padding: 24px; background: var(--surface); border-right: 6px solid var(--brand); }
.chat-profile label { display: grid; gap: 6px; margin-top: 16px; font-weight: 900; }
.chat-profile input, .chat-form textarea { width: 100%; border: 2px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); padding: 11px; }
.chat-profile p { color: var(--muted); font-size: .9em; }
.chat-avatar { width: 52px; height: 52px; display: inline-grid; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.chat-avatar-large { width: 88px; height: 88px; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-room { min-width: 0; display: grid; grid-template-rows: auto minmax(260px, 1fr) auto auto; }
.chat-room > header { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 2px solid var(--line); background: var(--navy); color: #fff; }
.chat-room > header .eyebrow, .chat-room > header p:last-child { color: #fff; }
.chat-room > header p:last-child { margin: 0; }
.chat-messages { min-width: 0; padding: 18px 24px; overflow: auto; }
.chat-messages article { display: flex; gap: 12px; margin-bottom: 18px; }
.chat-messages article > div { min-width: 0; flex: 1; padding: 10px 14px; border: 2px solid var(--line); border-left: 5px solid var(--brand); border-radius: 9px; background: var(--surface); }
.chat-messages article:nth-child(2n) > div { border-left-color: var(--emerald); }
.chat-messages strong[data-admin="true"] { color: var(--accent); }
.chat-messages article header { display: flex; justify-content: space-between; gap: 10px; }
.chat-messages article p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-messages time { color: var(--muted); font-size: .8em; }
.chat-empty { color: var(--muted); text-align: center; margin-top: 56px; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); }
.chat-form .primary-link { border: 0; cursor: pointer; }
.chat-form .primary-link:disabled { opacity: .5; cursor: not-allowed; }
.chat-error { min-height: 1.5em; margin: 0; padding: 0 24px 14px; color: var(--warning); }

.scratch-shell { max-width: 980px; }
.scratch-status { color: var(--emerald); font-weight: 900; }
.scratch-board { min-height: 330px; position: relative; display: grid; place-items: center; overflow: hidden; margin-top: 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface-strong) url('/assets/winner28-scratch-pale-v1.png') center / cover no-repeat; }
.scratch-result { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; padding: 30px; text-align: center; }
.scratch-equation { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 18px); font-size: clamp(2rem, 8vw, 5.2rem); font-style: normal; font-weight: 950; }
.scratch-equation b, .scratch-equation strong { width: 1.2em; height: 1.2em; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; }
.scratch-equation strong { background: var(--accent); }
.scratch-equation i { font-style: normal; }
[data-scratch-canvas] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.scratch-lock { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--warning); font-size: 1.3em; font-weight: 950; text-align: center; }
.scratch-lock[hidden] { display: none; }
.scratch-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.scratch-actions .primary-control { min-height: 50px; border-color: var(--accent); color: var(--accent); }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { grid-column: 1 / -1; order: 3; width: 100%; }
  .site-header nav a { flex: 1 1 0; }
  .home-grid { grid-template-columns: 1fr; }
  .result-panel, .history-panel { min-height: 0; }
  .history-list li:nth-child(n+4) { display: none; }
  .compact-controls { grid-template-columns: 1fr; }
  .compact-controls .section-heading { display: flex; }
  .compact-controls .control-grid { grid-template-columns: 1fr 1fr; }
  .compact-controls .control-grid fieldset { grid-column: 1 / -1; }
  .compact-controls .control-help { justify-self: end; }
}

@media (max-width: 760px) {
  .chat-card { grid-template-columns: 1fr; min-height: 680px; }
  .chat-profile { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; border-right: 0; border-bottom: 5px solid var(--brand); padding: 14px; }
  .chat-profile label { margin: 0; }
  .chat-profile p { grid-column: 1 / -1; margin: 0; }
  .chat-room > header { align-items: flex-start; flex-direction: column; padding: 16px; }
  .chat-messages { padding: 14px; }
  .chat-form { grid-template-columns: 1fr; padding: 12px 14px; }
  .chat-error { padding-inline: 14px; }
}

@media (max-width: 620px) {
  body.home-page { background-position: center 42px; background-size: auto 520px; background-attachment: scroll; }
  .site-header { padding: 6px 8px 7px; gap: 5px 8px; min-height: 0; }
  .brand { gap: 6px; }
  .brand img { width: 68px; height: 30px; }
  .brand strong { font-size: 1.1rem; }
  .brand small { display: none; }
  .header-button { min-height: 34px; padding: 4px 8px; }
  .site-header nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .site-header nav a { min-width: 0; min-height: 34px; gap: 3px; padding: 4px 2px; border-width: 1px; border-radius: 6px; font-size: .75em; }
  .site-header nav a::before { width: 1em; height: 1em; }
  .page-shell { width: min(100% - 12px, 1240px); margin-top: 6px; margin-bottom: 20px; }
  .status-strip { min-height: 32px; padding: 3px 7px; margin-bottom: 6px; gap: 3px 7px; font-size: .75em; border-left-width: 4px; }
  .status-strip .text-button { min-height: 28px; padding-inline: 6px; }
  .home-grid { gap: 6px; }
  .result-panel, .history-panel, .control-panel { border-radius: 11px; }
  .result-panel { padding: 10px 10px 8px 14px; background-size: auto 100%; background-position: center; }
  :root[data-theme="dark"] .result-panel { background-size: cover, auto 100%; background-position: center, center; }
  .result-panel > .section-heading > div:first-child { padding: 4px 8px 5px; border-left-width: 4px; }
  .history-panel { padding: 0 10px 4px; }
  .history-panel > .section-heading { margin: -1px -11px 0; padding: 8px 10px; border-radius: 9px 9px 0 0; }
  .section-heading { gap: 7px; }
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.15rem; }
  .eyebrow { font-size: .58em; }
  .issue-block { padding: 4px 8px; font-size: .8em; }
  .draw-equation { min-height: 66px; gap: 3px; margin: 7px 0 5px; font-size: 1.25rem; }
  :root[data-font="standard"] .number-ball, :root[data-font="standard"] .sum-ball { font-size: 2.75rem; }
  :root[data-font="large"] .number-ball, :root[data-font="large"] .sum-ball { font-size: 3rem; }
  :root[data-font="xlarge"] .number-ball, :root[data-font="xlarge"] .sum-ball { font-size: 3.2rem; }
  .number-ball, .sum-ball { border-width: 3px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12), 0 2px 5px rgba(12,52,81,.16); }
  .sum-ball { width: 1.3em; }
  .result-labels { gap: 3px; }
  .result-labels span { min-width: 48px; padding: 2px 6px; border-width: 1px; font-size: .78em; }
  .result-meta { grid-template-columns: minmax(0, 1.2fr) minmax(118px, .8fr); gap: 4px; margin-top: 6px; }
  .result-meta p { min-height: 38px; gap: 4px; padding: 3px 6px; border-width: 1px; }
  .result-meta p:nth-child(2) strong { font-size: 1.15em; }
  .result-meta span:not(.ui-icon) { font-size: .66em; }
  .result-meta strong { font-size: .72em; }
  .trust-note { margin-top: 4px; font-size: .66em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .continuity { font-size: .66em; }
  .history-list { margin-top: 2px; }
  .history-list li { min-height: 39px; grid-template-columns: minmax(7.1ch, 1fr) auto auto; padding: 4px 0; gap: 5px; font-size: .78em; }
  .history-label { min-width: 2.6em; padding: 2px 5px; }
  .compact-controls { gap: 6px; padding: 7px; }
  .compact-controls .section-heading { display: flex; }
  .compact-controls .control-grid { gap: 5px; }
  .compact-controls .control-grid fieldset { padding: 3px 5px 5px; }
  .segmented button { min-height: 30px; padding: 4px; font-size: .78em; }
  .primary-control { min-height: 42px; padding: 5px; font-size: .76em; }
  .compact-controls .control-help { font-size: .68em; }
  .feature-links, .content-grid { grid-template-columns: 1fr; }
  footer { min-height: 40px; padding: 7px 10px 12px; }
}

@media (max-width: 340px) {
  :root { --body-size: .94rem; }
  .brand img { width: 62px; }
  .header-button { padding-inline: 7px; }
  .site-header nav a { font-size: .69em; }
  .draw-equation { gap: 2px; font-size: 1.05rem; }
  :root[data-font="standard"] .number-ball, :root[data-font="standard"] .sum-ball { font-size: 2.45rem; }
  :root[data-font="large"] .number-ball, :root[data-font="large"] .sum-ball { font-size: 2.63rem; }
  :root[data-font="xlarge"] .number-ball, :root[data-font="xlarge"] .sum-ball { font-size: 2.78rem; }
  .result-labels span { min-width: 43px; padding-inline: 4px; }
  .result-meta { grid-template-columns: minmax(0, 1.08fr) minmax(112px, .92fr); }
  .result-meta .ui-icon { display: none; }
  .history-list li { font-size: .72em; }
  .compact-controls .control-grid { grid-template-columns: 1fr 1fr; }
  .compact-controls .control-grid fieldset { grid-column: 1 / -1; }
}

:root[data-contrast="high"] body { background: #000; }
:root[data-contrast="high"] .site-header nav a,
:root[data-contrast="high"] .status-strip,
:root[data-contrast="high"] .result-panel,
:root[data-contrast="high"] .history-panel,
:root[data-contrast="high"] .control-panel,
:root[data-contrast="high"] .feature-links a,
:root[data-contrast="high"] .content-card,
:root[data-contrast="high"] .editorial-note,
:root[data-contrast="high"] .issue-block,
:root[data-contrast="high"] .result-meta p,
:root[data-contrast="high"] .result-labels span,
:root[data-contrast="high"] .chat-profile,
:root[data-contrast="high"] .chat-room > header,
:root[data-contrast="high"] .chat-messages article > div { background: #000; color: #fff; border-color: #fff; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}