/* 0.13.400: Paper Jam Arena's landing page (index.html #landing), shown before the game starts loading. Printed-paper look:
   riso ink on cream stock, hard offset shadows, taped prints and rubber-stamp buttons. Phone first; it widens into columns. */
@font-face { font-family: "Luckiest"; src: url("../cine/LuckiestGuy-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Grand"; src: url("../cine/Grandstander-Black.ttf") format("truetype"); font-display: swap; }

#landing {
  --paper: #F4E8CE; --paper-hi: #FFF6E2; --ink: #1A1222; --ink-2: #4A3F57; --pink: #FF48B0; --blue: #4A90E8; --blue-ink: #3255A4;
  --yellow: #FFD21F; --green: #49C46E; --red: #FF4B3E; --orange: #FF7A45; --teal: #00A095;
  position: fixed; inset: 0; z-index: 10; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  background: var(--paper); color: var(--ink); font: 500 17px/1.5 "Grand", system-ui, sans-serif;
  scroll-behavior: smooth; transition: opacity .5s ease, transform .5s ease;
}
#landing.gone { opacity: 0; transform: scale(1.03); pointer-events: none; }
#landing * { box-sizing: border-box; }
#landing a { color: var(--blue-ink); }
#landing a.lp-btn { color: var(--ink); } #landing a.lp-btn.pink { color: var(--paper-hi); } #landing a.lp-down { color: var(--paper-hi); } #landing .lp-work a { color: var(--yellow); }
#landing img { max-width: 100%; display: block; }
/* the paper's grain and a faint halftone over everything */
#landing::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(rgba(26,18,34,.09) 1px, transparent 1.3px); background-size: 7px 7px; }
#landing > section, #landing > footer { position: relative; z-index: 1; }

.lp-wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }
.lp-h2 { font: 400 clamp(30px, 6vw, 56px)/1 "Luckiest", system-ui, sans-serif; letter-spacing: .02em; margin: 0 0 18px;
  color: var(--paper-hi); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 var(--ink); }
.lp-kicker { display: inline-block; font: 400 15px/1 "Luckiest", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: var(--yellow); padding: 7px 10px 5px; transform: rotate(-2deg); margin-bottom: 12px; }
.lp-lead { font-size: clamp(17px, 2.2vw, 21px); max-width: 60ch; color: var(--ink-2); margin: 0 0 22px; }

/* ---------- hero ---------- */
.lp-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: max(24px, env(safe-area-inset-top)) 16px 120px; overflow: hidden;
  background: #F59A1E url("hero.jpg") center bottom / cover no-repeat; border-bottom: 6px solid var(--ink); }
html.op-tall .lp-hero, .lp-hero.tall { background-image: url("hero-tall.jpg"); background-position: center 70%; }
@media (max-aspect-ratio: 4/5) { .lp-hero { background-image: url("hero-tall.jpg"); background-position: center 85%; } }
.lp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(26,18,34,.55) 0 28%, rgba(26,18,34,0) 62%); }
.lp-hero > * { position: relative; z-index: 1; }
.lp-studio { font: 400 14px/1 "Luckiest", sans-serif; letter-spacing: .14em; color: var(--paper-hi); opacity: .9; margin-bottom: 14px;
  text-shadow: 2px 2px 0 var(--ink); }
.lp-logo { margin: 0; font: 400 clamp(54px, 13vw, 150px)/.86 "Luckiest", system-ui, sans-serif; letter-spacing: .02em; transform: rotate(-3deg); }
.lp-logo span { display: inline-block; -webkit-text-stroke: clamp(3px, .6vw, 6px) var(--ink); paint-order: stroke fill;
  text-shadow: .045em .045em 0 var(--blue), .09em .09em 0 var(--ink); animation: lp-bob 3s ease-in-out infinite; }
.lp-logo .l1 span:nth-child(4n+1) { color: var(--yellow); } .lp-logo .l1 span:nth-child(4n+2) { color: var(--pink); }
.lp-logo .l1 span:nth-child(4n+3) { color: #8EC5FF; } .lp-logo .l1 span:nth-child(4n) { color: var(--paper-hi); }
#landing .lp-logo .l2 span:nth-child(odd) { color: var(--paper-hi); } .lp-logo .l2 span:nth-child(even) { color: var(--yellow); }
.lp-logo span:nth-child(3n) { animation-delay: -.6s; } .lp-logo span:nth-child(3n+1) { animation-delay: -1.3s; }
.lp-logo .gap { width: .3em; }
.lp-tag { display: inline-block; margin: clamp(18px, 3vw, 30px) 0 0; max-width: 34ch; background: var(--yellow); border: 3px solid var(--ink);
  padding: 10px 16px 8px; font: 400 clamp(17px, 2.6vw, 24px)/1.15 "Luckiest", sans-serif; letter-spacing: .02em; transform: rotate(1.5deg);
  box-shadow: 5px 5px 0 var(--ink); position: relative; }
.lp-tag::before { content: ""; position: absolute; top: -14px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(255,246,226,.75); border: 1px dashed rgba(26,18,34,.25); }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(22px, 4vw, 38px); }
.lp-btn { appearance: none; cursor: pointer; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px; padding: 12px 26px 10px; border: 4px solid var(--ink); border-radius: 12px; font: 400 clamp(22px, 3.4vw, 30px)/1 "Luckiest", sans-serif;
  letter-spacing: .03em; color: var(--ink); background: var(--yellow); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-1deg);
  transition: transform .12s ease, box-shadow .12s ease; }
