/* Market Maker Mike. One amber dealing terminal, built on the composition of his HUD reference and the
   palette, pixel grid and faceless silhouette of his X avatar. Two materials only: the terminal's flat
   phosphor chrome (every frame below is a drawn PNG stretched by a nine-slice) and pixel art at 4x. */

@font-face { font-family: "Terminal"; src: url("/font/3270-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixel"; src: url("/font/PixeloidSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ground: #0B0704;
  --body: #150D05;
  --dim: #5E3F0C;
  --mid: #9A6A12;
  --amber: #F8B81E;
  --hot: #FFD84A;
  --label: #D39A26;
  --text: #E6BD5A;
  --cream: #F3E7C8;
  --red: #FF5A33;
  --green: #7BD93A;
  --jacket: #F8D800;

  --gut: clamp(16px, 2.4vw, 40px);
  --mod: 24px;            /* the nine-slice border of a module, 1:1 with its drawing */
  --pad: 30px;            /* inner padding on top of that border: text never comes near an edge */
  --rail: 150px;

  --fs-body: 19px;
  --fs-lab: 19px;
  --fs-val: 38px;
  --fs-sec: 34px;
}

* { box-sizing: border-box; }

html { background: var(--ground); overflow-x: clip; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Terminal", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--fs-body);
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  overflow-x: clip;
}

img { image-rendering: pixelated; }

::selection { background: var(--amber); color: #120B04; }

a { color: var(--hot); }

/* ---- the screen: the bracket frame his reference draws around its whole sheet ------------------ */
.screen {
  position: relative;
  min-height: 100vh;
  padding: 26px;
  border: 40px solid transparent;
  border-image: url("/img/ui/screenframe.png") 40 fill / 40px / 0 stretch;
  background:
    radial-gradient(120% 80% at 62% 18%, #1C1206 0%, #0B0704 62%),
    var(--ground);
}
.screen::after {                     /* the phosphor veil, a drawn 8 x 12 tile, not a CSS pattern of boxes */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("/img/ui/scanlines.png") repeat;
  opacity: .5;
  z-index: 9;
}
.notch {
  position: absolute;
  top: -48px;
  left: 50%;
  width: 120px;
  height: 18px;
  margin-left: -60px;
  background: url("/img/ui/framenotch.png") no-repeat center / 120px 18px;
}

main { max-width: 1680px; margin: 0 auto; padding-right: calc(var(--rail) + 24px); }

.band { padding: 56px 0 0; }
.band:first-child { padding-top: 24px; }
.band:last-child { padding-bottom: 72px; }

/* ---- masthead ---------------------------------------------------------------------------------- */
.masthead { margin: 0 0 18px; }
.wordmark {
  font-family: "Pixel", "Terminal", monospace;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: .01em;
  color: var(--hot);
  margin: 0 0 10px;
  text-shadow: 0 0 22px rgba(248, 184, 30, .28);
}
.strap { margin: 0; max-width: 92ch; color: var(--label); font-size: 18px; line-height: 1.45; }

/* ---- the module: every block of his reference is this one drawn object ------------------------- */
.mod {
  position: relative;
  border: var(--mod) solid transparent;
  border-image: url("/img/ui/module.png") 24 fill / var(--mod) / 0 stretch;
  padding: calc(var(--pad) - 8px) var(--pad) var(--pad);
  min-width: 0;
}
.mod .lab,
.boardcase .lab,
.shoutform .slab {
  display: block;
  font-size: var(--fs-lab);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 10px;
}
.mod .val {
  display: block;
  font-size: var(--fs-val);
  line-height: 1.15;
  color: var(--hot);
  overflow-wrap: anywhere;
}
.mod .sub { display: block; margin-top: 8px; color: var(--mid); font-size: 17px; }
.mod .note { margin: 14px 0 0; color: var(--label); max-width: 76ch; }

/* ---- the pit: his reference's split of stacked modules left, hero right ------------------------ */
.pitgrid {
  display: grid;
  /* The brief's own pit: the tape on Mike's left, Mike in the middle, his book on his right. */
  grid-template-columns: 23% 1fr 25%;
  gap: var(--gut);
  align-items: stretch;
}
.book { display: grid; gap: 10px; align-content: stretch; }
.book .mod { border-width: 20px; border-image-width: 20px; padding: 6px 26px 10px; display: flex; flex-direction: column; justify-content: center; }
.book .lab { margin-bottom: 4px; font-size: 18px; }
.book .val { font-size: clamp(26px, 1.8vw, 32px); }
.book .sub { margin-top: 4px; font-size: 16px; }

/* ---- the stage Mike stands on ------------------------------------------------------------------ */
.pitview { position: absolute; inset: 0; overflow: hidden; }
/* the pool of light his reference puts behind its figure, so the corners of the room go black */
.pitview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 54% at 46% 46%, rgba(0,0,0,0) 0%, rgba(8,5,2,.55) 62%, rgba(6,4,2,.9) 100%);
  z-index: 2;
}

.stage {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  border: var(--mod) solid transparent;
  border-image: url("/img/ui/module.png") 24 fill / var(--mod) / 0 stretch;
  isolation: isolate;
}
.pitbg {
  position: absolute;
  inset: 0;
  background: url("/img/world/pit.png") no-repeat center bottom / cover;
  filter: blur(3px) saturate(.8) brightness(.58);
  transform: scale(1.04);
}
.pitbg .trader {
  position: absolute;
  bottom: 24%;
  width: 136px;
  transform-origin: 50% 100%;
  animation: wave 5.5s ease-in-out infinite;
}
.pitbg .t1 { left: 6%;  animation-duration: 6.2s; }
.pitbg .t2 { left: 26%; bottom: 30%; width: 112px; animation-duration: 4.8s; animation-delay: -1.4s; }
.pitbg .t3 { right: 9%; bottom: 27%; width: 124px; animation-duration: 7.1s; animation-delay: -2.9s; }
@keyframes wave { 0%, 100% { transform: rotate(-1.6deg) translateY(0); } 50% { transform: rotate(1.8deg) translateY(-5px); } }

.pitbg .drift { position: absolute; width: 84px; opacity: .9; animation: drift 13s linear infinite; }
.pitbg .d1 { left: 14%; animation-duration: 11s; }
.pitbg .d2 { left: 52%; animation-duration: 15s; animation-delay: -5s; }
.pitbg .d3 { left: 80%; animation-duration: 9s;  animation-delay: -3s; }
@keyframes drift {
  0%   { transform: translate(0, -60px) rotate(0deg); opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: translate(-70px, 560px) rotate(260deg); opacity: 0; }
}

.boardcase {
  position: absolute;
  top: 22px;
  right: 22px;
  width: min(356px, 48%);
  padding: 20px 24px 22px;
  border: 18px solid transparent;
  border-image: url("/img/world/board.png") 18 fill / 18px / 0 stretch;
  z-index: 2;
}
.boardcase .lab { margin: 0; font-size: 16px; letter-spacing: .1em; }
/* The board is narrow on a 1366 screen and the prices are long: the number wraps under its label rather
   than running out of the board. */
.brow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; padding: 5px 0; }
.brow .lab { flex: 0 1 auto; }
.brow + .brow { position: relative; }
.brow + .brow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: url("/img/ui/rule.png") repeat-x left center; opacity: .75; }
.brow .num { font-size: 22px; color: var(--hot); white-space: nowrap; }
.brow .num.up { color: var(--green); }
.brow .num.down { color: var(--red); }

