/* BujjiWorld creative games — isolated from legacy game rules */
.creative-game{max-width:1050px;margin:0 auto;padding:clamp(12px,3vw,28px);border-radius:25px;background:#fff;box-shadow:0 10px 30px #39226b12;text-align:center;color:#25335b}
.creative-game h2{font-size:clamp(27px,5vw,42px);margin:5px 0 12px}
.creative-game .helper{font-size:clamp(16px,2.8vw,22px);margin:6px auto 20px;line-height:1.5}
.creative-game .tools{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:12px auto}
.creative-game button{font:inherit;cursor:pointer;touch-action:manipulation}
.creative-game .big-action{border:none;border-radius:18px;background:#7750dc;color:white;min-height:55px;padding:10px 19px;font-size:18px;font-weight:800}
.creative-game .big-action:focus-visible,.creative-game .colour-dot:focus-visible{outline:4px solid #f5a623;outline-offset:3px}
.creative-game .big-action.secondary{background:#ffd347;color:#35204e}
.creative-game .colour-dot{width:45px;height:45px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 2px #dad5e9}
.creative-game .colour-dot[aria-pressed=true]{box-shadow:0 0 0 5px #32216a;transform:scale(1.08)}
.creative-game .draw-surface{background:white;border:4px solid #b9a6f7;border-radius:18px;overflow:hidden;position:relative}
.creative-game #whiteboard-canvas{display:block;width:100%;height:min(62vh,560px);touch-action:none;cursor:crosshair;background:white}
.creative-game .draw-size{width:110px;accent-color:#7650dc}
.creative-game .drawing-shell:fullscreen{background:#fff9f1;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom);overflow:auto}
.creative-game .drawing-shell:fullscreen .draw-surface{flex:1;min-height:0}
.creative-game .drawing-shell:fullscreen #whiteboard-canvas{height:100%;min-height:0}
.creative-game .drawing-shell.mobile-fullscreen{position:fixed;z-index:99999;inset:0;background:#fff9f1;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 5px) 6px calc(env(safe-area-inset-bottom) + 6px);overflow:auto}
.creative-game .drawing-shell.mobile-fullscreen .draw-surface{flex:1;min-height:120px}
.creative-game .drawing-shell.mobile-fullscreen #whiteboard-canvas{height:100%}
.creative-game .game-status{font-size:clamp(19px,3vw,26px);font-weight:800;min-height:34px;color:#6240b6;margin:14px}
.creative-game .dots-board{display:block;width:min(100%,580px);margin:0 auto;background:#f9f6ff;border-radius:22px;border:3px solid #e4dcfa;touch-action:manipulation}
.creative-game .dots-point{cursor:pointer;outline:none}
.creative-game .dots-point circle{fill:#ffcf32;stroke:#663fd1;stroke-width:3}
.creative-game .dots-point text{fill:#321c58;stroke:none;font-size:19px;font-weight:900;pointer-events:none}
.creative-game .dots-point.active circle{fill:#abf0b4;stroke:#12854d}
.creative-game .dots-point.next circle{stroke:#fa4fa1;stroke-width:6}
.creative-game .arrows-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,1vw,10px);width:min(100%,570px);aspect-ratio:1;margin:16px auto;padding:clamp(8px,2vw,16px);background:#e9e0ff;border-radius:20px}
.creative-game .arrow-cell{min-width:0;border-radius:12px;display:flex;align-items:center;justify-content:center;border:2px dashed #d3c5ef;background:#f9f7ff;font-size:clamp(20px,5vw,44px);padding:0;line-height:1}
.creative-game .arrow-cell.has-arrow{background:#fff;color:#5939b0;border:2px solid #b9a6eb;box-shadow:0 3px 0 #d0c3ec}
.creative-game .arrow-cell.can-exit{background:#d8ffe7;border-color:#32ac70}
.creative-game .arrow-cell.blocked-flash{background:#ffbbcb;border-color:#ec5083}
.creative-game .arrow-cell:focus-visible{outline:4px solid #f6a623;outline-offset:2px}
@media(max-width:600px){.creative-game{padding:12px 6px}.creative-game .tools{gap:6px}.creative-game .big-action{font-size:16px;padding:8px 12px}.creative-game .colour-dot{width:39px;height:39px}.creative-game #whiteboard-canvas{height:58vh}}