/* Ordleg: 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;
  /* Farverne for et gæt: rigtigt sted, findes et andet sted, findes ikke */
  --rigtig: #3F8A5A;
  --rigtig-tekst: #FCF7EE;
  --findes: #D69A2D;
  --findes-tekst: #1E2421;
  --ingen: #34413F;
  --ingen-tekst: #FCF7EE;
}
html.kabale-mork {
  --bord: #00353A;
  --bjaelke: #0A1516;
  --knap: #0B4248;
  --ingen: #263231;
}
/* Farveblind: orange og blå i stedet for grøn og gul (kan skelnes ved alle almindelige former for farveblindhed), plus mærker */
body.farveblind {
  --rigtig: #E0762B;
  --rigtig-tekst: #1E2421;
  --findes: #3E8FD6;
  --findes-tekst: #1E2421;
}
body { background: var(--filt), var(--bord); color: var(--creme); font-variant-numeric: tabular-nums; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

#kk-bar { align-items: center; flex-wrap: nowrap; }
#kk-bar button.aktiv { background: var(--creme); color: var(--bjaelke); border-color: var(--creme); }
#kk-bar #valg svg { width: 22px; height: 22px; display: block; background: none; fill: none; stroke: currentColor; stroke-width: 2; }
#kk-bar button:focus-visible, #tast 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: 5px; padding: 6px; }
  #kk-bar button { flex: 1 1 auto; font-size: 14px; padding: 0 7px; }
}

/* Spilleområdet: status, gitter og tastatur stablet. Størrelserne sættes af layout() i Ordleg.html */
#spil { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 8px; box-sizing: border-box; position: relative; }
#info { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; width: 100%; max-width: var(--tast-b, 560px); font: 600 15px/1.3 Poppins, system-ui, sans-serif; text-align: center; }
#info small { font-weight: 400; opacity: .85; font-size: 14px; }
#status { flex: 1 1 auto; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ur { font-variant-numeric: tabular-nums; font-size: 16px; min-width: 2.6em; text-align: right; }
#info button {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(252,247,238,.3);
  background: var(--knap); color: var(--creme); font: 600 15px/1.2 Poppins, system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center;
}
#info #pause { padding: 0; background: transparent; }
#info button svg { width: 20px; height: 20px; background: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
#info button:disabled { opacity: .45; cursor: default; }
#info button:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
/* Tælleren til næste ord i linjen over gitteret, når der er plads (ellers står den i resultatet og under Statistik) */
@media (max-width: 380px) { #info .nyt { display: none; } }
body.store #info .nyt { display: none; }
#gitter { display: grid; grid-template-rows: repeat(6, var(--felt)); gap: var(--mellem); margin: auto 0; }
.raekke { display: grid; grid-template-columns: repeat(5, var(--felt)); gap: var(--mellem); }
.felt {
  position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--felt); height: var(--felt);
  border: 2px solid rgba(252,247,238,.28); border-radius: 6px; background: rgba(252,247,238,.06);
  font: 600 calc(var(--felt) * .56)/1 Poppins, system-ui, sans-serif; color: var(--creme); text-transform: uppercase; user-select: none;
}
.felt.aktiv { border-color: rgba(252,247,238,.42); }
.felt.fyldt { border-color: rgba(252,247,238,.75); animation: tryk 120ms ease-out; }
/* Et bogstav fra Tip står fast på sin plads: grøn kant og prikket bund */
.felt.tipfelt { border-color: var(--rigtig); border-style: dashed; color: var(--creme); background: rgba(63,138,90,.25); }
body.farveblind .felt.tipfelt { background: rgba(224,118,43,.25); }
.felt.r { background: var(--rigtig); border-color: var(--rigtig); color: var(--rigtig-tekst); }
.felt.f { background: var(--findes); border-color: var(--findes); color: var(--findes-tekst); }
.felt.n { background: var(--ingen); border-color: var(--ingen); color: var(--ingen-tekst); }
.felt.vend { animation: vend 220ms ease-out both; }
.raekke.ryst { animation: ryst 300ms ease-out; }
.raekke.hop .felt { animation: hop 360ms ease-out both; }
/* Mærker i farveblind-tilstand, så farven aldrig er eneste kendetegn: hak = rigtigt sted, prik = et andet sted */
body.farveblind .felt.r::after, body.farveblind .felt.f::after {
  position: absolute; top: 2px; right: 4px; font-size: max(11px, calc(var(--felt) * .22)); line-height: 1; font-weight: 600;
}
body.farveblind .felt.r::after { content: '\2713'; }
body.farveblind .felt.f::after { content: '\2022'; }
@keyframes tryk { 50% { transform: scale(1.08); } }
@keyframes vend { 0% { transform: rotateX(90deg); } 60% { transform: rotateX(-12deg); } 100% { transform: rotateX(0); } }
@keyframes ryst { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes hop { 40% { transform: translateY(-10px); } 100% { transform: translateY(0); } }

/* Den korte besked over gitteret: ugyldigt ord, for kort ord */
#kort-besked {
  position: absolute; left: 50%; top: 54px; transform: translateX(-50%); z-index: 2; pointer-events: none; width: max-content;
  background: var(--ark); color: var(--kul); font: 600 16px/1.3 Poppins, system-ui, sans-serif; padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; transition: opacity 150ms ease-out; max-width: calc(100% - 32px); text-align: center;
}
#kort-besked.vis { opacity: 1; }

/* Tastaturet med Æ, Ø og Å */
#tast { width: 100%; max-width: var(--tast-b, 560px); display: flex; flex-direction: column; gap: 6px; }
#tast .t-raekke { display: flex; gap: 4px; justify-content: center; }
#tast button {
  flex: 1 1 0; min-width: 0; max-width: 74px; height: var(--tast-h, 50px); padding: 0; border-radius: 6px; cursor: pointer;
  background: rgba(252,247,238,.2); color: var(--creme); border: 0;
  font: 600 var(--tast-skrift, 19px)/1 Poppins, system-ui, sans-serif; text-transform: uppercase;
}
#tast button.bred { flex: 1.6 1 0; max-width: 118px; font-size: max(14px, calc(var(--tast-skrift, 19px) * .8)); text-transform: none; }
#tast button.bred svg { width: 24px; height: 24px; background: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; vertical-align: middle; }
#tast button.r { background: var(--rigtig); color: var(--rigtig-tekst); }
#tast button.f { background: var(--findes); color: var(--findes-tekst); }
#tast button.n { background: var(--ingen); color: rgba(252,247,238,.6); }
@media (hover: hover) { #tast button:not(.r):not(.f):not(.n):hover { background: rgba(252,247,238,.3); } }
#tast button:active { transform: translateY(1px) scale(.96); }

/* Store felter (til seniorer): større bogstaver og højere taster */
body.store .felt { font-size: calc(var(--felt) * .64); border-width: 3px; }
body.store #tast button { font-size: var(--tast-skrift-stor, 23px); }
body.store #tast button.bred { font-size: 16px; }
body.store #info { font-size: 17px; }

/* Beskeden: regler, statistik, valg og slut. Rød primærknap */
#kk-besked { width: max-content; max-width: min(calc(100vw - 24px), 440px); 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 .eks { display: flex; gap: 4px; justify-content: center; margin: 6px 0 2px; --felt: 38px; }
#kk-besked .eks .felt { font-size: 21px; }
#kk-besked .tal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 10px; }
#kk-besked .tal div { background: rgba(252,247,238,.08); border-radius: 8px; padding: 6px 2px; }
#kk-besked .tal b { display: block; font-size: 24px; line-height: 1.1; }
#kk-besked .tal span { font-size: 12px; opacity: .85; }
#kk-besked .fordeling { margin: 4px 0 8px; text-align: left; }
#kk-besked .fordeling div { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 14px; }
#kk-besked .fordeling i { font-style: normal; min-width: 22px; height: 22px; line-height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 4px; background: var(--ingen); text-align: right; font-weight: 600; }
#kk-besked .fordeling i.nu { background: var(--rigtig); color: var(--rigtig-tekst); }
#kk-besked label.vaelg { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 4px; font-size: 15px; cursor: pointer; }
#kk-besked label.vaelg input { width: 24px; height: 24px; accent-color: var(--roed); flex: none; }
#kk-besked .delt { font-size: 14px; min-height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .felt.fyldt, .felt.vend, .raekke.ryst, .raekke.hop .felt { animation: none; }
  #kort-besked { transition: none; }
}

/* Dialogerne fra spilkit: eksempler i reglerne, fordelingen i statistikken og det lille resultatgitter */
#sk-dialog .eks { display: flex; gap: 4px; justify-content: center; margin: 8px 0 4px; --felt: 42px; }
#sk-dialog .eks .felt { font-size: 23px; }
#sk-dialog .ol-regler p { font-size: 15px; }
#sk-dialog .fordeling { margin: 4px 0 8px; }
#sk-dialog .fordeling div { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 15px; }
#sk-dialog .fordeling i { font-style: normal; min-width: 24px; height: 24px; line-height: 24px; padding: 0 7px; box-sizing: border-box; border-radius: 4px; background: var(--ingen); text-align: right; font-weight: 600; }
#sk-dialog .fordeling i.nu { background: var(--rigtig); color: var(--rigtig-tekst); }
#sk-dialog .ol-mini { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 4px 0 12px; }
#sk-dialog .ol-mini div { display: flex; gap: 3px; }
#sk-dialog .ol-mini i { width: 18px; height: 18px; border-radius: 3px; background: var(--ingen); }
#sk-dialog .ol-mini i.r { background: var(--rigtig); }
#sk-dialog .ol-mini i.f { background: var(--findes); }
#sk-dialog .sk-kt small { display: block; font: 400 13px/1.35 Poppins, system-ui, sans-serif; opacity: .85; margin-top: 2px; }
#sk-dialog .sk-kontakt { padding-top: 8px; padding-bottom: 8px; }
#sk-dialog .dagens-ur { font-weight: 600; font-variant-numeric: tabular-nums; }
html.kabale-hk #info button { border: 2px solid var(--creme) !important; }

/* Stor tekst (Visning): info-linjen må bryde om, så ingen knap skubbes ud af skærmen */
html[data-ts] #info { flex-wrap: wrap; row-gap: 4px; flex-shrink: 0; }