/* ═══════════════════════════════════════════════════════════════
   LINE, a pastel arcade cabinet
   The page is laid out like the machine: a backlit marquee across the
   top with the coin slot and the switches, a score panel down the left,
   the screen in the middle, the instruction card down the right, two
   round buttons under the screen, the law as the attract screen, and
   the control strip at the bottom.

   The drawing has one vocabulary, the cell: a flat candy face with a
   pixel bevel, a light edge top and left, a dark edge bottom and right,
   inside a thick plum outline. The colours are the ones sampled from the
   brand kit's monogram on 13 September 2026, so the board and the logo
   are the same object. Pixel type for titles and figures, a humanist
   sans for prose, hard shadows, no gradient, nothing blurred.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Press Start 2P";
  src: url("assets/fonts/pressstart2p-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dmsans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ground:   #ebe8f7;   /* the brand's periwinkle, the room */
  --ground-2: #e1dcf2;   /* the score panel, the bottom strip */
  --panel:    #fbfaff;   /* the screen, the card, the marquee glass */
  --ink:      #2b162f;   /* the monogram's outline: every edge, every letter */
  --ink-2:    #6b5a78;   /* the quieter text */
  --dot:      rgba(43, 22, 47, .14);
  --flash:    #fff3a6;   /* the row that is about to go */
  --burn:     #d94a66;   /* the burned figure, and nothing else */
  --burn-d:   #9a2f48;

  /* the five candies of the monogram, face, lit edge, shaded edge */
  --rose:   #fa92ae; --rose-l:  #fcd5de; --rose-d:  #ce5079;
  --gold:   #fcce51; --gold-l:  #fcefb1; --gold-d:  #dc9806;
  --mint:   #8fe3cd; --mint-l:  #daf9ec; --mint-d:  #5fac9d;
  --sky:    #8ec7fc; --sky-l:   #e3effc; --sky-d:   #5d8fc5;
  --lilac:  #d1a7f9; --lilac-l: #eedefb; --lilac-d: #996bcb;

  /* one candy per address; the three extra stay in the same family */
  --a: var(--rose);  --a-l: var(--rose-l);  --a-d: var(--rose-d);
  --b: var(--gold);  --b-l: var(--gold-l);  --b-d: var(--gold-d);
  --c: var(--mint);  --c-l: var(--mint-l);  --c-d: var(--mint-d);
  --d: var(--sky);   --d-l: var(--sky-l);   --d-d: var(--sky-d);
  --e: var(--lilac); --e-l: var(--lilac-l); --e-d: var(--lilac-d);
  --f: #ffb98a; --f-l: #ffe0cb; --f-d: #c67a48;
  --g: #a5e58a; --g-l: #dcf6cf; --g-d: #66a04e;
  --h: #ffa3a3; --h-l: #ffd9d9; --h-d: #b86464;
  --you: #ffffff; --you-l: #ffffff; --you-d: #c5bdd6;

  --pixel: "Press Start 2P", "DM Sans", monospace;
  --body: "DM Sans", system-ui, -apple-system, sans-serif;
  --line: 3px;
  --shadow: 5px 5px 0 var(--ink);
  --shadow-lg: 7px 7px 0 var(--ink);
  --wrap: 1240px;
  --snap: steps(4, end);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
html { scroll-behavior: smooth; background: var(--ground); }

