.canvas-container::before,
.canvas-container::after,
.canvas-container .chess-piece {
  pointer-events: none !important;
}

#pixel-canvas {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  z-index: 50 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: var(--pion-canvas-w, 512px) !important;
  height: var(--pion-canvas-h, 512px) !important;
  background-color: #808080 !important;
  background-image:
    linear-gradient(45deg, 25%, transparent 25%),
    linear-gradient(-45deg, 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, 75%),
    linear-gradient(-45deg, transparent 75%, 75%) !important;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    background-size: 10px 10px;
  background-repeat: repeat !important;
  border: 3px solid #111 !important;
  box-sizing: border-box !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  transform-origin: center center !important;
  transform: translate(calc(-50% + var(--pion-pan-x, 0px)), calc(-50% + var(--pion-pan-y, 0px))) !important;
  will-change: transform, width, height !important;
  touch-action: none !important;
  user-select: none !important;
  cursor: crosshair !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 8px 24px rgba(0,0,0,.35) !important;
}

.canvas-container.pan-active #pixel-canvas { cursor: grab !important; }
.canvas-container.pan-active #pixel-canvas:active { cursor: grabbing !important; }
.canvas-container .reference-panel { z-index: 60 !important; }

.pioncheck-notice {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 99999;
  background:#111;
  color:#fff;
  padding:9px 14px;
  border-radius:7px;
  box-shadow:0 5px 20px #0008;
  font:13px sans-serif;
  pointer-events:none;
}

.layer-list .layer-item,
.frames-container .frame-item { cursor:pointer; }

.color-wheel-container{padding:14px!important;gap:10px!important;}
.pro-color-picker{display:flex;align-items:center;justify-content:center;width:100%;}
.color-wheel{position:relative!important;width:216px!important;height:216px!important;border:0!important;border-radius:50%!important;background:conic-gradient(from 0deg,#ff0000 0deg,#ffff00 60deg,#00ff00 120deg,#00ffff 180deg,#0000ff 240deg,#ff00ff 300deg,#ff0000 360deg)!important;box-shadow:0 0 0 2px #111,0 5px 0 var(--border-dark),inset 0 0 0 1px rgba(255,255,255,.22)!important;overflow:visible!important;cursor:crosshair!important;}
.color-wheel::after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--panel-mid);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35);z-index:0;pointer-events:none;}
.color-triangle{position:absolute!important;z-index:1!important;left:50%;top:50%;width:100px;height:90px;transform:translate(-50%,-50%);clip-path:polygon(50% 0%,0% 100%,100% 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%),linear-gradient(to right,#fff 0%,var(--picker-hue,#ff0000) 100%);cursor:crosshair;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));}
.color-triangle-selector{position:absolute;width:13px;height:13px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000,0 1px 5px rgba(0,0,0,.75);transform:translate(-50%,-50%);pointer-events:none;left:50%;top:0;z-index:3;}
.color-wheel-selector{position:absolute!important;left:50%;top:4px;width:15px!important;height:15px!important;background:transparent!important;border:2px solid #fff!important;border-radius:50%!important;transform:translate(-50%,-50%)!important;box-shadow:0 0 0 1px #000,0 1px 5px rgba(0,0,0,.8)!important;z-index:4!important;}
.color-preview-row{display:flex;align-items:center;gap:10px;width:100%;max-width:216px;}
.color-preview-wheel{width:42px!important;height:42px!important;flex:0 0 42px;border-radius:6px!important;}
.color-picker-readout{display:flex;flex-direction:column;min-width:0;gap:2px;font-family:var(--font-main,Arial,sans-serif);}
.color-picker-readout strong{font-size:12px;color:#fff;text-transform:uppercase;letter-spacing:.04em;}
.color-picker-readout span{font-size:10px;color:#aaa;}
@media(max-width:900px){.color-wheel{width:190px!important;height:190px!important}.color-triangle{width:100px;height:90px}.color-wheel::after{inset:19px}}

#color-wheel,
#color-triangle {
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
#color-wheel-selector,
#color-triangle-selector {
  pointer-events: none !important;
}
#color-triangle {
  --picker-hue: #ff0000;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%),
    linear-gradient(to right, #ffffff 0%, var(--picker-hue) 100%) !important;
}


#color-wheel {
  background: conic-gradient(
    from -90deg,
    #ff0000 0deg,
    #ffff00 60deg,
    #00ff00 120deg,
    #00ffff 180deg,
    #0000ff 240deg,
    #ff00ff 300deg,
    #ff0000 360deg
  ) !important;
}
#color-wheel::after {
  inset: 24px !important;
  border-radius: 50% !important;
}
#color-triangle {
  background:
    linear-gradient(to bottom, var(--picker-hue,#ff0000) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(to right, #ffffff 0%, #000000 100%) !important;
  background-blend-mode: normal !important;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
}
#color-triangle-selector {
  pointer-events: none !important;
  will-change: left, top;
}
#color-wheel-selector {
  pointer-events: none !important;
  will-change: left, top;
}
#color-wheel, #color-triangle {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
#palettes-container .palette-item {
  cursor: pointer;
}
#palettes-container .palette-btn-small {
  width: 24px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#palettes-container .palette-btn-small:disabled {
  opacity: .35;
  cursor: not-allowed;
}
#color-palette {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(18px,1fr));
  gap: 5px;
  padding: 6px;
}
#color-palette .color {
  width: 100%;
  aspect-ratio: 1;
  min-width: 18px;
  min-height: 18px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .08s ease, border-color .08s ease;
}
#color-palette .color:hover {
  transform: scale(1.08);
  border-color: #fff;
}


