/* =====================================================================
   Brickspel – stil
   css/tilegames.css
   (mahjongmenu/mahjong, memorymenu/memory, sequencemenu/sequence,
    gamepictures)

   Följer sidans teman. Mahjongbrickorna och memorykortens framsida är
   alltid benvita, så att motiven syns lika bra i alla teman.
   style.css färgar "main button" i ljust tema och hav – reglerna här
   har id i väljaren och vinner därför.
   ===================================================================== */

.bs-tema {
    --bs-yta:   var(--color-bg-secondary, #16202c);
    --bs-yta2:  var(--color-bg-tertiary, #1e2d40);
    --bs-kant:  var(--color-border-subtle, #2a3a4e);
    --bs-kant2: var(--color-accent-border, #3a4d63);
    --bs-text:  var(--color-text-primary, #ecf0f1);
    --bs-text2: var(--color-text-secondary, #bdc3c7);
    --bs-mu:    var(--color-text-muted, #95a5a6);
    --bs-guld: #f2b933; --bs-guld-t: #ffd977;
    --bs-gron: #57bd8b; --bs-gron-t: #9fdcbb;
    --bs-bla: #5b9bd8; --bs-bla-t: #93c5fd;
    --bs-rod: #e2604a; --bs-rod-t: #ff9f8c;
    --bs-lila: #b9a2e8;
    --bs-ben: #fdf7e8; --bs-ben-skugga: #d6c6a3;
    --bs-skugga: 0 6px 20px rgba(0,0,0,.35);
    --bs-ruta: linear-gradient(160deg, rgba(29,58,114,.95), rgba(13,27,58,.95));
    color: var(--bs-text);
    font-family: 'Exo 2', system-ui, sans-serif;
}
[data-theme="ljus"] .bs-tema {
    --bs-yta: #ffffff; --bs-yta2: #f4f6f9; --bs-kant: #e2e8f0; --bs-kant2: #cbd5e1;
    --bs-text: #1e293b; --bs-text2: #475569; --bs-mu: #64748b;
    --bs-guld: #d99a0b; --bs-guld-t: #a16207; --bs-gron-t: #15803d; --bs-bla-t: #1d4ed8; --bs-rod-t: #b91c1c;
    --bs-skugga: 0 6px 18px rgba(35,48,58,.12);
    --bs-ruta: linear-gradient(160deg, #eef3fb, #dbe5f4);
}
.bs-tema *, .bs-tema *::before, .bs-tema *::after { box-sizing: border-box; }
.bs-tema :focus-visible { outline: 3px solid var(--bs-guld); outline-offset: 2px; }
.bs-tema [hidden], .bs-tema[hidden] { display: none !important; }
.bs-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif; }

/* ── Knappar ───────────────────────────────────────────────────────── */
:is(#bs-meny, #bs-vanster, #bs-spel, #bs-slut, #bs-bilder, #bs-dialog) .bs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 16px;
    border-radius: 12px; border: 1px solid var(--bs-kant2); background: var(--bs-yta2); color: var(--bs-text);
    font: 700 .95rem 'Exo 2', system-ui, sans-serif; cursor: pointer; text-decoration: none; box-shadow: none; transform: none;
}
:is(#bs-meny, #bs-vanster, #bs-spel, #bs-slut, #bs-bilder, #bs-dialog) .bs-btn:hover { border-color: var(--bs-guld); background: var(--bs-yta2); }
:is(#bs-meny, #bs-vanster, #bs-spel, #bs-slut, #bs-bilder, #bs-dialog) .bs-btn.bs-primar { background: linear-gradient(180deg, #ffd977, #dda31c); border-color: transparent; color: #2a1f05; }
:is(#bs-meny, #bs-vanster, #bs-spel, #bs-slut, #bs-bilder, #bs-dialog) .bs-btn.bs-fara { border-color: var(--bs-rod); color: var(--bs-rod-t); }
:is(#bs-meny, #bs-vanster, #bs-spel, #bs-slut, #bs-bilder, #bs-dialog) .bs-btn:disabled { opacity: .45; cursor: default; }
.bs-liten { font-size: .85rem; color: var(--bs-text2); margin: 6px 0 0; line-height: 1.5; }
.bs-bocka { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; min-height: 36px; }
.bs-bocka input { width: 20px; height: 20px; accent-color: var(--bs-gron); flex: none; }

/* ── Menyerna ──────────────────────────────────────────────────────── */
#bs-meny, #bs-bilder { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 820px; margin: 0 auto; }
.bs-panel { background: var(--bs-yta); border: 1px solid var(--bs-kant); border-radius: 16px; padding: 16px 18px; box-shadow: var(--bs-skugga); }
.bs-panel > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 1.05rem 'Exo 2', sans-serif; color: var(--bs-text); }
.bs-nr { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: .8rem; font-weight: 800; border: 2px solid var(--bs-guld-t); color: var(--bs-guld-t); background: color-mix(in srgb, var(--bs-guld) 14%, transparent); }
.bs-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
#bs-meny .bs-val {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 10px 8px; text-align: center; border: 2px solid var(--bs-kant2); border-radius: 12px; background: var(--bs-yta); color: var(--bs-text);
    font: 700 .95rem 'Exo 2', sans-serif; cursor: pointer; box-shadow: none; transform: none; min-height: 50px;
}
#bs-meny .bs-val:hover { border-color: var(--bs-guld); background: var(--bs-yta); }
#bs-meny .bs-val[aria-checked="true"] { border-color: var(--bs-guld); background: color-mix(in srgb, var(--bs-guld) 16%, var(--bs-yta)); }
#bs-meny .bs-val:disabled { opacity: .45; cursor: not-allowed; }
.bs-val small { font-size: .76rem; font-weight: 500; color: var(--bs-text2); line-height: 1.35; }
.bs-val .bs-stor { font-size: 1.5rem; line-height: 1.1; }
.bs-steg { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.bs-tabell { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bs-tabell th, .bs-tabell td { padding: 6px 8px; border-bottom: 1px solid var(--bs-kant); text-align: left; }
.bs-tabell td:last-child, .bs-tabell th:last-child { text-align: right; white-space: nowrap; }
.bs-tabell th { color: var(--bs-text2); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.bs-spelrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.bs-spelrad a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bs-kant2); background: var(--bs-yta2); color: var(--bs-text); text-decoration: none; font-weight: 700; }
.bs-spelrad a:hover { border-color: var(--bs-guld); }
.bs-spelrad a span { font-size: 1.6rem; }
.bs-spelrad a[aria-current="page"] { border-color: var(--bs-guld); background: color-mix(in srgb, var(--bs-guld) 12%, var(--bs-yta2)); }
.start-card.bs-fortsatt { margin-top: 14px; }
.start-card.bs-fortsatt .sc-start { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }

/* ── Spelsidornas vänsterspalt ─────────────────────────────────────── */
#bs-vanster { display: flex; flex-direction: column; gap: 10px; width: 100%; }
#bs-vanster h1 { margin: 0; text-align: center; font: 800 clamp(1.1rem, 2vw, 1.35rem) 'Orbitron', sans-serif; color: var(--bs-text); background: none; }
#bs-undertitel { font-size: .75rem; color: var(--bs-mu); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.bs-matare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bs-matare div { background: var(--bs-yta2); border: 1px solid var(--bs-kant); border-radius: 12px; padding: 6px 8px; text-align: center; }
.bs-matare b { display: block; font-size: 1.2rem; color: var(--bs-guld-t); font-variant-numeric: tabular-nums; }
.bs-matare span { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-mu); }
.bs-knapprad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#bs-vanster .bs-btn { width: 100%; }
.bs-regler { font-size: .82rem; color: var(--bs-text2); background: var(--bs-yta2); border: 1px solid var(--bs-kant); border-radius: 12px; padding: 9px 11px; line-height: 1.45; }

/* ── Mahjongbordet ─────────────────────────────────────────────────── */
#bs-spel { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.bordyta { position: relative; overflow: hidden; flex: 1 1 0; min-height: 320px; display: grid; place-items: center; padding: 6px; }
/* Brädet ligger mitt i ytan och skalas om – absolut placerat, så att ett
   brett bräde inte skjuter ut åt höger på en smal skärm */
.bord { position: absolute; left: 50%; top: 50%; transform-origin: center center; transform: translate(-50%, -50%); }
#bs-spel .bricka {
    position: absolute; width: var(--bw, 54px); height: var(--bh, 72px); border: 0; padding: 0; border-radius: 8px;
    background: linear-gradient(160deg, #fbf6e9 0%, var(--bs-ben) 45%, #e6dcc3 100%); color: #1e293b;
    box-shadow: 3px 4px 0 0 var(--bs-ben-skugga), 4px 7px 12px rgba(0,0,0,.42);
    display: grid; place-items: center; cursor: pointer; overflow: hidden; user-select: none;
    transition: transform .12s ease, box-shadow .12s ease, opacity .25s ease, filter .15s;
}
#bs-spel .bricka::after { content: ""; position: absolute; inset: 3px; border-radius: 5px; border: 1px solid rgba(55,94,163,.3); pointer-events: none; }
.bricka .tecken { font-size: calc(var(--bh, 72px) * .52); line-height: 1; }
.bricka img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#bs-spel .bricka.blockerad { cursor: default; filter: brightness(.62) saturate(.7); }
#bs-spel .bricka.fri.markera-fria { box-shadow: 3px 4px 0 0 var(--bs-ben-skugga), 4px 7px 12px rgba(0,0,0,.42), 0 0 0 3px rgba(87,189,139,.75); }
#bs-spel .bricka.vald { transform: translate(-3px, -4px); box-shadow: 3px 4px 0 0 var(--bs-ben-skugga), 6px 10px 16px rgba(0,0,0,.5), 0 0 0 4px var(--bs-guld); }
#bs-spel .bricka.tips { animation: bs-puls .9s ease-in-out 3; }
#bs-spel .bricka.fel { animation: bs-skak .32s ease; }
#bs-spel .bricka.bort { opacity: 0; transform: scale(.5) rotate(-8deg); pointer-events: none; }
@keyframes bs-puls { 50% { box-shadow: 0 0 0 5px var(--bs-bla), 4px 7px 14px rgba(0,0,0,.4); } }
@keyframes bs-skak { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ── Memory ────────────────────────────────────────────────────────── */
.memorybord { display: grid; gap: var(--gap, 10px); justify-content: center; align-content: center; flex: 1 1 0; min-height: 0; padding: 6px; }
#bs-spel .mkort { position: relative; width: var(--kb, 90px); aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; perspective: 800px; cursor: pointer; box-shadow: none; transform: none; }
.mkort-inre { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.35,.9,.35,1); transform-style: preserve-3d; }
.mkort.vand .mkort-inre, .mkort.klar .mkort-inre { transform: rotateY(180deg); }
.mkort-sida { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; display: grid; place-items: center; overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.mkort-bak { background: radial-gradient(circle at 30% 25%, rgba(147,188,78,.35), transparent 55%), linear-gradient(150deg, #16645f, #123f52);
    border: 1px solid rgba(207,232,226,.25); font-size: calc(var(--kb, 90px) * .3); }
.mkort-fram { transform: rotateY(180deg); background: linear-gradient(160deg, #fbf6e9, #e6dcc3); border: 1px solid var(--bs-ben-skugga); }
.mkort-fram .tecken { font-size: calc(var(--kb, 90px) * .5); line-height: 1; }
.mkort-fram img { width: 100%; height: 100%; object-fit: cover; }
#bs-spel .mkort.klar { animation: bs-sjunk .5s ease forwards; cursor: default; }
@keyframes bs-sjunk { to { opacity: .55; transform: scale(.94); } }

/* ── Sekvens ───────────────────────────────────────────────────────── */
.besked { font-weight: 800; font-size: 1.2rem; text-align: center; margin: 4px 0 10px; min-height: 1.6em; color: var(--bs-text); }
.sekvensbord { display: grid; gap: 14px; margin: 0 auto; justify-content: center; align-content: center; flex: 1 1 0; min-height: 0; }
#bs-spel .sruta {
    position: relative; aspect-ratio: 1; width: var(--sr, 140px); border: 3px solid rgba(127,127,127,.25); border-radius: 16px;
    background: var(--bs-ruta); cursor: pointer; overflow: hidden; display: grid; place-items: center; padding: 0; color: inherit;
    box-shadow: none; transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease, opacity .18s;
    filter: brightness(.72) saturate(.85);
}
[data-theme="ljus"] #bs-spel .sruta { filter: saturate(.75); opacity: .78; }
.sruta img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sruta .tecken { font-size: calc(var(--sr, 140px) * .5); line-height: 1; }
#bs-spel .sruta:hover { filter: brightness(.92); opacity: 1; }
/* Gul ram: bilden som visas just nu. Grön: rätt. Röd: fel. */
#bs-spel .sruta.lyser { filter: brightness(1.35) saturate(1.15); opacity: 1; border-color: var(--bs-guld); box-shadow: 0 0 0 6px rgba(232,185,63,.45), 0 0 40px rgba(232,185,63,.6); transform: scale(1.05); }
#bs-spel .sruta.ratt  { filter: brightness(1.25) saturate(1.1); opacity: 1; border-color: var(--bs-gron); box-shadow: 0 0 0 6px rgba(87,189,139,.5), 0 0 40px rgba(87,189,139,.6); transform: scale(1.05); }
#bs-spel .sruta.missad { filter: brightness(1.1) saturate(1.1); opacity: 1; border-color: var(--bs-rod); box-shadow: 0 0 0 6px rgba(226,96,74,.5), 0 0 40px rgba(226,96,74,.55); animation: bs-skak .35s ease; }
.sruta .sr-mark { position: absolute; right: 6px; bottom: 4px; font-size: 1.3rem; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.6); color: #fff; }

/* ── Vinstrutan och dialoger ───────────────────────────────────────── */
.bs-overlay { position: fixed; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.6); }
[data-theme="ljus"] .bs-overlay { background: rgba(30,41,59,.35); }
.bs-ruta { background: var(--bs-yta); border: 1px solid var(--bs-kant2); border-radius: 20px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.45); width: min(460px, 100%); max-height: 92vh; overflow-y: auto; }
.bs-ruta.vinst { text-align: center; }
.bs-ruta h2 { margin: 0 0 6px; color: var(--bs-guld-t); font-size: 1.4rem; }
.bs-ruta .krans { font-size: 3rem; line-height: 1.2; }
.bs-ruta p { color: var(--bs-text2); margin: 6px 0; }
.bs-rekord { color: var(--bs-gron-t) !important; font-weight: 800; }
.bs-dialogfot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ── Egna bilder ───────────────────────────────────────────────────── */
.slappyta { border: 2px dashed var(--bs-gron); border-radius: 16px; padding: 26px 18px; text-align: center; background: color-mix(in srgb, var(--bs-guld) 7%, transparent); }
.slappyta.over { background: color-mix(in srgb, var(--bs-guld) 18%, transparent); }
.bildrutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.bildkort { margin: 0; background: var(--bs-yta2); border: 1px solid var(--bs-kant); border-radius: 14px; overflow: hidden; }
.bildkort img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.bildkort figcaption { padding: 6px 8px; display: flex; gap: 6px; align-items: center; }
.bildkort .titel { flex: 1; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bs-bilder .ikonknapp { border: 0; background: none; cursor: pointer; color: var(--bs-text2); font-size: 1rem; padding: 4px 6px; border-radius: 6px; box-shadow: none; }
#bs-bilder .ikonknapp:hover { background: var(--bs-yta); color: var(--bs-text); }
.beskarare { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto 12px; border-radius: 12px; overflow: hidden; background: #0a1530; touch-action: none; cursor: grab; }
.beskarare canvas { width: 100%; height: 100%; display: block; }
.beskarare.dras { cursor: grabbing; }
.beskarare::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 2px solid rgba(232,185,63,.8); border-radius: 12px; }
.reglage { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.reglage input[type="range"] { flex: 1; accent-color: var(--bs-gron); }
.bs-tema .bs-falt { width: 100%; min-height: 42px; background: var(--bs-yta2); border: 1px solid var(--bs-kant2); color: var(--bs-text); font: 500 .98rem 'Exo 2', system-ui, sans-serif; padding: 8px 12px; border-radius: 10px; }
.bs-etikett { display: block; font: 700 .72rem 'Exo 2', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-mu); margin: 10px 0 5px; }
.bs-tomtext { color: var(--bs-mu); font-style: italic; }

.bs-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); z-index: 10030;
    background: var(--bs-yta); color: var(--bs-text); border: 1px solid var(--bs-guld); padding: 12px 20px; border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; max-width: min(90vw, 480px); text-align: center; font-weight: 700; }
.bs-toast.syns { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) { .bs-tema *, .bs-tema { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }