/* =====================================================================
   Kartspelet – stil
   css/mapgame.css   (mapgamemenu.php och mapgame.php)

   Förut hade båda sidorna fasta mörka färger (#0d1117 m.fl.) och en
   global nollställning (* {margin:0;padding:0}) som även slog mot
   sidhuvud och sidopanel. I det ljusa temat blev texten ljusgrå på
   vitt. Nu följer panelerna temat. Kartans hav och land behåller sina
   färger – de är kartan, inte sidan.

   style.css färgar "main button" i ljust tema och hav – reglerna här
   har id i väljaren (#mg-meny, #mg-vanster, #mw) och vinner därför.
   ===================================================================== */

.mg-tema {
    --mg-yta:   var(--color-bg-secondary, #161b22);
    --mg-yta2:  var(--color-bg-tertiary, #1c2230);
    --mg-kant:  var(--color-border-subtle, #2a3140);
    --mg-kant2: var(--color-accent-border, #3a4556);
    --mg-text:  var(--color-text-primary, #e6edf3);
    --mg-text2: var(--color-text-secondary, #a4adb8);
    --mg-mu:    var(--color-text-muted, #8b949e);
    --mg-gron:  #3ddc97;          /* rätt, valt */
    --mg-gron-t:#3ddc97;          /* grönt som textfärg */
    --mg-pa-gron:#06281a;
    --mg-rod:   #f85149;
    --mg-orange:#f0a500;          /* målet på kartan */
    --mg-orange-t:#f0a500;
    --mg-skugga: 0 6px 20px rgba(0,0,0,.35);
    color: var(--mg-text);
    font-family: 'Exo 2', system-ui, sans-serif;
}
[data-theme="ljus"] .mg-tema {
    --mg-yta: #ffffff; --mg-yta2: #f4f6f9; --mg-kant: #e2e8f0; --mg-kant2: #cbd5e1;
    --mg-text: #1e293b; --mg-text2: #475569; --mg-mu: #64748b;
    --mg-gron: #22c55e; --mg-gron-t: #15803d; --mg-pa-gron: #052e16;
    --mg-rod: #dc2626; --mg-orange-t: #b45309;
    --mg-skugga: 0 6px 18px rgba(35,48,58,.10);
}
.mg-tema *, .mg-tema *::before, .mg-tema *::after { box-sizing: border-box; }
.mg-tema :focus-visible { outline: 3px solid color-mix(in srgb, var(--mg-gron) 70%, transparent); outline-offset: 2px; }
.mg-tema [hidden], .mg-tema[hidden] { display: none !important; }

/* ── Knappar ─────────────────────────────────────────────────────── */
:is(#mg-meny, #mg-vanster, #mw) .mg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 16px;
    border-radius: 12px; border: 1px solid var(--mg-kant2); background: var(--mg-yta2); color: var(--mg-text);
    font: 700 .95rem 'Exo 2', system-ui, sans-serif; cursor: pointer; text-decoration: none; box-shadow: none; transform: none;
}
:is(#mg-meny, #mg-vanster, #mw) .mg-btn:hover { border-color: var(--mg-gron-t); background: var(--mg-yta2); }
:is(#mg-meny, #mg-vanster, #mw) .mg-btn.mg-primar { background: var(--mg-gron); border-color: transparent; color: var(--mg-pa-gron); }
:is(#mg-meny, #mg-vanster, #mw) .mg-btn.mg-primar:hover { filter: brightness(1.06); }
:is(#mg-meny, #mg-vanster, #mw) .mg-btn:disabled { opacity: .45; cursor: default; }
.mg-liten { font-size: .85rem; color: var(--mg-text2); margin: 6px 0 0; line-height: 1.45; }

/* ═════════════════════════════════════════════════════════════════
   Meny
   ═════════════════════════════════════════════════════════════════ */
#mg-meny { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 820px; margin: 0 auto; }
.mg-panel { background: var(--mg-yta); border: 1px solid var(--mg-kant); border-radius: 16px; padding: 16px 18px; box-shadow: var(--mg-skugga); }
.mg-panel > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 1.02rem 'Exo 2', sans-serif; color: var(--mg-text); }
.mg-nr { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: .8rem; font-weight: 800; border: 2px solid var(--mg-gron-t); color: var(--mg-gron-t); background: color-mix(in srgb, var(--mg-gron) 14%, transparent); }
.mg-badge { margin-left: auto; font: 600 .78rem 'Exo 2', sans-serif; color: var(--mg-text2); background: var(--mg-yta2); border: 1px solid var(--mg-kant); border-radius: 20px; padding: 2px 10px; }

/* Område */
#mg-meny .mg-varlden {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; margin-bottom: 8px; text-align: left;
    border: 2px solid var(--mg-kant); border-radius: 12px; background: var(--mg-yta2); color: var(--mg-text);
    font: 700 .95rem 'Exo 2', sans-serif; cursor: pointer; box-shadow: none;
}
#mg-meny .mg-varlden:hover { border-color: var(--mg-kant2); background: var(--mg-yta2); }
#mg-meny .mg-varlden[aria-pressed="true"] { border-color: var(--mg-gron-t); color: var(--mg-gron-t); background: color-mix(in srgb, var(--mg-gron) 12%, var(--mg-yta2)); }
.mg-varlden .mg-antal, .mg-kont .mg-antal { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--mg-mu); }
.mg-kontinenter { display: flex; flex-direction: column; gap: 6px; }
.mg-kont { border: 1px solid var(--mg-kant); border-radius: 12px; overflow: hidden; }
#mg-meny .mg-kont-knapp {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; text-align: left; border: 0; border-radius: 0;
    background: var(--mg-yta2); color: var(--mg-text); font: 700 .95rem 'Exo 2', sans-serif; cursor: pointer; box-shadow: none;
}
#mg-meny .mg-kont-knapp:hover { background: color-mix(in srgb, var(--mg-gron) 6%, var(--mg-yta2)); }
.mg-kont-knapp .mg-pil { color: var(--mg-mu); transition: transform .2s; }
.mg-kont-knapp[aria-expanded="true"] .mg-pil { transform: rotate(180deg); }
.mg-kont.mg-har-val { border-color: var(--mg-gron-t); }
.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--mg-kant); }
#mg-meny .mg-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 16px; min-height: 0;
    border: 1px solid var(--mg-kant2); background: var(--mg-yta); color: var(--mg-text2); font: 600 .85rem 'Exo 2', sans-serif; cursor: pointer; box-shadow: none;
}
#mg-meny .mg-chip:hover { border-color: var(--mg-gron-t); color: var(--mg-text); background: var(--mg-yta); }
#mg-meny .mg-chip[aria-pressed="true"] { background: var(--mg-gron); border-color: var(--mg-gron); color: var(--mg-pa-gron); }
#mg-meny .mg-chip:disabled { opacity: .4; cursor: default; }
.mg-chip small { opacity: .7; font-size: .78rem; }

/* Spelläge och antal */
.mg-lagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
#mg-meny .mg-lage, #mg-meny .mg-antalval {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left;
    border: 2px solid var(--mg-kant); border-radius: 12px; background: var(--mg-yta2); color: var(--mg-text); cursor: pointer; box-shadow: none; transform: none;
}
#mg-meny .mg-antalval { align-items: center; text-align: center; }
#mg-meny :is(.mg-lage, .mg-antalval):hover { border-color: var(--mg-kant2); background: var(--mg-yta2); }
#mg-meny :is(.mg-lage, .mg-antalval)[aria-checked="true"] { border-color: var(--mg-gron-t); background: color-mix(in srgb, var(--mg-gron) 12%, var(--mg-yta2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg-gron) 22%, transparent); }
.mg-lage .mg-ikon { font-size: 1.6rem; line-height: 1; }
.mg-lage b, .mg-antalval b { font-size: .95rem; }
.mg-lage small, .mg-antalval small { font-size: .78rem; color: var(--mg-text2); }
.mg-antal-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.mg-steg { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }

/* Förhandsvisning av länderna */
.mg-lander { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 7px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.mg-land { background: var(--mg-yta2); border: 1px solid var(--mg-kant); border-radius: 10px; padding: 7px 10px; min-width: 0; }
.mg-land-topp { display: flex; align-items: center; gap: 7px; }
.mg-land img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--mg-kant); }
.mg-land .mg-emoji { font-size: 1.1rem; line-height: 1; }
.mg-land b { font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }
.mg-land small { display: block; font-size: .74rem; color: var(--mg-mu); padding-left: 31px; }
.mg-tom { padding: 20px; text-align: center; color: var(--mg-mu); }
.mg-resultat { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mg-resultat td { padding: 6px 8px; border-bottom: 1px solid var(--mg-kant); }

/* ═════════════════════════════════════════════════════════════════
   Spelsidan
   ═════════════════════════════════════════════════════════════════ */
#mg-vanster { display: flex; flex-direction: column; gap: 12px; }
#mg-vanster h1 { margin: 0; font: 800 1rem 'Orbitron', sans-serif; letter-spacing: .04em; color: var(--mg-text); }
.mg-info { font-size: .82rem; color: var(--mg-text2); }
.mg-framsteg { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .9rem; color: var(--mg-text2); }
.mg-bar { height: 6px; background: var(--mg-yta2); border: 1px solid var(--mg-kant); border-radius: 4px; overflow: hidden; }
.mg-bar i { display: block; height: 100%; width: 0; background: var(--mg-gron); transition: width .3s; }
.mg-fraga { background: var(--mg-yta2); border: 1px solid var(--mg-kant); border-radius: 14px; padding: 12px 14px; text-align: center; }
.mg-fraga-etikett { font-size: .82rem; color: var(--mg-text2); padding: 0 36px; }
.mg-fraga-text { font: 800 1.35rem 'Exo 2', sans-serif; color: var(--mg-text); margin-top: 2px; overflow-wrap: anywhere; }
.mg-fraga-text.mg-pop { animation: mg-pop .35s ease; }
@keyframes mg-pop { 50% { transform: scale(1.06); } }
.mg-flagga-fraga { margin-top: 8px; }
.mg-flagga-fraga img { width: 110px; height: 73px; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 2px var(--mg-kant2); }
.mg-flagga-fraga .mg-emoji { font-size: 4rem; line-height: 1; }
.mg-fraga { position: relative; }
/* 🔊 läser upp frågan */
#mw .mg-lasknapp, .mg-lasknapp {
    position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; padding: 0; border-radius: 50%;
    border: 1px solid var(--mg-kant2); background: var(--mg-yta); color: var(--mg-text); font-size: 1rem; line-height: 1; cursor: pointer;
}
.mg-lasknapp:hover { background: var(--mg-yta2); }
.mg-lasknapp:focus-visible { outline: 3px solid var(--mg-gron-t); outline-offset: 2px; }
.mg-lasknapp[hidden] { display: none; }
/* Landets namn på det andra språket (tvåspråksläget) */
.mg-namn2 { display: block; font-size: .85rem; font-style: italic; color: var(--mg-text2); }
.mg-namn2[hidden] { display: none; }
/* Rutan «Läs upp» under startkortet i menyn */
.mg-kryss { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
    background: var(--color-bg-secondary, rgba(255,255,255,.06)); border: 1px solid var(--color-border, rgba(255,255,255,.18)); color: var(--color-text-primary, inherit); font-weight: 700; font-size: .92rem; }
.mg-kryss input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #2ea043; }
.mg-svar { min-height: 1.4em; text-align: center; font-weight: 700; font-size: .92rem; border-radius: 10px; padding: 6px 10px; }
.mg-svar:empty { padding: 0; }
.mg-svar.ok  { color: var(--mg-gron-t); background: color-mix(in srgb, var(--mg-gron) 12%, transparent); }
.mg-svar.fel { color: var(--mg-rod); background: color-mix(in srgb, var(--mg-rod) 10%, transparent); }
.mg-kort { display: flex; align-items: center; gap: 12px; background: var(--mg-yta); border: 2px solid var(--mg-gron); border-radius: 14px; padding: 12px 14px; box-shadow: var(--mg-skugga); }
.mg-kort img { width: 54px; height: 36px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--mg-kant); flex-shrink: 0; }
.mg-kort .mg-emoji { font-size: 2.2rem; line-height: 1; }
.mg-kort b { display: block; color: var(--mg-gron-t); font-size: 1.05rem; }
.mg-kort small { color: var(--mg-text2); font-size: .85rem; }
#mg-vanster .mg-btn { width: 100%; }
.mg-tangent { font-size: .75rem; color: var(--mg-mu); text-align: center; }

/* Kartan */
.content-container.mg-karta { padding: 0; overflow: hidden; }
/* Ingen will-change/translateZ här: de lade kartan i ett eget lager som
   skalades som en bild, och då blev den suddig vid inzoomning. Zoomen
   görs med viewBox (mapgame.php, applyTransform), så SVG:n ritas skarpt. */
.mapwrap { flex: 1; min-height: 320px; overflow: hidden; position: relative; background: #2E8BC0; border-radius: inherit;
    touch-action: none; user-select: none; -webkit-user-select: none; }
#mapSvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.grat { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1px; }
.grat line { vector-effect: non-scaling-stroke; }   /* ärvs inte från gruppen */
/* Kantlinjerna har samma tjocklek på skärmen vid alla zoomnivåer. */
.country { stroke: rgba(0,0,0,.55); stroke-width: .9px; vector-effect: non-scaling-stroke; cursor: pointer; fill: #2F5D50; }
.country:hover { fill: #2ecc71; }
.no-hover .country:hover { fill: #2F5D50; }
.country.mg-utanfor { fill: #53705f; cursor: default; }
.country.mg-utanfor:hover, .no-hover .country.mg-utanfor:hover { fill: #53705f; }
.country.target  { fill: #f0a500 !important; stroke: #fff3c4; stroke-width: 2px; animation: mg-blink 1.1s ease-in-out infinite; }
.country.correct { fill: #3ddc97 !important; stroke: #d6ffe9; stroke-width: 1.6px; }
.country.wrong   { fill: #f85149 !important; }
@keyframes mg-blink { 50% { opacity: .55; } }

/* Uppe till höger: nere ligger svarsalternativen och figuren i vägen. */
.mg-zoom { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 10; }
#mw .mg-zoom button {
    width: 38px; height: 38px; padding: 0; border-radius: 8px; border: 1px solid var(--mg-kant2); background: var(--mg-yta); color: var(--mg-text);
    font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--mg-skugga);
}
#mw .mg-zoom button:hover { background: var(--mg-yta2); }

.mg-tips { position: absolute; z-index: 18; background: var(--mg-yta); border: 1px solid var(--mg-kant2); border-radius: 12px; padding: 10px 14px;
    display: flex; align-items: center; gap: 10px; pointer-events: none; opacity: 0; transition: opacity .2s; max-width: 240px; box-shadow: var(--mg-skugga); }
.mg-tips.mg-syns { opacity: 1; }
.mg-tips img { width: 40px; height: 27px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.mg-tips .mg-emoji { font-size: 1.6rem; line-height: 1; }
.mg-tips b { display: block; font-size: .9rem; }
.mg-tips small { font-size: .78rem; color: var(--mg-text2); }

.mg-val { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; padding: 12px 16px 14px;
    background: color-mix(in srgb, var(--mg-yta) 94%, transparent); border-top: 1px solid var(--mg-kant2); backdrop-filter: blur(4px); }
.mg-val-fraga { text-align: center; font-size: .88rem; color: var(--mg-text2); margin-bottom: 8px; }
.mg-val-rutnat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 640px; margin: 0 auto; }
#mw .mg-alt {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; text-align: left; min-height: 44px;
    border: 2px solid var(--mg-kant2); background: var(--mg-yta2); color: var(--mg-text); font: 700 .92rem 'Exo 2', sans-serif; cursor: pointer; box-shadow: none;
}
#mw .mg-alt:hover:not(:disabled) { border-color: var(--mg-gron-t); background: var(--mg-yta2); }
#mw .mg-alt:disabled { cursor: default; }
#mw .mg-alt.mg-ratt { border-color: var(--mg-gron); background: color-mix(in srgb, var(--mg-gron) 18%, var(--mg-yta2)); color: var(--mg-gron-t); }
#mw .mg-alt.mg-fel  { border-color: var(--mg-rod); background: color-mix(in srgb, var(--mg-rod) 12%, var(--mg-yta2)); color: var(--mg-rod); }
.mg-alt .mg-nrtangent { font-size: .72rem; font-weight: 800; color: var(--mg-mu); border: 1px solid var(--mg-kant2); border-radius: 5px; padding: 0 5px; }
.mg-alt img { width: 40px; height: 27px; object-fit: cover; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--mg-kant); }
.mg-alt .mg-emoji { font-size: 1.5rem; line-height: 1; }
.mg-alt .mg-altnamn { font-size: .8rem; color: var(--mg-text2); }

.mg-slut { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: color-mix(in srgb, var(--mg-yta) 88%, transparent); backdrop-filter: blur(3px); }
.mg-slut-ruta { text-align: center; background: var(--mg-yta); border: 1px solid var(--mg-kant2); border-radius: 18px; padding: 24px 28px; box-shadow: var(--mg-skugga); max-width: 420px; }
.mg-slut-ruta h2 { margin: 0 0 6px; font: 800 1.8rem 'Orbitron', sans-serif; color: var(--mg-gron-t); }
.mg-slut-ruta p { margin: 0 0 6px; color: var(--mg-text2); }
.mg-slut-stjarnor { font-size: 2rem; }
.mg-slut-rad { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) { .mg-tema *, .country.target { animation: none !important; transition: none !important; } }
@media (max-width: 600px) {
    .mg-lagen { grid-template-columns: 1fr 1fr; }
    .mg-lander { grid-template-columns: 1fr 1fr; }
    .mg-val-rutnat { grid-template-columns: 1fr; }
}
/* Mobil: sidan scrollar, så kartan behöver en egen höjd */
@media (max-width: 48em), (max-height: 30em) {
    .content-container.mg-karta { padding: 0 !important; }
    .mapwrap { height: 62vh; min-height: 280px; }
}
@media (max-width: 48em), (max-height: 30em) {
    #mg-vanster h1 { display: none; }
    #mg-vanster { gap: 8px; }
    .mg-fraga { padding: 8px 10px; }
    .mg-fraga-text { font-size: 1.15rem; }
}
@media (pointer: coarse) { .mg-tangent { display: none !important; } }