/* =====================================================================
   Vikt i rymden – utseende
   css/spaceweight.css   (spaceweightmenu.php, spaceweight.php)

   Allt ligger under .spw-app och använder temats variabler, så sidan
   följer det ljusa och det mörka temat. Knapparna skrivs med
   "html .spw-app button…" för att gå före temats allmänna knappregler
   i css/style.css.
   Himlakropparnas färg och storlek kommer från php/spaceweight_data.php
   (style på .spw-prick). Storlekarna är inte skalenliga.
   ===================================================================== */
.spw-app {
    --spw-text: var(--color-text-primary, #e6e8f5); --spw-dov: var(--color-text-secondary, #a3a8cc);
    --spw-yta: var(--color-bg-secondary, #1a1a4a); --spw-yta2: var(--color-bg-tertiary, #252550); --spw-kant: var(--color-border-subtle, #3a3a6a);
    --spw-guld: #f5c518; --spw-gron: #22c55e; --spw-rod: #f87171; --spw-bla: #4f7ef7;
    --spw-vald: #f5c518; --spw-vald-fyll: #f5c518;
}
html[data-theme="ljus"] .spw-app { --spw-gron: #15803d; --spw-rod: #b91c1c; --spw-guld: #a16207; --spw-vald: #92400e; --spw-vald-fyll: #facc15; }
.spw-app .content-container, .spw-app .left-container { color: var(--spw-text); font-family: 'Nunito', system-ui, sans-serif; }
.spw-app *, .spw-app *::before { box-sizing: border-box; }

/* ── gemensamt ── */
.spw-titelrad { display: flex; gap: 14px; align-items: center; }
.spw-symbol { font-size: 2.6rem; line-height: 1; }
.spw-app h1.spw-rubrik { margin: 0; font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.15 'Fredoka One', 'Nunito', sans-serif; color: var(--spw-text); }
.spw-under { margin: 4px 0 0; color: var(--spw-dov); }
.spw-app h2.spw-steg { margin: 22px 0 8px; font: 400 1.15rem 'Fredoka One', 'Nunito', sans-serif; color: var(--spw-text); }
html .spw-app button.spw-knapp:not(.sc-start):not(.ks-tts-figur), .spw-app a.spw-knapp { display: inline-block; padding: 10px 16px; border-radius: 12px; cursor: pointer; text-decoration: none; text-align: center;
    font: 800 .95rem 'Nunito', sans-serif; border: 1px solid var(--spw-kant); background: var(--spw-yta2); color: var(--spw-text); min-height: 44px; }
html .spw-app button.spw-knapp.spw-start:not(.sc-start):not(.ks-tts-figur) { background: linear-gradient(135deg, #16a34a, #15803d); border: 0; color: #fff; }
html .spw-app button.spw-knapp.spw-stor:not(.sc-start):not(.ks-tts-figur) { width: 100%; padding: 14px; font-size: 1.15rem; margin-top: 22px; }
html .spw-app button.spw-knapp[aria-pressed="true"]:not(.sc-start):not(.ks-tts-figur) { border-color: var(--spw-vald); }
html .spw-app .spw-knapp.spw-bred { display: block; width: 100%; margin-top: 10px; }
.spw-app button:focus-visible, .spw-app a:focus-visible, .spw-app input:focus-visible, .spw-app [role="button"]:focus-visible { outline: 3px solid var(--spw-bla); outline-offset: 2px; }
.spw-liten { font-size: .85rem; color: var(--spw-dov); margin: 6px 0 0; }

/* ── menyn ── */
.spw-kryss { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: .92rem; cursor: pointer; margin-top: 12px; color: var(--spw-text); }
.spw-kryss input { width: 18px; height: 18px; flex: none; }
.spw-kortrad { display: grid; gap: 8px; padding: 6px 6px 0 0; grid-template-columns: repeat(3, 1fr); }
.spw-kortrad.spw-tva { grid-template-columns: repeat(2, 1fr); }
html .spw-app button.spw-kort:not(.sc-start):not(.ks-tts-figur) { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; cursor: pointer; text-align: center;
    background: var(--spw-yta2); color: var(--spw-text); border: 2px solid var(--spw-kant); font: 800 .95rem 'Nunito', sans-serif; transition: transform .1s, border-color .15s; }
html .spw-app button.spw-kort:hover:not(:disabled):not(.sc-start) { transform: translateY(-2px); }
html .spw-app button.spw-kort:disabled { opacity: .45; cursor: default; }
html .spw-app button.spw-kort[aria-pressed="true"]:not(.sc-start):not(.ks-tts-figur) { border-color: var(--spw-vald); background: color-mix(in srgb, var(--spw-vald-fyll) 20%, var(--spw-yta2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spw-vald-fyll) 30%, transparent); }
.spw-app button.spw-kort[aria-pressed="true"]:not(:disabled)::after { content: '✓'; position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--spw-vald-fyll); color: #1a1a2e; font-weight: 900; font-size: .9rem; }
.spw-app button.spw-kort[aria-pressed="true"] .spw-kort-namn { color: var(--spw-vald); }
.spw-kort-emoji { font-size: 1.9rem; line-height: 1.1; }
.spw-kort small { display: block; font-weight: 600; font-size: .78rem; color: var(--spw-dov); line-height: 1.3; }
.spw-info { margin: 0; padding-left: 22px; color: var(--spw-dov); font-size: .95rem; line-height: 1.55; }
@media (max-width: 34em) { .spw-kortrad, .spw-kortrad.spw-tva { grid-template-columns: 1fr; } }

/* ══ SIDAN ════════════════════════════════════════════════════════════ */
/* På mobilen kommer innehållet först och statusen under */
body.spw-spelsida > main.spw-app > .content-container { order: -1; }
@media (max-width: 48em), (max-height: 30em) { body.spw-spelsida > main.spw-app { display: flex !important; flex-direction: column; } }
.spw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.spw-chip { padding: 4px 11px; border-radius: 999px; font: 800 .85rem 'Nunito', sans-serif; background: color-mix(in srgb, var(--spw-guld) 18%, transparent); border: 1px solid color-mix(in srgb, var(--spw-guld) 50%, transparent); color: var(--spw-text); }
.spw-raknare { margin: 0 0 6px; font-weight: 800; }
.spw-bar { height: 10px; border-radius: 999px; background: var(--spw-yta2); border: 1px solid var(--spw-kant); overflow: hidden; }
.spw-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f5c518, #22c55e); transition: width .4s; }
.spw-rattantal { margin: 8px 0 12px; color: var(--spw-dov); font-size: .92rem; font-weight: 700; }
.spw-app h2.spw-ladrubrik { margin: 8px 0 6px; font: 800 .78rem 'Nunito', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--spw-dov); }

.spw-uppgift { margin: 0 0 8px; text-align: center; font: 400 clamp(1.05rem, 2.2vw, 1.35rem)/1.3 'Fredoka One', 'Nunito', sans-serif; color: var(--spw-text); min-height: 1.3em; }
.spw-meddelande { min-height: 1.5em; margin: 8px 0 0; text-align: center; font-weight: 800; }
.spw-meddelande.spw-ratt { color: var(--spw-gron); }
.spw-meddelande.spw-fel { color: var(--spw-rod); }
.spw-knapprad { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.spw-knapprad[hidden] { display: none; }

.spw-knapprad.spw-vanster { justify-content: flex-start; }
.spw-varning { color: var(--spw-rod); font-weight: 700; }
.spw-mitt { text-align: center; }

/* ── himlakroppens prick ── */
.spw-prickruta { display: grid; place-items: center; flex: none; }
.spw-prick { display: block; border-radius: 50%; position: relative; box-shadow: inset -3px -3px 6px rgba(0, 0, 0, .28); }
.spw-prick.spw-ring::after { content: ''; position: absolute; left: -32%; right: -32%; top: 38%; height: 24%; border-radius: 50%;
    border: 2px solid #d9c88a; transform: rotate(-18deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }

/* ── menyn: välj platser ── */
.spw-platsrad { display: grid; gap: 8px; padding: 6px 6px 0 0; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
html .spw-app button.spw-plats:not(.sc-start):not(.ks-tts-figur) { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; cursor: pointer;
    background: var(--spw-yta2); color: var(--spw-text); border: 2px solid var(--spw-kant); font: 800 .9rem 'Nunito', sans-serif; opacity: .6; }
html .spw-app button.spw-plats[aria-pressed="true"]:not(.sc-start):not(.ks-tts-figur) { opacity: 1; border-color: var(--spw-vald); background: color-mix(in srgb, var(--spw-vald-fyll) 16%, var(--spw-yta2)); }
html .spw-app button.spw-plats:disabled { cursor: default; }
.spw-app button.spw-plats[aria-pressed="true"]::after { content: '✓'; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--spw-vald-fyll); color: #1a1a2e; font-weight: 900; font-size: .78rem; }
.spw-plats .spw-prickruta { height: 46px; }

/* ── reglaget ── */
.spw-reglage { max-width: 640px; margin: 0 auto 14px; padding: 12px 16px; border-radius: 16px; background: var(--spw-yta); border: 1px solid var(--spw-kant); text-align: center; }
.spw-reglage label { display: block; font-weight: 800; font-size: 1.05rem; }
.spw-reglage output { font: 400 1.5rem 'Fredoka One', 'Nunito', sans-serif; color: var(--spw-vald); }
.spw-reglagerad { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.spw-reglagerad input[type="range"] { flex: 1; min-width: 0; height: 32px; accent-color: #f5c518; }
html .spw-app button.spw-knapp.spw-steg-knapp:not(.sc-start):not(.ks-tts-figur) { width: 44px; padding: 0; font-size: 1.3rem; flex: none; }
.spw-ordning { display: grid; gap: 6px; }

/* ── korten med platserna (Utforska) ── */
.spw-rutnat { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
html .spw-app button.spw-platskort:not(.sc-start):not(.ks-tts-figur) { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 12px; border-radius: 16px; cursor: pointer; text-align: center;
    background: var(--spw-yta); color: var(--spw-text); border: 2px solid var(--spw-kant); font: 700 .9rem 'Nunito', sans-serif; }
html .spw-app button.spw-platskort:hover { border-color: var(--spw-guld); }
html .spw-app button.spw-platskort[aria-pressed="true"]:not(.sc-start):not(.ks-tts-figur) { border-color: var(--spw-vald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spw-vald-fyll) 30%, transparent); }
html .spw-app button.spw-platskort.spw-hemma:not(.sc-start) { background: color-mix(in srgb, var(--spw-bla) 12%, var(--spw-yta)); }
.spw-platskort .spw-prickruta, .spw-duellkort .spw-prickruta { height: 90px; }
.spw-kortnamn { font: 400 1.1rem 'Fredoka One', 'Nunito', sans-serif; }
/* vågens fönster */
.spw-vag { display: block; width: 100%; margin-top: 4px; padding: 5px 6px 6px; border-radius: 10px; background: #0b1220; border: 1px solid #2a3550; }
.spw-vag small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8fa0c0; }
.spw-vag .spw-siffra { display: block; color: #7dffb0; }
.spw-siffra { font: 800 1.35rem ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spw-tyngd { font-weight: 800; }
.spw-ganger, .spw-hopp { font-size: .82rem; color: var(--spw-dov); }

.spw-faktakort { max-width: 760px; margin: 14px auto 0; padding: 14px 16px; border-radius: 16px; background: var(--spw-yta); border: 1px solid var(--spw-kant); }
.spw-faktakort[hidden] { display: none; }
.spw-app h2.spw-faktanamn { margin: 0 0 4px; font: 400 1.3rem 'Fredoka One', 'Nunito', sans-serif; color: var(--spw-text); }
.spw-faktarad { margin: 0 0 6px; font-weight: 800; }
.spw-faktatext { margin: 0; line-height: 1.5; }

/* ── frågespelet: två platser ── */
.spw-duell { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 560px; margin: 10px auto 0; }
.spw-duell[hidden] { display: none; }
html .spw-app button.spw-duellkort:not(.sc-start):not(.ks-tts-figur) { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 18px; cursor: pointer;
    background: var(--spw-yta); color: var(--spw-text); border: 3px solid var(--spw-kant); font: 700 1rem 'Nunito', sans-serif; min-height: 190px; }
html .spw-app button.spw-duellkort:hover:not(:disabled) { border-color: var(--spw-guld); transform: translateY(-2px); }
html .spw-app button.spw-duellkort:disabled { cursor: default; opacity: 1; }
html .spw-app button.spw-duellkort.spw-rattalt:not(.sc-start) { border-color: var(--spw-gron); background: color-mix(in srgb, var(--spw-gron) 16%, var(--spw-yta)); }
html .spw-app button.spw-duellkort.spw-felalt:not(.sc-start) { border-color: var(--spw-rod); background: color-mix(in srgb, var(--spw-rod) 12%, var(--spw-yta)); }
.spw-altnr { position: absolute; top: 8px; left: 10px; font-size: .72rem; font-weight: 800; color: var(--spw-dov); border: 1px solid var(--spw-kant); border-radius: 5px; padding: 0 5px; }
@media (pointer: coarse) { .spw-tangent, .spw-altnr { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .spw-bar i, html .spw-app button.spw-kort, html .spw-app button.spw-duellkort { transition: none; transform: none; }
}
.spw-app .sc-row[hidden] { display: none; }