/* ============================================================
   NORDLYS — UI-stil (2026: mørk glassmorfisme + aurora-aksenter)
   ============================================================ */

:root {
  --bg: #16204a;
  --aurora1: #3df5a8;   /* grønn */
  --aurora2: #2fc4ff;   /* cyan */
  --aurora3: #b18cff;   /* fiolett */
  --gold: #ffd76e;
  --danger: #ff5d7a;
  --text: #f2f7ff;
  --text-dim: rgba(240, 246, 255, 0.75);
  --glass: rgba(255, 255, 255, 0.13);
  --glass-border: rgba(255, 255, 255, 0.20);
  --radius: 18px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

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

html, body {
  margin: 0;
  background: #16204a;
  overscroll-behavior: none;
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  /* No height:100% and no overflow:hidden here — that clips at the SMALL
     viewport (793) and re-introduces the bottom band on iOS 26. The frame
     below is normal-flow so the page is the LARGE viewport (852) and renders
     behind the browser controls / home indicator, like an ordinary webpage.
     touch-action:none still blocks drag-scrolling during play. */
  touch-action: none;
}

/* Phone frame in NORMAL DOCUMENT FLOW (position:relative, NOT fixed).
   iOS 26 refuses to paint position:fixed/sticky content below the bottom
   browser controls / home indicator — it clips it, leaving an opaque band.
   Ordinary (non-fixed) flow content DOES render behind those controls, so
   the frame must be a normal block. height:100lvh = the full physical
   screen (852 on the test iPhone). Centered on desktop via margin auto. */
#frame {
  position: relative;
  margin: 0 auto;
  height: 100vh;   /* fallback (large viewport on iOS) */
  height: 100lvh;  /* full physical screen, incl. behind controls/indicator */
  width: min(100vw, calc(100lvh * 0.56));
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 80px rgba(47, 196, 255, 0.08);
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Eget GPU-lag: når canvaset endrer seg hver frame skal det IKKE tvinge
     HUD-laget over til å re-rasteriseres med (perf-undersøkelse 28. juni). */
  transform: translateZ(0);
}

/* UI layer fills the whole frame; individual screens use safe-area PADDING
   so buttons/HUD stay clear of the notch and home indicator. */
#ui { position: absolute; inset: 0; pointer-events: none; }

