:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000000de;background-color:#f5f5f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:100vw;min-height:100vh;overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#007aff;color:#fff;cursor:pointer;transition:background-color .2s}button:hover{background-color:#0056b3}button:focus,button:focus-visible{outline:2px solid #007AFF}@media (prefers-color-scheme: dark){:root{color:#ffffffde;background-color:#242424}button{background-color:#0077e6}}#root{width:100%;height:100%;margin:0;padding:0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.app{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.canvas-container{flex:1;display:flex;width:100%;height:100%;overflow:hidden}.drawing-area{flex:1;display:flex;flex-direction:column;width:100%;height:100%;position:relative}.drawing-canvas{flex:1;width:100%;height:100%;background-color:#f5f5f7;cursor:crosshair;border:1px solid #ccc}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.controls{display:flex;justify-content:center;align-items:center;gap:10px;padding:10px;background-color:#fff;border-top:1px solid #ddd}.undo-btn,.random-btn{padding:8px 16px;border:none;border-radius:4px;background-color:#007aff;color:#fff;font-weight:700;cursor:pointer}.undo-btn:hover,.random-btn:hover{background-color:#0056b3}.undo-btn-error{background-color:#ff3b30;animation:pulse 1s infinite}.undo-btn-error:hover{background-color:#cc2e25}.brush-size{margin-top:10px;display:flex;flex-direction:column;align-items:center}.brush-size label{margin-bottom:5px;font-size:14px;white-space:nowrap;color:#333}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.color-pickers{margin-top:15px;display:flex;flex-direction:column;gap:8px;width:100%;padding:10px;background-color:#f5f5f5;border-radius:8px}.color-picker{display:flex;align-items:center;justify-content:space-between;width:100%}.color-picker label{font-size:14px;color:#333;flex:1}.color-picker input[type=color]{width:40px;height:30px;border:none;border-radius:4px;cursor:pointer;padding:0}.color-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker input[type=color]::-webkit-color-swatch{border:1px solid #ccc;border-radius:4px}.game-rules{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;padding:16px 24px;text-align:left;min-width:250px;max-width:300px;height:fit-content;order:2;overflow-y:auto;max-height:80vh}.game-rules h2{color:#007aff;margin-top:0;margin-bottom:16px;font-size:1.5rem}.game-rules p{margin:8px 0;font-size:1.1rem;color:#333}.error-message{background-color:#fee;border-left:4px solid #dc3545;padding:10px;margin-top:15px;color:#dc3545;font-weight:500}.error-message p{margin:5px 0}button:disabled{opacity:.5;cursor:not-allowed}input:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 900px){.canvas-container{flex-direction:column-reverse;align-items:center;gap:16px;max-height:none}.game-rules{order:1;width:100%;max-width:100%;margin-bottom:16px;max-height:200px}.drawing-area{order:2;width:100%;max-height:none}.drawing-canvas{max-height:calc(60vh - 70px);width:100%}}.debug-panel{position:fixed;left:20px;top:20px;background-color:#ffffffe6;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 8px #0000001a;max-width:300px;max-height:80vh;overflow-y:auto;transition:all .3s ease;z-index:1000;color:#333}.debug-panel.closed{height:40px;overflow:hidden}.debug-toggle{display:block;width:100%;padding:8px;background-color:#007aff;color:#fff;border:none;cursor:pointer;text-align:center;font-weight:700}.debug-toggle:hover{background-color:#0056b3}.debug-section{padding:10px;border-bottom:1px solid #eee}.debug-section h4{margin:0 0 10px;color:#333}.debug-data{max-height:200px;overflow-y:auto}.debug-item{margin-bottom:8px;font-size:12px;color:#333}.debug-item strong{display:block;margin-bottom:2px;color:#007aff}.debug-item pre{background-color:#f5f5f7;padding:5px;border-radius:4px;color:#333;overflow-x:auto}