.lp-btn small { font: 600 13px/1.2 "Grand", sans-serif; letter-spacing: 0; margin-top: 5px; opacity: .8; }
.lp-btn:hover { transform: rotate(-1deg) translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.lp-btn:active { transform: rotate(-1deg) translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.lp-btn:focus-visible { outline: 4px dashed var(--blue); outline-offset: 4px; }
.lp-btn.pink { background: var(--pink); color: var(--paper-hi); transform: rotate(1deg); -webkit-text-stroke: 1px var(--ink); }
.lp-btn.pink:hover { transform: rotate(1deg) translate(-2px, -2px); } .lp-btn.pink:active { transform: rotate(1deg) translate(4px, 4px); }
.lp-btn.off { background: var(--paper); color: var(--ink-2); cursor: default; box-shadow: 3px 3px 0 var(--ink-2); border-color: var(--ink-2); }
.lp-facts { margin-top: 18px; color: var(--paper-hi); font-weight: 700; font-size: 15px; text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink); }
.lp-skip { margin-top: 10px; color: var(--paper-hi); font-size: 14px; text-shadow: 1px 1px 0 var(--ink); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.lp-skip input { width: 18px; height: 18px; accent-color: var(--pink); }
.lp-down { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; font: 400 14px/1 "Luckiest", sans-serif;
  color: var(--paper-hi); text-shadow: 2px 2px 0 var(--ink); text-decoration: none; animation: lp-bob 1.6s ease-in-out infinite; }

/* ---------- the creature conga ---------- */
.lp-conga { background: var(--ink); border-bottom: 6px solid var(--pink); overflow: hidden; padding: 14px 0 6px; }
.lp-conga-in { display: flex; gap: 18px; width: max-content; animation: lp-march 38s linear infinite; }
.lp-conga img { width: clamp(64px, 11vw, 104px); height: auto; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); animation: lp-boil .5s steps(1) infinite; }
.lp-conga img:nth-child(2n) { animation-delay: -.25s; transform: scaleX(-1); }
.lp-conga p { margin: 8px 0 0; text-align: center; color: var(--yellow); font: 400 clamp(16px, 2.6vw, 22px)/1 "Luckiest", sans-serif; letter-spacing: .05em; }

/* ---------- sections ---------- */
.lp-sec { padding: clamp(56px, 9vw, 110px) 0; border-bottom: 6px solid var(--ink); }
.lp-sec.alt { background: var(--paper-hi); }
.lp-sec.blue { background: var(--blue); }
.lp-sec.blue .lp-lead { color: var(--paper-hi); }
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 3vw, 34px); counter-reset: s; }
.lp-step { background: var(--paper-hi); border: 4px solid var(--ink); border-radius: 6px; box-shadow: 7px 7px 0 var(--ink); padding: 14px 14px 18px; position: relative; }
.lp-step:nth-child(1) { transform: rotate(-1.4deg); } .lp-step:nth-child(2) { transform: rotate(.8deg); } .lp-step:nth-child(3) { transform: rotate(-.6deg); }
.lp-step::before { counter-increment: s; content: counter(s); position: absolute; top: -20px; left: -14px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--pink); color: var(--paper-hi); border: 4px solid var(--ink); font: 400 26px/40px "Luckiest", sans-serif; text-align: center; }
.lp-step img { border: 3px solid var(--ink); border-radius: 4px; aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.lp-step h3 { font: 400 26px/1 "Luckiest", sans-serif; letter-spacing: .02em; margin: 14px 0 6px; }
.lp-step p { margin: 0; color: var(--ink-2); }

/* the prints: taped screenshots that open big */
.lp-prints { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2.6vw, 30px); }
.lp-print { appearance: none; border: 0; padding: 10px 10px 12px; background: var(--paper-hi); box-shadow: 0 0 0 3px var(--ink), 6px 6px 0 3px var(--ink);
  cursor: zoom-in; position: relative; transition: transform .18s ease; text-align: left; font: inherit; color: inherit; }
