/* MapTycoon — platform chrome.
   "Operations atlas": every game happens somewhere real, so the launcher is
   styled as a nautical/survey chart room. Layered chart-navies (never flat
   black), graticule lines, survey-brass accents, and a per-game accent hue
   (--ga) that tints each title's chart plate. */

:root {
  --abyss: #081120;
  --chart: #0c1a2b;
  --panel: #12253a;
  --panel-2: #17304a;
  --grid: #1b344d;
  --line: #24425f;
  --ink: #edf4fb;
  --dim: #9ab1c8;
  --faint: #5f7a96;
  --brass: #f5a83c;
  --brass-2: #ff8a3d;
  --good: #2ed3b5;
  --danger: #ff5d52;
  --radius: 16px;
  --shadow: 0 22px 60px -24px rgba(0, 0, 0, 0.75);
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Spline Sans Mono", "Consolas", "Roboto Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--body);
  color: var(--ink);
  background: var(--chart);
}

body {
  min-height: 100%;
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(245, 168, 60, 0.09), transparent 60%),
    radial-gradient(900px 520px at -8% 112%, rgba(46, 211, 181, 0.07), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(154, 177, 200, 0.05) 44px 45px),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(154, 177, 200, 0.05) 44px 45px),
    linear-gradient(165deg, #0e2033, var(--chart) 55%, var(--abyss));
}

a { color: var(--brass); text-decoration: none; }
button { font-family: inherit; }

::selection { background: rgba(245, 168, 60, 0.35); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Brand ---------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 1.3rem;
}
.brand .pin {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--brass), var(--brass-2));
  color: #2a1602;
  font-size: 1.1rem;
  box-shadow: 0 6px 20px -6px rgba(245, 168, 60, 0.75);
}
.brand .tycoon { color: var(--brass); }

/* ---- Shared shapes ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8rem 1.1rem;
  border: none;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--brass), var(--brass-2));
  color: #2a1602;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  transition: transform 0.08s, filter 0.15s, box-shadow 0.15s;
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 8px 26px -10px rgba(245, 168, 60, 0.7); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-ghost {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--faint); box-shadow: none; }
.btn-sm { width: auto; padding: 0.5rem 0.9rem; font-size: 0.85rem; border-radius: 9px; }

.coords {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* ---- Auth screen ------------------------------------------------------------ */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* Drifting contour field behind the sign-in card. */
.contours {
  position: absolute;
  inset: -20%;
  z-index: 0;
  opacity: 0.75;
  animation: drift 90s linear infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 410px;
  background: linear-gradient(180deg, rgba(18, 37, 58, 0.94), rgba(12, 26, 43, 0.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.1rem 2rem 1.9rem;
  backdrop-filter: blur(6px);
  animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.auth-card .brand { margin-bottom: 0.3rem; }
.auth-eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 1.2rem 0 0.2rem;
}
.auth-tag {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.25;
  margin: 0 0 1.5rem;
}
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 0.4rem;
}
.field input {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--abyss);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.95rem;
  font-family: var(--body);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(245, 168, 60, 0.18);
}
.auth-switch {
  margin-top: 1.15rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--dim);
}
.auth-switch button {
  background: none;
  border: none;
  color: var(--brass);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}
.msg { min-height: 1.2rem; font-size: 0.86rem; margin: 0.2rem 0 0.6rem; }
.msg.error { color: var(--danger); }
.msg.ok { color: var(--good); }
.demo-hint {
  margin-top: 1.4rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--faint);
}