#color-wheel {
  background: conic-gradient(
    from 0deg,
    #ff0000 0deg,
    #ffff00 60deg,
    #00ff00 120deg,
    #00ffff 180deg,
    #0000ff 240deg,
    #ff00ff 300deg,
    #ff0000 360deg
  ) !important;
}


.layer-list .layer-item {
  display:flex;
  align-items:center;
  gap:10px;
}
.layer-list .layer-visibility {
  flex:0 0 34px;
  width:34px;
  height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #111;
  border-radius:7px;
  background:#2b2c31;
  color:#d5d5d5;
  font-size:18px;
  cursor:pointer;
  font-family:inherit;
}
.layer-list .layer-visibility:hover {
  filter:brightness(1.2);
}
.layer-list .layer-name {
  min-width:0;
}

.pion-options-panel {
  display:none;
  margin-top:10px;
  padding:10px;
  background:var(--panel-mid,#1c1d21);
  border:3px solid var(--border-dark,#000);
  border-radius:7px;
  box-shadow:inset 0 0 0 2px var(--border-inner,#494b4e),0 3px 0 var(--border-dark,#000);
  flex-direction:column;
  gap:9px;
}

.pion-options-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}

.pion-options-title {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--accent,#c4c5cd);
  font:16px 'Minecraft',sans-serif;
  text-transform:uppercase;
}

.pion-options-title i { font-size:13px; }
.pion-options-hint { color:var(--subtitle,#a7a9b1); font:11px 'ThinSans',sans-serif; white-space:nowrap; }

.shape-button-grid,
.selection-action-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}

.pion-choice-btn,
.pion-mode-btn,
.pion-action-btn,
.pion-toggle-btn {
  appearance:none;
  min-height:42px;
  border:3px solid var(--border-dark,#000);
  border-radius:6px;
  background:var(--btn-color,#282a30);
  color:var(--accent,#c4c5cd);
  box-shadow:inset 0 0 0 2px var(--border-inner,#494b4e),0 2px 0 var(--border-dark,#000);
  font-family:'Minecraft',sans-serif;
  cursor:pointer;
  transition:transform .1s ease,background-color .1s ease,box-shadow .1s ease,border-color .1s ease;
}

.pion-choice-btn,
.pion-action-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:6px 4px;
  font-size:10px;
  line-height:1.05;
}

.pion-choice-btn i,
.pion-action-btn i { font-size:15px; }

.pion-choice-btn:hover,
.pion-mode-btn:hover,
.pion-action-btn:hover,
.pion-toggle-btn:hover { background:var(--active-bnt,#4d4e56); transform:translateY(-1px); }

.pion-choice-btn:active,
.pion-mode-btn:active,
.pion-action-btn:active,
.pion-toggle-btn:active { transform:translateY(1px); box-shadow:inset 0 0 0 2px var(--border-inner,#494b4e),0 1px 0 var(--border-dark,#000); }

.pion-choice-btn.active,
.pion-mode-btn.active,
.pion-toggle-btn.active {
  background:var(--active-bnt,#4d4e56);
  border-color:#000;
  box-shadow:inset 0 0 0 2px #777a82,0 2px 0 #000;
}

.pion-choice-btn.active i,
.pion-mode-btn.active i,
.pion-toggle-btn.active i { color:#fff; }

.pion-toggle-btn {
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 10px;
  font-size:12px;
}

.pion-toggle-state {
  margin-left:auto;
  padding:3px 6px;
  border-radius:3px;
  background:#111216;
  color:#9699a2;
  font-size:9px;
}

.pion-toggle-btn.active .pion-toggle-state { color:#fff; background:#303238; }

.selection-mode-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pion-mode-btn { display:flex; align-items:center; justify-content:center; gap:7px; padding:7px 8px; font-size:11px; }
.pion-action-btn.danger:hover { background:#513034; }
.pion-action-btn.danger i { color:#d8a0a5; }

@media (max-width:768px) {
  .pion-options-panel { padding:8px; gap:8px; }
  .pion-options-title { font-size:14px; }
  .pion-options-hint { display:none; }
  .shape-button-grid,
  .selection-action-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .pion-choice-btn,
  .pion-action-btn { min-height:44px; font-size:9px; }
  .pion-choice-btn i,
  .pion-action-btn i { font-size:14px; }
}


.pion-options-panel {
  position: fixed !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 228px !important;
  max-height: min(72vh, 620px) !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 9px !important;
  z-index: 1200 !important;
  background: #1c1d21 !important;
  border: 3px solid #000 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 2px #494b4e, 0 4px 0 #000, 0 8px 24px rgba(0,0,0,.38) !important;
}

.pion-options-panel::-webkit-scrollbar { width: 7px; }
.pion-options-panel::-webkit-scrollbar-track { background: #111216; }
.pion-options-panel::-webkit-scrollbar-thumb { background: #4d4e56; border: 2px solid #111216; border-radius: 5px; }

.pion-options-heading {
  padding: 2px 3px 7px;
  border-bottom: 2px solid #494b4e;
}

.shape-button-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shape-choice { min-height: 48px !important; }

.selection-action-grid {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

.selection-action-grid .pion-action-btn {
  min-height: 40px !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  text-align: left;
}

.selection-action-grid .pion-action-btn i {
  width: 20px;
  text-align: center;
}

.pion-action-btn.danger { border-color: #000 !important; }
.pion-action-btn.danger:hover { background: #513034 !important; }

@media (max-width: 768px) {
  .pion-options-panel {
    right: 8px !important;
    top: 50% !important;
    width: min(210px, calc(100vw - 16px)) !important;
    max-height: 68vh !important;
    padding: 8px !important;
  }

  .shape-button-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; }
  .shape-choice { min-height: 46px !important; }
  .selection-mode-row { gap: 5px !important; }
  .pion-mode-btn { min-height: 42px !important; }
}
@media (max-width: 768px) {
  .pion-options-panel {
    right: 4px !important;
    top: 58% !important;
    width: 150px !important;
    max-width: calc(100vw - 8px) !important;
    max-height: 52vh !important;
    padding: 5px !important;
    border-width: 2px !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px #494b4e, 0 3px 0 #000, 0 6px 14px rgba(0,0,0,.35) !important;
  }
  .pion-options-heading { padding: 1px 2px 4px !important; }
  .pion-options-title { font-size: 10px !important; gap: 4px !important; }
  .shape-button-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 3px !important; }
  .shape-choice { min-height: 34px !important; padding: 3px 2px !important; font-size: 7px !important; gap: 2px !important; }
  .shape-choice i { font-size: 10px !important; }
  .selection-mode-row { gap: 3px !important; }
  .pion-mode-btn { min-height: 30px !important; padding: 4px 3px !important; font-size: 7px !important; gap: 3px !important; }
  .selection-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 3px !important; }
  .selection-action-grid .pion-action-btn { min-height: 30px !important; padding: 4px 3px !important; font-size: 7px !important; gap: 3px !important; justify-content: center !important; text-align: center !important; flex-direction: column !important; }
  .selection-action-grid .pion-action-btn i { width: auto !important; font-size: 10px !important; }
  .pion-toggle-btn { min-height: 30px !important; padding: 4px 5px !important; font-size: 8px !important; gap: 4px !important; }
  .pion-toggle-state { font-size: 7px !important; padding: 2px 3px !important; }
}


/* Layers */
.layer-list .layer-item {
  position: relative; 
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 7px;
  margin: 0 0 6px;
  border: 3px solid #111;
  border-radius: 7px;
  background: #25262b;
  box-shadow: inset 0 0 0 2px #494b4e, 0 2px 0 #000;
  color: #d5d5d5;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.layer-list .layer-item:hover { background:#2d2f35; transform: translateY(-1px); }
.layer-list .layer-item.active {
  
  background: #303238;
  box-shadow: inset 0 0 0 2px #777981, 0 2px 0 #000;
}
.layer-list .layer-item.hidden { opacity: .68; }
.layer-list .layer-item.hidden .layer-name { text-decoration: line-through; opacity:.72; }
.layer-list .layer-visibility {
  flex: 0 0 34px; width:34px; height:34px;
  padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  border:3px solid #111; border-radius:6px;
  background:#202126; color:#d5d5d5;
  box-shadow: inset 0 0 0 2px #494b4e, 0 1px 0 #000;
  cursor:pointer; font-family:inherit;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.layer-list .layer-visibility:hover { background:#3a3b42; color:#fff; transform:scale(1.04); }
.layer-list .layer-visibility:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.layer-list .layer-visibility i { font-size:13px; line-height:1; }
.layer-list .layer-item.hidden .layer-visibility { color:#8f9198; }
.layer-list .layer-thumb {
  flex:0 0 32px; width:32px; height:32px;
  border:2px solid #111; border-radius:4px;
  background-color:#808080;
  background-image:linear-gradient(45deg,#666 25%,transparent 25%),linear-gradient(-45deg,#666 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#666 75%),linear-gradient(-45deg,transparent 75%,#666 75%);
  background-position:0 0,0 4px,4px -4px,-4px 0; background-size:8px 8px;
  image-rendering:pixelated; box-shadow:inset 0 0 0 1px #494b4e;
}
.layer-list .layer-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.layer-list .layer-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d5d5d5; font:12px 'Minecraft',sans-serif; }
.layer-list .layer-state { color:#8f9198; font:8px 'Minecraft',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.layer-list .layer-item.active .layer-state { color:#fff; }
@media (max-width:768px) {
  .layer-list .layer-item { min-height:46px; padding:5px; gap:6px; margin-bottom:5px; }
  .layer-list .layer-visibility { flex-basis:30px; width:30px; height:30px; border-width:2px; }
  .layer-list .layer-visibility i { font-size:11px; }
  .layer-list .layer-thumb { flex-basis:28px; width:28px; height:28px; }
  .layer-list .layer-name { font-size:10px; }
  .layer-list .layer-state { font-size:7px; }
}


#color-wheel.color-wheel,
.color-wheel-container #color-wheel {
  width: min(190px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 190px !important;
  max-height: 190px !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  #color-wheel.color-wheel,
  .color-wheel-container #color-wheel {
    width: min(176px, 100%) !important;
    max-width: 176px !important;
    max-height: 176px !important;
  }
}