* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background:
    url("../images/starfield.svg") repeat,
    url("../images/background.jpg") center / cover no-repeat,
    #05040f;
}

.floating-planet {
  position: fixed;
  left: 50%;
  bottom: -4%;
  transform: translateX(-50%);
  width: min(90vw, 700px);
  pointer-events: none;
  z-index: 0;
}

.floating-planet img {
  width: 100%;
  height: auto;
  display: block;
}

.app {
  position: relative;
  z-index: 1;
}

.app {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .app {
    padding: 1.25rem;
  }
}

.header {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
}

.logo {
  width: 100%;
  max-width: 20rem;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(126, 217, 87, 0.35));
}

.select-wrap {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin-bottom: 0.5rem;
}

.design-select {
  width: 100%;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  background: #221F3D;
  color: #FFFFFF;
  border: 1px solid #3A3760;
  border-radius: 0.75rem;
  padding: 0.55rem 0.85rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.design-select option {
  background: #221F3D;
  color: #FFFFFF;
}

.chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #B7B6D6;
}

.pill-button {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.pill-button:active {
  transform: scale(0.95);
}

.scene-toggle {
  background: #221F3D;
  color: #B7B6D6;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.scene-toggle.on {
  background: #3FE1D0;
  color: #0B2E2B;
}

.tool-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.mode-toggle {
  display: flex;
  gap: 0.35rem;
}

.mode-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #221F3D;
  color: #B7B6D6;
  padding: 0.4rem 0.55rem;
  min-width: 44px;
}

.mode-label {
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
}

.mode-button.active {
  background: #FF2E88;
  color: #FFFFFF;
}

.brush-size-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid #3A3760;
}

.brush-size-row[hidden] {
  display: none;
}

.brush-size-btn {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: none;
  background: #221F3D;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.brush-size-btn.selected {
  box-shadow: 0 0 0 2px #FF2E88;
}

.brush-size-btn .dot {
  background: #B7B6D6;
  border-radius: 50%;
  display: block;
}

.dot-sm { width: 6px; height: 6px; }
.dot-md { width: 10px; height: 10px; }
.dot-lg { width: 16px; height: 16px; }

.canvas-card {
  position: relative;
  width: 100%;
  max-width: 24rem;
  border-radius: 1rem;
  background: #FFFFFF;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  padding: 0.4rem;
  margin-bottom: 0.65rem;
}

#coloringCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 915;
  border-radius: 0.75rem;
  cursor: pointer;
  display: block;
  touch-action: none;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.toolbar-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #221F3D;
  color: #FFFFFF;
  padding: 0.4rem 0.8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.save-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #FF2E88;
  color: #FFFFFF;
  padding: 0.4rem 0.8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.icon-only {
  padding: 0.5rem;
  width: 36px;
  height: 36px;
  justify-content: center;
}

.palette-label {
  color: #000000;
  font-size: 0.75rem;
  text-align: center;
  margin: 0.4rem 0 0;
}

.palette {
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
}

.gallery-open-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: #221F3D;
  color: #FFFFFF;
  padding: 0.4rem 0.8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 15, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 32rem;
  max-height: 85vh;
  background: #14132A;
  border: 1px solid #3A3760;
  border-radius: 1rem;
  padding: 1.25rem;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.modal-header h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #FFFFFF;
  font-size: 1.125rem;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: #B7B6D6;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.gallery-note {
  color: #B7B6D6;
  font-size: 0.75rem;
  margin: 0 0 1rem 0;
}

.gallery-save-button {
  width: 100%;
  justify-content: center;
  display: flex;
  padding: 0.625rem 1rem;
  margin-bottom: 1rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.gallery-empty {
  grid-column: 1 / -1;
  color: #B7B6D6;
  font-size: 0.875rem;
  text-align: center;
  padding: 1.5rem 0;
}

.gallery-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
}

.gallery-card img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-caption {
  font-size: 0.7rem;
  color: #221F3D;
  padding: 0.375rem 0.5rem;
  background: #FFFFFF;
}

.gallery-delete {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 19, 42, 0.85);
  color: #FFFFFF;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crayon {
  width: 34px;
  height: 34px;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.crayon.white {
  border: 2px solid rgba(183, 182, 214, 0.33);
}

.crayon.black {
  border: 1px solid rgba(183, 182, 214, 0.55);
}