/* ============ Skjermer ============ */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  pointer-events: auto;
  padding: calc(14px + var(--sat)) 18px calc(16px + var(--sab));
}
.screen.active { display: flex; animation: screenIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.screen.overlay {
  background: rgba(20, 28, 62, 0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  z-index: 20;
}
/* Confirm/report/info/add-user dialogs must float above EVERYTHING (incl. panels at 22) */
#s-confirm, #s-report, #s-info, #s-adduser { z-index: 40; }
/* The login gate sits on top of everything, even dialogs */
#s-login { z-index: 50; }
/* Stat-chips og mastery er trykkbare → liten forklarings-popup */
.stat-chip[data-stat], .mastery[data-stat] { cursor: pointer; }
.stat-chip[data-stat]:active { filter: brightness(1.3); }
.hidden { display: none !important; }

/* ============ Knapper ============ */
.btn {
  pointer-events: auto;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text);
  font: 600 16px/1 inherit;
  font-family: inherit;
  padding: 15px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.08s ease, filter 0.12s ease;
  min-height: 50px;
}
.btn:active { transform: scale(0.96); filter: brightness(1.25); }

.btn-primary {
  background: linear-gradient(135deg, var(--aurora1), var(--aurora2));
  border: none;
  color: #04221a;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 30px rgba(61, 245, 168, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-big { font-size: 22px; padding: 19px; border-radius: 22px; }
.btn-danger { background: rgba(255, 93, 122, 0.14); border-color: rgba(255, 93, 122, 0.4); color: #ffaebc; }
.btn-glass .b-ico { margin-right: 7px; opacity: 0.8; }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-back {
  min-height: 44px; width: 44px; padding: 0;
  font-size: 26px; line-height: 1; border-radius: 14px;
}

/* ============ Hovedmeny ============ */
/* Mindre bunn-padding = knappene sitter lavere på skjermen */
#s-menu { justify-content: space-between; padding-bottom: calc(16px + var(--sab)); --menu-lift: 34px; }
/* Løft logo+tekst, karakter (canvas, se PLAYER_MENU_Y_OFF) og bunn-knappene like mye opp */
.menu-mid, .menu-bottom { transform: translateY(calc(-1 * var(--menu-lift))); }

.menu-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.profile-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 8px 14px 8px 8px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lvl-badge {
  width: 34px; height: 34px; border-radius: 12px;
  background: linear-gradient(135deg, var(--aurora3), var(--aurora2));
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: #120a2e;
}
.xp-wrap { display: flex; flex-direction: column; gap: 4px; }
.xp-label { font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }
.xp-bar { width: 88px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.xp-fill { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--aurora3), var(--aurora2)); transition: width 0.4s ease; }

.stardust-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 10px 15px;
  font-weight: 700; font-size: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.stardust-chip.small { padding: 8px 12px; font-size: 14px; }
.star-ico { color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 110, 0.8); }
/* Dobbelt så stort stjerneikon foran saldoen (line-height 0 hindrer
   at chipen vokser i høyden) */
.stardust-chip .star-ico { font-size: 32px; line-height: 0; }
.stardust-chip.small .star-ico { font-size: 28px; }
.hud-stardust .star-ico { font-size: 30px; line-height: 0; }

.menu-mid { text-align: center; pointer-events: none; }
.logo {
  font-size: clamp(44px, 13vw, 62px);
  font-weight: 900;
  letter-spacing: 0.10em;
  background: linear-gradient(110deg, var(--aurora1) 10%, var(--aurora2) 45%, var(--aurora3) 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(61, 245, 168, 0.35));
  animation: logoShift 6s ease-in-out infinite alternate;
}
@keyframes logoShift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.logo-sub { letter-spacing: 0.5em; font-size: 12px; color: var(--text-dim); margin-top: 6px; text-indent: 0.5em; }
.best-line { margin-top: 18px; font-size: 14px; color: var(--text-dim); }

.menu-bottom { display: flex; flex-direction: column; gap: 12px; }

/* «Next goal» card on the menu — always surfaces the nearest target */
.next-goal {
  width: 100%; text-align: left; cursor: pointer;
  background: rgba(20, 28, 62, 0.55); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 9px 14px;
}
.next-goal .ng-cap { font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--aurora1); text-transform: uppercase; margin-bottom: 4px; opacity: 0.9; }
.next-goal .ng-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.next-goal .ng-label { font-weight: 800; font-size: 13px; }
.next-goal .ng-rem { font-size: 12px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.next-goal .ng-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 6px; }
.next-goal .ng-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--aurora3), var(--aurora2)); }
.next-goal .ng-sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.menu-row { display: flex; gap: 10px; }
.menu-row .btn {
  flex: 1;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 13px 4px;
  background: linear-gradient(160deg, rgba(61, 245, 168, 0.12), rgba(47, 196, 255, 0.06) 55%, rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(61, 245, 168, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 18px rgba(61, 245, 168, 0.08);
}
.menu-row .b-ico {
  margin-right: 7px;
  color: var(--aurora1);
  text-shadow: 0 0 10px rgba(61, 245, 168, 0.8);
  font-size: 15px;
}
/* Settings as a compact square icon-only button — frees width so the other
   three (Daily/Squad/Scores) share the row equally. */
.menu-row .btn-icon {
  flex: 0 0 auto;
  width: 48px;
  padding: 13px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-row .btn-icon .b-ico { margin-right: 0; font-size: 18px; }

/* ============ Følget: faner + sidelengs sveiping ============ */
.tabs {
  position: relative;
  display: flex;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 4px;
}
.tab {
  flex: 1;                 /* equal cells → tabs fill their column, stardust chip always fits */
  position: relative; z-index: 1;
  border: none; background: none;
  color: var(--text-dim);
  font: 700 14px/1 inherit; font-family: inherit;
  padding: 10px 4px;
  white-space: nowrap;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.tab span { position: relative; z-index: 1; }
.tab.is-on { color: #07301f; }
/* The indicator's left + width are set live in JS (syncTabInd) to match the
   ACTIVE tab's real size — so it fits each label (Guardians wider than Foxes). */
.tab-ind {
  position: absolute;
  top: 4px; left: 4px;
  width: 96px;
  height: calc(100% - 8px);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--aurora1), var(--aurora2));
  box-shadow: 0 2px 14px rgba(61, 245, 168, 0.35);
  transition: left 0.28s cubic-bezier(0.3, 1.1, 0.4, 1), width 0.28s cubic-bezier(0.3, 1.1, 0.4, 1);
}
.tabs-3 .tab { font-size: 12px; }

/* Starforge rows (permanent upgrades) */
.forge-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.forge-row.maxed { opacity: 0.8; }
.forge-info { flex: 1; min-width: 0; }
.forge-name { font-weight: 800; font-size: 15px; }
.forge-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.forge-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; margin: 7px 0 4px; }
.forge-fill { height: 100%; border-radius: 3px; }
.forge-lvl { font-size: 11px; color: var(--text-dim); }
.forge-act { flex: 0 0 auto; }
.forge-max { color: var(--gold); font-weight: 800; font-size: 13px; }

.hangar-swipe {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x;
  margin: 0 -18px;            /* sidene får gli helt ut til skjermkanten */
  -webkit-overflow-scrolling: touch;
}
.hangar-swipe::-webkit-scrollbar { display: none; }
.hangar-page {
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 0;
  box-sizing: border-box;
}
.hangar-page .card-list { touch-action: pan-y pan-x; }

/* ============ Paneler (Følget / Innstillinger) ============ */
/* z-index 22: paneler skal ligge over HUD (10) og pause-overlay (20),
   ellers stjeler pauseknappen trykk når innstillinger åpnes fra pause.
   padding-bottom 0: scroll-innholdet skal være synlig HELT til bunnkanten —
   luften nederst ligger i stedet INNI scroll-containerne (med safe-area). */
.panel {
  background: rgba(26, 36, 76, 0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 22;
  padding-bottom: 0;
}
.panel-head {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.panel-head h2 { font-size: 22px; font-weight: 800; letter-spacing: 0.03em; }

.card-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding-bottom: calc(24px + var(--sab)); touch-action: pan-y; scrollbar-width: none;
}
.card-list::-webkit-scrollbar { display: none; }

.card {
  display: grid; grid-template-columns: 76px 1fr; gap: 12px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 13px;
  transition: border-color 0.2s ease;
}
.card.equipped { border-color: rgba(61, 245, 168, 0.55); box-shadow: 0 0 24px rgba(61, 245, 168, 0.12); }
.card.locked { opacity: 0.85; }
.card-preview {
  width: 76px; height: 76px; border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.10), rgba(0,0,0,0.18));
  display: grid; place-items: center;
}
.card-preview canvas { width: 64px; height: 64px; }
.card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card-title { display: flex; align-items: baseline; gap: 8px; }
.card-title h3 { font-size: 17px; font-weight: 800; }
.card-lvl { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.card-desc { font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.card-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.stat-chip {
  font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 8px;
  background: rgba(255,255,255,0.07); color: var(--text-dim);
}
.stat-chip b { color: var(--text); font-weight: 700; }
.card-actions { display: flex; gap: 8px; margin-top: 4px; }
.card-actions .btn { flex: 1; min-height: 42px; padding: 10px 8px; font-size: 13px; border-radius: 13px; }
.btn-equip.is-on { background: rgba(61,245,168,0.16); border-color: rgba(61,245,168,0.5); color: var(--aurora1); }
.btn-upgrade { white-space: nowrap; }
.btn-buy { background: linear-gradient(135deg, var(--gold), #ff9d5c); border: none; color: #2e1a04; font-weight: 800; }
.cost-ico { color: inherit; opacity: 0.9; margin-right: 3px; }

/* Mastery (slow long-term growth per guardian) */
.mastery { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.m-label { font-size: 10.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.m-label b { color: var(--gold); }
.m-bar { display: block; flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.10); overflow: hidden; }
.m-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold), #ff9d5c); }

/* Levels screen */
/* Ascension card (top of Levels) */
.ascend-card {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: linear-gradient(135deg, rgba(255,215,110,0.16), rgba(177,140,255,0.12));
  border: 1px solid rgba(255,215,110,0.45); border-radius: 16px;
  padding: 12px 14px; margin-bottom: 12px;
}
.ascend-title { font-weight: 900; font-size: 16px; color: var(--gold); }
.ascend-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ascend-locked { font-size: 12px; font-weight: 800; color: var(--text-dim); }

.level-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 11px 14px;
}
.level-row.done { opacity: 0.55; }
.level-row.current {
  border-color: rgba(61, 245, 168, 0.55);
  box-shadow: 0 0 20px rgba(61, 245, 168, 0.12);
}
.level-badge {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  font-weight: 800; font-size: 14px;
}
.level-row.current .level-badge { background: linear-gradient(135deg, var(--aurora1), var(--aurora2)); color: #07301f; }
.level-row.done .level-badge { color: var(--aurora1); }
.level-name { font-size: 14px; font-weight: 700; }
.level-need { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.level-reward { font-size: 13px; font-weight: 700; white-space: nowrap; }
.level-perk {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  color: var(--aurora3); background: rgba(177, 140, 255, 0.12);
  border: 1px solid rgba(177, 140, 255, 0.3);
  padding: 3px 8px; border-radius: 8px; margin-top: 5px;
}
.level-progress { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.10); overflow: hidden; margin-top: 7px; }
.level-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--aurora1), var(--aurora2)); }

.profile-chip { cursor: pointer; font: inherit; color: inherit; text-align: left; transition: transform 0.08s ease; }
.profile-chip:active { transform: scale(0.96); }

.slot-info {
  font-size: 12px; color: var(--text-dim); text-align: center;
  padding: 8px; margin-bottom: 10px;
  background: rgba(177, 140, 255, 0.08); border: 1px dashed rgba(177, 140, 255, 0.3);
  border-radius: 12px;
}

/* ============ Innstillinger ============ */
.settings-list {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1; overflow-y: auto; touch-action: pan-y;
  padding-bottom: calc(24px + var(--sab));
  scrollbar-width: none; /* ingen scroll-stripe på høyresiden */
}
.settings-list::-webkit-scrollbar { display: none; }
.setting-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--glass); border: 1px solid var(--glass-border);
  padding: 15px 16px; border-radius: var(--radius);
  font-weight: 600; font-size: 15px; cursor: pointer;
}
.toggle {
  appearance: none; -webkit-appearance: none;
  width: 52px; height: 30px; border-radius: 15px;
  background: rgba(255,255,255,0.12); position: relative;
  transition: background 0.2s ease; cursor: pointer; flex-shrink: 0;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.6, 1);
}
.toggle:checked { background: linear-gradient(135deg, var(--aurora1), var(--aurora2)); }
.toggle:checked::after { transform: translateX(22px); }