.lp-print:nth-child(3n+1) { transform: rotate(-1.2deg); } .lp-print:nth-child(3n+2) { transform: rotate(.9deg); } .lp-print:nth-child(3n) { transform: rotate(-.4deg); }
.lp-print:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.lp-print::before { content: ""; position: absolute; top: -12px; left: 50%; width: 70px; height: 22px; transform: translateX(-50%) rotate(3deg);
  background: rgba(255,210,31,.75); border: 1px dashed rgba(26,18,34,.3); }
.lp-print img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.lp-print span { display: block; margin-top: 8px; font: 400 16px/1.1 "Luckiest", sans-serif; letter-spacing: .03em; }

/* dropdowns: index cards that unfold */
.lp-folds { display: grid; gap: 14px; }
.lp-fold { background: var(--paper-hi); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 5px 5px 0 var(--ink); }
.lp-fold summary { list-style: none; cursor: pointer; padding: 16px 52px 14px 18px; font: 400 clamp(19px, 2.6vw, 24px)/1.1 "Luckiest", sans-serif;
  letter-spacing: .02em; position: relative; }
.lp-fold summary::-webkit-details-marker { display: none; }
.lp-fold summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--ink); font: 400 22px/26px "Luckiest", sans-serif; text-align: center; transition: transform .2s; }
.lp-fold[open] summary::after { content: "–"; transform: translateY(-50%) rotate(180deg); background: var(--pink); color: var(--paper-hi); }
.lp-fold summary:focus-visible { outline: 3px dashed var(--blue); outline-offset: 3px; }
.lp-fold > div { padding: 0 18px 16px; color: var(--ink-2); }
.lp-fold > div p { margin: 0 0 10px; }
.lp-fold ul, .lp-fold ol { margin: 0 0 10px; padding-left: 22px; }
.lp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(20px, 4vw, 48px); align-items: start; }

/* get it */
.lp-get { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(18px, 3vw, 30px); }
.lp-card { background: var(--paper-hi); border: 4px solid var(--ink); border-radius: 10px; box-shadow: 8px 8px 0 var(--ink); padding: 22px 20px; }
.lp-card h3 { font: 400 30px/1 "Luckiest", sans-serif; margin: 0 0 8px; letter-spacing: .02em; }
.lp-card p { margin: 0 0 16px; color: var(--ink-2); }
.lp-card .lp-btn { transform: none; width: 100%; }
.lp-card .meta { font-size: 14px; color: var(--ink-2); margin: 10px 0 0; }

