/* ============================================================
   Kryos — kryos.cc
   Palette is built on the name: kryos (Greek) = icy cold.
   Frost blues carry the brand, OSRS gold carries every action.
   ============================================================ */

:root{
  --abyss:      #07131b;   /* page ground — deep water under ice */
  --slate:      #0f2331;   /* raised surfaces */
  --slate-line: #1b3a4d;   /* hairlines */
  --frost:      #86dcee;   /* primary accent */
  --frost-dim:  #4a93ad;   /* muted accent */
  --rune-gold:  #f5b23e;   /* actions only */
  --bone:       #dce6ec;   /* body text */
  --bone-dim:   #8ba3b1;   /* secondary text */

  --display: 'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  --body:    'Archivo', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --max: 1240px;
  --rail-h: 34px;
  --nav-h: 68px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--abyss);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,iframe{ max-width:100%; display:block; border:0; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--frost); color:var(--abyss); }

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

.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--rune-gold); color:var(--abyss);
  padding:.6rem 1rem; font-family:var(--mono); font-size:.8rem;
}
.skip:focus{ left:0; }

/* ---------- shared type ---------- */

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--frost-dim);
  margin:0 0 1rem;
}

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.1rem,5.2vw,3.6rem);
  line-height:.98;
  letter-spacing:.01em;
  margin:0;
  color:#f2f9fc;
}

/* ============ STATUS RAIL ============
   The one thing every RSPS visitor checks first: is anyone on.
   So it goes above everything else, in a face that reads like a console. */

.rail{
  height:var(--rail-h);
  display:flex; align-items:center;
  background:linear-gradient(90deg,#0a1a24 0%,#123243 50%,#0a1a24 100%);
  border-bottom:1px solid var(--slate-line);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--bone-dim);
  overflow:hidden;
}

.rail__inner{
  width:100%; max-width:var(--max);
  margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap:.85rem;
  white-space:nowrap;
}

.rail__state{ display:inline-flex; align-items:center; gap:.5rem; color:var(--bone); }

.rail__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--frost-dim);
  box-shadow:0 0 0 0 rgba(134,220,238,.55);
}

.rail.is-online .rail__dot{
  background:var(--frost);
  animation:pulse 2.6s ease-out infinite;
}

.rail.is-offline .rail__dot{ background:#b6564a; }

@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(134,220,238,.5); }
  70%  { box-shadow:0 0 0 7px rgba(134,220,238,0); }
  100% { box-shadow:0 0 0 0 rgba(134,220,238,0); }
}

.rail__item b{ color:var(--bone); font-weight:500; }
.rail__item--dim{ color:#557486; }
.rail__sep{ width:1px; height:12px; background:var(--slate-line); }
.rail__sep--wide{ flex:1; height:1px; background:transparent; }

/* ============ NAV ============ */

.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(7,19,27,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--slate-line);
}

