/* Ordkamp: petrol-bordet (ordspil, 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;
  --felt: rgba(252,247,238,.1);
  --brik: #F6EBD3;
  --brik-kant: #D9C7A3;
  --c: 24px;
  --brik-b: 46px;
}
html.kabale-mork {
  --bord: #00353A;
  --bjaelke: #0A1516;
  --knap: #0B4248;
  --felt: rgba(252,247,238,.07);
  --brik: #EADDC2;
  --brik-kant: #BFAE8C;
}
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: vælgeren ligner en knap */
#kk-bar { align-items: center; flex-wrap: 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; }
button:focus-visible, select:focus-visible, #kk-besked label:focus-within { outline: 3px solid var(--creme); outline-offset: 2px; }
@media (max-width: 420px) {
  #kk-bar { gap: 6px; padding: 4px 6px; }
  #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: 22px; background-position: right 6px center; }
}

/* Stillingen: dine point, posen og computerens point. Den, der har tur, er fremhævet */
#info { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 6px; font: 400 14px/1.3 Poppins, system-ui, sans-serif; }
#info .spiller { display: flex; align-items: baseline; gap: 6px; padding: 0 8px; border-radius: 6px; border: 2px solid transparent; white-space: nowrap; }
#info .spiller b { font-size: 17px; font-weight: 600; }
#info .spiller.tur { border-color: var(--creme); }
#pose { min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 8px; cursor: pointer; font: 400 14px/1.2 Poppins, system-ui, sans-serif; color: var(--creme); background: transparent; border: 1px solid rgba(252,247,238,.35); white-space: nowrap; }

/* Spilleområdet: bræt, status, bakke og knapper stablet. Størrelserne sættes af layout() i Ordkamp.html */
#omraade { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 2px 4px 4px; box-sizing: border-box; }
#braet {
  display: grid; grid-template-columns: repeat(15, var(--c)); grid-template-rows: repeat(15, var(--c)); gap: 1px; padding: 2px;
  background: rgba(0,0,0,.18); border-radius: 6px; flex: none; position: relative;
}
.f {
  position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--c); height: var(--c);
  background: var(--felt); border-radius: 3px; font: 600 max(12px, calc(var(--c) * .36))/1 Poppins, system-ui, sans-serif; color: rgba(252,247,238,.9);
  -webkit-user-select: none; user-select: none; cursor: pointer;
}
/* Bonusfelterne: farve og tekst (2B, 3B, 2O, 3O), så farven aldrig er eneste kendetegn */
.f.b2B { background: var(--blaa); color: #fff; }
.f.b3B { background: #367A4E; color: #fff; } /* mørkere end --groen: hvid tekst med kontrast 4,5:1 */
.f.b2O { background: var(--okker); color: var(--kul); }
.f.b3O { background: var(--roed); color: #fff; }
.f.midt { background: var(--okker); color: var(--kul); font-size: calc(var(--c) * .6); }
html.kabale-mork .f.b2B, html.kabale-mork .f.b3B, html.kabale-mork .f.b3O { filter: brightness(.82); }
html.kabale-mork .f.b2O, html.kabale-mork .f.midt { filter: brightness(.85); }
.f.mulig { box-shadow: inset 0 0 0 2px var(--creme); }
.f.markoer { box-shadow: inset 0 0 0 2px var(--roed), 0 0 0 1px var(--creme); }
.f.markoer::after {
  content: ''; position: absolute; width: 0; height: 0; border: calc(var(--c) * .16) solid transparent; z-index: 2;
  right: -1px; top: 50%; transform: translateY(-50%); border-left-color: var(--roed); border-right-width: 0;
}
.f.markoer.lodret::after { right: auto; top: auto; bottom: -1px; left: 50%; transform: translateX(-50%); border: calc(var(--c) * .16) solid transparent; border-top-color: var(--roed); border-bottom-width: 0; }

/* Brikkerne: creme med bogstav og point. Samme udseende på brættet, i bakken og når de trækkes */
.brik {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  background: var(--brik); color: var(--kul); border-radius: 3px; border-bottom: 2px solid var(--brik-kant);
  font: 600 calc(var(--c) * .62)/1 Poppins, system-ui, sans-serif; text-transform: uppercase;
}
.brik i { position: absolute; right: 1px; bottom: 0; font: 600 max(12px, calc(var(--c) * .28))/1 Poppins, system-ui, sans-serif; font-style: normal; opacity: .8; }
/* Små felter på brættet (telefon): pointtallet på de lagte brikker vises ikke; det står på brikkerne i bakken og i Tip */
#braet.smaa .brik i { display: none; }
.brik.blank span { color: var(--roed); }
.brik.sidst { background: #F3D99B; border-bottom-color: #C9A24F; }
html.kabale-mork .brik.sidst { background: #E2C27E; }
.brik.ny { box-shadow: inset 0 0 0 2px var(--roed); cursor: grab; touch-action: none; }
.brik.ny.fejl { animation: ryst 300ms ease-out; }
.brik.kommer { animation: kom 220ms ease-out both; }
@keyframes kom { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ryst { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

#side { display: contents; }
#omraade.bred { flex-direction: row; justify-content: center; align-items: center; gap: 18px; }
#omraade.bred #side { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: calc(7 * var(--brik-b) + 6 * 5px + 12px); }
#omraade.bred #knapper { flex-wrap: wrap; }
#omraade.bred #knapper button { flex: 1 1 30%; }
#omraade.bred #knapper button.hoved { flex-basis: 100%; }
#status { flex: none; min-height: 22px; max-width: 100%; text-align: center; font: 400 14px/1.35 Poppins, system-ui, sans-serif; padding: 0 6px; }
#omraade.bred #status { min-height: 44px; font-size: 15px; }
/* Kompakt (telefon i iframen): status som kort besked øverst på brættet */
#omraade { position: relative; }
#omraade.kompakt #status {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 4; pointer-events: none; width: max-content; max-width: calc(100% - 32px);
  background: var(--ark); color: var(--kul); padding: 8px 14px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; transition: opacity 150ms ease-out; min-height: 0;
}
#omraade.kompakt #status.vis { opacity: 1; }
#omraade.kompakt #status.fejl { color: var(--roed); }
#status b { font-weight: 600; }
#status.fejl { color: #FFD2C8; }
@media (prefers-reduced-motion: reduce) { #omraade.kompakt #status { transition: none; } }

/* Bakken med dine 7 brikker */
#bakke { flex: none; display: flex; gap: 5px; justify-content: center; min-height: var(--brik-b); padding: 3px 6px; border-radius: 8px; background: rgba(0,0,0,.18); }
#bakke .plads { position: relative; width: var(--brik-b); height: var(--brik-b); flex: none; border-radius: 6px; }
#bakke .brik { --c: var(--brik-b); position: absolute; inset: 0; border-radius: 6px; border-bottom-width: 3px; cursor: grab; touch-action: none; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
#bakke .brik.valgt { box-shadow: 0 0 0 3px var(--roed); transform: translateY(-4px); }
#bakke .brik.vaek { visibility: hidden; }
#bakke.mulig { box-shadow: inset 0 0 0 2px var(--creme); }

/* Brikken, man trækker */
#traek-brik { position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none; width: var(--brik-b); height: var(--brik-b); --c: var(--brik-b); display: none; }
#traek-brik .brik { border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }

#knapper { flex: none; display: flex; gap: 6px; justify-content: center; width: 100%; max-width: 520px; }
#knapper button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  font: 600 15px/1.2 Poppins, system-ui, sans-serif; color: var(--creme); background: var(--knap); border: 1px solid rgba(252,247,238,.22);
}
#knapper button.hoved { background: var(--roed); border-color: var(--roed); flex-grow: 1.4; }
#knapper button:disabled { opacity: .45; cursor: default; }
@media (max-width: 400px) { #knapper button { font-size: 14px; padding: 0 3px; } }

/* Beskeder: regler, blank brik, byt, slut */
#kk-besked { width: max-content; max-width: min(calc(100vw - 24px), 460px); max-height: calc(100vh - 24px); overflow: 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.stor > p:first-child { font-size: 19px; font-weight: 600; }
#kk-besked.regler p, #kk-besked.regler li { text-align: left; font-size: 15px; }
#kk-besked ul { margin: 4px 0 8px; padding-left: 20px; }
#kk-besked .knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
#kk-besked .knapper button { margin: 0; }
#kk-besked button.primaer { background: var(--roed); color: var(--creme); }
#kk-besked .bogstaver { display: grid; grid-template-columns: repeat(6, 44px); gap: 6px; justify-content: center; margin: 8px 0; }
#kk-besked .bogstaver button { margin: 0; padding: 0; width: 44px; min-height: 44px; font-size: 18px; text-transform: uppercase; background: var(--brik); color: var(--kul); }
#kk-besked .bogstaver button.valgt { background: var(--roed); color: var(--creme); }
#kk-besked .bonus { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; text-align: left; margin: 6px 0 10px; font-size: 14px; }
#kk-besked .bonus span { --c: 28px; position: relative; width: 28px; height: 28px; border-radius: 4px; }
#kk-besked table { border-collapse: collapse; margin: 4px auto 8px; font-size: 14px; }
#kk-besked td { padding: 2px 6px; text-align: left; }
#kk-besked .rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; margin: 8px 0; font-size: 15px; }
#kk-besked .rest span { background: rgba(252,247,238,.08); border-radius: 6px; padding: 3px 0; }
#kk-besked .rest span.nul { opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  .brik.kommer, .brik.ny.fejl { animation: none; }
  #bakke .brik.valgt { transform: 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); }