/* Damp Digital */
.lp-studio-sec { background: var(--ink); color: var(--paper); }
.lp-studio-sec .lp-lead { color: var(--paper); opacity: .85; }
.lp-studio-sec .lp-h2 { text-shadow: 3px 3px 0 var(--teal), 6px 6px 0 #000; }
.lp-works { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.lp-work { background: #2A2033; border: 3px solid var(--paper); border-radius: 10px; padding: 18px; box-shadow: 6px 6px 0 var(--pink); }
.lp-work:nth-child(2) { box-shadow: 6px 6px 0 var(--teal); }
.lp-work h3 { font: 400 26px/1 "Luckiest", sans-serif; color: var(--yellow); margin: 0 0 6px; letter-spacing: .03em; }
.lp-work p { margin: 0 0 10px; opacity: .9; }
.lp-work a { color: var(--yellow); font-weight: 800; }
.lp-studio-sec .lp-fold { background: #2A2033; color: var(--paper); border-color: var(--paper); box-shadow: 5px 5px 0 #000; }
.lp-studio-sec .lp-fold > div { color: var(--paper); opacity: .9; }

.lp-foot { padding: 40px 0 calc(60px + env(safe-area-inset-bottom)); text-align: center; background: var(--paper); }
.lp-foot p { margin: 8px 0; color: var(--ink-2); font-size: 14px; }

/* the big print */
.lp-lightbox { position: fixed; inset: 0; z-index: 20; background: rgba(26,18,34,.9); display: none; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.lp-lightbox.on { display: flex; }
.lp-lightbox img { max-width: min(1280px, 100%); max-height: 86vh; border: 6px solid var(--paper-hi); box-shadow: 10px 10px 0 var(--pink); }
.lp-lightbox p { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--paper-hi); font: 400 18px/1 "Luckiest", sans-serif; }

@keyframes lp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes lp-boil { 0% { rotate: -1deg; } 50% { rotate: 1deg; } }
@keyframes lp-march { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { #landing *, #landing *::before, #landing *::after { animation: none !important; transition: none !important; } #landing { scroll-behavior: auto; } }
@media (max-width: 520px) { .lp-btn { width: 100%; } .lp-ctas { flex-direction: column; align-items: stretch; width: min(100%, 420px); } }

/* 0.13.401: social links and the small ads for Damp Digital's other things */
.lp-work:nth-child(3) { box-shadow: 6px 6px 0 var(--yellow); }
.lp-socials { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.lp-socials[hidden] { display: none; }
.lp-socials span { font: 400 16px/1 "Luckiest", sans-serif; letter-spacing: .05em; color: var(--yellow); margin-right: 6px; }
#landing .lp-socials a { display: inline-block; padding: 8px 14px 6px; border: 3px solid var(--paper); border-radius: 999px; color: var(--paper);
  font: 400 15px/1 "Luckiest", sans-serif; letter-spacing: .04em; text-decoration: none; transition: background .15s, color .15s; }
#landing .lp-socials a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.lp-socials.foot { justify-content: center; }
#landing .lp-socials.foot a { border-color: var(--ink); color: var(--ink); }
.lp-ads { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin: 26px auto 6px; width: min(720px, 100% - 32px); }
.lp-ads-k { width: 100%; font: 400 14px/1 "Luckiest", sans-serif; letter-spacing: .1em; color: var(--ink-2); }
#landing a.lp-ad { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px 8px; border: 3px solid var(--ink); border-radius: 8px;
  background: var(--paper-hi); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); text-decoration: none; transform: rotate(-1deg); min-width: 200px; transition: transform .12s; }
#landing a.lp-ad:nth-of-type(2) { transform: rotate(1deg); }
#landing a.lp-ad:hover { transform: translate(-2px, -2px); }
.lp-ad b { font: 400 19px/1 "Luckiest", sans-serif; letter-spacing: .03em; }
.lp-ad i { font-style: normal; font-size: 13px; color: var(--ink-2); }

/* 0.13.407: the version at the top, and Buy us a coffee under the hero's buttons */
.lp-vertop { display: inline-block; margin-left: 8px; padding: 3px 8px 2px; background: var(--ink); color: var(--yellow); border-radius: 4px;
  letter-spacing: .04em; font-size: 13px; text-shadow: none; transform: rotate(-2deg); vertical-align: 1px; }
#landing a.lp-coffee { display: inline-flex; flex-direction: column; align-items: center; margin-top: 16px; padding: 9px 18px 7px; background: #FFDD00;
  color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); text-decoration: none;
  font: 400 18px/1 "Luckiest", sans-serif; letter-spacing: .03em; transform: rotate(1deg); transition: transform .12s, box-shadow .12s; }
#landing a.lp-coffee small { font: 600 12px/1.2 "Grand", sans-serif; letter-spacing: 0; margin-top: 3px; opacity: .8; }
#landing a.lp-coffee:hover { transform: rotate(1deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

/* 0.13.408 (Damp: "make sure that strip isn't filled with text. Hard to read ... MUST be looking really cute and fun"): nothing
   in the hero sits bare on the busy art any more. The quick facts are three stickers, the skip box and the scroll hint ride on
   solid ink pills, and the coffee button lives under the creature conga. */
.lp-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 0; margin: 18px 0 0; max-width: 640px; }
.lp-chips li { font: 400 clamp(15px, 2.2vw, 19px)/1 "Luckiest", sans-serif; letter-spacing: .03em; padding: 9px 14px 7px; border: 3px solid var(--ink);
  border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); color: var(--ink); animation: lp-wiggle 3.2s ease-in-out infinite; }
