body {
  min-height: 100vh;
  margin: 0;
  position: relative;
  overflow-x: hidden;
  /* I wanted to create a collage magazine-style effect, so the background design uses overlapping rectangles in different colors and angles. */
  /* For the color palette, I referenced some 90s Japanese fashion magazine covers, mainly using pink and purple, while adding yellow and mint green as contrasting accent colors to avoid visual fatigue caused by too many similar tones. */
  /* The largest areas of the page use a desaturated dusty pink tone to ensure the background does not overpower the main visual focus. */
  background:
  /* dusty rose top block */
    linear-gradient(168deg, rgba(176, 88, 128, 0.58) 0 15%, transparent 15%),
    /* soft pink paper strip */
    linear-gradient(
        168deg,
        transparent 0 22%,
        rgba(244, 159, 190, 0.48) 22% 36%,
        transparent 36%
      ),
    /* mint green magazine patch */
    linear-gradient(
        110deg,
        transparent 0 8%,
        rgba(174, 212, 162, 0.38) 8% 20%,
        transparent 20%
      ),
    /* cream yellow diagonal */
    linear-gradient(
        24deg,
        transparent 0 50%,
        rgba(248, 226, 174, 0.62) 50% 61%,
        transparent 61%
      ),
    /* coral pink right block */
    linear-gradient(24deg, transparent 0 68%, rgba(224, 91, 126, 0.44) 68% 100%),
    /* pale blue small contrast */
    linear-gradient(
        135deg,
        transparent 0 72%,
        rgba(145, 183, 210, 0.24) 72% 82%,
        transparent 82%
      ),
    #efabc5;

  background-attachment: fixed;

  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: Arial, sans-serif;
  padding-top: 30px;
}

.slider-note,
.hint,
.download-area p,
.sticker-title {
  font-family: Arial, Helvetica, sans-serif;
}
/* The rotated angle imitates the style of magazine headlines, while the added shadow helps the title stand out and appear more visually attractive than the other text on the webpage. */
header {
  margin-bottom: 8px;
  transform: rotate(-4deg);
  position: relative;
  z-index: 30;
}
/* image editor */
header h1 {
  position: relative;
  margin: 0;

  font-family: "Times New Roman", Georgia, serif;
  font-size: 96px;
  font-style: italic;
  font-weight: 700;

  color: #fff7fb;
  /* The saturation of the title background color was increased to prevent the heading from blending into the grey-toned background. */
  background: rgba(171, 40, 99, 0.78);

  padding: 26px 90px 30px;

  letter-spacing: -5px;
  line-height: 1;

  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);

  box-shadow:
    12px 12px 0 rgba(224, 91, 126, 0.42),
    -8px -6px 0 rgba(248, 226, 174, 0.35);

  text-shadow:
    3px 3px 0 rgba(224, 91, 126, 0.85),
    6px 6px 0 rgba(255, 255, 255, 0.2);
}
/* Font size and weight were adjusted to establish a clear visual hierarchy. The addition of katakana also helps emphasize the Japanese magazine-inspired aesthetic. The idea of perfectly centering the subtitles was intentionally avoided to create a slight sense of irregularity and freedom. */
header h1::after {
  content: "イメージエディター  /  TOKYO 1998";

  display: block;

  margin-top: 12px;
  margin-left: 18px;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;

  color: #ffe8f3;

  letter-spacing: 6px;
  line-height: 1;

  text-shadow: none;
}
/* main */
#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  margin-top: 70px;
}
.upload-btn,
#downloadBtn {
  /* softer paper-label feeling */
  background: rgba(248, 226, 174, 0.92);

  color: #8f3e67;

  border: none;

  padding: 18px 56px;

  /* changed from industrial narrow font
     to magazine serif italic */
  font-family: Georgia, "Times New Roman", serif;

  font-size: 24px;

  font-style: italic;
  font-weight: 700;

  letter-spacing: 1px;

  box-shadow: 10px 10px 0 rgba(224, 91, 126, 0.16);

  transform: rotate(-1deg);

  cursor: pointer;

  transition: 0.15s ease;
}
/* Provides an interactive button experience. */
.upload-btn:hover,
#downloadBtn:hover {
  background: rgba(255, 244, 248, 0.95);
  transform: translateY(-2px) rotate(-1deg);
  opacity: 0.92;
}
/* arrow style */
.scroll-arrow {
  margin-top: 50px;
  margin-bottom: -10px;

  text-align: center;

  color: rgba(60, 32, 45, 0.75);

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  font-weight: 900;

  letter-spacing: 2px;

  animation: floatArrow 1.6s ease-in-out infinite;

  position: relative;
  z-index: 30;

  pointer-events: none;
}

.scroll-arrow span {
  display: block;

  font-size: 110px;

  line-height: 0.8;

  font-weight: 900;

  color: rgba(143, 62, 103, 0.82);

  text-shadow: 8px 8px 0 rgba(224, 91, 126, 0.18);

  letter-spacing: -8px;
}

.scroll-arrow small {
  display: block;

  margin-top: 10px;

  font-size: 9px;

  letter-spacing: 4px;

  opacity: 0.72;
}
@keyframes floatArrow {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }

  100% {
    transform: translateY(0);
  }
}

.download-area {
  text-align: center;

  margin-top: 18px;
  margin-bottom: 32px;

  color: rgba(95, 80, 90, 0.75);
  font-weight: bold;
  letter-spacing: 0.5px;

  position: relative;
  z-index: 30;
}

.download-area p {
  margin-bottom: 12px;
}

.hint {
  text-align: center;
  color: rgba(95, 80, 90, 0.75);
  font-weight: bold;
  letter-spacing: 0.5px;

  margin-top: 0;
  margin-bottom: 14px;

  position: relative;
  z-index: 30;
}

.hint small {
  font-size: 10px;
  color: #aaa;
  /* I chose this color to make it different from main text */
}

/* ==============================
   MAIN EDITOR LAYOUT
  
   Use a stable 3-column structure instead of huge absolute top values.
   This keeps the magazine style but makes the editor easier to use.
================================= */

.editor-layout {
  width: min(1480px, 94vw);

  display: grid;
  grid-template-columns: 240px minmax(620px, 760px) 300px;
  gap: 36px;

  align-items: start;

  margin-top: 34px;
  margin-bottom: 34px;

  position: relative;
  z-index: 20;
}

/* ==============================
   LEFT FILTER CARD
  
   This changes the left buttons from loose UI buttons into a magazine sidebar.
================================= */

.filter-card {
  padding: 22px 18px;

  background: rgba(255, 244, 248, 0.56);

  box-shadow: 12px 12px 0 rgba(176, 88, 128, 0.14);

  transform: rotate(-3deg);

  position: relative;
}

.filter-card::before {
  content: "soft film texture\A print-like shadow\A dreamy tone ♡";

  white-space: pre-line;

  position: absolute;
  left: 18px;
  bottom: -90px;

  width: 170px;

  padding: 16px 18px;

  border: 1px solid rgba(60, 32, 45, 0.35);
  border-radius: 50%;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.35;

  color: rgba(60, 32, 45, 0.74);

  transform: rotate(-6deg);
}

.filter-card h2 {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-style: italic;
  color: #8f3e67;
}

.filter-card > small {
  display: block;

  margin-top: 4px;
  margin-bottom: 18px;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 3px;

  color: rgba(35, 20, 25, 0.75);
}

.filter-item {
  margin-bottom: 16px;
  padding-bottom: 12px;

  border-bottom: 1px solid rgba(176, 88, 128, 0.18);
}

.filter-item button {
  border: none;

  padding: 7px 13px;

  color: white;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;

  box-shadow: 5px 5px 0 rgba(224, 91, 126, 0.18);

  cursor: pointer;

  transform: rotate(-2deg);
}
/* The button colors continue the contrasting color approach, also inspired by the small subtitle elements commonly seen on 90s Japanese magazine covers. */
#grayBtn {
  background: rgba(224, 91, 126, 0.9);
}

#invertBtn {
  background: rgba(111, 190, 177, 0.88);
}

#sepiaBtn {
  background: rgba(176, 88, 128, 0.86);
}

