/* ===== Brush.Ninja wrapper styling — fixed: centered, responsive, site-matched ===== */

/* local safeguard: predictable sizing */
.brush-wrap,
.brush-wrap * {
  box-sizing: border-box;
}

/* default wrapper — matches site panels and respects --fb-max-width */
.brush-wrap {
    width: 300%;
  padding: calc(var(--space) * 0.75) calc(var(--space));
  padding-bottom: 2rem;
  border-radius: var(--radius);
    background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-soft);
  position: relative;
  max-width: var(--fb-max-width, 900px);
  margin: 1.5rem auto 3rem auto;
}

/* full-bleed modifier (spans the whole .wrap row) */
.brush-wrap.full-bleed {
  grid-column: 1 / -1;            /* requires .brush-wrap to be placed inside .wrap */
  max-width: var(--site-max-width);
  margin: calc(var(--space) * 0.5) auto;
}

/* subtle focus affordance for keyboard users */
.brush-wrap:focus-within {
  box-shadow: 0 8px 30px rgba(0,0,0,0.16), 0 0 22px color-mix(in srgb, var(--accent2) 18%, transparent);
  transform: translateY(-2px);
}

/* drawing widget element (canvas/paper) */
brush-ninja-drawing,
#brush-canvas {
  display: block;
  width: 100% !important;                 /* always fill wrapper width */
  height: 560px;                          /* comfortable default desktop height */
  min-height: 360px;
  border: none;
  border-radius: calc(var(--radius) - 4px);
  /* use --canvas-bg if present, fallback to panel background */
  background: var(--canvas-bg, var(--panel-bg));
  /* safe box-shadow fallback if --shadow-medium not defined */
  box-shadow: var(--shadow-medium, inset 0 -6px 18px rgba(0,0,0,0.06));
  overflow: hidden;
  min-width: 0;
}

/* larger canvas on very wide screens */
@media (min-width: 1200px) {
  brush-ninja-drawing,
  #brush-canvas {
    height: 680px;
    min-height: 520px;
  }
}

/* mobile responsiveness */
@media (max-width: 720px) {
  .brush-wrap {
    padding: calc(var(--space) * 0.5);
    border-radius: calc(var(--radius) - 4px);
    max-width: 100%;
    margin: 0.75rem auto;
  }

  brush-ninja-drawing,
  #brush-canvas {
    height: 56vh;
    min-height: 300px;
  }
}

/* controls row */
.draw-controls {
  margin-top: .6rem;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* control buttons (site visual parity) */
.draw-controls .btn {
    background: var(--btn-bg);
  color: var(--text-main);
  border: 1px solid rgba(255,255,255,0.04);
  padding: .5rem .75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--ui-fast) ease, box-shadow var(--ui-fast) ease;
}
.draw-controls .btn:hover,
.draw-controls .btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
.draw-controls .btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* hint text behaviour */
.draw-controls .hint {
  font-size: .9rem;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}
@media (min-width: 720px) {
  .draw-controls .hint { margin-left: auto; }
}

/* reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .brush-wrap,
  .draw-controls .btn { transition: none !important; }
}

/* safe fallback noise/texture — low opacity overlay */
.brush-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('https://kalev2005.neocities.org/Assets/Textures/noise.png');
  opacity: 0.03;
  mix-blend-mode: overlay;
  border-radius: inherit;
}

/* subtle vignette overlay */
.brush-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--vignette-mid) 60%, transparent 0%) 100%);
  opacity: 0.35;
  border-radius: inherit;
}