.lp-chips .c1 { background: #8EE6A8; transform: rotate(-3deg); }
.lp-chips .c2 { background: #8EC5FF; transform: rotate(2deg); animation-delay: -1s; }
.lp-chips .c3 { background: var(--paper-hi); transform: rotate(-1deg); animation-delay: -2s; }
.lp-skip { background: rgba(26,18,34,.88); border: 2px solid var(--paper-hi); border-radius: 999px; padding: 7px 14px 6px; margin-top: 14px; text-shadow: none; }
#landing a.lp-down { background: var(--ink); color: var(--yellow); border: 3px solid var(--yellow); border-radius: 999px; padding: 9px 16px 7px; text-shadow: none;
  font-size: 15px; letter-spacing: .04em; bottom: 18px; white-space: nowrap; }
.lp-hero::after { background: radial-gradient(ellipse at 50% 40%, rgba(26,18,34,.55) 0 30%, rgba(26,18,34,0) 64%), linear-gradient(to top, rgba(26,18,34,.35), rgba(26,18,34,0) 30%); }
.lp-coffee-row { text-align: center; padding: 6px 0 12px; }
.lp-conga #landing a.lp-coffee, .lp-coffee-row a.lp-coffee { margin-top: 10px; }
@keyframes lp-wiggle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
/* a short landscape window (a phone on its side): the hero shrinks to fit instead of pushing its buttons off screen */
@media (max-height: 520px) and (orientation: landscape) {
  .lp-hero { padding-top: 14px; padding-bottom: 70px; }
  .lp-logo { font-size: clamp(40px, 9vw, 80px); }
  .lp-tag { margin-top: 10px; font-size: 16px; }
  .lp-ctas { margin-top: 14px; }
  .lp-btn { min-height: 52px; font-size: 22px; }
  .lp-chips { margin-top: 10px; }
}

/* 0.13.409 (Damp: "move lines into ... its own box"): the facts and the skip box sit together in one solid box under the buttons */
.lp-glance { margin-top: 18px; padding: 12px 14px 12px; background: rgba(26,18,34,.9); border: 3px solid var(--paper-hi); border-radius: 14px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: min(640px, 100%); transform: rotate(-.6deg); }
.lp-glance .lp-chips { margin: 0; }
.lp-glance .lp-skip { margin: 0; background: none; border: 0; padding: 0; }

/* 0.13.412: "as Name · Level N" under Play now for a returning player */
.lp-btn small.me { font: 400 15px/1.1 "Luckiest", sans-serif; letter-spacing: .04em; opacity: 1; color: var(--ink); background: var(--paper-hi);
  border: 2px solid var(--ink); border-radius: 999px; padding: 4px 10px 2px; margin-top: 7px; }

/* 0.13.413 (Damp's phone screenshot: "can't read or overlapping things"): "Damp Digital presents" sat on the sunburst's
   lines, and the tape on the tagline covered its first line. The credit is a solid ink strip now, and the tape sits above
   the tagline's top edge, holding it from outside */
.lp-studio { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper-hi); padding: 7px 12px 6px; border-radius: 6px;
  border: 2px solid var(--paper-hi); text-shadow: none; opacity: 1; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
.lp-studio .lp-vertop { margin-left: 2px; background: var(--yellow); color: var(--ink); }
.lp-tag { margin-top: clamp(26px, 4vw, 38px); }
.lp-tag::before { top: -22px; height: 20px; width: 84px; background: rgba(255,246,226,.92); }

/* 0.13.451 (Damp: "polish the splash ... lets users know what this is ... download apk button shouldn't scroll page"): the
   hero says what the game is with three taped prints of a run (Draft, Line up, Watch it chain) under the buttons. The facts
   are one quiet line instead of three wobbling stickers, the logo is a touch smaller so it all fits one screen, and the
   Android button downloads the APK itself. */
.lp-hero { padding-bottom: 92px; gap: 0; }
.lp-logo { font-size: clamp(54px, 11vw, 124px); }
.lp-hero::after { background: radial-gradient(ellipse at 50% 46%, rgba(26,18,34,.62) 0 34%, rgba(26,18,34,0) 70%), linear-gradient(to top, rgba(26,18,34,.55), rgba(26,18,34,0) 34%); }
.lp-btn.pink small { -webkit-text-stroke: 0; }
#landing a.lp-btn.off { pointer-events: none; -webkit-text-stroke: 0; }

.lp-loop { list-style: none; margin: clamp(26px, 4vh, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 220px));
  gap: clamp(14px, 2.4vw, 30px); justify-content: center; width: min(100%, 760px); }
.lp-loop li { position: relative; background: var(--paper-hi); border: 3px solid var(--ink); border-radius: 6px; padding: 7px 7px 10px;
  box-shadow: 5px 5px 0 rgba(26,18,34,.85); text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline;
  animation: lp-deal .6s cubic-bezier(.2, .9, .25, 1.15) backwards; }
.lp-loop li:nth-child(1) { transform: rotate(-2.5deg); animation-delay: .15s; }
.lp-loop li:nth-child(2) { transform: rotate(1.5deg) translateY(-6px); animation-delay: .27s; }
.lp-loop li:nth-child(3) { transform: rotate(-1deg); animation-delay: .39s; }
/* the tape holding each print up */
.lp-loop li::before { content: ""; position: absolute; top: -11px; left: 50%; width: 64px; height: 18px; translate: -50% 0; rotate: -3deg;
  background: rgba(255,246,226,.9); border: 1px dashed rgba(26,18,34,.3); }
.lp-loop li:nth-child(2)::before { rotate: 4deg; background: rgba(255,72,176,.55); }
.lp-loop img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--ink); border-radius: 3px; margin-bottom: 8px; }
.lp-loop b { font: 400 19px/1 "Luckiest", sans-serif; letter-spacing: .03em; color: var(--ink); white-space: nowrap; }
.lp-loop li:nth-child(1) b { color: var(--blue-ink); } .lp-loop li:nth-child(2) b { color: #C21F7F; } .lp-loop li:nth-child(3) b { color: #0E7B3A; }
.lp-loop span { font: 600 13px/1.25 "Grand", sans-serif; color: var(--ink-2); }
/* an arrow between prints: the run goes left to right */
.lp-loop li + li::after { content: ""; position: absolute; left: calc(-1 * clamp(14px, 2.4vw, 30px) + 1px); top: 32%; width: clamp(12px, 2.2vw, 28px); height: 14px;
  translate: 0 -50%; background: var(--yellow); clip-path: polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%);
  filter: drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)); }

.lp-glance { margin-top: clamp(18px, 3vh, 26px); background: none; border: 0; box-shadow: none; padding: 0; transform: none; gap: 8px; }
.lp-facts2 { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; padding: 8px 16px 6px;
  background: var(--ink); color: var(--paper-hi); border-radius: 999px; font: 400 15px/1.1 "Luckiest", sans-serif; letter-spacing: .05em; }
.lp-facts2 i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); display: inline-block; }
.lp-glance .lp-skip { background: rgba(26,18,34,.72); padding: 5px 12px 4px; border-radius: 999px; font-size: 13px; }

@keyframes lp-deal { from { opacity: 0; translate: 0 18px; } }

/* phones: the buttons stack full width, the prints shrink to a row of three under them */
@media (max-width: 620px) {
  .lp-loop { gap: 10px; width: 100%; }
  .lp-loop li { padding: 4px 4px 7px; grid-template-columns: 1fr; box-shadow: 3px 3px 0 rgba(26,18,34,.85); }
  .lp-loop li::before { width: 40px; height: 13px; top: -8px; }
  .lp-loop img { margin-bottom: 5px; }
  .lp-loop b { font-size: 14px; text-align: center; white-space: normal; }
  .lp-loop span { display: none; }
  .lp-loop li + li::after { display: none; }
  .lp-facts2 { font-size: 13px; padding: 7px 12px 5px; }
}
/* short landscape windows: the prints step aside so the buttons stay on screen */
@media (max-height: 560px) and (orientation: landscape) {
  .lp-loop { display: none; }
}

/* 0.13.451 (Damp: "use components found [on forevercomponents.com] to give it sleek themed looks"): our own versions of a few of
   their pieces, printed in the game's inks. Ransom Assembly for the logo, 3D Push and Jelly Press for the buttons, 3D Tilt
   Parallax for the prints, Stencil Notice Ticker for the facts and Confetti Burst on Play. */

/* the logo: a ransom note of cut paper swatches */
.lp-logo { font-size: clamp(40px, min(7.4vw, 8.6vh), 92px); line-height: 1; transform: rotate(-2deg); cursor: pointer; user-select: none; }
.lp-logo .l1, .lp-logo .l2 { display: flex; justify-content: center; gap: .06em; }
.lp-logo .l2 { margin-top: .08em; }
.lp-logo span { padding: .1em .14em 0; border: clamp(2px, .35vw, 4px) solid var(--ink); border-radius: .06em; -webkit-text-stroke: 0; text-shadow: none;
  box-shadow: .05em .06em 0 rgba(26,18,34,.9); animation: none; rotate: var(--r, 0deg); }
#landing .lp-logo .gap { border: 0; box-shadow: none; padding: 0; width: .22em; background: none !important; }
/* swatch and ink per letter: a cut-out from a different print each time */
#landing .lp-logo span:nth-of-type(6n+1) { background: var(--yellow); color: var(--ink); --r: -5deg; }
#landing .lp-logo span:nth-of-type(6n+2) { background: var(--pink); color: var(--paper-hi); --r: 4deg; font-family: "Grand", sans-serif; }
#landing .lp-logo span:nth-of-type(6n+3) { background: var(--paper-hi); color: var(--blue-ink); --r: -2deg; }
#landing .lp-logo span:nth-of-type(6n+4) { background: var(--blue); color: var(--paper-hi); --r: 6deg; font-family: "Grand", sans-serif; }
#landing .lp-logo span:nth-of-type(6n+5) { background: var(--ink); color: var(--yellow); --r: -4deg; border-color: var(--paper-hi); }
#landing .lp-logo span:nth-of-type(6n) { background: var(--green); color: var(--ink); --r: 3deg; }
#landing .lp-logo .l2 span { font-size: 1.12em; }
#landing .lp-logo .l2 span:nth-of-type(odd) { background: var(--paper-hi); color: var(--ink); }
#landing .lp-logo .l2 span:nth-of-type(2) { background: var(--pink); color: var(--paper-hi); }
#landing .lp-logo .l2 span:nth-of-type(4) { background: var(--yellow); color: var(--ink); }
.lp-logo span.in { animation: lp-ransom .9s cubic-bezier(.34, 1.45, .5, 1) backwards; }
@keyframes lp-ransom { from { translate: var(--fx) var(--fy); rotate: var(--fr); } }