.nav__inner{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.nav__group{ display:flex; align-items:center; gap:2rem; flex:1; }
.nav__group--right{ justify-content:flex-end; }

.nav__link{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-dim);
  padding:.4rem 0;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav__link:hover{ color:var(--frost); }
.nav__link.is-current{ color:var(--bone); border-bottom-color:var(--rune-gold); }

/* The one action in the bar, so it carries the gold the rest of the site keeps
   for actions. Outlined rather than filled: a solid gold block at this size
   would shout louder than the hero button it points at. */
.nav__link--play{
  color:var(--rune-gold);
  border:1px solid rgba(245,178,62,.42);
  padding:.5rem 1rem;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.nav__link--play:hover{
  color:#ffd487;
  border-color:var(--rune-gold);
  background:rgba(245,178,62,.12);
}
/* Already on the page: the outline fills in instead of adding an underline. */
.nav__link--play.is-current{
  color:#07131b;
  background:var(--rune-gold);
  border-color:var(--rune-gold);
}

.nav__mark{
  flex:0 0 auto; padding:0 1rem;
  display:flex; align-items:center; gap:.55rem;
}

/* Height drives the size; width:auto keeps the source ratio, and the width/height
   attributes on the img reserve the space so the bar does not jump while loading. */
.nav__marklogo{ height:38px; width:auto; display:block; }

.nav__markword{
  font-family:var(--display);
  font-weight:800;
  font-size:1.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(170deg,#f0fbfe 10%,var(--frost) 60%,var(--frost-dim) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.nav__toggle{
  display:none;
  background:none; border:1px solid var(--slate-line);
  width:42px; height:38px; cursor:pointer;
  align-items:center; justify-content:center;
}

.nav__bars,
.nav__bars::before,
.nav__bars::after{
  content:''; display:block;
  width:17px; height:1.5px; background:var(--bone);
}
.nav__bars{ position:relative; }
.nav__bars::before{ position:absolute; top:-5px; }
.nav__bars::after{ position:absolute; top:5px; }

.nav__mobile{
  display:flex; flex-direction:column;
  border-top:1px solid var(--slate-line);
  padding:.5rem var(--gutter) 1.25rem;
}
/* The display above outranks the hidden attribute, so restate it. main.js
   toggles hidden; without this the menu sits open on every screen. */
.nav__mobile[hidden]{ display:none; }
.nav__mobile a{
  font-family:var(--mono); font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 0; color:var(--bone-dim);
  border-bottom:1px solid rgba(27,58,77,.5);
}
.nav__mobile a:last-child{ border-bottom:0; }

/* ============ HERO ============ */

.hero{
  position:relative;
  min-height:clamp(560px,82vh,860px);
  display:flex; align-items:center;
  padding:5rem var(--gutter) 6rem;
  overflow:hidden;
}

/* frozen field: the throne artwork under two soft light wells.
   Layer order is top-down, so the scrims come first and the photo sits beneath
   them. The side scrim is heaviest on the left, where the copy lives, and eases
   off to the right so the braziers stay visible. The last gradient is the
   fallback ground for the moment before the jpeg arrives. */
.hero__field{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(95deg, rgba(6,16,25,.90) 0%, rgba(6,16,25,.58) 42%, rgba(6,16,25,.06) 100%),
    linear-gradient(180deg, rgba(6,16,25,.55) 0%, rgba(6,16,25,0) 28%, rgba(6,16,25,.82) 100%),
    radial-gradient(58% 78% at 22% 8%, rgba(134,220,238,.15) 0%, transparent 62%),
    radial-gradient(46% 64% at 88% 92%, rgba(245,178,62,.09) 0%, transparent 60%),
    url('../img/hero-bg.jpg') 50% 50% / cover no-repeat,
    linear-gradient(180deg, #0a1c27 0%, var(--abyss) 68%);
}

/* hairline lattice, like frost on glass */
.hero__field::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(134,220,238,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134,220,238,.05) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(70% 60% at 40% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 40% 40%, #000 0%, transparent 78%);
}

.hero__inner{ position:relative; z-index:1; max-width:var(--max); margin:0 auto; width:100%; }

.hero__title{ margin:0 0 1.6rem; position:relative; }

.hero__word{
  position:relative;
  display:inline-block;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(4.5rem,17vw,14rem);
  line-height:.8;
  letter-spacing:.03em;
  text-transform:uppercase;
  background:linear-gradient(176deg,#f6fdff 6%,#a9e8f6 38%,#3a7e99 98%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* rime echo — outlined duplicate sitting just behind the fill */
.hero__word::after{
  content:attr(data-word);
  position:absolute; left:4px; top:5px; z-index:-1;
  color:transparent;
  -webkit-text-stroke:1px rgba(134,220,238,.34);
}

.hero__lede{
  max-width:46ch;
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  color:var(--bone-dim);
  margin:0 0 2.2rem;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.4rem; }

.hero__note{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.1em;
  color:#557486; margin:0;
}
.hero__note a{
  color:var(--frost-dim);
  border-bottom:1px solid rgba(74,147,173,.4);
  transition:color .16s ease, border-color .16s ease;
}
.hero__note a:hover{ color:var(--frost); border-bottom-color:var(--frost); }

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:1rem 1.9rem;
  border:1px solid transparent;
  transition:transform .16s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.btn--gold{
  background:var(--rune-gold);
  color:#1a1206;
  font-weight:500;
}
.btn--gold:hover{ background:#ffc95e; transform:translateY(-2px); }

.btn--ghost{
  border-color:var(--slate-line);
  color:var(--bone);
}
.btn--ghost:hover{ border-color:var(--frost); color:var(--frost); transform:translateY(-2px); }

/* ============ SLABS ============ */

.slabs{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--slate-line);
  border:1px solid var(--slate-line);
}

.slab{
  position:relative;
  background:var(--slate);
  padding:2.2rem 1.9rem 3.2rem;
  display:flex; flex-direction:column;
  transition:background .2s ease;
}
.slab:hover{ background:#143047; }

.slab__tag{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--rune-gold); margin-bottom:1.4rem;
}

.slab__title{
  font-family:var(--display); font-weight:700;
  font-size:1.75rem; line-height:1.05;
  color:#f2f9fc; margin-bottom:.55rem;
}

.slab__text{ font-size:.92rem; color:var(--bone-dim); }

.slab__go{
  position:absolute; right:1.9rem; bottom:1.7rem;
  color:var(--frost-dim); font-size:1.1rem;
  transition:transform .2s ease, color .2s ease;
}
.slab:hover .slab__go{ transform:translateX(5px); color:var(--frost); }

/* ============ INSIDE ============ */

.inside{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(5rem,10vw,8rem) var(--gutter);
}

.inside__head{ max-width:34ch; margin-bottom:clamp(2.5rem,5vw,4rem); }

.inside__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(2rem,4vw,3.5rem);
}

.feat{ border-top:1px solid var(--slate-line); padding-top:1.4rem; }

.feat__label{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--frost-dim); margin:0 0 1rem;
}

.feat__title{
  font-family:var(--display); font-weight:700;
  font-size:1.85rem; line-height:1.05;
  margin:0 0 .7rem; color:#f2f9fc;
}

.feat__text{ margin:0; color:var(--bone-dim); font-size:.95rem; }

/* ============ COMMUNITY ============ */

.community{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter) clamp(5rem,10vw,8rem);
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

.community__lede{ color:var(--bone-dim); margin:1.1rem 0 2rem; max-width:42ch; }

.media{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(150deg,#123243 0%,#0b1e2a 100%);
  border:1px solid var(--slate-line);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
}

.media__glint{
  position:absolute; inset:0;
  background:radial-gradient(40% 55% at 50% 42%, rgba(134,220,238,.13) 0%, transparent 70%);
}

.media__label{
  position:relative;
  font-family:var(--display); font-weight:700;
  font-size:2.4rem; text-transform:uppercase;
  letter-spacing:.05em; color:rgba(220,230,236,.32); margin:0;
}

.media__note{
  position:relative;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:#557486; margin:.3rem 0 0;
}

.community__media iframe{ width:100%; aspect-ratio:16/9; border:1px solid var(--slate-line); }

/* ============ FOOTER ============ */

.foot{ border-top:1px solid var(--slate-line); background:#061019; }

.foot__inner{
  max-width:var(--max); margin:0 auto;
  padding:clamp(3rem,6vw,4.5rem) var(--gutter) 2.5rem;
  display:flex; flex-wrap:wrap; gap:2.5rem;
  justify-content:space-between; align-items:flex-start;
}

.foot__word{
  font-family:var(--display); font-weight:800;
  font-size:2.1rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--frost-dim);
}

.foot__tag{ color:#557486; font-size:.88rem; margin:.3rem 0 0; max-width:32ch; }

.foot__base{
  max-width:var(--max); margin:0 auto;
  padding:1.4rem var(--gutter) 2.5rem;
  border-top:1px solid rgba(27,58,77,.55);
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between;
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.08em; color:#48606f;
}
.foot__base p{ margin:0; }
.foot__base a:hover{ color:var(--frost); }

/* ============ COMING SOON ============ */

/* Same throne artwork as the hero, so a page that is not built yet still feels
   like part of the site rather than a dead end. */
.soon{
  position:relative;
  min-height:clamp(460px,66vh,720px);
  display:flex; align-items:center;
  padding:5rem var(--gutter) 6rem;
  overflow:hidden;
}

.soon::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(95deg, rgba(6,16,25,.90) 0%, rgba(6,16,25,.60) 44%, rgba(6,16,25,.14) 100%),
    linear-gradient(180deg, rgba(6,16,25,.58) 0%, rgba(6,16,25,0) 30%, rgba(6,16,25,.86) 100%),
    radial-gradient(58% 78% at 26% 10%, rgba(134,220,238,.14) 0%, transparent 62%),
    url('../img/hero-bg.jpg') 50% 50% / cover no-repeat,
    linear-gradient(180deg, #0a1c27 0%, var(--abyss) 68%);
}

.soon__inner{ position:relative; z-index:1; max-width:var(--max); margin:0 auto; width:100%; }

.soon__title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.6rem,7.5vw,5.6rem);
  line-height:.9;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin:.35rem 0 1.3rem;
  background:linear-gradient(176deg,#f6fdff 6%,#a9e8f6 38%,#3a7e99 98%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.soon__text{
  max-width:52ch;
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:var(--bone-dim);
  margin:0 0 2.2rem;
}

.soon__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }


/* ============ DOWNLOAD ============ */

/* Same two-column shape as the vote page: prose and steps on the left, the
   thing you came to click sitting in a card on the right. */
.dl{
  position:relative;
  min-height:clamp(520px,72vh,820px);
  display:flex; align-items:center;
  padding:4.5rem var(--gutter) 5.5rem;
  overflow:hidden;
}

.dl::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(95deg, rgba(6,16,25,.92) 0%, rgba(6,16,25,.66) 46%, rgba(6,16,25,.20) 100%),
    linear-gradient(180deg, rgba(6,16,25,.60) 0%, rgba(6,16,25,0) 30%, rgba(6,16,25,.88) 100%),
    url('../img/hero-bg.jpg') 50% 50% / cover no-repeat,
    linear-gradient(180deg, #0a1c27 0%, var(--abyss) 68%);
}

.dl__inner{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto; width:100%;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}

.dl__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:.9;
  letter-spacing:.03em; text-transform:uppercase;
  margin:.35rem 0 1.2rem;
  background:linear-gradient(176deg,#f6fdff 6%,#a9e8f6 38%,#3a7e99 98%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.dl__text{ max-width:46ch; color:var(--bone-dim); margin:0 0 1.8rem; }

.dl__steps{
  list-style:none; margin:0; padding:0;
  counter-reset:step;
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.08em; line-height:1.7; color:var(--bone-dim);
  max-width:52ch;
}
.dl__steps li{ padding:.55rem 0 .55rem 2rem; position:relative; border-bottom:1px solid rgba(27,58,77,.5); }
.dl__steps li:last-child{ border-bottom:0; }
.dl__steps li::before{
  content:counter(step); counter-increment:step;
  position:absolute; left:0; top:.6rem;
  width:1.3rem; height:1.3rem; border:1px solid var(--slate-line);
  display:grid; place-items:center; color:var(--frost); font-size:.68rem;
}
.dl__steps b{ color:var(--bone); font-weight:600; }
.dl__steps code{
  font-family:var(--mono); font-size:.74rem;
  color:var(--frost); background:rgba(134,220,238,.08);
  padding:.1rem .35rem; border:1px solid rgba(134,220,238,.16);
}

/* the card */
.dl__card{
  background:rgba(9,26,37,.82);
  border:1px solid var(--slate-line);
  padding:clamp(1.5rem,3vw,2.1rem);
  backdrop-filter:blur(8px);
}

.dl__cardlabel{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); margin:0 0 1.1rem;
}

.dl__btn{ display:block; width:100%; text-align:center; }

.dl__specs{ margin:1.5rem 0 0; padding:0; }

.dl__spec{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid rgba(27,58,77,.5);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
}
.dl__spec:last-child{ border-bottom:0; }
.dl__spec dt{ color:#557486; text-transform:uppercase; }
.dl__spec dd{ margin:0; color:var(--bone); text-align:right; }

.dl__note{
  font-size:.82rem; color:#557486;
  margin:1.3rem 0 0; line-height:1.6;
}
.dl__note a{ color:var(--frost-dim); border-bottom:1px solid rgba(74,147,173,.4); }
.dl__note a:hover{ color:var(--frost); border-bottom-color:var(--frost); }

@media (max-width:900px){
  .dl__inner{ grid-template-columns:1fr; }
}
/* ============ VOTE ============ */

.vote{
  position:relative;
  min-height:clamp(520px,72vh,820px);
  display:flex; align-items:center;
  padding:4.5rem var(--gutter) 5.5rem;
  overflow:hidden;
}

.vote::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(95deg, rgba(6,16,25,.92) 0%, rgba(6,16,25,.66) 46%, rgba(6,16,25,.20) 100%),
    linear-gradient(180deg, rgba(6,16,25,.60) 0%, rgba(6,16,25,0) 30%, rgba(6,16,25,.88) 100%),
    url('../img/hero-bg.jpg') 50% 50% / cover no-repeat,
    linear-gradient(180deg, #0a1c27 0%, var(--abyss) 68%);
}

.vote__inner{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto; width:100%;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}

.vote__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:.9;
  letter-spacing:.03em; text-transform:uppercase;
  margin:.35rem 0 1.2rem;
  background:linear-gradient(176deg,#f6fdff 6%,#a9e8f6 38%,#3a7e99 98%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.vote__text{ max-width:46ch; color:var(--bone-dim); margin:0 0 1.6rem; }

.vote__steps{
  list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.08em; color:var(--bone-dim);
}
.vote__steps li{ padding:.5rem 0 .5rem 2rem; position:relative; border-bottom:1px solid rgba(27,58,77,.5); }
.vote__steps li:last-child{ border-bottom:0; }
.vote__steps li::before{
  content:counter(step); counter-increment:step;
  position:absolute; left:0; top:.5rem;
  width:1.3rem; height:1.3rem; border:1px solid var(--slate-line);
  display:grid; place-items:center; color:var(--frost); font-size:.68rem;
}
.vote__steps{ counter-reset:step; }

/* the card */
.vote__card{
  background:rgba(9,26,37,.82);
  border:1px solid var(--slate-line);
  padding:clamp(1.5rem,3vw,2.1rem);
  backdrop-filter:blur(8px);
}

.vote__label{
  display:block;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); margin:0 0 .6rem;
}

.vote__input{
  width:100%;
  font-family:var(--mono); font-size:1rem;
  padding:.95rem 1rem;
  color:var(--bone);
  background:#071620;
  border:1px solid var(--slate-line);
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.vote__input::placeholder{ color:#4c6675; }
.vote__input:focus{
  border-color:var(--frost-dim);
  box-shadow:0 0 0 3px rgba(134,220,238,.12);
}

/* Reserved height, so the card does not jump when a message appears. */
.vote__err{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:#ff8095; min-height:1.4rem; margin:.55rem 0 0;
}

.vote__btn{ width:100%; text-align:center; margin:.3rem 0 0; }

.vote__note{
  font-size:.82rem; color:#557486;
  margin:1.2rem 0 0; line-height:1.6;
}
.vote__note b{ color:var(--bone); font-weight:600; }
.vote__note code{
  font-family:var(--mono); font-size:.78rem;
  color:var(--frost); background:rgba(134,220,238,.08);
  padding:.1rem .35rem; border:1px solid rgba(134,220,238,.16);
}

@media (max-width:900px){
  .vote__inner{ grid-template-columns:1fr; }
}

/* ============ VOTE BOARD ============ */

/* Sits inside the vote section's left column, not as a band of its own, so it
   lands above the fold instead of below the form. */
.board{ margin:2.2rem 0 0; }

.board__head{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  align-items:baseline; justify-content:space-between;
  margin:0 0 1.5rem;
}

.board__title{
  font-family:var(--display); font-weight:800;
  font-size:1.5rem;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--frost); margin:0;
}

.board__meta{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:#557486;
}

.board__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }

.board__row{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:1rem;
  padding:.8rem 1.05rem;
  background:rgba(15,35,49,.82);
  border:1px solid var(--slate-line);
  backdrop-filter:blur(4px);
}

/* First place carries the gold; the other two stay frost so the top is obvious
   at a glance without three competing colours. */
.board__row--1{ border-color:rgba(245,178,62,.38); background:linear-gradient(90deg, rgba(245,178,62,.09), rgba(15,35,49,.82) 55%); }
.board__row--1 .board__rank{ color:var(--rune-gold); }

.board__rank{
  font-family:var(--display); font-weight:800;
  font-size:1.4rem; line-height:1; min-width:1.1rem;
  color:var(--frost-dim);
}

.board__name{
  font-family:var(--mono); font-size:.92rem;
  letter-spacing:.05em; color:var(--bone);
  overflow-wrap:anywhere;
}

.board__votes{
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-dim); white-space:nowrap;
}

.board__empty{
  padding:1.4rem 1.3rem;
  border:1px dashed var(--slate-line);
  color:var(--bone-dim);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em;
}

/* ============ HISCORES ============ */

.hs{ padding:clamp(2.5rem,5vw,4rem) var(--gutter) 5rem; }
.hs__inner{ max-width:var(--max); margin:0 auto; }

.hs__head{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem;
  align-items:baseline; justify-content:space-between;
  margin:0 0 1.6rem;
}

.hs__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.2rem,5vw,3.4rem);
  letter-spacing:.04em; text-transform:uppercase;
  margin:0;
  background:linear-gradient(176deg,#f6fdff 6%,#a9e8f6 38%,#3a7e99 98%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hs__meta{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:#557486;
}

/* ---------- search ---------- */

.hs__search{ position:relative; margin:0 0 1.4rem; max-width:340px; }

.hs__input{
  width:100%;
  font-family:var(--mono); font-size:.85rem;
  padding:.7rem .9rem;
  color:var(--bone); background:#071620;
  border:1px solid var(--slate-line); outline:none;
  transition:border-color .16s ease;
}
.hs__input::placeholder{ color:#4c6675; }
.hs__input:focus{ border-color:var(--frost-dim); }

.hs__suggest{
  position:absolute; z-index:5; left:0; right:0; top:100%;
  background:var(--slate); border:1px solid var(--slate-line);
  border-top:0; max-height:260px; overflow-y:auto;
}
.hs__suggest button{
  display:block; width:100%; text-align:left;
  font-family:var(--mono); font-size:.82rem;
  padding:.55rem .9rem; background:none; border:0;
  color:var(--bone-dim); cursor:pointer;
}
.hs__suggest button:hover{ background:rgba(134,220,238,.08); color:var(--frost); }

/* ---------- filters ---------- */

.hs__filters{ display:flex; flex-wrap:wrap; gap:.7rem; margin:0 0 1.2rem; }

.hs__field{ display:flex; align-items:center; gap:.5rem; }

.hs__label{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:#557486;
}

.hs__select{
  font-family:var(--mono); font-size:.76rem;
  padding:.45rem .6rem;
  color:var(--bone); background:#071620;
  border:1px solid var(--slate-line);
  outline:none; cursor:pointer;
}
.hs__select:focus{ border-color:var(--frost-dim); }

/* ---------- mode sprites ---------- */

/* The source art is 18px game sprites. Pixelated keeps them sharp instead of
   letting the browser smear them when a display scales the page. */
.hs__icon{
  width:18px; height:18px;
  display:inline-block; vertical-align:middle;
  image-rendering:pixelated;
  flex:0 0 auto;
}

.hs__cell{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.hs__cell span{ color:var(--bone-dim); }

.hs__prestige{
  display:inline-block; min-width:1.9rem; text-align:center;
  font-family:var(--mono); font-size:.72rem;
  padding:.15rem .4rem;
  color:var(--frost); background:rgba(134,220,238,.09);
  border:1px solid rgba(134,220,238,.2);
}
.hs__prestige--none{ color:#3d5666; background:none; border-color:transparent; }

/* Skill icons are 18x23 in the source; the row keeps a fixed slot so the names
   start on one line no matter how tall a given icon is. */
.hs__skillicon{
  width:18px; height:23px;
  display:inline-block; vertical-align:middle;
  image-rendering:pixelated;
  flex:0 0 auto;
}

.hs__skillcell{ display:flex; align-items:center; gap:.6rem; }
.hs__skillcell span{ color:var(--bone); }

/* The overall row heads the list, so it carries the name colour rather than
   sitting flush with the 23 rows under it. */
.hs__table tr.hs__row--overall td{
  background:rgba(134,220,238,.05);
  border-bottom-color:var(--slate-line);
}
.hs__table tr.hs__row--overall .hs__skillcell span{ color:var(--frost); }

/* ---------- skill tabs ---------- */

/* Sidebar rather than a strip across the top: 24 entries read faster stacked,
   and the table keeps the full width it needs for seven columns. */
.hs__layout{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:0 2rem;
  align-items:start;
}

.hs__tabs{
  display:flex; flex-direction:column; gap:.1rem;
  border-right:1px solid var(--slate-line);
  padding:0 1rem 0 0;
  position:sticky; top:calc(var(--nav-h) + 1rem);
}

.hs__tab{
  display:flex; align-items:center; gap:.6rem;
  width:100%; text-align:left;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.45rem .6rem;
  color:var(--bone-dim); background:none;
  border:1px solid transparent;
  border-left:2px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.hs__tab:hover{ color:var(--frost); background:rgba(134,220,238,.05); }
.hs__tab.is-on{
  color:var(--rune-gold);
  border-left-color:var(--rune-gold);
  background:rgba(245,178,62,.08);
}

.hs__tabicon{
  width:18px; height:23px;
  image-rendering:pixelated;
  flex:0 0 auto;
}

/* Section heading inside the sidebar: skills first, bosses under them. */
.hs__group{
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:#3d5666; margin:1.4rem 0 .4rem; padding:0 .6rem;
}
.hs__group:first-child{ margin-top:0; }

.hs__subhead{
  font-family:var(--display); font-weight:800;
  font-size:1.4rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--frost); margin:2.2rem 0 .9rem;
}

@media (max-width:860px){
  /* The strip runs sideways here, so a heading would break the row in half. */
  .hs__group{ display:none; }
}

/* Below the breakpoint the sidebar would eat half the screen, so it goes back
   to a scrolling strip above the table. */
@media (max-width:860px){
  .hs__layout{ grid-template-columns:1fr; gap:1.2rem; }

  .hs__tabs{
    flex-direction:row; gap:.35rem;
    overflow-x:auto; scrollbar-width:thin;
    border-right:0; border-bottom:1px solid var(--slate-line);
    padding:0 0 .7rem;
    position:static;
  }

  .hs__tab{
    width:auto;
    border-left:1px solid transparent;
    border:1px solid transparent;
  }
  .hs__tab.is-on{ border-color:rgba(245,178,62,.4); }
}

/* ---------- table ---------- */

.hs__wrap{ overflow-x:auto; }

.hs__table{
  width:100%; border-collapse:collapse;
  font-family:var(--mono); font-size:.82rem;
}
.hs__table th{
  text-align:left; font-weight:500;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:#557486; padding:.6rem .9rem;
  border-bottom:1px solid var(--slate-line);
  white-space:nowrap;
}
.hs__table td{
  padding:.65rem .9rem;
  border-bottom:1px solid rgba(27,58,77,.45);
  color:var(--bone-dim);
}
.hs__table tbody tr:hover td{ background:rgba(134,220,238,.04); }

.hs__rank{ color:var(--frost-dim); width:1%; white-space:nowrap; }
.hs__table tr:nth-child(1) .hs__rank{ color:var(--rune-gold); }

.hs__name{ color:var(--bone); }
.hs__name button{
  font:inherit; color:inherit; background:none; border:0;
  padding:0; cursor:pointer; text-align:left;
}
.hs__name button:hover{ color:var(--frost); text-decoration:underline; }

/* Both selectors, and both at element+class weight: `.hs__table th` alone beats a
   bare `.hs__num`, which is what left the headers hanging over the wrong edge
   while their columns sat right. Tabular figures keep the digits in a column. */
.hs__table th.hs__num,
.hs__table td.hs__num{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Centred rather than right: a prestige badge is a chip, not a figure, so it
   reads better on the column's axis than shoved against the next one. */
.hs__table th.hs__mid,
.hs__table td.hs__mid{ text-align:center; white-space:nowrap; }

.hs__dot{
  display:inline-block; width:.42rem; height:.42rem;
  border-radius:50%; background:#3fbf6d; margin-left:.5rem;
  vertical-align:middle;
}

.hs__mode{
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:#557486; margin-left:.5rem;
}

/* ---------- pager ---------- */

.hs__pager{
  display:flex; align-items:center; gap:1rem;
  margin:1.4rem 0 0;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; color:var(--bone-dim);
}
.hs__pager button{
  font:inherit; letter-spacing:inherit; text-transform:uppercase;
  padding:.5rem 1rem; cursor:pointer;
  color:var(--bone-dim); background:none;
  border:1px solid var(--slate-line);
  transition:color .15s ease, border-color .15s ease;
}
.hs__pager button:hover:not(:disabled){ color:var(--frost); border-color:var(--frost-dim); }
.hs__pager button:disabled{ opacity:.35; cursor:not-allowed; }

.hs__state{
  padding:1.6rem .9rem;
  font-family:var(--mono); font-size:.8rem;
  color:var(--bone-dim);
}

/* ---------- player card ---------- */

.hs__back{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-dim); background:none; border:0;
  padding:0; margin:0 0 1rem; cursor:pointer;
}
.hs__back:hover{ color:var(--frost); }

/* center, not baseline: the sprites and the badge have no text baseline of their
   own, so baseline alignment left them sitting low against the name. */
.hs__who{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.7rem 1.4rem;
  margin:0 0 1.3rem;
  padding:0 0 1rem;
  border-bottom:1px solid var(--slate-line);
}
.hs__who h2{ margin-right:.4rem; }
.hs__who h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.8rem,4vw,2.6rem);
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--frost); margin:0;
}

@media (max-width:560px){
  .hs__table th, .hs__table td{ padding:.55rem .6rem; }
  .hs__table{ font-size:.76rem; }
}

/* ============ WIKI ============
   Reuses the hiscores shell (.hs, .hs__layout, .hs__tabs) for the sidebar so
   both pages navigate the same way; everything below is just prose. */

.wk__article{ scroll-margin-top:calc(var(--nav-h) + 1.5rem); }
.wk__article + .wk__article{
  margin-top:3.5rem; padding-top:3rem;
  border-top:1px solid var(--slate-line);
}

.wk__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,4vw,2.8rem);
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--frost); margin:0 0 .3rem;
}

