/* Dune – världens egna stilar ovanpå kit/kit.css.
   2026-11-13: egen HUD för öknen, "minimal och varm" – inte rymdens HUD. Nästan ingen HUD: en tunn kompass, mjuka sandfärgade knappar,
   inga fart-/höjd-/temperaturvärden – landskapet är huvudsaken. Allt är avgränsat med body.w-dune (bara dune/index.html laddar filen),
   så /depths/ och /dune/inside/ påverkas inte. Typsnitt: systemets serif (Iowan Old Style/Charter på iPhone och Mac, Palatino/Georgia
   annars) – inga externa typsnitt (CSP font-src 'self'). Ikonerna i knapparna är data:-SVG (img-src tillåter data:). */
.w-dune {
  --dn-ivory: #fbf4e8; --dn-sand: #ead6b4; --dn-terra: #c4643c; --dn-terra-l: #e08a5c; --dn-ink: #3b2b20; --dn-ink2: rgba(59, 43, 32, .62);
  --dn-glass: rgba(84, 56, 36, .30); --dn-glass-h: rgba(84, 56, 36, .46); --dn-edge: rgba(255, 242, 222, .30); --dn-paper: rgba(250, 243, 231, .94);
  --dn-shadow: 0 1px 2px rgba(58, 34, 16, .55), 0 0 14px rgba(58, 34, 16, .35);
  --dn-serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --dn-sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --ember: var(--dn-terra); --hud: var(--dn-ivory); --hud-rgb: 251, 244, 232;
  background: #1a120c;
}

