/* Ordhjul: bygger på anagram.css (bord, bjælke, info, knapper). Her krydsordet, hjulet og de to layouts.
   --hjul (hjulets størrelse) sættes af layout() i Ordhjul.html: stablet på telefon/tablet stående, side om side på bred skærm */
#spil { max-width: 760px; --hjul: 260px; }
#spil.side { max-width: 1400px; }
#info { flex-wrap: nowrap; }
#status { flex: none; }
#niv { font-weight: 400; opacity: .85; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ur { font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
#info button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
#info button::after { content: none; }
#info [hidden] { display: none; }
#info #pause { padding: 0; border-color: transparent; }
#info #pause svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
#info #bonus { border-style: dashed; }
#info #tip { background: var(--knap); }

#bord { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; gap: 8px; }
#styring { flex: none; display: flex; flex-direction: column; gap: 8px; align-items: center; }
#spil.side #bord { flex-direction: row; align-items: center; gap: 24px; }
#spil.side #styring { width: max(var(--hjul), 300px); justify-content: center; }
#knapper { width: 100%; max-width: max(var(--hjul), 300px); }
#knapper button { min-height: 48px; font-size: 16px; }
#linje { width: 100%; }

#gitter { flex: 1 1 auto; min-height: 0; min-width: 0; align-self: stretch; display: flex; align-items: safe center; justify-content: safe center; overflow: auto; }
#gitter .net { display: grid; gap: 3px; }
#gitter .f {
  width: var(--c); height: var(--c); border-radius: max(4px, calc(var(--c) * .12)); display: flex; align-items: center; justify-content: center;
  font: 600 calc(var(--c) * .6)/1 Poppins, system-ui, sans-serif; color: var(--kul);
}
#gitter .f.ord { background: var(--tom); box-shadow: inset 0 0 0 1px rgba(252,247,238,.12); }
#gitter .f.vis { background: var(--ark); box-shadow: 0 2px 4px rgba(0,0,0,.18); }
#gitter .f.hjulpet { background: var(--ark); color: #8A5C0C; }
#gitter .f.vist { background: rgba(198,63,40,.8); color: var(--creme); }
#gitter .f.ny { animation: ny .55s ease-out both; }
#gitter.vind .f.vis { animation: hop .5s ease-out 2; }
@keyframes hop { 40% { transform: translateY(-6px); } }

/* Hjulet: bogstaverne på en cirkel, stregen mellem de valgte tegnes i svg'en bagved */
#hjul {
  flex: none; position: relative; align-self: center; width: var(--hjul); aspect-ratio: 1; border-radius: 50%;
  background: rgba(252,247,238,.1); box-shadow: inset 0 0 0 1px rgba(252,247,238,.12); touch-action: none; -webkit-user-select: none; user-select: none;
}
#hjul svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#hjul svg polyline { fill: none; stroke: var(--okker); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
#hjul button {
  position: absolute; width: 25%; height: 25%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%); border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--ark); color: var(--kul); font: 600 calc(var(--hjul) * .11)/1 Poppins, system-ui, sans-serif;
  box-shadow: 0 3px 8px rgba(0,0,0,.3); touch-action: none; transition: transform 120ms ease-out, background-color 120ms;
}
#hjul button.valgt { background: var(--okker); color: var(--kul); transform: translate(-50%, -50%) scale(1.08); }
#hjul button.blandet { animation: bland 320ms ease-out; }
@keyframes bland { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
#hjul button:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }

/* Ordet, man laver, og svaret: større på tablet og bred skærm */
#ordet span { width: clamp(34px, calc(var(--hjul) * .13), 46px); height: clamp(40px, calc(var(--hjul) * .15), 52px); font-size: clamp(22px, calc(var(--hjul) * .085), 30px); }
#linje { height: clamp(46px, calc(var(--hjul) * .17), 58px); }
#svar.god { background: var(--ark); color: var(--kul); }

/* Hjælp og bonus i spilkit-dialogen */
#sk-dialog .oh-bonus { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#sk-dialog .oh-bonus li { padding: 4px 10px; border-radius: 8px; background: rgba(252,247,238,.12); font-weight: 600; letter-spacing: .03em; }
@media (prefers-reduced-motion: reduce) { #gitter .f.ny, #gitter.vind .f.vis, #hjul button.blandet { animation: none; } #hjul button { transition: none; } }

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

/* Meget lav skærm: krydsordet viser mindst godt to rækker (resten rulles i krydsordet); kan resten ikke være der, kan spillet rulles */
@media (max-height: 480px) { #spil { overflow-y: auto; } #gitter { min-height: 58px; } }