/* Crustplea: a comic page in a bake shop. Panels framed in piped mint frosting, cream gutters,
   cherry caption tags, cream word bubbles. Colours and fonts all come from kit.css. */

:root {
  --gutter: clamp(6px, 1.6dvmin, 14px);
  --pipe: 6px;
  --pipe-line: color-mix(in srgb, var(--ak-accent-2) 70%, var(--ak-ink));
  --panel-shape: 24px 12px 28px 10px / 14px 26px 12px 22px;
  --tag-shape: 4px 12px 4px 12px;
  /* Scale of the painted recipe card's ribbon and edges. */
  --k: 0.3;
  --edge: 8px;
  --mast-h: 52px;
}

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

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--ak-ink-muted) 22%, transparent) 0 1.4px, transparent 2px),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--ak-ink-muted) 16%, transparent) 0 1.1px, transparent 1.7px),
    var(--ak-backdrop-layer, none);
  background-size: 31px 29px, 53px 47px, cover, cover;
  background-position: 0 0, 13px 17px, center, center;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
}

button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

/* ---------- the page ---------- */

.play {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding:
    max(var(--edge), env(safe-area-inset-top))
    max(var(--edge), env(safe-area-inset-right))
    max(var(--edge), env(safe-area-inset-bottom))
    max(var(--edge), env(safe-area-inset-left));
  touch-action: manipulation;
}

.page {
  width: min(100%, 540px);
  height: 100%;
  min-height: 0;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: var(--mast-h) minmax(96px, 1fr) auto auto auto;
  grid-template-areas:
    "mast mast"
    "chef counter"
    "talk talk"
    "hand hand"
    "act act";
}

.mast {
  grid-area: mast;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 56px;
}

.logo {
  display: block;
  height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.mute {
  position: fixed;
  z-index: 30;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--ak-ink);
  border-radius: 50%;
  background: var(--ak-surface);
  cursor: pointer;
  touch-action: manipulation;
}

.mute svg {
  width: 26px;
  height: 26px;
}

.mute .horn {
  fill: var(--ak-ink);
}

.mute .wave {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.mute .mute-off,
.mute.is-muted .mute-on {
  display: none;
}

.mute.is-muted .mute-off {
  display: block;
}

.mute:focus-visible,
.btn:focus-visible,
.vote:focus-visible,
.card:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 3px;
}

/* ---------- panels ---------- */

.panel {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  background: var(--ak-surface);
  border: var(--pipe) dotted var(--ak-accent-2);
  border-radius: var(--panel-shape);
  box-shadow: inset 0 0 0 2px var(--pipe-line);
}

/* A soft piped swirl tucked into one corner of each frame. */
.panel::after {
  content: '';
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 26px;
  height: 26px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 22c-5 0-9-4-9-9s4-8 8-8 7 3 7 6-2 5-5 5-4-2-4-4 1-2 2-2' fill='none' stroke='%235CB89A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.panel-chef {
  grid-area: chef;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  padding: 6px 4px 0;
  container-type: size;
  background:
    radial-gradient(circle at 50% 30%, var(--ak-surface) 0 45%, transparent 75%),
    color-mix(in srgb, var(--ak-accent-2) 22%, var(--ak-surface));
}

.chef {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  height: min(100cqh, 134cqw, 34dvh);
  width: auto;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
}

/* His pose for the answer just served. Flat, in-plane turns only. */
.panel-chef[data-react="fair"] .chef { scale: 1.04; }
.panel-chef[data-react="straw-man"] .chef { rotate: -7deg; }
.panel-chef[data-react="slippery-slope"] .chef { rotate: 5deg; translate: 4% 3%; }
.panel-chef[data-react="cherry-pick"] .chef { rotate: 6deg; }
.panel-chef[data-react="everyone-says"] .chef { translate: 0 -3%; }
.panel-chef[data-react="personal-jab"] .chef { rotate: -3deg; scale: 0.96; translate: -4% 0; }

/* A comic mark and one word above his head, held until Next. The chef shrinks to make room,
   so it never covers him. */
.react {
  order: -1;
  flex: none;
  align-self: flex-end;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 3px 10px 4px 5px;
  background: var(--ak-surface);
  border: 2.5px solid var(--ak-ink);
  border-radius: 16px 16px 16px 4px;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight, 400);
  font-size: 15px;
  line-height: 1.05;
}

