/* Billgrid: a torn calendar page taped to a desk. Zine cut-and-paste, ink-wash kit. */

@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}

:root {
  --st: env(safe-area-inset-top, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --edge: 12px;
  --tape: color-mix(in srgb, var(--ak-bg) 70%, var(--ak-ink-muted) 30%);
  --wash: color-mix(in srgb, var(--ak-surface) 66%, var(--ak-ink-muted) 34%);
  --wash-soft: color-mix(in srgb, var(--ak-surface) 84%, var(--ak-ink-muted) 16%);
  --cut-line: color-mix(in srgb, var(--ak-ink) 70%, transparent);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --torn: polygon(0% 4%, 7% 0%, 15% 3%, 24% 0%, 33% 2%, 44% 0%, 53% 3%, 63% 0%, 72% 2%, 82% 0%, 91% 3%, 100% 0%, 98% 12%, 100% 25%, 98% 38%, 100% 51%, 98% 64%, 100% 77%, 98% 89%, 100% 100%, 90% 97%, 80% 100%, 70% 98%, 59% 100%, 48% 97%, 38% 100%, 27% 98%, 17% 100%, 8% 97%, 0% 100%, 2% 88%, 0% 75%, 2% 62%, 0% 49%, 2% 36%, 0% 23%, 2% 11%);
  --torn-b: polygon(2% 0%, 12% 3%, 23% 0%, 35% 2%, 46% 0%, 58% 3%, 69% 1%, 80% 3%, 91% 0%, 99% 2%, 100% 16%, 97% 30%, 100% 44%, 98% 58%, 100% 72%, 97% 86%, 99% 99%, 88% 97%, 76% 100%, 64% 97%, 52% 100%, 40% 98%, 28% 100%, 16% 97%, 4% 100%, 0% 86%, 3% 72%, 0% 58%, 2% 44%, 0% 30%, 3% 16%);
  --torn-tile: polygon(3% 2%, 30% 0%, 55% 4%, 80% 0%, 98% 3%, 100% 30%, 96% 55%, 100% 78%, 97% 98%, 70% 100%, 45% 96%, 20% 100%, 1% 97%, 4% 70%, 0% 45%, 3% 22%);
}

* { box-sizing: border-box; }

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
}

img { user-select: none; -webkit-user-drag: none; }

/* ---------- Paper helpers: a torn sheet behind the content, tape on top ---------- */

.paperish, .hint, .wk, .note, .tag, .reason-banner, .result, .act {
  position: relative;
  isolation: isolate;
}

.paperish::after, .hint::after, .wk::after, .note::after, .tag::after, .reason-banner::after, .result::after, .act::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper, var(--ak-surface));
  clip-path: var(--tear, var(--torn));
  filter: drop-shadow(1px 2px 0 var(--cut-line));
}

/* ---------- Play screen ---------- */

.play {
  --bw: min(calc(100vw * 1.08), calc((100vh - 365px - var(--st) - var(--sb)) * 1.016), 600px);
  --bh: calc(var(--bw) * 378 / 384);
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 6px;
  padding: max(var(--edge), var(--st)) calc(var(--edge) + var(--sr)) calc(8px + var(--sb)) calc(var(--edge) + var(--sl));
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

@supports (height: 100dvh) {
  .play {
    --bw: min(calc(100dvw * 1.08), calc((100dvh - 365px - var(--st) - var(--sb)) * 1.016), 600px);
  }
}

.play[hidden] { display: none; }

/* Mast: mute top-left, logo, hint. The top-right corner belongs to the ? button. */

.mast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  min-height: 48px;
  padding: 0 60px 0 60px;
}

.mute {
  position: fixed;
  top: max(var(--edge), var(--st));
  left: max(var(--edge), var(--sl));
  z-index: 35;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  cursor: pointer;
  transform: rotate(-2deg);
}

.mute svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mute .spk { fill: currentColor; }
.mute .slash { display: none; }
.mute[aria-pressed='true'] .wave { display: none; }
.mute[aria-pressed='true'] .slash { display: inline; }

.logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: 46vw;
  margin: 0 auto 0 0;
  transform: rotate(-1.5deg);
}

