/* =====================================================================
   TETRIS – spelplanen i tetris.php och bitarna på tetrismenu.php
   css/ks-tetris.css   (panelerna: css/ks-braingym.css)

   Spelplanen är en mörk "brunn" i alla teman, så att de färgade
   bitarna lyser lika bra överallt. Sidokolumnen (sparad bit, nästa
   bitar och poäng) sitter bredvid planen även på mobil. --r är en
   rutas storlek i px och sätts av skriptet.
   ===================================================================== */
main .tt-ram {
    --r: 24px;
    position: relative; display: inline-flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 18px;
    background: linear-gradient(160deg, #1e293b, #0f172a); border: 2px solid var(--color-border-subtle);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .6), 0 14px 30px rgba(0, 0, 0, .4);
}
main .tt-brunn {
    position: relative; border-radius: 8px; overflow: hidden;
    background: radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, .08), transparent 60%), #0b1220;
    box-shadow: inset 0 0 0 2px rgba(148, 163, 184, .18);
}
main .tt-plan { display: block; touch-action: none; cursor: pointer; }
main .tt-sida { display: flex; flex-direction: column; gap: 8px; min-width: 64px; }
main .tt-ruta {
    padding: 6px 6px 8px; border-radius: 10px; text-align: center;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(148, 163, 184, .2);
}
main .tt-ruta[hidden], main .tt-pek button[hidden] { display: none; }
main .tt-ruta p {
    margin: 0 0 4px; font: 700 .72rem 'Exo 2', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #cbd5e1;
}
main .tt-ruta canvas { display: block; margin: 0 auto; }
main .tt-siffror { display: grid; gap: 6px; }
main .tt-siffror div { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
main .tt-siffror span { font: 700 .7rem 'Exo 2', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
main .tt-siffror b { font: 800 1.1rem 'Orbitron', sans-serif; color: #fde68a; }
main .tt-info {
    position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); pointer-events: none;
    font: 800 clamp(1.05rem, 2.4vw, 1.5rem) 'Exo 2', sans-serif; color: #fff; text-align: center; white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8); opacity: 0;
}
main .tt-info.fast { opacity: 1; padding: 10px 16px; border-radius: 12px; background: rgba(15, 23, 42, .8); white-space: normal; width: 80%; }
main .tt-info.stor { font-size: clamp(1.5rem, 3.6vw, 2.2rem); color: #fde68a; text-shadow: 0 0 18px rgba(250, 204, 21, .8), 0 2px 10px rgba(0, 0, 0, .8); }
main .tt-info.syns:not(.fast) { animation: ttInfo 1.2s ease-out; }
@keyframes ttInfo { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }
main .tt-rekord { margin: 0; text-align: center; }
main .tt-rekord b { color: var(--color-accent-gold); }

/* Pekknapparna: syns på mobil och pekskärmar */
main .tt-pek { display: none; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 420px; margin-top: 10px; }
:root main .tt-pek button.bg-knapp:not(.sc-start):not(.ks-tts-figur) {
    min-height: 54px; font-size: 1.45rem; touch-action: none; user-select: none; -webkit-user-select: none;
}
@media (max-width: 48em), (max-height: 30em), (pointer: coarse) {
    main .tt-pek { display: grid; }
}
/* På mobil står figuren nere till höger – lämna plats åt den. */
@media (max-width: 48em) {
    main .tt-pek { padding-right: 84px; box-sizing: border-box; }
    main .tt-ram { gap: 6px; padding: 6px; }
    main .tt-sida { gap: 6px; }
    main .tt-siffror b { font-size: .95rem; }
}

/* ── Menysidan: de sju bitarna ───────────────────────────────────── */
main .tm-bitar { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 4px 0 18px; }
main .tm-bit { display: inline-grid; grid-auto-columns: 18px; grid-auto-rows: 18px; gap: 2px; }
main .tm-bit i {
    border-radius: 4px; background: linear-gradient(var(--f), color-mix(in srgb, var(--f) 70%, #000));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .3);
}

@media (prefers-reduced-motion: reduce) {
    main .tt-info.syns:not(.fast) { animation: none; opacity: 1; }
}