/* Find ord: petrol-bordet (logikspil, se docs/DESIGNMANUAL-SPIL.md) med et creme ark. 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;
  --linje: rgba(30,36,33,.12);
}
html.kabale-mork {
  --bord: #00353A;
  --bjaelke: #0A1516;
  --knap: #0B4248;
}
body { background: var(--filt), var(--bord); color: var(--creme); font-variant-numeric: tabular-nums; }
button, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Indtil ordene er hentet, og arket har fået sin størrelse, vises bjælke og spil ikke (ellers hopper de) */
body:not(.klar) #kk-bar, body:not(.klar) #spil { visibility: hidden; }

/* Bjælken: samme knapper som kabalerne, vælgerne ligner knapper */
#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.aktiv { background: var(--creme); color: var(--bjaelke); border-color: var(--creme); }
#kk-bar [hidden] { display: none; }
#kk-bar button:focus-visible, #kk-bar select:focus-visible, #tip:focus-visible, #kk-besked button:focus-visible, #ark:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
@media (max-width: 460px) {
  #kk-bar { gap: 5px; padding: 6px; flex-wrap: nowrap; }
  #kk-bar button, #kk-bar select { flex: 1 1 auto; min-width: 0; font-size: 13.5px; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
  #kk-bar select { padding-right: 22px; background-position: right 7px center; }
}

/* Spilleområdet: info, ark og ordliste stablet (portræt); ordlisten til højre for arket på bred skærm */
#spil {
  flex: 1 1 auto; min-height: 0; display: grid; gap: 8px; padding: 6px 6px 8px; box-sizing: border-box; overflow: hidden;
  grid-template-columns: var(--bredde, 100%); grid-template-rows: auto var(--ark-str) auto;
  grid-template-areas: "info" "ark" "side"; justify-content: center; align-content: center;
}
#spil.side { grid-template-columns: var(--ark-str) var(--side-b); grid-template-rows: auto 1fr;
  grid-template-areas: "ark info" "ark side"; gap: 12px 22px; align-content: center; }
#info { grid-area: info; display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#status { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fundet, #tid { white-space: nowrap; font-size: 16px; }
#tid { min-width: 3.2em; text-align: right; }
#spil.side #info { flex-wrap: wrap; align-self: start; }
#spil.side #status { flex-basis: 100%; }

/* Arket: creme papir med bogstaverne; markeringerne ligger som kapsler bag bogstaverne */
#ark {
  grid-area: ark; justify-self: center; position: relative; width: var(--ark-str); height: var(--ark-str); background: var(--ark); border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,.28); touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer;
}
#streger { position: absolute; inset: var(--kant); width: calc(100% - 2 * var(--kant)); height: calc(100% - 2 * var(--kant)); overflow: visible; background: none; border: 0; box-shadow: none; }
#streger line { stroke-linecap: round; stroke-width: .8; }
#streger line.fundet { animation: tegn 220ms ease-out; }
#streger line.valg { stroke: rgba(198,63,40,.35); }
#streger line.forkert { stroke: rgba(30,36,33,.18); transition: opacity 250ms ease-out; }
#streger circle.start { fill: none; stroke: var(--roed); stroke-width: .08; }
#streger circle.tip { fill: none; stroke: var(--roed); stroke-width: .1; animation: puls 700ms ease-in-out 4; }
#streger rect.markoer { fill: none; stroke: var(--kul); stroke-width: .06; stroke-dasharray: .14 .1; }
@keyframes tegn { from { opacity: 0; } to { opacity: 1; } }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
#gitter {
  position: absolute; inset: var(--kant); display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  font: 600 var(--bogstav)/1 Poppins, system-ui, sans-serif; color: var(--kul); pointer-events: none;
}
#gitter span { display: flex; align-items: center; justify-content: center; }
#ark.vind { animation: hop 480ms ease-out 3; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }

/* Ordlisten: fundne ord streges over og får et flueben og sin farve */
#tip {
  flex: none; font: 600 15px/1.2 Poppins, system-ui, sans-serif; min-height: 44px; padding: 0 18px; border: 1px solid rgba(252,247,238,.3); border-radius: 8px;
  background: var(--knap); color: var(--creme); cursor: pointer;
}
#tip:disabled { opacity: .45; cursor: default; }
#liste { grid-area: side; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; min-width: 0; align-self: start; }
#liste li {
  display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: rgba(252,247,238,.1); border: 1px solid rgba(252,247,238,.22);
  font: 600 var(--liste-str, 16px)/1.2 Poppins, system-ui, sans-serif; letter-spacing: .04em;
}
#liste li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(252,247,238,.55); box-sizing: border-box; flex: none; }
#liste li.fundet { background: transparent; border-color: rgba(252,247,238,.12); color: rgba(252,247,238,.7); text-decoration: line-through; text-decoration-thickness: 2px; }
#liste li.fundet::before { content: '\2713'; width: auto; height: auto; border: 0; font-size: 1em; line-height: 1; color: var(--farve); text-decoration: none; }
#spil.side #liste { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; max-height: calc(var(--ark-str) - 110px); overflow: auto; }
#spil.side #liste.to { display: grid; grid-template-columns: 1fr 1fr; }

/* 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.stor p:first-child { font-size: 18px; font-weight: 600; }
#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); }
#kk-besked .knapper { flex-wrap: wrap; }
#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: 22px; line-height: 1.1; }
#kk-besked .tal span { font-size: 12px; opacity: .85; }
#kk-besked .dagens-ur { font-weight: 600; }
#kk-besked .delt { font-size: 14px; min-height: 20px; }

@media (prefers-reduced-motion: reduce) {
  #streger line.fundet, #streger circle.tip, #ark.vind { animation: none; }
  #streger line.forkert { transition: none; }
}

/* Pause (spilkit) og uret, der kan skjules under Visning */
#pause { flex: none; min-height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--creme); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#pause svg { width: 20px; height: 20px; background: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
#pause:disabled { opacity: .45; cursor: default; }
#pause:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
#ark .sk-pause { border-radius: 10px; }
#sk-dialog .dagens-ur { font-weight: 600; font-variant-numeric: tabular-nums; }

/* 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; }

/* Lav skærm: ordlisten under arket kan rulles (højden sættes af layout()) */
#spil:not(.side) #liste { overflow-y: auto; }