.crayon.selected {
  transform: translateY(-6px) rotate(0deg) scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

.custom-swatch {
  position: relative;
  overflow: hidden;
  background: conic-gradient(from 180deg, #F60B0B, #FF7300, #E8FF57, #77F940, #3FEBD8, #1092FD, #7831FD, #FF28FD, #F60B0B);
}

.custom-swatch::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  mix-blend-mode: difference;
  pointer-events: none;
}

.custom-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* ---- Sound FX toggle (under the swatches) ---- */
.sound-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 6px;
}
.sound-row-label {
  font-size: 0.82rem;
  color: #9C97C7;
  letter-spacing: 0.02em;
}
.sound-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #3A3760;
  background: rgba(22, 19, 41, 0.72);
  color: #7EE9D0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.sound-toggle:active { transform: scale(0.9); }
.sound-toggle.on {
  border-color: #7EE9D0;
  box-shadow: 0 0 10px rgba(126, 233, 208, 0.5);
}

/* ---- UFO Music player popup ---- */
.ufo-overlay{--teal:#5FF0C0;--teal2:#8FF3E0;--green:#8CFF3B;--pink:#FF2E88;--magenta:#E94FE0;
  position:fixed; inset:0; z-index:1100; background:rgba(6,4,16,.86); display:flex; align-items:center; justify-content:center; padding:16px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
.ufo-overlay[hidden]{display:none;}
.ufo-modal{position:relative; overflow:hidden; width:min(93vw,360px); max-height:90vh; display:flex; flex-direction:column; align-items:center;
  background:radial-gradient(600px 380px at 72% -5%, rgba(233,79,224,.22), transparent 60%), linear-gradient(180deg,#151038,#0a0820);
  border:1px solid #4A4680; border-radius:18px; box-shadow:0 0 30px rgba(126,88,233,.45); padding:12px 14px 14px; color:#EDEBFF; animation:bs-pop .22s ease;}
.ufo-x{position:absolute; top:7px; right:9px; z-index:6; background:none; border:none; color:#cfc9ee; font-size:1.05rem; cursor:pointer; padding:4px 8px; border-radius:8px;}
.ufo-x:hover{background:rgba(255,255,255,.08);}
.ufo-stars{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.ufo-stars i{position:absolute; border-radius:50%; background:#fff; animation:mp-twinkle ease-in-out infinite;}
.ufo-shooter{position:absolute; width:80px; height:2px; z-index:0; pointer-events:none; border-radius:2px; background:linear-gradient(90deg,rgba(255,255,255,0),#fff); box-shadow:0 0 6px #fff; opacity:0; animation:mp-shoot 1.1s ease-out forwards;}
.ufo-craft{position:relative; z-index:3; width:200px; height:92px; margin-top:8px; animation:mp-hover 4.5s ease-in-out infinite;}
.ufo-antenna{position:absolute; top:0; left:50%; transform:translateX(-50%); width:3px; height:11px; border-radius:2px; background:linear-gradient(#dfeee8,#5a8f7c); z-index:3;}
.ufo-beacon{position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 12px var(--pink); animation:mp-blink 1s ease-in-out infinite;}
.ufo-dome{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:92px; height:48px; border-radius:50% 50% 40% 40%; overflow:hidden; z-index:4;
  background:radial-gradient(circle at 50% 25%, rgba(255,255,255,.95), var(--teal) 42%, #2b9e7d 92%); box-shadow:0 0 24px rgba(95,240,192,.7); border:1px solid rgba(255,255,255,.55);}
.ufo-dome::after{content:""; position:absolute; top:6px; left:15px; width:22px; height:26px; border-radius:50%; background:rgba(255,255,255,.6); transform:rotate(-22deg); z-index:2;}
.ufo-pilot{position:absolute; bottom:1px; left:50%; transform:translateX(-50%); width:38px; height:auto; z-index:1;}
.ufo-eye{fill:var(--green); animation:mp-eyes 3s ease-in-out infinite;}
.ufo-band{position:absolute; top:50px; left:50%; transform:translateX(-50%); width:154px; height:15px; border-radius:50%; z-index:3; background:linear-gradient(180deg,#5a5488,#221e42); border-top:1px solid rgba(255,255,255,.35); box-shadow:0 0 10px rgba(95,240,192,.3);}
.ufo-disc{position:absolute; top:53px; left:50%; transform:translateX(-50%); width:200px; height:44px; border-radius:50%; overflow:hidden; z-index:1; background:linear-gradient(180deg,#3a3568,#15122e 72%); box-shadow:inset 0 3px 8px rgba(255,255,255,.28), inset 0 -6px 10px rgba(0,0,0,.55); border:1px solid rgba(140,255,59,.4);}
.ufo-disc::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,.18) 22px 23px); opacity:.5;}
.ufo-rim{position:absolute; top:52px; left:50%; transform:translateX(-50%); width:202px; height:46px; border-radius:50%; border:2px solid rgba(95,240,192,.5); box-shadow:0 0 18px rgba(95,240,192,.55); pointer-events:none; z-index:3;}
.ufo-chaser{position:absolute; top:0; left:0; width:9px; height:9px; border-radius:50%; z-index:2; offset-path:path("M 4,75 a 96,21 0 1 0 192,0 a 96,21 0 1 0 -192,0"); animation:mp-chase 3.6s linear infinite;}
.ufo-chaser.c1{background:var(--teal); box-shadow:0 0 10px var(--teal); animation-delay:0s;}
.ufo-chaser.c2{background:var(--pink); box-shadow:0 0 10px var(--pink); animation-delay:-1.2s;}
.ufo-chaser.c3{background:var(--green); box-shadow:0 0 10px var(--green); animation-delay:-2.4s;}
.ufo-lights{position:absolute; top:74px; left:50%; transform:translateX(-50%); width:168px; height:14px; z-index:4;}
.ufo-lights i{position:absolute; top:50%; width:9px; height:9px; border-radius:50%; transform:translateY(-50%); animation:mp-blink 1.5s ease-in-out infinite;}
.ufo-lights i:nth-child(1){left:6%; background:var(--pink); box-shadow:0 0 8px var(--pink); animation-delay:0s;}
.ufo-lights i:nth-child(2){left:28%; background:var(--teal); box-shadow:0 0 8px var(--teal); animation-delay:.18s;}
.ufo-lights i:nth-child(3){left:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation-delay:.36s;}
.ufo-lights i:nth-child(4){left:72%; background:var(--magenta); box-shadow:0 0 8px var(--magenta); animation-delay:.54s;}
.ufo-lights i:nth-child(5){left:94%; background:var(--teal2); box-shadow:0 0 8px var(--teal2); animation-delay:.72s;}
.ufo-emitter{position:absolute; top:86px; left:50%; transform:translateX(-50%); width:46px; height:13px; border-radius:50%; z-index:2; transition:box-shadow .4s ease, width .4s ease; background:radial-gradient(circle, #fff, var(--green) 55%, rgba(140,255,59,0) 100%); box-shadow:0 0 22px var(--green); animation:mp-emit 3.2s ease-in-out infinite;}
.ufo-modal.playing .ufo-emitter{width:58px; box-shadow:0 0 34px var(--green);}
.ufo-notes{position:absolute; top:26px; left:50%; width:20px; height:20px; z-index:2; pointer-events:none;}
.ufo-notes span{position:absolute; left:0; top:44px; font-size:1.1rem; opacity:0; animation-name:mp-radiate; animation-iteration-count:infinite; animation-timing-function:ease-out;}
.ufo-beam{position:absolute; top:104px; left:50%; transform:translateX(-50%); width:300px; height:380px; transition:width .5s ease, filter .5s ease; clip-path:polygon(37% 0, 63% 0, 100% 100%, 0% 100%); z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(95,240,192,.5) 0%, rgba(140,255,59,.22) 40%, rgba(95,240,192,.05) 100%); animation:mp-beampulse 3.2s ease-in-out infinite;}
.ufo-beam::after{content:""; position:absolute; inset:0; height:40%; background:linear-gradient(180deg, transparent, rgba(255,255,255,.35), transparent); animation:mp-sweep 2.8s linear infinite;}
.ufo-modal.playing .ufo-beam{width:380px; filter:brightness(1.2) saturate(1.15);}
.ufo-controls{position:relative; z-index:3; display:flex; align-items:center; gap:8px; width:100%; margin-top:12px; flex-wrap:wrap; justify-content:center;}
.ufo-mtitle{font-weight:700; color:var(--teal2); font-size:1rem; letter-spacing:.04em; text-shadow:0 0 12px rgba(95,240,192,.6); margin-right:auto;}
.ufo-modes{display:flex; border:1px solid var(--teal); border-radius:999px; overflow:hidden;}
.ufo-modes button{padding:6px 14px; background:transparent; color:var(--teal2); border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.8rem;}
.ufo-modes button.active{background:var(--teal); color:#062018;}
.ufo-modes button[data-mode="shuffle"].active{background:var(--magenta); color:#fff;}
.ufo-play{padding:6px 16px; font-size:.85rem; font-weight:700; border-radius:999px; border:1px solid var(--green); color:var(--green); background:transparent; cursor:pointer; box-shadow:0 0 14px rgba(140,255,59,.3); font-family:inherit;}
.ufo-play.on{background:var(--green); color:#062018;}
.ufo-tracks{position:relative; z-index:3; list-style:none; margin:12px 0 0; padding:2px; width:100%; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0; overflow-y:auto;}
.ufo-track{display:flex; align-items:center; gap:11px; cursor:pointer; padding:10px 12px; border-radius:13px; border:1px solid rgba(95,240,192,.35); background:rgba(12,10,40,.72); transition:transform .14s ease, box-shadow .2s ease, border-color .2s ease;}
.ufo-track:hover{border-color:var(--teal);}
.ufo-check{width:20px; height:20px; border-radius:6px; border:2px solid var(--teal); background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; position:relative; flex:none;}
.ufo-check:checked{background:var(--green); border-color:var(--green); box-shadow:0 0 10px rgba(140,255,59,.5);}
.ufo-check:checked::after{content:"\2713"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#062018; font-weight:700; font-size:13px;}
.ufo-track .ufo-note{color:var(--teal2); font-size:1.05rem;}
.ufo-track .ufo-name{font-weight:600; font-size:.95rem; flex:1;}
.ufo-track.current{border-color:var(--green); box-shadow:0 0 18px rgba(140,255,59,.4); background:rgba(20,30,14,.8);}
.ufo-track.current .ufo-name{color:var(--green);}
.ufo-track .ufo-eq{margin-left:auto; display:none; align-items:flex-end; gap:3px; height:16px;}
.ufo-track.current .ufo-eq{display:flex;}
.ufo-track .ufo-eq i{width:4px; background:var(--green); border-radius:2px; box-shadow:0 0 6px rgba(140,255,59,.6); animation:mp-eq .9s ease-in-out infinite;}
.ufo-track .ufo-eq i:nth-child(2){animation-delay:.15s;} .ufo-track .ufo-eq i:nth-child(3){animation-delay:.3s;} .ufo-track .ufo-eq i:nth-child(4){animation-delay:.45s;}
.ufo-hint{position:relative; z-index:3; margin:10px 2px 0; font-size:.74rem; color:#8983B4; text-align:center;}
@keyframes mp-hover{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes mp-blink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes mp-chase{to{offset-distance:100%;}}
@keyframes mp-eyes{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes mp-emit{0%,100%{opacity:.7; transform:translateX(-50%) scale(.9);}50%{opacity:1; transform:translateX(-50%) scale(1.08);}}
@keyframes mp-beampulse{0%,100%{opacity:.85;}50%{opacity:1;}}
@keyframes mp-sweep{0%{transform:translateY(-60%);}100%{transform:translateY(260%);}}
@keyframes mp-radiate{0%{opacity:0; transform:translate(-50%,0) scale(.4) rotate(0);}18%{opacity:.95;}100%{opacity:0; transform:translate(calc(-50% + var(--tx)), var(--ty)) scale(1.15) rotate(var(--r));}}
@keyframes mp-eq{0%,100%{height:4px;}50%{height:16px;}}
@keyframes mp-twinkle{0%,100%{opacity:.15; transform:scale(.6);}50%{opacity:1; transform:scale(1.1);}}
@keyframes mp-shoot{0%{opacity:0; transform:rotate(26deg) translateX(0) scaleX(.3);}15%{opacity:1;}100%{opacity:0; transform:rotate(26deg) translateX(200px) scaleX(1);}}
@media (prefers-reduced-motion:reduce){.ufo-craft,.ufo-beam,.ufo-beam::after,.ufo-lights i,.ufo-chaser,.ufo-emitter,.ufo-beacon,.ufo-eye,.ufo-notes span,.ufo-stars i,.ufo-track .ufo-eq i{animation:none;}}