/* Basis layout */
#preloot-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(#8ecae6, #219ebc 45%, #1f6f94 46%);
  opacity: 1;
  transition: opacity var(--fade-duration, 600ms) ease;
  overflow: hidden;
}
#preloot-overlay.preloot-hide { opacity: 0; }
#preloot-overlay .preloot-scene,
.preloot-preview .preloot-scene { position: absolute; inset: 0; }

/* Admin preview container */
.preloot-preview-wrap { align-self: start; }
.preloot-preview {
  width: min(800px, 80vw);
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ddd;
  position: relative;
  background: linear-gradient(#8ecae6, #219ebc 45%, #1f6f94 46%);
}

/* City background (remunj.png) */
.preloot-city {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--city-y, 14%);
  height: var(--city-h, 32%);
  background-image: url('../img/remunj.png');
  background-repeat: repeat-x;
  background-size: contain;
  background-position-y: bottom;
  animation: preloot-city-scroll var(--city-speed, 240s) linear infinite;
  z-index: 15; /* achter sub (19) en water (20-24) */
}
/* Naar rechts laten bewegen via reverse */
.preloot-city { animation-direction: reverse; }

@keyframes preloot-city-scroll {
  0%   { background-position-x: var(--city-offset, 0px); }
  100% { background-position-x: calc(var(--city-offset, 0px) - 1000px); }
}

/* Two single clouds (img elements), moving right */
.preloot-cloud {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  image-rendering: auto;
  z-index: 16;
}
/* Cloud 1 */
.preloot-cloud.c1 {
  width: var(--c1-w, 20vw);
  left: var(--c1-left, -20%);
  top: var(--c1-top, 12%);
  opacity: var(--c1-opacity, 0.9);
  animation: preloot-cloud1-right var(--c1-speed, 180s) linear infinite;
}
/* Cloud 2 (mirrored horizontally) */
.preloot-cloud.c2 {
  width: var(--c2-w, 24vw);
  left: var(--c2-left, 10%);
  top: var(--c2-top, 18%);
  opacity: var(--c2-opacity, 0.85);
  transform: scaleX(-1);
  animation: preloot-cloud2-right var(--c2-speed, 220s) linear infinite;
}

@keyframes preloot-cloud1-right {
  from { left: var(--c1-left, -20%); }
  to   { left: calc(var(--c1-left, -20%) + 120vw); }
}
@keyframes preloot-cloud2-right {
  from { left: var(--c2-left, 10%); }
  to   { left: calc(var(--c2-left, 10%) + 120vw); }
}

/* Sun (pure CSS) */
.preloot-sun {
  position: absolute;
  width: var(--sun-size, 10vw);
  height: var(--sun-size, 10vw);
  left: calc(var(--sun-left, 84%) - var(--sun-size, 10vw)/2);
  top: var(--sun-top, 9%);
  border-radius: 50%;
  background: radial-gradient( circle at 50% 50%, #fff59d 0%, #ffd54f 40%, #ffca28 65%, #f4a261 100% );
  box-shadow: 0 0 40px rgba(255, 223, 88, 0.6);
  z-index: 11;
}

/* Title */
.preloot-title {
  position: absolute;
  left: var(--title-left, 50%);
  top: var(--title-top, 8%);
  transform: translateX(-50%);
  font-size: min(8vw, var(--title-size, 3.2vw));
  font-family: 'Pirata One', Georgia, serif;
  color: var(--title-color, #fff3c0);
  text-shadow: var(--title-shadow, 0 2px 4px rgba(0,0,0,0.35));
  letter-spacing: 0.5px;
  z-index: 40;
  white-space: nowrap;
  user-select: none;
}

/* Waterlagen */
.preloot-water {
  position: absolute;
  left: 0; right: 0;
  height: 28%;
  background-repeat: repeat-x;
  background-size: contain;
  animation-name: preloot-wave-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.preloot-water.layer0 { bottom: var(--y0, 12%); background-image: url('../img/water-layer0.png'); z-index: 20; animation-duration: var(--w0, 30s); }
.preloot-water.layer1 { bottom: var(--y1, 10%); background-image: url('../img/water-layer1.png'); z-index: 21; animation-duration: var(--w1, 40s); }
.preloot-water.layer2 { bottom: var(--y2, 8%);  background-image: url('../img/water-layer2.png'); z-index: 22; animation-duration: var(--w2, 55s); }
.preloot-water.layer3 { bottom: var(--y3, 6%);  background-image: url('../img/water-layer3.png'); z-index: 23; animation-duration: var(--w3, 70s); }
.preloot-water.layer4 { bottom: var(--y4, 4%);  background-image: url('../img/water-layer4.png'); z-index: 24; animation-duration: var(--w4, 90s); }

@keyframes preloot-wave-scroll {
  0%   { background-position-x: 0; }
  100% { background-position-x: 1000px; }
}

/* Submarine (achter de golven) */
.preloot-submarine {
  position: absolute;
  z-index: 19;
  width: var(--sub-width, 16vw);
  left: calc(var(--sub-left, 50%) - var(--sub-width, 16vw)/2);
  top: var(--sub-top, 42%);
  animation: preloot-bob var(--sub-bob-speed, 3.5s) ease-in-out infinite;
  image-rendering: auto;
}

@keyframes preloot-bob {
  0%   { transform: translateY(calc(var(--sub-bob-amp, 8px) * -1)) rotate(-1deg); }
  50%  { transform: translateY(var(--sub-bob-amp, 8px)) rotate(1deg); }
  100% { transform: translateY(calc(var(--sub-bob-amp, 8px) * -1)) rotate(-1deg); }
}

/* Progress bar */
.preloot-progress {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: var(--progress-h, 6px);
  background: var(--progress-bg, rgba(255,255,255,0.25));
  z-index: 50;
  overflow: hidden;
}
.preloot-progress .bar {
  width: 0%;
  height: 100%;
  background: var(--progress-color, #ffd166);
  animation: preloot-progress-fill var(--min-display, 4000ms) linear forwards;
}
@keyframes preloot-progress-fill { from { width: 0%; } to { width: 100%; } }

/* Admin layout base */
.preloot-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.preloot-panel { background: #fff; padding: 16px; border: 1px solid #e5e5e5; border-radius: 12px; }
.field-row { margin: 12px 0; display: grid; gap: 6px; }
.field-row label { font-weight: 600; }
.field-row input[type="range"], .field-row input[type="text"] { width: 100%; }
.field-row output { font-size: 12px; opacity: 0.8; }
.switch-row { display:flex; align-items:center; gap:8px; margin-bottom: 12px; }

/* --- Admin v1.5 layout tweaks --- */
.preloot-grid.preloot-grid-v15 {
  grid-template-columns: minmax(560px, 760px) 1fr;
}
.preloot-panel.preloot-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, auto);
  gap: 12px 16px;
  align-items: start;
}
.preloot-panel.preloot-panel-grid .panel-full {
  grid-column: 1 / -1;
}
.preloot-panel.preloot-panel-grid h2,
.preloot-panel.preloot-panel-grid hr,
.preloot-panel.preloot-panel-grid .switch-row,
.preloot-panel.preloot-panel-grid .radio-row,
.preloot-panel.preloot-panel-grid p.submit {
  grid-column: 1 / -1;
}
.preview-sticky {
  position: sticky;
  top: 84px;
}
@media (max-width: 1200px) {
  .preloot-grid.preloot-grid-v15 {
    grid-template-columns: 1fr;
  }
  .preview-sticky { position: static; top: auto; }
  .preloot-panel.preloot-panel-grid {
    grid-template-columns: 1fr;
  }
}