/* NightKillerYT — Pattern studio (Sunburst, Halftone, Speed Lines, Gradient & Glow).
   Loaded after tools.css on those four pages, in the language of the home page's game cards: the tool is one glass
   box (.tool-app); inside it, each group of controls is a light glass card (the shared .panel) with a Sora title,
   one pink accent for what is picked, and opaque dark only where the picture (or code) shows. This file adds the
   studio pieces: the artboard with drag handles, the editing toolbar, the strip of looks, size choices, color
   swatches, the gradient stops editor and the image picker. On phones the preview stays on screen while you
   scroll the controls. Every animation is off with "reduce motion". */

.pattern-app {
  --stage-h: clamp(240px, calc(100vh - 360px), 620px);
}

/* ---------- sections: light glass cards that open and close ---------- */
/* The card itself is the shared .panel (glass border, 20 px radius, faint fill). Its header row is the toggle, so
   the header and the body carry the padding instead of the card. */
.pattern-panel {
  padding: 0;
}

.pattern-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: inherit;
  cursor: var(--nc-hand, pointer);
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pattern-panel-head::-webkit-details-marker {
  display: none;
}

.pattern-panel .panel-title {
  color: var(--text);
  font: 650 15px/1.25 var(--font-display);
  letter-spacing: -0.02em;
  text-transform: none;
}

.pattern-panel-head:hover .pattern-chevron {
  color: var(--text-2);
}

.pattern-chevron {
  color: var(--text-3);
  transform: rotate(-90deg);
}

.pattern-panel[open] > .pattern-panel-head .pattern-chevron {
  transform: none;
}

.pattern-panel > .panel-body {
  padding: 2px 16px 18px;
}

.pattern-tip {
  margin-top: -4px;
}

/* A slightly wider controls column than the shared default (stacked under 960px, see tools.css). */
@media (min-width: 961px) {
  .pattern-layout {
    grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
  }
}

/* ---------- choices ---------- */
.pattern-segmented label {
  flex: 1 1 0;
}

