/* ==========================================================
   2LIFE ROLEPLAY — poster edition
   Surface: paper. Panels: ink + photography, thick keylines.
   Roles: magenta = money & action · cyan = navigation &
   category · hazard = stock & alerts.
   ========================================================== */
:root{
  /* surfaces — deep plum, lit from the top */
  --page:      oklch(0.145 0.045 310);
  --page-lo:   oklch(0.105 0.036 292);
  --grad-page: linear-gradient(170deg, oklch(0.180 0.052 324) 0%, oklch(0.140 0.044 306) 45%, oklch(0.102 0.034 290) 100%);
  --card:      oklch(0.212 0.046 314);
  --card-2:    oklch(0.262 0.050 316);
  --ink:       oklch(0.115 0.035 300);   /* keylines, gaps, shadows, deepest panels */
  --night:     oklch(0.095 0.030 296);
  --edge:      oklch(0.545 0.055 315);   /* borders that need to read on dark */

  /* foreground */
  --text:      oklch(0.945 0.014 320);
  --text-2:    oklch(0.845 0.022 320);
  --text-soft: oklch(0.720 0.032 320);
  --on-accent: oklch(0.130 0.035 300);   /* text sitting on a bright accent */
  --paper:     oklch(0.945 0.014 320);   /* alias kept for light fills */

  /* accents */
  --magenta:    oklch(0.615 0.220 332);
  --magenta-hot:oklch(0.660 0.230 336);
  --grad-hot:   linear-gradient(135deg, oklch(0.455 0.195 336) 0%, oklch(0.315 0.150 294) 100%);
  --grad-hot-2: linear-gradient(135deg, oklch(0.495 0.205 334) 0%, oklch(0.350 0.165 298) 100%);
  --cyan:       oklch(0.720 0.120 226);
  --hazard:     oklch(0.780 0.150 88);

  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body:    'DM Sans', system-ui, sans-serif;
  --type:    'Courier Prime', ui-monospace, monospace;

  --rule: 4px;
  --out: cubic-bezier(0.16,1,0.3,1);

  --z-base:1;
  --z-sticky:100;
  --z-nav:200;
  --z-drawer:300;
  --z-curtain:400;

  --gut: clamp(1rem, 3.5vw, 2.75rem);
  --max: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--page); background-image:var(--grad-page);
  background-repeat:no-repeat; color:var(--text); min-height:100vh;
  font-family:var(--body); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
p{ text-wrap:pretty; }

h1,h2,h3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  line-height:0.92; letter-spacing:-0.005em; margin:0; text-wrap:balance;
}

:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }

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

.skip{ position:absolute; left:-9999px; top:0; z-index:var(--z-curtain);
  background:var(--magenta); color:var(--on-accent); padding:.9rem 1.2rem; font-weight:700; }
.skip:focus{ left:0; }

/* ---------- type utilities ---------- */
.stamp{
  font-family:var(--type); font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.deck{ font-size:1.05rem; color:var(--text-2); max-width:56ch; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:0 1.5rem; border:var(--rule) solid var(--edge);
  background:var(--card-2); color:var(--text); border-radius:3px;
  font-family:var(--display); font-size:1.02rem; text-transform:uppercase;
  letter-spacing:.02em; text-decoration:none; cursor:pointer;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .18s var(--out), box-shadow .18s var(--out), background-color .2s var(--out);
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--ink); }
.btn--go{ background:var(--magenta); color:var(--on-accent); }
.btn svg{ width:20px; height:20px; flex:none; }
.btn--sm{ min-height:44px; padding:0 1rem; font-size:.9rem; border-width:3px; box-shadow:3px 3px 0 var(--ink); }
.btn--sm:hover{ box-shadow:1px 1px 0 var(--ink); }

/* ==========================================================
   ENTRY — ink card slides off the poster
   ========================================================== */
.curtain{
  position:fixed; inset:0; z-index:var(--z-curtain); background:var(--night);
  display:grid; place-items:center;
  animation:curtain-lift .6s var(--out) 1.15s forwards;
}
.curtain img{ width:min(360px,66vw); animation:mark 1s var(--out) both; }
@keyframes mark{ from{ opacity:0; transform:translateY(14px) scale(1.06); } to{ opacity:1; transform:none; } }
@keyframes curtain-lift{ to{ transform:translateY(-101%); } }
@media (prefers-reduced-motion:reduce){ .curtain{ display:none; } }

/* ==========================================================
   NAV — solid ink bar
   ========================================================== */