/* ---- Top bar (catalog + play) ------------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.5rem;
  background: rgba(8, 17, 32, 0.78);
  border-bottom: 1px solid var(--grid);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .spacer { flex: 1; }

/* Topbar language picker (play shell). */
.lang-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.lang-pick select {
  appearance: none;
  background: rgba(8, 17, 32, 0.6);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.32rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.lang-pick select:hover { border-color: color-mix(in srgb, var(--ga) 55%, var(--line)); }
.lang-pick select:focus-visible { outline: 2px solid var(--ga); outline-offset: 1px; }
@media (max-width: 640px) { .lang-pick span { display: none; } }

/* Language picker on the shell pages (login + catalog). Outside the play shell
   there's no per-game accent, so supply --brass for the hover/focus states. */
.auth-lang,
.home .lang-pick { --ga: var(--brass); }
.auth-lang {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 5;
}
@media (max-width: 640px) { .auth-lang { top: 12px; right: 12px; } }

/* Player chip: level ring + name + XP bar. Clickable → trophies. */
.player-chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(18, 37, 58, 0.7);
  color: var(--ink);
  font-family: var(--body);
  cursor: pointer;
  transition: border-color 0.14s;
}
.player-chip:hover { border-color: var(--brass); }
.player-chip .ptrophies { font-size: 0.78rem; color: var(--brass); }

/* Trophies modal. */
.trophy-modal[hidden] { display: none; }
.trophy-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(6, 12, 22, 0.72);
  backdrop-filter: blur(4px);
}
.trophy-sheet {
  width: min(460px, 100%);
  max-height: 84vh;
  overflow: auto;
  background: linear-gradient(180deg, var(--panel), var(--chart));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.2rem;
  box-shadow: var(--shadow);
}
.trophy-sheet h2 { margin: 0 0 0.2rem; font-family: var(--display); }
.trophy-sub { margin: 0 0 1rem; color: var(--dim); font-size: 0.85rem; }
.trophy {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--grid);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  opacity: 0.55;
}
.trophy.earned { opacity: 1; border-color: color-mix(in srgb, var(--brass) 35%, var(--grid)); }
.trophy .ticon { font-size: 1.3rem; }
.trophy .tbody { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.trophy .tbody b { font-size: 0.9rem; }
.trophy .tbody span { font-size: 0.76rem; color: var(--dim); }
.trophy .txp { font-family: var(--mono); font-size: 0.7rem; color: var(--brass); }
.level-ring {
  --pct: 0%;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--brass);
  background:
    radial-gradient(closest-side, var(--panel) 78%, transparent 79% 100%),
    conic-gradient(var(--brass) var(--pct), var(--grid) 0);
}
.player-chip .pname { font-weight: 600; font-size: 0.88rem; }
.player-chip .pxp {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--faint);
  letter-spacing: 0.04em;
}
.online-chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--good);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.online-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}

/* ---- Compact home top bar ---------------------------------------------------- */
/* The catalog (body.home) gets a slimmer bar and a smaller player/trophies chip
   than the play shell. */
.home .topbar { padding: 0.5rem 1.25rem; gap: 0.7rem; }
.home .brand { font-size: 1.02rem; }
.home .player-chip {
  gap: 0.5rem;
  padding: 0.22rem 0.6rem 0.22rem 0.26rem;
}
.home .player-chip .level-ring {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.68rem;
}
.home .player-chip .pname { font-size: 0.8rem; }
.home .player-chip .pxp { display: none; }        /* level/XP live on the profile now */
.home .player-chip .ptrophies { font-size: 0.72rem; }
.home #logout-btn { padding-block: 0.32rem; }

/* ---- Search bar -------------------------------------------------------------- */
.catalog-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.4rem 0 0.4rem;
  flex-wrap: wrap;
}
.search-box {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 460px;
}
.search-box .sicon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 0.95rem;
  pointer-events: none;
}
.search-box input {
  width: 100%;
  background: rgba(8, 17, 32, 0.6);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 2.4rem 0.6rem 2.5rem;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.search-box input::placeholder { color: var(--faint); }
.search-box input:focus-visible {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 18%, transparent);
}
.search-box .sclear {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 50%;
}
.search-box .sclear:hover { color: var(--ink); }
.search-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  letter-spacing: 0.03em;
}