/* Følsomhets-slider */
.setting-slider { flex-direction: column; align-items: stretch; gap: 12px; cursor: default; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.slider-head b { color: var(--aurora1); font-size: 16px; }
.slider-hint { font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
.slider {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 8px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  outline: none; cursor: pointer;
  touch-action: none; /* slideren skal eie fingeren, ikke scrollingen */
}
.slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--aurora1), var(--aurora2));
  box-shadow: 0 2px 12px rgba(61, 245, 168, 0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  cursor: grab;
}
.slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--aurora1), var(--aurora2));
  box-shadow: 0 2px 12px rgba(61, 245, 168, 0.5);
  cursor: grab;
}

/* Report dialog */
.report-kinds { display: flex; gap: 8px; }
.report-kind {
  flex: 1; pointer-events: auto;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  font: 700 12.5px/1 inherit; font-family: inherit;
  padding: 11px 4px; border-radius: 12px; cursor: pointer;
  transition: all 0.15s ease;
}
.report-kind.is-on {
  background: linear-gradient(135deg, var(--aurora1), var(--aurora2));
  border-color: transparent; color: #07301f;
}
.report-text {
  pointer-events: auto;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text);
  font: 500 15px/1.4 inherit; font-family: inherit;
  padding: 13px 15px; min-height: 96px; resize: none; outline: none;
  width: 100%;
}
.report-text:focus { border-color: rgba(61, 245, 168, 0.6); }

