/* ===== COMIC PANELS ===== */
.comic-panel {
  position: absolute;
  border: 3px solid #222;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.comic-panel:hover { box-shadow: inset 0 0 0 2px #ff9800; }
.comic-panel.active-panel { box-shadow: inset 0 0 0 3px #ff9800; }
.comic-panel canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Elements layered on top of the drawing canvas */
.panel-elements {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.panel-elements > * { pointer-events: auto; }

/* ===== TEXT BUBBLES ===== */
.text-bubble {
  position: absolute;
  padding: 10px 16px;
  font-family: 'Comic Neue', cursive;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  min-width: 60px;
  min-height: 36px;
  cursor: grab;
  user-select: none;
  outline: none;
  z-index: 5;
  line-height: 1.3;
  word-wrap: break-word;
  max-width: 80%;
}
.text-bubble:focus { box-shadow: 0 0 0 2px #ff9800; }
.text-bubble.dragging { cursor: grabbing; opacity: 0.85; }
.text-bubble .delete-handle {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.text-bubble:hover .delete-handle,
.text-bubble:focus .delete-handle { display: flex; }

/* Bubble styles */
.bubble-speech {
  background: #fff;
  border: 2px solid #222;
  border-radius: 18px;
}
.bubble-speech::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #222;
}
.bubble-speech::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 22px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 11px solid #fff;
  z-index: 1;
}

.bubble-thought {
  background: #fff;
  border: 2px solid #222;
  border-radius: 24px;
}
.bubble-thought::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 24px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #222;
  border-radius: 50%;
}
.bubble-thought::before {
  content: '';
  position: absolute;
  bottom: -28px;
  left: 20px;
  width: 6px;
  height: 6px;
  background: #fff;
  border: 2px solid #222;
  border-radius: 50%;
  z-index: 1;
}

.bubble-shout {
  background: #fff9c4;
  border: 3px solid #222;
  clip-path: polygon(
    0% 10%, 8% 0%, 18% 12%, 30% 0%, 42% 8%, 55% 0%, 68% 10%, 80% 0%, 90% 12%, 100% 2%,
    98% 18%, 100% 35%, 95% 50%, 100% 65%, 98% 80%, 100% 90%, 88% 100%, 72% 95%, 58% 100%,
    42% 95%, 28% 100%, 14% 95%, 0% 100%, 2% 82%, 0% 65%, 5% 50%, 0% 35%, 2% 20%
  );
  padding: 18px 22px;
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bubble-narration {
  background: #fff8e1;
  border: 2px solid #bbb;
  border-radius: 4px;
  font-style: italic;
  font-weight: 400;
}

.bubble-textbox {
  background: transparent;
  border: none;
  border-radius: 0;
  font-weight: 700;
  font-size: 16px;
  color: #222;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.7);
  min-width: 40px;
}
.bubble-textbox:focus {
  box-shadow: 0 0 0 2px #ff9800;
  background: rgba(255,255,255,0.5);
}

/* ===== STAMPS ===== */
.stamp-element {
  position: absolute;
  font-size: 64px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  z-index: 4;
  transition: transform 0.1s;
}
.stamp-element:hover { transform: scale(1.1); }
.stamp-element.dragging { cursor: grabbing; opacity: 0.8; }
.stamp-element .delete-handle {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.stamp-element:hover .delete-handle { display: flex; }

/* resize handle */
.resize-handle {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  background: #ff9800;
  border-radius: 3px;
  cursor: nwse-resize;
  display: none;
  z-index: 11;
}
.stamp-element:hover .resize-handle,
.text-bubble:hover .resize-handle,
.text-bubble:focus .resize-handle,
.image-element:hover .resize-handle { display: block; }

/* ===== UPLOADED IMAGES ===== */
.image-element {
  position: absolute;
  cursor: grab;
  user-select: none;
  z-index: 4;
  transition: transform 0.1s;
}
.image-element img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  pointer-events: none;
}
.image-element:hover { transform: scale(1.02); }
.image-element.dragging { cursor: grabbing; opacity: 0.8; }
.image-element .delete-handle {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.image-element:hover .delete-handle { display: flex; }

/* ===== SOUND EFFECT STAMPS ===== */
.stamp-sfx .sfx-stamp {
  display: inline-block;
  font-family: 'Fredoka One', 'Comic Neue', cursive;
  font-weight: 900;
  font-size: inherit;
  padding: 0.15em 0.3em;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  border-radius: 4px;
  white-space: nowrap;
}
.sfx-burst {
  clip-path: polygon(
    50% 0%, 63% 10%, 75% 0%, 80% 15%, 98% 10%, 88% 28%, 100% 40%,
    90% 50%, 100% 62%, 88% 72%, 98% 88%, 78% 82%, 72% 100%, 60% 88%,
    50% 100%, 40% 88%, 28% 100%, 22% 82%, 2% 88%, 12% 72%, 0% 62%,
    10% 50%, 0% 40%, 12% 28%, 2% 10%, 20% 15%, 25% 0%, 37% 10%
  );
  padding: 0.4em 0.5em;
}
.sfx-jagged {
  clip-path: polygon(
    0% 15%, 10% 0%, 25% 12%, 40% 0%, 55% 10%, 70% 0%, 85% 8%, 100% 0%,
    95% 25%, 100% 50%, 95% 75%, 100% 100%,
    85% 92%, 70% 100%, 55% 90%, 40% 100%, 25% 88%, 10% 100%, 0% 85%,
    5% 60%, 0% 40%
  );
  padding: 0.35em 0.45em;
}
.sfx-swoosh {
  border-radius: 50% 20% 50% 20%;
  padding: 0.25em 0.6em;
  font-style: italic;
}
.sfx-round {
  border-radius: 50%;
  padding: 0.4em 0.5em;
}

/* Thumbnail in stamp picker */
.sfx-thumb {
  font-family: 'Fredoka One', cursive;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* ===== EMOTION STICKERS ===== */
.stamp-emotion {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
}

/* ===== PANEL BORDER STYLES ===== */
.comic-panel.border-dashed { border-style: dashed; }
.comic-panel.border-dotted { border-style: dotted; }
.comic-panel.border-double { border-style: double; border-width: 4px; }
.comic-panel.border-wavy {
  border: none;
  outline: 3px solid #222;
  outline-offset: -3px;
  border-radius: 20px 5px 20px 5px;
}
.comic-panel.border-rough {
  border: 3px solid #222;
  border-radius: 2px 8px 4px 10px;
  box-shadow: 1px 1px 0 #222, -1px -1px 0 #222;
}
.comic-panel.border-cloud {
  border: none;
  border-radius: 30px;
  box-shadow: 0 0 0 3px #222;
}
.comic-panel.border-none { border: none; }

/* ===== BORDER STYLE PICKER ===== */
.border-style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.border-style-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.border-style-btn:hover { border-color: #ffb74d; }
.border-style-btn.active { border-color: #ff9800; background: #fff3e0; }
.border-style-btn span { font-size: 9px; color: #888; }

.border-preview {
  width: 36px;
  height: 24px;
  background: #fff;
}
.border-preview-solid { border: 2px solid #222; }
.border-preview-dashed { border: 2px dashed #222; }
.border-preview-dotted { border: 2px dotted #222; }
.border-preview-double { border: 3px double #222; }
.border-preview-wavy { border: 2px solid #222; border-radius: 10px 3px 10px 3px; }
.border-preview-rough { border: 2px solid #222; border-radius: 1px 5px 2px 6px; box-shadow: 0.5px 0.5px 0 #222; }
.border-preview-cloud { border: 2px solid #222; border-radius: 12px; }
.border-preview-none { border: 2px solid #ddd; opacity: 0.4; }