/* Kinaskak: 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;
  --blaa: #3E6FA3;
  --groen: #3F8A5A;
  --stjerne: #A8723F;   /* brættet: mellemlyst træ */
  --hul: #3B2414;
  --hul-kant: #CDA678;
}
html.kabale-mork {
  --bord: #402613;
  --bjaelke: #18110D;
  --knap: #4B2F1C;
  --stjerne: #8A5A30;
  --hul: #2A190C;
  --hul-kant: #B48A5C;
}
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 { flex: 1 1 auto; 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(--bredde, var(--str)); grid-template-rows: max-content; 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; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 32px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#spil.side #info { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; 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; }
#traek, #sejre { 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: '...'; } }

/* Spillerne i turens rækkefølge: kugle med symbol og antal i mål; den, der har tur, er streget under */
#spillere { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; list-style: none; font-weight: 400; }
#spil.side #spillere { flex-direction: column; gap: 4px; }
#spillere li { display: flex; align-items: center; gap: 5px; padding: 1px 6px 3px 3px; border-bottom: 3px solid transparent; white-space: nowrap; }
#spillere li.tur { border-bottom-color: var(--creme); font-weight: 600; }
#spillere li.ude { opacity: .75; }
#spillere svg { width: 20px; height: 20px; flex: none; background: none; }
#spillere .navn { display: none; }
#spil.side #spillere .navn { display: inline; }
@media (max-width: 460px) {
  #spillere { gap: 2px; font-size: 14px; }
  #spillere li { padding: 1px 4px 3px 2px; gap: 4px; }
  #spillere .af { display: none; }
}

#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 */
#braet {
  grid-area: braet; width: var(--str); height: calc(var(--str) * 770 / 680); display: block; justify-self: center;
  touch-action: none; -webkit-user-select: none; user-select: none; outline: none; cursor: default; overflow: visible; background: none;
}
#braet:focus-visible .stjerne { stroke: var(--creme); }
.stjerne { fill: var(--stjerne); stroke: var(--stjerne); stroke-width: 64; stroke-linejoin: round; }
.stjerne-skygge { fill: rgba(0,0,0,.35); stroke: rgba(0,0,0,.35); stroke-width: 64; stroke-linejoin: round; }
.aare { pointer-events: none; }
.spids { stroke-width: 3; stroke-linejoin: round; pointer-events: none; }
.spids.maal { fill: none !important; stroke-dasharray: 10 8; stroke-width: 4; }
.spids.dit-maal { stroke: var(--creme) !important; stroke-width: 5; }
.hul { fill: var(--hul); stroke: var(--hul-kant); stroke-width: 1.5; }
.kan { cursor: pointer; }

