/* Go: træ-bordet (brætspil, se docs/DESIGNMANUAL-SPIL.md) med et lyst kaya-bræt. 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;
  --kaya: #E2BD82;        /* lyst kaya-træ */
  --linje: #3B2512;       /* gitter og koordinater: 8,1:1 mod kaya (mørk: 6,9:1) */
  --ramme: #2B1A0E;
}
html.kabale-mork {
  --bord: #402613;
  --bjaelke: #18110D;
  --knap: #4B2F1C;
  --kaya: #C9A36B;
  --linje: #2E1C0D;
  --ramme: #18110D;
}
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ælgerne ligner knapper */
#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; 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; }
#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; }
#fangne, #sejre { font-weight: 400; white-space: nowrap; opacity: .9; }
#fangne .ik { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; box-sizing: border-box; }
#fangne .ik.s { background: #1E2421; border: 1px solid rgba(252,247,238,.6); }
#fangne .ik.h { background: #FCF7EE; border: 1px solid #6B5640; }
#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: repeat(4, 1fr); gap: 8px; align-content: start; }
#spil.side #knapper { grid-template-columns: 1fr 1fr; }
#knapper button {
  min-height: 52px; border-radius: 8px; cursor: pointer; font: 600 16px/1.1 Poppins, system-ui, sans-serif; padding: 0 4px;
  border: 1px solid rgba(252,247,238,.22); background: var(--knap); color: var(--creme);
}
#knapper button:disabled { opacity: .45; cursor: default; }

/* Brættet */
#braet {
  grid-area: braet; width: var(--str); height: var(--str); display: block; justify-self: center; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); touch-action: none; -webkit-user-select: none; user-select: none; outline: none; cursor: default;
}
#braet:focus-visible { box-shadow: 0 0 0 3px var(--creme), 0 4px 14px rgba(0,0,0,.35); }
.kaya { fill: var(--kaya); }
.aare { pointer-events: none; }
.gitter { stroke: var(--linje); stroke-width: 3; fill: none; stroke-linecap: square; }
.gitter-kant { stroke: var(--linje); stroke-width: 5; fill: none; }
.hoshi { fill: var(--linje); }
.koord { fill: var(--linje); font: 600 30px Poppins, system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
#braet.lille .koord { font-size: 34px; }
.kan { cursor: pointer; }

/* Stenene: flade skiver med en mørkere kant under, så de har lidt tykkelse */
.sten { transition: opacity 200ms ease-out; }
.sten .kant { stroke-width: 2; }
.sten.s .top { fill: #1E2421; stroke: #0B0E0C; stroke-width: 2; }
.sten.s .kant { fill: #0B0E0C; stroke: none; }
.sten.h .top { fill: #FCF7EE; stroke: #6B5640; stroke-width: 2.5; }
.sten.h .kant { fill: #B9A88A; stroke: none; }
.sten.ny .top, .sten.ny .kant { animation: saet 180ms ease-out both; }
@keyframes saet { from { transform: scale(.75); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.sten.vaek { opacity: 0; }
.sten.doed { opacity: .45; }
.spoegelse { pointer-events: none; opacity: .5; }
.spoegelse .top { fill: #1E2421; stroke: #0B0E0C; stroke-width: 2; }
.sigte { stroke: var(--roed); stroke-width: 4; stroke-dasharray: 12 10; pointer-events: none; opacity: .85; }

/* Markeringer: form og farve, så farven aldrig er eneste kendetegn */
.sidst { fill: none; stroke: var(--roed); stroke-width: 7; pointer-events: none; }
.tip-ring { fill: none; stroke: var(--okker); stroke-width: 8; stroke-dasharray: 16 9; pointer-events: none; }
.tip-prik { fill: var(--okker); stroke: var(--kul); stroke-width: 2.5; pointer-events: none; }
.markoer { fill: none; stroke: var(--roed); stroke-width: 5; stroke-dasharray: 10 7; pointer-events: none; }
.omr-s { fill: #1E2421; stroke: rgba(252,247,238,.6); stroke-width: 2; pointer-events: none; }
.omr-h { fill: #FCF7EE; stroke: #1E2421; stroke-width: 3; pointer-events: none; }

/* Beskeden: flere linjer til reglerne og optællingen, 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); }

@media (prefers-reduced-motion: reduce) {
  .sten, .sten.ny .top, .sten.ny .kant { transition: none; animation: none; }
  #status.taenker::after { animation: none; content: ' ...'; }
}

/* Spilskallet: er der ikke plads, deler de to vælgere en linje under knapperne */
#kk-bar.sk-bar.sk-taet > select { flex: 1 1 calc(50% - 4px); }