/* buttons: a printed block with real thickness that presses down, then wobbles like jelly */
.lp-btn, .lp-btn:hover, .lp-btn:active, .lp-btn.pink, .lp-btn.pink:hover, .lp-btn.pink:active { transform: none; }
.lp-btn { rotate: -1deg; box-shadow: 0 7px 0 var(--ink), 0 14px 22px -6px rgba(26,18,34,.55); translate: 0 0;
  transition: translate .1s ease, box-shadow .1s ease, filter .15s ease; }
.lp-btn.pink { rotate: 1deg; }
.lp-btn:hover { translate: 0 -2px; box-shadow: 0 9px 0 var(--ink), 0 18px 26px -6px rgba(26,18,34,.55); filter: brightness(1.05) saturate(1.08); }
.lp-btn:active { translate: 0 6px; box-shadow: 0 1px 0 var(--ink), 0 4px 8px -4px rgba(26,18,34,.5); }
.lp-btn.jelly { animation: lp-jelly .55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes lp-jelly { 0% { scale: 1 1; } 25% { scale: 1.07 .9; } 50% { scale: .96 1.05; } 75% { scale: 1.02 .98; } 100% { scale: 1 1; } }
.lp-btn.off, .lp-btn.off:hover { box-shadow: 0 3px 0 var(--ink-2); translate: 0 0; filter: none; }

/* the prints: lean toward the mouse, with a shine sliding over the paper */
.lp-loop { perspective: 900px; }
.lp-loop li { transform: rotate(var(--rot, 0deg)) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease; transform-style: preserve-3d; }
.lp-loop li:nth-child(1) { transform: rotate(-2.5deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); --rot: -2.5deg; }
.lp-loop li:nth-child(2) { transform: rotate(1.5deg) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.lp-loop li:nth-child(3) { transform: rotate(-1deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.lp-loop li.tilt { transition: transform .08s linear, box-shadow .3s ease; box-shadow: 8px 12px 0 rgba(26,18,34,.85); z-index: 2; }
.lp-loop .sh { position: absolute; inset: 0; pointer-events: none; border-radius: 4px; opacity: 0; transition: opacity .3s ease; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 30%), rgba(255,255,255,.95), rgba(255,255,255,0) 55%); }
.lp-loop li.tilt .sh { opacity: 1; }

/* the facts: a stencilled ink band with a torn mustard label */
.lp-hero { padding-bottom: 118px; }
#landing a.lp-down { bottom: 64px; }
.lp-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: stretch; height: 46px; background: var(--ink);
  border-top: 4px solid var(--yellow); overflow: hidden; }
.lp-ticker::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(var(--paper-hi) .8px, transparent 1.2px); background-size: 5px 5px; }
.lp-ticker-tag { position: relative; z-index: 2; flex: none; display: flex; align-items: center; padding: 3px 26px 0 16px; background: var(--yellow); color: var(--ink);
  font: 400 17px/1 "Luckiest", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 92% 14%, 100% 30%, 90% 46%, 99% 62%, 91% 78%, 100% 100%, 0 100%); }
