.addition-app h2 { text-align: center; font-size: clamp(21px,3vw,26px); }
#a-progress { height: 100%; background: #163d68; }
#a-drawing { margin: 12px auto 16px; overflow-x: auto; padding: 6px 0; }
.addition-canvas { display: block; margin: auto; height: auto; min-width: 680px; shape-rendering: geometricPrecision; user-select: none; }
#a-board { touch-action: none; }
.addition-help { text-align: center; font-size: 14px; }
.a-hit { cursor: pointer; }
.a-hit:focus-visible { outline: none; stroke: #163d68; stroke-width: 1.5; stroke-dasharray: 3 3; }
.a-selected, #a-live { pointer-events: none; }
#a-feedback { padding: 14px 18px; margin-top: 20px; border: 2px solid transparent; background: #f0f5fb; border-radius: 4px; line-height: 1.6; }
#a-feedback:empty { display: none; }
#a-feedback[data-state=correct] { background: #e9f7ed; border-color: #228443; color: #166534; }
#a-feedback[data-state=incorrect] { background: #fff0f0; border-color: #c8323e; color: #a51c26; }
.addition-app .bottom { margin-top: 36px; padding-top: 24px; border-top: 1px solid #d8e2ee; }
@media(max-width:620px) { .addition-app .game { padding: 22px 12px; } .addition-canvas { min-width: 680px; max-width: none !important; } }

.addition-canvas.aromatic-canvas { min-width: 520px; }

.addition-canvas.proton-canvas { min-width: 0; }

.addition-canvas.rearrangement-canvas { min-width: 0; max-width: 100% !important; height: auto; }