/* ------------------------------------------------------------------
   Grand Theft Friday — shared theme for index.html and fivem.html.

   Restyled to docs/design/styling-guide.dc.html, Claude Design's law for
   this project. The original brief licensed a louder poster treatment here,
   but Darren reversed that decision after seeing it live beside dispatch:
   this page now uses the same dark, precise HUD language as the rest of the
   app. Space Grotesk + Space Mono, the shared semantic tokens and the shared
   6/10/999 radius system remain; panels are flat with fine borders, primary
   actions are simple filled controls, and the wordmark sits directly on the
   ground like dispatch's own mark.

   Shared on purpose: two pages, one set of styles, no drift.
   ------------------------------------------------------------------ */

:root{
  --ground:#0B0D12;
  --panel:#141821;
  --raised:#1B212D;
  --line:#2A3140;
  --ink:#E9EDF3;
  --body:#C6CDD8;
  --dim:#8B94A5;
  --faint:#545E70;
  --police:#57A8FF;
  --police-lt:#8FC4FF;
  --suspect:#FF5348;
  --report:#FFB640;
  --safehouse:#3ED598;

  --font-display:'Space Grotesk',Helvetica,Arial,sans-serif;
  --font-body:'Space Grotesk',Helvetica,Arial,sans-serif;
  --font-mono:'Space Mono','Courier New',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

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

img{max-width:100%}
a{color:var(--police)}
a:hover,a:focus-visible{color:var(--police-lt)}
:focus-visible{outline:3px solid var(--police); outline-offset:3px}
::selection{background:rgba(87,168,255,.35)}

.wrap{width:min(100% - 1.6rem, 680px); margin-inline:auto}

/* --- labels: section 2's rule, any tag <=12px is Mono 700 uppercase ---- */

.kicker{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--report);
  margin:0 0 1rem;
  line-height:1.8;
}

/* --- the logo: plain HUD wordmark -------------------------------- */

.logo{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
}
.logo__w{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.35rem, 8.4vw, 2.6rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--ink);
}
.logo__w--hot{color:var(--police)}

/* --- headings --------------------------------------------------- */

h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(.95rem, 4.2vw, 1.3rem);
  line-height:1.4;
  text-transform:uppercase;
  margin:0 0 .9rem;
  color:var(--ink);
}
/* The old top-down player pointer, as a bullet - guide-silent, kept, and
   recoloured onto the one green in the token set. */
h2::before{
  content:"";
  display:inline-block;
  width:0; height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:10px solid var(--safehouse);
  margin-right:.6em;
  vertical-align:.05em;
}

h3,
h2.h-step{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.92rem;
  line-height:1.5;
  text-transform:uppercase;
  margin:0 0 .55rem;
  color:var(--ink);
}
/* The how-to page has no section h2s, so its step headings must BE the h2s -
   an h3 straight under the h1 skips a level. They keep the small card look
   and lose the section bullet. */
h2.h-step::before{content:none}

/* --- layout ----------------------------------------------------- */

header.top{padding:2.6rem 0 1.4rem}
.tagline{
  margin:1.3rem 0 0;
  font-size:1.08rem;
  line-height:1.5;
  color:var(--ink);
  max-width:30ch;
}
.tagline b{color:var(--report); font-weight:700}

/* .cta-row is a plain div, not a section: a <section> with no heading in it
   is the wrong element for a single button. Same rhythm either way. */
section,.cta-row{padding:1.6rem 0}
p{margin:0 0 .9rem; color:var(--body)}
p:last-child{margin-bottom:0}
p b,strong{color:var(--ink); font-weight:700}

/* --- cards ------------------------------------------------------ */

.cards{display:grid; gap:1rem; margin-top:.2rem}
@media (min-width:620px){ .cards{grid-template-columns:1fr 1fr} }
.cards + p{margin-top:1.1rem}

