/* =====================================================================
   Kunskapsstjärnan – startkort för menysidor
   css/ks-startkort.css

   Mönstret kommer från eboardgamemenu.php, som är förlagan. Det låg där
   som 180 rader inbäddad CSS. Nu ligger det här i stället, så att de
   övriga menysidorna kan använda det utan att kopiera.

   ── Upplägget på en menysida ─────────────────────────────────────────
     left-container     startkortet: en knapp som visar alla aktuella
                        inställningar och startar appen
     content-container  själva inställningarna
     right-container    reklam (php/ads.php)

   Startkortet ska spegla inställningarna, inte styra dem. Den som ändrar
   något i mitten ser det uppdateras till vänster, och vet därför vad som
   kommer att hända innan hen trycker start.

   ── Använda den ─────────────────────────────────────────────────────
     <link rel="stylesheet" href="css/ks-startkort.css">

     <div class="left-container">
       <div class="start-card" onclick="startaAppen()">
         <div class="sc-header">
           <div class="sc-title">▶ Starta</div>
           <div class="sc-play-icon">▶</div>
         </div>
         <div class="sc-row">
           <div class="sc-icon">📊</div>
           <div class="sc-text" id="sc-niva">Nivå <strong>1</strong></div>
         </div>
       </div>
     </div>

   Färgerna följer temat via variablerna i css/style.css, så kortet byter
   utseende med rymd, hav, ljust och jul. Förlagan hade blått hårdkodat.
   ===================================================================== */

.start-card {
    background: var(--gradient-header,
        linear-gradient(170deg, #0d1e35 0%, #071525 60%, #040e1c 100%));
    border: 1px solid var(--color-accent-border, rgba(52,152,219,.38));
    border-radius: 18px;
    width: 100%;
    max-width: 268px;
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 10px 40px rgba(0,0,0,.65));
    cursor: pointer;
    user-select: none;
    transition: filter .18s ease, box-shadow .18s ease,
                transform .15s ease, border-color .18s ease;
}
.start-card:hover {
    filter: brightness(1.18);
    border-color: var(--color-accent-gold, rgba(52,152,219,.75));
    box-shadow: var(--shadow-md, 0 10px 40px rgba(0,0,0,.65)),
                var(--shadow-glow, 0 0 36px rgba(52,152,219,.35));
    transform: translateY(-2px);
}
.start-card:active {
    filter: brightness(.9);
    transform: translateY(1px);
}
/* Tangentbordsnavigering: kortet är en knapp och måste gå att nå med
   tabb. Lägg tabindex="0" och role="button" på elementet. */
.start-card:focus-visible {
    outline: 2px solid var(--color-accent-gold, #e8c874);
    outline-offset: 3px;
}

/* ── Rubrikrad ───────────────────────────────────────────────────── */
.sc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 15px 12px;
    border-bottom: 1px solid var(--color-border-subtle, rgba(52,152,219,.25));
    gap: 8px;
    background: rgba(255, 255, 255, .07);
    border-radius: 18px 18px 0 0;
}
.sc-title {
    font-family: var(--font-primary, 'Orbitron', sans-serif);
    font-size: .86rem;
    font-weight: 700;
    color: var(--color-text-primary, #e8f4ff);
    letter-spacing: 1px;
    line-height: 1.2;
    flex: 1;
}
.sc-play-icon {
    font-size: 1.05rem;
    color: var(--color-accent-gold, rgba(160,210,255,.9));
    flex-shrink: 0;
}

/* ── Inställningsrader ───────────────────────────────────────────── */
.sc-row {
    display: flex;
    align-items: center;
    padding: 7px 13px;
    border-bottom: 1px solid var(--color-border-subtle, rgba(52,152,219,.1));
    gap: 9px;
    min-height: 33px;
}
.sc-row:last-child { border-bottom: none; }
.sc-icon {
    font-size: .95rem;
    min-width: 20px;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}
.sc-text {
    font-family: var(--font-secondary, 'Exo 2', sans-serif);
    font-size: .74rem;
    /* Etiketten är dämpad, värdet framhävt. Det gör kortet läsbart i ett
       ögonkast: man letar efter värdena, inte efter orden runt dem. */
    color: var(--color-text-secondary, rgba(180,215,245,.7));
    line-height: 1.35;
    min-width: 0;
    word-break: break-word;
}
.sc-text strong {
    color: var(--color-text-primary, rgba(225,242,255,.95));
    font-weight: 600;
}

/* ── Förhandsvisning, för appar som har något att visa ───────────── */
.sc-preview-row {
    display: flex;
    align-items: center;
    padding: 8px 13px 6px;
    gap: 10px;
    border-bottom: 1px solid var(--color-border-subtle, rgba(52,152,219,.1));
}
.sc-preview-emoji {
    font-size: 1.45rem;
    line-height: 1;
    flex-shrink: 0;
    animation: sc-pop .3s ease;
}
@keyframes sc-pop {
    0%   { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-preview-emoji { animation: none; }
}
.sc-preview-word {
    font-family: var(--font-primary, 'Orbitron', sans-serif);
    font-size: .75rem;
    letter-spacing: 4px;
    color: var(--color-text-muted, rgba(100,170,230,.5));
    text-transform: uppercase;
    min-height: 1.2em;
}

/* ── Nivåbrickor, bara visning ───────────────────────────────────── */
.sc-levels {
    display: flex;
    gap: 5px;
    padding: 10px 13px 11px;
    justify-content: center;
    flex-wrap: wrap;
}
.sc-level {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-secondary, 'Exo 2', sans-serif);
    font-size: .68rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--color-border-subtle, rgba(52,152,219,.2));
    color: var(--color-text-muted, rgba(150,200,240,.5));
}
.sc-level.aktiv {
    background: var(--color-accent-gold, #3498db);
    border-color: var(--color-accent-gold, #3498db);
    color: var(--color-bg-primary, #04121f);
}

/* ── Mobil ───────────────────────────────────────────────────────────
   På smal skärm staplas panelerna, och startkortet hamnar överst. Det
   är rätt ordning: man ser vad som är valt innan man scrollar ner till
   inställningarna. Kortet får då ta hela bredden. */
@media (max-width: 48em) {
    .start-card { max-width: none; }
}