/* Reversi: 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;
  --felt: #9A6739;      /* brættet: ensfarvet træ, så både creme og mørke brikker står klart */
  --net: #3A2312;
  --ramme: #2B1A0E;
}
html.kabale-mork {
  --bord: #402613;
  --bjaelke: #18110D;
  --knap: #4B2F1C;
  --felt: #835630;
  --net: #24150A;
  --ramme: #18110D;
}
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; 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 { 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; }
#stilling, #sejre { font-weight: 400; white-space: nowrap; opacity: .9; }
#spil.side #stilling { font: 600 22px/1.3 Poppins, system-ui, sans-serif; opacity: 1; }
#stilling .ik { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.06em; margin-right: 5px; box-sizing: border-box; }
#stilling .ik.c { background: #FCF7EE; border: 1px solid #6B5640; }
#stilling .ik.m { 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 */
#braet {
  grid-area: braet; width: var(--str); height: var(--str); display: block; justify-self: center; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); touch-action: manipulation; -webkit-user-select: none; user-select: none; outline: none; cursor: default;
}
#braet.kan { cursor: pointer; }
#braet:focus-visible { box-shadow: 0 0 0 3px var(--creme), 0 4px 14px rgba(0,0,0,.35); }
.ramme { fill: var(--ramme); }
.felt { fill: var(--felt); }
.aare, .net, .stjerne { pointer-events: none; }
.net line { stroke: var(--net); stroke-width: 3; }
.stjerne { fill: var(--net); }

/* Brikkerne: flade skiver med en kant, så de har tykkelse */
.brik { transform-box: fill-box; transform-origin: center; }
.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: #DDD0B6; stroke-width: 3; }
.brik.m .top { fill: #1E2421; stroke: rgba(252,247,238,.55); stroke-width: 2.5; }
.brik.m .kant { fill: #0E110F; stroke: rgba(252,247,238,.35); }
.brik.m .rille { fill: none; stroke: #3A423E; stroke-width: 3; }
.brik.spoegelse { opacity: .45; pointer-events: none; }
.brik.ny { animation: ny 180ms ease-out both; }
.brik.vend { animation: vend 240ms ease-out both; }
@keyframes ny { 0% { transform: scale(.6); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vend { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* Markeringer: form og farve, så farven aldrig er eneste kendetegn */
.prik { fill: rgba(252,247,238,.9); stroke: var(--kul); stroke-width: 3; pointer-events: none; }
.sidst { fill: var(--roed); stroke: #FCF7EE; stroke-width: 3; pointer-events: none; }
.tip-felt { fill: none; stroke: var(--okker); stroke-width: 8; stroke-dasharray: 16 9; pointer-events: none; }
.markoer { fill: none; stroke: var(--creme); 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), 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: dine brikker hopper kort */
.brik.hop { 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) {
  .brik.ny, .brik.vend, .brik.hop { animation: none; }
  #status.taenker::after { animation: none; content: ' ...'; }
}