/* ---- Profile modal ----------------------------------------------------------- */
.profile-modal[hidden] { display: none; }
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(6, 12, 22, 0.72);
  backdrop-filter: blur(4px);
}
.profile-sheet {
  position: relative;
  width: min(680px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: linear-gradient(180deg, var(--panel), var(--chart));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: var(--shadow);
}
.profile-x {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: rgba(8, 17, 32, 0.6);
  border: 1px solid var(--line);
  color: var(--dim);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.profile-x:hover { color: var(--ink); border-color: var(--brass); }
.profile-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.profile-hero .level-ring.lg {
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.1rem;
}
.profile-id h2 { margin: 0 0 0.35rem; font-family: var(--display); }
.pm-xp {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
  letter-spacing: 0.04em;
}
.pm-xp .pm-xp-bar {
  flex: 1;
  max-width: 220px;
  height: 6px;
  border-radius: 999px;
  background: var(--grid);
  overflow: hidden;
}
.pm-xp .pm-xp-bar i {
  display: block;
  height: 100%;
  background: var(--brass);
  border-radius: 999px;
}
.pm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.pm-tile {
  background: rgba(8, 17, 32, 0.5);
  border: 1px solid var(--grid);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}
.pm-tile .tval {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
}
.pm-tile .tlabel {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--dim);
}
.pm-tile .tsub { color: var(--faint); font-weight: 500; font-size: 0.9rem; }
.pm-section { margin-top: 0.4rem; }
.pm-section h3 {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pm-troph-count { font-family: var(--mono); font-size: 0.72rem; color: var(--brass); font-weight: 400; }
/* Per-game cards on the profile page: a mini chart-plate + name/place, a
   headline metric, a campaign-completion bar and a small grid of stats. */
.pm-games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.pm-game {
  --ga: var(--brass);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.7rem;
  border: 1px solid var(--grid);
  border-left: 3px solid var(--ga);
  border-radius: 12px;
  background: rgba(8, 17, 32, 0.4);
  color: var(--ink);
  transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.pm-game:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ga) 55%, var(--line));
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.8);
}
.pm-game .pg-art {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--grid);
  background:
    radial-gradient(120px 80px at 50% 45%, color-mix(in srgb, var(--ga) 16%, transparent), transparent 72%),
    linear-gradient(155deg, var(--panel-2), #0b1929);
}
.pm-game .pg-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-game .pg-main { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pm-game .pg-head { display: flex; flex-direction: column; gap: 1px; }
.pm-game .pg-name { font-family: var(--display); font-weight: 700; font-size: 0.98rem; }
.pm-game .pg-place {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ga);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-game .pg-metric { font-size: 0.8rem; color: var(--dim); }
.pm-game .pg-metric b { font-family: var(--display); color: color-mix(in srgb, var(--ga) 72%, var(--ink)); }
.pm-game .pg-bar { height: 4px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.pm-game .pg-bar i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--ga), color-mix(in srgb, var(--ga) 60%, white));
}
.pm-game .pg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.pm-game .pg-stat { display: flex; flex-direction: column; min-width: 0; }
.pm-game .pg-stat .pv { font-family: var(--mono); font-size: 0.76rem; color: var(--ink); white-space: nowrap; }
.pm-game .pg-stat .pl { font-size: 0.6rem; color: var(--faint); }
.pm-empty { color: var(--faint); font-size: 0.82rem; padding: 0.5rem 0 1rem; }

/* ---- Dedicated profile page --------------------------------------------------- */
.profile-main {
  width: 100%;
  margin: 0 auto;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3.2vw, 2.6rem) 4rem;
}
.topbar .back-link { text-decoration: none; }
.profile-hero.big { margin-bottom: 1.8rem; }
.profile-hero.big .profile-id h1 {
  margin: 0.1rem 0 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}
