*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#f4f4f4}body.dark{background:#1a1a1a}.app-wrapper{display:flex}.app-container{width:100%;background:#f4f4f4;font-family:Arial,sans-serif}.header-primary{background:linear-gradient(to bottom,#a8d5e8,#46a4c8);padding:3.5px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #3a8aaa;zoom:1.25}.header-logo-group{display:flex;align-items:center;gap:0px}.header-logo-icon{height:27px;margin-bottom:1px;margin-left:-8px;margin-right:-1.5px;width:auto;display:block;cursor:pointer;filter:drop-shadow(0 1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(-1px 0 0 #fff)}@keyframes logo-3d-spin{0%{transform:perspective(160px) rotateY(0) rotateX(0)}30%{transform:perspective(160px) rotateY(130deg) rotateX(14deg)}60%{transform:perspective(160px) rotateY(250deg) rotateX(-8deg)}to{transform:perspective(160px) rotateY(360deg) rotateX(0)}}.header-logo-icon:hover,.header-logo-spin{animation:logo-3d-spin .65s ease-in-out}.header-logo{height:48px;width:auto;display:block;margin-left:-16px}.alias-input{font-size:11px;font-family:Arial,sans-serif;border:1px solid #aaaaaa;padding:0 3px;width:90px;color:#333}.alias-btn{font-size:10px;padding:0 5px;background:#e0e0e0;color:#333;border:1px solid #aaaaaa;cursor:pointer;font-family:Arial,sans-serif;margin-left:2px}.alias-btn:hover{background:#ccc}.alias-btn-cancel{color:#900}.alias-error{margin-left:5px;color:#c00;font-size:10px}.alias-change-link{color:#00c;text-decoration:underline;cursor:pointer;font-size:11px}.header-secondary{background:#f0f0f0;padding:2px 12px;font-size:11px;color:#666;border-bottom:1px solid #cccccc;zoom:1.25}.content-row{display:flex}.sidebar{width:150px;min-width:150px;background:#f5f5f5;border-right:1px solid #cccccc;zoom:1.4}.widget{border-bottom:1px solid #cccccc}.widget-header{background:#46a4c8;color:#fff;font-size:12.5px;font-weight:700;padding:3.5px 7px;letter-spacing:.5px}.widget-body{padding:5px 6px}.chat-messages{height:147px;overflow-y:auto;font-size:11.3px;color:#333;line-height:1.4}.chat-message{margin-bottom:2px}.chat-user{font-weight:700;color:#036}.chat-user-clickable{cursor:pointer;position:relative}.chat-user-clickable:hover{text-decoration:underline}.chat-user-tooltip{position:absolute;top:100%;left:0;background:#333;color:#fff;font-size:10px;font-weight:400;padding:2px 6px;border-radius:3px;white-space:nowrap;z-index:200;pointer-events:none;margin-top:2px}.chat-spam-warning{font-size:10px;color:#c00;margin-top:2px}.chat-input-row{display:flex;margin-top:3px}.chat-input{flex:1;font-size:11.3px;border:1px solid #cccccc;padding:1px 3px;min-width:0;font-family:Arial,sans-serif}.chat-send{font-size:11.3px;padding:1px 6px;background:#46a4c8;color:#fff;border:none;cursor:pointer;margin-left:2px;font-family:Arial,sans-serif}.chat-send:hover{background:#3a8aaa}.game-thumbnail{height:54px;background:#fff;border:1px solid #cccccc;margin:4.5px 0;display:flex;align-items:center;justify-content:center;overflow:hidden}.room-links{list-style:none;margin:2px 0 0;padding:0}.room-link{padding:1px 0}.room-link a{font-size:11.3px;color:#00c;text-decoration:underline;cursor:pointer}.room-link a:hover{color:#00a}.room-link a.active{color:#c00;font-weight:700;text-decoration:none}.main-area{flex:0 0 auto;background:#f0f0f0;display:flex;flex-direction:column;min-width:0;zoom:.98}.footer-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;font-size:11px;color:#888}.report-bug-btn{background:none;border:none;color:#999;text-decoration:underline;font-size:11px;cursor:pointer;padding:0}.report-bug-btn:hover{color:#c00}.dark .footer-bar{color:#777}.dark .report-bug-btn{color:#68c}.dark .report-bug-btn:hover{color:#c44}.bug-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:9999}.bug-modal{background:#fff;border:1px solid #999;box-shadow:0 4px 16px #00000040;width:360px;font-size:12px;border-radius:6px;overflow:hidden}.bug-modal-header{display:flex;align-items:center;justify-content:space-between;background:#76bcd7;color:#fff;font-weight:700;font-size:11px;padding:4px 8px}.bug-close{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;line-height:1}.bug-textarea{display:block;width:100%;box-sizing:border-box;border:none;border-bottom:1px solid #ddd;padding:8px;font-family:inherit;font-size:12px;resize:vertical;min-height:80px;outline:none}.bug-modal-footer{display:flex;justify-content:flex-end;gap:6px;padding:6px 8px}.bug-cancel,.bug-submit{font-size:11px;padding:3px 12px;cursor:pointer;border:1px solid #999;background:#f0f0f0}.bug-submit{background:#76bcd7;color:#fff;border-color:#76bcd7}.bug-submit:disabled{opacity:.5;cursor:default}.dark .bug-modal{background:#1e1e1e;border-color:#444}.dark .bug-textarea{background:#1e1e1e;color:#ddd;border-color:#333}.dark .bug-cancel{background:#333;color:#ccc;border-color:#555}.bug-thanks{background:#edf7ff;border:1px solid #6a9fd8;box-shadow:0 4px 16px #00000040;padding:14px 20px;text-align:center;border-radius:6px;font-family:Verdana,sans-serif}.bug-thanks-text{color:#265b72;font-weight:700;font-size:14px;margin-bottom:16px}.bug-thanks-ok{background:#fff;color:#265b72;border:1px solid #6a9fd8;font-size:12px;font-weight:700;padding:4px 24px;cursor:pointer}.bug-thanks-ok:hover{background:#e8f0fa}.toolbar{background:#e4f1f6;height:28px;min-height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;border-bottom:1px solid #cccccc;max-width:100%;box-sizing:border-box;font-size:11px;color:#333;font-family:Arial,sans-serif;zoom:1.4}.toolbar-left{display:flex;align-items:center;gap:5px;height:100%;overflow:hidden}.toolbar-icon{font-size:14px;line-height:1}.toolbar-jam-icon{height:23px;width:auto;margin-top:1.5px;margin-right:-4px;margin-left:-3px}.toolbar-right{display:flex;align-items:center;gap:2px}.toolbar-timer{font-size:11px;color:#555}.scratchpad-pill{display:flex;align-items:stretch;gap:4px;height:24px;overflow:visible;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:11px}.pill-timer{display:flex;align-items:center;gap:5px;padding:0 10px;background:#f3fafd;border:1px solid #d8d8d8;border-radius:3px;color:#555;white-space:nowrap;box-shadow:0 1px 3px #0000001a}.pill-clock-icon{flex-shrink:0}.pill-timer-text{font-size:11px;color:#555;letter-spacing:.01em}.pill-tools{display:flex;align-items:center;gap:3px;padding:0 8px;background:#f3fafd;border:1px solid #d8d8d8;border-radius:3px;position:relative;box-shadow:0 1px 3px #0000001a}.pencil-icon{width:16px;height:16px;display:block}.dark .scratchpad-pill{box-shadow:0 1px 3px #0000004d}.dark .pill-timer{background:#1e1e2e;border-color:#3a3a5a;color:#aac}.dark .pill-timer-text{color:#aac}.dark .pill-clock-icon circle,.dark .pill-clock-icon line{stroke:#88a}.dark .pill-tools{background:#2a2a3e;border-color:#3a3a5a}.sines-color-wrap{position:relative}.sines-color-btn{background:none;border:1px solid #cccccc;border-radius:3px;padding:3px 4px;cursor:pointer;line-height:0;background:#f5f5f5}.sines-color-btn:hover{background:#e8e8e8}.sines-color-popup{position:absolute;right:0;top:100%;margin-top:4px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:4px;border:1px solid #cccccc;border-radius:3px;background:#f5f5f5;box-shadow:0 2px 6px #00000026;z-index:100}.sines-swatch{cursor:pointer;opacity:.5;padding:1px;border-radius:2px;border:1px solid transparent;line-height:0}.sines-swatch:hover{opacity:.8}.sines-swatch-sel{opacity:1;border-color:#333}.dark .sines-color-btn{border-color:#446;background:#1a1a2e}.dark .sines-color-btn:hover{background:#2a2a4e}.dark .sines-color-popup{border-color:#446;background:#1a1a2e}.dark .sines-swatch-sel{border-color:#abc}.toolbar-drawing-box{display:flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid #444466;border-radius:3px;background:#cbe2eb}.dark .toolbar-drawing-box{border-color:#446;background:#a0d0e4}.pen-size-wrap{position:relative}.toolbar-pencil-btn{background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;padding:1px;line-height:0;display:flex;align-items:center;transition:border-color .15s,filter .15s}.toolbar-pencil-btn:hover{border-color:#888;filter:brightness(1.15)}.pen-size-popup{position:absolute;top:100%;right:0;margin-top:4px;display:flex;flex-direction:column;gap:2px;padding:4px;background:#fff;border:1px solid #cccccc;border-radius:3px;box-shadow:0 2px 6px #00000026;z-index:10}.pen-size-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1px solid #cccccc;background:#f5f5f5;cursor:pointer;border-radius:2px}.pen-size-btn:hover{background:#e0e0e0}.pen-size-btn-sel{border-color:#333;background:#d0d0d0}.pen-size-dot{display:block;border-radius:50%;background:#000}.dark .pen-size-popup{background:#1a1a2e;border-color:#446}.dark .pen-size-btn{border-color:#446;background:#1a1a2e}.dark .pen-size-btn:hover{background:#2a2a4e}.dark .pen-size-btn-sel{border-color:#abc;background:#2a2a4e}.dark .pen-size-dot{background:#ccc}.toolbar-color-wrap{position:relative}.toolbar-color{width:14px;height:14px;padding:0;border:1px solid transparent;outline:1px solid #010101;cursor:pointer;transition:border-color .15s,filter .15s}.toolbar-color:hover{border-color:#888;filter:brightness(1.2)}.color-picker-popup{position:absolute;right:0;top:calc(100% + 3px);background:#e7e7e8;border:1px solid #010101;box-shadow:inset 1px 1px #fff,inset -1px -1px #888,3px 3px 6px #00000059;padding:4px;z-index:200}.color-picker-preview{display:flex;align-items:center;gap:0;margin-bottom:4px}.color-picker-preview-swatch{width:25px;height:12px;flex-shrink:0;border:1px solid #000000}.color-picker-preview-code{flex:0 0 auto;background:#fff;border:1px solid #000000;font-size:10px;font-family:monospace;color:#111;padding:1px 6px;line-height:12px;letter-spacing:.5px;margin-left:8px}.color-picker-layout{display:flex;gap:2px;background:#010101}.color-picker-sidebar{display:grid;grid-template-columns:12px;gap:1px;background:#010101;padding:1px}.color-picker-main-grid{display:grid;grid-template-columns:repeat(18,12px);gap:1px;background:#010101;padding:1px}.color-picker-swatch{width:12px;height:12px;cursor:pointer}.color-picker-swatch:hover{outline:2px solid #ffffff;position:relative;z-index:1}.color-picker-swatch-selected{box-shadow:inset 0 0 0 1px #fff,0 0 0 1px gray;position:relative;z-index:2}.scratchpad-canvas{display:block;background:#fff;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M1 15 L11 2 L14 5 L4 16 Z' fill='%23FFD700' stroke='%23111' stroke-width='1'/%3E%3Cpath d='M11 2 L14 5 L15 3 L13 1 Z' fill='%23FFB6C1' stroke='%23111' stroke-width='1'/%3E%3Cpath d='M0 16 L1 15 L4 16 Z' fill='%23C8A882'/%3E%3C/svg%3E") 0 16,crosshair;border:1px solid #cccccc;width:900px;height:600px;touch-action:none}.rats-canvas{display:block;background:#fff;cursor:default;border:1px solid #cccccc;width:900px;height:600px;touch-action:none}.letters-container{position:relative;width:900px;height:600px;background:#fff;overflow:hidden;border:1px solid #cccccc;touch-action:none}.letter-tile{position:absolute;font-family:Fredoka One,Arial Black,Arial,sans-serif;font-weight:400;-webkit-user-select:none;user-select:none;cursor:grab;line-height:1;padding:1px 2px;-webkit-text-stroke:1.5px rgba(0,0,0,.18);paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.2),0 -1px 0 rgba(255,255,255,.3);filter:drop-shadow(1px 3px 2px rgba(0,0,0,.25))}.letter-tile:active{cursor:grabbing;filter:drop-shadow(2px 5px 3px rgba(0,0,0,.3))}.darkmode-toolbar-btn{font-size:11px;padding:0 6px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:#d0e4ed;border:1px solid #777777;border-radius:5px;cursor:pointer;color:#036}.darkmode-toolbar-btn:hover{background:#b8d5e3}.darkmode-toolbar-btn-active{background:#2a2a3a;color:#fc0;border-color:#555}.darkmode-toolbar-btn-active:hover{background:#3a3a4a}.dark .darkmode-toolbar-btn{background:#1d3040;border-color:#444;color:#fc0}.fullscreen-btn{font-size:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:0 16px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:#f3fafd;border:1px solid #d8d8d8;cursor:pointer;color:#555;border-radius:3px 12px 12px 3px;box-shadow:0 1px 3px #0000001a}.fullscreen-btn:hover{background:#f0f0f0}.content-row-fs{position:fixed!important;inset:0!important;z-index:1000;width:100dvw!important;height:100dvh!important;background:#f3f3f3;display:flex!important;flex-direction:row!important;align-items:stretch!important;justify-content:center!important;padding:30px!important;box-sizing:border-box!important;overflow:hidden!important}.content-row-fs .main-area{flex:0 0 auto!important}.content-row-fs .scratchpad-canvas,.content-row-fs .rats-canvas,.content-row-fs .letters-container{margin:auto!important}@media(max-width:1029px){.content-row-fs{background:#fff;padding:0!important}.content-row-fs .main-area{flex:1 1 auto!important}}.content-row-fs .sidebar{display:flex!important;flex-direction:column;width:180px!important;min-width:180px!important;align-self:stretch!important;background:#f5f5f5;border-right:1px solid #cccccc;overflow-y:auto}.fullscreen-btn-active{background:#e8d0d0;color:#600;border-color:#a77}.fullscreen-btn-active:hover{background:#ddc0c0}.mute-btn{font-size:11px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:4px 10px;background:#f3fafd;border:1px solid #d8d8d8;cursor:pointer;color:#555;border-radius:12px 3px 3px 12px;box-shadow:0 1px 3px #0000001a}.mute-btn:hover{background:#f0f0f0}.mute-btn-off{background:#f5f5f5;color:#999;border-color:#d8d8d8}.mute-btn-off:hover{background:#ebebeb}.note-chart-wrap{position:relative}.note-chart-btn{height:24px;width:24px;padding:3px;background:#f3fafd;border:1px solid #d8d8d8;cursor:pointer;color:#555;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-radius:3px;box-shadow:0 1px 3px #0000001a}.note-chart-btn:hover{background:#f0f0f0}.note-chart-dot{display:block;background:#333;border-radius:50%}.note-chart-popup{position:absolute;right:0;top:calc(100% + 3px);background:#e7e7e8;border:1px solid #010101;box-shadow:inset 1px 1px #fff,inset -1px -1px #888,3px 3px 6px #00000059;padding:4px;z-index:200}.note-chart-grid{display:grid;grid-template-columns:repeat(7,auto);gap:1px}.note-chart-cell{display:flex;flex-direction:column;align-items:center;padding:2px 4px;background:#fff;border:1px solid #cccccc;min-width:22px}.note-chart-letter{font-size:11px;font-weight:700;color:#036;font-family:Arial,sans-serif}.note-chart-note{font-size:9px;color:#666;font-family:Arial,sans-serif}.darkmode-btn{font-size:11px;font-family:Arial,sans-serif;padding:1px 5px;background:#d0e4ed;border:1px solid #777777;cursor:pointer;color:#036;line-height:1}.darkmode-btn:hover{background:#b8d5e3}.darkmode-btn-active{background:#2a2a3a;color:#fd8;border-color:#557}.darkmode-btn-active:hover{background:#3a3a4a}.dark .app-container{background:#1a1a1a}.dark .header-primary{background:linear-gradient(to bottom,#1a3a52,#0d2b40);border-bottom-color:#0a2030}.dark .header-secondary{background:#1e1e1e;color:#888;border-bottom-color:#333}.dark .alias-change-link{color:#69f}.dark .alias-input{background:#111;border-color:#444;color:#ccc}.dark .alias-btn{background:#2a2a2a;border-color:#444;color:#ccc}.dark .alias-btn:hover{background:#383838}.dark .alias-btn-cancel{color:#f77}.dark .sidebar{background:#1e1e1e;border-right-color:#333}.dark .widget{border-bottom-color:#333}.dark .widget-header{background:#1d4a60}.dark .chat-messages{color:#aaa}.dark .chat-user{color:#7aaee8}.dark .chat-user-tooltip{background:#111}.dark .chat-input{background:#111;border-color:#444;color:#ccc}.dark .chat-send{background:#1d4a60}.dark .chat-send:hover{background:#0d3a50}.dark .chat-spam-warning{color:#f77}.dark .game-thumbnail{background:#1f1f1f;border-color:#333}.dark .room-link a{color:#69f}.dark .room-link a:hover{color:#8af}.dark .room-link a.active{color:#f77}.dark .main-area{background:#1a1a1a}.dark .toolbar{background:#1e2633;border-bottom-color:#333;color:#ccc}.dark .toolbar-timer{color:#999}.dark .mute-btn{background:#1e1e2e;border-color:#3a3a5a;color:#aac;box-shadow:0 1px 3px #0000004d}.dark .mute-btn:hover{background:#28283a}.dark .mute-btn-off{background:#252535;color:#668;border-color:#3a3a5a}.dark .mute-btn-off:hover{background:#2e2e40}.dark .note-chart-btn{background:#1d3040;border-color:#444}.dark .note-chart-btn:hover{background:#152535}.dark .note-chart-dot{background:#8ac}.dark .note-chart-popup{background:#222;border-color:#444;box-shadow:inset 1px 1px #333,inset -1px -1px #111,3px 3px 6px #0009}.dark .note-chart-cell{background:#111;border-color:#333}.dark .note-chart-letter{color:#8af}.dark .note-chart-note{color:#777}.dark .fullscreen-btn{background:#1e1e2e;border-color:#3a3a5a;color:#aac;box-shadow:0 1px 3px #0000004d}.dark .fullscreen-btn:hover{background:#28283a}.dark .fullscreen-btn-active{background:#3a1a1a;color:#f99;border-color:#633}.dark .fullscreen-btn-active:hover{background:#4a2020}.dark .darkmode-btn{background:#2a2a3a;color:#fd8;border-color:#557}.dark .darkmode-btn:hover{background:#3a3a4a}.dark .color-picker-popup{background:#222;border-color:#444;box-shadow:inset 1px 1px #333,inset -1px -1px #111,3px 3px 6px #0009}.dark .color-picker-preview-code{background:#111;border-color:#444;color:#ccc}.dark .scratchpad-canvas,.dark .rats-canvas,.dark .letters-container{background:#1e1e1e;border-color:#444}.dark .letters-room1{background-image:radial-gradient(circle,#3a3a3a 1.5px,transparent 1.5px)}.dark .content-row-fs{background:#0a0a0a}.dark .content-row-fs .sidebar{background:#1e1e1e;border-right-color:#333}@media(max-width:1029px){.sidebar{width:130px;min-width:130px;overflow-y:auto}.content-row{overflow:hidden}}@media(orientation:landscape)and (max-height:500px){.header-primary,.header-secondary{display:none}.sidebar{display:flex!important;flex-direction:column;width:130px;min-width:130px;border-right:1px solid #cccccc;overflow-y:auto}.sidebar .chat-messages{height:70px}}@media(max-width:1029px){.content-row:not(.content-row-fs) .color-picker-popup{position:fixed;top:auto;right:auto;left:50%;transform:translate(-50%)}}@media(max-width:767px)and (orientation:portrait){.content-row{flex-direction:column}.main-area{order:1}.sidebar{display:flex!important;order:2;flex-direction:row;overflow-x:auto;width:100%;min-width:0;border-right:none;border-top:1px solid #cccccc;max-height:180px}.sidebar .widget{flex-shrink:0;width:130px;border-bottom:none;border-right:1px solid #cccccc}.sidebar .chat-messages{height:90px}}