.react-mark {
  flex: none;
  width: 30px;
  height: 30px;
}

/* A short, wide chef panel: he stands at the left and the reaction sits beside him. */
@container (min-aspect-ratio: 5 / 4) {
  .panel-chef:not([data-react=""]) .chef {
    align-self: flex-start;
  }

  .react {
    position: absolute;
    top: 50%;
    right: 2px;
    translate: 0 -50%;
    max-width: 46%;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px 5px;
    border-radius: 14px 14px 14px 4px;
    font-size: 13px;
    text-align: center;
  }
}

.react-mark .em-line {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 3;
  stroke-linecap: round;
}

.react-mark .em-mint {
  fill: var(--ak-accent-2);
  stroke: var(--ak-ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.react-mark .em-drop {
  fill: var(--ak-surface);
  stroke: var(--ak-ink);
  stroke-width: 2.5;
}

.react-mark .em-cherry {
  fill: var(--ak-accent);
  stroke: var(--ak-ink);
  stroke-width: 2;
}

.react-mark .em-dot {
  fill: var(--ak-ink);
}

.react-mark .em-vein {
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 4.5;
  stroke-linecap: round;
}

.panel-counter {
  grid-area: counter;
  display: grid;
  place-items: center;
  padding: 8px;
  container-type: size;
  background:
    linear-gradient(color-mix(in srgb, var(--ak-bg) 52%, transparent), color-mix(in srgb, var(--ak-bg) 52%, transparent)),
    url("./art/bake-shop-counter.jpg") center 88% / cover no-repeat;
}

.slice {
  position: relative;
  height: min(100cqh - 12px, (100cqw - 8px) * 1.113, 36dvh);
  aspect-ratio: 345 / 384;
}

.slice-art {
  display: block;
  width: 100%;
  height: 100%;
}

.chunks {
  position: absolute;
  inset: 0;
}

.chunk {
  position: absolute;
  width: max(27%, 44px);
  translate: -50% -50%;
  filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--ak-ink) 45%, transparent));
}

/* The painted pineapple wedge, cut out of its tart picture. */
.chunk-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.chunk-art img {
  position: absolute;
  left: -45%;
  top: -100%;
  width: 182.5%;
  max-width: none;
  clip-path: polygon(50.4% 39.1%, 79.5% 62.5%, 60.8% 78.1%, 32.9% 77.6%, 24.7% 69.8%);
}

.crumbs {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 4px;
  height: 18px;
  pointer-events: none;
}

.crumb {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: 20px;
  height: 20px;
  transform: rotate(var(--turn));
}

.crumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.crumb path {
  fill: var(--ak-ink-muted);
  stroke: var(--ak-ink);
  stroke-width: 1.3;
}

/* ---------- caption tags ---------- */

.caption {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 5px 11px 6px;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight, 400);
  font-size: 15px;
  line-height: 1.1;
  border-radius: var(--tag-shape);
  box-shadow: 0 0 0 2px var(--ak-ink);
  rotate: -2deg;
  white-space: nowrap;
}

/* The pin that holds the tag on. */
.caption::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ak-ink-muted);
  box-shadow: 0 0 0 2px var(--ak-surface);
}

.caption-counter {
  top: -12px;
  left: 10px;
}

/* ---------- talk: the chef's word bubble ---------- */

.panel-talk {
  grid-area: talk;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 16px 2px 0;
}

.panel-talk::after {
  display: none;
}

.bubble {
  position: relative;
  box-sizing: border-box;
  padding: 10px 16px 12px;
  background: var(--ak-surface);
  border: 3px solid var(--ak-ink);
  border-radius: 28px 28px 28px 28px / 24px 24px 24px 24px;
}

/* Room for the side tag pinned on the bubble's top edge. */
.panel-talk .bubble {
  padding-top: 20px;
}

/* The tail points up at the chef. */
.bubble::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 30px;
  width: 18px;
  height: 18px;
  background: var(--ak-surface);
  border-top: 3px solid var(--ak-ink);
  border-left: 3px solid var(--ak-ink);
  transform: rotate(45deg) skew(10deg, 10deg);
}

.bubble-text {
  margin: 0;
  font-weight: 700;
  font-size: clamp(16px, 2.3dvh, 19px);
  line-height: 1.3;
  color: var(--ak-ink);
}

.bubble-foot {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ak-ink-muted);
}