.nav{ position:sticky; top:0; z-index:var(--z-nav); background:var(--ink); color:var(--text); }
.nav__in{ display:flex; align-items:center; gap:1.25rem; height:72px; }
.nav__mark img{ height:24px; width:auto; }
.nav__mark{ display:flex; align-items:center; text-decoration:none; flex:none; }
.nav__links{ display:flex; align-items:center; gap:.2rem; margin-left:auto; }
.nav__links a{
  font-family:var(--type); font-weight:700; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--text);
  padding:.7rem .9rem; min-height:44px; display:inline-flex; align-items:center;
  border-bottom:3px solid transparent; transition:color .2s var(--out), border-color .2s var(--out);
}
.nav__links a:hover{ color:var(--cyan); border-bottom-color:var(--cyan); }
.nav__cta{
  flex:none; font-family:var(--display); text-transform:uppercase; font-size:.95rem;
  background:var(--magenta); color:var(--on-accent); text-decoration:none;
  padding:.7rem 1.1rem; min-height:44px; display:inline-flex; align-items:center; gap:.5rem;
  border-radius:3px; transition:background-color .2s var(--out);
}
.nav__cta:hover{ background:var(--cyan); color:var(--on-accent); }
.nav__cta svg{ width:18px; height:18px; }
.burger{ display:none; margin-left:auto; width:46px; height:46px; background:transparent;
  border:3px solid var(--paper); color:var(--text); cursor:pointer; border-radius:3px; }
.burger span{ display:block; width:18px; height:2px; background:currentColor; margin:3px auto; }
.only-drawer{ display:none; }

@media (max-width:940px){
  .nav__links{
    position:fixed; inset:72px 0 auto; z-index:var(--z-drawer); flex-direction:column;
    align-items:stretch; gap:0; margin:0; padding:0 var(--gut) 1.2rem; background:var(--ink);
    border-bottom:var(--rule) solid var(--magenta);
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .22s var(--out), transform .22s var(--out);
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:1rem .1rem; font-size:.95rem; border-bottom:1px solid oklch(0.30 0.03 272); }
  .only-drawer{ display:flex; color:var(--magenta); }
  .burger{ display:block; }
  .nav__cta{ display:none; }
}

/* ==========================================================
   HERO — panel collage. The gap IS the keyline.
   ========================================================== */
.stage{ padding-top:clamp(1rem,2.5vw,2rem); }
.collage{
  display:grid; gap:var(--rule); background:var(--ink); border:var(--rule) solid var(--ink);
  grid-template-columns:1fr; border-radius:4px; overflow:hidden;
}
@media (min-width:900px){ .collage{ grid-template-columns:1.85fr 1fr; } }

.panel{ position:relative; background:var(--card); padding:clamp(1.3rem,2.6vw,2.2rem); }

/* main photographic panel */
.panel--shot{
  background:url('images/hero-poster.jpg') center 30% / cover no-repeat oklch(0.60 0.06 306);
  background-blend-mode:multiply;
  color:var(--text); display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(400px,62vh,620px); overflow:hidden;
}
.panel--shot::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, oklch(0.105 0.036 296 / .96) 6%, oklch(0.115 0.038 300 / .62) 52%, oklch(0.115 0.038 300 / .22) 92%);
}
.panel--shot > *{ position:relative; z-index:var(--z-base); }
.panel--shot h1{
  font-size:clamp(2.35rem,6.6vw,5.6rem);
  text-shadow:5px 5px 0 var(--magenta-hot);
  margin-bottom:.9rem;
}
.panel--shot h1 span{ color:var(--cyan); text-shadow:5px 5px 0 var(--ink); }
.panel--shot p{ max-width:46ch; font-size:1.03rem; color:oklch(0.92 0.01 265); margin:0 0 1.4rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
.panel--shot .btn{ border-color:var(--text); box-shadow:5px 5px 0 var(--paper); }
.panel--shot .btn:hover{ box-shadow:2px 2px 0 var(--paper); }
.panel--shot .btn--ghost{ background:transparent; color:var(--text); }
.panel--shot .btn--ghost:hover{ background:var(--paper); color:var(--on-accent); }

/* side stack */
.side{ display:grid; gap:var(--rule); grid-template-rows:auto auto 1fr; }
@media (max-width:899px){ .side{ grid-template-rows:none; } }

.panel--live{ background-image:var(--grad-hot-2); color:var(--text); display:flex; flex-direction:column; justify-content:center; }
.panel--live .stamp{ display:flex; align-items:center; gap:.5rem; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--hazard); animation:blink 1.9s steps(1,end) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }
@media (prefers-reduced-motion:reduce){ .dot{ animation:none; } }
.count{ font-family:var(--display); font-size:clamp(3rem,7vw,4.6rem); line-height:.85; margin:.6rem 0 .2rem; }
.count b{ font-weight:400; }
.count i{ font-style:normal; font-size:.4em; }
.panel--live p{ margin:0; font-family:var(--type); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

.panel--cnx{ background:var(--night); color:var(--text); }
.panel--cnx .stamp{ color:var(--cyan); display:block; margin-bottom:.6rem; }
.cnx{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.cnx code{ font-family:var(--type); font-size:.92rem; color:var(--text); word-break:break-all; }
.cnx button{
  font-family:var(--type); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--cyan); color:var(--on-accent); border:none; border-radius:2px;
  padding:.6rem .8rem; min-height:40px; cursor:pointer; transition:background-color .2s var(--out);
}
.cnx button:hover{ background:var(--paper); }
.cnx button[data-copied]{ background:var(--hazard); }

.panel--apply{
  background-image:var(--grad-hot); color:var(--text); text-decoration:none;
  display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem;
  min-height:150px; transition:background-color .25s var(--out);
}
.panel--apply:hover{ background-image:none; background-color:var(--ink); }
.panel--apply h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); }
.panel--apply .arrow{ font-family:var(--display); font-size:2rem; line-height:1; align-self:flex-end;
  transition:transform .3s var(--out); }
