/* =====================================================================
   Kunskapsstjärnan – Tangram
   css/ks-tangram.css   (tangram.php och miniatyrerna i tangrammenu.php)
   Paneler och knappar kommer från css/ks-braingym.css; färgerna följer
   temat (--color-*). Bitarnas färger är fasta, så att de syns i alla teman.
   ===================================================================== */
main .tg-yta { width: 100%; height: min(72vh, 680px); min-height: 360px; position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
main .tg-yta svg { width: 100%; height: 100%; display: block; overflow: visible; }
main .tg-lada { fill: color-mix(in srgb, var(--color-bg-secondary) 70%, transparent); stroke: var(--color-border-subtle); stroke-width: .04; stroke-dasharray: .15 .12; }
main .tg-sil { fill: color-mix(in srgb, var(--color-text-primary) 26%, var(--color-bg-tertiary)); stroke: color-mix(in srgb, var(--color-text-primary) 26%, var(--color-bg-tertiary)); stroke-width: .03; stroke-linejoin: round; }
main .tg-ruta { fill: none; stroke: color-mix(in srgb, var(--color-text-primary) 14%, transparent); stroke-width: .03; }
main .tg-linje { fill: none; stroke: color-mix(in srgb, var(--color-text-primary) 45%, transparent); stroke-width: .035; stroke-linejoin: round; stroke-dasharray: .12 .08; }
main .tg-tipsbit { fill: color-mix(in srgb, var(--color-accent-gold) 30%, transparent); stroke: var(--color-accent-gold); stroke-width: .07; stroke-dasharray: .18 .1; stroke-linejoin: round; animation: tgPuls 1s ease-in-out infinite alternate; }
@keyframes tgPuls { from { opacity: .45; } to { opacity: 1; } }
main .tg-bit { cursor: grab; outline: none; }
main .tg-bit:active { cursor: grabbing; }
main .tg-bit polygon { stroke: rgba(0, 0, 0, .55); stroke-width: .035; stroke-linejoin: round; transition: stroke .15s; }
main .tg-bit.vald polygon, main .tg-bit:focus-visible polygon { stroke: #fff; stroke-width: .07; }
main .tg-klar .tg-bit polygon { stroke: rgba(0,0,0,.35); }
main .tg-klar .tg-sil { fill: var(--color-accent-gold); }
main .tg-matare { height: 8px; border-radius: 99px; background: var(--color-bg-tertiary); overflow: hidden; margin-top: 8px; }
main .tg-matare i { display: block; height: 100%; width: 0; background: var(--color-accent-gold); border-radius: 99px; transition: width .3s; }
main .tg-under { font-size: .8rem; color: var(--color-text-secondary); margin: 6px 0 0; }
main .tg-stjarnor { font-size: 1.8rem; letter-spacing: 4px; margin: 4px 0; color: var(--color-accent-gold); }
main .tg-snabb { display: none; gap: 8px; justify-content: center; }
main .tg-snabb .bg-knapp { min-width: 54px; font-size: 1.2rem; padding: 6px 10px; }
@media (max-width: 48em) { main .tg-snabb { display: flex; } main .tg-yta { height: min(64vh, 560px); } }
@media (prefers-reduced-motion: reduce) { main .tg-tipsbit { animation: none; } }

/* Menyns galleri */
.tg-galleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.tg-galleri button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; cursor: pointer;
  background: var(--km-yta2, #1d2140); border: 2px solid var(--km-kant, #444a7a); color: var(--km-text, #fff); font: 700 .8rem 'Exo 2', sans-serif; }
.tg-galleri button:hover { border-color: var(--km-gul, #f5c542); }
.tg-galleri button.klar { border-color: color-mix(in srgb, var(--km-gron, #22c55e) 70%, transparent); }
.tg-galleri svg { width: 64px; height: 64px; }
.tg-galleri svg polygon { fill: var(--km-text2, #c9cbe0); stroke: var(--km-text2, #c9cbe0); stroke-width: .03; }
.tg-galleri button.klar svg polygon { fill: var(--km-gul, #f5c542); stroke: var(--km-gul, #f5c542); }
.tg-galleri small { color: var(--km-text2, #c9cbe0); font-weight: 400; min-height: 1.2em; }