#resetFilterBtn {
  background: rgba(248, 226, 174, 0.95);
  color: #8f3e67;
}

.filter-item p {
  margin: 8px 0 0;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: 1px;

  color: rgba(35, 20, 25, 0.86);

  text-transform: lowercase;
}

/* ==============================
   CENTER CANVAS
   
   Add small decorative labels around the canvas, not inside the functional area.
   
================================= */
/* The canvas itself uses a semi-transparent design so it can blend naturally with the overall webpage. The blurred effect in the center helps maintain visual harmony while still keeping the canvas distinguishable. */
.canvas-zone {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.canvas-sticker-label {
  position: absolute;
  left: -26px;
  top: -22px;

  padding: 8px 18px;

  background: rgba(248, 226, 174, 0.9);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 700;

  color: #8f3e67;

  box-shadow: 6px 6px 0 rgba(224, 91, 126, 0.18);

  transform: rotate(-12deg);

  z-index: 5;
}

#stageContainer {
  width: min(760px, 70vw);
  height: 640px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.04)
  );

  border: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 26px;

  backdrop-filter: blur(6px);

  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.12),
    inset 0 0 40px rgba(255, 255, 255, 0.06);

  overflow: hidden;

  position: relative;
}

.canvas-note {
  margin-top: 18px;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;

  letter-spacing: 3px;

  color: rgba(60, 32, 45, 0.7);
}

/* ==============================
   RIGHT PANEL
   
   Keep brightness/contrast and sticker archive close, like a magazine side column.
================================= */

.right-panel {
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 28px;
}

.slider-cluster {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.slider-card {
  width: 300px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: #3c202d;
}

.brightness-card {
  transform: rotate(-2deg);
}

.contrast-card {
  transform: rotate(2deg);
}

.slider-heading {
  display: flex;
  align-items: center;
  gap: 14px;

  background: rgba(255, 244, 248, 0.76);

  padding: 8px 14px 9px;

  box-shadow: 7px 7px 0 rgba(224, 91, 126, 0.14);
}

.slider-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 700;

  line-height: 0.9;
  letter-spacing: -1.5px;

  color: #9b4470;
}

.slider-jp {
  font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;

  line-height: 1.3;
  letter-spacing: 2px;

  color: #9b4470;
}

.slider-jp-note {
  margin: 10px 0 4px 6px;

  font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1px;
  line-height: 1.5;

  color: rgba(35, 20, 25, 0.9);
}

.slider-note {
  width: 260px;

  margin: 0 0 10px 6px;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  line-height: 1.45;
  font-weight: 900;

  letter-spacing: 1px;

  color: rgba(35, 20, 25, 0.9);

  text-transform: uppercase;
}

.slider-card input[type="range"] {
  width: 250px;

  margin-left: 6px;

  accent-color: #e05b7e;
}

/* ==============================
   STICKER ARCHIVE
   
   Make sticker controls feel like a small sticker archive sheet.
================================= */
/* Most buttons here use lighter colors, but in a few areas I introduced highly saturated pink and light mint green to create subtle visual focal points and prevent the interface from feeling too visually scattered. */
.sticker-panel {
  width: 300px;

  padding: 16px 18px;

  background: rgba(255, 230, 238, 0.42);

  box-shadow: 12px 12px 0 rgba(176, 88, 128, 0.14);

  transform: rotate(-2deg);
}

.sticker-row,
.sticker-style,
.sticker-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;

  margin-bottom: 12px;
}

.sticker-actions {
  justify-content: center;
  margin-bottom: 0;
}

.sticker-title,
.sticker-style span {
  width: 100%;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 900;

  letter-spacing: 3px;

  color: rgba(35, 20, 25, 0.82);
}

.sticker-btn,
.style-btn,
#deleteStickerBtn,
#undoBtn {
  border: none;

  padding: 5px 9px;

  cursor: pointer;

  box-shadow: 5px 5px 0 rgba(224, 91, 126, 0.16);
}

.sticker-btn {
  background: rgba(248, 226, 174, 0.82);
  color: #8f3e67;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;

  transform: rotate(-2deg);
}

.sticker-btn:nth-child(odd) {
  background: rgba(174, 212, 162, 0.62);
  transform: rotate(2deg);
}

.style-btn {
  background: rgba(248, 226, 174, 0.82);
  color: #8f3e67;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
}

.style-btn.active {
  background: rgba(224, 91, 126, 0.86);
  color: white;
}

#deleteStickerBtn,
#undoBtn {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#deleteStickerBtn {
  background: rgba(176, 88, 128, 0.8);
  color: white;
}

#undoBtn {
  background: rgba(111, 190, 177, 0.72);
  color: #3c202d;
}
/* clear canvas button */

#clearCanvasBtn {
  background: #f6e1a6;

  color: #8f3e67;

  transform: rotate(-2deg);
}

#clearCanvasBtn:hover {
  transform: rotate(1deg) scale(1.04);
}
/* ==============================
   DECORATIVE MAGAZINE LAYER
   
   These elements are only visual decoration.
   They imitate tape, issue labels, doodles, and handwritten magazine notes.
   This section was added during the later stage of adjusting the overall layout, helping the first screen users see feel less empty. The tape-inspired geometric shape also works as a cute decorative element.
================================= */

.deco-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.deco-tape,
.deco-issue,
.deco-label,
.deco-barcode {
  position: absolute;

  background: rgba(248, 226, 174, 0.82);
  color: #3c202d;

  box-shadow: 8px 8px 0 rgba(176, 88, 128, 0.16);

  font-family: Georgia, "Times New Roman", serif;
}

.tape-left {
  top: 28px;
  left: 42px;

  padding: 14px 28px;

  font-size: 17px;
  font-style: italic;
  line-height: 1.1;

  transform: rotate(-8deg);
  mask-image:
    radial-gradient(circle at left, transparent 0 2px, black 3px),
    linear-gradient(black, black);

  mask-composite: intersect;
}

.deco-heart {
  position: absolute;
  top: 48px;
  right: 23%;

  width: 86px;
  height: 76px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 3px solid rgba(248, 226, 174, 0.85);
  border-radius: 50% 50% 45% 45%;

  color: #8f3e67;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.1;

  transform: rotate(14deg);
}

.deco-issue {
  top: 34px;
  right: 54px;

  padding: 14px 18px;

  font-size: 14px;
  line-height: 1.1;
  text-align: center;

  background: rgba(255, 244, 248, 0.72);

  transform: rotate(7deg);
}

.deco-issue strong {
  font-size: 34px;
  color: #8f3e67;
}

.deco-star {
  position: absolute;

  color: rgba(60, 32, 45, 0.65);

  font-size: 42px;
  font-family: Georgia, "Times New Roman", serif;
}

.star-two {
  bottom: 80px;
  right: 14%;
  transform: rotate(16deg);
}

.deco-note {
  position: absolute;

  color: rgba(60, 32, 45, 0.72);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.15;
}

.note-one {
  top: 330px;
  right: 34%;

  transform: rotate(-12deg);
}

.note-two {
  top: 720px;
  right: 26%;

  transform: rotate(-8deg);
}

.label-sweet {
  top: 930px;
  right: 35%;

  padding: 10px 16px;

  font-size: 18px;
  font-style: italic;
  line-height: 1.05;

  transform: rotate(4deg);
}

.deco-barcode {
  left: 140px;
  bottom: 170px;

  padding: 10px 14px;

  background: rgba(255, 244, 248, 0.72);

  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;

  transform: rotate(-5deg);
}

.deco-barcode div {
  width: 110px;
  height: 42px;

  margin: 6px 0 3px;

  background: repeating-linear-gradient(
    90deg,
    #3c202d 0 2px,
    transparent 2px 5px,
    #3c202d 5px 7px,
    transparent 7px 10px
  );
}

.deco-barcode small {
  font-size: 10px;
  letter-spacing: 3px;
}
/* ==============================
   UPPER DECORATION LAYER
  
   Keep the top area rich, but reduce visual noise.
   Fewer decorations create clearer magazine hierarchy.
================================= */

.upper-deco-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

