/* 15-puslespil: skiferbordet (puslespil, se docs/DESIGNMANUAL-SPIL.md). Skrift, filt og bjælke kommer fra Solitaire.css og kabale-kort.css */
:root {
  --bord: #434D5D;
  --bjaelke: #252930;
  --knap: #464F5D;
  --flade: #FCF7EE;     /* brikkerne: creme */
  --kul: #1E2421;
  --roed: #C63F28;
  --ramme: #2B313B;     /* fordybningen, brikkerne glider i */
  --hul: rgba(0,0,0,.18);
  --fart: 160ms;
}
html.kabale-mork {
  --bord: #272D37;
  --bjaelke: #111315;
  --knap: #343B47;
  --ramme: #191D23;
}
@media (prefers-reduced-motion: reduce) { :root { --fart: 0ms; } }
body { background: var(--filt), var(--bord); color: var(--creme); font-variant-numeric: tabular-nums; }
/* Solitaire.css giver alle svg filt og fuld størrelse (kabalernes bræt); her er svg kun billedbrikker */
svg { background: none; width: auto; height: auto; }
#motiv-kilde { position: absolute; width: 0; height: 0; overflow: hidden; }
button, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Bjælken: samme knapper som sudoku, størrelsesvælgeren ligner en knap */
#kk-bar { align-items: center; }
#kk-bar select {
  font: 600 15px/1.2 Poppins, system-ui, sans-serif; min-height: 44px; padding: 0 34px 0 14px; border: 1px solid rgba(252,247,238,.22); border-radius: 8px;
  background: var(--knap) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FCF7EE' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--creme); cursor: pointer; -webkit-appearance: none; appearance: none;
}
#kk-bar select option { background: #FCF7EE; color: #1E2421; }
#kk-bar button:focus-visible, #kk-bar select:focus-visible, #panel button:focus-visible, #kk-besked button:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
@media (max-width: 420px) {
  #kk-bar { gap: 6px; padding: 6px; flex-wrap: nowrap; }
  #kk-bar button, #kk-bar select { flex: 1 1 auto; font-size: 14px; padding-left: 8px; padding-right: 8px; }
  #kk-bar select { padding-right: 26px; background-position: right 8px center; }
}

/* Spilleområdet: info, bræt og knapper stablet (portræt) eller brættet til venstre og panelet til højre (bred skærm) */
#spil {
  flex: 1 1 auto; min-height: 0; display: grid; gap: 8px; padding: 6px 6px 8px; box-sizing: border-box;
  grid-template-columns: var(--bredde); grid-template-areas: "info" "braet" "panel"; justify-content: center; align-content: center;
}
#spil.side { grid-template-columns: var(--braet-str) var(--panel); grid-template-rows: auto 1fr; grid-template-areas: "braet info" "braet panel"; gap: 16px 20px; align-content: center; }
#info { grid-area: info; display: flex; align-items: center; gap: 10px; min-height: 32px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#status { white-space: nowrap; }
#rekord { font-weight: 400; opacity: .85; flex: 1 1 auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spil.side #info { flex-direction: column; align-items: flex-start; gap: 4px; align-self: start; padding-top: 12px; }
#spil.side #rekord { text-align: left; white-space: normal; }
@media (max-width: 380px) { #info { font-size: 14px; gap: 8px; } }

/* Brættet: en mørk fordybning med brikkerne lagt oven i. Brikkerne flyttes med transform, så de glider */
#braet {
  grid-area: braet; position: relative; width: var(--braet-str); height: var(--braet-str); justify-self: center; box-sizing: border-box;
  background: var(--ramme); border-radius: 10px; box-shadow: inset 0 2px 8px rgba(0,0,0,.45), 0 1px 0 rgba(252,247,238,.08);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.brik {
  position: absolute; left: 0; top: 0; width: var(--brik); height: var(--brik); margin: 0; padding: 0; border: 0; border-radius: calc(var(--brik) * .09);
  background: var(--flade); color: var(--kul); font: 600 calc(var(--brik) * .44)/1 Poppins, system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; outline: none;
  box-shadow: inset 0 calc(var(--brik) * -.04) 0 rgba(30,36,33,.16), 0 1px 2px rgba(0,0,0,.25);
  transition: transform var(--fart) ease-out, box-shadow var(--fart) ease-out; will-change: transform;
}
.brik.kan { cursor: pointer; }
.brik.traek { transition: none; }
/* Én blød skygge på det, man holder */
.brik.loeftet { box-shadow: inset 0 calc(var(--brik) * -.04) 0 rgba(30,36,33,.16), 0 6px 14px rgba(0,0,0,.4); z-index: 2; }
.brik:focus-visible { box-shadow: inset 0 0 0 3px var(--kul), 0 0 0 3px var(--creme); z-index: 3; }
@media (hover: hover) { .brik.kan:hover { box-shadow: inset 0 calc(var(--brik) * -.04) 0 rgba(30,36,33,.16), inset 0 0 0 2px rgba(67,77,93,.45), 0 1px 2px rgba(0,0,0,.25); } }

/* Billedbrikker: et udsnit af motivet og et lille nummer i hjørnet, så farven aldrig er eneste kendetegn */
.brik svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.brik .nr { position: relative; pointer-events: none; }
#braet.billede .brik .nr {
  position: absolute; left: 6%; top: 6%; min-width: 1.6em; padding: .18em .3em; box-sizing: border-box; border-radius: .5em; text-align: center;
  font-size: max(12px, calc(var(--brik) * .16)); background: rgba(252,247,238,.9); color: var(--kul);
}

