/* =====================================================================
   Guldroboten – stil för js/ks-guldrobot.js
   css/ks-guldrobot.css

   Roboten ligger utanför main (fast position nere till vänster, mitt
   emot stjärnfiguren nere till höger). Den är guld i alla teman – den
   är en figur, inte en yta. Pratbubblan följer temat.
   ===================================================================== */
.kgr {
    position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 305; display: flex; align-items: flex-end; gap: 0; flex-direction: row-reverse; justify-content: flex-end;
    pointer-events: none; transform: translateX(-140%); opacity: 0;
    transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .3s;
}
.kgr[hidden] { display: none; }
.kgr.kgr-in { transform: none; opacity: 1; }
.kgr-figur { width: 104px; flex: 0 0 auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); animation: kgrSvava 2.6s ease-in-out infinite; }
.kgr-figur svg { display: block; width: 100%; height: auto; }
@keyframes kgrSvava { 50% { transform: translateY(-5px); } }
.kgr-lampa { animation: kgrLampa 1.4s ease-in-out infinite; }
@keyframes kgrLampa { 50% { opacity: .45; } }
.kgr-munljus { opacity: .25; transform-box: fill-box; transform-origin: center; }
.kgr.kgr-pratar .kgr-munljus { animation: kgrPrat .22s ease-in-out infinite alternate; }
@keyframes kgrPrat { from { opacity: .3; transform: scaleY(.4); } to { opacity: 1; transform: scaleY(1.4); } }
.kgr-arm { transform-box: fill-box; transform-origin: 0% 100%; }
.kgr.kgr-in .kgr-arm { animation: kgrVinka .6s ease-in-out 3; }
@keyframes kgrVinka { 50% { transform: rotate(18deg); } }
.kgr-ogon { transform-box: fill-box; transform-origin: center; animation: kgrBlink 4.5s infinite; }
@keyframes kgrBlink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

.kgr-bubbla {
    position: relative; pointer-events: auto; max-width: min(320px, calc(100vw - 150px)); margin: 0 0 70px 4px;
    padding: 12px 34px 12px 14px; border-radius: 16px 16px 16px 4px;
    background: var(--color-bg-secondary, #1e1b4b); color: var(--color-text-primary, #fff);
    border: 2px solid #f6c945; box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
    font: 600 .95rem/1.45 'Exo 2', sans-serif;
}
.kgr-bubbla::before {
    content: ''; position: absolute; left: -10px; bottom: 14px; width: 16px; height: 16px; transform: rotate(45deg);
    background: inherit; border-left: 2px solid #f6c945; border-bottom: 2px solid #f6c945;
}
.kgr-namn { font: 700 .7rem 'Orbitron', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #d49a16; margin-bottom: 4px; }
.kgr-text { margin: 0; }
:root button.kgr-stang:not(.sc-start):not(.ks-tts-figur) {
    position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%;
    background: transparent; border: 0; box-shadow: none; cursor: pointer; font: 700 1.2rem/1 sans-serif; color: var(--color-text-muted, #94a3b8);
}

/* Av/på-knappen i spelens panel – ser ut som tipsknappen (css/ks-gametips.css) */
:root button.kgr-knapp:not(.sc-start):not(.ks-tts-figur) {
    width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; cursor: pointer; box-shadow: none;
    font: 700 .95rem 'Exo 2', sans-serif; background: var(--color-bg-tertiary); color: var(--color-text-primary);
    border: 2px solid var(--color-border-subtle);
}
:root button.kgr-knapp[aria-pressed="true"]:not(.sc-start):not(.ks-tts-figur) { border-color: #d49a16; box-shadow: inset 0 -3px 0 #d49a16; }
:root button.kgr-knapp:not(.sc-start):not(.ks-tts-figur):hover { border-color: var(--color-accent-gold); }

/* Mobil: pratbubblan ovanför roboten, så att den inte krockar med
   stjärnfigurens bubbla nere till höger. */
@media (max-width: 48em) {
    .kgr { flex-direction: column; align-items: flex-start; }
    .kgr-figur { width: 74px; }
    .kgr-bubbla { margin: 0 0 8px 0; font-size: .88rem; max-width: calc(100vw - 170px); border-radius: 16px 16px 16px 4px; }
    .kgr-bubbla::before { left: 22px; bottom: -10px; border-left: 0; border-right: 2px solid #f6c945; }
}
@media (prefers-reduced-motion: reduce) {
    .kgr { transition: opacity .2s; transform: none; }
    .kgr-figur, .kgr-lampa, .kgr.kgr-in .kgr-arm, .kgr-ogon, .kgr.kgr-pratar .kgr-munljus { animation: none; }
}