.profile-hero.big .eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}
.level-ring.xl { width: 4.4rem; height: 4.4rem; font-size: 1.4rem; }
.pm-section h2, .pm-section h3 {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.profile-main .pm-section { margin-bottom: 2rem; }
.pm-hint { margin: -0.4rem 0 0.9rem; color: var(--dim); font-size: 0.8rem; }
.pm-unplayed { margin-top: 0.6rem; }
.pm-unplayed h3 { font-size: 0.9rem; color: var(--dim); margin: 0 0 0.6rem; }
.pm-unplayed-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pm-chip {
  --ga: var(--brass);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--grid);
  border-left: 2px solid var(--ga);
  background: rgba(8, 17, 32, 0.4);
  color: var(--dim);
  transition: color 0.14s, border-color 0.14s, transform 0.14s;
}
.pm-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ga) 55%, var(--line)); transform: translateY(-1px); }
.pm-trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.5rem; }

/* ---- Profile: favorite start locations ---------------------------------------- */
.pm-favs-hint { margin: -0.3rem 0 0.7rem; color: var(--dim); font-size: 0.76rem; }
.pm-fav-add { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.pm-fav-add input {
  flex: 1; min-width: 8rem; padding: 0.5rem 0.65rem;
  background: rgba(8, 17, 32, 0.6); border: 1px solid var(--grid);
  border-radius: 9px; color: var(--ink); font: inherit; font-size: 0.85rem;
}
.pm-fav-add input:first-child { flex: 0 0 9rem; }
.pm-fav-add input:focus { outline: none; border-color: var(--brass); }
.pm-fav-msg { font-size: 0.76rem; color: #ff8a80; margin-bottom: 0.5rem; }
.pm-fav-msg.ok { color: var(--brass); }
.pm-fav-msg[hidden] { display: none; }
.pm-fav-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.4rem; }
.pm-fav {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem; border: 1px solid var(--grid); border-radius: 10px;
  background: rgba(8, 17, 32, 0.4);
}
.pm-fav .pf-ic { font-size: 1.05rem; }
.pm-fav .pf-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-fav .pf-body b { font-size: 0.86rem; }
.pm-fav .pf-body span { font-size: 0.72rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-fav .pf-del {
  background: none; border: 0; color: var(--faint); cursor: pointer;
  font-size: 0.9rem; padding: 0.2rem 0.4rem; border-radius: 6px;
}
.pm-fav .pf-del:hover { color: #ff5d52; background: rgba(255, 255, 255, 0.05); }

/* ---- Profile: referral --------------------------------------------------------- */
.pm-referral { display: flex; flex-direction: column; gap: 0.5rem; max-width: 44rem; }
.pm-ref-item {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.55rem 0.7rem; border: 1px solid var(--grid); border-radius: 10px;
  background: rgba(8, 17, 32, 0.4);
}
.pm-ref-item .pr-label {
  flex: 0 0 6.5rem;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}
.pm-ref-item code {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 0.9rem; color: var(--brass);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Catalog ------------------------------------------------------------------ */
.catalog {
  width: 100%;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1.2rem, 3.2vw, 2.6rem) 4rem;
}
.catalog-head { margin-bottom: 1.4rem; }
.catalog-head .eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.5rem;
}
.catalog-head h1 {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: 0.2px;
}
.catalog-head p { margin: 0; color: var(--dim); max-width: 56ch; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
  gap: 1rem;
}
/* The `display` rules above out-specify the bare [hidden] attribute, so the
   search results grid and the carousels need explicit hide rules to toggle. */
#results[hidden], .rows[hidden] { display: none; }

.card {
  --ga: var(--brass);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--panel), #0e2033);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
  animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.card:hover, .card:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--ga) 65%, var(--line));
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in srgb, var(--ga) 25%, transparent);
}

.card-art {
  position: relative;
  height: clamp(104px, 11vw, 132px);
  background:
    radial-gradient(200px 110px at 50% 45%, color-mix(in srgb, var(--ga) 13%, transparent), transparent 75%),
    linear-gradient(155deg, var(--panel-2), #0b1929);
  border-bottom: 1px solid var(--grid);
}
.card-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-art .stamp {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ga) 80%, white);
  background: rgba(8, 17, 32, 0.72);
  border: 1px solid color-mix(in srgb, var(--ga) 35%, transparent);
  border-radius: 4px;
  padding: 0.22rem 0.45rem;
}
.card-art .tag {
  position: absolute;
  top: 0.65rem;
  left: 0.75rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  background: rgba(8, 17, 32, 0.72);
  color: var(--dim);
  border: 1px solid var(--grid);
}