.hint {
  --paper: var(--ak-choice-bg);
  --tear: var(--torn-b);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  min-width: 48px;
  padding: 0 16px 0 12px;
  border: 0;
  background: none;
  color: var(--ak-choice-ink);
  font-family: var(--ak-font-display);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transform: rotate(1.5deg);
}

.hint[hidden] { display: none; }

.hint svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mute:focus-visible,
.hint:focus-visible,
.act:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 3px;
}

/* ---------- Board ---------- */

.board-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.page {
  position: relative;
  flex: none;
  width: var(--bw);
  height: var(--bh);
  background: url('./art/calendar-board.png') center / 100% 100% no-repeat;
  transform: rotate(-1.2deg);
}

/* The ink grid inside the picture: 7 columns, 5 week rows. */
.grid {
  position: absolute;
  left: 6.51%;
  top: 18.52%;
  width: 86.85%;
  height: 74.34%;
}

.day {
  position: absolute;
  left: calc(var(--c) * 100% / 7);
  top: calc(var(--r) * 20%);
  width: calc(100% / 7);
  height: 20%;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  filter: drop-shadow(1px 1.5px 0 var(--cut-line));
  outline: none;
}

.day .paper {
  position: absolute;
  inset: 2.5px;
  background: var(--ak-surface);
  clip-path: var(--torn-tile);
  transition: background-color 300ms ease;
}

.day .date {
  position: absolute;
  top: 5px;
  left: 6px;
  font-family: var(--ak-font-display);
  font-size: clamp(10px, calc(var(--bw) * 0.027), 15px);
  font-weight: 500;
  line-height: 1;
  color: var(--ak-ink-muted);
}

.day .bill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  text-align: center;
  font-family: var(--ak-font-display);
  font-size: clamp(14px, calc(var(--bw) * 0.044), 25px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ak-ink);
}

.day .mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 106%;
  max-width: none;
  aspect-ratio: 1;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--mrot, 0deg));
  pointer-events: none;
}

.day.stamped .date,
.day.stamped .bill { visibility: hidden; }

.day.open { cursor: pointer; }

/* Legal days light up on your turn: a red rim inside each open square. */
.play.is-you .day.open .paper {
  box-shadow: inset 0 0 0 2.5px var(--ak-accent);
}

.day.closed .paper { background: var(--wash); }

/* On your turn, a day that would leave its week one day from done gets a dashed grey edge instead of red. */
.day::after {
  content: '';
  position: absolute;
  inset: 3px;
  display: none;
  border: 2.5px dashed var(--ak-ink-muted);
  pointer-events: none;
}

.play.is-you .day.open.risky::after { display: block; }
.play.is-you .day.open.risky .paper { box-shadow: none; }

.day:focus-visible {
  z-index: 3;
  outline: 3px solid var(--ak-focus);
  outline-offset: 0;
}

/* Kuro's last day: a solid ink frame that stays until you move. Dashes mean only one thing. */
.day.just::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: 2;
  border: 4px solid var(--ak-ink);
  pointer-events: none;
}

/* ...with an ink tab naming who stamped it. Stamped days never show the dashed edge, so ::after is free. */
.day.just::after {
  content: 'Kuro';
  display: block;
  inset: auto;
  left: -3px;
  top: -9px;
  z-index: 3;
  padding: 1px 4px 2px;
  border: 0;
  background: var(--ak-ink);
  color: var(--ak-surface);
  font-family: var(--ak-font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* A dashed day tapped once: held in red until you tap it again or pick another. */
.play.is-you .day.open.armed::after {
  border-color: var(--ak-accent);
  border-width: 3.5px;
}

.play.is-you .day.open.armed .paper { background: color-mix(in srgb, var(--ak-accent) 16%, var(--ak-surface)); }

.day.bad::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 2;
  border: 3px solid var(--ak-accent);
  pointer-events: none;
}

/* Closing tape and the slip that tears off */

.row-tape {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.row-tape::before {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 32%;
  height: 36%;
  background: var(--tape);
  clip-path: var(--torn-b);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.fly-slip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 25;
  pointer-events: none;
  transform-origin: 0 0;
}

.fly-slip > img {
  display: block;
  width: 100%;
  height: 100%;
}

.fly-slip i {
  position: absolute;
  left: 10%;
  width: 22%;
  top: 10%;
  bottom: 10%;
  display: grid;
  place-items: center;
  background: var(--ak-surface);
  clip-path: var(--torn-tile);
}

.fly-slip i img {
  position: absolute;
  left: 50%;
  top: 8%;
  width: auto;
  height: 84%;
  aspect-ratio: 1;
  object-fit: contain;
  transform: translateX(-50%);
}

.fly-slip span {
  position: absolute;
  left: 33%;
  right: 10%;
  top: 26%;
  bottom: 26%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ak-surface);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ak-ink);
}

