/* Tema Godispop (DESIGN 1.9, 4.6, 6, 7, 11). Ljust lösgodis: vaniljglass, lakritskonturer, hårda läppar.
   Alla regler scopas till :root[data-theme="godispop"] (appen) eller [data-pv="godispop"] (temaväljaren).
   Godisbit-regeln: tryckbart = 3 px lakritskontur + läpp + inre tjocklek + glans. Kort = kontur + läpp, ingen glans. */

:root[data-theme="godispop"], [data-pv="godispop"] {
  color-scheme: light;
  --c-bg: #FFF6EA;
  --c-bg-deep: #FFEBD3;
  --c-surface: #FFFFFF;
  --c-surface-2: #FFFFFF;
  --c-surface-3: #FFEBD3;
  --c-hover: #FFF0F6;
  --c-line: #2A1838;
  --c-line-strong: #2A1838;
  --c-text: #2A1838;
  --c-text-2: #5E4B6E;
  --c-text-3: #5E4B6E;
  --c-primary: #FF4FA3;
  --c-on-primary: #2A1838;
  --c-correct: #3DDC97;
  --c-on-correct: #2A1838;
  --c-correct-soft: #DDFBEF;
  --c-correct-ink: #0B7A50;
  --c-wrong: #FF5C61;
  --c-on-wrong: #2A1838;
  --c-wrong-soft: #FFE4E4;
  --c-wrong-ink: #C42A30;
  --c-xp: #FFD13B;
  --c-combo: #FFD13B;
  --c-streak: #FF9233;
  --c-level: #FFD13B;
  --c-progress: #22C1F1;
  --c-progress-soft: #DDF6FE;
  --c-warn: #FFD13B;
  --c-warn-soft: #FFF4C7;
  --c-focus: #0A6FA8;
  --rgb-primary: 255 79 163;
  --rgb-combo: 255 209 59;
  --rgb-level: 255 209 59;
  --rgb-progress: 34 193 241;
  --rgb-streak: 255 146 51;
  --rgb-wrong: 255 92 97;
  --pink: #FF4FA3; --pink-100: #FFE1EF; --pink-300: #FF9CCB; --pink-700: #C8106C;
  --lemon: #FFD13B; --lemon-100: #FFF4C7; --lemon-300: #FFE58A;
  --mint: #3DDC97; --mint-100: #DDFBEF; --mint-300: #A3F0CD; --mint-700: #0B7A50;
  --blue: #22C1F1; --blue-100: #DDF6FE; --blue-300: #9BE3FA; --blue-700: #0A6FA8;
  --red: #FF5C61; --red-100: #FFE4E4; --red-700: #C42A30;
  --orange: #FF9233; --lilac: #C9A7FF;
  --ink: #2A1838; --ink-2: #5E4B6E; --ink-3: #A796B3;
  --edge-rgb: 255 209 59; --flash-rgb: 255 209 59;
  --lip: 5px; --thick: inset 0 -5px 0 rgb(42 24 56 / .16);

  --ff-display: "Bagel Fat One", "Lexend", ui-rounded, system-ui, sans-serif;
  --ff-read: "Lexend", ui-rounded, system-ui, sans-serif;
  --ff-ui: var(--ff-read);
  --ff-btn: var(--ff-read);
  /* Siffror i Lexend 800: Bagels nolla har nästan ingen innerform och blir en svart klump i små
     storlekar ("● / 100"). Bagel bara för stora siffror (resultatsiffran). */
  --ff-num: "Lexend", ui-rounded, system-ui, sans-serif;
  --fw-num: 800;
  --fs-q: clamp(1.4375rem, 1.15rem + 1.1vw, 2.125rem);
  --fw-q: 650;
  --lh-q: 1.28;
  --fs-opt: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fw-opt: 500;
  --lh-opt: 1.35;
  --fs-body: 1.0625rem;
  --lh-body: 1.5;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --fs-label: .8125rem;
  --label-transform: none;
  --label-spacing: 0;
  --fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-display: clamp(4.25rem, 3rem + 5vw, 6.5rem);
  --fs-callout: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);

  --r-card: 26px;
  --r-qcard: 34px;
  --r-opt: 20px;
  --r-btn: 999px;
  --r-chip: 999px;
  --r-key: 13px;
  --r-md: 20px;
  --bw-card: 3px;
  --bw-ui: 3px;
  --sh-card: 0 6px 0 #2A1838;
  --sh-btn: inset 0 -5px 0 rgb(42 24 56 / .16), 0 5px 0 #2A1838;
  --sh-btn-hover: inset 0 -5px 0 rgb(42 24 56 / .16), 0 7px 0 #2A1838;
  --sh-btn-press: inset 0 -3px 0 rgb(42 24 56 / .16), 0 1px 0 #2A1838;
  --press-transform: translateY(4px) scale(1.02, .95);
  --hover-transform: translateY(-2px);
  --focus-ring: 4px solid #0A6FA8;
  --focus-offset: 4px;
  --btn-h: 56px;
  --btn-h-lg: 64px;
  --btn-h-sm: 48px;
  --icon-btn: 48px;
  --opt-min-h: 66px;
  --opt-min-h-grid: 84px;
  --key-size: 42px;
  --hud-h: 64px;

  --d-press: 70ms;
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 420ms;
  --d-hero: 700ms;
  --e-out: cubic-bezier(.22,1,.36,1);
  --e-pop: cubic-bezier(.34,1.56,.64,1);
  --e-in: cubic-bezier(.55,0,1,.45);
  --e-std: cubic-bezier(.65,0,.35,1);
}

/* "Extra lättläst typsnitt": samma specificitet som temablocket räcker inte (temafilen laddas sist),
   så överskrivningen ligger här. Bara läsytorna byter typsnitt; knappar och etiketter behåller Lexend. */
:root[data-theme="godispop"][data-readfont="atkinson"] {
  --ff-read: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --ff-ui: "Lexend", ui-rounded, system-ui, sans-serif;
  --ff-btn: "Lexend", ui-rounded, system-ui, sans-serif;
  --fw-opt: 600;
  --fw-q: 700;
}

/* ------------------------------------------------------------------ Bakgrund och lager */
:root[data-theme="godispop"] .fx-bg { overflow: hidden; background: var(--c-bg); }
:root[data-theme="godispop"] .gp-glow { position: absolute; inset: 0; transition: opacity 420ms var(--e-out); background: radial-gradient(40vmax 40vmax at -6% -10%, rgb(255 79 163 / .16), transparent 62%), radial-gradient(36vmax 36vmax at 106% 8%, rgb(34 193 241 / .14), transparent 62%), radial-gradient(46vmax 46vmax at 100% 112%, rgb(255 209 59 / .22), transparent 62%), radial-gradient(36vmax 36vmax at -6% 104%, rgb(61 220 151 / .14), transparent 62%); }
:root[data-theme="godispop"] .gp-sprinkles { position: absolute; inset: 0; opacity: .55; transition: opacity 420ms var(--e-out); background-size: 240px 240px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg opacity='.55' stroke-linecap='round' stroke-width='5' fill='none'%3E%3Cpath d='M20 30l12-6' stroke='%23FFB3D7'/%3E%3Cpath d='M150 20l8 10' stroke='%23FFDF7A'/%3E%3Cpath d='M92 82l14 2' stroke='%2393EBC4'/%3E%3Cpath d='M206 104l-6 12' stroke='%238FDDF7'/%3E%3Cpath d='M40 146l10 8' stroke='%23FFDF7A'/%3E%3Cpath d='M124 168l12-6' stroke='%23FFB3D7'/%3E%3Cpath d='M214 206l-12 4' stroke='%2393EBC4'/%3E%3Cpath d='M70 218l4-12' stroke='%238FDDF7'/%3E%3C/g%3E%3Cg opacity='.5'%3E%3Ccircle cx='176' cy='62' r='3.5' fill='%23FFB3D7'/%3E%3Ccircle cx='30' cy='96' r='3' fill='%238FDDF7'/%3E%3Ccircle cx='104' cy='124' r='2.6' fill='%23FFDF7A'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="godispop"][data-screen="play"] .gp-sprinkles { opacity: 0; }
:root[data-theme="godispop"][data-screen="play"] .gp-glow { opacity: .5; }
:root[data-theme="godispop"] .fx-edge { box-shadow: inset 0 0 80px 10px rgb(var(--edge-rgb) / .55); will-change: opacity; }
:root[data-theme="godispop"] .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="godispop"] h1, :root[data-theme="godispop"] .screen-head h1 { font: 400 var(--fs-h1)/1.02 var(--ff-display); letter-spacing: .01em; }
:root[data-theme="godispop"] .section-head h2, :root[data-theme="godispop"] .set-group > h2, :root[data-theme="godispop"] .leitner h2, :root[data-theme="godispop"] .about h2, :root[data-theme="godispop"] .create-tips h2, :root[data-theme="godispop"] .ov-mastery h2, :root[data-theme="godispop"] .load-game-title, :root[data-theme="godispop"] .load-tips-title { font: 400 var(--fs-h2)/1.1 var(--ff-display); letter-spacing: .01em; }
:root[data-theme="godispop"] .section-meta { font-weight: 700; color: var(--ink-2); }
:root[data-theme="godispop"] .about h3 { font-weight: 800; }
:root[data-theme="godispop"] .label, :root[data-theme="godispop"] .q-count, :root[data-theme="godispop"] .load-kicker, :root[data-theme="godispop"] .res-kicker, :root[data-theme="godispop"] .share-kicker, :root[data-theme="godispop"] .fc-label, :root[data-theme="godispop"] .stat-title, :root[data-theme="godispop"] .xpbar-label { font-weight: 700; color: var(--ink-2); }

/* ------------------------------------------------------------------ Knappar = godisbitar */
:root[data-theme="godispop"] .btn { position: relative; border: 3px solid var(--ink); font-weight: 700; transition: transform var(--d-slow) var(--e-pop), background-color var(--d-fast); }
:root[data-theme="godispop"] .btn:active { transition-duration: var(--d-press); transition-timing-function: ease-out; }
:root[data-theme="godispop"] .btn-primary::before, :root[data-theme="godispop"] .btn-secondary::before, :root[data-theme="godispop"] .btn-review::before, :root[data-theme="godispop"] .cta-create::before, :root[data-theme="godispop"] .fc-knew::before { content: ""; position: absolute; left: 18px; top: 6px; width: min(36%, 84px); height: 7px; border-radius: 99px; background: rgb(255 255 255 / .6); pointer-events: none; }
:root[data-theme="godispop"] .btn-sm::before { left: 12px; top: 5px; height: 5px; }
/* Glansstrecket ligger 6–13 px (btn-sm 5–10 px) från knappens innerkant: texten börjar under det, också
   vid stor text eller en etikett på två rader (vid 100 % är knappen lika hög som förut). :where – lägre
   specificitet, så att komponenter med egen padding (t.ex. Översiktens knappar med ikonen över texten) vinner. */
