* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #101a13;
  font-family: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

#canvas-wrap {
  position: fixed;
  inset: 0;
  cursor: grab;
}
#canvas-wrap.dragging { cursor: grabbing; }
#canvas-wrap canvas { display: block; }

#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
#ui > * { pointer-events: auto; }

/* --- top bar --- */
#topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px;
  background: linear-gradient(to bottom, rgba(10,16,10,0.55), rgba(10,16,10,0));
}

#colorSwitch {
  display: flex;
  gap: 10px;
}
.swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  background: var(--sw);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform .15s ease, border-color .15s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.4);
}

#langSwitch {
  display: flex;
  gap: 6px;
  background: rgba(10,16,10,0.4);
  padding: 4px;
  border-radius: 999px;
}
.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  font-family: system-ui, sans-serif;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.lang .flag { font-size: 16px; }
.lang.active {
  background: rgba(255,255,255,0.92);
  color: #1a2a1a;
  font-weight: 600;
}

/* --- shower / stardust toggle --- */
.toggleBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(10,16,10,0.4);
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  font-family: system-ui, sans-serif;
  letter-spacing: 0.3px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  align-self: flex-start;
}
.toggleBtn:hover { background: rgba(10,16,10,0.6); }
.toggleBtn .showerIcon { font-size: 17px; }
.toggleBtn.off {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.55);
}

/* --- nav arrows --- */
.navArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(10,16,10,0.35);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease;
}
.navArrow:hover { background: rgba(10,16,10,0.6); transform: translateY(-50%) scale(1.08); }
.navArrow:active { transform: translateY(-50%) scale(0.95); }
#prevBtn { left: 18px; }
#nextBtn { right: 18px; }

/* --- hint --- */
#hint {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-size: 20px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  transition: opacity 1s ease;
  white-space: nowrap;
}
#hint.faded { opacity: 0; }
.hintArrow { font-family: system-ui, sans-serif; }

/* --- share button --- */
#shareBtn {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}
#shareBtn.copied {
  background: rgba(122,199,110,0.85);
  border-color: rgba(255,255,255,0.6);
}

/* --- Integrales Forum logo --- */
#logoLink {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.75);
  border-radius: 5px;
  padding: 3px 6px;
  opacity: 0.85;
  transition: opacity .15s ease;
}
#logoLink:hover { opacity: 1; }
#logoLink img { height: 32px; display: block; }

@media (max-width: 640px) {
  #logoLink { bottom: 10px; left: 10px; padding: 2px 5px; }
  #logoLink img { height: 26px; }
}

/* --- loading / warning --- */
#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  font-size: 26px;
  background: #101a13;
  transition: opacity .6s ease;
}
#loading.hidden { opacity: 0; pointer-events: none; }

#serverWarning {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 480px;
  background: rgba(20,10,10,0.92);
  color: #ffdede;
  border: 1px solid #a33;
  border-radius: 10px;
  padding: 20px 24px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
#serverWarning code {
  background: rgba(255,255,255,0.12);
  padding: 1px 6px;
  border-radius: 4px;
}
.hidden { display: none !important; }

@media (max-width: 640px) {
  .swatch { width: 24px; height: 24px; }
  .navArrow { width: 44px; height: 44px; font-size: 24px; }
  #hint { font-size: 16px; }

  /* two rows: color swatches + language switch share the first row (sized
     down a touch so both fit side by side), the shower/stardust toggle
     drops to its own centered row below. Colors gets only the width its
     swatches need (auto); the language switch gets the rest (minmax(0, 1fr)
     lets that track actually shrink below its content's natural width
     instead of overflowing the viewport — a plain 1fr keeps an implicit
     min-width of auto/min-content, which is what pushed a 3-language
     switch off-screen on narrow phones) */
  #topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "colors lang" "shower shower";
    row-gap: 10px;
    align-items: flex-start;
  }
  #colorSwitch { grid-area: colors; gap: 4px; }
  #langSwitch { grid-area: lang; justify-self: end; gap: 3px; padding: 3px; max-width: 100%; }
  .lang { padding: 5px 8px; font-size: 13px; gap: 4px; flex-shrink: 0; }
  #showerBtn { grid-area: shower; justify-self: center; align-self: center; }

}

@media (max-width: 400px) {
  /* three language pills is tight below ~400px — drop the decorative flag
     emoji first (the two-letter code alone still reads fine) before
     shrinking type further */
  .lang .flag { display: none; }
  .lang { padding: 5px 7px; gap: 0; }
}

@media (max-width: 340px) {
  .swatch { width: 20px; height: 20px; }
  #colorSwitch { gap: 3px; }
  #langSwitch { gap: 2px; padding: 2px; }
  .lang { padding: 4px 6px; font-size: 12px; }
}