:root {
  --bg: #f4f1f7;
  --panel: #ffffff;
  --glass: rgba(255, 255, 255, 0.86);
  --ink: #241a33;
  --ink-soft: #5d5170;
  --ink-mute: #8f84a0;
  --line: #e4ddec;
  --accent: #7b4fd6;
  --accent-ink: #ffffff;
  --gold: #e8a93a;
  --error: #c0392b;
  --shadow: 0 1px 2px rgba(36, 26, 51, 0.06), 0 6px 18px rgba(36, 26, 51, 0.06);
  --float: 0 2px 6px rgba(36, 26, 51, 0.12), 0 10px 28px rgba(36, 26, 51, 0.14);
  --radius: 14px;
  --top-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17121f;
    --panel: #221b2e;
    --glass: rgba(34, 27, 46, 0.88);
    --ink: #f1ecf8;
    --ink-soft: #c4b9d4;
    --ink-mute: #8d81a0;
    --line: #362c45;
    --accent: #a07cf0;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --float: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3 {
  margin: 0;
}
h2 {
  font-size: 17px;
}
h3 {
  font-size: 14px;
  margin: 14px 0 6px;
}
code {
  font-size: 12.5px;
}
button {
  font-family: var(--font);
  touch-action: manipulation;
}
[hidden] {
  display: none !important;
}

/* only with "Ítarlegt" on */
body:not(.advanced) .adv {
  display: none !important;
}

/* ---------------------------------------------------------------------------------------------- the top bar */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: calc(var(--top-h) + var(--safe-t));
  padding: var(--safe-t) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: inherit;
  text-decoration: none;
}
/* the icons: renders of beads (icons/*.webp, made by Source/characters/hama-beads/scripts/hama_icons.py), sized by
   where they sit */
.icon {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  vertical-align: middle;
  flex: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.icon.inline {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.28em;
}
.logo {
  width: 32px;
  height: 32px;
}
.tabs {
  display: flex;
  gap: 4px;
}
.tabs a {
  color: var(--ink-soft);
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 8px;
  text-decoration: none;
}
.tabs a[aria-current] {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* ---------------------------------------------------------------------------------------------- views */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px max(16px, env(safe-area-inset-right)) calc(40px + var(--safe-b)) max(16px, env(safe-area-inset-left));
}
.view {
  display: none;
}
.view[data-active] {
  display: block;
}
body[data-view="board"] {
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-view="board"] main {
  max-width: none;
  padding: 0;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 8px;
}
.hint {
  margin: 4px 0 10px;
  color: var(--ink-mute);
  font-size: 13px;
}
.muted {
  color: var(--ink-mute);
  font-size: 14px;
}
.empty {
  color: var(--ink-mute);
  grid-column: 1 / -1;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------------------------- home */
.hero {
  text-align: center;
  background: var(--panel);
  border: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 20px;
  padding: 26px 18px 20px;
  margin-bottom: 26px;
  transition: background 120ms, border-color 120ms;
}
.hero.over {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border-color: var(--accent);
}
.hero-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
}
.hero h1 {
  font-size: 23px;
  line-height: 1.2;
}
.hero-sub {
  max-width: 34em;
  margin: 8px auto 18px;
  color: var(--ink-soft);
}
.big-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}
button.big {
  min-height: 56px;
  min-width: 190px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
button.big.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.drop-sub {
  margin: 12px 0 0;
  color: var(--ink-mute);
  font-size: 13px;
}
@media (hover: none) {
  .drop-sub {
    display: none;
  }
}
.options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.options label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 13.5px;
}
input[type="text"],
select {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 2px 12px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.model-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 120ms, box-shadow 120ms;
}
.model-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--float);
}
.model-card:active {
  transform: scale(0.98);
}
.model-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 10px;
  background: color-mix(in srgb, var(--bg) 70%, var(--panel));
}
.model-card div {
  padding: 8px 11px 10px;
}
.model-card b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.model-card span {
  color: var(--ink-mute);
  font-size: 13px;
}

/* ---------------------------------------------------------------------------------------------- a photo's pieces */
.view-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.view-head h2 {
  font-size: 20px;
}
.view-head p {
  margin: 2px 0 0;
}
a.back {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
}
#job .gallery {
  margin-bottom: 20px;
}
.stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.stage img {
  display: block;
  width: 100%;
  height: auto;
}
.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.notes {
  margin: 8px 0 0;
  color: var(--ink-mute);
  font-size: 12.5px;
}
.check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 13px;
}

button.primary {
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  cursor: pointer;
}
button.primary:disabled {
  opacity: 0.45;
  cursor: default;
}
button.ghost {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 14px;
  padding: 7px 12px;
  cursor: pointer;
}
button.ghost:hover {
  color: var(--ink);
}
kbd {
  font: 600 11px var(--font);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 4px;
}

/* tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  color: var(--ink-mute);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.swatch {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 20%, transparent 23%);
}
.swatch.flat {
  background-image: none;
  border-radius: 5px;
}
.bead-cell {
  white-space: nowrap;
}
.colours select {
  max-width: 220px;
}
.colours tr.changed td {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.bead-name small {
  display: block;
  color: var(--ink-mute);
}
.rarity {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  background: color-mix(in srgb, var(--r) 22%, transparent);
  color: color-mix(in srgb, var(--r) 70%, var(--ink));
}
.rarity.common {
  --r: #7fa3c4;
}
.rarity.uncommon {
  --r: #4fae5c;
}
.rarity.rare {
  --r: #e8a93a;
}
.rarity.legendary {
  --r: #d34fa8;
}
.db td {
  font-size: 13px;
}

/* ---------------------------------------------------------------------------------------------- the board */
.board {
  position: relative;
  height: calc(100vh - var(--top-h) - var(--safe-t));
  height: calc(100dvh - var(--top-h) - var(--safe-t));
  overflow: hidden;
  background: #e9e6ef;
  color: var(--ink);
}
.board .editor {
  position: absolute;
  inset: 0;
}
.editor canvas {
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.editor canvas[data-tool="add"] {
  cursor: copy;
}
.editor canvas[data-tool="remove"] {
  cursor: not-allowed;
}
.editor canvas[data-tool="pick"] {
  cursor: crosshair;
}
.editor canvas[data-tool="move"] {
  cursor: grab;
}

/* the board alone on the whole screen: the browser's own full screen, or (where there is none) over the page */
.board.full {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100vh;
  height: 100dvh;
}
.board:fullscreen {
  width: 100%;
  height: 100%;
}
body.board-full .top {
  visibility: hidden;
}

/* the tools over the board */
.hud {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  pointer-events: none;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
.hud > * {
  pointer-events: auto;
}
.hud-top {
  top: 0;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}
.board.full .hud-top {
  padding-top: calc(10px + var(--safe-t));
}
.hud-bottom {
  bottom: 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: calc(10px + var(--safe-b));
}
.hud-bottom > * {
  max-width: 100%;
}
button.round {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink);
  box-shadow: var(--float);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#board-back {
  font-size: 28px;
  padding-bottom: 3px;
}
#info {
  font-family: Georgia, serif;
  font-style: italic;
}
.hud-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: center;
  max-width: max-content;
  margin-right: auto;
  padding: 5px 14px;
  border-radius: 14px;
  background: var(--glass);
  box-shadow: var(--float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hud-title b,
.hud-title span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-title b {
  font-size: 15px;
}
.hud-title span {
  color: var(--ink-mute);
  font-size: 12.5px;
}

.palette {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: var(--float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.swatches {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.swatches::-webkit-scrollbar {
  display: none;
}
.palette button {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.palette .swatch {
  width: 28px;
  height: 28px;
}
.palette button[data-on] {
  border-color: var(--accent);
}
.palette button.more {
  border: 2px dashed var(--ink-mute);
  color: var(--ink-soft);
  font-size: 20px;
  font-weight: 700;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 20px;
  background: var(--glass);
  box-shadow: var(--float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.toolbar button.round {
  box-shadow: none;
  background: var(--bg);
}
.seg {
  display: flex;
  gap: 2px;
}
.seg button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 58px;
  padding: 5px 6px 4px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.tool-icon {
  display: grid;
  place-items: center;
  height: 22px;
  font-size: 17px;
  line-height: 1;
}
.tool-icon .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.2);
}
button.save {
  min-width: 74px;
  min-height: 44px;
  border-radius: 14px;
  font-size: 15px;
}
button.save.working {
  opacity: 0.75;
}

/* sheets over the board */
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  max-height: 72%;
  margin: 0 auto;
  max-width: 620px;
  border-radius: 20px 20px 0 0;
  background: var(--panel);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
  animation: rise 160ms ease-out;
}
@keyframes rise {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px 18px;
  border-bottom: 1px solid var(--line);
}
.sheet-head button.round {
  width: 36px;
  height: 36px;
  font-size: 16px;
  box-shadow: none;
  background: var(--bg);
}
.sheet-body {
  overflow-y: auto;
  padding: 4px 16px calc(16px + var(--safe-b));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.sheet-body h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.chip .swatch {
  width: 26px;
  height: 26px;
}
.chip[data-on] {
  border-color: var(--accent);
}
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0;
}
.facts div {
  display: flex;
  flex-direction: column;
}
.facts span {
  color: var(--ink-mute);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.facts b {
  font-size: 16px;
}
.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.downloads a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
}
.sheet-actions {
  margin: 12px 0 4px;
}

/* ---------------------------------------------------------------------------------------------- busy, toast */
.busy {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.busy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(340px, 100%);
  padding: 22px;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--float);
  text-align: center;
}
.busy-card img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 12px;
  object-fit: contain;
}
.busy-card p {
  margin: 0;
}
#busy-text {
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-b));
  z-index: 200;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px));
  width: max-content;
  padding: 11px 18px;
  border-radius: 14px;
  background: #2a1f3a;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--float);
  animation: rise 160ms ease-out;
}
.toast.bad {
  background: var(--error);
}
body[data-view="board"] .toast {
  top: calc(64px + var(--safe-t));
  bottom: auto;
}

/* ---------------------------------------------------------------------------------------------- small screens */
@media (max-width: 560px) {
  :root {
    --top-h: 50px;
  }
  .top {
    gap: 10px;
  }
  .tabs a {
    padding: 6px 7px;
    font-size: 14px;
  }
  .advanced .brand span:last-child {
    display: none; /* the logo still goes home; the tabs need the room */
  }
  main {
    padding-top: 14px;
  }
  .hero {
    border-style: solid;
    border-width: 1px;
    padding: 22px 16px 18px;
    margin-bottom: 22px;
  }
  .hero h1 {
    font-size: 21px;
  }
  .big-buttons {
    flex-direction: column;
  }
  button.big {
    width: 100%;
    min-width: 0;
  }
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .options {
    justify-content: stretch;
  }
  .options label {
    width: 100%;
    justify-content: space-between;
  }
  .options input,
  .options select {
    flex: 1;
    max-width: 65%;
  }
  .seg button {
    min-width: 52px;
    padding: 5px 4px 4px;
    font-size: 11px;
  }
  .toolbar {
    gap: 4px;
    padding: 5px;
  }
  button.save {
    min-width: 62px;
  }
  .hud .round {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 360px) {
  .seg button {
    min-width: 46px;
  }
  .toolbar #undo {
    width: 36px;
    height: 36px;
  }
}
/* a phone on its side: little height, so the colours sit beside the tools */
@media (max-height: 480px) and (orientation: landscape) {
  .hud-bottom {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  }
  .hud-bottom .palette {
    max-width: 45%;
  }
}

