* { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --pad: 6px;
  --gap: 4px;
  --mastH: 46px;
  --fcH: 46px;
  --statusH: 52px;
  --guideH: 70px;
  --rowH: 50px;
  --rowGap: 3px;
  --actH: 52px;
  --trayPad: 14px;
  --rail: 20px;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --wash: color-mix(in srgb, var(--ak-bg) 81%, transparent);
  --reservedV: calc(var(--mastH) + var(--fcH) + var(--statusH) + var(--guideH) + 5 * var(--rowH) + 4 * var(--rowGap) + var(--trayPad) + var(--actH) + 6 * var(--gap) + 2 * var(--pad) + var(--sat) + var(--sab));
  --bagW: min(100dvw - 2 * var(--pad) - var(--sal) - var(--sar), (100dvh - var(--reservedV)) * 1.369, 560px);
}

html, body { height: 100%; margin: 0; }

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, linear-gradient(var(--wash), var(--wash)), url("art/bench-top.jpg"));
  background-size: cover;
  background-position: center;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: 15px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; touch-action: manipulation; }

/* ---- the table ---- */
#app {
  position: relative;
  width: min(100dvw, 560px);
  height: 100dvh;
  margin: 0 auto;
  padding: max(var(--pad), var(--sat)) max(var(--pad), var(--sar)) max(var(--pad), var(--sab)) max(var(--pad), var(--sal));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--mastH) var(--fcH) auto var(--statusH) var(--guideH) minmax(0, 1fr) var(--actH);
  grid-template-areas: "mast" "forecast" "board" "status" "guide" "tray" "actions";
  row-gap: var(--gap);
  align-content: center;
  touch-action: manipulation;
}
.col-main, .col-side { display: contents; }
.boot-error { grid-area: board; margin: 0; padding: 12px; background: var(--ak-bg); }

.mast { grid-area: mast; display: flex; align-items: center; justify-content: center; padding-inline: 56px; min-width: 0; }
.mast-logo { height: 100%; max-height: 46px; width: auto; max-width: 100%; display: block; }

/* mute: the one small control, top left; start.js owns the top right */
.mute {
  position: fixed;
  z-index: 30;
  top: max(12px, var(--sat));
  left: max(12px, var(--sal));
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  border: 2px solid var(--ak-outline);
  border-radius: 2px;
  cursor: pointer;
}
.mute svg { width: 26px; height: 26px; }
.mute:active { background: var(--ak-btn-active); }
.mute:focus-visible, .btn:focus-visible, .cell:focus-visible, .block:focus-visible {
  outline: 3px solid var(--ak-accent-2);
  outline-offset: 2px;
}