.panel--apply:hover .arrow{ transform:translateX(8px); }

/* ---------- ticker ---------- */
.ticker{
  background-image:var(--grad-hot); color:var(--text);
  border-block:var(--rule) solid var(--ink);
  overflow:hidden; margin-top:var(--rule);
}
.ticker__track{ display:flex; width:max-content; animation:roll 34s linear infinite; }
.ticker__track > span{
  font-family:var(--display); text-transform:uppercase; font-size:1.05rem; letter-spacing:.02em;
  padding:.7rem 0; display:flex; align-items:center; gap:2.2rem; white-space:nowrap;
}
.ticker__track > span::after{ content:'◆'; font-size:.7em; }
.ticker__track > span > b{ font-weight:400; padding-left:2.2rem; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes roll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* ==========================================================
   SECTIONS
   ========================================================== */
.sec{ padding-block:clamp(3.5rem,7vw,6rem); }
.sec--ink{ background:var(--ink); color:var(--text); }
.sec--tint{ background:var(--page-lo); }

.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem 2rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.head h2{ font-size:clamp(2.1rem,5.6vw,4rem); }
.head .deck{ margin:.8rem 0 0; }
.sec--ink .deck{ color:oklch(0.84 0.01 265); }

/* ---------- news ---------- */
.news{ display:grid; gap:var(--rule); background:var(--ink); border:var(--rule) solid var(--ink); border-radius:4px; overflow:hidden; }
@media (min-width:880px){ .news{ grid-template-columns:repeat(2,1fr); } }
.post{ background:var(--card); padding:clamp(1.2rem,2.4vw,1.9rem); text-decoration:none; color:inherit; display:block;
  transition:background-color .25s var(--out); }
.post:hover{ background:var(--card-2); }
.post--big{ grid-column:1 / -1; display:grid; gap:0; padding:0; }
@media (min-width:880px){ .post--big{ grid-template-columns:1.1fr 1fr; } }
.post--big .post__shot{ background:url('images/panel-city.jpg') center 35% / cover no-repeat oklch(0.58 0.06 306);
  background-blend-mode:multiply; min-height:230px; }
.post--big .post__txt{ padding:clamp(1.4rem,2.6vw,2.2rem); }
.post__meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.9rem; }
.tag{ font-family:var(--type); font-weight:700; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--text); padding:.25rem .5rem; border-radius:2px; }
.tag--event{ background:var(--magenta); color:var(--on-accent); }
.tag--econ{ background:var(--cyan); color:var(--on-accent); }
.date{ font-family:var(--type); font-size:.75rem; color:var(--text-soft); }
.post h3{ font-size:1.5rem; margin-bottom:.5rem; }
.post--big h3{ font-size:clamp(1.7rem,3.2vw,2.4rem); }
.post p{ margin:0; color:var(--text-2); font-size:.97rem; }
.post--sm h3{ font-size:1.22rem; }
.post--sm p{ font-size:.93rem; }

