/* ═══════════════════════════════════════════════════
   elev.css – Thevin v5.16
   Quiz-specifika stilar för elev.html.
   Kräver global.css inläst först.
   ═══════════════════════════════════════════════════ */

/* ── TYPSKALA – ELEVENS VÄRDEN ──────────────────────────────────────────
   Samma sju namn som i global.css, större värden. Eleven har få saker på
   skärmen och läser dem en gång; läraren har många och skummar. Filen
   laddas efter global.css och vinner därför på samma specificitet.

   Den här uppsättningen gäller alla sidor som laddar elev.css, alltså
   elev.html och lasuppdrag.html. Rör du den rör du hela elevupplevelsen.

   Enstaka symboler över 44px — firandestjärnan, feedback-ikonen — ligger
   utanför skalan med flit. De är inte text. */
:root {
  --t-meta:    13px;
  --t-liten:   15px;
  --t-brod:    17px;
  --t-h3:      20px;
  --t-h2:      26px;
  --t-h1:      32px;
  --t-display: 44px;
}

/* ── BODY – CENTRERAT QUIZLÄGE ──────────────────────────────────────────
   "safe center" i stället för "center": ett centrerat flexbarn som är högre
   än fönstret svämmar över åt BÅDA håll, och då går toppen inte att nå genom
   att skrolla upp — eleven ser aldrig början på en lång fråga. Med safe
   faller centreringen tillbaka till start när innehållet inte får plats.

   Raden före är kvar som reserv för en webbläsare som inte kan safe; den
   ignorerar nästa rad och beter sig som förut. 2026-10-16. */
body {
  display:flex; justify-content:center; padding:20px;
  align-items:center;
  align-items:safe center;
}

/* ── SKÄRMAR & KORT ── */
.screen        { display:none; width:100%; max-width:480px; animation:fadeIn 0.35s ease; }
.screen.active { display:block; }
.card          { background:var(--surface); border:1px solid var(--border); padding:36px; }
.logo          { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta); font-weight:600; letter-spacing:3px; color:var(--accent); margin-bottom:28px; display:block; }
h1             { font-size:var(--t-h2); font-weight:700; margin-bottom:6px; }
.sub           { font-size:var(--t-liten); color:var(--muted); margin-bottom:28px; }

/* ── PROGRESSBAR ── */
.progress-label { display:flex; justify-content:space-between; font-size:var(--t-meta); color:var(--muted); margin-bottom:8px; }
.progress-bar   { background:var(--surface2); border-radius:0; height:6px; margin-bottom:28px; overflow:hidden; }
.progress-fill  { height:100%; background:var(--accent); border-radius:0; transition:width 0.4s ease; }

/* ── FRÅGA ── */
.fraga-nr   { font-family:'JetBrains Mono',monospace; font-size:var(--t-meta); color:var(--accent); letter-spacing:2px; margin-bottom:12px; }
/* pre-wrap: en textfråga får vara flerradig med rubrik och punktlista.
   Utan den klistras raderna ihop till ett enda stycke för eleven. */
.fraga-text { font-size:var(--t-h3); font-weight:600; line-height:1.5; margin-bottom:24px;
              white-space:pre-wrap; }

/* ── ALTERNATIVKNAPPAR ── */
.alternativ-grid { display:flex; flex-direction:column; gap:10px; }
.alternativ-btn  {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--surface2); border:1px solid var(--border);
  cursor:pointer; transition:all 0.15s; font-family:'Sora',sans-serif;
  font-size:var(--t-brod); color:var(--text); text-align:left; width:100%;
}
.alternativ-btn:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-dim); }
.alternativ-btn:disabled             { cursor:default; }
.alt-label {
  font-family:'JetBrains Mono',monospace; font-weight:600; font-size:var(--t-liten);
  width:28px; height:28px; background:var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s;
}
.alternativ-btn.correct              { background:var(--correct-dim); border-color:var(--correct); }
.alternativ-btn.correct .alt-label   { background:var(--correct); color:var(--on-correct); }
.alternativ-btn.wrong                { background:var(--wrong-dim); border-color:var(--wrong); }
.alternativ-btn.wrong .alt-label     { background:var(--wrong); color:var(--on-wrong); }
/* Ett registrerat svar som eleven bläddrat tillbaka till i ett prov. Två
   signaler: accentkant och fylld bokstavsruta. Varken grönt eller rött -
   provet håller tillbaka facit tills läraren publicerar. */