/* ---- forecast: three washers, only a hint ---- */
.forecast {
  grid-area: forecast;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  background: var(--ak-bg);
  border-block: 1.5px solid var(--ak-ink);
  min-width: 0;
}
.fc-label {
  flex: none;
  width: 52px;
  font-family: var(--ak-font-display);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.fc { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: center; gap: 4px; padding-inline: 2px; }
.washer {
  flex: none;
  height: 44px;
  width: 44px;
}
.washer svg, .spin svg { display: block; width: 100%; height: 100%; }
.fc-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.fc-t b { font-size: 12.5px; font-weight: 700; }
.fc-t em { font-style: normal; font-family: var(--ak-font-display); font-size: 18px; }
.fc.is-real { box-shadow: inset 0 -4px 0 var(--ak-ink); }
.fc.is-real em { font-size: 12.5px; line-height: 1.1; white-space: nowrap; }

/* ---- the bag: the board, flat from above ---- */
.board { grid-area: board; justify-self: center; width: var(--bagW); aspect-ratio: 356 / 260; position: relative; }
.bag { position: absolute; inset: 0; overflow: hidden; background: var(--ak-surface); }
.bag-art {
  position: absolute;
  left: calc(-14 / 356 * 100%);
  top: calc(-22 / 260 * 100%);
  width: calc(384 / 356 * 100%);
  height: auto;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
.bag-blocks { position: absolute; inset: 0; }
.bag.is-over { outline: 3px dashed var(--ak-ink); outline-offset: -3px; }

.block {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ak-surface) 78%, var(--ak-bg));
  cursor: pointer;
  overflow: hidden;
}
.b-art { position: absolute; inset: 0; display: flex; }
.b-art .art {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0.8px 0 0 color-mix(in srgb, var(--ak-ink-muted) 75%, transparent))
    drop-shadow(-0.8px 0 0 color-mix(in srgb, var(--ak-ink-muted) 75%, transparent))
    drop-shadow(0 0.8px 0 color-mix(in srgb, var(--ak-ink-muted) 75%, transparent))
    drop-shadow(0 -0.8px 0 color-mix(in srgb, var(--ak-ink-muted) 75%, transparent));
}
.b-over { display: none; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; stroke: var(--ak-ink); stroke-width: 3.2; stroke-linecap: round; }
.block.over { background: var(--ak-accent-2); outline: 2px dashed var(--ak-ink); outline-offset: -3px; }
.block.over .b-over { display: block; }
.face {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12.5px;
  line-height: 1;
  background: var(--vbg);
  color: var(--vfg);
  border-radius: inherit;
}
.face b { font-weight: 700; }
.f-art { display: flex; width: 26px; height: 26px; }
.f-art .art { width: 26px; height: 26px; }
.f-v { display: flex; align-items: center; gap: 2px; }
.f-v .mark { width: 13px; height: 13px; }
.block.flipped .face { display: flex; }
.block.flipped .b-art, .block.flipped .b-over { display: none; }
.block:disabled { cursor: default; }