/* ---------- rules: the dossier ---------- */
.dossier{ display:grid; gap:var(--rule); background:var(--card); border:var(--rule) solid var(--card); border-radius:4px; max-width:960px; }
.rule{ background:var(--ink); color:var(--text); }
.rule summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.3rem; min-height:58px;
  font-family:var(--display); font-size:1.25rem; text-transform:uppercase;
  transition:background-color .2s var(--out), color .2s var(--out);
}
.rule summary::-webkit-details-marker{ display:none; }
.rule summary:hover{ background:var(--card); color:var(--text); }
.rule[open] summary{ background:var(--cyan); color:var(--on-accent); }
.rule__no{ font-family:var(--type); font-weight:700; font-size:.85rem; flex:none; }
.rule__ct{ margin-left:auto; font-family:var(--type); font-size:.72rem; font-weight:700; opacity:.7; }
.rule__x{ flex:none; width:13px; height:13px; border-right:3px solid currentColor; border-bottom:3px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s var(--out); }
.rule[open] .rule__x{ transform:rotate(-135deg) translate(-3px,-3px); }
.rule__body{ background:var(--card); color:var(--text); padding:1.4rem 1.3rem; }
.rule__body ol{ margin:0; padding:0; list-style:none; display:grid; gap:.9rem; }
.rule__body li{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:baseline; font-size:.98rem; color:var(--text-2); }
.rule__body li b{ font-family:var(--type); font-weight:700; font-size:.8rem; color:var(--text); }
.dossier__foot{ margin-top:1.6rem; font-size:.95rem; color:oklch(0.78 0.01 265); max-width:60ch; }

/* ---------- store: the catalogue ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; }
.filters button{
  font-family:var(--display); text-transform:uppercase; font-size:.95rem; letter-spacing:.02em;
  background:var(--card); color:var(--text); border:3px solid var(--edge); border-radius:3px;
  padding:.55rem 1rem; min-height:46px; cursor:pointer;
  transition:background-color .2s var(--out), transform .18s var(--out);
}
.filters button:hover{ transform:translateY(-2px); }
.filters button[aria-pressed="true"]{ background:var(--magenta); color:var(--on-accent); border-color:var(--magenta); }
.filters span{ font-family:var(--type); font-size:.75rem; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.5rem; }

.item{ display:flex; flex-direction:column; background:var(--card); border:var(--rule) solid var(--ink);
  border-radius:4px; transition:transform .25s var(--out); }
.item:hover{ transform:translateY(-5px); }
.item.is-hidden{ display:none; }

.shot{ position:relative; aspect-ratio:16/10; background:var(--night); overflow:hidden; border-bottom:var(--rule) solid var(--ink); }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--out); }
.item:hover .shot img{ transform:scale(1.05); }
.shot[data-missing]{ display:grid; place-content:center; gap:.4rem; text-align:center; padding:1rem; }
.shot[data-missing]::before{ content:'PHOTO PENDING'; font-family:var(--type); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; color:var(--hazard); }
.shot[data-missing]::after{ content:attr(data-missing); font-family:var(--type); font-size:.68rem;
  color:oklch(0.72 0.01 265); word-break:break-all; }
.chip{ position:absolute; top:0; left:0; z-index:var(--z-base);
  font-family:var(--type); font-weight:700; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--text); padding:.35rem .6rem; }
.chip--few{ background:var(--hazard); color:var(--on-accent); }
.chip--sold{ background:var(--magenta); color:var(--on-accent); }

.item__body{ padding:1.15rem 1.2rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.item h3{ font-size:1.4rem; margin-bottom:.25rem; }
.item__where{ font-family:var(--type); font-size:.76rem; color:var(--text-soft); margin:0 0 .9rem; text-transform:uppercase; letter-spacing:.04em; }
.specs{ display:flex; flex-wrap:wrap; gap:.3rem .85rem; margin:0 0 1.2rem; padding-top:.8rem;
  border-top:2px solid var(--edge); font-family:var(--type); font-size:.78rem; color:var(--text-soft); }
.specs b{ color:var(--text); }
.item__buy{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:auto; }
.price{ display:inline-block; background:var(--magenta); color:var(--on-accent);
  font-family:var(--display); font-size:1.4rem; padding:.3rem .7rem; border-radius:3px;
  transform:rotate(-2deg); box-shadow:3px 3px 0 var(--ink); }
.price small{ display:block; font-family:var(--type); font-size:.58rem; font-weight:700; letter-spacing:.1em; }
.item.is-sold{ opacity:.6; }
.item.is-sold .price{ background:var(--edge); color:var(--text); }
.item.is-sold .btn{ pointer-events:none; background:var(--card); color:var(--text-soft); }
.store__note{ margin-top:2rem; font-size:.94rem; color:var(--text-2); max-width:64ch; }
.empty{ padding:2.5rem 0; font-family:var(--type); font-weight:700; }

/* ---------- join ---------- */
.join{ background-image:var(--grad-hot); color:var(--text); border-block:var(--rule) solid var(--ink); }
.join__in{ padding-block:clamp(3.5rem,8vw,6rem); text-align:center; }
.join h2{ font-size:clamp(2.4rem,7.5vw,5.2rem); margin-bottom:.9rem; text-shadow:5px 5px 0 var(--ink); }
.join p{ max-width:48ch; margin:0 auto 2rem; color:oklch(0.97 0.008 330); }
.join .btn{ background:var(--paper); color:var(--on-accent); border-color:var(--paper); }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--text); padding-block:2.4rem; }
.foot__in{ display:flex; flex-wrap:wrap; gap:1.1rem 2rem; align-items:center; justify-content:space-between; }
.foot img{ height:22px; width:auto; }
.foot nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.foot a{ font-family:var(--type); font-weight:700; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--text); }
.foot a:hover{ color:var(--cyan); }
.foot small{ font-family:var(--type); font-size:.72rem; color:oklch(0.70 0.01 265); }

