/* ═══════════════════════════════════════════════════════════════
   Kippi Promptmester — spillets egen CSS
   Bygger på tokens fra /shared/kippi.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --term-bg:    #0a1322;
  --term-line:  #d7e3f4;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

html, body { min-height: 100%; }
body {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Lås rulling kun når et fullskjerm-overlay er åpent */
body.no-scroll { overflow: hidden; }

#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 800px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── Kart-modus: hele siden ruller naturlig (hjulet virker overalt).
   ── Terminal-modus: lås til skjermhøyde, så terminalvinduet
      beholder fast bunn (input/handlinger) og loggen ruller internt. */
body.term-lock { overflow: hidden; }
body.term-lock #app { height: 100dvh; min-height: 0; }

/* ─── Header ──────────────────────────────────────────────── */
.pm-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pm-icon-link {
  font-size: 1.3rem;
  color: var(--text-2);
  line-height: 1;
  padding: 4px 6px;
  transition: color var(--t-fast);
}
.pm-icon-link:hover { color: var(--text-1); }
.pm-logo {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pm-logo-k { color: var(--primary-light); }
.pm-game-name {
  background: linear-gradient(90deg, var(--primary-light), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pm-header-btns { display: flex; gap: var(--s2); }
.pm-icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-size: 1rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pm-icon-btn:hover { border-color: var(--primary); background: var(--primary-dim); }

/* ─── Knapper (egne, basert på tokens) ────────────────────── */
.pm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 0.92rem; font-weight: 600; line-height: 1;
  transition: all var(--t-fast) var(--ease);
}
.pm-btn:active { transform: scale(0.97); }
.pm-btn--primary { background: var(--primary); color: #fff; }
.pm-btn--primary:hover { filter: brightness(1.12); box-shadow: 0 4px 18px var(--primary-glow); }
.pm-btn--ghost { background: transparent; color: var(--text-2); border: 1.5px solid var(--border-2); }
.pm-btn--ghost:hover { color: var(--text-1); border-color: var(--primary); background: var(--primary-dim); }

/* ═══════════════════════ KART ═══════════════════════════════ */
#map-view {
  padding: var(--s5) var(--s4) var(--s8);
}
.map-intro { text-align: center; margin-bottom: var(--s6); }
.map-tag {
  color: var(--text-2);
  font-size: 0.9rem;
  margin-bottom: var(--s1);
}
.map-sub {
  color: var(--text-3);
  font-size: 0.78rem;
  margin-bottom: var(--s3);
}
.map-stats {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s5);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 0.92rem;
  color: var(--text-2);
}
.map-stats b { color: var(--text-1); font-family: var(--font-display); }
.map-stats .star { color: var(--gold); }
.map-dot { color: var(--text-3); }

.world-block { margin-bottom: var(--s6); }
.world-head {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3);
  padding-left: var(--s1);
}
.world-icon { font-size: 1.3rem; flex-shrink: 0; }
.world-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.world-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.world-story { font-size: 0.74rem; color: var(--text-3); }
.world-tag {
  font-size: 0.72rem; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-left: auto;
}

/* minmax(0, 1fr) lar grid-sporet krympe under innholdets bredde, så lange
   nivåtitler avkortes med «…» i stedet for å utvide kortet forbi skjermen. */