/* Teaching pointer: a pulsing ring around the day and a brushed arrow above it. */

.pointer {
  position: absolute;
  z-index: 5;
  left: calc(var(--c) * 100% / 7);
  top: calc(var(--r) * 20%);
  width: calc(100% / 7);
  height: 20%;
  pointer-events: none;
}

.pointer[hidden] { display: none; }

.pointer-ring {
  position: absolute;
  inset: -2px;
  border: 3px solid var(--ak-accent);
  box-shadow: 0 0 0 2px var(--ak-ink);
}

.pointer-arrow {
  position: absolute;
  left: calc(100% - 6px);
  bottom: calc(100% - 6px);
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0 var(--ak-surface)) drop-shadow(1.5px 1.5px 0 var(--ak-surface));
}

/* ---------- Ledger: one cut tag per week ---------- */

.ledger {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wk {
  --tear: var(--torn-tile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 5px 2px 6px;
  text-align: center;
  line-height: 1.05;
  transform: rotate(var(--wrot, 0deg)) translateY(var(--wy, 0px));
}

.wk:nth-child(1) { --wrot: -2deg; --wy: 1px; }
.wk:nth-child(2) { --wrot: 1.5deg; --wy: -2px; }
.wk:nth-child(3) { --wrot: -1deg; --wy: 2px; }
.wk:nth-child(4) { --wrot: 2deg; --wy: 0px; }
.wk:nth-child(5) { --wrot: -1.5deg; --wy: -1px; }

.wk-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.wk-total {
  margin-top: 2px;
  font-family: var(--ak-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ak-ink);
}

.wk-open {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ak-ink-muted);
}

.wk.two .wk-open {
  color: var(--ak-ink);
  border-bottom: 2px solid var(--ak-accent);
}

.wk.last .wk-open {
  color: var(--ak-ink);
  border-bottom: 3px solid var(--ak-accent);
}

.wk.closed { --paper: var(--ak-bg); }

.wk-mark {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 3px;
}

/* ---------- Desk: the note and the two total tags ---------- */

.desk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}

.note {
  --tear: var(--torn);
  min-height: 64px;
  padding: 12px 16px 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  transform: rotate(0.6deg);
}

.note::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -7px;
  left: 14px;
  width: 54px;
  height: 16px;
  background: var(--tape);
  clip-path: var(--torn-b);
  transform: rotate(-6deg);
}

.guide,
.say {
  margin: 0;
  color: var(--ak-ink);
  line-height: 1.32;
}

.guide {
  font-size: 18px;
  font-weight: 700;
}

.guide[hidden] { display: none; }

.say {
  font-size: 17px;
  font-weight: 500;
}

.say:empty { display: none; }

.say.is-wrong {
  font-weight: 700;
  padding-left: 10px;
  border-left: 4px solid var(--ak-accent);
}

.tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 10px;
}

.tag {
  --paper: var(--ak-bg);
  --tear: var(--torn-b);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-height: 66px;
  padding: 14px 12px 8px 10px;
  transition: transform 260ms var(--pop);
}

.tag-rival { transform: rotate(1.2deg) translateY(3px); }
.tag-you { transform: rotate(-1deg); }

.tag.on { --paper: var(--ak-surface); }
.tag-you.on { transform: rotate(-2deg) translateY(-5px); }
.tag-rival.on { transform: rotate(2deg) translateY(-5px); }

