/* =====================================================================
   Sudoku – stil
   css/sudoku.css   (sudokumeny.php och sudoku.php)

   Förut var spelytan en vit låda med vita rutor och lila knappar oavsett
   tema, och blockgränserna på 6×6 satt fel (3 rader höga i stället för
   2). Nu följer allt temat, och blockgränserna räknas ut i skriptet.

   style.css färgar "main button" i ljust tema och hav – reglerna här
   har id i väljaren och vinner därför.
   ===================================================================== */

.sd-tema {
    --sd-yta:   var(--color-bg-secondary, #16202c);
    --sd-yta2:  var(--color-bg-tertiary, #1e2d40);
    --sd-kant:  var(--color-border-subtle, #2a3a4e);
    --sd-kant2: var(--color-accent-border, #3a4d63);
    --sd-text:  var(--color-text-primary, #ecf0f1);
    --sd-text2: var(--color-text-secondary, #bdc3c7);
    --sd-mu:    var(--color-text-muted, #95a5a6);
    --sd-bla: #3b82f6; --sd-bla-t: #7cc4ff;
    --sd-gron: #22c55e; --sd-gron-t: #4ade80;
    --sd-orange: #f59e0b; --sd-rod: #ef4444; --sd-rod-t: #ff8a80;
    --sd-lila: #8b5cf6; --sd-lila-t: #c4b5fd;
    --sd-guld-t: #fcd34d;
    --sd-skugga: 0 6px 20px rgba(0,0,0,.35);
    /* Brädet */
    --sd-ruta: #1a2636; --sd-given: #22324a; --sd-given-t: #ecf0f1; --sd-egen-t: #7cc4ff;
    --sd-tunn: rgba(255,255,255,.12); --sd-tjock: #8aa4c0; --sd-not: #9fb3c8;
    --sd-markerad: rgba(59,130,246,.45); --sd-granne: rgba(59,130,246,.12); --sd-samma: rgba(59,130,246,.28);
    color: var(--sd-text);
    font-family: 'Exo 2', system-ui, sans-serif;
}
[data-theme="ljus"] .sd-tema {
    --sd-yta: #ffffff; --sd-yta2: #f4f6f9; --sd-kant: #e2e8f0; --sd-kant2: #cbd5e1;
    --sd-text: #1e293b; --sd-text2: #475569; --sd-mu: #64748b;
    --sd-bla-t: #1d4ed8; --sd-gron-t: #15803d; --sd-rod-t: #b91c1c; --sd-lila-t: #6d28d9; --sd-guld-t: #a16207;
    --sd-skugga: 0 6px 18px rgba(35,48,58,.10);
    --sd-ruta: #ffffff; --sd-given: #eef2f7; --sd-given-t: #1e293b; --sd-egen-t: #1d4ed8;
    --sd-tunn: #cbd5e1; --sd-tjock: #334155; --sd-not: #64748b;
    --sd-markerad: rgba(59,130,246,.30); --sd-granne: rgba(59,130,246,.08); --sd-samma: rgba(59,130,246,.18);
}
.sd-tema *, .sd-tema *::before, .sd-tema *::after { box-sizing: border-box; }
.sd-tema :focus-visible { outline: 3px solid color-mix(in srgb, var(--sd-bla) 70%, transparent); outline-offset: 2px; }
.sd-tema [hidden], .sd-tema[hidden] { display: none !important; }
.sd-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif; }

:is(#sd-meny, #sd-vanster, #sd-slut, #sd-spel) .sd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 7px 14px;
    border-radius: 12px; border: 1px solid var(--sd-kant2); background: var(--sd-yta2); color: var(--sd-text);
    font: 700 .92rem 'Exo 2', system-ui, sans-serif; cursor: pointer; text-decoration: none; box-shadow: none; transform: none;
}
:is(#sd-meny, #sd-vanster, #sd-slut, #sd-spel) .sd-btn:hover { border-color: var(--sd-bla); background: var(--sd-yta2); }
:is(#sd-meny, #sd-vanster, #sd-slut, #sd-spel) .sd-btn.sd-primar { background: linear-gradient(135deg, #2563eb, #3b82f6); border-color: transparent; color: #fff; }
:is(#sd-meny, #sd-vanster, #sd-slut, #sd-spel) .sd-btn.sd-pa { border-color: var(--sd-lila); background: color-mix(in srgb, var(--sd-lila) 18%, var(--sd-yta2)); color: var(--sd-lila-t); }
:is(#sd-meny, #sd-vanster, #sd-slut, #sd-spel) .sd-btn:disabled { opacity: .45; cursor: default; }
.sd-liten { font-size: .85rem; color: var(--sd-text2); margin: 6px 0 0; line-height: 1.45; }

/* ═════════════════════════════════════════════════════════════════
   Meny
   ═════════════════════════════════════════════════════════════════ */
#sd-meny { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 760px; margin: 0 auto; }
.sd-panel { background: var(--sd-yta); border: 1px solid var(--sd-kant); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sd-skugga); }
.sd-panel > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 1.02rem 'Exo 2', sans-serif; color: var(--sd-text); }
.sd-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(--sd-bla-t); color: var(--sd-bla-t); background: color-mix(in srgb, var(--sd-bla) 14%, transparent); }
.sd-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
#sd-meny .sd-val {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 10px 8px; text-align: center; border: 2px solid var(--sd-kant2); border-radius: 12px; background: var(--sd-yta); color: var(--sd-text);
    font: 700 .95rem 'Exo 2', sans-serif; cursor: pointer; box-shadow: none; transform: none; min-height: 48px;
}
#sd-meny .sd-val:hover { border-color: var(--sd-bla); background: var(--sd-yta); }
#sd-meny .sd-val[aria-checked="true"] { border-color: var(--sd-bla); background: color-mix(in srgb, var(--sd-bla) 15%, var(--sd-yta)); }
#sd-meny .sd-niva[data-v="easy"][aria-checked="true"]   { border-color: var(--sd-gron); background: color-mix(in srgb, var(--sd-gron) 14%, var(--sd-yta)); }
#sd-meny .sd-niva[data-v="medium"][aria-checked="true"] { border-color: var(--sd-orange); background: color-mix(in srgb, var(--sd-orange) 14%, var(--sd-yta)); }
#sd-meny .sd-niva[data-v="hard"][aria-checked="true"]   { border-color: var(--sd-rod); background: color-mix(in srgb, var(--sd-rod) 14%, var(--sd-yta)); }
#sd-meny .sd-niva[data-v="expert"][aria-checked="true"] { border-color: var(--sd-lila); background: color-mix(in srgb, var(--sd-lila) 16%, var(--sd-yta)); }
.sd-val small { font-size: .76rem; font-weight: 500; color: var(--sd-text2); line-height: 1.35; }
.sd-val .sd-stor { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.sd-val .sd-prov { font-size: 1.1rem; letter-spacing: 2px; white-space: nowrap; display: block; }
.sd-steg { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.sd-resultat { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sd-resultat th, .sd-resultat td { padding: 6px 8px; border-bottom: 1px solid var(--sd-kant); text-align: center; }
.sd-resultat th:first-child, .sd-resultat td:first-child { text-align: left; }
.sd-resultat th { color: var(--sd-text2); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
/* "Fortsätt"-kortet – samma form som startkortet, annan färg på knappen */
.start-card.sd-fortsatt .sc-start { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }
.start-card.sd-fortsatt { margin-top: 14px; }

/* ═════════════════════════════════════════════════════════════════
   Spelsidan
   ═════════════════════════════════════════════════════════════════ */
#sd-vanster { display: flex; flex-direction: column; gap: 10px; width: 100%; }
#sd-vanster h1 { margin: 0; text-align: center; font: 800 clamp(1rem, 2vw, 1.25rem) 'Orbitron', sans-serif; color: var(--sd-text); background: none; }
#sd-undertitel { font-size: .75rem; color: var(--sd-mu); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.sd-fakta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sd-fakta div { background: var(--sd-yta2); border: 1px solid var(--sd-kant); border-radius: 12px; padding: 6px 8px; text-align: center; }
.sd-fakta b { display: block; font-size: 1.15rem; color: var(--sd-text); font-variant-numeric: tabular-nums; }
.sd-fakta span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sd-mu); }
.sd-knapprad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#sd-vanster .sd-btn { width: 100%; }
.sd-meddelande { min-height: 1.4em; text-align: center; font-weight: 700; font-size: .9rem; color: var(--sd-text2); }
.sd-meddelande.bra { color: var(--sd-gron-t); }
.sd-meddelande.fel { color: var(--sd-rod-t); }
.sd-tips { font-size: .78rem; color: var(--sd-text2); background: var(--sd-yta2); border: 1px solid var(--sd-kant); border-radius: 12px; padding: 9px 11px; line-height: 1.45; }
.sd-tips kbd { font: 700 .74rem 'Exo 2', sans-serif; background: var(--sd-yta); border: 1px solid var(--sd-kant2); border-radius: 4px; padding: 0 4px; }

/* Spelytan är en "size container": brädet blir så stort som får plats,
   med plats för sifferraden under. */
#sd-spel { --pad: 72px; container-type: size; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.sd-brade {
    --bs: min(100cqw, calc(100cqh - var(--pad) - 10px));
    width: var(--bs); height: var(--bs); flex: none;
    display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
    background: var(--sd-ruta); border: 3px solid var(--sd-tjock); border-radius: 10px; overflow: hidden;
    box-shadow: var(--sd-skugga); touch-action: manipulation; user-select: none; -webkit-user-select: none; outline: none;
}
.sd-cell {
    position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0;
    border-right: 1px solid var(--sd-tunn); border-bottom: 1px solid var(--sd-tunn);
    background: var(--sd-ruta); color: var(--sd-egen-t); cursor: pointer;
    font-size: calc(var(--bs) / var(--n) * .55); font-weight: 700; line-height: 1;
}
.sd-cell.hr { border-right: 3px solid var(--sd-tjock); }
.sd-cell.hb { border-bottom: 3px solid var(--sd-tjock); }
.sd-cell.sk { border-right: 0; }
.sd-cell.sr { border-bottom: 0; }
.sd-cell.given { background: var(--sd-given); color: var(--sd-given-t); font-weight: 800; }
.sd-cell.granne { background-image: linear-gradient(var(--sd-granne), var(--sd-granne)); }
.sd-cell.samma  { background-image: linear-gradient(var(--sd-samma), var(--sd-samma)); }
.sd-cell.vald   { background-image: linear-gradient(var(--sd-markerad), var(--sd-markerad)); box-shadow: inset 0 0 0 2px var(--sd-bla); }
.sd-cell.krock  { color: var(--sd-rod-t); }
.sd-cell.krock:not(.given) { background-image: linear-gradient(color-mix(in srgb, var(--sd-rod) 18%, transparent), color-mix(in srgb, var(--sd-rod) 18%, transparent)); }
.sd-cell.fel { background-image: linear-gradient(color-mix(in srgb, var(--sd-rod) 32%, transparent), color-mix(in srgb, var(--sd-rod) 32%, transparent)); color: var(--sd-rod-t); }
.sd-cell.ledtrad { color: var(--sd-guld-t); }
/* Emojis kan inte färgas, så ledtrådsrutor får också en prick i hörnet */
.sd-cell.ledtrad::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--sd-orange); }
.sd-cell.losning { color: var(--sd-mu); }
.sd-cell.losning.emoji { filter: grayscale(.7); opacity: .75; }
.sd-cell.dra { box-shadow: inset 0 0 0 3px var(--sd-orange); }
.sd-cell.blixt { animation: sd-blixt .6s ease-in-out; }
@keyframes sd-blixt { 50% { background-color: color-mix(in srgb, var(--sd-orange) 55%, var(--sd-ruta)); } }
.sd-brade.klar .sd-cell { animation: sd-klar .8s ease-in-out; }
@keyframes sd-klar { 50% { background-color: color-mix(in srgb, var(--sd-gron) 40%, var(--sd-ruta)); } }
.sd-cell.emoji { font-size: calc(var(--bs) / var(--n) * .5); }
.sd-noter { position: absolute; inset: 1px; display: grid; pointer-events: none; }
.sd-noter.n4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.sd-noter.n6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.sd-noter.n9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.sd-noter i { display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 600; color: var(--sd-not);
    font-size: calc(var(--bs) / var(--n) / 3 * .78); }
.sd-noter.n4 i { font-size: calc(var(--bs) / var(--n) / 2 * .6); }

.sd-pad { width: var(--bs, 100%); --bs: min(100cqw, calc(100cqh - var(--pad) - 10px)); display: grid; grid-template-columns: repeat(var(--n), 1fr) auto; gap: 5px; flex: none; }
#sd-spel .sd-sym {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; height: calc(var(--pad) - 12px); padding: 0;
    border-radius: 10px; border: 1px solid var(--sd-kant2); background: var(--sd-yta); color: var(--sd-text); box-shadow: none; transform: none;
    font: 800 clamp(1rem, 2.4vw, 1.45rem) 'Exo 2', sans-serif; cursor: pointer;
}
#sd-spel .sd-sym:hover { border-color: var(--sd-bla); background: var(--sd-yta); }
#sd-spel .sd-sym small { font-size: .62rem; font-weight: 700; color: var(--sd-mu); }
#sd-spel .sd-sym.slut { opacity: .35; }
#sd-spel .sd-sym.not { border-color: var(--sd-lila); color: var(--sd-lila-t); }
#sd-spel .sd-sym.sudda { padding: 0 12px; font-size: 1.1rem; }

.sd-slut-bg { position: fixed; inset: 0; z-index: var(--z-modal, 1000); display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.6); }
[data-theme="ljus"] .sd-slut-bg { background: rgba(30,41,59,.35); }
.sd-slut { background: var(--sd-yta); border: 1px solid var(--sd-kant2); border-radius: 20px; padding: 24px 28px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.45); max-width: 400px; width: 100%; max-height: 90vh; overflow-y: auto; }
.sd-slut h2 { color: var(--sd-guld-t); font-size: 1.45rem; margin: 0; }
.sd-slut .sd-pokal { font-size: 3rem; line-height: 1.2; }
.sd-slut p { color: var(--sd-text2); margin: 6px 0; }
.sd-slut p b { color: var(--sd-text); }
.sd-slut .sd-rekord { color: var(--sd-gron-t); font-weight: 800; }
.sd-slut-rad { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) { .sd-tema * { animation: none !important; transition: none !important; } }