/* Spilskallet for motor-kabalerne (kabale-skal.js): bjælke, infolinje, brættet og knapperne under det.
   Motorens materialize-bjælke skjules. På en lav, liggende skærm (telefon på tværs) står info og knapper i en kolonne til højre. */
html[data-skal], html[data-skal] body { height: 100%; }
html[data-skal] body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; font: 400 15px/1.4 Poppins, system-ui, sans-serif; color: var(--creme); }
html[data-skal] body > nav { display: none; }
html[data-indlejret] #kk-bar { display: none; }
/* Faste rækker, så en skjult bjælke (indlejret) ikke flytter brættet op i bjælkens række */
#kk-bar { grid-row: 1; } #info { grid-row: 2; } #sk-braet { grid-row: 3; } #pad { grid-row: 4; }
#kk-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bjaelke); min-width: 0; }
#kk-bar button, #kk-bar select, #pad button, #kk-besked button, #info button.sk-link, #info #pause {
  font: 600 15px/1.2 Poppins, system-ui, sans-serif; min-height: 44px; padding: 0 14px; border: 1px solid rgba(252,247,238,.22); border-radius: 8px;
  background: var(--knap); color: var(--creme); cursor: pointer; touch-action: manipulation; }
#kk-bar select { width: auto; height: 44px; padding: 0 8px; }
#kk-bar #dagens[aria-pressed="true"] { background: var(--creme); color: var(--bjaelke); }
#info { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 2px 10px; min-height: 44px; background: rgba(0,0,0,.16); font-size: 15px; }
#info b { font-weight: 600; font-variant-numeric: tabular-nums; }
#info #status { font-weight: 600; color: #FFD27A; }
#info #status:empty { display: none; }
#info button.sk-link { min-height: 44px; padding: 0 6px; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; font-weight: 400; }
#info #pause { min-height: 40px; padding: 0 12px; }
#info #ur { font-variant-numeric: tabular-nums; }
#sk-braet { position: relative; min-height: 0; min-width: 0; overflow: hidden; }
#sk-braet > svg { display: block; }
#pad { display: flex; justify-content: center; gap: 10px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--bjaelke); }
#pad button { min-height: 48px; min-width: 96px; font-size: 16px; }
#pad button:disabled, #kk-bar button:disabled { opacity: .45; cursor: default; }
:is(#kk-bar, #pad, #info, #kk-besked) :is(button, select):focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
#kk-besked { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 5; display: none; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 12px;
  max-width: calc(100vw - 24px); box-sizing: border-box; padding: 10px 16px; border-radius: 10px; background: var(--bjaelke); color: var(--creme);
  box-shadow: 0 4px 16px rgba(0,0,0,.4); font: 500 16px/1.4 Poppins, system-ui, sans-serif; text-align: center; }
#kk-besked.vis { display: flex; }
/* Beskeden kan ligge over kortene: tryk går igennem den (kun dens knapper kan trykkes) */
#kk-besked { pointer-events: none; } #kk-besked button { pointer-events: auto; }
#kk-besked button { background: var(--creme); color: var(--bjaelke); border: 0; }
/* Tip: kortet (eller rækken) og stedet, det skal hen, blinker gult tre gange og bliver markeret */
#baize .sk-tip > rect:first-child { stroke: #FFD54A !important; stroke-width: 5px !important; animation: sk-tip .9s ease-in-out 3; }
#baize .sk-tip-til > rect:first-child { stroke-dasharray: 8 5; }
@keyframes sk-tip { 50% { stroke-opacity: .3; } }
@media (prefers-reduced-motion: reduce) { #baize .sk-tip > rect:first-child { animation: none; } }
/* Spil nr.-feltet i dialogen */
#sk-dialog input[type="number"] { box-sizing: border-box; width: 100%; height: 52px; margin: 0; padding: 0 12px; border: 2px solid rgba(252,247,238,.5); border-radius: 10px;
  background: var(--creme); color: var(--bjaelke); font: 600 20px/1 Poppins, system-ui, sans-serif; }