.card-body { padding: 0.8rem 0.9rem 0.9rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 {
  margin: 0 0 0.12rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.2;
}
.card-body .place {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ga);
  margin: 0 0 0.45rem;
}
/* The synopsis is no longer inline (it's in the hover popover), so anchor the
   Play CTA to the bottom of equal-height cards. */
.card-body .btn { margin-top: auto; }

.card-modes {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.mode-badge {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.24rem 0.5rem;
  border-radius: 5px;
  border: 1px solid var(--grid);
  color: var(--faint);
}
.mode-badge.lit { color: var(--ga); border-color: color-mix(in srgb, var(--ga) 40%, transparent); }

.card-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--dim);
}
.card-progress .stars { color: var(--brass); letter-spacing: 0.12em; }
.card-progress .bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--grid);
  overflow: hidden;
}
.card-progress .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ga), color-mix(in srgb, var(--ga) 60%, white));
  border-radius: 2px;
}

.card .btn { background: linear-gradient(150deg, var(--ga), color-mix(in srgb, var(--ga) 72%, #803c10)); }

.empty {
  grid-column: 1 / -1;
  padding: 3rem;
  text-align: center;
  color: var(--faint);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* ---- Catalog carousels -------------------------------------------------------- */
/* Netflix-style themed rows: a labelled horizontal scroller with edge paddles
   that sit in their own gutters (outside the cards, not over them). */
.rows { display: flex; flex-direction: column; gap: 1.6rem; }

.row { --accent: var(--brass); animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.row-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--accent);
}
.row-label {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: 0.2px;
}
.row-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  letter-spacing: 0.08em;
}

.row-viewport {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: stretch;
  gap: 0.5rem;
}
.row-scroller {
  grid-column: 2;
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding: 0.3rem 0.15rem 0.6rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.row-scroller::-webkit-scrollbar { display: none; }
.row-scroller .card-wrap {
  flex: 0 0 clamp(196px, 62vw, 236px);
  scroll-snap-align: start;
}
.row-scroller .card { animation: none; } /* no per-card stagger inside a scroller */

/* Edge paddles: full-height, in their own gutter columns beside the cards. The
   [disabled] rule hides whichever end is already reached. */
.row-arrow {
  align-self: stretch;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 17, 32, 0.68);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.16s, color 0.16s, border-color 0.16s, background 0.16s;
}
.row-arrow--left { grid-column: 1; }
.row-arrow--right { grid-column: 3; }
.row-arrow:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: var(--panel);
}
.row-arrow[disabled] { opacity: 0; pointer-events: none; }

/* A card + its star toggle. The star is a sibling of the <a> (never nested
   inside it — an anchor may not contain a button), stacked on top of the plate. */
.card-wrap { position: relative; display: flex; }
.card-wrap > .card { flex: 1; }
.card-fav {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(8, 17, 32, 0.72);
  color: var(--dim);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.14s, color 0.14s, border-color 0.14s, background 0.14s;
}
.card-fav:hover { transform: scale(1.12); color: var(--brass); border-color: color-mix(in srgb, var(--brass) 55%, var(--line)); }
.card-fav.is-fav {
  color: var(--brass);
  border-color: color-mix(in srgb, var(--brass) 60%, var(--line));
  background: rgba(245, 168, 60, 0.16);
  text-shadow: 0 0 10px rgba(245, 168, 60, 0.55);
}
/* Give the coordinate stamp room so it doesn't collide with the star. */
.card-wrap .card-art .stamp { right: 3rem; }

@media (max-width: 560px) {
  .row-viewport { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 0.35rem; }
  .row-arrow { font-size: 1.25rem; }
}

/* ---- Play (game host) ----------------------------------------------------------- */
html.play, body.play { height: 100%; overflow: hidden; }
.play-shell { --ga: var(--brass); display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.play-shell .topbar { border-bottom-color: color-mix(in srgb, var(--ga) 30%, var(--grid)); }
.play-frame { flex: 1; border: none; width: 100%; background: var(--chart); }
.play .topbar .title { font-weight: 600; font-family: var(--display); }
.play .topbar .title .sep { color: var(--faint); margin: 0 0.55rem; }
.frame-wrap { position: relative; flex: 1; display: flex; }
.frame-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--chart);
  transition: opacity 0.4s;
  z-index: 5;
}
.frame-loading.done { opacity: 0; pointer-events: none; }
.radar {
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 1px solid var(--grid);
  position: relative;
  overflow: hidden;
}
.radar::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px solid var(--grid);
}
.radar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--ga) 55%, transparent), transparent 70deg);
  animation: sweep 1.6s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.frame-loading .hint {
  position: absolute;
  margin-top: 130px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Chart-plate SVG animations --------------------------------------------------- */
@keyframes mtPulse {
  0% { transform: scale(0.72); opacity: 0.9; }
  100% { transform: scale(1.15); opacity: 0; }
}
.mt-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: mtPulse 3.2s ease-out infinite;
}
.mt-pulse-2 { animation-delay: 0.8s; }
.mt-pulse-3 { animation-delay: 1.6s; }

