/* Nonogram: 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;
  --linje: rgba(30,36,33,.25);
  --tal: #1E2421;
  --tal-faerdig: rgba(30,36,33,.32);
  --kryds: #7A8580;
  --hl: rgba(0,89,99,.10);
}
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; }

#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:focus-visible, #kk-bar select:focus-visible, #vaerktoej 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, #kk-bar select { flex: 1 1 auto; min-width: 0; font-size: 14px; padding-left: 8px; padding-right: 8px; }
  #kk-bar select { padding-right: 24px; background-position: right 8px center; }
}

#spil { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 6px 8px; box-sizing: border-box; }
#info, #vaerktoej { width: 100%; max-width: var(--bredde, 100%); box-sizing: border-box; flex: none; }
#info { display: flex; align-items: center; gap: 10px; min-height: 32px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#status { white-space: nowrap; }
#rekord { font-weight: 400; opacity: .85; flex: 1 1 auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#ramme { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
#braet {
  display: grid; grid-template-columns: var(--rk) repeat(var(--n), var(--c)); grid-template-rows: var(--sk) repeat(var(--n), var(--c));
  background: var(--ark); border-radius: 8px; padding: 4px 7px 7px 4px; box-shadow: 0 4px 14px rgba(0,0,0,.32);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; position: relative;
}
#hjoerne { grid-row: 1; grid-column: 1; }
.sk, .rk { display: flex; color: var(--tal); font: 600 var(--tf)/1 Poppins, system-ui, sans-serif; }
.sk { flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 3px; gap: 1px; }
.rk { flex-direction: row; justify-content: flex-end; align-items: center; padding-right: 4px; gap: calc(var(--tf) * .38); }
.sk.hl, .rk.hl { background: var(--hl); border-radius: 4px; }
.sk.faerdig, .rk.faerdig { color: var(--tal-faerdig); }
#celler { grid-row: 2 / span var(--n); grid-column: 2 / span var(--n); display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 1px; background: var(--linje); outline: 2px solid var(--kul); }
.celle { background: var(--ark); position: relative; cursor: pointer; }
.celle.v5 { box-shadow: 1px 0 0 var(--kul); }
.celle.h5 { box-shadow: 0 1px 0 var(--kul); }
.celle.v5.h5 { box-shadow: 1px 0 0 var(--kul), 0 1px 0 var(--kul), 1px 1px 0 var(--kul); }
.celle.hl { background: linear-gradient(var(--hl), var(--hl)), var(--ark); }
.celle.sort { background: var(--kul); }
.celle.kryds::before, .celle.kryds::after {
  content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: max(1.5px, calc(var(--c) * .09)); margin-top: max(-.75px, calc(var(--c) * -.045));
  background: var(--kryds); border-radius: 2px; transform: rotate(45deg);
}
.celle.kryds::after { transform: rotate(-45deg); }
.celle.tip { animation: tip 900ms ease-out; }
@keyframes tip { 0%, 40% { box-shadow: inset 0 0 0 3px var(--roed); } 100% { box-shadow: inset 0 0 0 0 var(--roed); } }
#braet.vundet .celle.kryds::before, #braet.vundet .celle.kryds::after { opacity: 0; transition: opacity 400ms; }
#braet.vundet #celler { background: var(--ark); }
#braet.vundet .celle { box-shadow: none; }

#vaerktoej { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; }
#vaerktoej button {
  min-width: 0; min-height: 48px; padding: 0 6px; 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); display: flex; align-items: center; justify-content: center; gap: 8px;
}
#vaerktoej button[aria-pressed="true"] { background: var(--ark); color: var(--bjaelke); border-color: var(--roed); box-shadow: inset 0 -4px 0 var(--roed); }
#vaerktoej button:disabled { opacity: .45; cursor: default; }
#vaerktoej .ikon { width: 16px; height: 16px; flex: none; box-sizing: border-box; }
#vaerktoej .ikon.sort { background: currentColor; border-radius: 2px; }
#vaerktoej .ikon.x { position: relative; }
#vaerktoej .ikon.x::before, #vaerktoej .ikon.x::after { content: ''; position: absolute; left: -1px; right: -1px; top: 7px; height: 2.5px; background: currentColor; transform: rotate(45deg); border-radius: 2px; }
#vaerktoej .ikon.x::after { transform: rotate(-45deg); }
@media (max-width: 420px) { #vaerktoej button { font-size: 14px; gap: 6px; } }

#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; 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); }

.celle.vind { animation: vind 420ms ease-out both; }
@keyframes vind { 0% { transform: scale(1); } 45% { transform: scale(.75); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .celle.vind, .celle.tip { animation: none; } }

/* Spilkit: Pause i infolinjen (kun med ur), valgt felt til tastatur og Hjælp, Tjek og færdige linjer */
#info #pause { position: relative; flex: none; font: 600 14px/1.2 Poppins, system-ui, sans-serif; min-height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  color: var(--creme); background: transparent; border: 1px solid rgba(252,247,238,.35); }
#info #pause::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
#info #pause:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
#info #pause:disabled { opacity: .45; cursor: default; }
#ramme { position: relative; }
.celle { outline: none; }
.celle.valgt { box-shadow: inset 0 0 0 max(2px, calc(var(--c) * .08)) var(--roed); z-index: 1; }
.celle.sort.valgt { box-shadow: inset 0 0 0 max(2px, calc(var(--c) * .08)) var(--roed), inset 0 0 0 max(4px, calc(var(--c) * .16)) #FCF7EE; }
#braet.vundet .celle.valgt { box-shadow: none; }
.celle:focus-visible { box-shadow: inset 0 0 0 3px var(--roed), 0 0 0 3px var(--creme); z-index: 2; }
.celle.tjek { animation: tjek 1.3s ease-in-out 2; }
@keyframes tjek { 0%, 100% { box-shadow: inset 0 0 0 0 var(--roed); } 50% { box-shadow: inset 0 0 0 max(4px, calc(var(--c) * .22)) var(--roed); } }
.sk.blink, .rk.blink { animation: blink 700ms ease-out; }
@keyframes blink { 0% { background: rgba(0,89,99,0); } 35% { background: rgba(0,89,99,.25); } 100% { background: rgba(0,89,99,0); } }
@media (prefers-reduced-motion: reduce) { .celle.tjek { animation: none; box-shadow: inset 0 0 0 4px var(--roed); } .sk.blink, .rk.blink { animation: none; } }
/* Sejr: billedet står rent frem uden streger og tal i fuld farve */
#braet.vundet .sk, #braet.vundet .rk { color: var(--tal-faerdig); }
html.kabale-hk .celle.valgt { box-shadow: inset 0 0 0 4px #C63F28; }