[data-verdict="glad"] { --vbg: var(--ak-btn-fill); --vfg: var(--ak-btn-ink); }
[data-verdict="fine"] { --vbg: var(--ak-bg); --vfg: var(--ak-ink); }
[data-verdict="sorry"] { --vbg: var(--ak-accent-2); --vfg: var(--ak-ink); }
[data-verdict="skip"] { --vbg: transparent; --vfg: var(--ak-ink-muted); }
.mark { width: 18px; height: 18px; flex: none; }
.m-fill { fill: var(--vfg); }
.m-line { stroke: var(--vbg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-ring { fill: none; stroke: var(--vfg); stroke-width: 2.2; }
[data-verdict="fine"] .m-line { stroke: var(--vfg); }
.m-dash { fill: none; stroke: var(--vfg); stroke-width: 2; stroke-dasharray: 3 2; }

.spin {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 28%;
  aspect-ratio: 1;
  translate: -50% -50%;
}

/* ---- the strap, the paper tag and the zip, drawn over the bag ---- */
.bag-over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bag-over .zip-track { fill: none; stroke: var(--ak-ink-muted); stroke-width: 1.6; stroke-linecap: round; }
.bag-over .zip-teeth { fill: none; stroke: var(--ak-ink); stroke-width: 6; stroke-dasharray: 2.6 2.6; }
.bag-over .zip-clip { width: 0; }
.bag-over .zip-pull { transform: translateX(34px); }
.bag-over .zip-pull rect { fill: var(--ak-accent); stroke: var(--ak-ink); stroke-width: 1.6; }
.bag-over .zip-pull path { fill: none; stroke: var(--ak-ink); stroke-width: 1.6; }
.bag.is-zipped .zip-clip { width: 288px; }
.bag.is-zipped .zip-pull { transform: translateX(322px); }
.bag-over .handle rect { fill: color-mix(in srgb, var(--ak-surface) 85%, var(--ak-bg)); stroke: var(--ak-ink); stroke-width: 1.8; }
.bag-over .stitch { fill: none; stroke: var(--ak-ink-muted); stroke-width: 1.4; stroke-dasharray: 4 3; stroke-linecap: round; }
.bag-over .string { fill: none; stroke: var(--ak-ink-muted); stroke-width: 1.4; stroke-linecap: round; }
.bag-over .tag-paper { fill: var(--ak-bg); stroke: var(--ak-ink); stroke-width: 1.6; stroke-linejoin: round; }
.bag-over .tag-hole { fill: var(--ak-surface); stroke: var(--ak-ink); stroke-width: 1.4; }
.bag-over text { fill: var(--ak-ink-muted); font-family: var(--ak-font-body); font-weight: 700; letter-spacing: 0.02em; }

/* ---- status: the cost, in words, and the last thing that happened ---- */
.status {
  grid-area: status;
  min-width: 0;
  padding: 4px 10px;
  background: var(--ak-bg);
  border-block: 1.5px solid var(--ak-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.st-count { margin: 0; font-family: var(--ak-font-display); font-size: 16px; line-height: 1.15; letter-spacing: 0.02em; }
.st-msg {
  margin: 1px 0 0;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ak-ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.status[data-kind="error"] { background: var(--ak-btn-fill); color: var(--ak-btn-ink); border-color: var(--ak-ink); }
.status[data-kind="error"] .st-msg { color: var(--ak-btn-ink); font-weight: 700; }

/* ---- guide / note card ---- */
.guide { grid-area: guide; min-width: 0; min-height: var(--guideH); display: flex; }
/* upright, the goal card's room goes back to the tray once play starts; sideways the room stays for the ending's verdict */
@media (orientation: portrait) { html.no-guide { --guideH: 0px; } }
.note {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  background: var(--ak-bg);
  border: 1.5px dashed var(--ak-ink-muted);
}
.note-art { width: 56px; height: 56px; flex: none; object-fit: contain; }
.note-text { margin: 0; font-size: 14px; line-height: 1.25; }
.guide.is-guided {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 4px 10px;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}
.g-goal { margin: 0; font-size: 12.5px; line-height: 1.2; color: var(--ak-btn-ink); }
.g-row { display: flex; align-items: center; gap: 8px; }
.g-step {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--ak-accent-2);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 16px;
}
.g-caption { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; }

/* ---- the tray: a steel strip along the edge, cut-outs set in it ---- */
.tray {
  grid-area: tray;
  align-self: stretch;
  max-height: calc(5 * 66px + 4 * var(--rowGap) + var(--trayPad));
  position: relative;
  padding: 4px 4px 4px 16px;
  display: grid;
  grid-template-rows: repeat(5, minmax(var(--rowH), 1fr));
  gap: var(--rowGap);
  background-color: var(--ak-btn-fill);
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ak-bg) 7%, transparent) 0 1px, transparent 1px 4px);
  border-top: 3px solid var(--ak-accent);
  border-bottom: 3px solid var(--ak-accent);
}
.row { position: relative; display: grid; grid-template-columns: var(--rail) repeat(3, minmax(0, 1fr)); gap: 2px; }
.rail {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 2px 2px 1px;
  border: 0;
  border-radius: 0;
  background: var(--ak-bg);
  color: var(--ak-ink);
  text-align: left;
  cursor: pointer;
}
.cell:active { background: var(--ak-surface); }
.art-wrap { position: relative; flex: none; width: 44px; height: 44px; }
.art { display: block; width: 44px; height: 44px; }
.art path, .art rect, .art ellipse, .art circle { stroke: var(--ak-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.art clipPath rect { stroke: none; }
.art .k { fill: var(--ak-btn-fill); }
.art .s { fill: var(--ak-accent); }
.art .g { fill: var(--ak-accent-2); }
.art .c { fill: var(--ak-bg); }
.art .sc { stroke: var(--ak-bg); }
.in-mark { display: none; position: absolute; inset: 5px; align-items: center; justify-content: center; border: 2px dashed currentColor; }
.in-mark svg { width: 20px; height: 20px; }
.meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.name { font-size: 13px; font-weight: 700; line-height: 1.08; overflow-wrap: anywhere; }
.sqs { display: flex; gap: 2px; }
.sqs i { width: 8px; height: 8px; background: var(--ak-ink); }
.state { font-size: 12px; font-weight: 700; line-height: 1; }
.state:empty { display: none; }

.cell[aria-pressed="true"] {
  background-color: var(--ak-accent);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--ak-btn-fill) 55%, transparent) 5px 6px);
  color: var(--ak-btn-ink);
}
.cell[aria-pressed="true"] .art { visibility: hidden; }
.cell[aria-pressed="true"] .in-mark { display: flex; }
.cell[aria-pressed="true"] .sqs { display: none; }
.cell.is-over { background: var(--ak-accent-2); background-image: none; color: var(--ak-ink); }
.cell.is-hinted { box-shadow: inset 0 0 0 3px var(--ak-ink), inset 0 0 0 6px var(--ak-accent-2); }
.cell:disabled { cursor: default; }