.alternativ-btn.registrerad            { background:var(--surface2); border-color:var(--accent); font-weight:600; opacity:1; }
.alternativ-btn.registrerad .alt-label { background:var(--accent); color:var(--on-accent); }
.alternativ-btn.ej-vald                { opacity:0.4; }

/* ── FEEDBACK & NÄSTA ── */
.feedback         { margin-top:16px; padding:14px 16px; font-size:var(--t-liten); font-weight:600; display:none; }
.feedback.correct { background:var(--correct-dim); color:var(--correct); border:1px solid var(--correct); }
.feedback.wrong   { background:var(--wrong-dim);   color:var(--wrong);   border:1px solid var(--wrong); }
.nasta-btn        { margin-top:16px; width:100%; padding:12px; border:none; background:var(--accent); color:var(--on-accent); font-family:'Sora',sans-serif; font-size:var(--t-brod); font-weight:600; cursor:pointer; display:none; transition:background 0.15s; }
.nasta-btn:hover  { background:var(--accent-hover); }
/* Provläge: tillbaka till en redan besvarad fråga. Tyst knapp, bred efter
   sin text - Nästa fråga är och förblir vyns enda primärknapp. JS styr
   display, därför ingen display-regel i hover. */
.prov-tillbaka-btn       { display:none; margin-top:10px; padding:10px 14px; background:none; border:1px solid var(--border); color:var(--muted2); font-family:'Sora',sans-serif; font-size:var(--t-liten); font-weight:600; cursor:pointer; transition:color 0.15s, border-color 0.15s; }
.prov-tillbaka-btn:hover { color:var(--text); border-color:var(--muted); }

/* ── TEXTSVAR ── */
.text-svar-wrap  { margin-top:12px; }
.text-svar-info  { font-size:var(--t-liten); color:var(--muted2); margin-bottom:8px; }
.text-svar-input { width:100%; min-height:100px; background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:'Sora',sans-serif; font-size:var(--t-brod); padding:12px; resize:vertical; box-sizing:border-box; }
.text-svar-input:focus { outline:none; border-color:var(--accent); }
.text-svar-count { font-size:var(--t-meta); color:var(--muted2); text-align:right; margin-top:4px; }

/* ── RESULTAT ── */
.resultat-cirkel   { width:120px; height:120px; border-radius:50%; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; flex-direction:column; border:3px solid var(--correct); }
.resultat-pct      { font-size:var(--t-h1); font-weight:700; color:var(--correct); }
.resultat-sub-small{ font-size:var(--t-meta); color:var(--muted); }
.fel-item          { padding:12px 14px; background:var(--surface2); border:1px solid var(--border); margin-bottom:8px; font-size:var(--t-liten); }
.fel-fraga         { font-weight:600; margin-bottom:4px; white-space:pre-wrap; }

/* Kvittot efter inlämnade textfrågor är en återvändsgränd utan den här
   knappen. .bibliotek-tillbaka-btn är display:none tills body har
   fran-bibliotek, och en elev som kommit in med rumskod har inte den
   klassen. Högre specificitet, så regeln vinner. */
#screen-text-inlamnad #text-inlamnad-btn { display:inline-block; }
.fel-svar          { font-size:var(--t-liten); color:var(--muted); }
.fel-ratt          { color:var(--correct); }
.om-btn            { margin-top:20px; width:100%; padding:12px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-family:'Sora',sans-serif; font-size:var(--t-brod); font-weight:600; cursor:pointer; transition:all 0.15s; }
.om-btn:hover      { border-color:var(--accent); color:var(--accent); }