.tag-mark {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.tag-name {
  display: flex;
  gap: 2px;
  font-family: var(--ak-font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

/* Cut-out letters: each on its own scrap. */
.cut {
  display: inline-block;
  padding: 2px 3px 1px;
  border: 1px solid var(--ak-ink);
  background: var(--ak-surface);
  color: var(--ak-ink);
  transform: rotate(var(--lr, 0deg)) translateY(var(--ly, 0px));
}

.cut:nth-child(2n) { background: var(--ak-bg); --lr: 4deg; --ly: 1px; }
.cut:nth-child(3n) { --lr: -5deg; --ly: -1px; }
.cut:nth-child(3n + 1) { --lr: -2deg; }

.tag-total {
  font-family: var(--ak-font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ak-ink);
}

/* Whose turn: a big heading at the top of the note, with that player's mark. */

.turn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px;
  font-family: var(--ak-font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ak-ink);
}

.turn-mark {
  flex: none;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.turn-text {
  position: relative;
}

.turn-text::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -6px;
  bottom: -5px;
  height: 5px;
  background: var(--ak-accent);
  clip-path: var(--torn-b);
}

.play.is-rival .turn-text::after { background: var(--ak-ink); }

.turn-dots {
  display: none;
  align-items: flex-end;
  gap: 4px;
  height: 18px;
}

.turn-dots i {
  width: 5px;
  height: 5px;
  background: var(--ak-ink);
}

.play.is-rival .turn-dots { display: inline-flex; }

/* Whose turn, on the board itself: red for you, ink for Kuro, with the days stamped so far. */
.board-turn {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: -1%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 14px 3px 6px;
  background: var(--ak-accent);
  color: var(--ak-btn-ink);
  clip-path: var(--torn-b);
  font-size: clamp(11px, calc(var(--bw) * 0.031), 15px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transform: translateX(-50%) rotate(0.8deg);
  pointer-events: none;
}

.board-turn img {
  width: 1.7em;
  height: 1.7em;
  padding: 2px;
  background: var(--ak-surface);
  object-fit: contain;
}

.board-turn b {
  font-family: var(--ak-font-display);
  font-size: 1.2em;
}

.board-turn span { font-weight: 500; opacity: 0.92; }
.play.is-rival .board-turn { background: var(--ak-ink); }
.play.is-over .board-turn { display: none; }

/* Your record on this difficulty, kept between visits: the win to beat and the run of wins. */
.turn-record {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  font-family: var(--ak-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
  color: var(--ak-ink-muted);
}

.turn-record[hidden] { display: none; }
.turn-record b { color: var(--ak-ink); }
.play.is-over .turn { display: none; }

.play.is-you .note { border-left: 6px solid var(--ak-accent); }
.play.is-rival .note { border-left: 6px solid var(--ak-ink); }

/* The rule, said once and kept in view. */

.rule {
  margin: 0;
  color: var(--ak-ink);
  font-weight: 700;
  line-height: 1.3;
}

.rule-board {
  position: absolute;
  z-index: 1;
  left: 6.3%;
  top: 3.6%;
  width: 87.3%;
  height: 14.3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 6px;
  background: var(--ak-surface);
  clip-path: var(--torn-b);
  font-size: clamp(11px, calc(var(--bw) * 0.03), 16px);
  line-height: 1.12;
  white-space: nowrap;
  transform: rotate(-0.6deg);
}

.rule-board .key { font-weight: 500; }

/* The key: a little square drawn the way an open day is drawn on your turn. */
.key { display: inline-flex; align-items: center; gap: 4px; }

.sw {
  flex: none;
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  background: var(--ak-surface);
}

.sw-safe { box-shadow: inset 0 0 0 2.5px var(--ak-accent); }
.sw-risky { border: 2px dashed var(--ak-ink-muted); }

.rule-desk { display: none; }
.rule-desk p { margin: 0; }
.rule-desk .key { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-weight: 500; }
.rule-desk .key .sw { margin-top: 0.15em; }

/* A week one day from done gets a solid red outline around its whole row. */

.row-band {
  position: absolute;
  z-index: 4;
  display: none;
  outline: 3px solid var(--ak-accent);
  outline-offset: 0;
  pointer-events: none;
}

.row-band.on { display: block; }

/* A tiny five-line calendar on each week tag, its own row in ink. */

.wk-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wk-rows {
  display: inline-grid;
  gap: 1px;
  width: 12px;
}

.wk-rows i {
  display: block;
  height: 2px;
  background: color-mix(in srgb, var(--ak-ink) 22%, transparent);
}

.wk-rows i.me {
  height: 3px;
  background: var(--ak-ink);
}

/* ---------- Landscape: board left and big, controls right ---------- */

@media (orientation: landscape) {
  .play {
    --bw: min(calc((100vh - var(--st) - var(--sb)) * 1.16), calc(100vw - var(--sl) - var(--sr) - 350px), 640px);
    display: grid;
    grid-template-columns: auto minmax(230px, 380px);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      'board mast'
      'board desk';
    justify-content: center;
    align-content: stretch;
    column-gap: 10px;
    row-gap: 10px;
    padding-top: max(var(--edge), var(--st));
    padding-bottom: max(8px, var(--sb));
  }

  @supports (height: 100dvh) {
    .play {
      --bw: min(calc((100dvh - var(--st) - var(--sb)) * 1.16), calc(100dvw - var(--sl) - var(--sr) - 350px), 640px);
    }
  }

  .mast {
    grid-area: mast;
    padding: 0 60px 0 0;
    max-width: none;
  }

  .logo { max-width: 140px; height: 44px; }

  /* The page may run off the top and bottom edge; the grid of days stays whole and centred. */
  .board-zone {
    grid-area: board;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: 100%;
    min-height: 0;
    gap: 0;
  }

  .page,
  .ledger { translate: 0 calc(var(--bh) * -0.057); }

  .rule-board { display: none; }
  .rule-desk {
    display: block;
    font-size: 15px;
    padding: 0 4px;
  }

  .rule-desk .key { font-size: 14px; }

  .day .date { font-size: clamp(12px, calc(var(--bw) * 0.029), 16px); }
  .day .bill { font-size: clamp(17px, calc(var(--bw) * 0.047), 27px); }

  .ledger {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: none;
    width: 86px;
    height: var(--bh);
    margin-left: calc(var(--bw) * -0.045);
    gap: 4px;
    padding: calc(var(--bh) * 0.188) 0 calc(var(--bh) * 0.075);
  }

  .wk { flex: 1 1 0; min-height: 0; padding: 2px; line-height: 1; }
  .wk:nth-child(n) { --wy: 0px; }
  .wk-rows { display: none; }
  /* Each tag is one row tall, so its words scale with the page. */
  .wk-label { font-size: clamp(10px, calc(var(--bh) * 0.028), 12px); }
  .wk-total { margin-top: 1px; font-size: clamp(15px, calc(var(--bh) * 0.046), 20px); }
  .wk-open { margin-top: 2px; font-size: clamp(10px, calc(var(--bh) * 0.03), 13px); }
  .wk-mark { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }

  .desk {
    grid-area: desk;
    align-self: start;
    max-width: 380px;
  }

  .say { font-size: 18px; }

  .tags { padding-top: 4px; }
  .tag { min-height: 58px; }
  .tag-total { font-size: 24px; }

}

/* Phones held sideways: the side panel tightens, and scrolls rather than cut any words off.
   The board's turn ribbon would sit below the screen edge here; the panel's turn heading says it instead. */
@media (orientation: landscape) and (max-height: 520px) {
  .play { row-gap: 4px; padding-top: max(6px, var(--st)); }
  .mast { min-height: 44px; }
  .logo { height: 32px; max-width: 110px; }
  .hint { min-height: 44px; font-size: 15px; }
  .desk {
    align-self: stretch;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    gap: 6px;
    padding: 8px 12px 6px 2px;
  }
  .desk > * { flex-shrink: 0; }
  .note { margin-top: 6px; }
  .note::before { display: none; }
  .rule-desk { font-size: 12.5px; line-height: 1.25; }
  .rule-desk > p:first-child { display: none; }
  .rule-desk .key { font-size: 12.5px; margin-top: 2px; }
  .note { min-height: 0; padding: 8px 12px 8px 14px; gap: 4px; }
  .turn { font-size: 18px; gap: 8px; }
  .turn-mark { width: 24px; height: 24px; }
  .guide,
  .say { font-size: 14px; line-height: 1.3; }
  .tags { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 0; gap: 8px; }
  .tag { min-height: 44px; column-gap: 6px; padding: 8px 8px 6px 6px; }
  .tag-mark { width: 24px; height: 24px; }
  .tag-name { font-size: 11px; gap: 1px; }
  .tag-total { font-size: 19px; }
  .board-turn { display: none; }
}

/* ---------- Ending ---------- */

.ending {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: calc(12px + var(--st)) calc(12px + var(--sr)) calc(12px + var(--sb)) calc(12px + var(--sl));
  pointer-events: none;
}

.ending[hidden] { display: none; }

.ending.has-card {
  pointer-events: auto;
  background: color-mix(in srgb, var(--ak-bg) 55%, transparent);
}

.reason-banner {
  --tear: var(--torn);
  grid-area: 1 / 1;
  margin: 0;
  padding: 14px 26px;
  font-family: var(--ak-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ak-ink);
  text-align: center;
  transform: rotate(-2deg);
}

.reason-banner::before,
.result .tape {
  content: '';
  position: absolute;
  z-index: 2;
  width: 64px;
  height: 20px;
  background: var(--tape);
  clip-path: var(--torn-b);
}

.reason-banner::before { top: -9px; left: calc(50% - 32px); transform: rotate(4deg); }

.ending.has-card .reason-banner { display: none; }

.result {
  --tear: var(--torn-b);
  grid-area: 1 / 1;
  width: min(100%, 460px);
  padding: 26px 22px 22px;
  text-align: center;
  transform: rotate(1.5deg);
}

.result[hidden] { display: none; }

.result .tape-l { top: -6px; left: -14px; transform: rotate(-32deg); }
.result .tape-r { top: -6px; right: -14px; transform: rotate(30deg); }

.result-reason {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.result-line {
  margin: 8px 0 16px;
  font-family: var(--ak-font-display);
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ak-ink);
  outline: none;
}

.result-note {
  margin: -8px 0 14px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ak-ink);
}

.result-note:empty { display: none; }

/* Short upright phones: the note's words shrink a step so the totals stay on screen. */
@media (orientation: portrait) and (max-height: 700px) {
  .note { padding-top: 9px; padding-bottom: 9px; gap: 4px; }
  .turn { font-size: 20px; }
  .turn-mark { width: 28px; height: 28px; }
  .guide { font-size: 15px; line-height: 1.25; }
  .say { font-size: 15px; line-height: 1.25; }
  .tag { min-height: 50px; padding-top: 8px; padding-bottom: 6px; }
}

.result-record {
  margin: -6px 0 14px;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ak-ink);
  background: var(--wash-soft);
}

.result-record:empty { display: none; }
.result-record.is-best { box-shadow: inset 4px 0 0 var(--ak-accent); }

.kuro-says {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -6px 0 16px;
  font-family: var(--ak-font-display);
  font-size: 16px;
  line-height: 1.3;
  color: var(--ak-ink);
  text-align: left;
}

.kuro-says img {
  flex: none;
  width: 24px;
  height: 24px;
}

.slips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 20px;
}

.slip { margin: 0; }
.slip:first-child { transform: rotate(-2deg); }
.slip:last-child { transform: rotate(1.5deg) translateY(4px); }

.slip-who {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.slip-paper { position: relative; }

.slip-paper > img:first-child {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 384 / 104;
}

.slip-total {
  position: absolute;
  left: 33%;
  right: 10%;
  top: 22%;
  bottom: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ak-surface);
  font-family: var(--ak-font-display);
  font-size: clamp(16px, 4.6vw, 22px);
  font-weight: 700;
  color: var(--ak-ink);
}

.slip-patch {
  position: absolute;
  left: 10%;
  width: 22%;
  top: 12%;
  bottom: 12%;
  background: var(--ak-surface);
  clip-path: var(--torn-tile);
}

.slip-mark {
  position: absolute;
  left: 1%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  object-fit: contain;
  transform: translateY(-50%) rotate(-6deg);
}

.slip-mark[hidden] { display: none; }

.result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
}