.row.is-pointed { outline: 3px solid var(--ak-accent-2); outline-offset: 2px; z-index: 1; }
.row.is-pointed::before, .btn-close.is-pointed::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 22px;
  top: 50%;
  margin-top: -11px;
}
.row.is-pointed::before { left: -14px; background: var(--ak-accent-2); clip-path: polygon(0 0, 100% 50%, 0 100%); }

@media (max-width: 380px) {
  .name { font-size: 12px; letter-spacing: -0.01em; }
  .tray { padding-left: 14px; }
  .row.is-pointed::before { left: -13px; }
}

/* ---- actions ---- */
.actions { grid-area: actions; display: flex; gap: 8px; padding-inline: 16px; min-width: 0; }
.btn {
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--ak-outline);
  border-radius: 2px;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.btn:active { background: var(--ak-btn-active); }
.btn-close { position: relative; flex: 1 1 0; }
.btn-hint { flex: none; width: 96px; background: var(--ak-accent-2); color: var(--ak-ink); }
.btn-hint:active { background: var(--ak-surface); }
.btn-close::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 4px;
  height: 7px;
  background: repeating-linear-gradient(90deg, var(--ak-btn-ink) 0 3px, transparent 3px 6px);
  clip-path: inset(0 100% 0 0);
}
.btn-close.zipping::before { clip-path: inset(0 0 0 0); }
.btn-close.is-pointed { outline: 4px solid var(--ak-ink); outline-offset: 3px; }
.btn-close.is-pointed::after { right: -17px; background: var(--ak-ink); clip-path: polygon(100% 0, 0 50%, 100% 100%); }

/* ---- the ending: the tray is swept aside, a card is left ---- */
.tray.swept { visibility: hidden; }
[data-phase="done"] .guide, [data-phase="done"] .actions { display: none; }
.result {
  grid-column: 1;
  grid-row: guide-start / actions-end;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 6px;
  background-color: var(--ak-bg);
  background-image: repeating-linear-gradient(0deg, transparent 0 21px, color-mix(in srgb, var(--ak-accent) 14%, transparent) 21px 22px);
  border: 1.5px solid var(--ak-ink);
}
.tape {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 84px;
  height: 16px;
  translate: -50% 0;
  rotate: -2deg;
  background: var(--ak-accent-2);
  border: 1px solid var(--ak-ink);
}
.r-head { flex: none; }
.r-title { margin: 0 0 2px; font-family: var(--ak-font-display); font-weight: var(--ak-title-weight); font-size: 24px; line-height: 1.05; }
.r-says { margin: 0 0 6px; font-size: 14px; line-height: 1.22; }
.r-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.r-note { margin: 0 0 3px; padding: 3px 8px; font-size: 13.5px; line-height: 1.2; background: var(--ak-surface); border-left: 4px solid var(--ak-accent); }
.r-rows { list-style: none; margin: 0; padding: 0; }
.r-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 3px 0; border-top: 1px dashed var(--ak-ink-muted); }
.r-tag .mark { width: 14px; height: 14px; }
.r-tag {
  align-self: start;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 2px;
  background: var(--vbg);
  color: var(--vfg);
  border: 1.5px solid var(--ak-ink);
  font-size: 12.5px;
  line-height: 1;
}
[data-verdict="skip"] .r-tag { border-style: dashed; border-color: var(--ak-ink-muted); }
.r-body { min-width: 0; }
.r-line { display: block; font-size: 13.5px; line-height: 1.18; }
.r-line b { font-size: 15px; }
.r-line i { font-style: normal; font-size: 13px; color: var(--ak-ink-muted); }
.r-left { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.15; color: var(--ak-ink-muted); }
.r-actions { flex: none; display: flex; gap: 8px; padding-top: 6px; }
.r-actions .btn { flex: 1 1 0; min-height: 48px; font-size: 17px; padding-inline: 6px; }
.btn-settings { background: var(--ak-bg); color: var(--ak-ink); }
.btn-settings:active { background: var(--ak-surface); }

