/* Stigespil: bordeaux-bordet (familiespil, se docs/DESIGNMANUAL-SPIL.md). Skrift, filt og bjælke kommer fra Solitaire.css og kabale-kort.css */
:root {
  --bord: #74373D;
  --bjaelke: #3B2022;
  --knap: #703D42;
  --ark: #FCF7EE;
  --ark2: #F2E6D2;      /* hvert andet felt */
  --kul: #1E2421;
  --roed: #C63F28;
  --linje: rgba(30,36,33,.22);
  --stige: #6D4020;     /* træets farve fra manualen */
}
html.kabale-mork {
  --bord: #442124;
  --bjaelke: #191011;
  --knap: #5A2F33;
}
body { background: var(--filt), var(--bord); color: var(--creme); font-variant-numeric: tabular-nums; }
button, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#spil svg { background: none; } /* Solitaire.css giver alle svg filten */

/* Bjælken: samme knapper som kabalerne, vælgerne ligner knapper */
#kk-bar { align-items: center; }
#kk-bar button { white-space: nowrap; }
#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;
}
#kk-bar select option { background: #FCF7EE; color: #1E2421; }
#kk-bar button:focus-visible, #kk-bar select:focus-visible, #styr button:focus-visible, #kk-besked button:focus-visible, #kk-besked label:focus-within { 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; min-width: 0; font-size: 14px; padding-left: 8px; padding-right: 8px; }
  #kk-bar select { padding-right: 24px; background-position: right 8px center; }
}

/* Spilleområdet: spillerne, brættet og terningen stablet (portræt) eller brættet til venstre og resten til højre */
#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); grid-template-areas: "info" "braet" "styr"; justify-content: center; align-content: center;
}
#spil.side { grid-template-columns: var(--str) var(--panel); grid-template-rows: auto 1fr; grid-template-areas: "braet info" "braet styr"; gap: 12px 20px; align-content: center; height: 100%; max-height: calc(var(--str) + 14px); align-self: center; }