/* large transparent magazine words */
.big-bg-word {
  position: absolute;

  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 900;
  /* transparency */
  color: rgba(255, 255, 255, 0.11);

  text-shadow: 6px 6px 0 rgba(224, 91, 126, 0.1);

  letter-spacing: -8px;

  user-select: none;
}

.word-tokyo {
  top: 350px;
  left: 10%;
  font-size: 130px;
  transform: rotate(-8deg);
}

.word-girl {
  top: 430px;
  right: 10%;
  font-size: 100px;
  transform: rotate(8deg);
}

/* handwritten-style notes */
.upper-note {
  position: absolute;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.1;

  color: rgba(60, 32, 45, 0.72);
}

.note-kawaii {
  top: 280px;
  right: 25%;

  font-family: "Hiragino Maru Gothic Pro", "Yu Gothic", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;

  transform: rotate(5deg);
}

/* small paper labels */
.mini-label {
  position: absolute;

  padding: 8px 16px;

  background: rgba(248, 226, 174, 0.9);
  color: #8f3e67;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 700;

  box-shadow: 6px 6px 0 rgba(224, 91, 126, 0.18);
}

.label-vol {
  top: 250px;
  left: 10%;

  transform: rotate(6deg);
}

.label-girly {
  top: 205px;
  right: 12%;

  background: rgba(174, 212, 162, 0.68);

  transform: rotate(8deg);
}

.dotted-line {
  position: absolute;

  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;

  letter-spacing: 4px;

  color: rgba(143, 62, 103, 0.38);
}

.dotted-one {
  top: 610px;
  left: 18%;

  transform: rotate(-4deg);
}
/* ==============================
   COLOR / PRINT ENHANCEMENT
   
   Stronger contrast makes the pastel magazine style less grey.
================================= */

.filter-card,
.sticker-panel {
  background: rgba(255, 238, 246, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.52);
}

.filter-card h2,
.sticker-title,
.sticker-style span {
  color: rgba(80, 28, 58, 0.95);
}

.slider-heading {
  background: rgba(255, 244, 248, 0.88);
}

#grayBtn,
.style-btn.active,
#deleteStickerBtn {
  background: rgba(224, 70, 118, 0.92);
}

#sepiaBtn {
  background: rgba(166, 72, 119, 0.9);
}

#invertBtn,
#undoBtn {
  background: rgba(91, 184, 172, 0.86);
}

.header-star {
  position: absolute;

  top: 120px;
  left: 18%;

  width: 150px;

  opacity: 0.75;

  transform: rotate(-12deg);

  mix-blend-mode: multiply;
}
/* ==============================
   INTRO DIALOG
================================= */

#introDialog {
  width: min(620px, 86vw);
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

#introDialog::backdrop {
  background: rgba(60, 20, 40, 0.24);
  backdrop-filter: blur(2px);
}

.dialog-paper {
  position: relative;

  padding: 26px 34px 28px;

  background: linear-gradient(
    135deg,
    rgba(255, 231, 241, 0.94),
    rgba(248, 226, 174, 0.78)
  );

  border: 1px solid rgba(255, 255, 255, 0.7);

  box-shadow:
    12px 12px 0 rgba(176, 88, 128, 0.28),
    inset 0 0 28px rgba(255, 255, 255, 0.25);

  transform: rotate(-1.2deg);

  color: #3c202d;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

/* small Japanese magazine-style heading */
.dialog-kicker {
  width: fit-content;

  margin-bottom: 14px;
  padding: 6px 14px;

  background: rgba(224, 70, 118, 0.9);
  color: white;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 3px;
  text-transform: uppercase;

  box-shadow: 5px 5px 0 rgba(176, 88, 128, 0.22);

  transform: rotate(-3deg);
}

/* main title */
.dialog-paper h2 {
  margin: 0 0 16px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-style: italic;
  font-weight: 700;

  color: #8f3e67;

  letter-spacing: -1.5px;
  line-height: 1;

  text-shadow: 3px 3px 0 rgba(224, 91, 126, 0.16);
}

/* use png doodle star */
/* Hand-drawn stars were added to maintain the sticky note-like artistic style of the pop-up window, while also softening the potentially off-putting feeling that the disclaimer text itself might create for users. */
.dialog-paper::after {
  content: "";

  position: absolute;
  top: -30px;
  right: 8px;

  width: 200px;
  height: 200px;

  background-image: url("images/star-doodle.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(20deg);

  opacity: 0.82;

  pointer-events: none;
}

/* dense magazine body text */
.dialog-content {
  padding-top: 18px;

  border-top: 2px dotted rgba(143, 62, 103, 0.35);

  /* center the whole text block */
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.dialog-content p {
  /* wider text area */
  max-width: 760px;

  margin: 0 0 18px;

  font-size: 15px;
  line-height: 1.7;
  font-weight: 800;

  letter-spacing: 0.6px;

  color: rgba(35, 20, 25, 0.92);
}

/* small bottom info */

.dialog-small {
  margin-top: 18px !important;

  font-size: 10px !important;
  letter-spacing: 4px !important;

  color: rgba(80, 28, 58, 0.62) !important;

  text-transform: uppercase;
}

/* small label-like button*/
#dialogCloseButton {
  margin-top: 12px;

  border: none;

  padding: 9px 18px;

  background: rgba(248, 226, 174, 0.95);
  color: #8f3e67;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;

  box-shadow: 6px 6px 0 rgba(224, 91, 126, 0.18);

  cursor: pointer;

  transform: rotate(-2deg);
}

#dialogCloseButton:hover {
  transform: translateY(-2px) rotate(-2deg);
  opacity: 0.9;
}

/* ==============================
   STICKER ACTION AREA CHANGES

   Separate DELETE / CLEAR / UNDO from sticker buttons.
   These are functional control buttons, so they need stronger spacing
   and a different visual weight.
================================= */

.sticker-actions {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  gap: 14px;

  /* more space from text style buttons above */
  margin-top: 22px;
  margin-bottom: 2px;

  padding-top: 14px;

  border-top: 2px dotted rgba(143, 62, 103, 0.28);
}

#deleteStickerBtn,
#clearCanvasBtn,
#undoBtn {
  padding: 8px 14px;

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;

  letter-spacing: 2px;
  text-transform: uppercase;

  box-shadow: 5px 5px 0 rgba(176, 88, 128, 0.18);

  transform: rotate(-1deg);
}

/* stronger warning/action button */
#deleteStickerBtn {
  background: rgba(224, 70, 118, 0.95);
  color: white;
}

/* clear all should look different from delete */
#clearCanvasBtn {
  background: rgba(248, 226, 174, 0.95);
  color: #8f3e67;

  border: 2px solid rgba(60, 32, 45, 0.75);
}

/* undo remains softer */
#undoBtn {
  background: rgba(91, 184, 172, 0.9);
  color: #3c202d;
}

#deleteStickerBtn:hover,
#clearCanvasBtn:hover,
#undoBtn:hover {
  transform: translateY(-2px) rotate(-1deg);
  opacity: 0.9;
}
/* ==============================
   EXTRA BUTTON HOVER STATES

   Interactive effects were added to all remaining buttons.
================================= */

/* filter buttons on the left panel */
.filter-item button:hover {
  transform: translateY(-2px) rotate(-2deg);
  opacity: 0.9;

  box-shadow: 7px 7px 0 rgba(176, 88, 128, 0.22);
}

/* sticker buttons */
.sticker-btn:hover {
  transform: translateY(-2px) rotate(-2deg);
  opacity: 0.9;

  box-shadow: 7px 7px 0 rgba(176, 88, 128, 0.18);
}

/* keep odd sticker buttons tilted the other way */
.sticker-btn:nth-child(odd):hover {
  transform: translateY(-2px) rotate(2deg);
}

/* text style buttons */
.style-btn:hover {
  transform: translateY(-2px) rotate(-1deg);
  opacity: 0.9;

  box-shadow: 7px 7px 0 rgba(176, 88, 128, 0.2);
}

/* active style button should still feel selected */
.style-btn.active:hover {
  transform: translateY(-2px) rotate(-2deg);
  opacity: 0.95;
}