.end-head { display: none; }

/* ---- sideways: board one side, tray and status the other ---- */
@media (orientation: landscape) {
  :root {
    --mastH: 44px;
    --rowH: 48px;
    --rail: 20px;
    --reservedL: calc(var(--statusH) + var(--guideH) + 2 * var(--gap) + 2 * var(--pad) + var(--sat) + var(--sab));
    --bagW: min((100dvh - var(--reservedL)) * 1.369, 100dvw - 56px - 400px - var(--sal) - var(--sar), 600px);
  }
  #app {
    width: min(100dvw, 1100px);
    grid-template-columns: 56px var(--bagW) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "rail main side";
    column-gap: var(--gap);
    align-content: stretch;
    align-items: center;
  }
  .col-main {
    grid-area: main;
    display: grid;
    grid-template-rows: auto var(--statusH) auto;
    row-gap: var(--gap);
    min-width: 0;
  }
  .col-side {
    grid-area: side;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: var(--mastH) auto var(--actH);
    row-gap: var(--gap);
    min-width: 0;
    align-content: center;
  }
  .board, .status, .guide, .mast, .forecast, .tray, .actions { grid-area: auto; }
  .board { width: 100%; justify-self: stretch; }
  .mast { grid-row: 1; grid-column: 1; padding-inline: 0 8px; }
  .mast-logo { max-height: 40px; }
  .forecast { grid-row: 1; grid-column: 2; margin-right: 60px; padding-inline: 4px; border-block: 0; background: transparent; gap: 2px; }
  .forecast .fc-label { display: none; }
  .fc { padding-inline: 0; background: var(--ak-bg); }
  .fc-t b { font-size: 12px; }
  .fc-t em { font-size: 17px; }
  .tray { grid-row: 2; grid-column: 1 / -1; align-self: center; grid-template-rows: repeat(5, var(--rowH)); }
  .actions { grid-row: 3; grid-column: 1 / -1; }
  .result { grid-row: 2 / 4; grid-column: 1 / -1; }
  .mute { top: max(12px, var(--sat)); }
  [data-phase="done"] .end-head {
    display: block;
    min-height: var(--guideH);
    padding: 6px 10px;
    background: var(--ak-bg);
    border: 1.5px solid var(--ak-ink);
    overflow: hidden;
  }
  .end-head .r-title { font-size: 22px; margin: 0 0 1px; }
  .end-head .r-says { margin: 0; font-size: 13px; line-height: 1.2; }
  .result .r-head { display: none; }
  .result { padding-top: 14px; }
}