/* ---------- reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .6s var(--out), transform .6s var(--out); }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; }
  .js .reveal.in{ transition:none; }
}

/* ==========================================================
   PAGE MASTHEAD — used on rules.html and store.html in place
   of the hero collage. Same keyline system, shorter.
   ========================================================== */
.masthead{ padding-top:clamp(1rem,2.5vw,2rem); }
.masthead .collage{ grid-template-columns:1fr; }
@media (min-width:900px){ .masthead .collage{ grid-template-columns:1.7fr 1fr; } }

.panel--title{
  background:var(--ink); color:var(--text);
  display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(190px,26vh,300px);
}
.panel--title h1{ font-size:clamp(2.4rem,6.4vw,4.8rem); margin-bottom:.7rem; }
.panel--title h1 span{ color:var(--cyan); }
.panel--title .deck{ color:oklch(0.85 0.01 265); margin:0; }

.panel--note{
  background-image:var(--grad-hot-2); color:var(--text); display:flex; flex-direction:column; justify-content:center; gap:.5rem;
}
.panel--note h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
.panel--note p{ margin:0; font-size:.95rem; color:oklch(0.94 0.02 320); }
.panel--note--cy{ background-image:none; background-color:var(--cyan); color:var(--on-accent); }
.panel--note--cy p{ color:var(--on-accent); }

/* nav: mark the page you're on */
.nav__links a[aria-current="page"]{ color:var(--cyan); border-bottom-color:var(--cyan); }

/* subpage bottom CTA reuses .join */
.crumb{
  font-family:var(--type); font-weight:700; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cyan); text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem; margin-bottom:1rem;
}
.crumb:hover{ color:var(--text); }

/* cross-links at the foot of the landing page */
.head--cross{ margin-top:clamp(2rem,4vw,3rem); margin-bottom:0; }
.btnrow{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* inline rule reference, e.g. 3.2 */
.ref{ font-family:var(--type); font-weight:700; color:var(--cyan); }

/* ==========================================================
   LIVE COUNT STATES — set by app.js from /api/players.php
   ========================================================== */
.panel--live .count b{ font-variant-numeric:tabular-nums; }

/* waiting on the first response */
.panel--live[data-state="loading"] .count{ opacity:.55; }
.panel--live[data-state="loading"] .dot{ background:var(--text-soft); animation:none; }

/* reachable, nobody in the city */
.panel--live[data-state="empty"] .dot{ background:var(--cyan); }

/* unreachable */
.panel--live[data-state="offline"]{ background-image:none; background-color:var(--card); }
.panel--live[data-state="offline"] .dot{ background:var(--text-soft); animation:none; }
.panel--live[data-state="offline"] .count{ color:var(--text-soft); }

/* server was reachable a moment ago but isn't answering now */
.panel--live[data-state="stale"]{ background-image:none; background-color:var(--card-2); }
.panel--live[data-state="stale"] .dot{ background:var(--hazard); animation:none; }

/* news tag colours — each one is bonded to a tag type in inc/taxonomy.php */
.tag--hiring{ background:var(--hazard); color:var(--on-accent); }
.tag--staff { background:var(--edge);   color:var(--text); }
.tag--wipe  { background:transparent; color:var(--hazard); box-shadow:inset 0 0 0 2px var(--hazard); }