/* Tip: rød ring og en pil mod det tomme felt */
#braet .brik.tip { box-shadow: inset 0 0 0 calc(3px + var(--brik) * .03) var(--roed), 0 1px 2px rgba(0,0,0,.25); z-index: 2; }
.brik .pil { position: absolute; width: 28%; height: 28%; pointer-events: none; display: none; }
.brik.tip .pil { display: block; }
.brik .pil::before { content: ''; position: absolute; inset: 0; background: var(--roed); clip-path: polygon(50% 0, 100% 60%, 68% 60%, 68% 100%, 32% 100%, 32% 60%, 0 60%); }
.brik.tip.op .pil { top: 4%; left: 36%; }
.brik.tip.ned .pil { bottom: 4%; left: 36%; transform: rotate(180deg); }
.brik.tip.venstre .pil { left: 4%; top: 36%; transform: rotate(-90deg); }
.brik.tip.hoejre .pil { right: 4%; top: 36%; transform: rotate(90deg); }
#braet.billede .brik.tip .pil::before { filter: drop-shadow(0 0 2px #FCF7EE) drop-shadow(0 0 2px #FCF7EE); }

/* Afvist træk: brikken skubber kort og glider tilbage */
.brik.nej { animation: nej 220ms ease-out; }
@keyframes nej { 0%, 100% { translate: 0 0; } 35% { translate: 3px 0; } 70% { translate: -3px 0; } }

/* Knapper under brættet: Fortryd, Tip og Billede inden for tommelfingerens rækkevidde */
#panel { grid-area: panel; display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: var(--knap-h, 52px); }
#spil.side #panel { grid-template-columns: 1fr; align-content: start; }
#panel button {
  min-width: 0; min-height: 44px; padding: 0 6px; border-radius: 8px; cursor: pointer; font: 600 15px/1.1 Poppins, system-ui, sans-serif;
  border: 1px solid rgba(252,247,238,.22); background: var(--knap); color: var(--creme);
}
#panel button:disabled { opacity: .45; cursor: default; }
#panel button[aria-pressed="true"] { background: var(--flade); color: var(--bjaelke); border-color: var(--roed); box-shadow: inset 0 -4px 0 var(--roed); }

/* Beskeden: flere linjer til reglerne, rød primærknap */
#kk-besked { width: max-content; max-width: min(calc(100vw - 32px), 440px); box-sizing: border-box; }
#kk-besked p { margin: 0 0 6px; font-size: 15px; }
#kk-besked.regler p { text-align: left; }
#kk-besked .knapper { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
#kk-besked .knapper button { margin: 0; }
#kk-besked button.primaer { background: var(--roed); color: var(--creme); }

/* Sejr: en kort bølge hen over brikkerne, og i billedtilstand kommer den sidste brik på plads */
.brik.vind { animation: vind 380ms ease-out both; }
@keyframes vind { 0% { scale: 1; } 45% { scale: .9; } 100% { scale: 1; } }
.brik.sidste { animation: ind 300ms ease-out both; }
@keyframes ind { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .brik.vind, .brik.sidste, .brik.nej { animation: none; } }
/* Pause i infolinjen (kun når uret er slået til) */
#info #pause { margin-left: auto; flex: none; min-height: 44px; padding: 0 14px; border-radius: 8px; cursor: pointer; font: 600 14px/1.2 Poppins, system-ui, sans-serif;
  color: var(--creme); background: transparent; border: 1px solid rgba(252,247,238,.35); }
#info #pause:disabled { opacity: .45; cursor: default; }
/* Ugedagene i arkivet får dialogens baggrund, så kontrasten måles mod den og ikke mod brikkerne bag dialogen */
.sk-ugedag { background: var(--bjaelke); }