/* Sudoku-familien (SudokuPlus.html): bygger oven på sudoku.css. Arket er et gitter af felter med egne kanter,
   så samme kode tegner 4 × 4 til 16 × 16 og samurai (fem gitre med huller imellem) */
#ramme { grid-area: ark; width: var(--ark-str); height: var(--ark-str); justify-self: center; display: flex; align-items: center; justify-content: center; }
#ramme.zoom { overflow: auto; align-items: flex-start; justify-content: flex-start; -webkit-overflow-scrolling: touch; border-radius: 6px; background: rgba(0,0,0,.12); }
#ark {
  width: auto; height: auto; display: grid; gap: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; flex: none;
  grid-template-columns: repeat(var(--kl), var(--celle)); grid-template-rows: repeat(var(--rk), var(--celle));
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.3));
}
#ark .felt { box-sizing: border-box; border-style: solid; border-color: var(--kul); border-width: 0; width: var(--celle); height: var(--celle); }
#ark .felt.ekstra { --grund: #EADFC8; }
#ark .felt { background: var(--grund, var(--ark)); }
#ark .felt.linje { background: linear-gradient(var(--hl-linje), var(--hl-linje)), var(--grund, var(--ark)); }
#ark .felt.ens { background: linear-gradient(var(--hl-ens), var(--hl-ens)), var(--grund, var(--ark)); }
#ark .felt.valgt { background: linear-gradient(var(--hl-valgt), var(--hl-valgt)), var(--grund, var(--ark)); }
#ark .felt.lang { font-size: calc(var(--celle) * .52); letter-spacing: -.07em; }
#ark .felt.emoji, #pad button.emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-weight: 400; }
#ark .felt.emoji { font-size: calc(var(--celle) * .62); }
#ark .felt.fejl.emoji::before { content: ''; position: absolute; inset: 8%; border: max(2px, calc(var(--celle) * .05)) solid var(--roed); border-radius: 50%; }
#ark .noter { grid-template: repeat(var(--nr), 1fr) / repeat(var(--nk), 1fr); font-size: calc(var(--celle) / var(--nk) * .78); padding: 4%; }
#ark .noter.emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-weight: 400; }
svg.sym { background: none; width: 72%; height: 72%; display: block; }
.noter .sym { width: 86%; height: 86%; }
#pad button .sym { width: min(70%, 34px); height: min(70%, 34px); margin: auto; }
#pad.noter button .sym { width: min(50%, 24px); height: min(50%, 24px); }
#pad button.tal.emoji { font-size: clamp(24px, calc(var(--knap-h, 52px) * .62), 34px); }
#pad.noter button.tal.emoji { font-size: clamp(14px, calc(var(--knap-h, 52px) * .32), 20px); }
#pad button.tal { display: flex; align-items: center; justify-content: center; }
#info button.skjult { display: none; }
#kk-besked .laager { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 2px; }
#kk-besked .laager button { margin: 0; min-width: 0; padding: 0; min-height: 44px; font-variant-numeric: tabular-nums; }
#kk-besked .laager button.i-dag { background: var(--roed); color: var(--creme); }
#kk-besked .laager button.loest { box-shadow: inset 0 -4px 0 #6FA36F; }
.felt.vind { animation-duration: 360ms; }
@media (max-width: 420px) { #kk-bar { flex-wrap: wrap; } #kk-bar button, #kk-bar select { font-size: 14px; } #kk-bar button { white-space: nowrap; padding-left: 6px; padding-right: 6px; } #kk-bar select { padding-left: 7px; padding-right: 20px; background-position: right 6px center; } #info { flex-wrap: wrap; row-gap: 4px; } }
#spil.side { grid-template-rows: max-content 1fr; height: var(--ark-str); align-self: center; }
/* Spilskallet: knapperne i infolinjen er 44 px høje, og panelets ord står i mindst 14 px */
#info { min-height: 44px; }
#info button { min-height: 44px; }
#info button::after { display: none; }
@media (max-width: 420px) { #pad button:not(.tal) { font-size: 14px; } }
/* Ugedagene i arkivet får dialogens baggrund, så kontrasten måles mod den og ikke mod arket bag dialogen */
.sk-ugedag { background: var(--bjaelke); }
#pad button:not(.tal) { padding-left: 3px; padding-right: 3px; }