/* Tema Arkad – "Ljusspår" (DESIGN 1.9, 4.5, 6, 11). Mörkt, neon, rytmspel.
   Alla regler scopas till :root[data-theme="arkad"] (appen) eller [data-pv="arkad"] (temaväljaren).
   Bara transform/opacity animeras. Glöd är statisk (förritad), aldrig animerad box-/text-shadow. */

:root[data-theme="arkad"], [data-pv="arkad"] {
  color-scheme: dark;
  --c-bg: #0C0E19;
  --c-bg-deep: #07080F;
  --c-surface: #141729;
  --c-surface-2: #1B1F36;
  --c-surface-3: #252A48;
  --c-hover: #252A48;
  --c-line: #2F355A;
  --c-line-strong: #6A74B4;
  --c-text: #F3F4FB;
  --c-text-2: #B9BDDA;
  --c-text-3: #9095BC;
  --c-primary: #C6FF3D;
  --c-on-primary: #07080F;
  --c-correct: #C6FF3D;
  --c-on-correct: #07080F;
  --c-correct-soft: #1C2614;
  --c-correct-ink: #C6FF3D;
  --c-wrong: #FF6B81;
  --c-on-wrong: #07080F;
  --c-wrong-soft: #2B1222;
  --c-wrong-ink: #FF6B81;
  --c-xp: #C6FF3D;
  --c-combo: #FF4FB8;
  --c-streak: #FF9A3C;
  --c-level: #FFD447;
  --c-progress: #38E1FF;
  --c-progress-soft: rgb(56 225 255 / .1);
  --c-warn: #FF9A3C;
  --c-warn-soft: rgb(255 154 60 / .1);
  --c-focus: #38E1FF;
  --rgb-primary: 198 255 61;
  --rgb-combo: 255 79 184;
  --rgb-level: 255 212 71;
  --rgb-progress: 56 225 255;
  --rgb-streak: 255 154 60;
  --rgb-wrong: 255 107 129;
  --volt: #C6FF3D; --cyan: #38E1FF; --plasma: #FF4FB8; --ember: #FF9A3C; --gold: #FFD447; --coral: #FF6B81;
  --edge-rgb: 198 255 61; --flash-rgb: 198 255 61;

  --ff-display: "Oxanium", ui-sans-serif, system-ui, sans-serif;
  --ff-read: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --ff-ui: var(--ff-read);
  --ff-btn: var(--ff-display);
  --ff-num: var(--ff-display);
  --fw-num: 800;
  --fs-q: clamp(1.375rem, 1.05rem + 1.45vw, 2rem);
  --fw-q: 700;
  --lh-q: 1.3;
  --fs-opt: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fw-opt: 600;
  --lh-opt: 1.32;
  --fs-body: 1.0625rem;
  --lh-body: 1.55;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --fs-label: .875rem;
  --label-transform: uppercase;
  --label-spacing: .1em;
  --fs-h1: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --fs-display: clamp(2.75rem, 1.9rem + 4vw, 5rem);
  --fs-callout: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);

  --r-card: 20px 6px 20px 6px;
  --r-qcard: 20px 6px 20px 6px;
  --r-opt: 14px 4px 14px 4px;
  --r-btn: 14px 4px 14px 4px;
  --r-chip: 8px 3px 8px 3px;
  --r-key: 8px 3px 8px 3px;
  --r-blade-sm: 14px 4px 14px 4px;
  --bw-card: 1px;
  --bw-ui: 1.5px;
  --sh-card: inset 0 1px 0 rgb(255 255 255 / .04), 0 18px 40px -18px rgb(2 3 8 / .9);
  --sh-btn: 0 0 0 1px var(--c-primary), 0 0 22px rgb(var(--rgb-primary) / .3);
  --sh-btn-hover: 0 0 0 1px var(--c-primary), 0 0 34px rgb(var(--rgb-primary) / .55);
  --sh-btn-press: 0 0 0 1px var(--c-primary), 0 0 22px rgb(var(--rgb-primary) / .3);
  --press-transform: scale(.97);
  --hover-transform: none;
  --focus-ring: 3px solid #38E1FF;
  --focus-offset: 3px;
  --btn-h: 50px;
  --btn-h-lg: 56px;
  --btn-h-sm: 44px;
  --icon-btn: 44px;
  --opt-min-h: 66px;
  --opt-min-h-grid: 76px;
  --key-size: 38px;
  --hud-h: 64px;

  --d-press: 90ms;
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 420ms;
  --d-hero: 900ms;
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-pop: cubic-bezier(.34,1.56,.64,1);
  --e-in: cubic-bezier(.7,0,.84,0);
  --e-std: cubic-bezier(.2,0,0,1);
}

/* ------------------------------------------------------------------ Bakgrund och lager */
:root[data-theme="arkad"] .fx-bg {
  overflow: hidden; will-change: opacity; transition: opacity 420ms var(--e-out);
  background:
    radial-gradient(60rem 40rem at 88% -12%, rgb(56 225 255 / .10), transparent 60%),
    radial-gradient(52rem 36rem at -12% 112%, rgb(255 79 184 / .08), transparent 60%),
    var(--c-bg);
}
:root[data-theme="arkad"][data-screen="play"] .fx-bg { opacity: .45; }
:root[data-theme="arkad"] .ark-grid { position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
:root[data-theme="arkad"] .ark-trails { position: absolute; inset: -25%; transform: rotate(-14deg); }
:root[data-theme="arkad"] .ark-trails i { position: absolute; left: 0; top: var(--y); width: var(--w); height: 2px; border-radius: 2px; opacity: var(--o); background: linear-gradient(90deg, transparent, var(--c) 72%, #fff 97%, transparent); }
:root[data-theme="arkad"] .ark-trails i::before { content: ""; position: absolute; inset: -2px 0; border-radius: 4px; background: inherit; opacity: .35; }
:root[data-theme="arkad"][data-trails="off"] .ark-trails { display: none; }
:root[data-theme="arkad"] .ark-vig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 38%, transparent 55%, rgb(3 4 9 / .72)); }
:root[data-theme="arkad"] .fx-edge { box-shadow: inset 0 0 80px 10px rgb(var(--edge-rgb) / .5); will-change: opacity; }
:root[data-theme="arkad"] .fx-flash { background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgb(var(--flash-rgb) / .6), transparent 70%); will-change: opacity; }

/* ------------------------------------------------------------------ Typografi */
:root[data-theme="arkad"] h1, :root[data-theme="arkad"] .screen-head h1 { font: 800 var(--fs-h1)/1.08 var(--ff-display); letter-spacing: -.01em; }
:root[data-theme="arkad"] .section-head h2, :root[data-theme="arkad"] .create-tips h2, :root[data-theme="arkad"] .set-group > h2, :root[data-theme="arkad"] .leitner h2, :root[data-theme="arkad"] .about h2, :root[data-theme="arkad"] .ov-mastery h2, :root[data-theme="arkad"] .load-game-title, :root[data-theme="arkad"] .load-tips-title {
  font: 700 .875rem/1.2 var(--ff-display); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2);
}
:root[data-theme="arkad"] .quizzes .section-head h2 { font: 800 var(--fs-h2)/1.1 var(--ff-display); letter-spacing: 0; text-transform: none; color: var(--c-text); }
:root[data-theme="arkad"] .section-meta { font: 700 .9375rem/1 var(--ff-display); }
:root[data-theme="arkad"] .about h3 { font: 700 1rem/1.3 var(--ff-display); color: var(--c-text); letter-spacing: .02em; }
:root[data-theme="arkad"] .q-count { color: var(--cyan); }

/* ------------------------------------------------------------------ Kort och knappar */
:root[data-theme="arkad"] .card, :root[data-theme="arkad"] .res-side { background: linear-gradient(180deg, rgb(255 255 255 / .03), transparent 50%), var(--c-surface); }
:root[data-theme="arkad"] .btn { letter-spacing: .01em; transition: transform var(--d-press) var(--e-std), background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast); }
:root[data-theme="arkad"] .cta-create { transition: transform var(--d-fast) var(--e-out); }
:root[data-theme="arkad"] .btn-primary .kbd { border-color: rgb(7 8 15 / .35); background: rgb(7 8 15 / .12); }
:root[data-theme="arkad"] .btn-secondary { background: var(--c-surface); border-color: var(--c-line-strong); color: var(--c-text); }
@media (hover: hover) { :root[data-theme="arkad"] .btn-secondary:hover, :root[data-theme="arkad"] .btn-ghost:hover { border-color: var(--c-text-2); color: var(--c-text); } }
:root[data-theme="arkad"] .btn-review { background: rgb(56 225 255 / .08); border-color: var(--cyan); color: var(--cyan); }
@media (hover: hover) { :root[data-theme="arkad"] .btn-review:hover { box-shadow: 0 0 0 1px var(--cyan), 0 0 16px rgb(56 225 255 / .4); } }
:root[data-theme="arkad"] .btn-danger { background: var(--c-surface); color: var(--coral); border-color: var(--coral); }
:root[data-theme="arkad"] .icon-btn { color: var(--c-text-2); }
@media (hover: hover) { :root[data-theme="arkad"] .icon-btn:hover { color: var(--c-text); } }

