/* Truckfish Games — design system
   Ink + signal. Dark by intent: this is an arcade, not a document. */

:root {
  /* surfaces, darkest to lightest */
  --ink-900: #06080C;
  --ink-800: #0B0F16;
  --ink-700: #121822;
  --ink-600: #1A2230;
  --ink-500: #232E3E;
  --line:    #2C3949;

  /* text */
  --text:     #E9EEF6;
  --text-dim: #93A2B6;
  --text-mut: #63718A;

  /* signal */
  --teal:      #35E0C8;
  --teal-dim:  #1B8F80;
  --amber:     #FFA02A;
  --amber-hot: #FF7A1A;
  --red:       #FF5F56;
  --green:     #4ADE80;

  /* type */
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --max: 1200px;
  --r:   10px;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- focus: visible, always ---------- */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--teal); color: var(--ink-900); padding: .75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,8,12,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--text); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.nav { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; }
.nav a { color: var(--text-dim); font-size: .9rem; font-weight: 500; }
.nav a:hover { color: var(--text); text-decoration: none; }
/* .nav a out-specifies .btn-teal on its own, which greys out the button label.
   Restate the button colours at matching specificity. */
.nav a.btn-teal { color: var(--ink-900); }
.nav a.btn-buy { color: #1A0D00; }
.nav a.btn-ghost { color: var(--text); }
@media (max-width: 700px) {
  /* The header must never be the thing that scrolls the page sideways. Drop the
     secondary links first, then tighten spacing, and let the CTA keep its width. */
  .nav { gap: .85rem; }
  .nav .hide-sm { display: none; }
  .hdr-in { gap: .85rem; }
  .brand { font-size: 1rem; }
  .brand-mark { width: 24px; height: 24px; }
  .nav .btn { padding: .5rem .8rem; font-size: .84rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.4rem; border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-buy { background: var(--amber-hot); color: #1A0D00; box-shadow: 0 4px 20px -6px rgba(255,122,26,.6); }
.btn-buy:hover { background: var(--amber); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-teal { background: var(--teal); color: var(--ink-900); }
.btn-teal:hover { background: #5BEBD6; }
.btn-lg { padding: 1rem 1.8rem; font-size: 1.05rem; }
.btn-sm { padding: .5rem .9rem; font-size: .85rem; }

/* ---------- eyebrow / chips ---------- */
.eyebrow {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
}
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 100px; border: 1px solid var(--line);
  color: var(--text-dim); background: var(--ink-700);
}
.chip-live { color: var(--green); border-color: rgba(74,222,128,.35); }
.chip-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(3rem, 7vw, 4.5rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(ellipse at 30% 0%, rgba(53,224,200,.13), transparent 60%),
              radial-gradient(ellipse at 75% 10%, rgba(255,122,26,.10), transparent 55%);
  pointer-events: none;
}
.hero-in { position: relative; display: grid; gap: clamp(2rem, 5vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .hero-in { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); } }

.hero h1 { font-size: clamp(2.3rem, 5.5vw, 3.7rem); margin: .8rem 0 1rem; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero-sub { font-size: clamp(1.02rem, 2vw, 1.15rem); color: var(--text-dim); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.hero-note { margin-top: 1.1rem; font-size: .85rem; color: var(--text-mut); }

/* ---------- the playable frame ---------- */
.play-frame {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  background: var(--ink-800); box-shadow: var(--shadow); overflow: hidden;
}
.play-bar {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem;
  border-bottom: 1px solid var(--line); background: var(--ink-700);
  font-family: var(--mono); font-size: .72rem; color: var(--text-mut); letter-spacing: .06em;
}
.play-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-500); }
.play-bar .title { margin-left: .4rem; color: var(--text-dim); text-transform: uppercase; }
.play-bar .right { margin-left: auto; color: var(--teal); }

/* ---------- sample disclosure ----------
   Attached to the play frame, above the fold, in the same eyeline as the thing
   it describes. The whole promise of this storefront is that we don't oversell,
   so this must never be findable-only-if-you-look. */
.sample-note {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem 1rem;
  background: rgba(255,160,42,.09);
  border-bottom: 1px solid rgba(255,160,42,.28);
  font-size: .86rem; line-height: 1.5; color: #F3DCC0;
}
.sample-note svg { flex: none; width: 17px; height: 17px; margin-top: .12rem; fill: var(--amber); }
.sample-note b { color: var(--amber); font-weight: 700; }
.sample-note.standalone { border: 1px solid rgba(255,160,42,.28); border-radius: 10px; margin-top: 1rem; }

/* ---------- real build imagery ----------
   Captioned precisely. A picture from a test harness is not a gameplay
   screenshot, and saying which is which is the point of the whole page. */
.shots { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.shot { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--ink-700); }
.shot img { width: 100%; height: auto; display: block; background: var(--ink-600); }
.shot figcaption { padding: .75rem .9rem .85rem; font-size: .84rem; color: var(--text-dim); line-height: 1.5; }
.shot figcaption b { color: var(--text); font-weight: 600; display: block; margin-bottom: .15rem; }
.shot-wide { grid-column: 1 / -1; }

/* ---------- section ---------- */
.sec { padding: clamp(3rem, 8vw, 5rem) 0; }
.sec-hd { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.sec-hd h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: .6rem 0 .75rem; }
.sec-hd p { color: var(--text-dim); font-size: 1.05rem; margin: 0; }
.sec-alt { background: var(--ink-800); border-block: 1px solid var(--line); }

/* ---------- drop counter ---------- */
.drop {
  display: grid; gap: 1.5rem; align-items: center;
  grid-template-columns: 1fr; padding: 1.5rem; border-radius: 14px;
  border: 1px solid var(--line); background: linear-gradient(135deg, var(--ink-700), var(--ink-800));
}
@media (min-width: 800px) { .drop { grid-template-columns: 1fr auto; padding: 2rem; } }
.drop h3 { font-size: 1.45rem; margin-bottom: .4rem; }
.drop p { color: var(--text-dim); margin: 0; font-size: .95rem; }
.clock { display: flex; gap: .55rem; }
.clock-unit { text-align: center; min-width: 60px; padding: .6rem .5rem; border-radius: 8px; background: var(--ink-900); border: 1px solid var(--line); }
.clock-n { font-family: var(--display); font-size: 1.55rem; font-weight: 700; line-height: 1; color: var(--teal); font-variant-numeric: tabular-nums; }
.clock-l { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mut); margin-top: .3rem; }

/* ---------- game grid ---------- */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.card {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--ink-700); border: 1px solid var(--line);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--teal-dim); box-shadow: var(--shadow); }
.card-art { aspect-ratio: 16/10; position: relative; background: var(--ink-600); overflow: hidden; }
.card-art svg { width: 100%; height: 100%; display: block; }
.card-badge { position: absolute; top: .7rem; left: .7rem; }
.card-body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.card-body h3 a { color: var(--text); }
.card-body h3 a:hover { color: var(--teal); text-decoration: none; }
.card-meta { font-family: var(--mono); font-size: .72rem; color: var(--text-mut); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .7rem; }
.card-body p { color: var(--text-dim); font-size: .92rem; margin-bottom: 1rem; }
.card-foot { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.price { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.price small { font-weight: 500; font-size: .8rem; color: var(--text-mut); }

/* ---------- pricing ---------- */
.tiers { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: stretch; }
.tier { display: flex; flex-direction: column; padding: 1.75rem; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-700); }
.tier-hi { border-color: var(--amber); background: linear-gradient(160deg, rgba(255,122,26,.08), var(--ink-700) 55%); position: relative; }
.tier-tag { position: absolute; top: -11px; left: 1.75rem; background: var(--amber-hot); color: #1A0D00; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 4px; }
.tier h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.tier-price { font-family: var(--display); font-size: 2.5rem; font-weight: 700; line-height: 1; margin: .75rem 0 .25rem; }
.tier-price span { font-size: .95rem; font-weight: 500; color: var(--text-mut); }
.tier-sub { color: var(--text-dim); font-size: .9rem; margin-bottom: 1.25rem; }
.tier ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; }
.tier li { display: flex; gap: .6rem; font-size: .92rem; color: var(--text-dim); align-items: flex-start; }
.tier li::before { content: "\2192"; color: var(--teal); flex: none; font-weight: 700; }
.tier .btn { margin-top: auto; width: 100%; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); background: var(--ink-800); padding: 3rem 0 2rem; margin-top: 2rem; }
.ftr-in { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.ftr h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mut); margin-bottom: .9rem; font-weight: 600; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.ftr a { color: var(--text-dim); font-size: .9rem; }
.ftr a:hover { color: var(--teal); }
.ftr-btm { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; color: var(--text-mut); }

/* ---------- prose (devlog / game pages) ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.6rem; margin: 2.4rem 0 .9rem; }
.prose h3 { font-size: 1.2rem; margin: 1.9rem 0 .7rem; }
.prose p, .prose li { color: var(--text-dim); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--ink-700); padding: .15em .4em; border-radius: 4px; color: var(--teal); }
.prose blockquote { border-left: 3px solid var(--teal-dim); margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; color: var(--text-dim); font-style: italic; }

/* ---------- utility ---------- */
.tac { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }