/* =====================================================================
   Smart multiplikation – stil
   css/multiplication.css

   multiplicationgamemenu.php, multiplicationgame.php,
   multiplicationgametable.php, multiplicationgamestatistics.php och
   multiplicationgamehelp.php.

   Förut hade varje sida egna, mörka färger (#0f172a, vit text). I det
   ljusa temat blev texter vita på vitt – till exempel spellägena och
   "a × b = ?" i hjälprutan – och knapparna blev grå, eftersom style.css
   färgar "main button" i ljust tema och hav. Nu följer allt temat, och
   knappreglerna har id i väljaren så att de vinner över style.css.
   Allt ligger under #mu-vanster och #mu-mitt (vänster- och mittrutan).
   ===================================================================== */

.mu-tema {
    --mu-yta:   var(--color-bg-secondary, #111827);
    --mu-yta2:  var(--color-bg-tertiary, #1a2235);
    --mu-kant:  var(--color-border-subtle, #2a3550);
    --mu-kant2: var(--color-accent-border, #3b4a6b);
    --mu-text:  var(--color-text-primary, #e2e8f0);
    --mu-text2: var(--color-text-secondary, #94a3b8);
    --mu-mu:    var(--color-text-muted, #64748b);
    --mu-gron:  #22c55e;
    --mu-bla:   #3b82f6;
    --mu-gul:   #eab308;
    --mu-rod:   #f87171;
    --mu-gul-text: #fde68a;
    --mu-skugga: 0 6px 20px rgba(0,0,0,.35);
    color: var(--mu-text);
    font-family: 'Exo 2', system-ui, sans-serif;
}
[data-theme="ljus"] .mu-tema {
    --mu-yta: #ffffff; --mu-yta2: #f4f6f9; --mu-kant: #e2e8f0; --mu-kant2: #cbd5e1;
    --mu-text: #1e293b; --mu-text2: #475569; --mu-mu: #64748b;
    --mu-gron: #15803d; --mu-bla: #1d4ed8; --mu-gul: #a16207; --mu-rod: #b91c1c; --mu-gul-text: #854d0e;
    --mu-skugga: 0 6px 18px rgba(35,48,58,.10);
}
.mu-tema *, .mu-tema *::before, .mu-tema *::after { box-sizing: border-box; }
#mu-vanster, #mu-mitt { display: flex; flex-direction: column; gap: 14px; width: 100%; }
#mu-mitt { max-width: 900px; margin: 0 auto; }

/* ── Paneler ───────────────────────────────────────────────────── */
.mu-panel { background: var(--mu-yta); border: 1px solid var(--mu-kant); border-radius: 16px; padding: 16px 18px; box-shadow: var(--mu-skugga); }
.mu-panel h2 { margin: 0 0 12px; font: 700 clamp(.9rem, 1.4vw, 1.05rem) 'Orbitron', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mu-text2); }
.mu-panel p { color: var(--mu-text2); line-height: 1.55; margin: 0 0 10px; }
.mu-panel p:last-child { margin-bottom: 0; }
.mu-liten { font-size: .85rem; color: var(--mu-mu); }

/* ── Knappar ───────────────────────────────────────────────────── */
:is(#mu-vanster, #mu-mitt) .mu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px;
    border-radius: 999px; border: 1px solid var(--mu-kant2); background: var(--mu-yta2); color: var(--mu-text);
    font: 700 1rem 'Exo 2', system-ui, sans-serif; cursor: pointer; text-decoration: none; box-shadow: none; transform: none;
    transition: border-color .15s, transform .08s, filter .15s; white-space: nowrap;
}
:is(#mu-vanster, #mu-mitt) .mu-btn:hover { border-color: var(--mu-bla); }
:is(#mu-vanster, #mu-mitt) .mu-btn:active { transform: scale(.97); }
:is(#mu-vanster, #mu-mitt) .mu-btn.mu-primar { background: linear-gradient(135deg, #3b82f6, #22c55e); border-color: transparent; color: #0b1120; box-shadow: 0 6px 18px rgba(34,197,94,.25); }
:is(#mu-vanster, #mu-mitt) .mu-btn.mu-primar:hover { filter: brightness(1.07); }
:is(#mu-vanster, #mu-mitt) .mu-btn.mu-fara { background: color-mix(in srgb, var(--mu-rod) 14%, var(--mu-yta2)); border-color: var(--mu-rod); color: var(--mu-rod); }
:is(#mu-vanster, #mu-mitt) .mu-btn:disabled { opacity: .45; cursor: default; }
.mu-tema :focus-visible { outline: 3px solid color-mix(in srgb, var(--mu-bla) 70%, transparent); outline-offset: 2px; }
.mu-rad { display: flex; gap: 10px; flex-wrap: wrap; }
.mu-rad > .mu-btn { flex: 1 1 auto; }
.mu-dold { display: none !important; }

/* ── Meny: val ─────────────────────────────────────────────────── */
.mu-lagen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#mu-mitt .mu-lage {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; min-height: 76px; text-align: left;
    border-radius: 14px; border: 2px solid var(--mu-kant2); background: var(--mu-yta2); color: var(--mu-text);
    font: 700 1rem 'Exo 2', sans-serif; cursor: pointer; box-shadow: none; transform: none;
}
#mu-mitt .mu-lage .mu-ikon { font-size: 1.5rem; line-height: 1; }
#mu-mitt .mu-lage small { font-weight: 600; font-size: .82rem; color: var(--mu-text2); }
#mu-mitt .mu-lage:hover { border-color: var(--mu-bla); }
#mu-mitt .mu-lage[aria-checked="true"] { border-color: var(--mu-gron); background: color-mix(in srgb, var(--mu-gron) 12%, var(--mu-yta2)); }

.mu-steg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
#mu-mitt .mu-stegknapp {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 14px; text-align: center;
    border-radius: 14px; border: 2px solid var(--mu-kant2); background: var(--mu-yta2); color: var(--mu-text);
    font: 600 .95rem 'Exo 2', sans-serif; cursor: pointer; box-shadow: none; transform: none; transition: border-color .15s, transform .1s;
}
#mu-mitt .mu-stegknapp:hover { border-color: var(--mu-bla); transform: translateY(-2px); }
.mu-stegknapp .mu-nr { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mu-mu); }
.mu-stegknapp .mu-etikett { font: 800 1.15rem 'Orbitron', sans-serif; color: var(--mu-text); }
.mu-stegknapp .mu-tips { font-size: .78rem; line-height: 1.35; color: var(--mu-text2); }
.mu-stegknapp .mu-marke { margin-top: 2px; font-size: .78rem; font-weight: 800; }
.mu-stegknapp .mu-tranat { font-size: .74rem; font-weight: 700; color: var(--mu-bla); }
.mu-stegknapp.mu-klar .mu-marke { color: var(--mu-gron); }
.mu-stegknapp.mu-nasta .mu-marke { color: var(--mu-gul); }
#mu-mitt .mu-stegknapp.mu-klar { border-color: color-mix(in srgb, var(--mu-gron) 55%, var(--mu-kant2)); }
#mu-mitt .mu-stegknapp.mu-nasta { border-color: var(--mu-gul); }
#mu-mitt .mu-stegknapp[aria-checked="true"] { border-color: var(--mu-bla); background: color-mix(in srgb, var(--mu-bla) 14%, var(--mu-yta2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mu-bla) 30%, transparent); }

/* Växlar */
.mu-vaxel { display: flex; align-items: center; gap: 14px; padding: 8px 0; cursor: pointer; }
.mu-vaxel + .mu-vaxel { border-top: 1px solid var(--mu-kant); }
.mu-vaxel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mu-vaxel .mu-spar { flex: 0 0 auto; width: 52px; height: 30px; border-radius: 999px; background: var(--mu-kant2); position: relative; transition: background .2s; }
.mu-vaxel .mu-spar::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.mu-vaxel input:checked + .mu-spar { background: var(--mu-gron); }
.mu-vaxel input:checked + .mu-spar::after { transform: translateX(22px); }
.mu-vaxel input:focus-visible + .mu-spar { outline: 3px solid color-mix(in srgb, var(--mu-bla) 70%, transparent); outline-offset: 2px; }
.mu-vaxel b { display: block; color: var(--mu-text); }
.mu-vaxel small { color: var(--mu-text2); font-size: .85rem; }

/* Behärskat-mätaren */
.mu-matare { text-align: center; }
.mu-matare .mu-rubrik { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mu-text2); }
.mu-matare .mu-procent { font: 800 3rem 'Orbitron', sans-serif; line-height: 1.1; margin: 4px 0; color: var(--mu-gron); }
.mu-matare p { margin: 0 0 10px; color: var(--mu-text2); font-size: .9rem; line-height: 1.4; }
.mu-stapel { height: 12px; border-radius: 999px; background: var(--mu-yta2); border: 1px solid var(--mu-kant); overflow: hidden; }
.mu-stapel > div { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #22c55e); transition: width .5s; }
.mu-lankar { display: flex; flex-direction: column; gap: 8px; }

/* Tabellöversikt 0–10 */
.mu-karta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 520px; }
.mu-karta span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: clamp(.55rem, 1.1vw, .75rem); font-weight: 700; background: var(--mu-yta2); color: var(--mu-mu); }
.mu-karta .mu-h { background: transparent; color: var(--mu-text2); font-weight: 800; }
.mu-karta .s-klar { background: color-mix(in srgb, var(--mu-gron) 70%, transparent); color: #fff; }
.mu-karta .s-ovar { background: color-mix(in srgb, var(--mu-gul) 45%, transparent); color: var(--mu-text); }
.mu-karta .s-fel  { background: color-mix(in srgb, var(--mu-rod) 55%, transparent); color: #fff; }
.mu-forklaring { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .82rem; color: var(--mu-text2); }
.mu-forklaring i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ── Spelet ────────────────────────────────────────────────────── */
.mu-framsteg { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--mu-text2); }
.mu-framsteg .mu-stapel { flex: 1; height: 10px; }
.mu-igen { display: none; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: color-mix(in srgb, var(--mu-gul) 18%, var(--mu-yta2)); color: var(--mu-gul); border: 1px solid color-mix(in srgb, var(--mu-gul) 50%, transparent); white-space: nowrap; }
.mu-igen.mu-syns { display: inline-block; }
.mu-stegnamn { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mu-mu); text-align: center; }
.mu-fraga { margin: 4px 0; text-align: center; font: 800 clamp(1.8rem, 3.4vw, 2.6rem) 'Orbitron', sans-serif; color: var(--mu-text); line-height: 1.2; }
#mu-vanster .mu-tala { align-self: center; min-height: 38px; padding: 6px 14px; font-size: .9rem; }
.mu-sprak { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.mu-hjalp { background: color-mix(in srgb, var(--mu-gul) 10%, var(--mu-yta)); border: 1px solid color-mix(in srgb, var(--mu-gul) 45%, transparent); border-radius: 14px; padding: 14px 16px; overflow-wrap: anywhere; }
.mu-hjalp h3 { margin: 0 0 8px; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mu-gul); }
.mu-hjalp .mu-tipstext { margin: 0 0 10px; color: var(--mu-text); line-height: 1.45; }
.mu-hjalp .mu-kedja { margin: 0; font: 700 1.05rem 'Exo 2', sans-serif; color: var(--mu-text); line-height: 1.6; }
.mu-prickar { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.mu-prickar div { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 6px; border-radius: 8px; background: color-mix(in srgb, var(--mu-bla) 8%, transparent); }
.mu-prickar span { width: clamp(9px, 1.4vw, 14px); height: clamp(9px, 1.4vw, 14px); border-radius: 50%; background: var(--mu-bla); }
.mu-prickar div:nth-child(5n) { margin-bottom: 4px; }

.mu-svar {
    width: 100%; min-height: clamp(48px, 7vh, 64px); display: flex; align-items: center; justify-content: center; border-radius: 14px;
    border: 2px solid var(--mu-kant2); background: var(--mu-yta2); color: var(--mu-text);
    font: 800 clamp(1.4rem, 3vh, 2rem) 'Orbitron', sans-serif; letter-spacing: .08em;
}
.mu-svar:empty::before { content: attr(data-tom); font: 600 1rem 'Exo 2', sans-serif; letter-spacing: 0; color: var(--mu-mu); }
.mu-svar.mu-aktiv { border-color: var(--mu-bla); }
.mu-tangenter { --tangent: clamp(48px, 9vh, 92px); display: grid; grid-template-columns: repeat(3, var(--tangent)); gap: clamp(6px, 1.1vh, 10px); justify-content: center; margin: clamp(8px, 1.6vh, 14px) auto; }
#mu-mitt .mu-tangent {
    width: var(--tangent); height: var(--tangent); padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 16px;
    border: 1px solid var(--mu-kant2); background: var(--mu-yta2); color: var(--mu-text);
    font: 800 calc(var(--tangent) * .4) 'Orbitron', sans-serif; cursor: pointer; box-shadow: 0 2px 0 var(--mu-kant2); transform: none; transition: border-color .12s, transform .08s;
}
#mu-mitt .mu-tangent:hover { border-color: var(--mu-bla); }
#mu-mitt .mu-tangent:active { transform: translateY(2px); box-shadow: none; }
#mu-mitt .mu-tangent.mu-radera { background: color-mix(in srgb, var(--mu-rod) 16%, var(--mu-yta2)); border-color: color-mix(in srgb, var(--mu-rod) 55%, transparent); color: var(--mu-rod); }
#mu-mitt .mu-tangent.mu-ok { background: linear-gradient(135deg, #3b82f6, #22c55e); border-color: transparent; color: #0b1120; font-size: calc(var(--tangent) * .34); }

.mu-feedback { display: none; margin-top: 12px; padding: 12px 16px; border-radius: 14px; line-height: 1.45; }
.mu-feedback.mu-syns { display: block; }
.mu-feedback.mu-bra { background: color-mix(in srgb, var(--mu-gron) 12%, var(--mu-yta)); border: 1px solid color-mix(in srgb, var(--mu-gron) 45%, transparent); color: var(--mu-gron); font-weight: 700; }
.mu-feedback.mu-fel { background: color-mix(in srgb, var(--mu-rod) 10%, var(--mu-yta)); border: 1px solid color-mix(in srgb, var(--mu-rod) 45%, transparent); color: var(--mu-rod); }
.mu-feedback .mu-facit { margin: 6px 0; font: 800 1.5rem 'Orbitron', sans-serif; color: var(--mu-text); }
.mu-feedback .mu-forklar { color: var(--mu-text2); font-size: .92rem; }

/* Sammanfattning */
.mu-summering { text-align: center; }
.mu-summering .mu-pokal { font-size: 3.6rem; line-height: 1; margin: 6px 0; }
.mu-summering h2 { font: 800 1.5rem 'Orbitron', sans-serif; text-transform: none; letter-spacing: 0; color: var(--mu-text); margin: 0 0 6px; }
.mu-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 14px 0; }
.mu-chips div { min-width: 110px; padding: 10px 16px; border-radius: 14px; background: var(--mu-yta2); border: 1px solid var(--mu-kant); color: var(--mu-text2); font-size: .82rem; }
.mu-chips strong { display: block; font: 800 1.5rem 'Orbitron', sans-serif; color: var(--mu-text); }
.mu-rad-ruta { margin: 12px 0; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--mu-gul) 10%, var(--mu-yta)); border: 1px solid color-mix(in srgb, var(--mu-gul) 45%, transparent); }
.mu-rad-ruta .mu-ikon { font-size: 1.8rem; }
.mu-rad-ruta b { display: block; color: var(--mu-text); margin: 4px 0; }
.mu-rad-ruta span { color: var(--mu-text2); font-size: .9rem; }
.mu-summering .mu-ovamer { margin: 8px 0 0; color: var(--mu-text2); font-size: .9rem; }

/* ── Tabelläget ────────────────────────────────────────────────── */
.mu-instr { text-align: center; color: var(--mu-text2); margin: 0; }
.mu-tabell { display: grid; grid-template-columns: 34px repeat(10, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 680px; margin: 0 auto; padding: 4px; border-radius: 14px; background: var(--mu-yta2); border: 1px solid var(--mu-kant); }
.mu-tabell .mu-th { display: flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 7px; font: 800 .85rem 'Orbitron', sans-serif; color: var(--mu-text2); background: var(--mu-yta); }
.mu-tabell .mu-th.mu-markerad { background: var(--mu-bla); color: #fff; }
#mu-mitt .mu-cell {
    min-height: clamp(30px, 5.2vh, 50px); padding: 0; border: 0; border-radius: 7px; cursor: pointer;
    font: 800 clamp(.72rem, 1.4vw, 1rem) 'Exo 2', sans-serif; color: #0f172a; box-shadow: none; transform: none;
    transition: transform .12s, filter .12s, opacity .2s;
}
#mu-mitt .mu-cell:hover { transform: scale(1.12); position: relative; z-index: 2; filter: brightness(1.08); }
.mu-tabell.mu-ledtrad .mu-cell:not(.mu-linje) { opacity: .45; }
.mu-cell.mu-linje { outline: 2px solid color-mix(in srgb, var(--mu-bla) 70%, transparent); outline-offset: -2px; }
.mu-cell.mu-rattpuls { animation: mu-ratt .7s ease; outline: 3px solid var(--mu-gron); outline-offset: -3px; opacity: 1 !important; }
.mu-cell.mu-fel-skak { animation: mu-skak .5s ease; }
.mu-cell.mu-visa { outline: 3px solid var(--mu-gron); outline-offset: -3px; opacity: 1 !important; animation: mu-ratt 1s ease infinite; }
@keyframes mu-ratt { 50% { transform: scale(1.18); } }
@keyframes mu-skak { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
#mu-mitt .mu-cell.r1 { background: linear-gradient(135deg, #fde68a, #fbbf24); }
#mu-mitt .mu-cell.r2 { background: linear-gradient(135deg, #a7f3d0, #34d399); }
#mu-mitt .mu-cell.r3 { background: linear-gradient(135deg, #bfdbfe, #60a5fa); }
#mu-mitt .mu-cell.r4 { background: linear-gradient(135deg, #fbcfe8, #f472b6); }
#mu-mitt .mu-cell.r5 { background: linear-gradient(135deg, #99f6e4, #14b8a6); }
#mu-mitt .mu-cell.r6 { background: linear-gradient(135deg, #ddd6fe, #a78bfa); }
#mu-mitt .mu-cell.r7 { background: linear-gradient(135deg, #fed7aa, #fb923c); }
#mu-mitt .mu-cell.r8 { background: linear-gradient(135deg, #bbf7d0, #4ade80); }
#mu-mitt .mu-cell.r9 { background: linear-gradient(135deg, #fecaca, #f87171); }
#mu-mitt .mu-cell.r10 { background: linear-gradient(135deg, #e0f2fe, #7dd3fc); }

/* ── Statistik ─────────────────────────────────────────────────── */
.mu-rutor { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.mu-rutor div { padding: 12px; border-radius: 12px; background: var(--mu-yta2); border: 1px solid var(--mu-kant); text-align: center; }
.mu-rutor b { display: block; font: 800 1.8rem 'Orbitron', sans-serif; color: var(--mu-text); }
.mu-rutor span { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mu-text2); }
.mu-rutor .f-fel b { color: var(--mu-rod); } .mu-rutor .f-lang b { color: var(--mu-gul); }
.mu-rutor .f-hjalp b { color: var(--mu-bla); } .mu-rutor .f-klar b { color: var(--mu-gron); }
.mu-tabellwrap { overflow-x: auto; }
.mu-tab { width: 100%; border-collapse: collapse; font-size: .92rem; color: var(--mu-text); }
.mu-tab th, .mu-tab td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--mu-kant); }
.mu-tab th { color: var(--mu-text2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
#mu-mitt .mu-tab th button { all: unset; cursor: pointer; }
#mu-mitt .mu-tab th button:focus-visible { outline: 2px solid var(--mu-bla); }
.mu-tab .c-bad { color: var(--mu-rod); font-weight: 800; }
.mu-tab .c-warn { color: var(--mu-gul); font-weight: 700; }
.mu-tab .c-ok { color: var(--mu-gron); }
#mu-mitt select { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--mu-kant2); background: var(--mu-yta2); color: var(--mu-text); font: 600 .95rem 'Exo 2', sans-serif; }
.mu-diagram { position: relative; height: 320px; }
.mu-tom { color: var(--mu-text2); text-align: center; padding: 24px 10px; }

/* ── Hjälp ─────────────────────────────────────────────────────── */
.mu-markering { padding: 12px 16px; border-left: 4px solid var(--mu-gron); border-radius: 8px; background: color-mix(in srgb, var(--mu-gron) 10%, var(--mu-yta)); color: var(--mu-text); }
.mu-markering strong { color: var(--mu-gron); }

@media (max-width: 560px) {
    .mu-lagen { grid-template-columns: 1fr; }
    .mu-steg { grid-template-columns: repeat(2, 1fr); }
    .mu-tabell { grid-template-columns: 26px repeat(10, minmax(0, 1fr)); gap: 2px; padding: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .mu-cell.mu-visa, .mu-cell.mu-rattpuls { animation: none; }
}

/* hidden-attributet ska alltid dölja, även knappar med egen display */
.mu-tema [hidden] { display: none !important; }