/* Fire på stribe: petrol-bordet (logikspil, se docs/DESIGNMANUAL-SPIL.md). Skrift, filt og bjælke kommer fra Solitaire.css og kabale-kort.css */
:root {
  --bord: #005963;
  --bjaelke: #092F33;
  --knap: #035961;
  --ramme: #FCF7EE;
  --ramme-kant: #E4DACA;
  --kul: #1E2421;
  --roed: #C63F28;
}
html.kabale-mork {
  --bord: #00353A;
  --bjaelke: #0A1516;
  --knap: #0B4248;
  --ramme: #EFE8DC;
  --ramme-kant: #D3C8B6;
}
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ælgeren ligner en knap */
#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;
}
#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: 420px) {
  #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: 26px; background-position: right 8px center; }
}

/* Spilleområdet: info, bræt og knapper stablet (portræt) eller knapperne ved siden af (bred, lav skærm) */
#spil {
  flex: 1 1 auto; min-height: 0; display: grid; gap: 6px; padding: 6px 6px 8px; box-sizing: border-box;
  grid-template-columns: var(--bredde); grid-template-areas: "info" "braet" "knapper"; justify-content: center; align-content: center;
}
#spil.side { grid-template-columns: var(--braet-b) var(--panel); grid-template-rows: max-content 1fr; grid-template-areas: "braet info" "braet knapper"; gap: 8px 20px; align-content: center; }
#info { grid-area: info; display: flex; align-items: center; gap: 8px 12px; min-height: 32px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#spil.side #info { flex-direction: column; align-items: flex-start; align-self: end; }
#status { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#rekord { font-weight: 400; opacity: .85; flex: 1 1 auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spil.side #rekord { text-align: left; white-space: normal; }
#spil.side #status { white-space: normal; }
.mini { width: 20px; height: 20px; flex: none; }

/* Brættet: brikkerne ligger bag den creme ramme og ses gennem hullerne */
#braet, .mini { background: none; }
#braet { grid-area: braet; display: block; width: var(--braet-b); height: var(--braet-h); justify-self: center; touch-action: manipulation; -webkit-user-select: none; user-select: none; outline: none; cursor: pointer; }
#braet:focus-visible .ramme-flade { stroke: var(--creme); stroke-width: 6; }
#braet.venter { cursor: progress; }
.ramme-flade { fill: var(--ramme); }
.hulkant { fill: none; stroke: var(--ramme-kant); stroke-width: 4; }
.fod { fill: var(--ramme); }
.brik .flade { stroke-width: 5; }
.brik.p-roed .flade { fill: var(--roed); stroke: #A3321F; }
.brik.p-kul .flade { fill: var(--kul); stroke: #39423D; }
.brik .symbol { fill: none; stroke: var(--creme); stroke-width: 5; stroke-opacity: .5; stroke-linejoin: round; }
.brik.p-kul .symbol { stroke-opacity: .42; }
.spoeg { opacity: .55; }
.spoeg.tip { opacity: 1; animation: tip 900ms ease-in-out infinite alternate; }
@keyframes tip { from { opacity: .35; } to { opacity: .95; } }
.kolonne-lys { fill: var(--roed); opacity: 0; transition: opacity 120ms ease-out; pointer-events: none; }
.kolonne-lys.vis { opacity: .13; }
.kolonne-lys.fuld { fill: var(--kul); }
.vinder-ring { fill: none; stroke: var(--roed); stroke-width: 8; }
.vinder-streg { stroke: var(--creme); stroke-width: 12; stroke-linecap: round; opacity: .92; }
.vinder-streg-kant { stroke: var(--kul); stroke-width: 20; stroke-linecap: round; opacity: .55; }
.brik.vinder .flade { animation: vind 600ms ease-out 2 alternate; }
@keyframes vind { from { opacity: 1; } to { opacity: .55; } }

/* Knapperne under brættet, inden for tommelfingerens rækkevidde */
#knapper { grid-area: knapper; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#spil.side #knapper { grid-template-columns: 1fr; align-content: start; }
#knapper button {
  min-height: 48px; padding: 0 12px; 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; }
@media (hover: hover) { #knapper button:hover:not(:disabled) { border-color: rgba(252,247,238,.5); } }

/* Beskeden: flere linjer til reglerne, rød primærknap */
#kk-besked { width: max-content; max-width: min(calc(100vw - 32px), 440px); box-sizing: border-box; }
#kk-besked.oppe { bottom: auto; top: 8px; }
#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) {
  .kolonne-lys { transition: none; }
  .spoeg.tip, .brik.vinder .flade { animation: none; }
}

/* Dagens opgave: modstandervælgeren skjules (computeren forsvarer sig altid som Mester) */
#kk-bar select[hidden] { display: none; }