:root { color-scheme: light; --ink: #48280f; --leaf: #325c32; --cream: #fff9e9; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f3eddc; font-family: 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', 'Yu Gothic', Meiryo, sans-serif; }
body[data-dm-site-theme] { color: var(--ink); line-height: 1.4; }
button { font: inherit; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #135d91; outline-offset: 3px; }
[hidden] { display: none !important; }
.workshop { max-width: 1440px; margin: auto; }
.screen { position: relative; isolation: isolate; min-height: min(760px, calc(100svh - 90px)); }
.title-screen { overflow: hidden; background: #e2ce91 url('./assets/01-title-background.webp') center / cover; display: flex; align-items: center; flex-direction: column; padding: 16px 20px 22px; }
.wood-panel { background: #f3d39a; background-image: var(--panel); background-size: 100% 100%; background-repeat: no-repeat; }
.title-sign { background-color: transparent; width: min(650px, 90%); text-align: center; padding: 8px 28px 12px; filter: drop-shadow(0 5px 6px #50260755); }
ruby { ruby-position: over; }
rt { font-size: .4em; font-weight: 700; letter-spacing: .08em; }
.title-sign h1 { padding-top: .3em; line-height: 1.65; }
.play-heading ruby { line-height: 1.8; }
.play-heading rt { font-size: 11px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; margin: 4px 0; }
h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 900; letter-spacing: .02em; margin: 0; text-shadow: 0 2px #fff0c0; line-height: 1.35; }
.subtitle { text-align: center; margin: 6px 0; padding: 6px 20px; border-radius: 30px; background: #fff8e9ee; box-shadow: 0 3px 10px #4b250c40; font-size: clamp(14px, 1.6vw, 18px); font-weight: 800; }
.character { object-fit: contain; pointer-events: none; }
.title-rabbit { position: absolute; width: min(22%, 270px); left: 1%; bottom: 5%; z-index: -1; }
.title-squirrel { position: absolute; width: min(20%, 230px); right: 1%; bottom: 6%; z-index: -1; }
.title-actions { padding-top: 8px; width: min(760px, 100%); display: grid; justify-items: center; gap: 8px; }
.title-tools { display: grid; justify-items: center; gap: 8px; }
[data-sound-toggle] { flex: none; min-height: 44px; padding: 7px 12px; border: 1px solid #9e956e; border-radius: 12px; background: #fffbed; color: #48280f; font-size: 13px; font-weight: 800; white-space: nowrap; }
[data-sound-toggle][aria-pressed="true"] { background: #e4f1da; border-color: #325c32; color: #274c27; }
.choice-group { width: 100%; min-width: 0; margin: 0; padding: 8px 10px; background: #fff9edf5; border: 2px solid #c1a06b; border-radius: 18px; }
.choice-group legend { padding: 3px 10px; border-radius: 20px; background: #fff7df; font-size: 16px; font-weight: 900; }
.choice-step { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border-radius: 50%; background: var(--leaf); color: #fff; font-size: 15px; }
.choice-grid { display: grid; gap: 10px; }
.course-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.choice-surface { height: 100%; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 2px solid #bbab8c; border-radius: 12px; background: #fffef8; box-shadow: 0 2px 2px #66390916; }
.choice-title { font-size: 17px; line-height: 1.4; }
.choice-description { font-size: 14px; line-height: 1.5; }
.choice-status { margin-top: auto; align-self: flex-start; min-height: 24px; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 800; color: #655334; background: #f0eadc; }
.choice-selected { display: none; }
.choice-card input:checked + .choice-surface { border-color: var(--leaf); box-shadow: inset 0 0 0 1px var(--leaf); background: #eff7e5; }
.choice-card input:checked + .choice-surface .choice-status { color: white; background: var(--leaf); }
.choice-card input:checked + .choice-surface .choice-selected { display: inline; }
.choice-card input:checked + .choice-surface .choice-unselected { display: none; }
.choice-card input:focus-visible + .choice-surface { outline: 3px solid #135d91; outline-offset: 3px; }
.choice-card input:disabled + .choice-surface { opacity: .6; cursor: wait; }
@media (hover: hover) { .choice-card:hover .choice-surface { border-color: var(--leaf); } }
.start-selection { margin: 0; padding: 6px 12px; border-radius: 10px; color: var(--leaf); background: #fff9edfa; font-size: 14px; font-weight: 800; text-align: center; }
.title-actions > .art-button, .title-tools { width: min(390px, 100%); }
.title-actions > .green-button { min-height: 78px; }
.title-actions > .wood-button { min-height: 54px; }
.course-caption { margin: 0 0 8px; text-align: center; font-size: 14px; font-weight: 800; }
.play-screen .course-caption { color: #fffbed; text-shadow: 0 1px 2px #43270c; }
.art-button { display: block; border: 0; background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; width: 100%; min-height: 68px; padding: 10px 24px; font-weight: 900; }
.green-button { background-image: var(--green); color: #fffef2; min-height: 92px; font-size: 29px; text-shadow: 0 2px 3px #193e18; filter: drop-shadow(0 3px 3px #45200c50); }
.wood-button { background-image: var(--wood); font-size: 20px; }
.art-button:hover { filter: brightness(1.06) drop-shadow(0 3px 3px #45200c50); }
.art-button:active { transform: translateY(2px); }
.title-note { margin: 0; text-align: center; background: #fff8e9ec; padding: 8px 15px; border-radius: 12px; font-size: 13px; line-height: 1.65; }
#loading { margin: 12px 0 0; background: #fff9e9; border-radius: 8px; padding: 6px 12px; font-size: 13px; }
#loading:empty { display: none; }
.preview-note { margin: 0; padding: 8px; text-align: center; font-size: 12px; color: #645a49; }
.record-notice { max-width: 760px; margin: 12px auto; padding: 12px 16px; text-align: center; font-size: 13px; line-height: 1.7; background: #fff9ed; border-radius: 12px; }
.record-notice p { margin: 6px 0; }
.play-screen { background: #bb7837 url('./assets/02-game-background.webp') center / cover; padding: 20px clamp(10px, 4vw, 65px) 25px; }
.play-heading { text-align: center; margin: 0 0 10px; font-size: 24px; text-shadow: 0 1px #ffedbb; }
.play-heading-row { display: flex; align-items: center; gap: 8px; max-width: 924px; margin: 0 auto 10px; }
.play-heading-row .play-heading { flex: 1; margin: 0; }
.hud { display: flex; justify-content: center; gap: 12px; max-width: 924px; margin: auto; }
.hud>div { background-color: transparent; width: 33.333%; display: flex; justify-content: center; align-items: baseline; gap: 7px; padding: 14px 12px; white-space: nowrap; }
.hud span { font-weight: 800; font-size: 14px; }
.hud strong { font-size: 31px; line-height: 1; font-variant-numeric: tabular-nums; }
.hud small { font-size: 13px; }
.timer-status { min-height: 18px; margin: 3px 0 0; color: #fffbed; text-shadow: 0 1px 2px #43270c; font-size: 12px; font-weight: 800; text-align: center; }
.hud>.practice-actions { align-items: center; }
.practice-actions .plain-button { width: 100%; max-width: 150px; padding-inline: 7px; background: #fffbed; font-size: clamp(12px, 1.2vw, 15px); }
.time-low #time-left, .time-low .quiz-time { color: #a22b12; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.play-layout { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 340px); grid-template-areas: 'board calculation' 'controls calculation'; gap: 0 24px; max-width: 924px; margin: auto; align-items: start; }
.board-area { grid-area: board; min-width: 0; }
.board-footer { grid-area: controls; min-width: 0; }
.message-line { min-height: 45px; padding: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
#message { margin: 0; font-weight: 800; font-size: 14px; color: #412308; background: #fff5deed; border-radius: 8px; padding: 5px 10px; }
#chain { flex-shrink: 0; font-size: 16px; font-weight: 900; color: #fff; background: #557332; padding: 4px 8px; border-radius: 8px; }
.board { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; touch-action: none; }
.plate { position: relative; width: 100%; aspect-ratio: 1; border: 0; border-radius: 12%; padding: 4% 1% 3%; background: var(--plate) center / 100% 100% no-repeat; box-shadow: 0 3px 3px #512b113a; }
.plate:disabled { opacity: 1; cursor: default; }
.plate.empty-cell { background: none; box-shadow: none; }
.plate[aria-pressed="true"] { outline: 4px solid #365f2c; outline-offset: -4px; }
.plate[aria-pressed="true"]::after { content: '✓'; position: absolute; left: 3px; top: 2px; border-radius: 50%; background: #365f2c; color: white; width: 20px; height: 20px; font-size: 14px; line-height: 20px; }
.plate.hinted { outline: 3px dashed #32748f; outline-offset: -4px; }
.plate.merging { outline: 4px solid #426a2e; outline-offset: -4px; }
.plate.merging::after { content: '＋'; position: absolute; left: 3px; top: 2px; background: #426a2e; color: #fff; border-radius: 50%; width: 20px; height: 20px; font: 800 16px/20px sans-serif; }
.tart-content { position: absolute; inset: 4% 3%; pointer-events: none; }
.tart-content canvas { display: block; position: absolute; top: 0; left: 50%; height: 84%; width: auto; max-width: 100%; aspect-ratio: 1; transform: translateX(-50%); }
.tart-content.is-whole canvas { top: 50%; transform: translate(-50%, -50%); }
.fraction { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; font-size: clamp(13px, 1.6vw, 18px); line-height: 1.03; font-weight: 900; color: #342515; min-width: 1.35em; font-family: Georgia, 'Times New Roman', serif; -webkit-text-stroke: 2px #fff; paint-order: stroke fill; text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff, 1px 0 #fff, -1px 1px #fff, 0 1px #fff, 1px 1px #fff; }
.fraction .numerator { position: relative; padding: 0 .17em 2.7px; min-width: 100%; text-align: center; }
.fraction .numerator::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.7px; background: currentColor; box-shadow: 0 0 0 1px #fff; }
.fraction .denominator { padding-top: 1px; }
.fraction.whole { min-height: 2.2em; }
.fraction.equivalent-fraction { color: #5b3600; background: #fff1ab; border: 2px solid #b0770b; border-radius: 7px; padding: 2px 4px; box-shadow: 0 0 0 3px #fff9d7, 0 2px 7px #8b5a1455; -webkit-text-stroke: 0; text-shadow: none; }
.fraction.will-convert { color: #074774; background: #dff4ff; border: 2px dashed #1375a3; border-radius: 7px; padding: 2px 4px; box-shadow: 0 0 0 3px #f1fbff, 0 2px 7px #164b6655; -webkit-text-stroke: 0; text-shadow: none; }
.plate .fraction.equivalent-fraction, .plate .fraction.will-convert { font-size: clamp(14px, 2vw, 22px); }
.plate.conversion-preview { outline: 4px dashed #1375a3; outline-offset: -4px; }
.plate.conversion-preview::after { content: 'かわるよ'; left: 50%; top: 3px; transform: translateX(-50%); width: auto; height: auto; max-width: calc(100% - 6px); padding: 2px 4px; border-radius: 5px; background: #07547f; color: #fff; white-space: nowrap; font: 800 10px/1.2 sans-serif; }
.plate.converting { outline-color: #b0770b; }
.plate.converting::after { content: '＝'; background: #b0770b; }
.equation-conversion { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 7px 0 3px; font-size: 14px; font-weight: 900; }
/* Reserve two conversion lines so the backdrop never resizes with each phase. */
.conversion-space { display: flow-root; min-height: 4.8em; font-size: 14px; }
.equation-conversion span { padding: 2px 7px; background: #fff1ab; border: 1px solid #b0770b; border-radius: 6px; white-space: nowrap; }
.equation-conversion.is-preview span { color: #074774; background: #dff4ff; border: 2px dashed #1375a3; }
.calculation-panel { grid-area: calculation; min-width: 0; margin-top: 45px; padding: 16px; border: 2px solid #ceb47c; border-radius: 16px; background: #fffbed; box-shadow: 0 5px 20px #512b1140; }
.calculation-panel h3 { margin: 0 0 5px; text-align: center; font-size: 21px; color: var(--leaf); }
.calculation-history { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #dfca9d; }
.calculation-history label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 13px; font-weight: 800; }
#history-count { color: #665139; font-weight: 400; }
#history-select { width: 100%; min-width: 0; min-height: 44px; padding: 7px; border: 1px solid #b49f79; border-radius: 7px; background: #fffef8; color: var(--ink); font: inherit; font-size: 13px; }
.history-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
.history-actions button { min-height: 44px; padding: 5px 2px; border: 1px solid #b49f79; border-radius: 7px; background: #fffef8; font-size: 12px; font-weight: 800; }
.history-actions button:disabled { cursor: default; opacity: .5; }
#history-status { margin: 7px 0 0; min-height: 2.8em; font-size: 12px; line-height: 1.4; color: #665139; }
.calculation-panel.is-reviewing #history-status { color: #07547f; font-weight: 800; }
.calculation-panel.is-reviewing .calculation-step .step-state { display: none; }
.back-to-result { display: block; width: 100%; margin-top: 10px; }
.explanation-title { min-height: 2.8em; margin: 0 0 10px; text-align: center; color: #665139; font-size: 13px; font-weight: 800; }
.calculation-steps { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.calculation-step { min-width: 0; padding: 11px 10px; border: 1px solid #d8c9a8; border-radius: 10px; background: #fffef8; scroll-margin-block: 64px 12px; }
.calculation-step h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; }
.step-number { display: inline-grid; place-items: center; width: 23px; height: 23px; flex: none; background: #e9e2ce; border-radius: 50%; }
.step-state { display: none; margin-left: auto; color: #fff; background: #426a2e; border-radius: 5px; padding: 2px 4px; font-size: 10px; white-space: nowrap; }
.calculation-step.is-current { border: 2px solid #426a2e; padding: 10px 9px; background: #f3f8e9; }
.calculation-step.is-current .step-state { display: inline; }
.calculation-step.is-current .step-number { background: #426a2e; color: #fff; }
.calculation-step.is-pending { color: #807564; background: #f5f0e4; }
.equation { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; min-height: 68px; font-size: 25px; font-weight: 800; }
.equation .fraction { position: static; transform: none; font-size: 26px; -webkit-text-stroke: 0; text-shadow: none; }
.equation .fraction.whole { min-height: 56px; }
.result-space { display: grid; align-items: center; }
.result-space > * { grid-area: 1 / 1; min-width: 0; }
/* The question never changes the page height or moves the board out of view. */
.quiz-panel { position: fixed; z-index: 50; left: calc(50% + 122px); top: max(72px, calc(50dvh - 145px)); width: 340px; max-height: calc(100dvh - 84px); overflow-y: auto; padding: 12px; border: 3px solid #426a2e; border-radius: 16px; background: #fffbed; box-shadow: 0 6px 28px #35210b60; }
.quiz-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#quiz-prompt { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 16px; color: var(--leaf); }
#quiz-prompt .step-number { color: white; background: #426a2e; }
.quiz-exit { min-height: 44px; flex: none; padding: 4px 8px; border: 1px solid #b49f79; border-radius: 7px; background: #fffef8; font-size: 12px; }
.quiz-equation-label { margin: 3px 0 0; font-size: 12px; text-align: center; }
.quiz-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 8px; }
.quiz-time { margin: 3px 0 0; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quiz-time strong { font-size: 18px; }
.quiz-panel .equation { min-height: 64px; margin-bottom: 8px; }
.quiz-panel .equation .fraction { font-size: 25px; }
.quiz-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.quiz-choice { display: grid; place-items: center; min-height: 68px; padding: 7px 4px; background: #fffdf5; border: 2px solid #9f8559; border-radius: 10px; }
.quiz-choice .fraction { position: static; transform: none; font-size: 26px; -webkit-text-stroke: 0; text-shadow: none; }
.quiz-choice.is-wrong { border-style: dashed; opacity: .55; cursor: default; }
.quiz-choice.is-correct { border-color: #325c32; background: #dfefd5; opacity: 1; cursor: default; }
.quiz-feedback { min-height: 3em; margin: 8px 0 0; font-size: 13px; line-height: 1.5; font-weight: 800; color: #6b4917; }
.quiz-footer { display: flex; align-items: center; gap: 8px; }
.quiz-footer .quiz-feedback { flex: 1; min-width: 0; }
.quiz-footer [data-sound-toggle] { padding-inline: 8px; }
.quiz-hint #equation-common .numerator, .quiz-hint #quiz-equation .numerator { color: #07547f; background: #dff4ff; box-shadow: 0 0 0 2px #1375a3; border-radius: 3px; }
.equation-note { min-height: 3em; text-align: center; font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.completion-note { margin: 10px 0 0; padding: 9px; border-radius: 8px; background: #e4efd8; color: var(--leaf); text-align: center; font-size: 15px; font-weight: 800; }
.completion-space { display: flow-root; min-height: 49px; }
.board-tip { text-align: center; font-size: 12px; font-weight: 700; color: #fffbed; text-shadow: 0 1px 2px #43270c; margin: 11px 0; }
.play-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.small-wood { background: #fff6dc; border: 1px solid #bd945f; min-height: 44px; border-radius: 9px; font-size: 13px; font-weight: 800; box-shadow: 0 2px 2px #4c270c30; padding: 7px 3px; }
.result-screen { display: grid; place-items: center; padding: 25px 16px; background: #cca665 url('./assets/01-title-background.webp') center / cover; }
.result-card { width: min(500px, 100%); padding: 25px clamp(18px, 4vw, 40px); background: #fff9edfa; border: 3px solid #d3ac6c; border-radius: 25px; box-shadow: 0 12px 40px #39241260; text-align: center; }
.result-card h2 { font-size: clamp(22px, 4vw, 30px); margin: 5px 0; }
.result-art { height: 130px; display: flex; justify-content: center; margin-top: 12px; }
.result-art > img { height: 100%; max-width: 100%; object-fit: contain; }
.result-score { font-size: 18px; margin: 15px 0; color: var(--leaf); }
.result-score strong { font-size: 55px; }
.result-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; padding: 15px 0; border-block: 1px solid #dfca9d; }
.result-stats dt { font-size: 12px; }.result-stats dd { font-size: 24px; font-weight: 800; margin: 8px 0 0; }
.result-card .green-button { min-height: 74px; font-size: 24px; }
.plain-button { min-height: 44px; padding: 8px 18px; border: 1px solid #b7b493; background: #fffcf5; border-radius: 10px; font-weight: 700; }
.result-card .plain-button { margin-top: 12px; }
.result-finish-note { font-size: 12px; line-height: 1.6; }
dialog { width: min(650px, calc(100% - 24px)); max-height: calc(100svh - 30px); border: 2px solid #c6a570; background: #fffbed; color: var(--ink); border-radius: 20px; padding: 0 22px 22px; box-shadow: 0 10px 50px #291a1260; font-size: 14px; line-height: 1.8; }
dialog::backdrop { background: #1e241db0; }
.start-countdown { width: min(360px, calc(100% - 28px)); padding: 24px 18px; text-align: center; border: 3px solid var(--leaf); }
.start-countdown::backdrop { background: #39250e80; }
.start-countdown h2 { margin: 0; font-size: clamp(20px, 5vw, 25px); }
.countdown-number { margin: 10px auto; color: var(--leaf); font-size: clamp(80px, 20vw, 112px); font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
#countdown-note { margin: 8px 0 18px; font-size: 14px; }
.countdown-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.dialog-heading { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; background: #fffbed; z-index: 2; padding: 10px 0; border-bottom: 1px solid #e1d1ad; }
.dialog-heading h2 { margin: 0; font-size: 22px; }
.help-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.help-rule { border: 1px solid #e6d7b8; border-radius: 10px; padding: 7px; text-align: center; background: #fffef7; }
.help-art { display: flex; align-items: center; justify-content: center; gap: 3px; }
.help-art canvas { width: 42px; height: 42px; }
.help-rule p { margin: 3px 0 0; font-weight: 800; font-size: 13px; }
.help-important { padding: 9px 12px; background: #eaf1de; border-radius: 8px; font-weight: 800; }
summary { cursor: pointer; min-height: 44px; }
@media (max-width: 1050px) {
  .quiz-panel { left: 50%; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(430px, calc(100% - 24px)); padding: 8px 12px; }
  .play-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'board' 'calculation' 'controls'; max-width: 560px; row-gap: 12px; }
  .calculation-panel { margin-top: 0; }
}
@media (max-width: 700px) {
  .title-screen { min-height: min(760px, calc(100svh - 85px)); padding: 14px 12px 22px; background-position: 51% center; }
  .title-sign { width: 100%; padding: 17px 8px 22px; }
  .eyebrow { font-size: 10px; letter-spacing: .08em; } h1 { font-size: clamp(28px, 8vw, 50px); }
  .subtitle { max-width: 95%; padding: 8px 14px; font-size: 14px; }
  .title-rabbit { width: 115px; left: -12px; bottom: 14px; }
  .title-squirrel { width: 100px; right: -8px; bottom: 20px; }
  .title-actions { width: min(480px, 100%); padding-top: 8px; gap: 10px; }
  .choice-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .choice-group { padding: 10px; }
  .choice-group legend { font-size: 16px; }
  .choice-surface { padding: 10px 12px; gap: 4px; }
  .choice-status { margin-top: 3px; }
  .start-selection { font-size: 13px; }
  .course-caption { font-size: 12px; }
  .green-button { min-height: 72px; font-size: 26px; }.wood-button { min-height: 51px; font-size: 18px; }
  .title-note { font-size: 11px; }
  .play-screen { padding: 9px 10px 14px; background-size: auto 100%; }
  .play-heading { font-size: 18px; margin-bottom: 5px; }
  .hud { gap: 4px; }.hud>div { padding: 9px 3px; gap: 3px; flex-wrap: wrap; }
  .hud span { width: 100%; text-align: center; font-size: 10px; }.hud strong { font-size: 24px; }.hud small { font-size: 11px; }
  .play-layout { max-width: 490px; row-gap: 10px; }
  .board { gap: 4px; }.fraction { font-size: clamp(11px, 3.2vw, 18px); }.message-line { min-height: 50px; }
  .plate .fraction.equivalent-fraction, .plate .fraction.will-convert { font-size: clamp(13px, 3.8vw, 21px); }
  #message { font-size: 12px; padding: 4px 6px; }#chain { font-size: 12px; padding: 4px; }
  .calculation-panel { padding: 12px 10px; }
  .calculation-panel h3 { font-size: 19px; }
  .explanation-title { font-size: 12px; margin-bottom: 8px; }
  .calculation-steps { gap: 7px; }
  .calculation-step { padding: 8px; }
  .calculation-step.is-current { padding: 7px; }
  .calculation-step h4 { font-size: 13px; margin-bottom: 4px; }
  .equation { min-height: 60px; font-size: 23px; }
  .equation .fraction { font-size: 23px; }
  .equation .fraction.whole { min-height: 48px; }
  .equation-note { margin-top: 8px; font-size: 12px; }
  .board-tip { margin: 8px 0; font-size: 11px; }
  .play-actions { gap: 4px; }.small-wood { font-size: 11px; }
  .result-screen { min-height: calc(100svh - 70px); }.result-card { padding-block: 17px; }.result-art { height: 100px; }
  .result-score { margin: 6px 0; }
  dialog { padding-inline: 14px; }.help-art canvas { width: 30px; height: 30px; }.help-rule p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } .art-button:active { transform: none; } }
@media (max-width: 500px) {
  .help-rules { grid-template-columns: minmax(0, 1fr); }
  .help-art canvas { width: 38px; height: 38px; }
  .help-rule p { font-size: 13px; }
}

#history-select-buttons .dm-choice-buttons__option{min-height:64px;padding:8px;font-size:13px}#history-select-buttons .dm-choice-buttons__mark{font-size:10px}#history-select-buttons .dm-choice-buttons__list{grid-auto-rows:minmax(64px,auto)}