/* =====================================================================
   AROUND THE WORLD – jordgloben med flygplanet och spelets delar
   css/ks-aroundtheworld.css   (aroundtheworldmenu.php och aroundtheworld.php)

   Färger ur temat (var(--color-…)) så att sidan fungerar i alla teman.
   Rätt/fel-färgerna är mörkade så att vit text klarar 4.5 i kontrast.
   ===================================================================== */

/* ── Jordgloben: alla spelares gemensamma resa ─────────────────────── */
main .atw-varld {
    display: grid; justify-items: center; gap: 10px; text-align: center;
    padding: 16px; border-radius: 18px;
    background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle);
}
main .atw-varld .atw-rubrik {
    margin: 0; font: 700 .72rem 'Orbitron', sans-serif; letter-spacing: 2px; text-transform: uppercase;
    color: var(--color-text-muted);
}
main .atw-bana {
    position: relative; width: min(190px, 70vw); aspect-ratio: 1; max-width: 100%;
}
main .atw-bana svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
main .atw-bana .spar   { fill: none; stroke: var(--color-border-subtle); stroke-width: 2; stroke-dasharray: 4 7; }
main .atw-bana .flugit { fill: none; stroke: var(--color-accent-gold); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .9s ease; }
main .atw-glob {
    position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%);
    display: grid; place-items: center; font-size: 3.4rem; line-height: 1;
}
main .atw-glob img, main .atw-plan img { width: 100%; height: 100%; display: block; }
main .atw-plan {
    position: absolute; width: 17%; height: 17%; margin: -8.5% 0 0 -8.5%; left: 50%; top: 0;
    font-size: 1.8rem; line-height: 1; display: grid; place-items: center;
    transition: left .9s ease, top .9s ease, transform .9s ease;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}
main .atw-varv { margin: 0; font: 800 1.35rem 'Orbitron', sans-serif; color: var(--color-accent-gold); }
main .atw-varv small { display: block; font: 600 .82rem 'Exo 2', sans-serif; color: var(--color-text-secondary); margin-top: 4px; }
main .atw-nasta { margin: 0; font-size: .82rem; color: var(--color-text-muted); }
main .atw-plus { color: #22c55e; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
    main .atw-plan, main .atw-bana .flugit { transition: none; }
}

/* ── Frasvalet på menysidan ───────────────────────────────────────── */
main .atw-fraser .mm-knapp small { display: block; margin-top: 2px; font-size: .78rem; color: var(--color-text-muted); }

/* ── Spelsidan ───────────────────────────────────────────────────── */
main .atw-spel { display: contents; }
main .atw-spel[hidden] { display: none; }
main .atw-kort {
    width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box;
    display: grid; gap: 14px; justify-items: center; text-align: center;
    padding: clamp(14px, 3vw, 26px); border-radius: 20px;
    background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle);
}
main .atw-fraga { margin: 0; font: 600 1.05rem 'Exo 2', sans-serif; color: var(--color-text-secondary); }
main .atw-ordet {
    margin: 0; min-height: 1.4em; padding: 10px 22px; border-radius: 14px;
    font: 700 clamp(1.6rem, 4.4vw, 2.4rem)/1.3 'Exo 2', sans-serif; color: var(--color-text-primary);
    background: var(--color-bg-tertiary); border: 2px solid var(--color-accent-gold);
    overflow-wrap: anywhere;
}
:root main button.atw-lyssna:not(.sc-start):not(.ks-tts-figur) {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 10px 22px; border-radius: 999px; font: 700 1rem 'Exo 2', sans-serif;
    background: #1d4ed8; border: 2px solid #1d4ed8; color: #fff;
}
:root main button.atw-lyssna:not(.sc-start):not(.ks-tts-figur):hover { background: #1e40af; }
main .atw-lyssna.talar { animation: atwPuls 1s ease-in-out infinite; }
@keyframes atwPuls { 50% { box-shadow: 0 0 0 8px rgba(29, 78, 216, .25); } }

main .atw-svar { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
:root main .atw-svar button.atw-alt:not(.sc-start):not(.ks-tts-figur) {
    display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; cursor: pointer; text-align: left;
    border-radius: 14px; font: 700 1rem 'Exo 2', sans-serif;
    background: var(--color-bg-tertiary); color: var(--color-text-primary); border: 2px solid var(--color-border-subtle);
    transition: border-color .15s ease, transform .1s ease;
}
:root main .atw-svar button.atw-alt:not(.sc-start):not(.ks-tts-figur):hover:not(:disabled) { border-color: var(--color-accent-gold); }
:root main .atw-svar button.atw-alt:not(.sc-start):not(.ks-tts-figur):active:not(:disabled) { transform: scale(.98); }
:root main .atw-svar button.atw-alt.ratt:not(.sc-start):not(.ks-tts-figur) { background: #15803d; border-color: #15803d; color: #fff; }
:root main .atw-svar button.atw-alt.fel:not(.sc-start):not(.ks-tts-figur) { background: #b91c1c; border-color: #b91c1c; color: #fff; opacity: .85; }
:root main .atw-svar button.atw-alt:disabled { cursor: default; }
main .atw-alt .flagga { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 1.7rem; line-height: 1; }
main .atw-alt .flagga img { width: 100%; height: 100%; }
main .atw-alt .tangent { margin-left: auto; font: 600 .72rem 'Exo 2', sans-serif; opacity: .55; }

main .atw-resultat { margin: 0; min-height: 1.5em; font: 700 1.05rem 'Exo 2', sans-serif; color: var(--color-text-primary); }
main .atw-fakta {
    width: 100%; box-sizing: border-box; margin: 0; padding: 12px 16px; border-radius: 14px; text-align: left;
    background: var(--color-bg-tertiary); border-left: 4px solid var(--color-accent-gold);
    color: var(--color-text-secondary); font-size: .95rem; line-height: 1.55;
}
main .atw-fakta b { color: var(--color-text-primary); }
main .atw-knappar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
main .atw-meddelande { margin: 0; color: var(--color-text-secondary); max-width: 52ch; line-height: 1.55; }

/* Vänsterpanelen i spelet */
main .atw-panel { display: grid; gap: 14px; }
main .atw-status { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px;
    background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle); }
main .atw-status p { margin: 0; color: var(--color-text-secondary); }
main .atw-status b { color: var(--color-text-primary); }
main .atw-framsteg { height: 8px; border-radius: 4px; background: var(--color-bg-tertiary); overflow: hidden; }
main .atw-framsteg span { display: block; height: 100%; width: 0; background: var(--color-accent-gold); transition: width .4s ease; }