*{margin:0;padding:0;box-sizing:border-box}@keyframes fadeIn{0%{opacity:0;grid-template-rows:0fr}to{opacity:1;grid-template-rows:1fr}}@keyframes fadeOut{0%{opacity:1;grid-template-rows:1fr}to{opacity:0;grid-template-rows:0fr}}.fade-in{display:grid;animation:fadeIn ease-out;animation-fill-mode:forwards}.fade-out{display:grid;animation:fadeOut ease-out;animation-fill-mode:forwards}:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-tertiary: #0f3460;--text-primary: #e6e6e6;--text-secondary: #a0a0a0;--accent: #e94560;--accent-hover: #ff6b6b;--gold: #ffd700;--success: #4ade80;--border: #2a2a4a}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:.25rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);gap:1rem;height:5vh;min-height:40px;max-height:60px;flex-shrink:0}.header-left{display:flex;align-items:center;gap:1rem;flex-shrink:0}.header-center{display:flex;align-items:center;gap:.5rem;flex:1;justify-content:center}.header-center input[type=range]{width:50vw;margin-bottom:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:3px;outline:none;cursor:pointer}.header-center input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.header-center input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.header-center input[type=range].live-glow::-webkit-slider-thumb{box-shadow:0 0 8px 3px #e945608f}.header-center input[type=range].live-glow::-moz-range-thumb{box-shadow:0 0 8px 3px #e945608f}.header-center .time-display{font-size:1.1rem;font-weight:700;margin-bottom:0;font-family:monospace;white-space:nowrap}.header-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.btn-snap{white-space:nowrap}.btn-play-pause,.speed-select{min-width:4rem;text-align:center}header select{padding:.2rem .3rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;font-size:.75rem}.control-label{font-size:.75rem;color:var(--text-secondary)}.layer-toggle{display:flex;gap:.3rem}.layer-toggle label{padding:.25rem .5rem;background:var(--bg-tertiary);border-radius:4px;cursor:pointer;transition:background .2s;font-size:.8rem}.layer-toggle label:hover{background:var(--accent)}.layer-toggle input[type=radio]{display:none}.layer-toggle label:has(input:checked){background:var(--accent)}.btn{padding:.2rem .5rem;background:var(--accent);color:var(--text-primary);border:none;border-radius:4px;cursor:pointer;font-size:.75rem;transition:background .2s}.btn:hover{background:var(--accent-hover)}.hamburger-menu{position:relative}.hamburger-btn{background:transparent;border:none;color:var(--text-primary);cursor:pointer;padding:.25rem .5rem;font-size:1.2rem;line-height:1}.hamburger-btn:hover{color:var(--accent)}.hamburger-icon{display:block}.hamburger-dropdown{position:absolute;top:100%;left:0;background:var(--bg-secondary);border:1px solid var(--border);border-radius:4px;min-width:120px;z-index:100;box-shadow:0 4px 12px #0000004d}.hamburger-dropdown a{display:block;padding:.5rem 1rem;color:var(--text-primary);text-decoration:none;font-size:.85rem}.hamburger-dropdown a:hover{background:var(--bg-tertiary);color:var(--accent)}.room-info-btn{display:flex;align-items:center;gap:.35rem}.room-info-row{display:flex;justify-content:space-between;align-items:center;padding:.3rem 0;font-size:.8rem}.room-info-label{color:var(--text-secondary)}.room-info-value{display:flex;align-items:center;gap:.3rem;color:var(--text-primary)}.room-info-server{font-family:monospace;font-size:.7rem}.input-sm{padding:.2rem .4rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;font-size:.75rem;width:160px}.input-sm:focus{outline:none;border-color:var(--accent)}#roomName{width:80px}.status-indicator{display:flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:#888;display:inline-block}.live-playback-controls{display:flex;align-items:center;gap:.5rem}.auto-follow-label{font-size:.75rem;color:var(--text-secondary);display:flex;align-items:center;gap:.25rem;cursor:pointer}.live-badge{display:inline-block;background:#ef4444;color:#fff;font-size:.6rem;font-weight:700;padding:.05rem .3rem;border-radius:3px;margin-right:.3rem;letter-spacing:.05em}.live-badge.stale{background:#fbbf24;color:#000}.live-badge.offline{background:#888}.main-content{position:relative;flex:1;overflow:hidden;min-height:200px}.event-feed-panel{height:100%;display:flex;flex-direction:column;background:#1a1a2eb3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:.8rem;pointer-events:auto}.event-feed-toolbar{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;border-bottom:1px solid var(--border);flex-shrink:0}.event-feed-search{flex:1;min-width:0;background:#ffffff0f;border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-size:.75rem;padding:.25rem .4rem;outline:none}.event-feed-search:focus{border-color:var(--text-secondary)}.event-feed-search::placeholder{color:var(--text-secondary);opacity:.5}.event-feed-toolbar-buttons{display:flex;gap:.15rem;flex-shrink:0}.event-feed-toolbar-btn{background:none;border:1px solid transparent;border-radius:4px;color:var(--text-secondary);font-size:.8rem;width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.event-feed-toolbar-btn:hover{background:#ffffff14;border-color:var(--border);color:var(--text-primary)}.event-feed-toolbar-btn.active{background:#e9456040;border-color:var(--accent);color:var(--accent)}.event-feed-align-bar{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.25rem .5rem;background:#e945601f;border:none;border-bottom:1px solid rgba(233,69,96,.3);color:var(--accent);font-size:.75rem;cursor:pointer;flex-shrink:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-feed-align-bar:hover{background:#e9456033}.event-feed-align-bar-x{font-size:1rem;margin-left:.5rem;flex-shrink:0;opacity:.6}.event-feed-align-bar:hover .event-feed-align-bar-x{opacity:1}.event-feed-split{flex:1;display:flex;min-height:0;overflow:hidden}.event-feed-column{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border);overflow:hidden}.event-feed-column:last-child{border-right:none}.event-feed-column-header{padding:.3rem .4rem;border-bottom:1px solid var(--border);flex-shrink:0;background:#ffffff08}.event-feed-column-body{flex:1;overflow-y:auto;min-height:0}.event-feed-aligned{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.aligned-headers{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:#ffffff08}.aligned-col-header{flex:1;padding:.3rem .4rem;border-right:1px solid var(--border);min-width:0}.aligned-col-header:last-child{border-right:none}.aligned-scroll-body{flex:1;display:flex;align-items:flex-start;overflow-y:auto;min-height:0}.aligned-column{flex:1;min-width:0;overflow-x:auto;border-right:1px solid var(--border)}.aligned-column-inner{min-width:100%;width:max-content}.aligned-column:last-child{border-right:none}.event-feed-item.event-feed-anchor,.event-feed-item.event-feed-anchor:nth-child(odd){background:#e9456014;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}.event-context-menu{position:fixed;z-index:300;background:var(--bg-secondary);border:1px solid var(--border);border-radius:4px;box-shadow:0 4px 12px #0006;min-width:160px;padding:.15rem 0}.event-context-menu-item{display:block;width:100%;padding:.4rem .75rem;background:none;border:none;color:var(--text-primary);font-size:.8rem;text-align:left;cursor:pointer;white-space:nowrap}.event-context-menu-item:hover:not(:disabled){background:#ffffff14}.event-context-menu-item:disabled{color:var(--text-secondary);opacity:.5;cursor:not-allowed}.event-feed{flex:1;overflow-y:auto;min-height:0}.event-feed-item{display:grid;grid-template-columns:auto 1fr;column-gap:.4rem;padding:.35rem .5rem;border-bottom:1px solid var(--border)}.event-feed-item:nth-child(odd){background:#ffffff0d}.event-feed-item:hover{background:#ffffff1a;cursor:context-menu}.event-feed-header{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap}.event-feed-time-col{grid-row:1 / 3;display:flex;flex-direction:column;align-items:flex-end;padding-top:.1rem}.event-feed-time{font-family:monospace;color:var(--text-secondary);font-size:.75rem;white-space:nowrap}.event-feed-delta{font-family:monospace;color:var(--text-secondary);font-size:.65rem;opacity:.6;white-space:nowrap}.event-feed-player{font-weight:600;font-size:.75rem}.event-feed-body{display:flex;flex-direction:column;gap:.15rem}.event-feed-desc{color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-red{color:#c66}.text-green{color:#6c6}.text-blue{color:#80b3e6}.text-gold{color:var(--gold)}.text-muted{color:var(--text-secondary)}.text-dim{color:gray}.boss-hp-bars{display:flex;flex-direction:column;gap:2px;margin:.15rem 0;padding-left:.5rem;max-width:60%}.boss-hp-bar{position:relative;height:8px;background:#ffffff14;border-radius:3px;overflow:visible;cursor:default}.boss-hp-bar>.boss-hp-fill{height:100%;background:#b22222;border-radius:3px;overflow:hidden}.boss-hp-bar:after{content:attr(data-hp);position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%);background:var(--bg-secondary);color:var(--text-primary);font-size:.7rem;padding:.15rem .4rem;border-radius:3px;border:1px solid var(--border);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s}.boss-hp-bar:hover:after{opacity:1}.player-hp-bar{position:relative;height:8px;background:#ffffff14;border-radius:3px;overflow:visible;margin:4px 6px;cursor:default}.player-hp-bar>.player-hp-fill{height:100%;background:#2e8b57;border-radius:3px;transition:width .15s ease-out}.player-hp-bar:after{content:attr(data-hp);position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%);background:var(--bg-secondary);color:var(--text-primary);font-size:.7rem;padding:.15rem .4rem;border-radius:3px;border:1px solid var(--border);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s}.player-hp-bar:hover:after{opacity:1}.encounter-stats{display:flex;flex-direction:column;padding-left:.5rem;font-size:.65rem;line-height:1.4}.stat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-label{color:gray}.stat-value{color:#b3b3b3}.stat-sep{color:gray}.stat-label.gold,.stat-value.gold{color:var(--gold)}.event-rewards{display:flex;flex-direction:column;padding-left:.5rem;font-size:.7rem}.reward-line{white-space:nowrap}.reward-obtained{color:var(--gold)}.reward-name{color:var(--text-secondary)}.reward-great-rune,.reward-count{color:#f472b6}.map-container{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-secondary);overflow:hidden}.panel-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.panel-passthrough{height:100%}.resize-handle{width:6px;background:var(--border);cursor:col-resize;pointer-events:auto;transition:background .2s}.resize-handle:hover,.resize-handle[data-separator=active]{background:var(--accent)}.player-info-panel{height:100%;overflow-y:auto;background:#1a1a2ed9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:auto;padding:.5rem;display:flex;flex-direction:column;gap:.5rem}.player-widget{background:#ffffff0a;border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem}.player-widget-header{display:flex;align-items:center;margin-bottom:.4rem}.player-widget-name{font-weight:600;font-size:.8rem;padding-bottom:.2rem}.player-widget-igt{font-family:monospace;font-size:.75rem;color:var(--text-secondary);margin-left:.4rem;margin-right:auto}.player-widget-stats-row{display:flex;gap:.6rem;justify-content:flex-start;margin-bottom:.25rem}.player-widget-stat{display:flex;align-items:baseline;gap:.2rem}.player-widget-stat-label{font-size:.55rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.player-widget-stat-value{font-family:monospace;font-size:.75rem;color:var(--text-primary)}.player-widget-body-row{display:flex;align-items:start;gap:.4rem;overflow-x:auto}.player-widget-body-row::-webkit-scrollbar{height:4px}.player-widget-body-row::-webkit-scrollbar-track{background:var(--bg-primary)}.player-widget-body-row::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}.player-widget-body-row::-webkit-scrollbar-thumb:hover{background:var(--accent)}.player-widget-stats{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;flex:1;min-width:0}.player-widget-row{display:flex;align-items:baseline;gap:.25rem}.player-widget-label{font-size:.6rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.player-widget-value{font-family:monospace;font-size:.75rem;color:var(--text-primary)}.player-widget-icons{display:flex;gap:.35rem;align-items:flex-start;flex-shrink:0}.item-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:55px;background:#ffffff0a;border:1px solid var(--border);border-radius:4px;padding:4px;cursor:pointer;transition:background .15s,border-color .15s}.item-button:hover{background:#ffffff1a;border-color:var(--text-secondary)}.item-button-img{width:100%;height:auto;display:block}.flask-crimson{color:#e05555}.flask-cerulean{color:#58d}.flask-inline{display:flex;align-items:center;gap:.25rem;margin-left:auto}.flask-inline-img{width:16px;height:16px}.flask-inline-count{font-family:monospace;font-size:.65rem;font-weight:700}.flask-inline-upgrade{font-family:monospace;font-size:.6rem;color:var(--text-secondary)}.item-button-active,.item-button-active:hover{border-color:var(--accent);background:#e9456026}.item-button-overlay-upgrade{position:absolute;bottom:2px;right:3px;font-family:monospace;font-size:.6rem;color:var(--text-secondary);z-index:1;pointer-events:none}.item-button-label{font-size:.55rem;color:var(--text-secondary);text-align:center;overflow-wrap:break-word;word-break:break-word;line-height:1.2;margin-top:2px}.detail-panel{position:relative;margin-top:.4rem;padding:.4rem;background:#ffffff08;border:1px solid var(--border);border-radius:4px}.detail-panel-close{position:absolute;top:2px;right:2px;background:none;border:none;color:var(--text-secondary);font-size:.85rem;line-height:1;cursor:pointer;padding:.1rem .25rem;border-radius:3px}.detail-panel-close:hover{color:var(--text-primary);background:#ffffff14}.detail-panel-title{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin-bottom:.3rem}.smithing-divider{border:none;border-top:1px solid var(--border);margin:.3rem 0}.smithing-max-upgrades{display:grid;grid-template-columns:auto auto auto;width:fit-content;gap:0 .5rem;font-size:.65rem;color:var(--text-primary);margin-bottom:.3rem}.smithing-upgrade-label{color:var(--text-secondary)}.smithing-upgrade-value{text-align:right}.smithing-looking-for-img{width:20px;height:20px;vertical-align:middle}.weapon-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}.armor-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}.weapon-slot{display:flex;flex-direction:column;align-items:center;padding:4px;border:1px solid transparent;border-radius:4px;background:#ffffff05}.weapon-slot-active{border-color:var(--accent);background:#e945601f}.weapon-slot-label{font-size:.55rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}.weapon-slot-img-wrapper{position:relative;width:100%}.weapon-slot-img{width:100%;aspect-ratio:1;object-fit:contain;display:block;padding:0 5px}.weapon-slot-upgrade{position:absolute;bottom:0;right:0;font-family:monospace;font-size:.6rem;pointer-events:none}.weapon-slot-name{font-size:.65rem;color:var(--text-secondary);text-align:center;overflow-wrap:break-word;word-break:break-word;line-height:1.2;margin-top:2px}.smithing-rows-scroll{overflow-x:auto}.smithing-rows-scroll::-webkit-scrollbar{height:4px}.smithing-rows-scroll::-webkit-scrollbar-track{background:var(--bg-primary)}.smithing-rows-scroll::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}.smithing-rows-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent)}.smithing-detail-row{display:flex;gap:0rem}.smithing-detail-row+.smithing-detail-row{margin-top:2px}.smithing-stone-cell{position:relative}.floating-tooltip{position:fixed;background:var(--bg-secondary, #1a1a2e);color:var(--text-primary);font-size:.6rem;padding:2px 6px;border-radius:3px;white-space:pre;pointer-events:none;z-index:1000;border:1px solid var(--border)}.smithing-detail-img{width:32px;height:32px;border-radius:3px}.smithing-detail-img.dimmed{opacity:.35}.smithing-quantity{position:absolute;bottom:6px;right:6px;font-size:.55rem;font-weight:700;font-family:monospace;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border);border-radius:3px;padding:0 2px;line-height:1.2;min-width:12px;text-align:center}.smithing-quantity.dimmed{opacity:.35}.smithing-quantity.surpassed-check{color:#4ade80;background:none;border-color:transparent;text-shadow:0 0 2px rgba(0,0,0,.8)}.stats-button{width:auto;min-width:48px;gap:.1rem;padding:4px 6px}.stats-button-level{font-family:monospace;font-size:.65rem;font-weight:700;color:var(--text-primary);letter-spacing:.02em}.stats-button-runes{font-family:monospace;font-size:.6rem;color:var(--gold);text-align:center}.keyitems-section-label{color:var(--text-secondary);font-size:.65rem;margin-top:.35rem;margin-bottom:.15rem}.keyitems-fraction{color:var(--text-primary);font-weight:700;margin-left:.15rem}.keyitems-row{display:flex;gap:.25rem;flex-wrap:wrap}.keyitems-icon{width:32px;height:32px;border-radius:4px}.keyitems-cell{position:relative;display:inline-block}.keyitems-check{position:absolute;bottom:1px;right:1px;font-size:.55rem;font-weight:700;color:#4ade80;text-shadow:0 0 2px rgba(0,0,0,.8);pointer-events:none}.keyitems-icon.unobtained{opacity:.14;filter:grayscale(1)}.checklist-button{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:monospace;min-width:36px}.checklist-button-count{font-size:.85rem;font-weight:700;color:var(--text-primary);line-height:1}.checklist-button-label{font-size:.5rem;color:var(--text-secondary);line-height:1}.checklist-section-label{color:var(--text-secondary);font-size:.65rem;margin-top:.35rem;margin-bottom:.1rem}.checklist-fraction{color:var(--text-primary);font-weight:700;margin-left:.15rem}.checklist-section-label.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}.checklist-chevron{display:inline-block;transition:transform .15s;margin-right:.1rem}.checklist-chevron.open{transform:rotate(90deg)}.checklist-items{display:flex;flex-direction:column;gap:.05rem;max-height:200px;overflow-y:auto}.checklist-item{display:flex;align-items:center;gap:.25rem;font-size:.6rem;color:var(--text-secondary);opacity:.45}.checklist-item.done{color:var(--text-primary);opacity:1}.checklist-mark{font-weight:700;width:.7rem;text-align:center;flex-shrink:0}.checklist-item.done .checklist-mark{color:#4ade80}.checklist-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats-rune-row{display:flex;align-items:center;gap:.3rem;margin-bottom:.3rem;font-family:monospace;font-size:.8rem;color:var(--gold)}.stats-rune-row img{width:24px;height:24px}.stats-table{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:.3rem;row-gap:.1rem}.stats-table-row{display:contents}.stats-table-label{font-size:.65rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.stats-table-value{font-family:monospace;font-size:.8rem;color:var(--text-primary);text-align:right}.player-color-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.4rem}.player-info-empty{text-align:center;color:var(--text-secondary);padding:1rem;font-size:.8rem}.player-toolbar{display:flex;align-items:center;justify-content:center;gap:.4rem;padding-bottom:.4rem;margin-bottom:.1rem;border-bottom:1px solid var(--border)}.player-toolbar .player-follow-btn,.player-toolbar .player-message-btn,.player-toolbar .player-minimize-btn{margin-left:0}.player-toolbar .player-message-row{margin-bottom:0}.player-follow-btn{margin-left:auto;background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:1.05rem;padding:0 .2rem;line-height:1;opacity:.6;transition:opacity .15s,color .15s}.player-follow-btn:hover{opacity:1;color:var(--accent)}.player-follow-btn.active{color:var(--accent);opacity:1}.player-follow-btn+.player-message-btn{margin-left:0}.player-message-btn{margin-left:auto;background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:1.05rem;padding:0 .2rem;line-height:1;opacity:.6;transition:opacity .15s,color .15s}.player-message-btn:hover{opacity:1;color:var(--accent)}.player-minimize-btn{background:none;border:none;color:var(--text-primary);cursor:pointer;padding:.15rem .25rem;font-size:.85rem;line-height:1;opacity:.6;transition:opacity .15s,color .15s}.player-minimize-btn:hover{opacity:1;color:var(--accent)}.player-minimize-btn.minimized{opacity:.4}.player-message-row{display:flex;gap:.3rem;margin-bottom:.4rem}.player-message-input{flex:1;min-width:0;padding:.2rem .4rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;font-size:.75rem;outline:none}.player-message-input:focus{border-color:var(--accent)}.player-message-send-btn{padding:.2rem .5rem;background:var(--accent);color:var(--text-primary);border:none;border-radius:4px;cursor:pointer;font-size:.7rem;white-space:nowrap;flex-shrink:0}.player-message-send-btn:disabled{opacity:.4;cursor:not-allowed}.player-message-send-btn:not(:disabled):hover{background:var(--accent-hover)}.player-message-cancel-btn{padding:.2rem .5rem;background:transparent;color:var(--text-secondary);border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:.7rem;white-space:nowrap;flex-shrink:0}.player-message-cancel-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.player-hp-section{margin-top:.5rem;padding:0 .4rem;opacity:1;transition:opacity .3s ease-in}.player-hp-widget{margin-top:.5rem;padding:.4rem;background:#0a64282e;border:1px solid rgba(10,140,50,.45);border-radius:4px;opacity:1;transition:opacity .3s ease-in}.player-hp-widget.encounter-exiting{opacity:0;transition-property:opacity;transition-timing-function:ease-out}.player-hp-widget-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem}.player-hp-widget-title{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}.player-hp-widget .player-hp-plot{margin:0 0 2px;width:100%}.player-hp-widget .player-hp-bar,.player-hp-section .player-hp-bar{margin:0}.encounter-widget{margin-top:.5rem;margin-bottom:.4rem;padding:.4rem;background:#8c0a0a3b;border:1px solid rgba(140,10,10,.5);border-radius:4px}.encounter-widget-title{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin-bottom:.3rem}.encounter-bosses{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.25rem}.encounter-boss-name{font-size:.7rem;color:var(--text-primary);margin-bottom:4px}.boss-hp-plot{display:block;width:100%;height:30px;margin:4px 0 2px}.player-hp-plot{display:block;width:calc(100% - 12px);height:30px;margin:0 0 2px}.encounter-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}.encounter-stat{display:flex;flex-direction:column;align-items:center}.encounter-stat-label{font-size:.6rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em}.encounter-stat-value{font-family:monospace;font-size:.75rem;color:var(--text-primary)}.drop-zone{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:3rem;border:2px dashed var(--border);border-radius:8px;text-align:center;color:var(--text-secondary);pointer-events:none}.drop-zone.active{border-color:var(--accent);background:#e945601a}.drop-zone.hidden{display:none}.drop-zone .setup-hint{margin-top:1rem;font-size:.85rem;color:var(--text-secondary)}.drop-zone .setup-hint code{background:var(--bg-tertiary);padding:.2rem .4rem;border-radius:3px;font-family:monospace}#mapCanvas{width:100%;height:100%;cursor:grab}#mapCanvas:active{cursor:grabbing}.time-display{text-align:center;font-size:1.5rem;font-family:monospace;margin-bottom:.5rem}.time-display .separator{color:var(--text-secondary);margin:0 .25rem}.tooltip{position:fixed;padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;font-size:.85rem;pointer-events:none;z-index:1000;display:none}.tooltip.visible{display:block}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}input[type=range]{-webkit-appearance:none;background:var(--bg-tertiary);border-radius:4px;height:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-thumb:hover{background:var(--accent-hover)}.home-page{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:2rem}.home-hero{text-align:center;margin-top:4rem;margin-bottom:3rem}.home-hero h1{font-size:2.5rem;color:var(--gold);margin-bottom:.5rem}.home-hero p{color:var(--text-secondary);font-size:1.1rem}.home-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;max-width:900px;width:100%}.home-card{display:block;padding:1.5rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text-primary);transition:border-color .2s,transform .2s}.home-card:hover{border-color:var(--accent);transform:translateY(-2px)}.home-card h2{color:var(--gold);font-size:1.2rem;margin-bottom:.5rem}.home-card p{color:var(--text-secondary);font-size:.9rem}.home-card-disabled{opacity:.5;pointer-events:none}.room-browser-page{min-height:100vh;padding:2rem;max-width:900px;margin:0 auto}.room-browser-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.room-browser-header h1{color:var(--gold);font-size:1.8rem;flex:1}.back-link{color:var(--text-secondary);text-decoration:none;font-size:.9rem}.back-link:hover{color:var(--accent)}.room-browser-controls{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.room-browser-controls label{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.85rem}.room-browser-controls .input-sm{width:250px}.room-browser-error{background:#ef444433;border:1px solid #ef4444;color:#ef4444;padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem}.room-list{display:flex;flex-direction:column;gap:1rem}.room-list-empty{text-align:center;color:var(--text-secondary);padding:3rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border)}.room-card{display:block;padding:1rem 1.25rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text-primary);transition:border-color .2s,transform .2s}.room-card:hover{border-color:var(--accent);transform:translate(4px)}.room-card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.room-card-header h2{font-size:1.1rem;color:var(--gold);margin:0}.live-indicator{background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;padding:.15rem .4rem;border-radius:3px;letter-spacing:.05em}.room-card-body{display:flex;justify-content:space-between;align-items:center}.room-card-players{color:var(--text-primary);font-size:.9rem}.room-card-players .no-players{color:var(--text-secondary);font-style:italic}.room-card-stats{display:flex;gap:1.5rem}.room-card-stats .stat{display:flex;align-items:baseline;gap:.3rem}.room-card-stats .stat-value{font-size:.9rem;font-weight:600;color:var(--text-primary);font-family:monospace}.room-card-stats .stat-label{font-size:.75rem;color:var(--text-secondary)}.room-name{font-size:.85rem;color:var(--gold);font-weight:500}.btn:disabled{opacity:.5;cursor:not-allowed}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200}.settings-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;width:500px;box-shadow:0 8px 32px #00000080}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border)}.settings-title{font-size:1rem;font-weight:600}.settings-close{background:transparent;border:none;color:var(--text-secondary);font-size:1.4rem;cursor:pointer;padding:0 .25rem;line-height:1}.settings-close:hover{color:var(--text-primary)}.settings-body{padding:1rem}.settings-table{width:100%;border-collapse:collapse}.settings-table td{padding:.4rem 0}.settings-label{font-size:.85rem;white-space:nowrap;padding-right:1rem}.settings-table select{padding:.3rem .5rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;font-size:.8rem}.modal-section-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:.5rem}.modal-section-title:not(:first-child){margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}.race-management{font-size:.8rem}.btn-danger{background:#7f1d1d;color:#fca5a5;border-color:#991b1b}.btn-danger:hover{background:#991b1b;color:#fecaca}.danger-confirm{display:flex;flex-direction:column;gap:.5rem}.danger-confirm-text{color:var(--text-secondary);line-height:1.4}.danger-confirm-actions{display:flex;gap:.5rem}.load-races-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;width:600px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #00000080}.load-races-modal .settings-body{overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.load-races-slots{display:flex;flex-direction:column;gap:.75rem}.load-races-slot{display:flex;flex-direction:column;gap:.35rem;background:#ffffff0a;border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem}.load-races-slot-header{display:flex;align-items:center;gap:.4rem}.load-races-dropzone{border:2px dashed var(--text-secondary);border-radius:4px;padding:.4rem;text-align:center;color:var(--text-secondary);font-size:.7rem;transition:border-color .15s,background .15s}.load-races-dropzone.active{border-color:var(--accent);background:#e9456014;color:var(--text-primary)}.load-races-file-row{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.load-races-file-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}.load-races-name-input{padding:.25rem .4rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;font-size:.8rem;min-width:0}.load-races-name-input:focus{outline:none;border-color:var(--accent)}.load-races-file-cell{display:flex;align-items:center;gap:.3rem;min-width:0}.load-races-filename{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;padding:.2rem .35rem;min-width:0}.load-races-filename>span:first-child,.load-races-filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.load-races-file-remove{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:.9rem;line-height:1;padding:0 .15rem;flex-shrink:0}.load-races-file-remove:hover{color:var(--accent)}.load-races-browse-btn{padding:.2rem .5rem;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:.75rem;width:100%}.load-races-browse-btn:hover{border-color:var(--text-secondary);color:var(--text-primary)}.load-races-remove-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1rem;line-height:1;padding:0;width:1.5rem;text-align:center}.load-races-remove-btn:hover{color:var(--accent)}.load-races-add-btn{background:none;border:1px dashed var(--border);border-radius:4px;color:var(--text-secondary);cursor:pointer;font-size:.8rem;padding:.3rem;text-align:center}.load-races-add-btn:hover{border-color:var(--text-secondary);color:var(--text-primary)}.load-races-footer{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--border)}.file-empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-secondary);z-index:1;pointer-events:none;background:#0009;padding:1rem 1.5rem;border-radius:8px}.file-empty-state p{margin-bottom:.3rem;font-size:.95rem}.file-empty-hint{font-size:.8rem;opacity:.6}.lobby-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--bg-primary)}.lobby-content{text-align:center;max-width:500px;width:100%;padding:2rem}.lobby-title{font-size:2rem;color:var(--gold);margin-bottom:.5rem}.lobby-subtitle{color:var(--text-secondary);font-size:1rem;margin-bottom:2rem}.lobby-countdown{margin:1.5rem 0}.lobby-countdown-number{font-size:5rem;font-weight:700;color:var(--gold);font-family:monospace;line-height:1}.lobby-player-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}.lobby-player{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;font-size:.9rem}.lobby-player.disconnected{opacity:.5}.lobby-ready-dot{width:10px;height:10px;border-radius:50%;background:#555;flex-shrink:0}.lobby-ready-dot.ready{background:var(--success);box-shadow:0 0 6px #4ade8066}.lobby-player-name{flex:1;text-align:left;color:var(--text-primary)}.lobby-confirmed-badge{font-size:.7rem;color:var(--success);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.lobby-disconnected-badge{font-size:.7rem;color:#ef4444;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.lobby-no-players{color:var(--text-secondary);font-size:.85rem;padding:1rem}.match-browser-page{min-height:100vh;padding:2rem;max-width:1000px;margin:0 auto}.match-browser-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.match-browser-header h1{color:var(--gold);font-size:1.8rem;flex:1}.match-browser-toolbar{margin-bottom:1rem}.match-browser-search{width:100%;padding:.5rem .75rem;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;font-size:.85rem;outline:none}.match-browser-search:focus{border-color:var(--accent)}.match-browser-search::placeholder{color:var(--text-secondary);opacity:.6}.match-browser-table{display:flex;flex-direction:column;gap:0}.match-browser-table-header{display:grid;grid-template-columns:2rem 2.5rem 1fr 4rem 9rem 5rem 3.5rem;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-bottom:1px solid var(--border)}.match-browser-row{border-bottom:1px solid var(--border)}.match-browser-row.selected{background:#e945600d}.match-browser-summary{display:grid;grid-template-columns:2rem 2.5rem 1fr 4rem 9rem 5rem 3.5rem;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;font-size:.85rem}.match-col-check{display:flex;align-items:center;justify-content:center}.match-col-check input[type=checkbox]{accent-color:var(--accent);cursor:pointer}.match-col-id{color:var(--text-secondary);font-family:monospace;font-size:.8rem}.match-col-room{color:var(--gold);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.match-col-date{color:var(--text-secondary);font-size:.8rem}.match-col-status{text-align:center}.match-col-settings{display:flex;align-items:center;justify-content:center}.match-settings-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.15rem;border-radius:3px}.match-settings-btn:hover{color:var(--text-primary);background:#ffffff0f}.match-browser-players{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s ease,opacity .2s ease;overflow:hidden}.match-browser-players>.match-browser-players-inner{min-height:0;display:flex;flex-direction:column;gap:.1rem;padding:0 .75rem 0 3.25rem}.match-browser-row.expanded>.match-browser-players,.match-browser-row.selected>.match-browser-players{grid-template-rows:1fr;opacity:1}.match-browser-row.expanded>.match-browser-players>.match-browser-players-inner,.match-browser-row.selected>.match-browser-players>.match-browser-players-inner{padding:.25rem .75rem .5rem 3.25rem;border-top:1px solid var(--border)}.match-browser-player{display:flex;align-items:center;gap:.5rem;font-size:.8rem;cursor:pointer;padding:.2rem 0}.match-browser-player input[type=checkbox]{accent-color:var(--accent)}.match-player-name{color:var(--text-primary);flex:1}.match-player-time{font-family:monospace;font-size:.75rem;color:var(--success)}.match-browser-empty{text-align:center;color:var(--text-secondary);padding:3rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border);margin-top:.5rem}.match-browser-error{background:#ef444433;border:1px solid #ef4444;color:#ef4444;padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem;font-size:.85rem}.match-browser-load-more{display:flex;justify-content:center;padding:1rem}.match-browser-action-bar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border);box-shadow:0 -4px 16px #0000004d;z-index:100}.match-browser-selection-count{color:var(--text-secondary);font-size:.85rem}.match-col-seed{color:var(--text-secondary);font-family:monospace;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.match-section-header{font-size:.85rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:.75rem 0 .35rem}.match-filter-bar{display:grid;grid-template-columns:auto 1fr;gap:.35rem .75rem;align-items:center;margin-bottom:1rem;padding:.6rem .75rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px}.match-filter-row{display:contents}.match-filter-row-tags{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.match-filter-group-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.match-filter-select{padding:.2rem .4rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;font-size:.75rem}.match-filter-clear{margin-left:auto;background:none;border:none;color:var(--text-secondary);font-size:.7rem;cursor:pointer;text-decoration:underline}.match-filter-clear:hover{color:var(--accent)}.match-filter-rune{display:flex;align-items:center;gap:.25rem;font-size:.7rem;color:var(--text-secondary)}.match-filter-rune .match-filter-select{width:3.5rem}.match-filter-number{width:3.5rem;padding:.2rem .4rem;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;font-size:.75rem}.match-filter-number::placeholder{color:var(--text-secondary);opacity:.6}.match-filter-chip{padding:.15rem .45rem;border:1px solid var(--border);border-radius:3px;background:transparent;color:var(--text-secondary);font-size:.7rem;cursor:pointer;transition:all .15s;-webkit-user-select:none;user-select:none}.match-filter-chip:hover{border-color:var(--text-secondary);color:var(--text-primary)}.match-filter-chip.filter-on{background:#4ade8026;border-color:#4ade8080;color:var(--success)}.match-filter-chip.filter-off{background:#ef444426;border-color:#ef444480;color:#ef4444}.match-settings-modal{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;width:400px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px #00000080}.match-settings-modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border)}.match-settings-modal-title{color:var(--gold);font-weight:600;font-size:.9rem}.match-settings-modal-body{padding:.75rem 1rem}.match-settings-group{margin-bottom:.3rem}.match-settings-group:last-child{margin-bottom:0}.match-settings-group-label{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:.15rem}.match-settings-grid{display:flex;flex-wrap:wrap;gap:.2rem}.match-settings-tag{font-size:.65rem;padding:.1rem .3rem;border-radius:3px;background:#ffffff0a;color:var(--text-secondary)}.match-settings-tag.on{background:#4ade801a;color:var(--success)}.match-settings-tag.off{opacity:.35}.match-settings-tag .tag-value{color:var(--text-primary);margin-left:.15rem}.match-browser-page input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:14px;height:14px;border:1.5px solid var(--border);border-radius:3px;background:var(--bg-tertiary);cursor:pointer;position:relative;flex-shrink:0}.match-browser-page input[type=checkbox]:hover{border-color:var(--text-secondary)}.match-browser-page input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}.match-browser-page input[type=checkbox]:checked:after{content:"";position:absolute;left:50%;top:50%;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-65%) rotate(45deg)}.match-browser-page input[type=checkbox]:indeterminate{background:var(--bg-tertiary);border-color:var(--accent)}.match-browser-page input[type=checkbox]:indeterminate:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:2px;background:var(--accent);transform:translate(-50%,-50%)}.race-state-badge{display:inline-block;font-size:.65rem;font-weight:700;padding:.15rem .4rem;border-radius:3px;letter-spacing:.05em}.race-state-lobby{background:#555;color:#ccc}.race-state-countdown{background:#854d0e;color:#fde68a}.race-state-racing{background:#ef4444;color:#fff}.race-state-finished{background:#166534;color:#86efac}.race-phase-label{font-size:.6rem;opacity:.8;margin-left:.15rem}.roster-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.3rem;padding-left:.25rem}.roster-player{display:flex;align-items:center;gap:.4rem;font-size:.8rem}.roster-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0}.roster-dot.disconnected{background:#ef4444}.roster-name{color:var(--text-primary)}