#sk-dialog label.sk-lbl { display: block; }
html.kabale-hk :is(#pad, #kk-besked, #info) button { border: 2px solid var(--creme) !important; }
html.kabale-hk :is(#kk-bar, #pad) select { border: 2px solid var(--creme); }
html[data-ts="1"] :is(#pad, #kk-besked) { zoom: 1.12; }
html[data-ts="2"] :is(#pad, #kk-besked) { zoom: 1.25; }
/* Bred skærm: infolinjen står til venstre i knaprækken under brættet, så brættet får højden */
@media (min-width: 640px) {
  html[data-skal] body { grid-template-rows: auto minmax(0, 1fr) auto; }
  #sk-braet { grid-row: 2; }
  #info { grid-row: 3; grid-column: 1; justify-self: start; align-self: center; z-index: 1; background: transparent; }
  #pad { grid-row: 3; grid-column: 1; justify-content: flex-end; }
}
/* Smal skærm: vælgeren og knapperne i bjælken kortere */
@media (max-width: 420px) {
  #kk-bar { gap: 5px; padding: 6px; }
  #kk-bar > button, #kk-bar > select { padding: 0 8px; }
  #info { gap: 2px 10px; padding: 0 8px; font-size: 14px; }
  #pad button { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  #pad select { flex: 1.3 1 0; min-width: 0; height: 48px; font: 600 15px/1.2 Poppins, system-ui, sans-serif; padding: 0 6px; border: 1px solid rgba(252,247,238,.22); border-radius: 8px; background: var(--knap); color: var(--creme); }
  #pad select ~ #forfra { display: none; }
}
/* Lav, smal ramme (spillet indlejret i en side på en telefon): infolinjen skjules, så brættet får højden */
@media (max-height: 600px) and (max-width: 639px) {
  #info { display: none; }
  #pad { padding-top: 3px; padding-bottom: 3px; }
  #pad button, #pad select { min-height: 44px; height: 44px; }
  #kk-bar { padding-top: 4px; padding-bottom: 4px; }
}
/* Telefon på tværs: brættet får hele højden, info og knapper står til højre */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) {
  html[data-skal] body { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); }
  #kk-bar { grid-column: 1 / 3; }
  #sk-braet { grid-column: 1; grid-row: 2 / 4; }
  #info { grid-column: 2; grid-row: 2; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 132px; padding: 6px 8px; gap: 2px; }
  #pad { grid-column: 2; grid-row: 3; flex-direction: column; justify-content: flex-start; width: 132px; box-sizing: border-box; padding: 6px 8px; }
  #pad button { min-width: 0; }
  #kk-besked { bottom: 12px; }
}
/* Desktop (mus, 23.10): info og knapper i en kompakt linje over brættet, så brættet får hele bredden. Står sidst, så den også gælder i en lav iframe */
@media (min-width: 480px) and (hover: hover) and (pointer: fine) {
  html[data-skal] body { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  #kk-bar, #sk-braet { grid-column: 1 / -1; }
  #sk-braet { grid-row: 3; }
  #info, #pad { grid-row: 2; flex-direction: row; width: auto; background: var(--bjaelke); }
  #info { display: flex; grid-column: 1; align-items: center; justify-content: flex-start; gap: 4px 14px; min-height: 44px; padding: 0 10px; }
  #pad { grid-column: 2; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 8px; }
  #pad button { height: 44px; min-height: 44px; min-width: 0; padding: 0 14px; font-size: 15px; } /* 44 px trykflade (24.10); rækken er stadig 44 px, fordi padding er væk */
  /* Infolinjen som én afrundet boks i knappernes stil (23.10): dæmpede etiketter, tydelige tal, tynde skillelinjer */
  #info { align-self: center; justify-self: start; height: 44px; min-height: 44px; margin-left: 8px; padding: 0; gap: 0; flex-wrap: nowrap;
    border: 1px solid rgba(252,247,238,.22); border-radius: 8px; background: var(--knap); font-size: 14px; color: rgba(252,247,238,.72); overflow: hidden; }
  #info > :not([hidden]) { display: flex; align-items: center; height: 100%; padding: 0 12px; white-space: nowrap; }
  #info > :is(.sk-traek, .sk-pct, #ur, #pause) { border-left: 1px solid rgba(252,247,238,.14); }
  #info b { margin-left: 5px; min-width: 0; color: var(--creme); }
  #info #moveCounter { min-width: 3ch; text-align: left; }
  #info .sk-pct b { margin-left: 0; }
  #info .sk-pct::before { content: "Lagt op"; margin-right: 5px; }
  #info button.sk-link { min-height: 0; height: 100%; border: 0; border-radius: 0; background: transparent; color: rgba(252,247,238,.72); font-weight: 500; text-decoration: none; }
  #info button.sk-link:hover { color: var(--creme); text-decoration: underline; }
  #info #pause { min-height: 0; height: 100%; border-width: 0 0 0 1px; border-radius: 0; }
}
/* Storskærm (?storskaerm=1, institution 24.10): tv eller projektor i fællesstuen. Info og store knapper i én række under brættet, store beskeder, kolonnenumre */
html[data-storskaerm][data-skal] body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
html[data-storskaerm] #sk-braet { grid-row: 2; grid-column: 1; }
html[data-storskaerm] #info, html[data-storskaerm] #pad { grid-row: 3; grid-column: 1; width: auto; flex-direction: row; }
html[data-storskaerm] #info { justify-self: start; align-self: center; z-index: 1; height: auto; min-height: 64px; margin-left: 16px; font-size: 24px; color: var(--creme); }
html[data-storskaerm] #info b { color: var(--creme); }
html[data-storskaerm] #pad { flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 14px; padding: 12px 16px; background: var(--bjaelke); }
html[data-storskaerm] #pad button { height: auto; min-height: 76px; min-width: 170px; padding: 0 28px; font-size: 28px; border: 2px solid var(--creme); }
html[data-storskaerm] #pad #naeste, html[data-storskaerm] #pad #tip { background: #FFD54A; color: #172F20; border-color: #FFD54A; }
html[data-storskaerm] #kk-besked { bottom: 120px; max-width: min(1300px, calc(100vw - 32px)); padding: 20px 30px; gap: 14px 20px; font-size: 32px; line-height: 1.3; border: 3px solid #FFD54A; }
html[data-storskaerm] #kk-besked button { min-height: 68px; padding: 0 26px; font-size: 26px; border-radius: 10px; }
html[data-storskaerm] #baize .sk-tip > rect:first-child { stroke-width: 9px !important; }
.sk-numre { position: absolute; inset: 0; pointer-events: none; }
.sk-numre > span { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; background: #FFD54A; color: #172F20; border: 2px solid #172F20; font: 700 24px/1 Poppins, system-ui, sans-serif; }
@media (max-width: 760px) {
  html[data-storskaerm] #info { display: none; }
  html[data-storskaerm] #pad { justify-content: center; gap: 8px; padding: 8px; }
  html[data-storskaerm] #pad button { flex: 1 1 0; min-width: 0; min-height: 56px; padding: 0 6px; font-size: 18px; }
  html[data-storskaerm] #pad #forfra { display: none; }
  html[data-storskaerm] #kk-besked { bottom: 84px; font-size: 20px; padding: 12px 16px; }
  html[data-storskaerm] #kk-besked button { min-height: 48px; font-size: 18px; }
}
@media (max-height: 800px) and (min-width: 761px) {
  html[data-storskaerm] #pad { padding: 8px 16px; gap: 12px; }
  html[data-storskaerm] #pad button { min-height: 60px; font-size: 24px; min-width: 150px; }
  html[data-storskaerm] #info { min-height: 56px; font-size: 20px; }
}