/* =====================================================================
   Kunskapsstjärnan – speltips från figuren
   css/ks-gametips.css

   Används av Fyra i rad och Tre i rad (spelsidan och menysidan):
     .kst            av/på-knappen och tipsrutan på spelsidan
                     (ritas av js/ks-gametips.js)
     .kst-brytare    raden med vippa på menysidan
     .tips-visa …    markeringarna på brädet när eleven trycker "Visa var"

   Färgerna kommer ur temat (css/style.css), så rutan syns i alla teman.
   Markeringarna har både färg och tecken/form – aldrig bara färg.
   ===================================================================== */

/* ── Spelsidan: knapp och tipsruta ───────────────────────────────── */
.kst { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.kst .kst-knapp {
    width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
    font: 700 .9rem 'Exo 2', sans-serif; text-align: center;
    background: var(--color-bg-secondary, #16202c);
    border: 2px solid var(--color-border-subtle, #2a3a4e);
    color: var(--color-text-secondary, #bdc3c7);
    transition: border-color .15s, color .15s, background .15s;
}
.kst .kst-knapp:hover { border-color: var(--color-accent-gold, #f1c40f); }
.kst .kst-knapp:focus-visible, .kst .kst-visa:focus-visible { outline: 3px solid var(--color-accent-gold, #f1c40f); outline-offset: 2px; }
.kst.kst-pa .kst-knapp {
    border-color: var(--color-accent-gold, #f1c40f);
    background: var(--color-bg-tertiary, #1e2d40);
    color: var(--color-text-primary, #ecf0f1);
    box-shadow: inset 0 -3px 0 var(--color-accent-gold, #f1c40f);
}
/* I ljust tema och havstema gör css/style.css alla knappar i main grå.
   Den här regeln är mer specifik, så att "på" syns i alla teman. */
[data-theme] main .kst.kst-pa button.kst-knapp:not(.sc-start):not(.ks-tts-figur) {
    border-color: var(--color-accent-gold, #f1c40f);
    background: var(--color-bg-tertiary, #1e2d40);
    color: var(--color-text-primary, #ecf0f1);
    box-shadow: inset 0 -3px 0 var(--color-accent-gold, #f1c40f);
}
.kst .kst-ruta {
    padding: 12px; border-radius: 12px;
    background: var(--color-bg-secondary, #16202c);
    border: 1px solid var(--color-border-subtle, #2a3a4e);
    border-left: 4px solid var(--color-accent-gold, #f1c40f);
    animation: kst-in .25s ease-out;
}
.kst .kst-ruta[hidden] { display: none; }
.kst .kst-rubrik { font: 700 .72rem 'Orbitron', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted, #95a5a6); margin-bottom: 6px; }
.kst .kst-text { margin: 0; font: 400 .95rem/1.5 'Exo 2', sans-serif; color: var(--color-text-primary, #ecf0f1); }
.kst .kst-visa {
    margin-top: 10px; min-height: 40px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
    font: 700 .85rem 'Exo 2', sans-serif;
    background: var(--color-bg-tertiary, #1e2d40);
    border: 2px solid var(--color-border-subtle, #2a3a4e);
    color: var(--color-text-primary, #ecf0f1);
}
.kst .kst-visa:hover, .kst .kst-visa[aria-pressed="true"] { border-color: var(--color-accent-gold, #f1c40f); }
.kst .kst-visa[hidden] { display: none; }
@keyframes kst-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Menysidan: rad med vippa ────────────────────────────────────── */
.kst-brytare {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0 0; margin-top: 12px;
    border-top: 1px solid var(--color-border-subtle, #2a3a4e);
    color: var(--color-text-primary, #ecf0f1);
}
.kst-brytare[hidden] { display: none; }
.kst-brytare b { display: block; }
.kst-brytare small { display: block; color: var(--color-text-secondary, #bdc3c7); font-size: .84rem; line-height: 1.45; margin-top: 2px; }
.kst-vippa { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.kst-vippa input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.kst-vippa input:disabled { cursor: not-allowed; }
.kst-vippa span { position: absolute; inset: 0; background: var(--color-bg-tertiary, #1e2d40); border: 1px solid var(--color-accent-border, #3a4d63); border-radius: 20px; transition: .25s; }
.kst-vippa span::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--color-text-muted, #95a5a6); border-radius: 50%; transition: .25s; }
.kst-vippa input:checked + span { background: #b7791f; border-color: #b7791f; }
.kst-vippa input:checked + span::before { transform: translateX(20px); background: #fff; }
.kst-vippa input:disabled + span { opacity: .45; }
.kst-vippa input:focus-visible + span { outline: 3px solid var(--color-accent-gold, #f1c40f); outline-offset: 2px; }

/* ── Fyra i rad: markeringar vid "Visa var" ──────────────────────── */
#c4-spel .col-arrow.tips-visa { color: #f1c40f; animation: kst-puls .8s ease-in-out infinite alternate; }
#c4-spel .col-arrow.tips-undvik { color: #ff6b6b; font-size: 0; }
#c4-spel .col-arrow.tips-undvik::before { content: '✕'; font-size: 1.15rem; font-weight: 800; }
.c4-cell.tips-visa { border-color: #f1c40f !important; box-shadow: 0 0 14px rgba(241,196,15,.75); }
.c4-cell.tips-undvik { border-color: #ff6b6b !important; border-style: dashed !important; }

/* ── Tre i rad: markeringar vid "Visa var" ───────────────────────── */
#tt-spel .ttt-cell.tips-visa { border-color: #f1c40f !important; box-shadow: 0 0 18px rgba(241,196,15,.7) !important; animation: kst-puls .8s ease-in-out infinite alternate; }
#tt-spel .ttt-cell.tips-fran { border-color: #f1c40f !important; border-style: dashed !important; }
#tt-spel .ttt-cell.tips-undvik { border-color: #ff6b6b !important; border-style: dashed !important; }
#tt-spel .ttt-cell.tips-visa::after, #tt-spel .ttt-cell.tips-fran::after, #tt-spel .ttt-cell.tips-undvik::after {
    position: absolute; top: 4px; right: 8px; font: 800 .95rem 'Exo 2', sans-serif; line-height: 1;
}
#tt-spel .ttt-cell.tips-visa::after   { content: '★'; color: #f1c40f; }
#tt-spel .ttt-cell.tips-fran::after   { content: '↗'; color: #f1c40f; }
#tt-spel .ttt-cell.tips-undvik::after { content: '✕'; color: #ff6b6b; }

@keyframes kst-puls { from { transform: translateY(0); } to { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
    .kst .kst-ruta, #c4-spel .col-arrow.tips-visa, #tt-spel .ttt-cell.tips-visa { animation: none; }
}