.puppet {
  position: absolute;
  left: 45%;
  bottom: 0;
  width: 672px;                        /* 224 art pixels at 3x */
  height: 588px;
  margin-left: -336px;
  transform-origin: 50% 100%;
  z-index: 3;
  pointer-events: none;
}
.puppet img { position: absolute; display: block; will-change: transform; }

.counter {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 104px;
  background: url("/img/world/counter.png") repeat-x left top / 192px 216px;
  z-index: 4;
}

.say {
  position: absolute;
  left: 22px;
  top: 26px;
  width: min(336px, 38%);
  z-index: 6;
  border: 26px solid transparent;
  border-image: url("/img/ui/bubble.png") 26 fill / 26px / 0 stretch;
  padding: 6px 12px 14px;
  color: #231709;
  font-size: 19px;
  line-height: 1.4;
  min-height: 84px;
}
.say::after {
  content: "";
  position: absolute;
  right: 54px;
  bottom: -40px;
  width: 28px;
  height: 22px;
  background: url("/img/ui/bubble-tail.png") no-repeat center / contain;
}
.say p { margin: 0; }

/* ---- meters: discrete cells, the way his reference draws every bar ------------------------------ */
.mod.wide { margin-top: 14px; }
.meterrow { display: grid; grid-template-columns: minmax(170px, 24%) 1fr 86px; gap: 20px; align-items: center; padding: 9px 0; }
.meterrow + .meterrow { position: relative; }
.meterrow + .meterrow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: url("/img/ui/rule.png") repeat-x left center; opacity: .75; }
.mlab, .rlab { color: var(--label); font-size: 18px; }
.mval, .rval { text-align: right; color: var(--hot); font-size: 20px; white-space: nowrap; }
.meter { display: flex; gap: 4px; min-width: 0; overflow: hidden; height: 36px; }
.meter i { flex: 0 0 16px; height: 36px; background: url("/img/ui/seg-off.png") no-repeat center / 16px 36px; }
.meter i.on { background-image: url("/img/ui/seg-on.png"); }
.meter.small { height: 22px; }
.meter.small i { flex-basis: 11px; height: 22px; background-size: 11px 22px; }