.caption-side {
  top: -2px;
  right: 10px;
  max-width: calc(100% - 62px);
  font-size: clamp(12.5px, 3.6vw, 14px);
  white-space: normal;
  rotate: 1.5deg;
}

/* ---------- hand: the vote or the argument cards ---------- */

.panel-hand {
  grid-area: hand;
  display: flex;
  flex-direction: column;
  min-height: min(40dvh, 360px);
  padding: 18px 8px 8px;
}

.page[data-phase="vote"] .panel-hand {
  justify-content: center;
}

.caption-hand {
  top: -12px;
  left: 12px;
}

.choices {
  min-height: 0;
  border-radius: 16px;
}

.votes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vote {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  border: 3px solid var(--ak-ink);
  border-radius: 22px 10px 24px 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.vote-no {
  border-radius: 10px 22px 12px 24px;
}

.vote:active {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

.vote-mark {
  display: block;
  width: 52px;
  height: 40px;
}

.vote-mark .mark-ring {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 4;
}

.vote-mark .mark-bar {
  stroke: var(--ak-accent);
  stroke-width: 5;
  stroke-linecap: round;
}

.vote-word {
  font-family: var(--ak-font-display);
  font-size: 34px;
  line-height: 1;
}

.vote-claim {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding:
    calc(98px * var(--k) + 2px)
    calc(28px * var(--k) + 10px)
    calc(40px * var(--k) + 4px)
    calc(28px * var(--k) + 8px);
  border: 0;
  background: none;
  text-align: left;
  color: var(--ak-ink);
  font-weight: 600;
  font-size: clamp(14px, 1.95dvh, 16px);
  line-height: 1.3;
  cursor: pointer;
  touch-action: manipulation;
}

/* The painted recipe card, stretched only through its plain middle. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-style: solid;
  border-width: 0;
  border-image-source: url("./art/argument-card.png");
  border-image-slice: 112 88 40 280 fill;
  border-image-width: calc(112px * var(--k)) calc(88px * var(--k)) calc(40px * var(--k)) calc(280px * var(--k));
}

.card::after {
  content: '';
  position: absolute;
  inset: calc(28px * var(--k)) 1px 1px 1px;
  border-radius: 14px;
  pointer-events: none;
}

.card-say {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.card-key {
  float: left;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 8px 0 0;
  border: 2px solid var(--ak-ink-muted);
  border-radius: 50%;
  background: var(--ak-surface);
  color: var(--ak-ink-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.card.is-picked::after {
  border: 4px solid var(--ak-accent);
}

.card.is-picked .card-key {
  border-color: var(--ak-accent);
  background: var(--ak-accent);
  color: var(--ak-btn-ink);
}

.card.is-weak::after {
  border: 4px dashed var(--ak-ink);
}

.card.is-fair::after {
  border: 4px solid var(--ak-accent-2);
}

.card.is-faded {
  opacity: 0.62;
}

.card:disabled {
  cursor: default;
}

.tag {
  position: absolute;
  z-index: 2;
  top: -8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 4px 7px;
  border-radius: var(--tag-shape);
  font-family: var(--ak-font-display);
  font-size: 14px;
  line-height: 1.1;
  rotate: 2deg;
}

.tag svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tag-flaw,
.tag-pick {
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  box-shadow: 0 0 0 2px var(--ak-ink);
}

.tag-fair {
  background: var(--ak-surface);
  color: var(--ak-ink);
  box-shadow: 0 0 0 3px var(--ak-accent-2), 0 0 0 5px var(--ak-ink);
}

/* ---------- teaching ---------- */

.coach {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--ak-surface);
  border: 3px solid var(--ak-accent);
  border-radius: 14px 6px 14px 6px;
}

.actions .coach {
  margin: 0 0 8px;
}

.coach-text {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ak-ink);
}

.coach-arrow {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-pointed {
  outline: 4px solid var(--ak-accent);
  outline-offset: 4px;
}

/* ---------- actions ---------- */

.actions {
  grid-area: act;
  display: flex;
  flex-direction: column;
}

.action-row {
  display: flex;
  gap: 8px;
}

.notice {
  margin: 0 0 8px;
  padding: 8px 12px;
  background: var(--ak-surface);
  border: 2px solid var(--ak-ink);
  border-left-width: 8px;
  border-radius: 6px 14px 6px 14px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ak-ink);
}

