@font-face{
  font-family:'Questrial-Regular';
  src:url('../fonts/Questrial-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#0e0e10;--surface:#18181c;--surface2:#222228;--surface3:#2a2a32;
  --border:#333340;--accent:#5b8af0;--accent2:#e05b7a;
  --text:#e8e8f0;--text2:#9898b0;--text3:#5a5a70;
  --green:#4ecb83;--canvas-bg:#1a1a20;
  --panel-w:52px;--right-w:268px;--bottom-h:120px;--top-h:40px;
  --mirror-active:#4ecb83;
  /* Grid customization variables */
  --grid-color: rgba(255,255,255,0.08);
  --grid-opacity: 0.5;
  /* Advertising placeholders (empty — no ad code yet) */
  --ad-sidebar-w:320px;--ad-bar-h:calc(50px + env(safe-area-inset-bottom));
}
*{box-sizing:border-box;margin:0;padding:0;user-select:none;}
input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
body{background:var(--bg);color:var(--text);font-family:'Questrial-Regular','Space Grotesk',sans-serif;font-size:14px;overflow:hidden;height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;}

/* Desktop ad sidebar width reserved via body margin, not layout nesting */
body{margin-right:var(--ad-sidebar-w);}
#desktop-ad-sidebar{
  position:fixed;top:0;right:0;width:var(--ad-sidebar-w);height:100vh;height:100dvh;
  background:var(--surface);border-left:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  z-index:10;
}
#desktop-ad-container{
  width:300px;height:600px;max-width:calc(100% - 20px);max-height:calc(100% - 40px);
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);border-radius:6px;
  background:var(--surface2);
}
/* Mobile bottom ad bar — hidden by default, shown only under the mobile
   breakpoint below (and the desktop sidebar hidden there instead). */
#mobile-ad-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;height:var(--ad-bar-h);
  background:var(--surface);border-top:1px solid var(--border);
  align-items:center;justify-content:center;
  padding-bottom:env(safe-area-inset-bottom);
  z-index:605;
}
#mobile-ad-container{
  width:100%;height:100%;max-width:420px;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);
  background:var(--surface2);
}