.lp-ticker-run { display: flex; width: max-content; animation: lp-tick 30s linear infinite; }
.lp-ticker ul { list-style: none; display: flex; margin: 0; padding: 0; }
.lp-ticker li { display: flex; align-items: center; white-space: nowrap; padding: 3px 0 0; color: var(--paper-hi);
  font: 400 17px/1 "Luckiest", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.lp-ticker li::after { content: ""; width: 9px; height: 9px; margin: 0 22px; border-radius: 50%; background: var(--pink);
  box-shadow: 4px -3px 0 -2px var(--yellow), -5px 3px 0 -3px var(--blue); }
.lp-ticker:hover .lp-ticker-run { animation-play-state: paused; }
@keyframes lp-tick { to { translate: -50% 0; } }

/* Play's confetti: punched paper bits */
.lp-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.lp-confetti i { position: absolute; width: 10px; height: 6px; margin: -3px 0 0 -5px; border: 1.5px solid #1A1222; border-radius: 1px;
  animation: lp-burst 1.1s cubic-bezier(.15, .7, .3, 1) forwards; }
.lp-confetti i.dot { width: 9px; height: 9px; border-radius: 50%; }
@keyframes lp-burst { 70% { opacity: 1; } to { translate: var(--dx) calc(var(--dy) + 120px); rotate: var(--dr); opacity: 0; } }

@media (max-width: 620px) {
  .lp-logo { font-size: clamp(30px, 10.5vw, 56px); }
  .lp-ticker { height: 40px; } .lp-ticker-tag, .lp-ticker li { font-size: 14px; }
  .lp-hero { padding-bottom: 104px; } #landing a.lp-down { bottom: 54px; }
}
@media (max-height: 560px) and (orientation: landscape) { .lp-ticker { height: 34px; } .lp-hero { padding-bottom: 90px; } #landing a.lp-down { bottom: 44px; } }
@media (prefers-reduced-motion: reduce) { .lp-ticker-run { animation: none; } }

/* captions under each print: the verb, then a short line */
.lp-loop li { grid-template-columns: 1fr; row-gap: 3px; }
.lp-loop b { font-size: 18px; }
.lp-tag { margin-top: clamp(20px, 3vh, 34px); }
.lp-ctas { margin-top: clamp(18px, 3vh, 34px); }
.lp-loop { margin-top: clamp(22px, 3.4vh, 38px); grid-template-columns: repeat(3, minmax(0, clamp(150px, 24vh, 220px))); }
@media (max-height: 760px) and (min-width: 621px) { .lp-loop span { display: none; } }

/* 0.13.452: Meet the cast, a swipeable deck of creature cards (after Forever Components' Swipe Card Stack) */
.lp-cast { background: var(--paper-hi); border-bottom: 6px solid var(--ink); padding: clamp(48px, 8vw, 96px) 0; overflow: hidden; }
.lp-cast-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lp-cast-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.lp-btn.small { min-height: 52px; padding: 10px 20px 8px; font-size: 22px; }
.lp-btn.pass { background: var(--paper); }
.lp-cast-count { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.lp-deck { position: relative; width: min(100%, 300px); aspect-ratio: .74; margin: 0 auto; cursor: grab; touch-action: pan-y pinch-zoom; outline: none; }
.lp-deck.held { cursor: grabbing; }
.lp-deck:focus-visible { outline: 4px dashed var(--blue); outline-offset: 10px; border-radius: 16px; }
.lp-card-c { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 14px 14px 18px; user-select: none;
  border: 4px solid var(--ink); border-radius: 14px; background:
    radial-gradient(rgba(26,18,34,.13) 1.2px, transparent 1.6px) 0 0 / 8px 8px,
    linear-gradient(var(--fam) 0 58%, var(--paper-hi) 58%);
  box-shadow: 0 8px 0 var(--ink), 0 18px 30px -10px rgba(26,18,34,.5); will-change: transform; }
.lp-card-c .fam { justify-self: start; background: var(--ink); color: var(--paper-hi); border-radius: 999px; padding: 6px 12px 4px;
  font: 400 14px/1 "Luckiest", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.lp-card-c img { align-self: center; width: 78%; height: auto; max-height: 100%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(4px 5px 0 rgba(26,18,34,.35)); animation: lp-boil .5s steps(1) infinite; }
.lp-card-c .nm { font: 400 clamp(28px, 3vw, 36px)/1 "Luckiest", sans-serif; letter-spacing: .03em; color: var(--ink); text-align: center; }
.lp-card-c .st { position: absolute; top: 58px; padding: 6px 10px 3px; border: 4px solid currentColor; border-radius: 8px; opacity: 0;
  font: 400 26px/1 "Luckiest", sans-serif; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,246,226,.85); }
.lp-card-c .yes { left: 14px; color: #0E7B3A; transform: rotate(-14deg); }
.lp-card-c .no { right: 14px; color: #D3261B; transform: rotate(14deg); }
@media (max-width: 760px) {
  .lp-cast-in { grid-template-columns: 1fr; text-align: center; }
  .lp-cast-btns { justify-content: center; }
  .lp-cast .lp-lead { margin-left: auto; margin-right: auto; }
  .lp-deck { width: min(76%, 270px); order: 2; }
  .lp-cast-copy { display: contents; }
  .lp-cast .lp-h2, .lp-cast .lp-lead { order: 0; } .lp-cast-btns { order: 3; } .lp-cast-count { order: 4; }
}
.lp-deck { width: min(100%, 330px); }
#landing .lp-cast-btns .lp-btn { width: auto; }
@media (max-width: 760px) { .lp-cast-in { gap: 18px; } .lp-cast .lp-h2 { margin-bottom: 0; } .lp-deck { width: min(76%, 270px); margin: 12px auto 18px; } }
/* a short window (a phone on its side): the deck fits the screen height */
@media (max-height: 560px) { .lp-deck { width: min(100%%, 330px, calc((100svh - 70px) * .74)); } .lp-cast { padding: 32px 0; } }