/* Solitær (kuglespillet): træ-bordet (brætspil, se docs/DESIGNMANUAL-SPIL.md). Skrift, filt og bjælke kommer fra Solitaire.css og kabale-kort.css */
:root {
  --bord: #6D4020;
  --bjaelke: #372417;
  --knap: #6A452B;
  --kul: #1E2421;
  --roed: #C63F28;
  --okker: #D69A2D;
  --plade: #A8703F;    /* mellemmørkt træ, så de creme kugler står tydeligt (3,3:1) */
  --ramme: #2B1A0E;
  --hul: #3A2210;      /* hullerne er boret ned i pladen */
  --hul-kant: #C99863;
}
html.kabale-mork {
  --bord: #402613;
  --bjaelke: #18110D;
  --knap: #4B2F1C;
  --plade: #8E5C32;
  --ramme: #18110D;
  --hul: #2A180B;
  --hul-kant: #B0824F;
}
body { background: var(--filt), var(--bord); color: var(--creme); font-variant-numeric: tabular-nums; }
button, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Bjælken: samme knapper som kabalerne, væ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; min-width: 0;
}
#kk-bar select option { background: #FCF7EE; color: #1E2421; }
#kk-bar button:focus-visible, #kk-bar select:focus-visible, #knapper button:focus-visible, #kk-besked button:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
@media (max-width: 460px) {
  #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: 24px; background-position: right 8px center; }
}

/* Spilleområdet: status over brættet og knapperne under (portræt), eller panelet ved siden af (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(--str); grid-template-areas: "info" "braet" "knapper"; justify-content: center; align-content: center;
}
#spil.side { grid-template-columns: var(--str) 240px; grid-template-rows: max-content 1fr; grid-template-areas: "braet info" "braet knapper"; gap: 12px 20px; }
#info { grid-area: info; display: flex; align-items: center; gap: 10px; min-height: 32px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#spil.side #info { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 4px; }
#spil.side #info > * { flex: none; max-width: 100%; white-space: normal; }
#status { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rekord { font-weight: 400; white-space: nowrap; opacity: .9; }
#status.taenker::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: prik 1.2s steps(4) infinite; }
@keyframes prik { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

#knapper { grid-area: knapper; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
#spil.side #knapper { grid-template-columns: 1fr; }
#knapper button {
  min-height: 52px; border-radius: 8px; cursor: pointer; font: 600 16px/1.1 Poppins, system-ui, sans-serif;
  border: 1px solid rgba(252,247,238,.22); background: var(--knap); color: var(--creme);
}
#knapper button:disabled { opacity: .45; cursor: default; }

/* Brættet: en rund træplade med 33 eller 37 borede huller */
#braet {
  grid-area: braet; width: var(--str); height: var(--str); display: block; justify-self: center;
  touch-action: none; -webkit-user-select: none; user-select: none; outline: none; cursor: default; border-radius: 50%;
}
#braet:focus-visible .ramme { stroke: var(--creme); stroke-width: 6; }
.ramme { fill: var(--ramme); filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.plade { fill: var(--plade); }
.aare { pointer-events: none; }
.hul { fill: var(--hul); stroke: var(--hul-kant); stroke-width: 3; }
.maal-ring { fill: none; stroke: var(--okker); stroke-width: 6; pointer-events: none; }
.maal-ring.indre { stroke-width: 3; stroke-dasharray: 7 6; }

/* Kuglerne: flade creme skiver med en kant nedenunder, så de har tykkelse; kun den, man holder, får skygge */
.kugle { transition: transform 200ms ease-out, opacity 180ms ease-out; cursor: pointer; }
.kugle .kant { fill: #CDBA98; stroke: #6B5640; stroke-width: 2; }
.kugle .top { fill: #FCF7EE; stroke: #6B5640; stroke-width: 2.5; }
.kugle.loeftet { transition: none; filter: drop-shadow(0 8px 6px rgba(0,0,0,.45)); }
.kugle.valgt { filter: drop-shadow(0 6px 6px rgba(0,0,0,.4)); }
.kugle.vaek { opacity: 0; }

/* Markeringer: form og farve, så farven aldrig er eneste kendetegn. Rød og okker får en mørk eller creme kant, så de står tydeligt på træet */
.kontur { fill: none; stroke: var(--ramme); stroke-width: 11; pointer-events: none; }
.ring-valgt-kant { fill: none; stroke: #FCF7EE; stroke-width: 13; pointer-events: none; }
.tip-pil-kant { fill: none; stroke: var(--ramme); stroke-width: 15; stroke-linecap: round; pointer-events: none; }
.ring-valgt { fill: none; stroke: var(--roed); stroke-width: 7; pointer-events: none; }
.prik { fill: #FCF7EE; stroke: var(--kul); stroke-width: 3; pointer-events: none; }
.tip-pil { fill: none; stroke: var(--okker); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tip-spids { fill: var(--okker); }
.tip-ring { fill: none; stroke: var(--okker); stroke-width: 7; stroke-dasharray: 14 8; pointer-events: none; }
.markoer { fill: none; stroke: var(--creme); stroke-width: 5; stroke-dasharray: 10 7; pointer-events: none; }

/* Beskeden: flere linjer til reglerne, rød primærknap */
#kk-besked { width: max-content; max-width: min(calc(100vw - 32px), 460px); 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; flex-wrap: wrap; }
#kk-besked .knapper button { margin: 0; }
#kk-besked button.primaer { background: var(--roed); color: var(--creme); }

/* Sejr: den sidste kugle hopper kort */
.kugle.hop .top, .kugle.hop .kant { animation: hop 280ms ease-out 2 both; }
@keyframes hop { 0% { transform: translateY(0); } 50% { transform: translateY(-16px); } 100% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .kugle, .kugle.hop .top, .kugle.hop .kant { transition: none; animation: none; }
  #status.taenker::after { animation: none; content: ' ...'; }
}
/* Ugedagene i arkivet får dialogens baggrund, så kontrasten måles mod den og ikke mod brættet bag dialogen */
.sk-ugedag { background: var(--bjaelke); }