.world-levels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.lvl-card {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; text-align: left;
  padding: var(--s3) var(--s4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.lvl-card:hover { border-color: var(--primary); transform: translateX(2px); }

/* Stagger-fade-in på map-kort + verdens-headere — kun ved første rendring per økt
   (body.map-anim-first styres av JS), så kortene «folder seg ut» når man kommer til
   kartet, men ikke flimrer på re-renders. */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
body.map-anim-first .lvl-card,
body.map-anim-first .world-head,
body.map-anim-first .project-card {
  animation: cardIn 0.42s var(--ease) both;
  animation-delay: calc(var(--idx, 0) * 32ms);
}
@media (prefers-reduced-motion: reduce) {
  body.map-anim-first .lvl-card,
  body.map-anim-first .world-head,
  body.map-anim-first .project-card { animation: none; }
}

/* Brief gull-pop på ★-telleren når et nivå fullføres — lukker
   feedback-løkken visuelt mellom «NIVÅ FULLFØRT» og status-linjen. */
@keyframes footStarsPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.16); color: var(--gold); }
  100% { transform: scale(1); }
}
.foot-stars.pop { display: inline-block; animation: footStarsPop 480ms var(--ease) both; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .foot-stars.pop { animation: none; } }
.lvl-card--done { border-color: rgba(52, 211, 153, 0.22); }
.lvl-card--next {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-dim), 0 0 22px -6px var(--primary-glow);
}
.lvl-rec {
  display: inline-block;
  margin-left: var(--s2);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary-light); background: var(--primary-dim);
  padding: 1px 6px; border-radius: 99px;
  vertical-align: 1px;
}
.lvl-play { color: var(--primary-light); font-size: 0.8rem; }