/* Player name + scoreboard */
.setting-btn { cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%; }
.setting-btn b { color: var(--aurora1); font-size: 14px; }
.name-input {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text);
  font: 600 17px/1 inherit;
  font-family: inherit;
  padding: 14px 16px;
  text-align: center;
  outline: none;
}
.name-input:focus { border-color: rgba(61, 245, 168, 0.6); }

/* ============ Login (gate) ============ */
.login-dialog { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.login-logo {
  font-size: 40px; font-weight: 900; letter-spacing: 0.12em; margin: 0;
  background: linear-gradient(180deg, #eaf0ff, #8fb4ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.login-dialog h2 { margin: 0; }
.login-dialog p { margin: 0 0 4px; }
.login-err { min-height: 18px; font-size: 13px; font-weight: 700; color: #ff8aa3; }

/* ============ Admin — manage users ============ */
.admin-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 12px 14px;
}
.admin-main { flex: 1; min-width: 0; }
.admin-name { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-badge { font-size: 10px; font-weight: 900; letter-spacing: 0.05em; color: #ffd76e; border: 1px solid rgba(255, 215, 110, 0.5); border-radius: 8px; padding: 1px 6px; }
.admin-you { font-size: 10px; font-weight: 800; color: var(--text-dim); border: 1px solid var(--glass-border); border-radius: 8px; padding: 1px 6px; }
.admin-locked { font-size: 10px; font-weight: 900; letter-spacing: 0.04em; color: #ff8aa3; border: 1px solid rgba(255, 93, 122, 0.5); border-radius: 8px; padding: 1px 6px; }
.btn-reveal { font-size: 13px; padding: 9px 12px; margin-top: -4px; }
.admin-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.admin-sub2 { font-size: 11px; color: rgba(202, 212, 240, 0.55); margin-top: 2px; }
.admin-actions { display: flex; flex-direction: column; gap: 6px; }
.btn-mini {
  pointer-events: auto; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-border);
  color: var(--text); font: 700 13px/1 inherit; border-radius: 10px; padding: 8px 12px; min-width: 54px;
}
.btn-mini.danger { color: #ff8aa3; border-color: rgba(255, 93, 122, 0.4); }
.adduser-admin { background: none; border: none; padding: 6px 2px; }

.score-row {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 12px 14px;
}
.score-row.me { border-color: rgba(61, 245, 168, 0.55); box-shadow: 0 0 18px rgba(61, 245, 168, 0.10); }
.score-rank {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  font-weight: 800; font-size: 13px;
}
.score-row:nth-child(1) .score-rank { background: linear-gradient(135deg, var(--gold), #ff9d5c); color: #2e1a04; }
.score-row:nth-child(2) .score-rank { background: rgba(220, 230, 255, 0.35); color: #0d1430; }
.score-row:nth-child(3) .score-rank { background: rgba(205, 137, 88, 0.45); color: #2e1a04; }
.score-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-lvl {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
  color: #07301f;
  background: linear-gradient(135deg, var(--aurora1), var(--aurora2));
  padding: 2px 7px; border-radius: 7px;
}
.score-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.score-pts { font-weight: 800; font-size: 16px; white-space: nowrap; }

.stats-box {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 14px 16px;
  font-size: 13px; color: var(--text-dim); line-height: 1.8;
}
.stats-box b { color: var(--text); }
.version-line { text-align: center; font-size: 11px; color: rgba(238,244,255,0.3); padding: 12px 0 4px; }

/* ============ HUD ============ */
/* HUD-en TEGNES nå på canvas (UI.renderHud), ikke som DOM. Et DOM-overlegg over
   et canvas som endrer seg hver frame kostet ~4 fps på eldre iPhone (iOS re-
   rasteriserte HUD-området hver frame). #hud beholdes i markup, men holdes alltid
   skjult (showHUD() er no-op) — disse reglene er nå ubrukte men ufarlige. */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.hud-top {
  position: absolute; top: calc(10px + var(--sat)); left: 12px; right: 12px;
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
}
.btn-pause {
  pointer-events: auto;
  width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(30, 40, 82, 0.72); color: var(--text-dim);
  font-size: 13px; cursor: pointer;
  /* No backdrop-filter: blurring the LIVE canvas every frame was a major
     GPU/compositing cost on mobile (see perf investigation 28. juni). */
}
.hud-score {
  text-align: center; font-size: 30px; font-weight: 900; letter-spacing: 0.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
.hud-stardust {
  display: flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: 15px;
  background: rgba(30, 40, 82, 0.72); border: 1px solid var(--glass-border);
  padding: 8px 12px; border-radius: 14px;
  /* No backdrop-filter over the live canvas — see .btn-pause note. */
}

.boss-bar { position: absolute; top: calc(64px + var(--sat)); left: 24px; right: 24px; }
.boss-name {
  text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0.2em;
  color: #ffaebc; text-shadow: 0 0 12px rgba(255, 93, 122, 0.7); margin-bottom: 5px;
}
.boss-track { height: 9px; border-radius: 5px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,93,122,0.35); overflow: hidden; }
.boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5d7a, #ff9d5c); border-radius: 5px; transition: width 0.15s linear; }

.power-chips {
  position: absolute; top: calc(96px + var(--sat)); left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
}
.p-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  background: rgba(30, 40, 82, 0.65); border: 1px solid var(--glass-border);
  padding: 5px 10px; border-radius: 12px;
}
.p-chip .p-bar { display: block; width: 30px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; }
/* display:block er avgjørende: inline-elementer ignorerer width, og da "teller" ikke baren ned */
.p-chip .p-fill { display: block; height: 100%; width: 100%; background: currentColor; border-radius: 2px; }

/* ============ Dialoger ============ */
.dialog {
  width: min(340px, 86%);
  background: rgba(36, 47, 94, 0.90);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  padding: 28px 22px calc(22px + var(--sab) / 2);
  display: flex; flex-direction: column; gap: 11px;
  text-align: center;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  animation: dialogIn 0.3s cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes dialogIn { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: none; } }
.dialog h2 { font-size: 23px; font-weight: 800; margin-bottom: 4px; }
.dialog p { font-size: 14px; color: var(--text-dim); margin-bottom: 8px; line-height: 1.45; }

.pause-toggles { display: flex; justify-content: center; gap: 22px; margin-top: 8px; }
.pause-toggles label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); cursor: pointer; }

/* Game over */
.go-record {
  font-size: 15px; font-weight: 800; letter-spacing: 0.18em; color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 215, 110, 0.8);
  animation: recordPulse 1s ease-in-out infinite alternate;
}
@keyframes recordPulse { from { transform: scale(1); } to { transform: scale(1.07); } }
.go-score {
  font-size: 52px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--aurora1), var(--aurora2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 2px 0 6px;
}
.go-stats { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.go-row {
  display: flex; justify-content: space-between;
  font-size: 14px; padding: 9px 14px;
  background: rgba(255,255,255,0.05); border-radius: 12px;
}
.go-row span:first-child { color: var(--text-dim); }
.go-row span:last-child { font-weight: 700; }
.btn-revive {
  background: linear-gradient(135deg, var(--aurora3), #7a5cff);
  border: none; color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 6px 24px rgba(122, 92, 255, 0.4);
}
.rev-cost { font-size: 13px; opacity: 0.95; background: rgba(0,0,0,0.25); padding: 4px 9px; border-radius: 9px; }

/* ============ Tutorial ============ */
#tutorial {
  position: absolute; left: 0; right: 0; bottom: 10%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; z-index: 11;
}
.tut-hand { font-size: 44px; animation: handDrag 1.6s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)); }
@keyframes handDrag { 0%, 100% { transform: translateX(-44px); } 50% { transform: translateX(44px); } }
.tut-text {
  font-size: 14px; font-weight: 600; color: var(--text);
  background: rgba(30, 40, 82, 0.8); padding: 9px 18px; border-radius: 14px;
  border: 1px solid var(--glass-border);
}

/* ============ Toasts ============ */
#toasts {
  position: absolute; top: calc(70px + var(--sat)); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; z-index: 30;
}
.toast {
  background: rgba(36, 47, 94, 0.94);
  border: 1px solid rgba(61, 245, 168, 0.4);
  color: var(--text); font-size: 14px; font-weight: 700;
  padding: 12px 22px; border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 20px rgba(61,245,168,0.12);
  animation: toastIn 0.35s cubic-bezier(0.2, 1.3, 0.4, 1), toastOut 0.4s ease 4s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* Night announcement banner — prominent + stays ~5s (fades out at the end).
   No backdrop-filter (solid bg) since it sits over the live canvas. */
.night-banner {
  position: absolute; top: 36%; left: 50%; transform: translateX(-50%);
  z-index: 30; pointer-events: none; text-align: center; max-width: 82%;
  background: rgba(10, 16, 38, 0.82); border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 14px 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  animation: nightIn 0.5s cubic-bezier(0.2, 1, 0.3, 1), nightOut 0.7s ease 4.5s forwards;
}
.night-banner .nb-name { font-size: 26px; font-weight: 900; letter-spacing: 0.04em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }
.night-banner .nb-desc { font-size: 14px; color: var(--text-dim); margin-top: 5px; }
@keyframes nightIn { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.92); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes nightOut { to { opacity: 0; transform: translateX(-50%) translateY(-8px); } }

/* ============ Combo (kill-chain multiplier) ============ */
.hud-combo {
  position: absolute; top: calc(50px + var(--sat)); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  pointer-events: none;
}
.hud-combo .combo-x {
  font-size: 26px; font-weight: 900; letter-spacing: 0.02em; color: var(--gold);
  text-shadow: 0 0 14px rgba(255, 215, 110, 0.9), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hud-combo .combo-mult {
  font-size: 12px; font-weight: 800; color: var(--aurora1);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* The combo "pop" is driven reflow-free by the Web Animations API in UI.hudCombo */

/* Completion-bonus row on the game-over card */
.go-bonus span:last-child { color: var(--gold); font-weight: 800; }
/* First-run ×2 — løft den frem så det er umulig å overse den doble gevinsten */
.go-first {
  background: rgba(255, 215, 110, 0.14);
  border: 1px solid rgba(255, 215, 110, 0.4);
}
.go-first span:first-child { color: var(--gold); font-weight: 800; }
.go-next { font-size: 12.5px; color: var(--text-dim); text-align: center; margin: 2px 0 6px; }
.go-next b { color: var(--aurora1); }

/* ============ Daily (login streak + quests) ============ */
.menu-row .btn { position: relative; }
.dot-badge {
  position: absolute; top: 5px; right: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 215, 110, 0.9);
}
.daily-streak {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(255, 215, 110, 0.14), rgba(255, 157, 92, 0.08));
  border: 1px solid rgba(255, 215, 110, 0.35); border-radius: 18px;
  padding: 16px 18px; margin-bottom: 4px;
}
.daily-streak-num {
  font-size: 40px; font-weight: 900; color: var(--gold); line-height: 1;
  display: flex; align-items: baseline; gap: 2px;
  text-shadow: 0 0 16px rgba(255, 215, 110, 0.6);
}
.daily-streak-num span { font-size: 22px; }
.daily-streak-txt { display: flex; flex-direction: column; gap: 3px; }
.daily-streak-txt b { font-size: 16px; }
.daily-streak-txt span { font-size: 12.5px; color: var(--text-dim); }
.daily-streak-txt i { color: var(--gold); font-style: normal; font-weight: 700; }
/* 7-day reward calendar */
.streak-cal { display: flex; gap: 5px; margin-bottom: 14px; }
.cal-day {
  flex: 1; text-align: center; border-radius: 9px; padding: 7px 2px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
}
.cal-day.today { background: rgba(61,245,168,0.16); border-color: rgba(61,245,168,0.45); }
.cal-day.milestone { background: rgba(255,215,110,0.14); border-color: rgba(255,215,110,0.45); }
.cal-num { font-size: 12px; font-weight: 800; }
.cal-day.milestone .cal-num { color: var(--gold); }
.cal-rew { font-size: 9px; color: var(--text-dim); margin-top: 2px; }

/* Bestiary / Codex grid */
.codex-summary { text-align: center; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.codex-head { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 12px 0 7px; }
.codex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codex-cell { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 12px; padding: 8px; text-align: center; }
.codex-cell.locked { opacity: 0.45; }
.codex-prev { height: 54px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--text-dim); }
.codex-prev canvas { width: 50px; height: 50px; }
.codex-name { font-weight: 800; font-size: 13px; }
.codex-lore { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.25; }
.codex-count { font-size: 10px; color: var(--gold); margin-top: 3px; }

/* How-to-play guide */
.guide-section { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.guide-section h3 { font-size: 15px; margin: 0 0 5px; }
.guide-section p { font-size: 13px; line-height: 1.45; color: var(--text-dim); margin: 0; }
.guide-section b { color: var(--text); font-weight: 700; }
.daily-head {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); margin: 12px 2px 2px;
}
.quest {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
}
.quest.done { border-color: rgba(61, 245, 168, 0.5); background: rgba(61, 245, 168, 0.07); }
.quest.claimed { opacity: 0.55; }
.quest-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.quest-text { font-weight: 700; font-size: 14.5px; }
.quest-reward { font-size: 12.5px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.quest-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.quest-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--aurora1), var(--aurora2)); transition: width 0.3s ease; }
.quest-foot { display: flex; justify-content: flex-end; align-items: center; min-height: 32px; }
.quest-prog { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.quest-tag { font-size: 12px; font-weight: 700; color: var(--aurora1); }
.quest-claim { padding: 8px 18px; font-size: 13px; min-height: 34px; flex: 0 0 auto; }

/* Daily challenge card + leaderboard */
.challenge-card {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.challenge-name { font-size: 18px; font-weight: 900; letter-spacing: 0.02em; }
.challenge-desc { font-size: 13px; color: var(--text-dim); }
.challenge-play { min-height: 46px; font-size: 15px; }
.challenge-board { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.ch-row {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 13.5px;
}
.ch-row.me { background: rgba(61, 245, 168, 0.12); border: 1px solid rgba(61, 245, 168, 0.35); }
.ch-rank { font-weight: 800; color: var(--text-dim); text-align: center; }
.ch-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-pts { font-weight: 800; color: var(--gold); }

/* ============ Roguelite boon choice ============ */
#s-boon { z-index: 40; }
.boon-dialog { max-width: 360px; }
.boon-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.2em; color: var(--aurora2);
  text-shadow: 0 0 14px rgba(47, 196, 255, 0.6);
}
.boon-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; width: 100%; }
.boon-card {
  width: 100%; text-align: left; background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--glass-border); border-radius: 16px; padding: 14px 16px;
  color: var(--text); cursor: pointer; transition: transform 0.1s ease, background 0.15s ease;
}
.boon-card:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.09); }
.boon-name { font-size: 16px; font-weight: 800; margin-bottom: 3px; }
.boon-desc { font-size: 13px; color: var(--text-dim); }

/* ============ Achievements ============ */
.ach-summary { font-size: 13px; font-weight: 800; color: var(--text-dim); text-align: center; margin-bottom: 2px; }
.ach { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 16px; padding: 12px 14px; }
.ach.done { border-color: rgba(255, 215, 110, 0.45); background: rgba(255, 215, 110, 0.07); }
.ach-icon { font-size: 24px; width: 30px; text-align: center; flex: 0 0 auto; }
.ach-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ach-name { font-weight: 800; font-size: 14.5px; }
.ach-desc { font-size: 12.5px; color: var(--text-dim); }
.ach-bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.ach-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), #ff9d5c); }
.ach-prog { font-size: 11px; color: var(--text-dim); }
.ach-reward { font-size: 12.5px; font-weight: 800; color: var(--text-dim); white-space: nowrap; flex: 0 0 auto; }
.ach-reward.got { color: var(--gold); }
.ach-link { width: 100%; margin-top: 6px; }

/* Active run-modifier badge (top-left, under the pause button) */
.hud-modifier {
  position: absolute; top: calc(56px + var(--sat)); left: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.55); /* no backdrop-filter over the live canvas */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); pointer-events: none;
}