/* laddningen: varm skymning i stället för svart */
.w-dune .loader { background: radial-gradient(120% 90% at 50% 70%, #3a2416 0%, #1a120c 70%); }
.w-dune .loader b { font: 400 clamp(30px, 7vw, 50px)/1 var(--dn-serif); letter-spacing: .28em; text-indent: .28em; text-transform: lowercase; color: var(--dn-ivory); }
.w-dune .loader p { font: italic 400 13px/1 var(--dn-serif); letter-spacing: .06em; color: rgba(251, 244, 232, .55); }
.w-dune .loader i { width: 140px; background: linear-gradient(90deg, transparent, var(--dn-sand), transparent); background-size: 200% 100%; }

/* ---------- HUD: bort med statusraden, farten och värdestapeln ---------- */
.w-dune .hud { font-family: var(--dn-serif); }
.w-dune .hd-mode, .w-dune .wh-big, .w-dune .wh-row { display: none; }

/* kompassen: en tunn linje, små prickar, N/E/S/W i serif, platser som en liten prick + namn + avstånd */
.w-dune .hd-top { top: max(18px, calc(env(safe-area-inset-top) + 12px)); }
.w-dune .wh-tape { width: min(400px, 46vw); height: 58px; margin: 0 auto; }
.w-dune .wh-tape::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: rgba(251, 244, 232, .55); box-shadow: 0 1px 3px rgba(58, 34, 16, .35); }
.w-dune .wh-ticks i { font-size: 0; padding-top: 12px; color: transparent; }
.w-dune .wh-ticks i::before { top: 4px; width: 1px; height: 5px; background: rgba(251, 244, 232, .5); }
.w-dune .wh-ticks i.c { font: 400 12.5px/1 var(--dn-serif); letter-spacing: .04em; color: var(--dn-ivory); text-shadow: var(--dn-shadow); }
.w-dune .wh-ticks i.c::before { height: 7px; top: 3px; background: var(--dn-ivory); }
.w-dune .wh-ticks b { top: 27px; font: italic 400 12px/1 var(--dn-serif); letter-spacing: .02em; text-transform: none; color: var(--dn-ivory); text-shadow: var(--dn-shadow); }
.w-dune .wh-ticks b { text-align: center; }
.w-dune .wh-ticks b small { display: block; margin: 3px 0 0; font: 400 10.5px/1 var(--dn-serif); font-style: normal; color: rgba(251, 244, 232, .72); font-variant-numeric: tabular-nums; }
.w-dune .wh-ticks b::before { content: ""; top: -22px; width: 5px; height: 5px; border-radius: 50%; background: var(--dn-terra-l); box-shadow: 0 0 6px rgba(224, 138, 92, .8), 0 0 0 1px rgba(251, 244, 232, .5); font-size: 0; }
.w-dune .wh-ticks b.q { color: rgba(251, 244, 232, .65); }
.w-dune .wh-ticks b.q::before { background: transparent; box-shadow: 0 0 0 1px rgba(251, 244, 232, .7); }
.w-dune .wh-mid { top: 0; width: 0; height: 0; margin-left: -4px; background: none; border: 4px solid transparent; border-top: 5px solid var(--dn-ivory); filter: drop-shadow(0 1px 1px rgba(58, 34, 16, .5)); }
@media (pointer: coarse) {
  .w-dune .hd-top { top: max(60px, calc(env(safe-area-inset-top) + 54px)); }
  .w-dune .wh-tape { width: min(300px, 68vw); }
}

/* dygnets tecken (sol/halvsol/måne) i kompassens högra ände + en kort rad under kompassen när något händer (dune/hud.js) */
.dn-sky { position: absolute; top: -2px; right: -28px; width: 16px; height: 16px; color: var(--dn-ivory); opacity: .8; filter: drop-shadow(0 1px 2px rgba(58, 34, 16, .55)); }
.dn-sky svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.dn-sky .fill { fill: currentColor; stroke: none; }
.dn-note { position: absolute; left: 50%; top: 62px; transform: translate(-50%, -3px); margin: 0; white-space: nowrap; font: italic 400 13px/1.2 var(--dn-serif); letter-spacing: .02em;
  color: var(--dn-ivory); text-shadow: var(--dn-shadow); opacity: 0; transition: opacity .8s ease, transform .8s ease; }
.dn-note.show { opacity: .95; transform: translate(-50%, 0); }

/* ---------- uppe till vänster: worlds + places ---------- */
.w-dune .wh-btn { height: 34px; padding: 0 14px 0 12px; gap: 7px; font: 400 14px/1 var(--dn-serif); letter-spacing: .03em; text-transform: none; color: var(--dn-ivory);
  background: var(--dn-glass); border: 1px solid var(--dn-edge); text-shadow: 0 1px 2px rgba(58, 34, 16, .45); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 2px 10px rgba(58, 34, 16, .18); }
.w-dune .wh-btn svg { stroke: var(--dn-ivory); stroke-width: 1.5; opacity: .85; }
.w-dune .wh-btn:hover, .w-dune .wh-btn:focus-visible, .w-dune .wh-btn[aria-expanded="true"] { color: #fff; background: var(--dn-glass-h); border-color: rgba(255, 242, 222, .6); box-shadow: 0 2px 14px rgba(58, 34, 16, .25); }

/* paneler: varmt elfenbenspapper med mörkbrun text (platslistan, fyndpanelen, guiden) */
.w-dune .wh-list, .w-dune .hunt-panel { background: var(--dn-paper); color: var(--dn-ink); border: 1px solid rgba(255, 255, 255, .6); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(40, 22, 10, .35), 0 2px 6px rgba(40, 22, 10, .12); font-family: var(--dn-serif); scrollbar-width: thin; scrollbar-color: rgba(59, 43, 32, .25) transparent; }
.w-dune .wh-list { position: absolute; left: 0; top: 42px; padding: 10px 6px; width: min(320px, calc(100vw - 28px)); }
.w-dune .wh-lh { margin: 6px 12px 8px; font: italic 400 12.5px/1.2 var(--dn-serif); letter-spacing: .02em; text-transform: none; color: var(--dn-ink2); }
.w-dune .wh-lh span { color: var(--dn-terra); font-style: normal; font-variant-numeric: tabular-nums; }
.w-dune .wh-list button { padding: 8px 12px; border-radius: 12px; color: var(--dn-ink); }
.w-dune .wh-list button b { font: 400 15.5px/1.25 var(--dn-serif); letter-spacing: .01em; }
.w-dune .wh-list button small { margin-top: 1px; font: italic 400 12.5px/1.3 var(--dn-serif); letter-spacing: 0; color: var(--dn-ink2); }
.w-dune .wh-list button:hover:not(:disabled), .w-dune .wh-list button:focus-visible { background: rgba(196, 100, 60, .1); }
.w-dune .wh-list button.here b { color: var(--dn-terra); }
.w-dune .wh-list button:disabled b { color: rgba(59, 43, 32, .32); letter-spacing: .12em; }
.w-dune .wh-list button:disabled small { color: rgba(59, 43, 32, .45); }
.dn-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 8px 6px; }
.w-dune .wh-list .dn-times button { text-align: center; padding: 7px 4px; border: 1px solid rgba(59, 43, 32, .16); border-radius: 999px; }
.w-dune .wh-list .dn-times button b { font-size: 13.5px; letter-spacing: .02em; }
.dn-link { display: block; margin-top: 4px; padding: 8px 12px; border-radius: 12px; color: var(--dn-ink); text-decoration: none; border-top: 1px solid rgba(59, 43, 32, .1); }
.dn-link b { display: block; font: 400 15.5px/1.25 var(--dn-serif); color: var(--dn-terra); }
.dn-link small { display: block; margin-top: 1px; font: italic 400 12.5px/1.3 var(--dn-serif); color: var(--dn-ink2); }
.dn-link:hover, .dn-link:focus-visible { background: rgba(196, 100, 60, .1); outline: none; }

/* ---------- rad när man hittar något (S.showLine) och citat ---------- */
.w-dune .egg { font: 400 15px/1.45 var(--dn-serif); letter-spacing: .01em; color: var(--dn-ink); padding: 9px 18px; background: var(--dn-paper); border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 10px 30px rgba(40, 22, 10, .28), 0 1px 3px rgba(40, 22, 10, .15); }
.w-dune .egg.long { max-width: min(400px, calc(100vw - 24px)); padding: 12px 20px; border-radius: 18px; }
.w-dune .muse { font: italic 400 21px/1.5 var(--dn-serif); color: var(--dn-ivory); text-shadow: 0 1px 3px rgba(58, 34, 16, .6), 0 0 22px rgba(58, 34, 16, .45); }
.w-dune .mu-p, .w-dune .mu-c { display: none; }
@media (max-width: 640px), (max-height: 520px) { .w-dune .muse { font-size: 17px; } }

/* sikte och "tryck här" */
.w-dune .wh-cross::before, .w-dune .wh-cross::after { display: none; }
.w-dune .wh-cross i { inset: 6px; background: var(--dn-ivory); box-shadow: 0 0 0 1px rgba(58, 34, 16, .35), 0 0 6px rgba(58, 34, 16, .4); }
.w-dune .wh-prompt i { border: 1.5px solid rgba(251, 244, 232, .9); box-shadow: 0 0 8px rgba(58, 34, 16, .35); }
.w-dune .wh-prompt span { top: -9px; font: italic 400 14px/1.2 var(--dn-serif); letter-spacing: .01em; color: var(--dn-ivory); text-shadow: var(--dn-shadow); }
.w-dune .wh-prompt span::before { content: "tap · "; font-style: normal; color: var(--dn-sand); }
@media (pointer: fine) { .w-dune .wh-prompt span::before { content: "click · "; } }
.w-dune .wh-prompt.got span { color: rgba(251, 244, 232, .7); } .w-dune .wh-prompt.got span::before { content: ""; }
.w-dune .wh-lock { font: italic 400 13px/1 var(--dn-serif); letter-spacing: .03em; text-transform: none; color: var(--dn-ivory); text-shadow: var(--dn-shadow); }

/* ---------- nere: logga, ?, fynd, ljud ---------- */
.w-dune .brand { opacity: .32; height: 22px; }
.w-dune .guide-q, .w-dune .sound, .w-dune .hunt-btn { color: var(--dn-ivory); background: var(--dn-glass); border: 1px solid var(--dn-edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(58, 34, 16, .18); text-shadow: 0 1px 2px rgba(58, 34, 16, .45); }
.w-dune .guide-q { width: 30px; height: 30px; font: italic 400 15px/1 var(--dn-serif); }
.w-dune .sound { width: 36px; height: 36px; }
.w-dune .sound[aria-pressed="true"] { color: var(--dn-ivory); background: rgba(196, 100, 60, .5); border-color: rgba(255, 220, 190, .55); }
.w-dune .guide-q:hover, .w-dune .guide-q:focus-visible, .w-dune .sound:hover, .w-dune .sound:focus-visible { color: #fff; background: var(--dn-glass-h); border-color: rgba(255, 242, 222, .6); }
.w-dune .snd-now { font: italic 400 12.5px/1.3 var(--dn-serif); letter-spacing: .02em; color: var(--dn-ivory); text-shadow: var(--dn-shadow); }
/* fyndräknaren: bara ett litet tecken + antalet (" / 123" och "found" döljs; hela listan finns i panelen) */
.w-dune .hunt-btn { height: 30px; padding: 0 12px 0 10px; gap: 6px; font: 400 14px/1 var(--dn-serif); letter-spacing: .02em; }
.w-dune .hunt-btn svg { width: 12px; height: 12px; stroke: var(--dn-sand); fill: rgba(234, 214, 180, .35); stroke-width: 1.5; }
.w-dune .hunt-n { font-size: 0; } .w-dune .hunt-n b { font: 400 14px/1 var(--dn-serif); color: var(--dn-ivory); font-variant-numeric: tabular-nums; }
.w-dune .hunt-l { display: none; }
.w-dune .hunt-btn:hover, .w-dune .hunt-btn:focus-visible, .w-dune .hunt-btn[aria-expanded="true"] { color: #fff; background: var(--dn-glass-h); border-color: rgba(255, 242, 222, .6); box-shadow: 0 2px 14px rgba(58, 34, 16, .25); }
.w-dune .hunt-btn.new { animation: dnGlow 2.4s ease; } .w-dune .hunt-btn.new svg { fill: var(--dn-terra-l); stroke: var(--dn-ivory); }
@keyframes dnGlow { 0% { background: rgba(196, 100, 60, .75); box-shadow: 0 0 0 0 rgba(234, 214, 180, .8), 0 0 22px rgba(224, 138, 92, .6); } 100% { box-shadow: 0 0 0 14px rgba(234, 214, 180, 0); } }
@media (pointer: coarse) { .w-dune .hunt-btn { height: 32px; } }
/* fyndpanelen */
.w-dune .hunt-panel { padding: 12px 6px 8px; font-size: 13px; }
.w-dune .hunt-rank { margin: 2px 8px 10px; padding: 10px 12px 9px; border: 0; border-radius: 14px; background: rgba(196, 100, 60, .08); }
.w-dune .hunt-rank b { font: 400 17px/1.2 var(--dn-serif); letter-spacing: .01em; color: var(--dn-terra); }
.w-dune .hunt-rank p span { font: 400 12.5px/1 var(--dn-serif); letter-spacing: 0; color: var(--dn-ink2); font-variant-numeric: tabular-nums; }
.w-dune .hunt-bar { height: 2px; background: rgba(59, 43, 32, .12); }
.w-dune .hunt-bar i { background: var(--dn-terra); box-shadow: none; }
.w-dune .hunt-rank small { font: italic 400 12px/1.3 var(--dn-serif); letter-spacing: 0; color: var(--dn-ink2); }
.w-dune .hunt-a { margin: 12px 12px 2px; padding-top: 10px; border-top: 1px solid rgba(59, 43, 32, .1); font: italic 400 12.5px/1.2 var(--dn-serif); letter-spacing: .01em; text-transform: none; color: var(--dn-ink2); }
.w-dune .hunt-panel li { padding: 6px 12px; line-height: 1.35; }
.w-dune .hunt-panel li::before { margin-top: 5px; border-color: rgba(59, 43, 32, .3); }
.w-dune .hunt-panel li.got::before { background: var(--dn-terra); border-color: var(--dn-terra); box-shadow: none; }
.w-dune .hunt-panel li b { font: 400 14.5px/1.3 var(--dn-serif); letter-spacing: .08em; color: rgba(59, 43, 32, .38); }
.w-dune .hunt-panel li.got b { color: var(--dn-ink); letter-spacing: .005em; }
.w-dune .hunt-panel li span { font: italic 400 12.5px/1.4 var(--dn-serif); color: var(--dn-ink2); }
.w-dune .hunt-panel li.got span { color: rgba(140, 70, 40, .9); }
.w-dune .hunt-flash { background: radial-gradient(circle, rgba(255, 250, 238, .95) 0%, rgba(240, 200, 150, .7) 18%, rgba(224, 138, 92, .22) 42%, rgba(224, 138, 92, 0) 70%); }

/* ---------- telefon: spakarna (diskreta, tonas ner när de inte används) och knapparna ---------- */
.w-dune .stick { border: 1px solid rgba(251, 244, 232, .55); background: radial-gradient(circle, rgba(251, 244, 232, .05) 40%, rgba(251, 244, 232, .14) 100%); box-shadow: 0 0 18px rgba(58, 34, 16, .12); }
.w-dune .stick::before, .w-dune .stick::after { display: none; }
.w-dune .stick .knob { width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(251, 244, 232, .55); box-shadow: 0 2px 8px rgba(58, 34, 16, .3); }
.w-dune .stick-l { bottom: -22px; font: italic 400 12px/1 var(--dn-serif); letter-spacing: .04em; text-transform: none; color: var(--dn-ivory); text-shadow: var(--dn-shadow); }
.w-dune.ready .stick.show { opacity: .5; animation: dnIdle 1.2s ease 7s forwards; }
.w-dune.entered .stick.show { animation: none; opacity: .28; }
.w-dune .stick.active { opacity: .85 !important; }
@keyframes dnIdle { to { opacity: .28; } }
/* call / jump: mjuka runda knappar med tecken + ord (motorn placerar dem; translate centrerar den större knappen på samma punkt) */
.w-dune .fly-btn { width: 58px; height: 58px; translate: 1px -13px; flex-direction: column; gap: 3px; border-radius: 50%; font: italic 400 12px/1 var(--dn-serif); letter-spacing: .02em; text-indent: 0;
  text-transform: none; color: var(--dn-ivory); background: var(--dn-glass); border: 1px solid var(--dn-edge); text-shadow: 0 1px 2px rgba(58, 34, 16, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 3px 12px rgba(58, 34, 16, .22); }
.w-dune .fly-btn::before { content: ""; width: 18px; height: 18px; background: center / contain no-repeat; opacity: .9; }
.w-dune .fly-btn[aria-label="call"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf4e8' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23fbf4e8' stroke='none'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M5 5a10 10 0 0 0 0 14M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); }
.w-dune .fly-btn[aria-label="jump"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf4e8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 13l6-6 6 6M6 19l6-6 6 6'/%3E%3C/svg%3E"); }
.w-dune.ready .fly-btn.show { opacity: .9; }
.w-dune .fly-btn.on { background: rgba(196, 100, 60, .62); border-color: rgba(255, 228, 200, .7); }

/* ---------- guiden ---------- */
.w-dune .wg-box { padding: 24px 24px 20px; color: var(--dn-ink); background: var(--dn-paper); border: 1px solid rgba(255, 255, 255, .6); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(40, 22, 10, .38), 0 2px 6px rgba(40, 22, 10, .12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.w-dune .wg-box b { margin-bottom: 10px; font: 400 23px/1.2 var(--dn-serif); letter-spacing: .02em; text-transform: none; color: var(--dn-ink); }
.w-dune .wg-box p { margin: 6px 0; font: 400 14.5px/1.45 var(--dn-serif); letter-spacing: 0; color: rgba(59, 43, 32, .82); }
.w-dune .wg-box em { font-style: italic; color: var(--dn-terra); }
.w-dune .wg-box kbd { font: 500 11.5px/1.3 var(--dn-sans); color: var(--dn-ink); background: rgba(255, 255, 255, .7); border: 1px solid rgba(59, 43, 32, .22); border-bottom-width: 2px; border-radius: 6px; }
.w-dune .guide-x { margin-top: 14px; padding: 10px 26px; font: italic 400 15px/1 var(--dn-serif); letter-spacing: .02em; text-transform: none; color: var(--dn-ivory); background: var(--dn-terra); box-shadow: 0 4px 14px rgba(196, 100, 60, .35); }
.w-dune .wg-th { border: 1px dashed rgba(251, 244, 232, .85); font: italic 400 14px/1 var(--dn-serif); letter-spacing: .02em; text-transform: none; color: var(--dn-ivory); text-shadow: var(--dn-shadow); background: none; }
@media (pointer: coarse) and (orientation: portrait) { .w-dune .wg-box { top: 38%; } }
/* tummarna ritas under rutan (på korta skärmar som iPhone SE går de inte att hålla isär) */
.w-dune .wg-th { z-index: -1; }
@media (pointer: coarse) and (orientation: portrait) and (max-height: 620px) {
  .w-dune .wg-box { top: max(58px, calc(env(safe-area-inset-top) + 52px)); transform: translate(-50%, 0); padding: 18px 18px 16px; }
  .w-dune .wg-box b { font-size: 20px; margin-bottom: 6px; } .w-dune .wg-box p { margin: 4px 0; font-size: 13.5px; line-height: 1.4; } .w-dune .guide-x { margin-top: 10px; }
}

/* ---------- flerspelare (kit/mp.js) i samma ton ---------- */
.w-dune .wm-chip { font: 400 13px/1 var(--dn-serif); letter-spacing: .01em; color: var(--dn-ivory); background: var(--dn-glass); border: 1px solid var(--dn-edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.w-dune .wm-say { border-color: var(--dn-edge); } .w-dune .wm-say svg { stroke: var(--dn-ivory); }
.w-dune .wm-sayf input { font: 400 15px var(--dn-serif); color: var(--dn-ink); background: var(--dn-paper); border: 1px solid rgba(255, 255, 255, .6); }
.w-dune .wm-sayf button { font: italic 400 14px/1 var(--dn-serif); letter-spacing: .02em; text-transform: none; color: var(--dn-ivory); background: var(--dn-terra); }
.w-dune .wm-lr { font: 400 13px/1.3 var(--dn-serif); color: var(--dn-ink); background: var(--dn-paper); } .w-dune .wm-lr b { color: var(--dn-terra); }
.w-dune .wm-peer b { font: italic 400 12.5px/1 var(--dn-serif); letter-spacing: .01em; text-shadow: var(--dn-shadow); }
.w-dune .wm-peer span { font: 400 13px/1.3 var(--dn-serif); color: var(--dn-ink); background: var(--dn-paper); border-color: rgba(255, 255, 255, .6); }

@media (prefers-reduced-motion: reduce) { .w-dune .hunt-btn.new, .w-dune.ready .stick.show { animation: none; } }