/* Kort på kartet (prosjekt + lærdommer) */
.map-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s6);
}
.project-card {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; text-align: left;
  padding: var(--s4);
  background: linear-gradient(100deg, var(--primary-dim), transparent 70%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.project-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.project-icon { font-size: 1.5rem; flex-shrink: 0; }
.project-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.project-title { font-weight: 700; font-size: 0.95rem; color: var(--text-1); }
.project-sub { font-size: 0.78rem; color: var(--text-2); }
.project-eye { font-size: 1.2rem; color: var(--primary-light); flex-shrink: 0; }

/* App-overlay (levende nettleser-forhåndsvisning) */
.app-overlay {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(4, 8, 16, 0.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
  opacity: 0; pointer-events: none;
  visibility: hidden;               /* fjern helt fra hit-testing når lukket */
  transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.app-overlay.open {
  opacity: 1; pointer-events: auto;
  visibility: visible;
  transition: opacity var(--t-base) var(--ease), visibility 0s linear;
}
.browser {
  width: 100%; max-width: 440px;
  height: min(82vh, 760px);
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(0.97);
  transition: transform var(--t-base) var(--ease);
}
.app-overlay.open .browser { transform: none; }
.browser-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  background: #e7ebf2; border-bottom: 1px solid #d4dbe6;
}
.browser-bar .url {
  flex: 1; text-align: center;
  font-size: 0.72rem; color: #5b6a82;
  background: #fff; border: 1px solid #d4dbe6;
  border-radius: 99px; padding: 3px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-x {
  color: #5b6a82; font-size: 0.85rem; line-height: 1;
  padding: 2px 5px; border-radius: 5px;
}

/* «Besøkende nå»-teller — ren illusjon som får butikken til å føles bebodd. */
.visitors {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.62rem; color: #15793e; font-weight: 600;
  background: #eafaf1; border: 1px solid #b7e4c9;
  border-radius: 99px; padding: 2px 7px;
  white-space: nowrap;
}
.vis-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #16a34a;
  animation: visPulse 1.8s ease-in-out infinite;
}
@keyframes visPulse {
  0%, 100% { opacity: 0.85; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .vis-dot { animation: none; } }
.browser-x:hover { background: #d4dbe6; color: #1c2430; }
#app-frame { flex: 1; width: 100%; border: none; background: #f4f6fb; }

/* Fil-faner i kode-modus (editor-følelse) */
.code-tabs {
  display: flex; gap: 2px;
  padding: 0 8px;
  background: #0a1322;
  border-bottom: 1px solid #1c2942;
  flex-shrink: 0;
}
.code-tab {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #6b7a90;
  padding: 7px 12px;
  border-top: 2px solid transparent;
  transition: color var(--t-fast), background var(--t-fast);
}
.code-tab:hover { color: #aebfd6; }
.code-tab.active {
  color: #e8edf8;
  background: #06101f;
  border-top-color: var(--cyan);
}
.browser-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: #e7ebf2; border-top: 1px solid #d4dbe6;
  font-size: 0.74rem; color: #5b6a82;
}
.browser-foot-btns { display: flex; gap: var(--s2); }
.browser-foot .pm-btn--ghost {
  color: #33415a; border-color: #c7d0e0;
  padding: var(--s2) var(--s4); font-size: 0.78rem;
}
.browser-foot .pm-btn--ghost:hover { color: #1c2430; border-color: #1c2430; background: transparent; }
.pm-btn--sm { padding: var(--s2) var(--s4); font-size: 0.78rem; }

/* Lærdommer (kunnskapsbok) */
.lessons-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(4, 8, 16, 0.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
  opacity: 0; pointer-events: none;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.lessons-overlay.open { visibility: visible; transition: opacity var(--t-base) var(--ease), visibility 0s linear; }
.lessons-overlay.open { opacity: 1; pointer-events: auto; }
.lessons-panel {
  width: 100%; max-width: 520px;
  height: min(84vh, 820px);
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(0.97);
  transition: transform var(--t-base) var(--ease);
}
.lessons-overlay.open .lessons-panel { transform: none; }
.lessons-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lessons-emoji { font-size: 1.3rem; }
.lessons-head h2 { font-size: 1.15rem; }
.lessons-head .lh-count {
  margin-left: auto;
  font-size: 0.74rem; color: var(--text-2);
  background: var(--surface-3); border-radius: var(--r-full);
  padding: 3px 10px;
}
.lessons-x {
  color: var(--text-2); font-size: 0.95rem; line-height: 1;
  padding: 2px 6px; border-radius: 6px;
  transition: color var(--t-fast), background var(--t-fast);
}
.lessons-x:hover { color: var(--text-1); background: var(--surface-3); }
.lessons-body { flex: 1; overflow-y: auto; padding: var(--s4) var(--s5) var(--s6); }
.lessons-world { margin-bottom: var(--s5); }
.lw-head {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  color: var(--text-2);
  margin-bottom: var(--s3);
}
.lesson-card {
  display: flex; gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  opacity: 0.5;
  transition: opacity var(--t-fast);
}
.lesson-card.earned {
  opacity: 1;
  border-color: rgba(251, 191, 36, 0.25);
  background: linear-gradient(100deg, var(--gold-dim), transparent 75%);
}
.lc-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.5; }
.lc-body { flex: 1; min-width: 0; }
.lc-title {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: 700; font-size: 0.88rem; color: var(--text-1);
}
.lc-check { color: var(--green); font-size: 0.85rem; }
.lc-text { font-size: 0.82rem; color: var(--text-2); line-height: 1.45; margin-top: 2px; }

/* «Test deg selv»-bar over lærdom-listen */
.quiz-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  background: linear-gradient(120deg, rgba(124,58,237,0.14), rgba(34,211,238,0.10));
  border: 1px solid rgba(124,58,237,0.32);
  border-radius: var(--r-md);
}
.quiz-bar-info { flex: 1; min-width: 0; }
.quiz-bar-title { font-weight: 700; font-size: 0.92rem; color: var(--primary-light); }
.quiz-bar-sub { font-size: 0.74rem; color: var(--text-3); margin-top: 2px; }
.quiz-bar-sub b { color: var(--gold); }

/* 🎓 Kodealfabetet — kollapsibel oppslagsverk over grunnleggende koding */
.code-abc {
  margin-bottom: var(--s5);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.08), transparent 70%);
  overflow: hidden;
}
.code-abc-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.code-abc-head::-webkit-details-marker { display: none; }
.code-abc-head::after {
  content: '▸';
  position: absolute; right: var(--s4); top: 50%;
  transform: translateY(-50%);
  color: var(--cyan);
  transition: transform var(--t-fast);
}
.code-abc[open] .code-abc-head::after { transform: translateY(-50%) rotate(90deg); }
.code-abc-title { font-weight: 700; font-size: 0.92rem; color: var(--cyan); }
.code-abc-sub { font-size: 0.74rem; color: var(--text-3); }
.code-abc-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s2);
  padding: 0 var(--s4) var(--s4);
}
@media (min-width: 640px) { .code-abc-grid { grid-template-columns: 1fr 1fr; } }
.abc-card {
  padding: var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.abc-name {
  font-weight: 700; font-size: 0.82rem;
  color: var(--text-1); margin-bottom: 2px;
}
.abc-name code {
  font-family: var(--mono);
  color: var(--cyan);
  background: rgba(56, 189, 248, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}
.abc-text { font-size: 0.78rem; color: var(--text-2); line-height: 1.45; }

/* Quiz-panel — vises i lessons-body når quiz er aktiv */
.quiz-panel { animation: lessonIn 220ms ease both; }
.quiz-progress { font-size: 0.74rem; color: var(--text-3); margin-bottom: var(--s2); letter-spacing: 0.04em; }
.quiz-from { font-size: 0.78rem; color: var(--text-2); margin-bottom: var(--s2); }
.quiz-from b { color: var(--primary-light); font-weight: 700; }
.quiz-question {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; color: var(--text-1);
  margin-bottom: var(--s4); line-height: 1.35;
}
.quiz-choices { display: flex; flex-direction: column; gap: var(--s2); }
.quiz-choice {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); text-align: left;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text-1); font-size: 0.88rem;
  cursor: pointer; transition: border-color 120ms, background 120ms, transform 120ms;
}
.quiz-choice:hover:not(:disabled) { border-color: rgba(167,139,250,0.55); transform: translateY(-1px); }
.quiz-choice:disabled { cursor: default; opacity: 0.78; }
.qc-num {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 99px;
  background: rgba(167,139,250,0.20); color: var(--primary-light);
  font-size: 0.78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.qc-text { flex: 1; min-width: 0; }
.quiz-choice.qc-ok    { border-color: var(--green); background: linear-gradient(100deg, rgba(34,197,94,0.18), transparent 75%); opacity: 1; }
.quiz-choice.qc-wrong { border-color: var(--red);   background: linear-gradient(100deg, rgba(239,68,68,0.16), transparent 75%); opacity: 1; }
.quiz-next { margin-top: var(--s4); width: 100%; }

/* Quiz-resultat */
.quiz-result { text-align: center; padding: var(--s5) var(--s4); animation: lessonIn 260ms ease both; }
.quiz-result-stars { font-size: 2.2rem; letter-spacing: 0.1em; margin-bottom: var(--s3); }
.quiz-result-score { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--text-1); }
.quiz-result-msg { color: var(--text-2); margin: var(--s2) auto var(--s5); max-width: 26rem; }
.quiz-result-actions { display: flex; flex-direction: column; gap: var(--s2); max-width: 22rem; margin: 0 auto; }

/* Diplom (fullført-opplevelse) */
.diploma-overlay {
  position: fixed; inset: 0; z-index: 205;
  background: rgba(4, 8, 16, 0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
  opacity: 0; pointer-events: none;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.diploma-overlay.open { visibility: visible; transition: opacity var(--t-base) var(--ease), visibility 0s linear; }
.diploma-overlay.open { opacity: 1; pointer-events: auto; }
.diploma {
  width: 100%; max-width: 460px;
  max-height: 92vh; overflow-y: auto;
  text-align: center;
  padding: var(--s8) var(--s6) var(--s6);
  background: radial-gradient(120% 80% at 50% 0%, rgba(108, 95, 255, 0.18), var(--surface-1) 62%);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--r-xl);
  box-shadow: 0 0 60px -12px var(--primary-glow), var(--shadow-lg);
  transform: translateY(16px) scale(0.95);
  transition: transform var(--t-base) var(--ease);
}
.diploma-overlay.open .diploma { transform: none; }
.dp-seal {
  width: 76px; height: 76px; margin: 0 auto var(--s4);
  display: grid; place-items: center; font-size: 38px;
  background: radial-gradient(circle at 50% 35%, var(--gold-dim), transparent 70%);
  border: 2px solid var(--gold); border-radius: 50%;
  box-shadow: 0 0 26px -4px var(--gold);
}
.dp-kicker {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--gold);
}
.dp-title {
  font-size: 2rem; margin: 4px 0 var(--s3);
  background: linear-gradient(90deg, var(--primary-light), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dp-sub { font-size: 0.9rem; color: var(--text-2); margin-bottom: var(--s5); line-height: 1.5; }
.dp-sub b { color: var(--text-1); }
.dp-stats { display: flex; justify-content: center; gap: var(--s6); margin-bottom: var(--s5); }
.dp-stats div { display: flex; flex-direction: column; gap: 2px; }
.dp-stats b { font-family: var(--font-display); font-size: 1.2rem; color: var(--text-1); }
.dp-stats span { font-size: 0.66rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.dp-recap { display: flex; flex-direction: column; gap: var(--s2); text-align: left; margin-bottom: var(--s6); }
.dp-skill {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
.dp-skill > span:first-child { font-size: 1.1rem; }
.dp-skill div { flex: 1; display: flex; flex-direction: column; }
.dp-skill b { font-size: 0.85rem; color: var(--text-1); }
.dp-skill div span { font-size: 0.72rem; color: var(--text-3); }
.dp-skill-check { color: var(--green); font-weight: 700; }
.dp-actions { display: flex; flex-direction: column; gap: var(--s2); }

/* «Neste steg»-bro: peker spilleren videre til ekte KI-koding-verktøy. */
.dp-next {
  margin: var(--s4) 0 var(--s5);
  padding: var(--s4);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(34,211,238,0.08));
  border: 1px solid rgba(124,58,237,0.28);
  text-align: left;
}
.dp-next-head { font-weight: 800; font-size: 0.95rem; color: var(--primary-light); margin-bottom: 4px; }
.dp-next-sub  { font-size: 0.78rem; color: var(--text-3); margin: 0 0 var(--s3); }
.dp-links { display: flex; flex-direction: column; gap: var(--s2); }
.dp-link {
  display: flex; flex-direction: column;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(15, 26, 48, 0.7);
  border: 1px solid rgba(167, 139, 250, 0.20);
  text-decoration: none; color: inherit;
  transition: border-color 120ms, transform 120ms;
}
.dp-link:hover { border-color: rgba(167, 139, 250, 0.55); transform: translateY(-1px); }
.dp-link-name { font-weight: 700; color: var(--text-1); font-size: 0.88rem; }
.dp-link-sub  { font-size: 0.72rem; color: var(--text-3); }
.dp-actions .pm-btn { width: 100%; }
.dp-card { background: linear-gradient(100deg, var(--gold-dim), transparent 70%); border-color: rgba(251, 191, 36, 0.3); }
.sb-card { background: linear-gradient(100deg, var(--cyan-dim), transparent 70%); border-color: rgba(56, 189, 248, 0.28); }
.lvl-icon {
  font-size: 1.3rem; width: 34px; text-align: center; flex-shrink: 0;
}
.lvl-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lvl-num { font-size: 0.68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.lvl-title {
  font-weight: 600; font-size: 0.95rem; color: var(--text-1);
  /* Lange titler wrapper til maks to linjer i stedet for å avkortes — så hele
     lærdommen er synlig, og kortet vokser aldri forbi skjermbredden. */
  overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lvl-stars { flex-shrink: 0; letter-spacing: 1px; font-size: 0.85rem; }
.lvl-stars .s { color: var(--text-3); }
.lvl-stars .s.on { color: var(--gold); }

/* ═══════════════════════ TERMINAL ═══════════════════════════ */
#terminal-view {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: var(--s4);
}
.term {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--term-bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Tittellinje (macOS-stil) */
.term-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot--r { background: #ff5f57; }
.dot--y { background: #febc2e; }
.dot--g { background: #28c840; }
.term-title {
  flex: 1; text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.term-exit {
  color: var(--text-2); font-size: 0.95rem; line-height: 1;
  padding: 2px 6px; border-radius: 6px;
  transition: color var(--t-fast), background var(--t-fast);
}
.term-exit:hover { color: var(--text-1); background: var(--surface-3); }

/* Se-appen-knapp (👁) i terminal-baren */
.term-eye {
  position: relative;
  font-size: 0.95rem; line-height: 1;
  padding: 3px 5px; border-radius: 7px;
  transition: background var(--t-fast);
}
.term-eye:hover { background: var(--surface-3); }
.app-count {
  position: absolute; top: -4px; right: -5px;
  min-width: 15px; height: 15px;
  display: grid; place-items: center;
  font-size: 0.58rem; font-weight: 700; font-family: var(--font-body);
  color: #fff; background: var(--primary);
  border-radius: 99px; padding: 0 3px;
}
.pulse { animation: pulseRing 1s ease-out 2; }
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 var(--primary-glow); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Når spilleren akkurat bygde knappen sin, lyser 👁 i hans/hennes egen farge. */
.term-eye[style*="--user-color"].pulse {
  animation: pulseRingUser 1s ease-out 2;
}
@keyframes pulseRingUser {
  0%   { box-shadow: 0 0 0 0 var(--user-color); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* Kameraryst — taktil belønning ved fullført nivå (lav magnitude, kort). */
@keyframes termShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-2px,  1px, 0); }
  40% { transform: translate3d( 2px, -1px, 0); }
  60% { transform: translate3d(-1px,  2px, 0); }
  80% { transform: translate3d( 1px, -2px, 0); }
}
.term.shake { animation: termShake 320ms cubic-bezier(.36,.07,.19,.97) both; }
@media (prefers-reduced-motion: reduce) { .term.shake { animation: none; } }

/* Crescendo i siste verden — varmere glød på terminalen + gull-LED. */
body.crescendo .term {
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.18),
    0 0 38px 2px rgba(245, 158, 11, 0.10),
    0 22px 60px -22px rgba(0, 0, 0, 0.55);
}
body.crescendo .foot-led {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* Modell-chip */
.model-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 0.66rem;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 3px 8px;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.model-chip:hover { color: var(--text-1); border-color: var(--primary); }
.model-chip .dot-m { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); }

/* Tilgang & tillatelser */
.perm-prompt {
  margin: var(--s3) 0;
  border-left: 2px solid var(--gold);
  padding-left: var(--s3);
  animation: lineIn .22s var(--ease);
}
.perm-head { color: var(--gold); font-size: 0.82rem; font-weight: 600; margin-bottom: var(--s2); }
.perm-cmd  { margin: var(--s2) 0 !important; box-shadow: inset 2px 0 0 var(--gold) !important; }
.perm-desc { color: var(--text-2); font-size: 0.82rem; }

/* Godta endringer (diff) */
.diff-block { margin: var(--s3) 0; animation: lineIn .22s var(--ease); }
.diff-head  { color: var(--text-2); font-size: 0.82rem; margin-bottom: var(--s2); }
pre.diff {
  background: #06101f;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s3) 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.55;
  overflow-x: auto;
}
pre.diff > span { display: block; padding: 0 var(--s4); white-space: pre-wrap; word-break: break-word; }
.d-add { background: rgba(52, 211, 153, 0.10); color: #c5ebd4; }
.d-del { background: rgba(248, 113, 113, 0.10); color: #f1c4c4; }
.d-ctx { color: var(--text-2); }
.d-mark { display: inline-block; width: 1.3em; color: var(--text-3); user-select: none; }
.d-add .d-mark { color: var(--green); }
.d-del .d-mark { color: var(--red); }

/* Oppdragslinje */
.term-obj {
  padding: var(--s3) var(--s4);
  background: rgba(108, 95, 255, 0.08);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-1);
  flex-shrink: 0;
}
.obj-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary-light);
  background: var(--primary-dim);
  padding: 2px 6px; border-radius: 5px;
  margin-right: var(--s2);
  vertical-align: middle;
}
.obj-stars { color: var(--gold); font-weight: 700; display: inline-block; animation: starsPop .3s var(--ease); }
@keyframes starsPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .obj-stars { animation: none; } }

/* Loggområde */
.term-log {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;      /* hold trackpad-scroll inne i loggen */
  padding: var(--s4);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--term-line);
  /* Svak fosfor-glød på all terminaltekst */
  text-shadow: 0 0 1px rgba(140, 190, 255, 0.18);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(108, 95, 255, 0.05), transparent 60%);
}
/* Subtile CRT-scanlinjer (statiske — ingen flimmer) */
.term-log::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px);
  mix-blend-mode: overlay;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .term-log { text-shadow: none; }
  .term-log::before { display: none; }
}
.term-line {
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: var(--s2);
  animation: lineIn .22s var(--ease);
}
@keyframes lineIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.line-head  { color: var(--primary-light); font-weight: 700; margin-bottom: var(--s3); }
.line-brief { color: var(--text-1); }
.line-sys   { color: var(--text-3); font-style: italic; }
.line-user  { color: var(--green); }
.line-think { color: var(--text-3); }
.line-hint  { color: var(--gold); }
.line-done  { color: var(--green); font-weight: 700; letter-spacing: 0.04em; }
.line-win   { color: var(--gold); font-weight: 700; }
.line-app   { color: var(--cyan); font-weight: 600; }
.line-memory{ color: var(--cyan); opacity: 0.78; font-style: italic; padding-left: 2px; }

/* Oppstartssekvens (boot) */
.boot-title { color: var(--primary-light); font-weight: 700; }
.boot-line  { color: var(--text-2); }
.boot-line .ok { color: var(--green); }
.boot-note  { color: var(--text-3); font-style: italic; }
.boot-greet { color: var(--cyan); font-weight: 600; }
.term-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
  margin: var(--s3) 0;
}

/* KI-svar (animert, cyan ramme) */
.ai-block {
  position: relative;
  border-left: 2px solid var(--cyan);
  padding-left: var(--s3);
  margin-bottom: var(--s3);
  animation: lineIn .22s var(--ease);
}
.ai-block::before {
  content: "🤖";
  position: absolute; left: -11px; top: -2px;
  font-size: 0.78rem;
  background: var(--term-bg);
  line-height: 1;
}
.ai-text { color: #c6dbf4; white-space: pre-wrap; word-break: break-word; min-height: 1.2em; }
.ai-text + .ai-text { margin-top: 2px; }

/* Kodeblokk med syntaksutheving */
.code-block {
  margin: var(--s2) 0;
  padding: var(--s3) var(--s4);
  background: #06101f;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
  color: #aebfd6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  box-shadow: inset 2px 0 0 var(--primary);
}
.t-tag { color: #7ee0ff; }
.t-str { color: #b6f09c; }
.t-kw  { color: #c9a6ff; font-weight: 600; }
.t-err { color: #ff9b9b; font-weight: 600; }
.t-com { color: #74849c; font-style: italic; }

/* Kode KI-en «skrev» (input-styrt) */
.code-generated {
  position: relative;
  box-shadow: inset 2px 0 0 var(--cyan) !important;
}
.code-generated::before {
  content: "KI-generert";
  position: absolute; top: 6px; right: 8px;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cyan); opacity: 0.7;
}

/* Sjekkliste — viser hva prompten traff (kjernelæring) */
.checklist {
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  animation: lineIn .22s var(--ease);
}
.cl-head {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3);
  margin-bottom: var(--s2);
}
.cl-row {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 0.84rem; padding: 2px 0;
}
.cl-mark { width: 16px; text-align: center; font-weight: 700; flex-shrink: 0; }
.cl-ok .cl-mark { color: var(--green); }
.cl-no .cl-mark { color: var(--text-3); }
.cl-ok .cl-label { color: var(--text-1); }
.cl-no .cl-label { color: var(--text-3); }
.cl-label { flex: 1; }
.cl-bonus {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold); background: var(--gold-dim);
  padding: 1px 6px; border-radius: 99px; flex-shrink: 0;
}
.cl-extra .cl-mark  { color: var(--green); }
.cl-extra .cl-label { color: var(--text-1); }
.cl-xbadge {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green); background: var(--green-dim);
  padding: 1px 6px; border-radius: 99px; flex-shrink: 0;
}
.cl-note { margin-top: var(--s2); font-size: 0.78rem; color: var(--gold); font-style: italic; }

/* Lærdom-boks */
.lesson {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  background: linear-gradient(90deg, var(--gold-dim), transparent);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  animation: lessonIn .35s var(--ease);
}

/* Walkthrough-blokker: «Prompten KI fikk» og «Hvorfor denne prompten» */
.wt-prompt {
  margin: var(--s3) 0;
  border: 1px solid rgba(34, 211, 238, 0.32);
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.10), transparent 70%);
  border-radius: var(--r-md);
  overflow: hidden;
  animation: lessonIn .35s var(--ease);
}
.wt-prompt-head {
  padding: var(--s2) var(--s4);
  background: rgba(34, 211, 238, 0.12);
  border-bottom: 1px solid rgba(34, 211, 238, 0.22);
}
.wt-prompt-tag {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--cyan);
}
.wt-prompt-body {
  padding: var(--s3) var(--s4);
  color: var(--text-1); font-family: var(--mono); font-size: 0.86rem;
  line-height: 1.5; white-space: pre-wrap;
}

