/* Halma: brættet på grøn filt som de andre brætspil. Bord, bjælke, knap og mørk tilstand kommer fra Solitaire.css; bjælke og beskeder fra kabale-kort.css */
:root { --roed: #C63F28; --guld: #E2B54A; --lys: #E9DFC7; --moerk: #CDBE9B; --din: #C63F28; --hans: #1F3B5C; }
body { background: var(--filt), var(--bord); color: var(--creme); }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
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 { flex: 1 1 auto; font-size: 14px; padding-left: 8px; padding-right: 8px; } }

#spil { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 8px 8px; box-sizing: border-box; }
#spil.side { flex-direction: row; justify-content: center; align-items: center; gap: 16px; }
#panel { display: contents; }
#info { order: 0; } #braet { order: 1; } #knapper { order: 2; }
#spil.side #panel { display: flex; flex-direction: column; gap: 12px; width: 230px; flex: none; order: 2; }
#info { flex: none; width: min(100%, var(--str, 600px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#spil.side #info { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
#status { font-weight: 600; }
#status.taenker::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: prikker 1.2s steps(4) infinite; }
@keyframes prikker { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#stilling { font-weight: 400; font-size: 14px; }
#braet { flex: none; width: var(--str, 400px); height: var(--str, 400px); display: block; background: none; touch-action: manipulation; border-radius: 8px; }
#braet:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; }
.felt { fill: var(--lys); }
.felt.m { fill: var(--moerk); }
.felt.lejr0 { fill: #F2C9B9; } .felt.lejr0.m { fill: #E4AE99; }
.felt.lejr1 { fill: #BFD0E4; } .felt.lejr1.m { fill: #A5BCD6; }
.ramme { fill: #5B3A1A; }
.lejrkant { fill: none; stroke-width: .7; stroke-dasharray: 1.6 1.1; }
.lejrkant.k0 { stroke: #8E2A18; } .lejrkant.k1 { stroke: #1F3B5C; }
.brik { transition: transform var(--hop, 170ms) ease-in-out; }
.brik .skygge { fill: rgba(0,0,0,.3); }
.brik.p0 .krop { fill: var(--din); stroke: #5E1A0E; stroke-width: .5; }
.brik.p0 .maerke { fill: #FCF7EE; }
.brik.p1 .krop { fill: var(--hans); stroke: #0B1727; stroke-width: .5; }
.brik.p1 .maerke { fill: none; stroke: #FCF7EE; stroke-width: .7; }
.brik .glans { fill: rgba(255,255,255,.35); }
.valgt-ring { fill: none; stroke: var(--guld); stroke-width: 1.1; }
.maal-prik { fill: rgba(30,36,33,.55); }
.maal-prik.hop { fill: rgba(198,63,40,.75); }
.tip-ring { fill: none; stroke: #1E2421; stroke-width: 1; stroke-dasharray: 1.4 1; }
.sti { fill: none; stroke: #1E2421; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.6 1.2; opacity: .75; }
.sti.sidst { stroke: var(--hans); opacity: .55; }
.markoer { fill: none; stroke: #1E2421; stroke-width: 1; }
#knapper { flex: none; display: flex; gap: 8px; width: min(100%, var(--str, 600px)); }
#spil.side #knapper { width: 100%; flex-direction: column; }
#knapper button { flex: 1 1 0; min-height: 48px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(252,247,238,.22); background: var(--knap); color: var(--creme); font: 600 16px/1.2 Poppins, system-ui, sans-serif; cursor: pointer; }
#knapper button:disabled { opacity: .45; cursor: default; }
#kk-besked { max-width: min(calc(100vw - 24px), 460px); box-sizing: border-box; }
#kk-besked .knapper { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
#kk-besked button.primaer { background: var(--roed); color: var(--creme); }
.regel-tekst p, .regel-tekst li { font-size: 15px; }
.regel-tekst ul { margin: 0 0 8px; padding-left: 20px; }
.regel-tekst h3 { margin: 12px 0 4px; font: 600 16px Poppins, system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { .brik { transition: none; } #status.taenker::after { animation: none; content: '...'; } }
html.kabale-hk #knapper button { border: 2px solid var(--creme) !important; }
html.kabale-hk .brik.p1 .krop { fill: #000; }