/* Kasino – gratiscasinospill.net (prefiks ks-). Bruker tokens fra pr.css. */
.ks-wrap { container-type: inline-size; }
.ks {
  --ks-cw: 50px;
  --ks-gap: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "felt" "panel" "log";
  gap: 12px;
  font-family: var(--f-body);
  color: var(--ink);
  line-height: 1.4;
}
@container (min-width: 420px) { .ks { --ks-cw: 58px; } }
@container (min-width: 600px) { .ks { --ks-cw: 66px; --ks-gap: 10px; } }
@container (min-width: 880px) {
  .ks {
    --ks-cw: 72px;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "felt head" "felt panel" "felt log";
    gap: 14px 18px;
  }
  .ks-felt { align-self: start; }
}

.ks-vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hode / stilling */
.ks-head {
  grid-area: head;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px;
}
.ks-scores {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 600;
}
.ks-sc b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.ks-sc-sep { color: var(--muted); }
.ks-meta {
  margin: 0; flex: 1 1 100%; order: 3;
  font-family: var(--f-tag); font-size: .8rem; color: var(--muted);
}
.ks-meta span { white-space: nowrap; }
.ks-sisten {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--kraft-soft); color: var(--ink);
}
.ks-sisten[hidden] { display: none; }
.ks-restart { margin-left: auto; }

/* Knapper */
.ks-btn {
  min-height: 44px; padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--olive); background: var(--olive); color: var(--surface);
  font: 600 .95rem/1.2 var(--f-body); cursor: pointer;
}
.ks-btn:hover { background: color-mix(in srgb, var(--olive) 85%, var(--ink)); }
.ks-btn-ghost { background: var(--surface); color: var(--olive); }
.ks-btn-ghost:hover { background: var(--olive-soft); }
.ks-btn:disabled { opacity: .45; cursor: not-allowed; }
.ks button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

/* Filtbordet */
.ks-felt {
  grid-area: felt;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--r);
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--felt) 88%, var(--surface)) 0%, var(--felt) 60%, color-mix(in srgb, var(--felt) 80%, var(--ink)) 100%);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--felt) 70%, var(--ink)), inset 0 0 40px color-mix(in srgb, var(--ink) 35%, transparent);
  color: var(--surface);
}
@container (min-width: 600px) { .ks-felt { padding: 18px 20px; } }
.ks-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ks-side-you { gap: 16px; }
.ks-pile {
  margin: 0; font-family: var(--f-tag); font-size: .75rem;
  color: color-mix(in srgb, var(--surface) 80%, var(--felt));
  text-align: center;
}
.ks-board {
  flex: 1 1 auto;
  min-height: calc(var(--ks-cw) * 1.4 + 36px);
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--surface) 30%, transparent);
  border-radius: 8px;
  padding: 10px 6px;
}
@container (min-width: 880px) { .ks-board { min-height: calc(var(--ks-cw) * 1.4 * 2 + 60px); } }
.ks-table {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: var(--ks-gap);
}
.ks-item { position: relative; border-radius: 7px; transition: transform .15s ease, box-shadow .15s ease; }
.ks-item.is-hit { box-shadow: 0 0 0 3px var(--kraft); }
.ks-item.is-focus { box-shadow: 0 0 0 3px var(--kraft-soft), 0 0 0 6px var(--kraft); transform: translateY(-4px); }
.ks-empty { font-family: var(--f-tag); font-size: .85rem; color: color-mix(in srgb, var(--surface) 70%, var(--felt)); }
.ks-build { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 2px; }
.ks-stack { display: flex; }
.ks-stack .ks-card + .ks-card { margin-left: calc(var(--ks-cw) * -0.62); }
.ks-btag {
  font-family: var(--f-tag); font-size: .68rem; line-height: 1.2;
  padding: 2px 6px; border-radius: 4px;
  background: var(--curtain); color: var(--surface); white-space: nowrap;
}
.ks-btag.is-you { background: var(--kraft-soft); color: var(--ink); }