body {
  margin: 0;
  background-color: var(--ground);
  background-image: radial-gradient(circle, var(--dot) 1.2px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
code { font-family: var(--pixel); font-size: max(12px, .72em); letter-spacing: .02em; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.px { font-family: var(--pixel); line-height: 1.6; }

/* ─── the marquee: backlit, so the pastel letters carry the light ── */

.marquee {
  background: var(--panel);
  border-bottom: var(--line) solid var(--ink);
  position: relative;
}
/* the candy stripe under the marquee, the cabinet's own five colours */
.marquee::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--line) - 8px); height: 8px;
  background: linear-gradient(90deg,
    var(--mint) 0 20%, var(--sky) 20% 40%, var(--lilac) 40% 60%, var(--rose) 60% 80%, var(--gold) 80% 100%);
  border-bottom: var(--line) solid var(--ink);
}
.marquee-in { display: flex; align-items: center; gap: 28px; min-height: 96px; padding: 16px 0; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo .lockup { height: 52px; width: auto; }
.logo.small .lockup { height: 30px; }

.switches { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.switches .coin { order: 10; }   /* the coin slot is the last switch, at the top right */
.coin, .sfx, .switch {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 18px; cursor: pointer; text-decoration: none;
  font-family: var(--pixel); font-size: 12px; text-transform: uppercase; color: var(--ink);
  background: var(--panel); border: var(--line) solid var(--ink); border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .06s var(--snap), box-shadow .06s var(--snap);
}
.coin:active, .sfx:active, .switch:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.coin { background: var(--gold); }
.coin:hover { background: var(--gold-l); }
.coin-glyph { width: 12px; height: 12px; border-radius: 50%; background: var(--gold-d); border: 2px solid var(--ink); }
.wallet-btn.is-on .coin-glyph { background: var(--g); }
.wallet-btn.is-off .coin-glyph { background: var(--burn); }
.sfx { background: var(--ground-2); }
.sfx .sfx-k { color: var(--ink-2); }
.sfx .sfx-v { color: var(--mint-d); }
.sfx .sfx-v.off { color: var(--burn); }
.switch { min-width: 46px; padding: 0 12px; }
.switch svg { width: 18px; height: 18px; }
.switch.wide { padding: 0 18px; background: var(--lilac-l); }
.coin:disabled, .sfx:disabled { opacity: .5; cursor: default; }

/* the one line under the marquee: the brand line, nothing more */
.tagline {
  padding: 30px 0 2px; text-align: center;
  font-family: var(--pixel); font-size: clamp(12px, 1.25vw, 17px); line-height: 1.8; text-transform: uppercase;
}
.tagline b { font-weight: 400; color: var(--burn); }

/* ─── the cabinet: score | screen | card ──────────────────────── */

.cabinet {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 328px;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 34px) 0 clamp(36px, 4vw, 60px);
}

/* the score panel, down the left, the way a cabinet keeps its numbers */
.score {
  background: var(--ground-2); border: var(--line) solid var(--ink); border-radius: 4px;
  box-shadow: var(--shadow-lg); padding: 20px 20px 18px;
  position: sticky; top: 20px;
}
.score-head { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; padding-bottom: 12px; border-bottom: 2px dashed var(--dot); }
.sc { padding: 14px 0; border-bottom: 2px dashed var(--dot); }
.sc .k { display: block; font-family: var(--pixel); font-size: 12px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.sc .v { display: block; font-family: var(--pixel); font-size: 24px; line-height: 1; text-align: right; letter-spacing: -.02em; }
.sc .v.gold { color: var(--gold-d); }
.sc .v.hot { color: var(--burn); }
.score-foot { margin-top: 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.bump { animation: bump .3s var(--snap); }
@keyframes bump { 0% { transform: translateY(-4px); } 100% { transform: none; } }

/* the screen: the board in its bezel, a message line, two round buttons */
.screen { min-width: 0; }
.bezel {
  background: var(--panel); border: var(--line) solid var(--ink); border-radius: 4px;
  box-shadow: var(--shadow-lg); padding: 16px 16px 14px;
}
.stage-svg { width: 100%; height: auto; overflow: visible; }
.msg {
  margin-top: 14px; padding: 14px 16px; min-height: 62px;
  background: var(--ink); color: var(--panel);
  font-family: var(--pixel); font-size: 12px; line-height: 1.8; text-transform: uppercase;
  border-radius: 3px;
}
.pad { display: flex; justify-content: center; gap: 40px; margin-top: 26px; }
.arcade {
  width: 118px; height: 118px; border-radius: 50%; cursor: pointer; padding: 0;
  font-family: var(--pixel); font-size: 14px; text-transform: uppercase; color: var(--ink);
  border: var(--line) solid var(--ink);
  transition: transform .06s var(--snap), box-shadow .06s var(--snap);
}
.arcade span { display: block; }
.arcade.buy { background: var(--rose); box-shadow: 0 9px 0 var(--rose-d), 0 9px 0 3px var(--ink); }
.arcade.sell { background: var(--gold); box-shadow: 0 9px 0 var(--gold-d), 0 9px 0 3px var(--ink); }
.arcade:hover { filter: brightness(1.04); }
.arcade:active { transform: translateY(9px); box-shadow: 0 0 0 var(--rose-d), 0 0 0 3px var(--ink); }
.fine { text-align: center; font-size: 13.5px; color: var(--ink-2); margin-top: 20px; }

/* the instruction card, down the right, like the sticker on the side of the machine */
.card {
  background: var(--panel); border: var(--line) solid var(--ink); border-radius: 4px;
  box-shadow: var(--shadow-lg); padding: 20px 20px 18px;
}
.card-head { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; padding-bottom: 12px; border-bottom: 2px dashed var(--dot); }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 0; border-bottom: 2px dashed var(--dot); }
.steps li:last-child { border-bottom: 0; }
.steps .pict { width: 52px; height: 52px; background: var(--ground); border: 2px solid var(--ink); border-radius: 3px; }
.steps h3 { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; line-height: 1.6; margin-bottom: 6px; }
.steps h3::before { counter-increment: step; content: counter(step, decimal-leading-zero) " "; color: var(--burn); }
.steps p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.card-foot { margin-top: 12px; padding-top: 14px; border-top: 2px dashed var(--dot); font-family: var(--pixel); font-size: 12px; color: var(--ink-2); line-height: 1.9; }
.card-foot b { color: var(--ink); font-weight: 400; }

/* ─── the board, inside the screen ────────────────────────────── */

.frame { fill: var(--ground); stroke: var(--ink); stroke-width: 7; }
.frame-bevel { fill: none; stroke: #fff; stroke-width: 3; opacity: .85; }
.topbar { fill: var(--ink); }
.topbar-text { font-family: var(--pixel); font-size: 16px; fill: var(--panel); }
.topbar-text.gold { fill: var(--gold); }
.topbar-text.right { text-anchor: end; }

.row { transform-box: view-box; transform-origin: 0 0; }
.row .band { fill: var(--flash); opacity: 0; }
.row.current .band { opacity: .55; }
.row .edge { fill: none; stroke: var(--ink); stroke-width: 3; opacity: 0; }
.row.current .edge { opacity: 1; }
.row.current.nearly .edge { stroke: var(--burn); }
.row.current.nearly .band { fill: #ffdcc4; opacity: .75; }
.slot { fill: var(--panel); stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 4; opacity: .28; }
.row.current .slot { opacity: .55; }

/* a cell, drawn like the monogram's: face, lit edges top and left,
   shaded edges bottom and right, a thick plum rim around */
.cell { transform-box: fill-box; transform-origin: 50% 50%; }
.cell .face { fill: var(--fc); }
.cell .lit { fill: var(--fl); }
.cell .dark { fill: var(--fd); }
.cell .rim { fill: none; stroke: var(--ink); stroke-width: 4; }
.cell.a { --fc: var(--a); --fl: var(--a-l); --fd: var(--a-d); }
.cell.b { --fc: var(--b); --fl: var(--b-l); --fd: var(--b-d); }
.cell.c { --fc: var(--c); --fl: var(--c-l); --fd: var(--c-d); }
.cell.d { --fc: var(--d); --fl: var(--d-l); --fd: var(--d-d); }
.cell.e { --fc: var(--e); --fl: var(--e-l); --fd: var(--e-d); }
.cell.f { --fc: var(--f); --fl: var(--f-l); --fd: var(--f-d); }
.cell.g { --fc: var(--g); --fl: var(--g-l); --fd: var(--g-d); }
.cell.h { --fc: var(--h); --fl: var(--h-l); --fd: var(--h-d); }
.cell.you { --fc: var(--you); --fl: var(--you-l); --fd: var(--you-d); }
.cell.you .rim { stroke-width: 5; }
.cell.is-new { animation: land .22s var(--snap) both; }
@keyframes land {
  0% { transform: scale(1.25, .7); }
  50% { transform: scale(.92, 1.12); }
  100% { transform: scale(1, 1); }
}

/* the clear: the row flashes, its cells pop, everything above drops */
.row.is-clearing .band { fill: var(--flash); opacity: 1; animation: blink .4s var(--snap) both; }
.row.is-clearing .cell { animation: pop-out .4s var(--snap) both; }
.row.is-dropping { animation: drop .32s var(--snap) both; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pop-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes drop {
  0% { transform: translate(0, var(--y0)); }
  100% { transform: translate(0, var(--y1)); }
}

.float {
  font-family: var(--pixel); font-size: 16px; fill: var(--ink); text-anchor: middle;
  animation: float-up 1.3s var(--snap) forwards;
}
.float.burn { fill: var(--burn); }
@keyframes float-up {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ─── the attract screen: the law ─────────────────────────────── */

.attract { background: var(--ink); color: var(--panel); border-top: var(--line) solid var(--ink); position: relative; }
.attract::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: linear-gradient(90deg,
    var(--gold) 0 20%, var(--rose) 20% 40%, var(--lilac) 40% 60%, var(--sky) 60% 80%, var(--mint) 80% 100%);
}
.attract-in { padding: clamp(48px, 5.6vw, 84px) 0; }
.attract-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 540px); gap: 28px; align-items: end; margin-bottom: 34px; }
.attract-title { font-family: var(--pixel); font-size: clamp(20px, 2.6vw, 34px); text-transform: uppercase; color: var(--gold); line-height: 1.5; }
.attract-sub { font-size: 16px; color: #d6cfe6; }
.rules { list-style: none; padding: 0; margin: 0; border-top: 2px dashed rgba(251, 250, 255, .25); }
.rules li { display: grid; grid-template-columns: 62px 1fr; gap: 20px; align-items: start; padding: 18px 0; border-bottom: 2px dashed rgba(251, 250, 255, .25); }
.rules .tag { font-family: var(--pixel); font-size: 12px; padding: 9px 10px; background: var(--gold); color: var(--ink); border: 2px solid var(--panel); justify-self: start; }
.rules p { font-family: var(--pixel); font-size: 12px; line-height: 2; text-transform: uppercase; padding-top: 7px; }
.attract-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; }
.attract-foot p { font-size: 15.5px; color: #d6cfe6; }
.cursor { display: inline-block; width: 10px; height: 16px; background: var(--gold); margin-left: 8px; vertical-align: -2px; animation: blink 1s steps(2, end) infinite; }
.btn-pix {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  font-family: var(--pixel); font-size: 12px; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--gold); border: var(--line) solid var(--panel); border-radius: 4px;
  box-shadow: 4px 4px 0 var(--panel);
  transition: transform .06s var(--snap), box-shadow .06s var(--snap);
}
.btn-pix:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--panel); }

.reveal { opacity: 0; transform: translateX(-8px); transition: opacity .25s var(--snap), transform .25s var(--snap); }
.reveal.in { opacity: 1; transform: none; }

/* ─── the control strip ───────────────────────────────────────── */

.bottom { background: var(--ground-2); border-top: var(--line) solid var(--ink); }
.bottom-in { display: grid; grid-template-columns: auto 1fr; gap: 16px 28px; align-items: center; padding: 26px 0 30px; }
.bottom-links { display: flex; flex-wrap: wrap; gap: 12px; justify-self: end; }
.bottom-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  font-family: var(--pixel); font-size: 12px; text-transform: uppercase; text-decoration: none;
  background: var(--panel); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink);
}
.legal { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; max-width: 96ch; }

