#canvas { width: min(800px, 100vh, calc(100vw - 32px)); align-items: stretch; }
#board { display: block; width: 100%; height: auto; touch-action: manipulation; cursor: pointer; }
#board:not([data-ready]) { visibility: hidden; }
.quiz-container { box-sizing: border-box; width: min(410px, calc(100vw - 32px)); margin-top: 8px; }
#canvas-container { max-width: 100vw; }
#score { text-align: center; color: #333; font-weight: bold; }
#result-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; }
#result-buttons button { border: 0; border-radius: 5px; color: white; background: #007bff; padding: 10px 20px; min-height: 44px; font-size: 16px; cursor: pointer; }
#result-buttons button:last-child { background: #28a745; }
#result-buttons button:disabled { background: #6c757d; cursor: default; }
#explanation-message { width: min(800px, 92vw); box-sizing: border-box; margin-top: 16px; padding: 12px 14px; border-radius: 8px; border: 1px solid #0002; background: #fffffff2; box-shadow: 0 6px 18px #0001; color: #222; font-size: 14px; line-height: 1.6; }
#explanation-message summary { cursor: pointer; min-height: 44px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; list-style: none; }
#explanation-message summary::-webkit-details-marker { display: none; }
#explanation-message summary::after { content: '▶'; }
#explanation-message[open] summary::after { content: '▼'; }
#explanation-message-body { white-space: pre-wrap; margin-top: 8px; }