* { box-sizing: border-box; }
body { padding: 0; }
#canvas { width: 100%; align-items: center; }
#board-scroll { width: min(100vw, 100vh, 800px); aspect-ratio: 1; flex: none; overflow-y: auto; overflow-x: hidden; background: white; overscroll-behavior-y: contain; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-y; }
#board-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
#board-space { position: relative; }
#board { position: sticky; top: 0; display: block; width: 100%; cursor: grab; touch-action: none; }
#board.dragging { cursor: grabbing; }
.quiz-container { width: min(410px, calc(100vw - 32px)); }
#canvas-container { max-width: 100vw; padding: 0; }
#result-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; }
#result-buttons[hidden], #explanation-message[hidden] { display: none; }
#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: #888; cursor: default; }
#explanation-message { width: min(800px, 92vw); margin-top: 16px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.95); box-shadow: 0 6px 18px rgba(0,0,0,.10); color: #222; font-size: 14px; line-height: 1.6; }
#explanation-message summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; list-style: none; }
#explanation-message summary::-webkit-details-marker { display: none; }
#explanation-message summary::after { content: '▶'; font-size: 16px; opacity: .9; }
#explanation-message[open] summary::after { content: '▼'; }
#explanation-message-body { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }