:root {
  /* thumb slider styling variables */
  --accent: #ffd44d;
  --track: #d7d7d7;
  --track-hi: #f2f2f2;
  --track-shadow: rgba(0, 0, 0, 0.25);
  --thumb: #f6f6f6;
  --thumb-edge: #bfbfbf;
  --thumb-w: 10px; /* knob width */
  --thumb-h: 20px; /* knob height */
  --track-h: 10px; /* track height */

  /* Etch a sketch styling variables */
  --panel-w: 520px;
  --panel-h: 360px;
  --panel-red-1: #d10a10; /* main red */
  --panel-red-2: #9c0509; /* shadow red */
  --panel-hi: #ff4d57; /* highlight red */
  --gold: #ffd44d; /* logo color */
  --bezel: #c9c9c9; /* screen bezel */
  --screen: #efefef; /* screen color */
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  background: linear-gradient(180deg, #f7f8fb 0%, #f0f2f6 50%, #eceff3 100%);
}

#page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#etch-a-sketch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 3vh;
  padding: 0 5vw;

  /* Design  */
  background: linear-gradient(
    to bottom,
    #e51c23 0%,
    #c4060c 10%,
    #c4060c 90%,
    #a90f12 100%
  );
  border-radius: 20px;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.6),
    inset 0 -4px 6px rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.25);
}

#etch-a-sketch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    transparent 40%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

#etch-a-sketch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
      200% 80% at 20% -10%,
      rgba(255, 255, 255, 0.06),
      transparent 60%
    ),
    radial-gradient(
      160% 100% at 120% 120%,
      rgba(0, 0, 0, 0.08),
      transparent 60%
    );
  pointer-events: none;
}

#grid-container {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 70vmin;
  height: 70vmin;
  border: solid black;
  border-radius: 3%;
  overflow: hidden;
}

#controls {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}

#title {
  margin: 0;
  padding-top: 2vh;
  font-family: "Lobster", cursive;
  font-size: 2.5rem;
  /* color: #efefef; */
  color: #ffd44d;
  background: linear-gradient(to bottom, #fff176, #ffd44d 40%, #e6a600);
  -webkit-background-clip: text;
  background-clip: text; /* Including standard definition */
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    transparent 60%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

.highlight {
  box-sizing: border-box;
  border: rgb(175, 175, 175) solid thin;
  background-color: #efefef;
}

.inked {
  background-color: grey;
}

/* Knob styling rules */

.knob-slider {
  display: flex; /* flexbox makes horizontal layout easy */
  align-items: center; /* vertically align label and slider */
  gap: 0.75rem; /* space between items */
  width: 260px; /* adjust overall size */
  font-size: 0.85rem;
}

.knob-label {
  white-space: nowrap; /* keep "Grid size" on one line */
  color: var(--track);
  font-weight: 500;
  font-size: 15px;
  font-family: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.knob-slider output {
  /* reserve enough room for the largest text, e.g. "64×64" = 5 chars */
  width: 6ch;
  text-align: right;
  color: var(--track);
  font-weight: 500;
  font-size: 15px;
  font-family: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.knob-slider input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--track-h);
  background: transparent;
  outline: none;
}

/* TRACK */
.knob-slider input[type="range"]::-webkit-slider-runnable-track {
  height: var(--track-h);
  border-radius: 999px;
  background: linear-gradient(#ffffff, var(--track-hi));
  border: 1px solid #bdbdbd;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15), 0 2px 6px var(--track-shadow);
}
.knob-slider input[type="range"]::-moz-range-track {
  height: var(--track-h);
  border-radius: 999px;
  background: linear-gradient(#ffffff, var(--track-hi));
  border: 1px solid #bdbdbd;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15), 0 2px 6px var(--track-shadow);
}

/* RECTANGULAR THUMB */
.knob-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-w);
  height: var(--thumb-h);
  border-radius: 6px; /* small rounding, not fully round */
  margin-top: calc((var(--track-h) - var(--thumb-h)) / 2); /* centers thumb */
  background: linear-gradient(#fafafa, #dcdcdc);
  border: 1px solid var(--thumb-edge);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.85),
    inset 0 -3px 5px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.knob-slider input[type="range"]::-moz-range-thumb {
  width: var(--thumb-w);
  height: var(--thumb-h);
  border-radius: 6px;
  background: linear-gradient(#fafafa, #dcdcdc);
  border: 1px solid var(--thumb-edge);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.85),
    inset 0 -3px 5px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

/* hover/focus */
.knob-slider input[type="range"]:hover::-webkit-slider-thumb {
  filter: brightness(1.05);
}
.knob-slider input[type="range"]:hover::-moz-range-thumb {
  filter: brightness(1.05);
}
.knob-slider input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}