/* SkedsmoGo – spillgrensesnitt */
:root {
  --bg: #0e1626;
  --panel: #16243b;
  --panel-2: #1e3050;
  --line: #2b4267;
  --text: #eaf1fb;
  --muted: #8ea3c0;
  --accent: #e2483d;
  --gold: #f5b73d;
  --green: #4cc38a;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

.hidden { display: none !important; }

/* ---------- Oppstart ---------- */
.boot {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 35%, #1e3050 0%, #0e1626 70%);
}
.boot-logo { width: min(58vw, 240px); filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.boot-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#boot-text { color: var(--muted); font-size: 15px; margin: 0; padding: 0 24px; text-align: center; }

/* ---------- Kart ---------- */
/* Samme grønne som kartstilens bakgrunn, så oppstarten ikke blinker hvitt. */
#map { position: fixed; inset: 0; background: #9ed9ae; }
.maplibregl-ctrl-bottom-left { display: none; }

/* Attribusjon: kollapset til en liten mørk «i» som ikke slåss med UI-et.
   Kreditering av OpenStreetMap/OpenFreeMap er påkrevd, så den skjules ikke –
   den er ett trykk unna, og hele lista står også på Profil-skjermen. */
.maplibregl-ctrl-bottom-right { margin: 0 4px calc(var(--safe-b) + 74px) 0; }
.maplibregl-ctrl-attrib.maplibregl-compact {
  background: rgba(14,22,38,.66); border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; min-height: 20px; box-shadow: none;
}
.maplibregl-ctrl-attrib-button {
  width: 20px; height: 20px; background-color: transparent;
  filter: invert(1); opacity: .45;
}
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button { opacity: .8; }
.maplibregl-ctrl-attrib-inner {
  font-size: 9px; line-height: 1.5; color: var(--muted); padding: 1px 2px;
}
.maplibregl-ctrl-attrib-inner a { color: #b9cde8; }

/* Kartet er lyst og appen er mørk. Vignetten binder dem sammen ved å tone
   ned kantene, og gir samtidig dybde mot horisonten. */
/* Markørene må ligge over vignetten, ellers blir de vasket ut. Reven skal ikke
   forsvinne bak en skapning hun står oppå, men et oppdrag må fortsatt være
   synlig og trykkbart når man står midt i det – derfor tre nivåer. */
.maplibregl-marker { z-index: 6; }
.maplibregl-marker.me-figur, .maplibregl-marker.me-dot { z-index: 7; }
.maplibregl-marker.event-mk { z-index: 8; }

.map-vignette {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14,22,38,.55) 0%, rgba(14,22,38,0) 22%),
    radial-gradient(130% 85% at 50% 58%, rgba(14,22,38,0) 42%, rgba(14,22,38,.42) 100%);
}

.map-badge {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--safe-t) + 74px); z-index: 20;
  background: rgba(226,72,61,.92); color: #fff; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.4);
  max-width: calc(100vw - 32px); text-align: center;
}

/* Spillermarkør.
   Ringene ligger flatt på bakken (egen markør med pitchAlignment «map»), mens
   prikken står opp mot kameraet. */
