/* ==========================================================================
   GRAND CITY ONLINE — the LAUNCH layer for the two pages (agent 82).
   Loaded AFTER site.css and meridian.css, so everything here is an override
   or an addition. ⛔ Never edit meridian.css from here — add, don't replace.
   ⛔ No backdrop-filter (it costs a full-screen blur on every scroll frame).
   ========================================================================== */

/* ── the hero: a light key-art JPEG (198 KB, not the 2.4 MB PNG) ───────── */
.fd-keyart {
  background: #28312d url('../art/hero-wide.jpg') 58% 42%/cover no-repeat;
  will-change: transform;
}
/* the living-light pass: tint, headlights, the searchlight, neon. */
#skyline.fd-live {
  position: absolute; inset: 0 0 auto; width: 100%; height: 850px; z-index: 0;
  display: block; pointer-events: none; will-change: transform;
}
.fd-account { backdrop-filter: none; }
/* the casting room's wallpaper: the same photo, 198 KB instead of 2.4 MB */
.fd-create .fd-shade { background: linear-gradient(120deg, #0d151326, transparent), url('../art/hero-narrow.jpg') center/cover; }

/* ── "N in the city" ──────────────────────────────────────────────────── */
.fd-live-pill {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px;
  padding: 7px 13px 7px 11px; border: 1px solid rgba(213,239,114,.32); border-radius: 100px;
  background: rgba(14,20,16,.62); color: #e4ead6; font: 700 9px/1 var(--ui); letter-spacing: 1.7px;
}
.fd-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px #d5ef72; animation: fdPulse 2.6s ease-in-out infinite; }
.fd-live-pill b { color: var(--gold); font-weight: 800; }
.fd-live-pill em { font-style: normal; color: #8f9a88; }
@keyframes fdPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* ── the four feature tiles get painted icons ─────────────────────────── */
.fd-city { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fd-cityintro { grid-column: 1 / -1; padding-bottom: 4px; }
.fd-feature { position: relative; }
.fd-feature .fd-icon { display: block; width: 46px; height: 46px; margin: 14px 0 2px; opacity: .92; }
.fd-feature:hover .fd-icon { opacity: 1; }
.fd-feature:hover { background: linear-gradient(90deg, rgba(213,239,114,.05), transparent 70%); }

/* ── how it works ─────────────────────────────────────────────────────── */
.fd-steps {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px; max-width: 1800px; margin: 0 auto; padding: 34px 4.8% 8px; background: #101411;
}
.fd-steps h2 { grid-column: 1 / -1; margin: 0; font: 500 24px/1.3 var(--ui); letter-spacing: -.8px; }
.fd-steps h2 span { color: var(--gold); }
.fd-step { display: flex; gap: 15px; align-items: flex-start; padding: 16px 16px 16px 0; }
.fd-step .fd-num {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 2px;
  border: 1px solid rgba(213,239,114,.35); color: var(--gold); font: 20px/1 var(--head); letter-spacing: 0;
  transform: skewY(-5deg);
}
.fd-step b { display: block; font: 600 14px/1.4 var(--ui); letter-spacing: -.2px; margin-bottom: 5px; }
.fd-step p { margin: 0; color: #8f998a; font: 10px/1.9 var(--ui); }

/* ── the screenshot strip: real pixels from the running game ──────────── */
.fd-shots {
  position: relative; z-index: 1; max-width: 1800px; margin: 0 auto; padding: 12px 4.8% 40px; background: #101411;
}
.fd-shotshead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.fd-shotshead h2 { margin: 0; font: 500 24px/1.3 var(--ui); letter-spacing: -.8px; }
.fd-shotshead span { color: #7d8a78; font: 600 8px/1 var(--ui); letter-spacing: 1.8px; }
.fd-shotgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fd-shot { margin: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #141b17; }
.fd-shot img { display: block; width: 100%; height: auto; aspect-ratio: 19 / 5; object-fit: cover; background: #0d120f; }
.fd-shot figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; color: #9ba692; font: 11px/1.5 var(--ui);
}
.fd-shot figcaption b { color: var(--ink); font: 600 11px/1.5 var(--ui); }
.fd-shot figcaption span { color: #6f7c6c; font: 600 8px/1 var(--ui); letter-spacing: 1.4px; white-space: nowrap; }

/* ══ create.php ═══════════════════════════════════════════════════════════ */
/* the line-up becomes a roster: a district tag and a card that tilts */
.cr-pick { transform-style: preserve-3d; }
.cr-tag {
  position: absolute; top: 11px; left: 11px; z-index: 2; padding: 5px 8px; border-radius: 2px;
  background: rgba(9,14,11,.72); border: 1px solid rgba(213,239,114,.26); color: var(--gold);
  font: 700 7px/1 var(--ui); font-style: normal; letter-spacing: 1.5px;
}
.cr-pick .cr-shine {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(213,239,114,.10), transparent 62%);
  transition: opacity .25s;
}
.cr-pick:hover .cr-shine { opacity: 1; }
.cr-rosterhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cr-rosterhead .cr-count { color: #7d8a78; font: 600 8px/1 var(--ui); letter-spacing: 1.8px; }

/* the guest banner */
.cr-guest {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 12px 16px;
  border: 1px solid rgba(213,239,114,.24); border-left-width: 3px; border-radius: 3px;
  background: rgba(213,239,114,.05); color: #cdd6c2; font: 11px/1.6 var(--ui);
}
.cr-guest b { color: var(--gold); font-weight: 700; }

/* the name row: a random-name button and the availability read-out */
.cr-namerow { display: flex; gap: 9px; align-items: flex-end; }
.cr-namerow label { flex: 1 1 auto; margin-bottom: 0 !important; }
.cr-dice {
  flex: 0 0 auto; height: 44px; padding: 0 14px; border: 1px solid #b3c89d3d; border-radius: 3px;
  background: #0b120e; color: var(--ink); font: 600 10px/1 var(--ui); letter-spacing: 1px; cursor: pointer;
}
.cr-dice:hover { border-color: var(--gold); color: var(--gold); }
.cr-name-state { min-height: 15px; margin: 7px 0 16px; font: 10px/1.5 var(--ui); color: #8b9785; }
.cr-name-state.ok { color: var(--gold); }
.cr-name-state.bad { color: #ffad9b; }

/* accessory swatches: a painted preview of the piece, not a colour dot */
.cr-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-acc button {
  width: 42px; height: 34px; padding: 0; border: 1px solid #bdcbb526; border-radius: 2px;
  background: #1b251e; color: #9aa893; font: 600 9px/1 var(--ui); cursor: pointer; overflow: hidden;
}
.cr-acc button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cr-acc button:hover { border-color: #c5db8870; }
.cr-acc button.on { border-color: transparent; outline: 2px solid var(--gold); outline-offset: 1px; background: #26321f; }
.cr-note { margin: -6px 0 14px 93px; color: #7f8c79; font: 9px/1.6 var(--ui); }
.cr-note b { color: #a9b79c; font-weight: 700; }
.cr-backline { display: flex; justify-content: flex-start; margin: 14px 0 0; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cr-pick { transition: transform .18s ease, border-color .2s; }
  .cr-pick.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); }
}

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .fd-steps h2, .fd-shotshead h2 { font-size: 21px; }
}
@media (max-width: 900px) {
  .fd-keyart { background-image: url('../art/hero-narrow.jpg'); }
}
@media (max-width: 800px) {
  .fd-city { grid-template-columns: 1fr 1fr; }
  .fd-feature:last-child { grid-column: auto; }
  .fd-steps { grid-template-columns: 1fr; gap: 0; padding: 26px 6% 4px; }
  .fd-step { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .fd-steps .fd-step:last-child { border-bottom: 0; }
  .fd-shots { padding: 10px 6% 34px; }
  .fd-shotgrid { grid-template-columns: 1fr; }
  #skyline.fd-live { height: 720px; }
  .cr-note { margin-left: 0; }
}
@media (max-width: 400px) {
  .fd-city { grid-template-columns: 1fr; }
  .fd-cityintro, .fd-feature:last-child { grid-column: auto; }
  .fd-live-pill { font-size: 8px; letter-spacing: 1.3px; padding: 6px 10px; }
  .fd-shotshead { flex-direction: column; gap: 4px; }
  .fd-shot figcaption { flex-direction: column; align-items: flex-start; gap: 3px; }
  .cr-namerow { flex-wrap: wrap; }
  .cr-dice { width: 100%; }
  .cr-acc button { width: 38px; height: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-live-pill i { animation: none !important; }
}