:root {
  --bg: #121316;
  --panel: #1b1d22;
  --ink: #eceef0;
  --ink-soft: #9096a0;
  --line: #2b2e35;
  --accent: #4a86e0;
  --accent-hover: #659ae8;
  --accent-soft: #1c2836;
  --accent-text: #f5f8fc;
  --danger: #e2836d;
  --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.4;
}

header {
  padding: 20px 24px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

header h1 { margin: 0 0 4px; font-size: 1.4rem; }
header p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-menu { position: relative; }
.icon-btn {
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.settings-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; min-width: 170px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 60;
}
.settings-menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 8px 10px; }
.settings-menu-item:hover { background: var(--accent-soft); }
.settings-menu-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 0.88rem; }
.settings-menu-toggle input { accent-color: var(--accent); margin: 0; }

.view-tabs {
  display: flex; gap: 4px; padding: 0 24px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.view-tab {
  background: transparent; border: none; border-radius: 0;
  padding: 12px 16px; font-size: 0.9rem; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
.view-tab:hover { background: var(--accent-soft); color: var(--ink); }
.view-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

.login-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ink);
}
.login-card h1 { font-size: 1.2rem; margin: 0 0 4px; }
.login-card input[type="email"]:focus,
.login-card input[type="password"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.login-error { color: var(--danger); font-size: 0.82rem; min-height: 1.1em; margin: 8px 0 0; }

.custom-palette-panel { margin-top: 8px; padding: 10px; background: var(--accent-soft); border-radius: 8px; }
.swatch-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.swatch-cell { font-size: 0.68rem; }
.swatch-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin-bottom: 2px; color: var(--ink-soft); }
.swatch-cell-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch-remove {
  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
  font-size: 0.7rem; padding: 0 2px; line-height: 1.4; border-radius: 3px; flex-shrink: 0;
}
.swatch-remove:hover { color: var(--danger); background: rgba(255,255,255,0.08); }
.swatch-row input[type="color"] {
  width: 100%; height: 32px; padding: 2px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer;
}

.preset-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.preset-item { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; padding: 4px; border-radius: 5px; }
.preset-item:hover { background: rgba(255,255,255,0.06); }
.preset-swatches { display: flex; flex-shrink: 0; }
.preset-swatches span { width: 14px; height: 14px; display: inline-block; border: 1px solid rgba(255,255,255,0.2); margin-right: -5px; border-radius: 2px; }
.preset-item .preset-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-item button { padding: 2px 6px; font-size: 0.68rem; }