:root[data-theme="arkad"] .chip { border-width: 1px; font: 700 .9375rem/1 var(--ff-display); }
:root[data-theme="arkad"] .chip-xp { color: var(--volt); background: rgb(198 255 61 / .1); border-color: rgb(198 255 61 / .45); }
:root[data-theme="arkad"] .chip-streak { color: var(--ember); background: rgb(255 154 60 / .1); border-color: rgb(255 154 60 / .45); }
:root[data-theme="arkad"] .chip-streak[data-active="false"] { color: var(--c-text-2); background: var(--c-surface); border-color: var(--c-line); }
:root[data-theme="arkad"] .chip-combo { color: var(--plasma); background: rgb(255 79 184 / .1); border-color: rgb(255 79 184 / .5); }
:root[data-theme="arkad"] .chip-level { color: var(--gold); background: rgb(255 212 71 / .1); border-color: rgb(255 212 71 / .45); }
:root[data-theme="arkad"] .chip-correct { color: var(--volt); background: rgb(198 255 61 / .1); border-color: rgb(198 255 61 / .45); }
:root[data-theme="arkad"] .chip-progress { color: var(--cyan); background: rgb(56 225 255 / .1); border-color: rgb(56 225 255 / .45); }
:root[data-theme="arkad"] .pill { font-family: var(--ff-display); letter-spacing: .02em; }
:root[data-theme="arkad"] .pill-retry { color: var(--cyan); }
:root[data-theme="arkad"] .pill-new { background: var(--gold); color: var(--c-bg-deep); }
:root[data-theme="arkad"] .kbd { font-family: var(--ff-display); border-bottom-width: 2px; }

/* ------------------------------------------------------------------ Appbar */
:root[data-theme="arkad"] .logo-mark { width: 34px; height: 34px; }
:root[data-theme="arkad"] .logo-word { font: 800 24px/1 var(--ff-display); letter-spacing: -.01em; }
:root[data-theme="arkad"] .appbar .chip { padding: 2px 11px; }
:root[data-theme="arkad"] .appbar[data-fit~="tight"] .chip { padding: 2px 7px; } /* kompakt appbar (app.js, data-fit) */

