:root {
  --glas: rgba(255, 255, 255, .05);
  --glas-inre: rgba(255, 255, 255, .03);
  --glas-filter: blur(14px) saturate(130%);
  --glas-glans: inset 0 1px 0 rgba(255, 255, 255, .06);
  --glas-skugga: 0 8px 30px rgba(0, 0, 0, .22), var(--glas-glans);
  --glas-topp: rgba(1, 34, 53, .90);
  --glas-reserv: rgba(6, 44, 68, .92);
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70vmax 55vmax at 6% 0%, rgba(95, 214, 200, .10), transparent 70%),
    radial-gradient(ellipse 55vmax 45vmax at 100% 50%, rgba(247, 162, 27, .06), transparent 70%),
    radial-gradient(ellipse 75vmax 55vmax at 28% 100%, rgba(40, 120, 200, .10), transparent 70%);
}

.topp { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topp::before {
  content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--glas), var(--glas)), var(--glas-topp);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-skugga);
}
.topp.oppen .meny {
  background: linear-gradient(var(--glas), var(--glas)), var(--glas-topp);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: 0 30px 40px rgba(0, 0, 0, .22), var(--glas-glans);
}
.sprak, .meny-knapp { background: var(--glas); box-shadow: var(--glas-glans); }

.kort, .pkt, .jamfor__kort, .ruta, .steg li, .fragor details { background: var(--glas); }
.kort, .pkt, .jamfor__kort, .ruta, .steg li, .fragor details, .pris {
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-skugga);
}

.lat, .spelare li { background: var(--glas); }

.knapp--ihalig, .knapp.snart {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-skugga);
}
.knapp--ihalig:hover, .knapp.snart:hover { box-shadow: var(--glas-skugga); }
:is(.kort, .pkt, .jamfor__kort, .ruta, .steg li, .fragor details, .pris) :is(.knapp--ihalig, .knapp.snart) {
  background: var(--glas-inre); -webkit-backdrop-filter: none; backdrop-filter: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topp::before, .topp.oppen .meny,
  .kort, .pkt, .jamfor__kort, .ruta, .steg li, .fragor details, .knapp--ihalig, .knapp.snart { background: var(--glas-reserv); }
  .pris { background: linear-gradient(180deg, rgba(95, 214, 200, .07), rgba(255, 255, 255, .02)), var(--glas-reserv); }
}

@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
  .topp::before, .topp.oppen .meny { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kort, .pkt, .jamfor__kort, .ruta, .steg li, .fragor details, .lat, .spelare li,
  .knapp--ihalig, .knapp.snart, .sprak, .meny-knapp { background: #0e2d3f; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pris { background: linear-gradient(180deg, #082f3f, #06263a); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :is(.kort, .pkt, .jamfor__kort, .ruta, .steg li, .fragor details, .pris) :is(.knapp--ihalig, .knapp.snart) { background: #0e2d3f; }
}