/* ---------------------------------------------------------------------------------------------- adventures: for children */
/* Big letters, big buttons, little else: the adventures are what a visitor comes for. */
.kid {
  --kid-font: "Nunito", var(--font);
  --from: #7b4fd6;
  --to: #4aa6df;
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--kid-font);
  font-size: 19px;
}
.kid button,
.kid a {
  font-family: var(--kid-font);
}
.kid-title {
  margin: 6px 0 18px;
  font-size: clamp(32px, 7vw, 46px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.kid-sub {
  margin: 30px 0 6px;
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 900;
}
.kid-wait {
  color: var(--ink-mute);
  font-size: 22px;
  font-weight: 800;
}
.kid .error {
  font-size: 20px;
}
.kid-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.kid-head .kid-title {
  margin: 0;
}
.kid-kind {
  margin: 2px 0 0;
  color: var(--ink-mute);
  font-size: 20px;
  font-weight: 800;
}
.kid-back {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--line);
  color: var(--ink);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  padding-bottom: 4px;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.kid-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 800;
}
.kid-steps span:not([aria-hidden]) {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 2px solid var(--line);
}
.kid-note {
  margin: 18px 0 0;
  text-align: center;
}
.link-button {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 17px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

/* buttons you cannot miss */
.kid-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 0 26px;
  border: 0;
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--shadow), inset 0 -5px 0 rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 100ms;
}
.kid-button:active,
.adventure-card:active,
.template-card:active,
.slot-actions > *:active,
.play:active {
  transform: scale(0.97);
}
.kid-button.primary {
  background: var(--accent);
  color: #fff;
}
.kid-button.new {
  width: 100%;
  margin-top: 16px;
  border: 3px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  background: transparent;
  box-shadow: none;
  color: var(--accent);
}

/* the adventures: a big bright card each, with its own play button */
.adventure-list {
  display: grid;
  gap: 16px;
}
.adventure-card {
  display: flex;
  align-items: stretch;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--from), var(--to));
  color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--from) 35%, transparent);
  overflow: hidden;
  transition: transform 100ms;
}
.adventure-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  color: inherit;
  text-decoration: none;
}
.sign {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 42px;
  line-height: 1;
}
.adventure-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.adventure-text b {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.adventure-text span {
  font-size: 18px;
  font-weight: 800;
  opacity: 0.85;
}
.adventure-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 96px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 40px;
  text-decoration: none;
  border-left: 2px solid rgba(255, 255, 255, 0.25);
}
.adventure-play:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* the adventures to start: as big and bright */
.template-list {
  display: grid;
  gap: 16px;
  margin-top: 10px;
}
.template-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "sign name" "sign story" "go go";
  align-items: center;
  gap: 4px 18px;
  padding: 22px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--from), var(--to));
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--from) 35%, transparent);
  cursor: pointer;
  transition: transform 100ms;
}
.template-card .sign {
  grid-area: sign;
}
.template-card b {
  grid-area: name;
  font-size: 28px;
  font-weight: 900;
}
.template-card > span:not(.sign):not(.template-go) {
  grid-area: story;
  font-size: 17px;
  font-weight: 700;
  opacity: 0.9;
  /* a taste of the story, not all of it */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.template-go {
  grid-area: go;
  justify-self: start;
  margin-top: 12px;
  padding: 12px 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--from);
  font-size: 21px;
  font-weight: 900;
}
.template-card.working {
  opacity: 0.6;
}

/* an adventure: play it */
.play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 96px;
  margin: 0 0 8px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--from), var(--to));
  color: #fff;
  font-size: 40px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--from) 40%, transparent), inset 0 -7px 0 rgba(0, 0, 0, 0.15);
  transition: transform 100ms;
}
.play-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 30px;
  padding-left: 5px;
}

/* the things to make: a tile each, its picture, and three big buttons */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.slot-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 28px;
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
}
.slot-card.wanted-slot {
  outline: 4px solid var(--gold);
}
.slot-picture {
  display: grid;
  place-items: center;
  height: 180px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--to) 12%, var(--bg));
  overflow: hidden;
  text-decoration: none;
}
.slot-picture img,
.slot-picture canvas {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}
.slot-sign {
  font-size: 84px;
  line-height: 1;
}
.slot-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 0 4px;
}
.slot-name b {
  font-size: 26px;
  font-weight: 900;
}
.mine,
.origin {
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, #2e9647 18%, transparent);
  color: color-mix(in srgb, #2e9647 80%, var(--ink));
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}
.slot-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.slot-actions > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 76px;
  padding: 6px 4px;
  border: 0;
  border-radius: 18px;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform 100ms;
}
.slot-actions > * span {
  font-size: 30px;
  line-height: 1.1;
}
.slot-actions > *:hover {
  background: color-mix(in srgb, var(--to) 14%, var(--bg));
}
.slot-more {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.slot-more .ghost {
  font-size: 13.5px;
  padding: 6px 10px;
}

/* something to do now: a sheet's photo asked for, a sheet to open */
.wanted {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--gold) 24%, var(--panel));
  border: 2px solid color-mix(in srgb, var(--gold) 65%, var(--line));
}
.wanted b {
  font-size: 22px;
  font-weight: 900;
}

/* the cog: Ítarlegt, out of the way */
.cog {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 22px;
  cursor: pointer;
  user-select: none;
}
.cog input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cog:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.cog:has(input:focus-visible) {
  outline: 2px solid var(--accent);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.brand span:last-child {
  font-family: "Nunito", var(--font);
  font-weight: 900;
  font-size: 21px;
}

a.button {
  display: inline-block;
  text-decoration: none;
}
a.ghost {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-soft);
  font-weight: 600;
}
button.danger {
  color: var(--error);
}
.danger-row {
  justify-content: flex-end;
  margin-top: 30px;
}
/* the game from the start again: for every family, quiet, at the end of the adventure's page */
.start-over-row {
  justify-content: center;
  margin-top: 30px;
}
#info.none {
  display: none;
}
.error {
  color: var(--error);
}

@media (max-width: 560px) {
  .kid {
    font-size: 18px;
  }
  .adventure-open {
    padding: 18px 14px;
    gap: 12px;
  }
  .sign {
    width: 60px;
    height: 60px;
    font-size: 34px;
  }
  .adventure-text b,
  .template-card b {
    font-size: 24px;
  }
  .adventure-play {
    width: 78px;
    font-size: 34px;
  }
  .play {
    min-height: 84px;
    font-size: 34px;
  }
  .slots {
    grid-template-columns: minmax(0, 1fr);
  }
  .slot-card {
    display: grid;
    grid-template-columns: 104px 1fr;
    grid-template-areas: "pic name" "actions actions" "more more";
    align-items: center;
    gap: 12px;
  }
  .slot-picture {
    grid-area: pic;
    height: 104px;
  }
  .slot-sign {
    font-size: 58px;
  }
  .slot-name {
    grid-area: name;
    flex-wrap: wrap;
  }
  .slot-actions {
    grid-area: actions;
  }
  .slot-actions > * {
    min-height: 72px;
    font-size: 17px;
  }
  .slot-actions > * span {
    font-size: 28px;
  }
  .slot-more {
    grid-area: more;
  }
}