.act {
  min-height: 52px;
  min-width: 140px;
  padding: 0 20px;
  border: 0;
  background: none;
  font-family: var(--ak-font-display);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.act-main {
  --paper: var(--ak-btn-fill);
  --tear: var(--torn-b);
  color: var(--ak-btn-ink);
  transform: rotate(-1.5deg);
}

.act-side {
  --paper: var(--ak-choice-bg);
  --tear: var(--torn);
  color: var(--ak-choice-ink);
  transform: rotate(1deg);
}

.act-side::before {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: 0;
  border: 2px solid var(--ak-ink);
  pointer-events: none;
}

.scraps {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.scrap {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 12px;
  height: 9px;
  clip-path: var(--torn-tile);
}

@media (hover: hover) {
  .play.is-you .day.open:hover .paper { box-shadow: inset 0 0 0 3px var(--ak-ink); }
  .hint:hover { --paper: var(--ak-surface); }
  .mute:hover { background: var(--ak-surface); }
  .act-main:hover { --paper: var(--ak-btn-hover); }
}

.act-main:active { --paper: var(--ak-btn-active); }

/* ---------- Motion, only when the player is fine with it ---------- */

@media (prefers-reduced-motion: no-preference) {
  .day { transition: transform 180ms var(--pop); }
  .play.is-you .day.open:active { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.92); }
  .mute:active,
  .hint:active { transform: scale(0.92); }
  .act:active { transform: scale(0.95) rotate(0deg); }
  .mute,
  .hint,
  .act { transition: transform 140ms var(--pop); }

  .day.hit { animation: hit 360ms var(--pop); }
  .day .mark.thump { animation: thump 340ms var(--out) both; }
  .day .mark.brush {
    -webkit-mask-image: conic-gradient(from 70deg, #000 var(--sweep), transparent 0);
    mask-image: conic-gradient(from 70deg, #000 var(--sweep), transparent 0);
    animation: brush 560ms cubic-bezier(0.45, 0, 0.2, 1) both;
  }
  .day.last .paper { animation: warn 1.6s ease-in-out infinite; }
  .wk.last { animation: wk-warn 1.6s ease-in-out infinite; }
  .day.bad { animation: nope 300ms ease; }
  .tag.nudge { animation: nope 300ms ease; }
  .tag.bump { animation: bump 380ms var(--pop); }
  .turn.cue { animation: slap 380ms var(--pop) both; }
  .turn-mark { animation: sway 3.2s ease-in-out 400ms infinite; }
  .turn-dots i { animation: dots 900ms ease-in-out infinite; }
  .turn-dots i:nth-of-type(2) { animation-delay: 150ms; }
  .turn-dots i:nth-of-type(3) { animation-delay: 300ms; }
  .row-band.on { animation: band 1.4s ease-in-out infinite; }
  .logo { animation: drift 5s ease-in-out infinite; }
  .note::before { animation: flutter 4.5s ease-in-out infinite; }
  .note.fresh { animation: paste 300ms var(--pop); }
  .pointer-ring { animation: ring 1.1s ease-in-out infinite; }
  .pointer-arrow { animation: nudge-down 1.1s ease-in-out infinite; }
  .reason-banner { animation: slap 420ms var(--pop) both; }
  .result.land { animation: land 520ms var(--pop) both; }
  .result.land .tape { animation: tape-on 260ms var(--out) 420ms both; }
  .result.shake { animation: shake 360ms ease; }
  .slip-mark.slam { animation: slam 420ms var(--out) both; }
  .slip-mark.ring-in {
    -webkit-mask-image: conic-gradient(from 70deg, #000 var(--sweep), transparent 0);
    mask-image: conic-gradient(from 70deg, #000 var(--sweep), transparent 0);
    animation: brush 700ms cubic-bezier(0.45, 0, 0.2, 1) both;
  }
}

.splash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}

.splash i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ak-accent);
  animation: splash 420ms var(--out) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}

@keyframes hit {
  0% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
  35% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) + 1.6deg)) scale(0.94); }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}