/* ------------------------------------------------------------------ Nivå, staplar, ring, vecka */
:root[data-theme="arkad"] .level-badge {
  width: 4.125rem; height: 4.375rem; border: 1.5px solid var(--gold); border-radius: var(--r-blade-sm);
  background: linear-gradient(160deg, rgb(255 212 71 / .2), rgb(255 212 71 / .04));
  box-shadow: 0 0 20px rgb(255 212 71 / .22), inset 0 0 14px rgb(255 212 71 / .12);
}
:root[data-theme="arkad"] .level-badge-label { font: 700 var(--fs-xs)/1 var(--ff-display); letter-spacing: .12em; color: var(--gold); }
:root[data-theme="arkad"] .level-badge-num { font: 800 2rem/1 var(--ff-display); color: var(--gold); text-shadow: 0 0 14px rgb(255 212 71 / .6); display: inline-block; }
:root[data-theme="arkad"] .bar { border-radius: 3px; }
:root[data-theme="arkad"] .bar-fill { border-radius: 3px; position: relative; overflow: hidden; }
:root[data-theme="arkad"] .bar-xp, :root[data-theme="arkad"] .bar-level { height: 12px; }
:root[data-theme="arkad"] .bar-xp .bar-fill, :root[data-theme="arkad"] .bar-level .bar-fill { background: repeating-linear-gradient(115deg, #C6FF3D 0 10px, #B4F01F 10px 20px); box-shadow: 0 0 14px rgb(198 255 61 / .55); }
:root[data-theme="arkad"] .bar-xp .bar-fill::after, :root[data-theme="arkad"] .bar-level .bar-fill::after, :root[data-theme="arkad"] .cta-create::after {
  content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
  transform: translateX(-120%); animation: ark-shine 1.4s var(--e-std) 1 .9s;
}
:root[data-theme="arkad"] .bar-mastery .bar-fill, :root[data-theme="arkad"] .bar-progress .bar-fill { background: linear-gradient(90deg, #2FB8D9, var(--cyan)); }
:root[data-theme="arkad"] .bar-load .bar-fill { background: linear-gradient(90deg, var(--cyan), var(--volt)); box-shadow: 0 0 14px rgb(198 255 61 / .55); }
:root[data-theme="arkad"] .bar-ghost { background: var(--c-text-3); }
:root[data-theme="arkad"] .ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; box-shadow: 0 0 14px rgb(56 225 255 / .3), inset 0 0 10px rgb(56 225 255 / .18); pointer-events: none; }
:root[data-theme="arkad"] .ring[data-done="true"]::before { box-shadow: 0 0 16px rgb(198 255 61 / .38), inset 0 0 10px rgb(198 255 61 / .22); }
:root[data-theme="arkad"] .ring-txt { font-family: var(--ff-display); }
:root[data-theme="arkad"] .week li { border-radius: 5px 2px 5px 2px; font-family: var(--ff-display); border: 0; background: var(--c-surface-3); }
:root[data-theme="arkad"] .week li[data-state="done"] { background: var(--ember); color: var(--c-bg-deep); }
:root[data-theme="arkad"] .week li[data-state="today"] { background: transparent; color: var(--ember); box-shadow: inset 0 0 0 1.5px var(--ember); }
:root[data-theme="arkad"] .week li[data-state="future"] { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line); }

/* ------------------------------------------------------------------ Monogram (6.4) */
:root[data-theme="arkad"] .monogram { --mono: #38E1FF; color: var(--mono); }
:root[data-theme="arkad"] .monogram[data-hue="1"] { --mono: #B69CFF; }
:root[data-theme="arkad"] .monogram[data-hue="2"] { --mono: #5EF2C2; }
:root[data-theme="arkad"] .monogram[data-hue="3"] { --mono: #FF9AD5; }
:root[data-theme="arkad"] .monogram[data-hue="4"] { --mono: #FFC97A; }
:root[data-theme="arkad"] .monogram[data-hue="5"] { --mono: #9DB4FF; }
:root[data-theme="arkad"] .monogram-shape { fill: color-mix(in srgb, var(--mono) 14%, transparent); stroke: var(--mono); stroke-width: 2; stroke-linejoin: round; }
:root[data-theme="arkad"] .monogram-txt { font: 800 19px/1 var(--ff-display); letter-spacing: .02em; }
:root[data-theme="arkad"] .monogram-lg .monogram-txt { font-size: 29px; }
:root[data-theme="arkad"] .monogram-wait { color: var(--c-text-3); }

/* ------------------------------------------------------------------ Märken (6.3) */
:root[data-theme="arkad"] .badge { --b: 255 212 71; }
:root[data-theme="arkad"] .badge[data-badge="first-quiz"], :root[data-theme="arkad"] .badge[data-badge="comeback"], :root[data-theme="arkad"] .badge[data-badge="daily-goal"], :root[data-theme="arkad"] .badge[data-badge="teamplayer"] { --b: 56 225 255; }
:root[data-theme="arkad"] .badge[data-badge="first-round"], :root[data-theme="arkad"] .badge[data-badge="correct-100"], :root[data-theme="arkad"] .badge[data-badge="goal-7"] { --b: 198 255 61; }
:root[data-theme="arkad"] .badge[data-badge="streak-3"], :root[data-theme="arkad"] .badge[data-badge="streak-7"] { --b: 255 154 60; }
:root[data-theme="arkad"] .badge[data-badge="combo-5"], :root[data-theme="arkad"] .badge[data-badge="cards-50"] { --b: 255 79 184; }
:root[data-theme="arkad"] .badge-medal {
  position: relative; isolation: isolate; overflow: hidden; width: 56px; height: 56px;
  border-radius: 16px 5px 16px 5px; border: 1.5px solid rgb(var(--b) / .9); color: rgb(var(--b));
  background: radial-gradient(circle at 30% 20%, #2B305A, var(--c-surface-2) 70%); box-shadow: 0 0 16px rgb(var(--b) / .25);
}
:root[data-theme="arkad"] .badge-medal .ic { position: relative; z-index: 1; }
:root[data-theme="arkad"] .badge[data-earned="false"] .badge-medal { border: 1.5px dashed var(--c-line-strong); color: var(--c-text-3); background: var(--c-surface-2); box-shadow: none; }
:root[data-theme="arkad"] .badge[data-new="true"] .badge-medal { border-color: transparent; }
:root[data-theme="arkad"] .badge[data-new="true"] .badge-medal::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: conic-gradient(var(--cyan), var(--volt), var(--gold), var(--plasma), var(--cyan)); animation: ark-spin 1.4s linear 1; }
:root[data-theme="arkad"] .badge[data-new="true"] .badge-medal::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 14px 4px 14px 4px; background: radial-gradient(circle at 30% 20%, #2B305A, var(--c-surface-2) 70%); }
:root[data-theme="arkad"] .badge[data-new="true"] .badge-name { color: var(--gold); }
:root[data-theme="arkad"] .badge .pill-new { top: -8px; right: 2px; }
:root[data-theme="arkad"] .badge-name { font-weight: 700; }

/* ------------------------------------------------------------------ Hem (3.2) */
:root[data-theme="arkad"] .hello { padding: 4px 0 2px; }
:root[data-theme="arkad"] .hello-title { font: 800 var(--fs-h1)/1.05 var(--ff-display); letter-spacing: -.015em; overflow-wrap: break-word; }
:root[data-theme="arkad"] .hello-text { min-width: 0; }
:root[data-theme="arkad"] .hello-title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--volt)); transform: skewX(-20deg); }
:root[data-theme="arkad"] .profile { display: grid; gap: 16px; }
:root[data-theme="arkad"] .profile-stats { margin-top: 0; }
:root[data-theme="arkad"] .xpbar-label { color: var(--c-text-2); }
:root[data-theme="arkad"] .xpbar-val { font: 700 .9375rem/1 var(--ff-display); }
:root[data-theme="arkad"] .stat { border-radius: var(--r-blade-sm); }
:root[data-theme="arkad"] .stat-num { font: 800 1.875rem/1 var(--ff-display); }
:root[data-theme="arkad"] .stat-streak > .ic { width: 30px; height: 30px; transform-origin: 50% 90%; animation: ark-flicker 1.5s ease-in-out 3; }
:root[data-theme="arkad"] .stat-title { color: var(--c-text); font-size: .9375rem; letter-spacing: .06em; }
:root[data-theme="arkad"] .stat-goal .ring { width: 4.125rem; height: 4.125rem; }
:root[data-theme="arkad"] .cta-create {
  position: relative; overflow: hidden; border-radius: 20px 6px 20px 6px;
  box-shadow: 0 0 0 1px var(--volt), 0 0 28px rgb(198 255 61 / .28);
}
:root[data-theme="arkad"] .cta-create::after { inset: -50% auto -50% 0; width: 30%; background: linear-gradient(105deg, transparent, rgb(255 255 255 / .6), transparent); transform: translateX(-160%) skewX(-12deg); animation: ark-cta 1.1s var(--e-std) 1 1s; }
/* Hover: starkare glöd, inget lyft (som Arkads knappar; ett lyft med overflow: hidden – glansstrimman –
   gick inte att ge en träffyta under och flimrade när pekaren vilade vid underkanten) */
@media (hover: hover) { :root[data-theme="arkad"] .cta-create:hover { box-shadow: 0 0 0 1px var(--volt), 0 0 44px rgb(198 255 61 / .5); } }
:root[data-theme="arkad"] .cta-icon { width: 52px; height: 52px; border-radius: var(--r-blade-sm); }
:root[data-theme="arkad"] .cta-title { font: 800 1.5rem/1.05 var(--ff-display); }
:root[data-theme="arkad"] .cta-sub { color: #26310B; font-size: 1rem; }
:root[data-theme="arkad"] .due-icon { color: var(--cyan); background: rgb(56 225 255 / .1); border: 1px solid rgb(56 225 255 / .4); }
:root[data-theme="arkad"] .due-title { font-family: var(--ff-read); }
:root[data-theme="arkad"] .quiz-link { border-radius: var(--r-blade-sm); background: var(--c-surface); }
@media (hover: hover) { :root[data-theme="arkad"] .quiz-link:hover { background: var(--c-surface-2); transform: translateY(-2px); } }
:root[data-theme="arkad"] .mastery .bar { flex: none; width: 116px; max-width: none; height: 8px; border-radius: 0; overflow: hidden; transform: skewX(-20deg); background: repeating-linear-gradient(90deg, var(--c-surface-3) 0 20px, transparent 20px 24px); }
:root[data-theme="arkad"] .mastery .bar-fill { border-radius: 0; background: repeating-linear-gradient(90deg, var(--cyan) 0 20px, transparent 20px 24px); background-size: 116px 100%; box-shadow: none; }
:root[data-theme="arkad"] .quiz-item[data-state="mastered"] .mastery .bar-fill { background-image: repeating-linear-gradient(90deg, var(--gold) 0 20px, transparent 20px 24px); }
:root[data-theme="arkad"] .quiz-item[data-state="mastered"] .monogram { --mono: #FFD447; }
:root[data-theme="arkad"] .mastery-val { font: 700 .875rem/1 var(--ff-display); }
:root[data-theme="arkad"] .due-pill { color: var(--cyan); border: 1px solid rgb(56 225 255 / .5); font-family: var(--ff-display); }
:root[data-theme="arkad"] .home-foot .ic { color: var(--cyan); }
:root[data-theme="arkad"] .storage-warn, :root[data-theme="arkad"] .offline-bar { border-color: var(--ember); }

/* Hem: korten glider in i följd (en gång per skärmbyte) */
:root[data-theme="arkad"] .screen-home :is(.profile, .cta-create, .due, .quiz-item, .badges, .empty-home) { animation: ark-rise 460ms var(--e-out) backwards; }
:root[data-theme="arkad"] .screen-home .cta-create { animation-delay: 70ms; }
:root[data-theme="arkad"] .screen-home .due { animation-delay: 120ms; }
:root[data-theme="arkad"] .screen-home .quiz-item:nth-child(1) { animation-delay: 160ms; }
:root[data-theme="arkad"] .screen-home .quiz-item:nth-child(2) { animation-delay: 200ms; }
:root[data-theme="arkad"] .screen-home .quiz-item:nth-child(3) { animation-delay: 240ms; }
:root[data-theme="arkad"] .screen-home .quiz-item:nth-child(n+4) { animation-delay: 280ms; }
:root[data-theme="arkad"] .screen-home .badges { animation-delay: 180ms; }

/* ------------------------------------------------------------------ Tomt läge */
:root[data-theme="arkad"] .empty-art { width: 8.75rem; }
:root[data-theme="arkad"] .ark-empty { width: 100%; height: auto; }
:root[data-theme="arkad"] .empty-title { font-family: var(--ff-display); }

/* ------------------------------------------------------------------ Skapa (3.3) */
:root[data-theme="arkad"] .field-label { font: 700 1rem/1.3 var(--ff-display); letter-spacing: .02em; }
:root[data-theme="arkad"] .textarea, :root[data-theme="arkad"] .input { background: var(--c-bg-deep); border-color: var(--c-line-strong); }
:root[data-theme="arkad"] .textarea:focus, :root[data-theme="arkad"] .input:focus { border-color: var(--cyan); outline-offset: 2px; }
:root[data-theme="arkad"] .warn-callout .ic { color: var(--ember); }
:root[data-theme="arkad"] .counter .bar { border-radius: 2px; }
:root[data-theme="arkad"] .counter-txt { font-family: var(--ff-display); }
:root[data-theme="arkad"] .quota-icon { color: var(--cyan); }

/* ------------------------------------------------------------------ Laddar (3.4, 6.7) */
:root[data-theme="arkad"] .load-kicker { color: var(--cyan); }
:root[data-theme="arkad"] .load-title { font: 800 clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem)/1.1 var(--ff-display); }
:root[data-theme="arkad"] .bar-load { height: 6px; margin: 14px 8px; background: var(--c-surface-3); }
:root[data-theme="arkad"] .load-runner { width: 16px; height: 16px; border: 0; background: #fff; box-shadow: 0 0 0 3px var(--volt), 0 0 24px 6px rgb(198 255 61 / .55); }
:root[data-theme="arkad"] .load-runner::before { content: ""; position: absolute; right: 8px; top: 50%; width: min(70px, calc(var(--p, 0) * var(--track-w, 0px))); height: 4px; margin-top: -2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgb(198 255 61 / .8)); }
:root[data-theme="arkad"] .load-step { font-family: var(--ff-display); font-weight: 700; letter-spacing: .02em; }
:root[data-theme="arkad"] .load-step-mark { width: 14px; height: 14px; margin: 0 4px; border-radius: 4px 1px 4px 1px; border: 2px solid var(--c-line-strong); background: var(--c-surface-3); transform: rotate(45deg); }
:root[data-theme="arkad"] .load-step-mark .ic { display: none; }
:root[data-theme="arkad"] .load-step[data-state="active"] .load-step-mark { border: 2px solid var(--cyan); background: transparent; box-shadow: 0 0 10px rgb(56 225 255 / .6); }
:root[data-theme="arkad"] .load-step[data-state="done"] .load-step-mark { background: var(--volt); border: 2px solid var(--volt); box-shadow: 0 0 10px rgb(198 255 61 / .7); }
:root[data-theme="arkad"] .load-time { font-family: var(--ff-display); letter-spacing: .02em; }
:root[data-theme="arkad"] .load-status { color: var(--c-text); }
:root[data-theme="arkad"] .load-done-title { color: var(--volt); text-shadow: 0 0 22px rgb(198 255 61 / .45); font-size: var(--fs-display); line-height: .95; letter-spacing: -.01em; }
:root[data-theme="arkad"] .load-done { position: relative; overflow: hidden; padding-top: 28px; border-color: rgb(198 255 61 / .5); animation: ark-pop-in 420ms var(--e-pop) 1 both; }
:root[data-theme="arkad"] .load-done::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--cyan), var(--volt)); box-shadow: 0 0 18px rgb(198 255 61 / .7); }
:root[data-theme="arkad"] .load-bonus { color: var(--volt); font-family: var(--ff-display); }
:root[data-theme="arkad"] .screen-load[data-load="error"] .load-runner { box-shadow: 0 0 0 3px var(--coral); }
:root[data-theme="arkad"] .screen-load[data-load="error"] .load-runner::before { background: linear-gradient(90deg, transparent, rgb(255 107 129 / .8)); }
:root[data-theme="arkad"] .load-error-title { font-family: var(--ff-display); }
:root[data-theme="arkad"] .load-tips-title .ic { color: var(--gold); }
/* Fånga gnistan */
:root[data-theme="arkad"] .mg-arena {
  position: relative; display: block; width: 100%; height: clamp(170px, 30vh, 250px); padding: 0; overflow: hidden; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; color: var(--c-text-2);
  border-radius: var(--r-blade-sm); border: 1px solid var(--c-line); background: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.3px) 0 0 / 18px 18px, var(--c-bg-deep);
}
:root[data-theme="arkad"] .mg-arena.is-bonus { border-color: rgb(198 255 61 / .6); }
:root[data-theme="arkad"] .mg-spark { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 16%, var(--volt) 30%, rgb(198 255 61 / 0) 70%); box-shadow: 0 0 34px 10px rgb(198 255 61 / .5); transform: scale(0); opacity: 0; transition: transform 80ms, opacity 60ms; }
:root[data-theme="arkad"] .mg-spark.is-on { transform: scale(1); opacity: 1; transition: transform 140ms var(--e-pop), opacity 60ms; }
:root[data-theme="arkad"][data-motion="reduce"] .mg-spark.is-on { transform: scale(1); }
:root[data-theme="arkad"] .mg-msg { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 700 1rem/1.2 var(--ff-display); color: var(--c-text-2); pointer-events: none; }
:root[data-theme="arkad"] .mg-msg.is-hot { color: var(--volt); }
:root[data-theme="arkad"] .mg-stats { display: flex; gap: 16px; margin-top: 10px; font: 700 .9375rem/1.2 var(--ff-display); color: var(--c-text-2); }
:root[data-theme="arkad"] .mg-stats b { color: var(--c-text); }
:root[data-theme="arkad"] .mg-record { margin-top: 4px; font: 700 .875rem/1.2 var(--ff-display); color: var(--gold); }
:root[data-theme="arkad"] .mg-help { margin-top: 8px; font-size: var(--fs-sm); color: var(--c-text-2); }

/* ------------------------------------------------------------------ Översikt + Leitner (3.5, 6.5) */
:root[data-theme="arkad"] .ov-title { font-family: var(--ff-display); }
:root[data-theme="arkad"] .ov-mastery-row .mastery-val { font-family: var(--ff-display); color: var(--cyan); }
:root[data-theme="arkad"] .lt-stack { gap: 3px; }
:root[data-theme="arkad"] .lt-dot { width: 18px; height: 6px; border-radius: 1px; transform: skewX(-20deg); background: var(--b, var(--cyan)); }
:root[data-theme="arkad"] .lt-box[data-box="0"] .lt-dot { background: transparent; border: 1.5px solid #9095BC; }
:root[data-theme="arkad"] .lt-box[data-box="1"] { --b: #38E1FF; }
:root[data-theme="arkad"] .lt-box[data-box="2"] { --b: #4FEBD9; }
:root[data-theme="arkad"] .lt-box[data-box="3"] { --b: #78F4AE; }
:root[data-theme="arkad"] .lt-box[data-box="4"] { --b: #A2FA78; }
:root[data-theme="arkad"] .lt-box[data-box="5"] { --b: #C6FF3D; }
:root[data-theme="arkad"] .lt-box[data-box="5"] .lt-dot { background: var(--b); box-shadow: 0 0 6px rgb(198 255 61 / .5); }
:root[data-theme="arkad"] .lt-dot[data-due="true"] { outline: 1.5px solid var(--cyan); outline-offset: 1.5px; }
:root[data-theme="arkad"] .lt-count { font-family: var(--ff-display); }
:root[data-theme="arkad"] .lt-label { font: 700 var(--fs-xs)/1 var(--ff-display); letter-spacing: .04em; }
:root[data-theme="arkad"] .ov-q-label { color: var(--volt); }

/* ------------------------------------------------------------------ Öva: HUD (3.6) */
:root[data-theme="arkad"] .hud { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
:root[data-theme="arkad"] { --pip-gap: 4px; --pip-pad: 4px; --pip-pad-tight: 2px; } /* sidomarginal: de skeva prickarna sticker ut ~3 px */
:root[data-theme="arkad"] .pip { height: 8px; border-radius: 2px; transform: skewX(-20deg); }
:root[data-theme="arkad"] .pip[data-state="current"] { background: var(--cyan); box-shadow: 0 0 10px rgb(56 225 255 / .75); }
:root[data-theme="arkad"] .pip[data-state="correct"] { background: var(--volt); }
/* Fel: lägre och ihålig korallkontur – formen skiljer sig från rätt (inte bara färgen, DESIGN regel 2) */
:root[data-theme="arkad"] .pip[data-state="wrong"] { height: 4px; margin: 2px 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--coral); }
:root[data-theme="arkad"] .pip[data-retry="true"][data-state="todo"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-text-3); }
:root[data-theme="arkad"] .pip.ark-pop { animation: ark-pip 360ms var(--e-pop); }
:root[data-theme="arkad"] .hud-combo, :root[data-theme="arkad"] .hud-xp { border-radius: var(--r-chip); background: var(--c-surface); }
:root[data-theme="arkad"] .hud-combo .combo-num { color: var(--c-text-3); }
:root[data-theme="arkad"] .hud-xp { color: var(--volt); }
:root[data-theme="arkad"] .hud-xp-num { font: 800 1.125rem/1 var(--ff-display); }
:root[data-theme="arkad"] .combo-label, :root[data-theme="arkad"] .hud-xp-label { font-family: var(--ff-display); letter-spacing: .1em; text-transform: uppercase; }
:root[data-theme="arkad"] .combo-mult { font: 800 .8125rem/1 var(--ff-display); padding: 5px 7px; border-radius: var(--r-chip); background: var(--c-surface-2); }
:root[data-theme="arkad"] .combo-num { position: relative; display: inline-block; min-width: 1.4ch; text-align: center; transition: color var(--d-fast); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="0"]:not([data-combo="0"]) .combo-num { color: var(--c-text); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="1"] .combo-num, :root[data-theme="arkad"] .screen-play[data-combo-tier="2"] .combo-num { color: var(--plasma); text-shadow: 0 0 14px rgb(255 79 184 / .7); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="3"] .combo-num { color: var(--gold); text-shadow: 0 0 16px rgb(255 212 71 / .8); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="1"] .combo-mult, :root[data-theme="arkad"] .screen-play[data-combo-tier="2"] .combo-mult { color: var(--plasma); background: rgb(255 79 184 / .12); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="3"] .combo-mult { color: var(--gold); background: rgb(255 212 71 / .12); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="2"] .hud-combo { border-color: var(--plasma); box-shadow: 0 0 0 1px rgb(255 79 184 / .9), 0 0 18px rgb(255 79 184 / .35); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="3"] .hud-combo { border-color: var(--gold); box-shadow: 0 0 0 1px rgb(255 212 71 / .9), 0 0 18px rgb(255 212 71 / .35); }
:root[data-theme="arkad"] .combo-num.ark-glitch::before, :root[data-theme="arkad"] .combo-num.ark-glitch::after { content: attr(data-n); position: absolute; inset: 0; pointer-events: none; animation: ark-glitch 360ms steps(3) 1 both; }
:root[data-theme="arkad"] .combo-num.ark-glitch::before { color: var(--cyan); }
:root[data-theme="arkad"] .combo-num.ark-glitch::after { color: var(--plasma); animation-direction: reverse; }
/* Kombobana (mobil, under HUD-raden) */
@media (max-width: 62.49em) { :root[data-theme="arkad"] .hud-lane { display: flex; } }
:root[data-theme="arkad"] .hud-lane { gap: 4px; height: 5px; margin-bottom: 5px; }
:root[data-theme="arkad"] .lane-seg { position: relative; border-radius: 2px; transform: skewX(-20deg); }
:root[data-theme="arkad"] .lane-seg[data-on="true"] { background: var(--volt); box-shadow: 0 0 8px rgb(198 255 61 / .6); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="1"] .lane-seg[data-on="true"], :root[data-theme="arkad"] .screen-play[data-combo-tier="2"] .lane-seg[data-on="true"] { background: var(--plasma); box-shadow: 0 0 10px rgb(255 79 184 / .75); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="3"] .lane-seg[data-on="true"] { background: var(--gold); box-shadow: 0 0 12px rgb(255 212 71 / .85); }
:root[data-theme="arkad"] .lane-seg::after { content: ""; position: absolute; inset: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 14px 4px rgb(255 255 255 / .7); opacity: 0; pointer-events: none; }
:root[data-theme="arkad"] .lane-seg.ark-hit::after { animation: ark-fade 420ms ease-out 1; }
:root[data-theme="arkad"] .ark-ghost { position: absolute; inset: 0; border-radius: inherit; background: var(--plasma); box-shadow: 0 0 10px rgb(255 79 184 / .75); pointer-events: none; }
/* Callout i HUD-bandet */
:root[data-theme="arkad"] .callout {
  --tone: 255 79 184; --callout-tf: skewX(-6deg); --callout-in: 1.3; --callout-in-ms: 300;
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  width: 100%; height: var(--hud-h); padding: 0 16px; text-align: center; transform: skewX(-6deg);
}
:root[data-theme="arkad"] .callout::before { content: ""; position: absolute; inset: 5px -24px; background: var(--c-bg-deep); border-top: 1px solid rgb(var(--tone) / .85); border-bottom: 1px solid rgb(var(--tone) / .85); box-shadow: 0 0 18px rgb(var(--tone) / .25), inset 0 0 22px rgb(var(--tone) / .12); }
:root[data-theme="arkad"] .hud-callout:not(:empty) { background: var(--c-bg); }
:root[data-theme="arkad"] .callout[data-tone="gold"], :root[data-theme="arkad"] .callout[data-tone="level"] { --tone: 255 212 71; }
:root[data-theme="arkad"] .callout[data-tone="goal"] { --tone: 56 225 255; }
:root[data-theme="arkad"] .callout-big { position: relative; font: 800 var(--fs-callout)/1 var(--ff-display); text-transform: uppercase; letter-spacing: .02em; color: rgb(var(--tone)); text-shadow: 0 0 16px rgb(var(--tone) / .75), 0 0 40px rgb(var(--tone) / .35); white-space: nowrap; }
:root[data-theme="arkad"] .callout-sub { position: relative; font: 800 .875rem/1 var(--ff-display); letter-spacing: .06em; color: var(--c-text); white-space: nowrap; }
:root[data-theme="arkad"] .callout[data-tone="gold"] { overflow: hidden; }
:root[data-theme="arkad"] .callout[data-tone="gold"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; z-index: -1; background: conic-gradient(var(--cyan), var(--volt), var(--gold), var(--plasma), var(--cyan)); opacity: .55; animation: ark-spin 1.4s linear 1 both; }
:root[data-theme="arkad"] .callout[data-tone="gold"]::before { inset: 4px -24px; background: rgb(7 8 15 / .9); }
@media (max-width: 37.49em) { :root[data-theme="arkad"] .callout { gap: 2px 10px; } :root[data-theme="arkad"] .callout-sub { font-size: .8125rem; } }
:root[data-theme="arkad"] .hud-pops { inset: 0; top: 0; right: auto; left: 0; width: 100%; height: 100%; overflow: visible; }
:root[data-theme="arkad"] .hud-pop { position: absolute; z-index: 2; padding: 3px 8px; border-radius: var(--r-chip); background: var(--c-bg-deep); border: 1px solid rgb(198 255 61 / .6); font: 800 1rem/1 var(--ff-display); color: var(--volt); white-space: nowrap; text-shadow: 0 0 12px rgb(198 255 61 / .7); pointer-events: none; }
:root[data-theme="arkad"] .hud-pop[data-tone="goal"] { color: var(--cyan); border-color: rgb(56 225 255 / .6); text-shadow: 0 0 12px rgb(56 225 255 / .7); }

/* ------------------------------------------------------------------ Öva: fråga, alternativ, feedback */
@media (min-width: 37.5em) { :root[data-theme="arkad"] .q-card { padding: 18px 20px 22px; } }
:root[data-theme="arkad"] .q-text { letter-spacing: -.005em; text-wrap: pretty; }
:root[data-theme="arkad"] .opts { gap: 10px; }
:root[data-theme="arkad"] .opt { transition: background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast), opacity 150ms linear, transform var(--d-press) var(--e-std); }
@media (hover: hover) { :root[data-theme="arkad"] .opt:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--cyan); background: var(--c-surface-3); } }
:root[data-theme="arkad"] .opt:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.985); }
:root[data-theme="arkad"] .opt-key { font: 800 1.0625rem/1 var(--ff-display); color: var(--c-text-2); border-width: 1px; }
:root[data-theme="arkad"] .opts[data-layout="grid"] .opt { grid-template-rows: auto auto; row-gap: 0; }
:root[data-theme="arkad"] .opts[data-layout="grid"] .opt:has(.opt-tag:not([hidden])) { row-gap: 6px; }
:root[data-theme="arkad"] .opts[data-layout="grid"] .opt-key { grid-row: 1 / span 2; }
:root[data-theme="arkad"] .opts[data-layout="grid"] .opt { grid-template-columns: var(--key-size) auto minmax(0, 1fr); column-gap: 10px; }
:root[data-theme="arkad"] .opts[data-layout="grid"] .opt-text { grid-column: 2 / -1; grid-row: 1; }
:root[data-theme="arkad"] .opts[data-layout="grid"] .opt-tag:not([hidden]) { grid-column: 2; grid-row: 2; justify-self: start; }
:root[data-theme="arkad"] .opts[data-layout="grid"] .opt-text:has(+ .opt-tag[hidden]) { grid-row: 1 / span 2; }
:root[data-theme="arkad"] .opts[data-layout="grid"] .opt-mark { grid-column: 3; grid-row: 2; justify-self: start; width: 20px; height: 20px; }
:root[data-theme="arkad"] .opts[data-layout="grid"] .opt-mark .ic { width: 20px; height: 20px; }
/* Lista i en smal kolumn: taggen "Rätt svar"/"Ditt svar" under texten i stället för bredvid, som i 2 × 2 –
   annars tar taggen och bocken så mycket plats att vanliga ord bryts. 21em = 357 px vid 100 % (390 px-mobilen
   har kvar taggen bredvid texten, 360 och 320 px får den under), 535 px vid 150 % text. */
@container opts (min-width: 15.01em) and (max-width: 21em) {
  :root[data-theme="arkad"] .opts[data-layout="list"] .opt { grid-template-columns: var(--key-size) auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; }
  :root[data-theme="arkad"] .opts[data-layout="list"] .opt:has(.opt-tag:not([hidden])) { row-gap: 6px; }
  :root[data-theme="arkad"] .opts[data-layout="list"] .opt-key { grid-row: 1 / span 2; }
  :root[data-theme="arkad"] .opts[data-layout="list"] .opt-text { grid-column: 2 / -1; grid-row: 1; }
  :root[data-theme="arkad"] .opts[data-layout="list"] .opt-tag:not([hidden]) { grid-column: 2; grid-row: 2; justify-self: start; }
  :root[data-theme="arkad"] .opts[data-layout="list"] .opt-text:has(+ .opt-tag[hidden]) { grid-row: 1 / span 2; }
  :root[data-theme="arkad"] .opts[data-layout="list"] .opt-mark { grid-column: 3; grid-row: 2; justify-self: start; width: 20px; height: 20px; }
  :root[data-theme="arkad"] .opts[data-layout="list"] .opt-mark .ic { width: 20px; height: 20px; }
}
:root[data-theme="arkad"] .opt-tag { font: 700 .75rem/1 var(--ff-display); letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; border-radius: var(--r-chip); }
:root[data-theme="arkad"] .opt[data-state="correct"] { background: var(--volt); border-color: var(--volt); color: var(--c-on-primary); box-shadow: 0 0 0 1px rgb(198 255 61 / .9), 0 0 18px rgb(198 255 61 / .45), 0 0 46px rgb(198 255 61 / .18); }
:root[data-theme="arkad"] .opt[data-state="correct"] .opt-key { background: var(--c-bg-deep); border-color: var(--c-bg-deep); color: var(--volt); animation: ark-key-pop 300ms var(--e-pop) 1; }
:root[data-theme="arkad"] .opt[data-state="correct"] .opt-tag { background: var(--c-bg-deep); border-color: var(--c-bg-deep); color: var(--volt); }
:root[data-theme="arkad"] .opt[data-state="correct"] .opt-mark { color: var(--c-on-primary); }
:root[data-theme="arkad"] .opt[data-state="correct"] .opt-mark .ic, :root[data-theme="arkad"] .opt[data-state="reveal"] .opt-mark .ic, :root[data-theme="arkad"] .opt[data-state="wrong"] .opt-mark .ic { animation: ark-check 260ms var(--e-pop) 1 both; }
:root[data-theme="arkad"] .opt[data-state="wrong"] { background: var(--c-wrong-soft); border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral), 0 0 22px rgb(255 107 129 / .22); }
:root[data-theme="arkad"] .opt[data-state="wrong"] .opt-key { background: transparent; border-color: var(--coral); color: var(--coral); animation: ark-key-no 300ms var(--e-std) 1; }
:root[data-theme="arkad"] .opt[data-state="wrong"] .opt-tag { background: transparent; border-color: rgb(255 107 129 / .6); color: var(--coral); }
:root[data-theme="arkad"] .opt[data-state="reveal"] { background: var(--c-surface-2); border-color: var(--volt); box-shadow: 0 0 0 1px var(--volt), 0 0 18px rgb(198 255 61 / .2); }
:root[data-theme="arkad"] .opt[data-state="reveal"] .opt-key { border-color: var(--volt); color: var(--volt); }
:root[data-theme="arkad"] .opt[data-state="reveal"] .opt-tag { background: rgb(198 255 61 / .1); border-color: rgb(198 255 61 / .55); color: var(--volt); }
:root[data-theme="arkad"] .opt[data-state="dim"], :root[data-theme="arkad"] .opt[data-state="dim"]:disabled, :root[data-theme="arkad"] .opt[data-state="dim"][aria-disabled="true"] { background: var(--c-surface); border-color: var(--c-line); color: var(--c-text-3); box-shadow: none; }
:root[data-theme="arkad"] .opt[data-state="dim"] .opt-key { border-color: var(--c-line); color: var(--c-text-3); }
:root[data-theme="arkad"] .fb { background: var(--c-surface); border-color: var(--c-line); }
:root[data-theme="arkad"] .fb[data-result="correct"] { background: linear-gradient(180deg, rgb(198 255 61 / .07), transparent 60%), var(--c-surface); border-color: rgb(198 255 61 / .5); }
:root[data-theme="arkad"] .fb[data-result="wrong"] { background: linear-gradient(180deg, rgb(255 107 129 / .08), transparent 60%), var(--c-surface); border-color: rgb(255 107 129 / .5); }
:root[data-theme="arkad"] .fb-icon { width: 40px; height: 40px; border-radius: var(--r-chip); }
:root[data-theme="arkad"] .fb.is-entering .fb-icon { animation: ark-check 320ms var(--e-pop) 120ms both; }
:root[data-theme="arkad"] .fb-title { font: 800 1.5rem/1.05 var(--ff-display); }
:root[data-theme="arkad"] .fb[data-result="correct"] .fb-title { color: var(--volt); }
:root[data-theme="arkad"] .fb[data-result="wrong"] .fb-title { color: var(--coral); }
:root[data-theme="arkad"] .fb-note .ic { color: var(--cyan); }
:root[data-theme="arkad"] .fb-why { max-width: 62ch; }
:root[data-theme="arkad"] .pill-extra { color: var(--c-text-2); }
:root[data-theme="arkad"] .play-alert { border-color: var(--coral); }
@media (max-width: 37.49em) { :root[data-theme="arkad"] .q-card { padding: 11px 14px 13px; } :root[data-theme="arkad"] .fb-title { font-size: 1.375rem; } }
@media (max-width: 15em) { :root[data-theme="arkad"] .q-card { padding-left: 10px; padding-right: 10px; } } /* smal skärm vid stor text (base.css) */

/* ------------------------------------------------------------------ Öva: desktop-kolumner */
:root[data-theme="arkad"] .combo-v { gap: 12px; padding: 18px 12px; border-radius: var(--r-blade-sm); transition: border-color var(--d-base); }
:root[data-theme="arkad"] .combo-v .combo-num { font: 800 3.25rem/1 var(--ff-display); color: var(--c-text-3); }
:root[data-theme="arkad"] .combo-v .combo-label { font: 700 .8125rem/1 var(--ff-display); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-2); }
:root[data-theme="arkad"] .combo-v .combo-lane { width: 58px; height: min(480px, calc(100dvh - var(--hud-h) - 300px)); min-height: 180px; gap: 6px; }
:root[data-theme="arkad"] .combo-v .lane-seg { transform: skewY(-12deg); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="2"] .combo-v { position: relative; border-color: var(--plasma); box-shadow: 0 0 0 1px rgb(255 79 184 / .9), 0 0 22px rgb(255 79 184 / .4); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="3"] .combo-v { border-color: var(--gold); box-shadow: 0 0 0 1px rgb(255 212 71 / .9), 0 0 22px rgb(255 212 71 / .4); }
:root[data-theme="arkad"] .screen-play[data-combo-tier="2"] .combo-v::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 34px 6px rgb(255 79 184 / .55); opacity: 0; pointer-events: none; animation: ark-fade 500ms ease-out 2; }
:root[data-theme="arkad"] .round-title { font: 700 .8125rem/1.2 var(--ff-display); letter-spacing: .12em; text-transform: uppercase; }
:root[data-theme="arkad"] .round-stats dd { font-family: var(--ff-display); }
:root[data-theme="arkad"] .round-stats div:last-child dd { color: var(--volt); }
:root[data-theme="arkad"] .collect { grid-template-columns: repeat(5, 22px); justify-content: space-between; gap: 12px 6px; }
:root[data-theme="arkad"] .collect-slot { position: relative; width: 22px; height: 22px; background: transparent; }
:root[data-theme="arkad"] .collect-slot::before { content: ""; position: absolute; inset: 3px; border-radius: 3px 1px 3px 1px; background: var(--c-surface-3); transform: rotate(45deg); }
:root[data-theme="arkad"] .collect-slot[data-state="earned"], :root[data-theme="arkad"] .collect-slot[data-state="revenge"], :root[data-theme="arkad"] .collect-slot[data-state="missed"] { background: transparent; box-shadow: none; animation: ark-slot 260ms var(--e-out) 1; }
:root[data-theme="arkad"] .collect-slot[data-state="earned"]::before { background: var(--volt); box-shadow: 0 0 10px rgb(198 255 61 / .7); }
:root[data-theme="arkad"] .collect-slot[data-state="revenge"]::before { background: var(--cyan); box-shadow: 0 0 10px rgb(56 225 255 / .7); }
:root[data-theme="arkad"] .collect-slot[data-state="missed"]::before { background: transparent; border: 1.5px dashed var(--coral); }
:root[data-theme="arkad"] .collect-slot.ark-gold::after { content: ""; position: absolute; inset: 1px; border-radius: 3px 1px 3px 1px; background: var(--gold); box-shadow: 0 0 12px rgb(255 212 71 / .9); transform: rotate(45deg); opacity: 0; animation: ark-fade 700ms ease-out calc(var(--i, 0) * 60ms) 1 both reverse; }
:root[data-theme="arkad"] .keys-card .kbd { color: var(--c-text); }