/* ---------------------------------------------------------------------------------------------- sunny: the adventures' palette */
/* The adventures are always bright and cheerful, light even when the device is dark: sky and sunshine behind white
   cards, candy colours on the buttons. */
body[data-view="adventures"],
body[data-view="adventure"],
body[data-view="signin"],
body[data-view="signup"],
body[data-view="landing"] {
  --bg: #fff8e7;
  --panel: #ffffff;
  --ink: #2b2350;
  --ink-soft: #5a5480;
  --ink-mute: #8a86a8;
  --line: #ece8f8;
  --accent: #ff6b6b;
  --gold: #ffc93c;
  --shadow: 0 2px 4px rgba(90, 70, 170, 0.06), 0 10px 26px rgba(90, 70, 170, 0.1);
  color-scheme: light;
  color: var(--ink);
  background: linear-gradient(180deg, #d9f1ff 0%, #fff8e7 45%, #ffeef6 100%) fixed;
}
body[data-view="adventures"] .top,
body[data-view="adventure"] .top,
body[data-view="signin"] .top,
body[data-view="signup"] .top,
body[data-view="landing"] .top {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: transparent;
  box-shadow: 0 2px 14px rgba(90, 70, 170, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.kid-title {
  color: #2b2350;
}
.kid-sub {
  color: #3d3470;
}
.kid-back {
  border-color: transparent;
  background: #fff;
  color: #ff6b6b;
}

/* the adventures' cards: bright, with a big white play button */
.adventure-card {
  align-items: center;
}
.adventure-open .sign,
.template-card .sign {
  background: rgba(255, 255, 255, 0.28);
}
.adventure-play {
  width: 76px;
  height: 76px;
  margin: 0 16px 0 4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--to);
  font-size: 32px;
  padding-left: 5px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.adventure-play:hover {
  background: #fff;
  transform: scale(1.06);
}
.template-go {
  color: var(--to);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.kid-button.new {
  border-color: #ffb3b3;
  background: rgba(255, 255, 255, 0.6);
  color: #ff5a5a;
}

/* play: a happy green go */
.play {
  background: linear-gradient(135deg, #34d399, #10b981 55%, #06b6d4);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.35), inset 0 -7px 0 rgba(0, 0, 0, 0.12);
}
.play-icon {
  background: #fff;
  color: #10b981;
}

/* the steps, each its own colour */
.kid-steps span:not([aria-hidden]) {
  border: 0;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.kid-steps span[aria-hidden] {
  color: #ff9f6b;
}

/* the tiles: white, a pastel picture by what it is, three candy buttons */
.slot-card {
  border: 0;
  box-shadow: var(--shadow);
}
.slot-picture {
  background: #f1ecff;
}
.slot-card[data-slot="player"] .slot-picture {
  background: #fff1c2;
}
.slot-card[data-slot="rod"] .slot-picture {
  background: #dcf2ff;
}
.slot-card[data-slot="fish"] .slot-picture {
  background: #d9fbe6;
}
.slot-name b {
  color: #2b2350;
}
.mine {
  background: #d9fbe6;
  color: #12924f;
}
/* the game's own piece, until the child makes theirs */
.origin {
  background: #fff1c2;
  color: #8a5a00;
}
.slot-actions > * {
  color: #2b2350;
}
.slot-actions > :nth-child(1) {
  background: #ece6ff;
}
.slot-actions > :nth-child(2) {
  background: #ffe1ea;
}
.slot-actions > :nth-child(3) {
  background: #fff1c2;
}
.slot-actions > :nth-child(1):hover {
  background: #e0d6ff;
}
.slot-actions > :nth-child(2):hover {
  background: #ffd1de;
}
.slot-actions > :nth-child(3):hover {
  background: #ffe8a3;
}
.wanted {
  background: #fff4c2;
  border-color: #ffd84d;
}
.link-button {
  color: #ff5a5a;
}
body[data-view="adventures"] .cog,
body[data-view="adventure"] .cog,
body[data-view="signin"] .cog,
body[data-view="signup"] .cog,
body[data-view="landing"] .cog {
  color: #b0aac8;
}

/* ---------------------------------------------------------------------------------------------- signing in */
/* One card: the email, then the code sent to it, in big letters (a grown-up usually types them, a child may). */
.signin {
  max-width: 460px;
  margin: 4vh auto 0;
  padding: 28px 22px 26px;
  border-radius: 28px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}
.signin-icon {
  width: 84px;
  height: 84px;
}
.signin .kid-title {
  margin: 6px 0 10px;
}
.signin-form {
  display: grid;
  gap: 14px;
}
.signin .kid-button {
  font-size: 22px;
  font-weight: 900;
}
.signin-lead {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.signin-lead b {
  color: var(--ink);
}
.signin .signin-input {
  width: 100%;
  min-height: 60px;
  padding: 0 18px;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  color: var(--ink);
  font: 800 21px var(--kid-font);
  text-align: center;
}
.signin .signin-input:focus {
  outline: none;
  border-color: var(--accent);
}
.signin .signin-input.code {
  font-size: 34px;
  letter-spacing: 0.3em;
  padding-left: calc(18px + 0.3em); /* the spacing after the last digit, so the digits sit in the middle */
}
.signin-brings {
  margin: 0;
  color: var(--ink-mute);
  font-size: 16px;
  font-weight: 800;
}
.signin-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 0;
}
.signin-error {
  margin: 16px 0 0;
}

/* ---------------------------------------------------------------------------------------------- the front page */
/* What a parent who is not signed in sees: the idea (a workbook on paper that comes alive in a game) shown with real
   workbook pages and the game beside them, then the sign-in card. Wider than the other kid views. */
#landing.kid {
  max-width: 1080px;
}
.landing {
  display: grid;
  gap: 18px;
  padding-bottom: 24px;
}
.beta-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #2b2350;
  color: #ffd75c;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 28px;
  padding: 28px;
  border-radius: 32px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.landing-intro .kid-title {
  margin: 4px 0 14px;
  font-size: clamp(34px, 5.4vw, 54px);
}
.landing-intro .parent-lead {
  margin: 0 0 22px;
  font-size: 19px;
}
.landing-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
}
.pair-side img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.pair-side figcaption {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.pair-arrow {
  color: var(--accent);
  font-size: 30px;
  font-weight: 900;
}
.landing-block {
  padding: 4px 4px 0;
}
.landing-block > .kid-sub {
  margin: 18px 0 10px;
}
.landing-block > .parent-lead {
  margin: 0 0 16px;
  max-width: 760px;
}
.landing-steps {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.page-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.more-pages {
  margin-top: 18px;
}
.more-pages > summary {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  list-style: none;
}
.more-pages > summary::-webkit-details-marker {
  display: none;
}
.more-pages > summary .less,
.more-pages[open] > summary .more {
  display: none;
}
.more-pages[open] > summary .less {
  display: inline;
}
.more-pages[open] > .page-gallery {
  margin-top: 18px;
}
.page-card {
  display: grid;
  gap: 4px;
  padding: 12px 12px 16px;
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: transform 120ms;
}
.page-card:hover {
  transform: translateY(-3px) rotate(-0.4deg);
}
.page-card img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.page-card b {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}
.paper-game {
  display: grid;
  gap: 16px;
}
.pg-row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 18px;
  margin: 0;
  padding: 16px;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.pg-page,
.pg-game {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.pg-page {
  border: 1px solid var(--line);
}
.pg-row figcaption {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}
.landing-adventures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.landing-adventure {
  overflow: hidden;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.landing-adventure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.landing-adventure h3 {
  margin: 14px 18px 4px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
}
.landing-adventure p {
  margin: 0 18px 18px;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.signin .beta-badge {
  display: table;
  margin: 8px auto 0;
}
/* who is reading: the invited see the sign-in, everyone else the waiting list */
#signin[data-invited="yes"] .invite-hide,
#signin[data-invited="no"] .invite-show {
  display: none !important;
}
.list-form {
  display: grid;
  gap: 10px;
}
.list-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.list-row .signin-input {
  flex: 1 1 220px;
}
.list-row .kid-button {
  flex: 0 1 auto;
}
.list-form .kid-button,
.signin-list-offer .kid-button {
  font-size: 20px; /* over the editor's own button.primary */
  font-weight: 900;
}
.list-form .signin-input {
  min-height: 60px;
  padding: 0 18px;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  color: var(--ink);
  font: 800 19px var(--kid-font);
}
.list-form .signin-input:focus {
  outline: none;
  border-color: var(--accent);
}
.list-form.joined .list-row,
.list-form.joined > .signin-input,
.list-form.joined > .kid-button,
.list-form.joined .list-note {
  display: none;
}
.list-said {
  margin: 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: #e7f8ee;
  color: #1d6b3d;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}
.list-said.error {
  background: #fdecec;
  color: var(--error, #b42318);
}
.list-note {
  margin: 0;
  color: var(--ink-mute);
  font-size: 15px;
  font-weight: 800;
}
.landing-have {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 800;
}
.invite-note {
  margin: 0;
  padding: 14px 18px;
  border-radius: 18px;
  background: #fff3c4;
  color: #6b5600;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}
.pg-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.landing-adventure {
  position: relative;
}
.adventure-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #2b2350;
  color: #ffd75c;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.adventure-pill.open {
  background: #1f9d55;
  color: #fff;
}
.landing-faq details {
  margin: 0 0 12px;
  padding: 4px 26px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.landing-faq summary {
  padding: 16px 0;
  line-height: 1.35;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.landing-faq details p {
  margin: 0 0 22px;
  padding: 14px 18px 0;
  border-top: 2px dashed var(--line);
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}
.landing-end {
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin: 18px auto 0;
  text-align: center;
}
.landing-end .landing-have {
  margin: 0;
}
.list-card {
  padding: 26px 22px;
  border-radius: 28px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.list-card .kid-sub {
  margin: 0 0 8px;
}
.list-card .parent-lead {
  margin: 0 0 16px;
}
.signin-list-offer {
  display: grid;
  margin-top: 12px;
}
@media (max-width: 760px) {
  .list-row .kid-button {
    flex: 1 1 100%;
  }
}
/* the way in for those with an account: in the bar at the top of the front page */
.top-signin {
  display: none;
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink-soft, #5a5480);
  font-family: "Nunito", var(--font);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.top-signin b {
  color: var(--accent);
  font-weight: 900;
}
body[data-view="landing"] .top-signin {
  display: inline-block;
}
body[data-view="landing"] .top .tabs {
  display: none;
}
body[data-view="landing"] .top .cog {
  margin-left: 0;
}
@media (max-width: 520px) {
  .top-signin {
    padding: 7px 12px;
    font-size: 13px;
  }
}
.signin-back {
  margin: 18px 0 0;
  text-align: center;
}
/* the adventures on their way, as the app shows them (adventures.js COMING), smaller */
.landing-coming-head {
  margin: 22px 0 10px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}
.landing-coming {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.landing-coming .template-card {
  padding: 18px;
  cursor: default;
}
.landing-coming .template-card b {
  font-size: 22px;
}
.landing-coming .template-card > span:not(.sign):not(.template-go) {
  font-size: 15px;
}
@media (max-width: 760px) {
  .landing-coming {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .landing-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 22px 16px;
    text-align: center;
  }
  .landing-intro .kid-button {
    width: 100%;
  }
  .page-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .landing-adventures {
    grid-template-columns: minmax(0, 1fr);
  }
  .pg-row {
    padding: 12px;
  }
  .pg-row figcaption {
    font-size: 16px;
  }
}
.account-line {
  margin: 34px 0 0;
  color: var(--ink-mute);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}
.account-line b {
  color: var(--ink-soft);
}
.account-line .link-button {
  margin-left: 8px;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------------------------- chapters */
/* An adventure's chapters, one after the other: a numbered bead, its name and story, what the child adds, and its
   tiles. A chapter with nothing to make yet waits, faded. */
.chapters {
  display: grid;
  gap: 22px;
}
.chapter {
  padding: 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow);
}
.chapter.later {
  opacity: 0.7;
}
.chapter-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.chapter-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff, var(--from, #8b5cf6) 55%, var(--to, #ec4899));
  color: #fff;
  font: 900 26px/1 var(--kid-font);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 10px rgba(90, 70, 170, 0.2);
}
.chapter-head h3 {
  margin: 4px 0 4px;
  color: #2b2350;
  font-size: 28px;
  font-weight: 900;
}
.chapter-story {
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.chapter-prompt {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: #fff4c2;
  color: #5a4300;
  font-size: 18px;
  font-weight: 800;
}
.chapter-later {
  margin: 0;
  color: var(--ink-mute);
  font-size: 20px;
  font-weight: 800;
}
.slot-card[data-slot="axe"] .slot-picture {
  background: #ffe8d6;
}
.slot-card[data-slot="sword"] .slot-picture {
  background: #e3ecff;
}
.slot-card[data-slot="ghost"] .slot-picture {
  background: #eee8ff;
}
.slot-card[data-slot="chest"] .slot-picture {
  background: #ffe6cc;
}
.slot-card[data-slot="mouse"] .slot-picture {
  background: #ffe1ea;
}

/* what a thing in the world does: big round-cornered buttons under its tile */
.slot-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
}
.slot-extra button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 70px;
  padding: 6px 4px;
  border: 0;
  border-radius: 18px;
  background: #d9fbe6;
  color: #2b2350;
  font: 900 17px/1.2 var(--kid-font);
  cursor: pointer;
  transition: transform 100ms;
}
.slot-extra button > span:first-child {
  font-size: 28px;
  line-height: 1.1;
}
.slot-extra button:active {
  transform: scale(0.97);
}
.slot-extra button.foe {
  background: #ffd6d6;
}
.slot-extra [data-loot] {
  background: #ffe6cc;
}
.slot-extra .done {
  color: #12924f;
}

/* the form for what is said and found: a big friendly card over the page */
.behave {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 22px;
  border: 0;
  border-radius: 28px;
  background: #fff;
  color: #2b2350;
  box-shadow: 0 20px 60px rgba(43, 35, 80, 0.3);
}
.behave::backdrop {
  background: rgba(43, 35, 80, 0.35);
}
.behave .kid-sub {
  margin-top: 0;
}
.behave-field {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}
.behave-field > span {
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 800;
}
.behave-field input,
.behave-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid #ece8f8;
  border-radius: 16px;
  background: #fbfaff;
  color: #2b2350;
  font: 700 18px/1.4 var(--kid-font);
  resize: vertical;
}
.behave-field input:focus,
.behave-field textarea:focus {
  outline: none;
  border-color: #c4b5fd;
  background: #fff;
}
.behave-pair {
  margin: 0 0 12px;
  padding: 12px 14px 2px;
  border: 0;
  border-radius: 20px;
  background: #f6f2ff;
}
.behave-pair legend {
  padding: 0 6px;
  color: #6d28d9;
  font-weight: 900;
}
/* the sounds to pick from: big tiles, the picked one lit */
.behave-hint {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 800;
}
.sound-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.sound-pick {
  position: relative;
}
.sound-pick input {
  position: absolute;
  opacity: 0;
}
.sound-pick span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 6px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: #e8f4ff;
  color: #2b2350;
  font: 900 17px/1.2 var(--kid-font);
  text-align: center;
  cursor: pointer;
  transition: transform 100ms;
}
.sound-pick span:active {
  transform: scale(0.97);
}
.sound-pick input:checked + span {
  border-color: #7c3aed;
  background: #fff3b8;
}
.sound-pick input:focus-visible + span {
  outline: 3px solid #c4b5fd;
  outline-offset: 2px;
}
.slot-extra [data-sound] {
  background: #e8f4ff;
}
.behave-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 6px;
}
@media (max-width: 560px) {
  .slot-extra {
    grid-column: 1 / -1;
  }
  .slot-extra button {
    min-height: 62px;
    font-size: 15px;
  }
  .chapter {
    padding: 14px 10px 10px;
    border-radius: 26px;
  }
  .chapter-head {
    gap: 10px;
    padding: 0 4px;
  }
  .chapter-n {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }
  .chapter-head h3 {
    font-size: 24px;
  }
  .chapter-story,
  .chapter-prompt {
    font-size: 16px;
  }
}
@media (max-width: 560px) {
  /* a long name (Fjársjóðskistan) wraps instead of pushing the tile wider than the page */
  .slot-card {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .slot-picture {
    height: 110px;
  }
  .slot-name {
    min-width: 0;
  }
  .slot-name b {
    font-size: 22px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* ---------------------------------------------------------------------------------------------- bead icons in place */
button.round .icon,
.tool-icon .icon {
  width: 24px;
  height: 24px;
}
button.big .icon {
  width: 30px;
  height: 30px;
}
.cog .icon {
  width: 28px;
  height: 28px;
}
.cog:has(input:checked) .icon {
  filter: drop-shadow(0 0 4px var(--accent));
}
.kid-back .icon {
  width: 34px;
  height: 34px;
}
.kid-back {
  padding: 0;
}
.sign .icon {
  width: 58px;
  height: 58px;
}
.adventure-play .icon {
  width: 42px;
  height: 42px;
}
.adventure-play {
  padding-left: 0;
}
.play-icon .icon {
  width: 38px;
  height: 38px;
}
.play-icon {
  padding-left: 0;
}
.slot-picture .slot-sign {
  width: 150px;
  height: 150px;
}
.slot-actions > * > .icon,
.slot-extra button > .icon:first-child {
  width: 40px;
  height: 40px;
}
.slot-extra .done {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
}
.kid-steps .icon {
  width: 30px;
  height: 30px;
}
.kid-steps .step-arrow {
  width: 22px;
  height: 22px;
}
.kid-button .icon {
  width: 34px;
  height: 34px;
}
.behave .title-icon {
  width: 44px;
  height: 44px;
  vertical-align: -10px;
}
.chapter-later .icon,
.wanted .icon.inline {
  width: 1.4em;
  height: 1.4em;
}
@media (max-width: 560px) {
  .sign .icon {
    width: 48px;
    height: 48px;
  }
  .slot-picture .slot-sign {
    width: 96px;
    height: 96px;
  }
  .slot-actions > * > .icon,
  .slot-extra button > .icon:first-child {
    width: 34px;
    height: 34px;
  }
}

/* ---------------------------------------------------------------------------------------------- for the parent */
/* The adventures are run by a grown-up for a child: a word on what each view is for, what the parent does (print, take
   the photo, send the game's link), how far the child is, and how it all works, folded away until asked. */
.parent-lead {
  margin: -8px 0 18px;
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}
.parent-note {
  margin: 10px 0 0;
  color: var(--ink-mute);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}
.parent-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.parent-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}
.parent-steps li b {
  color: var(--ink);
  font-weight: 900;
}
.parent-steps .icon {
  flex: none;
  width: 44px;
  height: 44px;
}
.signin .parent-lead {
  margin: 0 0 16px;
  font-size: 17px;
}
.signin .parent-steps li {
  background: var(--bg);
  box-shadow: none;
}
.signin .parent-note {
  margin: 12px 0 0;
}
.signin-head {
  margin: 26px 0 12px;
  padding-top: 22px;
  border-top: 2px dashed var(--line);
}
.wanted-sub {
  flex: 1 1 100%;
  margin-top: -6px;
  color: #6b5600;
  font-size: 16px;
  font-weight: 800;
}

/* what the parent does here, beside Spila: the photo of a sheet, and the game's link for a bigger screen */
.parent-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
.parent-actions .kid-button {
  min-height: 60px;
  padding: 0 16px;
  font-size: 19px;
}
.parent-actions .kid-button:not(.primary) {
  background: #fff;
  color: var(--ink);
}
.parent-file {
  margin: 8px 0 0;
}
.parent-file .link-button {
  font-size: 15px;
}

/* how far the child is: a bead for each thing to make, lit for each made */
.progress-card {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow);
}
.progress-card h2 {
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 900;
}
.progress-count {
  margin: 2px 0 10px;
  color: var(--ink-soft);
  font-size: 20px;
  font-weight: 800;
}
.progress-count b {
  color: #12924f;
  font-size: 34px;
  font-weight: 900;
}
.progress-pegs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.progress-pegs .peg {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, #ece8f8 26%);
}
.progress-pegs .peg.on {
  background: radial-gradient(circle, #fff 0 22%, #34d399 26%, #10b981);
}

/* how it all works: folded away until the parent asks */
.parent-help {
  margin: 14px 0 0;
  border-radius: 22px;
  background: #fff4c2;
  box-shadow: var(--shadow);
}
.parent-help summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  color: #5a4300;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
.parent-help summary::-webkit-details-marker {
  display: none;
}
.parent-help summary::after {
  content: "";
  margin-left: auto;
  width: 12px;
  height: 12px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 150ms;
}
.parent-help[open] summary::after {
  transform: rotate(-135deg) translateY(-3px);
}
.parent-help summary .icon {
  width: 30px;
  height: 30px;
}
.parent-help .parent-steps {
  padding: 0 12px 14px;
}

/* a chapter folds: its bead, name and how much of it is made always show; tap to open its story, workbook and tiles */
details.chapter > summary {
  align-items: center;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}
details.chapter > summary::-webkit-details-marker {
  display: none;
}
details.chapter > summary > div {
  flex: 1;
}
details.chapter > summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-right: 3px solid #b0aac8;
  border-bottom: 3px solid #b0aac8;
  transform: rotate(45deg) translateY(-4px);
  transition: transform 150ms;
}
details.chapter[open] > summary {
  margin-bottom: 14px;
}
details.chapter[open] > summary::after {
  transform: rotate(-135deg) translateY(-4px);
}
details.chapter .chapter-head h3 {
  margin: 0;
}
.chapter-state {
  margin: 2px 0 0;
  color: var(--ink-mute);
  font-size: 16px;
  font-weight: 800;
}
.chapter-state.all {
  color: #12924f;
}
details.chapter > .chapter-story {
  margin: 0 0 4px;
}
.chapter-story b,
.chapter-prompt b {
  font-weight: 900;
}

/* a tile's two buttons: its sheet to print (lavender) and the board (butter) */
.slot-actions {
  grid-template-columns: repeat(2, 1fr);
}
.slot-actions > :nth-child(2) {
  background: #fff1c2;
}
.slot-actions > :nth-child(2):hover {
  background: #ffe8a3;
}

/* ---------------------------------------------------------------------------------------------- locked adventures */
/* An adventure to choose that is paid for: its card says Læst, and opens with a code (or goes to buy one) */
.lock-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  font-size: 15px;
  font-weight: 900;
  vertical-align: 4px;
}
.template-card.locked {
  cursor: default;
}
.template-actions {
  grid-area: go;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.template-actions .template-go {
  margin-top: 0;
  border: 0;
  font-family: var(--kid-font);
  text-decoration: none;
  cursor: pointer;
}
.template-actions .template-buy {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
/* one to start: Spila strax first and biggest, its page beside it, quieter; the card itself is not a button */
.template-card.ready {
  cursor: default;
}
.template-card.ready:active {
  transform: none;
}
.template-actions .play-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.template-actions .template-later {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.template-actions .template-go:active {
  transform: scale(0.96);
}
.template-actions .template-go:disabled {
  opacity: 0.7;
}
#unlock-code {
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 900;
}
#unlock .error {
  margin: 0 0 10px;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------------------------- a chapter's workbook and its end */
/* the workbook is a tap away in the chapter's head, folded or not */
.chapter-book {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff4c2, #ffe3ef);
  color: #3d3470;
  font: 900 14px/1.1 var(--kid-font);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.chapter-book .icon {
  width: 34px;
  height: 34px;
}
.chapter-book:active {
  transform: scale(0.96);
}
details.chapter.finished {
  background: rgba(217, 251, 230, 0.6);
}
details.chapter.finished .chapter-n {
  background: radial-gradient(circle at 36% 30%, #fff, #34d399 55%, #10b981);
}
.chapter-state .icon.inline {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -4px;
}
details.chapter[open] > .workbook-card {
  margin-top: 0;
  margin-bottom: 12px;
}
.chapter-finish {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 16px 0 2px;
  color: var(--ink-mute);
  font-size: 15px;
  font-weight: 800;
}
.chapter-finish .kid-button {
  min-height: 52px;
  padding: 0 18px;
  font-size: 18px;
  background: #d9fbe6;
  color: #12924f;
}
.chapter-finish.done {
  color: #12924f;
  font-size: 17px;
}
.chapter-finish .icon.inline {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -5px;
}
.progress-chapters {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 900;
}

/* ---------------------------------------------------------------------------------------------- more adventures */
/* behind Fleiri ævintýri: the ones to choose, two to a row, small cards; the ones on their way faded, Kemur bráðum */
#pick-adventure .template-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#pick-adventure .template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border-radius: 24px;
}
#pick-adventure .template-card .sign {
  width: 56px;
  height: 56px;
}
#pick-adventure .template-card b {
  max-width: 100%;
  font-size: 21px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  hyphens: manual;
}
#pick-adventure .template-card > span:not(.sign):not(.template-go) {
  flex: 1;
  font-size: 15px;
  -webkit-line-clamp: 4;
}
#pick-adventure .template-go {
  margin-top: 4px;
  padding: 9px 18px;
  font-size: 17px;
}
#pick-adventure .template-actions {
  margin-top: 4px;
  gap: 8px;
}
#pick-adventure .lock-pill {
  display: block;
  width: fit-content;
  margin: 4px 0 0;
}
.template-card.coming {
  cursor: default;
  filter: saturate(0.55);
  opacity: 0.8;
  box-shadow: none;
}
.template-card.coming:active {
  transform: none;
}
.template-card.coming .coming-pill {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}
@media (max-width: 400px) {
  #pick-adventure .template-card {
    padding: 13px;
  }
  #pick-adventure .template-card .sign {
    width: 46px;
    height: 46px;
  }
  #pick-adventure .template-card .sign .icon {
    width: 38px;
    height: 38px;
  }
  #pick-adventure .template-card b {
    font-size: 18px;
  }
  #pick-adventure .template-go {
    padding: 8px 12px;
    font-size: 15px;
  }
}

/* the board's Hreinsa: every bead off at once, in the top bar beside the round buttons */
.pill-clear {
  flex: none;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: var(--float);
  color: var(--ink);
  font: 800 16px/1 var(--font);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pill-clear:active {
  transform: scale(0.96);
}

/* ---------------------------------------------------------------------------------------------- a comic's words */
/* each panel's picture, who speaks, and a box for what the child wrote in the bubble */
.comic-panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.comic-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow);
}
.comic-panel img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  background: #f1ecff;
}
.comic-panel span {
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 900;
}
.comic-panel textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 2px solid #ece8f8;
  border-radius: 14px;
  background: #fbfaff;
  color: #2b2350;
  font: 700 18px/1.4 var(--kid-font);
  resize: vertical;
}
.comic-panel textarea:focus {
  outline: none;
  border-color: #c4b5fd;
  background: #fff;
}
.comic-form .kid-button {
  width: 100%;
}
.chapter-comic {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: #ffe1ea;
  color: #5a2440;
  font-size: 16px;
  font-weight: 800;
}
.chapter-comic .link-button {
  justify-self: start;
  padding: 2px 0;
  font-size: 15px;
}