.standing p { margin: 0; font-size: 21px; color: var(--cream); }

/* ---- the tape ---------------------------------------------------------------------------------- */
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); align-items: stretch; }
.pitgrid .tape { display: flex; flex-direction: column; border-width: 20px; border-image-width: 20px; padding: 6px 26px 14px; }
.pitgrid .tape .candles { flex: 0 0 auto; height: 150px; gap: 2px; }
.pitgrid .tape .candles i { min-width: 3px; }
.pitgrid .tape .trades { flex: 1 1 auto; max-height: none; overflow-y: auto; }
/* Before the first trade the list has nothing in it, and a tall empty panel beside a full one reads as
   broken: the one honest line is centred in the space the trades will take instead. */
.pitgrid .tape .trades li.empty { display: grid; place-items: center; height: 100%; text-align: center; }
.pitgrid .tape .trades li { grid-template-columns: 1fr auto; font-size: 17px; }
.pitgrid .tape .trades .t { display: none; }
.candles { display: flex; align-items: flex-end; gap: 4px; height: 128px; margin: 6px 0 18px; }
.candles i { flex: 1 1 0; min-width: 4px; background: var(--amber); transition: height .4s ease; }
.candles i:only-of-type, .candles i[style*="height: 8%"] { background: #4A3309; }
.candles i.dn { background: #9A4418; }
.trades { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; overscroll-behavior: auto; }
.trades li { position: relative; display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; padding: 9px 0; font-size: 18px; }
.trades li + li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: url("/img/ui/rule.png") repeat-x left center; opacity: .75; }

.trades li.empty { display: block; color: var(--mid); }
.trades .t { color: var(--mid); }
.trades .b { color: var(--green); }
.trades .s { color: var(--red); }
.rulerow { display: grid; grid-template-columns: minmax(130px, 30%) 1fr auto; gap: 18px; align-items: center; padding: 8px 0; }
.rulerow > * { min-width: 0; overflow-wrap: anywhere; }
.rulerow + .rulerow { position: relative; }
.rulerow + .rulerow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: url("/img/ui/rule.png") repeat-x left center; opacity: .75; }

