:root {
  --fons: #07090c;
  --panell: rgba(14, 17, 22, 0.86);
  --vora: rgba(255, 255, 255, 0.10);
  --text: #e8ecf1;
  --suau: #8b95a3;
  --accent: #7fd1ff;
  --radi: 14px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fons); overflow: hidden; }
#mapa { position: fixed; inset: 0; }

.marca {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: 16px;
  pointer-events: none; text-shadow: 0 1px 8px #000;
}
.marca h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.marca p { margin: 2px 0 0; font-size: 13px; color: var(--suau); }

.boto-rodo {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--vora); background: var(--panell); color: var(--text);
  font: 600 16px/1 Georgia, serif; font-style: italic; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.tauler, .fitxa {
  position: fixed; left: 12px; right: 12px;
  background: var(--panell); border: 1px solid var(--vora); border-radius: var(--radi);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 12px 14px;
}
.tauler { bottom: max(12px, env(safe-area-inset-bottom)); }
.fitxa { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 150px); }
@media (min-width: 760px) {
  .tauler, .fitxa { left: 16px; right: auto; width: 380px; }
  .fitxa { bottom: auto; top: 84px; }
}

.insignies { display: flex; gap: 6px; flex-wrap: wrap; }
.desplacable { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.desplacable::-webkit-scrollbar { display: none; }
.insignia {
  flex: none; min-width: 38px; height: 28px; padding: 0 8px;
  border-radius: 8px; border: 1px solid transparent;
  font: 700 13px/26px ui-sans-serif, system-ui, sans-serif; text-align: center;
  color: #fff; cursor: pointer;
}
.insignia[aria-pressed="false"].apagada { opacity: 0.3; }
.insignia.tot { background: transparent; border-color: var(--vora); color: var(--text); font-weight: 600; }
.insignia.tot[aria-pressed="true"] { border-color: var(--text); }

.control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin-top: 12px; font-size: 13px; }
.control span { color: var(--suau); }
.control input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.control output { font-variant-numeric: tabular-nums; font-weight: 600; grid-row: 1; grid-column: 2; }
.avis { margin: 8px 0 0; font-size: 12px; color: var(--suau); }

.fitxa h2 { margin: 0 32px 8px 0; font-size: 18px; }
.fitxa .insignia { cursor: default; }
.suau { color: var(--suau); font-size: 13px; margin: 8px 0 0; }
.tanca {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: transparent; color: var(--suau);
  font-size: 15px; cursor: pointer;
}
.tanca:hover { background: rgba(255,255,255,0.08); color: var(--text); }

dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  background: #0e1116; color: var(--text); border: 1px solid var(--vora);
  border-radius: var(--radi); padding: 18px 20px; position: relative;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
dialog h2 { margin: 0 32px 8px 0; }
dialog h3 { margin: 16px 0 4px; font-size: 14px; }
dialog p, dialog li { font-size: 14px; line-height: 1.5; }
dialog ul { padding-left: 18px; margin: 4px 0; }
a { color: var(--accent); }

.maplibregl-ctrl-attrib { background: rgba(0,0,0,0.4) !important; }
.maplibregl-ctrl-attrib a { color: var(--suau) !important; }
.maplibregl-ctrl-bottom-right { bottom: 160px; }
@media (min-width: 760px) { .maplibregl-ctrl-bottom-right { bottom: 0; } }
@media (min-width: 760px) { .desplacable { flex-wrap: wrap; overflow: visible; } }