.boardFrame{background:linear-gradient(150deg,#8a6446,#6b4a32 55%,#5a3d29);border-color:#3f2a1c;padding:12px}
#kboard{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(6,minmax(0,1fr)) minmax(0,1.15fr);grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:8.6/3.2;user-select:none;-webkit-user-select:none}
#kboard .row{display:contents}
#kboard .row.top .pit{grid-row:1}
#kboard .row.bottom .pit{grid-row:2}
.store.s2{grid-column:1;grid-row:1/3}
.store.s1{grid-column:8;grid-row:1/3}
.pit,.store{position:relative;border-radius:50%;border:0;padding:0;background:radial-gradient(circle at 50% 60%,#4d3322,#6e4d35 70%,#7d5a40);box-shadow:inset 0 5px 10px #1e120a90,0 1px 0 #ffffff25;min-width:0;color:#f5e8d6;font-weight:700}
.store{border-radius:40px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pit:disabled{cursor:default;opacity:1}
.pit:hover,.pit:disabled:hover,.store:hover{background:radial-gradient(circle at 50% 60%,#4d3322,#6e4d35 70%,#7d5a40);border:0}
.pit.active:not(:disabled){box-shadow:inset 0 5px 10px #1e120a90,0 0 0 2px #f2d7a6aa}
.pit:not(:disabled):hover{background:radial-gradient(circle at 50% 60%,#5a3c28,#7a5840 70%,#8a6548)}
.pit.hint{box-shadow:inset 0 5px 10px #1e120a90,0 0 0 3px #f6e3a3}
.pit.source{box-shadow:inset 0 5px 10px #1e120a90,0 0 0 3px #ffffffaa}
.pit.drop .stones{animation:bump .22s ease-out}
.pit.captured{box-shadow:inset 0 5px 10px #1e120a90,0 0 0 3px #e8836f}
@keyframes bump{from{transform:scale(1.05)}to{transform:none}}
.stones{position:absolute;inset:12%;pointer-events:none}
.store .stones{inset:14% 18% 26%}
.stones i{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset -1px -2px 3px #0005,0 1px 1px #0006}
.store .stones i{width:26%}
.stones i.c0{background:radial-gradient(circle at 35% 30%,#eaf3f5,#8fb4c0)}
.stones i.c1{background:radial-gradient(circle at 35% 30%,#f6e0c9,#c99a6a)}
.stones i.c2{background:radial-gradient(circle at 35% 30%,#dde9d4,#88a978)}
.stones i.c3{background:radial-gradient(circle at 35% 30%,#f2d0cc,#c07a70)}
.count{position:absolute;bottom:-2px;right:0;font-size:12px;background:#2c1d13d0;border-radius:9px;padding:1px 6px;font-family:Manrope,sans-serif;pointer-events:none}
.store .count{position:static;font-size:clamp(16px,2.6vw,24px);background:none;margin-top:auto;z-index:1;text-shadow:0 1px 3px #000a}
.store small{font-size:10px;letter-spacing:1px;text-transform:uppercase;opacity:.8;margin-bottom:10%;z-index:1}
#kboard.turn2 .row.top .pit{box-shadow:inset 0 5px 10px #1e120a90,0 0 0 2px #f2d7a6aa}
.turnBox{font-size:15px}
.tools{grid-template-columns:repeat(3,minmax(0,1fr))}
.tools button:last-child{color:inherit}
.tools button[aria-pressed=true]{background:#dce8e3;color:var(--blue)}
.statGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.statGrid div{background:#eef2ec;border-radius:10px;padding:10px;text-align:center}
.statGrid small{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--muted)}
.statGrid b{display:block;font-family:Manrope,sans-serif;font-size:26px}
.statGrid span{font-size:11px;color:var(--muted)}
@media(max-width:680px){.boardFrame{padding:8px}#kboard{gap:5px}.count{font-size:10px;padding:0 4px}}
/* Mobil på højkant: brættet står lodret, så skålene bliver store nok at ramme. */
@media(max-width:540px){
  #kboard{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,.9fr) repeat(6,minmax(0,1fr)) minmax(0,.9fr);aspect-ratio:2.2/4.6;max-height:70dvh;margin:auto}
  .store.s2{grid-column:1/3;grid-row:1}
  .store.s1{grid-column:1/3;grid-row:8}
  .store{border-radius:30px;flex-direction:row;gap:10px}
  .store .stones{inset:15% 30%}
  .store small{margin:0 0 0 12px}
  .store .count{margin:0 12px 0 auto}
  #kboard{grid-auto-flow:row dense}
  #kboard .row.bottom .pit{grid-column:1;grid-row:auto}
  #kboard .row.top .pit{grid-column:2;grid-row:auto}
  #kboard .pit{aspect-ratio:auto}
}
.game-focus .boardFrame{aspect-ratio:auto;width:min(100cqw,calc((100cqh - 150px)*8.6/3.2))}
@media(max-width:540px){.game-focus .boardFrame{width:min(100cqw,calc((100cqh - 150px)*2.2/4.6))}}
@media(prefers-reduced-motion:reduce){.pit.drop .stones{animation:none}}
@media(hover:none){.pit:not(:disabled):hover{background:radial-gradient(circle at 50% 60%,#4d3322,#6e4d35 70%,#7d5a40)}}

/* Beskeder under brættet med fast plads, så brættet aldrig hopper. */
.boardColumn #message{min-height:42px;margin:10px 0 0;padding:10px 14px;font-size:14px}
.boardColumn #message:empty{display:block;visibility:hidden}
/* PC: brættet får hele bredden, infokortene ligger i en række under det. */
@media(min-width:851px){
  .playLayout{grid-template-columns:1fr;gap:26px}
  .boardColumn{width:100%;max-width:1100px;margin:0 auto}
  aside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start;max-width:1100px;margin:0 auto;width:100%}
  aside .sideCard{margin:0}
  .boardFrame{padding:18px}
  #kboard{gap:12px}
  .count{font-size:15px;padding:2px 8px}
  .store .count{font-size:32px}
  .store small{font-size:12px}
}