main {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 20px;
  padding: 20px 24px 60px;
  max-width: 1600px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  main { grid-template-columns: 260px 1fr; }
  .sidebar-right { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  .sidebar-right { grid-column: auto; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.panel + .panel { margin-top: 16px; }

.sidebar { display: flex; flex-direction: column; }

h2 { font-size: 0.95rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }

label { display: block; font-size: 0.82rem; color: var(--ink-soft); margin: 10px 0 4px; }
label:first-child { margin-top: 0; }

select, input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.88rem;
}
input::placeholder { color: var(--ink-soft); opacity: 0.7; }
/* Date/color pickers render a dark-on-dark native icon otherwise. */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
input[type="range"] { width: 100%; accent-color: var(--accent); margin: 2px 0 4px; }

button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  transition: background 0.15s;
}
button:hover { background: #262932; }
button.primary { background: var(--accent); color: var(--accent-text); font-weight: 600; border-color: var(--accent); }
button.primary:hover { background: var(--accent-hover); }
button.ghost { background: transparent; }
button:disabled { opacity: 0.5; cursor: default; }

.row { display: flex; gap: 8px; }
.row > * { flex: 1; }

.algo-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.algo-tabs button { flex: 1 1 45%; }
.algo-tabs button.active { background: var(--accent); color: var(--accent-text); font-weight: 600; border-color: var(--accent); }

.contact-sheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .contact-sheet { grid-template-columns: repeat(2, 1fr); }
}

.tile {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
  cursor: pointer;
}
.tile canvas { display: block; width: 100%; height: auto; }
.tile .label {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-size: 0.68rem; padding: 3px 6px;
  background: rgba(18,19,22,0.82); color: var(--ink-soft);
  display: flex; justify-content: space-between;
}
.tile .star {
  position: absolute; top: 4px; right: 4px;
  background: rgba(18,19,22,0.85);
  border-radius: 50%; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; border: 1px solid var(--line);
  padding: 0;
}
.tile .star.active { background: #f4d477; }
.tile.loading canvas { opacity: 0.25; }

.status-line { font-size: 0.8rem; color: var(--ink-soft); margin: 6px 0 14px; min-height: 1.2em; }

.fav-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.fav-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; padding: 4px; border-radius: 6px; }
.fav-item:hover { background: var(--accent-soft); }
.fav-item img { width: 34px; height: 34px; border-radius: 4px; border: 1px solid var(--line); object-fit: cover; }
.fav-item .meta { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-item button { padding: 3px 6px; font-size: 0.7rem; }

.triptych-row { display: flex; gap: 10px; margin: 10px 0; }
.triptych-slot { flex: 1; aspect-ratio: 1; border: 1px dashed var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 0.72rem; overflow: hidden; background: var(--panel); }
.triptych-slot canvas { width: 100%; height: 100%; object-fit: cover; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,6,8,0.7);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; max-width: 960px; width: 100%;
  max-height: 92vh; overflow: auto; padding: 20px; display: grid; grid-template-columns: 1fr 300px; gap: 20px;
}
@media (max-width: 760px) { .modal { grid-template-columns: 1fr; } }
.modal-preview { display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.modal-preview canvas { max-width: 100%; max-height: 70vh; border-radius: 6px; }
.modal-close { position: absolute; top: 14px; right: 14px; }
.modal-side h3 { margin-top: 0; font-size: 1rem; }
.hint { font-size: 0.75rem; color: var(--ink-soft); }
.keywords { font-size: 0.72rem; color: var(--ink-soft); background: var(--accent-soft); padding: 6px 8px; border-radius: 6px; margin-top: 6px; }

footer { text-align: center; padding: 20px; color: var(--ink-soft); font-size: 0.78rem; }

/* ---- Locatie-tab: kaart-kunst ---- */
.location-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  padding: 20px 24px 60px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 900px) { .location-layout { grid-template-columns: 1fr; } }

/* Zelfstandig scrollende, "sticky" zijbalk: op desktop blijft hij in beeld
   terwijl je de (vaak veel langere) kaart-kolom scrollt, met de exportbalk
   op zijn beurt sticky onderin DIT scrollende vak (zie .export-bar) — zo
   is "downloaden" nooit meer weggescrold achter andere opties. Op mobiel
   (zie media query onderaan dit bestand) staat dit weer gewoon uit: daar
   is de winst van de accordion hieronder (maar één sectie tegelijk open)
   al genoeg om het compact te houden, en zou een losstaand scrollend vak
    boven de kaart alleen maar in de weg zitten. */
.location-controls {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/* "Place"/"Look"/"Details"/"Effects" — vervangen de vier altijd-open
   .panel-blokken van vroeger: op elk moment maar één sectie opengeklapt,
   dus veel minder scrollen om bij een verderop gelegen optie te komen. */
.accordion-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; flex-shrink: 0;
}

/* "MapGen 1.0" (Instellingen ▸ MapGen 1.0 layout) — de oorspronkelijke
   indeling van vóór de accordion: vier altijd-open .panel-blokken, geen
   sticky/scroll-cap. Gebruikt dezelfde .panel-stijl als de Playground-tab. */
.location-controls-old { display: flex; flex-direction: column; }
.accordion-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: none; border-radius: 0; color: var(--ink); font: inherit;
  cursor: pointer; padding: 12px 14px; text-align: left;
}
.accordion-head:hover { background: var(--accent-soft); }
.accordion-head .step { display: flex; align-items: center; gap: 9px; }
.accordion-head .step-num {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; flex-shrink: 0;
}
.accordion-head .step-label { font-size: 0.88rem; font-weight: 600; }
.accordion-head .step-sub { font-size: 0.72rem; color: var(--ink-soft); font-weight: 400; }
.accordion-head .chev { color: var(--ink-soft); font-size: 0.68rem; transition: transform 0.18s ease; flex-shrink: 0; }
.accordion-item.open .chev { transform: rotate(90deg); }
/* Game Styles zijn een leuke extra, geen basisoptie — ✦ i.p.v. een
   volgnummer, en (zie index.html) standaard dichtgeklapt. */
.accordion-item.optional .step-num { background: rgba(217, 164, 65, 0.16); color: #d9a441; }

.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.22s ease; }
.accordion-item.open .accordion-body { max-height: 700px; }
.accordion-body-inner { padding: 0 14px 14px; border-top: 1px solid var(--line); padding-top: 12px; }

/* Sub-tabs binnen "Look" — layout/mask/kleuren stonden vroeger als drie
   losse, altijd-zichtbare blokken onder elkaar; nu maar één tegelijk. */
.subtabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 3px; margin-bottom: 10px; }
.subtabs button { flex: 1; border: none; border-radius: 5px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.76rem; font-weight: 600; padding: 6px 4px; }
.subtabs button.active { background: var(--panel); color: var(--ink); }
.subpane { display: none; }
.subpane.active { display: block; }
.color-subtabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 3px; margin-bottom: 10px; }
.color-subtabs button { flex: 1; border: none; border-radius: 5px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.76rem; font-weight: 600; padding: 6px 4px; }
.color-subtabs button.active { background: var(--panel); color: var(--ink); }
.color-subpane { display: none; }
.color-subpane.active { display: block; }