/* TOP BAR */
#topbar{height:var(--top-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:3px;padding:0 8px;flex-shrink:0;z-index:100;position:relative;}
#topbar-title {
  position: absolute;
  font-size: 20px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Prevents overlap with buttons */
  max-width: calc(100% - var(--panel-w) - var(--right-w) - 60px);
  z-index: 10;
}
.logo{font-family:'Press Start 2P',monospace;font-size:12px!important;color:var(--accent);margin-right:6px!important;white-space:nowrap;display:flex;align-items:center;gap:8px!important;}
.nav-hamburger-spacer{display:none;}
.nav-hamburger-btn{
  background:none;border:none;color:var(--text);font-size:18px!important;cursor:pointer;
  padding:6px!important;display:flex;align-items:center;justify-content:center;
  border-radius:6px;transition:.2s;
}
.nav-hamburger-btn:hover{background:var(--surface2);color:var(--accent);}
.nav-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:900;display:none;}
.nav-menu-overlay.open{display:none;}
.nav-menu-dropdown{position:fixed;top:var(--top-h);left:0;min-width:280px;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:0 8px 8px 0;padding:8px;z-index:901;display:none;flex-direction:column;gap:6px;}
.nav-menu-dropdown.open{display:flex;}
.nav-menu-item{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:6px;font-size:14px;font-family:inherit;text-decoration:none;cursor:pointer;display:flex;align-items:center;gap:8px;transition:.15s;outline:none;-webkit-tap-highlight-color:transparent;}
.nav-menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.nav-menu-item:hover{background:var(--surface3);border-color:var(--text3);}
.nav-menu-item i{width:16px;text-align:center;color:var(--accent);}
.nav-menu-sep{height:1px;background:var(--border);margin:0 4px;}
.nav-menu-socials{display:flex;justify-content:space-evenly;align-items:center;padding:0;margin-top:2px;}
.nav-menu-socials a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;transition:background .15s;}
.nav-menu-socials a:hover{background:var(--surface3);}
.social-icon{width:26px;height:26px;display:block;color:var(--text);}
.nav-lang-sheet{display:none;}
.lang-option{background:none;border:none;color:var(--text2);text-align:left;padding:8px 12px;border-radius:5px;font-size:14px;font-family:inherit;cursor:pointer;transition:.15s;}
.lang-option:hover{background:var(--surface3);color:var(--text);}
.lang-option.active{color:var(--accent);font-weight:600;}
.lang-switcher{position:absolute;right:8px;top:50%;transform:translateY(-50%);}
.lang-current{
  background:var(--surface2);color:var(--text);border:1px solid var(--border);
  border-radius:6px;padding:6px 10px;font-size:12px;font-family:'JetBrains Mono',monospace;
  display:flex;align-items:center;gap:6px;cursor:pointer;transition:.2s;
}
.lang-current:hover{background:var(--surface3);border-color:var(--text3);}
.lang-current i{font-size:9px;color:var(--text2);}
.lang-dropdown{
  position:absolute;top:100%;right:0;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:6px;min-width:150px;
  display:none;flex-direction:column;gap:2px;z-index:920;
}
.lang-dropdown.open{display:flex;}
.logo .logo-text{font-weight:normal;}
.topbtn{background:none;border:none;color:var(--text2);padding:4px 7px;border-radius:4px;cursor:pointer;font-size:13px;font-family:inherit;transition:.15s;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.topbtn:hover{background:var(--surface3);color:var(--text);}
.topbtn.active-btn,
.frames-btn.active-btn{
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

.topbtn.active-btn:hover,
.frames-btn.active-btn:hover{
  background: #4a78e0;
  color: #fff;
}
.sep{width:1px;height:20px;background:var(--border);margin:0 2px;flex-shrink:0;}
.mobile-tools-sep{display:none;} /* only relevant on mobile, flanking the mobile-only Tools button */
#canvasSize{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text3);margin-left:auto;display:none;}
.topbar-title-size{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text3);font-weight:400;margin-left:2px;}
.mobile-color-toggle{display:none;}

/* MAIN */
#main{display:flex;flex:1;overflow:hidden;min-height:0;}

/* TOOLBAR */
#toolbar{width:var(--panel-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:5px 0;gap:1px;flex-shrink:0;overflow:hidden;}
.tool-btn{width:38px;height:38px;border:none;background:none;color:var(--text2);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:.15s;position:relative;flex-shrink:0;}
.tool-btn:disabled{opacity:0.3;cursor:not-allowed;pointer-events:none;}
.tool-btn:hover{background:var(--surface3);color:var(--text);}
.tool-btn.active{background:var(--accent);color:#fff;}
.tool-btn.mirror-active{background:var(--mirror-active);color:#000;}
.tool-sep{width:38px;height:1px;background:var(--border);margin:1px 0;flex-shrink:0;}
.tool-tip{position:fixed;background:var(--surface3);color:var(--text);border:1px solid var(--border);padding:3px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none;z-index:9999;display:none;}

/* Color swatches in toolbar */
#tbColorWrap{position:relative;width:38px;height:38px;flex-shrink:0;margin-top:2px;}
#tbBgSwatch{position:absolute;right:1px;bottom:1px;width:22px;height:22px;border-radius:4px;border:1.5px solid var(--border);cursor:pointer;z-index:1;}
#tbFgSwatch{position:absolute;left:1px;top:1px;width:22px;height:22px;border-radius:4px;border:1.5px solid var(--border);cursor:pointer;z-index:2;}
#tbSwapBtn{position:absolute;left:1px;top:23px;width:14px;height:14px;background:var(--surface3);border:1px solid var(--border);border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--text2);z-index:3;padding:0;}
#tbSwapBtn:hover{color:var(--text);background:var(--surface2);}

/* CANVAS */
#canvasWrap{flex:1;background:var(--canvas-bg);overflow:hidden;position:relative;min-width:0;}
#canvasContainer{position:absolute;}
#checkerboard {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(-45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3a45 75%),
    linear-gradient(-45deg, transparent 75%, #3a3a45 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #4a4a55;
}
#pixelCanvas{image-rendering:pixelated;image-rendering:crisp-edges;position:absolute;top:0;left:0;}
#gridCanvas{position:absolute;pointer-events:none;image-rendering:pixelated;}
#guidesCanvas{position:absolute;top:0;left:0;pointer-events:none;image-rendering:pixelated;z-index:6;}
#overlayCanvas{position:absolute;top:0;left:0;pointer-events:none;image-rendering:pixelated;}
#hoverCanvas{position:absolute;top:0;left:0;pointer-events:none;image-rendering:pixelated;}
#selectionCanvas{position:absolute;top:0;left:0;pointer-events:none;image-rendering:pixelated;}
#canvasInteract{position:absolute;top:0;left:0;}

#gridCanvas { 
    position: absolute; 
    pointer-events: none; 
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    mix-blend-mode: difference;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(to left, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(to top, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    
    background-size: var(--zoom, 16px) var(--zoom, 16px);
}

#gridToggleBtn.active{background:var(--mirror-active);color:#000;}
#tileViewBtn.active{background:var(--mirror-active);color:#000;}

/* RIGHT PANEL */
#rightpanel{width:var(--right-w);background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
.rpanel-section{border-bottom:1px solid var(--border);padding:9px;}
.rpanel-pane .rpanel-section:last-child{border-bottom:none;}
.rpanel-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:7px;}

/* Color picker panel */
#svPicker{width:100%;height:88px;border-radius:4px;position:relative;cursor:crosshair;margin-bottom:4px;border:1px solid var(--border);}
#svCursor{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #000;}
#hueSlider{width:100%;height:12px;border-radius:6px;border:none;cursor:pointer;margin-top:4px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);}
#hueSlider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #333;cursor:pointer;}
#gridHueSlider{width:100%;height:12px;border-radius:6px;border:none;cursor:pointer;margin-top:4px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);}
#gridHueSlider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #333;cursor:pointer;}
#gridHueSlider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #333;cursor:pointer;}
#csHueSlider{width:100%;height:14px;border-radius:7px;border:none;cursor:pointer;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);}
#csHueSlider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #333;cursor:pointer;box-shadow:0 0 2px rgba(0,0,0,0.5);}
#csHueSlider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #333;cursor:pointer;box-shadow:0 0 2px rgba(0,0,0,0.5);}
#hexInput{background:var(--surface3);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12px;width:100%;margin-top:4px;}
#gridSvPicker{width:100%;height:88px;border-radius:4px;position:relative;cursor:crosshair;margin-bottom:4px;border:1px solid var(--border);}
#gridSvCursor{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #000;}
#gridHexInput{background:var(--surface3);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12px;width:100%;margin-top:4px;}
#csHexInput{background:var(--surface3);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12px;width:100%;}
.desktop-only-color-input{display:none;}
.mobile-grid-color-picker{display:block;margin-bottom:14px;}
#gridSettingsPopup .grid-opacity-row{margin-top:14px;}
#hexInput:focus{outline:none;border-color:var(--accent);}

/* Palette */
#paletteGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;overflow-y:auto;overflow-x:hidden;align-content:start;min-height:0;flex:1;padding:2px;}
.pal-color{width:100%;aspect-ratio:1;border-radius:3px;cursor:pointer;border:1px solid transparent;transition:.1s;position:relative;background-image:linear-gradient(45deg,#3a3a45 25%,transparent 25%),linear-gradient(-45deg,#3a3a45 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#3a3a45 75%),linear-gradient(-45deg,transparent 75%,#3a3a45 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#4a4a55;}
.pal-color-unused-alert{position:absolute;top:-3px;left:-3px;width:9px;height:9px;background:#e0392b;border-radius:50%;border:1px solid rgba(0,0,0,.4);pointer-events:none;}
.pal-color:hover{transform:scale(1.15);border-color:#fff;}
.pal-add{width:100%;aspect-ratio:1;border-radius:3px;cursor:pointer;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;transition:.1s;}
.pal-add:hover{border-color:var(--accent);color:var(--accent);}

/* Options */
.opt-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.opt-label{font-size:12px;color:var(--text2);min-width:50px;flex-shrink:0;}
.opt-input{background:var(--surface3);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:3px 6px;font-size:12px;font-family:inherit;width:50px;}
.opt-input:focus{outline:none;border-color:var(--accent);}
/* Editable value box next to every effect/opacity/fill slider — fixed
   width (plus a fixed-width unit label) so every slider row ends up the
   exact same length, regardless of whether that row has a %/° suffix. */
.opt-value-input{
  width:40px;flex-shrink:0;height:20px;box-sizing:border-box;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2);
  text-align:right;background:var(--surface3);border:1px solid var(--border);
  border-radius:4px;padding:2px 4px;
}
.opt-value-input:focus{outline:none;border-color:var(--accent);color:var(--text);}
.opt-value-input::-webkit-outer-spin-button,
.opt-value-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.opt-value-input{-moz-appearance:textfield;}
.opt-unit{width:12px;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2);}
input[type=range]{-webkit-appearance:none;appearance:none;background:var(--surface3);height:4px;border-radius:2px;flex:1;cursor:pointer;min-width:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;}
.opt-check{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--text2);}
.opt-check input{accent-color:var(--accent);cursor:pointer;}

/* Layers */
#layersList{display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1;min-height:0;}
.layer-item{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:5px;cursor:grab;border:1px solid var(--border);flex-shrink:0;margin-bottom:1px;}
.layer-item:hover{background:var(--surface3);border-color:var(--text3);}
.layer-item.active{background:var(--surface3);border-color:var(--accent);}
.layer-item.selected-multi{background:var(--surface3);border-color:var(--accent2);}
.layer-item.drag-over{border-color:var(--accent2);border-style:dashed;}
.layer-item.touch-dragging{opacity:.55;cursor:grabbing;pointer-events:none;outline:1px dashed var(--accent);outline-offset:-1px;}
.layer-item.layer-item-locked{cursor:pointer;}
.layer-thumb {
  width: 40px;
  height: 40px;
  border-radius: 0px;
  border: 1px solid var(--border);
  background-image: 
    linear-gradient(45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(-45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3a45 75%),
    linear-gradient(-45deg, transparent 75%, #3a3a45 75%);
  background-size: 10px 10px; 
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
  background-color: #4a4a55;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.layer-name{flex:1;font-size:12px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.layer-eye{background:none;border:none;color:var(--text3);cursor:pointer;font-size:12px;padding:2px;flex-shrink:0;}
.layer-eye:hover{color:var(--text);}
.layer-eye.hidden{opacity:0.4;}
/* Layer action buttons (add/delete/duplicate/effects/rasterize/merge): bigger,
   easier-to-hit desktop tap targets (mobile has its own sizing via media query) */
.layer-actions{display:flex;flex-wrap:nowrap;gap:3px;width:100%;}
.layer-actions [data-layer-tip]{
  background:none;border:none;color:var(--text3);cursor:pointer;
  flex:1;min-width:0;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:5px;transition:background .12s,color .12s;
}
.layer-actions [data-layer-tip] i{font-size:12px;}
.layer-actions [data-layer-tip]:hover{background:var(--surface3);color:var(--text);}
.layer-actions #lockLayerBtn.layer-locked-active{color:#7ec4ff;}
.layer-lock-icon{background:none;border:none;cursor:pointer;flex-shrink:0;font-size:12px;color:var(--text3);padding:2px;}
.layer-lock-icon.locked{color:#7ec4ff;}
.layer-fx-icon{background:none;border:none;cursor:pointer;flex-shrink:0;font-size:12px;color:var(--text3);padding:2px;opacity:0.35;}
.layer-fx-icon.fx-configured{opacity:1;color:var(--accent);}
.layer-fx-icon.fx-configured.fx-off{color:var(--text3);opacity:0.7;}
.layer-item.layer-item-locked{opacity:0.85;}
.layer-group-header{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:5px;cursor:pointer;border:1px solid var(--border);background:var(--surface2);margin-bottom:1px;}
.layer-group-header:hover{background:var(--surface3);}
.layer-group-header.drag-over{border-color:var(--accent2);border-style:dashed;}
.layer-group-header .layer-name{flex:1;font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.layer-group-children{padding-left:14px;border-left:1px dashed var(--border);margin:2px 0 2px 12px;display:flex;flex-direction:column;gap:3px;}
.layer-group-ungroup{background:none;border:none;color:var(--text3);cursor:pointer;font-size:11px;padding:2px 4px;flex-shrink:0;}
.layer-group-ungroup:hover{color:var(--text);}
/* Separator between the Layers title/action row and the layer list itself */
.layers-panel-sep{height:1px;background:var(--surface3);margin:9px 0 8px;width:100%!important;box-sizing:border-box!important;}
/* Frame N Layers title: mobile's current spacing (inline style, 8px top)
   is correct as-is — this only reduces the gap above it on desktop,
   where it was too large. */
@media (min-width: 901px){
  #frameLayersTitle{ margin-top:2px !important; }
}
.layer-fx-badge{font-size:9px;font-weight:700;color:var(--accent);background:rgba(91,138,240,0.18);border:1px solid var(--accent);border-radius:3px;padding:1px 4px;letter-spacing:.5px;flex-shrink:0;line-height:1.4;}
.layer-fx-badge.fx-off{color:var(--text3);background:rgba(90,90,110,0.12);border-color:var(--text3);opacity:0.55;text-decoration:line-through;}
.btn-icon-disabled{opacity:0.35;cursor:not-allowed!important;}
.effect-section{border:1px solid var(--border);border-radius:6px;margin-bottom:10px;overflow:hidden;}
.effect-header{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface2);cursor:pointer;}
.effect-header strong{flex:1;font-size:12px;}
.effect-toggle{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;flex-shrink:0;}
.effect-body{padding:10px;display:none;}
.effect-body.open{display:block;}
#layerOpacityRow{display:flex;align-items:center;gap:6px;}
#layerOpacityRow .opt-label{min-width:46px;}
#layerFillRow{display:flex;align-items:center;gap:6px;margin-top:8px;}
#layerFillRow .opt-label{min-width:46px;}
#layerOpacity{flex:1;min-width:0;}
#layerFill{flex:1;min-width:0;}

/* BOTTOM */
#bottombar{height:var(--bottom-h);background:var(--surface);border-top:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
#framesToolbar{display:flex;align-items:center;gap:5px;padding:5px 10px;border-bottom:1px solid var(--border);flex-shrink:0;}
.frames-btn{background:var(--surface3);border:1px solid var(--border);color:var(--text2);padding:3px 8px;border-radius:4px;cursor:pointer;font-size:12px;font-family:inherit;display:flex;align-items:center;gap:4px;}
.frames-btn:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none;}
.frames-btn:hover{background:var(--surface2);color:var(--text);}
.frames-btn.play-btn{background:var(--green);color:#000;border-color:transparent;}
.frames-btn.play-btn:hover{background:#3eba73;}
.fps-wrap{display:flex;align-items:center;gap:4px;}
.fps-label{font-size:12px;color:var(--text3);}
.fps-input{background:var(--surface3);border:1px solid var(--border);color:var(--text);padding:2px 6px;border-radius:4px;width:48px;font-size:12px;font-family:'JetBrains Mono',monospace;text-align:center;}
.fps-input:focus{outline:none;border-color:var(--accent);}
#framesList{display:flex;gap:6px;padding:6px 10px;overflow-x:auto;overflow-y:hidden;align-items:flex-start;flex:1;position:relative;}
.frame-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:grab;flex-shrink:0;position:relative;}
.frame-tag-bar{position:absolute;top:-4px;left:0;right:0;height:3px;border-radius:2px;pointer-events:none;}
.frame-tag-strip{position:absolute;height:14px;border-radius:0 0 2px 2px;pointer-events:none;display:flex;align-items:center;padding:0 6px;overflow:hidden;font-size:9px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;}
.frame-item:active{cursor:grabbing;}
.frame-thumb {
  width: 58px;
  height: 58px;
  border-radius: 4px;
  border: 2px solid var(--border);
  background-image: 
    linear-gradient(45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(-45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3a45 75%),
    linear-gradient(-45deg, transparent 75%, #3a3a45 75%);
  background-size: 12px 12px; 
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
  background-color: #4a4a55;
  image-rendering: pixelated;
  transition: .1s;
  pointer-events: none;
}
.frame-item.active .frame-thumb{border-color:#22c55e;}
.frame-item:hover .frame-thumb{border-color:var(--text2);}
.frame-item.drag-over .frame-thumb{border-color:var(--accent2);border-style:dashed;}
.frame-item.touch-dragging{opacity:.55;cursor:grabbing;pointer-events:none;}
.frame-item.touch-dragging .frame-thumb{border-color:var(--accent);border-style:dashed;}
.frame-label{font-size:10px;color:var(--text3);font-family:'JetBrains Mono',monospace;pointer-events:none;}
.frame-add{width:58px;height:58px;border-radius:4px;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:20px;flex-shrink:0;align-self:flex-start;}
.frame-add:hover{border-color:var(--text2);color:var(--text);background:var(--surface3);}

/* SCROLLBARS */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-corner{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;display:flex;align-items:center;justify-content:center;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;min-width:290px;}
.modal h3{margin-bottom:12px;font-size:15px;}
.modal-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.modal-label{font-size:13px;color:var(--text2);min-width:100px;}
.modal-input{background:var(--surface3);border:1px solid var(--border);color:var(--text);padding:7px 10px;border-radius:5px;font-size:14px;font-family:inherit;width:100%;}
.modal-input:focus{outline:none;border-color:var(--accent);}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}
.btn-primary{background:var(--accent);border:none;color:#fff;padding:8px 18px;border-radius:5px;cursor:pointer;font-family:inherit;font-size:13px;}
.btn-primary:hover{background:#4a78e0;}
.btn-secondary{background:var(--surface3);border:1px solid var(--border);color:var(--text2);padding:8px 18px;border-radius:5px;cursor:pointer;font-family:inherit;font-size:13px;}
.btn-secondary:hover{color:var(--text);}

/* MENU MODAL */
#menuModal .modal{min-width:360px;max-width:440px;padding:22px;}
#menuModal h3{margin-bottom:8px;}

/* DUPLICATE FRAME LAYERS MODAL */
.dfl-modal{min-width:600px;max-width:800px;width:90vw;}
.dfl-layer-list,.dfl-frame-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:300px;overflow-y:auto;margin-bottom:16px;
  padding:8px;border:1px solid var(--border);border-radius:8px;
}
.dfl-layer-row{display:flex;align-items:center;gap:12px;padding:5px 4px;font-size:14px;cursor:pointer;border-radius:6px;}
.dfl-layer-row:hover{background:var(--surface2);}
.dfl-frame-row{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:13px;cursor:pointer;}
.dfl-layer-thumb{
  width:52px;height:52px;flex-shrink:0;
  border-radius:4px;border:1px solid var(--border);
  background-image:
    linear-gradient(45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(-45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3a45 75%),
    linear-gradient(-45deg, transparent 75%, #3a3a45 75%);
  background-size:10px 10px;
  background-position:0 0, 0 5px, 5px -5px, -5px 0px;
  background-color:#4a4a55;
  image-rendering:pixelated;
}
@media (max-width: 900px), (max-width: 1180px) and (pointer: coarse){
  .dfl-modal{min-width:0;width:94vw;max-width:420px;padding:16px;}
  .dfl-layer-list,.dfl-frame-list{max-height:200px;gap:3px;padding:5px;}
  .dfl-layer-row{gap:8px;padding:3px 2px;font-size:13px;}
  .dfl-layer-thumb{width:34px;height:34px;}
  .dfl-frame-row{font-size:12.5px;}
}
.menu-modal-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text2);transition:.12s;}
.menu-modal-item:hover{background:var(--accent);color:#fff;}
.menu-modal-sep{height:1px;background:var(--surface3);margin:8px 0;}
.menu-modal-section-title{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);padding:2px 10px;}

/* ADVANCED TIMELINE EDITOR (ATE)
   Desktop: positioned within #canvasWrap (its nearest position:relative
   ancestor), filling its full width and height. The Animation Preview
   window is repositioned (not hidden) to sit flush in the canvas pane's
   top-left corner while the ATE is open — see positionPreviewForAte() in
   js/editor.js — so no space needs to be reserved for its usual spot.
   Two stacked sections:
     - Top: split half-half — left = selected cel's opacity/fill/
       visibility editor with a live thumbnail, right = reserved space
       the real, live canvas is repositioned into via fitCanvasForAte()
       (js/editor.js) — not a copy or a static preview, the actual
       drawable canvas.
     - Bottom: an actual Aseprite-style timeline grid spanning the full
       width — rows are layers, columns are frames, each cel a small
       clickable dot showing whether that layer has content on that
       frame, with the current frame's column highlighted.
   Uses edge-based sizing (top/left/right/bottom, not fixed px) so the
   whole editor naturally shrinks with the window on resize, no JS
   needed for that.
   Mobile: switches to the standard centered popup pattern used
   elsewhere, with a capped height, and stacks canvas above the cel
   editor instead of side-by-side (too narrow for that on a phone). */
#advancedTimelineModal{
  position:absolute;top:0;left:0;right:0;bottom:0;
  border-top:1px solid var(--border);
  z-index:300;
  display:none;
  flex-direction:column;
  /* The modal (and several children below) are pointer-events:none —
     they're empty containers whose layout box happens to overlap the
     canvas pane's region. Without this, clicks/touches meant for the
     real canvas underneath (repositioned there by fitCanvasForAte())
     get captured by these empty divs instead and drawing breaks
     entirely. Every actual piece of ATE UI re-enables pointer-events
     on itself individually below. */
  pointer-events:none;
}
#advancedTimelineModal.show{display:flex;}
#advancedTimelineHeader{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--surface);
  pointer-events:auto;
}
#advancedTimelineHeader h3{font-size:15px;margin:0;display:flex;align-items:center;}
#advancedTimelineHeader button{
  background:none;border:none;color:var(--text2);cursor:pointer;
  font-size:14px;padding:5px 10px;border-radius:4px;
}
#advancedTimelineHeader button:hover{background:var(--surface2);color:var(--text);}
#advancedTimelineBody{flex:1;display:flex;flex-direction:column;min-height:0;pointer-events:none;}
#advancedTimelineTop{flex:1;display:flex;min-height:0;pointer-events:none;}

/* Left pane: gets slightly less than half so the canvas side (the
   part you're actually drawing on) gets slightly more. Has its own
   background — the canvas pane deliberately has none, since the real
   canvas sits behind it and must show through, not be painted over. */
#advancedTimelineLeftPane{
  flex:0 0 42%;max-width:420px;min-width:220px;
  overflow-y:auto;padding:14px;
  border-right:1px solid var(--border);
  background:var(--surface);
  pointer-events:auto;
}
#advancedTimelineCanvasPane{
  flex:1;min-width:0;position:relative;
  pointer-events:none;
}
#atCelEditorEmpty{font-size:13px;color:var(--text2);line-height:1.5;}
#atCelThumb{
  width:96px;height:96px;display:block;margin:0 auto 10px;
  border:1px solid var(--border);border-radius:4px;image-rendering:pixelated;
  background-image:
    linear-gradient(45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(-45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3a45 75%),
    linear-gradient(-45deg, transparent 75%, #3a3a45 75%);
  background-size:10px 10px;
  background-position:0 0, 0 5px, 5px -5px, -5px 0px;
  background-color:#4a4a55;
}
.at-cel-title{text-align:center;font-size:12.5px;color:var(--text2);margin-bottom:12px;}
.at-opt-row{margin-bottom:18px;}
.at-visible-check{font-size:14px;}
.at-visible-check input[type="checkbox"]{width:18px;height:18px;}

/* Timeline grid strip — the actual Aseprite-style timeline. */
#advancedTimelineResizeHandle{
  flex-shrink:0;height:7px;cursor:row-resize;
  background:var(--border);
  position:relative;
  pointer-events:auto;
}
#advancedTimelineResizeHandle::before{
  content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:36px;height:3px;border-radius:2px;background:var(--text3);
}
#advancedTimelineResizeHandle:hover,#advancedTimelineResizeHandle.dragging{background:var(--accent);}
#advancedTimelineGridWrap{
  flex-shrink:0;height:204px;
  border-top:1px solid var(--border);
  background:var(--surface);
  pointer-events:auto;
}
#advancedTimelineGridScroll{height:100%;overflow:auto;position:relative;}
#advancedTimelineGrid{display:inline-grid;}

/* Minimized tab: sits centered, flush against canvasWrap's own bottom
   edge (not the ATE's own bottom, since minimizing frees that space
   up). Hidden by default — only .show makes it appear. */
#advancedTimelineTab{
  display:none;
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  z-index:300;
  background:var(--surface);border:1px solid var(--border);border-bottom:none;
  border-radius:8px 8px 0 0;
  padding:8px 16px;font-size:13px;color:var(--text);cursor:pointer;
  box-shadow:0 -2px 10px rgba(0,0,0,.3);
}
#advancedTimelineTab.show{display:flex;align-items:center;}

.at-header-cell{
  position:sticky;top:0;z-index:3;
  background:var(--surface2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--text2);
  padding:6px 4px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  min-width:36px;cursor:pointer;
}
.at-header-cell:hover{color:var(--text);}
.at-header-cell.current-frame{background:var(--accent);color:#fff;}
.at-corner-cell{position:sticky;top:0;left:0;z-index:4;background:var(--surface2);}
.at-layer-name-cell{
  position:sticky;left:0;z-index:2;
  background:var(--surface);
  display:flex;align-items:center;
  font-size:12px;padding:0 10px;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:110px;max-width:150px;
}
.at-cell{
  border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;min-width:36px;min-height:34px;position:relative;
}
.at-cell:hover{background:var(--surface2);}
.at-cell.current-frame-col{background:rgba(255,255,255,0.04);}
.at-cell.selected{outline:2px solid var(--accent);outline-offset:-2px;z-index:1;}
.at-cell-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);border:1px solid rgba(0,0,0,.3);}
.at-cell-dot.empty{background:transparent;border:1px dashed var(--border);}
.at-cell.hidden-layer .at-cell-dot{opacity:0.3;}

@media (max-width: 900px), (max-width: 1180px) and (pointer: coarse){
  /* No position:fixed override here anymore. The ATE stays position:
     absolute within #canvasWrap (inherited from the base rule), the
     same coordinate space used on desktop, so fitCanvasForAte()'s
     canvasWrap-relative math is correct here too. Mixing position:fixed
     (its own stacking context at the viewport root) with the real
     canvas's position:absolute (within #canvasWrap) was the root cause
     of both the canvas not fitting correctly and the z-order breaking —
     removing it fixes both at once, and gives the stacked sections
     below the full canvasWrap height to work with instead of a small
     centered popup.
     bottom is pulled up (rather than the base rule's bottom:0) to clear
     the fixed-position mobile navbar plus the project-name/last-autosave
     chips that float above it — 8px (their own gap above the navbar) +
     20px (their own measured height) + 8px (an equal gap above them). */
  #advancedTimelineModal{bottom:calc(var(--mobile-nav-h) + var(--ad-bar-h) + 36px);}
  #advancedTimelineTab{bottom:calc(var(--mobile-nav-h) + var(--ad-bar-h) + 36px);}
  #advancedTimelineTop{flex-direction:column;}
  #advancedTimelineResizeHandle{display:none;}
  /* Flex-grow ratios (not vh) on purpose: vh is relative to the full
     viewport, but this pane only ever gets whatever's left of
     #advancedTimelineTop after the header, grid strip, and bottom
     clearance are subtracted elsewhere — a much smaller amount on most
     phones. A fixed vh value was eating nearly all of that remaining
     space, leaving almost nothing for the left pane (the "editable
     stuff" — opacity/fill/visible) — a following pass then went too far
     the other way with a 2:3 split, leaving the canvas too small.
     Canvas gets 3 parts, left pane gets 2 — canvas is the bigger share
     now, editable controls still get meaningfully more room than the
     original all-vh layout did. Growth ratios split whatever space is
     actually there, so this holds up across different screen heights
     instead of being tuned to one. fitCanvasForAte() already re-fits
     the real canvas into whatever size this ends up producing, so
     changing this ratio doesn't break anything else. */
  #advancedTimelineCanvasPane{flex:7 1 0;min-height:110px;border-bottom:1px solid var(--border);}
  #advancedTimelineLeftPane{
    flex:4 1 0;max-width:none;min-width:0;
    border-right:none;
  }
  /* clamp() instead of a flat vh: on short screens this pulls back to
     140px rather than eating a fixed 26% of the whole viewport, which
     left barely any height for the canvas/left-pane area above it —
     on tall screens it still grows up to a reasonable 200px cap. */
  #advancedTimelineGridWrap{height:clamp(140px, 22vh, 200px);}
  .at-layer-name-cell{min-width:82px;max-width:100px;font-size:11px;}
  .at-cell{min-width:30px;min-height:30px;}
  .at-cell-dot{width:10px;height:10px;}
  /* Desktop keeps top-only rounding (flush against the bottom edge);
     on mobile the tab reads better fully rounded. */
  #advancedTimelineTab{border-radius:8px;}
}

/* DRAGGABLE POPUPS */
.popup{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0;z-index:250;box-shadow:none;min-width:170px;user-select:none;}
/* Tile View popup — deliberately its own class, not .popup: it must stay
   open when other popups show, and (on desktop) can be dragged freely in
   both directions like other popups, while on mobile it's constrained to
   vertical-only dragging within bounds.
   z-index sits above ordinary chrome (canvas, topbar z:100, mobile nav bar
   z:610, ad bar z:590-605 — none of those should ever cover it) but below
   modals (z:1000) and mobile utility popups (z:650), so it never blocks
   interaction with a modal's dark overlay, and gets correctly dimmed along
   with everything else when one is showing. No box-shadow, matching every
   other popup (Pixel Size, Fill, etc.), which are all shadow-free. */
.tile-view-popup{
  position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  min-width:220px;z-index:630;box-shadow:none;user-select:none;
}
#tileViewPreviewWrap{
  margin:8px auto 0;display:flex;align-items:center;justify-content:center;
  width:fit-content;overflow:hidden;
  background-image:linear-gradient(45deg,#3a3a45 25%,transparent 25%),linear-gradient(-45deg,#3a3a45 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#3a3a45 75%),linear-gradient(-45deg,transparent 75%,#3a3a45 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;background-color:#4a4a55;
}
#tileViewCanvas{image-rendering:pixelated;display:block;}
/* Autosave toast — slides down from under the project title (desktop) or
   the logo (mobile). Position is computed live in JS (positionAutosaveToast)
   since the project title's on-screen X position isn't fixed. */
/* Autosave toast — slides down from under the project title (desktop) or
   the logo (mobile). Position is computed live in JS (positionAutosaveToast)
   since the project title's on-screen X position isn't fixed.
   z-index is intentionally LOWER than #topbar's (100): while "hidden" the
   toast is translated up behind the topbar, whose opaque background masks
   it completely — that's what makes it look like it pops out from
   underneath the bar, rather than floating above it. */
#autosaveToast{
  position:fixed;background:var(--surface2);border:1px solid var(--border);border-top:none;
  border-radius:0 0 12px 12px;padding:16px 30px;font-size:16px;color:var(--text2);
  transform:translateY(-100%);transition:transform .25s ease;
  z-index:90;pointer-events:none;white-space:nowrap;
}
#autosaveToast.show{transform:translateY(0);}
#autosaveToast .autosave-check{color:var(--green);}
/* While any modal (Menu, New Canvas, Export, etc.) or the mobile drawer
   (Tools/Color/Layers/Frames/Options) is open, popups like Grid Settings
   must sit behind its darkened overlay and stop being draggable/clickable —
   regardless of whatever z-index the "bring to front" logic (popupZCounter)
   previously gave them via inline style. The !important here is required to
   win over that inline z-index. z-index:560 keeps popups above the desktop
   statusbar (z-index:50) AND the mobile canvas-size/tool-indicator chips
   (z-index:540, fixed to the topbar corners on mobile), while staying below
   the drawer backdrop (590) / modal overlay (1000) so it's still dimmed. */