@keyframes thump {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(1.7); }
  55% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--mrot, 0deg)) scale(0.9); }
  78% { transform: translate(-50%, -50%) rotate(var(--mrot, 0deg)) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--mrot, 0deg)) scale(1); }
}

@keyframes brush {
  from { --sweep: 0deg; }
  to { --sweep: 360deg; }
}

@keyframes splash {
  0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(0.4); opacity: 0; }
}

@keyframes warn {
  0%, 100% { background-color: var(--ak-surface); }
  50% { background-color: var(--wash); }
}

@keyframes wk-warn {
  0%, 100% { transform: rotate(var(--wrot)) translateY(var(--wy)); }
  50% { transform: rotate(calc(var(--wrot) * -1)) translateY(calc(var(--wy) - 2px)); }
}

@keyframes nope {
  0%, 100% { translate: 0 0; }
  25% { translate: -4px 0; }
  60% { translate: 4px 0; }
}

@keyframes slap {
  0% { opacity: 0; scale: 1.5; }
  70% { opacity: 1; scale: 0.94; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bump {
  0% { scale: 1; }
  40% { scale: 1.08 0.94; }
  100% { scale: 1; }
}

@keyframes sway {
  0%, 100% { rotate: 0deg; }
  50% { rotate: -2.5deg; }
}

@keyframes band {
  0%, 100% { outline-offset: 0; }
  50% { outline-offset: 3px; }
}

@keyframes dots {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@keyframes drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}

@keyframes flutter {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 3deg; }
}

@keyframes paste {
  0% { scale: 0.97; }
  100% { scale: 1; }
}

@keyframes ring {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: 1.1; opacity: 0.75; }
}