.notice-error {
  border-left-color: var(--ak-accent);
}

.notice-hint {
  border-left-color: var(--ak-accent-2);
}

.btn {
  box-sizing: border-box;
  min-height: 52px;
  padding: 0 20px;
  border: 3px solid var(--ak-ink);
  border-radius: 16px 8px 16px 8px;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight, 400);
  font-size: 19px;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-main {
  flex: 1;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  box-shadow: inset 0 -5px 0 var(--ak-btn-active);
}

.btn-main:active {
  background: var(--ak-btn-active);
  box-shadow: none;
}

.btn-quiet {
  background: var(--ak-surface);
  color: var(--ak-ink);
  border-color: var(--ak-ink-muted);
}

.btn-quiet:active {
  background: var(--ak-choice-bg);
}

@media (hover: hover) {
  .btn-main:hover {
    background: var(--ak-btn-hover);
  }

  .btn-quiet:hover,
  .vote:hover {
    background: var(--ak-choice-bg);
    border-color: var(--ak-ink);
  }
}

/* ---------- the last panel ---------- */

.final {
  position: relative;
  width: min(100%, 560px);
  height: 100%;
  min-height: 0;
  display: flex;
}

.final-panel {
  flex: 1;
  display: grid;
  gap: 10px;
  padding: 6px 12px 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--mast-h) auto minmax(110px, 1fr) auto auto auto;
  grid-template-areas:
    "logo"
    "why"
    "stage"
    "says"
    "point"
    "acts";
  background:
    linear-gradient(color-mix(in srgb, var(--ak-surface) 86%, transparent), color-mix(in srgb, var(--ak-surface) 86%, transparent)),
    url("./art/bake-shop-counter.jpg") center 80% / cover no-repeat;
}

.final-logo {
  grid-area: logo;
  justify-self: center;
  align-self: center;
  max-width: calc(100% - 112px);
}

.final-why {
  grid-area: why;
  position: relative;
  padding: 18px 12px 8px;
  background: var(--ak-bg);
  border: 2px solid var(--ak-ink);
  border-radius: 6px 14px 6px 14px;
}

.caption-verdict {
  top: -12px;
  left: 10px;
}

.final-why-text {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}

.final-stage {
  grid-area: stage;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4%;
  min-height: 0;
  container-type: size;
}

.final-chef {
  display: block;
  height: min(100cqh, 48cqw * 1.338);
  width: auto;
  transform-origin: 50% 100%;
}

.final-slice-wrap {
  display: flex;
  align-items: flex-end;
}

.slice-final {
  height: min(92cqh, 42cqw * 1.113);
}

.final:not(.is-landed) .menu-board {
  display: none;
}

.menu-board {
  position: absolute;
  top: 0;
  right: 0;
  width: min(30cqw, 34cqh * 1.333);
  height: auto;
}

.menu-board .board {
  fill: var(--ak-ink);
  stroke: var(--ak-ink-muted);
  stroke-width: 4;
}