/* Kort */
.ks-card {
  position: relative; display: block; flex: 0 0 auto;
  width: var(--ks-cw); height: calc(var(--ks-cw) * 1.4);
  border-radius: 6px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 35%, transparent);
  font-family: var(--f-body); font-weight: 700;
  font-size: calc(var(--ks-cw) * 0.27);
  user-select: none;
}
.ks-card.ks-red { color: var(--red); }
.ks-ix {
  position: absolute; top: 3px; left: 4px;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.ks-ix2 { top: auto; left: auto; bottom: 3px; right: 4px; transform: rotate(180deg); }
.ks-pip {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--ks-cw) * 0.52); font-weight: 400; line-height: 1;
}
.ks-back {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--kraft) 35%, transparent) 0 3px, transparent 3px 8px),
    var(--curtain);
  border: 2px solid var(--surface);
}
.ks-hand { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ks-gap); min-height: calc(var(--ks-cw) * 1.4); }
.ks-hand-cpu { --ks-cw: 38px; min-height: 0; }
.ks-hand-cpu .ks-card + .ks-card { margin-left: -12px; }
@container (min-width: 600px) { .ks-hand-cpu { --ks-cw: 46px; } }
.ks-hcard {
  position: relative; padding: 0; border: 0; background: none; border-radius: 7px; cursor: pointer;
  min-width: 44px; min-height: 44px;
  transition: transform .15s ease;
}
.ks-hcard:hover .ks-card { box-shadow: 0 0 0 2px var(--kraft-soft); }
.ks-hcard.is-sel { transform: translateY(-10px); }
.ks-hcard.is-sel .ks-card { box-shadow: 0 0 0 3px var(--kraft), 0 6px 12px color-mix(in srgb, var(--ink) 40%, transparent); }
.ks .ks-hcard:focus-visible { outline: 2px solid var(--kraft-soft); outline-offset: 3px; }
.ks-hand.is-wait .ks-hcard { cursor: default; opacity: .8; }
.ks-hv {
  position: absolute; right: -4px; top: -6px;
  font: 600 .66rem/1 var(--f-tag);
  padding: 2px 4px; border-radius: 4px;
  background: var(--kraft); color: var(--ink);
}

/* Panel med valg */
.ks-panel, .ks-logbox {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px;
  min-width: 0;
}
.ks-panel { grid-area: panel; }
.ks-prompt { margin: 0 0 8px; font-weight: 600; }
.ks-prompt:empty { display: none; }
.ks-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ks-opts:empty { display: none; }
.ks-opt {
  width: 100%; min-height: 44px; padding: 8px 12px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px;
  text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-left: 4px solid var(--kraft); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font: 500 .95rem/1.3 var(--f-body);
}
.ks-opt:hover, .ks-opt:focus-visible { background: var(--kraft-soft); }
.ks-opt-build, .ks-opt-raise, .ks-opt-double { border-left-color: var(--felt); }
.ks-opt-x { font: .75rem/1.2 var(--f-tag); color: var(--muted); }
.ks-trailrow { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ks-trail[hidden] { display: none; }
.ks-trail:not([hidden]) { width: 100%; }
.ks-note { margin: 0; font-size: .85rem; color: var(--muted); }
.ks-note:empty { display: none; }

/* Rundeslutt */
.ks-end[hidden] { display: none; }
.ks-endh { margin: 0 0 4px; font: 600 1.3rem/1.2 var(--f-display); }
.ks-endh:focus { outline: none; }
.ks-endsub { margin: 0 0 8px; color: var(--muted); font-size: .9rem; }
.ks-score { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 6px 0 12px; }
.ks-score th, .ks-score td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: right; }
.ks-score th[scope="row"], .ks-score thead th:first-child { text-align: left; font-weight: 500; }
.ks-score thead th { font: 600 .75rem/1.2 var(--f-tag); color: var(--muted); text-transform: uppercase; }
.ks-score td { font-variant-numeric: tabular-nums; font-weight: 600; }
.ks-score small { font-weight: 400; color: var(--muted); }
.ks-score tfoot th, .ks-score tfoot td { font-weight: 700; border-bottom: 0; }
.ks-score tfoot tr:last-child th, .ks-score tfoot tr:last-child td { border-top: 2px solid var(--ink); font-family: var(--f-display); font-size: 1.05rem; }
.ks-endbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-endbtns .ks-btn { flex: 1 1 140px; }

/* Logg */
.ks-logbox { grid-area: log; }
.ks-logh { margin: 0 0 6px; font: 600 .75rem/1.2 var(--f-tag); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ks-log { list-style: none; margin: 0; padding: 0; max-height: 11.5em; overflow-y: auto; font-size: .88rem; }
.ks-log li { padding: 3px 0; border-bottom: 1px solid var(--line); }
.ks-log li:first-child { font-weight: 600; }
.ks-log-cpu::before { content: "\25B2  "; color: var(--muted); font-size: .7em; }
.ks-log-you::before { content: "\25BC  "; color: var(--olive); font-size: .7em; }
.ks-log-tabbe { color: var(--olive); }
.ks-log-deal { color: var(--muted); font-style: italic; }
@container (min-width: 880px) { .ks-log { max-height: 16em; } }

/* Bevegelse */
@keyframes ks-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.ks-table .ks-item.is-new { animation: ks-in .2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .ks-table .ks-item.is-new, .ks-item, .ks-hcard { animation: none; transition: none; }
  .ks-hcard.is-sel, .ks-item.is-focus { transform: none; }
}