/* ============ BACKGROUND LAYER (sits behind icons, above the base gradient) ============ */
#bg-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

/* ---- ascii art (full-screen drifting noise) ---- */
.bg-ascii{
  background:#050705;
}
.bg-ascii canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* ---- matrix rain ---- */
.bg-matrix{
  background:#000;
}
.bg-matrix canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* ---- kawaii: dark purple scene with a winking chibi ---- */
.bg-kawaii{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,140,210,0.06) 0px,
      rgba(255,140,210,0.06) 10px,
      rgba(255,140,210,0) 10px,
      rgba(255,140,210,0) 34px),
    radial-gradient(circle at 50% 28%, #3d2170 0%, #1c0e34 55%, #100819 100%);
}
.kawaii-scene{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chibi{
  position:relative;
  width:min(48vw, 300px);
  height:min(48vw, 300px);
}
.chibi-hair-back{
  position:absolute;
  inset:-4%;
  border-radius:50%;
  background:#241040;
}
.chibi-bun{
  position:absolute;
  width:20%;
  height:20%;
  top:6%;
  border-radius:50%;
  background:#241040;
}
.chibi-bun-left{ left:-6%; }
.chibi-bun-right{ right:-6%; }
.chibi-head{
  position:absolute;
  left:10%;
  top:14%;
  width:80%;
  height:80%;
  border-radius:50%;
  background:#ffe3d6;
  overflow:hidden;
}
.chibi-bangs{
  position:absolute;
  top:-6%;
  left:-4%;
  width:108%;
  height:46%;
  background:#2a1450;
  border-radius:0 0 60% 60% / 0 0 100% 100%;
}
.chibi-blush{
  position:absolute;
  width:14%;
  height:9%;
  top:58%;
  border-radius:50%;
  background:rgba(255,120,160,0.55);
}
.chibi-blush-left{ left:12%; }
.chibi-blush-right{ right:12%; }
.chibi-eye{
  position:absolute;
  width:16%;
  height:20%;
  top:42%;
  border-radius:50%;
  background:#2a1450;
  overflow:hidden;
}
.chibi-eye-left{ left:24%; }
.chibi-eye-right{ right:24%; }
.chibi-eye-shine{
  position:absolute;
  width:35%;
  height:35%;
  top:15%;
  left:15%;
  background:#fff;
  border-radius:50%;
  opacity:.85;
  transition:transform .15s ease-out;
  will-change:transform;
}
.chibi-eye-blink{
  animation:chibi-blink 4.5s ease-in-out infinite;
  transform-origin:center;
}
@keyframes chibi-blink{
  0%, 88%, 100%{ transform:scaleY(1); }
  92%{ transform:scaleY(0.12); }
}
.chibi-mouth{
  position:absolute;
  left:42%;
  top:64%;
  width:16%;
  height:8%;
  border-bottom:3px solid #b5487a;
  border-radius:0 0 50% 50%;
  transition:width .15s ease, height .15s ease, border-radius .15s ease;
}
.chibi-mouth.chibi-mouth-o{
  left:44%;
  top:62%;
  width:9%;
  height:11%;
  border:none;
  border-radius:50%;
  background:#b5487a;
}
.kawaii-flower{
  position:absolute;
  animation-name:flower-drift;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.kawaii-petal{
  position:absolute;
  width:42%;
  height:58%;
  left:50%;
  top:50%;
  margin-left:-21%;
  margin-top:-58%;
  border-radius:60% 60% 60% 60% / 80% 80% 40% 40%;
  transform-origin:50% 100%;
  opacity:0.9;
}
.kawaii-flower-center{
  position:absolute;
  width:26%;
  height:26%;
  left:50%;
  top:50%;
  margin-left:-13%;
  margin-top:-13%;
  border-radius:50%;
  background:#ffe66d;
}
@keyframes flower-drift{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(10deg); }
}

/* ---- 8-bit sidescroller ---- */
.bg-8bit{
  background-color:#1b1035;
}
.bg-8bit canvas.eightbit-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* ---- stars ---- */
.bg-stars{
  background:radial-gradient(ellipse at bottom, #0a1128 0%, #000 100%);
}
.bg-stars .star-dot{
  position:absolute;
  width:2px; height:2px;
  border-radius:50%;
  background:#fff;
  animation:star-twinkle 2.4s ease-in-out infinite;
}
@keyframes star-twinkle{
  0%, 100%{ opacity:0.25; }
  50%{ opacity:1; }
}

/* ---- checkers ---- */
.bg-checkers{
  background: repeating-conic-gradient(#0c0e0c 0% 25%, #101410 0% 50%) 0 0/48px 48px;
}

/* ============ SETTINGS: BACKGROUND SWATCH PICKER ============ */
.bg-picker{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.bg-picker-label{
  display:block;
  font-size:12px;
  margin-bottom:8px;
}
.bg-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.bg-swatch{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  background:var(--panel);
  border-radius:4px;
  box-shadow: inset 1px 1px 0 var(--bevel-lt), inset -1px -1px 0 var(--bevel-dk);
  cursor:pointer;
}
.bg-swatch:hover{ box-shadow: inset 1px 1px 0 var(--cyan), inset -1px -1px 0 var(--bevel-dk); }
.bg-swatch.active{
  box-shadow: inset 1px 1px 0 var(--chartreuse), inset -1px -1px 0 var(--bevel-dk);
  outline:1px solid var(--chartreuse);
}