.pattern-segmented span {
  min-height: 40px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.pattern-segmented span .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.pattern-switch {
  min-height: 44px;
}

/* Choices with a small picture above the word (dot shapes, falloff curves). */
.segmented.pattern-shapes,
.segmented.pattern-curves {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.segmented.pattern-curves {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pattern-shapes span,
.pattern-curves span {
  flex-direction: column;
  gap: 4px;
  min-height: 58px;
  padding: 6px 2px;
  font-size: 11.5px;
}

.pattern-shapes span .icon,
.pattern-curves span .icon {
  width: 20px;
  height: 20px;
}

/* What is picked (a look, a size, a color, a stop): a pink line and a soft pink fill, nothing more. */
.pattern-swatch[aria-pressed="true"],
.pattern-size input:checked + .pattern-size-card,
.pattern-preset[aria-pressed="true"],
.pattern-stop.is-selected {
  border-color: var(--accent-line);
  background-color: var(--accent-soft);
}

/* ---------- color swatches ---------- */
.pattern-swatch-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pattern-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pattern-swatch,
.pattern-swatch-add {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background-color: transparent;
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
}

.pattern-swatch:hover:not([aria-pressed="true"]) {
  border-color: var(--glass-border-hover);
}

.pattern-swatch-chip {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.pattern-swatch-add {
  border-style: dashed;
  border-color: var(--glass-border-hover);
  color: var(--text-2);
}

.pattern-swatch-add:hover:not(:disabled) {
  border-color: var(--text-3);
  color: var(--text);
}

.pattern-swatch-add:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pattern-color-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.pattern-color-edit .color-field {
  flex: 1;
  min-width: 0;
}

.pattern-remove {
  min-height: 44px;
  flex: none;
}

.pattern-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- size ---------- */
.pattern-sizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pattern-size {
  position: relative;
  min-width: 0;
}

.pattern-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pattern-size-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background-color: transparent;
  cursor: var(--nc-hand, pointer);
}

.pattern-size-shape {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--text-3);
  border-radius: 5px;
}

.pattern-size-shape[data-shape="wide"] {
  height: 14px;
  width: 25px;
}

.pattern-size-shape[data-shape="custom"] {
  border-style: dashed;
}

.pattern-size-name {
  overflow: hidden;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-size-note {
  overflow: hidden;
  color: var(--text-3);
  font: 600 11.5px/1.3 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-size-card:hover {
  border-color: var(--glass-border-hover);
}

.pattern-size input:checked + .pattern-size-card .pattern-size-shape {
  border-color: var(--text-2);
}

.pattern-size input:focus-visible + .pattern-size-card {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pattern-dims {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 8px;
}

.pattern-dims .input {
  min-width: 0;
  padding: 0 6px 0 12px;
  font-family: var(--font-mono);
}

.pattern-dims .input-addon {
  padding: 0 9px;
  font-size: 13px;
}

/* The unit sits in the box on wider screens and moves into the label on phones, so four digits always fit (the
   boxes keep 16 px text there, so iPhones do not zoom in). */
.pattern-unit {
  display: none;
}

@media (max-width: 440px) {
  .pattern-unit {
    display: inline;
  }

  .pattern-dims .input-addon {
    display: none;
  }

  .pattern-dims .input-group > .input {
    border-radius: 12px;
  }
}

.pattern-swap {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
}

.pattern-swap:hover {
  border-color: var(--glass-border-hover);
  color: var(--text);
}

/* ---------- toolbar over the preview ---------- */
.pattern-toolbar {
  gap: 10px;
}

.pattern-meta {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.pattern-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.pattern-tool {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
}

.pattern-tool:hover:not(:disabled) {
  border-color: var(--glass-border-hover);
  color: var(--text);
}

.pattern-tool:disabled {
  opacity: 0.38;
  cursor: var(--nc-arrow, default);
}

/* ---------- the preview (artboard) ---------- */
.stage.pattern-stage {
  min-height: 0;
  padding: clamp(12px, 2vw, 22px);
  background: #0b0a0f;
}

.pattern-stage.is-dragover {
  border-color: var(--accent-line);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.pattern-frame {
  --ar: 1;
  position: relative;
  width: min(100%, calc(var(--stage-h) * var(--ar)));
  aspect-ratio: var(--ar);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 48px -24px rgba(0, 0, 0, 0.9);
}

.pattern-frame[data-aspect="wide"] {
  --ar: 1.7778;
}

.stage .pattern-canvas,
.pattern-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.pattern-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

.pattern-frame.is-active .pattern-guides {
  opacity: 1;
}

/* Separate rule: browsers without :has() skip only this one. */
.pattern-frame:has(.pattern-handle:focus-visible) .pattern-guides {
  opacity: 1;
}

.pattern-overlay {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: pan-y pinch-zoom;
}

.pattern-handle {
  --x: 50%;
  --y: 50%;
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.pattern-handle::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(8, 7, 11, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.5);
}

.pattern-handle.is-small::before {
  width: 15px;
  height: 15px;
  background: rgba(255, 255, 255, 0.3);
}

.pattern-handle.is-dragging {
  cursor: grabbing;
}

.pattern-handle.is-dragging::before,
.pattern-handle:hover::before {
  transform: scale(1.12);
}

.pattern-handle:focus-visible {
  outline: none;
}

.pattern-handle:focus-visible::before {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 5px var(--accent);
}

.pattern-noscript {
  padding: 18px;
  color: var(--text-2);
  text-align: center;
}

/* A message on the preview (for example "add your image"): plain text on the dark artboard. */
.pattern-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none;
}

.pattern-empty-text {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 300px;
  color: var(--text-2);
  text-align: center;
  pointer-events: auto;
}

.pattern-empty-text h3 {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.pattern-empty-text p {
  color: var(--text-3);
  font-size: 14px;
}

.pattern-empty-text .btn {
  min-height: 40px;
  margin-top: 6px;
}

/* ---------- the strip of looks ---------- */
.pattern-presets {
  --thumb-ar: 1.5;
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 4px 4px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.pattern-preset {
  display: grid;
  justify-items: center;
  gap: 7px;
  flex: none;
  min-width: 86px;
  padding: 6px 6px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background-color: transparent;
  color: var(--text-2);
  font: 650 12.5px/1.2 var(--font-body);
  cursor: var(--nc-hand, pointer);
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}

.pattern-preset-art {
  display: block;
  width: calc(62px * var(--thumb-ar));
  height: 62px;
  border-radius: 10px;
  background: #120f19;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.pattern-preset-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-preset:hover {
  color: var(--text);
}

.pattern-preset:hover:not([aria-pressed="true"]) {
  border-color: var(--glass-border-hover);
}

.pattern-preset[aria-pressed="true"] {
  color: var(--text);
}

.pattern-actions {
  margin-top: 6px;
}

/* ---------- image picker ---------- */
.dropzone.pattern-drop {
  min-height: 120px;
  padding: 22px 16px;
  gap: 6px;
  border-color: var(--glass-border-hover);
  background: transparent;
}

.dropzone.pattern-drop:hover,
.dropzone.pattern-drop:focus-visible {
  border-color: var(--text-3);
}

.dropzone.pattern-drop.is-dragover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.pattern-drop .dropzone-title {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.pattern-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
}

.pattern-file-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #120f19;
}

.pattern-file-text {
  display: grid;
  min-width: 0;
}

.pattern-file-name {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-file-meta {
  color: var(--text-3);
  font: 600 12px/1.4 var(--font-mono);
}

.pattern-file .btn {
  min-height: 40px;
}

.pattern-file .btn-icon {
  width: 40px;
}

.pattern-private {
  color: var(--text-3);
  font-size: 13px;
}

.pattern-image-size {
  justify-self: start;
  min-height: 40px;
}

/* ---------- seed (speed lines) ---------- */
.pattern-seed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.pattern-seed .input {
  font-family: var(--font-mono);
}

.pattern-seed .btn {
  min-height: 44px;
}

/* ---------- gradient stops (gradient & glow) ---------- */
.pattern-stops {
  display: grid;
  gap: 10px;
}

.pattern-stops-track {
  position: relative;
  height: 40px;
  margin: 6px 12px 4px;
  border-radius: 11px;
  cursor: copy;
  touch-action: none;
}

.pattern-stops-track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: #2a2533;
  background-image:
    linear-gradient(45deg, #1d1925 25%, transparent 25%),
    linear-gradient(-45deg, #1d1925 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1d1925 75%),
    linear-gradient(-45deg, transparent 75%, #1d1925 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
}

.pattern-stops-bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.pattern-stops-handles {
  position: absolute;
  inset: 0;
}

.pattern-stop {
  --p: 0%;
  --stop: #ffffff;
  position: absolute;
  top: 50%;
  left: var(--p);
  display: grid;
  place-items: center;
  width: 40px;
  height: 48px;
  margin: -24px 0 0 -20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background-color: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.pattern-stop::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--stop);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 3px 10px rgba(0, 0, 0, 0.5);
}

.pattern-stop.is-dragging {
  cursor: grabbing;
  z-index: 2;
}

.pattern-stop.is-leaving::before {
  opacity: 0.35;
  transform: scale(0.8);
}

.pattern-stop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.pattern-stop-edit {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.pattern-stop-head {
  color: var(--text-3);
  font: 600 12.5px/1.4 var(--font-mono);
}

.pattern-stop-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pattern-stop-buttons .btn {
  min-height: 40px;
  flex: 1 1 auto;
}

.pattern-stop-buttons .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Roblox code (gradient & glow) ---------- */
/* An open section under the studio, split from it by a thin line. */
.pattern-code {
  display: grid;
  gap: 12px;
  margin-top: clamp(16px, 2vw, 26px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 1px solid var(--glass-border);
}

.pattern-code-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}

.pattern-code-head h2 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.pattern-code-head p {
  color: var(--text-3);
  font-size: 14px;
}

.pattern-code .code-block pre {
  max-height: 420px;
}

.pattern-code-copy {
  min-height: 40px;
}

.pattern-code-note {
  color: var(--text-2);
  font-size: 14.5px;
}

.pattern-code-note strong {
  color: var(--text);
  font-weight: 650;
}

/* ---------- phones and tablets ---------- */
@media (max-width: 960px) {
  .pattern-app {
    --stage-h: min(33vh, 340px);
  }

  /* The preview, the looks and the buttons sit in the same column as the controls, so the preview can stay on
     screen while the controls scroll under it. */
  .pattern-layout > .tool-stage {
    display: contents;
  }

  .pattern-layout > .tool-stage > .pattern-view {
    order: -3;
    position: sticky;
    top: var(--header-height);
    z-index: 6;
    margin: -6px -6px 0;
    padding: 6px;
    border-radius: calc(var(--radius-lg) + 6px);
    background: rgba(14, 12, 19, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .pattern-layout > .tool-stage > .pattern-presets {
    order: -2;
    margin-top: 0;
  }

  .pattern-layout > .tool-stage > .pattern-actions {
    order: -1;
    margin-top: 0;
  }
}

/* Short screens (phones on their side): the preview scrolls with the page. */
@media (max-width: 960px) and (max-height: 560px) {
  .pattern-layout > .tool-stage > .pattern-view {
    position: static;
  }

  .pattern-app {
    --stage-h: 60vh;
  }
}

@media (max-width: 600px) {
  .pattern-toolbar {
    margin-bottom: 8px;
  }

  .pattern-tools {
    gap: 5px;
  }

  .pattern-actions .btn {
    flex: 1 1 auto;
  }

  .pattern-stage.stage {
    padding: 10px;
  }

  .pattern-preset {
    min-width: 80px;
  }

  .pattern-preset-art {
    width: calc(54px * var(--thumb-ar));
    height: 54px;
  }
}

@media (max-width: 380px) {
  .pattern-sizes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The smallest phones: the editing buttons get the whole row (the size still shows in the Size section). */
@media (max-width: 359px) {
  .pattern-meta {
    display: none;
  }
}

/* ---------- motion (only when allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pattern-chevron {
    transition:
      transform var(--medium) var(--ease-out),
      color var(--medium) var(--ease-out);
  }

  .pattern-guides {
    transition: opacity var(--fast) var(--ease-out);
  }

  .pattern-handle::before,
  .pattern-stop::before {
    transition:
      transform var(--fast) var(--ease-out),
      opacity var(--fast) var(--ease-out);
  }

  .pattern-swatch,
  .pattern-swatch-add,
  .pattern-tool,
  .pattern-swap,
  .pattern-size-card,
  .pattern-preset,
  .pattern-stop {
    transition:
      border-color var(--medium) var(--ease-out),
      background-color var(--medium) var(--ease-out),
      color var(--medium) var(--ease-out),
      transform var(--medium) var(--ease-out);
  }

  .pattern-preset:active,
  .pattern-tool:active:not(:disabled) {
    transform: scale(0.97);
  }

  .pattern-app.is-ready .pattern-canvas {
    animation: pattern-in 420ms var(--ease-out);
  }
}

@keyframes pattern-in {
  from {
    opacity: 0;
  }
}