body.modal-open-lock .popup{z-index:560 !important;pointer-events:none !important;}
/* Exception: the frame tag color picker is opened from within the Tags
   modal itself (a genuinely new use case this lock wasn't designed for —
   every other popup this lock applies to is meant to sit behind a modal
   that opened over it, not be actively used from inside one). Needs the
   #id for specificity to win over the rule above despite both using
   !important. */
body.modal-open-lock #colorPickerPopup.cp-modal-context{z-index:1100 !important;pointer-events:auto !important;}
.popup-header{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--border);cursor:grab;border-radius:8px 8px 0 0;background:var(--surface2);}
.popup-header:active{cursor:grabbing;}
.popup-title{font-size:12px;color:var(--text3);font-weight:500;}
.popup-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;}
.toggle-switch{position:relative;display:inline-block;width:32px;height:18px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
.toggle-switch-track{position:absolute;inset:0;background:var(--surface3);border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:.2s;}
.toggle-switch-track::before{content:'';position:absolute;width:12px;height:12px;left:2px;top:2px;background:var(--text2);border-radius:50%;transition:.2s;}
.toggle-switch input:checked+.toggle-switch-track{background:var(--accent);border-color:var(--accent);}
.toggle-switch input:checked+.toggle-switch-track::before{transform:translateX(14px);background:#fff;}
.toggle-switch input:disabled+.toggle-switch-track{opacity:.4;cursor:not-allowed;}
.popup-close:hover{color:var(--text);}
.popup-body{padding:10px;}
.notes-textarea{
  width:100%;height:220px;resize:none;overflow-y:auto;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:inherit;font-size:13px;padding:8px;
  box-sizing:border-box;
}

#colorPickerPopup{width:215px;display:none;z-index:900;}
#colorPickerPopup.show{display:flex;flex-direction:column;}

#previewWin{position:fixed;bottom:150px;right:228px;background:var(--surface);border:1px solid var(--border);border-radius:8px;z-index:200;display:none;flex-direction:column;overflow:hidden;}
#previewWin.show{display:flex;}
#previewCanvas{image-rendering:pixelated;display:block;width:128px;height:128px;}
#previewWin .popup-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;}

/* Preview resize handles — one plain hit-area at each corner, no dots */
.preview-resize-handle{position:absolute;width:16px;height:16px;z-index:10;}
#previewResizeHandleBR{bottom:0;right:0;cursor:nwse-resize;}
#previewResizeHandleTL{top:0;left:0;cursor:nwse-resize;}
#previewResizeHandleTR{top:0;right:0;cursor:nesw-resize;}
#previewResizeHandleBL{bottom:0;left:0;cursor:nesw-resize;}

/* Popup initial positions - customize these variables to reposition popups */
:root {
  /* Brush popup: appears at top-left of canvas area */
  --brush-popup-initial-top: auto;
  --brush-popup-initial-left: auto;
  /* Fill popup: appears inline with fill tool button */
  --fill-popup-initial-top: auto;
  --fill-popup-initial-left: auto;
  /* Grid settings popup: appears inline with grid toggle button */
  --grid-settings-popup-top: auto;
  --grid-settings-popup-left: auto;
}

#brushPopup{display:none;width:195px;top:var(--brush-popup-initial-top);left:var(--brush-popup-initial-left);}
#fillPopup{display:none;width:220px;top:var(--fill-popup-initial-top);left:var(--fill-popup-initial-left);}
#gridPopup{display:none;width:220px;}
#gridSettingsPopup{display:none;width:220px;top:var(--grid-settings-popup-top);left:var(--grid-settings-popup-left);}


/* CTX MENU */
#ctxMenu{position:fixed;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px;z-index:500;display:none;min-width:160px;}
.ctx-item{padding:7px 14px;border-radius:4px;cursor:pointer;font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px;}
.ctx-item:hover{background:var(--surface3);color:var(--text);}
.ctx-sep{height:1px;background:var(--border);margin:3px 0;}

/* STATUS BAR */
#statusbar{position:absolute;bottom:var(--bottom-h);left:var(--panel-w);right:var(--right-w);height:22px;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:12px;font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;pointer-events:none;z-index:50;overflow:hidden;white-space:nowrap;}
#zoomIndicator{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:var(--text2);padding:3px 8px;border-radius:4px;font-size:11px;font-family:'JetBrains Mono',monospace;pointer-events:none;z-index:50;}

/* CUSTOM CURSORS */
.cursor-pen{cursor:crosshair;}
.cursor-eraser{cursor:crosshair;}
.cursor-fill{cursor:crosshair;}
.cursor-pick{cursor:crosshair;}
.cursor-move{cursor:crosshair;}
.cursor-zoom-in{cursor:crosshair;}
.cursor-zoom-out{cursor:crosshair;}
.cursor-pan{cursor:crosshair;}
.cursor-crosshair{cursor:crosshair;}
.cursor-dither{cursor:crosshair;}
.cursor-default{cursor:default;}
.cursor-zoom-drag{cursor:crosshair;}

/* TABS */
.rpanel-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;}
.rpanel-tab{flex:1;padding:8px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:.15s;}
.rpanel-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.rpanel-tab:hover:not(.active){color:var(--text2);}
.rpanel-pane{display:none;flex-direction:column;flex:1;overflow:hidden;min-height:0;}
.rpanel-pane.active{display:flex;flex-direction:column;}

#sizeVal{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text2);min-width:20px;text-align:right;flex-shrink:0;}

#mergeConfirmModal .modal{min-width:250px;max-width:310px;}
#mergeConfirmModal p{font-size:13px;color:var(--text2);margin-bottom:6px;}
.layer-list-preview{font-size:12px;color:var(--text3);margin-bottom:8px;padding-left:10px;line-height:1.8;}

.gradient-row{display:flex;align-items:center;gap:6px;margin-top:6px;}
.gradient-swatch{width:20px;height:20px;border-radius:3px;border:1px solid var(--border);cursor:pointer;flex-shrink:0;}
.grid-color-swatch{width:28px;height:28px;border-radius:4px;border:1px solid var(--border);cursor:pointer;flex-shrink:0;}

/* THEMES */
:root.theme-kawaii{--bg:#faf6f0;--surface:#ffe8f0;--surface2:#ffd4e5;--surface3:#ffb3d9;--border:#ff99cc;--accent:#ff69b4;--accent2:#ff1493;--text:#8b4789;--text2:#b06ba8;--text3:#d499c4;--green:#ff69b4;--canvas-bg:#fff5fb;--mirror-active:#ff69b4;}
:root.theme-millennialgamer{--bg:#05081f;--surface:#0c1638;--surface2:#111f4a;--surface3:#182a5c;--border:#3a63ad;--accent:#3f78c9;--accent2:#7fa3e0;--text:#dbe6f7;--text2:#9fb6dd;--text3:#5f84bd;--green:#4fc2a0;--canvas-bg:#ffffff;--mirror-active:#3f78c9;}
:root.theme-nebula{--bg:#0f0620;--surface:#1a0d35;--surface2:#25156b;--surface3:#2d1b7e;--border:#b366ff;--accent:#00e5ff;--accent2:#ff1493;--text:#e6d5ff;--text2:#b399e0;--text3:#8866cc;--green:#00e5ff;--canvas-bg:#0a0410;--mirror-active:#ff1493;}

.cherry-blossom-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;display:none;}
.theme-kawaii .cherry-blossom-container{display:block;}
#canvasContainer{z-index:1;}
@keyframes petal-drift{0%{transform:translateY(-15vh) translateX(100px) rotate(0deg) skewX(0deg);opacity:0;}10%{opacity:0.8;}90%{opacity:0.8;}100%{transform:translateY(115vh) translateX(-300px) rotate(720deg) skewX(20deg);opacity:0;}}
.petal{position:absolute;background-color:#ffb7c5;border-radius:150% 0 150% 0;opacity:0.7;filter:drop-shadow(0 0 2px rgba(255,182,197,0.5));animation:petal-drift linear infinite;}

#shortcutsList{display:flex;flex-direction:column;}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:8px 4px;border-bottom:1px solid var(--surface3);gap:12px;}
.shortcut-row:last-child{border-bottom:none;}
.shortcut-label{font-size:13px;color:var(--text2);}
.shortcut-key-btn{display:flex;align-items:center;gap:3px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:5px 8px;cursor:pointer;min-width:88px;justify-content:center;transition:border-color .15s,background .15s;}
.shortcut-key-btn:hover{border-color:var(--accent);}
.shortcut-key-btn.recording{border-color:var(--accent);background:var(--surface3);animation:shortcut-pulse 1s ease-in-out infinite;}
.shortcut-key-btn.conflict{border-color:#ff4d4d;background:rgba(255,77,77,0.12);}
.shortcut-key-btn.conflict .kbd-key{border-color:#ff4d4d;color:#ff4d4d;}
@keyframes shortcut-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.kbd-key{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:3px 6px;line-height:1;min-width:14px;text-align:center;}
.kbd-plus{font-size:10px;color:var(--text3);}
.shortcut-conflict-msg{font-size:11px;color:#ff4d4d;margin-top:10px;min-height:14px;}
#colorSwapPopup{width:220px;}
#colorSwapSwatchRow{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.colorswap-swatch{width:36px;height:36px;border-radius:4px;border:1px solid var(--border);flex-shrink:0;}
#colorSwapPopup .modal-btns{display:flex;gap:8px;margin-top:12px;}
#citrus-theme-elements{display:none;pointer-events:none;position:absolute;inset:0;z-index:0;overflow:hidden;}
:root.theme-millennialgamer #citrus-theme-elements{display:block;background:linear-gradient(180deg,#020412 0%,#05081f 45%,#0c1638 100%);}
.ps2-pillar{position:absolute;bottom:-15%;display:flex;flex-direction:column-reverse;align-items:center;gap:5px;animation:ps2-rise linear infinite;}
.ps2-cube{width:44px;height:44px;background:linear-gradient(135deg,rgba(127,163,224,0.45),rgba(58,99,173,0.18));border:1px solid rgba(127,163,224,0.45);border-radius:4px;box-shadow:inset 0 0 12px rgba(219,230,247,0.22),0 0 14px rgba(63,120,201,0.2);}
.ps2-pillar.pillar1{left:6%;animation-duration:28s;}
.ps2-pillar.pillar2{left:17%;animation-duration:36s;animation-delay:-9s;}
.ps2-pillar.pillar3{left:28%;animation-duration:24s;animation-delay:-14s;}
.ps2-pillar.pillar4{left:40%;animation-duration:32s;animation-delay:-3s;}
.ps2-pillar.pillar5{left:60%;animation-duration:26s;animation-delay:-18s;}
.ps2-pillar.pillar6{left:72%;animation-duration:34s;animation-delay:-6s;}
.ps2-pillar.pillar7{left:84%;animation-duration:30s;animation-delay:-22s;}
.ps2-pillar.pillar8{left:94%;animation-duration:22s;animation-delay:-11s;}
@keyframes ps2-rise{0%{transform:translateY(0);opacity:0;}8%{opacity:.9;}92%{opacity:.9;}100%{transform:translateY(-130vh);opacity:0;}}

/* ── MILLENNIAL GAMER THEME: boxy, PS2-dashboard inspired chrome ─────────── */
.theme-millennialgamer .ps2-cube{border-radius:0 !important;}
.theme-millennialgamer .popup,.theme-millennialgamer .tag-color-picker,.theme-millennialgamer .modal,.theme-millennialgamer #ctxMenu,.theme-millennialgamer #previewWin,.theme-millennialgamer .tile-view-popup,.theme-millennialgamer #autosaveToast,.theme-millennialgamer .nav-menu-dropdown,.theme-millennialgamer .nav-lang-sheet,.theme-millennialgamer .lang-dropdown{
  border-radius:0 !important;border:2px solid var(--border) !important;
  box-shadow:0 0 0 1px rgba(127,163,224,.25),inset 0 0 16px rgba(63,120,201,.14) !important;
}
.theme-millennialgamer .popup-header,.theme-millennialgamer .tag-color-picker-header{
  border-radius:0 !important;background:linear-gradient(180deg,var(--surface3),var(--surface2)) !important;
  border-bottom:2px solid var(--border) !important;
}
.theme-millennialgamer .modal h3{border-bottom:2px solid var(--border) !important;padding-bottom:8px !important;}
.theme-millennialgamer .popup-close{border-radius:0 !important;border:1px solid var(--border) !important;background:var(--surface3) !important;}
.theme-millennialgamer .btn-primary{border-radius:0 !important;border:2px solid var(--accent2) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) !important;}
.theme-millennialgamer .btn-secondary{border-radius:0 !important;border:2px solid var(--border) !important;}
.theme-millennialgamer select,.theme-millennialgamer .modal-input,.theme-millennialgamer .opt-input,.theme-millennialgamer .fps-input{
  border-radius:0 !important;border:2px solid var(--border) !important;
}
.theme-millennialgamer .tool-btn,.theme-millennialgamer .topbtn,.theme-millennialgamer .frames-btn{border-radius:0 !important;}
.theme-millennialgamer .tool-btn.active,.theme-millennialgamer .topbtn.active-btn,.theme-millennialgamer .mobile-nav-btn.active{
  border-radius:0 !important;border:2px solid var(--accent2) !important;box-shadow:inset 0 0 10px rgba(127,163,224,.45) !important;
}
.theme-millennialgamer .colorswap-swatch,.theme-millennialgamer .shortcut-key-btn,.theme-millennialgamer .kbd-key,.theme-millennialgamer .layer-thumb{border-radius:0 !important;}
.theme-millennialgamer #topbar,.theme-millennialgamer #toolbar,.theme-millennialgamer #rightpanel,.theme-millennialgamer #bottombar{
  border-color:var(--border) !important;border-width:2px !important;
}
/* Nothing rounded anywhere on this theme — catches every element with a
   border-radius (layer items, palette/color swatches, slider thumbs, menu
   items, etc), not just the pieces with a dedicated override above. */
.theme-millennialgamer * { border-radius: 0 !important; }
:root.theme-millennialgamer{--link-on-color:#bcd4f5;--link-on-bg:#1c3a78;}

.star-container{position:absolute;inset:0;pointer-events:none;display:none;z-index:0;overflow:hidden;}
:root.theme-nebula .star-container{display:block;}
.star{position:absolute;background:white;border-radius:50%;opacity:0.8;animation:twinkle var(--duration) ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:0.3;transform:scale(0.8);}50%{opacity:1;transform:scale(1.2);}}
.shooting-star{position:absolute;top:0;left:60%;width:100px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);opacity:0;pointer-events:none;filter:drop-shadow(0 0 4px white);}
:root.theme-nebula .shooting-star{animation:shoot 6s linear infinite;}
:root.theme-nebula .shooting-star:nth-child(2){animation-delay:3s;top:30%;left:90%;width:150px;}
@keyframes shoot{0%{transform:rotate(-45deg) translateX(0);opacity:0;}1%{opacity:1;}15%{transform:rotate(-45deg) translateX(-1200px);opacity:0;}100%{transform:rotate(-45deg) translateX(-1200px);opacity:0;}}

/* ── RAINY DAY THEME ─────────────────────────────────────────────────────── */
:root.theme-rainy {--bg:#1a2233;--surface:#1e2840;--surface2:#253050;--surface3:#2d3860;--border:#6b7280;--accent:#5c8fd6;--accent2:#7ab0f0;--text:#c8d8f0;--text2:#7898c0;--text3:#4a607c;--green:#3aaed0;--canvas-bg:#121828;--mirror-active:#3aaed0;}
.rainy-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;display:none;}
.theme-rainy .rainy-container{display:block;}
.rain-cloud{position:absolute;background:rgba(50,70,110,0.45);border-radius:50%;animation:cloud-drift linear infinite;filter:blur(8px);}
@keyframes cloud-drift{0%{transform:translateX(0px);}100%{transform:translateX(-150px);}}
.rain-drop{position:absolute;width:1px;background:linear-gradient(to bottom,transparent,rgba(130,180,255,0.55));animation:rain-fall linear infinite;border-radius:0 0 2px 2px;}
@keyframes rain-fall{0%{transform:translateY(-8vh) translateX(0px);opacity:0;}8%{opacity:0.85;}92%{opacity:0.7;}100%{transform:translateY(108vh) translateX(-18px);opacity:0;}}
/* Subtle random lightning flash, sitting behind the rain drops (earlier in
   the DOM / lower stacking order than .rainy-container) — a brief, soft
   double-pulse of light rather than a hard white flash. */
.rainy-lightning{position:absolute;inset:0;pointer-events:none;z-index:0;display:none;background:#dce6ff;opacity:0;}
.theme-rainy .rainy-lightning{display:block;}
.rainy-lightning.flash{animation:lightning-flash 0.4s ease-out;}
@keyframes lightning-flash{0%{opacity:0;}8%{opacity:.22;}20%{opacity:.05;}32%{opacity:.16;}55%{opacity:0;}100%{opacity:0;}}

/* ── PARADOX THEME (a UI from a billion years from now — white & gold) ──── */
:root.theme-paradox {--bg:#f7f3e8;--surface:#ffffff;--surface2:#f4ecd6;--surface3:#e8dcb3;--border:#b8912f;--accent:#c9a227;--accent2:#8a6a14;--text:#241d0c;--text2:#6b5a24;--text3:#a4915a;--green:#b8912f;--canvas-bg:#ffffff;--mirror-active:#c9a227;}
.paradox-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;display:none;}
.theme-paradox .paradox-container{display:block;}
.paradox-shard{position:absolute;width:8px;height:8px;background:linear-gradient(135deg,#fff8e0,#c9a227);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);animation:paradox-drift linear infinite;opacity:0.7;filter:drop-shadow(0 0 4px rgba(201,162,39,0.55));}
.paradox-ring{position:absolute;top:50%;left:50%;border:1px solid rgba(201,162,39,0.45);border-radius:50%;animation:paradox-pulse ease-out infinite;}
@keyframes paradox-drift{0%{transform:translateY(-10vh) translateX(50px) rotate(0deg) scale(0.6);opacity:0;}10%{opacity:0.75;}90%{opacity:0.55;}100%{transform:translateY(110vh) translateX(-70px) rotate(360deg) scale(1);opacity:0;}}
@keyframes paradox-pulse{0%{transform:translate(-50%,-50%) scale(0.15);opacity:0.55;}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0;}}
.theme-paradox,.theme-paradox input,.theme-paradox select,.theme-paradox button,.theme-paradox .modal,.theme-paradox .popup,.theme-paradox .tag-color-picker{font-family:'Space Grotesk',sans-serif;}
.theme-paradox .modal{position:relative;}
.theme-paradox .popup,.theme-paradox .tag-color-picker,.theme-paradox .modal,.theme-paradox #ctxMenu,.theme-paradox #previewWin,.theme-paradox .tile-view-popup,.theme-paradox #autosaveToast{background:transparent !important;border:none !important;box-shadow:none !important;filter:drop-shadow(0 2px 10px rgba(184,145,47,.4));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);border-radius:0 !important;}
.theme-paradox .popup::before,.theme-paradox .tag-color-picker::before,.theme-paradox .modal::before,.theme-paradox #ctxMenu::before,.theme-paradox #previewWin::before{content:'';position:absolute;inset:0;background:var(--border);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);z-index:-2;}
.theme-paradox .popup::after,.theme-paradox .tag-color-picker::after,.theme-paradox .modal::after,.theme-paradox #ctxMenu::after,.theme-paradox #previewWin::after{content:'';position:absolute;inset:1px;background:var(--surface);clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);z-index:-1;}
.theme-paradox .popup-header,.theme-paradox .tag-color-picker-header,.theme-paradox .modal h3{background:linear-gradient(90deg,var(--accent2),var(--accent)) !important;color:#fff9e8 !important;font-weight:700;letter-spacing:.6px;border-radius:0 !important;}
.theme-paradox .popup-title{color:#fff9e8 !important;letter-spacing:.6px;text-transform:uppercase;font-size:11px;}
.theme-paradox .popup-close{background:transparent !important;border:1px solid #fff9e8 !important;color:#fff9e8 !important;border-radius:0 !important;}
.theme-paradox .btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;color:#fff9e8 !important;border:1px solid var(--accent2) !important;border-radius:0 !important;letter-spacing:.4px;}
.theme-paradox .btn-secondary{background:var(--surface) !important;color:var(--text2) !important;border:1px solid var(--border) !important;border-radius:0 !important;}
.theme-paradox .tool-btn.active,.theme-paradox .topbtn.active-btn,.theme-paradox .mobile-nav-btn.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;color:#fff9e8 !important;box-shadow:0 0 10px rgba(201,162,39,.5) !important;
}
.theme-paradox #topbar,.theme-paradox #toolbar,.theme-paradox #rightpanel,.theme-paradox #bottombar{border-color:var(--border) !important;}
.theme-paradox .logo,.theme-paradox .logo .logo-text{color:var(--accent2) !important;}
.theme-paradox #zoomIndicator{color:#fff !important;}

/* ── PARADOX FUTURE THEME (far-future HUD — cold, minimal, glowing) ──── */
:root.theme-paradoxfuture{--bg:#05070a;--surface:#0a0e14;--surface2:#10161f;--surface3:#1a222e;--border:#3d5a73;--accent:#5ef2ff;--accent2:#a78bfa;--text:#e8f4ff;--text2:#7d95ab;--text3:#445566;--green:#6effc7;--canvas-bg:#05070a;--mirror-active:#5ef2ff;}
.theme-paradoxfuture .modal,.theme-paradoxfuture .popup{border:1px solid var(--border);box-shadow:0 0 24px rgba(94,242,255,.08);}
.theme-paradoxfuture .modal h3,.theme-paradoxfuture .popup-title{font-family:'JetBrains Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--accent);text-shadow:0 0 8px rgba(94,242,255,.6);}
/* --accent here is an unusually light ice-cyan (fine as text/border color
   against the dark background, but a contrast failure for anything using
   it as a background with the usual white text). Overrides that text to
   the theme's own dark --bg value wherever --accent is used as a fill. */
.theme-paradoxfuture .tool-btn.active,
.theme-paradoxfuture .btn-primary,
.theme-paradoxfuture .menu-modal-item:hover,
.theme-paradoxfuture .topbtn.active-btn,
.theme-paradoxfuture .mobile-nav-btn.active,
.theme-paradoxfuture .tileset-mode-btn.active{color:var(--bg);}

/* ── XPERIENCE THEME (Windows XP "Luna" inspired) ───────────────────────── */
:root.theme-xperience{--bg:#ece9d8;--surface:#f2f0e4;--surface2:#d8d3b8;--surface3:#b8b49c;--border:#0a246a;--accent:#245edb;--accent2:#ff9d00;--text:#000000;--text2:#0a246a;--text3:#5a5a5a;--green:#3c8c3c;--canvas-bg:#ffffff;--mirror-active:#245edb;}
.theme-xperience .popup,.theme-xperience .tag-color-picker,.theme-xperience .modal,.theme-xperience #ctxMenu,.theme-xperience #previewWin,.theme-xperience .tile-view-popup,.theme-xperience #autosaveToast,.theme-xperience .nav-menu-dropdown,.theme-xperience .nav-lang-sheet,.theme-xperience .lang-dropdown{border:1px solid var(--border) !important;border-radius:8px 8px 3px 3px !important;overflow:hidden;box-shadow:2px 2px 10px rgba(0,0,0,.4) !important;}
.theme-xperience .popup-header,.theme-xperience .tag-color-picker-header,.theme-xperience .modal h3{background:linear-gradient(180deg,#3a93ec 0%,#245edb 45%,#163f8e 100%) !important;color:#fff !important;font-weight:bold;border-radius:6px 6px 0 0 !important;padding:5px 8px !important;font-family:'Tahoma','Segoe UI',sans-serif;text-shadow:1px 1px 1px rgba(0,0,0,.45);}
.theme-xperience .popup-title{color:#fff !important;font-family:'Tahoma','Segoe UI',sans-serif;}
.theme-xperience .popup-close{background:linear-gradient(180deg,#ff7b6e,#d33326) !important;border:1px solid #7a0000 !important;border-radius:3px !important;color:#fff !important;font-weight:bold;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.theme-xperience .btn-primary,.theme-xperience .topbtn.active-btn,.theme-xperience .tool-btn.active,.theme-xperience .mobile-nav-btn.active{background:linear-gradient(180deg,#5aa7fc,#245edb) !important;color:#fff !important;border:1px solid #0a246a !important;border-radius:4px !important;text-shadow:1px 1px 1px rgba(0,0,0,.3);}
.theme-xperience .btn-secondary,.theme-xperience button:not(.popup-close):not(.tool-btn):not(.frames-btn){background:linear-gradient(180deg,#fdfdfd,#e2e0d2) !important;border:1px solid #8ba0c9 !important;border-radius:4px !important;color:#000 !important;}
.theme-xperience select,.theme-xperience .modal-input,.theme-xperience .opt-input,.theme-xperience .fps-input{border:1px solid #7f9db9 !important;border-radius:3px !important;background:#fff !important;color:#000 !important;}
.theme-xperience #topbar,.theme-xperience #toolbar,.theme-xperience #rightpanel,.theme-xperience #bottombar{border-color:var(--surface3) !important;}
.theme-xperience .logo,.theme-xperience .logo .logo-text{color:var(--accent) !important;}
/* Xperience: mobile bottom-nav / Tools button, kept solid while its drawer
   is open. The blanket button:not(...) rule above (higher specificity,
   !important) would otherwise override it, same issue as Windows95. */
:root.theme-xperience #mobileNavbar .mobile-nav-btn.active,
:root.theme-xperience #mobileToolsBtn.active-btn {
  background: linear-gradient(180deg,#5aa7fc,#245edb) !important;
  color: #fff !important;
  border: 1px solid #0a246a !important;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

/* ── FUTURISTIC THEME (WipEout/Feisar inspired vector HUD) ──────────────── */
:root.theme-futuristic{--bg:#07101c;--surface:#0a1220;--surface2:#0f1a30;--surface3:#152340;--border:#3fa9f5;--accent:#3fa9f5;--accent2:#ffe135;--text:#ffffff;--text2:#bfe6ff;--text3:#5a86b0;--green:#3fa9f5;--canvas-bg:#050c15;--mirror-active:#ffe135;}
.theme-futuristic .modal{position:relative;}
.theme-futuristic .popup,.theme-futuristic .tag-color-picker,.theme-futuristic .modal,.theme-futuristic #ctxMenu,.theme-futuristic #previewWin,.theme-futuristic .tile-view-popup,.theme-futuristic #autosaveToast{background:transparent !important;border:none !important;box-shadow:none !important;filter:drop-shadow(0 0 8px rgba(63,169,245,.55));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);border-radius:0 !important;}
.theme-futuristic .popup::before,.theme-futuristic .tag-color-picker::before,.theme-futuristic .modal::before,.theme-futuristic #ctxMenu::before,.theme-futuristic #previewWin::before{content:'';position:absolute;inset:0;background:var(--accent);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);z-index:-2;}
.theme-futuristic .popup::after,.theme-futuristic .tag-color-picker::after,.theme-futuristic .modal::after,.theme-futuristic #ctxMenu::after,.theme-futuristic #previewWin::after{content:'';position:absolute;inset:1px;background:linear-gradient(160deg,rgba(10,20,35,.96),rgba(5,10,20,.98));clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);z-index:-1;}
.theme-futuristic .popup-header,.theme-futuristic .tag-color-picker-header,.theme-futuristic .modal h3{background:linear-gradient(90deg,var(--accent2),var(--accent)) !important;color:#08131f !important;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:6px 10px !important;border-radius:0 !important;}
.theme-futuristic .popup-title{color:#08131f !important;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
.theme-futuristic .popup-close{background:var(--accent2) !important;color:#08131f !important;font-weight:800;border:1px solid var(--accent2) !important;border-radius:0 !important;}
.theme-futuristic .btn-primary{background:var(--accent2) !important;color:#08131f !important;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--accent2) !important;border-radius:0 !important;}
.theme-futuristic .btn-secondary{background:transparent !important;color:var(--accent) !important;border:1px solid var(--accent) !important;letter-spacing:.5px;text-transform:uppercase;border-radius:0 !important;}
.theme-futuristic .tool-btn.active,.theme-futuristic .topbtn.active-btn,.theme-futuristic .mobile-nav-btn.active{background:var(--accent2) !important;color:#08131f !important;}
.theme-futuristic #topbar,.theme-futuristic #toolbar,.theme-futuristic #rightpanel,.theme-futuristic #bottombar{border-color:var(--accent) !important;box-shadow:inset 0 0 20px rgba(63,169,245,.06);}
.theme-futuristic .logo,.theme-futuristic .logo .logo-text{color:var(--text2) !important;text-shadow:none;}
.theme-futuristic select,.theme-futuristic .modal-input,.theme-futuristic .opt-input,.theme-futuristic .fps-input{background:rgba(63,169,245,.08) !important;border:1px solid var(--accent) !important;color:var(--text) !important;border-radius:0 !important;}
.theme-futuristic option{background:#0a1220 !important;color:var(--text) !important;}

/* Windows 95 Theme */
:root.theme-windows95 {--bg: #008080;--surface: #c0c0c0;--surface2: #dfdfdf;--surface3: #808080;--border: #000000;--accent: #000080;--accent2: #ff00ff;--text: #000000;--text2: #000080;--text3: #404040;--green: #00ff00;--canvas-bg: #008081;--mirror-active: #000080;}
.theme-windows95 .popup,.theme-windows95 .tag-color-picker, .theme-windows95 .topbtn, .theme-windows95 .tool-btn {border: 2px solid;border-color: #ffffff #808080 #808080 #ffffff; border-radius: 0;}
.theme-windows95 .tool-btn.active {background: #c0c0c0;border-color: #808080 #ffffff #ffffff #808080;color: #000;}
:root.theme-windows95 .popup-close {background: #c0c0c0 !important;color: #000000 !important;font-family: 'Arial', sans-serif !important;font-weight: bold !important;font-size: 11px !important;width: 16px !important;height: 14px !important;display: flex !important;align-items: center !important;justify-content: center !important;padding: 0 !important;margin-left: 4px;border: 1px solid !important;border-color: #ffffff #808080 #808080 #ffffff !important;border-radius: 0 !important;cursor: pointer;}
:root.theme-windows95 .popup-close:active {border-color: #808080 #ffffff #ffffff #808080 !important;padding: 1px 0 0 1px !important;}
:root.theme-windows95 .popup-header, :root.theme-windows95 .tag-color-picker-header {background: #000080 !important;padding: 2px 4px !important;}
:root.theme-windows95 .popup-title {color: #ffffff !important;font-family: sans-serif;font-weight: bold;font-size: 11px;}
:root.theme-windows95 .popup,:root.theme-windows95 .tag-color-picker, :root.theme-windows95 #previewWin, :root.theme-windows95 #ctxMenu, :root.theme-windows95 .modal, :root.theme-windows95 .tile-view-popup, :root.theme-windows95 #autosaveToast, :root.theme-windows95 .nav-menu-dropdown, :root.theme-windows95 .nav-lang-sheet, :root.theme-windows95 .lang-dropdown {border: 2px solid;border-color: #ffffff #808080 #808080 #ffffff !important;border-radius: 0 !important;background: var(--surface) !important;box-shadow: none !important;}
:root.theme-windows95 .popup-header, :root.theme-windows95 .tag-color-picker-header, :root.theme-windows95 .modal h3 {border-radius: 0 !important;background: #000080 !important; color: #ffffff !important;padding: 4px 6px !important;}
:root.theme-windows95 .popup-title {color: #ffffff !important;font-weight: bold;}
/* Win95: timeline buttons (play, duplicate, delete, preview) get same raised box effect as tool buttons */
:root.theme-windows95 .frames-btn {
  border: 2px solid !important;
  border-color: #ffffff #808080 #808080 #ffffff !important;
  border-radius: 0 !important;
  background: #c0c0c0 !important;
  color: #000000 !important;
}
:root.theme-windows95 .frames-btn:hover {
  background: #d0d0d0 !important;
}
:root.theme-windows95 .frames-btn:active {
  border-color: #808080 #ffffff #ffffff #808080 !important;
  padding-top: 4px !important;
  padding-left: 9px !important;
}
:root.theme-windows95 .frames-btn.play-btn {
  background: #c0c0c0 !important;
  color: #000080 !important;
  border-color: #ffffff #808080 #808080 #ffffff !important;
}
:root.theme-windows95 .btn-primary,
:root.theme-windows95 .btn-secondary,
:root.theme-windows95 .menu-modal-item,
:root.theme-windows95 .topbtn,
:root.theme-windows95 button:not(.popup-close):not(.tool-btn):not(.frames-btn) {
  border: 2px solid !important;
  border-color: #ffffff #808080 #808080 #ffffff !important;
  border-radius: 0 !important;
  background: #c0c0c0 !important;
  color: #000000 !important;
  box-shadow: none !important;
}
:root.theme-windows95 .btn-primary:active,
:root.theme-windows95 .btn-secondary:active,
:root.theme-windows95 .menu-modal-item:active,
:root.theme-windows95 .topbtn:active,
:root.theme-windows95 button:not(.popup-close):not(.tool-btn):not(.frames-btn):active {
  border-color: #808080 #ffffff #ffffff #808080 !important;
  background: #000080 !important;
  color: #ffffff !important;
}
:root.theme-windows95 .menu-modal-item:hover {
  background: #d0d0d0 !important;
  color: #000000 !important;
}
/* Win95: mobile bottom-nav / Tools drawer button, kept solid while its
   drawer is open. The blanket button/topbtn rules above are very high
   specificity (button:not(...) chains), so ID-scoped selectors are used
   here to reliably win over them. */
:root.theme-windows95 #mobileNavbar .mobile-nav-btn.active,
:root.theme-windows95 #mobileToolsBtn.active-btn {
  background: #000080 !important;
  color: #ffffff !important;
  border-color: #808080 #ffffff #ffffff #808080 !important;
}

/* Win95: FPS input box effect */

:root.theme-windows95 .fps-input {
  border: 2px solid !important;
  border-color: #808080 #ffffff #ffffff #808080 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #000000 !important;
}
/* Win95: Constraint link buttons - allow JS inline styles to control state */
:root.theme-windows95 #newDimLinkBtn,
:root.theme-windows95 #resizeDimLinkBtn {
  border-radius: 50% !important;
}
/* Win95: All dropdowns and white input fields */
:root.theme-windows95 select, 
:root.theme-windows95 .modal-input, 
:root.theme-windows95 .opt-input,
:root.theme-windows95 .fps-input {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid !important;
  /* Sunken bevel: Dark shadow top/left, White highlight bottom/right */
  border-color: #808080 #ffffff #ffffff #808080 !important;
  border-radius: 0 !important;
  padding: 2px 4px !important;
  font-family: 'Arial', sans-serif !important;
  height: auto !important;
  appearance: auto; /* Ensures the OS-style dropdown arrow button is visible */
}



/* ── LOADING SCREEN ─────────────────────────────────────────────── */
#loadingScreen {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg);
  font-family: 'Press Start 2P', monospace;
  transition: opacity 0.4s ease;
}
#loadingScreen.fade-out { opacity: 0; pointer-events: none; }

/* Default / themed loading bar */
.loading-title {
  font-size: 22px; color: var(--accent);
  letter-spacing: normal; font-weight: normal; margin-bottom: 32px;
  animation: loading-pulse 1.4s ease-in-out infinite;
}
@keyframes loading-pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.5; }
}
.loading-subtitle {
  font-size: 9px; color: var(--text2);
  margin-bottom: 28px; letter-spacing: 1px;
}
.loading-bar-wrap {
  width: 280px; height: 18px;
  border: 2px solid var(--border);
  border-radius: 3px; overflow: hidden;
  background: var(--surface2);
}
.loading-bar-fill {
  height: 100%; width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.18s linear;
}
.loading-pct {
  margin-top: 10px; font-size: 9px;
  color: var(--text3); letter-spacing: 1px;
}

/* ── WINDOWS 95 OVERRIDE ────────────────────────────────────────── */
:root.theme-windows95 #loadingScreen {
  background: #008080;
  font-family: 'Arial', sans-serif;
}
:root.theme-windows95 .loading-title {
  font-family: 'Arial', sans-serif;
  font-size: 16px; font-weight: bold;
  color: #ffffff; letter-spacing: 1px;
  text-shadow: none; animation: none;
}
:root.theme-windows95 .loading-subtitle {
  font-family: 'Arial', sans-serif;
  font-size: 12px; color: #c0c0c0; letter-spacing: 0;
}

/* Win95 outer window frame */
:root.theme-windows95 #loadingScreen .win95-window {
  display: flex; flex-direction: column;
  background: #c0c0c0; width: 320px;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 2px 2px 0 #000000;
}
:root.theme-windows95 #loadingScreen .win95-titlebar {
  background: #000080; color: #ffffff;
  font-family: 'Arial', sans-serif; font-size: 11px; font-weight: bold;
  padding: 3px 6px; display: flex;
  align-items: center; gap: 6px; user-select: none;
}
:root.theme-windows95 #loadingScreen .win95-titlebar-icon {
  width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' fill='%23ff0000'/%3E%3Crect x='9' y='1' width='6' height='6' fill='%2300ff00'/%3E%3Crect x='1' y='9' width='6' height='6' fill='%230000ff'/%3E%3Crect x='9' y='9' width='6' height='6' fill='%23ffff00'/%3E%3C/svg%3E") no-repeat center/contain;
}
:root.theme-windows95 #loadingScreen .win95-body {
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
:root.theme-windows95 #loadingScreen .win95-label {
  font-family: 'Arial', sans-serif; font-size: 12px; color: #000000;
}

/* Classic Win95 solid progress bar */
:root.theme-windows95 .loading-bar-wrap {
  width: 100%; height: 20px;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  position: relative; overflow: hidden;
}
.win95-bar-fill {
  display: none;
}
:root.theme-windows95 .win95-bar-fill {
  display: block;
  height: 100%; width: 0%;
  background: #000080;
  border-radius: 0;
  transition: width 0.18s linear;
}
/* Hide block renderer remnant */
:root.theme-windows95 #win95Blocks { display: none; }
:root.theme-windows95 .loading-pct { color: #000000; font-family: 'Arial', sans-serif; font-size: 11px; }

/* Hide default wrapper on Win95, show win95-window instead */
:root.theme-windows95 .loading-default-wrap { display: none !important; }
:root.theme-windows95 .win95-window { display: flex !important; }
.win95-window { display: none; }
/* Nothing rounded anywhere on this theme — catches every element with a
   border-radius (layer items, palette/color swatches, slider thumbs, menu
   items, etc), not just the pieces with a dedicated override above. The
   two link/chain buttons keep their circular shape since their ID-scoped
   !important rule outranks this universal selector. */
:root.theme-windows95 * { border-radius: 0 !important; }

/* ── Y2K AESTHETIC THEME (Aqua chrome — silver, ice-blue, glassy reflections) ── */
:root.theme-y2k{--bg:#b0cbdb;--surface:#f4f9fc;--surface2:#ffffff;--surface3:#93b6cc;--border:#5e87a3;--accent:#0098e0;--accent2:#00c2e8;--text:#0f1e2b;--text2:#35597a;--text3:#6f93ac;--green:#14b89a;--canvas-bg:#ffffff;--mirror-active:#0098e0;}
.y2k-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;display:none;
  background:repeating-linear-gradient(180deg,rgba(94,135,163,.08) 0px,rgba(94,135,163,.08) 1px,transparent 1px,transparent 3px);}
.theme-y2k .y2k-container{display:block;}
:root.theme-y2k{font-family:'Orbitron',sans-serif;}
.theme-y2k,.theme-y2k input,.theme-y2k select,.theme-y2k button,.theme-y2k textarea,.theme-y2k label,.theme-y2k span,.theme-y2k div,.theme-y2k .modal h3,.theme-y2k .popup-title{font-family:'Orbitron',sans-serif !important;}
.theme-y2k .modal,.theme-y2k .popup,.theme-y2k .tag-color-picker,.theme-y2k #ctxMenu,.theme-y2k #previewWin,.theme-y2k .tile-view-popup,.theme-y2k #autosaveToast,.theme-y2k .nav-menu-dropdown,.theme-y2k .nav-lang-sheet,.theme-y2k .lang-dropdown{
  background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.8) 50%,transparent 58%),linear-gradient(180deg,rgba(255,255,255,.65) 0px,rgba(255,255,255,0) 80px),linear-gradient(145deg,var(--surface3),var(--surface) 65%) !important;
  background-size:300% 300%,100% 100%,100% 100%;
  background-position:-120% 0,0 0,0 0;
  background-repeat:no-repeat !important;
  animation:y2k-shimmer-sweep 7s ease-in-out infinite;
  border:1px solid var(--border) !important;
  border-radius:20px !important;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 8px 24px rgba(15,30,43,.3),0 0 18px rgba(0,152,224,.2) !important;overflow-x:hidden;
}
/* Default hover border (var(--text2)) is too close in tone to the normal
   border color on this theme's light blue palette, making the hover state
   barely visible — white gives a clear, unmistakable highlight instead. */
.theme-y2k .frame-item:hover .frame-thumb{border-color:#ffffff;}
.theme-y2k .popup-header,.theme-y2k .tag-color-picker-header,.theme-y2k .modal h3,.theme-y2k .tween-modal-header{
  background:linear-gradient(180deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.08) 60%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#ffffff,#93b6cc) !important;
  color:#005f9e !important;
  text-shadow:0 1px 0 rgba(255,255,255,.7);letter-spacing:1px;text-transform:uppercase;font-size:11px;font-weight:700;
  border-radius:0 !important;border-bottom:1px solid var(--border) !important;
}
.theme-y2k .popup-title{color:#005f9e !important;text-shadow:0 1px 0 rgba(255,255,255,.7);}
.theme-y2k .popup-close{
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.1) 40%,rgba(255,255,255,0) 55%),linear-gradient(180deg,#ffffff,#93b6cc) !important;
  border:1px solid var(--border) !important;color:var(--text2) !important;
  border-radius:50% !important;
}
.theme-y2k .popup-close:hover{color:var(--accent) !important;box-shadow:0 0 10px rgba(0,152,224,.5) !important;}
.theme-y2k .btn-primary{
  background:linear-gradient(180deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.15) 40%,rgba(255,255,255,0) 55%),linear-gradient(180deg,#7fe0ff,var(--accent)) !important;
  color:#ffffff !important;font-weight:700;text-shadow:0 1px 2px rgba(0,60,100,.5);
  border:1px solid var(--accent) !important;border-radius:999px !important;box-shadow:0 0 16px rgba(0,152,224,.55),inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.theme-y2k .btn-secondary{
  background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.1) 40%,rgba(255,255,255,0) 55%),linear-gradient(180deg,#ffffff,#93b6cc) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;border-radius:999px !important;
}
.theme-y2k select,.theme-y2k .modal-input,.theme-y2k .opt-input,.theme-y2k .fps-input{
  background:linear-gradient(180deg,#ffffff,#e4f0f7) !important;border:1px solid var(--border) !important;border-radius:10px !important;color:var(--text) !important;
  box-shadow:inset 0 1px 4px rgba(94,135,163,.4) !important;
}
.theme-y2k select:focus,.theme-y2k .modal-input:focus,.theme-y2k .opt-input:focus,.theme-y2k .fps-input:focus{
  border-color:var(--accent) !important;box-shadow:inset 0 1px 4px rgba(94,135,163,.4),0 0 8px rgba(0,152,224,.4) !important;
}
.theme-y2k .tool-btn{background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.1) 40%,rgba(255,255,255,0) 55%),linear-gradient(180deg,#ffffff,#93b6cc) !important;border:1px solid var(--border) !important;border-radius:12px !important;}
.theme-y2k .tool-btn.active,.theme-y2k .topbtn.active-btn,.theme-y2k .mobile-nav-btn.active,.theme-y2k .tileset-mode-btn.active{
  background:linear-gradient(180deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.15) 40%,rgba(255,255,255,0) 55%),linear-gradient(180deg,#7fe0ff,var(--accent)) !important;
  color:#ffffff !important;text-shadow:0 1px 2px rgba(0,60,100,.5);
  box-shadow:0 0 16px rgba(0,152,224,.6),inset 0 1px 0 rgba(255,255,255,.6) !important;border-radius:12px !important;
}
.theme-y2k .frames-btn,.theme-y2k .menu-modal-item{border-radius:12px !important;}
.theme-y2k .colorswap-swatch,.theme-y2k .shortcut-key-btn,.theme-y2k .kbd-key{border-radius:10px !important;}
.theme-y2k #topbar,.theme-y2k #toolbar,.theme-y2k #rightpanel,.theme-y2k #bottombar{
  border-color:var(--border) !important;
  background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%),linear-gradient(180deg,#e2eef5,#8fb8d1) !important;
  background-size:300% 300%,100% 100%;
  background-position:-120% 0,0 0;
  background-repeat:no-repeat !important;
  animation:y2k-shimmer-sweep 7s ease-in-out infinite;
  animation-delay:1.5s;
}
.theme-y2k .logo,.theme-y2k .logo .logo-text{color:var(--accent) !important;}
.theme-y2k #topbar .logo .logo-text{font-family:'Press Start 2P',monospace !important;}
.theme-y2k #mobileLogoBar .logo-text{font-family:'Press Start 2P',monospace !important;}
.theme-y2k #zoomIndicator{color:#fff !important;}
.theme-y2k .layer-thumb{border-radius:8px !important;}
.theme-y2k .tween-popup-body{background:transparent !important;}
.theme-y2k .loading-title{font-family:'Press Start 2P',monospace !important;}
@keyframes y2k-shimmer-sweep{
  0%{background-position:-120% 0,0 0,0 0;}
  70%{background-position:-120% 0,0 0,0 0;}
  88%{background-position:220% 0,0 0,0 0;}
  100%{background-position:220% 0,0 0,0 0;}
}

/* Animated Tron-style grid behind the canvas — transform-driven (not
   background-position) so the browser can composite it on the GPU for a
   reliable 60fps loop. The grid element is oversized and offset so a full
   grid-cell translation never reveals a seam. */
.theme-y2k #canvasWrap::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(0,152,224,.3) 0px,rgba(0,152,224,.3) 1.5px,transparent 1.5px,transparent 48px),
    repeating-linear-gradient(0deg,rgba(0,152,224,.3) 0px,rgba(0,152,224,.3) 1.5px,transparent 1.5px,transparent 48px);
  animation:y2k-grid-scroll 3s linear infinite;
  will-change:transform;
}
.theme-y2k #canvasWrap::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.55) 0%,rgba(176,203,219,.35) 45%,rgba(94,135,163,.15) 75%,transparent 100%);
  animation:y2k-glow-pulse 4s ease-in-out infinite;
  will-change:opacity;
}
@keyframes y2k-grid-scroll{
  from{transform:translate(0,0);}
  to{transform:translate(48px,48px);}
}
@keyframes y2k-glow-pulse{
  0%,100%{opacity:1;}
  50%{opacity:.55;}
}

#colorPickerPopup { z-index: 300;}
#colorPickerPopupBg { z-index: 300; width:215px; display:none; }
#colorPickerPopupBg.show { display:flex; flex-direction:column; }
#cpHueSlider::-webkit-slider-thumb {-webkit-appearance: none;width: 14px;height: 14px;border-radius: 50%;background: #fff;border: 2px solid #333;cursor: pointer;box-shadow: 0 0 2px rgba(0,0,0,0.5);}
#cpSvPicker {touch-action: none;user-select: none;}

/*Rasterize Layer Button*/

#rasterizeLayerBtn {
  color: var(--text3);
}

#rasterizeLayerBtn.btn-icon-disabled {
  color: var(--text3) !important;
  opacity: 0.35;
}

/* ── TEXT TOOL POPUP ───────────────────────────────────────────────────── */
#textPopup { width: 270px; }
.text-popup-textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  margin-top: 4px;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.text-popup-textarea:focus { border-color: var(--accent); }
.text-typed-display {
  width: 100%;
  min-height: 48px;
  background: var(--surface3);
  border: 1.5px solid var(--accent);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 4px;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
  position: relative;
}
.text-typed-display::after {
  content: '|';
  display: inline;
  animation: textCursorBlink 1s step-end infinite;
  color: var(--accent);
  font-weight: bold;
}
@keyframes textCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.text-typing-hint {
  font-size: 10px;
  color: var(--text2);
  text-align: center;
  margin-top: 3px;
  opacity: 0.8;
}
.text-font-select {
  width: 100%;
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.text-font-select:focus { border-color: var(--accent); }
.text-align-btn {
  flex: 1;
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 4px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
  transition: .15s;
}
.text-align-btn:hover { background: var(--surface2); color: var(--text); }
.text-align-btn.active { background: var(--accent); color: #fff; border-color: transparent; }
.text-style-btn {
  width: 30px;
  height: 28px;
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
  transition: .15s;
  display: flex; align-items: center; justify-content: center;
}
.text-style-btn:hover { background: var(--surface2); color: var(--text); }
.text-style-btn.active { background: var(--accent); color: #fff; border-color: transparent; }
.text-cursor-indicator {
  font-size: 11px;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 3px;
}
.text-cursor-indicator.placed { color: var(--green); }
.custom-font-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.custom-font-list {
  max-height: 80px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface3);
}
.custom-font-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text2);
  transition: .1s;
}
.custom-font-item:hover { background: var(--surface2); color: var(--text); }
.custom-font-item .del-font-btn {
  background: none; border: none; color: var(--accent2); cursor: pointer; font-size: 11px; padding: 0 2px;
}
.text-apply-btn {
  width: 100%;
  padding: 7px 0;
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  transition: .15s;
  margin-top: 6px;
}
.text-apply-btn:hover { background: #4a78e0; }
.text-apply-btn:disabled { background: var(--surface3); color: var(--text3); cursor: default; }

/* Mobile/touch layout — only applies at narrow widths, desktop unaffected */

/* Hidden on desktop; only shown inside the mobile media query below */
#mobileDrawerBackdrop{display:none;}
#mobileNavbar{display:none;}
#mobileToolsBtn{display:none;}
.mobile-only-label{display:none;}
.mobile-only-block{display:none;}
.desktop-only-block{display:block;}
#mobileProjectName{display:none;}
#mobileLastAutosave{display:none;}
#mobileToolIndicator{display:none;}

@media (max-width: 900px), (max-width: 1180px) and (pointer: coarse){
  :root{ --mobile-nav-h:60px; --mobile-popup-top:96px; --topbar-h:88px; }

  html, body{ height:100dvh; }

  /* Hue sliders are hard to pin down precisely with a finger on touch
     screens — a taller track gives a much bigger vertical touch target
     (tapping anywhere on the track jumps the value there), and a larger
     thumb is easier to grab and drag accurately. */
  #hueSlider, #cpHueSlider, #cpHueSliderBg, #ftcpHueSlider, #gridHueSlider, #csHueSlider{
    height:26px !important; border-radius:13px !important;
  }
  #hueSlider::-webkit-slider-thumb, #cpHueSlider::-webkit-slider-thumb, #cpHueSliderBg::-webkit-slider-thumb,
  #ftcpHueSlider::-webkit-slider-thumb, #gridHueSlider::-webkit-slider-thumb,
  #csHueSlider::-webkit-slider-thumb{
    width:24px !important; height:24px !important;
  }
  #hueSlider::-moz-range-thumb, #cpHueSlider::-moz-range-thumb, #cpHueSliderBg::-moz-range-thumb,
  #ftcpHueSlider::-moz-range-thumb, #gridHueSlider::-moz-range-thumb,
  #csHueSlider::-moz-range-thumb{
    width:24px !important; height:24px !important;
  }

  /* Modals are sized for desktop by default (some set their own inline
     min-width, e.g. the spritesheet export modal's 580px), which can run
     wider than a mobile viewport and get cut off. This caps every modal to
     fit the screen regardless of what width it was designed for, and lets
     it scroll internally if its content is also too tall. */
  .modal{
    min-width:0 !important;
    max-width:calc(100vw - 32px) !important;
    width:calc(100vw - 32px);
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    box-sizing:border-box;
  }

  /* The spritesheet export modal's preview+controls layout sits side-by-side
     on desktop; stack it vertically on mobile so neither column gets
     squeezed into an unusably narrow strip once the modal itself is capped
     to viewport width above. */
  #spritesheetModal .modal-flex-row{
    flex-direction:column;
  }
  #spritesheetModal .modal-side-col{
    width:100% !important;
  }

  /* Advertising placeholders: desktop sidebar is desktop-only, so hide it
     here and drop the margin that reserved space for it. The mobile bottom
     bar sits at the very bottom of the screen, UNDER the existing mobile
     nav bar (which shifts up to make room for it) — this app keeps the
     canvas clear of fixed bottom overlays via getCanvasBottomOverlayHeight()
     in JS rather than body padding, so that function accounts for this
     bar's height too (see js/editor.js). */
  #desktop-ad-sidebar{ display:none; }
  body{ margin-right:0; }
  #mobile-ad-bar{ display:flex; }

  /* Selection popup (Cut/Copy/Paste): stretch buttons to fill the full
     width of the docked popup instead of leaving a gap after Paste. */
  #selectionPopup .popup-body button{ flex:1; text-align:center; }
  /* Tile View popup: full width like other popups, but deliberately NOT
     using !important on top/position — setupTileViewDrag() in JS needs to
     be able to move it vertically, which a forced position would block. */
  .tile-view-popup{
    left:0;right:0;width:100%;max-width:100%;
    border-left:none;border-right:none;border-radius:0;
    max-height:50vh;overflow-y:auto;box-sizing:border-box;
  }
  .tile-view-popup .popup-header{ cursor:default; }
  /* Mobile only — desktop keeps the original stacked layout untouched.
     Checkboxes sit in their own column to the left, evenly spaced so the
     gap above the first one matches the gap below the last one; the tile
     preview sits to the right and gets more room to actually be visible. */
  .tile-view-popup .popup-body{
    display:flex;flex-direction:row;align-items:stretch;gap:16px;padding:14px;
  }
  #tileViewOptionsCol{
    display:flex;flex-direction:column;justify-content:center;gap:14px;flex:1;min-width:0;
  }
  #tileViewOptionsCol .opt-row{ margin:0; }
  #tileViewOptionsCol .opt-check{ font-size:14px; gap:8px; }
  #tileViewOptionsCol .opt-check input[type=checkbox]{ width:18px; height:18px; flex-shrink:0; }
  #tileViewPreviewWrap{ margin:0; flex-shrink:0; }
  /* The floating project-name badge normally sits just above the nav bar —
     push it up further so it clears the (now-raised) nav bar too. */
  #mobileProjectName{ bottom:calc(var(--mobile-nav-h) + var(--ad-bar-h) + 8px) !important; }

  /* Menu modal keeps its original compact size on mobile — the bigger size
     is a desktop-only change */
  #menuModal .modal{ min-width:230px; max-width:270px; padding:14px; }

  /* Spritesheet export popup: width now handled by the generic .modal
     mobile rule above, which correctly caps it to the viewport — this
     modal no longer needs its own override. */
  #ssExportPreviewWrap{ min-height:120px!important; max-height:280px!important; }
  #ssExportPreviewCanvas{ max-height:280px!important; }

  /* User Guide popup: shorter on mobile so it doesn't crowd out the rest
     of the screen — desktop keeps the taller 88vh from the base rule. */
  #userGuideModal .modal{ max-height:52vh; }

  /* Custom (hover-based) tooltips don't make sense on touch and can get
     stuck visible after a tap, so they're fully disabled on mobile */
  #globalTooltip{ display:none!important; }

  /* ---- Topbar: PIXELSITO logo on its own line up top, with a button
     row below styled identically to the bottom navigation bar ---- */
  #topbar{
    padding:0; gap:0; flex-wrap:wrap; position:relative; z-index:560;
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:none; height:auto;
  }
  #topbar .logo{
    display:flex; order:-1; flex:0 0 100%;
    justify-content:center; align-items:center; position:relative;
    text-align:center; margin:0; padding:18px 0 12px!important;
    border-bottom-width:1px!important; border-bottom-style:solid; border-bottom-color:var(--border);
    gap:8px!important;
  }
  #topbar .logo .logo-text{ font-size:22px!important; margin:0!important; letter-spacing:normal!important; font-weight:normal!important; line-height:1.2!important; }
  .nav-hamburger-btn{
    display:flex!important; align-items:center; justify-content:center;
    background:none; border:none; color:var(--text); font-size:22px!important;
    cursor:pointer; padding:6px!important; border-radius:6px;
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    visibility:visible!important; opacity:1!important;
  }
  .nav-hamburger-btn i{ display:inline-block!important; }
  .nav-hamburger-btn:hover{ background:var(--surface2); color:var(--accent); }
  .nav-hamburger-spacer{ display:none; }
  .nav-menu-dropdown{
    left:0; right:0; width:100%; min-width:0; max-width:100%;
    top:var(--mobile-popup-top);
    border:none; border-bottom:1px solid var(--border); overflow:hidden;
    border-radius:0 0 10px 10px;
    transform:translateY(-120%);
    transition:transform .25s ease;
    display:flex!important;
  }
  .nav-menu-dropdown.open{
    transform:translateY(0);
  }
  .nav-menu-overlay.open{
    display:block!important;
  }
  .nav-lang-sheet{
    display:block; position:fixed; left:0; right:0; bottom:0;
    background:var(--surface); border-top:1px solid var(--border);
    border-radius:12px 12px 0 0; padding:14px 16px calc(16px + env(safe-area-inset-bottom));
    z-index:901;
    transform:translateY(120%); transition:transform .25s ease;
  }
  .nav-lang-sheet.open{ transform:translateY(0); }
  .nav-lang-sheet-title{
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text3);
    text-transform:uppercase; letter-spacing:1px; padding:6px 4px 10px; text-align:center;
  }
  .nav-lang-sheet-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .nav-lang-sheet .lang-option{ text-align:center; padding:10px; border:1px solid var(--border); border-radius:6px; }
  #topbar-title{ display:none; }
  #mobileProjectName{
    display:block; position:fixed; left:10px; bottom:calc(var(--mobile-nav-h) + 8px);
    z-index:540; font-size:11px; color:var(--text3); padding:3px 8px;
    background:var(--surface2); border:1px solid var(--border); border-radius:6px;
    max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    cursor:pointer;
  }
  #mobileLastAutosave{
    display:block; position:fixed; right:10px; bottom:calc(var(--mobile-nav-h) + var(--ad-bar-h) + 8px);
    z-index:540; font-size:11px; color:var(--text3); padding:3px 8px;
    background:var(--surface2); border:1px solid var(--border); border-radius:6px;
    max-width:55vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  #canvasSize{
    display:block; position:fixed; top:calc(var(--topbar-h) + 6px); right:8px; z-index:540;
    font-size:10px; padding:3px 7px; margin:0; border-radius:6px;
    background:var(--surface2); border:1px solid var(--border);
  }
  #mobileToolIndicator{
    display:block; position:fixed; top:calc(var(--topbar-h) + 6px); left:8px; z-index:540;
    font-size:11px; color:var(--text3); margin:0; padding:3px 8px;
    background:var(--surface2); border:1px solid var(--border); border-radius:6px;
    max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  body.ate-active #mobileToolIndicator,body.ate-active #canvasSize{display:none !important;}
  #topbar .sep{ display:none; }
  .topbtn{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; background:none; border:none; color:var(--text2); font-family:inherit;
    font-size:10px; cursor:pointer; padding:6px 0; letter-spacing:.3px; border-radius:0;
    min-height:var(--mobile-nav-h); box-sizing:border-box;
  }
  .topbtn:hover{ background:none; }
  .topbtn span{ display:block; white-space:nowrap; }
  .mobile-only-label{ display:block; }
  .mobile-only-block{ display:block; }
  .desktop-only-block{ display:none; }
  .topbtn i{ font-size:18px; }
  .topbtn.active-btn, .topbtn.active-btn:hover{
    background:var(--accent); color:#fff;
  }
  #mobileToolsBtn{ display:flex; }

  /* ---- Main becomes a vertical stack: canvas fills it; the tool drawer
     overlays on top instead of pushing the canvas down when opened ---- */
  #main{ flex-direction:column; position:relative; }

  /* ---- Tool grid: collapsible drawer toggled by the "Tools" topbar button.
     Positioned absolutely so opening it overlays the canvas rather than
     resizing/pushing it. Neatly wraps into aligned rows, scrolls internally
     if there are more tools than fit. ---- */
  #toolbar{
    display:none;
    position:absolute; top:0; left:0; right:0;
    width:100%; height:auto; max-height:42vh;
    /* Fixed 9 columns → 26 tools fit in 3 rows (9+9+8) on any phone width */
    grid-template-columns:repeat(9, minmax(0, 1fr));
    grid-auto-rows:minmax(36px, 42px); justify-content:center; align-items:center;
    border-right:none; border-bottom:1px solid var(--border);
    padding-top:6px; padding-bottom:6px;
    padding-left:4px; padding-right:4px;
    gap:2px; overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch; flex-shrink:0;
    background:var(--surface); z-index:600; box-shadow:none;
  }
  #toolbar.mobile-tools-open{ display:grid; }
  .tool-sep{ display:none; }
  /* Compact icons so all tools fit in 3 rows */
  .tool-btn{ width:100%; height:100%; min-height:36px; font-size:15px; }
  #tbColorWrap{ width:100%; height:100%; margin:0; }
  #tbFgSwatch{ width:22px; height:22px; }
  #tbBgSwatch{ width:22px; height:22px; }
  #tbSwapBtn{ top:24px; }
  #tbColorWrap{ display:none; } /* now incorporated into the Colors drawer instead */

  /* ---- Colors drawer: fg/bg swatch + swap, incorporated here instead of
     living only in the (now hidden-on-mobile) toolbar swatch. Tapping a
     swatch switches which color the embedded picker below edits. ---- */
  .mobile-color-toggle{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px;
  }
  .mobile-color-toggle-btn{
    display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; max-width:160px;
    background:var(--surface3); border:1px solid var(--border); border-radius:20px;
    padding:4px 10px 4px 4px; cursor:pointer; color:var(--text2); font-size:10px; font-family:inherit;
  }
  .mobile-color-toggle-btn span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-color-toggle-btn.active{ border-color:var(--accent); color:var(--text); }
  .mobile-color-toggle-swatch{
    width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0;
  }
  .mobile-color-toggle-btn.active .mobile-color-toggle-swatch{ box-shadow:0 0 0 2px var(--accent); }
  .mobile-color-toggle-swap{
    flex-shrink:0; background:none; border:1px solid var(--border); border-radius:6px;
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    color:var(--text2); cursor:pointer;
  }

  /* ---- Canvas: fills the remaining space edge-to-edge ---- */
  #canvasWrap{ width:100%; flex:1; min-height:0; touch-action:none; }
  #zoomIndicator{ top:auto; bottom:10px; left:10px; right:auto; }
  /* The hover-highlight square (shown on mouse hover over a pixel) has no
     equivalent on touch — there's no "hovering" with a finger — so it's
     just hidden on mobile. */
  #hoverCanvas{ display:none; }

  /* Desktop status bar relied on --panel-w/--right-w offsets that no longer
     apply once the side panels become drawers, so it's tucked away here */
  #statusbar{ display:none; }

  /* ---- Right panel (Color/Layers/Options) + bottombar (Frames) become
     collapsible slide-up drawers, hidden until opened from the bottom nav ---- */
  #rightpanel, #bottombar{
    position:fixed; left:0; right:0; bottom:calc(var(--mobile-nav-h) + var(--ad-bar-h));
    width:auto; height:auto; max-height:62vh;
    border-left:none; border-right:none; border-top:1px solid var(--border);
    border-radius:16px 16px 0 0; box-shadow:0 -8px 28px rgba(0,0,0,.45);
    transform:translateY(115%); transition:transform .28s cubic-bezier(.32,.72,0,1);
    z-index:600; overflow-y:auto; overflow-x:hidden; display:flex;
  }
  #rightpanel.mobile-open, #bottombar.mobile-open{ transform:translateY(0); }
  #rightpanel::before, #bottombar::before{
    content:''; display:block; width:36px; height:4px; background:var(--border);
    border-radius:2px; margin:9px auto 3px; flex-shrink:0;
  }
  .rpanel-pane.active{ min-height:180px; overflow-x:hidden; }
  .rpanel-section{ overflow-x:hidden; max-width:100%; }
  #paletteGrid{ overflow-x:hidden; overflow-y:auto; }
  .desktop-only-color-input{ display:none; }
  .mobile-grid-color-picker{ display:block; margin-bottom:18px; }
  #gridSettingsPopup .grid-opacity-row{ margin-top:18px; }
  #layersList{ max-height:240px; overflow-x:hidden; }
  .rpanel-tab{ padding:13px 8px; }
  .rpanel-tabs{ display:none; }
  #bottombar{ height:auto; }
  #framesToolbar{ flex-wrap:wrap; row-gap:8px; column-gap:6px; }
  #framesList{ padding-bottom:8px; }
  /* Play/Pause, Duplicate, Delete, Onion Skin, Animation Preview: icon
     stacked over a small label (like the rest of the mobile UI) so the
     text fits neatly without squishing the frames toolbar */
  #playBtn, #duplicateFrameBtn, #deleteFrameBtn, #onionSkinBtn{
    flex:1 1 0; min-width:68px;
    flex-direction:column; gap:3px; padding:8px 4px;
  }
  #playBtn i, #duplicateFrameBtn i, #deleteFrameBtn i, #onionSkinBtn i{ font-size:15px; }
  #playBtn span[data-i18n], #duplicateFrameBtn span[data-i18n],
  #deleteFrameBtn span[data-i18n], #onionSkinBtn span[data-i18n]{
    display:block; font-size:10px; white-space:nowrap;
  }
  .fps-wrap{ flex-wrap:wrap; row-gap:6px; }
  /* Animation Preview: its own full-width row, in the same button style
     as the others but spanning edge-to-edge instead of being squeezed
     into the FPS controls row */
  #previewToggleBtn{
    flex:1 1 100%; flex-direction:row; gap:6px; justify-content:center;
    padding:10px 8px;
  }
  #previewToggleBtn i{ font-size:16px; }
  #previewToggleBtn span[data-i18n]{ display:inline; font-size:12px; white-space:nowrap; }
  /* Tags: same full-width row treatment as Animation Preview, kept off the
     shared Play/Duplicate/Delete/Tween/Onion Skin row entirely so adding it
     never affects how those buttons share that row's space. */
  #frameTagsBtn{
    flex:1 1 100%; flex-direction:row; gap:6px; justify-content:center;
    padding:10px 8px;
  }
  #frameTagsBtn i{ font-size:16px; }
  #frameTagsBtn span[data-i18n]{ display:inline; font-size:12px; white-space:nowrap; }
  /* Advanced Timeline Editor: same full-width row treatment as Range Tags
     and Animation Preview, so all three render at identical heights. */
  #advancedTimelineBtn{
    flex:1 1 100%; flex-direction:row; gap:6px; justify-content:center;
    padding:10px 8px;
  }
  #advancedTimelineBtn i{ font-size:16px; }
  #advancedTimelineBtn span[data-i18n]{ display:inline; font-size:12px; white-space:nowrap; }

  /* rpane-tools (Language/Theme, shown via the Options nav button): should
     hug its own short content rather than stretching to the same min-height
     as the longer Color/Layers panes, so the drawer doesn't ride up too far */
  #rpane-tools.active{ min-height:0; padding-bottom:16px; }

  /* Add/Delete/Duplicate/Effects/Rasterize/Merge Layer buttons: much bigger
     tap targets on mobile — these were tiny, icon-only desktop-sized buttons */
  .layer-actions{ gap:6px!important; flex-wrap:nowrap; }
  .layer-actions [data-layer-tip]{
    flex:1; min-width:0; height:38px; display:flex!important; align-items:center; justify-content:center;
    background:var(--surface3)!important; border:1px solid var(--border)!important;
    border-radius:8px!important;
  }
  .layer-actions [data-layer-tip] i{ font-size:16px; }

  /* ---- Backdrop shown behind an open drawer; tapping it closes the drawer ---- */
  #mobileDrawerBackdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:590;
  }
  #mobileDrawerBackdrop.show{ display:block; }

  /* The topbar (Menu/Tools/Undo/Redo/logo) must stay above the darkened
     backdrop — it shouldn't get covered/dimmed just because a drawer
     opened underneath it. */
  #topbar{ z-index:700; }
  #mobileLogoBar{
    display:flex; position:fixed; top:0; left:0; right:0; width:100%;
    justify-content:center; align-items:center;
    padding:18px 0 12px!important; margin:0;
    background:var(--surface); border-bottom-width:1px!important; border-bottom-style:solid; border-bottom-color:var(--border);
    z-index:950; gap:8px!important;
  }
  #mobileLogoBar .logo-text{ font-size:22px!important; margin:0!important; letter-spacing:normal!important; font-weight:normal!important; color:var(--accent); font-family:'Press Start 2P',monospace; line-height:1.2!important; }
  /* Autosave toast: above mobile popups (which sit at z:650) so it's
     never hidden behind an open Fill/Brush/Tile View popup, but still
     below the (raised) topbar so it stays correctly masked behind it
     when not shown — desktop keeps its own separate z-index (90). */
  #autosaveToast{ z-index:590; }

  /* Tile View: while any collapsible menu (Color/Frames/Layers/Options) is
     open, it must sit BEHIND the darkened backdrop and be non-interactive
     — same as everything else the backdrop covers — until the drawer
     closes again. */
  body.mobile-drawer-open .tile-view-popup{
    z-index:580; pointer-events:none;
  }

  /* When Frames drawer is open, Animation Preview sits ABOVE the dark
     overlay and remains interactive. On other drawers it stays behind. */
  body.mobile-frames-open #previewWin,
  body.modal-open-lock.mobile-frames-open #previewWin{
    z-index:620 !important;
    pointer-events:auto !important;
  }

  /* ---- Bottom navigation bar ---- */
  #mobileNavbar{
    display:flex; position:fixed; left:0; right:0; bottom:var(--ad-bar-h); height:var(--mobile-nav-h);
    background:var(--surface); border-top:1px solid var(--border); z-index:610;
  }
  .mobile-nav-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; background:none; border:none; color:var(--text2); font-family:inherit;
    font-size:10px; cursor:pointer; padding:6px 0; letter-spacing:.3px;
  }
  .mobile-nav-btn i{ font-size:18px; }
  .mobile-nav-btn.active{ background:var(--accent); color:#fff; }

  /* ---- Small utility popups (Pixel Size, Fill Options, Grid Options,
     Grid Settings, Color Picker, Text Tool, Layer Outline, Layer Effects,
     Animation Preview): span the full width of the screen edge-to-edge,
     dock in a fixed strip directly under the topbar/tools drawer so they
     can never end up off-screen, and are NOT draggable on mobile (dragging
     is disabled in JS). Only one is ever visible at a time (enforced in
     JS), and each can still be closed via its own close button. ---- */
  .popup{
    position:fixed!important; left:0!important; right:0!important;
    width:100%!important; max-width:100%!important;
    top:var(--mobile-popup-top)!important; bottom:auto!important;
    transform:none!important; margin:0!important;
    max-height:calc(100dvh - var(--mobile-popup-top) - var(--mobile-nav-h) - var(--ad-bar-h) - 14px)!important;
    overflow-y:auto; z-index:650!important;
    border-radius:0!important; border-left:none; border-right:none; border-top:none; box-sizing:border-box;
  }
  /* The Y2K theme's glow ring is an outset box-shadow, which renders 1px
     beyond the element's own box — fine for centered modals with margin,
     but on mobile .popup sits flush against both viewport edges, so the
     ring's left/right edges land off-screen and get clipped. Switching to
     inset keeps it fully inside the element's own bounds regardless of
     position. */
  .theme-y2k .popup,.theme-y2k .tag-color-picker{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 8px 24px rgba(15,30,43,.3),0 0 18px rgba(0,152,224,.2) !important;
  }
  .popup-header{ cursor:default!important; border-radius:0!important; }
  .preview-resize-handle{ display:none!important; }

  /* ---- Modals (New Canvas, Import, Export, Crop, etc.): always sized to
     fit fully on screen, regardless of any desktop min-width set inline ---- */
  .modal{
    min-width:0!important; width:92vw!important; max-width:92vw!important;
    max-height:85vh; overflow-y:auto; box-sizing:border-box;
  }
  /* Modals that lay out a preview + a fixed-width side column side-by-side
     on desktop stack vertically on mobile so nothing runs off-screen */
  .modal-flex-row{ flex-direction:column!important; }
  .modal-side-col{ width:100%!important; }
  .menu-modal-item{ padding:13px 10px; }
  #ctxMenu{ display:none!important; } /* no right-click on touch */
}