:where(:root[data-theme="godispop"]) .btn { padding-top: 15px; padding-bottom: 15px; }
:where(:root[data-theme="godispop"]) .btn-sm { padding-top: 11px; padding-bottom: 11px; }
:root[data-theme="godispop"] .btn-secondary, :root[data-theme="godispop"] .btn-review, :root[data-theme="godispop"] .btn-danger { box-shadow: var(--sh-btn); }
:root[data-theme="godispop"] .btn-secondary { background: #fff; }
:root[data-theme="godispop"] .btn-review { background: var(--blue); color: var(--ink); }
:root[data-theme="godispop"] .btn-danger { background: #fff; color: var(--red-700); border-color: var(--ink); }
:root[data-theme="godispop"] .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
:root[data-theme="godispop"] .btn-ghost.btn-danger { color: var(--red-700); background: #fff; box-shadow: var(--sh-btn); }
@media (hover: hover) { :root[data-theme="godispop"] .btn-secondary:hover, :root[data-theme="godispop"] .btn-review:hover, :root[data-theme="godispop"] .btn-danger:hover { box-shadow: var(--sh-btn-hover); } :root[data-theme="godispop"] .btn-ghost:hover { background: rgb(255 255 255 / .6); } }
:root[data-theme="godispop"] .btn-secondary:active, :root[data-theme="godispop"] .btn-review:active, :root[data-theme="godispop"] .btn-danger:active { box-shadow: var(--sh-btn-press); }
:root[data-theme="godispop"] .btn-lg { font-size: 1.25rem; }
:root[data-theme="godispop"] .btn .kbd { border-width: 2px; border-radius: 7px; }
:root[data-theme="godispop"] .btn[aria-disabled="true"] { background: var(--c-bg-deep); box-shadow: 0 2px 0 var(--ink); }
:root[data-theme="godispop"] .icon-btn { position: relative; width: 48px; height: 48px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--ink); transition: transform var(--d-slow) var(--e-pop); }
@media (hover: hover) { :root[data-theme="godispop"] .icon-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); border-color: var(--ink); } }
:root[data-theme="godispop"] .icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); transition-duration: var(--d-press); }
/* Hover-lyftet: osynlig remsa under det hovrade elementet, så att pekaren vid underkanten inte tappar :hover
   när elementet lyfts 2 px (flimmer, se base.css vid .icon-btn) */
@media (hover: hover) { :root[data-theme="godispop"] :is(.btn, .icon-btn, .opt, .cta-create):hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; } }
:root[data-theme="godispop"] .icon-btn .ic { width: 26px; height: 26px; }
:root[data-theme="godispop"] .toast-close { box-shadow: none; border-color: transparent; background: transparent; }
:root[data-theme="godispop"] .tip-pause[aria-pressed="true"] { background: var(--lemon); }