/* ---------------------------------------------------------------------------------------------- the flagship */
/* Svaðilför Alexanders on its way: a banner as wide as the list, its picture, its story and its chapters, to see and
   not to start (the front page and the list of adventures, FLAGSHIP in adventures.js) */
.flagship {
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(150deg, #2b2350, #5b21b6 70%, #9d2a84);
  color: #fff;
  box-shadow: 0 14px 34px rgba(43, 35, 80, 0.35);
  text-align: left;
}
.flagship-picture {
  position: relative;
}
.flagship-picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: 20% 60%;
}
.flagship-tag,
.flagship-soon {
  position: absolute;
  top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.flagship-tag {
  left: 14px;
  background: #ffd75c;
  color: #2b2350;
}
.flagship-soon {
  right: 14px;
  background: #2b2350;
  color: #ffd75c;
}
.flagship-body {
  padding: 20px 24px 6px;
}
.flagship .flagship-body h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
}
.flagship .flagship-body p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}
.flagship .flagship-body .flagship-facts {
  color: #ffd75c;
  font-weight: 900;
}
.flagship-chapters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 8px 24px 24px;
  list-style: none;
}
.flagship-chapters li {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.flagship-chapters img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.flagship-chapters span {
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* beside the flagship on the front page, the pond: its picture and its words side by side */
.landing-adventure.wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.landing-adventure.wide img {
  height: 100%;
}
@media (max-width: 760px) {
  .flagship-picture img {
    aspect-ratio: 16 / 9;
  }
  .flagship-body {
    padding: 16px 18px 4px;
  }
  .flagship .flagship-body h3 {
    font-size: 27px;
  }
  .flagship .flagship-body p {
    font-size: 16px;
  }
  .flagship-chapters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px 18px 18px;
  }
  .landing-adventure.wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .flagship-tag,
  .flagship-soon {
    top: 10px;
    padding: 5px 10px;
    font-size: 11px;
  }
  .flagship-tag {
    left: 10px;
  }
  .flagship-soon {
    right: 10px;
  }
}
#pick-adventure .template-card.wide {
  grid-column: 1 / -1;
}