/* =====================================================================
   RAKETKNAPPARNA – startkortet och spelens menyknapp
   css/ks-raketknapp.css   (skript: js/ks-raketknapp.js, laddas i footer.php)

   Startplattan (alla startkort, .start-card och .tt-sc):
     stjärnan ersätter ▶ i rubrikraden, och raketen står på en guldplatta
     i STARTA-raden. Vid klick räknas det ner 3-2-1 i raden, och sedan
     flyger raketen rakt upp till stjärnan innan sidan byter.

   Hemfärd (knappar med klassen ks-hemfard):
     huset står till vänster i knappen. Raketen syns ovanför när man
     håller muspekaren över knappen, och vid klick dyker den ner i huset.

   Bilder: img/raket/raket.png, stjarna.png, hus.png
   ===================================================================== */

/* ── Startplattan ─────────────────────────────────────────────────── */
.kr-kort { position: relative; }
.kr-stjarnplats { font-size: 0 !important; line-height: 0; display: flex; align-items: center; justify-content: center; }
.kr-stjarna {
    width: 26px; height: auto; display: block; pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(255, 211, 107, .55));
    transition: transform .25s ease, filter .25s ease;
}
.kr-kort:hover .kr-stjarna { transform: scale(1.15) rotate(8deg); filter: drop-shadow(0 0 10px rgba(255, 211, 107, .9)); }

.kr-kort .sc-start { position: relative; }
.kr-kort .sc-start .kr-text { display: inline-block; }
.kr-raket {
    position: absolute; z-index: 6; pointer-events: none; user-select: none;
    width: auto; max-width: none; transform-origin: 50% 60%;
}
.kr-kort .kr-raket { right: 15px; bottom: 9px; height: 32px; transform: rotate(-12deg); }
.kr-platta {
    position: absolute; right: 9px; bottom: 6px; width: 34px; height: 4px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(90deg, #8a5a00, #fff2b8, #8a5a00);
}
.kr-kort:hover .kr-raket { animation: krDarra .14s linear infinite; }
@keyframes krDarra { 50% { transform: rotate(-12deg) translateX(1px); } }
.kr-rakna {
    position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
    font: 800 1.15rem 'Orbitron', sans-serif; letter-spacing: 0; opacity: 0;
}
.kr-kort.kr-igang .kr-text { visibility: hidden; }
.kr-kort.kr-igang, .kr-kort.kr-igang:hover, .kr-kort.kr-igang:active { transform: none; }
.kr-flyger .kr-raket { animation: none !important; }

/* ── Hemfärd ──────────────────────────────────────────────────────── */
.ks-hemfard.kr-hem {
    position: relative; overflow: visible;
    padding-left: 2.9em !important; border-radius: 999px !important;
}
.kr-hem .kr-hus {
    position: absolute; left: .45em; top: 50%; height: 1.85em; width: auto; max-width: none;
    transform: translateY(-55%); pointer-events: none; z-index: 2;
}
.kr-hem .kr-raket { left: 1.9em; top: -1.35em; height: 1.6em; transform: rotate(150deg); opacity: 0; transition: opacity .2s ease; }
.kr-hem:hover .kr-raket, .kr-hem:focus-visible .kr-raket, .kr-hem.kr-flyger .kr-raket { opacity: 1; }

/* ── Gnistor, rök och träffar ─────────────────────────────────────── */
.kr-gnista { position: absolute; z-index: 5; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #fff 0 25%, #ffd36b 45%, rgba(255, 138, 42, 0) 70%); animation: krGnista .6s ease-out forwards; }
@keyframes krGnista { to { transform: translateY(10px) scale(.2); opacity: 0; } }
.kr-rok { position: absolute; z-index: 4; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%); animation: krRok .8s ease-out forwards; }
@keyframes krRok { to { transform: translate(var(--dx, 0), -8px) scale(2.2); opacity: 0; } }
.kr-blixt { position: absolute; z-index: 5; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
    border: 3px solid #facc15; animation: krBlixt .6s ease-out forwards; }
@keyframes krBlixt { from { transform: scale(.4); opacity: 1; } to { transform: scale(4.5); opacity: 0; } }
.kr-traff { animation: krTraff .6s ease-out; }
@keyframes krTraff { 30% { transform: scale(1.5) rotate(14deg); filter: drop-shadow(0 0 14px #ffe27a) brightness(1.25); } }
.kr-lyser { animation: krLyser 1s ease-out; }
@keyframes krLyser { 25% { transform: translateY(-55%) scaleY(.9) scaleX(1.07); filter: drop-shadow(0 0 12px #ffd36b) brightness(1.3); } 50% { transform: translateY(-55%); } }

@media (prefers-reduced-motion: reduce) {
    .kr-kort:hover .kr-raket { animation: none; }
    .kr-stjarna, .kr-hem .kr-raket { transition: none; }
}