/* Sænke slagskibe: det dybe blå bord (hav og himmel, se docs/DESIGNMANUAL-SPIL.md). Skrift og bjælke kommer fra Solitaire.css og kabale-kort.css */
:root {
  --bord: #244F79;
  --bjaelke: #192A3D;
  --knap: #2E5174;
  --kul: #1E2421;
  --roed: #C63F28;
  --linje: rgba(252,247,238,.2);
  --skrog: #FCF7EE;
  --detalje: #1E2421;
  /* Havet: bølgelinjer i stedet for filtens skrå tekstur, samme lys og skygge */
  --hav: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.07), rgba(0,0,0,.2) 85%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18'%3E%3Cpath d='M0 9q6-5 12 0t12 0 12 0 12 0' fill='none' stroke='%23FCF7EE' stroke-opacity='.05' stroke-width='1.2'/%3E%3C/svg%3E");
}
html.kabale-mork {
  --bord: #162F47;
  --bjaelke: #0D131A;
  --knap: #20405F;
}
body { background: var(--hav), 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, niveauvælgeren ligner en knap */
#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;
}
#kk-bar select option { background: #FCF7EE; color: #1E2421; }
button:focus-visible, select: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, #kk-bar select { flex: 1 1 auto; font-size: 14px; padding-left: 8px; padding-right: 8px; }
  #kk-bar select { padding-right: 26px; background-position: right 8px center; }
}

/* Spilleområdet: status, pladerne og knapperne under dem */
#spil { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; overflow-y: auto; gap: 8px; padding: 6px 8px 8px; box-sizing: border-box; }
#status { min-height: 2.6em; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 15px/1.3 Poppins, system-ui, sans-serif; max-width: 100%; }
#knapper { display: flex; gap: 8px; justify-content: center; width: var(--bredde); max-width: 100%; }
#knapper button {
  flex: 1 1 0; max-width: 200px; min-height: 48px; padding: 0 10px; border-radius: 8px; cursor: pointer; font: 600 15px/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; }
#knapper button[hidden] { display: none; }

/* Pladerne. Hver .boks er display: contents, så titel, plade og oversigt kan placeres frit i gitteret */
#plader { display: grid; gap: 6px 24px; justify-content: center; align-items: start; }
.boks { display: contents; }
.titel { margin: 0; font: 600 15px/1.3 Poppins, system-ui, sans-serif; display: flex; align-items: center; gap: 8px; }
.titel::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; flex: none; }
.boks.tur .titel::before { background: var(--roed); border-color: var(--roed); }
#plader.side { grid-template-columns: auto auto; grid-template-areas: "t1 t2" "p1 p2" "f1 f2"; }
#plader.side .egen > .titel { grid-area: t1; } #plader.side .egen > .plade { grid-area: p1; } #plader.side .egen > .flaade { grid-area: f1; }
#plader.side .fjende > .titel { grid-area: t2; } #plader.side .fjende > .plade { grid-area: p2; } #plader.side .fjende > .flaade { grid-area: f2; }
/* Portræt: den store plade øverst, den lille nedenunder ved siden af oversigten over den stores flåde */
#plader.stablet { grid-template-columns: auto 1fr; grid-template-areas: "tS tS" "pS pS" "pL fS" "pL kn"; gap: 4px 14px; width: var(--bredde); }
#plader.stablet .stor > .titel { grid-area: tS; } #plader.stablet .stor > .plade { grid-area: pS; } #plader.stablet .stor > .flaade { grid-area: fS; }
#plader.stablet .lille > .titel, #plader.stablet .lille > .flaade { display: none; } #plader.stablet .lille > .plade { grid-area: pL; margin-top: 4px; }
#plader.stablet #knapper { grid-area: kn; width: auto; align-self: end; }

