/* Pack Rush website — the game's identity: kraft cardboard, packing tape, ink outlines, moulded-plastic buttons,
   Titan One / Lilita One / Nunito. No dark mode (like the game). */
@font-face { font-family: "Lilita"; src: url("/fonts/LilitaOne.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Titan"; src: url("/fonts/TitanOne.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  --orange: #ff7a1a; --orange-d: #d9560a; --blue: #2e8bff; --yellow: #ffc93c; --kraft: #c98a4b; --kraft-l: #e9b276;
  --ink: #1b1a3a; --paper: #fffaf2; --green: #2bd46a; --pink: #ff5aa5; --tape: #f5c86c;
}
* { box-sizing: border-box; }
html { color-scheme: only light; }
body { margin: 0; font-family: "Nunito", system-ui, sans-serif; font-weight: 700; color: var(--ink); line-height: 1.55;
  background: var(--kraft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .18 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  overflow-x: hidden; }
a { color: var(--blue); }
h1, h2 { font-family: "Lilita", sans-serif; font-weight: 400; letter-spacing: .5px; line-height: 1.1; margin: .2em 0 .4em; }
h1 { font-size: clamp(38px, 6vw, 68px); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); transform: skewX(-6deg); }
h1 em { font-style: normal; color: var(--yellow); }
h2 { font-size: clamp(28px, 3.6vw, 42px); }

.top { position: sticky; top: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, calc((100vw - 1140px) / 2)); background: var(--orange); border-bottom: 5px solid var(--ink); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; font-family: "Titan", sans-serif; font-size: 26px;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.brand img { border-radius: 14px; border: 3px solid var(--ink); }
.top nav { display: flex; gap: 8px; }
.top nav a { color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 6px 14px; text-decoration: none;
  box-shadow: 0 4px 0 var(--ink); font-weight: 900; }
.top nav a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

main { max-width: 1140px; margin: 0 auto; padding: 0 16px 40px; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 28px; padding: 40px 0 20px; }
.hero .logo { width: min(520px, 100%); height: auto; filter: drop-shadow(0 8px 0 rgba(27, 26, 58, .35)); }
.lead { font-size: 21px; max-width: 34em; background: var(--paper); border: 4px solid var(--ink); border-radius: 22px; padding: 14px 18px;
  box-shadow: 0 7px 0 var(--ink); position: relative; }
.lead::before { content: ""; position: absolute; left: 50%; top: -14px; width: 120px; height: 26px; margin-left: -60px; background: var(--tape);
  opacity: .9; transform: rotate(-3deg); border-radius: 3px; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.badges span { background: var(--ink); color: var(--yellow); border-radius: 999px; padding: 6px 14px; font-weight: 900; }

.phone { position: relative; justify-self: center; width: min(360px, 82vw); border: 10px solid var(--ink); border-radius: 46px; overflow: hidden;
  background: var(--ink); box-shadow: 0 16px 0 rgba(27, 26, 58, .4); transform: rotate(2deg); }
.phone img { display: block; width: 100%; height: auto; }
.phone.small { width: min(300px, 70vw); transform: rotate(-2deg); }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.store { display: inline-flex; align-items: center; gap: 10px; min-width: 200px; padding: 10px 18px; border-radius: 18px; text-decoration: none;
  color: #fff; background: var(--ink); border: 4px solid var(--ink); box-shadow: 0 6px 0 #000; font-family: "Lilita", sans-serif; font-size: 24px; line-height: 1; }
.store small { display: block; font-family: "Nunito", sans-serif; font-size: 12px; font-weight: 800; opacity: .8; }
.store.soon { background: #3d3b78; cursor: default; }

.card { background: var(--paper); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 var(--ink); }
.feat { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 34px; margin: 46px 0; padding: 30px; position: relative; }
.feat::after { content: ""; position: absolute; right: 40px; top: -16px; width: 140px; height: 30px; background: var(--tape); transform: rotate(4deg); border-radius: 3px; opacity: .9; }
.feat.rev { grid-template-columns: 1fr auto; }
.feat.rev .phone { order: 2; }
.feat p { font-size: 19px; }

.cta { text-align: center; padding: 50px 16px; }
.cta.solo { max-width: 680px; margin: 30px auto; }
.cta h1, .cta h2 { color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
.cta p { font-size: 20px; }
.cta .stores { justify-content: center; }
.mark { width: 110px; height: 110px; }
.btn { display: inline-block; margin-top: 10px; padding: 14px 30px; border-radius: 22px; background: linear-gradient(#5ff07f, #17b956); color: #fff;
  font-family: "Lilita", sans-serif; font-size: 28px; text-decoration: none; border: 5px solid var(--ink); box-shadow: 0 7px 0 var(--ink);
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.code { font-family: "Titan", sans-serif; font-size: 44px; letter-spacing: 6px; background: #fff; display: inline-block; padding: 6px 20px;
  border: 4px dashed var(--ink); border-radius: 16px; }

.sheet { font-size: 18px; max-width: 860px; margin: 56px auto 20px; padding: 46px 34px 30px; position: relative; }
.plaque { position: absolute; left: 50%; top: -34px; transform: translateX(-50%) skewX(-6deg); background: linear-gradient(#ffe04a, #ffa10f);
  border: 5px solid var(--ink); border-radius: 22px; padding: 8px 26px; box-shadow: 0 7px 0 #c55a00, 0 12px 0 var(--ink);
  font-family: "Lilita", sans-serif; font-size: clamp(26px, 4vw, 40px); color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.sheet h2 { font-size: 26px; margin-top: 1.2em; }
.sheet li { margin: .3em 0; }
.muted { opacity: .7; }

footer { text-align: center; padding: 30px 16px 40px; color: var(--ink); }
footer .tape { height: 28px; max-width: 520px; margin: 0 auto 18px; background: var(--tape); transform: rotate(-1.5deg); border-radius: 3px; opacity: .9; }
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 8px; }
.foot a { color: var(--ink); font-weight: 900; }

@media (max-width: 820px) {
  .hero, .feat, .feat.rev { grid-template-columns: 1fr; text-align: center; }
  .feat.rev .phone { order: 0; }
  .hero { padding-top: 24px; }
  .lead { margin: 0 auto; }
  .stores, .badges { justify-content: center; }
  .feat { padding: 22px 16px; gap: 20px; }
  .brand span { display: none; }
  .sheet { padding: 44px 18px 22px; }
}