/* Weird NJ App — weirdnjapp.com */
:root {
  --bg: #0d0b0b; --bg2: #151010; --panel: #1b1413; --line: #33221f;
  --red: #d8382a; --red2: #9f2118; --orange: #ff963c; --gold: #f0c04a; --cream: #f0e2c8; --text: #cdbd9f; --muted: #8f7f6c; --aqua: #4dd0e1; --green: #46c46f;
  --display: 'Bevan', Georgia, serif; --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 1180px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.65; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url(/img/brand/bg.webp) center top / cover no-repeat; opacity: .10; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% -10%, rgba(216,56,42,.20), transparent 60%), linear-gradient(#0d0b0b00, #0d0b0b 90%); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--aqua); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--cream); line-height: 1.15; letter-spacing: .3px; }
h1 { font-size: clamp(36px, 5.2vw, 66px); text-shadow: 0 3px 0 #7a1d12, 0 10px 40px rgba(216,56,42,.35); }
h2 { font-size: clamp(30px, 4.4vw, 52px); text-shadow: 0 2px 0 #7a1d12; }
h3 { font-size: clamp(20px, 2.4vw, 26px); }
h1 em, h2 em { font-style: normal; color: var(--orange); }
p { margin-bottom: 1em; }
.wrap { width: min(var(--max), 100% - 40px); margin: 0 auto; }
.narrow { width: min(820px, 100% - 40px); margin: 0 auto; }
.eyebrow { display: inline-block; font-family: var(--body); font-weight: 800; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.lede { font-size: clamp(18px, 2vw, 22px); color: #e2d3b6; max-width: 62ch; }
.center { text-align: center; } .center .lede { margin-inline: auto; }
section { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 10px; top: 10px; z-index: 99; background: #fff; color: #000; padding: 8px 14px; }

/* ── nav ── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(13,11,11,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(216,56,42,.28); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav .logo img { height: 40px; width: auto; }
.nav ul { list-style: none; display: flex; gap: 6px; margin-left: auto; align-items: center; }
.nav li { position: relative; }
.nav li > a, .nav li > button { display: block; color: #e6d8bd; font: 800 14px var(--body); letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 14px; background: none; border: 0; cursor: pointer; text-decoration: none; border-radius: 8px; }
.nav li > a:hover, .nav li > button:hover, .nav li > a[aria-current] { color: #fff; background: rgba(216,56,42,.18); }
.nav .drop { position: absolute; top: 100%; left: 0; min-width: 250px; background: #170f0e; border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transform: translateY(6px); transition: .18s; }
.nav li:hover .drop, .nav li:focus-within .drop { opacity: 1; pointer-events: auto; transform: none; }
.nav .drop a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; color: var(--cream); font: 700 15px var(--body); letter-spacing: .3px; text-transform: none; }
.nav .drop a:hover { background: rgba(216,56,42,.2); text-decoration: none; }
.nav .drop img { width: 34px; height: 34px; object-fit: contain; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 12px; font: 400 17px var(--display); letter-spacing: 1px; text-transform: uppercase; color: #fff; background: linear-gradient(#e8493b, #b82a1d); border: 2px solid #f4b3a8; box-shadow: 0 6px 0 #6f160e, 0 14px 30px rgba(216,56,42,.35); text-decoration: none; transition: transform .12s, box-shadow .12s; cursor: pointer; }
.btn:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 8px 0 #6f160e, 0 18px 36px rgba(216,56,42,.45); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #6f160e; }
.btn.ghost { background: rgba(255,255,255,.04); border-color: #6b4a42; box-shadow: none; color: var(--cream); }
.btn.sm { min-height: 42px; padding: 0 18px; font-size: 14px; border-width: 1px; box-shadow: 0 4px 0 #6f160e; }
.nav li > a.btn { display: inline-flex; padding: 0 20px; min-height: 42px; margin-left: 8px; color: #fff; font: 400 14px var(--display); letter-spacing: 1px; background: linear-gradient(#e8493b, #b82a1d); border-radius: 12px; }
.nav li > a.btn:hover { background: linear-gradient(#f0584a, #c4301f); }
.menu-btn { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--line); background: #170f0e; color: var(--cream); font-size: 22px; cursor: pointer; }
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .nav ul { position: fixed; inset: 68px 0 auto 0; background: #120c0b; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px 20px 22px; margin: 0; gap: 2px; max-height: calc(100dvh - 68px); overflow: auto; display: none; }
  .nav ul.open { display: flex; }
  .nav .drop { position: static; opacity: 1; pointer-events: auto; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 14px; }
  .nav li > a, .nav li > button { text-align: left; width: 100%; padding: 14px; }
}

/* ── store badges ── */
.badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.badge { display: inline-block; line-height: 0; transition: transform .15s, filter .15s; }
.badge:hover { filter: brightness(1.12); }
.badge img { height: 56px; width: auto; }
.center .badges { justify-content: center; }

/* ── hero ── */
.hero { padding: clamp(40px, 6vw, 84px) 0 0; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 30px; align-items: center; }
.hero p.lede { margin: 22px 0 30px; }
.hero .fine { margin-top: 18px; font-size: 14px; color: var(--muted); }
/* the floating embers stay fixed behind every page and section, so they are always there as you scroll or jump around */
#embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .footer { position: relative; z-index: 1; }
.hero .wrap { position: relative; z-index: 1; }
.stage { position: relative; height: clamp(460px, 62vw, 700px); }
.stage .glow { position: absolute; left: 50%; top: 50%; width: 90%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,150,60,.32), rgba(216,56,42,.18) 40%, transparent 68%); filter: blur(10px); }
.stage .devil { position: absolute; width: 70%; left: 50%; top: 4%; transform: translateX(-50%); opacity: .0; }
.stage .phone { position: absolute; }
.stage .p1 { width: 46%; left: 27%; top: 3%; z-index: 3; animation: float 7s ease-in-out infinite; }
.stage .p2 { width: 38%; left: -2%; top: 20%; z-index: 2; transform: rotate(-9deg); animation: float2 8s ease-in-out infinite; }
.stage .p3 { width: 38%; right: -2%; top: 24%; z-index: 2; transform: rotate(9deg); animation: float2 9s ease-in-out infinite reverse; }
.stage .cardfan { position: absolute; left: 50%; bottom: -2%; width: 100%; height: 36%; z-index: 4; transform: translateX(-50%); }
.cardfan img { position: absolute; width: 21%; bottom: 0; border-radius: 6%; box-shadow: 0 14px 30px rgba(0,0,0,.7); transition: transform .3s; }
.cardfan img:nth-child(1) { left: 6%; transform: rotate(-16deg) translateY(10%); }
.cardfan img:nth-child(2) { left: 24%; transform: rotate(-7deg); }
.cardfan img:nth-child(3) { left: 40%; transform: rotate(0deg) translateY(-6%); z-index: 2; }
.cardfan img:nth-child(4) { left: 57%; transform: rotate(8deg); }
.cardfan img:nth-child(5) { left: 73%; transform: rotate(17deg) translateY(10%); }
@keyframes float { 50% { transform: translateY(-14px); } }
@keyframes float2 { 50% { transform: translateY(-9px) rotate(var(--r, 0deg)); } }
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; } .hero .badges { justify-content: center; } .hero p.lede { margin-inline: auto; }
  .stage { height: clamp(420px, 110vw, 620px); max-width: 560px; margin: 10px auto 0; width: 100%; }
}

/* ── phones ── */
/* iPhone 14 proportions: body 71.5 x 146.7 mm (ratio 0.487), 6.1" screen 1170 x 2532 (390 x 844 pt) with a 47pt corner radius, bezel about 3.4 mm (4.8% of the phone's width) all round.
   The frame wraps the whole screenshot (its height follows the picture), so nothing is ever cropped. The bezel is measured in container units (cqw)
   so it is always 4.8% of the PHONE's own width, whatever column the phone sits in. */
.phone { position: relative; container-type: inline-size; background: #0a0a0a; border-radius: 15.6% / 7.5%; box-shadow: 0 0 0 1.5px #4a3d39, 0 0 0 4px #1a1313, 0 40px 90px rgba(0,0,0,.75), 0 0 120px rgba(216,56,42,.20); }
.phone::before { content: ""; position: absolute; left: -1.7%; top: 17%; width: 1.2%; height: 5.2%; background: #2b2321; border-radius: 3px 0 0 3px; box-shadow: 0 150% 0 #2b2321; }
.phone::after { content: ""; position: absolute; right: -1.7%; top: 26%; width: 1.2%; height: 8%; background: #2b2321; border-radius: 0 3px 3px 0; }
.phone img { display: block; width: calc(100% - 9.6cqw); height: auto; margin: 4.8cqw; border-radius: 12.1% / 5.6%; }

/* ── stats ── */
.stats { padding: 0; margin-top: clamp(40px, 6vw, 70px); }
.stats .wrap { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(#1b1413, #120d0d); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.stat { padding: 26px 12px; text-align: center; border-right: 1px solid var(--line); } .stat:last-child { border: 0; }
.stat b { display: block; font: 400 clamp(30px, 4vw, 48px) var(--display); color: var(--orange); text-shadow: 0 2px 0 #7a1d12; line-height: 1.1; }
.stat span { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
@media (max-width: 800px) { .stats .wrap { grid-template-columns: repeat(2, 1fr); } .stat { border-bottom: 1px solid var(--line); } .stat:last-child { grid-column: 1 / -1; } }

/* ── waves ── */
.wave { display: block; width: 100%; height: 34px; color: var(--red); }
.sect-head { margin-bottom: clamp(34px, 5vw, 60px); }

/* ── split ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.split.flip .copy { order: 2; }
.split .phones { display: flex; justify-content: center; gap: 4%; align-items: flex-start; }
.split .phones .phone { width: min(44%, 280px); } .split .phones .phone:nth-child(2) { margin-top: 12%; }
.split .phones.one .phone { width: min(70%, 320px); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip .copy { order: 0; } }
.ticks { list-style: none; margin: 22px 0 28px; }
.ticks li { position: relative; padding: 8px 0 8px 38px; color: #e2d3b6; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7d54, #b82a1d); box-shadow: 0 0 0 2px #f4b3a8 inset, 0 3px 8px rgba(0,0,0,.5); }
.ticks li::after { content: ""; position: absolute; left: 8px; top: 18px; width: 9px; height: 5px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }
.ticks li b { color: var(--cream); }

/* ── categories ── */
.catgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.catgrid figure { text-align: center; }
.catgrid img { margin: 0 auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.catgrid figcaption { margin-top: 6px; font: 800 12px var(--body); letter-spacing: 1px; text-transform: uppercase; color: var(--cream); line-height: 1.3; }
@media (max-width: 1000px) { .catgrid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 520px) { .catgrid { grid-template-columns: repeat(4, 1fr); gap: 6px; } .catgrid figcaption { font-size: 9px; letter-spacing: .3px; } }

/* ── cards / grids ── */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 960px) { .cards3, .cards4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cards3, .cards2, .cards4 { grid-template-columns: 1fr; } }
.card { background: linear-gradient(180deg, #1e1514, #150f0f); border: 1px solid var(--line); border-radius: 20px; padding: 28px; position: relative; transition: transform .2s, border-color .2s, box-shadow .2s; }
.card:hover { border-color: #7a2a22; box-shadow: 0 24px 50px rgba(0,0,0,.55), 0 0 40px rgba(216,56,42,.12); }
.card h3 { margin-bottom: 8px; } .card p { margin: 0; font-size: 16px; }
.card .ico { width: 54px; height: 54px; margin-bottom: 16px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #3a1d19, #1f1210); border: 1px solid #5b2a24; font-size: 26px; }
.gamecard { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.gamecard:hover { text-decoration: none; }
.gamecard .top { padding: 30px 20px 10px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, rgba(216,56,42,.28), transparent 70%); }
.gamecard .top img { width: 190px; filter: drop-shadow(0 14px 20px rgba(0,0,0,.6)); }
.gamecard .body { padding: 6px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gamecard .price { font: 400 15px var(--display); color: var(--gold); letter-spacing: 1px; }
.gamecard .more { margin-top: auto; padding-top: 10px; font: 800 14px var(--body); letter-spacing: 2px; text-transform: uppercase; color: var(--aqua); }
.chip { display: inline-block; padding: 4px 12px; border-radius: 99px; border: 1px solid #6b4a42; color: var(--cream); font: 800 12px var(--body); letter-spacing: 1.5px; text-transform: uppercase; background: rgba(255,255,255,.04); }
.chip.hot { background: var(--gold); color: #3a2300; border-color: #ffe08a; }

/* ── card showcase ── */
.showcase { overflow: hidden; background: linear-gradient(#0d0b0b, #160d0c 50%, #0d0b0b); }
.rail { display: flex; gap: 22px; padding: 20px max(20px, calc((100vw - var(--max)) / 2)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.rail .gc { flex: 0 0 min(250px, 62vw); scroll-snap-align: center; position: relative; }
.rail .gc img { border-radius: 6%; box-shadow: 0 20px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04); width: 100%; }
.rail .gc.gold img { box-shadow: 0 20px 44px rgba(0,0,0,.7), 0 0 50px rgba(240,192,74,.38); }
.rail .gc.purple img { box-shadow: 0 20px 44px rgba(0,0,0,.7), 0 0 50px rgba(160,70,230,.42); }
.cardrow { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; }
.cardrow figure { width: min(210px, 42vw); }
.cardrow img { border-radius: 6%; box-shadow: 0 18px 36px rgba(0,0,0,.65); } .cardrow figcaption { text-align: center; font: 800 13px var(--body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--cream); margin-top: 10px; }

/* ── mark & mark ── */
.marks { background: linear-gradient(135deg, #1d1210, #130c0b); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; }
.marks img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.marks .txt { padding: clamp(28px, 5vw, 60px); }
@media (max-width: 860px) { .marks { grid-template-columns: 1fr; } }

/* ── pricing ── */
.price-table { display: grid; gap: 14px; }
.price-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 20px; align-items: center; background: linear-gradient(180deg, #1e1514, #150f0f); border: 1px solid var(--line); border-radius: 18px; padding: 16px 22px; }
.price-row img { width: 84px; height: 84px; object-fit: contain; }
.price-row h3 { font-size: 20px; margin-bottom: 2px; } .price-row p { margin: 0; font-size: 15px; color: var(--text); }
.price-row .amt { font: 400 26px var(--display); color: var(--gold); text-align: right; white-space: nowrap; } .price-row .amt small { display: block; font: 800 11px var(--body); color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
.price-row.free .amt { color: var(--green); }
@media (max-width: 600px) { .price-row { grid-template-columns: 60px 1fr; } .price-row img { width: 60px; height: 60px; } .price-row .amt { grid-column: 1 / -1; text-align: left; } }
.sub-h { font: 800 14px var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--orange); margin: 40px 0 14px; }

/* ── steps ── */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { counter-increment: s; background: #170f0e; border: 1px solid var(--line); border-radius: 18px; padding: 26px; position: relative; }
.step::before { content: counter(s); position: absolute; top: -18px; left: 22px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(#e8493b, #b82a1d); border: 2px solid #f4b3a8; font: 400 20px/36px var(--display); text-align: center; color: #fff; box-shadow: 0 4px 0 #6f160e; }
.step h3 { margin: 6px 0 8px; font-size: 21px; } .step p { margin: 0; font-size: 16px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 34px; } }

/* ── game page hero ── */
.ghero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.ghero .logo { width: min(260px, 60%); margin-bottom: 8px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.6)); }
.ghero .badges { margin-top: 26px; } .ghero .buy { margin-top: 18px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) { .ghero .wrap { grid-template-columns: 1fr; text-align: center; } .ghero .logo { margin-inline: auto; } .ghero .badges, .ghero .buy { justify-content: center; } .ghero .phone { width: min(300px, 70%); margin: 10px auto 0; } .ghero .lede { margin-inline: auto; } }
.mode { display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding: 22px; background: #170f0e; border: 1px solid var(--line); border-radius: 18px; align-items: start; }
.mode .n { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #4a221c, #1f1210); border: 1px solid #6b2f27; font: 400 24px var(--display); color: var(--gold); }
.mode h3 { font-size: 22px; margin-bottom: 4px; } .mode p { margin: 0; font-size: 16px; }
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 800px) { .modes { grid-template-columns: 1fr; } }
.cta-band { text-align: center; background: radial-gradient(ellipse at 50% 0, rgba(216,56,42,.35), transparent 70%), linear-gradient(#160d0c, #0d0b0b); border-block: 1px solid #4a1f1a; }
.cta-band .lede { margin: 16px auto 28px; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; } .center .tag-row { justify-content: center; }
.price-big { font: 400 clamp(38px, 5vw, 56px) var(--display); color: var(--gold); text-shadow: 0 2px 0 #7a5a00; line-height: 1; } .price-big small { font: 800 13px var(--body); letter-spacing: 2px; color: var(--muted); text-transform: uppercase; display: block; margin-top: 8px; text-shadow: none; }
.buybox { background: linear-gradient(180deg, #221615, #160f0f); border: 1px solid #6b2f27; border-radius: 22px; padding: 28px; display: grid; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 60px rgba(216,56,42,.14); }

/* ── FAQ ── */
details { background: #170f0e; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; overflow: hidden; }
summary { cursor: pointer; padding: 20px 56px 20px 24px; font: 400 19px var(--display); color: var(--cream); list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 400 28px var(--display); color: var(--orange); transition: transform .2s; }
details[open] summary::after { content: "–"; }
details[open] { border-color: #7a2a22; } details .a { padding: 0 24px 22px; color: var(--text); } details .a p:last-child { margin-bottom: 0; }

/* ── legal pages ── */
.doc { padding-top: 40px; } .doc h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 10px; }
.doc h2 { font-size: 26px; margin: 38px 0 10px; text-shadow: none; } .doc h3 { font-size: 20px; margin: 22px 0 6px; }
.doc ul, .doc ol { padding-left: 24px; margin-bottom: 1em; } .doc li { margin-bottom: 8px; }
.doc strong { color: var(--cream); } .doc .meta { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.notice { background: #1b1413; border: 1px solid #5b2a24; border-left: 4px solid var(--red); border-radius: 12px; padding: 18px 22px; margin: 22px 0; }

/* ── footer ── */
.footer { background: #0a0808; border-top: 1px solid rgba(216,56,42,.35); padding: 64px 0 36px; font-size: 15px; }
.footer .cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; } @media (max-width: 900px) { .footer .cols { grid-template-columns: 1fr 1fr; } .footer .cols > :first-child { grid-column: 1 / -1; } }
.footer h4 { font: 800 13px var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.footer ul { list-style: none; } .footer li { margin-bottom: 8px; } .footer a { color: #d4c5a8; } .footer a:hover { color: #fff; }
.footer .brand img { height: 56px; width: auto; margin-bottom: 14px; } .footer .brand p { color: var(--muted); max-width: 42ch; font-size: 14px; }
.footer .legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.8; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer .legal b { color: #b9a98d; letter-spacing: 1px; }

/* ── motion ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); background: #1d1413; color: var(--cream); border: 1px solid #7a2a22; padding: 14px 22px; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.6); opacity: 0; transition: .25s; z-index: 99; font-weight: 700; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.noscript-note { padding: 10px; text-align: center; background: #3a1d19; }

/* polish */
h1 + .lede, h2 + .lede, h2 + p { margin-top: 16px; }
.marks img { object-fit: contain; background: #000; }
.footer .badge img { height: 44px; } .footer .brand .badges { gap: 10px; }
.sect-head h2 + .lede { margin-top: 14px; }
.hero .copy h1 { margin-bottom: 0; }

/* ── leaderboards ── */
.lb { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) { .lb { grid-template-columns: 1fr; } }
.lbpanel { background: linear-gradient(180deg, #211615, #140e0e); border: 1px solid #6b2f27; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 80px rgba(216,56,42,.16); }
.lbtabs { display: flex; gap: 6px; padding: 12px 12px 0; overflow-x: auto; scrollbar-width: none; background: #170f0e; border-bottom: 1px solid var(--line); }
.lbtabs::-webkit-scrollbar { display: none; }
.lbtabs button { flex: 0 0 auto; background: none; border: 0; color: var(--muted); font: 400 13px var(--display); letter-spacing: .5px; text-transform: uppercase; padding: 12px 9px; cursor: pointer; border-radius: 10px 10px 0 0; border-bottom: 3px solid transparent; }
.lbtabs button:hover { color: var(--cream); } .lbtabs button[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--red); background: rgba(216,56,42,.10); }
.lbbody { padding: 8px 0 0; min-height: 392px; } .lbbody[hidden] { display: none; }
.lbhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px 12px; }
.lbhead h3 { font-size: 22px; color: var(--gold); } .lbhead span { font: 800 12px var(--body); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); text-align: right; }
.lbmodes { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 22px 10px; } .lbmodes .chip { font-size: 11px; padding: 3px 10px; }
.lbrow { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 13px 22px; border-top: 1px solid #2a1a18; font-weight: 700; }
.lbrow .rk { font: 400 22px var(--display); color: #8a2a21; } .lbrow.r1 .rk { color: var(--gold); } .lbrow.r2 .rk { color: #cfd3d9; } .lbrow.r3 .rk { color: #d99a63; }
.lbrow .nm { color: var(--cream); } .lbrow .sc { color: var(--text); font-size: 15px; white-space: nowrap; } .lbrow .sc b { color: var(--cream); }
.lbrow.you { background: linear-gradient(90deg, rgba(77,208,225,.18), rgba(77,208,225,.04)); border-top-color: #2f6f78; } .lbrow.you .nm::after { content: " \2190  you"; color: var(--aqua); font-weight: 800; font-size: 13px; }
.lbnote { padding: 12px 22px 18px; font-size: 12.5px; color: var(--muted); letter-spacing: .3px; border-top: 1px solid #2a1a18; }
.lbcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; } @media (max-width: 960px) { .lbcards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .lbcards { grid-template-columns: 1fr; } }
.lbcards .card { padding: 22px; text-align: center; } .lbcards .card img { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 10px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.lbcards .card h3 { font-size: 19px; margin-bottom: 6px; } .lbcards .card p { font-size: 14.5px; }

/* graphics are fixed artwork: they do not move on hover, cannot be dragged out as a ghost image and cannot be highlighted */
img, svg, .phone, .gc, .cardrow figure img, .catgrid figure img { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img::selection, .phone::selection, .gc::selection { background: transparent; }