/* Packtrain site: same "FIRST CLASS" identity as the game: cobalt, postage stamps, plastic bricks, ink postmarks. No dark mode. */
@font-face { font-family: Bungee; src: url(/fonts/Bungee.ttf); font-display: swap; }
@font-face { font-family: Rubik; src: url(/fonts/Rubik.ttf); font-display: swap; }
:root { --cobalt:#1f5bff; --cobalt-d:#123aa8; --red:#e3242b; --red-d:#a8141b; --yel:#ffc914; --kraft:#c98f55; --cream:#fff0cf; --paper:#fffaf0; --ink:#141b3d; --soft:#5c6280; --mint:#14b86e; color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Rubik, system-ui, sans-serif; color: var(--ink); background: var(--cobalt); line-height: 1.5; overflow-x: hidden;
  background-image: radial-gradient(circle at 20px 20px, rgba(255,255,255,.09) 3px, transparent 3.5px); background-size: 40px 40px; }
a { color: var(--cobalt); }
img { max-width: 100%; height: auto; display: block; }
header.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; max-width: 1180px; margin: auto; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); font-family: Bungee, sans-serif; font-size: 24px; }
.brand img { border-radius: 14px; border: 3px solid var(--cream); }
header nav a { color: var(--cream); text-decoration: none; margin-left: 16px; font-size: 16px; }
main { max-width: 1180px; margin: auto; padding: 0 20px; }
h1, h2 { font-family: Bungee, sans-serif; font-weight: 400; line-height: 1.08; margin: .3em 0; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 20px 0 50px; }
.hero h1 { color: var(--cream); font-size: clamp(36px, 5.4vw, 66px); text-shadow: 0 5px 0 var(--ink); }
.hero h1 em { color: var(--yel); font-style: normal; }
.lead { color: #fff; font-size: clamp(18px, 2vw, 22px); max-width: 34em; }
.logo { filter: drop-shadow(0 8px 0 rgba(0,0,0,.2)); margin-bottom: 8px; transform: rotate(-2deg); }
.phone { background: var(--ink); padding: 11px; border-radius: 40px; box-shadow: 0 16px 0 rgba(0,0,0,.22), 0 24px 40px rgba(0,0,0,.28); max-width: 340px; margin: auto; transform: rotate(3deg); }
.phone img { border-radius: 30px; width: 100%; }
.phone.small { max-width: 280px; transform: rotate(-3deg); }
.rev .phone.small { transform: rotate(3deg); }
.stores { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0; }
.store { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; padding: 12px 22px 12px 18px; border-radius: 16px; text-decoration: none; font-size: 21px; font-family: Bungee, sans-serif; box-shadow: 0 7px 0 #000; transition: transform .08s, box-shadow .08s; }
.store:active { transform: translateY(5px); box-shadow: 0 2px 0 #000; }
.store small { display: block; font: 12px Rubik, sans-serif; opacity: .8; }
.store.soon { opacity: .92; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.badges span { background: var(--yel); color: var(--ink); padding: 5px 13px; border-radius: 8px; font-size: 15px; transform: rotate(-1deg); }
.stamp { position: relative; padding: 40px;
  background:
    radial-gradient(circle at 50% 0, transparent 7px, var(--paper) 7.5px) 0 0 / 22px 12px repeat-x,
    radial-gradient(circle at 50% 100%, transparent 7px, var(--paper) 7.5px) 0 100% / 22px 12px repeat-x,
    radial-gradient(circle at 0 50%, transparent 7px, var(--paper) 7.5px) 0 0 / 12px 22px repeat-y,
    radial-gradient(circle at 100% 50%, transparent 7px, var(--paper) 7.5px) 100% 0 / 12px 22px repeat-y,
    linear-gradient(var(--paper), var(--paper)) 12px 12px / calc(100% - 24px) calc(100% - 24px) no-repeat; }
.shadow { filter: drop-shadow(0 10px 0 rgba(10,20,70,.3)); }
.feat { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; margin: 56px auto; max-width: 1000px; }
.feat.rev { grid-template-columns: 1fr 300px; }
.feat.rev .phone { order: 2; }
.feat-text h2 { font-size: clamp(27px, 3.2vw, 42px); color: var(--red); }
.feat-text p { font-size: 19px; margin: 0; }
.cta { text-align: center; padding: 60px 0; color: var(--cream); }
.cta h2 { font-size: clamp(32px, 5vw, 60px); text-shadow: 0 5px 0 var(--ink); }
.cta .stores { justify-content: center; }
.spider { width: 120px; margin: 0 auto; }
article.card, .invite { margin: 16px auto 50px; max-width: 840px; }
article h1, .invite h1 { color: var(--red); font-size: clamp(30px, 5vw, 48px); }
article h2 { font-size: 22px; color: var(--cobalt); margin-top: 1.4em; }
.muted { color: var(--soft); }
.btn { display: inline-block; background: var(--red); color: #fff; padding: 11px 20px; border-radius: 13px; text-decoration: none; font-family: Bungee, sans-serif; box-shadow: 0 6px 0 var(--red-d); word-break: break-all; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--red-d); }
.btn.big { font-size: 22px; padding: 16px 28px; }
details { background: #f6efdc; padding: 12px 16px; border-radius: 12px; margin: 10px 0; }
summary { cursor: pointer; }
.invite { text-align: center; }
.invite .stores { justify-content: center; }
.code b { font-family: Bungee, sans-serif; color: var(--cobalt); font-size: 28px; }
footer { background: var(--ink); color: var(--cream); text-align: center; padding: 26px 20px; margin-top: 20px; }
footer .foot { display: flex; flex-wrap: wrap; justify-content: center; }
footer .foot a { color: var(--cream); margin: 0 9px; white-space: nowrap; line-height: 2; }
footer p { margin: 8px 0 0; font-size: 14px; opacity: .8; }
@media (max-width: 800px) {
  .hero, .feat, .feat.rev { grid-template-columns: 1fr; gap: 18px; }
  .feat.rev .phone { order: 0; }
  .hero { text-align: center; padding-top: 6px; }
  .logo { margin-inline: auto; }
  .stores, .badges { justify-content: center; }
  .phone { max-width: 270px; }
  .phone.small { max-width: 230px; }
  .feat-text { text-align: center; }
  .stamp { padding: 30px 24px; }
  header nav a { margin-left: 8px; font-size: 13px; }
  .brand { font-size: 17px; gap: 7px; }
  .brand img { width: 38px; height: 38px; border-radius: 10px; }
  header.top { padding: 10px 14px; }
  main { padding: 0 14px; }
  .store { font-size: 18px; }
}