:root {
  --bg: #f6efe8;
  --bg-2: #efe4da;
  --paper: #fffdfb;
  --ink: #2a1418;
  --muted: #6b534c;
  --maroon: #6d182a;
  --maroon-deep: #4e101e;
  --green: #3d6b45;
  --green-bg: #e5f0e3;
  --line: #e4d4c8;
  --shadow: 0 16px 40px rgba(78, 16, 30, 0.08);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#gratis, #betalda, #program, #top, #innehall { scroll-margin-top: 88px; }
.page-keys section[id],
.page-keys #programmen,
.page-games section[id],
.page-games #spelen { scroll-margin-top: 148px; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 12% -10%, #fff7f2 0%, transparent 55%),
    radial-gradient(800px 380px at 100% 8%, #f3ddd6 0%, transparent 50%),
    var(--bg);
  line-height: 1.55;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
}
.skip:focus { left: 12px; background: #fff; padding: 8px 12px; }

.wrap { width: min(1100px, calc(100% - 40px)); margin: 0 auto; }
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 239, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 20px;
  position: relative;
}
.brand span:not(.mark) { min-width: 0; }
button, a.cta, a.ghost, .menu-btn, .chips a {
  touch-action: manipulation;
}
img, svg, video {
  max-width: 100%;
  height: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
}
.mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--maroon);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 750;
}
.mark.sm { width: 26px; height: 26px; font-size: 14px; }
.nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}
.nav a:hover { color: var(--maroon); }
.nav a.cta,
.nav a.cta:hover,
.nav a.cta:visited {
  color: #fff;
}
.menu-btn {
  display: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--maroon);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
}

