*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--sidebar-width:320px;--bg-parchment:#2b2016;--bg-sidebar:#261c12eb;--bg-card:#3a2a1ab3;--bg-card-hover:#483420cc;--border-color:#785a3766;--border-strong:#8c693c99;--text-primary:#d4c4a0;--text-secondary:#a08c6a;--text-muted:#7a6848;--accent-gold:#c9a84c;--accent-gold-dim:#c9a84c4d;--danger:#8b3a2a;--danger-hover:#b04a36;--font-display:"Cinzel", serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--transition:.18s ease}html,body{width:100%;height:100%;color:var(--text-primary);font-family:var(--font-body);background:#1a1208;font-size:13px;line-height:1.5;overflow:hidden}#app{width:100%;height:100vh;position:relative}#map-container{cursor:crosshair;-webkit-user-select:none;user-select:none;background:#1a1208;position:absolute;inset:0;overflow:hidden}#map-viewport{transform-origin:0 0;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;position:absolute}#map-image{-webkit-user-select:none;user-select:none;pointer-events:none;-webkit-user-drag:none;display:block;transform:translate(0,0)}#territory-canvas{pointer-events:none;image-rendering:auto;position:absolute;top:0;left:0}#town-layer{pointer-events:none;z-index:20;width:100%;height:100%;position:absolute;top:0;left:0}#sidebar{width:var(--sidebar-width);z-index:50;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;display:flex;position:absolute;top:16px;bottom:16px;left:16px;overflow-y:auto;box-shadow:0 4px 30px #00000080,inset 0 1px #b4966414}#sidebar.collapsed{opacity:0;pointer-events:none;transform:translate(calc(-100% - 32px))}#sidebar::-webkit-scrollbar{width:4px}#sidebar::-webkit-scrollbar-track{background:0 0}#sidebar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}#sidebar-toggle{z-index:60;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:40px;height:40px;color:var(--accent-gold);cursor:pointer;transition:all var(--transition);justify-content:center;align-items:center;font-size:18px;display:none;position:absolute;top:16px;left:16px;box-shadow:0 2px 12px #0006}#sidebar-toggle:hover{background:var(--bg-card-hover);border-color:var(--border-strong)}#sidebar-toggle.visible{display:flex}.sidebar-header{border-bottom:1px solid var(--border-color);padding:20px 16px 14px;position:relative}.sidebar-header-row{justify-content:space-between;align-items:flex-start;display:flex}.sidebar-header h1{font-family:var(--font-display);color:var(--accent-gold);letter-spacing:.8px;text-transform:uppercase;font-size:16px;font-weight:700}.sidebar-header .subtitle{color:var(--text-secondary);letter-spacing:.4px;margin-top:3px;font-size:11px;font-weight:300}#btn-collapse,#btn-timeframes-close{color:var(--text-muted);cursor:pointer;transition:color var(--transition);background:0 0;border:none;flex-shrink:0;margin-top:2px;padding:4px;font-size:16px;line-height:1}#btn-collapse:hover,#btn-timeframes-close:hover{color:var(--text-primary)}.sidebar-section{border-bottom:1px solid var(--border-color);padding:14px 16px}.sidebar-section h2{font-family:var(--font-display);text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:10px;font-size:10px;font-weight:600}.sidebar-footer{border-top:1px solid var(--border-color);margin-top:auto;padding:12px 16px}.sidebar-footer p{color:var(--text-muted);font-size:10px;line-height:1.6}.section-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;display:flex}.section-toggle .arrow{color:var(--text-muted);transition:transform var(--transition);font-size:9px}.section-content{opacity:1;max-height:500px;transition:max-height .25s,opacity .2s,margin .25s;overflow:hidden}.collapsed-section .section-content{pointer-events:none;opacity:0!important;max-height:0!important;padding:0!important}.collapsed-section .section-toggle .arrow{transform:rotate(-90deg)}.faction-picker{flex-direction:column;gap:10px;display:flex}.faction-row{gap:6px;width:100%;display:flex}.faction-select-btn{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);font-family:var(--font-body);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;padding:6px 4px;font-size:10px;font-weight:500;display:flex}.faction-select-btn:hover{background:var(--bg-card-hover);border-color:var(--border-strong);color:var(--text-primary)}.faction-select-btn.active{background:color-mix(in srgb, var(--faction-color) 12%, transparent);border-color:var(--faction-color);color:var(--faction-color)}.faction-row-icon{object-fit:contain;filter:drop-shadow(0 1px 2px #0000004d);width:26px;height:26px}.structures-container{grid-template-columns:repeat(2,1fr);gap:6px;width:100%;margin-top:4px;display:grid}.control-row{align-items:center;gap:8px;padding-right:4px;display:flex}.control-row label{color:var(--text-secondary);white-space:nowrap;flex-shrink:0;width:78px;font-size:11px}.control-row input[type=range]{appearance:none;background:var(--border-color);border-radius:2px;outline:none;flex:1;min-width:50px;height:3px}.control-row input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent-gold);cursor:pointer;width:14px;height:14px;transition:transform var(--transition);border-radius:50%;box-shadow:0 0 6px #c9a84c4d}.control-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-row input[type=range]::-moz-range-thumb{background:var(--accent-gold);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 0 6px #c9a84c4d}.control-row span{color:#ffffffa1;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0;min-width:38px;font-size:11px}.action-btn{border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-card);width:100%;color:var(--text-primary);cursor:pointer;font-family:var(--font-body);transition:all var(--transition);align-items:center;gap:8px;margin-bottom:6px;padding:8px 12px;font-size:12px;font-weight:500;display:flex}.action-btn:last-child{margin-bottom:0}.action-btn:hover{background:var(--bg-card-hover)}.action-btn--danger:hover{border-color:var(--danger);color:var(--danger-hover)}.action-btn--primary:hover{border-color:var(--accent-gold);color:var(--accent-gold)}.action-btn:disabled,.action-btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;border-color:var(--border-color)!important;color:var(--text-muted)!important;background:#0000004d!important}.town-list{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;max-height:220px;overflow-y:auto}.empty-state{color:var(--text-muted);text-align:center;padding:10px 0;font-size:11px;font-style:italic}.town-group{margin-bottom:10px}.town-group:last-child{margin-bottom:0}.town-group-header{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition), color var(--transition);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;margin-bottom:4px;padding:4px 6px;font-size:10px;font-weight:600;display:flex}.town-group-header:hover{color:var(--accent-gold);background:#c9a84c14}.collapse-arrow{color:var(--text-muted);transition:transform var(--transition);font-size:8px}.town-group.collapsed .collapse-arrow{transform:rotate(-90deg)}.town-group.collapsed .town-item{display:none!important}.faction-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.town-count{color:var(--text-muted);font-weight:400}.town-item{border-radius:var(--radius-sm);color:var(--text-secondary);transition:background var(--transition);cursor:default;justify-content:space-between;align-items:center;padding:4px 8px;font-size:11px;display:flex}.town-item:hover{background:var(--bg-card)}.town-remove-btn{color:var(--text-muted);cursor:pointer;transition:all var(--transition);opacity:0;background:0 0;border:none;border-radius:3px;padding:2px 5px;font-size:14px;line-height:1}.town-item:hover .town-remove-btn{opacity:1}.town-remove-btn:hover{color:var(--danger-hover);background:#8b3a2a33}.town-marker{width:40px;height:40px;transform:translate(-50%, -50%) scale(var(--marker-scale,1));pointer-events:auto;cursor:pointer;z-index:10;position:absolute}.town-marker.beacon,.town-marker.poi{width:32px;height:32px}.town-marker.homestead{width:28px;height:28px}.town-marker-inner{filter:drop-shadow(0 8px 20px #0009);width:400%;height:400%;transition:transform .3s cubic-bezier(.34,1.56,.64,1);position:relative;top:-150%;left:-150%;transform:scale(0)}.town-marker.placed .town-marker-inner{transform:scale(.25)}.town-marker.removing .town-marker-inner{opacity:0;transition:transform .3s,opacity .3s;transform:scale(0)}.town-marker-inner img{object-fit:contain;border-radius:16px;width:100%;height:100%}.town-marker-inner:after{content:"";border:4px solid var(--faction-color);opacity:0;transition:opacity var(--transition);border-radius:20%;position:absolute;inset:-7.5%}.town-marker:hover .town-marker-inner:after,.town-marker.highlighted .town-marker-inner:after{opacity:1;box-shadow:0 0 48px var(--faction-glow)}.town-marker:hover .town-marker-inner,.town-marker.highlighted .town-marker-inner{z-index:20;transform:scale(.28)}.town-marker-inner:before{content:"";background:var(--faction-glow);opacity:.15;z-index:-1;border-radius:50%;width:115%;height:115%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.town-marker.holding .town-marker-inner{z-index:25;transform:scale(.27)}.town-marker.holding .town-marker-inner:after{opacity:1;border:8px solid var(--faction-color);animation:1s linear forwards holdRing}@keyframes holdRing{0%{box-shadow:0 0 0 0 var(--faction-glow);opacity:.4}to{box-shadow:0 0 72px 16px var(--faction-glow);opacity:1}}.town-marker.dragging{z-index:30;opacity:.25}.town-marker.dragging:before{content:"";z-index:40;background:#f33;border:1px solid #fff;border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px #f00c}.town-marker.dragging .town-marker-inner{cursor:grabbing;filter:drop-shadow(0 16px 48px #000000b3);transition:none;transform:scale(.295)}.town-marker.dragging .town-marker-inner:after{opacity:1;box-shadow:0 0 80px var(--faction-glow);border:8px solid var(--faction-color)}.town-marker.faction-changed .town-marker-inner{animation:.4s factionFlash}@keyframes factionFlash{0%{filter:drop-shadow(0 2px 5px #0009)brightness()}50%{filter:drop-shadow(0 0 16px var(--faction-glow)) brightness(1.5)}to{filter:drop-shadow(0 2px 5px #0009)brightness()}}.town-marker .nametag{border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--radius-sm);font-size:10px;font-family:var(--font-body);white-space:nowrap;pointer-events:none;letter-spacing:.2px;z-index:5;background:#1a120866;padding:2px 6px;font-weight:500;animation:.2s ease-out tagFadeIn;position:absolute;bottom:100%;left:50%;transform:translate(-50%,-6px);box-shadow:0 2px 6px #00000080}@keyframes tagFadeIn{0%{opacity:0;transform:translate(-50%)}to{opacity:1;transform:translate(-50%,-6px)}}.town-name-wrapper,.fort-name-wrapper,.homestead-name-wrapper,.camp-name-wrapper,.army-name-wrapper,.poi-name-wrapper{cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition), color var(--transition);flex-grow:1;align-items:center;gap:6px;padding:2px 4px;display:flex}.town-name-wrapper:hover,.fort-name-wrapper:hover,.homestead-name-wrapper:hover,.camp-name-wrapper:hover,.army-name-wrapper:hover,.poi-name-wrapper:hover{color:var(--accent-gold);background:#c9a84c1a}.range-circle{pointer-events:none;border:1.5px dashed var(--faction-color);box-sizing:border-box;opacity:var(--range-circle-opacity,1);z-index:-1;width:calc(var(--range-diameter,0px) * var(--zoom,1) / var(--marker-scale,1));height:calc(var(--range-diameter,0px) * var(--zoom,1) / var(--marker-scale,1));background:#ffffff1f;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.range-selector{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);cursor:pointer;transition:all var(--transition);background:#261c1299;outline:none;margin-left:auto;margin-right:6px;padding:2px 4px;font-size:10px}.range-selector:hover{border-color:var(--border-strong);background:var(--bg-card-hover)}.town-name-label{font-weight:500}.town-edit-icon{color:var(--text-muted);opacity:.4;transition:opacity var(--transition);align-items:center;display:inline-flex}.town-name-wrapper:hover .town-edit-icon,.fort-name-wrapper:hover .town-edit-icon,.homestead-name-wrapper:hover .town-edit-icon,.camp-name-wrapper:hover .town-edit-icon,.army-name-wrapper:hover .town-edit-icon,.poi-name-wrapper:hover .town-edit-icon{opacity:1;color:var(--accent-gold)}.town-name-input{border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);background:#2b2016d9;outline:none;width:140px;padding:2px 6px;font-size:11px}.town-name-input:focus{border-color:var(--accent-gold);box-shadow:0 0 4px var(--accent-gold-dim)}.faction-sub-options{opacity:0;grid-template-columns:1fr 1fr;gap:6px;max-height:0;margin-top:0;transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .2s,margin .25s;display:grid;overflow:hidden}.faction-btn.active+.faction-sub-options{opacity:1;max-height:120px;margin-top:6px;margin-bottom:8px}.faction-sub-options.always-visible{opacity:1;max-height:none;margin-top:6px;margin-bottom:8px;overflow:visible}.poi-divider{border:0;border-top:1px solid var(--border-color);opacity:.6;margin:14px 0 12px}.sub-btn{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-size:11px;font-family:var(--font-body);transition:all var(--transition);flex:1;justify-content:center;align-items:center;gap:6px;padding:6px 10px;font-weight:500;display:inline-flex}.sub-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-strong)}.faction-wrapper .sub-btn.active,.structures-container .sub-btn.active{background:color-mix(in srgb, var(--faction-color) 12%, transparent);border-color:var(--faction-color);color:var(--faction-color)}.sub-btn svg{opacity:.7}.sub-btn:hover svg,.sub-btn.active svg{opacity:1}.beacon-name-wrapper{color:var(--text-muted);cursor:default;letter-spacing:.2px;align-items:center;gap:6px;padding:2px 4px;font-weight:500;display:flex}.town-marker.fort .town-marker-inner{border:2px solid var(--faction-color);box-shadow:none;background:0 0;border-radius:50%;padding:4px}.town-marker.fort .town-marker-inner img{border-radius:50%}#save-controls{z-index:50;gap:8px;display:flex;position:absolute;top:16px;right:16px}.save-btn{background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;transition:all var(--transition);align-items:center;gap:6px;padding:6px 12px;font-size:11px;font-weight:500;display:flex;box-shadow:0 2px 8px #0006}.save-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-strong)}.save-btn svg{opacity:.8}.save-btn:hover svg{opacity:1}.cursor-preview{pointer-events:none;opacity:.45;z-index:100;background-position:50%;background-repeat:no-repeat;background-size:contain;border:1px solid;border-radius:6px;width:28px;height:28px;transition:opacity .15s;position:absolute;transform:translate(-50%,-50%)}.cursor-preview.hidden{opacity:0}#bottom-controls{z-index:50;align-items:center;gap:8px;transition:right .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;bottom:16px;right:16px}#timeframes-sidebar.visible~#bottom-controls{right:312px}#zoom-indicator{background:var(--bg-sidebar);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);border-radius:var(--radius-md);height:36px;color:var(--text-secondary);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;box-sizing:border-box;justify-content:center;align-items:center;padding:0 16px;font-size:12px;display:flex;box-shadow:0 2px 8px #0000004d}#btn-screenshot,#btn-measure,#btn-region-tool,#btn-map-switch{background:var(--bg-sidebar);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);border-radius:var(--radius-md);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);justify-content:center;align-items:center;display:flex;box-shadow:0 2px 8px #0000004d}#btn-screenshot:hover,#btn-measure:hover,#btn-region-tool:hover,#btn-map-switch:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-strong);transform:scale(1.05)}#btn-measure.active,#btn-region-tool.active,#btn-map-switch.active{background:color-mix(in srgb, var(--accent-gold) 12%, transparent);border-color:var(--accent-gold);color:var(--accent-gold)}.region-item{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#00000040;flex-direction:column;gap:4px;padding:8px;transition:all .15s;display:flex}.region-item.selected{border-color:var(--accent-gold);background:#eab30814}.region-item-row{justify-content:space-between;align-items:center;gap:6px;display:flex}.region-item-name{color:var(--text-primary);background:0 0;border:1px solid #0000;border-radius:4px;outline:none;flex:1;padding:2px 4px;font-size:.88em;font-weight:600}.region-item-name:focus{border-color:var(--border-strong);background:#0006}.region-select-faction,.region-select-state{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:#0006;border-radius:4px;outline:none;padding:2px 6px;font-size:.8em}.region-btn-delete{color:#ef4444;cursor:pointer;opacity:.7;background:0 0;border:none;padding:2px 4px;font-size:14px;line-height:1}.region-btn-delete:hover{opacity:1}#btn-screenshot svg,#btn-measure svg,#btn-map-switch svg{opacity:.8;transition:opacity var(--transition)}#btn-screenshot:hover svg,#btn-measure:hover svg,#btn-map-switch:hover svg{opacity:1}.flash-effect{position:relative}.flash-effect:after{content:"";pointer-events:none;z-index:9999;background:#fff;animation:.3s ease-out forwards flashFade;position:absolute;inset:0}@keyframes flashFade{0%{opacity:.85}to{opacity:0}}#map-container.panning{cursor:grabbing!important}#map-container.measure-mode{cursor:crosshair!important}#map-container.measure-mode .town-marker,#map-container.panning .town-marker{pointer-events:none!important}.town-marker.draggable{cursor:grab}.town-marker.draggable:active{cursor:grabbing}@keyframes fadeIn{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.sidebar-section{animation:.35s both fadeIn}.sidebar-section:nth-child(2){animation-delay:40ms}.sidebar-section:nth-child(3){animation-delay:80ms}.sidebar-section:nth-child(4){animation-delay:.12s}.sidebar-section:nth-child(5){animation-delay:.16s}.town-marker.army{z-index:35;width:40px;height:40px;transform:translate(-50%, -50%) scale(var(--army-scale,1))}.town-marker.army .town-marker-inner{filter:none}.town-marker.army .town-marker-inner:after{border-radius:50%}.town-marker.army .town-marker-inner:before{display:none}.town-marker.army:hover,.town-marker.army.highlighted{z-index:45}.town-marker.army.holding{z-index:48}.town-marker.army.dragging{z-index:50}.army-dots{pointer-events:none;position:absolute;inset:0}.army-dot{background-color:var(--faction-color);border:2px solid var(--faction-border,#0009);border-radius:50%;width:26px;height:26px;transition:transform .15s,background-color .15s;position:absolute;transform:translate(-50%,-50%)}.town-marker.army:hover .army-dot,.town-marker.army.highlighted .army-dot{transform:translate(-50%,-50%)scale(1.2)}.army-config-panel{z-index:10000;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-strong);border-radius:var(--radius-md);width:220px;color:var(--text-primary);font-family:var(--font-body);pointer-events:auto;padding:12px;transition:opacity .15s,transform .15s;position:fixed;box-shadow:0 10px 30px #0009}.army-config-panel.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-90%)scale(.95)}.army-config-panel:not(.hidden){opacity:1;transform:translate(-50%,-100%)scale(1)}.army-config-panel .panel-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:6px;display:flex}.army-config-panel .panel-header h3{font-family:var(--font-display);color:var(--accent-gold);margin:0;font-size:12px;font-weight:600}.army-config-panel .close-btn{color:var(--text-muted);cursor:pointer;transition:color var(--transition);background:0 0;border:none;font-size:18px;line-height:1}.army-config-panel .close-btn:hover{color:var(--accent-gold)}.army-config-panel .control-group{flex-direction:column;gap:6px;display:flex}.army-config-panel label{color:var(--text-secondary);font-size:11px}.army-config-panel .slider-container{align-items:center;gap:8px;display:flex}.army-config-panel input[type=range]{appearance:none;background:linear-gradient(to right, var(--accent-gold) 0%, var(--accent-gold) var(--percent,0%), var(--border-color) var(--percent,0%), var(--border-color) 100%);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px;margin:0}.army-config-panel input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent-gold);cursor:pointer;width:12px;height:12px;transition:transform var(--transition);border-radius:50%;box-shadow:0 0 6px #c9a84c66}.army-config-panel input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.army-config-panel input[type=range]::-moz-range-thumb{background:var(--accent-gold);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px;box-shadow:0 0 6px #c9a84c66}.army-config-panel input[type=number]{border:1px solid var(--border-color);border-radius:var(--radius-sm);width:45px;color:var(--text-primary);text-align:center;background:#0000004d;outline:none;padding:2px 4px;font-size:11px}.army-config-panel input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.army-config-panel input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.army-config-panel input[type=number]{-moz-appearance:textfield}.army-config-panel input[type=number]:focus{border-color:var(--accent-gold)}.army-config-panel select{border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);cursor:pointer;font-size:11px;font-family:var(--font-body);transition:border-color var(--transition);background:#00000059;outline:none;padding:4px 6px}.army-config-panel select:focus{border-color:var(--accent-gold)}.army-config-panel select option{color:var(--text-primary);background:#261c12}.army-config-panel input[type=number].full-width{text-align:left;width:100%;padding:4px 6px}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:10000;opacity:1;transition:opacity var(--transition);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-card{background:var(--bg-sidebar);border:1px solid var(--border-strong);border-radius:var(--radius-lg);width:480px;max-width:90%;color:var(--text-primary);font-family:var(--font-body);transition:transform var(--transition);flex-direction:column;display:flex;overflow:hidden;transform:scale(1);box-shadow:0 10px 40px #000000b3}.modal-overlay.hidden .modal-card{transform:scale(.9)}.modal-header{border-bottom:1px solid var(--border-color);background:#0003;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-header h3{font-family:var(--font-display);color:var(--accent-gold);letter-spacing:.5px;margin:0;font-size:18px}.modal-header .close-btn{color:var(--text-muted);cursor:pointer;transition:color var(--transition);background:0 0;border:none;padding:0;font-size:24px;line-height:1}.modal-header .close-btn:hover{color:var(--accent-gold)}.modal-body{max-height:480px;padding:20px;overflow-y:auto}.help-section{margin-bottom:20px}.help-section:last-child{margin-bottom:0}.help-section h4{font-family:var(--font-display);color:var(--accent-gold);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #785a3733;margin-bottom:10px;padding-bottom:6px;font-size:13px}.help-section ul{padding-left:0;list-style:none}.help-section li{color:var(--text-secondary);margin-bottom:8px;padding-left:14px;font-size:12px;line-height:1.6;position:relative}.help-section li:before{content:"•";color:var(--accent-gold);position:absolute;top:0;left:0}.help-section li strong{color:var(--text-primary)}.save-btn.square-btn{flex-shrink:0;justify-content:center;align-items:center;width:29px;height:29px;padding:0}#timeframes-sidebar{width:var(--sidebar-width);z-index:50;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);opacity:0;pointer-events:none;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;display:flex;position:absolute;top:60px;bottom:16px;right:16px;overflow:hidden;transform:translate(calc(100% + 32px));box-shadow:0 4px 30px #00000080,inset 0 1px #b4966414}#timeframes-sidebar.visible{opacity:1;pointer-events:auto;transform:translate(0)}.timeframes-list-container{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;flex-direction:column;flex:1;gap:8px;padding:12px 16px;display:flex;overflow-y:auto}.timeframes-list-container::-webkit-scrollbar{width:4px}.timeframes-list-container::-webkit-scrollbar-track{background:0 0}.timeframes-list-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.add-frame-option{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition);text-transform:uppercase;letter-spacing:.5px;z-index:5;background:#00000026;border:1px dashed #785a3740;justify-content:center;align-items:center;margin:4px 0;padding:6px 8px;font-size:10px;display:flex;position:relative}.add-frame-option:hover{color:var(--accent-gold);background:#c9a84c14;border-color:#c9a84c59}.add-frame-option svg{transition:transform var(--transition);margin-right:4px}.add-frame-option:hover svg{transform:scale(1.15)}.timeframe-slot{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--transition);flex-direction:column;gap:4px;padding:6px 10px;display:flex;position:relative}.timeframe-slot:hover{background:var(--bg-card-hover);border-color:var(--border-strong)}.timeframe-slot.selected{border-color:var(--accent-gold);background:#48342066;box-shadow:0 0 10px #c9a84c40}.timeframe-slot.active-play{background:#2e7d3214;border-color:#2e7d32;animation:1.5s infinite alternate pulse-border;box-shadow:0 0 12px #2e7d3280}@keyframes pulse-border{0%{border-color:#2e7d3280;box-shadow:0 0 4px #2e7d3233}to{border-color:#2e7d32;box-shadow:0 0 12px #2e7d3299}}.timeframe-slot.dragging{opacity:.35;border:1px dashed var(--accent-gold);background:#0003}.timeframe-slot.drag-over-top:before{content:"";background:var(--accent-gold);border-radius:var(--radius-sm);height:4px;box-shadow:0 0 8px var(--accent-gold);pointer-events:none;z-index:10;position:absolute;top:-6px;left:0;right:0}.timeframe-slot.drag-over-bottom:after{content:"";background:var(--accent-gold);border-radius:var(--radius-sm);height:4px;box-shadow:0 0 8px var(--accent-gold);pointer-events:none;z-index:10;position:absolute;bottom:-6px;left:0;right:0}.timeframe-slot-header{justify-content:space-between;align-items:center;display:flex}.timeframe-slot-title{font-family:var(--font-display);color:var(--text-primary);align-items:center;gap:6px;font-size:12px;font-weight:600;display:flex}.drag-handle{cursor:grab;color:var(--text-muted);border-radius:var(--radius-sm);transition:all var(--transition);align-items:center;padding:2px;display:flex}.drag-handle:hover{color:var(--text-secondary);background:#ffffff0d}.timeframe-slot.dragging .drag-handle{cursor:grabbing}.timeframe-slot-actions{justify-content:flex-end;gap:6px;display:flex}.timeframe-slot-btn{border-radius:var(--radius-sm);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);font-size:10px;font-weight:500;font-family:var(--font-body);background:#00000040;align-items:center;gap:4px;padding:4px 8px;display:inline-flex}.timeframe-slot-btn:hover{color:var(--text-primary);border-color:var(--border-strong);background:#00000073}.timeframe-slot-btn.btn-delete:hover{background:var(--danger);border-color:var(--danger-hover);color:#fff}.timeframe-slot.empty{color:var(--text-muted);text-align:center;background:#00000026;border-style:dashed;justify-content:center;align-items:center;gap:2px;padding:8px 10px}.timeframe-slot.empty:hover{border-color:var(--accent-gold);color:var(--accent-gold);background:#c9a84c0a}.timeframe-slot.empty .timeframe-slot-title{color:var(--text-muted);font-weight:500}.timeframe-slot.empty:hover .timeframe-slot-title{color:var(--accent-gold)}.timeframes-footer{border-top:1px solid var(--border-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#18120c99;padding:16px}.animation-controls{flex-direction:column;gap:12px;display:flex}.control-row-speed{justify-content:space-between;align-items:center;display:flex}.control-row-speed label{color:var(--text-secondary);font-size:12px;font-weight:500}.control-row-speed input[type=number]{border:1px solid var(--border-color);width:68px;color:var(--text-primary);border-radius:var(--radius-sm);text-align:center;font-family:var(--font-body);transition:all var(--transition);background:#00000059;padding:4px 6px;font-size:11px}.control-row-speed input[type=number]:focus{border-color:var(--accent-gold);background:#00000080;outline:none}.control-row-buttons{justify-content:space-between;align-items:center;gap:8px;display:flex}#btn-anim-play.active{color:#fff;background:#2e7d32;border-color:#2e7d32;box-shadow:0 0 8px #2e7d3266}#btn-anim-play.active:hover{background:#1b5e20;border-color:#1b5e20}#btn-anim-loop{align-items:center;gap:4px;margin:0;padding:6px 8px;display:flex}#btn-anim-loop.active{color:var(--accent-gold);border-color:var(--accent-gold);background:var(--accent-gold-dim);box-shadow:0 0 6px #c9a84c33}#save-controls,#sidebar-toggle,#sidebar,#timeframes-sidebar,#bottom-controls,#whiteboard-panel{transition:opacity .3s,right .3s,left .3s,transform .3s cubic-bezier(.4,0,.2,1)}body.cinematic-mode #save-controls,body.cinematic-mode #sidebar-toggle,body.cinematic-mode #sidebar,body.cinematic-mode #timeframes-sidebar,body.cinematic-mode #bottom-controls,body.cinematic-mode #whiteboard-panel{opacity:0!important;pointer-events:none!important}#cave-canvas{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;top:0;left:0}#whiteboard-canvas{pointer-events:none;z-index:15;width:100%;height:100%;position:absolute;top:0;left:0}#measure-canvas{pointer-events:none;z-index:60;width:100%;height:100%;position:absolute;top:0;left:0}.faction-wrapper[data-faction=poi] .faction-sub-options{grid-template-columns:repeat(6,1fr);gap:4px}.faction-wrapper[data-faction=poi] .sub-btn{aspect-ratio:1;width:100%;height:auto;color:var(--text-primary);justify-content:center;align-items:center;padding:0;display:inline-flex}#whiteboard-panel{z-index:100;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);flex-direction:column;width:220px;display:flex;position:absolute;top:16px;left:352px;box-shadow:0 4px 30px #00000080,inset 0 1px #b4966414}#whiteboard-panel.hidden{opacity:0;pointer-events:none;display:none}.panel-header{border-bottom:1px solid var(--border-color);cursor:move;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.panel-header span{font-family:var(--font-display);text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-size:10px;font-weight:600}#btn-close-whiteboard{color:var(--text-secondary);cursor:pointer;transition:color var(--transition);background:0 0;border:none;padding:0;font-size:18px;line-height:1}#btn-close-whiteboard:hover{color:var(--text-primary)}.panel-body{padding:12px}.tool-section{flex-direction:column;display:flex}.tool-section label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:9px;font-weight:600}.tool-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.tool-btn{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);cursor:pointer;transition:all var(--transition);justify-content:center;align-items:center;gap:4px;padding:6px;font-size:11px;display:flex}.tool-btn:hover{border-color:var(--border-strong);background:var(--bg-card-hover)}.tool-btn.active{border-color:var(--accent-gold);background:var(--accent-gold-dim);box-shadow:0 0 6px #c9a84c33}.color-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.color-dot{cursor:pointer;width:22px;height:22px;transition:transform var(--transition), border-color var(--transition);border:1px solid #0006;border-radius:50%;padding:0;position:relative}.color-dot:hover{transform:scale(1.12)}.color-dot.active{box-shadow:0 0 8px var(--faction-glow,#fff9);border:2px solid #fff;transform:scale(1.2)}#cave-config-input::-webkit-inner-spin-button{cursor:pointer;height:24px;-webkit-appearance:inner-spin-button!important;opacity:1!important}#cave-config-input::-webkit-outer-spin-button{cursor:pointer;height:24px;-webkit-appearance:inner-spin-button!important;opacity:1!important}#cave-config-input{-moz-appearance:number-input!important}#measure-settings-panel{background:var(--bg-sidebar);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);border-radius:var(--radius-md);z-index:100;width:140px;padding:8px;transition:right .3s cubic-bezier(.4,0,.2,1);position:absolute;bottom:58px;right:16px;box-shadow:0 4px 16px #0009}#measure-settings-panel.hidden{display:none!important}#region-tool-panel{background:var(--bg-sidebar);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);border-radius:var(--radius-md);z-index:100;width:150px;padding:8px;transition:right .3s cubic-bezier(.4,0,.2,1);position:absolute;bottom:58px;right:16px;box-shadow:0 4px 16px #0009}#region-tool-panel.hidden{display:none!important}#timeframes-sidebar.visible~#region-tool-panel{right:312px}.region-mode-btn{text-align:left;border-radius:var(--radius-sm);width:100%;color:var(--text-primary);cursor:pointer;font-family:var(--font-body);transition:all var(--transition);background:0 0;border:1px solid #0000;align-items:center;gap:8px;padding:6px 8px;font-size:11px;display:flex}.region-mode-btn:hover{background:var(--bg-card-hover);border-color:var(--border-strong)}.region-mode-btn.active{background:color-mix(in srgb, var(--accent-gold) 15%, transparent);border-color:var(--accent-gold);color:var(--accent-gold);font-weight:600}.measure-type-btn{text-align:left;border-radius:var(--radius-sm);width:100%;color:var(--text-primary);cursor:pointer;font-family:var(--font-body);transition:all var(--transition);background:0 0;border:1px solid #0000;align-items:center;gap:8px;padding:6px 8px;font-size:11px;display:flex}.measure-type-btn svg{color:var(--text-muted);transition:color var(--transition)}.measure-type-btn:hover{background:var(--bg-card-hover);border-color:var(--border-color)}.measure-type-btn.active{background:var(--accent-gold-dim);border-color:var(--accent-gold);color:var(--accent-gold)}.measure-type-btn.active svg{color:var(--accent-gold)}#btn-measure-clear{border-radius:var(--radius-sm);color:#f87171;width:100%;font-family:var(--font-body);cursor:pointer;transition:all var(--transition);text-align:center;background:#ef444426;border:1px solid #ef44444d;padding:6px;font-size:10px;font-weight:700}#btn-measure-clear:hover{background:#ef444440;border-color:#ef444480}.lobby-info-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:10px;padding:10px}.lobby-info-row{font-size:12px}.lobby-label{color:var(--text-secondary)}.lobby-value{color:var(--text-primary)}#lobby-code-input{border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--radius-sm);transition:border-color var(--transition);background:#0006;outline:none;padding:6px 10px}#lobby-code-input:focus{border-color:var(--accent-gold)}.lobby-peer-list li{color:var(--text-secondary);margin-bottom:4px;font-size:11px}.remote-cursor{pointer-events:none;z-index:1000;will-change:transform;flex-direction:column;align-items:flex-start;display:flex;position:absolute}.remote-cursor-pointer{border-left:6px solid #0000;border-right:6px solid #0000;border-bottom:12px solid var(--accent-gold);filter:drop-shadow(1px 2px 2px #000c);width:0;height:0;transform:rotate(-35deg)}.remote-cursor-label{border:1px solid var(--border-strong);color:var(--text-primary);border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;background:#261c12f2;margin-top:4px;padding:2px 6px;font-size:10px;font-weight:600;box-shadow:0 2px 5px #00000080}.hidden{display:none!important}.discontinued-banner{z-index:9999;-webkit-backdrop-filter:blur(12px);border:1px solid var(--accent-gold);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-body);-webkit-user-select:text;user-select:text;pointer-events:auto;background:#261c12eb;justify-content:center;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:8px 18px;font-size:13px;display:flex;position:fixed;top:14px;left:50%;transform:translate(-50%);box-shadow:0 4px 24px #000c,0 0 12px #c9a84c59}.discontinued-banner-text{text-align:center;font-weight:500;line-height:1.4}.discontinued-banner-link{color:var(--accent-gold);text-underline-offset:3px;transition:color var(--transition);font-weight:600;text-decoration:underline}.discontinued-banner-link:hover{color:#ebd07b}.discontinued-banner-close{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:2px 6px;font-size:15px;line-height:1;display:flex}.discontinued-banner-close:hover{color:var(--text-primary);background:#ffffff1f}