/* =====================================================================
   LÅTPUSSLET – css/ks-musicpuzzle.css
   (musicpuzzlemenu.php, musicpuzzle.php, motorn js/ks-musicpuzzle.js)

   Pusselbitarna har egna fasta färger (tonens färg) i alla teman – de
   är leksaker. Allt annat använder temavariablerna.
   ===================================================================== */

main .mp-rubrik { display: flex; align-items: center; gap: 8px; }
main .mp-rubrik #mpRubrikIkon { -webkit-text-fill-color: initial; background: none; color: initial; }
main .mp-yta { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

/* ── En pusselbit ───────────────────────────────────────────────── */
.mp-bit {
    --w: 56px;
    position: relative; width: calc(var(--w) * 1.27); height: calc(var(--w) * 1.06);
    display: block; pointer-events: none; user-select: none; -webkit-user-select: none;
}
.mp-bit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.mp-bit.mp-tom svg { filter: none; }
.mp-bit .mp-hal { fill: color-mix(in srgb, var(--color-bg-tertiary, #222) 70%, transparent); stroke: var(--color-border-subtle, #555); stroke-width: 2.5; stroke-dasharray: 6 5; }
.mp-bit .mp-ikon, .mp-bit .mp-namn {
    position: absolute; left: 2.4%; width: 78.7%; text-align: center; line-height: 1;
    color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); font-family: 'Exo 2', sans-serif;
}
.mp-bit .mp-ikon { top: 12%; font-size: calc(var(--w) * .34); text-shadow: none; }
.mp-bit .mp-namn { bottom: 11%; font-size: calc(var(--w) * .3); font-weight: 800; white-space: nowrap; overflow: hidden; }
.mp-bit.mp-morktext .mp-namn { color: #263238; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.mp-bit.mp-hog .mp-namn::after { content: '\2019'; }         /* hög ton: C' D' */
.mp-bit.mp-tyst .mp-namn, .mp-bit.mp-hallbit .mp-namn { font-size: calc(var(--w) * .2); font-weight: 700; }

/* ── Banan ──────────────────────────────────────────────────────── */
main .mp-bana { width: 100%; background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle); border-radius: 16px; padding: 10px 6px 12px; }
main .mp-skala { overflow-x: auto; padding: 4px 4px 10px; }
main .mp-slagrad, main .mp-spar { display: flex; align-items: center; width: max-content; }
main .mp-spar { margin-top: 6px; }
main .mp-etikett {
    position: sticky; left: 0; z-index: 3; flex: 0 0 76px; align-self: stretch; display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-secondary); color: var(--color-text-secondary); font: 700 .8rem 'Exo 2', sans-serif; text-align: center; padding-right: 6px;
}
main .mp-slagnr { flex: 0 0 var(--steg, 56px); text-align: left; padding-left: 14px; font: 700 .72rem 'Exo 2', sans-serif; color: var(--color-text-muted); }
main .mp-slagnr.mp-takt { color: var(--color-accent-gold); }
main .mp-slagnr.mp-takt, main .mp-plats.mp-takt { margin-left: 10px; }
:root main button.mp-plats:not(.sc-start):not(.ks-tts-figur) {
    position: relative; flex: 0 0 var(--steg, 56px); height: calc(var(--steg, 56px) * 1.06); padding: 0; margin: 0;
    background: none; border: 0; box-shadow: none; cursor: pointer; border-radius: 10px; touch-action: pan-x;
}
:root main button.mp-plats.mp-full:not(.sc-start):not(.ks-tts-figur) { touch-action: none; }
main .mp-plats .mp-bit { --w: var(--steg, 56px); position: absolute; left: 0; top: 0; }
main .mp-plats.mp-takt::before { content: ''; position: absolute; left: -6px; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--color-border-subtle); }
main .mp-plats:focus-visible { outline: 3px solid var(--color-accent-gold); outline-offset: 2px; }
main .mp-plats.mp-over .mp-bit svg path:first-child { stroke: var(--color-accent-gold) !important; stroke-width: 5 !important; stroke-dasharray: none !important; }
main .mp-plats.mp-nu .mp-bit { transform: translateY(-5px) scale(1.06); transition: transform .08s; }
main .mp-plats.mp-nu::after { content: ''; position: absolute; left: 6%; right: 24%; bottom: -8px; height: 4px; border-radius: 3px; background: var(--color-accent-gold); }
main .mp-plats.mp-lyft .mp-bit { opacity: .3; }
main .mp-plats.mp-plopp .mp-bit { animation: mpPlopp .25s ease-out; }
main .mp-plats.mp-last { cursor: default; }
main .mp-plats.mp-last .mp-bit svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)) saturate(.85); }
main .mp-plats.mp-ratt::after { content: '✓'; position: absolute; right: 18%; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: #16a34a; color: #fff; font: 800 .75rem/18px sans-serif; text-align: center; z-index: 2; }
main .mp-plats.mp-fel .mp-bit { animation: mpSkak .45s; }
main .mp-plats.mp-fel::after { content: '✗'; position: absolute; right: 18%; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: #dc2626; color: #fff; font: 800 .75rem/18px sans-serif; text-align: center; z-index: 2; }
main .mp-plats.mp-tips .mp-bit .mp-hal { stroke: var(--color-accent-gold); stroke-dasharray: none; stroke-width: 4; animation: mpBlink .6s 3; }
@keyframes mpPlopp { 0% { transform: scale(.7); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes mpSkak { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes mpBlink { 50% { opacity: .3; } }

/* Spöket som följer pekaren när man drar */
.mp-spok { position: fixed; z-index: 3000; pointer-events: none; transform: translate(-40%, -50%) scale(1.12) rotate(-4deg); --w: 60px; }
body.mp-drar, body.mp-drar * { cursor: grabbing !important; }

/* ── Lådan ──────────────────────────────────────────────────────── */
main .mp-ladrubrik { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
:root main button.mp-instr:not(.sc-start):not(.ks-tts-figur) {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
    background: var(--color-bg-secondary); color: var(--color-text-primary); border: 2px solid var(--color-border-subtle);
    font: 700 .9rem 'Exo 2', sans-serif; box-shadow: none;
}
:root main button.mp-instr[aria-pressed="true"]:not(.sc-start):not(.ks-tts-figur) { border-color: var(--color-accent-gold); background: var(--color-bg-tertiary); }
main .mp-instr span { font-size: 1.2rem; }
main .mp-lada { display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: center; padding: 10px; border-radius: 16px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle); min-height: 84px; }
:root main button.mp-ladbit:not(.sc-start):not(.ks-tts-figur) {
    position: relative; padding: 4px 2px 2px 6px; border-radius: 12px; background: none; border: 2px solid transparent; box-shadow: none;
    cursor: grab; touch-action: none;
}
:root main button.mp-ladbit:not(.sc-start):not(.ks-tts-figur):hover { border-color: var(--color-border-subtle); }
:root main button.mp-ladbit[aria-pressed="true"]:not(.sc-start):not(.ks-tts-figur) { border-color: var(--color-accent-gold); background: color-mix(in srgb, var(--color-accent-gold) 14%, transparent); }
:root main button.mp-ladbit:disabled:not(.sc-start):not(.ks-tts-figur) { opacity: .3; cursor: not-allowed; }
main .mp-ladbit .mp-bit { --w: 52px; }
main .mp-ladbit.mp-lyft .mp-bit { opacity: .5; }
main .mp-antal { position: absolute; right: 4px; top: 0; font: 800 .75rem 'Exo 2', sans-serif; color: var(--color-text-primary); background: var(--color-bg-tertiary); border-radius: 999px; padding: 1px 6px; }
main .mp-sudd { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; height: 62px; color: var(--color-text-secondary); font: 700 .75rem 'Exo 2', sans-serif; }
main .mp-suddikon { font-size: 1.6rem; line-height: 1; }

/* ── Kontrollraden ──────────────────────────────────────────────── */
main .mp-kontroll { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
main .mp-kontroll .bg-knapp { width: auto; padding-left: 14px; padding-right: 14px; }
main .mp-tempo { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-secondary); font: 700 .85rem 'Exo 2', sans-serif; }
main .mp-tempo input { accent-color: var(--color-accent-gold); width: 120px; }
main .mp-meddelande { min-height: 1.4em; text-align: center; font: 700 clamp(1rem, 2vw, 1.2rem) 'Exo 2', sans-serif; color: var(--color-text-primary); }
main .mp-meddelande.ratt { color: var(--color-success, #4ade80); }
main .mp-meddelande.fel { color: var(--color-error, #f87171); }
[data-theme="ljus"] main .mp-meddelande.ratt { color: #15803d; }
[data-theme="ljus"] main .mp-meddelande.fel { color: #b91c1c; }

/* ── Dialoger (spara, mina låtar, dela) ─────────────────────────── */
.mp-dialog { border: 2px solid var(--color-accent-gold); border-radius: 16px; background: var(--color-bg-secondary); color: var(--color-text-primary); padding: 18px; max-width: min(92vw, 460px); width: 100%; }
.mp-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.mp-dialog h3 { margin: 0 0 10px; font: 800 1.15rem 'Exo 2', sans-serif; }
.mp-dialog input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--color-border-subtle); background: var(--color-bg-primary); color: var(--color-text-primary); font: 600 1rem 'Exo 2', sans-serif; }
.mp-dialog .mp-dlg-knappar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.mp-dialog .mp-latlista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.mp-dialog .mp-latlista li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--color-bg-tertiary); }
.mp-dialog .mp-latlista li b { flex: 1; }
.mp-dialog .mp-latlista small { color: var(--color-text-muted); }

/* ── Menyn: mina låtar ──────────────────────────────────────────── */
main .mp-mina { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
main .mp-mina li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-subtle); }
main .mp-mina li b { flex: 1; color: var(--color-text-primary); }
main .mp-mina small { color: var(--color-text-muted); }
main .mp-mina .km-btn { padding: 6px 10px; }
main .mp-mina-tom[hidden], main .mp-mina[hidden] { display: none; }

@media (max-width: 700px) {
    main .mp-bana { --steg: 46px; }
    main .mp-etikett { flex-basis: 50px; font-size: .7rem; }
    main .mp-ladbit .mp-bit { --w: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    main .mp-plats.mp-plopp .mp-bit, main .mp-plats.mp-fel .mp-bit { animation: none; }
}