/* ── USER GUIDE ─────────────────────────────────────────── */
#userGuideModal .modal{min-width:min(720px,94vw);max-width:860px;max-height:88vh;display:flex;flex-direction:column;padding:0;overflow:hidden;}
/* Spritesheet export popup: bigger by default (desktop) — the mobile
   media query below restores the original, smaller size. */
#spritesheetModal .modal{min-width:780px;max-width:960px;}
#ssExportPreviewWrap{min-height:200px!important;max-height:460px!important;}
#ssExportPreviewCanvas{max-height:460px!important;}
#userGuideModal .ug-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface2);border-radius:10px 10px 0 0;flex-shrink:0;}
#userGuideModal .ug-header h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px;}
#userGuideModal .ug-body{overflow-y:auto;padding:16px 20px 28px;flex:1;min-height:0;background:var(--bg);}
#userGuideModal .ug-section{margin-bottom:16px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
#userGuideModal .ug-section h4{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--accent);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
#userGuideModal .ug-section p{font-size:13px;color:var(--text2);line-height:1.6;margin:0;}
#userGuideModal .ug-tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;}
#userGuideModal .ug-tool{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface2);transition:border-color .12s,background .12s;}
#userGuideModal .ug-tool:hover{border-color:var(--accent);background:var(--surface3);}
#userGuideModal .ug-tool i{width:22px;text-align:center;color:var(--accent);font-size:15px;margin-top:2px;flex-shrink:0;}
#userGuideModal .ug-tool strong{display:block;font-size:12px;color:var(--text);margin-bottom:2px;}
#userGuideModal .ug-tool span{font-size:11px;color:var(--text2);line-height:1.4;}
#userGuideModal .ug-list{margin:0;padding-left:18px;font-size:13px;color:var(--text2);line-height:1.65;}
#userGuideModal .ug-list li{margin-bottom:5px;}
#userGuideModal .ug-list li::marker{color:var(--accent);}
#userGuideModal .ug-kbd{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--surface3);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:1px 5px;margin:0 2px;}