.card{
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  padding:1rem 1.05rem 1.1rem;
}
.card p{margin:0; font-size:.95rem; color:var(--body)}
.card--robber{border-color:rgba(255,83,72,.5)}
.card--robber h3{color:var(--suspect)}
.card--law{border-color:rgba(87,168,255,.5)}
.card--law h3{color:var(--police)}

/* Official-games roster (Section "Official games"). Same border+heading-tint
   idiom as robber/law above, one modifier per game so the grid reads as a
   set without every card being the same colour. Nick of Time and Whose Line
   stay on the plain .card look on purpose - one is the game the page already
   spends a whole section on, the other is the wildcard slot flagged instead
   by the .kicker label above its heading. */
.card--racing{border-color:rgba(255,182,64,.5)}
.card--racing h3{color:var(--report)}
.card--tri{border-color:rgba(62,213,152,.5)}
.card--tri h3{color:var(--safehouse)}
.card--foodchain{border-color:rgba(255,83,72,.5)}
.card--foodchain h3{color:var(--suspect)}
.card--bangers{border-color:rgba(87,168,255,.5)}
.card--bangers h3{color:var(--police)}

/* Game cards run two or three paragraphs (hook+rules, then start/watch); the
   base .card p rule above zeroes margins for the single-paragraph robber/law
   cards, so stacked paragraphs here need their own gap - same idiom as
   .steps p + p on the how-to page. */
.card p + p{margin-top:.6rem}

/* A .kicker reused inside a card (Whose Line) rather than above the page
   logo - same small amber mono label, no new rule needed. Cards give it no
   bottom margin of its own beyond what the h3 below already carries. */
.card .kicker{margin:0 0 .3rem}

/* --- wanted stars ----------------------------------------------- */

.wanted{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:1.4rem 0 0;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  padding:.5rem .7rem;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}
/* Drawn, not typed: a literal star glyph is off-metric in this pairing too,
   so the clip-path star stays. */
.wanted .stars{display:inline-flex; gap:.2rem; flex:none}
.wanted .stars i{
  width:.8rem; height:.8rem;
  background:var(--police);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.wanted .stars i.off{background:var(--line)}

/* --- buttons / links -------------------------------------------- */
/* Guide section 3's primary button treatment, using Dispatch's own accent
   and hover-lighten colours so the two surfaces read as one app. */

.cta{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:500;
  font-size:1rem;
  line-height:1.6;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:6px;
  background:var(--police);
  color:var(--ground);
  padding:.85em 1.1em .8em;
  border:1px solid var(--police);
}
.cta:hover,.cta:focus-visible{background:var(--police-lt); border-color:var(--police-lt); color:var(--ground)}

.back{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--dim);
  margin-bottom:1.4rem;
}
.back:hover{color:var(--report)}

/* Arrows as CSS triangles, not glyphs - kept regardless of typeface, same
   reasoning as before: a literal "→" is a font-dependent risk not worth
   taking twice. These also echo the top-down player pointer. */
.arw-r::after,.arw-l::before{
  content:"";
  display:inline-block;
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.arw-r::after{border-left:9px solid currentColor; margin-left:.75em; vertical-align:-.02em}
.arw-l::before{border-right:9px solid currentColor; margin-right:.75em; vertical-align:-.02em}

/* --- numbered steps (how-to page) -------------------------------- */

.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:1rem}
.steps li{
  counter-increment:s;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  padding:1rem 1.05rem 1.1rem;
  position:relative;
}
.steps li::before{
  content:counter(s);
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  color:var(--police);
  margin-bottom:.6rem;
}
.steps p{margin:0; font-size:.95rem}
.steps p + p{margin-top:.6rem}

/* (-) 8 Sep 2026: .steps--compact is gone. It existed for index.html's four
   one-line joining steps and nothing else; those came off the front page when
   season one closed, so the modifier had no users left. The base .steps card
   above stays - fivem.html's three multi-paragraph steps are what it was
   built for and they are untouched. */

