/* Banko: forsamlingshuset (blåt bord, gule plader). Skrift, filt og bjælke kommer fra Solitaire.css og kabale-kort.css */
:root {
  --bord: #1C3A57;
  --bjaelke: #10243A;
  --knap: #2B5076;
  --roed: #C63F28;
  --okker: #D69A2D;
  --plade: #FFF4C2;
  --plade-kant: #8A5A12;
  --blaek: #1E2421;
  --stempel: #C63F28;
}
html.kabale-mork {
  --bord: #0F2236;
  --bjaelke: #08121D;
  --knap: #1D3A57;
  --plade: #E8DCA6;
}
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, #spil 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; }
}

/* Opstillingen. Portræt: opråberen står fast øverst, pladerne og tempo/knapper ruller under. Bred skærm: opråber og knapper til venstre, pladerne til højre */
#spil { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "op" "plader" "bund"; grid-template-rows: max-content max-content max-content; align-content: start; gap: 8px; padding: 0 8px 10px; box-sizing: border-box;
  max-width: 1180px; width: 100%; margin: 0 auto; position: relative; overflow-y: auto; overscroll-behavior: contain; }
#spil.side { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "op plader" "bund plader"; gap: 10px 18px; overflow: hidden; padding-top: 8px; }
#opraaber { grid-area: op; display: grid; gap: 6px 10px; align-content: start; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "kugle forrige" "kugle status" "kugle styring" "gev gev" "mod mod"; position: sticky; top: 0; z-index: 2; background: var(--filt), var(--bord); padding: 8px 0 6px; }
#spil.side #opraaber { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kugle" "forrige" "status" "styring" "gev" "mod"; position: static; padding: 0; background: none; }
#kuglerum { grid-area: kugle; } #forrige { grid-area: forrige; } #status { grid-area: status; } #styring { grid-area: styring; } #gevinster { grid-area: gev; } #modstandere { grid-area: mod; }
#plader { grid-area: plader; }
#spil.side #plader { overflow-y: auto; }
#bund { grid-area: bund; display: grid; gap: 6px; align-content: start; }
/* Kuglen */
#kuglerum { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#kugle { width: var(--kugle, 104px); height: var(--kugle, 104px); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #F3EAD2 45%, #D5C7A2 100%); color: var(--blaek); box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 -6px 10px rgba(0,0,0,.12);
  font: 600 calc(var(--kugle, 104px) * .42)/1 Poppins, system-ui, sans-serif; position: relative; }
#kugle::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 3px solid var(--ring, var(--okker)); }
#kugle.tom { color: #6B5E44; font-size: max(14px, calc(var(--kugle, 104px) * .2)); }
#kugle.ny { animation: rul 520ms cubic-bezier(.2,.8,.3,1.2); }
@keyframes rul { 0% { transform: translateY(-30px) rotate(-200deg) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
#kugletal { font: 600 14px/1.2 Poppins, system-ui, sans-serif; opacity: .9; white-space: nowrap; }
#forrige { display: flex; gap: 6px; flex-wrap: wrap; min-height: 34px; align-items: center; }
#forrige span { min-width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #F3EAD2; color: var(--blaek); font: 600 14px/1 Poppins, system-ui, sans-serif; opacity: .9; }
#forrige span:first-child { opacity: 1; }
#styring { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#styring button, #tempo button { min-height: 48px; 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); padding: 0 10px; }
#styring button.primaer { background: var(--roed); border-color: var(--roed); color: #fff; }
#styring button:disabled { opacity: .45; cursor: default; }
#tempo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
#tempo button { min-height: 44px; font-size: 14px; padding: 0 4px; }
#tempo button[aria-pressed="true"] { background: var(--creme); color: var(--bjaelke); box-shadow: inset 0 -3px 0 var(--roed); }
#tempolbl { font-size: 14px; opacity: .85; margin: 0; }
#status { font: 600 15px/1.35 Poppins, system-ui, sans-serif; min-height: 1.35em; margin: 0; }

/* Gevinster og modstandere */
#gevinster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
#gevinster li { border-radius: 8px; padding: 6px 6px; background: rgba(252,247,238,.08); border: 1px solid rgba(252,247,238,.18); text-align: center; font-size: 14px; line-height: 1.25; }
#gevinster li b { display: block; font-size: 14px; }
#gevinster li.aaben { border-color: var(--okker); box-shadow: inset 0 0 0 1px var(--okker); }
#gevinster li.din { background: var(--creme); color: var(--bjaelke); }
#gevinster li.din::before { content: '★ '; color: var(--roed); }
#modstandere { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
#modstandere li.taet { color: #FFD27A; font-weight: 600; }
#modstandere li.taet::after { content: ' !'; }

/* Pladerne: gult papir med rødbrunt gitter som en rigtig bankoplade */
#plader { min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; align-content: start; padding: 2px 2px 8px; }
.plade { background: var(--plade); border: 2px solid var(--plade-kant); border-radius: 8px; padding: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.plade-hoved { display: flex; justify-content: space-between; color: #5A3A0A; font: 600 14px/1.2 Poppins, system-ui, sans-serif; padding: 0 4px 3px; }
.plade-gitter { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; }
.plade-gitter > * { height: var(--celle, 44px); border-radius: 4px; }
.blank { background: rgba(138,90,18,.14); }
.tal { position: relative; border: 1px solid rgba(138,90,18,.45); background: #FFFDF2; color: var(--blaek); font: 600 clamp(14px, 4.4vw, 20px)/1 Poppins, system-ui, sans-serif; cursor: pointer; padding: 0; }
.tal.krydset { color: #5A1A10; }
.tal.krydset::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: rgba(198,63,40,.38); border: 2px solid var(--stempel); pointer-events: none; }
.tal.krydset::before { content: ''; position: absolute; right: 3px; top: 3px; width: 8px; height: 5px; border: solid #5A1A10; border-width: 0 0 2px 2px; transform: rotate(-45deg); z-index: 1; }
.tal.tip { outline: 4px dashed var(--okker); outline-offset: -2px; animation: puls 900ms ease-in-out infinite; }
.tal.ryst { animation: ryst 300ms; }
.plade.fuld { box-shadow: 0 0 0 4px var(--okker), 0 3px 8px rgba(0,0,0,.3); }
.raekke-fuld { background: rgba(214,154,45,.25); }
@keyframes puls { 50% { outline-color: var(--roed); } }
@keyframes ryst { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

#knapper { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#knapper button { min-height: 48px; 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; }

/* Tavlen 1-90 i dialogen */
.tavle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.tavle span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 600 14px/1 Poppins, system-ui, sans-serif; background: rgba(252,247,238,.08); opacity: .7; }
.tavle span.ude { background: #F3EAD2; color: var(--blaek); opacity: 1; }

/* Beskeder (toast) */
#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); }
#jubel { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; padding: 10px 22px; border-radius: 14px; background: var(--creme); color: var(--bjaelke);
  font: 600 26px/1.2 Poppins, system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.4); opacity: 0; }
#jubel.vis { animation: jubel 1800ms ease-out; }
@keyframes jubel { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%); } }
.sk-ugedag { background: var(--bjaelke); }

/* Lav ramme (spillet indlejret på mobil): mindre kugle, ingen tempo-etiket */
@media (max-height: 520px) {
  #tempolbl { display: none; }
  #forrige span:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #kugle.ny, .tal.tip, .tal.ryst, #jubel.vis { animation: none; }
  #jubel.vis { opacity: 1; }
}