/* ─── the manual (the law page) ───────────────────────────────── */

.docs { display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px, 3.6vw, 60px); padding: clamp(30px, 3.4vw, 50px) 0 clamp(64px, 7vw, 100px); align-items: start; }
.toc { position: sticky; top: 20px; background: var(--ground-2); border: var(--line) solid var(--ink); border-radius: 4px; box-shadow: var(--shadow-lg); padding: 16px 14px; }
.toc-head { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px dashed var(--dot); }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.toc a { display: block; padding: 8px 10px; font-size: 14px; font-weight: 500; text-decoration: none; border: 2px solid transparent; }
.toc a:hover { background: var(--panel); }
.toc a.active { background: var(--gold); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

.doc-head { margin-bottom: clamp(30px, 3vw, 46px); }
.doc-head .h1 { font-family: var(--pixel); font-size: clamp(18px, 2.4vw, 30px); text-transform: uppercase; line-height: 1.5; margin-bottom: 14px; }
.doc-head p { color: var(--ink-2); max-width: 64ch; }

.art { margin-bottom: clamp(34px, 3.6vw, 54px); scroll-margin-top: 20px; }
.art h2 { font-family: var(--pixel); font-size: clamp(13px, 1.4vw, 17px); text-transform: uppercase; line-height: 1.6; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.art h2 .n { flex: none; padding: 7px 9px; background: var(--ink); color: var(--panel); font-size: 12px; }
.art h3 { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; margin: 22px 0 8px; line-height: 1.6; }
.art p { margin-bottom: 13px; max-width: 74ch; }
.art ul, .art ol { margin: 0 0 15px; padding-left: 22px; max-width: 74ch; }
.art li { margin-bottom: 7px; }
.art strong { font-weight: 700; }

.panel { background: var(--panel); border: var(--line) solid var(--ink); border-radius: 4px; box-shadow: var(--shadow); padding: 20px 22px; margin: 18px 0 20px; }
.panel.hot { background: #ffe9ec; }
.panel p:last-child { margin-bottom: 0; }

.tbl { width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0 20px; font-size: 14.5px; background: var(--panel); border: var(--line) solid var(--ink); }
.tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 2px dashed var(--dot); vertical-align: top; }
.tbl th { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; color: var(--ink-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .set { font-family: var(--pixel); font-size: 12px; color: var(--gold-d); }
.red { color: var(--burn); font-weight: 700; }

/* the one line read from the chain itself, hidden until the chain answers */
.live { margin-top: 10px; font-size: 13.5px; opacity: .82; line-height: 1.45; }
.live b { font-weight: 700; font-variant-numeric: tabular-nums; opacity: 1; }
.live a { color: inherit; text-underline-offset: 3px; }

/* ─── narrow ──────────────────────────────────────────────────── */

@media (max-width: 1120px) {
  .cabinet { grid-template-columns: minmax(0, 1fr) 300px; }
  .score { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 14px; padding: 14px 18px 12px; }
  .score-head { grid-column: 1 / -1; }
  .sc { border-bottom: 0; }
  .sc .v { text-align: left; }
  .score-foot { grid-column: 1 / -1; margin-top: 6px; }
  .docs { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 880px) {
  .cabinet { grid-template-columns: 1fr; }
  .card { order: 3; }
  .score { grid-template-columns: repeat(2, 1fr); }
  .attract-head { grid-template-columns: 1fr; }
  .bottom-in { grid-template-columns: 1fr; }
  .bottom-links { justify-self: start; }
  .topbar-text { font-size: 24px; }
  .float { font-size: 26px; }
}
@media (max-width: 620px) {
  :root { --line: 2.5px; }
  .wrap { width: calc(100% - 28px); }
  .marquee-in { flex-wrap: wrap; gap: 12px; min-height: 0; padding: 14px 0 16px; }
  .logo .lockup { height: 36px; }
  .switches { display: contents; }
  .switches .coin { order: 0; margin-left: auto; }   /* the coin slot stays on the marquee's first row, at the right of the lockup */
  .switches > :not(.coin) { order: 5; }               /* the other switches wrap under it */
  .coin, .sfx, .switch { min-height: 40px; padding: 0 12px; font-size: 12px; }
  .tagline { padding-top: 26px; }
  .arcade { width: 96px; height: 96px; font-size: 13px; }
  .pad { gap: 26px; }
  .rules li { grid-template-columns: 48px 1fr; gap: 12px; }
}

/* ─── still ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cell.is-new, .row.is-clearing .cell, .row.is-clearing .band, .row.is-dropping, .bump, .cursor { animation: none; }
  .float { animation: none; opacity: 0; }
  .reveal { opacity: 1; transform: none; transition: none; }
}