.wk__lede{ color:var(--bone-dim); max-width:62ch; margin:0 0 1.6rem; }

.wk__article h3{
  font-family:var(--mono); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--frost-dim); margin:2rem 0 .7rem;
}

.wk__article p{ max-width:66ch; color:var(--bone-dim); margin:0 0 1rem; }
.wk__article strong{ color:var(--bone); font-weight:600; }

.wk__article code{
  font-family:var(--mono); font-size:.82rem;
  color:var(--frost); background:rgba(134,220,238,.08);
  padding:.1rem .35rem; border:1px solid rgba(134,220,238,.16);
}

.wk__article ul{ max-width:66ch; color:var(--bone-dim); margin:0 0 1rem; padding-left:1.1rem; }
.wk__article li{ margin:.35rem 0; }

/* A short aside that is worth reading but not part of the argument. */
.wk__note{
  border-left:2px solid var(--rune-gold);
  background:rgba(245,178,62,.06);
  padding:.9rem 1.1rem; margin:1.4rem 0;
  max-width:66ch;
}
.wk__note p{ margin:0; color:var(--bone); font-size:.92rem; }

.wk__soon{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:#3d5666; margin-left:auto;
}


/* ---------- prose the editor can produce ---------- */

.wk__article h4{
  font-family:var(--body); font-weight:600;
  font-size:1rem; color:var(--bone);
  margin:1.5rem 0 .5rem;
}