/* ------------------------------------------------------------------ Resultat (3.7) */
:root[data-theme="arkad"] .res-kicker { color: var(--cyan); }
:root[data-theme="arkad"] .res-score { width: min(100%, clamp(8.75rem, 40vw, 11rem)); }
:root[data-theme="arkad"] .res-ring .ring-fill { stroke: var(--volt); }
:root[data-theme="arkad"] .res-score::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; box-shadow: 0 0 26px rgb(198 255 61 / .28), inset 0 0 18px rgb(198 255 61 / .14); }
:root[data-theme="arkad"] .screen-result[data-perfect="true"] .res-score::before { box-shadow: 0 0 30px rgb(255 212 71 / .4), inset 0 0 18px rgb(255 212 71 / .2); }
:root[data-theme="arkad"] .res-score-num { font: 800 var(--fs-display)/1 var(--ff-display); }
:root[data-theme="arkad"] .res-score-of { font-family: var(--ff-display); }
:root[data-theme="arkad"] .res-stamp { padding: 7px 12px; border: 2.5px solid var(--gold); border-radius: 7px 2px 7px 2px; background: rgb(7 8 15 / .9); color: var(--gold); font: 800 1rem/1 var(--ff-display); letter-spacing: .08em; box-shadow: 0 0 18px rgb(255 212 71 / .5), inset 0 0 10px rgb(255 212 71 / .2); }
:root[data-theme="arkad"] .res-title { font-family: var(--ff-display); }
:root[data-theme="arkad"] .res-xp-row { min-height: 40px; align-items: center; padding: 0 12px; background: var(--c-surface-2); border-radius: var(--r-chip); }
:root[data-theme="arkad"] .res-xp-row .num { color: var(--volt); }
:root[data-theme="arkad"] .res-xp-total { min-height: 48px; align-items: center; padding: 0 12px; border-top: 0; border-radius: var(--r-chip); background: rgb(198 255 61 / .08); box-shadow: inset 0 0 0 1.5px var(--volt); font-family: var(--ff-display); }
:root[data-theme="arkad"] .res-xp-total .num { font-size: 1.375rem; color: var(--volt); }
:root[data-theme="arkad"] .res-xp-total.is-lit .num { text-shadow: 0 0 14px rgb(198 255 61 / .7); }
/* Låg desktopskärm (1366 × 657): mindre poängring, så att XP-totalen ryms ovanför vecket */
@media (min-width: 62.5em) and (max-height: 820px) { :root[data-theme="arkad"] .res-score { width: min(100%, 8.75rem); } :root[data-theme="arkad"] .res-score-num { font-size: 3.25rem; } }
:root[data-theme="arkad"] .res-row > .ic { color: var(--ember); }
:root[data-theme="arkad"] .res-row-title { font-family: var(--ff-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: .01em; }
:root[data-theme="arkad"] .res-flag { padding: 5px 9px; border: 1.5px solid var(--gold); background: rgb(7 8 15 / .9); color: var(--gold); font: 800 .8125rem/1 var(--ff-display); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 14px rgb(255 212 71 / .4); }
:root[data-theme="arkad"] .res-streak .res-flag { border-color: var(--ember); color: var(--ember); box-shadow: 0 0 14px rgb(255 154 60 / .35); }
:root[data-theme="arkad"] .res-level.is-up .bar-level .bar-fill { background: repeating-linear-gradient(115deg, var(--gold) 0 10px, #F2C21F 10px 20px); box-shadow: 0 0 18px rgb(255 212 71 / .7); }
:root[data-theme="arkad"] .collect-res { grid-template-columns: repeat(10, 22px); max-width: none; width: auto; gap: 4px; justify-content: center; }
@media (max-width: 23.75em) { :root[data-theme="arkad"] .collect-res { grid-template-columns: repeat(10, 18px); } :root[data-theme="arkad"] .collect-res .collect-slot { width: 18px; height: 18px; } }

/* ------------------------------------------------------------------ Flashcards, delad länk, inställningar */
:root[data-theme="arkad"] .fc-face { background: linear-gradient(180deg, rgb(255 255 255 / .03), transparent 50%), var(--c-surface); }
:root[data-theme="arkad"] .fc-front .fc-label { color: var(--cyan); }
:root[data-theme="arkad"] .fc-back { background: linear-gradient(180deg, rgb(198 255 61 / .06), transparent 60%), var(--c-surface); border-color: rgb(198 255 61 / .55); }
:root[data-theme="arkad"] .fc-back .fc-label { color: var(--volt); }
:root[data-theme="arkad"] .fc-a { font-family: var(--ff-read); color: var(--c-text); }
:root[data-theme="arkad"] .fc-count { font-family: var(--ff-display); }
:root[data-theme="arkad"] .share-kicker { color: var(--cyan); }
:root[data-theme="arkad"] .share-added { color: var(--volt); font-family: var(--ff-display); }
:root[data-theme="arkad"] .share-preview { background: var(--c-bg-deep); }
:root[data-theme="arkad"] .switch-input:checked + .switch-track { background: var(--volt); border-color: var(--volt); box-shadow: 0 0 12px rgb(198 255 61 / .35); }
:root[data-theme="arkad"] .switch-thumb { border-radius: 50%; }
:root[data-theme="arkad"] .segmented { border-radius: var(--r-btn); }
:root[data-theme="arkad"] .segmented button { font-family: var(--ff-display); border-radius: var(--r-btn); }
:root[data-theme="arkad"] .segmented button[aria-checked="true"] { background: var(--c-surface); box-shadow: inset 0 0 0 1.5px var(--cyan); color: var(--c-text); }
:root[data-theme="arkad"] .about-version { font-family: var(--ff-display); letter-spacing: .04em; }
:root[data-theme="arkad"] .toast { background: var(--c-surface-2); border-radius: var(--r-blade-sm); box-shadow: 0 18px 40px rgb(0 0 0 / .5); }
:root[data-theme="arkad"] .dialog { border-radius: var(--r-card); border-color: var(--c-line-strong); background: linear-gradient(180deg, rgb(255 255 255 / .03), transparent 50%), var(--c-surface); }
:root[data-theme="arkad"] .dialog::backdrop { background: rgb(7 8 15 / .72); }
:root[data-theme="arkad"] .dialog-title { font-family: var(--ff-display); }

/* ------------------------------------------------------------------ Temaväljaren: Arkad-kortet och förhandsvisningen (2.2, 2.3) */
[data-pv="arkad"] .tp-name { font: 800 1.75rem/1.1 var(--ff-display); text-transform: uppercase; letter-spacing: .06em; color: var(--volt); text-shadow: 0 0 18px rgb(198 255 61 / .55); }
[data-pv="arkad"] .tp-tags { font: 600 .9375rem/1.4 var(--ff-read); color: var(--c-text-2); }
[data-pv="arkad"] .tp-cta { font-family: var(--ff-display); background: var(--volt); color: #07080F; border-radius: 14px 4px 14px 4px; box-shadow: 0 0 0 1px var(--volt), 0 0 22px rgb(198 255 61 / .3); }
[data-pv="arkad"] .tp-meta { background: linear-gradient(180deg, rgb(255 255 255 / .03), transparent 60%), var(--c-surface); border-top: 1px solid var(--c-line); }
[data-pv="arkad"] .tp-preview { background: var(--c-bg); }
[data-pv="arkad"] .pv-scene { position: relative; display: grid; align-content: center; gap: 9px; height: 100%; padding: 14px 16px; overflow: hidden; background: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1.3px) 0 0 / 18px 18px, radial-gradient(40rem 20rem at 90% -20%, rgb(56 225 255 / .12), transparent 60%), var(--c-bg); }
[data-pv="arkad"] .pv-trails { position: absolute; inset: -20%; transform: rotate(-14deg); pointer-events: none; }
[data-pv="arkad"] .pv-trails i { position: absolute; left: 0; top: var(--y); width: var(--w); height: 2px; border-radius: 2px; opacity: .45; background: linear-gradient(90deg, transparent, var(--c) 72%, #fff 97%, transparent); transform: translateX(40%); }
[data-pv="arkad"] .pv-hud { position: relative; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 0; }
[data-pv="arkad"] .pv-pips { display: flex; gap: 4px; flex: 1; min-width: 0; }
[data-pv="arkad"] .pv-pip { flex: 1; height: 7px; border-radius: 2px; background: var(--c-surface-3); transform: skewX(-20deg); }
[data-pv="arkad"] .pv-pip[data-state="done"] { background: var(--volt); }
[data-pv="arkad"] .pv-pip[data-state="current"] { background: var(--cyan); box-shadow: 0 0 8px rgb(56 225 255 / .75); }
[data-pv="arkad"] .pv-combo, [data-pv="arkad"] .pv-xp { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px 2px 6px 2px; background: var(--c-surface); border: 1px solid var(--c-line); font: 800 14px/1 var(--ff-display); }
[data-pv="arkad"] .pv-combo { color: var(--c-text-2); transition: color 160ms, border-color 160ms; }
[data-pv="arkad"] .pv-combo .ic, [data-pv="arkad"] .pv-xp .ic { width: 15px; height: 15px; }
[data-pv="arkad"] .pv-combo.is-hot { color: var(--plasma); border-color: var(--plasma); }
[data-pv="arkad"] .pv-combo-num { display: inline-block; min-width: 1ch; }
[data-pv="arkad"] .pv-xp { color: var(--volt); }
[data-pv="arkad"] .pv-callout { position: absolute; inset: 0 -16px; display: grid; place-items: center; opacity: 0; transform: skewX(-6deg); background: #07080F; border-top: 1px solid var(--plasma); border-bottom: 1px solid var(--plasma); box-shadow: 0 0 14px rgb(255 79 184 / .3); }
[data-pv="arkad"] .pv-callout.is-on { opacity: 1; }
[data-pv="arkad"] .pv-callout-big { font: 800 18px/1 var(--ff-display); letter-spacing: .04em; color: var(--plasma); text-shadow: 0 0 12px rgb(255 79 184 / .8); }
[data-pv="arkad"] .pv-q { position: relative; display: block; padding: 11px 13px; border-radius: 14px 4px 14px 4px; background: linear-gradient(180deg, rgb(255 255 255 / .03), transparent 50%), var(--c-surface); border: 1px solid var(--c-line); font: 700 16px/1.3 var(--ff-read); color: var(--c-text); }
[data-pv="arkad"] .pv-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px 6px 7px; border-radius: 11px 3px 11px 3px; background: var(--c-surface-2); border: 1.5px solid var(--c-line-strong); font: 600 15px/1.2 var(--ff-read); color: var(--c-text); transition: background-color 160ms, border-color 160ms, color 160ms; }
[data-pv="arkad"] .pv-opt.is-on { background: var(--volt); border-color: var(--volt); color: #07080F; box-shadow: 0 0 0 1px var(--volt), 0 0 18px rgb(198 255 61 / .45); }
[data-pv="arkad"] .pv-key { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 6px 2px 6px 2px; background: var(--c-bg); border: 1px solid var(--c-line-strong); font: 800 13px/1 var(--ff-display); color: var(--c-text-2); }
[data-pv="arkad"] .pv-opt.is-on .pv-key { background: #07080F; border-color: #07080F; color: var(--volt); }
[data-pv="arkad"] .pv-txt { flex: 1; }
[data-pv="arkad"] .pv-mark { width: 20px; height: 20px; opacity: 0; }
[data-pv="arkad"] .pv-mark .ic { width: 20px; height: 20px; }
[data-pv="arkad"] .pv-opt.is-on .pv-mark { opacity: 1; }
[data-pv="arkad"] .pv-sparks { position: absolute; inset: 0; pointer-events: none; }
[data-pv="arkad"] .pv-sparks i { position: absolute; left: 0; top: 0; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--c); opacity: 0; }

/* ------------------------------------------------------------------ Keyframes (ark-*) */
@keyframes ark-shine { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes ark-cta { 0% { transform: translateX(-160%) skewX(-12deg); } 100% { transform: translateX(480%) skewX(-12deg); } }
@keyframes ark-flicker { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.06, .97) rotate(-2deg); } 60% { transform: scale(.97, 1.05) rotate(2deg); } }
@keyframes ark-spin { to { transform: rotate(360deg); } }
@keyframes ark-key-pop { 0% { transform: scale(1); } 45% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes ark-key-no { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ark-check { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 60% { transform: scale(1.2) rotate(0); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ark-pip { 0% { transform: skewX(-20deg) scaleY(1); } 40% { transform: skewX(-20deg) scaleY(1.9); } 100% { transform: skewX(-20deg) scaleY(1); } }
@keyframes ark-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ark-glitch { 0% { transform: translateX(-2px); opacity: .9; } 50% { transform: translateX(2px); opacity: .9; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes ark-pop-in { 0% { opacity: 0; transform: scale(.92) translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes ark-rise { 0% { opacity: 0; transform: translateY(14px); } }
@keyframes ark-slot { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Nya pluggsätt och uppladdning (DESIGN 3.3b, 3.5b, 3.6b–c) */
:root[data-theme="arkad"] .mode { box-shadow: inset 0 0 0 1px rgb(56 225 255 / .12); }
@media (hover: hover) { :root[data-theme="arkad"] a.mode:hover { border-color: var(--cyan); box-shadow: 0 0 0 1px rgb(56 225 255 / .7), 0 0 18px rgb(56 225 255 / .16); } }
:root[data-theme="arkad"] .mode-icon { background: var(--c-bg-deep); border-color: var(--cyan); color: var(--cyan); }
:root[data-theme="arkad"] .mode[data-mode="concepts"] .mode-icon { border-color: var(--gold); color: var(--gold); }
:root[data-theme="arkad"] .mode[data-mode="match"] .mode-icon { border-color: var(--plasma); color: var(--plasma); }
:root[data-theme="arkad"] .mode[data-mode="cloze"] .mode-icon { border-color: var(--volt); color: var(--volt); }
:root[data-theme="arkad"] .mode.is-off .mode-icon { border-color: var(--c-line); color: var(--c-text-3); }
:root[data-theme="arkad"] .mode-title { font-family: var(--ff-display); letter-spacing: .02em; }
:root[data-theme="arkad"] .mode-new { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: .06em; }

:root[data-theme="arkad"] .tile-key { font: 800 1.0625rem/1 var(--ff-display); border-width: 1px; }
:root[data-theme="arkad"] .tile:not([aria-disabled="true"]):active { transform: scale(.985); }
@media (hover: hover) { :root[data-theme="arkad"] .tile:not([aria-disabled="true"]):not([data-locked]):hover { border-color: var(--cyan); background: var(--c-surface-3); } }
:root[data-theme="arkad"] .tile[data-state="selected"], :root[data-theme="arkad"] .tile[data-hover="true"] { border-color: var(--cyan); background: var(--c-surface-3); box-shadow: 0 0 0 1px var(--cyan), 0 0 18px rgb(56 225 255 / .22); }
:root[data-theme="arkad"] .tile[data-state="matched"] { background: var(--volt); border-color: var(--volt); color: var(--c-on-primary); box-shadow: 0 0 0 1px rgb(198 255 61 / .9), 0 0 18px rgb(198 255 61 / .25); }
:root[data-theme="arkad"] .tile[data-state="matched"] .tile-key { background: var(--c-bg-deep); border-color: var(--c-bg-deep); color: var(--volt); }
:root[data-theme="arkad"] .tile[data-state="matched"] .tile-mark { color: var(--c-on-primary); }
:root[data-theme="arkad"] .tile[data-state="wrong"] { background: var(--c-wrong-soft); border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral), 0 0 22px rgb(255 107 129 / .22); }
:root[data-theme="arkad"] .tile[data-state="wrong"] .tile-key { background: transparent; border-color: var(--coral); color: var(--coral); }

:root[data-theme="arkad"] .hud-clock { box-shadow: inset 0 0 0 1px rgb(56 225 255 / .12); }
:root[data-theme="arkad"] .hud-clock-num { font-family: var(--ff-display); }
:root[data-theme="arkad"] .hud-time-fill { background: var(--cyan); box-shadow: 0 0 10px rgb(56 225 255 / .5); }
:root[data-theme="arkad"] .screen-game[data-clock="low"] .hud-time-fill { background: var(--coral); box-shadow: 0 0 10px rgb(255 107 129 / .5); }

:root[data-theme="arkad"] .gap { background: var(--c-bg-deep); border-color: var(--c-line-strong); }
:root[data-theme="arkad"] .gap[data-state="selected"], :root[data-theme="arkad"] .gap[data-hover="true"] { border-color: var(--cyan); background: var(--c-surface-3); box-shadow: 0 0 0 1px var(--cyan), 0 0 14px rgb(56 225 255 / .22); }
:root[data-theme="arkad"] .gap[data-state="correct"] { background: var(--volt); border-color: var(--volt); color: var(--c-on-primary); }
:root[data-theme="arkad"] .gap[data-state="correct"] .gap-mark { color: var(--c-on-primary); }
:root[data-theme="arkad"] .gap[data-state="revealed"] { background: var(--c-surface-3); border-color: var(--gold); }
:root[data-theme="arkad"] .gap[data-state="wrong"] { background: var(--c-wrong-soft); border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
:root[data-theme="arkad"] .chip-word { font-family: var(--ff-display); font-weight: 700; }
@media (hover: hover) { :root[data-theme="arkad"] .chip-word:not([data-locked]):hover { border-color: var(--cyan); background: var(--c-surface-3); } }
:root[data-theme="arkad"] .chip-word[data-state="selected"] { border-color: var(--cyan); background: var(--c-surface-3); box-shadow: 0 0 0 1px var(--cyan), 0 0 14px rgb(56 225 255 / .22); }
:root[data-theme="arkad"] .chip-word[data-state="wrong"] { border-color: var(--coral); background: var(--c-wrong-soft); }
:root[data-theme="arkad"] .drag-ghost { background: var(--volt); color: var(--c-on-primary); font-family: var(--ff-display); box-shadow: 0 0 0 1px var(--volt), 0 0 18px rgb(198 255 61 / .35); }
:root[data-theme="arkad"] .import[data-drop="true"] { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgb(56 225 255 / .25); }

/* ---------------------------------------------------------------- Volt, Arkads maskot (Erik 2026-10-23) */
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 0 10px rgb(56 225 255 / .35)); }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt .v-ground { opacity: .3; transform-box: view-box; transform-origin: 70px 130px; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt :is(.eyes, .mouth, .v-spark, .v-crown, .v-zzz) { display: none; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt:is([data-mood="idle"], [data-mood="wave"], [data-mood="think"]) .eyes-open,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt:is([data-mood="happy"], [data-mood="cheer"]) .eyes-happy,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-mood="wow"] .eyes-star,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-mood="cool"] .eyes-cool,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-mood="comfort"] .eyes-sad,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-mood="sleep"] .eyes-closed,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt:is([data-mood="idle"], [data-mood="cool"]) .m-smile,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt:is([data-mood="wave"], [data-mood="happy"], [data-mood="cheer"], [data-mood="wow"]) .m-open,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt:is([data-mood="think"], [data-mood="sleep"]) .m-o,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-mood="comfort"] .m-soft,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt:is([data-mood="cheer"], [data-mood="wow"], [data-mood="cool"]) .v-spark,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-mood="sleep"] .v-zzz,
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-crown="1"] .v-crown { display: inline; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt :is(.v-float, .v-jump, .v-wob, .eye-blink, .v-crown, .v-crest, .eyes-open) { transform-box: view-box; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt .v-float { animation: v-float 1.6s ease-in-out 3 alternate; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt .v-wob { transform-origin: 70px 72px; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt .v-crest { transform-origin: 70px 30px; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt:is([data-mood="cheer"], [data-mood="wow"], [data-mood="cool"]) .v-crest { animation: v-zap 500ms ease-in-out 3 alternate; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt .eyes-open { transition: transform 300ms var(--e-out); }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-mood="think"] .eyes-open { transform: translate(3px, -2px); }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt .eye-blink { transform-origin: 70px 72px; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt.is-blink .eye-blink { animation: v-blink 280ms ease-in-out 1; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt .v-crown { transform-origin: 70px 20px; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-crown="1"] .v-crown { animation: v-crown 600ms var(--e-out) both; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt .v-spark { animation: v-flick 220ms steps(2) 8; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt .v-zzz { animation: v-flick-slow 1.2s ease-in-out 3 alternate; }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt[data-mood="sleep"] { filter: drop-shadow(0 0 4px rgb(56 225 255 / .15)) saturate(.6) brightness(.85); }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt.is-hop .v-jump { animation: v-hop 620ms var(--e-out); }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt.is-hop .v-ground { animation: v-shadow 620ms var(--e-out); }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt.is-wobble .v-wob { animation: v-glitch 520ms steps(6); }
:is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt-face .v-float, :is(:root[data-theme="arkad"], [data-pv="arkad"]) .volt-face .eye-blink { animation: none; }
:root[data-theme="arkad"][data-motion="reduce"] .volt *, :root[data-motion="reduce"] [data-pv="arkad"] .volt * { animation: none !important; }

:root[data-theme="arkad"] .ark-mascot { position: relative; display: block; width: 100%; }
:root[data-theme="arkad"] .ark-say { display: block; width: max-content; max-width: 100%; margin: 6px auto 0; padding: 5px 10px; border: 1px solid rgb(56 225 255 / .55); border-radius: 12px 12px 12px 3px; background: var(--c-surface); box-shadow: 0 0 12px rgb(56 225 255 / .25); font: 700 .8125rem/1.25 var(--ff-ui); color: var(--c-text); text-align: center; }
:root[data-theme="arkad"] .hello-mascot { position: relative; }
:root[data-theme="arkad"] .hello-mascot .ark-say { position: absolute; right: 0; bottom: calc(100% - 4px); max-width: 10.625rem; margin: 0; border-radius: 12px 12px 3px 12px; }
@media (max-width: 37.49em) { :root[data-theme="arkad"] .hello-mascot .ark-say { display: none; } }
:root[data-theme="arkad"] .load-mascot .ark-mascot { width: 104px; margin: 0 auto; }
:root[data-theme="arkad"] .res-mascot .ark-mascot { width: 110px; margin: 0 auto; }
:root[data-theme="arkad"] .fb-icon.has-volt { position: relative; overflow: visible; background: var(--c-surface-2); border-radius: 50%; }
:root[data-theme="arkad"] .ark-fb-badge { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-correct); color: var(--c-on-correct); }
:root[data-theme="arkad"] .fb[data-result="wrong"] .ark-fb-badge { background: var(--c-wrong); color: var(--c-on-wrong); }
:root[data-theme="arkad"] .ark-fb-badge .ic { width: 12px; height: 12px; }

@keyframes v-float { from { transform: translateY(2px); } to { transform: translateY(-4px); } }
@keyframes v-blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.08); } }
@keyframes v-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-22px) scale(1.05); } 70% { transform: translateY(0) scale(.97, 1.03); } 100% { transform: none; } }
@keyframes v-shadow { 0%, 70%, 100% { transform: scale(1); } 40% { transform: scale(.6); opacity: .12; } }
@keyframes v-glitch { 0% { transform: none; } 20% { transform: translate(-4px, 1px); } 40% { transform: translate(3px, -1px) skewX(-6deg); } 60% { transform: translate(-2px, 0); } 80% { transform: translate(2px, 1px); } 100% { transform: none; } }
@keyframes v-zap { from { transform: scale(1); } to { transform: scale(1.15) rotate(-6deg); } }
@keyframes v-crown { from { transform: translateY(-20px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v-flick { from { opacity: .25; } to { opacity: 1; } }
@keyframes v-flick-slow { from { opacity: .4; } to { opacity: 1; } }
/* Volt i övningen (dator): överst i vänsterkolumnen, ovanför kombomätaren, så att den syns hela tiden */
@media (min-width: 62.5em) { :root[data-theme="arkad"] .play-left { display: flex; flex-direction: column; gap: 10px; } }
:root[data-theme="arkad"] .play-left .play-mascot { order: -2; width: 6.5rem; margin: 0 auto; }
:root[data-theme="arkad"] .play-left .play-bubble { order: -1; text-align: center; border-color: rgb(56 225 255 / .55); box-shadow: 0 0 12px rgb(56 225 255 / .25); font-weight: 700; }
:root[data-theme="arkad"][data-phase="question"] .play-mascot .volt :is(.v-float, .v-spark, .v-zzz, .v-crest, .eye-blink) { animation: none; }