/* Mastermind: 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;
  --ark: #FCF7EE;
  --kul: #1E2421;
  --roed: #C63F28;
  --okker: #D69A2D;
  --blaa: #3E6FA3;
  --groen: #3F8A5A;
  --plade: rgba(0,0,0,.22);
  --hul: rgba(0,0,0,.42);
}
html.kabale-mork {
  --bord: #00353A;
  --bjaelke: #0A1516;
  --knap: #0B4248;
  --plade: rgba(0,0,0,.28);
}
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 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; max-width: 210px;
}
#kk-bar select option, #kk-bar select optgroup { background: #FCF7EE; color: #1E2421; }
#kk-bar button:focus-visible, #kk-bar select:focus-visible, #info button:focus-visible, #bund button:focus-visible, #palet 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 { flex: none; font-size: 14px; padding-left: 9px; padding-right: 9px; }
  #kk-bar select { flex: 1 1 auto; min-width: 0; font-size: 14px; padding-left: 6px; }
  #kk-bar select { padding-right: 20px; background-position: right 5px center; } /* 24.10: smallere, så vælgeren kan stå i rækken ved 360 px */
}

/* Spilleområdet: info, bræt, farver og knapper stablet (portræt), eller brættet til venstre og resten til højre (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(--bredde); grid-template-areas: "info" "braet" "palet" "bund"; justify-content: center; align-content: center;
}
#spil.side { grid-template-columns: var(--braet-b) var(--panel); grid-template-rows: auto auto 1fr; grid-template-areas: "braet info" "braet palet" "braet bund"; gap: 12px 20px; }
#spil.side #bund { align-self: start; }
#info { grid-area: info; display: flex; align-items: center; gap: 8px; min-height: 44px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rekord { font-weight: 400; opacity: .85; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
#spil.side #info { flex-wrap: wrap; align-content: flex-start; }
#spil.side #status { white-space: normal; flex: 1 1 100%; }
#spil.side #rekord { text-align: left; }
#info button {
  position: relative; flex: none; font: 600 14px/1.2 Poppins, system-ui, sans-serif; min-height: 44px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  color: var(--creme); background: transparent; border: 1px solid rgba(252,247,238,.35);
}
#info button::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-radius: 3px; box-sizing: border-box; }
#info button[aria-checked="true"]::before { background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3 4.7-5' fill='none' stroke='%23092F33' stroke-width='1.8'/%3E%3C/svg%3E") center/100% no-repeat; }
#info button:disabled { opacity: .45; cursor: default; }
@media (max-width: 420px) { #info { font-size: 14px; gap: 6px; } #info button { padding: 0 8px; font-size: 14px; } #info button::before { margin-right: 5px; } }

/* Brættet: én række pr. gæt med nummer, huller og svarpinde. Første gæt nederst, koden øverst bag en låge */
#braet {
  grid-area: braet; justify-self: center; width: var(--braet-b); box-sizing: border-box; padding: calc(var(--s) * .12) calc(var(--s) * .1);
  background: var(--plade); border-radius: 10px; -webkit-user-select: none; user-select: none; touch-action: none;
}
#raekker { display: flex; flex-direction: column-reverse; }
.raekke { display: flex; align-items: center; height: var(--s); border-radius: calc(var(--s) * .5); }
.raekke .nr { flex: none; width: calc(var(--s) * .8); text-align: center; font: 600 max(12px, calc(var(--s) * .32))/1 Poppins, system-ui, sans-serif; opacity: .8; }
.raekke .huller { display: flex; flex: none; }
.hul {
  position: relative; display: flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); padding: 0; margin: 0;
  border: 0; background: transparent; cursor: default; outline: none;
}
.hul::before { content: ''; position: absolute; width: 34%; height: 34%; border-radius: 50%; background: var(--hul); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.hul.fyldt::before { display: none; }
.hul:not(:disabled) { cursor: pointer; }
.hul .pind { position: relative; width: 82%; height: 82%; }
.raekke.aktiv { background: rgba(252,247,238,.12); box-shadow: inset 0 0 0 2px rgba(252,247,238,.55); }
.raekke.aktiv .hul::before, #spil.omvendt .raekke.kode .hul::before { width: 50%; height: 50%; }
.hul.valgt::after { content: ''; position: absolute; inset: 5%; border-radius: 50%; box-shadow: 0 0 0 3px var(--creme), 0 0 0 5.5px var(--roed); }
.hul:focus-visible::after { content: ''; position: absolute; inset: 5%; border-radius: 50%; box-shadow: 0 0 0 3px var(--creme), 0 0 0 5.5px var(--roed); }
.raekke.vundet { background: rgba(252,247,238,.16); }

/* Pindene: farve, lys kant og et symbol i kontrastfarve */
.pind { display: block; overflow: visible; background: none; }
.pind .skygge { fill: rgba(0,0,0,.35); }
.pind .krop { stroke: rgba(252,247,238,.75); stroke-width: 1.6; }
.pind .symbol { fill: var(--creme); }
.pind.f0 .krop { fill: var(--roed); }
.pind.f1 .krop { fill: var(--okker); stroke: rgba(30,36,33,.4); }
.pind.f1 .symbol { fill: var(--kul); }
.pind.f2 .krop { fill: var(--blaa); }
.pind.f3 .krop { fill: var(--groen); }
.pind.f4 .krop { fill: var(--ark); stroke: rgba(30,36,33,.4); }
.pind.f4 .symbol { fill: var(--kul); }
.pind.f5 .krop { fill: var(--kul); }

/* Svarpinde: fyldt rød prik med creme kant = rigtig plads, creme ring = rigtig farve. Form, ikke kun farve */
.svar { display: grid; grid-template-columns: repeat(var(--kol, 2), calc(var(--s) * .34)); grid-auto-rows: calc(var(--s) * .34); gap: calc(var(--s) * .06); margin-left: calc(var(--s) * .22); }
#braet { --kol: 2; }
.svarpind { display: block; border-radius: 50%; margin: 18%; background: var(--hul); box-shadow: inset 0 1px 1px rgba(0,0,0,.5); }
.svarpind.sort { margin: 2%; background: var(--roed); box-shadow: 0 0 0 1.6px var(--creme); }
.svarpind.hvid { margin: 6%; background: transparent; box-shadow: inset 0 0 0 max(2px, calc(var(--s) * .07)) var(--creme); }
.svarpind.ny { animation: ind 200ms ease-out both; }
@keyframes ind { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.raekke.kode .svar { visibility: hidden; }

/* Koderækken: lågen dækker koden med spørgsmålstegn, indtil spillet er slut */
.raekke.kode { margin-bottom: calc(var(--s) * .14); padding-bottom: calc(var(--s) * .06); border-bottom: 2px solid rgba(252,247,238,.25); border-radius: 0; height: calc(var(--s) * 1.04); }
.raekke.kode.skjult .hul::before { width: 76%; height: 76%; border-radius: 22%; background: var(--bjaelke); box-shadow: inset 0 0 0 1.5px rgba(252,247,238,.35); }
.raekke.kode.skjult .hul::after { content: '?'; position: relative; font: 600 calc(var(--s) * .44)/1 Poppins, system-ui, sans-serif; color: var(--creme); }
.raekke.kode:not(.skjult) .hul .pind { animation: vend 250ms ease-out both; }
@keyframes vend { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#spil.omvendt .raekke.kode { background: rgba(252,247,238,.12); border-radius: calc(var(--s) * .5); }
#spil.omvendt .raekke.kode .nr::before { content: 'Din'; font-size: .9em; }

/* Farvepaletten: seks store pinde, tallet er tastaturgenvejen */
#palet { grid-area: palet; display: grid; grid-template-columns: repeat(6, var(--pal)); justify-content: center; gap: 8px; }
#spil.side #palet { grid-template-columns: repeat(3, var(--pal)); justify-content: start; }
#palet .farve { position: relative; width: var(--pal); height: var(--pal); padding: 3px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
#palet .farve .pind { width: 100%; height: 100%; }
#palet .farve .tast { position: absolute; right: -2px; bottom: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--bjaelke); font: 600 12px/18px Poppins, system-ui, sans-serif; color: var(--creme); }
#palet .farve.brugt { opacity: .4; }
#palet .farve:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { #palet .farve:hover:not(:disabled) .pind { transform: translateY(-2px); } }
@media (pointer: coarse) { #palet .farve .tast { display: none; } }

/* Under farverne: Fortryd, Tip og Gæt */
#bund { grid-area: bund; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
#bund button {
  min-height: 48px; padding: 0 8px; border-radius: 8px; cursor: pointer; font: 600 15px/1.1 Poppins, system-ui, sans-serif;
  border: 1px solid rgba(252,247,238,.22); background: var(--knap); color: var(--creme);
}
#bund button.primaer { background: var(--roed); border-color: var(--roed); }
#bund button.primaer:disabled { background: var(--knap); border-color: rgba(252,247,238,.22); }
#bund button:disabled { opacity: .45; cursor: default; }
#spil.side #bund { grid-template-columns: 1fr 1fr; }
#spil.side #bund .primaer { grid-column: 1 / -1; order: -1; }

/* Pinden, man trækker */
#svaev { position: fixed; left: 0; top: 0; width: 48px; height: 48px; pointer-events: none; z-index: 5; }
#svaev .pind { width: 100%; height: 100%; }

/* 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 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; }
#kk-besked .knapper button { margin: 0; }
#kk-besked button.primaer { background: var(--roed); color: var(--creme); }

@media (prefers-reduced-motion: reduce) {
  .svarpind.ny, .raekke.kode:not(.skjult) .hul .pind { animation: none; }
  #palet .farve:hover .pind { transform: none; }
}
#spil.omvendt #gentag { display: none; }
/* Ugedagene i arkivet får dialogens baggrund, så kontrasten måles mod den og ikke mod brættet bag dialogen */
.sk-ugedag { background: var(--bjaelke); }