.me-rings { width: 0; height: 0; pointer-events: none; }
.me-rings i {
  position: absolute; left: 0; top: 0; display: block; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.me-acc { background: rgba(74,163,255,.14); border: 1px solid rgba(74,163,255,.45); }
.me-range {
  border: 3px dashed rgba(255,208,92,.9); background: rgba(255,208,92,.06);
  box-shadow: 0 0 22px rgba(255,208,92,.35) inset; transition: opacity .3s;
}

/* Spillerfiguren: reven som 2D-sprite, ankret i bakken med en myk skygge.
   MapLibre eier `transform` på rot-elementet, så vippingen ligger på wrapperen. */
.me-figur { width: 54px; height: 60px; pointer-events: none; position: relative; }
.me-figur-b {
  display: block; width: 54px; height: 54px;
  animation: bob 2.8s ease-in-out infinite;
}
.me-figur img { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.me-figur::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 30px; height: 10px; margin-left: -15px; border-radius: 50%;
  background: rgba(22,52,42,.32); filter: blur(1.5px);
}

.me-dot { width: 22px; height: 22px; position: relative; pointer-events: none; }
.me-dot i {
  position: absolute; inset: 0; border-radius: 50%;
  background: #4aa3ff; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.55);
}
.me-dot::after {
  content: ''; position: absolute; inset: -11px; border-radius: 50%;
  background: rgba(74,163,255,.3); animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.5); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Spawn-markører.
   MapLibre styrer `transform` på selve markør-elementet, så all animasjon som
   flytter på noe må ligge på et indre element – ellers havner markøren i hjørnet. */
.spawn-mk { width: 46px; height: 52px; cursor: pointer; }
.spawn-mk .bob { display: block; width: 46px; height: 46px; animation: bob 2.6s ease-in-out infinite; }
.spawn-mk img { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
/* Liten skygge på bakkepunktet, så figuren ikke ser ut som den svever. */
.spawn-mk::after {
  content: ''; position: absolute; left: 50%; bottom: 1px;
  width: 26px; height: 9px; margin-left: -13px; border-radius: 50%;
  background: rgba(22,52,42,.34); filter: blur(1px);
}
.spawn-mk.near img { filter: drop-shadow(0 0 8px var(--gold)) drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.spawn-mk.done { opacity: .35; }
.spawn-mk.done img { filter: grayscale(1); }
.spawn-mk.done .bob { animation: none; }
/* Sjeldne arter gløder. Gløden ligger i et eget element som animerer `opacity`
   – å animere `filter` tvinger fram ny opptegning på hovedtråden hvert bilde,
   og med flere sjeldne arter på skjermen ble det målbart tregere. */
.spawn-mk.r4 .bob::before, .spawn-mk.r5 .bob::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,208,92,.55), rgba(255,208,92,0) 70%);
  animation: glow 1.8s ease-in-out infinite;
}
.spawn-mk .bob { position: relative; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes glow { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Eventmarkør med radius: ringen ligger flatt på bakken i egen markør, selve
   knappen står opp mot kameraet. */
.event-mk { width: 40px; height: 46px; cursor: pointer; }
.event-mk span {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; font-size: 20px;
  background: var(--gold); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.event-mk.done span { background: var(--green); }

.event-ring { width: 0; height: 0; pointer-events: none; }
.event-ring i {
  position: absolute; left: 0; top: 0; display: block; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255,208,92,.75); background: rgba(255,208,92,.1);
}
.event-ring.done i { border-color: rgba(126,214,160,.6); background: rgba(126,214,160,.08); }

/* ---------- HUD ---------- */
.hud {
  position: fixed; z-index: 30; left: 8px; right: 8px; top: calc(var(--safe-t) + 8px);
  display: flex; align-items: center; gap: 10px;
  background: rgba(14,22,38,.86); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 16px; padding: 8px 10px;
}
.hud-logo { width: 34px; height: 34px; object-fit: contain; }
.hud-level { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.hud-level span { font-size: 14px; font-weight: 700; z-index: 1; }
.ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring-bg { stroke: rgba(255,255,255,.13); }
.ring-fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .5s; }
.hud-stats { display: flex; gap: 12px; margin-left: auto; }
.hud-stat { display: flex; align-items: center; gap: 5px; font-size: 15px; }
.hud-icon { color: var(--gold); }
.hud-ball { width: 20px; height: 20px; }
.hud-btn {
  width: 38px; height: 38px; border-radius: 12px; font-size: 18px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
}
.hud-btn.on { background: var(--accent); border-color: var(--accent); }
.hud-btn.compass { display: grid; place-items: center; }
.hud-btn.compass span {
  width: 0; height: 0; transform: rotate(var(--dir, 0deg));
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 15px solid var(--accent);
  filter: drop-shadow(0 0 3px rgba(0,0,0,.5));
}

/* ---------- Bunnmeny ---------- */
.nav {
  position: fixed; z-index: 30; left: 8px; right: 8px; bottom: calc(var(--safe-b) + 8px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: rgba(14,22,38,.9); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 18px; padding: 6px;
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; color: var(--muted); font-size: 11px;
  padding: 6px 0; border-radius: 13px;
}
.nav-btn span { font-size: 19px; }
.nav-btn.active { color: var(--text); background: var(--panel-2); }

/* ---------- Skjermer ---------- */
.screen {
  position: fixed; z-index: 40; inset: 0;
  padding: calc(var(--safe-t) + 12px) 12px calc(var(--safe-b) + 84px);
  background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.screen-head { display: flex; align-items: center; margin-bottom: 12px; }
.screen-head h2 { margin: 0; font-size: 20px; }
.close {
  margin-left: auto; width: 36px; height: 36px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 15px;
}

/* Revedex */
.dex-summary { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 10px; }
.dex-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 6px; text-align: center;
}
.dex-card.locked { opacity: .45; }
.dex-card.locked img { filter: grayscale(1) brightness(.4); }
.dex-card img { width: 60px; height: 60px; }
.dex-name { font-size: 12px; font-weight: 600; margin-top: 4px; word-break: break-word; }
.dex-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.dex-count { font-size: 10px; color: var(--gold); }
.stars { color: var(--gold); font-size: 10px; letter-spacing: 1px; }

/* Ledertavle */
.top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.top-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px;
}
.top-row.me { border-color: var(--gold); background: var(--panel-2); }
.top-rank { font-size: 17px; font-weight: 700; width: 30px; color: var(--muted); }
.top-row:nth-child(1) .top-rank { color: var(--gold); }
.top-name { flex: 1; font-size: 15px; }
.top-sub { font-size: 11px; color: var(--muted); }
.top-pts { font-weight: 700; color: var(--gold); }

/* Profil */
.me-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; margin-bottom: 14px; text-align: center;
}
.me-card h3 { margin: 8px 0 2px; font-size: 20px; }
.me-fox { width: 96px; }
.me-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.me-stat { background: var(--panel-2); border-radius: 12px; padding: 9px 4px; }
.me-stat b { display: block; font-size: 17px; }
.me-stat span { font-size: 11px; color: var(--muted); }
.xpbar { height: 7px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin-top: 12px; }
.xpbar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 15px; margin-bottom: 14px;
}
.card h4 { margin: 0 0 4px; font-size: 16px; }
.card p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.field { margin-bottom: 9px; }
input[type=text], input[type=password] {
  width: 100%; padding: 11px 13px; font-size: 16px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 11px; color: var(--text);
}
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 600;
  background: var(--accent); color: #fff; border: 0; border-radius: 12px; cursor: pointer;
}
.btn:disabled { opacity: .5; }
.btn.ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); text-decoration: none; }
.btn.gold { background: var(--gold); color: #2a1d00; }
.btn + .btn { margin-top: 8px; }
.me-links { display: flex; flex-direction: column; gap: 8px; }
.fine { color: var(--muted); font-size: 11px; text-align: center; margin: 16px 0 0; line-height: 1.5; }
.linkish { background: none; border: 0; color: var(--gold); font-size: 13px; text-decoration: underline; padding: 6px 0; }

/* ---------- Infoark ---------- */
.sheet {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0; padding: 8px 16px calc(var(--safe-b) + 84px);
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translateY(100%); } }
.sheet-grab { width: 40px; height: 4px; border-radius: 99px; background: var(--line); margin: 0 auto 12px; }
.sheet-top { display: flex; gap: 14px; align-items: center; }
.sheet-top img { width: 76px; height: 76px; }
.sheet-top h3 { margin: 0 0 3px; font-size: 19px; }
.sheet-desc { color: var(--muted); font-size: 13px; margin: 12px 0; line-height: 1.45; }
.pill {
  display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 99px;
  background: var(--panel-2); border: 1px solid var(--line); margin-right: 5px;
}
.pill.far { background: rgba(226,72,61,.2); border-color: var(--accent); color: #ffb3ad; }
.pill.near { background: rgba(76,195,138,.18); border-color: var(--green); color: #a5f0cd; }

/* ---------- Fangstskjerm ---------- */
.catch { position: fixed; inset: 0; z-index: 60; overflow: hidden; touch-action: manipulation; }
.catch-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catch-sky {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, #2f4f7d 0%, #16243b 55%, #0b1220 100%);
}
.catch.ar .catch-sky { display: none; }
.catch-close, .catch-ar {
  position: absolute; top: calc(var(--safe-t) + 12px); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; font-size: 15px; font-weight: 700;
  background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.25);
}
.catch-close { left: 14px; }
.catch-ar { right: 14px; }
.catch.ar .catch-ar { background: var(--accent); border-color: var(--accent); }

.catch-stage { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.catch-target { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.catch-target img { width: 130px; height: 130px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 12px 20px rgba(0,0,0,.5)); }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
.catch-target.hit img { animation: hit .45s ease-out forwards; }
@keyframes hit { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(0); opacity: 0; } }
.catch-target.miss img { animation: miss .5s ease-out; }
@keyframes miss {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-22px) rotate(-8deg); }
  75% { transform: translateX(22px) rotate(8deg); }
}

