/* Funksjonelt oppsett for figurveljar, spelbilete og framgang. */
.ljod-current-profile { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.ljod-current-profile img { width: 96px; height: 96px; object-fit: contain; }
.ljod-player { display: contents; }
.ljod-player[hidden] { display: none; }
.ljod-player > .ljod-overview { grid-column: 1; grid-row: 2; min-width: 0; }
.ljod-player > .ljod-wide { grid-column: 1 / -1; min-width: 0; margin-top: 4px; }
.ljod-player .ljod-modes { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.ljod-mode-thumbnail { display: block; width: 100%; height: clamp(110px, 15vw, 160px); object-fit: contain; border-radius: 6px; }
.ljod-mode-actions { margin-top: auto; padding-top: 12px; display: grid; gap: 12px; }
.ljod-mode-actions > .vp-button { width: 100%; }
.ljod-stage-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.ljod-stage-dot { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 44px; aspect-ratio: 1; border: 2px solid var(--vp-frame); border-radius: 50%; background: var(--vp-paper); color: var(--vp-ink); font-weight: 700; }
.ljod-stage-dot.is-complete { background: var(--vp-moss); }
.ljod-stage-dot.is-current { background: var(--vp-honey); }
.ljod-play-mascot { width: 64px; height: 62px; object-fit: contain; }
.ljod-teacher-dialog { width: min(1100px, calc(100vw - 24px)); }
.ljod-teacher-dialog > .vp-stack { min-width: 0; }
.ljod-teacher-dialog .ljod-table th { background: var(--vp-stone); color: var(--vp-ink); }
.ljod-profile-dialog { width: min(960px, calc(100vw - 24px)); }
:is(.ljod-profile-dialog, .ljod-teacher-dialog) .vp-dialog-head > .vp-button { flex-shrink: 0; white-space: nowrap; }
.ljod-profile-dialog .ljod-profiles { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 20px; }
.ljod-profile-dialog :is(.ljod-avatar, .ljod-profile-pick) img { width: 88px; height: 88px; }
.ljod-profile-dialog .ljod-avatar-name { font-size: 1rem; }
.ljod-profile-dialog .ljod-profile { gap: 8px; overflow: visible; }
.ljod-profile-dialog :is(.ljod-avatar, .ljod-profile-pick) { min-height: 168px; }
.ljod-profile-dialog .ljod-profile-pick { flex: 1; }
.ljod-session-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: clamp(1rem, 2.5vw, 1.15rem); }
.ljod-session-track { position: relative; height: 116px; margin-top: 8px; --ljod-session-fraction: 0; }
.ljod-session-avatar { position: absolute; top: 0; left: calc((100% - 64px) * var(--ljod-session-fraction)); width: 64px; height: 64px; object-fit: contain; transition: left .45s ease-out; }
.ljod-session-goal { position: absolute; top: 16px; right: 8px; }
.ljod-session-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 48px; border: 3px solid var(--vp-frame); border-radius: 26px; background: var(--vp-paper); }
.ljod-session-progress .ljod-progress-fill { background: var(--vp-moss); transition: width .45s ease-out; }
.ljod-session-marks { position: absolute; inset: 4px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; }
.ljod-session-mark { display: grid; place-items: center; width: 100%; max-width: 32px; aspect-ratio: 1; justify-self: center; border: 2px solid var(--vp-frame); border-radius: 50%; background: var(--vp-paper); }
.ljod-session-mark svg { width: 75%; height: 75%; visibility: hidden; }
.ljod-session-mark.is-complete { background: var(--vp-honey); }
.ljod-session-mark.is-complete svg { visibility: visible; }
body[data-font="lesefont"] main,
body[data-font="lesefont"] :is(.ljod-teacher-dialog, .ljod-profile-dialog) { font-family: var(--ljod-font-read); }
body[data-font="lesefont"] :is(main, .ljod-teacher-dialog, .ljod-profile-dialog) :is(button, input, select, textarea, .ljod-prompt) { font-family: var(--ljod-font-read); }
body[data-font="lesefont"] :is(main, .ljod-teacher-dialog, .ljod-profile-dialog) :is(h1, h2, h3, h4, .vp-heading, .vp-title) { font-family: var(--ljod-font-read); }
@media (max-width: 820px) {
  .ljod-player > .ljod-overview { grid-row: 3; }
  .vp-standard:has(> #player) > .vp-standard-support { grid-column: 1; grid-row: 2; }
  .vp-standard-support .vp-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #profile-title { display: none; }
  #currentProfile { grid-column: 1 / -1; justify-content: flex-start; }
  .ljod-current-profile img { width: 56px; height: 56px; }
}
@media (max-width: 480px) {
  .vp-standard .vp-hero p { display: none; }
  .vp-standard-support .vp-content { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ljod-profile-dialog .ljod-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 380px) {
  .ljod-stage-dots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ljod-profile-dialog :is(.ljod-avatar, .ljod-profile-pick) img { width: 64px; height: 64px; }
  .ljod-profile-dialog :is(.ljod-avatar, .ljod-profile-pick) { min-height: 144px; }
}
@media (prefers-reduced-motion: reduce) { .ljod-session-avatar, .ljod-session-progress .ljod-progress-fill { transition: none; } }
@media (min-width: 900px) and (max-height: 800px) {
  .ljod-playing .ljod-options .ljod-tile-lg { aspect-ratio: auto; min-height: 200px; height: clamp(200px, 28vh, 260px); }
}
@media print {
  body:has(#teacherDialog[open]) main,
  body:has(#teacherDialog[open]) footer { display: none; }
  #teacherDialog[open] { position: static; display: block; width: auto; max-width: none; max-height: none; }
  #teacherOpen, #teacherClose, #allmodes, #printLaerar { display: none; }
}