#info { grid-area: info; display: flex; gap: 6px; min-height: 34px; }
#spil.side #info { flex-direction: column; }
.spiller {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; box-sizing: border-box;
  font: 600 14px/1.2 Poppins, system-ui, sans-serif; border: 2px solid transparent; background: rgba(0,0,0,.14);
}
.spiller svg { flex: none; width: 22px; height: 22px; }
.spiller .navn { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spiller .tal { flex: none; font-weight: 400; opacity: .9; }
.spiller.aktiv { border-color: var(--creme); background: rgba(0,0,0,.28); }
#spil.side .spiller { flex: none; min-height: 44px; font-size: 15px; }
/* Fire spillere på en smal skærm: kun symbol og felt (navnet står i aria-label) */
@media (max-width: 520px) { #spil:not(.side) .spiller .ord { display: none; } #spil:not(.side) #info.fire .navn { display: none; } #spil:not(.side) #info.fire .spiller { justify-content: center; } }

/* Brættet: et creme ark på bordet */
#braet { grid-area: braet; width: var(--str); height: var(--str); justify-self: center; display: block; overflow: visible;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.32)); -webkit-user-select: none; user-select: none; touch-action: manipulation; }
#braet .ark { fill: var(--ark); }
#braet .felt { fill: var(--ark); }
#braet .felt.to { fill: var(--ark2); }
#braet .felt.maal { fill: #F4DCA8; }
#braet .gitter { fill: none; stroke: var(--linje); stroke-width: .03; }
#braet .nr, #braet .lille { paint-order: stroke; stroke: var(--ark); stroke-width: .07px; stroke-linejoin: round; }
#braet .nr { fill: var(--kul); font: 600 .34px Poppins, system-ui, sans-serif; }
#braet .nr.stor { font-size: .38px; }
#braet .lille { fill: var(--kul); font: 600 .24px Poppins, system-ui, sans-serif; }
#braet .skinne { fill: none; stroke: var(--stige); stroke-width: .07; stroke-linecap: round; }
#braet .trin { fill: none; stroke: var(--stige); stroke-width: .055; stroke-linecap: round; }
#braet .slangekrop { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#braet .omrids { fill: none; stroke: var(--kul); stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .55; }
#braet .prik { fill: none; stroke: #FCF7EE; stroke-opacity: .5; stroke-linecap: round; }
#braet .oeje { fill: #FCF7EE; stroke: var(--kul); stroke-width: .02; }
#braet .pupil { fill: var(--kul); }
#braet .tunge { fill: none; stroke: var(--roed); stroke-width: .035; stroke-linecap: round; }
#braet .konfetti { pointer-events: none; }

.brik { outline: none; }
.brik .krop { stroke: var(--kul); stroke-width: .045; }
.brik .ring { fill: none; stroke: none; }
.brik.tur .ring { stroke: var(--roed); stroke-width: .07; animation: puls 1.1s ease-in-out infinite; }
.brik.loeftet .krop { filter: drop-shadow(0 .05px .1px rgba(0,0,0,.45)); }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Under brættet: status og terningen inden for tommelfingerens rækkevidde */
#styr { grid-area: styr; display: grid; gap: 6px 10px; grid-template-columns: 1fr auto 1fr; grid-template-areas: "status status status" ". ter ."; align-items: center; }
#spil.side #styr { align-self: end; grid-template-columns: 1fr; grid-template-areas: "status" "ter"; gap: 14px; }
#status { grid-area: status; min-height: 42px; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 15px/1.35 Poppins, system-ui, sans-serif; }
#spil.side #status { justify-content: flex-start; text-align: left; min-height: 66px; }
#terning {
  grid-area: ter; justify-self: center; width: var(--tern, 64px); height: var(--tern, 64px); padding: 0; border: 3px solid transparent; border-radius: 14px;
  background: transparent; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
#terning svg { display: block; width: 100%; height: 100%; }
#terning .side { fill: var(--ark); }
#terning .oeje { fill: var(--kul); }
#terning:disabled { cursor: default; box-shadow: none; }
#terning:disabled .side { fill: #E8DFD0; }
#terning.klar { border-color: var(--creme); animation: klar 1.2s ease-in-out infinite; }
@keyframes klar { 0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,.35); } 50% { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 0 5px rgba(252,247,238,.25); } }
#terning.ruller svg { animation: rul 300ms ease-out; }
@keyframes rul { 0% { transform: rotate(-30deg) scale(.85); } 60% { transform: rotate(12deg) scale(1.06); } 100% { transform: none; } }

/* Beskeden: reglerne, valgene og farvevælgeren, rød primærknap */
#kk-besked { width: max-content; max-width: min(calc(100vw - 32px), 460px); max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box; bottom: auto; top: 50%; transform: translate(-50%, -50%); }
#kk-besked p { margin: 0 0 6px; font-size: 15px; }
#kk-besked.regler p { text-align: left; }
#kk-besked h2 { margin: 12px 0 4px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; text-align: left; }
#kk-besked label { display: flex; align-items: center; gap: 10px; min-height: 44px; text-align: left; font-size: 15px; cursor: pointer; border-radius: 6px; }
#kk-besked input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: var(--roed); margin: 0; }
#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); }
#kk-besked .farver { display: flex; flex-wrap: wrap; gap: 8px; }
#kk-besked .farver button { margin: 0; padding: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.2); border: 2px solid transparent; }
#kk-besked .farver button[aria-pressed=true] { border-color: var(--creme); background: rgba(0,0,0,.4); }
#kk-besked .farver svg { width: 32px; height: 32px; display: block; margin: auto; }

@media (prefers-reduced-motion: reduce) {
  .brik.tur .ring, #terning.klar { animation: none; }
  #terning.ruller svg { animation: none; }
}
#kk-besked svg { background: none; }

/* 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); }