/* Guidad tur, Lotus & Lime bordsplatta. Koordinater i plattans oskalade
   system, 1366x1024. Lager i #tablet, syskon till #tabInner, över #life och #fx. */

.tour-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2000;
  font-family: inherit; color: #28251D; }
.tour-layer > * { pointer-events: auto; }

/* frågetecknet, alltid synligt under sessionen. v6.27.3: ligger ovanför dockan så att den inte krockar med språkknapparna */
.tour-icon { position: absolute; right: 14px; bottom: 110px; width: 52px; height: 52px;
  border-radius: 50%; border: 2px solid rgba(138,100,18,.55); background: rgba(255,246,238,.94);
  color: #8A6412; font-size: 26px; font-weight: 800; cursor: pointer; z-index: 2100; }
.tour-icon:active { transform: scale(.94); }

/* välkomsthint på hemskärmen, en gång per session */
.tour-chip { position: absolute; left: 50%; top: 96px; transform: translateX(-50%);
  border: 1.5px solid rgba(138,100,18,.5); background: rgba(255,246,238,.96); color: #5E4A1E;
  font-size: 16px; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(40,25,5,.15); }
.tour-chip:active { transform: translateX(-50%) scale(.97); }

/* spotlight: hålet är target, skuggan mörklägger resten */
.tour-spot { position: absolute; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(22,14,6,.6); outline: 2px solid #C8A63F; }
.tour-block { position: absolute; background: transparent; }
.tour-block.hard { left: 0; top: 0; width: 1366px; height: 1024px; }

/* tooltip */
.tour-tip { position: absolute; width: 380px; max-width: 460px; background: #FFF6EE;
  border: 2px solid rgba(138,100,18,.5); border-radius: 16px; padding: 18px 20px 16px;
  box-shadow: 0 12px 34px rgba(20,12,4,.35); z-index: 2050; }
.tour-tip h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.25; }
.tour-tip p { margin: 0 0 8px; font-size: 16px; line-height: 1.45; }
.tour-note { font-size: 13.5px; color: #7A6449; }
.tour-hint { font-size: 14px; font-weight: 700; color: #6E2344; }
.tour-badge { position: absolute; top: -13px; left: 16px; background: #8A6412; color: #FFF6EE;
  font-size: 13px; font-weight: 700; border-radius: 999px; padding: 4px 12px; letter-spacing: .04em; }
.tour-btns { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tour-spacer { flex: 1; }
.tour-next, .tour-prev, .tour-ch, .tour-welcome .tour-next { font: inherit; }
.tour-next { font-weight: 700; font-size: 16px; padding: 11px 22px; min-height: 44px;
  border-radius: 11px; border: 2px solid #8A6412; background: #C8A63F; color: #28251D; cursor: pointer; }
.tour-prev { font-weight: 600; font-size: 15px; padding: 10px 16px; min-height: 42px;
  border-radius: 11px; border: 1.5px solid rgba(40,37,29,.4); background: transparent; color: #28251D; cursor: pointer; }
.tour-close { width: 40px; height: 40px; border-radius: 50%; font-size: 17px;
  border: 1.5px solid rgba(40,37,29,.35); background: transparent; cursor: pointer; }

/* välkomst- och slutkort */
.tour-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 520px; max-width: 640px; background: #FFF6EE; border: 2px solid rgba(138,100,18,.5);
  border-radius: 20px; padding: 26px 28px 22px; box-shadow: 0 18px 50px rgba(20,12,4,.4); z-index: 2050; }
.tour-card h3 { margin: 0 0 8px; font-size: 26px; }
.tour-card p { margin: 0 0 10px; font-size: 17px; line-height: 1.45; }
.tour-sub { color: #5E4A1E; }
.tour-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.tour-ch { font-weight: 700; font-size: 16px; padding: 16px 12px; min-height: 58px; border-radius: 12px;
  border: 2px solid rgba(138,100,18,.45); background: rgba(255,246,238,.7); color: #28251D; cursor: pointer; }
.tour-ch:active { background: #C8A63F; }

/* vänteläge medan navigationen landar */
.tour-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #FFF6EE; border: 2px solid rgba(138,100,18,.5); border-radius: 14px;
  padding: 18px 26px; font-size: 16px; }

/* telefonvyn: smalare kort */
body.phone .tour-tip { width: 300px; }
body.phone .tour-card { width: 320px; }
body.phone .tour-chapters { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .tour-icon, .tour-chip, .tour-ch { transition: none; }
}