@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#1a1a2e;color:#e0e0e0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#app{width:100%;height:100%}.join-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px}.join-screen h1{font-size:2rem;color:#a0c4ff;margin-bottom:8px}.join-form{display:flex;flex-direction:column;gap:10px;width:280px}.join-form label{font-size:.85rem;color:#999}.join-form input,.join-form select{padding:8px 10px;background:#2a2a3e;border:1px solid #444;border-radius:4px;color:#e0e0e0;font-size:.95rem;outline:none}.join-form input:focus,.join-form select:focus{border-color:#a0c4ff}.join-btn{padding:10px;background:#3a5a8a;border:none;border-radius:4px;color:#e0e0e0;font-size:1rem;cursor:pointer;margin-top:4px}.join-btn:hover:not(:disabled){background:#4a6a9a}.join-btn:disabled{opacity:.5;cursor:default}.join-status{font-size:.8rem;color:#888;text-align:center}.game-screen{position:relative;width:100%;height:100%}.canvas-wrap{width:100%;height:100%}.canvas-wrap canvas{display:block;cursor:pointer}.bubble-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.avatar-name-label{position:absolute;transform:translate(-50%,-100%);font-family:"Press Start 2P",monospace;font-size:7px;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 -1px 0 #000,0 1px 0 #000,-1px 0 0 #000,1px 0 0 #000;white-space:nowrap;pointer-events:none;letter-spacing:.5px}.speech-bubble{position:absolute;transform:translate(-50%,-100%);background:#e8f0e8;color:#1a2a1a;padding:6px 10px;border:2px solid #2a4a2a;border-radius:4px;font-family:"Press Start 2P",monospace;font-size:7px;line-height:1.6;max-width:200px;image-rendering:pixelated;box-shadow:3px 3px #00000040,inset 0 0 0 1px #fff6;pointer-events:none;transition:opacity .3s;margin-bottom:8px}.speech-bubble-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;word-break:break-word}.speech-bubble:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #2a4a2a}.speech-bubble:before{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #e8f0e8;z-index:1}.speech-bubble.pm{background:#e8e0f0;border-color:#4a2a6a;color:#2a1a3a;box-shadow:3px 3px #00000040,inset 0 0 0 1px #c8b4ff66}.speech-bubble.pm:after{border-top-color:#4a2a6a}.speech-bubble.pm:before{border-top-color:#e8e0f0}.hud-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.hud-zoom{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;pointer-events:auto}.hud-zoom-btn{width:28px;height:28px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#12121eb3;color:#fff9;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-zoom-btn:hover{background:#12121ee6;color:#fff;border-color:#ffffff4d}.hud-zoom-label{font-size:11px;color:#ffffff80;min-width:32px;text-align:center;-webkit-user-select:none;user-select:none}.status-bar{position:absolute;bottom:0;left:0;width:100%;height:28px;display:flex;align-items:center;gap:16px;padding:0 12px;background:#0c0c16d9;border-top:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:11px;color:#ffffff80;pointer-events:none;z-index:50}.status-bar-lights{display:flex;align-items:center;gap:12px}.status-bar-light{display:flex;align-items:center;gap:5px}.status-bar-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.status-bar-dot.on{background:#4ade80;box-shadow:0 0 4px #4ade8099}.status-bar-dot.off{background:#555}.status-bar-light-label{color:#fff6;letter-spacing:.3px}.status-bar-info{display:flex;align-items:center;gap:12px;margin-left:auto}.status-bar-lore{color:#a0c4ff}.status-bar-room{color:#ffffff59}.character-card{position:absolute;top:0;right:0;width:300px;height:100%;background:#12121ef2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:1px solid rgba(255,255,255,.08);transform:translate(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;z-index:100;pointer-events:auto;box-shadow:-4px 0 24px #0006}.character-card.open{transform:translate(0)}.character-card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.character-card-name{font-size:15px;font-weight:600;color:#e0e0e0;letter-spacing:.3px}.character-card-close{background:none;border:none;color:#fff6;font-size:20px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;transition:color .15s,background .15s}.character-card-close:hover{color:#fff;background:#ffffff14}.character-card-body{flex:1;overflow:hidden;padding:16px 20px;display:flex;flex-direction:column;gap:16px;min-height:0}.character-card-info{display:flex;flex-direction:column;gap:8px}.character-card-info-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}.character-card-info-label{font-size:12px;color:#fff6;text-transform:uppercase;letter-spacing:.5px}.character-card-info-value{font-size:13px;color:#a0c4ff}.character-card-pm{display:flex;flex-direction:column;flex:1;min-height:0}.character-card-pm-header{font-size:12px;color:#fff6;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;margin-bottom:8px}.character-card-pm-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:0;padding-right:4px}.character-card-pm-messages::-webkit-scrollbar{width:4px}.character-card-pm-messages::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.character-card-pm-empty{color:#fff3;font-size:13px;text-align:center;padding:24px 16px;font-style:italic}.character-card-pm-msg{padding:6px 8px;border-radius:6px;background:#ffffff0a}.character-card-pm-msg.self{background:#a0c4ff14}.character-card-pm-msg-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}.character-card-pm-msg-name{font-size:11px;font-weight:600;color:#a0c4ff}.character-card-pm-msg.self .character-card-pm-msg-name{color:#c4b5fd}.character-card-pm-msg-time{font-size:10px;color:#fff3}.character-card-pm-msg-text{font-size:13px;color:#d0d0d0;line-height:1.4;word-break:break-word}.character-card-pm-form{flex-shrink:0;margin-top:8px}.character-card-pm-input{width:100%;padding:8px 10px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#e0e0e0;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s,background .15s;box-sizing:border-box}.character-card-pm-input:focus{border-color:#a0c4ff4d;background:#ffffff14}.character-card-pm-input::placeholder{color:#fff3}.lore-panel{position:absolute;top:0;left:0;height:100%;display:flex;z-index:100;pointer-events:none}.lore-panel-tab{width:36px;height:100%;background:#12121eb3;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;padding-top:12px;gap:4px;cursor:pointer;pointer-events:auto;transition:background .15s;flex-shrink:0}.lore-panel-tab:hover{background:#12121ed9}.lore-panel-tab-icon{font-size:10px;color:#ffffff4d;transition:transform .2s}.lore-panel.open .lore-panel-tab-icon{transform:rotate(180deg)}.lore-panel-tab-name{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;color:#a0c4ff;letter-spacing:1px;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.5)}.lore-panel-content{width:0;height:100%;background:#12121ef2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid rgba(255,255,255,.08);overflow:hidden;transition:width .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;pointer-events:auto;box-shadow:4px 0 24px #0006}.lore-panel.open .lore-panel-content{width:340px}.lore-panel-messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:340px}.lore-panel-messages::-webkit-scrollbar{width:5px}.lore-panel-messages::-webkit-scrollbar-track{background:transparent}.lore-panel-messages::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.lore-panel-messages::-webkit-scrollbar-thumb:hover{background:#fff3}.lore-panel-msg{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-radius:6px;background:#ffffff08;border:1px solid rgba(255,255,255,.03)}.lore-panel-msg.self{background:#60a5fa0f;border-color:#60a5fa14}.lore-panel-msg-top{display:flex;justify-content:space-between;align-items:baseline}.lore-panel-msg-name{font-size:11px;font-weight:600;color:#a0c4ff;letter-spacing:.2px}.lore-panel-msg.self .lore-panel-msg-name{color:#60a5fa}.lore-panel-msg-time{font-size:10px;color:#fff3}.lore-panel-msg-text{font-size:13px;color:#d0d0d0;line-height:1.4;word-wrap:break-word}.lore-panel-form{flex-shrink:0;padding:8px 14px 12px;border-top:1px solid rgba(255,255,255,.06);min-width:340px}.lore-panel-input{width:100%;padding:8px 10px;background:#0006;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#e0e0e0;font-size:13px;outline:none}.lore-panel-input:focus{border-color:#a0c4ff;background:#0009}.lore-browser{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:20px;padding:32px}.lore-browser h1{font-size:1.6rem;color:#a0c4ff;margin-bottom:4px}.lore-browser-error{font-size:.85rem;color:#ef4444;background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:4px;padding:8px 14px;max-width:400px;text-align:center}.lore-browser-loading{font-size:.9rem;color:#888}.lore-browser-empty{font-size:.9rem;color:#666;text-align:center;padding:20px 0}.lore-browser-list{display:flex;flex-direction:column;gap:6px;width:100%;max-width:440px;max-height:340px;overflow-y:auto}.lore-browser-list::-webkit-scrollbar{width:5px}.lore-browser-list::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.lore-browser-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:6px;transition:background .15s,border-color .15s}.lore-browser-item:hover{background:#ffffff12;border-color:#ffffff1a}.lore-browser-item-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lore-browser-item-name{font-size:.95rem;color:#e0e0e0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lore-browser-item-pack{font-size:.75rem;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lore-browser-item-meta{flex-shrink:0}.lore-browser-item-players{font-size:.8rem;color:#888;white-space:nowrap}.lore-browser-join-btn{flex-shrink:0;padding:6px 16px;background:#3a5a8a;border:none;border-radius:4px;color:#e0e0e0;font-size:.85rem;cursor:pointer;transition:background .15s}.lore-browser-join-btn:hover{background:#4a6a9a}.lore-browser-create{width:100%;max-width:440px;border-top:1px solid rgba(255,255,255,.06);padding-top:16px}.lore-browser-create-title{font-size:.85rem;color:#999;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}.lore-browser-create-row{display:flex;gap:8px}.lore-browser-create-input{flex:1;padding:8px 10px;background:#2a2a3e;border:1px solid #444;border-radius:4px;color:#e0e0e0;font-size:.9rem;outline:none;min-width:0}.lore-browser-create-input:focus{border-color:#a0c4ff}.lore-browser-create-input::placeholder{color:#666}.lore-browser-create-select{width:140px;padding:8px 10px;background:#2a2a3e;border:1px solid #444;border-radius:4px;color:#e0e0e0;font-size:.9rem;outline:none}.lore-browser-create-select:focus{border-color:#a0c4ff}.lore-browser-create-btn{flex-shrink:0;padding:8px 18px;background:#3a5a8a;border:none;border-radius:4px;color:#e0e0e0;font-size:.9rem;cursor:pointer;transition:background .15s}.lore-browser-create-btn:hover:not(:disabled){background:#4a6a9a}.lore-browser-create-btn:disabled{opacity:.5;cursor:default}