.plade {
  --c: var(--celle, 36px); position: relative; display: grid;
  grid-template-columns: calc(var(--c) * .6) calc(var(--c) * 10); grid-template-rows: calc(var(--c) * .6) calc(var(--c) * 10);
  grid-template-areas: ". kol" "rk hav";
}
#plader.stablet .lille .plade { --c: var(--celle-lille, 14px); grid-template-columns: 0 calc(var(--c) * 10); grid-template-rows: 0 calc(var(--c) * 10); }
#plader.stablet .lille .kol, #plader.stablet .lille .rk { visibility: hidden; }
.kol, .rk { display: grid; font: 600 calc(var(--c) * .36)/1 Poppins, system-ui, sans-serif; color: var(--creme); opacity: .78; text-align: center; align-items: center; -webkit-user-select: none; user-select: none; }
.kol { grid-area: kol; grid-template-columns: repeat(10, 1fr); }
.rk { grid-area: rk; grid-template-rows: repeat(10, 1fr); }
.hav {
  grid-area: hav; position: relative; display: grid; grid-template: repeat(10, 1fr) / repeat(10, 1fr); border-radius: 6px; overflow: hidden;
  background: rgba(0,0,0,.14); box-shadow: inset 0 0 0 1px rgba(252,247,238,.32); -webkit-user-select: none; user-select: none;
}
.felt {
  position: relative; z-index: 1; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: default;
  box-shadow: inset -1px -1px 0 var(--linje); outline: none;
}
.fjende .felt.aaben { cursor: crosshair; }
@media (hover: hover) { .fjende .hav.klar .felt.aaben:hover { background: rgba(252,247,238,.14); box-shadow: inset 0 0 0 2px var(--creme); } }
.felt:focus-visible { box-shadow: inset 0 0 0 3px var(--creme); background: rgba(252,247,238,.12); }
.felt.tip { box-shadow: inset 0 0 0 3px var(--creme); background: rgba(252,247,238,.18); }
.felt.tip::before { content: ''; position: absolute; inset: 22%; border: 2px dashed var(--creme); border-radius: 50%; }
.fjende .hav:not(.klar) { opacity: .9; }