/* ── RITA-VERKTYG ── */
.rita-wrap      { margin-top:12px; }
.rita-canvas-container { position:relative; width:100%; border:1px solid var(--border); background:#fff; overflow:hidden; touch-action:none; cursor:crosshair; }
.rita-canvas-container canvas { display:block; width:100%; height:auto; }
.rita-toolbar   { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; padding:8px; background:var(--surface2); border:1px solid var(--border); }
.rita-tool-btn  { padding:5px 10px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:'Sora',sans-serif; font-size:var(--t-liten); cursor:pointer; transition:all 0.12s; }
.rita-tool-btn.aktiv       { background:var(--text); color:var(--surface); border-color:var(--text); }
.rita-tool-btn:hover:not(.aktiv) { border-color:var(--accent); color:var(--accent); }
.rita-farger    { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.rita-farg-knapp { width:22px; height:22px; border:2px solid transparent; cursor:pointer; flex-shrink:0; transition:border-color 0.12s; }
.rita-farg-knapp.aktiv { border-color:var(--text); }
.rita-storlekar { display:flex; gap:4px; align-items:center; }
.rita-storlek-knapp { width:28px; height:28px; border:1px solid var(--border); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.12s; }
.rita-storlek-knapp.aktiv { background:var(--text); border-color:var(--text); }
.rita-storlek-knapp:hover:not(.aktiv) { border-color:var(--accent); }
.rita-separator { width:1px; height:28px; background:var(--border); flex-shrink:0; }
.rita-actions   { display:flex; gap:6px; margin-top:8px; }
.rita-oppna-btn { width:100%; padding:10px; margin-top:8px; border:1px solid var(--accent); background:var(--accent-dim); color:var(--accent); font-family:'Sora',sans-serif; font-size:var(--t-liten); font-weight:600; cursor:pointer; transition:all 0.12s; }
.rita-oppna-btn:hover { background:var(--accent); color:var(--on-accent); }
#rita-helskarm  { display:none; position:fixed; inset:0; z-index:8500; background:var(--bg); flex-direction:column; }
#rita-helskarm.aktiv { display:flex; }
#rita-helskarm-toolbar { flex-shrink:0; display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; background:var(--surface2); border-bottom:1px solid var(--border); align-items:center; }
#rita-helskarm-canvas-wrap { flex:1; overflow:auto; position:relative; background:#888; display:flex; align-items:flex-start; justify-content:flex-start; }
#rita-helskarm-canvas-wrap canvas { display:block; cursor:crosshair; transform-origin:top center; }
#rita-helskarm-footer { flex-shrink:0; display:flex; gap:8px; padding:10px; background:var(--surface2); border-top:1px solid var(--border); }
.rita-zoom-label { font-size:var(--t-liten); font-family:'JetBrains Mono',monospace; color:var(--muted2); min-width:38px; text-align:center; }

/* ── TIMER ── */
.timer-wrap        { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.timer-fraga       { font-family:'JetBrains Mono',monospace; font-size:var(--t-h2); font-weight:600; color:var(--accent); min-width:48px; text-align:center; background:var(--surface2); border:1px solid var(--border); padding:6px 12px; transition:color 0.3s, border-color 0.3s; }
.timer-fraga.warn  { color:var(--warn);  border-color:var(--warn); }
.timer-fraga.danger{ color:var(--wrong); border-color:var(--wrong); }
.timer-quiz-wrap   { flex:1; }
.timer-quiz-label  { font-size:var(--t-meta); color:var(--muted); margin-bottom:4px; }
.timer-quiz-bar    { background:var(--surface2); border-radius:0; height:4px; overflow:hidden; }
.timer-quiz-fill   { height:100%; background:var(--accent); border-radius:0; transition:width 1s linear, background 0.3s; }

/* ── LEADERBOARD ── */
.leaderboard         { margin-top:20px; }
.leaderboard-titel   { font-size:var(--t-meta); letter-spacing:2px; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:10px; }
.leaderboard-rad     { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface2); margin-bottom:6px; border:1px solid var(--border); }
.leaderboard-plats   { font-family:'JetBrains Mono',monospace; font-size:var(--t-liten); font-weight:600; width:24px; color:var(--muted2); }
.leaderboard-plats.guld   { color:#f1c40f; }
.leaderboard-plats.silver { color:#bdc3c7; }
.leaderboard-plats.brons  { color:#e67e22; }
.leaderboard-namn    { flex:1; font-size:var(--t-liten); font-weight:600; }
.leaderboard-poang   { font-family:'JetBrains Mono',monospace; font-size:var(--t-liten); color:var(--accent); }

/* ── FIRANDE ── */
#elev-firande             { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.85); align-items:center; justify-content:center; flex-direction:column; text-align:center; }
#elev-firande.aktiv       { display:flex; animation:fadeInEl 0.5s ease; }
@keyframes fadeInEl        { from{opacity:0} to{opacity:1} }
.elev-firande-stjarna      { font-size:72px; animation:snurra 1s ease; }
@keyframes snurra          { from{transform:scale(0) rotate(-180deg)} to{transform:scale(1) rotate(0deg)} }
.elev-firande-text         { font-size:var(--t-h1); font-weight:700; color:#FFD700; margin-top:16px; text-shadow:0 0 30px rgba(255,215,0,0.8); }
.elev-firande-sub          { font-size:var(--t-brod); color:rgba(255,255,255,0.7); margin-top:8px; letter-spacing:1px; }
.konfetti-bit              { position:fixed; width:8px; height:8px; animation:konfettiFall linear forwards; pointer-events:none; z-index:9998; }
@keyframes konfettiFall    { to{transform:translateY(110vh) rotate(720deg); opacity:0} }

/* ── LAG-KOMPIS ── */
.lag-kompis-wrap   { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--accent-dim); border:1px solid var(--accent); margin-bottom:16px; font-size:var(--t-liten); }
.lag-kompis-status { width:10px; height:10px; border-radius:50%; background:var(--muted); flex-shrink:0; transition:background 0.3s; }
.lag-kompis-status.svarat { background:var(--correct); }

/* ── TOPBAR: temaknapp, tillbakaknapp och utloggning ──────────────────
   Låg i ett style-block i elev.html. Flyttad hit 2026-10-01. Knappen är
   static och topbaren fixed — tidigare var båda fixed, och den inre
   regeln i elev.html fanns bara för att slå ut den yttre här. */
#elev-topbar {
  position:fixed; top:12px; right:12px; z-index:100;
  display:flex; align-items:center; gap:8px;
}

/* Temaknappen och utloggningen är båda reglage för sidan snarare än för
   uppgiften, och delar därför utseende. .elev-utlogg-btn används också i
   lasuppdrag.html, som laddar den här filen och vars topbar har samma
   två knappar. Ingen egen färg: allt går genom variablerna, så knappen
   följer med i alla fyra temana. */
#tema-knapp,
.elev-utlogg-btn {
  background:var(--surface2); border:1px solid var(--border);
  padding:7px 11px; cursor:pointer; font-family:'Sora',sans-serif;
  font-size:var(--t-liten); font-weight:600; color:var(--muted); transition:all 0.15s;
  display:flex; align-items:center; gap:6px; line-height:1;
}
#tema-knapp:hover,
.elev-utlogg-btn:hover { border-color:var(--accent); color:var(--accent); }

/* I elev.html visas utloggningen först när eleven är inloggad — före det
   finns ingen inloggning att lämna. elev.js sätter klassen i
   visaScreen(). Regeln är avgränsad till #elev-topbar, så knappen i
   lasuppdrag.html står framme hela tiden: den sidan nås bara av en
   inloggad elev.

   Utloggningen döljs INTE i kahootläget, till skillnad från temaknappen
   strax nedanför. Temaknappen säger emot det eleven ser under ett
   live-spel; utloggningen säger ingenting om spelet, och en elev på en
   lånad dator ska komma ur den även mitt i ett. */
#elev-topbar .elev-utlogg-btn { display:none; }
body.elev-inloggad #elev-topbar .elev-utlogg-btn { display:flex; }

/* Tillbakaknappen visas bara för den som kom in via biblioteket. */
.bibliotek-tillbaka-btn {
  display:none; background:none; border:1px solid var(--border);
  color:var(--muted); font-family:'Sora',sans-serif; font-size:var(--t-liten);
  cursor:pointer; padding:6px 12px; white-space:nowrap;
}
.bibliotek-tillbaka-btn:hover { color:var(--text); border-color:var(--muted); }
body.fran-bibliotek .bibliotek-tillbaka-btn { display:inline-block; }

/* Tillbakaknapparna på avslutsskärmarna ligger i flödet, inte i topbaren. */
#resultat-tillbaka-btn,
#screen-text-inlamnad .bibliotek-tillbaka-btn,
#screen-ai-larare-klar .bibliotek-tillbaka-btn {
  width:100%; margin-top:16px; padding:10px 0; text-align:center;
  border:none; text-decoration:underline; text-underline-offset:3px;
}

/* ── BOLLFEATURE ── */
@keyframes bollRulla  { from{transform:translateX(110vw) rotate(0deg)}   to{transform:translateX(0) rotate(720deg)} }
@keyframes bollPoppa  { from{transform:scale(0.5); opacity:0}            to{transform:scale(1); opacity:1} }
@keyframes bollFadeIn { from{opacity:0; transform:translateY(20px)}      to{opacity:1; transform:translateY(0)} }
#boll-wrapper         { display:none; position:fixed; inset:0; z-index:8000; background:rgba(0,0,0,0.65); align-items:center; justify-content:center; flex-direction:column; gap:28px; padding:20px; }
#boll-wrapper.aktiv   { display:flex; }
#boll-svg-wrap        { animation:bollRulla 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards; filter:drop-shadow(0 12px 24px rgba(0,0,0,0.7)); }
#boll-popup           { display:none; background:var(--surface); border:1px solid var(--border); padding:28px; width:100%; max-width:400px; animation:bollPoppa 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; }
#boll-popup.aktiv     { display:block; }
#boll-popup h2        { font-size:var(--t-h3); font-weight:700; margin-bottom:6px; }
#boll-popup .sub      { font-size:var(--t-liten); color:var(--muted); margin-bottom:18px; }
#boll-sok             { width:100%; background:var(--surface2); border:1px solid var(--border); padding:10px 14px; color:var(--text); font-family:'Sora',sans-serif; font-size:var(--t-liten); margin-bottom:10px; }
#boll-namn-lista      { max-height:220px; overflow-y:auto; margin-bottom:16px; border:1px solid var(--border); }
.boll-namn-btn        { display:block; width:100%; padding:11px 14px; background:none; border:none; border-bottom:1px solid var(--border); color:var(--text); font-family:'Sora',sans-serif; font-size:var(--t-liten); cursor:pointer; text-align:left; transition:background 0.1s; }
.boll-namn-btn:last-child { border-bottom:none; }
.boll-namn-btn:hover  { background:var(--surface2); }
.boll-namn-btn.vald   { background:var(--accent-dim); color:var(--accent); font-weight:600; }
#boll-skicka-btn      { width:100%; padding:12px; background:var(--accent); border:none; color:var(--on-accent); font-family:'Sora',sans-serif; font-size:var(--t-brod); font-weight:600; cursor:pointer; opacity:0.4; pointer-events:none; margin-bottom:8px; }
#boll-skicka-btn.aktiv { opacity:1; pointer-events:auto; }
#boll-hoppa-btn       { width:100%; padding:9px; background:none; border:1px solid var(--border); color:var(--muted); font-family:'Sora',sans-serif; font-size:var(--t-liten); cursor:pointer; }
#bollfraga-wrapper    { display:none; position:fixed; inset:0; z-index:8000; background:rgba(0,0,0,0.75); align-items:center; justify-content:center; padding:20px; }
#bollfraga-wrapper.aktiv { display:flex; }
#bollfraga-kort       { background:var(--surface); border:1px solid var(--accent); padding:28px; width:100%; max-width:480px; animation:bollFadeIn 0.4s ease forwards; }
#bollfraga-feedback   { display:none; text-align:center; padding:28px 0 8px; animation:bollPoppa 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
#bollfraga-feedback .feedback-ikon { font-size:64px; display:block; margin-bottom:12px; }
#bollfraga-feedback p { font-size:var(--t-brod); font-weight:600; color:var(--text); }

/* ── SLIDEUP (elev-notis) ── */
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ── KAHOOT-LÄGE ────────────────────────────────────────────────────────
   Elevens skärm mellan frågorna: rätt svar och det egna utfallet på just den
   frågan. Ställning, totalsumma och slutresultat hör till dashboarden och
   finns med avsikt inte här. */
.kahoot-kort            { text-align:center; }
.kahoot-facit           { display:none; margin:14px 0 0; padding:12px 14px; background:var(--correct-dim); border:1px solid var(--correct); color:var(--correct); font-size:var(--t-brod); font-weight:600; line-height:1.5; }
.kahoot-utfall          { display:none; margin:10px 0 0; padding:10px 14px; font-size:var(--t-brod); font-weight:700; }
.kahoot-utfall.ratt     { background:var(--correct-dim); border:1px solid var(--correct); color:var(--correct); }
.kahoot-utfall.fel      { background:var(--wrong-dim); border:1px solid var(--wrong); color:var(--wrong); }
/* Elevens egen rad ska gå att hitta utan att leta. */
.kahoot-vantar          { margin-top:20px; font-size:var(--t-liten); color:var(--muted); }
.kahoot-lobbytext       { font-size:var(--t-liten); color:var(--muted); line-height:1.6; }
/* Valt alternativ i Kahoot-läge: eleven ska se VAD hen valde, aldrig om det
   var rätt. Grönt eller rött här sprider sig genom klassrummet på två sekunder
   till de som inte hunnit svara. Facit kommer när läraren visar det. */
.alternativ-btn.kahoot-vald  { border-color:var(--accent); background:var(--surface2); color:var(--text); font-weight:600; opacity:1; }
.alternativ-btn.kahoot-ovald { opacity:0.4; }

/* ══ STUDIO — ELEVENS TREDJE TEMA ════════════════════════════════════════
   Samma rum som lärarens dashboard, i grönt. Eleven väljer det själv med
   knappen i topbaren; det har ingenting med Kahoot-läget att göra.

   Varför grönt rum men blå accent: grönt betyder RÄTT i den här vyn.
   .alternativ-btn.correct är grön och .nasta-btn är accentfärgad, och de
   står under varandra efter varje svar. Vore accenten också grön hade
   eleven inte kunnat se skillnad på "det här är knappen" och "det här var
   rätt". Samma uppdelning som dashboarden: rummet är grönt, beskeden
   behåller sina färger. Byt inte accenten till grön utan att först lösa
   det problemet.

   ORDNING: det här blocket MÅSTE ligga före body.kahoot nedan. Båda är en
   enda klass och väger därför lika mycket — det är källordningen som gör
   att Kahoot vinner när en elev med studiotemat går in i ett live-spel.
   Flyttar du blocket nedanför får eleven grönt rum mitt i ett blått spel. */
body.studio {
  --bg:          #02100a;
  --surface:     rgba(6, 22, 16, 0.88);
  --surface2:    rgba(10, 32, 24, 0.85);
  --surface3:    rgba(16, 46, 34, 0.85);
  --border:      rgba(32, 200, 132, 0.34);
  --text:        #e8f6ee;
  --muted:       #7fa892;
  --muted2:      #9ec4ae;

  /* Handlingsfärgen är bärnsten i alla teman utom kahoot — se designsystemet.
     Rummet är grönt, knappen är bärnsten, och de två går inte att förväxla. */
  --accent:      #efa02c;
  --accent-dim:  rgba(239, 160, 44, 0.16);
  --accent-hover:#f7b14a;
  --on-accent:   #241603;
  --correct:     #27e08a;
  --correct-dim: rgba(39, 224, 138, 0.16);
  --correct-hover:#45e89d;
  --on-correct:  #02210f;
  --wrong:       #ff5d6c;
  --wrong-dim:   rgba(255, 93, 108, 0.16);
  --wrong-hover: #ff7a86;
  --on-wrong:    #2b0506;
  --warn:        #efa02c;
  --warn-dim:    rgba(239, 160, 44, 0.16);

  /* Samma bildfil som dashboarden. Ingen ny bild behövdes: rummet är
     redan beskuret mot en lugn, mörk mitt, och det är mitten ett kort på
     480 px landar på. fixed så att bakgrunden inte glider när sidan
     skrollar — samma grepp som Kahoot-läget. */
  background-image:
    linear-gradient(rgba(1, 10, 6, 0.74), rgba(1, 10, 6, 0.86)),
    url('bilder/bakgrund-dashboard-gron.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Kortet svävar i rummet i stället för att ligga som en lapp ovanpå det.
   Samma behandling som Kahoot-kortet, i temats egen färg. */
body.studio .card {
  border-radius:0;
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.55), inset 0 0 44px rgba(34, 240, 160, 0.10);
  backdrop-filter: blur(6px);
}
body.studio .logo { text-shadow: 0 0 18px rgba(34, 240, 160, 0.7); }

/* Ritytan är vit papper och ska förbli vit — den ärver inte rummet. */
body.studio .rita-canvas-container { background: #fff; }

/* ══ KAHOOT-LÄGE: SAMMA VÄRLD SOM KLASSVYN ═══════════════════════════════
   Eleven tittar upp på storskärmen och ner på sin telefon om vartannat. Ser
   de två olika ut blir det två spel i stället för ett.

   Klassen läggs på av elev-kahoot.js när läget startar och tas bort när det
   slutar, så prov, lagläge och vanliga quiz är helt orörda.

   Hela omställningen sker genom att VARIABLERNA skrivs om — inte genom att
   komponentreglerna dupliceras. Kort, knappar, timer och feedback följer med
   av sig själva, och en framtida ändring i en komponent gäller båda lägena.
   Lägg därför inte till egna färger här nedanför; ändra variabeln. */
body.kahoot {
  --bg:          #02060f;
  --surface:     rgba(8, 20, 46, 0.88);
  --surface2:    rgba(14, 30, 64, 0.85);
  --surface3:    rgba(20, 42, 84, 0.85);
  --border:      rgba(89, 180, 255, 0.4);
  --text:        #eaf4ff;
  --muted:       #7f9dbb;
  --muted2:      #9dbad6;
  /* ACCENTEN STANNAR BLÅ HÄR, till skillnad från alla andra teman.
     --alt-3 nedan är #f0b429, i praktiken samma bärnsten som accenten är
     i övriga teman. I live-läget bär alternativfärgerna betydelse — eleven
     matchar sin skärm mot storskärmen — och en knapp i samma färg som
     svarsalternativ C hade varit en felkälla mitt i ett spel. */
  --accent:      #3ba9ff;
  --accent-dim:  rgba(59, 169, 255, 0.16);
  --accent-hover:#5bb9ff;
  --on-accent:   #041624;
  --correct:     #27e08a;
  --correct-dim: rgba(39, 224, 138, 0.16);
  --correct-hover:#45e89d;
  --on-correct:  #02210f;
  --wrong:       #ff5d6c;
  --wrong-dim:   rgba(255, 93, 108, 0.16);
  --wrong-hover: #ff7a86;
  --on-wrong:    #2b0506;
  --warn:        #ffc542;
  --warn-dim:    rgba(255, 197, 66, 0.16);

  /* Alternativens färger. Samma värden och samma ordning som i
     storskarm.css, så att bokstaven A är blå på både telefonen och
     storskärmen. Ändras de här måste de ändras där också. */
  --alt-1: #2f7fe8;
  --alt-2: #17c3a2;
  --alt-3: #f0b429;
  --alt-4: #9b5de5;
  --alt-5: #ff7a45;
  --alt-6: #22b0d8;
  --alt-text: #02060f;

  /* Samma bild som klassvyn. På en stående telefon beskärs den mot mitten,
     där studion är som lugnast och mörkast — vilket är precis den del som
     tål text ovanpå sig. fixed så att den inte glider när sidan skrollar. */
  background-image:
    linear-gradient(rgba(2, 6, 15, 0.72), rgba(2, 6, 15, 0.82)),
    url('bilder/bakgrund-studio.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Kortet får glöd i stället för bara en ram, så att det svävar i studion
   i stället för att ligga som en lapp ovanpå den. */
body.kahoot .card {
  border-radius:0;
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.55), inset 0 0 44px var(--accent-dim);
  backdrop-filter: blur(6px);
}

body.kahoot .logo { text-shadow: 0 0 18px var(--accent); }

/* Temaknappen tas bort i Kahoot-laget. Paletten ovan ar hardsatt pa
   body.kahoot och skriver over bade body.light och body.dark, sa knappen
   byter ingenting - den bara sager emot det eleven ser. Knappen finns kvar
   i HTML:en och kommer tillbaka av sig sjalv nar klassen tas bort i
   elev-kahoot.js stang(). */
body.kahoot #tema-knapp { display: none; }

/* ── ALTERNATIVEN I KLASSVYNS FÄRGER ─────────────────────────────────────
   A är blå på telefonen OCH på storskärmen, B grön på båda, och så vidare.
   Eleven ska kunna säga "jag tog den gula" och mena samma ruta som klassen
   ser. Färgen sitter på bokstaven och ramen — inte på hela knappen, för då
   hade den valda och den ovalda blivit svåra att skilja åt. */
body.kahoot .alternativ-btn                   { border-left: 4px solid var(--f, var(--accent)); }
body.kahoot .alternativ-btn .alt-label        { background: var(--f, var(--accent)); color: var(--alt-text); }
body.kahoot .alternativ-btn[data-alt="A"]     { --f: var(--alt-1); }
body.kahoot .alternativ-btn[data-alt="B"]     { --f: var(--alt-2); }
body.kahoot .alternativ-btn[data-alt="C"]     { --f: var(--alt-3); }
body.kahoot .alternativ-btn[data-alt="D"]     { --f: var(--alt-4); }
body.kahoot .alternativ-btn[data-alt="E"]     { --f: var(--alt-5); }
body.kahoot .alternativ-btn[data-alt="F"]     { --f: var(--alt-6); }

/* Det valda alternativet. Fortfarande ingen ledtråd om rätt eller fel —
   bara tydligt vilket eleven tryckte på. */
body.kahoot .alternativ-btn.kahoot-vald {
  border-color: var(--f, var(--accent));
  box-shadow: 0 0 20px var(--f, var(--accent));
}

/* ── KAHOOT PÅ DATORSKÄRM ────────────────────────────────────────────────
   Eleverna spelar på dator, inte på telefon. Grundlayouten i den här filen
   är byggd för en smal skärm: ett kort på högst 480 px och alternativen på
   rad under varandra. På en 1920-skärm blir det en smal remsa mitt i en stor
   bakgrund, med fyra trånga knappar, medan halva skärmen står tom.

   Brytpunkten är satt på fönsterbredd och inte på enhetstyp, så en elev som
   ändå sitter med telefon eller surfplatta får den smala varianten. */
@media (min-width: 820px) {
  body.kahoot .screen { max-width: 880px; }

  /* Två spalter, som på storskärmen. Eleven känner igen rutmönstret därifrån
     och hittar sitt alternativ snabbare. */
  body.kahoot .alternativ-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  body.kahoot .alternativ-btn {
    padding: 18px 20px;
    font-size: var(--t-h3);
    min-height: 82px;
  }
  body.kahoot .alt-label { width: 36px; height: 36px; font-size: var(--t-h3); }

  /* Frågan läses på armlängds avstånd, inte med telefonen i handen. */
  body.kahoot .fraga-text { font-size: var(--t-h2); margin-bottom: 28px; }
  body.kahoot .card       { padding: 44px 48px; }
  body.kahoot h1          { font-size: var(--t-h1); }
  body.kahoot .timer-fraga { font-size: var(--t-h1); min-width: 64px; padding: 8px 18px; }

  /* Textsvar och skicka-knappen följer med i storlek. */
  body.kahoot .text-svar-input { font-size: var(--t-h3); }
}

/* Är något alternativ riktigt långt, eller finns bara två, lägger sig HELA
   rutnätet i en spalt. Att låta enskilda knappar spänna över båda spalterna
   gav ojämna rader, och med verkliga frågor blev alla långa ändå. Gränsen
   sätts av elev-kahoot.js och är densamma som klassvyn använder. */
@media (min-width: 820px) {
  body.kahoot .alternativ-grid.enspalt { grid-template-columns: 1fr; }
}

/* ── Rita på bild: markeringens tillstånd ──────────────────────
   Markera-verktyget fanns men syntes inte. Hjälptexten låg i foten,
   långt från färgknapparna, och "Ta bort" såg likadan ut vare sig
   något var markerat eller inte. Nu bärs tillståndet i verktygsraden,
   bredvid de knappar som faktiskt gör något åt det. */
.rita-info { font-size:var(--t-meta); color:var(--muted2); max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rita-info.aktiv { color:var(--accent); font-weight:600; }
.rita-info-farg { width:13px; height:13px; border:1px solid var(--border); display:inline-block; vertical-align:-2px; margin:0 3px; }
.rita-tool-btn:disabled { opacity:0.38; cursor:default; }
.rita-tool-btn:disabled:hover { border-color:var(--border); color:var(--text); }
.rita-fot-hjalp { font-size:var(--t-meta); color:var(--muted2); align-self:center; margin-right:auto; }
.rita-autospara-status { font-size:var(--t-meta); color:var(--muted2); margin-top:6px; min-height:14px; }

/* Den valda färgen markerades med en tunn ram i textfärg, vilket inte syns
   mot en mörk verktygsrad med tolv rutor i rad. Ring utanför rutan plus en
   liten förstoring: då ser eleven vilken färg pennan har. */
.rita-farg-knapp.aktiv {
  border-color: var(--surface);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transform: scale(1.12);
}
.rita-farg-knapp { transition: transform 0.12s, outline-color 0.12s; }