/* ---- shout -------------------------------------------------------------------------------------- */
.shoutform { margin: 20px 0 6px; }
.srow { display: block; margin-bottom: 16px; }
.shoutform input[type="text"] {
  display: block;
  width: 100%;
  padding: 16px 26px;
  background: #0D0803;
  border: 2px solid var(--dim);
  color: var(--cream);
  font: inherit;
  font-size: 22px;
}
.shoutform input:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; border-color: var(--amber); }
.scost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.scost .slab { display: inline; margin: 0; }
.scost .sval { font-size: 24px; color: var(--hot); }
.skeys { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.skeynote { color: var(--mid); font-size: 18px; }
.shouts { list-style: none; margin: 24px 0 0; padding: 0; }
.shouts li { position: relative; padding: 12px 0; }
.shouts li + li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: url("/img/ui/rule.png") repeat-x left center; opacity: .75; }
.shouts li.empty { color: var(--mid); }
.shouts .who { color: var(--mid); font-size: 17px; }
.shouts .what { color: var(--cream); font-size: 20px; }
.shouts .back { color: var(--amber); }
.shouts li.best .tag { color: var(--hot); font-size: 17px; letter-spacing: .06em; }
.shouts li.best .what { color: var(--hot); }

/* ---- tickets ------------------------------------------------------------------------------------ */
.ticketgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 16px; margin-top: 18px; }
.ticketgrid .empty { grid-column: 1 / -1; color: var(--mid); margin: 0; }
.ticket { border: 20px solid transparent; border-image: url("/img/ui/module.png") 24 fill / 20px / 0 stretch; padding: 14px 20px 18px; }
.ticket h3 { margin: 0 0 10px; font-size: 20px; color: var(--hot); font-weight: 400; letter-spacing: .08em; }
.ticket dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 18px; }
.ticket dt { color: var(--label); }
.ticket dd { margin: 0; text-align: right; color: var(--cream); }

/* ---- the direct line window --------------------------------------------------------------------- */
.window {
  border: var(--mod) solid transparent;
  border-image: url("/img/ui/module-hot.png") 24 fill / var(--mod) / 0 stretch;
}
.titlestrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 28px;
  border-bottom: 2px solid var(--dim);
}
.tname { font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--hot); }
.lamp { width: 20px; height: 20px; background: url("/img/ui/lamp-off.png") no-repeat center / contain; flex: none; }
.lamp[data-on="true"] { background-image: url("/img/ui/lamp-green.png"); }
.windowbody { padding: 26px 32px 32px; }
.ca {
  margin: 0 0 22px;
  font-size: clamp(17px, 1.5vw, 26px);
  color: var(--cream);
  overflow-wrap: anywhere;
  user-select: all;
  background: #0D0803;
  border: 2px solid var(--dim);
  padding: 20px 30px;
  min-width: 0;
}
.ca.waiting { color: var(--mid); user-select: auto; }
.keys { display: flex; flex-wrap: wrap; gap: 16px; }
.risk { margin: 24px 0 0; color: var(--mid); font-size: 17px; max-width: 78ch; }

/* ---- keys: the one button of this site ----------------------------------------------------------- */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 26px;
  border: 16px solid transparent;
  border-image: url("/img/ui/key.png") 16 fill / 16px / 0 stretch;
  background: none;
  color: var(--hot);
  font: inherit;
  font-size: 20px;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}