.wt-why {
  margin: var(--s3) 0;
  border: 1px solid rgba(167, 139, 250, 0.32);
  background: linear-gradient(120deg, rgba(167, 139, 250, 0.10), transparent 70%);
  border-radius: var(--r-md);
  overflow: hidden;
  animation: lessonIn .35s var(--ease);
}
.wt-why-head {
  padding: var(--s2) var(--s4);
  background: rgba(167, 139, 250, 0.14);
  border-bottom: 1px solid rgba(167, 139, 250, 0.22);
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--primary-light);
}
.wt-why-body {
  padding: var(--s3) var(--s4);
  color: var(--text-1); font-size: 0.86rem;
  line-height: 1.55; white-space: pre-wrap;
}
@keyframes lessonIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lesson { animation: none; } }
.lesson-tag {
  font-family: var(--font-display);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gold); flex-shrink: 0;
}
.lesson-text { color: var(--text-1); font-size: 0.86rem; line-height: 1.45; flex: 1; min-width: 180px; }

/* Statuslinje nederst */
.term-foot {
  display: flex; align-items: center; gap: var(--s2);
  padding: 5px var(--s4);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-3);
  flex-shrink: 0;
}
.foot-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  flex-shrink: 0;
  animation: led 2.4s ease-in-out infinite;
}
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .foot-led { animation: none; } }
.foot-loc { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-stars { color: var(--gold); white-space: nowrap; }

/* Handlings-/valgknapper */
.term-actions {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  flex-shrink: 0;
}
.term-actions .pm-btn { flex: 1; min-width: 130px; }
.term-actions--choices { flex-direction: column; }

.term-choice {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; text-align: left;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-size: 0.88rem;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.term-choice:not(:disabled):hover { border-color: var(--primary); background: var(--primary-dim); transform: translateX(2px); }
.term-choice:disabled { opacity: 0.45; }
.ch-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--surface-3);
  border-radius: 6px;
  font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
  color: var(--primary-light);
}
.ch-text { flex: 1; }

/* ═══════════════════ Regler-modal (rules-list) ═════════════ */
.rules-list { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s6); }
.rules-item { display: flex; gap: var(--s3); align-items: flex-start; font-size: 0.9rem; color: var(--text-1); line-height: 1.5; }
.rules-icon { font-size: 1.2rem; flex-shrink: 0; }
.modal .pm-btn { width: 100%; }

/* ─── Litt luft på små skjermer ───────────────────────────── */
@media (max-width: 420px) {
  .term-log { font-size: 0.78rem; }
  .world-tag { display: none; }
}