.wk__article ol{ max-width:66ch; color:var(--bone-dim); margin:0 0 1rem; padding-left:1.3rem; }

.wk__code{
  max-width:66ch; overflow-x:auto;
  background:#071620; border:1px solid var(--slate-line);
  padding:.9rem 1.1rem; margin:1.2rem 0;
}
.wk__code code{ background:none; border:0; padding:0; color:var(--bone); font-size:.82rem; }

.wk__rule{ border:0; border-top:1px solid var(--slate-line); margin:2rem 0; max-width:66ch; }

.wk__link, .wk__article a{
  color:var(--frost-dim);
  border-bottom:1px solid rgba(74,147,173,.4);
  transition:color .16s ease, border-color .16s ease;
}
.wk__link:hover, .wk__article a:hover{ color:var(--frost); border-bottom-color:var(--frost); }

/* Byline under an article. */
.wk__credit{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:#557486; margin:2.5rem 0 0;
  padding-top:1rem; border-top:1px solid var(--slate-line);
  max-width:none;
}
.wk__credit b{ color:var(--bone-dim); font-weight:500; }

.wk__back{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; margin:0 0 1.5rem; }

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

.wk__grouphead{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--frost-dim); margin:2.4rem 0 .9rem; font-weight:500;
}
.wk__grouphead:first-child{ margin-top:0; }