@keyframes nudge-down {
  0%, 100% { translate: 3px -3px; }
  50% { translate: -1px 1px; }
}

@keyframes land {
  0% { opacity: 0; transform: translateY(-60px) rotate(-7deg) scale(1.06); }
  65% { opacity: 1; transform: translateY(6px) rotate(2.4deg) scale(0.99); }
  100% { opacity: 1; transform: rotate(1.5deg); }
}

@keyframes tape-on {
  from { opacity: 0; scale: 0.2 1; }
  to { opacity: 1; scale: 1 1; }
}

@keyframes shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -5px 2px; }
  45% { translate: 4px -2px; }
  70% { translate: -2px 1px; }
}

@keyframes slam {
  0% { opacity: 0; transform: translateY(-50%) rotate(-24deg) scale(2.6); }
  60% { opacity: 1; transform: translateY(-50%) rotate(-4deg) scale(0.88); }
  100% { opacity: 1; transform: translateY(-50%) rotate(-6deg) scale(1); }
}

/* ---------- Landscape ending: it takes the side panel, so the board and week tags stay in view ---------- */

@media (orientation: landscape) {
  .play.is-ending .desk,
  .play.is-ending .hint { visibility: hidden; }

  .ending {
    position: relative;
    inset: auto;
    z-index: 30;
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    padding: 0;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }

  .ending.has-card { background: none; }

  .reason-banner { font-size: 21px; padding: 12px 18px; }

  .result {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 12px 12px 10px;
    transform: rotate(0.8deg);
  }

  .result .tape-l { top: 2px; left: 2px; transform: rotate(-24deg); }
  .result .tape-r { top: 2px; right: 2px; transform: rotate(22deg); }

  .result-reason { font-size: 11px; }
  .result-line { margin: 0 0 4px; font-size: 20px; }
  .result-note { margin: 0 0 6px; font-size: 14px; line-height: 1.25; }
  .result-record { margin: 0 0 6px; font-size: 14px; line-height: 1.25; }
  .kuro-says { margin: 0 0 8px; font-size: 14px; line-height: 1.25; gap: 6px; }
  .kuro-says img { width: 20px; height: 20px; }
  .slips { gap: 8px; margin-bottom: 6px; }
  .slip-who { font-size: 11px; margin-bottom: 1px; }
  .slip-total { font-size: 17px; }
  .result-actions { flex-wrap: nowrap; gap: 10px; }
  .act {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 4px 8px;
    font-size: 15px;
    line-height: 1.1;
  }
}

/* ---------- First screen, upright: Start here sits under the title, and Play gets room below it ---------- */

@media (orientation: portrait) {
  #activity-start#activity-start.is-instructions .ak-sheet {
    display: flex;
    flex-direction: column;
  }

  #activity-start#activity-start.is-instructions .ak-head { order: -1; }

  #activity-start#activity-start.is-instructions .ak-first {
    order: 0;
    margin-top: var(--ak-space-5);
  }

  #activity-start#activity-start.is-instructions .ak-howto { order: 1; }

  /* The second shadow is a wide sheet of page colour under the sticky button,
     so the text scrolling beneath never peeks out below it. */
  #activity-start#activity-start.is-instructions .ak-go {
    order: 2;
    bottom: calc(28px + var(--sb));
    margin-top: var(--ak-space-6);
    box-shadow: var(--ak-shadow), 0 70px 0 40px var(--ak-bg);
  }
}