/* Timing-ringen: hvitt målfelt ligger på 100 % av basestørrelsen */
.catch-ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 5px solid var(--gold); pointer-events: none;
}
.catch-target::before {
  content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 11px dashed rgba(255,255,255,.55);
}
.catch-info {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 150px);
  text-align: center; z-index: 3; padding: 0 20px;
}
.catch-info h3 { margin: 0 0 4px; font-size: 24px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.catch-info p { margin: 0; color: #cfe0f5; font-size: 13px; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.catch-ball {
  position: absolute; left: 50%; bottom: calc(var(--safe-b) + 46px);
  width: 66px; margin-left: -33px; z-index: 3;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
  animation: ready 2s ease-in-out infinite;
}
@keyframes ready { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.catch-ball.throw { animation: throwBall .42s cubic-bezier(.3,-0.2,.7,1) forwards; }
@keyframes throwBall {
  0% { transform: translateY(0) scale(1) rotate(0); }
  100% { transform: translateY(-42vh) scale(.42) rotate(720deg); }
}
.catch-balls {
  position: absolute; right: 16px; bottom: calc(var(--safe-b) + 60px); z-index: 3;
  font-size: 15px; font-weight: 700; background: rgba(0,0,0,.45);
  padding: 7px 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.2);
}

/* ---------- Resultat ---------- */
.result { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(6,10,18,.82); padding: 24px; }
.result-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 26px 22px; text-align: center; max-width: 340px; width: 100%;
  animation: pop .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.result-card img { width: 118px; height: 118px; }
.result-card h3 { margin: 10px 0 4px; font-size: 22px; }
.result-card p { color: var(--muted); font-size: 14px; margin: 0 0 16px; line-height: 1.5; }
.reward { color: var(--gold); font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.levelup { color: var(--green); font-weight: 700; margin-bottom: 10px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; z-index: 90; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--safe-b) + 96px);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 11px 18px; border-radius: 14px; font-size: 14px; max-width: 90vw; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { border-color: var(--accent); }
.toast.good { border-color: var(--green); }

@media (min-width: 720px) {
  .hud, .nav { max-width: 520px; margin: 0 auto; left: 0; right: 0; }
  .screen { max-width: 560px; margin: 0 auto; }
  .sheet { max-width: 560px; margin: 0 auto; border-radius: 22px 22px 0 0; }
}