/* Dispatch's amber warning sheet, promoted here into a proper stop-and-read
   moment because installing Enhanced leaves FiveM with nothing it can run. */
.callout-warn{
  margin:1rem 0 0;
  border-radius:10px;
  border:2px solid rgba(255,182,64,.65);
  border-left:5px solid var(--report);
  background:var(--ground);
  padding:1rem 1rem 1.05rem;
}
.callout-warn__title{
  margin:0 0 .55rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.1rem, 5vw, 1.3rem);
  line-height:1.25;
  text-transform:uppercase;
  color:var(--report);
}
.steps .callout-warn p{
  font-size:1rem;
  line-height:1.55;
  color:var(--report);
}

/* --- the connect command ---------------------------------------- */

.cmd{margin:1.2rem 0 0; border-radius:10px; overflow:hidden; border:1px solid rgba(87,168,255,.5); background:var(--panel)}
.cmd .copy-btn{box-shadow:none}
.cmd__label{
  background:var(--police); color:var(--ground);
  font-family:var(--font-mono); font-weight:700; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.55rem .6rem; line-height:1.6;
}
.cmd code{
  display:block;
  font-family:var(--font-mono);
  /* (~) 8 Sep 2026: was clamp(.95rem, 4.4vw, 1.2rem) with word-break:break-all,
     which fitted while fivem.html's line was `connect gta.dazrave.uk`. The port
     went on the end and at 320px it broke "30120" across two lines mid-digit -
     the exact thing index.html's own .cmd__row code override was written to
     stop, and worse here, because this is the block somebody is reading while
     typing it out by hand. Smaller floor so the whole line fits a 320px phone;
     nowrap plus a LOCAL scrollbar as the last resort below that, which can
     never be what pushes the page itself wider than its viewport. */
  font-size:clamp(.8rem, 3.9vw, 1.2rem);
  color:var(--ink);
  padding:.95rem .75rem;
  white-space:nowrap;
  word-break:normal;
  overflow-x:auto;
  user-select:all;
  -webkit-user-select:all;
}
/* Body font on purpose - in a display face this ran to three shouty lines
   and fought the command it is meant to footnote. */
.cmd__hint{
  margin:0; padding:0 .75rem .85rem;
  font-size:.82rem; line-height:1.45; color:var(--dim);
}

.keycap{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.85em;
  border-radius:6px;
  border:1px solid var(--line);
  padding:.05em .35em;
  color:var(--ink);
  background:var(--raised);
}

/* --- footer ------------------------------------------------------ */

footer{
  margin-top:2.4rem;
  border-top:1px solid var(--line);
  padding:1rem 0 2.4rem;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.68rem;
  line-height:2;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* The two doors (#97). Was inline on the element; here with everything else
   so a change to the row is a change in one file. */
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem}

/* The footer nav (#98). The page had exactly two ways out and a footer that
   was a credit line - "no page is a terminus" was the note. Mono and quiet:
   this is a way back, not a call to action, and the two CTAs above it are
   still the loud ones. */
.foot-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.2rem;
  margin-bottom:.9rem;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.foot-nav a{color:var(--dim); text-decoration:none; border-bottom:1px solid transparent}
.foot-nav a:hover,
.foot-nav a:focus-visible{color:var(--report); border-bottom-color:currentColor}

/* The crew entrance. Deliberately understated - it is a login, and the people
   who need it already know it is there (#97). Was inline on the element. */
.crew-door{position:fixed; bottom:14px; right:16px; z-index:50}
.crew-door a{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 14px;
  background:rgba(11,13,18,.8);
}
.crew-door a:hover,
.crew-door a:focus-visible{color:var(--police)}

/* On a phone the fixed corner link sits on top of the footer nav. Let it
   scroll with the page instead of covering the way out. */
@media (max-width:520px){
  .crew-door{position:static; text-align:center; padding:0 0 1.6rem}
}