/* Forbi: en lille creme prik. Træf: et rødt kryds med creme kant, så det ses både på havet og på skibet */
.felt.forbi::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; margin: -11% 0 0 -11%; border-radius: 50%; background: var(--creme); opacity: .85; }
.felt.traef::after {
  content: ''; position: absolute; inset: 12%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 3.5l13 13M16.5 3.5l-13 13' stroke='%23FCF7EE' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M3.5 3.5l13 13M16.5 3.5l-13 13' stroke='%23C63F28' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Skud: effekten (se .fx) spiller først, derefter springer mærket frem */
.felt.ny.traef::after { animation: ramt 220ms ease-out 280ms both; }
.felt.ny.forbi::after { animation: ramt 200ms ease-out 300ms both; }
@keyframes ramt { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

/* Effekterne ligger i et lag oven på havet, som ikke klippes ved kanten. Ét felt = --c */
.effekter { grid-area: hav; position: relative; z-index: 2; pointer-events: none; }
.fx { position: absolute; left: calc((var(--fc) + .5) * var(--c)); top: calc((var(--fr) + .5) * var(--c)); width: calc(var(--c) * 1.9); height: calc(var(--c) * 1.9); transform: translate(-50%, -50%); }
.fx.fx-stor { width: calc(var(--c) * 2.5); height: calc(var(--c) * 2.5); }
/* På den lille plade er felterne små, så effekten fylder mere, end feltet gør */
#plader.stablet .lille .fx { width: calc(var(--c) * 3.4); height: calc(var(--c) * 3.4); }
.fx svg { display: block; width: 100%; height: 100%; overflow: visible; background: none; }
.fx * { transform-box: fill-box; transform-origin: center; animation-delay: var(--fd, 0ms); animation-fill-mode: both; }
/* Træf: glimt, flamme i rød og okker, røg der stiger op */
.fx-glimt { fill: #D69A2D; opacity: 0; animation: fx-glimt 300ms ease-out; }
.fx-flamme { fill: #D69A2D; stroke: #C63F28; stroke-width: 5; stroke-linejoin: round; animation: fx-flamme 420ms ease-out; }
.fx-kerne { fill: #FCF7EE; animation: fx-kerne 260ms ease-out; }
.fx-roeg { fill: #3A4148; opacity: 0; animation: fx-roeg 520ms ease-out; }
.fx-roeg:nth-of-type(3) { animation-delay: calc(var(--fd, 0ms) + 90ms); }
.fx-roeg:nth-of-type(4) { animation-delay: calc(var(--fd, 0ms) + 150ms); }
.fx-roeg:nth-of-type(5) { animation-delay: calc(var(--fd, 0ms) + 210ms); }
@keyframes fx-glimt { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes fx-flamme { 0% { transform: scale(.2) rotate(-20deg); opacity: 1; } 45% { transform: scale(1.05) rotate(0); opacity: 1; } 100% { transform: scale(.7) rotate(12deg); opacity: 0; } }
@keyframes fx-kerne { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes fx-roeg { 0% { transform: translateY(0) scale(.4); opacity: 0; } 30% { opacity: .75; } 100% { transform: translateY(-22px) scale(1.5); opacity: 0; } }
/* Forbi: to ringe breder sig i vandet, og dråber springer op og falder */
.fx-ring { fill: none; stroke: #FCF7EE; stroke-width: 3; opacity: 0; animation: fx-ring 480ms ease-out; }
.fx-ring2 { animation-delay: calc(var(--fd, 0ms) + 120ms); }
.fx-draabe { fill: #FCF7EE; opacity: 0; animation: fx-draabe 460ms ease-out; }
@keyframes fx-ring { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fx-draabe { 0% { transform: translate(0, 0) scale(.6); opacity: 1; } 55% { transform: translate(calc(var(--dx) * .8), var(--dy)) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) * .2)) scale(.5); opacity: 0; } }

/* Stillingen: Du 3 – 1 Computeren, og hvem der fører. Den førendes tal står på en creme plade med rød ring */
#stilling { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 15px/1.2 Poppins, system-ui, sans-serif; }
#stilling .tal-linje { display: flex; align-items: center; gap: 8px; }
#stilling b { min-width: 34px; height: 30px; padding: 0 6px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  border: 2px solid rgba(252,247,238,.45); font: 600 20px/1 Poppins, system-ui, sans-serif; transition: background-color 200ms ease-out, color 200ms ease-out; }
#stilling b.foerer { background: var(--creme); color: var(--bjaelke); border-color: var(--creme); box-shadow: 0 0 0 3px var(--roed); }
#stilling .mod { opacity: .7; }
#foerer { font-size: 12px; font-weight: 400; opacity: .9; }
#foerer.du, #foerer.pc { font-weight: 600; opacity: 1; }

/* Skibene ligger under felterne, så mærkerne står oven på dem */
.skibe { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.skib {
  position: absolute; left: calc(var(--sc) * var(--c)); top: calc(var(--sr) * var(--c)); width: calc(var(--sl) * var(--c)); height: var(--c);
  transform-origin: calc(var(--c) / 2) calc(var(--c) / 2); transition: left 180ms ease-out, top 180ms ease-out, transform 180ms ease-out;
}
.skib.lodret { transform: rotate(90deg); }
.skib svg { background: none; display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.skib.traekkes { transition: none; z-index: 2; opacity: .9; }
.skib.traekkes svg { filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.skib.ulovlig { opacity: .55; outline: 2px dashed var(--roed); outline-offset: -2px; border-radius: 4px; }
.skib.valgt { outline: 2px dashed var(--creme); outline-offset: 1px; border-radius: 6px; }
.skrog { fill: var(--skrog); }
.detalje { fill: var(--detalje); }
.detalje-streg { fill: none; stroke: var(--detalje); }
.skib.saenket { --skrog: var(--kul); --detalje: rgba(252,247,238,.55); }
.skib.saenket .skrog { stroke: rgba(252,247,238,.6); stroke-width: 1.5; }
.placering .egen .felt { cursor: grab; }
.placering .egen .hav { touch-action: none; }

/* Den lille plade er én stor knap, der skifter plads med den store */
.skift { display: none; }
#plader.stablet .lille .skift { display: block; position: absolute; inset: 0; z-index: 3; background: transparent; border: 0; border-radius: 6px; cursor: pointer; padding: 0; }

/* Oversigt over flåden: sænkede skibe står mørke, gennemstregede og med "sænket" for skærmlæsere */
.flaade { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 14px/1.2 Poppins, system-ui, sans-serif; }
/* Portræt: kun silhuetterne på én række under en lille overskrift; navnene står i aria-label */
#plader.stablet .flaade { gap: 4px 8px; align-self: end; align-items: center; }
#plader.stablet .flaade::before { content: attr(aria-label); flex: 1 0 100%; font-size: 12px; opacity: .85; }
#plader.stablet .flaade li span:last-child { display: none; }
.flaade li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.flaade .mini { position: relative; display: block; width: calc(var(--sl) * 11px); height: 11px; flex: none; }
.flaade .mini svg { background: none; display: block; width: 100%; height: 100%; }
.flaade li.saenket { --skrog: var(--kul); --detalje: rgba(252,247,238,.55); }
.flaade li.saenket span:last-child { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--roed); opacity: .85; }
.flaade li.saenket .mini::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; margin-top: -1px; background: var(--roed); }

/* Beskeden: flere linjer til reglerne og valgene, rød primærknap */
#kk-besked { width: max-content; max-width: min(calc(100vw - 32px), 440px); 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); }
#kk-besked .valg { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; text-align: left; }
#kk-besked .valg button {
  margin: 0; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; color: var(--creme); border: 1px solid rgba(252,247,238,.35); font-weight: 400;
}
#kk-besked .valg button::before { content: ''; flex: none; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 4px; box-sizing: border-box; }
#kk-besked .valg button[aria-checked="true"]::before { background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3 4.7-5' fill='none' stroke='%23192A3D' stroke-width='1.8'/%3E%3C/svg%3E") center/100% no-repeat; }
#kk-besked .lille-tekst { font-size: 14px; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .felt.ny.traef::after, .felt.ny.forbi::after { animation: none; }
  .effekter { display: none; }
  #stilling b { transition: none; }
  .skib { transition: none; }
}
#plader.stablet #knapper button { font-size: 14px; padding: 0 6px; min-height: 44px; }