:root{--header-height: 40px;--color-primary: #4361ee;--color-primary-light: rgba(67, 97, 238, .15);--color-primary-dark: #3f37c9;--color-success: #4cc9f0;--color-success-dark: #4895ef;--color-danger: #f72585;--color-warning: #f8961e;--color-info: #4895ef;--bg-app: #f8f9fa;--bg-panel: #ffffff;--bg-panel-header: #ffffff;--bg-input: #f1f3f5;--bg-message: #f8f9fa;--bg-message-system: #f1f3f5;--bg-message-correct: #ebfbee;--bg-player-active: #edf2ff;--bg-header: #ffffff;--bg-canvas: #ffffff;--bg-canvas-area: #f1f3f5;--bg-overlay: rgba(255, 255, 255, .85);--bg-tooltip: #212529;--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .4);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .1);--glass-blur: blur(8px);--text-primary: #212529;--text-secondary: #555555;--text-tertiary: #888888;--text-inverted: #ffffff;--text-system: #224488;--text-header: #224488;--text-muted: #aaaaaa;--border-color: #e9ecef;--border-color-light: #f1f3f5;--border-header-top: transparent;--border-header-bottom: #e9ecef;--input-border: #dee2e6;--toolbar-bg: rgba(255, 255, 255, .7);--toolbar-border: rgba(255, 255, 255, .3);--toolbar-container-bg: rgba(255, 255, 255, .7);--toolbar-button-bg: rgba(255, 255, 255, .8);--toolbar-button-border: rgba(255, 255, 255, .5);--toolbar-separator: rgba(0, 0, 0, .05);--toolbar-button-shadow: 0 2px 8px rgba(0, 0, 0, .05);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 8px 16px rgba(0, 0, 0, .08);--shadow-lg: 0 16px 32px rgba(0, 0, 0, .12);--canvas-shadow: 0 10px 30px rgba(0, 0, 0, .1);--border-radius-sm: 6px;--border-radius-md: 12px;--border-radius-lg: 20px;--border-radius-round: 50%;--border-radius-pill: 24px;--backdrop-blur: none;--transition-fast: all .2s ease;--transition-normal: all .3s ease;--z-canvas: 0;--z-overlay: 1;--z-toolbar: 1000;--z-dropdown: 1100;--z-modal: 1000;--z-notification: 10000}@media (max-width: 768px){:root{--header-height: 32px}}[data-theme=dark]{--color-primary: #64b5f6;--color-primary-light: rgba(100, 181, 246, .2);--bg-app: #121212;--bg-panel: #1e1e1e;--bg-panel-header: #252525;--bg-input: #2d2d2d;--bg-message: #1a2a3a;--bg-message-system: #2d2d2d;--bg-message-correct: #1b2e1b;--bg-player-active: #1a2a3a;--bg-header: #0d1b2a;--bg-canvas: #e0e0e0;--bg-canvas-area: #121212;--bg-overlay: rgba(30, 30, 30, .95);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-tertiary: #888888;--text-inverted: #121212;--text-system: #64b5f6;--text-header: #64b5f6;--border-color: #333333;--border-color-light: #222222;--input-border: #444444;--toolbar-bg: rgba(30, 30, 30, .6);--toolbar-border: #333333;--toolbar-container-bg: rgba(40, 40, 40, .6);--toolbar-button-bg: rgba(60, 60, 60, .6);--toolbar-button-border: rgba(255, 255, 255, .1);--toolbar-separator: rgba(255, 255, 255, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .5);--canvas-shadow: 0 4px 20px rgba(0, 0, 0, .6)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#747bff}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}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:#f9f9f9;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}html,body{width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overscroll-behavior:none;background-color:var(--bg-app);color:var(--text-primary)}#root{width:100%;height:100%;margin:0;padding:0}.app-container{width:100vw;height:100vh;height:100dvh;display:grid;overflow:hidden;box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom)}@media (min-aspect-ratio: 1 / 1){.app-container{grid-template-rows:var(--header-height) minmax(0,1fr);grid-template-columns:minmax(180px,240px) 1fr minmax(240px,320px);grid-template-areas:"header header header" "players canvas chat";gap:12px;padding:0 12px 12px;max-height:100dvh}.header-area{grid-area:header;z-index:100}.players-area{grid-area:players;border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}.canvas-area{grid-area:canvas;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--bg-canvas-area);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md)}.chat-area{grid-area:chat;border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}}@media (max-aspect-ratio: 1 / 1){.app-container{grid-template-rows:var(--header-height) auto 1fr;grid-template-columns:minmax(120px,40%) minmax(120px,60%);grid-template-areas:"header header" "canvas canvas" "players chat"}.header-area{grid-area:header;z-index:100}.canvas-area{grid-area:canvas;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--bg-canvas-area);padding:0;container-type:size}.app-container:not(.keyboard-mode) .canvas-area{width:100vw;height:100vw;max-height:calc(100dvh - var(--header-height) - 40px)}.players-area{grid-area:players;min-height:0}.app-container:not(.keyboard-mode) .players-area{max-height:calc(100dvh - var(--header-height) - 100vw)}.chat-area{grid-area:chat;min-height:0}.app-container:not(.keyboard-mode) .chat-area{max-height:calc(100dvh - var(--header-height) - 100vw)}}@media (max-aspect-ratio: 1 / 1){.app-container.keyboard-mode{position:absolute;top:var(--viewport-top, 0);left:0;width:100vw;height:var(--viewport-height, 100dvh);z-index:1000;background-color:var(--bg-app);overflow:hidden;grid-template-columns:min(calc(var(--viewport-height, 100dvh) - var(--header-height)),calc(100vw - 160px)) 1fr;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"header header" "canvas chat"}.app-container.keyboard-mode .header-area{grid-area:header}.app-container.keyboard-mode .canvas-area{grid-area:canvas;background-color:var(--bg-canvas-area)}.app-container.keyboard-mode .chat-area{grid-area:chat;border-left:1px solid var(--border-color);overflow:hidden;display:flex;flex-direction:column;background-color:var(--bg-panel)}.app-container.keyboard-mode.show-players .players-area{display:flex;grid-area:chat;border-left:1px solid var(--border-color);z-index:10}.app-container.keyboard-mode.show-players .chat-area,.app-container.keyboard-mode.show-chat .players-area{display:none}}.keyboard-mode-panel{display:flex;flex-direction:column;height:100%}.keyboard-mode-content{flex:1;overflow:hidden;position:relative}.keyboard-mode-pane{display:none;flex-direction:column;height:100%;overflow:hidden}.keyboard-mode-pane.active{display:flex}.keyboard-mode-form{padding:10px;border-top:1px solid var(--border-color);display:flex;gap:8px;background-color:var(--bg-panel);flex-shrink:0}.keyboard-mode-input{flex:1;min-width:0;padding:8px;border:1px solid var(--input-border);border-radius:var(--border-radius-sm);font-size:14px;background-color:var(--bg-input);color:var(--text-primary)}.keyboard-mode-toggle{width:100%;padding:10px;background-color:var(--bg-panel-header);color:var(--text-primary);border:none;border-top:1px solid var(--border-color);font-size:14px;font-weight:700;cursor:pointer;flex-shrink:0;box-shadow:var(--shadow-sm);z-index:100}.app-container.keyboard-mode .keyboard-mode-toggle{grid-area:chat;align-self:end}.toolbar-container{position:relative;background-color:var(--toolbar-container-bg)}.toolbar-container.hidden{opacity:0;pointer-events:none}.toolbar-container{padding:8px;border-radius:var(--border-radius-pill);box-shadow:var(--glass-shadow);width:fit-content;max-width:min(calc(100% - 8px),var(--pill-max-width, 500px));margin:0;max-height:60px;overflow:visible;box-sizing:border-box;display:flex;align-items:center;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border)}.toolbar-scroll-container{display:flex;flex-wrap:nowrap;gap:.5rem;align-items:center;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;width:100%;min-width:0;scrollbar-width:none;-ms-overflow-style:none;padding:4px 8px 6px;margin:-4px 0 -6px;mask-image:linear-gradient(to right,transparent,black 40px,black calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 40px,black calc(100% - 40px),transparent)}.scroll-indicator{position:absolute;top:50%;transform:translateY(-50%);z-index:10;color:var(--color-primary);font-weight:700;font-size:24px;pointer-events:none;animation:indicatorPulse 2s infinite ease-in-out;text-shadow:0 0 8px rgba(255,255,255,.8),0 0 4px var(--color-primary-light);-webkit-user-select:none;user-select:none}.scroll-indicator.left{left:6px}.scroll-indicator.right{right:6px}.scroll-indicator.hidden{opacity:0;visibility:hidden;transition:opacity .5s ease-out,visibility .5s}@keyframes indicatorPulse{0%,to{opacity:.4;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.3);color:var(--color-primary-dark)}}.toolbar-button{width:36px;height:36px;min-width:36px;min-height:36px;flex-shrink:0;border-radius:var(--border-radius-round);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--toolbar-button-border);background-color:var(--toolbar-button-bg);cursor:pointer;padding:0;box-shadow:var(--toolbar-button-shadow);transition:transform .15s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s ease,border-color .2s ease,background-color .2s ease;color:inherit;position:relative}.toolbar-button:hover:not(:disabled){transform:translateY(-2px) scale(1.1);z-index:2;box-shadow:0 6px 12px #0000001a;background-color:#fff}.toolbar-button:active:not(:disabled){transform:scale(.9)}.toolbar-button.active{border:2px solid var(--color-primary);background-color:var(--color-primary-light);box-shadow:0 0 12px var(--color-primary),0 0 4px var(--color-primary-light);z-index:1}.toolbar-button.select-rect{font-size:20px;font-weight:700}.toolbar-button.select-lasso{font-size:20px}.toolbar-button.copy-button,.toolbar-button.paste-button,.toolbar-button.delete-button{font-size:16px}.toolbar-button:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(1);pointer-events:none}.toolbar-button.active:disabled{opacity:1;filter:none;cursor:default}.toolbar-button.clear-canvas-btn{color:var(--color-danger);border-color:#ff6b6b33}.toolbar-button.clear-canvas-btn:hover:not(:disabled){background-color:#ff6b6b1a;border-color:var(--color-danger);box-shadow:0 0 10px #ff6b6b4d}.tool-toast{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:12px;background-color:var(--bg-tooltip);color:#fff;padding:6px 12px;border-radius:var(--border-radius-pill);font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;animation:toastFadeInUp .3s ease-out forwards;z-index:var(--z-notification);box-shadow:var(--shadow-md)}@keyframes toastFadeInUp{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.mobile-only{display:none}@media (max-width: 768px){.mobile-only{display:block}}.toolbar-separator-v{width:1px;height:24px;background-color:var(--toolbar-separator);margin:0 4px;flex-shrink:0}.color-picker-wrapper{flex-shrink:0}.color-picker-wrapper-relative{position:relative;display:inline-block;vertical-align:middle}.color-picker-dropdown{z-index:var(--z-notification);border:1px solid var(--border-color);background:var(--bg-panel);padding:10px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;pointer-events:auto;max-height:calc(100vh - 20px);overflow-y:auto;border-radius:var(--border-radius-sm)}.color-swatch{width:20px;height:20px;border:1px solid var(--border-color-light);padding:0;cursor:pointer;transition:transform .1s ease}.color-swatch:hover{transform:scale(1.2);z-index:1}.rgb-slider{flex:1;cursor:pointer}.stroke-width-dot{border-radius:var(--border-radius-round);border:1px solid rgba(0,0,0,.1)}.stroke-width-slider-row{display:flex;align-items:center;gap:4px}.stroke-width-slider{flex-grow:1;cursor:pointer;height:10px;margin:0}.stroke-width-value{min-width:16px;text-align:right;font-family:monospace;font-size:.9em;text-shadow:0px 0px 1px rgba(0,0,0,.5);line-height:1}.toolbar-drag-handle{width:24px;height:44px;display:flex;align-items:center;justify-content:center;cursor:grab;color:var(--text-tertiary);font-size:16px;-webkit-user-select:none;user-select:none;margin-right:4px;flex-shrink:0;touch-action:none}.toolbar-drag-handle:active{cursor:grabbing}.dropdown-container{position:absolute;bottom:calc(100% + 5px);left:0;z-index:var(--z-dropdown);border:1px solid var(--border-color);background:var(--bg-panel);padding:10px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;border-radius:var(--border-radius-sm)}.color-grid{display:grid;grid-template-columns:repeat(10,20px);gap:3px;margin-bottom:10px}.rgb-sliders-container{display:flex;flex-direction:column;gap:4px;width:226px}.rgb-slider-row{display:flex;align-items:center;gap:6px}.rgb-label{width:20px;font-weight:700;font-size:12px}.stroke-width-dropdown{min-width:140px;max-width:90vw;background-color:var(--bg-panel-header)}.canvas-container{position:relative;margin:0;width:100%;height:100%;background-color:var(--bg-canvas-area);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;--canvas-size: min(100cqw - 4px, 100cqh - 4px)}.canvas-container.readonly{--canvas-size: min(100cqw - 4px, 100cqh - 4px)}.canvas-container.readonly canvas{cursor:not-allowed!important}.canvas-area{container-type:size}.timer-progress-overlay{pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));background:transparent}.canvas-drawing-area{position:relative;width:var(--canvas-size);aspect-ratio:1 / 1;overflow:hidden;background-color:var(--bg-canvas);box-shadow:var(--canvas-shadow);outline:1px solid var(--border-color);outline-offset:-1px}.canvas-drawing-area canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none!important}.canvas-drawing-area canvas#overlayCanvas{pointer-events:auto!important}.players-area,.chat-area{overflow:auto;background-color:var(--bg-panel)}.chat-messages::-webkit-scrollbar,.players-panel .player-list::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track,.players-panel .player-list::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb,.players-panel .player-list::-webkit-scrollbar-thumb{background-color:#0000001a;border-radius:10px}.chat-messages::-webkit-scrollbar-thumb:hover,.players-panel .player-list::-webkit-scrollbar-thumb:hover{background-color:#0003}.chat-messages,.players-panel .player-list{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}@media (max-width: 768px){.chat-panel-header,.players-panel-header{padding:6px 8px!important;font-size:13px}.chat-panel .chat-messages{padding:4px!important;gap:4px!important}.chat-panel .message-card{padding:4px 6px!important;font-size:12px!important}.chat-panel form{padding:6px 8px!important;gap:6px!important}.chat-panel input{padding:6px!important;font-size:13px!important}.chat-panel button{min-width:32px!important;width:32px!important;height:32px!important;font-size:16px!important}.chat-panel form button[type=submit]{display:none!important}}@media (pointer: coarse){.chat-panel .chat-send-button{display:none!important}.players-panel .player-list{padding:6px!important}.players-panel .player-card{padding:6px!important;margin-bottom:6px!important;font-size:13px!important}}.chat-panel{height:100%;display:flex;flex-direction:column;background-color:var(--bg-panel);border-left:1px solid var(--border-color);overflow:hidden}.chat-panel-header{padding:8px 12px;background-color:var(--bg-panel-header);border-bottom:1px solid var(--border-color);font-weight:700;font-size:14px;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;position:relative;z-index:10}.chat-form{padding:10px;border-top:1px solid var(--border-color);display:flex;gap:8px;background-color:var(--bg-panel)}.chat-input{flex:1;min-width:0;padding:8px 12px;border-radius:var(--border-radius-pill);border:1px solid var(--input-border);font-size:14px;outline:none;background-color:var(--bg-input);color:var(--text-primary)}.chat-send-button{padding:8px;min-width:36px;width:36px;height:36px;background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius-md);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-fast)}.chat-send-button:hover:not(:disabled){background-color:var(--color-primary-dark)}.chat-send-button:disabled{opacity:.6;cursor:not-allowed}.players-panel{height:100%;display:flex;flex-direction:column;background-color:var(--bg-panel);border-right:1px solid var(--border-color);overflow:hidden}.players-panel-header{padding:8px 12px;background-color:var(--bg-panel-header);border-bottom:1px solid var(--border-color);font-weight:700;font-size:14px;color:var(--text-secondary)}.player-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.player-card{padding:10px 14px;border-radius:var(--border-radius-md);border:1px solid var(--border-color);background-color:var(--bg-panel);display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 4px #00000005}.player-card:hover{transform:translate(4px);border-color:var(--color-primary-light);box-shadow:0 4px 8px #0000000d}.player-card.active{background-color:var(--bg-player-active);border-color:var(--color-primary);box-shadow:0 4px 12px var(--color-primary-light);transform:scale(1.02)}.player-card.active:before{content:"Drawing...";position:absolute;top:-10px;right:12px;background:var(--color-primary);color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;padding:2px 6px;border-radius:4px;letter-spacing:.5px;animation:pulseOpacity 2s infinite ease-in-out}@keyframes pulseOpacity{0%,to{opacity:1}50%{opacity:.7}}.player-name{font-weight:700;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:4px;flex:1;min-width:0}.player-display-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.player-status-icons{flex-shrink:0;display:inline-flex;gap:2px}.player-score{font-size:13px;font-weight:700;color:var(--text-secondary);margin-left:8px;flex-shrink:0}.player-role-admin{font-weight:700!important;color:#006400!important}.player-role-moderator{color:#006400!important}.player-kicked-1{color:#800!important}.player-kicked-2{color:#c00!important}.player-kicked-3{color:red!important}.player-actions-overlay-trigger{margin-left:4px;cursor:pointer;opacity:.5;transition:opacity .2s;flex-shrink:0}.player-card:hover .player-actions-overlay-trigger{opacity:1}.player-actions{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;justify-content:center;background-color:var(--bg-panel);z-index:10;border-radius:var(--border-radius-sm);box-shadow:var(--shadow-sm);animation:fadeIn .15s ease-out}.mod-button{padding:2px 4px;font-size:10px;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-panel-header);cursor:pointer}.mod-button:hover{background:var(--color-primary-light)}.mod-button.kick{color:#c00}.mod-button.ban{background:#c00;color:#fff}.chat-messages-container{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:4px;background-color:var(--bg-panel)}.message-card{padding:0;background-color:#343a40;color:#f8f9fa;border:none;border-radius:16px 16px 16px 4px;font-size:14px;line-height:1.4;display:flex;flex-direction:column;gap:0;box-shadow:0 2px 8px #0000001f;max-width:80%;align-self:flex-start;word-break:break-word;transition:transform .2s ease;flex-shrink:0;min-height:min-content}.message-card:hover{transform:scale(1.015)}.message-card.own-message{align-self:flex-end;background:linear-gradient(135deg,#6e8afb,#5c7cfa);color:#fff;border:none;border-radius:16px 16px 4px;box-shadow:0 4px 12px #5c7cfa40;overflow:hidden}.message-card.own-message .message-text{color:#fff}.message-card.system{background-color:var(--border-color-light);border:1px solid var(--border-color);font-style:normal;color:var(--text-secondary);padding:0;box-shadow:var(--shadow-sm);font-size:12px;font-weight:500;align-self:stretch;max-width:100%;text-align:center;border-radius:var(--border-radius-pill);margin:4px 0}.message-card.system.gameplay{background-color:#f1f3f5}.message-card.system.gameplay .message-text{color:#495057}.message-card.system.result{background-color:#ebfbee}.message-card.system.result .message-text{color:#2b8a3e}.message-card.system.utility{background-color:#f8f9fa}.message-card.system.utility .message-text{color:#868e96}.message-card.system.separator{background-color:#fff;border:1px solid var(--border-color);text-align:center;font-weight:600;margin:6px 0;color:var(--text-secondary);font-size:12px;letter-spacing:.5px;box-shadow:0 2px 4px #0000000d}.message-card.system.separator .message-item:after{display:none}.message-card.system .message-sender,.message-card.victory .message-sender{display:none!important}.message-card.victory{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;padding:4px 0;box-shadow:0 8px 24px #2e7d324d;font-size:14px;font-weight:800;align-self:stretch;max-width:100%;border-radius:var(--border-radius-pill);text-transform:uppercase;letter-spacing:1px;border:2px solid rgba(255,255,255,.2);margin:12px 0;animation:victoryPulse 2s infinite ease-in-out;text-align:center}.message-card.victory .message-item{padding:8px 24px}.message-card.victory .message-sender{display:none}@keyframes victoryPulse{0%{transform:scale(1);box-shadow:0 8px 24px #2e7d324d}50%{transform:scale(1.05);box-shadow:0 12px 32px #2e7d3280}to{transform:scale(1);box-shadow:0 8px 24px #2e7d324d}}.message-sender{font-weight:700;font-size:11px;color:#a5d8ff;opacity:.9;padding:6px 14px;background-color:#ffffff14;border-top-left-radius:16px;border-top-right-radius:16px;border-bottom:1px solid rgba(255,255,255,.05);width:100%;box-sizing:border-box}.own-message .message-sender{color:#fffffff2;background-color:#ffffff26;border-bottom-right-radius:0}.message-text{color:inherit;display:block}.tiny-icon{font-size:.9em;display:inline-flex;align-items:center;margin-right:6px;vertical-align:middle}.message-card.system .message-text{color:inherit}.message-item.correct .message-text{color:#2e7d32}.message-content-wrapper{display:flex;flex-direction:column;gap:4px;width:100%}.message-item{padding:8px 14px;position:relative}.message-item:not(:last-child):after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:#ffffff26}.message-card.system .message-item:not(:last-child):after{background-color:#0000000d}.message-count-badge{margin-left:6px;font-size:11px;font-weight:700;opacity:.7}.messages-bottom-anchor{height:1px;width:100%;flex-shrink:0}.toolbar-scroll-container::-webkit-scrollbar{display:none}*:focus{outline:none}*:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:var(--border-radius-sm)}button:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px;box-shadow:0 0 0 4px var(--color-primary-light)}[role=button]:focus-visible,[role=application]:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--color-primary-light)}a:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;text-decoration:underline;text-decoration-thickness:2px}.skip-to-main{position:absolute;left:-9999px;z-index:var(--z-modal);padding:1em;background-color:var(--color-primary);color:var(--text-inverted);text-decoration:none;font-weight:700}.skip-to-main:focus{left:50%;top:0;transform:translate(-50%)}@media (prefers-contrast: high){*:focus-visible{outline-width:4px;outline-color:currentColor}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.landscape-warning{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--bg-panel);z-index:var(--z-notification);flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}@media (orientation: landscape) and (pointer: coarse){.landscape-warning{display:flex}}.landscape-warning-icon{font-size:3.5rem;margin-bottom:1rem;animation:rotate 2s infinite ease-in-out}.landscape-warning-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.landscape-warning-text{font-size:1rem;color:var(--text-secondary);max-width:300px}.entry-screen-container{display:flex;flex-direction:column;align-items:center;min-height:100dvh;width:100%;background:radial-gradient(circle at 20% 20%,rgba(67,97,238,.05) 0%,transparent 40%),radial-gradient(circle at 80% 80%,rgba(76,201,240,.05) 0%,transparent 40%),var(--bg-app);padding:40px 20px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.password-prompt-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px}.entry-card{background-color:var(--bg-panel);padding:clamp(32px,8vw,48px);border-radius:32px;box-shadow:0 20px 40px #00000014;width:100%;max-width:420px;text-align:center;box-sizing:border-box;flex-shrink:0;border:1px solid var(--border-color-light);animation:entryFloat 6s infinite ease-in-out;margin:auto 0}@keyframes entryFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.entry-logo{width:clamp(80px,20vw,120px);margin-bottom:20px}.entry-title{color:var(--text-primary);margin-bottom:8px;font-size:clamp(1.5rem,6vw,2rem)}.entry-subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:clamp(.9rem,3.5vw,1rem)}.entry-form{display:flex;flex-direction:column;gap:16px}.form-group{text-align:left}.form-label{display:block;margin-bottom:8px;font-weight:700;color:var(--text-secondary);font-size:14px}.form-input{width:100%;padding:12px;border-radius:var(--border-radius-md);border:1px solid var(--input-border);background-color:var(--bg-input);color:var(--text-primary);font-size:16px;box-sizing:border-box}.entry-submit-button{margin-top:12px;padding:14px;background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius-md);font-size:18px;font-weight:700;cursor:pointer;transition:background-color .2s}.entry-submit-button:hover{background-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 8px 20px #4361ee33}.entry-submit-button:active{transform:translateY(0)}.app-header{height:var(--header-height);background-color:var(--bg-header);color:var(--text-header)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background:#fff;border-radius:8px;width:100%;max-width:500px;box-shadow:0 4px 12px #00000026;display:flex;flex-direction:column;max-height:90vh}.modal-header{padding:1rem;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.modal-header h2{margin:0;font-size:1.25rem}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;line-height:1}.modal-body{padding:1.5rem;overflow-y:auto}.modal-footer{padding:1rem;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:.75rem}.confirm-dialog-footer{display:flex;gap:.75rem}.btn-primary,.btn-secondary{padding:.5rem 1rem;border-radius:4px;border:none;font-weight:500;cursor:pointer}.btn-primary{background-color:var(--color-primary, #4a90e2);color:#fff}.btn-primary.btn-danger{background-color:#e74c3c}.btn-secondary{background-color:#eee;color:#333}.btn-primary:hover{opacity:.9}.btn-secondary:hover{background-color:#e0e0e0}.header-player-name-input{font-family:inherit;font-size:inherit;font-weight:inherit;padding:2px 6px;border:1px solid #4a90e2;border-radius:4px;outline:none;width:120px}.how-to-play-content{text-align:left}.how-to-play-content section{margin-bottom:1.5rem}.how-to-play-content h3{margin-top:0;margin-bottom:.5rem;font-size:1.1rem;display:flex;align-items:center;gap:.5rem}.how-to-play-content p{margin:0;color:var(--text-secondary);line-height:1.5}.game-help-content{display:flex;flex-direction:column;gap:2rem}.help-section-title{margin-top:0;margin-bottom:1rem;font-size:1.1rem;color:var(--color-primary);border-bottom:1px solid var(--border-color-light);padding-bottom:.5rem}.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}.help-item{display:flex;flex-direction:column;gap:.25rem}.help-item-header{display:flex;align-items:center;gap:.5rem;font-weight:600}.help-item-icon{font-size:1.25rem}.help-item-shortcut{margin-left:auto;font-size:.75rem;background:var(--bg-panel-header);padding:2px 6px;border-radius:4px;border:1px solid var(--border-color);font-family:monospace}.help-item-description{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.4}.help-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color);text-align:center;font-size:.85rem;color:var(--text-tertiary)}.app-header{height:var(--header-height);background-color:var(--bg-header);color:var(--text-header);border-bottom:1px solid var(--border-header-bottom);display:flex;align-items:center;justify-content:space-between;padding:0 4px;font-weight:700;font-size:clamp(14px,4vw,18px);overflow:visible;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box}.header-left{display:flex;align-items:center;flex-shrink:0;height:var(--header-height);margin-top:-1px}.header-logo-link{display:flex;align-items:center;height:var(--header-height);width:auto}.header-logo{height:100%;width:auto;display:block;object-fit:contain}.header-right{display:flex;align-items:center;gap:4px;font-size:clamp(12px,4vw,15px);opacity:.9;white-space:nowrap;overflow:visible}.header-interactive-text{background:none;border:none;padding:2px 8px;margin:0;color:var(--text-header);font-weight:700;font-size:inherit;cursor:pointer;border-radius:var(--border-radius-sm);transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;min-height:24px}.header-interactive-text:hover{background-color:var(--color-primary-light);color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #4361ee1a}.header-separator{opacity:.3}.room-id-container{position:relative;display:flex;align-items:center}.copy-tooltip{position:absolute;top:100%;margin-top:5px;left:50%;transform:translate(-50%);background-color:var(--bg-tooltip);color:#fff;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:10px;white-space:nowrap;z-index:var(--z-notification);pointer-events:none;animation:fadeInOut 2s ease-in-out forwards}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%)}15%{opacity:1;transform:translate(-50%,5px)}85%{opacity:1;transform:translate(-50%,5px)}to{opacity:0;transform:translate(-50%)}}.timer-progress-overlay{position:absolute;top:4px;right:4px;width:48px;height:48px;z-index:var(--z-toolbar);pointer-events:none;display:flex;align-items:center;justify-content:center}.timer-svg{transform:rotate(-90deg)}.timer-bg-circle{fill:#fffc;stroke:#0000001a}.timer-text{position:absolute;font-size:14px;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.5)}.word-choice-overlay{position:fixed;top:calc(var(--viewport-height, 100dvh) / 2);left:50%;transform:translate(-50%,-50%);z-index:var(--z-modal);background-color:var(--bg-panel);padding:clamp(1rem,4vw,1.5rem);border-radius:var(--border-radius-lg);border:3px solid var(--color-primary);box-shadow:var(--shadow-lg);text-align:center;width:min(calc(100% - 32px),400px);max-height:calc(var(--viewport-height, 100dvh) - 60px);overflow-y:auto;box-sizing:border-box}.word-choice-title{margin-top:0;color:var(--color-info);font-size:clamp(1.1rem,5.5vw,2rem);margin-bottom:.4rem}.word-choice-subtitle{margin-top:0;color:var(--text-secondary);font-size:clamp(.85rem,3.5vw,1.1rem);font-weight:500;margin-bottom:1.5rem}.word-choice-container{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.word-choice-button{padding:clamp(6px,2vw,10px) clamp(10px,3vw,16px);font-size:clamp(13px,3.5vw,16px);font-weight:700;background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius-lg);cursor:pointer;box-shadow:0 4px 12px var(--color-primary-light);flex:1 1 auto;min-width:90px;transition:var(--transition-fast)}.word-choice-button:hover{transform:translateY(-3px) scale(1.02);background-color:var(--color-primary-dark);box-shadow:0 8px 24px #4361ee4d}.current-word-display{position:absolute;top:4px;left:50%;transform:translate(-50%);z-index:var(--z-overlay);background-color:#ffffffe6;padding:clamp(6px,1.5vw,10px) clamp(12px,3vw,20px);border-radius:var(--border-radius-md);border:1px solid rgba(0,0,0,.1);font-size:clamp(12px,3.5vw,18px);font-weight:700;color:var(--text-primary);pointer-events:none;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-sm);width:max-content;max-width:calc(100% - 20px);text-align:center;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.drawing-word-label{color:var(--color-primary)}.drawing-word{font-size:clamp(16px,4vw,20px)}.guessing-word{letter-spacing:clamp(1px,.5vw,3px);word-break:break-word;white-space:pre-wrap}.phase-announcement-overlay{position:fixed;top:calc(var(--viewport-height, 100dvh) / 2);left:50%;transform:translate(-50%,-50%);background-color:var(--color-info);padding:clamp(1rem,4vw,1.5rem);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);z-index:2500;text-align:center;color:#fff;width:min(calc(100% - 40px),340px);pointer-events:none;box-sizing:border-box}.phase-announcement-overlay.warning{background-color:var(--color-danger)}.phase-title{margin-bottom:.5rem;font-size:clamp(1.1rem,5.5vw,1.8rem)}.phase-subtitle{font-size:clamp(.85rem,3.5vw,1.1rem);font-weight:500}.round-results-overlay{position:fixed;top:calc(var(--viewport-height, 100dvh) / 2);left:50%;transform:translate(-50%,-50%);background-color:var(--bg-panel);padding:clamp(1rem,4vw,1.5rem);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);z-index:3000;text-align:center;border:4px solid var(--color-success);width:min(calc(100% - 40px),360px);max-height:calc(var(--viewport-height, 100dvh) - 60px);overflow-y:auto;pointer-events:none;box-sizing:border-box}.round-results-title{color:var(--color-success);margin-bottom:.4rem;font-size:clamp(1.1rem,5vw,1.8rem)}.round-results-winner{font-size:clamp(.85rem,3.5vw,1.1rem);margin-bottom:.4rem;color:var(--text-secondary)}.winner-name{color:var(--text-primary);font-size:clamp(1rem,4.5vw,1.3rem)}.round-results-text{font-size:clamp(.75rem,3vw,.9rem);margin-bottom:.8rem;color:var(--text-tertiary)}.round-results-word{font-size:clamp(1rem,6vw,2rem);font-weight:900;color:var(--text-primary);letter-spacing:2px;text-transform:uppercase;background:var(--bg-panel-header);padding:.6rem;border-radius:var(--border-radius-md);display:inline-block;width:100%;box-sizing:border-box}.shortcuts-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:var(--z-notification);display:flex;align-items:center;justify-content:center}.shortcuts-modal-content{background-color:var(--bg-panel);border-radius:var(--border-radius-lg);padding:2rem;max-width:600px;width:90%;max-height:80vh;overflow:auto;box-shadow:var(--shadow-lg)}.shortcuts-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.shortcuts-modal-title{margin:0;font-size:1.5rem;font-weight:600;color:var(--text-primary)}.shortcuts-close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.25rem;color:var(--text-tertiary);line-height:1}.shortcuts-list-container{display:flex;flex-direction:column;gap:1.5rem}.shortcut-group-title{font-size:1rem;font-weight:600;color:var(--color-primary);margin-bottom:.75rem;margin-top:0}.shortcut-items{display:flex;flex-direction:column;gap:.5rem}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-radius:var(--border-radius-sm);background-color:var(--bg-panel-header)}.shortcut-label{color:var(--text-secondary)}.shortcut-details{display:flex;align-items:center;gap:8px}.shortcut-description{color:var(--text-tertiary);font-size:.9rem}.shortcut-key{padding:.25rem .5rem;background-color:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-size:.85rem;font-family:monospace;color:var(--text-primary);box-shadow:var(--shadow-sm);white-space:nowrap}.shortcuts-modal-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border-color);text-align:center;font-size:.875rem;color:var(--text-muted)}.shortcut-key-mini{padding:.125rem .25rem;background-color:var(--bg-panel-header);border-radius:3px}.error-boundary-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:2rem;text-align:center;background-color:var(--bg-app);border-radius:var(--border-radius-md);margin:2rem}.error-boundary-icon{font-size:4rem;margin-bottom:1rem}.error-boundary-title{font-size:1.5rem;font-weight:600;color:var(--color-danger);margin-bottom:.5rem}.error-boundary-text{font-size:1rem;color:var(--text-secondary);margin-bottom:1.5rem;max-width:500px}.error-boundary-details{margin-bottom:1.5rem;padding:1rem;background-color:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);text-align:left;max-width:600px;width:100%}.error-boundary-summary{cursor:pointer;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.error-boundary-pre{font-size:.875rem;color:var(--color-danger);overflow:auto;margin:0;white-space:pre-wrap;word-break:break-word}.error-boundary-actions{display:flex;gap:1rem}.error-boundary-button{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .2s}.error-boundary-button.primary{color:#fff;background-color:var(--color-primary)}.error-boundary-button.primary:hover{background-color:var(--color-primary-dark)}.error-boundary-button.secondary{color:var(--text-primary);background-color:var(--bg-panel);border:1px solid var(--border-color)}.error-boundary-button.secondary:hover{background-color:var(--bg-panel-header)}.canvas-layer{position:absolute;left:0;top:0;width:100%;height:100%}.drawing-layer{z-index:var(--z-canvas);pointer-events:none}.overlay-layer{z-index:var(--z-overlay);pointer-events:auto;touch-action:none}.selection-badge{position:absolute;transform:translate(-50%,-50%);z-index:var(--z-toolbar);background-color:var(--color-primary);color:#fff;padding:6px 12px;border-radius:var(--border-radius-md);font-size:13px;font-weight:600;box-shadow:var(--shadow-md);-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);white-space:nowrap;pointer-events:none}@keyframes rotate{0%{transform:rotate(0)}25%{transform:rotate(-90deg)}75%{transform:rotate(-90deg)}to{transform:rotate(0)}}.game-results-container{display:flex;flex-direction:column;gap:1.5rem;padding:.5rem}.winner-announcement{text-align:center;padding:1rem;background:var(--primary-light);border-radius:12px;border:2px solid var(--primary-color)}.winner-label{font-size:.8rem;text-transform:uppercase;color:var(--primary-color);font-weight:700}.winner-name{font-size:1.5rem;font-weight:800;margin:.5rem 0;color:#d9480f;text-shadow:0 0 10px rgba(250,176,5,.3)}.winner-score{font-size:1rem;color:var(--text-secondary)}.leaderboard{display:flex;flex-direction:column;gap:.5rem}.leaderboard-item{display:flex;align-items:center;padding:.75rem 1rem;background:#f8f9fa;border-radius:8px;gap:1rem}.leaderboard-item.first{background:#fff9db;border:1px solid #fab005}.leaderboard-item .rank{font-weight:700;color:var(--text-secondary);width:20px}.leaderboard-item .name{flex:1;font-weight:500}.leaderboard-item .score{font-weight:700}.next-round-info{text-align:center;color:var(--text-secondary);font-style:italic;font-size:.9rem}.global-notification-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5000;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:12px}.notification-toast{background:#ffffffd9;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255,255,255,.3);color:#1a1a1a;padding:14px 28px;border-radius:20px;font-size:16px;font-weight:600;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a,inset 0 0 0 1px #ffffff80;display:flex;align-items:center;gap:12px;animation:toastPop 3s cubic-bezier(.22,1,.36,1) forwards;max-width:90vw;text-align:center}[data-theme=dark] .notification-toast{background:#1e1e1ecc;border:1px solid rgba(255,255,255,.1);color:#fff}.notification-icon{font-size:20px;line-height:1}@keyframes toastPop{0%{opacity:0;transform:scale(.8) translateY(20px)}10%{opacity:1;transform:scale(1) translateY(0)}85%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(1.05) translateY(-20px)}}.enhanced-color-picker{box-sizing:border-box}.gamut-container{touch-action:none}.gamut-container:hover:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffff0d;pointer-events:none}.hue-slider-row input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#fff;border:2px solid #333;border-radius:50%;cursor:pointer;box-shadow:0 0 2px #00000080}.hue-slider-row input::-moz-range-thumb{width:14px;height:14px;background:#fff;border:2px solid #333;border-radius:50%;cursor:pointer;box-shadow:0 0 2px #00000080}.game-overlay{position:fixed;z-index:9999;display:flex;justify-content:center;align-items:center;font-family:inherit;pointer-events:none}.game-overlay.warning{top:50%;left:50%;transform:translate(-50%,-50%);background-color:#ff9800f2;color:#fff;padding:30px 40px;border-radius:16px;box-shadow:0 10px 30px #0006;animation:scaleIn .3s cubic-bezier(.175,.885,.32,1.275);border:4px solid white;max-width:90vw;width:auto}.game-overlay.kicked{top:0;left:0;right:0;bottom:0;height:100vh;width:100vw;flex-direction:column;background-color:#f44336fa;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;pointer-events:auto;animation:fadeIn .3s ease-out}.overlay-content{display:flex;align-items:center;gap:15px;max-width:800px;text-align:center}.game-overlay.kicked .overlay-content{flex-direction:column}.overlay-message{font-size:1.3rem;font-weight:600;line-height:1.4}.game-overlay.kicked .overlay-message{font-size:1.8rem;margin-bottom:30px}.overlay-actions{display:flex;flex-direction:column;gap:15px;width:100%;max-width:250px}.overlay-rejoin-button,.overlay-exit-button{border:none;padding:14px 32px;border-radius:12px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:transform .2s,background-color .2s,opacity .2s;box-shadow:0 4px 15px #0003;width:100%}.overlay-rejoin-button{background-color:#fff;color:#f44336}.overlay-rejoin-button:hover{background-color:#fff1f0;transform:translateY(-3px)}.overlay-exit-button{background-color:transparent;color:#fff;border:2px solid white}.overlay-exit-button:hover{background-color:#ffffff1a;transform:translateY(-3px)}.overlay-rejoin-button:active,.overlay-exit-button:active{transform:translateY(0)}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}