/* ── Bibelspill (/spill) ─────────────────────────────────────────────────
   Egen side med egne stiler. Arver tema-variablene (--bg, --card-bg,
   --text, --accent, …) fra app.css som lastes først — alt under er
   spill-spesifikt og prefikset sp- så det ikke kolliderer med appen. */

.sp-body {
    background: var(--bg);
    color: var(--text);
    margin: 0;
    min-height: 100dvh;
    font-family: 'Segoe UI', system-ui, sans-serif;
    /* Den delte .app-header-en (app.css) er FIXED — klarér den med tokenen
       (aldri hardkodede px; --chrome-top dekker også app-modus/safe-area). */
    padding-top: var(--chrome-top);
}

/* ── Delt topp-chrome: .app-header fra app.css. Kun små tilpasninger for at
      lenkene (denne siden har ikke app.js/knapp-funksjonene) ser like ut. ── */
.app-header a.header-left,
.app-header a.header-icon-btn { text-decoration: none; }
.app-header .header-icon-btn .icon { width: 22px; height: 22px; }

.sp-root {
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 14px calc(env(safe-area-inset-bottom, 0px) + 28px);
}

/* ── Felles knapper ── */
.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 0.98rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 160ms ease, opacity 140ms ease;
    box-shadow: 0 3px 12px rgba(159, 23, 39,0.28);
    -webkit-tap-highlight-color: transparent;
}
.sp-btn:hover { box-shadow: 0 5px 18px rgba(159, 23, 39,0.36); }
.sp-btn:active { transform: scale(0.97); }
.sp-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.sp-btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border);
    box-shadow: none;
}
.sp-btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }

/* ── Landing: spillkort ── */
.sp-hero { text-align: center; margin: 8px 0 14px; }
.sp-hero h2 { font-size: 1.35rem; margin: 0; }
/* Lifetime poengteller (sum av alt samlet). */
.sp-total {
    margin-top: 6px;
    font-size: 0.92rem;
    color: var(--text-muted, #7a7266);
}
.sp-total strong { color: var(--accent); font-variant-numeric: tabular-nums; }

/* Versjonsvelger på framsiden — kompakt rad over spillkortene. Gjelder Gjett
   verset + Fyll inn ordet (Bibelkartet bruker ingen versjon). */
.sp-verbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.9rem;
    color: var(--text-muted, #7a7266);
}
.sp-verbar-select {
    font: inherit;
    font-size: 16px;                 /* unngå iOS fokus-zoom */
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    max-width: 60vw;
}
.sp-verbar-select:focus { outline: none; border-color: var(--accent); }

/* Kompakte kort: ikon · tekst · pil, hele kortet klikkbart. Tre spill får
   plass på én skjerm uten scroll (kort undertekst, ingen lange avsnitt). */
.sp-cards { display: flex; flex-direction: column; gap: 12px; }
.sp-card {
    position: relative;
    width: 100%;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px 16px 14px 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    transition: transform 160ms cubic-bezier(.2,.8,.3,1), box-shadow 160ms ease, border-color 160ms ease;
    animation: spFadeUp 320ms cubic-bezier(.16,1,.3,1) both;
}
.sp-card:nth-child(2) { animation-delay: 60ms; }
.sp-card:nth-child(3) { animation-delay: 120ms; }
@media (hover: hover) {
    .sp-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.10); border-color: var(--accent); }
}
.sp-card:active { transform: scale(0.99); }
@keyframes spFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
/* Venstre fargetone-stripe per spill */
.sp-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 5px;
}
.sp-card-vers::before { background: linear-gradient(180deg, #9f1727, #d4842c); }
.sp-card-geo::before  { background: linear-gradient(180deg, #2c6e8f, #3da06b); }
.sp-card-ord::before  { background: linear-gradient(180deg, #6b4ea8, #9f1727); }
.sp-card-pugg::before { background: linear-gradient(180deg, #2e7d64, #6bbf59); }
.sp-card-blandet::before { background: linear-gradient(180deg, #d4a52c, #7a4ca8); }

.sp-card-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.sp-card-icon .icon { width: 24px; height: 24px; color: #fff; }
.sp-card-vers .sp-card-icon { background: linear-gradient(135deg, #9f1727, #d4842c); }
.sp-card-geo  .sp-card-icon { background: linear-gradient(135deg, #2c6e8f, #3da06b); }
.sp-card-ord  .sp-card-icon { background: linear-gradient(135deg, #6b4ea8, #9f1727); }
.sp-card-pugg .sp-card-icon { background: linear-gradient(135deg, #2e7d64, #6bbf59); }
.sp-card-blandet .sp-card-icon { background: linear-gradient(135deg, #d4a52c, #7a4ca8); }
/* Blandet quiz: liten etikett over oppgaven som viser hvilket spill den er fra. */
.sp-blandet-tasklabel {
    font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; margin: 2px 0 8px;
}

.sp-card-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sp-card-title { font-size: 1.08rem; font-weight: 800; }
.sp-card-sub { color: var(--text-muted); font-size: 0.88rem; }
.sp-card-stats { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.sp-card-go { width: 22px; height: 22px; flex: 0 0 auto; color: var(--text-muted); }

/* ── Spill-visning: felles ── */
.sp-game-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.sp-game-head h2 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.sp-chip {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}
.sp-chip strong { color: var(--accent); }
.sp-mini-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 8px 6px 2px;
    border-radius: 999px;
}
.sp-mini-back:hover { color: var(--accent); }
.sp-mini-back .icon { width: 16px; height: 16px; }

/* ── Gjett verset ── */
.sp-diff {
    display: inline-flex;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.sp-diff button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
    -webkit-tap-highlight-color: transparent;
}
.sp-diff button.active { background: var(--accent); color: #fff; }
.sp-diff-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 7px 2px 0;
    min-height: 1em;
}

.sp-verse-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 20px;
    margin: 14px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.12rem;
    line-height: 1.65;
    position: relative;
    animation: spFadeUp 320ms cubic-bezier(.16,1,.3,1) both;
}
.sp-verse-card::before {
    content: '“';
    position: absolute;
    top: 2px; left: 12px;
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.18;
    font-family: Georgia, serif;
}

/* Enkel bok/kapittel/vers-velger: native nedtrekk (bok gruppert GT/NT +
   kapittel) og et lite tallfelt for vers — erstatter søkefelt + testament-
   faner + 66-knappers bok-vegg + store tall-rutenett. */
.sp-sel-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 12px;
}
.sp-sel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-sel-book { flex: 1 1 100%; }     /* bok på egen full-bredde rad */
.sp-sel-num { flex: 1 1 90px; }      /* kapittel + vers ved siden av hverandre */
.sp-sel-cap {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding-left: 2px;
}
.sp-select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text);
    font-family: inherit;
    /* >=16px hindrer iOS-fokus-zoom (samme grunn som Kirkefedrene-feltene). */
    font-size: 16px;
}
.sp-select:focus { outline: none; border-color: var(--accent); }
.sp-select:disabled { opacity: 0.5; }
/* Ro ned vers-tallfeltet: skjul spinner-pilene. */
#spVNum::-webkit-outer-spin-button,
#spVNum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#spVNum { -moz-appearance: textfield; }

.sp-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Resultat */
.sp-result {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    margin-top: 14px;
    animation: spPop 340ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes spPop {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.sp-result-points {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.sp-result-points small { font-size: 1rem; color: var(--text-muted); font-weight: 600; }
/* Bonus-forklaring (grunnlag · fart · streak) under poengtallet. */
.sp-bonus-note { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.sp-result-rows { margin: 12px 0; display: flex; flex-direction: column; gap: 5px; }
.sp-result-row { font-size: 0.92rem; display: flex; gap: 8px; align-items: baseline; }
.sp-result-row .ok { color: #2e8b46; font-weight: 800; }
.sp-result-row .miss { color: var(--accent); font-weight: 800; }
.sp-answer-ref { font-weight: 800; font-size: 1.02rem; margin-top: 4px; }
.sp-answer-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
    margin: 8px 0 4px;
}
.sp-read-link { color: var(--accent); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.sp-read-link:hover { text-decoration: underline; }

/* ── «Fyll inn ordet» ── (kortet arver .sp-verse-card) */
.sp-blank {
    display: inline-block;
    min-width: 3ch;
    padding: 0 8px;
    margin: 0 2px;
    border-bottom: 2px solid var(--accent);
    border-radius: 5px 5px 0 0;
    background: rgba(159, 23, 39,0.07);
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    vertical-align: baseline;
}
.sp-blank.filled { color: var(--accent); background: rgba(159, 23, 39,0.14); letter-spacing: normal; }
[data-theme="dark"] .sp-blank { background: rgba(207, 63, 85,0.12); }
[data-theme="dark"] .sp-blank.filled { background: rgba(207, 63, 85,0.22); }

.sp-word-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.sp-word-opt {
    padding: 14px 12px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}
.sp-word-opt:active { transform: scale(0.97); }
.sp-word-opt.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: hover) { .sp-word-opt:hover { border-color: var(--accent); } }

.sp-word-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;      /* ≥16px: hindrer iOS fokus-zoom */
    text-align: center;
}
.sp-word-input:focus { outline: none; border-color: var(--accent); }

/* Svarordet uthevet i den fulle verse-teksten i resultatet */
.sp-word-answer { color: var(--accent); font-weight: 800; background: rgba(159, 23, 39,0.12); border-radius: 4px; padding: 0 3px; }
[data-theme="dark"] .sp-word-answer { background: rgba(207, 63, 85,0.20); }

/* ── Tidligere forsøk (historikk) på resultatskjermene ── */
.sp-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.sp-history-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.sp-history-best { color: var(--accent); }
.sp-hist-rows { display: flex; flex-direction: column; }
.sp-hist-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.9rem;
    padding: 4px 0;
    border-top: 1px solid var(--border);
}
.sp-hist-row:first-child { border-top: 0; }
.sp-hist-score { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 64px; }
.sp-hist-max { color: var(--text-muted); font-weight: 600; font-size: 0.82em; }
.sp-hist-mode { flex: 1 1 auto; color: var(--text-muted); }
.sp-hist-when { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }

/* ── Bibelkartet ── */
.sp-geo-banner {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: spFadeUp 300ms ease both;
}
.sp-geo-banner .icon { color: var(--accent); width: 20px; height: 20px; flex: 0 0 auto; }
.sp-geo-q { font-size: 1.0rem; }
.sp-geo-q strong { font-size: 1.12rem; }
/* Kart-scene: kartet fyller høyden (JS måler i sizeGeoStage), og handlings-/
   resultat-radene legges som OVERLAY nederst på kartet i stedet for under det
   — så «Svar»/«Neste sted» alltid synes uten scroll. */
.sp-geo-stage {
    position: relative;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;   /* klipper kart-hjørnene + holder overlay innenfor */
}
#spillMap {
    width: 100%;
    height: 100%;
    min-height: 280px;  /* fallback hvis JS-måling skulle utebli */
    z-index: 1;
}
.sp-geo-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    /* Overlay nederst på kartet */
    position: absolute;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 500;       /* over Leaflet-panes/-kontroller, under modaler */
    margin: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
.sp-geo-hint { color: var(--text-muted); font-size: 0.85rem; flex: 1 1 auto; }
.sp-geo-result {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    animation: spPop 300ms cubic-bezier(.16,1,.3,1) both;
    /* Overlay nederst på kartet — samme plass som handlings-raden (som skjules
       når resultatet vises). Absolutt ift. .sp-geo-stage. */
    position: absolute;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 500;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
.sp-geo-result .sp-result-points { font-size: 1.7rem; }
.sp-geo-result-info { flex: 1 1 auto; font-size: 0.92rem; }
.sp-geo-result-info strong { font-size: 1.0rem; }
/* Når resultatet vises, skjul handlings-raden (de deler samme plass nederst). */
.sp-geo-stage:has(.sp-geo-result) .sp-geo-actions { display: none; }
/* Geo-modus: #spillRoot fyller skjermen og ruller ikke — kart + overlay på én
   skjerm (sizeGeoStage setter selve scene-høyden i JS). */
#spillRoot.sp-geo-active { padding-bottom: 0; overflow: hidden; }

/* Pin-markører på kartet */
.sp-pin-guess, .sp-pin-answer {
    width: 18px; height: 18px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.sp-pin-guess { background: #9f1727; }
.sp-pin-answer { background: #2e8b46; }
/* Navne-etikett på kartet (sentrert på stedets midtpunkt) */
.sp-place-label {
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%);
    text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.95);
}

/* Oppsummering */
.sp-summary-total {
    text-align: center;
    margin: 18px 0 6px;
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.sp-summary-sub { text-align: center; color: var(--text-muted); margin-bottom: 16px; }
.sp-summary-rows {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}
.sp-summary-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 16px;
    font-size: 0.94rem;
    border-bottom: 1px solid var(--border);
    animation: spFadeUp 300ms ease both;
}
.sp-summary-row:last-child { border-bottom: none; }
.sp-summary-row .nr { color: var(--text-muted); font-weight: 700; width: 18px; }
.sp-summary-row .navn { flex: 1 1 auto; font-weight: 600; }
.sp-summary-row .km { color: var(--text-muted); font-size: 0.85rem; }
.sp-summary-row .pts { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Skeleton (gjenbruker skeleton-line fra app.css) */
.sp-skel { padding: 6px 0; }

/* Feilmelding */
.sp-error {
    background: rgba(159, 23, 39,0.08);
    border: 1px solid rgba(159, 23, 39,0.25);
    color: var(--text);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 14px 0;
    font-size: 0.92rem;
}

[data-theme="dark"] .sp-card { box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
[data-theme="dark"] .sp-btn { box-shadow: 0 3px 12px rgba(207, 63, 85,0.35); }

/* ── Versepugg ──────────────────────────────────────────────────────────── */
/* «Dagens pugg»-banner på framsiden (kun når noe er due). */
.sp-pugg-banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #2e7d64, #6bbf59);
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(46, 125, 100, 0.35);
    text-align: left;
}
.sp-pugg-banner-go { font-weight: 700; white-space: nowrap; }

.sp-pugg-intro { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 12px; }

/* Legg-til-rad */
.sp-pugg-add { margin-bottom: 12px; }
.sp-pugg-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-pugg-vinput { flex: 1 1 160px; min-width: 120px; }
.sp-pugg-addbtn { padding: 9px 16px; }
.sp-pugg-add-msg { font-size: 0.82rem; color: var(--accent); margin-top: 6px; min-height: 1em; }

/* Verssett-liste */
.sp-pugg-list { list-style: none; margin: 14px 0 0; padding: 0; }
.sp-pugg-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
}
.sp-pugg-item-ref { flex: 1 1 auto; font-weight: 600; }
.sp-pugg-item.is-due .sp-pugg-item-ref { color: var(--accent); }
.sp-pugg-next { font-size: 0.78rem; color: var(--text-muted); }
.sp-pugg-due-dot { width: 9px; height: 9px; border-radius: 50%; background: #2e9d6b; }
.sp-pugg-del {
    border: none; background: none; color: var(--text-muted);
    cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 6px;
}
.sp-pugg-del:hover { color: var(--accent); background: var(--chip-bg, #f0e8dc); }
.sp-pugg-empty { color: var(--text-muted); font-style: italic; padding: 10px 0; }

/* Øving */
.sp-pugg-ref { font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; text-align: center; }
.sp-pugg-card {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.15rem; line-height: 1.7;
    min-height: 3em;
}
.sp-mask {
    color: var(--accent);
    letter-spacing: 1px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.sp-pugg-hide {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 14px 0;
}
.sp-pugg-hide-lbl { font-size: 0.85rem; color: var(--text-muted); margin-right: 2px; }
.sp-pugg-hide button {
    border: 1px solid var(--border); background: transparent; color: var(--text);
    padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.sp-pugg-hide button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.sp-pugg-rate { margin-top: 8px; }
.sp-pugg-rate-lbl { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 8px; text-align: center; }
.sp-pugg-rate-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sp-pugg-rate-btns button {
    border: none; border-radius: 12px; padding: 12px 6px;
    font: inherit; font-weight: 700; font-size: 0.9rem; color: #fff; cursor: pointer;
}
.sp-pugg-rate-btns .rate-again { background: #b23b3b; }
.sp-pugg-rate-btns .rate-hard  { background: #c98a2e; }
.sp-pugg-rate-btns .rate-good  { background: #3a8f5a; }
.sp-pugg-rate-btns .rate-easy  { background: #2c7d8f; }
.sp-pugg-rate-btns button:hover { filter: brightness(1.08); }

.sp-summary-line { margin: 10px 0 4px; font-size: 1rem; }