/* =====================================================================
   NATTHIMLEN JORDEN RUNT – stil för nightskymenu.php och nightsky.php
   css/ks-nightsky.css   (panelerna och valknapparna: css/ks-braingym.css)

   Himlen och städernas siluetter är med flit alltid nattmörka i alla
   teman – precis som rymdfönstret i Rymdstationen. Allt annat (paneler,
   talet, sifferknapparna) följer temat.
   ===================================================================== */

/* ── Menysidan: resvägen ── */
main .ns-rutt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
main .ns-rutt li {
    display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 8px; padding: 8px 10px;
    border-radius: 12px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle); color: var(--color-text-secondary);
}
main .ns-rutt li b {
    grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font: 700 .85rem 'Exo 2', sans-serif; background: var(--color-bg-tertiary); color: var(--color-text-muted);
}
main .ns-rutt li span { font-weight: 700; color: var(--color-text-primary); }
main .ns-rutt li small { font-size: .78rem; color: var(--color-text-muted); }
main .ns-rutt li.klar b { background: #16a34a; color: #fff; }
main .ns-rutt li.nu { border-color: var(--color-accent-gold); box-shadow: inset 0 -3px 0 var(--color-accent-gold); }
main .ns-rutt li.nu b { background: var(--color-accent-gold); color: #1f2937; }
main .ns-rutt.liten { grid-template-columns: 1fr 1fr; gap: 5px; }
main .ns-rutt.liten li { padding: 4px 6px; grid-template-columns: 22px 1fr; font-size: .82rem; }
main .ns-rutt.liten li b { width: 22px; height: 22px; font-size: .72rem; grid-row: auto; }
:root main button.ns-omstart:not(.sc-start):not(.ks-tts-figur) {
    margin-top: 10px; padding: 8px 14px; min-height: 40px; border-radius: 12px; cursor: pointer; box-shadow: none;
    font: 600 .9rem 'Exo 2', sans-serif; background: transparent; color: var(--color-text-secondary); border: 2px dashed var(--color-border-subtle);
}
:root main button.ns-omstart:not(.sc-start):not(.ks-tts-figur):hover { border-color: var(--color-accent-gold); color: var(--color-text-primary); }
main .ns-omstart[hidden] { display: none; }

/* ── Spelsidan: panelen ── */
main .ns-stad { font: 800 1.5rem 'Exo 2', sans-serif; color: var(--color-text-primary); line-height: 1.15; }
main .ns-land { color: var(--color-text-secondary); font-size: .9rem; }
main .ns-halsning { margin-top: 6px; display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 700; background: var(--color-bg-tertiary); color: var(--color-accent-gold); }
main .ns-bildnamn { font: 700 1.1rem 'Exo 2', sans-serif; color: var(--color-text-primary); margin-bottom: 8px; }
main .ns-prickar { display: flex; flex-wrap: wrap; gap: 6px; }
main .ns-prickar i { width: 18px; height: 18px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: var(--color-border-subtle); transition: background .3s, transform .3s; }
main .ns-prickar i.tand { background: #facc15; transform: scale(1.15); }

/* ── Himlen ── */
main .ns-spelyta { gap: 12px; }
main .ns-himmelram { position: relative; width: min(100%, 860px, calc(44vh * 800 / 440)); margin: 0 auto; }
main .ns-himmel {
    width: 100%; aspect-ratio: 800 / 440; border-radius: 18px; overflow: hidden; background: #020617;
    border: 2px solid var(--color-border-subtle); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); transition: opacity .6s;
}
main .ns-himmel svg { display: block; width: 100%; height: 100%; }
main .ns-himmel.tonar { opacity: .15; transition-delay: 1.1s; }
main .ns-bak0 { fill: #fff; opacity: .7; }
main .ns-bak1 { fill: #dbeafe; opacity: .5; animation: nsBlinka 3s ease-in-out infinite; }
main .ns-bak2 { fill: #fef9c3; opacity: .45; animation: nsBlinka 4.5s ease-in-out infinite reverse; }
@keyframes nsBlinka { 50% { opacity: .1; } }

/* Stjärnbildens stjärnor: en svag prick visar platsen, sedan tänds den */
main .ns-plats { fill: none; stroke: #94a3b8; stroke-width: 1.2; stroke-dasharray: 2 2; opacity: .55; }
main .ns-glod { fill: url(#nsGlod); opacity: 0; }
main .ns-gnista { fill: #fef3c7; opacity: 0; }
main .ns-karna { fill: #fff; opacity: 0; }
main .ns-bildstjarna.tand .ns-plats { opacity: 0; }
main .ns-bildstjarna.tand .ns-glod, main .ns-bildstjarna.tand .ns-gnista, main .ns-bildstjarna.tand .ns-karna { opacity: 1; }
main .ns-bildstjarna.tand .ns-gnista { animation: nsGnistra 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
main .ns-bildstjarna.ny > * { animation: nsTand .7s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
@keyframes nsTand { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.6); opacity: 1; } }
@keyframes nsGnistra { 50% { transform: scale(.82) rotate(12deg); } }

main .ns-linje { stroke: #93c5fd; stroke-width: 2; stroke-linecap: round; opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; }
main .ns-himmel.klar .ns-linje { opacity: .75; animation: nsLinje .8s ease-out forwards; }
@keyframes nsLinje { to { stroke-dashoffset: 0; } }
main .ns-bildtext { font: 700 20px 'Exo 2', sans-serif; fill: #e0e7ff; text-anchor: middle; opacity: 0; letter-spacing: 2px; }
main .ns-himmel.klar .ns-bildtext { animation: nsTona 1s ease-out .9s forwards; }
@keyframes nsTona { to { opacity: .95; } }

main .ns-stjarnfall line { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
main .ns-stjarnfall { opacity: 0; }
main .ns-stjarnfall.flyg { animation: nsFall 1.2s ease-in .3s; }
@keyframes nsFall { 0% { opacity: 0; transform: translate(260px, 30px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(620px, 170px); } }

main .ns-plan { opacity: 0; fill: #fff; }
main .ns-plan.flyger { animation: nsFlyg 2s cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes nsFlyg { 0% { opacity: 1; transform: translate(-60px, 260px) rotate(-12deg); } 100% { opacity: 1; transform: translate(860px, 60px) rotate(-12deg); } }

main .ns-fonster { fill: #fde68a; opacity: .85; }
main .ns-fonster:nth-of-type(5n) { animation: nsFonster 7s steps(1) infinite; }
@keyframes nsFonster { 50% { opacity: .15; } }
main .ns-blink { animation: nsBlinka 1.4s steps(2) infinite; }
main .ns-fackla { animation: nsFackla 1.6s ease-in-out infinite; }
@keyframes nsFackla { 50% { opacity: .55; } }
main .ns-vagor path { fill: none; stroke: #334e8a; stroke-width: 2; opacity: .6; animation: nsVag 6s linear infinite; }
@keyframes nsVag { to { transform: translateX(-80px); } }

/* ── Talet ── */
main .ns-uppgift {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 76px;
    font: 800 clamp(1.8rem, 5vw, 3rem) 'Exo 2', sans-serif; color: var(--color-text-primary);
}
main .ns-tal { min-width: 1.2em; text-align: center; }
main .ns-op { color: var(--color-accent-gold); }
main .ns-tal.lucka {
    position: relative; min-width: 2.2em; padding: 2px 12px; border-radius: 14px; background: var(--color-bg-secondary);
    border: 3px dashed var(--color-accent-gold); line-height: 1.2;
}
main .ns-markor { display: inline-block; width: 3px; height: .9em; margin-left: 2px; vertical-align: -0.08em; background: var(--color-accent-gold); animation: nsMarkor 1s steps(2) infinite; }
@keyframes nsMarkor { 50% { opacity: 0; } }
main .ns-tal.lucka.ratt { border-style: solid; border-color: #16a34a; background: rgba(22, 163, 74, .18); animation: nsPop .4s ease; }
main .ns-tal.lucka.fel { border-color: #dc2626; animation: nsSkak .35s ease; }
main .ns-tal.lucka.facit { border-style: solid; border-color: #2563eb; background: rgba(37, 99, 235, .15); }
@keyframes nsPop { 50% { transform: scale(1.15); } }
@keyframes nsSkak { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
main .ns-svar { min-height: 1.5em; text-align: center; font: 700 1.05rem 'Exo 2', sans-serif; color: var(--color-text-secondary); }
main .ns-svar.ratt { color: #16a34a; }
main .ns-svar.fel { color: #dc2626; }
main .ns-svar.visa { color: var(--color-text-primary); }

/* ── Sifferknapparna ── */
main .ns-knappsats { --k: clamp(46px, 6.6vh, 66px); display: grid; grid-template-columns: repeat(3, var(--k)); gap: 8px; justify-content: center; }
:root main button.ns-knapp:not(.sc-start):not(.ks-tts-figur) {
    width: var(--k); height: var(--k); min-height: 0; padding: 0; border-radius: 16px; cursor: pointer; box-shadow: 0 3px 0 var(--color-border-subtle);
    font: 800 calc(var(--k) * .42) 'Exo 2', sans-serif; background: var(--color-bg-secondary); color: var(--color-text-primary);
    border: 2px solid var(--color-border-subtle); transition: transform .08s, border-color .15s;
}
:root main button.ns-knapp:not(.sc-start):not(.ks-tts-figur):hover { border-color: var(--color-accent-gold); }
:root main button.ns-knapp:not(.sc-start):not(.ks-tts-figur):active { transform: translateY(2px) scale(.96); box-shadow: none; }
:root main button.ns-knapp:not(.sc-start):not(.ks-tts-figur):focus-visible { outline: 3px solid var(--color-accent-gold); outline-offset: 2px; }
:root main button.ns-knapp.svara:not(.sc-start):not(.ks-tts-figur) { background: var(--color-accent-gold); color: #1f2937; border-color: var(--color-accent-gold); }
:root main button.ns-knapp.sudda:not(.sc-start):not(.ks-tts-figur) { color: #dc2626; }
main .ns-tangenttips { text-align: center; }

/* Talet till vänster och knapparna till höger på bred skärm, under varandra på smal */
main .ns-nedre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 40px; width: 100%; }
main .ns-nedre[hidden], main .ns-klar[hidden] { display: none; }
main .ns-talruta { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 280px; }
main .ns-klar { width: 100%; display: flex; justify-content: center; }
main .ns-klarkort { width: min(100%, 560px); }
main .ns-klarkort p { line-height: 1.5; }
main .ns-klarres { font-weight: 700; color: var(--color-accent-gold) !important; }

@media (max-width: 48em), (max-height: 30em) {
    main .ns-himmelram { width: 100%; }
    main .ns-tangenttips { display: none; }
    main .ns-knappsats { padding-right: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    main .ns-bak1, main .ns-bak2, main .ns-bildstjarna.tand .ns-gnista, main .ns-fonster, main .ns-blink, main .ns-vagor path { animation: none; }
}