/* Hex: rombebrættet af sekskanter på grøn filt. Bord, bjælke, knap og mørk tilstand kommer fra Solitaire.css; bjælke og beskeder fra kabale-kort.css */
:root { --roed: #C63F28; --guld: #E2B54A; --rod-brik: #C63F28; --blaa-brik: #1F5C9E; --felt: #E9DFC7; }
body { background: var(--filt), var(--bord); color: var(--creme); }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
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 { flex: 1 1 auto; font-size: 14px; padding-left: 8px; padding-right: 8px; } }

#spil { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 6px 8px 8px; box-sizing: border-box; }
#info { flex: none; width: min(100%, var(--bw, 600px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#status.taenker::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: prikker 1.2s steps(4) infinite; }
@keyframes prikker { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#stilling { font-weight: 400; font-size: 14px; }
#braet { flex: none; width: var(--bw, 400px); height: var(--bh, 260px); display: block; background: none; touch-action: manipulation; }
#braet:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; border-radius: 6px; }
.hex { fill: var(--felt); stroke: #8C7A55; stroke-width: .9; }
.hex.over { fill: #F6EEDA; }
.kant { fill: none; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.kant.r { stroke: var(--rod-brik); }
.kant.b { stroke: var(--blaa-brik); }
.sten { transform-box: fill-box; transform-origin: center; }
.sten.ny { animation: laeg .25s ease-out; }
@keyframes laeg { from { transform: scale(.4); opacity: .3; } to { transform: none; opacity: 1; } }
.sten.p0 .krop { fill: var(--rod-brik); stroke: #5E1A0E; stroke-width: .6; }
.sten.p1 .krop { fill: var(--blaa-brik); stroke: #0B1E33; stroke-width: .6; }
.sten.p0 .maerke { fill: #FCF7EE; }
.sten.p1 .maerke { fill: none; stroke: #FCF7EE; stroke-width: 1; }
.sten .glans { fill: rgba(255,255,255,.3); }
.sidst { fill: none; stroke: #1E2421; stroke-width: 1.2; }
.vej { fill: none; stroke: var(--guld); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.tip-hex { fill: none; stroke: #1E2421; stroke-width: 1.6; stroke-dasharray: 2.4 1.6; }
.markoer { fill: none; stroke: #1E2421; stroke-width: 1.8; }
.etiket { font: 600 9px Poppins, system-ui, sans-serif; }
.etiket.r { fill: #FFB4A6; } .etiket.b { fill: #A9CBF2; }
#knapper { flex: none; display: flex; gap: 8px; width: min(100%, var(--bw, 600px)); }
#knapper button { flex: 1 1 0; min-height: 48px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(252,247,238,.22); background: var(--knap); color: var(--creme); font: 600 16px/1.2 Poppins, system-ui, sans-serif; cursor: pointer; }
#knapper button:disabled { opacity: .45; cursor: default; }
#knapper #byt:not(:disabled) { background: var(--creme); color: #1E2421; box-shadow: inset 0 -4px 0 var(--roed); }
#knapper #byt[hidden] { display: none; }
.regel-tekst p, .regel-tekst li { font-size: 15px; }
.regel-tekst ul { margin: 0 0 8px; padding-left: 20px; }
.regel-tekst h3 { margin: 12px 0 4px; font: 600 16px Poppins, system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { .sten.ny { animation: none; } #status.taenker::after { animation: none; content: '...'; } }
html.kabale-hk #knapper button { border: 2px solid var(--creme) !important; }