/* ============================================================
   SKIN EDITOR — widget stylesheet
   ------------------------------------------------------------
   100% scoped: every rule lives under #skineditor and every
   class carries the  skineditor_  prefix. Nothing here can
   affect the host page, and host styles can only win by also
   targeting #skineditor.

   Size the widget from the host page, e.g.:
     #skineditor { width: 900px; height: 640px; }
   ============================================================ */

#skineditor {
  /* theme tokens (scoped to the widget) */
/*   --skineditor-bg: #12141a;
  --skineditor-bg-raised: #1a1d26; */
  --skineditor-bg: #2B2D42;
  --skineditor-bg-raised: #2B2D42;
  --skineditor-bg-inset: #0d0f14;
  --skineditor-border: #2a2e3a;
  --skineditor-text: #e8eaf0;
  --skineditor-text-dim: #9aa1b2;
  --skineditor-accent: #3ac9ed;
  --skineditor-accent-hover: #5cbef6;
  --skineditor-danger: #ef4444;
  --skineditor-radius: 10px;
  --skineditor-zoom: 1; /* controlled by the zoom slider */

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--skineditor-bg);
  color: var(--skineditor-text);
  width: 750px;
  height: 100%;
  min-width: 560px;
  min-height: 480px;
  overflow: hidden;
  text-align: left;
  line-height: 1.4;
}

#skineditor *,
#skineditor *::before,
#skineditor *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#skineditor button {
  font-family: inherit;
  line-height: 1.4;
}

.skineditor_layout {
  display: flex;
  width: 100%;
  height: 100%;
}

/* ======================= Sidebar ======================= */
#skineditor .skineditor_sidebar {
  width: 270px;
  flex-shrink: 0;
  background: var(--skineditor-bg-raised);
  border-right: 1px solid var(--skineditor-border);
  padding: 15px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

#skineditor .skineditor_header h1 {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--skineditor-text);
}

#skineditor .skineditor_header p {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--skineditor-text-dim);
}

#skineditor .skineditor_panel h2 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--skineditor-text-dim);
  margin-bottom: 8px;
  font-weight: 600;
}

/* ---------- Tools & brush types ---------- */
#skineditor .skineditor_tool_row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

#skineditor .skineditor_brush_row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

#skineditor .skineditor_tool_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  background: var(--skineditor-bg-inset);
  border: 1px solid var(--skineditor-border);
  border-radius: var(--skineditor-radius);
  color: var(--skineditor-text-dim);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

#skineditor .skineditor_tool_btn:hover {
  border-color: var(--skineditor-accent);
  color: var(--skineditor-text);
}

#skineditor .skineditor_tool_btn.active {
    border-color: var(--skineditor-accent);
    background: color-mix(in srgb, var(--skineditor-accent) 18%, #10b4c1);
    color: var(--skineditor-text);
}

#skineditor .skineditor_tool_icon {
  display: grid;
  place-items: center;
  height: 18px;
}
#skineditor .skineditor_tool_label { font-size: 10px; }

/* Inline SVG icons (sprite): inherit the button color via currentColor,
   zero external requests. Stroke-based 24×24 Lucide-style paths. */
#skineditor .skineditor_icon {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- Size ---------- */
#skineditor .skineditor_size_row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#skineditor .skineditor_size_row input[type="range"] {
  flex: 1;
  accent-color: var(--skineditor-accent);
}

#skineditor .skineditor_size_value {
  font-size: 12px;
  color: var(--skineditor-text-dim);
  min-width: 2.5ch;
  text-align: right;
}

#skineditor .skineditor_size_preview_wrap {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--skineditor-bg-inset);
  border: 1px solid var(--skineditor-border);
  border-radius: 50%;
  flex-shrink: 0;
}

#skineditor .skineditor_size_preview {
  border-radius: 50%;
  background: var(--skineditor-accent);
}

/* ---------- Colors ---------- */
#skineditor .skineditor_panel_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

#skineditor .skineditor_panel_head h2 { margin-bottom: 0; }

#skineditor .skineditor_target_toggle {
    display: flex;
    background: var(--skineditor-bg-inset);
    border: 1px solid var(--skineditor-border);
    border-radius: 8px;
    overflow: hidden;
    margin-left: 25%;
}

#skineditor .skineditor_target_toggle button {
  border: none;
  background: none;
  color: var(--skineditor-text-dim);
  font-size: 9px;
  padding: 4px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.12s, color 0.12s;
}

#skineditor .skineditor_target_toggle .skineditor_icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.4;
}

#skineditor .skineditor_target_toggle button.active {
  background: var(--skineditor-accent);
  color: #fff;
}

#skineditor .skineditor_swatch_grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

#skineditor .skineditor_swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}

#skineditor .skineditor_swatch:hover { transform: scale(1.12); }

