/* The scratchpad sits in the browser's modal layer, above the live game. */
.g-question-tools{display:flex;align-items:center;gap:9px}.g-magic-button{display:flex;align-items:center;gap:6px;min-height:42px;padding:7px 11px;border:1px solid #bba7ed99;border-radius:12px;background:linear-gradient(135deg,#8260b654,#65b5c330);box-shadow:inset 0 1px #ffffff26,0 0 16px #be96fb15;color:#e8d8ff;font-size:11px;font-weight:700;white-space:nowrap}.g-magic-button svg{width:17px;height:17px}.g-magic-button:hover{border-color:#b8ffe0;background:#90cfc540}
#magic-board{padding:0;border:1px solid #d9c1f6a8;border-radius:27px;background:#111d31;color:#f5f0ff;width:min(1100px,calc(100vw - 40px));max-width:none;height:min(900px,calc(100dvh - 40px));max-height:none;margin:auto;overflow:hidden;box-shadow:0 0 0 5px #bb99ed14,0 0 80px #9c8ad529,0 35px 110px #020712cc;font-family:inherit}
#magic-board::backdrop{background:#030b1cc7;backdrop-filter:blur(13px)}
#magic-board[open]{animation:mb-arrive .26s cubic-bezier(.16,1,.3,1)}
.mb-shell{height:100%;display:flex;flex-direction:column;background:radial-gradient(ellipse at 13% 0,#8060b134,transparent 47%),linear-gradient(140deg,#292d48,#102637);min-height:0}
.mb-header{display:flex;align-items:center;justify-content:space-between;padding:20px 26px 15px;gap:14px;flex-shrink:0}.mb-heading{display:flex;align-items:center;gap:14px}.mb-heading small{display:block;font-size:9px;letter-spacing:2px;color:#bfacdf;font-weight:700}.mb-heading h2{font-size:29px;font-weight:750;letter-spacing:-.7px;margin:3px 0 0;color:#fff3d6}.mb-emblem{display:grid;place-items:center;width:48px;height:48px;background:linear-gradient(140deg,#b98fe63a,#85ffe81c);border:1px solid #dab9ff70;border-radius:15px;color:#e1c7ff;box-shadow:0 0 25px #c0a2ff15}.mb-emblem svg{width:29px;height:29px;filter:drop-shadow(0 0 5px #cda6ff)}.mb-close{width:46px;height:46px;border-radius:50%;background:#d3c3f21b;color:#f5e6ff;font-size:30px;border:1px solid #d9c3f950;display:grid;place-items:center;flex-shrink:0}
.mb-question{margin:0 26px 12px;padding:12px 17px;border:1px solid #c8b9e330;border-left:3px solid #bda1ed;background:#020a151f;border-radius:13px;flex-shrink:0}.mb-question>span{color:#c4b5dd;font-size:9px;letter-spacing:1.4px;font-weight:700;text-transform:uppercase}.mb-question>p{font-size:16px;line-height:1.55;color:#f2eddc;margin:5px 0 0;max-height:88px;overflow:auto;overscroll-behavior:contain}
.mb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 26px 12px;flex-shrink:0}.mb-tools{display:flex;gap:6px;align-items:center}.mb-toolbar button{display:flex;align-items:center;justify-content:center;gap:7px;height:44px;min-width:44px;padding:9px;border:1px solid #bcb7dc36;border-radius:11px;background:#ffffff07;color:#c9cddd;font-size:12px;font-weight:650}.mb-toolbar button[aria-pressed=true]{border-color:#b8ffe0a6;background:#b6ffe71c;color:#cdffe8}.mb-toolbar button:disabled{opacity:.32;cursor:default}.mb-toolbar svg{width:20px;height:20px;flex-shrink:0}.mb-size{display:flex;align-items:center;gap:7px;font-size:11px;color:#d1c8df;margin-left:3px}.mb-size select{min-height:44px;width:90px;padding:7px;border-radius:10px;border:1px solid #cdc3e340;background:#17273b;color:#e9e5f2;font:inherit;font-size:12px}
.mb-palette{display:flex;gap:2px;align-items:center}.mb-palette button{border-color:transparent;background:transparent;padding:9px}.mb-palette button span{display:block;width:20px;height:20px;border-radius:50%;background:var(--ink);box-shadow:0 0 12px color-mix(in srgb,var(--ink) 50%,transparent)}.mb-palette button[aria-pressed=true]{border-color:var(--ink);background:#ffffff0b}.mb-clear{color:#e9c6d7!important}
.mb-drawing-area{flex:1;min-height:0;margin:0 24px;display:flex;align-items:center;justify-content:center;overflow:hidden}.mb-paper{position:relative;max-width:100%;max-height:100%;flex-shrink:0;background:radial-gradient(ellipse at top,#172d3a,#081721 70%);border-radius:17px;box-shadow:inset 0 0 0 1px #8ddbe94d,inset 0 0 45px #82e7de06,0 0 25px #88efe50a;overflow:hidden}.mb-paper.has-grid{background-image:radial-gradient(#9fcee02b .9px,transparent 1px),radial-gradient(ellipse at top,#172d3a,#081721 70%);background-size:22px 22px,100% 100%}.mb-paper canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair}.mb-paper canvas.is-erasing{cursor:cell}
.mb-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 26px 21px;flex-shrink:0}.mb-footer p{color:#dcf6e8;font-size:13px;font-weight:600;margin:0 0 4px}.mb-footer span[role=status]{display:block;font-size:11px;line-height:1.4;color:#b9c5d1;max-width:510px}.mb-done{display:flex;align-items:center;gap:23px;background:linear-gradient(135deg,#c4ffe2,#a5dedb);color:#163339;box-shadow:0 4px #417675;border:1px solid #e2fff48a;padding:13px 21px;min-height:48px;border-radius:13px;font-size:13px;font-weight:750;white-space:nowrap}.mb-done>span{font-size:19px}#magic-board button:focus-visible,#magic-board select:focus-visible,.g-magic-button:focus-visible{outline:3px solid #ffe49b;outline-offset:3px}
@keyframes mb-arrive{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:950px){.mb-toolbar{flex-wrap:wrap;justify-content:start;gap:8px}.mb-history{margin-left:auto}.mb-palette{margin-left:auto}.mb-toolbar button{height:44px}.mb-heading h2{font-size:26px}.mb-question>p{font-size:15px}}
@media(max-width:600px){.g-magic-button{font-size:10px;padding:7px;gap:4px}.g-question-tools{gap:6px}#magic-board{width:calc(100vw - 16px);height:calc(100dvh - 24px);border-radius:22px}.mb-header{padding:15px 15px 11px}.mb-heading{gap:9px}.mb-heading small{font-size:7px;letter-spacing:1.3px}.mb-heading h2{font-size:24px}.mb-emblem{width:40px;height:40px}.mb-close{width:44px;height:44px}.mb-question{margin:0 14px 10px;padding:9px 11px}.mb-question>p{font-size:13px;max-height:86px}.mb-toolbar{padding:0 12px 9px;gap:7px;justify-content:center}.mb-toolbar .mb-palette{margin:0}.mb-tools{gap:4px}.mb-tools button{font-size:11px}.mb-size{gap:4px;font-size:10px}.mb-size select{width:79px}.mb-history{margin:0}.mb-history button{min-width:40px;padding:7px}.mb-palette{gap:0}.mb-palette button{min-width:40px;padding:7px}.mb-drawing-area{margin:0 12px;align-items:flex-start}.mb-footer{padding:12px 15px 16px;gap:9px;align-items:stretch;flex-direction:column}.mb-footer p{font-size:11px}.mb-footer span[role=status]{font-size:10px}.mb-done{justify-content:center;min-height:46px}.mb-paper{border-radius:12px}}
@media(max-height:600px) and (min-width:601px){#magic-board{height:calc(100dvh - 16px);width:calc(100vw - 24px)}.mb-header{padding:8px 19px}.mb-heading h2{font-size:21px}.mb-heading small{font-size:7px}.mb-emblem{width:34px;height:34px}.mb-close{width:40px;height:40px}.mb-question{margin:0 18px 7px;padding:6px 11px}.mb-question>p{font-size:12px;max-height:40px}.mb-question>span{font-size:8px}.mb-toolbar{padding:0 16px 7px;gap:5px}.mb-toolbar button{height:40px;min-width:40px}.mb-size select{min-height:40px}.mb-footer{padding:8px 19px 12px}.mb-done{min-height:40px;padding:7px 17px}.mb-footer p{font-size:11px}.mb-footer span[role=status]{font-size:9px}}
@media(prefers-reduced-motion:reduce){#magic-board[open]{animation:none}}
/* SV_MAGIC_BOARD_FIT_V1: on landscape screens the board uses the whole screen. "Back to question" moves up beside the
   close button, the header and question strip are compact, and the drawing paper gets the space
   (iPad 1024x768: about 830x525 instead of 547x347). Tool labels and buttons are larger. */
@media(orientation:landscape){
#magic-board{width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:22px}
.mb-shell{position:relative}
.mb-header{padding:10px 18px 8px;justify-content:flex-start}
.mb-heading{gap:10px}.mb-heading small{display:none}.mb-heading h2{margin:0;font-size:24px}
.mb-emblem{width:42px;height:42px;border-radius:13px}.mb-emblem svg{width:25px;height:25px}
.mb-close{margin-left:auto}
.mb-footer{position:absolute;top:9px;right:76px;padding:0;gap:0}
.mb-footer>div{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mb-done{min-height:48px;padding:10px 20px;font-size:16px;gap:12px}
.mb-question{margin:0 18px 8px;padding:8px 14px}.mb-question>span{font-size:11px}.mb-question>p{margin:3px 0 0;font-size:17px;line-height:1.4;max-height:2.8em}
.mb-toolbar{padding:0 18px 8px;gap:10px}
.mb-toolbar button{height:48px;min-width:48px;border-radius:12px;font-size:15px}.mb-toolbar svg{width:22px;height:22px}
.mb-size{font-size:14px}.mb-size select{min-height:48px;width:104px;font-size:15px}
.mb-palette button span{width:26px;height:26px}
.mb-drawing-area{margin:0 18px 14px}
}
@media(orientation:landscape) and (max-height:600px){
#magic-board{width:calc(100vw - 12px);height:calc(100dvh - 12px)}
.mb-header{padding:6px 14px}.mb-heading h2{font-size:19px}.mb-emblem{width:34px;height:34px}.mb-close{width:40px;height:40px;font-size:26px}
.mb-footer{top:6px;right:62px}.mb-done{min-height:40px;padding:6px 14px;font-size:14px}
.mb-question{margin:0 14px 6px;padding:5px 11px}.mb-question>span{display:none}.mb-question>p{margin:0;font-size:14px;max-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-toolbar{padding:0 14px 6px;gap:6px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}
.mb-toolbar button{height:42px;min-width:42px;font-size:13px}.mb-size{font-size:12px}.mb-size select{min-height:42px;width:92px;font-size:13px}
.mb-palette{margin-left:0}.mb-history{margin-left:0}.mb-palette button span{width:22px;height:22px}
.mb-drawing-area{margin:0 14px 8px}
}

/* SV_MAGIC_BOARD_FIT_V2: the title bar is folded away in landscape; close and "Back to question" sit top-right beside
   the question line, so the drawing paper gets almost all of the height (iPad 1024x768: about 950x600, was 813x515). */
@media(orientation:landscape){
#magic-board{width:calc(100vw - 8px);height:calc(100dvh - 8px);border-radius:18px}
.mb-header{position:absolute;top:6px;right:8px;padding:0;z-index:3;background:none;border:0}
.mb-heading{display:none}
.mb-close{width:44px;height:44px}
.mb-footer{top:6px;right:60px}
.mb-done{min-height:44px;padding:8px 18px;font-size:15px}
.mb-question{margin:8px 290px 6px 12px;padding:6px 12px;min-height:44px;box-sizing:border-box}.mb-question>span{display:none}
.mb-question>p{margin:0;font-size:16px;line-height:1.3;max-height:2.6em;overflow:hidden}
.mb-toolbar{padding:0 12px 6px}
.mb-drawing-area{margin:0 10px 10px}
}
@media(orientation:landscape) and (max-height:600px){
.mb-question{margin:5px 250px 4px 10px;min-height:38px;padding:4px 10px}.mb-question>p{font-size:14px;max-height:1.35em;white-space:nowrap;text-overflow:ellipsis}
.mb-close{width:38px;height:38px}.mb-footer{top:5px;right:52px}.mb-done{min-height:38px;padding:5px 12px;font-size:13px}
.mb-drawing-area{margin:0 8px 6px}
}