@keyframes mtBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.mt-blink { animation: mtBlink 2.4s ease-in-out infinite; }
.mt-blink-2 { animation-delay: 0.7s; }
.mt-blink-3 { animation-delay: 1.3s; }

@keyframes mtDash { to { stroke-dashoffset: -48; } }
.mt-dash { animation: mtDash 4s linear infinite; }

/* ---- Motion & small screens ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 560px) {
  .topbar { padding: 0.7rem 1rem; gap: 0.6rem; }
  .player-chip .pname { display: none; }
  .catalog { padding: 1.8rem 1rem 3rem; }
  .play .topbar .title, .play .topbar .coords { display: none; }
  /* The play host bar sits above the game's own (two-row) mobile bar —
     keep it as slim as possible so the game gets the screen. The game shows
     its own brand, so the platform brand goes; labels collapse to icons. */
  .play .topbar { padding: 0.3rem 0.6rem; gap: 0.5rem; }
  .play .topbar .brand { display: none; }
}

/* Label helpers: text on desktop, icon on phones. */
.only-mobile { display: none; }
@media (max-width: 560px) {
  .only-desktop { display: none; }
  .only-mobile { display: inline; }
}

/* Touch ergonomics for the platform chrome. */
html { -webkit-tap-highlight-color: transparent; }
button, select, input, a.btn, .btn { touch-action: manipulation; }
@media (pointer: coarse) {
  .btn, button.btn, a.btn { min-height: 42px; }
  .lang-pick select { min-height: 38px; }
  .row-arrow { min-width: 34px; }
}

/* ---- Compact tiles: synopsis popover ------------------------------------------------- */
/* Tiles no longer carry the synopsis inline (keeps them compact on narrow
   screens). Hovering a tile shows the synopsis in this floating popover, which
   is anchored over the page and never resizes the tile. It's inert so it can't
   steal the pointer. On touch (no hover) the synopsis lives on the game's
   mode-select screen instead. */
.tile-pop {
  position: fixed;
  z-index: 55;
  width: min(300px, 82vw);
  pointer-events: none;
  background: linear-gradient(180deg, var(--panel), #0e2033);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  box-shadow: var(--shadow);
  animation: popfade 0.12s ease both;
}
.tile-pop[hidden] { display: none; }
@keyframes popfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tile-pop .tp-title { display: block; font-family: var(--display); font-weight: 700; font-size: 1rem; }
.tile-pop .tp-place {
  display: block; margin-top: 1px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--brass);
}
.tile-pop .tp-desc { margin: 0.45rem 0 0; color: var(--dim); font-size: 0.82rem; line-height: 1.5; }