.cta, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 650;
  font-size: 15px;
}
.cta { background: var(--maroon); color: #fff; }
.cta:hover { background: var(--maroon-deep); color: #fff; }
a.cta,
a.cta:hover,
a.cta:visited {
  color: #fff;
}
.ghost {
  background: #f3e4df;
  color: var(--maroon);
}
.ghost:hover { background: #ead6cf; }
.ghost.on {
  background: var(--maroon);
  color: #fff;
}

.hero { padding: 72px 0 36px; }
.eyebrow, .kicker {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  color: var(--maroon);
  margin: 0 0 12px;
}
h1 {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--maroon-deep);
}
.lead, .intro { max-width: 680px; color: var(--muted); font-size: 18px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; }
.fine { color: var(--muted); font-size: 14px; }

.split { padding: 12px 0 40px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.panel, .card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.panel { padding: 28px; }
.panel h2, .card h3 { margin: 8px 0 10px; }
.panel a, .card a { color: var(--maroon); font-weight: 650; text-decoration: none; }
.panel a.cta, .card a.cta { color: #fff; }

section { padding: 28px 0 64px; }
section h2 {
  font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 10px;
  color: var(--maroon-deep);
}
.tint { background: rgba(255, 255, 255, 0.35); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.paid-cards { grid-template-columns: 1fr 1fr; }
.card { padding: 24px; display: flex; flex-direction: column; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.price { margin: 0; font-weight: 750; color: var(--maroon-deep); }
.card p { color: var(--muted); }
.card ul { padding-left: 18px; color: var(--ink); margin: 0 0 16px; }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.card-actions .cta, .card-actions .ghost { flex: 1 1 160px; text-align: center; }
.meta { font-size: 13px; color: var(--muted); margin-top: auto; }

.tag {
  display: inline-block;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}
.tag.free { background: var(--green-bg); color: var(--green); }
.tag.paid { background: #f3e4df; color: var(--maroon); }

.table-wrap { overflow-x: auto; margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); }
th { font-size: 13px; color: var(--muted); font-weight: 650; }
tr:last-child td { border-bottom: 0; }
td a { color: var(--maroon); }

footer {
  border-top: 1px solid var(--line);
  background: #efe6de;
  padding: 40px 0 24px;
}
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.brand-foot { display: flex; align-items: center; gap: 8px; font-weight: 750; }
footer h3 { margin: 0 0 10px; font-size: 14px; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin: 6px 0; }
footer a { color: var(--maroon); text-decoration: none; }
.copy { color: var(--muted); font-size: 13px; margin: 28px auto 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.subnav {
  position: sticky;
  top: 72px;
  z-index: 19;
  background: rgba(246, 239, 232, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}
.chips a {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}
.chips a:hover,
.chips a:focus-visible {
  color: var(--maroon);
  border-color: var(--maroon);
}

.search {
  display: block;
  margin: 22px 0 0;
}
.search input {
  width: min(420px, 100%);
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.search input:focus {
  outline: 2px solid var(--maroon);
  outline-offset: 2px;
}

.jump-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.jump-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
}
.jump-card:hover,
.jump-card:focus-visible {
  border-color: var(--maroon);
}
.jump-card h3 {
  margin: 8px 0 6px;
  color: var(--maroon-deep);
}
.jump-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1020px) {
  .jump-grid { grid-template-columns: repeat(2, 1fr); }
}

.keys-block { margin-top: 28px; }
.keys-block h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--maroon-deep);
}
.keys {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 22px;
}
.keys th,
.keys td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.keys th {
  font-size: 13px;
  color: var(--muted);
  font-weight: 650;
  background: #faf6f2;
}
.keys tr:last-child td { border-bottom: 0; }
.keys td:first-child { width: 42%; }

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 2px 8px;
  margin: 1px 0;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #f7f1ec;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--maroon-deep);
  white-space: nowrap;
}
code.cmd {
  font-family: Consolas, "Segoe UI Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 650;
  color: var(--maroon-deep);
}

.back-jump {
  display: inline-block;
  margin-top: 4px;
  color: var(--maroon);
  font-weight: 650;
  text-decoration: none;
}
.back-jump:hover { text-decoration: underline; }
.inga-traffar {
  color: var(--muted);
  margin: 18px 0 0;
}

.game-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px;
  margin-top: 22px;
  max-width: 560px;
}
.game-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.game-meta .actions { margin: 0; }
.game-status {
  margin: 0;
  color: var(--muted);
  font-weight: 650;
}
.game-hint { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mem-card {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--maroon);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  font: inherit;
}
.mem-card.open {
  background: var(--paper);
  color: var(--maroon-deep);
}
.mem-card.done {
  background: var(--green-bg);
  color: var(--green);
  cursor: default;
}

.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 280px;
}
.ttt-cell {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf6f2;
  color: var(--maroon-deep);
  font-size: 36px;
  font-weight: 750;
  cursor: pointer;
}
.ttt-cell:disabled { cursor: default; opacity: 0.95; }

.c4-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  max-width: 420px;
  padding: 10px;
  background: #ead6cf;
  border-radius: 12px;
}
.c4-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: #fffdfb;
  cursor: pointer;
  padding: 0;
}
.c4-cell:hover { box-shadow: inset 0 0 0 2px var(--maroon); }
.c4-cell.you { background: var(--maroon); }
.c4-cell.cpu { background: #c9a8a0; }
.c4-cell.win { box-shadow: inset 0 0 0 3px #3d6b45; }

.dam-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  max-width: 420px;
  border: 2px solid var(--maroon-deep);
  border-radius: 10px;
  overflow: hidden;
}
.dam-cell {
  aspect-ratio: 1;
  border: none;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: #f6efe8;
}
.dam-cell.dark { background: #c9a8a0; }
.dam-cell.sel { box-shadow: inset 0 0 0 3px var(--maroon); }
.dam-cell.go { box-shadow: inset 0 0 0 3px #3d6b45; }
.dam-piece {
  width: 68%;
  height: 68%;
  border-radius: 50%;
  pointer-events: none;
}
.dam-piece.you { background: var(--maroon); }
.dam-piece.cpu { background: #fff6ee; box-shadow: inset 0 0 0 2px #6d182a; }
.dam-piece.king::after {
  content: "D";
  display: grid;
  place-items: center;
  height: 100%;
  color: #e4b84a;
  font-weight: 800;
  font-size: 12px;
}

.yatzy-panel { max-width: 560px; }
.yatzy-dice {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.yatzy-die {
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdfb;
  color: var(--maroon-deep);
  font: inherit;
  font-size: 26px;
  font-weight: 750;
  cursor: pointer;
}
.yatzy-die.on {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}
.yatzy-actions { justify-content: center; margin-bottom: 14px; }
.yatzy-sheet { width: 100%; border-collapse: collapse; font-size: 15px; }
.yatzy-sheet th,
.yatzy-sheet td {
  border-bottom: 1px solid var(--line);
  padding: 7px 6px;
  text-align: left;
}
.yatzy-sheet button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #faf6f2;
  color: var(--maroon-deep);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.yatzy-sheet button:hover { border-color: var(--maroon); }
.yatzy-sheet .used { color: var(--ink); font-weight: 750; }
.yatzy-sheet .sum { color: var(--muted); font-weight: 650; }

.fia-panel { max-width: 560px; }
.fia-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 650;
}
.fia-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fia-tag i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #4e101e33;
}
.fia-tag.p0 i { background: var(--maroon); }
.fia-tag.p1 i { background: #e6b800; }
.fia-tag.p2 i { background: #2d6b32; }
.fia-tag.p3 i { background: #1e4a7a; }
.fia-board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 1px;
  width: min(100%, 480px);
  margin: 0 auto;
  border: 2px solid var(--maroon-deep);
  border-radius: 10px;
  overflow: hidden;
  background: #6d5340;
}
.fia-cell {
  aspect-ratio: 1;
  border: none;
  padding: 0;
  background: #efe4da;
  display: grid;
  place-items: center;
  cursor: default;
}
.fia-cell:disabled {
  opacity: 1;
  cursor: default;
}
.fia-cell.path { background: #fffdfb; }
.fia-cell.p0 { background: #d7a898; }
.fia-cell.p1 { background: #f0d56a; }
.fia-cell.p2 { background: #7eb86a; }
.fia-cell.p3 { background: #6a9ec9; }
.fia-cell.goal { background: var(--maroon); }
.fia-cell.go { cursor: pointer; box-shadow: inset 0 0 0 2px var(--maroon); }
.fia-cell.dest { box-shadow: inset 0 0 0 2px #2d6b32; }
.fia-man {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px #fffdfb, 0 0 0 2.5px #4e101e66;
}
.fia-man.p0 { background: var(--maroon); }
.fia-man.p1 { background: #e6b800; }
.fia-man.p2 { background: #2d6b32; }
.fia-man.p3 { background: #1e4a7a; }
.fia-yard-name {
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: #4e101e;
  line-height: 1;
  pointer-events: none;
}
.fia-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.fia-die {
  margin: 0;
  min-width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdfb;
  font-size: 26px;
  font-weight: 750;
  color: var(--maroon-deep);
}

.snake-frame {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fffdfb;
  touch-action: none;
}
#snake-canvas { display: block; width: min(100%, 352px); height: auto; }

.g2048-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 360px;
  padding: 8px;
  background: #ead6cf;
  border-radius: 12px;
  touch-action: none;
}
.g2048-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: 22px;
  background: #f7f1ec;
  color: var(--maroon-deep);
}
.g2048-cell.v2 { background: #fffdfb; }
.g2048-cell.v4 { background: #f3e4df; }
.g2048-cell.v8 { background: #e8c4b8; color: #fff; }
.g2048-cell.v16 { background: #c96b5a; color: #fff; }
.g2048-cell.v32 { background: #b84a4a; color: #fff; }
.g2048-cell.v64 { background: #6d182a; color: #fff; }
.g2048-cell.v128,
.g2048-cell.v256,
.g2048-cell.v512 { background: #3d6b45; color: #fff; font-size: 18px; }
.g2048-cell.v1024,
.g2048-cell.v2048 { background: #2a1418; color: #fff; font-size: 16px; }

.gallows {
  margin: 0 0 14px;
  font-family: Consolas, "Segoe UI Mono", ui-monospace, monospace;
  font-size: 16px;
  color: var(--maroon-deep);
  line-height: 1.2;
}
.hang-word {
  letter-spacing: 0.35em;
  font-size: 28px;
  font-weight: 750;
  color: var(--maroon-deep);
  margin: 0 0 16px;
}
.hang-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 420px;
}
.hang-keys button {
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.hang-keys button:disabled {
  opacity: 0.4;
  cursor: default;
}
.hang-keys button.bad {
  background: #f3e4df;
  color: var(--maroon);
}

.rps-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rps-btns button {
  flex: 1 1 120px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf6f2;
  color: var(--maroon-deep);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.rps-btns button:hover { border-color: var(--maroon); }
.rps-play {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  text-align: center;
}
.rps-choice {
  background: #faf6f2;
  border-radius: 12px;
  padding: 16px 8px;
  font-size: 32px;
}
.rps-choice span { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

.game-panel.wide { max-width: 720px; }
.pang-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fffdfb;
  cursor: crosshair;
  touch-action: none;
}
#pang-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.flip-panel { max-width: 460px; }
.hopp-panel { max-width: 720px; }
.flip-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #3a0c16;
  touch-action: none;
  max-width: 420px;
  margin: 0 auto;
}
#flip-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.flip-pad {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.hopp-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff8f2;
  touch-action: none;
}
#hopp-canvas,
#race-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.race-frame {
  background: #1c1816;
}
.race-pad {
  grid-template-columns: 1fr 1.4fr 1fr;
}
.hopp-pad {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.hopp-pad button {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf6f2;
  color: var(--maroon-deep);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.hopp-pad button:hover { border-color: var(--maroon); }
.hopp-pad button:active,
.hopp-pad button.on {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}
.torn-frame { background: #efe4da; }
#torn-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.torn-pad {
  grid-template-columns: 1fr 1fr 1fr;
}
.torn-pad #torn-down { grid-column: 1; }
.torn-pad #torn-jump { grid-column: 2 / 4; }
.pet-browse {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 8px;
  align-items: center;
}
.pet-arrow {
  min-height: 48px;
  min-width: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf6f2;
  color: var(--maroon-deep);
  font: inherit;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.pet-arrow:hover { border-color: var(--maroon); }
.pet-kind-name {
  margin: 10px 0 0;
  text-align: center;
  font-weight: 750;
  color: var(--maroon-deep);
}
.pet-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fffdfb;
}
#pet-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.pet-meters {
  display: grid;
  gap: 8px;
  margin: 16px 0 14px;
}
.pet-meter {
  display: grid;
  grid-template-columns: 72px 1fr 36px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  font-weight: 650;
  color: var(--maroon-deep);
}
.pet-meter span:last-child { text-align: right; color: var(--muted); }
.pet-bar {
  height: 10px;
  border-radius: 999px;
  background: #f3e4df;
  overflow: hidden;
}
.pet-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--maroon);
  border-radius: inherit;
}
.pet-btns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.pet-btns button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf6f2;
  color: var(--maroon-deep);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pet-btns button:hover { border-color: var(--maroon); }
.pet-btns button:disabled {
  opacity: 0.45;
  cursor: default;
}
.music-panel { max-width: 960px; }
.music-picks { margin: 0 0 12px; }
.music-pick { margin: 0 0 8px; }
.music-pick .music-opts { margin: 0; }
.music-panel:focus { outline: none; }
.music-panel:focus-visible { box-shadow: var(--shadow), 0 0 0 3px rgba(109, 24, 42, 0.18); }
.music-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
#music-play {
  min-height: 48px;
  min-width: 104px;
  border: 0;
  border-radius: 12px;
  background: var(--maroon);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#music-play:hover { background: var(--maroon-deep); }
#music-play.on { background: var(--maroon-deep); }
.music-tempo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--maroon-deep);
}
.music-tempo input {
  width: 140px;
  accent-color: var(--maroon);
}
.music-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}
.music-grid {
  display: grid;
  grid-template-columns: 56px repeat(var(--music-cols, 16), minmax(26px, 1fr));
  gap: 4px;
  min-width: 560px;
}
.music-lab {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--maroon-deep);
}
.music-cell {
  min-height: 28px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #faf6f2;
  cursor: pointer;
  padding: 0;
}
.music-cell.mark { background: #f3e4df; }
.music-cell:hover { border-color: var(--maroon); }
.music-cell.on {
  background: var(--maroon);
  border-color: var(--maroon);
}
.music-cell.on[data-inst] {
  background: var(--inst-color, var(--maroon));
  border-color: var(--inst-color, var(--maroon));
}
.music-cell.on.mix {
  background: var(--mix, var(--maroon));
  border-color: var(--maroon);
}
.music-cell.drum.on { background: #8a2a3c; border-color: #8a2a3c; }
.music-cell.now { box-shadow: inset 0 0 0 2px #c9a24a; }
.music-insts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 0 0 14px;
}
.music-inst-group { margin: 0; }
.music-inst-group:first-child,
.music-inst-group.wide { grid-column: 1 / -1; }
.music-inst-lab {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--maroon-deep);
}
.music-inst-group .music-opts { margin: 0; }
.music-opts button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.music-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6d182a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.music-opts button.on .music-swatch { box-shadow: 0 0 0 2px #fff; }
.abc-panel { max-width: 640px; }
.abc-browse {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 8px;
  align-items: center;
}
.abc-card {
  text-align: center;
  padding: 12px 8px 4px;
}
.abc-letter {
  margin: 0;
  font-size: clamp(72px, 18vw, 120px);
  font-weight: 750;
  line-height: 1;
  color: var(--maroon);
}
.abc-pic {
  margin: 8px 0 0;
  font-size: 52px;
  line-height: 1;
}
.abc-word {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 750;
  color: var(--maroon-deep);
}
.abc-tools {
  display: flex;
  justify-content: center;
  margin: 14px 0 16px;
}
#abc-speak {
  min-height: 48px;
  min-width: 120px;
  border: 0;
  border-radius: 12px;
  background: var(--maroon);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#abc-speak:hover { background: var(--maroon-deep); }
.abc-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.abc-strip button {
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #faf6f2;
  color: var(--maroon-deep);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.abc-strip button:hover { border-color: var(--maroon); }
.abc-strip button.on {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}
.abc-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.abc-choices button {
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf6f2;
  color: var(--maroon-deep);
  font: inherit;
  font-size: 28px;
  font-weight: 750;
  cursor: pointer;
}
.abc-choices button:hover { border-color: var(--maroon); }
.abc-choices button.good {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}
.abc-choices button.bad {
  background: #f3e4df;
  border-color: var(--maroon);
}
.math-panel { max-width: 560px; }
.sudo-panel { max-width: 520px; }
.sudo-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: min(100%, 420px);
  margin: 8px auto 16px;
  border: 2px solid var(--maroon-deep);
  border-radius: 10px;
  overflow: hidden;
  background: var(--maroon-deep);
}
.sudo-board:focus { outline: 2px solid var(--maroon); outline-offset: 3px; }
.sudo-cell {
  aspect-ratio: 1;
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: clamp(15px, 4vw, 22px);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.sudo-cell.box-r { border-right: 2px solid var(--maroon-deep); }
.sudo-cell.box-b { border-bottom: 2px solid var(--maroon-deep); }
.sudo-cell.given { color: var(--maroon-deep); font-weight: 800; }
.sudo-cell.peer { background: #f6efe8; }
.sudo-cell.same { background: #f3e4df; }
.sudo-cell.sel {
  background: #e8c4b8;
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--maroon);
}
.sudo-cell.bad { color: #9b1c2c; background: #f8e6e2; }
.sudo-cell.win { background: var(--green-bg); color: var(--green); }
.sudo-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  font-size: clamp(7px, 2vw, 10px);
  font-weight: 650;
  color: var(--muted);
  line-height: 1;
}
.sudo-notes span {
  display: grid;
  place-items: center;
}
.sudo-pad {
  justify-content: center;
  margin: 0 0 8px;
}
.sudo-pad button {
  min-width: 40px;
}
.sudo-tools { justify-content: center; }
.music-opts { margin: 0 0 14px; }
.math-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.math-opts button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #faf6f2;
  color: var(--maroon-deep);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.math-opts button:hover { border-color: var(--maroon); }
.math-opts button.on {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}
.math-q {
  margin: 18px 0 4px;
  text-align: center;
  font-size: clamp(40px, 12vw, 64px);
  font-weight: 750;
  line-height: 1.1;
  color: var(--maroon);
}

.kk-panel { max-width: 640px; }
.kk-q {
  margin: 12px 0 8px;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.35;
  color: var(--maroon-deep);
  text-align: center;
}
.kk-why {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f6efe8;
  font-size: 15px;
  line-height: 1.45;
}
.kk-next-row { justify-content: center; margin-top: 14px; }
.kk-score {
  margin: 18px 0;
  text-align: center;
  font-size: 22px;
  font-weight: 750;
  color: var(--maroon-deep);
}
.kk-sign {
  width: 72px;
  height: 72px;
  margin: 8px auto 4px;
  display: grid;
  place-items: center;
  font-weight: 800;
  line-height: 1;
}
.kk-sign.stop {
  width: 76px;
  height: 76px;
  background: #c0392b;
  color: #fffdfb;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.kk-sign.yield {
  width: 0;
  height: 0;
  border-left: 38px solid transparent;
  border-right: 38px solid transparent;
  border-top: 66px solid #c0392b;
  background: none;
}
.kk-sign.speed {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 7px solid #c0392b;
  background: #fffdfb;
  color: #1c1816;
  font-size: 26px;
}
.kk-sign.noentry {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #c0392b;
  position: relative;
}
.kk-sign.noentry::after {
  content: "";
  width: 40px;
  height: 10px;
  background: #fffdfb;
  border-radius: 2px;
}
.kk-sign.main {
  width: 58px;
  height: 58px;
  background: #f0d56a;
  border: 3px solid #1c1816;
  transform: rotate(45deg);
}

.halsa-panel { max-width: 640px; }
.halsa-plate {
  width: min(260px, 70vw);
  height: min(260px, 70vw);
  margin: 8px auto 16px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: 1fr 1fr;
  border: 8px solid #efe4da;
  box-shadow: inset 0 0 0 3px #d7c4b4;
}
.halsa-wedge {
  border: none;
  color: #fffdfb;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  padding: 10px;
}
.halsa-wedge.veg {
  grid-row: 1 / 3;
  background: #3d6b45;
}
.halsa-wedge.kol { background: #c9a24a; color: #4e101e; }
.halsa-wedge.prot { background: #6d182a; }
.halsa-wedge.on { box-shadow: inset 0 0 0 3px #fffdfb; }
.halsa-tabs { flex-wrap: wrap; justify-content: flex-end; }
.halsa-eat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 18px;
}
.halsa-eat-k {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 750;
  color: var(--maroon-deep);
}
.halsa-eat ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.45;
}
.halsa-eat li { margin: 0 0 4px; }
.halsa-day {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 8px;
  background: #fffdfb;
}
.halsa-day h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--maroon-deep);
}
.halsa-day p {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.4;
}
.halsa-day p:last-child { margin-bottom: 0; }
.halsa-day strong { font-weight: 750; }
.halsa-ex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 16px;
}
.halsa-ex article {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fffdfb;
}
.halsa-ex img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #fff8f2;
}
.halsa-ex h3 {
  margin: 8px 12px 0;
  font-size: 15px;
  color: var(--maroon-deep);
}
.halsa-ex p {
  margin: 4px 12px 10px;
  font-size: 13px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .halsa-eat { grid-template-columns: 1fr; }
  .halsa-ex { grid-template-columns: 1fr; }
  .music-insts { grid-template-columns: 1fr; }
  .music-inst-group:first-child,
  .music-inst-group.wide { grid-column: auto; }
  .hero { padding: 28px 0 18px; }
  h1 { font-size: clamp(28px, 9vw, 40px); }
  .lead, .intro { font-size: 16px; }
  .panel { padding: 18px; }
  .card, .jump-card { padding: 16px; }
  .game-panel { padding: 14px; }
  .game-meta { align-items: stretch; }
  .game-meta .actions { width: 100%; }
  .game-meta .actions .ghost,
  .game-meta .actions button { flex: 1; }
  .memory-board { gap: 6px; }
  .mem-card { font-size: 22px; border-radius: 10px; }
  .c4-board { gap: 4px; padding: 6px; }
  .hang-word { font-size: 22px; letter-spacing: 0.2em; word-break: break-word; }
  .hang-keys button { min-width: 40px; min-height: 40px; }
  .abc-strip button { min-width: 40px; min-height: 40px; }
  .math-opts button,
  .music-opts button { min-height: 40px; padding: 0 12px; }
  .sudo-pad button { min-width: 44px; min-height: 44px; }
  .g2048-cell { font-size: 18px; }
  .pet-meter { grid-template-columns: 56px 1fr 32px; gap: 6px; font-size: 12px; }
  .music-grid {
    min-width: 420px;
    grid-template-columns: 36px repeat(var(--music-cols, 16), minmax(20px, 1fr));
    gap: 3px;
  }
  .music-lab { font-size: 11px; }
  .music-cell { min-height: 22px; }
  .music-tempo { width: 100%; }
  .music-tempo input { flex: 1; width: auto; min-width: 0; }
  .pussel-head { gap: 10px; }
  .pussel-preview { width: 56px; height: 56px; }
  .yatzy-sheet { font-size: 14px; }
  .yatzy-sheet button { min-height: 40px; }
  .dart-left { font-size: 28px; }
  .rps-btns button { flex: 1 1 100%; }
}
.pussel-panel { max-width: 560px; }
.pussel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}
.pussel-preview {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff8f2;
  flex: 0 0 auto;
}
.pussel-head .sol-title { margin: 0; }
.pussel-head .sol-fact { margin: 4px 0 0; }
.pussel-board {
  display: grid;
  gap: 3px;
  width: min(100%, 480px);
  margin: 4px auto 0;
  padding: 4px;
  background: var(--maroon-deep);
  border-radius: 12px;
  touch-action: none;
}
.pussel-tile {
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 4px;
  background-color: #4e101e;
  background-repeat: no-repeat;
  cursor: pointer;
  font: inherit;
}
.pussel-tile.hole {
  background-image: none;
  background-color: #3a0c16;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 251, 0.08);
}
.pussel-tile.won { cursor: default; }
.pussel-picks button.done:not(.on) {
  background: #e7f0e8;
  border-color: #3d6b45;
  color: #2a4a30;
}
.maze-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fffdfb;
  touch-action: none;
}
#maze-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.balloon-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(#d7eef8 0%, #eef6fb 55%, #f6efe8 100%);
  cursor: crosshair;
}
#balloon-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.dart-panel { max-width: 840px; }
.dart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 18px;
  align-items: start;
}
.dart-frame {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #1a1012;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
#dart-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.dart-scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dart-player {
  background: #faf6f2;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.dart-player.active {
  border-color: var(--maroon);
  background: #fffdfb;
}
.dart-who {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}
.dart-left {
  margin: 4px 0 0;
  font-size: 34px;
  font-weight: 750;
  color: var(--maroon-deep);
  line-height: 1.1;
}
.dart-visit {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}
.dart-check {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--green);
  font-weight: 650;
}

.sol-panel { max-width: 680px; }
.sol-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #14101a;
}
#sol-canvas,
#star-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  cursor: pointer;
}
.sol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.sol-chips button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdfb;
  color: var(--maroon-deep);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 6px 10px;
  cursor: pointer;
}
.sol-chips button.on {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fffdfb;
}
.sol-title {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 750;
  color: var(--maroon-deep);
}
.sol-fact,
.sol-q {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}
.sol-q {
  font-size: 20px;
  font-weight: 750;
  text-align: center;
  margin: 16px 0 8px;
}

@media (max-width: 860px) {
  body.nav-open { overflow: hidden; }
  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
    font-weight: 650;
  }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: min(70dvh, calc(100dvh - 88px));
    overflow-y: auto;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
  }
  .nav a.cta,
  .nav a.ghost { justify-content: center; }
  .grid-2, .grid-3, .cards, .paid-cards, .foot, .jump-grid { grid-template-columns: 1fr; }
  .dart-layout { grid-template-columns: 1fr; }
  .dart-side { order: -1; }
  .keys td:first-child { width: auto; }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin: 0 -12px;
    padding: 10px 16px;
    scroll-padding-inline: 16px;
  }
  .chips a {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .pet-btns { grid-template-columns: 1fr 1fr; }
  .pet-browse { grid-template-columns: 40px 1fr 40px; }
  .wrap {
    width: min(1100px, calc(100% - 24px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .bar { min-height: 60px; gap: 10px; }
  .subnav { top: calc(60px + env(safe-area-inset-top, 0px)); }
  #gratis, #betalda, #program, #top, #innehall { scroll-margin-top: 76px; }
  .page-keys section[id],
  .page-keys #programmen,
  .page-games section[id],
  .page-games #spelen { scroll-margin-top: 124px; }
  .hero { padding: 36px 0 22px; }
  .lead, .intro { font-size: 17px; }
  section { padding: 22px 0 44px; }
  .actions .cta,
  .actions .ghost { flex: 1 1 140px; }
  .game-panel.wide,
  .music-panel,
  .dart-panel,
  .yatzy-panel,
  .fia-panel,
  .flip-panel { max-width: none; }
  .c4-board,
  .dam-board,
  .g2048-board,
  .snake-frame,
  #snake-canvas { max-width: 100%; width: 100%; }
  .hopp-pad { margin-top: 10px; }
  .flip-frame { max-width: 100%; }
  .page-tool .hero { padding: 20px 0 12px; }
  .page-tool h1 { font-size: clamp(26px, 8vw, 34px); margin: 0 0 8px; }
  .page-tool .lead { font-size: 16px; margin: 0; }
  .page-boka .hero .lead { display: none; }
  .page-tool .subnav { display: none; }
  .page-tool .actions { margin: 16px 0 0; }
  .page-tool .actions .cta,
  .page-tool .actions .ghost {
    flex: 1 1 140px;
  }
  .page-tool footer { padding: 24px 0 16px; }
  .top { padding-top: env(safe-area-inset-top, 0px); }
  footer {
    padding: 28px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  }
  input, select, textarea { font-size: 16px; }
}