:root[data-theme="godispop"] .chip { min-height: 40px; padding: 0 12px 0 8px; border: 3px solid var(--ink); background: #fff; box-shadow: 0 4px 0 var(--ink); font: 800 1.0625rem/1 var(--ff-num); font-variant-numeric: tabular-nums; }
:root[data-theme="godispop"] .chip .ic { width: 26px; height: 26px; }
:root[data-theme="godispop"] .fb-chips .chip { min-height: 32px; padding: 0 10px; box-shadow: 0 3px 0 var(--ink); font-size: 1rem; }
:root[data-theme="godispop"] .chip-xp, :root[data-theme="godispop"] .fb .chip-xp { background: var(--lemon); }
:root[data-theme="godispop"] .chip-combo { background: var(--pink-100); }
:root[data-theme="godispop"] .chip-level { background: var(--blue-100); }
:root[data-theme="godispop"] .chip-correct { background: var(--mint); }
:root[data-theme="godispop"] .appbar .chip-xp { background: #fff; }
:root[data-theme="godispop"] .chip-streak[data-active="false"] .ic { opacity: .45; }
:root[data-theme="godispop"] .pill { border: 2px solid var(--ink); background: var(--lemon-100); }
:root[data-theme="godispop"] .pill-retry { background: var(--blue-100); box-shadow: none; }
:root[data-theme="godispop"] .pill-new { background: var(--lemon); color: var(--ink); }
:root[data-theme="godispop"] .pill-opt { background: #fff; box-shadow: none; color: var(--ink); }
:root[data-theme="godispop"] .pill-mastered { background: var(--lemon); box-shadow: none; }
:root[data-theme="godispop"] .pill-mastered .ic { color: var(--ink); }
:root[data-theme="godispop"] .pill-extra { background: var(--pink-100); box-shadow: none; }
:root[data-theme="godispop"] .kbd { border: 2px solid currentColor; }

/* ------------------------------------------------------------------ Kort */
:root[data-theme="godispop"] .card { background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); }
:root[data-theme="godispop"] .create-tips { background: var(--lemon-100); }

/* ------------------------------------------------------------------ Appbar */
:root[data-theme="godispop"] .logo-mark { display: none; }
:root[data-theme="godispop"] .logo-word { font: 400 30px/1 var(--ff-display); color: var(--pink); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); text-transform: capitalize; letter-spacing: .01em; padding-bottom: 4px; }
:root[data-theme="godispop"] .appbar { min-height: calc(72px + env(safe-area-inset-top)); }
/* Kompakt appbar (app.js sätter data-fit när raden inte ryms): smalare chips, sedan märket i stället
   för logotexten. */
:root[data-theme="godispop"] .appbar[data-fit~="tight"] .chip { padding: 0 8px 0 4px; gap: 3px; }
:root[data-theme="godispop"] .appbar[data-fit~="tight"] .chip .ic { width: 22px; height: 22px; }
:root[data-theme="godispop"] .appbar[data-fit~="logo"] .logo-mark { display: block; width: 36px; height: 36px; }

/* ------------------------------------------------------------------ Nivå, staplar, ring, vecka */
:root[data-theme="godispop"] .level-badge { width: 3.5rem; height: 3.5rem; gap: 0; border: 3px solid var(--ink); border-radius: 18px; background: var(--lemon); box-shadow: 0 4px 0 var(--ink); transform: rotate(-6deg); }
:root[data-theme="godispop"] .level-badge-label { font: 700 var(--fs-xs)/1 var(--ff-ui); color: var(--ink); }
:root[data-theme="godispop"] .level-badge-num { font: 800 1.5rem/1 var(--ff-num); color: var(--ink); }
:root[data-theme="godispop"] .bar { height: 16px; border: 2.5px solid var(--ink); background: var(--c-bg); }
:root[data-theme="godispop"] .bar-fill { position: relative; overflow: hidden; border-radius: 0 99px 99px 0; }
:root[data-theme="godispop"] .bar-xp .bar-fill, :root[data-theme="godispop"] .bar-level .bar-fill, :root[data-theme="godispop"] .bar-load .bar-fill, :root[data-theme="godispop"] .bar-progress .bar-fill { background: repeating-linear-gradient(-45deg, #FF4FA3 0 9px, #FFC4E1 9px 18px); border-right: 2.5px solid var(--ink); }
:root[data-theme="godispop"] .bar-xp .bar-fill::before, :root[data-theme="godispop"] .bar-level .bar-fill::before, :root[data-theme="godispop"] .bar-load .bar-fill::before, :root[data-theme="godispop"] .bar-progress .bar-fill::before { content: ""; position: absolute; top: 0; bottom: 0; left: -26px; right: 0; background: inherit; border: 0; animation: gp-stripes 900ms linear 2; }
:root[data-theme="godispop"] .bar-xp .bar-fill::after, :root[data-theme="godispop"] .bar-level .bar-fill::after, :root[data-theme="godispop"] .bar-load .bar-fill::after { content: ""; position: absolute; left: 6px; right: 8px; top: 2px; height: 3px; border-radius: 9px; background: rgb(255 255 255 / .65); }
:root[data-theme="godispop"] .bar-level .bar-fill { background-image: repeating-linear-gradient(-45deg, #FFD13B 0 9px, #FFE58A 9px 18px); }
:root[data-theme="godispop"] .bar-mastery { overflow: hidden; }
:root[data-theme="godispop"] .bar-mastery .bar-fill { background: var(--mint); border-radius: 0; }
:root[data-theme="godispop"] .bar-mastery::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), rgb(42 24 56 / .35) calc(20% - 2px) 20%); pointer-events: none; }
:root[data-theme="godispop"] .bar-ghost { background: var(--mint-300); opacity: 1; }
:root[data-theme="godispop"] .ring { isolation: isolate; }
:root[data-theme="godispop"] .ring-svg { overflow: visible; }
:root[data-theme="godispop"] .ring-track { stroke: var(--c-bg); stroke-width: 8; }
:root[data-theme="godispop"] .ring-fill { stroke: var(--mint); stroke-width: 8; }
:root[data-theme="godispop"] .ring::before { content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: 50%; border: 2.5px solid var(--ink); pointer-events: none; }
:root[data-theme="godispop"] .ring-txt { inset: 7px; z-index: 1; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; }
:root[data-theme="godispop"] .ring::after { content: ""; position: absolute; left: 50%; top: calc(100% - 6px); width: 10px; height: 22px; margin-left: -5px; z-index: -1; border: 2.5px solid var(--ink); border-radius: 0 0 6px 6px; background: #fff; transform: scaleY(0); transform-origin: top; transition: transform 420ms var(--e-pop); }
:root[data-theme="godispop"] .ring[data-done="true"]::after { transform: scaleY(1); }
:root[data-theme="godispop"] .screen-result .res-goal .ring::after { transform: scaleY(0); }
:root[data-theme="godispop"] .screen-result .res-goal .ring.gp-lolly[data-done="true"]::after, :root[data-theme="godispop"] .screen-result[data-seq="done"] .res-goal .ring[data-done="true"]::after { transform: scaleY(1); }
:root[data-theme="godispop"] .ring-txt { font: 700 var(--fs-xs)/1 var(--ff-ui); letter-spacing: -.03em; }
:root[data-theme="godispop"] .week { gap: 4px; }
:root[data-theme="godispop"] .week li { border: 2px solid var(--ink); border-radius: 50%; background: var(--c-bg); color: var(--ink); font: 700 var(--fs-xs)/1 var(--ff-ui); }
:root[data-theme="godispop"] .week li[data-state="done"] { background: var(--orange); border-color: var(--ink); color: var(--ink); }
:root[data-theme="godispop"] .week li[data-state="today"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
:root[data-theme="godispop"] .week li[data-state="future"] { border-style: dashed; border-color: var(--ink-2); }
:root[data-theme="godispop"] .week li[data-state="missed"] { background: var(--c-bg-deep); }

/* ------------------------------------------------------------------ Monogram (godisformer) */
:root[data-theme="godispop"] .monogram { --fill: #FF4FA3; transform: rotate(var(--tilt, 0deg)); color: var(--ink); }
:root[data-theme="godispop"] .monogram[data-hue="1"] { --fill: #FFD13B; }
:root[data-theme="godispop"] .monogram[data-hue="2"] { --fill: #3DDC97; }
:root[data-theme="godispop"] .monogram[data-hue="3"] { --fill: #22C1F1; }
:root[data-theme="godispop"] .monogram[data-hue="4"] { --fill: #FF9233; }
:root[data-theme="godispop"] .monogram[data-hue="5"] { --fill: #C9A7FF; }
:root[data-theme="godispop"] .monogram-shape { fill: var(--fill); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
:root[data-theme="godispop"] .monogram-txt { font: 400 20px/1 var(--ff-display); letter-spacing: .02em; }
:root[data-theme="godispop"] .monogram-lg .monogram-txt { font-size: 30px; }
:root[data-theme="godispop"] .monogram[data-shape="0"] .monogram-txt { margin-top: 8px; }
:root[data-theme="godispop"] .monogram[data-shape="2"] .monogram-txt { margin-top: -2px; }
/* Stjärnan: initialerna är bredare än stjärnans inre femhörning och korsar konturen och de inre
   spetsarna. Mindre text i stjärnans optiska mitt (~26/48) och en vit kontur runt bokstäverna
   (klistermärke) som döljer lakritslinjerna där de korsas. Kuben: tätare spärrning för breda par (WW). */
:root[data-theme="godispop"] .monogram[data-shape="4"] .monogram-txt { margin-top: 3px; font-size: 14px; letter-spacing: -.01em; -webkit-text-stroke: 3.5px #fff; paint-order: stroke fill; }
:root[data-theme="godispop"] .monogram-lg[data-shape="4"] .monogram-txt { margin-top: 5px; font-size: 21px; -webkit-text-stroke: 5px #fff; }
:root[data-theme="godispop"] .monogram[data-shape="3"] .monogram-txt { font-size: 19px; letter-spacing: -.03em; }
:root[data-theme="godispop"] .monogram-lg[data-shape="3"] .monogram-txt { font-size: 28px; }
:root[data-theme="godispop"] .monogram-wait { border: 3px dashed var(--ink-2); border-radius: 16px; background: #fff; transform: none; }

/* ------------------------------------------------------------------ Märken (godisskivor) */
:root[data-theme="godispop"] .badge { --d: #FFD13B; }
:root[data-theme="godispop"] .badge[data-badge="first-round"], :root[data-theme="godispop"] .badge[data-badge="correct-100"], :root[data-theme="godispop"] .badge[data-badge="daily-goal"] { --d: #3DDC97; }
:root[data-theme="godispop"] .badge[data-badge="streak-3"] { --d: #FF9233; }
:root[data-theme="godispop"] .badge[data-badge="streak-7"], :root[data-theme="godispop"] .badge[data-badge="combo-5"], :root[data-theme="godispop"] .badge[data-badge="cards-50"] { --d: #FF4FA3; }
:root[data-theme="godispop"] .badge[data-badge="streak-30"] { --d: #FF5C61; }
:root[data-theme="godispop"] .badge[data-badge="comeback"], :root[data-theme="godispop"] .badge[data-badge="goal-7"], :root[data-theme="godispop"] .badge[data-badge="teamplayer"] { --d: #22C1F1; }
:root[data-theme="godispop"] .badge-medal { position: relative; overflow: hidden; width: 64px; height: 64px; border: 3px solid var(--ink); border-radius: 50%; background: var(--d); color: var(--ink); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 5px rgb(255 255 255 / .55); }
:root[data-theme="godispop"] .badge[data-badge="combo-10"] .badge-medal { background: var(--ink); color: var(--lemon); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 4px var(--lemon); }
:root[data-theme="godispop"] .badge-medal .ic { width: 34px; height: 34px; }
:root[data-theme="godispop"] .badge-medal::before { content: ""; position: absolute; left: 13px; top: 10px; width: 12px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / .85); transform: rotate(-30deg); }
:root[data-theme="godispop"] .badge[data-earned="false"] .badge-medal { background: var(--c-bg); border: 3px dashed var(--ink-2); box-shadow: none; color: var(--ink-3); }
:root[data-theme="godispop"] .badge[data-earned="false"] .badge-medal::before { display: none; }
:root[data-theme="godispop"] .badge[data-new="true"] .badge-medal::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / .85) 50%, transparent 62%); transform: translateX(-120%); animation: gp-shine 1s var(--e-std) .3s 1; }
:root[data-theme="godispop"] .badge .pill-new { top: -6px; right: 4px; transform: rotate(4deg); box-shadow: 0 2px 0 var(--ink); }
:root[data-theme="godispop"] .badge-name { font-weight: 700; font-size: var(--fs-xs); }
:root[data-theme="godispop"] .badge.gp-flip { animation: gp-flip 750ms var(--e-pop) 1 both; }

/* ------------------------------------------------------------------ Gelle (kap. 7) */
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .g-ground { fill: var(--ink); opacity: .14; transform-box: view-box; transform-origin: 70px 129px; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle :is(.eyes, .mouth, .g-spark, .g-crown, .g-zzz) { display: none; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle:is([data-mood="idle"], [data-mood="wave"], [data-mood="think"]) .eyes-open,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle:is([data-mood="happy"], [data-mood="cheer"]) .eyes-happy,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-mood="wow"] .eyes-star,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-mood="cool"] .eyes-cool,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-mood="comfort"] .eyes-sad,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-mood="sleep"] .eyes-closed,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle:is([data-mood="idle"], [data-mood="cool"]) .m-smile,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle:is([data-mood="wave"], [data-mood="happy"], [data-mood="cheer"], [data-mood="wow"]) .m-open,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle:is([data-mood="think"], [data-mood="sleep"]) .m-o,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-mood="comfort"] .m-soft,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle:is([data-mood="cheer"], [data-mood="wow"], [data-mood="cool"]) .g-spark,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-mood="sleep"] .g-zzz,
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-crown="1"] .g-crown { display: inline; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle :is(.g-bob, .g-jump, .g-wob, .g-squash, .g-arm, .eye-blink, .g-crown, .eyes-open, .m-o, .g-zzz) { transform-box: view-box; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .g-bob { animation: g-bob 1.5s ease-in-out 3 alternate; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle :is(.g-squash, .g-wob) { transform-origin: 70px 126px; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .g-arm { transition: transform 380ms var(--e-pop); }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .g-arm-l { transform-origin: 27px 84px; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .g-arm-r { transform-origin: 113px 84px; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle:is([data-mood="happy"], [data-mood="cheer"], [data-mood="wow"]) .g-arm-l { transform: rotate(118deg); }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle:is([data-mood="happy"], [data-mood="cheer"], [data-mood="wow"]) .g-arm-r { transform: rotate(-118deg); }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-mood="wave"] .g-arm-r { animation: g-wave 450ms ease-in-out 6 alternate; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .eyes-open { transition: transform 300ms var(--e-out); }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-mood="think"] .eyes-open { transform: translate(2px, -4px); }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-mood="sleep"] .m-o { transform-origin: 70px 94px; transform: scale(.7); }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .eye-blink { transform-origin: 70px 75px; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle.is-blink .eye-blink { animation: g-blink 300ms ease-in-out 1; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .g-crown { transform-origin: 70px 26px; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle[data-crown="1"] .g-crown { animation: crown-in 600ms var(--e-pop) both; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .g-spark { animation: g-spark 1s ease-in-out 3 alternate; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle .g-zzz { animation: g-spark 1.2s ease-in-out 3 alternate; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle.is-hop .g-jump { animation: g-hop 660ms var(--e-out); }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle.is-hop .g-squash { animation: g-squash 660ms ease-in-out; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle.is-hop .g-ground { animation: g-shadow 660ms var(--e-out); }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle.is-wobble .g-wob { animation: g-wobble 620ms ease-in-out; }
:is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle-face .g-bob, :is(:root[data-theme="godispop"], [data-pv="godispop"]) .gelle-face .eye-blink { animation: none; }
:root[data-theme="godispop"][data-motion="reduce"] .gelle *, :root[data-motion="reduce"] [data-pv="godispop"] .gelle * { animation: none !important; }
/* Fokusläge: Gelle i vänsterkolumnen är helt stilla medan frågan läses (ingen gungning, gnista eller blinkning) */
:root[data-theme="godispop"][data-phase="question"] .play-mascot .gelle :is(.g-bob, .g-spark, .g-zzz, .eye-blink, .g-arm, .g-jump, .g-squash, .g-wob, .g-ground) { animation: none; }

/* Maskot-slots */
:root[data-theme="godispop"] .gp-mascot { position: relative; display: block; width: 100%; }
:root[data-theme="godispop"] .gp-say { display: block; width: max-content; max-width: 100%; margin: 6px auto 0; padding: 5px 10px; border: 2.5px solid var(--ink); border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 3px 0 var(--ink); font: 700 .8125rem/1.25 var(--ff-read); color: var(--ink); text-align: center; }
:root[data-theme="godispop"] .gp-say.gp-say-in { animation: gp-pop 450ms var(--e-pop) 1; }
:root[data-theme="godispop"] .hello-mascot { max-width: 118px; align-self: flex-end; margin: -6px -4px -10px auto; }
:root[data-theme="godispop"] .hello-mascot .gp-say { position: absolute; right: 0; bottom: calc(100% - 6px); max-width: 10.625rem; width: max-content; margin: 0; transform: rotate(3deg); border-radius: 14px 14px 4px 14px; }
:root[data-theme="godispop"] .hello-mascot .gp-say { animation: gp-say3 450ms var(--e-pop) 500ms 1 both; }
@media (max-width: 37.49em) { :root[data-theme="godispop"] .hello-mascot .gp-say { display: none; } }
@media (min-width: 62.5em) { :root[data-theme="godispop"] .hello-mascot { max-width: 140px; } }
/* Laddar: Gelle i en kvadratisk ruta (--d) som orbiten fyller, bildtexten bredvid. Godisbitarna
   kretsar alltså bara runt Gelle och sveper aldrig över repliken, och raden är låg nog för att
   minispelet ska synas på en mobil. */
:root[data-theme="godispop"] .load-mascot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; justify-self: center; max-width: 100%; padding: 0; }
:root[data-theme="godispop"] .load-mascot .gp-mascot { --g: 84px; --d: 132px; position: relative; display: grid; place-items: center; flex: none; width: var(--d); height: var(--d); margin: 0; }
:root[data-theme="godispop"] .load-mascot .gp-mascot > svg.gelle { width: var(--g); }
:root[data-theme="godispop"] .gp-say-load { flex: 0 1 13em; min-width: 7em; max-width: 13em; margin: 0; font-size: .9375rem; text-align: left; }
@media (min-width: 37.5em) { :root[data-theme="godispop"] .load-mascot .gp-mascot { --g: 100px; --d: 152px; } }
:root[data-theme="godispop"] .gp-orbit { position: absolute; inset: 0; animation: gp-orbit 2.4s linear infinite; pointer-events: none; }
:root[data-theme="godispop"] .gp-orb { position: absolute; width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 50%; background: var(--c); box-shadow: inset -4px -4px 0 rgb(42 24 56 / .15); }
:root[data-theme="godispop"] .gp-orb::after { content: ""; position: absolute; left: 4px; top: 3px; width: 7px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / .8); }
/* Tre bitar 120° isär på en cirkel med radien (d − 26 px) / 2: 0,866 r = 0,433 (d − 26), 0,5 r = 0,25 (d − 26) */
:root[data-theme="godispop"] .gp-orb-0 { left: calc(50% - 13px); top: 0; }
:root[data-theme="godispop"] .gp-orb-1 { left: calc(50% - 13px - .433 * (var(--d) - 26px)); top: calc(50% - 13px + .25 * (var(--d) - 26px)); }
:root[data-theme="godispop"] .gp-orb-2 { left: calc(50% - 13px + .433 * (var(--d) - 26px)); top: calc(50% - 13px + .25 * (var(--d) - 26px)); }
:root[data-theme="godispop"][data-motion="reduce"] .gp-orbit { animation: none; }
:root[data-theme="godispop"] .load-error-mascot { width: 96px; }
:root[data-theme="godispop"] .load-error-mascot .gp-say { width: max-content; max-width: min(15rem, 100%); margin-top: 8px; }
:root[data-theme="godispop"] .load-error-mascot { width: auto; }
:root[data-theme="godispop"] .load-error-mascot .gp-mascot { width: 96px; margin: 0 auto; }
:root[data-theme="godispop"] .play-mascot { width: 10rem; margin: 0 auto; padding-top: 34px; }
:root[data-theme="godispop"] .play-bubble { position: relative; padding: 9px 13px; border: 3px solid var(--ink); border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 3px 0 var(--ink); font: 700 .9375rem/1.3 var(--ff-read); text-align: center; }
:root[data-theme="godispop"] .play-bubble.gp-bubble-in { animation: gp-pop 450ms var(--e-pop) 1; }
:root[data-theme="godispop"] .empty-art { width: 8.75rem; }
:root[data-theme="godispop"] .empty-art .gp-mascot { width: min(120px, 100%); margin: 0 auto; }
:root[data-theme="godispop"] .gp-empty-candy .ic { width: 90px; height: 90px; color: var(--pink); margin: 0 auto; }
:root[data-theme="godispop"] .share-mascot .gp-mascot { width: 96px; margin: 0 auto; }

/* ------------------------------------------------------------------ Hem (3.2) */
:root[data-theme="godispop"] .hello { position: relative; min-height: 150px; padding: 18px 12px 14px 20px; overflow: visible; border: 3px solid var(--ink); border-radius: 34px; box-shadow: 0 6px 0 var(--ink); background: repeating-linear-gradient(45deg, #FFD13B 0 14px, #FFE58A 14px 28px); }
:root[data-theme="godispop"] .hello-title { font: 400 var(--fs-h1)/1 var(--ff-display); letter-spacing: .01em; }
:root[data-theme="godispop"] .hello-sub { color: var(--ink); font-weight: 600; max-width: 26ch; }
@media (min-width: 62.5em) { :root[data-theme="godispop"] .hello { min-height: 200px; padding: 24px 12px 18px 22px; } :root[data-theme="godispop"] .hello-title { font-size: 2.125rem; } }
:root[data-theme="godispop"] .hello-text { min-width: 0; }
:root[data-theme="godispop"] .hello-title { overflow-wrap: break-word; }
:root[data-theme="godispop"] .profile-stats { --ps-gap: 12px; }
:root[data-theme="godispop"] .stat { border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--ink); background: #fff; }
:root[data-theme="godispop"] .stat-num { font: 800 1.75rem/1 var(--ff-num); }
:root[data-theme="godispop"] .stat-streak > .ic { width: 32px; height: 32px; }
:root[data-theme="godispop"] .stat-goal .ring { width: 3.875rem; height: 3.875rem; margin-bottom: 16px; }
:root[data-theme="godispop"] .xpbar-val { font: 800 1rem/1 var(--ff-num); }
:root[data-theme="godispop"] .xpbar-hint { color: var(--ink-2); font-weight: 600; }
:root[data-theme="godispop"] .cta-create { position: relative; min-height: 80px; padding: 14px 20px 14px 16px; border: 3px solid var(--ink); border-radius: 28px; background: var(--pink); color: var(--ink); box-shadow: var(--sh-btn); transition: transform var(--d-slow) var(--e-pop); }
:root[data-theme="godispop"] .cta-create:active { box-shadow: var(--sh-btn-press); transition-duration: var(--d-press); }
:root[data-theme="godispop"] .cta-icon { width: 52px; height: 52px; border: 3px solid var(--ink); border-radius: 18px; background: var(--lemon); color: var(--ink); box-shadow: 0 3px 0 var(--ink); transform: rotate(-6deg); }
:root[data-theme="godispop"] .cta-title { font: 400 1.625rem/1 var(--ff-display); letter-spacing: .01em; }
:root[data-theme="godispop"] .cta-sub { font-weight: 600; }
@media (min-width: 62.5em) { :root[data-theme="godispop"] .cta-create { min-height: 96px; } }
:root[data-theme="godispop"] .due { background: var(--blue-100); }
:root[data-theme="godispop"] .due-icon { width: 48px; height: 48px; border: 3px solid var(--ink); border-radius: 16px; background: var(--blue); color: var(--ink); }
:root[data-theme="godispop"] .due-title { font-weight: 800; }
:root[data-theme="godispop"] .due-sub { color: var(--ink-2); font-weight: 500; }
:root[data-theme="godispop"] .quiz-list { gap: 16px; }
:root[data-theme="godispop"] .quiz-link { position: relative; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 5px 0 var(--ink); background: #fff; transition: transform var(--d-slow) var(--e-pop); }
@media (hover: hover) { :root[data-theme="godispop"] .quiz-link:hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: 0 7px 0 var(--ink); background: #fff; border-color: var(--ink); } }
:root[data-theme="godispop"] .quiz-link:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
:root[data-theme="godispop"] .quiz-link > .due-pill, :root[data-theme="godispop"] .quiz-link > .pill { position: absolute; grid-area: auto; top: -13px; right: 16px; z-index: 1; transform: rotate(4deg); box-shadow: 0 2px 0 var(--ink); }
:root[data-theme="godispop"] .quiz-link:has(> .pill, > .due-pill) .quiz-body { grid-row: 1 / span 2; }
:root[data-theme="godispop"] .due-pill { border: 2px solid var(--ink); background: var(--blue); padding: 3px 10px; font-weight: 800; }
:root[data-theme="godispop"] .quiz-title { font-weight: 700; }
:root[data-theme="godispop"] .quiz-meta { font-size: var(--fs-xs); font-weight: 500; }
:root[data-theme="godispop"] .mastery .bar { height: 14px; max-width: 150px; }
:root[data-theme="godispop"] .mastery-val { font-weight: 800; color: var(--ink); font-size: var(--fs-sm); }
:root[data-theme="godispop"] .quiz-link .ic-chevron { color: var(--ink); }
:root[data-theme="godispop"] .quiz-item[data-state="creating"] .quiz-link { border-style: dashed; box-shadow: none; }
:root[data-theme="godispop"] .home-foot { color: var(--ink-2); font-weight: 500; }
:root[data-theme="godispop"] .badge-wall { gap: 18px 8px; }

/* Hem: godisbitarna poppar in i följd (en gång per skärmbyte) */
:root[data-theme="godispop"] .screen-home :is(.hello, .profile, .cta-create, .due, .quiz-item, .badges, .empty-home) { animation: gp-rise 520ms var(--e-pop) backwards; }
:root[data-theme="godispop"] .screen-home .profile { animation-delay: 50ms; }
:root[data-theme="godispop"] .screen-home .cta-create { animation-delay: 100ms; }
:root[data-theme="godispop"] .screen-home .due { animation-delay: 150ms; }
:root[data-theme="godispop"] .screen-home .quiz-item:nth-child(1) { animation-delay: 190ms; }
:root[data-theme="godispop"] .screen-home .quiz-item:nth-child(2) { animation-delay: 230ms; }
:root[data-theme="godispop"] .screen-home .quiz-item:nth-child(3) { animation-delay: 270ms; }
:root[data-theme="godispop"] .screen-home .quiz-item:nth-child(n+4) { animation-delay: 310ms; }
:root[data-theme="godispop"] .screen-home .badges { animation-delay: 200ms; }

/* ------------------------------------------------------------------ Skapa (3.3) */
:root[data-theme="godispop"] .field-label { font-weight: 800; }
:root[data-theme="godispop"] .textarea, :root[data-theme="godispop"] .input { border: 3px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: inset 0 3px 0 rgb(42 24 56 / .06); }
:root[data-theme="godispop"] .warn-callout { background: var(--lemon-100); border: 3px solid var(--ink); border-radius: 20px; }
:root[data-theme="godispop"] .counter .bar { height: 12px; }
:root[data-theme="godispop"] .counter .bar::after { background: var(--ink); }
:root[data-theme="godispop"] .counter .bar-fill { background: var(--pink-300); }
:root[data-theme="godispop"] .counter[data-state="ok"] .bar-fill { background: var(--mint); }
:root[data-theme="godispop"] .counter[data-state="long"] .bar-fill { background: var(--red); }
:root[data-theme="godispop"] .quota { border: 3px solid var(--ink); border-radius: 20px; background: #fff; }
:root[data-theme="godispop"] .quota[data-state="hour-full"], :root[data-theme="godispop"] .quota[data-state="day-full"], :root[data-theme="godispop"] .quota[data-state="cap-full"], :root[data-theme="godispop"] .quota[data-state="low"] { background: var(--lemon-100); border-color: var(--ink); }
:root[data-theme="godispop"] .quota-icon .ic { width: 28px; height: 28px; }
:root[data-theme="godispop"] .form-error { border: 3px solid var(--ink); border-radius: 18px; background: var(--red-100); }

/* ------------------------------------------------------------------ Laddar (3.4, 6.7) */
:root[data-theme="godispop"] .load-title { font: 400 var(--fs-h2)/1.1 var(--ff-display); }
:root[data-theme="godispop"] .bar-load { height: 26px; margin: 4px 0; border-width: 3px; overflow: hidden; }
:root[data-theme="godispop"] .bar-load .bar-fill { border-right-width: 3px; }
:root[data-theme="godispop"] .screen-load:is([data-load="working"], [data-load="pending"], [data-load="queued"], [data-load="slow"]) .bar-load .bar-fill::before { animation: gp-stripes 900ms linear infinite; }
:root[data-theme="godispop"] .load-runner { display: none; }
:root[data-theme="godispop"] .load-steps { gap: 6px; }
:root[data-theme="godispop"] .load-step { min-height: 36px; gap: 12px; color: var(--ink-2); }
@media (max-width: 37.49em) {
  :root[data-theme="godispop"] .load-steps { gap: 2px; }
  :root[data-theme="godispop"] .load-step { min-height: 32px; }
  :root[data-theme="godispop"] .load-step-mark { width: 26px; height: 26px; }
}
:root[data-theme="godispop"] .load-step-mark { width: 30px; height: 30px; border: 2.5px dashed var(--ink-2); background: #fff; }
:root[data-theme="godispop"] .load-step-mark .ic { width: 18px; height: 18px; color: var(--ink); animation: gp-spin-in 400ms var(--e-pop) 1; }
:root[data-theme="godispop"] .load-step[data-state="active"] { color: var(--ink); }
:root[data-theme="godispop"] .load-step[data-state="active"] .load-step-mark { border: 2.5px solid var(--ink); background: var(--lemon); animation: gp-breathe 1s ease-in-out 4 alternate; }
:root[data-theme="godispop"] .load-step[data-state="done"] { color: var(--ink); }
:root[data-theme="godispop"] .load-step[data-state="done"] .load-step-mark { border: 2.5px solid var(--ink); background: var(--mint); color: var(--ink); }
:root[data-theme="godispop"] .load-time { font-weight: 700; color: var(--ink); }
:root[data-theme="godispop"] .load-status { border: 3px solid var(--ink); border-radius: 18px; background: var(--blue-100); }
:root[data-theme="godispop"] .load-game { background: var(--blue-100); }
:root[data-theme="godispop"] .load-tips { background: var(--lemon-100); }
:root[data-theme="godispop"] .load-tips-title .ic { color: var(--lemon); }
:root[data-theme="godispop"] .load-tip { font-weight: 600; }
:root[data-theme="godispop"] .load-done { background: var(--mint-100); }
:root[data-theme="godispop"] .load-done-title { font: 400 var(--fs-h1)/1 var(--ff-display); }
:root[data-theme="godispop"] .load-bonus { display: inline-block; padding: 5px 12px; border: 2px solid var(--ink); border-radius: 99px; background: var(--lemon); font: 400 1.0625rem/1 var(--ff-display); transform: rotate(-3deg); }
:root[data-theme="godispop"] .load-error-title { font-family: var(--ff-display); font-weight: 400; }
:root[data-theme="godispop"] .screen-load[data-load="error"] .bar-fill { background: var(--red); }
/* Poppa godiset */
:root[data-theme="godispop"] .pop-field { position: relative; height: clamp(180px, 30vh, 260px); overflow: hidden; border: 3px solid var(--ink); border-radius: 20px; background: #fff repeating-linear-gradient(0deg, transparent 0 22px, rgb(34 193 241 / .1) 22px 23px); touch-action: manipulation; }
:root[data-theme="godispop"] .pop-candy { position: absolute; top: 100%; width: 56px; height: 56px; padding: 0; border: 0; background: transparent; color: var(--c); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:root[data-theme="godispop"] .pop-candy.is-still { top: auto; margin: -28px 0 0 -28px; }
:root[data-theme="godispop"] .pop-candy-in { display: block; width: 100%; height: 100%; transform: rotate(var(--r, 0deg)); }
:root[data-theme="godispop"] .pop-candy .ic { width: 100%; height: 100%; }
:root[data-theme="godispop"] .pop-plus { position: absolute; font: 800 1.25rem/1 var(--ff-num); color: var(--ink); pointer-events: none; }
:root[data-theme="godispop"] .pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
:root[data-theme="godispop"] .pop-count { font-weight: 700; font-size: var(--fs-sm); }
:root[data-theme="godispop"] .pop-count b { font: 800 1.5rem/1 var(--ff-num); margin-right: 4px; }
:root[data-theme="godispop"] .pop-bonus { display: inline-block; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 99px; background: var(--lemon); box-shadow: 0 3px 0 var(--ink); font: 400 1.0625rem/1 var(--ff-display); transform: rotate(-3deg); }
:root[data-theme="godispop"] .pop-help { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
/* Smal mobil (360 × 740): hela minispelet med räknaren ryms ovanför vecket. Gelle och fältet blir lite
   mindre och stegen tätare (står efter stegens grundregler, så att de vinner). */
@media (max-width: 24.99em) {
  :root[data-theme="godispop"] .load-mascot .gp-mascot { --g: 70px; --d: 104px; }
  :root[data-theme="godispop"] .load-step { min-height: 28px; }
  :root[data-theme="godispop"] .load-step-mark { width: 26px; height: 26px; }
  :root[data-theme="godispop"] .load-game .section-head { margin-bottom: 8px; }
  :root[data-theme="godispop"] .pop-field { height: clamp(180px, 24vh, 260px); }
}

/* ------------------------------------------------------------------ Översikt + Leitner (godisburkar) */
:root[data-theme="godispop"] .ov-meta { color: var(--ink-2); font-weight: 500; }
:root[data-theme="godispop"] .ov-mastery-row .mastery-val { font: 800 1.375rem/1 var(--ff-num); }
:root[data-theme="godispop"] .ov-mastery .bar { height: 18px; }
:root[data-theme="godispop"] .leitner-boxes { --lt-gap: 6px; }
:root[data-theme="godispop"] .lt-stack { position: relative; justify-content: flex-start; width: 100%; max-width: 46px; height: 146px; padding: 6px 4px; gap: 1px; border: 3px solid var(--ink); border-radius: 12px 12px 14px 14px; background: rgb(255 255 255 / .9); box-shadow: 0 4px 0 var(--ink); }
:root[data-theme="godispop"] .lt-stack::before { content: ""; position: absolute; left: 6px; right: 6px; top: -9px; height: 7px; border: 3px solid var(--ink); border-radius: 6px; background: var(--pink-100); }
:root[data-theme="godispop"] .lt-dot { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--b, var(--blue)); }
:root[data-theme="godispop"] .lt-box[data-box="0"] .lt-dot { background: #fff; border: 2px dashed var(--ink-2); }
:root[data-theme="godispop"] .lt-box:is([data-box="1"], [data-box="2"]) { --b: #22C1F1; }
:root[data-theme="godispop"] .lt-box:is([data-box="3"], [data-box="4"]) { --b: #3DDC97; }
:root[data-theme="godispop"] .lt-box[data-box="5"] { --b: #FFD13B; }
:root[data-theme="godispop"] .lt-box[data-box="5"] .lt-dot { background: var(--b); }
:root[data-theme="godispop"] .lt-dot[data-due="true"] { outline: 2.5px solid var(--blue-700); outline-offset: 1px; }
:root[data-theme="godispop"] .lt-count { font: 800 1.125rem/1 var(--ff-num); margin-top: 4px; }
:root[data-theme="godispop"] .lt-label { font: 700 var(--fs-xs)/1 var(--ff-read); color: var(--ink-2); }
:root[data-theme="godispop"] .ov-q-label { color: var(--mint-700); }
:root[data-theme="godispop"] .ov-qlist summary { font-weight: 800; }

/* ------------------------------------------------------------------ Öva: HUD */
:root[data-theme="godispop"] .hud { background: var(--c-bg); border-bottom: 3px solid var(--ink); }
:root[data-theme="godispop"] .hud .icon-btn { width: 44px; height: 44px; border-radius: 14px; box-shadow: 0 3px 0 var(--ink); }
:root[data-theme="godispop"] { --pip-gap: 3px; --pip-pad: 2px; }
:root[data-theme="godispop"] .pips { position: relative; align-items: center; justify-content: space-between; }
:root[data-theme="godispop"] .pips::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--ink-3); border-radius: 1px; }
:root[data-theme="godispop"] .pip { position: relative; flex: 1 1 0; max-width: 14px; height: auto; aspect-ratio: 1; border-radius: 50%; border: var(--pip-bw, 2px) dashed var(--ink-2); background: var(--c-bg); }
:root[data-theme="godispop"] .pip[data-state="current"] { border: var(--pip-bw-cur, 3px) solid var(--ink); background: #fff; }
:root[data-theme="godispop"] .pip[data-state="correct"] { border: var(--pip-bw, 2px) solid var(--ink); background: var(--pink); }
:root[data-theme="godispop"] .pip[data-state="correct"]:nth-child(4n + 2) { background: var(--lemon); }
:root[data-theme="godispop"] .pip[data-state="correct"]:nth-child(4n + 3) { background: var(--mint); }
:root[data-theme="godispop"] .pip[data-state="correct"]:nth-child(4n) { background: var(--blue); }
:root[data-theme="godispop"] .pip[data-state="wrong"] { border: var(--pip-bw, 2px) solid var(--ink); background: linear-gradient(45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%), var(--red-100); }
:root[data-theme="godispop"] .pip[data-retry="true"][data-state="todo"] { background: var(--c-bg); border: var(--pip-bw, 2px) dashed var(--ink); box-shadow: none; }
:root[data-theme="godispop"] .pip.gp-pop { animation: gp-pip 420ms var(--e-pop) 1; }
:root[data-theme="godispop"] .hud-combo, :root[data-theme="godispop"] .hud-xp { min-height: 42px; padding: 0 10px 0 6px; gap: 3px; border: 3px solid var(--ink); border-radius: 99px; background: #fff; box-shadow: 0 4px 0 var(--ink); transition: background-color var(--d-base); }
:root[data-theme="godispop"] .hud-combo .ic, :root[data-theme="godispop"] .hud-xp .ic { width: 28px; height: 28px; }
:root[data-theme="godispop"] .hud-combo .ic { color: var(--ink-3); }
:root[data-theme="godispop"] .combo-num, :root[data-theme="godispop"] .hud-xp-num { font: 800 1.125rem/1 var(--ff-num); }
:root[data-theme="godispop"] .hud-combo .combo-num::before { content: "×"; font-size: .85em; }
:root[data-theme="godispop"] .hud-xp-label { display: none; }
:root[data-theme="godispop"] .combo-label { font-weight: 700; color: var(--ink-2); }
:root[data-theme="godispop"] .combo-mult { font-weight: 700; color: var(--ink); }
:root[data-theme="godispop"] .screen-play[data-combo-tier="1"] .hud-combo { background: var(--lemon-100); }
:root[data-theme="godispop"] .screen-play:not([data-combo-tier="0"]) .hud-combo .ic { color: var(--pink); }
:root[data-theme="godispop"] .screen-play[data-combo-tier="2"] .hud-combo { background: linear-gradient(90deg, var(--pink-300), var(--lemon-300), var(--mint-300), var(--blue-300)); }
:root[data-theme="godispop"] .screen-play[data-combo-tier="3"] .hud-combo { background: var(--ink); color: var(--lemon); box-shadow: 0 4px 0 var(--ink), 0 0 0 4px var(--lemon); }
:root[data-theme="godispop"] .screen-play[data-combo-tier="3"] .hud-combo .combo-label, :root[data-theme="godispop"] .screen-play[data-combo-tier="3"] .hud-combo .combo-mult { color: var(--lemon); }
:root[data-theme="godispop"] .screen-play[data-combo-tier="3"] .hud-combo .ic { color: var(--lemon); }
:root[data-theme="godispop"] .hud-combo.gp-deflate { animation: gp-deflate 500ms var(--e-out) 1; }
:root[data-theme="godispop"] .hud-combo.gp-bump, :root[data-theme="godispop"] .hud-xp.gp-bump, :root[data-theme="godispop"] .level-badge.gp-bump, :root[data-theme="godispop"] .week li.gp-bump { animation: gp-bump 500ms var(--e-pop) 1; }
@media (min-width: 62.5em) { :root[data-theme="godispop"] .hud-combo { display: inline-flex; } :root[data-theme="godispop"] .combo-v { display: none; } }
@media (max-width: 37.49em) { :root[data-theme="godispop"] .hud-row { gap: 8px; } :root[data-theme="godispop"] .hud-combo .ic, :root[data-theme="godispop"] .hud-xp .ic { width: 24px; height: 24px; } :root[data-theme="godispop"] .hud-combo, :root[data-theme="godispop"] .hud-xp { padding: 0 8px 0 4px; min-height: 40px; } }
/* Mycket smal HUD (stor text på smal mobil, base.css hudrow): mindre chips, så att prickarna får plats */
@container hudrow (max-width: 12em) {
  :root[data-theme="godispop"] .hud-combo, :root[data-theme="godispop"] .hud-xp { padding: 0 6px 0 2px; gap: 1px; }
  :root[data-theme="godispop"] .hud-combo .ic, :root[data-theme="godispop"] .hud-xp .ic { width: 20px; height: 20px; }
  :root[data-theme="godispop"] .hud .combo-num, :root[data-theme="godispop"] .hud .hud-xp-num { font-size: 1rem; }
}
/* Callout: Bagel-stämpel, ingen platta */
:root[data-theme="godispop"] .callout { --callout-tf: rotate(-3deg); --callout-in: 1.6; --callout-in-ms: 600; --callout-ease: cubic-bezier(.34,1.56,.64,1); display: flex; align-items: center; justify-content: center; height: calc(var(--hud-h) - 10px); padding: 0 12px; transform: rotate(-3deg); }
:root[data-theme="godispop"] .callout-big { font: 400 var(--fs-callout)/1 var(--ff-display); color: var(--pink); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); letter-spacing: .01em; white-space: nowrap; }
:root[data-theme="godispop"] .callout[data-tone="gold"] .callout-big { color: var(--lemon); padding: 6px 16px 8px; border-radius: 99px; background: var(--ink); -webkit-text-stroke: 0; text-shadow: none; box-shadow: 0 0 0 3px var(--lemon); }
:root[data-theme="godispop"] .callout[data-tone="goal"] .callout-big { color: var(--mint); }
:root[data-theme="godispop"] .callout-sub { display: none; }
:root[data-theme="godispop"] .hud-callout { background: transparent; }
:root[data-theme="godispop"] .hud-callout:not(:empty) { background: var(--c-bg); }
:root[data-theme="godispop"] .hud-pops { inset: 0; top: 0; right: auto; left: 0; width: 100%; height: 100%; overflow: visible; }
:root[data-theme="godispop"] .hud-pop { position: absolute; z-index: 2; padding: 4px 10px; border: 3px solid var(--ink); border-radius: 99px; background: var(--lemon); box-shadow: 0 3px 0 var(--ink); font: 800 1rem/1 var(--ff-num); color: var(--ink); white-space: nowrap; pointer-events: none; }
:root[data-theme="godispop"] .hud-pop[data-tone="goal"] { background: var(--mint); }

/* ------------------------------------------------------------------ Öva: frågekort, alternativ, feedback */
:root[data-theme="godispop"] .q-stage { padding: 22px 16px 18px; gap: 14px; border: 3px solid var(--ink); border-radius: 34px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
:root[data-theme="godispop"] .q-card { padding: 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root[data-theme="godispop"] .q-meta { margin-bottom: 10px; }
:root[data-theme="godispop"] .q-count { padding: 3px 10px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; color: var(--ink); font-size: var(--fs-xs); }
:root[data-theme="godispop"] .q-quiz { padding: 3px 10px; border: 2px solid var(--ink); border-radius: 99px; background: var(--pink-100); color: var(--ink); font-weight: 700; font-size: var(--fs-xs); margin-left: 0; }
:root[data-theme="godispop"] .q-text { letter-spacing: -.005em; text-wrap: pretty; }
:root[data-theme="godispop"] .opts { gap: 16px; }
:root[data-theme="godispop"] .opts[data-layout="grid"] { gap: 18px; }
:root[data-theme="godispop"] .opt { position: relative; padding: var(--opt-pad-top) 16px 10px 12px; border: 3px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 5px 0 var(--ink); transition: transform var(--d-slow) var(--e-pop), background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast), opacity 150ms linear; }
@media (hover: hover) { :root[data-theme="godispop"] .opt:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); background: var(--c-hover); border-color: var(--ink); } }
:root[data-theme="godispop"] .opt:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); transition-duration: var(--d-press); }
:root[data-theme="godispop"] .opt { grid-template-columns: var(--key-size) minmax(0, 1fr) auto; }
:root[data-theme="godispop"] .opt-mark { grid-column: 3; grid-row: 1; }
:root[data-theme="godispop"] .opt-key { border: 2.5px solid var(--ink); border-radius: 13px; background: var(--c-bg); font: 400 1.25rem/1 var(--ff-display); color: var(--ink); transition: background-color var(--d-fast); }
/* Taggen (top −12 px, höjd fs-xs × 1,35 + 6 px padding + 4 px kant) sticker ned fs-xs × 1,35 − 2 px i
   alternativet. Luften ovanför texten följer taggens höjd i rem, så att taggen aldrig når ned i första
   radens bokstäver – inte heller när eleven ökat webbläsarens teckenstorlek (DESIGN 3.6.5). Vid 16 px
   blir det 14 px som förut: kant 3 + 14 = 17 px mot taggens 15,5 px. */
:root[data-theme="godispop"] .opt { --opt-pad-top: calc(var(--fs-xs) * 1.35 - 3.5px); }
:root[data-theme="godispop"] .opt-tag { position: absolute; top: -12px; right: 14px; z-index: 2; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 99px; background: var(--ink); color: #fff; font: 700 var(--fs-xs)/1.35 var(--ff-read); transform: rotate(3deg); transform-origin: right center; box-shadow: 0 2px 0 var(--ink); }
:root[data-theme="godispop"] .opt-mark .ic { width: 26px; height: 26px; }
/* Smalt alternativ med bokstavsrutan ovanför texten (base.css): bocken/krysset bredvid rutan, så att
   klistermärket uppe till höger inte täcker den */
@container opts (max-width: 15em) { :root[data-theme="godispop"] .opts[data-layout] .opt-mark { grid-column: 2; justify-self: start; } }
:root[data-theme="godispop"] .opt[data-state="correct"], :root[data-theme="godispop"] .opt[data-state="reveal"] { background: var(--mint-100); border-color: var(--ink); }
:root[data-theme="godispop"] .opt[data-state="correct"] .opt-key, :root[data-theme="godispop"] .opt[data-state="reveal"] .opt-key { background: var(--mint); border-color: var(--ink); color: var(--ink); }
:root[data-theme="godispop"] .opt[data-state="correct"] .opt-key { animation: gp-keypop 420ms var(--e-pop) 1; }
:root[data-theme="godispop"] .opt[data-state="correct"] .opt-tag, :root[data-theme="godispop"] .opt[data-state="reveal"] .opt-tag { background: var(--mint); color: var(--ink); animation: gp-tag 360ms var(--e-pop) 1 both; }
:root[data-theme="godispop"] .opt[data-state="correct"] .opt-mark, :root[data-theme="godispop"] .opt[data-state="reveal"] .opt-mark { color: var(--mint-700); }
:root[data-theme="godispop"] .opt[data-state="correct"] .opt-mark .ic, :root[data-theme="godispop"] .opt[data-state="reveal"] .opt-mark .ic, :root[data-theme="godispop"] .opt[data-state="wrong"] .opt-mark .ic { animation: gp-spin-in 450ms var(--e-pop) 1 both; }
:root[data-theme="godispop"] .opt[data-state="wrong"] { background: var(--red-100); border-color: var(--ink); }
:root[data-theme="godispop"] .opt[data-state="wrong"] .opt-key { background: var(--red); border-color: var(--ink); color: var(--ink); animation: gp-key-wiggle 440ms var(--e-std) 1; }
:root[data-theme="godispop"] .opt[data-state="wrong"] .opt-tag { background: var(--red); color: var(--ink); animation: gp-tag 360ms var(--e-pop) 1 both; }
:root[data-theme="godispop"] .opt[data-state="wrong"] .opt-mark { color: var(--red-700); }
:root[data-theme="godispop"] .opt[data-state="dim"], :root[data-theme="godispop"] .opt[data-state="dim"]:disabled, :root[data-theme="godispop"] .opt[data-state="dim"][aria-disabled="true"] { background: var(--c-bg); color: var(--ink-2); border-color: var(--ink-2); box-shadow: 0 2px 0 var(--ink-2); }
:root[data-theme="godispop"] .opt[data-state="dim"] .opt-key { border-color: var(--ink-2); background: var(--c-bg-deep); color: var(--ink-2); }
:root[data-theme="godispop"] .fb { padding: 16px; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); }
:root[data-theme="godispop"] .fb[data-result="correct"] { background: var(--mint-100); border-color: var(--ink); }
:root[data-theme="godispop"] .fb[data-result="wrong"] { background: var(--red-100); border-color: var(--ink); }
:root[data-theme="godispop"] .fb-icon { position: relative; width: 46px; height: 46px; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); background: var(--mint); color: var(--ink); overflow: visible; }
:root[data-theme="godispop"] .fb[data-result="wrong"] .fb-icon { background: var(--red); color: var(--ink); }
:root[data-theme="godispop"] .fb-icon.has-gelle { background: var(--pink-100); overflow: visible; }
:root[data-theme="godispop"] .fb-icon .gelle-face { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; clip-path: circle(50%); }
:root[data-theme="godispop"] .gp-fb-badge { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 22px; height: 22px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--mint); }
:root[data-theme="godispop"] .fb[data-result="wrong"] .gp-fb-badge { background: var(--red); }
:root[data-theme="godispop"] .gp-fb-badge .ic { width: 14px; height: 14px; color: var(--ink); }
:root[data-theme="godispop"] .fb-title { font: 400 1.75rem/1.05 var(--ff-display); letter-spacing: .01em; }
:root[data-theme="godispop"] .fb-why-label { color: var(--ink); font-weight: 800; }
:root[data-theme="godispop"] .fb-note { color: var(--ink-2); font-weight: 700; }
:root[data-theme="godispop"] .fb-note .ic { color: var(--blue-700); }
:root[data-theme="godispop"] .fb[data-result="wrong"] .fb-next { background: var(--lemon); }
:root[data-theme="godispop"] .play-alert { border: 3px solid var(--ink); border-radius: 18px; }
@media (min-width: 62.5em) { :root[data-theme="godispop"] .q-stage { padding: 30px 30px 26px; } }
@media (max-width: 37.49em) {
  /* gap 14 px: klistermärket på första alternativet (top −12 px) når inte upp i frågans sista rad */
  :root[data-theme="godispop"] .q-stage { padding: 12px 10px 12px; gap: 14px; border-radius: 26px; }
  :root[data-theme="godispop"] .opts { gap: 16px; }
  :root[data-theme="godispop"] .q-meta { margin-bottom: 6px; }
  :root[data-theme="godispop"] .opt { padding: var(--opt-pad-top) 10px 7px 8px; gap: 10px; }
  :root[data-theme="godispop"] .fb { padding: 10px 12px 12px; gap: 6px; }
  :root[data-theme="godispop"] .fb-icon { width: 40px; height: 40px; }
  :root[data-theme="godispop"] .fb-title { font-size: 1.3125rem; }
  :root[data-theme="godispop"] .fb-chips .chip { min-height: 28px; padding: 0 8px; font-size: .875rem; box-shadow: 0 2px 0 var(--ink); border-width: 2.5px; }
  :root[data-theme="godispop"] .fb-note { font-size: .8125rem; line-height: 1.3; }
  :root[data-theme="godispop"] .fb-why { line-height: 1.42; }
  :root[data-theme="godispop"] .q-stage:has(.opts[data-collapsed="true"]) { padding-top: 10px; padding-bottom: 10px; }
}

/* Smal skärm i förhållande till textstorleken (base.css, under 15em): mindre inre marginaler */
@media (max-width: 15em) {
  :root[data-theme="godispop"] .q-stage { padding-left: 6px; padding-right: 6px; }
  :root[data-theme="godispop"] .q-card { padding: 0 2px; }
  :root[data-theme="godispop"] .fb { padding-left: 10px; padding-right: 10px; }
  :root[data-theme="godispop"] .hello { padding: 14px 10px 12px 14px; }
}

/* ------------------------------------------------------------------ Öva: desktop-kolumner */
:root[data-theme="godispop"] .round-title { font: 400 1.25rem/1.1 var(--ff-display); color: var(--ink); }
:root[data-theme="godispop"] .round-stats dt { font-weight: 700; color: var(--ink-2); }
:root[data-theme="godispop"] .round-stats dd { font: 800 1.5rem/1.1 var(--ff-num); }
:root[data-theme="godispop"] .collect { position: relative; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 16px 12px 12px; margin-top: 14px; border: 3px solid var(--ink); border-radius: 12px 12px 28px 28px; background: var(--pink-100); box-shadow: 0 4px 0 var(--ink); }
:root[data-theme="godispop"] .collect::before { content: ""; position: absolute; left: 50%; top: -14px; width: 26px; height: 14px; margin-left: -13px; border: 3px solid var(--ink); border-radius: 50% 50% 3px 3px; background: var(--pink); }
:root[data-theme="godispop"] .collect-slot { border-radius: 50%; border: 2.5px dashed var(--ink-2); background: rgb(255 255 255 / .7); }
:root[data-theme="godispop"] .collect-slot[data-state="earned"] { border: 2.5px solid var(--ink); background: var(--pink); box-shadow: inset -3px -3px 0 rgb(42 24 56 / .15); animation: gp-drop 420ms var(--e-pop) 1; }
:root[data-theme="godispop"] .collect-slot[data-state="earned"]:nth-child(4n + 2) { background: var(--lemon); }
:root[data-theme="godispop"] .collect-slot[data-state="earned"]:nth-child(4n + 3) { background: var(--mint); }
:root[data-theme="godispop"] .collect-slot[data-state="earned"]:nth-child(4n) { background: var(--orange); }
:root[data-theme="godispop"] .collect-slot[data-state="revenge"] { border: 2.5px solid var(--ink); background: var(--blue); animation: gp-drop 420ms var(--e-pop) 1; }
:root[data-theme="godispop"] .collect-slot[data-state="missed"] { border: 2.5px dashed var(--red-700); background: var(--red-100); box-shadow: none; }

/* ------------------------------------------------------------------ Resultat (3.7) */
:root[data-theme="godispop"] .res-hero { position: relative; isolation: isolate; grid-template-columns: auto auto; justify-content: center; column-gap: 8px; }
:root[data-theme="godispop"] .res-hero > * { grid-column: 1 / -1; }
/* Gelle bredvid poängsiffran. Slotten är display: contents, så att Gelle och pratbubblan blir egna rutor i
   hjältens grid: bubblan på en egen rad överst över båda kolumnerna, i flödet – den tar plats och kan aldrig
   lägga sig över rubriken "Runda klar · …" eller Hoppa över, och på breda skärmar ryms den på en rad. */
:root[data-theme="godispop"] .res-mascot { display: contents; }
:root[data-theme="godispop"] .res-mascot > .gp-mascot { grid-column: 1; grid-row: 1; width: 112px; align-self: center; }
:root[data-theme="godispop"] .res-hero > .res-mascot:not(:empty) + .res-score { grid-column: 2; grid-row: 1; }
:root[data-theme="godispop"] .res-mascot > .gp-say { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: fit-content; max-width: 100%; margin: 0 0 2px; transform: rotate(-3deg); } /* fit-content: annars tvingar bubblans bredd kolumnerna bredare än kortet */
:root[data-theme="godispop"] .res-mascot:has(> .gp-say) > .gp-mascot, :root[data-theme="godispop"] .res-hero > .res-mascot:has(> .gp-say) + .res-score { grid-row: 2; }
:root[data-theme="godispop"] .gp-rays { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgb(255 209 59 / .55) 0 9deg, transparent 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); transform: rotate(20deg); }
:root[data-theme="godispop"] .gp-rays.is-spin { animation: gp-rays 2s var(--e-out) 1 both; }
:root[data-theme="godispop"] .res-ring { display: none; }
:root[data-theme="godispop"] .res-score { width: auto; aspect-ratio: auto; min-width: 140px; padding: 6px 0; }
:root[data-theme="godispop"] .res-score-num { font: 400 var(--fs-display)/.9 var(--ff-display); color: var(--pink); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
:root[data-theme="godispop"] .res-score-of { font-weight: 800; font-size: 1.125rem; color: var(--ink); margin-top: 6px; }
:root[data-theme="godispop"] .res-stamp { padding: 8px 26px; border: 3px solid var(--ink); border-radius: 0; background: var(--lemon); color: var(--ink); font: 400 1.375rem/1 var(--ff-display); text-transform: none; letter-spacing: .02em; box-shadow: 0 4px 0 var(--ink); transform: rotate(-3deg); clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); }
:root[data-theme="godispop"] .res-title { font: 400 var(--fs-h1)/1.02 var(--ff-display); }
:root[data-theme="godispop"] .res-sub { color: var(--ink-2); font-weight: 500; }
:root[data-theme="godispop"] .collect-res { max-width: 260px; margin-top: 18px; }
:root[data-theme="godispop"] .res-xp-row .num, :root[data-theme="godispop"] .res-xp-total .num { font-family: var(--ff-num); font-weight: 800; }
:root[data-theme="godispop"] .res-xp-row { padding: 2px 4px; }
:root[data-theme="godispop"] .res-xp-total { border-top: 3px dashed var(--ink); font-size: 1.25rem; }
:root[data-theme="godispop"] .res-xp-total .num { display: inline-block; padding: 4px 12px; border: 2.5px solid var(--ink); border-radius: 99px; background: var(--lemon); box-shadow: 0 3px 0 var(--ink); }
:root[data-theme="godispop"] .res-side { background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); overflow: visible; }
:root[data-theme="godispop"] .res-row { position: relative; border-top: 3px dashed rgb(42 24 56 / .2); }
:root[data-theme="godispop"] .res-side > .res-row:first-child { border-top: 0; }
:root[data-theme="godispop"] .res-row > .ic { width: 36px; height: 36px; transform-origin: 50% 90%; }
:root[data-theme="godispop"] .res-row > .ic.gp-flame { animation: gp-flame 600ms var(--e-pop) 1; }
:root[data-theme="godispop"] .res-row .level-badge { width: 3.125rem; height: 3.125rem; }
:root[data-theme="godispop"] .res-row .level-badge-num { font-size: 1.5rem; }
:root[data-theme="godispop"] .res-row .ring { width: 2.875rem; height: 2.875rem; margin-bottom: 10px; }
:root[data-theme="godispop"] .res-row .ring-txt { inset: 5px; }
:root[data-theme="godispop"] .res-row-title { font-weight: 800; }
:root[data-theme="godispop"] .res-flag { position: absolute; right: 10px; top: -14px; z-index: 2; padding: 0; border: 0; background: transparent; color: var(--pink); font: 400 1.5rem/1 var(--ff-display); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); transform: rotate(7deg); white-space: nowrap; }
:root[data-theme="godispop"] .res-streak .res-flag { color: var(--orange); position: static; transform: rotate(-4deg); font-size: 1.125rem; -webkit-text-stroke: 2px var(--ink); }
:root[data-theme="godispop"] .res-mastery .bar { height: 18px; }
@media (min-width: 62.5em) {
  :root[data-theme="godispop"] .res-actions { margin-bottom: 10px; } /* "Nivå upp!"-flaggan (top −14 px) når inte upp i knapparna */
  :root[data-theme="godispop"] .res-side { background: transparent; border: 0; box-shadow: none; }
  :root[data-theme="godispop"] .res-row { border: 3px solid var(--ink); border-radius: 26px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
  :root[data-theme="godispop"] .res-side > .res-row:first-child { border-top: 3px solid var(--ink); }
  :root[data-theme="godispop"] .res-mascot > .gp-mascot { width: 140px; }
}
@media (min-width: 62.5em) and (max-height: 820px) {
  :root[data-theme="godispop"] .res-mascot > .gp-mascot { width: 108px; }
  :root[data-theme="godispop"] .res-score-num { font-size: 4.25rem; }
  :root[data-theme="godispop"] .collect-res { margin-top: 6px; }
}

/* ------------------------------------------------------------------ Flashcards, delad länk, inställningar, toasts, dialoger */
:root[data-theme="godispop"] .fc-face { border: 3px solid var(--ink); border-radius: 34px; box-shadow: 0 6px 0 var(--ink); background: #fff; }
:root[data-theme="godispop"] .fc-back { background: var(--mint-100); border-color: var(--ink); }
:root[data-theme="godispop"] .fc-label { padding: 3px 12px; border: 2px solid var(--ink); border-radius: 99px; background: var(--pink-100); color: var(--ink); }
:root[data-theme="godispop"] .fc-back .fc-label { background: var(--mint); }
:root[data-theme="godispop"] .fc-a { font-weight: 800; }
:root[data-theme="godispop"] .fc-count { font-weight: 700; color: var(--ink); }
:root[data-theme="godispop"] .fc-knew { background: var(--mint); }
:root[data-theme="godispop"] .fc-done h2 { font: 400 var(--fs-h2)/1.15 var(--ff-display); }
:root[data-theme="godispop"] .share-preview { border: 3px solid var(--ink); border-radius: 20px; background: var(--c-bg); }
:root[data-theme="godispop"] .share-added { color: var(--mint-700); font: 400 1.5rem/1 var(--ff-display); }
:root[data-theme="godispop"] .share-note .ic { color: var(--ink); }
:root[data-theme="godispop"] .skeleton { background: var(--c-bg-deep); }
:root[data-theme="godispop"] .set-row { border-top: 3px dashed rgb(42 24 56 / .15); }
:root[data-theme="godispop"] .set-label { font-weight: 800; }
:root[data-theme="godispop"] .switch-track { border: 3px solid var(--ink); background: var(--c-bg); }
:root[data-theme="godispop"] .switch-thumb { width: 22px; height: 22px; border: 2.5px solid var(--ink); background: #fff; }
:root[data-theme="godispop"] .switch-input:checked + .switch-track { background: var(--mint); border-color: var(--ink); }
:root[data-theme="godispop"] .switch-input:checked + .switch-track .switch-thumb { background: #fff; transform: translateX(20px); }
:root[data-theme="godispop"] .segmented { border: 3px solid var(--ink); background: var(--c-bg); padding: 3px; border-radius: 30px; } /* pille på en rad, rundad ruta när segmenten staplas */
:root[data-theme="godispop"] .segmented button { font-weight: 800; }
:root[data-theme="godispop"] .segmented button[aria-checked="true"] { background: var(--lemon); box-shadow: 0 0 0 2.5px var(--ink); }
:root[data-theme="godispop"] .set-msg { color: var(--mint-700); }
:root[data-theme="godispop"] .about-version { color: var(--ink-2); font-weight: 600; }
:root[data-theme="godispop"] .tp-options--compact .tp-option { border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
:root[data-theme="godispop"] .tp-options--compact .tp-option[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--blue); }
:root[data-theme="godispop"] .toast { border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--ink); }
:root[data-theme="godispop"] .toast > .ic { width: 28px; height: 28px; }
:root[data-theme="godispop"] .dialog { border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); background: #fff; }
:root[data-theme="godispop"] .dialog::backdrop { background: rgb(42 24 56 / .45); }
:root[data-theme="godispop"] .dialog-title { font: 400 var(--fs-h2)/1.15 var(--ff-display); }
:root[data-theme="godispop"] .storage-warn, :root[data-theme="godispop"] .offline-bar { border-color: var(--ink); }
:root[data-theme="godispop"] .empty-title { font-weight: 400; }

/* ------------------------------------------------------------------ Temaväljaren: Godispop-kortet och förhandsvisningen (2.2, 2.3) */
[data-pv="godispop"] .tp-name { font: 400 1.875rem/1.1 var(--ff-display); color: var(--pink); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); letter-spacing: .01em; }
[data-pv="godispop"] .tp-tags { font: 600 .9375rem/1.4 var(--ff-read); color: var(--ink-2); }
[data-pv="godispop"] .tp-cta { position: relative; margin-bottom: 5px; padding-top: 15px; padding-bottom: 15px; border: 3px solid var(--ink); background: var(--pink); color: var(--ink); font-family: var(--ff-read); border-radius: 999px; box-shadow: inset 0 -5px 0 rgb(42 24 56 / .16), 0 5px 0 var(--ink); }
[data-pv="godispop"] .tp-cta::before { content: ""; position: absolute; left: 18px; top: 6px; width: 30%; height: 7px; border-radius: 99px; background: rgb(255 255 255 / .6); }
[data-pv="godispop"] .tp-meta { background: #fff; border-top: 3px solid var(--ink); }
[data-pv="godispop"] .tp-preview { background: var(--c-bg); }
[data-pv="godispop"] .pv-scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; gap: 8px 6px; height: 100%; padding: 12px 14px; overflow: hidden; background: radial-gradient(30rem 16rem at -10% -20%, rgb(255 79 163 / .16), transparent 60%), radial-gradient(30rem 16rem at 110% 120%, rgb(255 209 59 / .24), transparent 60%), var(--c-bg); }
[data-pv="godispop"] .pv-hud { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
[data-pv="godispop"] .pv-pips { position: relative; display: flex; justify-content: space-between; gap: 4px; flex: 1; min-width: 0; padding: 0 2px; }
[data-pv="godispop"] .pv-pips::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: var(--ink-3); }
[data-pv="godispop"] .pv-pip { position: relative; width: 13px; height: 13px; border-radius: 50%; border: 2px dashed var(--ink-2); background: var(--c-bg); }
[data-pv="godispop"] .pv-pip[data-state="done"] { background: var(--c); border: 2px solid var(--ink); }
[data-pv="godispop"] .pv-pip[data-state="current"] { border: 3px solid var(--ink); background: #fff; }
[data-pv="godispop"] .pv-combo, [data-pv="godispop"] .pv-xp { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 9px 0 4px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; box-shadow: 0 3px 0 var(--ink); font: 800 14px/1 var(--ff-num); color: var(--ink); transition: background-color 200ms; }
[data-pv="godispop"] .pv-combo .ic, [data-pv="godispop"] .pv-xp .ic { width: 22px; height: 22px; }
[data-pv="godispop"] .pv-combo .ic { color: var(--ink-3); }
[data-pv="godispop"] .pv-combo.is-hot { background: var(--lemon-100); }
[data-pv="godispop"] .pv-combo.is-hot .ic { color: var(--pink); }
[data-pv="godispop"] .pv-gelle { grid-column: 2; grid-row: 2; align-self: end; width: 64px; margin: 0 0 -4px; }
[data-pv="godispop"] .pv-q { grid-column: 1; grid-row: 2; display: grid; gap: 10px; padding: 10px 10px 12px; border: 2.5px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 4px 0 var(--ink); }
[data-pv="godispop"] .pv-q-text { font: 650 15px/1.28 var(--ff-read); color: var(--ink); padding: 0 2px; }
[data-pv="godispop"] .pv-opt { position: relative; display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 4px 10px 4px 5px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--ink); font: 500 14px/1.2 var(--ff-read); color: var(--ink); transition: background-color 160ms; }
[data-pv="godispop"] .pv-opt.is-on { background: var(--mint-100); }
[data-pv="godispop"] .pv-key { position: relative; display: grid; place-items: center; width: 27px; height: 27px; flex: none; border: 2px solid var(--ink); border-radius: 9px; background: var(--c-bg); font: 400 14px/1 var(--ff-display); }
[data-pv="godispop"] .pv-opt.is-on .pv-key { background: var(--mint); }
[data-pv="godispop"] .pv-chk { position: absolute; inset: 0; display: none; place-items: center; }
[data-pv="godispop"] .pv-chk .ic { width: 18px; height: 18px; color: var(--ink); }
[data-pv="godispop"] .pv-opt.is-on .pv-chk { display: grid; }
[data-pv="godispop"] .pv-opt.is-on .pv-letter { visibility: hidden; }
[data-pv="godispop"] .pv-txt { flex: 1; }
[data-pv="godispop"] .pv-tag { position: absolute; top: -10px; right: 10px; display: none; padding: 1px 8px; border: 2px solid var(--ink); border-radius: 99px; background: var(--mint); font: 700 11px/1.35 var(--ff-read); transform: rotate(3deg); transform-origin: right center; }
[data-pv="godispop"] .pv-opt.is-on .pv-tag { display: block; }
[data-pv="godispop"] .pv-sparks { position: absolute; inset: 0; pointer-events: none; }
[data-pv="godispop"] .pv-sparks i { position: absolute; left: 0; top: 0; width: 11px; height: 4px; margin: -2px 0 0 -5px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--c); opacity: 0; }
[data-pv="godispop"] .pv-sparks i.is-dot { width: 7px; height: 7px; border-radius: 50%; }

/* ------------------------------------------------------------------ Keyframes (gp-*, Gelle g-*) */
@keyframes gp-stripes { from { transform: translateX(0); } to { transform: translateX(25.46px); } }
@keyframes gp-shine { to { transform: translateX(120%); } }
@keyframes gp-flip { 0% { opacity: 0; transform: perspective(700px) rotateY(-100deg) scale(.8); } 60% { opacity: 1; transform: perspective(700px) rotateY(14deg) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes gp-bump { 0% { transform: scale(1); } 30% { transform: scale(1.28) rotate(-6deg); } 60% { transform: scale(.94) rotate(2deg); } 100% { transform: scale(1); } }
@keyframes gp-deflate { 0% { transform: scale(1); } 35% { transform: scale(.78, .9); } 70% { transform: scale(1.06, .98); } 100% { transform: scale(1); } }
@keyframes gp-pip { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes gp-keypop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: none; } }
@keyframes gp-spin-in { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes gp-key-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-5deg); } }
@keyframes gp-tag { 0% { transform: rotate(3deg) scale(1.3); opacity: 0; } 100% { transform: rotate(3deg) scale(1); opacity: 1; } }
@keyframes gp-drop { 0% { transform: translateY(-40px); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes gp-flame { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-8deg); } 60% { transform: scale(1.2) rotate(5deg); } 100% { transform: scale(1); } }
@keyframes gp-rays { from { transform: rotate(-40deg) scale(.6); opacity: 0; } 25% { opacity: 1; } to { transform: rotate(20deg) scale(1); opacity: 1; } }
@keyframes gp-orbit { to { transform: rotate(360deg); } }
@keyframes gp-breathe { to { transform: scale(1.15); } }
@keyframes gp-say3 { 0% { opacity: 0; transform: rotate(3deg) scale(.6) translateY(8px); } 100% { opacity: 1; transform: rotate(3deg); } }
@keyframes gp-rise { 0% { opacity: 0; transform: translateY(16px) scale(.95); } }
@keyframes gp-pop { 0% { opacity: 0; transform: scale(.6) translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes g-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes g-blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.08); } }
@keyframes g-wave { from { transform: rotate(-100deg); } to { transform: rotate(-148deg); } }
@keyframes g-hop { 0% { transform: translateY(0); } 15% { transform: translateY(2px); } 45% { transform: translateY(-24px); } 70% { transform: translateY(0); } 83% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
@keyframes g-squash { 0% { transform: scale(1, 1); } 15% { transform: scale(1.13, .86); } 40% { transform: scale(.9, 1.12); } 70% { transform: scale(1.15, .85); } 85% { transform: scale(.97, 1.04); } 100% { transform: scale(1, 1); } }
@keyframes g-shadow { 0%, 70%, 100% { transform: scale(1); } 45% { transform: scale(.62); opacity: .08; } }
@keyframes g-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(2deg); } }
@keyframes crown-in { from { transform: translateY(-30px) scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes g-spark { from { opacity: .4; } to { opacity: 1; } }

/* ---------------------------------------------------------------- Nya pluggsätt och uppladdning (DESIGN 3.3b, 3.5b, 3.6b–c) */
:root[data-theme="godispop"] .mode { border: 3px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 4px 0 var(--ink); }
@media (hover: hover) { :root[data-theme="godispop"] a.mode:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); background: var(--c-hover); border-color: var(--ink); } }
:root[data-theme="godispop"] a.mode:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
:root[data-theme="godispop"] .mode-icon { border: 2.5px solid var(--ink); border-radius: 14px; background: var(--lemon-100, #FFF4C7); }
:root[data-theme="godispop"] .mode[data-mode="cards"] .mode-icon { background: var(--blue-100, #DDF6FE); }
:root[data-theme="godispop"] .mode[data-mode="concepts"] .mode-icon { background: var(--lemon-100, #FFF4C7); }
:root[data-theme="godispop"] .mode[data-mode="match"] .mode-icon { background: var(--pink-100, #FFE1F0); }
:root[data-theme="godispop"] .mode[data-mode="cloze"] .mode-icon { background: var(--mint-100); }
:root[data-theme="godispop"] .mode-title { font-family: var(--ff-display); font-weight: 400; font-size: 1.25rem; }
:root[data-theme="godispop"] .mode.is-off { border: 3px dashed var(--ink-2, var(--ink)); background: var(--c-bg); box-shadow: none; }
:root[data-theme="godispop"] .mode.is-off .mode-icon { background: var(--c-bg-deep); border-color: var(--ink-2, var(--ink)); }
:root[data-theme="godispop"] .mode-new { border: 2px solid var(--ink); border-radius: 99px; background: var(--pink); color: var(--ink); transform: rotate(-3deg); box-shadow: 0 2px 0 var(--ink); }

:root[data-theme="godispop"] .tile { position: relative; border: 3px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 0 5px 0 var(--ink); transition: transform var(--d-slow) var(--e-pop), background-color var(--d-fast), border-color var(--d-fast), box-shadow var(--d-fast), opacity 150ms linear; }
@media (hover: hover) { :root[data-theme="godispop"] .tile:not([aria-disabled="true"]):not([data-locked]):hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); background: var(--c-hover); border-color: var(--ink); } }
:root[data-theme="godispop"] .tile:not([aria-disabled="true"]):not([data-locked]):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); transition-duration: var(--d-press); }
:root[data-theme="godispop"] .tile-key { border: 2.5px solid var(--ink); border-radius: 13px; background: var(--c-bg); font: 400 1.25rem/1 var(--ff-display); color: var(--ink); }
:root[data-theme="godispop"] .tile[data-state="selected"], :root[data-theme="godispop"] .tile[data-hover="true"] { background: var(--blue-100, #DDF6FE); border-color: var(--ink); box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--blue); }
:root[data-theme="godispop"] .tile[data-state="matched"] { background: var(--mint-100); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); transform: translateY(3px); }
:root[data-theme="godispop"] .tile[data-state="matched"] .tile-key { background: var(--mint); border-color: var(--ink); color: var(--ink); animation: gp-keypop 420ms var(--e-pop) 1; }
:root[data-theme="godispop"] .tile[data-state="matched"] .tile-mark { color: var(--mint-700); }
:root[data-theme="godispop"] .tile[data-state="wrong"] { background: var(--red-100); border-color: var(--ink); }
:root[data-theme="godispop"] .tile[data-state="wrong"] .tile-key { background: var(--red); border-color: var(--ink); color: var(--ink); animation: gp-key-wiggle 440ms var(--e-std) 1; }
:root[data-theme="godispop"] .tile[data-state="wrong"] .tile-mark { color: var(--red-700); }
:root[data-theme="godispop"] .tile-mark .ic { width: 26px; height: 26px; }

:root[data-theme="godispop"] .hud-clock { border: 3px solid var(--ink); border-radius: 99px; background: #fff; box-shadow: 0 3px 0 var(--ink); }
:root[data-theme="godispop"] .hud-clock .ic { color: var(--blue); }
:root[data-theme="godispop"] .hud-clock-num { font-family: var(--ff-display); font-weight: 400; }
:root[data-theme="godispop"] .hud-time { height: 8px; background: var(--c-bg-deep); border-top: 2px solid var(--ink); }
:root[data-theme="godispop"] .hud-time-fill { background: var(--blue); }
:root[data-theme="godispop"] .screen-game[data-clock="low"] .hud-time-fill { background: var(--red); }
:root[data-theme="godispop"] .screen-game[data-clock="low"] .hud-clock .ic, :root[data-theme="godispop"] .screen-game[data-clock="low"] .hud-clock-num { color: var(--red-700); }

:root[data-theme="godispop"] .cloze-text { border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); }
:root[data-theme="godispop"] .gap { background: var(--c-bg-deep); border: 2.5px dashed var(--ink); border-radius: 12px; }
:root[data-theme="godispop"] .gap[data-state="selected"], :root[data-theme="godispop"] .gap[data-hover="true"] { border-style: solid; background: var(--blue-100, #DDF6FE); box-shadow: 0 0 0 3px var(--blue); }
:root[data-theme="godispop"] .gap[data-state="correct"] { border-style: solid; background: var(--mint); color: var(--ink); }
:root[data-theme="godispop"] .gap[data-state="correct"] .gap-mark { color: var(--ink); }
:root[data-theme="godispop"] .gap[data-state="revealed"] { border-style: solid; background: var(--lemon-100, #FFF4C7); }
:root[data-theme="godispop"] .gap[data-state="wrong"] { border-style: solid; background: var(--red-100); color: var(--ink); }
:root[data-theme="godispop"] .bank { border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); }
:root[data-theme="godispop"] .chip-word { border: 3px solid var(--ink); border-radius: 99px; background: #fff; font-family: var(--ff-display); font-weight: 400; font-size: 1.1875rem; box-shadow: 0 4px 0 var(--ink); }
@media (hover: hover) { :root[data-theme="godispop"] .chip-word:not([data-locked]):hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); background: var(--c-hover); border-color: var(--ink); } }
:root[data-theme="godispop"] .chip-word[data-state="selected"] { background: var(--blue-100, #DDF6FE); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink), 0 0 0 4px var(--blue); }
:root[data-theme="godispop"] .chip-word[data-state="wrong"] { background: var(--red-100); border-color: var(--ink); }
:root[data-theme="godispop"] .drag-ghost { background: var(--pink); color: var(--ink); border: 3px solid var(--ink); border-radius: 99px; font-family: var(--ff-display); font-weight: 400; box-shadow: 0 4px 0 var(--ink); }
:root[data-theme="godispop"] .import[data-drop="true"] { border-color: var(--ink); box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--blue); }
:root[data-theme="godispop"] .import-units, :root[data-theme="godispop"] .import-ocr, :root[data-theme="godispop"] .import-status { border-width: 2.5px; border-color: var(--ink); }
:root[data-theme="godispop"] .import-note { border-color: var(--ink); background: var(--mint-100); }