#skineditor .skineditor_swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--skineditor-bg-raised), 0 0 0 4px var(--skineditor-accent);
}

#skineditor .skineditor_color_row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#skineditor .skineditor_custom_color {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--skineditor-text-dim);
  cursor: pointer;
}

#skineditor .skineditor_custom_color input[type="color"] {
  width: 28px;
  height: 28px;
  border: 1px solid var(--skineditor-border);
  border-radius: 6px;
  background: none;
  padding: 2px;
  cursor: pointer;
}

#skineditor .skineditor_current_color_wrap {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--skineditor-bg-inset);
  border: 1px solid var(--skineditor-border);
  border-radius: 50%;
  flex-shrink: 0;
}

#skineditor .skineditor_current_color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* ---------- Actions ---------- */
#skineditor .skineditor_action_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

/* Stack of full-width action buttons (Export / Export JSON / Save PNG) */
#skineditor .skineditor_panel > .skineditor_export_btn + .skineditor_export_btn {
  margin-top: 6px;
}

#skineditor .skineditor_action_btn {
  padding: 8px 10px;
  background: var(--skineditor-bg-inset);
  border: 1px solid var(--skineditor-border);
  border-radius: var(--skineditor-radius);
  color: var(--skineditor-text);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.12s, background 0.12s;
}

#skineditor .skineditor_action_btn:hover {
  border-color: var(--skineditor-accent);
  background: color-mix(in srgb, var(--skineditor-accent) 12%, var(--skineditor-bg-inset));
}

#skineditor .skineditor_action_btn.primary {
  background: #00d3ff;
  color: #fff;
  border: 2px solid #00a7ca;
}

#skineditor .skineditor_action_btn.primary:hover { background: #00a7ca; }

#skineditor .skineditor_action_btn.danger {
  background: var(--skineditor-danger);
  border-color: var(--skineditor-danger);
  color: #fff;
}

#skineditor .skineditor_action_btn.danger:hover { background: #dc2626; }

#skineditor .skineditor_action_btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#skineditor .skineditor_export_btn {
  width: 100%;
  padding: 10px;
  background: var(--skineditor-accent);
  border: none;
  border-radius: var(--skineditor-radius);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.12s;
}

#skineditor .skineditor_export_btn:hover { background: var(--skineditor-accent-hover); }

#skineditor .skineditor_export_btn.secondary {
    background: #20ad18;
    border: 2px solid #185f06;
    color: var(--skineditor-text);
    font-weight: 500;
}

#skineditor .skineditor_export_btn.secondary:hover {
    background: #0c6f06;
    border: 2px solid #32871c;
    color: var(--skineditor-text);
    font-weight: 900;
}

/* ---------- Zoom ---------- */
#skineditor .skineditor_zoom_row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#skineditor .skineditor_zoom_row input[type="range"] {
  flex: 1;
  accent-color: var(--skineditor-accent);
}

/* ---------- Footer / save status ---------- */
#skineditor .skineditor_sidebar_footer {
    margin-top: auto;
    /* padding-top: 10px; */
    /* border-top: 1px solid var(--skineditor-border); */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 8px; */
}

#skineditor #skineditor_saveStatus {
  font-size: 8px;
  color: var(--skineditor-text-dim);
  white-space: nowrap;
}

#skineditor .skineditor_clear_save_btn {
  flex-shrink: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--skineditor-text-dim);
  font-size: 8px;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: underline dotted;
  transition: color 0.12s;
}

#skineditor .skineditor_clear_save_btn:hover { color: var(--skineditor-danger); }

/* ======================= Stage ======================= */
#skineditor .skineditor_stage {
  flex: 1;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

#skineditor .skineditor_stage_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Let the scroll area grow with the zoomed canvas instead of centering
     oversized content into the space beside the toolbox. */
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0 12px 14px;
}

/* The frame is a circular wrapper: the colored border ring sits *around*
   the drawing area as a DOM element, so it is never part of the canvas
   pixels (drawing can't touch it, exports exclude it). */
#skineditor .skineditor_canvas_frame {
  position: relative;
  width: calc(min(50vmin, 420px) * var(--skineditor-zoom));
  max-width: none;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 4px; /* ring thickness */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

#skineditor .skineditor_ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--skineditor-ring-color, #22d3ee);
}

#skineditor .skineditor_disc {
  position: absolute;
  inset: 4px; /* ring thickness */
  border-radius: 50%;
  overflow: hidden;
  /* Checkerboard to visualize transparency (only matters before the
     first background paint) */
  background:
    conic-gradient(#232733 0 25%, #1a1d26 0 50%, #232733 0 75%, #1a1d26 0)
    0 0 / 24px 24px;
}