.menu-board .chalk {
  fill: none;
  stroke: var(--ak-bg);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-board .chalk-dot {
  fill: var(--ak-bg);
}

/* Each ending lands on the slice itself. */
.final.is-landed[data-ending="chef-convinced"] .slice-final {
  -webkit-mask-image: radial-gradient(ellipse 15% 13% at 44% 95%, transparent 96%, #000 100%), radial-gradient(ellipse 14% 12% at 57% 93%, transparent 96%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 15% 13% at 44% 95%, transparent 96%, #000 100%), radial-gradient(ellipse 14% 12% at 57% 93%, transparent 96%, #000 100%);
  mask-composite: intersect;
}

.final.is-landed[data-ending="chef-curious"] .slice-final {
  -webkit-mask-image: radial-gradient(ellipse 11% 9% at 91% 24%, transparent 96%, #000 100%);
  mask-image: radial-gradient(ellipse 11% 9% at 91% 24%, transparent 96%, #000 100%);
}

.final.is-landed[data-ending="chef-curious"] .final-chef {
  rotate: -4deg;
}

.final.is-landed[data-ending="chef-unmoved"] .final-slice-wrap {
  translate: 8% 4%;
  rotate: 8deg;
}

.bubble-final {
  grid-area: says;
  padding-top: 18px;
}

/* The waiting line and the verdict share one cell, so nothing moves when it lands. */
.says-cell {
  display: grid;
}

.says-cell > .bubble-text {
  grid-area: 1 / 1;
}

.says-wait {
  color: var(--ak-ink-muted);
}

.says-text,
.final.is-landed .says-wait {
  visibility: hidden;
}

.final.is-landed .says-text {
  visibility: visible;
}

.final-slice-wrap {
  position: relative;
}

.final-crumbs {
  left: 14%;
  right: 14%;
  bottom: -6px;
}

.bubble-final::before {
  left: 22%;
}

.caption-says {
  top: -14px;
  right: 14px;
  rotate: 2deg;
}

.final-point {
  grid-area: point;
  position: relative;
  padding: 18px 12px 10px;
  background: var(--ak-bg);
  border: var(--pipe) dotted var(--ak-accent-2);
  border-radius: 14px 6px 14px 6px;
  box-shadow: inset 0 0 0 2px var(--pipe-line);
}

.caption-point {
  top: -12px;
  left: 10px;
}

.point-text {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}

.final-actions {
  grid-area: acts;
  display: flex;
  gap: 8px;
}

.final-actions .btn {
  flex: 1;
}

/* Shorter phones held upright: tighter mast, cards and board floor. */
@media (orientation: portrait) and (max-height: 780px) {
  :root {
    --mast-h: 46px;
    --k: 0.27;
  }

  .logo {
    height: 40px;
  }

  .page {
    grid-template-rows: var(--mast-h) minmax(84px, 1fr) auto auto auto;
  }

  .vote {
    min-height: 116px;
  }
}

/* ---------- sideways: board on one side, controls on the other ---------- */

@media (orientation: landscape) {
  :root {
    --k: 0.24;
  }

  /* Board and chef on the left, the cards on the right under the logo and the ? button. */
  .page {
    width: min(100%, 1100px);
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.05fr) minmax(0, 1.7fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "chef talk hand"
      "chef counter hand"
      "act act hand";
  }

  .mast {
    grid-area: 1 / 3 / 2 / 4;
    align-self: start;
    height: var(--mast-h);
    justify-content: flex-start;
    padding: 0 0 0 4px;
  }

  .logo {
    height: 44px;
  }

  .panel-chef {
    padding-top: 58px;
  }

  .react {
    font-size: 14px;
  }

  .chef {
    height: min(100cqh, 134cqw, 70dvh);
  }

  .slice {
    height: min(100cqh - 12px, (100cqw - 8px) * 1.113, 64dvh);
  }

  .panel-talk {
    padding: 0 0 0 10px;
    justify-content: center;
  }

  .panel-talk .bubble {
    padding: 8px 14px 10px;
  }

  /* Sideways, the chef stands to the left of his bubble. */
  .bubble::before {
    top: 18px;
    left: -12px;
    transform: rotate(-45deg) skew(10deg, 10deg);
  }

  .bubble-text {
    font-size: clamp(15px, 4.2dvh, 18px);
  }

  .bubble-foot {
    font-size: 14px;
  }

  .caption-side {
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-start;
    max-width: calc(100% - 12px);
    margin: -8px 0 0 12px;
    rotate: -1.5deg;
  }

  .caption-counter {
    left: auto;
    right: 10px;
    rotate: 2deg;
  }

  .panel-hand {
    min-height: 0;
    margin-top: calc(var(--mast-h) + 6px);
    justify-content: center;
  }

  .vote {
    min-height: 150px;
  }

  .final {
    width: min(100%, 1100px);
  }

  /* Same reading order as upright: logo, why, picture, verdict, best point, buttons. */
  .final-panel {
    column-gap: 14px;
    row-gap: 6px;
    padding: 4px 12px 8px;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    grid-template-rows: 40px auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "logo logo"
      "why says"
      "stage says"
      "stage point"
      "acts acts";
  }

  .final-logo {
    height: 40px;
    max-width: calc(100% - 120px);
  }

  /* Each pinned tag gets its own strip above the words, so it never covers them. */
  .final-why {
    margin-top: 8px;
    padding: 19px 10px 6px;
  }

  .final-point {
    padding: 19px 10px 6px;
  }

  .bubble-final {
    align-self: center;
    margin-top: 8px;
    padding: 19px 14px 8px;
  }

  .final-panel .caption {
    font-size: 13px;
  }

  .final-actions .btn {
    min-height: 48px;
  }

  .final-why-text,
  .point-text,
  .bubble-final .bubble-text {
    font-size: clamp(14px, 4dvh, 16px);
  }

  .bubble-final::before {
    display: none;
  }
}

/* ---------- motion: the choice settles, then the consequence ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* A mint frosting sheet wipes off the new panel. It sits on top but never takes the tap,
     so the cards underneath answer the very first touch. */
  .is-wiping::before {
    content: '';
    position: absolute;
    z-index: 6;
    inset: -2px;
    border-radius: inherit;
    background: var(--ak-accent-2);
    pointer-events: none;
    animation: frosting-wipe 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .bubble.is-popping {
    animation: bubble-wobble 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 120ms;
  }

  .chunk.is-dropping {
    animation: chunk-drop 640ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
    animation-delay: 160ms;
  }

  .crumb.is-falling {
    animation: crumb-fall 620ms cubic-bezier(0.5, 0, 0.75, 0) both;
    animation-delay: 160ms;
  }

  .panel-chef.is-nodding .chef {
    animation: chef-nod 760ms ease-in-out 1;
  }

  .panel-chef.is-shaking .chef {
    animation: chef-shake 520ms ease-in-out 1;
  }

  .is-pointed {
    animation: ring-pulse 1300ms ease-in-out infinite;
  }

  .coach-arrow {
    animation: arrow-bob 1100ms ease-in-out infinite;
  }

  .card {
    transition: translate 140ms ease;
  }

  .card.is-picked:not(:disabled) {
    translate: 0 -2px;
  }

  .final.is-landed .final-slice-wrap {
    animation: slice-settle 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .final.is-landed[data-ending="chef-unmoved"] .final-slice-wrap {
    animation-name: slice-pushed;
  }

  .final.is-landed .menu-board .chalk {
    stroke-dasharray: 120;
    animation: chalk-write 900ms ease-out 300ms both;
  }

  .final.is-landed .says-text {
    animation: bubble-wobble 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .chef {
    transition: rotate 320ms ease, translate 320ms ease, scale 320ms ease;
  }

  .react:not([hidden]) {
    animation: bubble-wobble 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
  }
}

@keyframes frosting-wipe {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 0 100%); }
}

@keyframes bubble-wobble {
  0% { scale: 0.86; rotate: -2deg; opacity: 0; }
  55% { scale: 1.03; rotate: 1deg; opacity: 1; }
  80% { scale: 0.99; rotate: -0.5deg; }
  100% { scale: 1; rotate: 0deg; }
}

@keyframes chunk-drop {
  0% { transform: translateY(-180%) scale(1.2); opacity: 0; }
  55% { transform: translateY(8%) scale(0.95); opacity: 1; }
  78% { transform: translateY(-14%) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes crumb-fall {
  0% { transform: translateY(-110px) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(0) rotate(var(--turn)); }
}

@keyframes chef-nod {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(0deg) translateY(4%); }
  60% { transform: rotate(0deg) translateY(-1%); }
}

@keyframes chef-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4%); }
  50% { transform: translateX(4%); }
  75% { transform: translateX(-2%); }
}

@keyframes ring-pulse {
  0%, 100% { outline-offset: 3px; outline-color: var(--ak-accent); }
  50% { outline-offset: 7px; outline-color: color-mix(in srgb, var(--ak-accent) 45%, transparent); }
}

@keyframes arrow-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 4px; }
}

@keyframes slice-settle {
  from { transform: translateY(-14%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slice-pushed {
  from { transform: translate(-30%, -6%); rotate: 0deg; }
  to { transform: translate(0, 0); }
}

@keyframes chalk-write {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}

/* ---------- the intro: solid, framed sections with dark words ---------- */

#activity-start#activity-start .ak-section {
  background: var(--ak-surface);
  border: var(--pipe) dotted var(--ak-accent-2);
  box-shadow: inset 0 0 0 2px var(--pipe-line), 0 0 0 2px var(--ak-surface);
}

#activity-start#activity-start .ak-label {
  color: var(--ak-ink);
  font-size: 13px;
}

#activity-start#activity-start .ak-section .ak-body {
  color: var(--ak-ink);
  font-weight: 600;
}

#activity-start#activity-start .ak-controls li {
  position: relative;
  padding-left: 18px;
}

#activity-start#activity-start .ak-controls li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ak-accent);
  box-shadow: 0 0 0 2px var(--ak-ink);
}