/* Mølle: 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: #E6C595;   /* lyst træ (ahorn) */
  --linje: #4A2C16;   /* indbrændte linjer: 7,6:1 mod pladen */
  --ramme: #2B1A0E;
  --rille: rgba(43,26,14,.18); /* rillen, brikkerne på hånden ligger i */
}
html.kabale-mork {
  --bord: #402613;
  --bjaelke: #18110D;
  --knap: #4B2F1C;
  --plade: #CDAB7C;
  --linje: #3A2210;
  --ramme: #18110D;
  --rille: rgba(0,0,0,.22);
}
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(--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; }
#status.moelle { color: #FFD9A0; }
#stilling, #sejre { font-weight: 400; white-space: nowrap; opacity: .9; }
#stilling .ik { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; box-sizing: border-box; }
#stilling .ik.c { background: #FCF7EE; border: 1px solid #6B5640; }
#stilling .ik.k { background: #1E2421; border: 1px solid rgba(252,247,238,.6); }
#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 plade af lyst træ med indbrændte linjer og en rille over og under til brikkerne på hånden */
#braet {
  grid-area: braet; width: var(--str); height: calc(var(--str) * 848 / 720); 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); }
.ramme { fill: var(--ramme); }
.plade { fill: var(--plade); }
.rille { fill: var(--rille); }
.aare { pointer-events: none; }
.linjer { fill: none; stroke: var(--linje); stroke-width: 7; stroke-linecap: square; }
.punkt { fill: var(--linje); }
.etik { font: 600 22px Poppins, system-ui, sans-serif; fill: var(--linje); opacity: .75; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.sidst { fill: rgba(214,154,45,.55); }
.kan { cursor: pointer; }

/* Brikkerne: flade skiver med en kant, så de har tykkelse; kun den, man holder, får skygge */
.brik { transition: transform 180ms ease-out, opacity 180ms ease-out; }
.brik .kant { stroke-width: 2; }
.brik.c .top { fill: #FCF7EE; stroke: #6B5640; stroke-width: 2.5; }
.brik.c .kant { fill: #D2C2A4; stroke: #6B5640; }
.brik.c .rille { fill: none; stroke: #CDBFA5; stroke-width: 3; }
.brik.k .top { fill: #1E2421; stroke: rgba(252,247,238,.55); stroke-width: 2.5; }
.brik.k .kant { fill: #0E110F; stroke: rgba(252,247,238,.35); }
.brik.k .rille { fill: none; stroke: #3A423E; stroke-width: 3; }
.brik.loeftet { transition: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); }
.brik.valgt { filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); }
.brik.vaek { opacity: 0; }
.brik.i-moelle .top { stroke: var(--okker); stroke-width: 5; }

/* Markeringer: form og farve, så farven aldrig er eneste kendetegn */
.ring-valgt { fill: none; stroke: var(--roed); stroke-width: 6; pointer-events: none; }
.ring-tag { fill: none; stroke: var(--roed); stroke-width: 6; stroke-dasharray: 12 8; pointer-events: none; }
.prik { fill: rgba(252,247,238,.95); stroke: var(--kul); stroke-width: 3; pointer-events: none; }
.kryds { stroke: var(--roed); stroke-width: 9; stroke-linecap: round; pointer-events: none; }
.kryds-kant { stroke: #FCF7EE; stroke-width: 14; stroke-linecap: round; pointer-events: none; }
.moelle-streg { stroke: var(--okker); stroke-width: 14; stroke-linecap: round; opacity: .85; pointer-events: none; }
.tip-felt { fill: none; stroke: var(--okker); stroke-width: 8; stroke-dasharray: 16 9; pointer-events: none; }
.tip-spids { fill: var(--okker); }
.tip-pil { fill: none; stroke: var(--okker); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; opacity: .95; }
.markoer { fill: none; stroke: var(--roed); 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), 480px); 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: brikkerne hopper kort */
.brik.hop .top, .brik.hop .rille { animation: hop 300ms ease-out both; }
@keyframes hop { 0% { transform: translateY(0); } 50% { transform: translateY(-14px); } 100% { transform: translateY(0); } }

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