.wk__cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1px; background:var(--slate-line); border:1px solid var(--slate-line);
}

.wk__card{
  display:flex; flex-direction:column; gap:.4rem;
  background:var(--abyss); padding:1.1rem 1.2rem 1rem;
  transition:background .18s ease;
}
.wk__card:hover{ background:var(--slate); }

.wk__cardtitle{ font-family:var(--display); font-size:1.3rem; letter-spacing:.02em; color:var(--bone); }
.wk__cardtext{ font-size:.86rem; color:var(--bone-dim); line-height:1.55; }
.wk__cardmeta{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.1em; color:#3d5666; margin-top:auto; padding-top:.5rem;
}

.wk__signin{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  color:#557486; margin:2.5rem 0 0;
}
.wk__signin a{ color:var(--frost-dim); border-bottom:1px solid rgba(74,147,173,.4); }

/* ---------- editor bar ---------- */

/* Only people who are signed in ever see this, so it is the one place that
   gives away that the wiki can be edited at all. */
.eb{ background:#0b1f2c; border-bottom:1px solid var(--slate-line); }

.eb__inner{
  max-width:var(--max); margin:0 auto;
  padding:.5rem var(--gutter);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
}

.eb__who{ color:var(--bone-dim); }
.eb__who b{ color:var(--frost); font-weight:500; }
.eb__role{ color:#3d5666; text-transform:uppercase; margin-left:.5rem; }

.eb__links{ margin-left:auto; display:flex; gap:1.2rem; flex-wrap:wrap; }
.eb__links a{ color:var(--bone-dim); text-transform:uppercase; }
.eb__links a:hover{ color:var(--frost); }
.eb__count{
  color:#1a1206; background:var(--rune-gold);
  padding:0 .3rem; margin-left:.25rem; font-weight:600;
}

/* ---------- messages ---------- */

.wk__alert{
  font-size:.88rem; margin:0 0 1.5rem;
  padding:.8rem 1.1rem;
  border-left:2px solid var(--frost-dim);
  background:rgba(134,220,238,.06); color:var(--bone);
}
.wk__alert--good{ border-color:#5fce8f; background:rgba(95,206,143,.07); }
.wk__alert--bad{ border-color:#ff8095; background:rgba(255,128,149,.07); }

.wk__hint{ font-size:.82rem; color:#557486; margin:0 0 1.2rem; }
.wk__spaced{ margin-top:1.1rem; }

/* The one-time password panel. Deliberately loud: it cannot be recovered. */
.wk__secret{
  border:1px solid var(--rune-gold);
  background:rgba(245,178,62,.07);
  padding:1.2rem 1.4rem; margin:0 0 1.8rem;
}
.wk__secretlabel{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--rune-gold); margin:0 0 .5rem;
}
.wk__secretvalue{
  font-family:var(--mono); font-size:1.5rem; letter-spacing:.08em;
  color:var(--bone); margin:0 0 .6rem; user-select:all;
}
.wk__secrethint{ font-size:.84rem; color:var(--bone-dim); margin:0; max-width:60ch; }

/* ============ WIKI EDITOR ============ */

.wke{ margin-top:.5rem; }

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

.wke__hint{ font-size:.76rem; color:#557486; margin:.4rem 0 0; }
.wke__hint code{
  font-family:var(--mono); font-size:.74rem; color:var(--frost-dim);
}

/* Writing on the left, rendered result on the right. */
.wke__split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.6rem; align-items:start; margin-top:.4rem;
}

.wke__body{
  font-family:var(--mono); font-size:.86rem; line-height:1.7;
  resize:vertical; min-height:26rem;
}

.wke__preview{
  border:1px solid var(--slate-line); background:rgba(9,26,37,.6);
  padding:1.2rem 1.4rem; min-height:26rem;
  max-height:40rem; overflow-y:auto;
}
.wke__preview > :first-child{ margin-top:0; }

.wke__help{ margin-top:.9rem; font-size:.82rem; color:var(--bone-dim); }
.wke__help summary{
  cursor:pointer; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--frost-dim);
}
.wke__helplist{ margin:.8rem 0 0; padding-left:1.1rem; line-height:1.9; }
.wke__helplist code{
  font-family:var(--mono); font-size:.78rem; color:var(--frost);
  background:rgba(134,220,238,.08); padding:.05rem .3rem;
  border:1px solid rgba(134,220,238,.16);
}

.wke__actions{ display:flex; gap:.85rem; flex-wrap:wrap; margin-top:1.6rem; }

@media (max-width:900px){
  .wke__split{ grid-template-columns:1fr; }
  .wke__preview{ min-height:0; }
}

/* ============ WIKI DASHBOARD ============ */

.pnl__tabs{
  display:flex; gap:.4rem; flex-wrap:wrap;
  border-bottom:1px solid var(--slate-line);
  margin:0 0 1.8rem; padding-bottom:.8rem;
}

.pnl__tab{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-dim); padding:.5rem .9rem;
  border:1px solid transparent;
}
.pnl__tab:hover{ color:var(--frost); }
.pnl__tab.is-on{ color:var(--frost); border-color:var(--slate-line); background:var(--slate); }
.pnl__tab--go{ margin-left:auto; color:var(--rune-gold); }

.pnl__status{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.pnl__status--pending{ color:var(--rune-gold); }
.pnl__status--approved{ color:#5fce8f; }
.pnl__status--rejected{ color:#ff8095; }

/* one queued change */
.pnl__sub{
  border:1px solid var(--slate-line);
  background:rgba(9,26,37,.5);
  padding:1.4rem 1.6rem; margin:0 0 1.5rem;
}

.pnl__subhead{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

.pnl__subtitle{
  font-family:var(--display); font-weight:700;
  font-size:1.5rem; letter-spacing:.02em;
  color:var(--bone); margin:0 0 .3rem;
  display:flex; align-items:center; gap:.7rem;
}
.pnl__subtitle .wk__soon{ margin-left:0; }

.pnl__submeta{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:#557486; margin:0;
}
.pnl__submeta b{ color:var(--bone-dim); font-weight:500; }
.pnl__submeta code{ color:var(--frost-dim); }

.pnl__note{ font-size:.88rem; color:var(--bone-dim); margin:1rem 0 0; }
.pnl__note b{ color:var(--bone); }

/* the diff */
.pnl__diff{
  font-family:var(--mono); font-size:.78rem; line-height:1.6;
  background:#071620; border:1px solid var(--slate-line);
  margin:1.2rem 0; padding:.6rem 0;
  max-height:32rem; overflow:auto;
}

.pnl__line{ padding:0 1rem; white-space:pre-wrap; word-break:break-word; }
.pnl__line--same{ color:#557486; }
.pnl__line--add{ color:#a8ecc4; background:rgba(95,206,143,.10); }
.pnl__line--del{ color:#ffb3c0; background:rgba(255,128,149,.10); }

.pnl__gap{
  padding:.3rem 1rem; color:#2d4654;
  letter-spacing:.3em; font-size:.7rem;
}

.pnl__preview{ margin-top:1rem; padding:1.2rem 0 0; border-top:1px solid var(--slate-line); }

.pnl__decide{
  display:flex; gap:.7rem; flex-wrap:wrap; align-items:center;
  margin-top:1.3rem; padding-top:1.3rem;
  border-top:1px solid var(--slate-line);
}
.pnl__decide .btn{ padding:.75rem 1.4rem; }
.pnl__reason{ flex:1 1 16rem; padding:.7rem .9rem; font-size:.84rem; }

.pnl__cols{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:2.5rem; align-items:start;
}

.pnl__rowacts{ display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.pnl__rowacts form{ display:contents; }

.pnl__mini{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone-dim); background:none;
  border:1px solid var(--slate-line);
  padding:.35rem .6rem; cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.pnl__mini:hover{ color:var(--frost); border-color:var(--frost-dim); }
.pnl__mini--bad:hover{ color:#ff8095; border-color:#ff8095; }
.pnl__mini.is-armed{ color:#1a1206; background:var(--rune-gold); border-color:var(--rune-gold); }

.pnl__off{ opacity:.45; }

@media (max-width:900px){
  .pnl__cols{ grid-template-columns:1fr; }
}

/* The sign-in and setup forms borrow the vote card but have no second column. */
.vote__inner--one{ grid-template-columns:minmax(0,1fr) minmax(0,400px); }

/* ---------- images in an article ---------- */

.wk__figure{ margin:1.6rem 0; max-width:66ch; }
.wk__figure img{
  width:100%; height:auto;
  border:1px solid var(--slate-line);
  background:#071620;
}
.wk__figure figcaption{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.06em; color:#557486;
  margin-top:.5rem;
}

/* Small enough to sit in a sentence, such as a skill icon. */
.wk__inlineimg{
  display:inline-block; vertical-align:text-bottom;
  max-height:1.4em; width:auto; margin:0 .15rem;
}

/* ---------- the uploader in the editor ---------- */

.wku{
  border:1px solid var(--slate-line);
  background:rgba(9,26,37,.5);
  padding:1rem 1.1rem; margin-top:1rem;
}

.wku__head{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--frost-dim); margin:0 0 .8rem;
}
.wku__head--sub{ margin-top:1.2rem; color:#557486; }

.wku__row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.wku__pick{ flex:0 0 auto; cursor:pointer; }
.wku__alt{ flex:1 1 12rem; padding:.55rem .75rem; font-size:.82rem; }

.wku__status{
  font-size:.78rem; color:#557486;
  margin:.8rem 0 0; line-height:1.55;
}
.wku__status--good{ color:#5fce8f; }
.wku__status--bad{ color:#ff8095; }

.wku__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:.5rem; margin-top:.7rem;
}

.wku__thumb{
  padding:0; border:1px solid var(--slate-line);
  background:#071620; cursor:pointer;
  aspect-ratio:1; overflow:hidden;
  transition:border-color .16s ease;
}
.wku__thumb:hover{ border-color:var(--frost-dim); }
.wku__thumb img{ width:100%; height:100%; object-fit:cover; }

/* Dropping a file straight onto the writing area. */
.wke__body.is-dropping{
  border-color:var(--rune-gold);
  box-shadow:0 0 0 3px rgba(245,178,62,.14);
}

/* ---------- the images tab ---------- */

.wku__grid--admin{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; }

.wku__card{
  margin:0; padding:.7rem;
  border:1px solid var(--slate-line);
  background:rgba(9,26,37,.5);
  display:flex; flex-direction:column; gap:.6rem;
}
.wku__card img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  background:#071620; border:1px solid var(--slate-line);
}

.wku__meta{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.04em; line-height:1.7; color:#557486;
}
.wku__meta b{ color:var(--bone-dim); font-weight:500; }
.wku__unused{ color:var(--rune-gold); }
/* ============ MOTION ============ */

.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

/* page-load: the wordmark settles into place, like it freezes */
@keyframes settle{
  from{ opacity:0; transform:translateY(26px) scale(1.03); filter:blur(9px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
.hero__word{ animation:settle .95s cubic-bezier(.16,.84,.3,1) both; }
.hero__lede{ animation:settle .8s cubic-bezier(.16,.84,.3,1) .18s both; }
.hero__actions{ animation:settle .8s cubic-bezier(.16,.84,.3,1) .3s both; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ============ RESPONSIVE ============ */

@media (max-width:1000px){
  .slabs{ grid-template-columns:1fr; }
  .community{ grid-template-columns:1fr; }
  .inside__grid{ grid-template-columns:1fr; }
}

/* Eight links plus the mark need about 996px once Play Now carries its outline,
   so the bar folds into the toggle at 1060px. That leaves real headroom instead
   of the few pixels a 1000px cut-off would give. Raise it again if a link joins. */
@media (max-width:1060px){
  .nav__group{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__inner{ justify-content:space-between; }
  .nav__mark{ padding:0; }
  .nav__marklogo{ height:32px; }
  .rail__item--dim{ display:none; }
}

/* Above the breakpoint the toggle is gone, so a menu left open on a narrow
   window would have no way to close itself after a resize. */
@media (min-width:1061px){
  .nav__mobile{ display:none; }
}

@media (max-width:560px){
  .rail{ font-size:.66rem; }
  .rail__inner{ gap:.6rem; }
  .btn{ width:100%; text-align:center; }
  .hero__actions{ flex-direction:column; }
}