/* Blijft onderin de (scrollende) zijbalk "plakken" — de belangrijkste
   knop van het scherm (downloaden) is zo nooit meer weggescrold achter
   andere opties, ongeacht welke accordion-sectie openstaat. */
.export-bar {
  position: sticky; bottom: 0; flex-shrink: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px;
}

/* Boven de kaart, i.p.v. verspreide kleine grijze hint-regeltjes tussen
   andere labels in — plaats/schaal/aantal-elementen in één oogopslag. */
.status-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.status-bar .hint {
  margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 0.76rem;
}
.status-bar .hint:empty { display: none; }

.location-search-results {
  margin-top: 4px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.location-search-result {
  display: block; width: 100%; text-align: left; border: none; border-radius: 0;
  border-bottom: 1px solid var(--line); background: var(--panel); font-size: 0.78rem; padding: 8px 10px;
}
.location-search-result:last-child { border-bottom: none; }
.location-search-result:hover { background: var(--accent-soft); }

.ratio-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ratio-tabs button { flex: 1 1 auto; padding: 7px 8px; font-size: 0.78rem; }
.ratio-tabs button.active { background: var(--accent); color: var(--accent-text); font-weight: 600; border-color: var(--accent); }

/* Hover-preview van de exportformaten bij een aspect ratio — zie de
   mouseenter/mouseleave-listeners in location.js (alleen aangesloten met
   een echte muis, via een hover:hover-check, dus dit blok blijft op
   touchscreens altijd verborgen). */
.ratio-sizes-hint {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ratio-sizes-hint strong { color: var(--ink); font-size: 0.76rem; }
.ratio-sizes-hint span { font-size: 0.74rem; }

.checkbox-row {
  display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink);
  margin: 8px 0 0; cursor: pointer;
}
.checkbox-row input { width: auto; margin: 0; accent-color: var(--accent); }
.checkbox-row input[type="color"] {
  margin-left: auto; width: 30px; height: 22px; padding: 0; border: 1px solid var(--line);
  border-radius: 4px; background: none; cursor: pointer; flex-shrink: 0;
}

.map-palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; }
.map-palette-grid.disabled { opacity: 0.35; pointer-events: none; }
.map-palette-card {
  border: 2px solid var(--line); border-radius: 8px; padding: 6px; background: var(--panel);
  cursor: pointer; text-align: left;
}
.map-palette-card.active { border-color: var(--accent); }
.map-palette-card .swatch-strip { display: flex; height: 20px; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.map-palette-card .swatch-strip span { flex: 1; }
.map-palette-card .map-palette-name { font-size: 0.74rem; color: var(--ink); }

.location-main { display: flex; flex-direction: column; gap: 10px; }
.location-canvas-wrap {
  position: relative; width: 100%; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--panel); display: flex; justify-content: center;
}
.location-canvas-wrap canvas { max-width: 100%; height: auto; cursor: grab; touch-action: none; }
.location-canvas-wrap canvas:active { cursor: grabbing; }

/* Op telefoon staat alles al in één kolom gestapeld (zie .location-layout
   hierboven). Een zelfstandig scrollend, sticky zijpaneel (zie
   .location-controls) is dan geen winst meer — het zou alleen een los
   scrollend vak bóven de kaart worden. De accordion zelf (maar één sectie
   tegelijk open) houdt het ook hier al compact, dus hier gewoon in de
   normale paginastroom laten meescrollen. */
@media (max-width: 900px) {
  .location-controls { position: static; max-height: none; overflow-y: visible; }
  .export-bar { position: static; }
}

/* "MapGen 1.0" op telefoon: "Exporteren" stond anders onderaan de vier
   gestapelde panelen, ver onder de kaart. "display: contents" heft
   .location-controls-old/.location-main als rendering-box op, zodat hun
   kinderen rechtstreeks grid-items van .location-layout worden en dus
   onderling herordend kunnen worden; alleen het exportpaneel krijgt een
   "order" om na de kaart te verschijnen, de rest houdt zijn natuurlijke
   (source-)volgorde aan. Alleen relevant als MapGen 1.0 actief is — de
   gewone (accordion) indeling heeft dit niet nodig, Export zit daar al
   altijd binnen bereik (zie .export-bar hierboven). */
@media (max-width: 900px) {
  .location-controls-old, .location-main { display: contents; }
  #oldPanelExport { order: 5; margin-top: 0; }
}