/* 10.000: aubergine-bordet (terninger, se docs/DESIGNMANUAL-SPIL.md). Skrift, filt og bjælke kommer fra Solitaire.css og kabale-kort.css */
:root {
  --bord: #5E3D6D;
  --bjaelke: #312337;
  --knap: #5D4269;
  --papir: #FCF7EE;
  --kul: #1E2421;
  --roed: #C63F28;      /* accent: valgte terninger, spilleren i tur */
  --daempet: #575D5A;   /* hjælpetekst på papiret, 6,4:1 */
  --linje: rgba(30,36,33,.2);
  --tern: 60px;
  --knap-h: 52px;
}
html.kabale-mork {
  --bord: #372440;
  --bjaelke: #151118;
  --knap: #4A3354;
}
body { background: var(--filt), var(--bord); color: var(--creme); font-variant-numeric: tabular-nums; }
button, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Bjælken: samme knapper som kabalerne, vælgerne ligner knapper */
#kk-bar { align-items: center; }
#kk-bar button { white-space: nowrap; }
#kk-bar select, #kk-besked 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;
}
#kk-bar select:disabled { opacity: .45; cursor: default; }
#kk-bar select option, #kk-besked select option { background: #FCF7EE; color: #1E2421; }
#kk-bar button:focus-visible, #kk-bar select:focus-visible, #handling button:focus-visible, #kk-besked button:focus-visible, #kk-besked select:focus-visible, .terning: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; min-width: 0; font-size: 14px; padding-left: 8px; padding-right: 8px; }
  #kk-bar select { padding-right: 24px; background-position: right 8px center; }
}
@media (max-width: 380px) {
  #kk-bar { gap: 4px; padding: 6px 4px; }
  #kk-bar button, #kk-bar select { font-size: 14px; padding-left: 5px; padding-right: 5px; }
  #kk-bar select { padding-right: 20px; background-position: right 5px center; }
}

/* Spilleområdet: info, tavlen, terningerne og knapperne stablet i én kolonne */
#spil {
  flex: 1 1 auto; min-height: 0; display: grid; gap: var(--gap, 10px); padding: 6px 8px 8px; box-sizing: border-box;
  grid-template-columns: var(--bredde, 100%); grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "info" "tavle" "bord" "noegle" "hand"; justify-content: center; align-content: center;
}
#info { grid-area: info; display: flex; align-items: center; gap: 10px; min-height: 24px; font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
#status { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rekord { font-weight: 400; opacity: .85; white-space: nowrap; }

/* Tavlen: et creme kort pr. spiller med point og en streg mod 10.000 */
#tavle { grid-area: tavle; display: grid; grid-template-columns: repeat(var(--antal, 2), minmax(0, 1fr)); gap: 6px; }
.spiller {
  position: relative; min-width: 0; padding: 5px 8px 8px; border-radius: 8px; background: var(--papir); color: var(--kul);
  box-shadow: 0 2px 6px rgba(0,0,0,.22); font: 400 14px/1.25 Poppins, system-ui, sans-serif; overflow: hidden;
}
.spiller .navn { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spiller .point { display: block; font: 600 var(--point-skrift, 20px)/1.15 Poppins, system-ui, sans-serif; }
.spiller .sidst { display: block; color: var(--daempet); font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spiller .streg { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: rgba(94,61,109,.16); }
.spiller .streg i { display: block; height: 100%; width: 0; background: var(--bord); transition: width 250ms ease-out; }
html.kabale-mork .spiller .streg i { background: #5E3D6D; }
/* Den, der er i tur: rød kant og en pil foran navnet (ikke kun farve) */
.spiller.tur { box-shadow: 0 0 0 3px var(--roed), 0 2px 8px rgba(0,0,0,.3); }
.spiller.tur .navn::before { content: "▸ "; color: var(--roed); }
/* En computer i tur pulserer roligt */
.spiller.tur:not(:first-child) { animation: pulsT 1.1s ease-in-out infinite; }
@keyframes pulsT { 50% { box-shadow: 0 0 0 3px rgba(198,63,40,.3), 0 2px 8px rgba(0,0,0,.3); } }
@media (prefers-reduced-motion: reduce) { .spiller.tur { animation: none; } }
.spiller.foerer .navn::after { content: " ★"; color: #9A6A12; }

/* Bordet med terningerne: turens point, de lagte terninger og slaget */
#bord { grid-area: bord; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; }
#turpoint { font: 600 17px/1.3 Poppins, system-ui, sans-serif; text-align: center; min-height: 22px; }
#turpoint b { font-size: 1.25em; }
#turpoint .valg { font-weight: 400; opacity: .9; }
#side { display: flex; justify-content: center; align-items: center; gap: 5px; min-height: calc(var(--tern) * .5); }
#side .lille { width: calc(var(--tern) * .5); height: calc(var(--tern) * .5); }
#side .lille svg { display: block; width: 100%; height: 100%; border-radius: 18%; opacity: .8; }
#side .etiket { font: 400 14px/1 Poppins, system-ui, sans-serif; opacity: .85; margin-right: 4px; }
#slag { display: flex; justify-content: center; gap: var(--tern-gap, 10px); padding: 6px 0 12px; min-height: var(--tern); }
#slag.to { flex-wrap: wrap; row-gap: 22px; width: calc(var(--tern) * 3 + var(--tern-gap) * 2 + 1px); }

/* Terningerne: creme med kul-øjne. Valgte har rød ring, løftes og får mærket "Valgt" */
.terning {
  position: relative; width: var(--tern); height: var(--tern); padding: 0; border: 0; border-radius: 18%; background: none; cursor: pointer;
  transition: transform 180ms ease-out;
}
.terning svg { display: block; width: 100%; height: 100%; border-radius: 18%; box-shadow: 0 1px 2px rgba(0,0,0,.28); }
.flade { fill: var(--papir); }
.oeje { fill: var(--kul); }
.terning.tom svg { opacity: .3; }
.terning:disabled { cursor: default; }
/* Terninger, der ikke kan give point, er lidt dæmpede (formen viser det også: ingen prik under) */
.terning.doed svg { opacity: .7; }
.terning.kan::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--creme); opacity: .75;
}
.terning.valgt { transform: translateY(-5px); }
.terning.valgt svg { box-shadow: 0 0 0 3px var(--roed), 0 6px 12px rgba(0,0,0,.35); }
.terning.valgt::after { display: none; }
.terning .maerke {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: none; padding: 1px 7px; border-radius: 6px;
  background: var(--roed); color: var(--creme); font: 600 12px/1.4 Poppins, system-ui, sans-serif; letter-spacing: .2px; white-space: nowrap;
}
.terning.valgt .maerke { display: block; }
.terning.foreslaaet svg { box-shadow: 0 0 0 3px var(--creme), 0 0 0 6px var(--roed); }
.terning.nul svg { opacity: .55; }
.terning.ruller svg { animation: rul 320ms ease-out; }
@keyframes rul {
  0% { transform: translateY(-16px) rotate(-150deg) scale(.82); }
  60% { transform: translateY(2px) rotate(12deg) scale(1.02); }
  100% { transform: none; }
}
#nulskilt {
  display: none; padding: 4px 12px; border-radius: 8px; background: var(--bjaelke); color: var(--creme); font: 600 15px/1.3 Poppins, system-ui, sans-serif;
  border: 2px solid var(--roed);
}
#bord.nul #nulskilt { display: block; }

/* Pointnøglen under bordet, når der er plads */
#noegle {
  grid-area: noegle; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font: 400 14px/1.35 Poppins, system-ui, sans-serif; opacity: .9;
}
#noegle b { font-weight: 600; }
#spil.lav #noegle { display: none; }

/* Knapperne nederst: Fortryd og Tip små, Slå og Stop store */
#handling { grid-area: hand; display: grid; grid-template-columns: 1fr 1fr 1.7fr 1.7fr; gap: 8px; }
#handling button {
  min-width: 0; min-height: var(--knap-h); padding: 0 6px; border-radius: 8px; cursor: pointer; font: 600 15px/1.15 Poppins, system-ui, sans-serif;
  border: 1px solid rgba(252,247,238,.22); background: var(--knap); color: var(--creme);
}
#handling #slaa, #handling #stop { font-size: 17px; }
#handling #slaa { background: var(--papir); color: var(--bjaelke); border: 0; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
#handling #stop { background: var(--roed); color: var(--creme); border: 0; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
#handling small { display: block; font-weight: 400; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#slaa small { color: var(--daempet); }
#handling button:disabled { opacity: .45; cursor: default; }
#handling #slaa:disabled, #handling #stop:disabled { opacity: .5; }
@media (max-width: 360px) { #handling button { font-size: 14px; } #handling #slaa, #handling #stop { font-size: 16px; } }

/* Beskeden: regler med pointtabel og husregler, rød primærknap */
#kk-besked { width: max-content; max-width: min(calc(100vw - 24px), 470px); max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box; }
#kk-besked p { margin: 0 0 6px; font-size: 15px; }
#kk-besked p.stor { font-size: 19px; font-weight: 600; }
#kk-besked.regler { bottom: auto; top: 12px; }
#kk-besked.regler p { text-align: left; }
#kk-besked table { margin: 4px auto 8px; border-collapse: collapse; font-size: 14px; }
#kk-besked td { padding: 1px 8px; text-align: left; }
#kk-besked td + td { text-align: right; font-weight: 600; }
#kk-besked .husregler { display: grid; grid-template-columns: auto auto; gap: 6px 10px; align-items: center; margin: 8px 0 4px; text-align: left; font-size: 14px; }
#kk-besked .husregler select { min-height: 40px; font-size: 14px; }
#kk-besked .knapper { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
#kk-besked .knapper button { margin: 0; }
#kk-besked button.primaer { background: var(--roed); color: var(--creme); }
#kk-besked .stilling { margin: 2px auto 6px; }

/* Sejr: terningerne hopper én gang */
.terning.vind svg { animation: vind 500ms ease-out both; }
@keyframes vind { 0% { transform: none; } 40% { transform: translateY(-14px) rotate(8deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .terning.ruller svg, .terning.vind svg { animation: none; }
  .terning, .spiller .streg i { transition: none; }
}

/* Smal skærm: de to vælgere på deres egen linje under knapperne, så intet bliver skåret af */
@media (max-width: 560px) {
  body #kk-bar.sk-bar { flex-wrap: wrap; }
  body #kk-bar.sk-bar > select { order: 10; flex: 1 1 40%; }
}