.tween-modal{
  position:relative;
  width:1000px;max-width:92vw;max-height:88vh;
  display:flex;flex-direction:column;
  box-sizing:border-box;
}
.tween-modal-header{ flex-shrink:0;background:var(--surface); }
.tween-popup-body{ flex:1;min-height:0;overflow-y:auto; }
.tween-selector-row{ display:flex;align-items:center;gap:16px;margin-bottom:16px; }
.tween-selector-dropdowns{ flex:1;min-width:0; }
.tween-selector-preview{
  flex-shrink:0;width:56px;height:56px;
  border:1px solid var(--border);border-radius:0px;
  image-rendering:pixelated;
  background-image:
    linear-gradient(45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(-45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3a45 75%),
    linear-gradient(-45deg, transparent 75%, #3a3a45 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
  background-color: #4a4a55;
}
.tween-popup-close{ position:absolute;top:20px;right:20px; }
.tween-popup-minimize{ position:absolute;top:20px;right:52px; }
.tween-modal h3{ padding-right:60px; }
.tween-minimized-tab{
  position:fixed;z-index:900;
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:var(--surface);border:1px solid var(--border);border-bottom:none;
  border-radius:8px 8px 0 0;
  box-shadow:0 -2px 10px rgba(0,0,0,.35);
  cursor:pointer;user-select:none;
  font-size:13px;color:var(--text);
  transition:bottom .28s cubic-bezier(.32,.72,0,1), top .28s cubic-bezier(.32,.72,0,1);
}
.tween-minimized-tab i:first-child{ color:var(--accent); }
.tween-minimized-restore-icon{ color:var(--text2);margin-left:4px; }
.tween-popup-layer{ font-size:12px;font-weight:400;color:var(--text2); }
.tween-main-layout{ display:flex;align-items:stretch;gap:16px; }
.tween-left-col{ display:flex;flex-direction:column;gap:16px;flex:1.4;min-width:0; }
.tween-wrap-easing-group{ display:flex;flex-direction:column;gap:16px;min-width:0;flex:1; }
.tween-checkboxes-fill{ min-width:0;display:flex;gap:16px; }
.tween-preview-row{ margin-top:0;min-width:0;flex:1; }
.tween-checkbox-half{ flex:1;min-width:0; }
.tween-kf-cols{ display:grid;grid-template-rows:1fr 1fr;align-items:stretch;gap:16px; }
.tween-kf-col{ min-width:180px;min-height:0; }
.tween-card{
  background:var(--surface3);border:1px solid var(--border);border-radius:8px;
  padding:14px;box-sizing:border-box;
}
.tween-card input[type=range]{ background:var(--text3); }
.tween-card .modal-input{ background:var(--surface2); }
.tween-kf-title{ font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px; }
.tween-val-input{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text);
  width:52px;flex-shrink:0;text-align:right;
  background:var(--surface2);border:1px solid var(--border);border-radius:4px;
  padding:3px 4px;
}
.tween-wrap-check{
  display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);
  cursor:pointer;margin-right:14px;
}
.tween-wrap-check input{ cursor:pointer; }
.tween-wrap-distance-disabled{ opacity:0.4;pointer-events:none; }
.tween-preview-stage{
  position:relative;
  width:100%;aspect-ratio:1;max-height:340px;
  display:flex;align-items:center;justify-content:center;
}
.tween-grid-canvas{
  position:absolute;pointer-events:none;image-rendering:pixelated;display:none;
}
.tween-wrap-lines-canvas{
  position:absolute;pointer-events:none;image-rendering:pixelated;display:none;
}
.tween-preview-canvas{
  display:block;max-width:100%;max-height:100%;
  border:1px solid var(--border);border-radius:0 !important;
  image-rendering:pixelated;
  background-image:
    linear-gradient(45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(-45deg, #3a3a45 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3a45 75%),
    linear-gradient(-45deg, transparent 75%, #3a3a45 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #4a4a55;
}
.tween-scrub-row{ display:flex;align-items:center;gap:8px; }
.tween-scrub-row input[type="range"]{ flex:1; }

/* Deliberately large on desktop — this needs room to work in. Uses the
   same generic mobile .modal safeguard (min-width:0/max-width:calc(100vw-32px)
   from the mobile media query below) to guarantee it fits phone screens too,
   same fix pattern as the spritesheet export modal. */
.tileset-modal{
  width:520px;
  max-width:92vw;
  max-height:88vh;
  display:flex;flex-direction:column;
  padding:14px 18px;
}
.tileset-header-row{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px;margin-bottom:12px;
}
.tileset-header-row h3{margin-bottom:0;}
.tileset-props{ display:flex;align-items:center;gap:6px; }
.tileset-mode-btn{
  width:32px;height:32px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  transition:.15s;
}
.tileset-mode-btn:hover{background:var(--surface3);color:var(--text);}
.tileset-mode-btn.active{background:var(--accent);color:#fff;border-color:transparent;}
.tileset-props-sep{width:1px;height:20px;background:var(--border);margin:0 2px;}

.tileset-grid-wrap{
  position:relative;
  width:100%;aspect-ratio:1/1;
  flex-shrink:0;
  overflow:hidden;
  background:var(--canvas-bg,#1a1a20);border:1px solid var(--border);border-radius:8px;
  padding:8px;
  box-sizing:border-box;
}
.tileset-grid{ position:relative;width:100%;height:100%; }
.tileset-cell{
  position:absolute;width:56px;height:56px;
  border:1px solid var(--border);border-radius:4px;
  box-sizing:border-box;
  background-color:#232329;
  cursor:pointer;
}
.tileset-cell.selected{ border-color:var(--accent); border-width:2px; box-shadow:0 0 0 2px rgba(91,138,240,.35); }
.tileset-cell.drag-over{ border-color:var(--green,#5ac97a); background-color:rgba(90,201,122,.15); }
.tileset-cell.touch-dragging{ opacity:.4; }
/* The ghost is the ONLY way empty space is ever shown — a single element,
   repositioned live during an active drag to wherever the pointer currently
   indicates a valid drop target, rather than a grid of always-visible empty
   placeholder squares. */
.tileset-cell.ghost{
  border:1px dashed var(--green,#5ac97a);
  background-color:rgba(90,201,122,.1);
  background-image:linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.03) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.03) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.03) 75%);
  background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;
  pointer-events:none;
}
.tileset-tile-img{
  width:100%;height:100%;object-fit:contain;
  image-rendering:pixelated;pointer-events:none;
  display:block;
}
.tileset-tile-num{
  position:absolute;top:2px;left:2px;
  font-family:'JetBrains Mono',monospace;font-size:9px;line-height:1;
  color:#fff;background:rgba(0,0,0,.6);
  padding:1px 3px;border-radius:3px;
  pointer-events:none;
}
.tileset-empty-msg{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;
  font-size:13px;color:var(--text3);font-style:italic;
  pointer-events:none;
}

.tileset-tray-title{
  font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);
  margin:10px 0 6px;
}
.tileset-tray{
  height:72px;flex-shrink:0;
  overflow-x:auto;overflow-y:hidden;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px;
  border-style:solid;
  transition:border-color .15s,background-color .15s;
}
.tileset-tray.drag-over{
  border-style:dashed;border-color:var(--green,#5ac97a);
  background-color:rgba(90,201,122,.1);
}
.tileset-tray-inner{
  display:flex;flex-wrap:nowrap;gap:8px;
  width:fit-content;
}
.tileset-tray-empty{ font-size:12px;color:var(--text3);font-style:italic;padding:6px; }
.tileset-tray-item{
  width:56px;height:56px;border:1px solid var(--border);border-radius:5px;
  background-color:#232329;cursor:pointer;overflow:hidden;
  transition:.15s;flex-shrink:0;
}
.tileset-tray-item:hover{border-color:var(--accent);}
.tileset-tray-item.touch-dragging{ opacity:.4; }

@media (max-width: 900px), (max-width: 1180px) and (pointer: coarse){
  .tween-main-layout{ display:flex;flex-direction:column;gap:12px; }
  .tween-left-col{ display:contents; }
  .tween-wrap-easing-group{ display:contents; }
  .tween-kf-cols{ display:flex;flex-direction:column;gap:12px;order:1; }
  .tween-kf-col.tween-card{ flex:none; }
  .tween-easing-card{ order:2; }
  .tween-wrap-card{ order:3; }
  .tween-checkboxes-fill{ flex-direction:column;gap:12px;order:4; }
  #tweenError{ order:5; }
  .tween-preview-row{ flex:none;order:6; }
  #playBtn, #duplicateFrameBtn, #deleteFrameBtn, #tweenBtn, #onionSkinBtn{
    flex-direction:column;gap:2px;padding:4px 6px;text-align:center;
    flex:1;min-width:0;
  }
  #tweenBtn i{ font-size:15px; }
  #tweenBtn span{ font-size:10px; }
  .tween-preview-stage{ max-height:160px; }
  .tween-modal{ padding:12px 14px; max-height:calc(100dvh - 32px); }
  .tween-selector-row{ gap:10px;margin-bottom:12px; }
  .tween-selector-dropdowns{ display:flex;gap:8px; }
  .tween-selector-dropdowns .opt-row{ flex:1;flex-direction:column;align-items:flex-start;gap:2px; }
  .tween-selector-preview{ width:44px;height:44px; }
  .tween-modal-header{ margin-bottom:10px; }
  .tween-popup-close{ top:12px;right:12px; }
  .tween-popup-minimize{ top:12px;right:44px; }
  .tween-modal h3{ padding-right:52px; }
  .tween-popup-layer{ display:block;margin-top:2px; }
  .tween-card{ padding:10px; }
  .tween-val-input{ width:44px; }
  .tween-wrap-check{ margin-right:8px; }
  .tween-card .opt-row{ flex-wrap:wrap; }
  .tween-modal{ width:calc(100vw - 24px)!important; max-width:calc(100vw - 24px)!important; }
  #framesToolbar{ align-items:stretch; }
  .tileset-modal{ padding:10px 12px; max-height:calc(100dvh - 32px); }
  .tileset-grid-wrap{ padding:6px; }
  .tileset-tray-item{ width:44px;height:44px; }
  .tileset-tray{ height:60px;flex-shrink:0; }
}