.key img { width: 24px; height: 24px; object-fit: contain; image-rendering: auto; }
.key:hover, .key:focus-visible { border-image-source: url("/img/ui/key-hot.png"); color: #FFF0C0; }
.key:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }
.key:active { transform: translateY(2px); }
.key[disabled], .key[aria-disabled="true"] {
  border-image-source: url("/img/ui/key-off.png");
  color: #6B4D14;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- the navigation: the line keys of Mike's desk phone ------------------------------------------- */
.console {
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: var(--rail);
  display: grid;
  gap: 10px;
  padding: 18px 16px;
  border: 20px solid transparent;
  border-image: url("/img/world/console.png") 20 fill / 20px / 0 stretch;
  z-index: 8;
}
.linekey {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 10px 12px 12px;
  min-height: 64px;
  border: 14px solid transparent;
  border-image: url("/img/world/phonekey.png") 14 fill / 14px / 0 stretch;
  background: none;
  color: #CFCFCF;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.linekey .ln { font-size: 16px; letter-spacing: .18em; color: #8A8A8A; }
.linekey .lw { font-size: 18px; }
.linekey:hover { color: #C8C8C8; }
.linekey:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }
.linekey[aria-current="true"] { border-image-source: url("/img/world/phonekey-on.png"); color: #FFE3A0; }
.linekey[aria-current="true"] .ln { color: var(--amber); }

.drawerpull {
  display: none;
  font: inherit;
  font-size: 19px;
  color: var(--hot);
  background: none;
  cursor: pointer;
}

/* ---- the middle desktop: three columns still, but Mike at 2x and the tape down to side and size ----- */
@media (min-width: 1101px) and (max-width: 1500px) {
  .puppet { width: 448px; height: 392px; margin-left: -224px; }   /* 224 art pixels at 2x */
  .stage { min-height: 560px; }
  /* Three tall columns do not fit 768 px of screen: the book goes under the pit as one row of five, which
     keeps Mike on the first screen and still reads left to right as the brief wants. */
  .pitgrid { grid-template-columns: 26% 1fr; }
  .pitgrid .tape { grid-column: 1; grid-row: 1; }
  .pitgrid .stage { grid-column: 2; grid-row: 1; }
  .pitgrid .book { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .book .val { font-size: 22px; }
  .pitgrid .tape .trades .qty { display: none; }
  .pitgrid .tape .trades li { font-size: 16px; }
  .book .mod { padding: 6px 20px 10px; }
  /* Nothing in the book may wrap here: a wrapped value makes the column tall enough to push Mike himself
     below the first screen. */
  .book .lab { font-size: 17px; }
  .book .val { font-size: 24px; }
  .book .sub { font-size: 16px; }
}

/* ---- phone ---------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --rail: 0px; --pad: 24px; --fs-val: 32px; }
  main { padding-right: 0; }
  .pitgrid { grid-template-columns: 1fr; }
  .twoup { grid-template-columns: 1fr; }
  .stage { min-height: 460px; order: -1; }
  .book { order: 1; }
  .console {
    right: 0;
    top: auto;
    bottom: 0;
    transform: translateY(110%);
    width: auto;
    grid-auto-flow: column;
    transition: transform .22s ease;
  }
  .console.open { transform: translateY(0); }
  .drawerpull {
    display: block;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10;
    min-height: 54px;
    padding: 0 20px;
    border: 16px solid transparent;
    border-image: url("/img/ui/key.png") 16 fill / 16px / 0 stretch;
  }
}

@media (max-width: 760px) {
  :root { --mod: 20px; --pad: 20px; --fs-val: 28px; --fs-lab: 17px; --fs-body: 18px; }
  .screen { padding: 10px; border-width: 24px; border-image-width: 24px; }
  .notch { display: none; }
  .band { padding-top: 40px; }
  /* On the phone Mike takes the top half of the screen and the book reads below him, as the brief asks.
     The board and his line sit above him in the flow, so nothing of his covers anything to read. */
  .stage { min-height: 0; padding: 404px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
  .pitview { position: absolute; inset: 0 0 auto; height: 396px; }
  .puppet { width: 448px; height: 392px; margin-left: -224px; left: 50%; }  /* 224 art pixels at 2x */
  .counter { height: 76px; background-size: 128px 144px; }
  .boardcase { position: relative; inset: auto; width: auto; margin: 0 0 10px; }
  .say { position: relative; inset: auto; width: auto; margin: 0 0 8px; min-height: 0; }
  .say::after { display: none; }
  .band:last-child { padding-bottom: 118px; }
  .meterrow { grid-template-columns: 1fr; gap: 8px; }
  .mval { text-align: left; }
  .rulerow { grid-template-columns: 1fr; gap: 4px; }
  .rulerow .rval { text-align: left; }
  .rulerow .meter { display: none; }
  .console { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); width: 100%; right: 0; left: 0; }
}

@media (max-width: 380px) {
  :root { --fs-val: 26px; }
  .stage { padding-top: 356px; }
  .pitview { height: 348px; }
  .counter { height: 64px; background-size: 128px 144px; }
}

/* ---- motion ---------------------------------------------------------------------------------------- */
.fx-drip { animation: drip 1.5s ease-in infinite; }
.fx-drip.d2 { animation-delay: -.5s; }
.fx-drip.d3 { animation-delay: -1s; }
@keyframes drip { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }

.fx-steam1, .fx-steam2 { animation: steam 2.4s ease-out infinite; }
.fx-steam2 { animation-delay: -1.2s; }
@keyframes steam { 0% { transform: translateY(6px) scale(.7); opacity: 0; } 30% { opacity: .95; } 100% { transform: translateY(-40px) scale(1.25); opacity: 0; } }

.fx-rise { animation: rise 2.8s ease-out infinite; }
.fx-rise.b { animation-delay: -1.4s; }
@keyframes rise { 0% { transform: translateY(10px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }

.fx-fly { animation: fly 2.2s ease-out infinite; }
.fx-fly.b { animation-delay: -.5s; }
.fx-fly.c { animation-delay: -1.1s; }
.fx-fly.d { animation-delay: -1.7s; }
@keyframes fly {
  0% { transform: translate(0, 24px) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-34px, -70px) rotate(220deg); opacity: 0; }
}

.fx-flicker { animation: flicker .34s steps(2, end) infinite; }
.fx-flicker.b { animation-duration: .46s; }
@keyframes flicker { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.18) translateY(-3px); } }

.fx-fall { animation: fall 2.6s ease-in infinite; }
@keyframes fall { 0%, 50% { transform: translateY(0) rotate(60deg); opacity: 1; } 100% { transform: translateY(70px) rotate(190deg); opacity: 0; } }

.puppet.breathe { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-4px) scaleY(1.008); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .pitbg .drift { display: none; }
}

/* ---- the phone's tabs: the brief puts the book and the tape under Mike as tabs, not as a stack ------- */
.tabs { display: none; }
/* Unconditional, because a button with no font-size of its own falls back to the browser's 13.3 px even
   while it is hidden, and that is a real failure the moment anything makes it visible. */
.tab { font: inherit; font-size: 19px; }

@media (max-width: 1100px) {
  .tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 12px;
  }
  .tab {
    min-height: 56px;
    padding: 0 18px;
    border: 16px solid transparent;
    border-image: url("/img/ui/key.png") 16 fill / 16px / 0 stretch;
    background: none;
    color: var(--label);
    font: inherit;
    font-size: 19px;
    letter-spacing: .04em;
    cursor: pointer;
  }
  .tab[aria-selected="true"] { border-image-source: url("/img/ui/key-hot.png"); color: var(--hot); }
  .tab:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }

  /* Which of the two panels the open tab shows. Both already live in the pit, so nothing moves: the
     column simply becomes Mike, the tab strip, and whichever of the two is open. */
  .pitgrid .tabs { order: 0; }
  .pitgrid .stage { order: -1; }
  .pitgrid .book { order: 1; }
  .pitgrid > .mod[role="tabpanel"] { order: 1; }
  body.tab-tape .pitgrid .book { display: none; }
  body.tab-book .pitgrid > .mod[role="tabpanel"] { display: none; }
  .pitgrid { display: flex; flex-direction: column; }
}