/* a wide desktop keeps the same layout, centred */
@media (orientation: landscape) and (min-width: 1000px) {
  #app { column-gap: 14px; }
}

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .block { transition: left 0.22s ease, top 0.22s ease, width 0.22s ease; }
  .block .b-art { animation: pencil 0.55s ease-out 0.1s both; }
  .block.over .b-art, .block.flipped .b-art { animation: none; }
  .block.flipped .face { animation: unflip 0.2s ease-out; }
  .spin.spinning { animation: washer 1.4s cubic-bezier(0.2, 0.7, 0.25, 1) both; }
  .bag.shake { animation: nudge 0.3s ease-in-out; }
  .bag.zipping .zip-clip { animation: zipclip 0.7s ease-in-out both; }
  .bag.zipping .zip-pull { animation: zippull 0.7s ease-in-out both; }
  .btn-close.zipping::before { animation: zipbtn 0.7s ease-in-out both; }
  .tray.swept { visibility: visible; animation: sweep 0.3s ease-in forwards; }
  .result.land { animation: settle 0.3s ease-out both; }
  .row.is-pointed { animation: ring 1.3s ease-in-out infinite; }
  .row.is-pointed::before { animation: nudgeR 1.3s ease-in-out infinite; }
  .btn-close.is-pointed { animation: ring 1.3s ease-in-out infinite; }
  .btn-close.is-pointed::after { animation: nudgeL 1.3s ease-in-out infinite; }
  .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }
}
@keyframes pencil { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes zipclip { from { width: 0; } to { width: 288px; } }
@keyframes zippull { from { transform: translateX(34px); } to { transform: translateX(322px); } }
@keyframes zipbtn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes unflip { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes washer {
  0% { transform: rotate(0deg) scale(0.4); }
  70% { transform: rotate(900deg) scale(1.12); }
  100% { transform: rotate(1080deg) scale(1); }
}
@keyframes nudge { 0%, 100% { translate: 0 0; } 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
@keyframes sweep { to { transform: translateX(115%); visibility: hidden; } }
@keyframes settle { from { translate: 0 18px; } to { translate: 0 0; } }
@keyframes ring { 0%, 100% { outline-offset: 2px; } 50% { outline-offset: 5px; } }
@keyframes nudgeR { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
@keyframes nudgeL { 0%, 100% { translate: 0 0; } 50% { translate: -4px 0; } }

@media (hover: hover) {
  .cell:hover:not(:disabled) { outline: 2px solid var(--ak-accent-2); outline-offset: -2px; }
  .btn:hover { background: var(--ak-btn-hover); }
  .btn-hint:hover { background: var(--ak-accent-2); filter: brightness(1.06); }
  .btn-settings:hover { background: var(--ak-surface); }
}

/* ---- the start screen: stamped ink marks instead of system emoji, and a button that never sits on words ---- */
html #activity-start .ak-badge { font-size: 0; line-height: 0; }
html #activity-start .ak-badge::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--ak-ink);
  -webkit-mask: var(--stamp) center / contain no-repeat;
  mask: var(--stamp) center / contain no-repeat;
}
html #activity-start .ak-goal .ak-badge {
  --stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5L19.5 4L20.6 19L5 20.6Z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M8 12.5L11 16L17 8' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html #activity-start .ak-controls-block .ak-badge {
  --stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5L6.4 19.5L10.6 15.6L13.4 21L16.2 19.7L13.5 14.4L19 14Z' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html #activity-start .ak-tip .ak-badge {
  --stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.8 12.2L9 5H20.5V19.2H9Z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3Ccircle cx='9.2' cy='12.1' r='1.8' fill='black'/%3E%3Cpath d='M13.5 9.5H17.5M13.5 12.2H17.5M13.5 15H16' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
html #activity-start { padding-bottom: calc(var(--ak-space-6) + 96px); scroll-padding-bottom: 120px; }
html #activity-start .ak-go {
  z-index: 2;
  box-shadow: 0 0 0 100vmax var(--ak-bg);
  clip-path: inset(-14px -100vmax -20px -100vmax);
}