/* Broer (hashi-typen): øer i havet. Skrift, filt og bjælke kommer fra Solitaire.css og kabale-kort.css */
:root { --bord: #155E75; --bjaelke: #0C3A48; --knap: #1D7088; --roed: #C63F28; --okker: #D69A2D; --hav: #1B6F88; --oe: #FCF7EE; --oe-kant: #3A2A12; --bro: #F3E3BE; --faerdig: #CDE8C9; }
html.kabale-mork { --bord: #0B3644; --bjaelke: #072029; --knap: #114A5B; --hav: #0F4A5C; --oe: #E9E2D3; }
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; min-width: 0;
}
#kk-bar select option { background: #FCF7EE; color: #1E2421; }
#kk-bar button:focus-visible, #kk-bar select:focus-visible, #knapper button:focus-visible, #info button:focus-visible, #kk-besked button:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; }
@media (max-width: 460px) {
  #kk-bar { gap: 6px; padding: 6px; flex-wrap: nowrap; }
  #kk-bar button, #kk-bar select { flex: 1 1 auto; 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: grid; gap: 8px; padding: 8px; box-sizing: border-box; position: relative;
  grid-template-columns: var(--str); grid-template-areas: "info" "braet" "knapper"; justify-content: center; align-content: center; }
#spil.side { grid-template-columns: var(--str) 240px; grid-template-rows: max-content 1fr; grid-template-areas: "braet info" "braet knapper"; gap: 12px 24px; }
#info { grid-area: info; display: flex; align-items: center; gap: 10px; min-height: 42px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#spil.side #info { flex-wrap: wrap; align-content: flex-start; }
#status { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#spil.side #status { flex-basis: 100%; -webkit-line-clamp: 5; }
#ur { font-weight: 400; }
#pause { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(252,247,238,.22); background: var(--knap); color: var(--creme); font: 600 14px/1 Poppins, system-ui, sans-serif; cursor: pointer; }
html.sk-uden-ur #pause { display: none; }
#knapper { grid-area: knapper; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
#spil.side #knapper { grid-template-columns: 1fr; }
#knapper button { min-height: 52px; border-radius: 8px; cursor: pointer; font: 600 16px/1.1 Poppins, system-ui, sans-serif; border: 1px solid rgba(252,247,238,.22); background: var(--knap); color: var(--creme); }
#knapper button:disabled { opacity: .45; cursor: default; }

#braet { grid-area: braet; width: var(--str); height: var(--str); display: block; justify-self: center; touch-action: none; -webkit-user-select: none; user-select: none; border-radius: 12px; background: var(--hav); }
.prik { fill: rgba(252,247,238,.13); }
.bro { stroke: var(--bro); stroke-width: 7; stroke-linecap: round; pointer-events: none; }
.bro-skygge { stroke: rgba(0,0,0,.25); stroke-width: 11; stroke-linecap: round; pointer-events: none; }
.bro-hit { stroke: transparent; stroke-width: 44; cursor: pointer; }
.bro.ny { animation: bygbro 260ms ease-out; }
@keyframes bygbro { from { stroke-dasharray: 0 400; } to { stroke-dasharray: 400 0; } }
.tip-bro { stroke: var(--okker); stroke-width: 9; stroke-dasharray: 14 10; stroke-linecap: round; pointer-events: none; animation: tipbro 1s linear infinite; }
.tip-bro.fjern { stroke: #FF8F7A; }
@keyframes tipbro { to { stroke-dashoffset: -48; } }
.traek-linje { stroke: var(--creme); stroke-width: 5; stroke-dasharray: 8 8; pointer-events: none; opacity: .8; }
.oe { cursor: pointer; outline: none; }
.oe circle.krop { fill: var(--oe); stroke: var(--oe-kant); stroke-width: 4; }
.oe text { font: 600 44px/1 Poppins, system-ui, sans-serif; fill: #1E2421; pointer-events: none; }
.oe.faerdig circle.krop { fill: var(--faerdig); stroke: #24603A; }
.oe.faerdig .flueben { display: block; }
.oe .flueben { display: none; fill: none; stroke: #24603A; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.oe.over circle.krop { fill: #F8D2C9; stroke: var(--roed); stroke-dasharray: 8 5; }
.oe.valgt circle.ring, .oe:focus-visible circle.ring { display: block; }
.oe circle.ring { display: none; fill: none; stroke: var(--okker); stroke-width: 6; }
.oe:focus-visible circle.ring { stroke: var(--creme); stroke-dasharray: 8 6; }
.oe.valgt circle.ring { stroke: var(--okker); stroke-dasharray: none; }
.oe.mulig circle.krop { stroke: var(--okker); stroke-width: 6; }
#spil.vundet .oe circle.krop { animation: hop 500ms ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes hop { 40% { transform: scale(1.15); } }
#kk-besked { width: max-content; max-width: min(calc(100vw - 32px), 460px); 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; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#kk-besked .knapper button { margin: 0; }
#kk-besked button.primaer { background: var(--roed); color: var(--creme); }
.sk-ugedag { background: var(--bjaelke); }
html.kabale-hk .oe circle.krop { stroke-width: 6; }
@media (prefers-reduced-motion: reduce) { .bro.ny, .tip-bro, #spil.vundet .oe circle.krop { animation: none; } }