#skineditor #skineditor_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none; /* pointer events, no scroll-drag on touch */
  cursor: crosshair;
  border-radius: 50%;
}

#skineditor .skineditor_hint {
  font-size: 9px;
  color: var(--skineditor-text-dim);
}

#skineditor .skineditor_hint kbd {
  padding: 1px 5px;
  border: 1px solid var(--skineditor-border);
  border-radius: 4px;
  background: var(--skineditor-bg-inset);
  font-family: inherit;
  font-size: 0.72rem;
}

/* ======================= Dialogs =======================
   Fixed to the viewport so they always cover the whole screen.
   (Note: if the host page places the widget inside a CSS-transformed
   ancestor, fixed positioning is relative to that ancestor instead.) */
#skineditor .skineditor_dialog_backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 9999;
}

#skineditor .skineditor_dialog_backdrop.hidden { display: none; }

#skineditor .skineditor_dialog {
  width: min(450px, 92vw);
  background: var(--skineditor-bg-raised);
  border: 1px solid var(--skineditor-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

#skineditor .skineditor_dialog.small {
  width: min(380px, 92vw);
}

#skineditor .skineditor_dialog_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

#skineditor .skineditor_dialog_header h2 {
  font-size: 18px;
  color: var(--skineditor-text);
}

#skineditor .skineditor_dialog_text {
  font-size: 14px;
  color: var(--skineditor-text-dim);
  margin-bottom: 14px;
}

#skineditor .skineditor_submission_message {
  color: var(--skineditor-text);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-line;
  margin-bottom: 14px;
}

#skineditor .skineditor_submission_message.skineditor_submission_error {
  color: var(--skineditor-danger);
}

#skineditor .skineditor_dialog_close {
  background: none;
  border: none;
  color: var(--skineditor-text-dim);
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: color 0.12s, background 0.12s;
}

#skineditor .skineditor_dialog_close .skineditor_icon {
  width: 14px;
  height: 14px;
}

#skineditor .skineditor_dialog_close:hover {
  color: var(--skineditor-text);
  background: var(--skineditor-bg-inset);
}

#skineditor #skineditor_exportOutput {
  width: 100%;
  height: 180px;
  resize: none;
  background: var(--skineditor-bg-inset);
  border: 1px solid var(--skineditor-border);
  border-radius: var(--skineditor-radius);
  color: var(--skineditor-text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-all;
}

#skineditor #skineditor_exportOutput:focus {
  outline: none;
  border-color: var(--skineditor-accent);
}

#skineditor .skineditor_dialog_actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#skineditor .skineditor_copied {
  border-color: #22c55e !important;
  color: #22c55e !important;
}

/* ---------- Submit dialog: rules list + skin name ---------- */
#skineditor .skineditor_dialog.rules {
  width: min(480px, 92vw);
}

#skineditor .skineditor_rules {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#skineditor .skineditor_rules li {
  position: relative;
  padding-left: 18px;
  font-size: 12px;
  font-family: "Ubuntu";
}

#skineditor .skineditor_rules li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--skineditor-accent);
}

#skineditor .skineditor_name_label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--skineditor-text-dim);
}

#skineditor .skineditor_name_input {
    width: 100%;
    padding: 9px 10px;
    background: var(--skineditor-bg-inset);
    border: 1px solid var(--skineditor-border);
    border-radius: var(--skineditor-radius);
    color: var(--skineditor-text);
    font-family: 'Ubuntu';
    font-size: 10px;
    transition: border-color 0.12s;
}

#skineditor .skineditor_name_input:focus {
  outline: none;
  border-color: var(--skineditor-accent);
}

#skineditor .skineditor_name_input.invalid {
  border-color: var(--skineditor-danger);
}

#skineditor .skineditor_name_input::placeholder {
  color: color-mix(in srgb, var(--skineditor-text-dim) 60%, transparent);
}

#skineditor .skineditor_name_hint {
  margin-top: 6px;
  font-size: 0.68rem;
  color: var(--skineditor-text-dim);
}

#skineditor .skineditor_form_error {
  min-height: 1.1em;
  margin-top: 6px;
  font-size: 10px;
  color: var(--skineditor-danger);
}

/* ---------- small screens (widget is wide; stack below 640px) ---------- */
@media (max-width: 640px) {
  #skineditor { min-width: 0; }
  #skineditor .skineditor_layout { flex-direction: column; }
  #skineditor .skineditor_sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--skineditor-border);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    overflow-y: visible;
  }
  #skineditor .skineditor_header { width: 100%; }
  #skineditor .skineditor_panel { flex: 1; min-width: 140px; }
  #skineditor .skineditor_sidebar_footer { border-top: none; margin-top: 0; width: 100%; }
  #skineditor .skineditor_canvas_frame {
    width: calc(min(80vw, 420px) * var(--skineditor-zoom));
  }
}