/* Kuglerne: flade skiver med en kant, så de har tykkelse; kun den, man holder, får skygge */
.kugle { transition: transform 140ms ease-out; }
.kugle .kant { stroke-width: 1.5; }
.kugle .top { stroke-width: 2; }
.kugle .tegn { pointer-events: none; }
.f-creme .top { fill: #FCF7EE; stroke: #6B5640; } .f-creme .kant { fill: #D2C2A4; stroke: #6B5640; } .f-creme .tegn { fill: #6B5640; stroke: #6B5640; }
.f-kul .top { fill: #1E2421; stroke: rgba(252,247,238,.6); } .f-kul .kant { fill: #0E110F; stroke: rgba(252,247,238,.35); } .f-kul .tegn { fill: #FCF7EE; stroke: #FCF7EE; }
.f-roed .top { fill: #C63F28; stroke: #5E1A0F; } .f-roed .kant { fill: #8E2A19; stroke: #5E1A0F; } .f-roed .tegn { fill: #FCF7EE; stroke: #FCF7EE; }
.f-okker .top { fill: #D69A2D; stroke: #5E4210; } .f-okker .kant { fill: #A67520; stroke: #5E4210; } .f-okker .tegn { fill: #3A2908; stroke: #3A2908; }
.f-blaa .top { fill: #3E6FA3; stroke: #172C42; } .f-blaa .kant { fill: #2A4E75; stroke: #172C42; } .f-blaa .tegn { fill: #FCF7EE; stroke: #FCF7EE; }
.f-groen .top { fill: #3F8A5A; stroke: #163322; } .f-groen .kant { fill: #2B6140; stroke: #163322; } .f-groen .tegn { fill: #FCF7EE; stroke: #FCF7EE; }
.tegn.ring { fill: none !important; stroke-width: 3; }
.kugle.loeftet { transition: none; filter: drop-shadow(0 6px 5px rgba(0,0,0,.45)); }
.kugle.valgt { filter: drop-shadow(0 5px 5px rgba(0,0,0,.45)); }

/* Spidserne farves svagt efter ejeren */
.t-creme { fill: rgba(252,247,238,.30); stroke: rgba(252,247,238,.8); }
.t-kul { fill: rgba(30,36,33,.30); stroke: rgba(30,36,33,.8); }
.t-roed { fill: rgba(198,63,40,.30); stroke: rgba(198,63,40,.9); }
.t-okker { fill: rgba(214,154,45,.32); stroke: rgba(214,154,45,.95); }
.t-blaa { fill: rgba(62,111,163,.32); stroke: rgba(62,111,163,.95); }
.t-groen { fill: rgba(63,138,90,.32); stroke: rgba(63,138,90,.95); }

/* Hop-kæder: træet af hop fra den valgte kugle, stien til det felt, man peger på, og de andres sidste træk */
.trae { fill: none; stroke: rgba(252,247,238,.85); stroke-width: 4; stroke-dasharray: 8 7; stroke-linecap: round; pointer-events: none; }
.sti { fill: none; stroke: var(--roed); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.sti-kant { fill: none; stroke: #FCF7EE; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.spids-pil { fill: var(--roed); }
.sti-hop { fill: var(--roed); stroke: #FCF7EE; stroke-width: 3; pointer-events: none; }
.tip-hop { fill: var(--okker); stroke: #3A2908; stroke-width: 2; pointer-events: none; }
.spor { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; opacity: .95; }
.spor-kant { fill: none; stroke: rgba(20,12,6,.55); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.spor-kant.k-kul { stroke: rgba(252,247,238,.75); }
.spor-start { fill: none; stroke-width: 4; pointer-events: none; }
.spor-hop { stroke: rgba(20,12,6,.55); stroke-width: 2; pointer-events: none; }
.s-creme { stroke: #FCF7EE; } .s-kul { stroke: #1E2421; } .s-roed { stroke: #E0573F; } .s-okker { stroke: #E2A93F; } .s-blaa { stroke: #6B98C9; } .s-groen { stroke: #5DB07D; }
.p-creme { fill: #FCF7EE; } .p-kul { fill: #1E2421; } .p-roed { fill: #E0573F; } .p-okker { fill: #E2A93F; } .p-blaa { fill: #6B98C9; } .p-groen { fill: #5DB07D; }
.ring-valgt { fill: none; stroke: var(--roed); stroke-width: 5; pointer-events: none; }
.prik { fill: rgba(252,247,238,.95); stroke: var(--kul); stroke-width: 2.5; pointer-events: none; }
.prik.hop { fill: none; stroke: var(--creme); stroke-width: 5; }
.prik-indre { fill: none; stroke: var(--kul); stroke-width: 2; pointer-events: none; }
.tip-pil { fill: none; stroke: var(--okker); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 8; pointer-events: none; }
.tip-spids { fill: var(--okker); }
.tip-felt { fill: none; stroke: var(--okker); stroke-width: 5; pointer-events: none; }
.markoer { fill: none; stroke: var(--creme); stroke-width: 4; stroke-dasharray: 8 6; 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: kuglerne i målet hopper kort */
.kugle.hop .top, .kugle.hop .tegn { animation: hop 300ms ease-out both; }
@keyframes hop { 0% { transform: translateY(0); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .kugle, .kugle.hop .top, .kugle.hop .tegn { 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); }