@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-color:#0b0c10;--panel-bg:#12141ad9;--panel-border:#ffffff14;--accent-color:#a83232;--accent-hover:#c93b3b;--accent-glow:#a8323266;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#4b5563;--grid-unit:40px;--friendly-color:#10b981;--friendly-bg:#10b981cc;--friendly-border:#34d399;--friendly-glow:#10b98166;--hostile-color:#ef4444;--hostile-bg:#ef4444cc;--hostile-border:#f87171;--hostile-glow:#ef444466;--neutral-color:#f59e0b;--neutral-bg:#f59e0bcc;--neutral-border:#fbbf24;--neutral-glow:#f59e0b66}*{box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-user-select:none;user-select:none;height:100vh;margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden}#root{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid var(--panel-border);z-index:100;flex-direction:column;flex-shrink:0;gap:16px;width:320px;padding:20px;transition:transform .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),border-right-color .3s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden auto;box-shadow:10px 0 30px #00000080}.sidebar.collapsed{width:0;box-shadow:none;border-right-color:#0000;padding-left:0;padding-right:0;transform:translate(-320px)}.sidebar-content{flex-direction:column;flex-shrink:0;gap:16px;width:280px;display:flex}.sidebar-toggle{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--panel-border);width:32px;height:48px;color:var(--text-secondary);cursor:pointer;z-index:1000;border-left:none;border-radius:0 8px 8px 0;justify-content:center;align-items:center;padding:0;font-size:.9rem;transition:left .3s cubic-bezier(.4,0,.2,1),background-color .2s,color .2s,border-color .2s,box-shadow .2s;display:flex;position:absolute;top:20px;left:320px;box-shadow:4px 0 10px #0000004d}.sidebar-toggle:hover{background-color:var(--accent-color);color:#fff;border-color:var(--accent-color);box-shadow:0 0 12px var(--accent-glow), 4px 0 10px #0000004d}.sidebar-toggle.collapsed{border-left:1px solid var(--panel-border);left:0}.sidebar-toggle .toggle-icon{transition:transform .3s cubic-bezier(.4,0,.2,1);display:inline-block}.sidebar-toggle.collapsed .toggle-icon{transform:rotate(180deg)}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.sidebar h2{color:#fff;border-bottom:2px solid var(--accent-color);letter-spacing:1px;text-shadow:0 0 10px #a832324d;margin:0;padding-bottom:8px;font-family:Cinzel,serif;font-size:1.5rem;font-weight:800}.sidebar h3{color:#fff;letter-spacing:.5px;border-bottom:1px solid #ffffff1a;margin:10px 0 0;padding-bottom:4px;font-family:Cinzel,serif;font-size:1.1rem;font-weight:600}.input-group{flex-direction:column;gap:6px;width:100%;display:flex}.input-row{gap:12px;width:100%;display:flex}.input-row .input-group{flex:1;min-width:0}label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:600}input,select,button{color:#fff;background-color:#0a0a0ccc;border:1px solid #ffffff26;border-radius:6px;width:100%;padding:8px 12px;font-size:.85rem;transition:all .2s ease-in-out}input:focus,select:focus{border-color:var(--accent-color);box-shadow:0 0 8px var(--accent-glow);background-color:#0a0a0cf2;outline:none}input[type=range]{cursor:pointer;background:#ffffff1a;border:none;border-radius:3px;height:6px;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-color);width:16px;height:16px;box-shadow:0 0 8px var(--accent-glow);border-radius:50%;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}button{background-color:var(--accent-color);cursor:pointer;letter-spacing:.5px;color:#fff;border:none;font-weight:700;box-shadow:0 4px 12px #a8323233}button:hover{background-color:var(--accent-hover);box-shadow:0 4px 15px #a8323266}button:active{transform:translateY(1px)}.spell-btn{background-color:#2b4c6f;box-shadow:0 4px 12px #2b4c6f33}.spell-btn:hover{background-color:#3b6694;box-shadow:0 4px 15px #2b4c6f66}.zoom-controls{gap:8px;width:100%;display:flex}.zoom-controls button{flex:1;padding:6px;font-size:.75rem}.divider{border:0;border-top:1px solid #ffffff1a;width:100%;margin:4px 0}.map-container{cursor:default;background-color:#08080a;flex-grow:1;position:relative;overflow:hidden}.map-container.drag-over{border:2px dashed var(--accent-color);background-color:#120909;box-shadow:inset 0 0 80px #a832324d}.map-placeholder{color:var(--text-secondary);text-align:center;pointer-events:none;z-index:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#14161c99;border:1px solid #ffffff0d;border-radius:12px;max-width:80%;padding:30px;font-size:1.4rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.map-placeholder button,.map-placeholder input{pointer-events:auto}.map-placeholder strong{color:#fff;letter-spacing:1px;font-family:Cinzel,serif}.battlemap-canvas{transform-origin:0 0;z-index:2;position:absolute;top:0;left:0;box-shadow:0 10px 40px #000c}.map-img{pointer-events:none;max-width:none;max-height:none;display:block}.token{cursor:grab;color:#fff;text-shadow:0 2px 4px #000c;-webkit-user-select:none;user-select:none;z-index:20;box-sizing:border-box;font-weight:700;font-size:calc(var(--grid-unit) * .35);touch-action:none;width:calc(var(--grid-unit) * var(--size-multiplier,1));height:calc(var(--grid-unit) * var(--size-multiplier,1));border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;font-family:Cinzel,serif;transition:border-color .2s,box-shadow .2s;display:flex;position:absolute;box-shadow:0 8px 16px #0009}.token:active{cursor:grabbing}.token:hover{z-index:150}.token.friendly{background-color:var(--friendly-bg);border-color:var(--friendly-border);box-shadow:0 0 12px var(--friendly-glow), 0 8px 16px #0009}.token.friendly:hover{box-shadow:0 0 20px var(--friendly-color), 0 8px 20px #000000b3}.token.hostile{background-color:var(--hostile-bg);border-color:var(--hostile-border);box-shadow:0 0 12px var(--hostile-glow), 0 8px 16px #0009}.token.hostile:hover{box-shadow:0 0 20px var(--hostile-color), 0 8px 20px #000000b3}.token.neutral{background-color:var(--neutral-bg);border-color:var(--neutral-border);box-shadow:0 0 12px var(--neutral-glow), 0 8px 16px #0009}.token.neutral:hover{box-shadow:0 0 20px var(--neutral-color), 0 8px 20px #000000b3}.spell-template{cursor:grab;z-index:10;box-sizing:border-box;touch-action:none;width:calc(var(--grid-unit) * var(--w-units));height:calc(var(--grid-unit) * var(--h-units));background-color:#0000;position:absolute}.spell-template:hover{z-index:140}.spell-template:active{cursor:grabbing}.spell-template:before{content:"";box-sizing:border-box;opacity:.65;border:2px dashed #fffc;transition:opacity .2s,border-color .2s;position:absolute;inset:0;box-shadow:0 0 20px #ffffff26}.spell-template:hover:before{opacity:.85;border-color:#fff}.spell-template.circle:before{border-radius:50%}.spell-template.cone:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.spell-template.fire:before{background:radial-gradient(circle,#ef4444bf 0%,#f59e0b66 100%);border-color:#fbbf24;box-shadow:0 0 25px #f59e0b66}.spell-template.cold:before{background:radial-gradient(circle,#3b82f6b3 0%,#93c5fd4d 100%);border-color:#93c5fd;box-shadow:0 0 25px #3b82f666}.spell-template.acid:before{background:radial-gradient(circle,#10b981b3 0%,#a7f3d04d 100%);border-color:#a7f3d0;box-shadow:0 0 25px #10b98166}.spell-template.lightning:before{background:radial-gradient(circle,#8b5cf6b3 0%,#d8b4fe4d 100%);border-color:#e9d5ff;box-shadow:0 0 25px #8b5cf666}.tooltip{visibility:hidden;color:#fff;text-align:center;z-index:1000;opacity:0;pointer-events:none;transform-origin:bottom;width:220px;text-shadow:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transform:scale(var(--tooltip-scale,1)) rotate(var(--tooltip-rotation,0deg)) translateY(0px);background-color:#0a0a0cf2;border:1px solid #ffffff26;border-radius:8px;margin-left:-110px;padding:12px;font-family:Inter,sans-serif;font-size:.95rem;font-weight:400;line-height:1.4;transition:opacity .2s,transform .2s;position:absolute;bottom:115%;left:50%;box-shadow:0 10px 25px #000c}.token:hover .tooltip,.spell-template:hover .tooltip{visibility:visible;opacity:1;transform:scale(var(--tooltip-scale,1)) rotate(var(--tooltip-rotation,0deg)) translateY(-6px)}.tooltip.tooltip-bottom{transform-origin:top;transform:scale(var(--tooltip-scale,1)) rotate(var(--tooltip-rotation,0deg)) translateY(0px);top:115%;bottom:auto}.token:hover .tooltip.tooltip-bottom,.spell-template:hover .tooltip.tooltip-bottom{transform:scale(var(--tooltip-scale,1)) rotate(var(--tooltip-rotation,0deg)) translateY(6px)}body.panning-mode .map-container{cursor:grab}body.panning-mode .map-container:active{cursor:grabbing}.help-text{color:var(--text-secondary);background:#0a0a0c99;border:1px solid #ffffff08;border-radius:8px;width:100%;margin-top:auto;padding:10px;font-size:.75rem;line-height:1.4}.help-text strong{color:#fff}.token-markers{max-width:calc(var(--grid-unit) * var(--size-multiplier,1) + 16px);z-index:30;flex-wrap:wrap;gap:2px;display:flex;position:absolute;top:-8px;right:-8px}.token-marker-badge{cursor:pointer;background-color:#0f0f14f2;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;transition:transform .1s;display:flex;box-shadow:0 2px 5px #00000080}.token-marker-badge:hover{transform:scale(1.15)}.status-picker-backdrop{z-index:1999;cursor:default;background:0 0;position:fixed;inset:0}.status-picker-menu{transform:translateX(-50%) scale(var(--tooltip-scale,1));transform-origin:top;z-index:2000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#12141af2;border:1px solid #ffffff1f;border-radius:8px;width:180px;padding:8px;position:absolute;top:105%;left:50%;box-shadow:0 10px 30px #000000b3}.status-picker-header{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;text-align:center;border-bottom:1px solid #ffffff14;margin-bottom:6px;padding-bottom:4px;font-family:Inter,sans-serif;font-size:.75rem;font-weight:700}.status-picker-grid{grid-template-columns:repeat(2,1fr);gap:4px;max-height:200px;display:grid;overflow-y:auto}.status-picker-grid::-webkit-scrollbar{width:4px}.status-picker-grid::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.status-picker-item{color:var(--text-secondary);cursor:pointer;width:100%;box-shadow:none;background-color:#ffffff08;border:1px solid #0000;border-radius:4px;justify-content:flex-start;align-items:center;gap:6px;padding:4px 6px;font-size:.72rem;transition:all .15s ease-in-out;display:flex}.status-picker-item:hover{color:#fff;background-color:#ffffff14}.status-picker-item.active{color:#fff;background-color:#a8323240;border-color:#a8323280;font-weight:600;box-shadow:0 0 8px #a832324d}.status-picker-item .status-picker-icon{font-size:.85rem}.status-picker-item .status-picker-label{text-overflow:ellipsis;white-space:nowrap;font-family:Inter,sans-serif;overflow:hidden}.default-map-thumbnail-btn{cursor:pointer;pointer-events:auto;background:0 0;border:2px solid #ffffff26;border-radius:8px;width:64px;height:64px;padding:0;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 4px 10px #00000080}.default-map-thumbnail-btn:hover{border-color:var(--accent-hover);box-shadow:0 0 15px var(--accent-glow), 0 4px 15px #0009;transform:scale(1.08)}.default-map-thumbnail-btn:active{transform:scale(.95)}.sidebar-default-map-btn{width:100%;height:48px;box-shadow:none;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:6px;padding:0;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.sidebar-default-map-btn:hover{border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 10px #0000004d}.sidebar-default-map-btn.active{border-color:var(--accent-color);box-shadow:0 0 10px var(--accent-glow);transform:none}.sidebar-section{flex-direction:column;margin-bottom:8px;display:flex}.sidebar-section-header{cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff05;border:1px solid #ffffff0d;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;transition:all .2s ease-in-out;display:flex}.sidebar-section-header:hover{background:#ffffff0d;border-color:#ffffff1a}.sidebar-section-header h3{color:#fff;letter-spacing:.5px;font-family:Cinzel,serif;font-size:.95rem;font-weight:600;border:none!important;margin:0!important;padding:0!important}.sidebar-section-header .toggle-arrow{color:var(--text-secondary);font-size:.7rem;transition:transform .2s}.sidebar-section-header.collapsed .toggle-arrow{transform:rotate(-90deg)}.sidebar-section-content{opacity:1;flex-direction:column;gap:12px;max-height:1000px;margin-top:10px;padding:0 4px;transition:max-height .3s cubic-bezier(0,1,0,1),opacity .2s;display:flex;overflow:hidden}.sidebar-section-content.collapsed{opacity:0;pointer-events:none;max-height:0;margin-top:0}.map-container.panning-active{cursor:grabbing!important}