/* ==========================================================================
   itskindamything.com.au
   A dark, slightly haunted system interface.
   ========================================================================== */

/* ------------------------------------------------------------ 1. tokens */
:root {
  --void:      #04050a;
  --void-2:    #070914;
  --ink:       #0b0e1a;
  --ink-2:     #101524;
  --line:      rgba(124, 170, 230, .16);
  --line-2:    rgba(124, 170, 230, .30);

  --text:      #d7dEEA;
  --text-dim:  #8b96ab;
  --text-mute: #5d6679;

  --sys:       #6cc0ff;
  --sys-soft:  rgba(108, 192, 255, .14);
  --sys-glow:  rgba(108, 192, 255, .40);
  --gold:      #e8c37a;
  --blood:     #d9465f;
  --poison:    #9ad84e;

  --r-sm: 3px;
  --r:    6px;
  --r-lg: 12px;

  --sp: clamp(1rem, 2.2vw, 1.6rem);
  --maxw: 1180px;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --disp: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --prose:'Spectral', Georgia, 'Times New Roman', serif;

  color-scheme: dark;
}

/* ------------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--text);
  font: 400 17px/1.65 var(--prose);
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: -20vmax;
  z-index: -2;
  background:
    radial-gradient(42vmax 42vmax at 18% 6%,  rgba(70, 120, 220, .17), transparent 70%),
    radial-gradient(38vmax 38vmax at 86% 18%, rgba(150, 60, 190, .13), transparent 70%),
    radial-gradient(52vmax 52vmax at 50% 112%, rgba(30, 90, 170, .16), transparent 72%),
    linear-gradient(180deg, var(--void) 0%, var(--void-2) 55%, #03040a 100%);
  animation: drift 48s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

img, svg { max-width: 100%; }
a { color: var(--sys); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--sys); outline-offset: 3px; border-radius: var(--r-sm); }

/* Filmic overlays, drawn over the content the way a lens would. */
.grain, .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.grain {
  opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.vignette { background: radial-gradient(140% 110% at 50% 42%, transparent 58%, rgba(0,0,0,.60) 100%); }

/* ---------------------------------------------------------- 3. typography */
h1, h2, h3 { font-family: var(--disp); font-weight: 700; letter-spacing: .01em; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
em { font-style: italic; }
code {
  font: 500 .86em/1.4 var(--mono);
  background: var(--sys-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .12em .4em;
  color: #a8d8ff;
}
.muted { color: var(--text-dim); font-size: .95rem; }
.dim   { color: var(--text-mute); }

.h-sys {
  font: 700 .74rem/1 var(--mono);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sys);
  margin: 2.6rem 0 1rem;
  display: flex; align-items: center; gap: .9rem;
}
.h-sys::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

/* ------------------------------------------------------------- 4. boot */
.boot {
  position: fixed; inset: 0; z-index: 90;
  background: #02030700;
  backdrop-filter: blur(2px);
  display: none;
  place-items: center;
}
.boot.is-on { display: grid; background: rgba(2,3,7,.94); }
.boot__inner { width: min(640px, 88vw); position: relative; }
.boot__log {
  font: 400 clamp(.76rem, 2.4vw, .92rem)/1.95 var(--mono);
  color: var(--sys);
  margin: 0; white-space: pre-wrap;
  text-shadow: 0 0 18px var(--sys-glow);
  min-height: 15em;
}
.boot__log b { color: #fff; font-weight: 500; }
.boot__skip {
  position: absolute; right: 0; bottom: -2.6rem;
  background: none; border: 1px solid var(--line-2); color: var(--text-dim);
  font: 500 .72rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  padding: .6rem .9rem; border-radius: var(--r-sm); cursor: pointer;
}
.boot__skip:hover { color: var(--sys); border-color: var(--sys); }

/* ----------------------------------------------------------- 5. topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp);
  padding: .7rem clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(5,7,14,.93), rgba(5,7,14,.72));
  backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .7rem; color: var(--text); flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand__mark { color: var(--sys); display: grid; place-items: center; filter: drop-shadow(0 0 9px var(--sys-glow)); }
.brand__text { display: grid; line-height: 1.15; }
.brand__text b { font: 700 .97rem/1.2 var(--disp); letter-spacing: .02em; }
.brand__text i {
  font: 400 .6rem/1.4 var(--mono); font-style: normal;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute);
}

.nav { display: flex; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
.nav a {
  font: 500 .73rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
  padding: .68rem .72rem; border-radius: var(--r-sm);
  position: relative;
}
.nav a:hover { color: var(--text); background: rgba(108,192,255,.07); text-decoration: none; }
.nav a.is-active { color: var(--sys); }
.nav a.is-active::after {
  content: ''; position: absolute; left: .72rem; right: .72rem; bottom: .28rem;
  height: 1px; background: var(--sys); box-shadow: 0 0 8px var(--sys-glow);
}

.rankchip {
  display: grid; grid-template-columns: auto auto; grid-auto-rows: auto;
  align-items: center; gap: 0 .45rem;
  background: rgba(10,14,26,.8);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .34rem .62rem .4rem; cursor: pointer; flex: 0 0 auto;
}
.rankchip:hover { border-color: var(--sys); }
.rankchip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rank, #7c8798);
  box-shadow: 0 0 10px var(--rank, #7c8798);
}
.rankchip__label {
  font: 700 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rank, var(--text-dim));
}
.rankchip__bar {
  grid-column: 1 / -1; height: 2px; margin-top: .3rem;
  background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden;
}
.rankchip__bar i {
  display: block; height: 100%; width: 0%;
  background: var(--rank, var(--sys));
  box-shadow: 0 0 8px var(--rank, var(--sys));
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}

.navtoggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.navtoggle span { display: block; width: 20px; height: 1.5px; background: var(--text); margin: 4px 0; transition: .25s; }

/* -------------------------------------------------------------- 6. main */
main { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: clamp(1.4rem, 4vw, 3.2rem) clamp(1rem, 3vw, 2rem) 5rem; }
.view { display: none; animation: fade .45s ease both; }
.view.is-active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.viewhead { max-width: 62ch; margin-bottom: 2.2rem; }
.viewhead p { color: var(--text-dim); font-size: 1.02rem; }

/* --------------------------------------------------------------- 7. hero */
.hero { max-width: 74ch; }
.hero__eyebrow {
  font: 500 .68rem/1 var(--mono); letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 1.4rem;
}
.hero__title {
  font-size: clamp(2.6rem, 9vw, 5.6rem);
  line-height: .98; letter-spacing: -.01em; margin-bottom: 1.1rem;
}
.hero__title em {
  display: block; font-style: normal;
  background: linear-gradient(100deg, var(--sys) 0%, #b79cff 48%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 28px rgba(108,192,255,.28));
}
.hero__lede { font-size: clamp(1.02rem, 2.1vw, 1.22rem); color: var(--text-dim); max-width: 56ch; }
.hero__lede em { color: var(--text); font-style: normal; }
.hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.8rem 0 2.4rem; }

/* ----------------------------------------------------------- 8. buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 500 .76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: .92rem 1.25rem;
  color: var(--text);
  background: rgba(16,21,36,.7);
  border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer; transition: .22s cubic-bezier(.2,.8,.2,1);
}
.btn:hover { border-color: var(--sys); color: #fff; background: rgba(108,192,255,.1); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn--primary {
  background: linear-gradient(180deg, rgba(108,192,255,.22), rgba(108,192,255,.08));
  border-color: var(--sys); color: #eaf6ff;
  box-shadow: 0 0 0 1px rgba(108,192,255,.1), 0 10px 30px -14px var(--sys-glow);
}
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(108,192,255,.3), 0 14px 36px -12px var(--sys-glow); }
.btn--ghost { background: none; border-color: var(--line); color: var(--text-dim); }

/* ---------------------------------------------------------- 9. sys boxes */
.sysbox {
  position: relative;
  background: linear-gradient(180deg, rgba(108,192,255,.07), rgba(108,192,255,.02));
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 1.15rem 1.3rem;
  font: 400 .88rem/1.8 var(--mono);
  color: #b9d9f5;
  box-shadow: inset 0 0 40px rgba(108,192,255,.05), 0 18px 50px -30px rgba(0,0,0,.9);
}
.sysbox p { margin: 0 0 .35rem; }
.sysbox p:last-child { margin: 0; }
.sysbox b { color: #fff; font-weight: 700; }
.sysbox::before, .sysbox::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--sys); opacity: .75;
}
.sysbox::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.sysbox::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.sysbox__bar {
  position: absolute; top: -.62rem; left: 1.1rem;
  background: #0a1020; padding: 0 .5rem;
  font: 700 .6rem/1.2 var(--mono); letter-spacing: .24em; text-transform: uppercase;
  color: var(--sys);
}
.sysbox--hero { max-width: 60ch; }

/* ---------------------------------------------------------- 10. cards */
.cards {
  display: grid; gap: var(--sp);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin-top: 3.4rem;
}
.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.5rem 1.4rem 1.3rem;
  background: linear-gradient(180deg, rgba(16,21,36,.78), rgba(10,14,26,.6));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--text);
  transition: .3s cubic-bezier(.2,.8,.2,1);
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); text-decoration: none; box-shadow: 0 24px 60px -34px rgba(0,0,0,1); }
.card::after {
  content: ''; position: absolute; inset: -40% 55% 55% -40%;
  background: radial-gradient(circle, rgba(108,192,255,.16), transparent 62%);
  opacity: 0; transition: opacity .35s;
}
.card:hover::after { opacity: 1; }
.card__glyph { font-size: 1.5rem; color: var(--sys); line-height: 1; filter: drop-shadow(0 0 12px var(--sys-glow)); }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--text-dim); font-size: .96rem; }
.card__go {
  margin-top: auto; padding-top: .7rem;
  font: 500 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sys);
}

/* ------------------------------------------------------- 11. rank ladder */
.rankstrip { margin-top: 3.6rem; }
.ladder { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ladder li {
  display: grid; grid-template-columns: 1.2rem 7rem 1fr; align-items: baseline; gap: .8rem;
  padding: .66rem .9rem;
  border: 1px solid var(--line); border-left: 2px solid var(--rank, var(--line-2));
  border-radius: var(--r-sm);
  background: rgba(10,14,26,.5);
  font-size: .95rem;
}
.ladder li.is-here { background: rgba(108,192,255,.08); border-color: var(--line-2); }
.ladder .n { font: 500 .7rem/1 var(--mono); color: var(--text-mute); }
.ladder .r { font: 700 .74rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--rank); }
.ladder .b { color: var(--text-dim); font-size: .92rem; }

.rankgrid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rankgrid > div {
  padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r);
  border-top: 2px solid var(--rank); background: rgba(10,14,26,.55);
}
.rankgrid h4 { margin: 0 0 .3rem; font: 700 .76rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--rank); }
.rankgrid p { margin: 0; font-size: .92rem; color: var(--text-dim); }

/* ---------------------------------------------------------- 12. forge */
.forge { margin-bottom: 2.4rem; }
.slots { display: grid; gap: var(--sp); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.slot {
  position: relative;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: rgba(10,14,26,.45);
  padding: 1.1rem;
  min-height: 150px;
  display: flex; flex-direction: column; gap: .55rem;
}
.slot[data-filled='1'] {
  border-style: solid;
  border-color: hsl(var(--h) 80% 62% / .5);
  background:
    radial-gradient(120% 100% at 50% 0%, hsl(var(--h) 80% 55% / .16), transparent 70%),
    rgba(10,14,26,.6);
  box-shadow: inset 0 0 44px hsl(var(--h) 80% 55% / .08);
}
.slot__idx { font: 500 .62rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--text-mute); }
.slot__glyph { font-size: 1.7rem; line-height: 1; color: hsl(var(--h) 85% 70%); filter: drop-shadow(0 0 14px hsl(var(--h) 85% 60% / .6)); }
.slot__name { font: 700 1.05rem/1.2 var(--disp); letter-spacing: .04em; }
.slot__name.is-empty { color: var(--text-mute); font-family: var(--mono); font-size: .8rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.slot select {
  margin-top: auto; width: 100%;
  background: rgba(4,6,12,.8); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: 400 .8rem/1 var(--mono); padding: .6rem .5rem;
}
.forge__controls { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.forge__hint { margin-top: .9rem; }

/* ------------------------------------------------------- 13. the sheet */
.sheet { animation: fade .5s ease both; }
.conf {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background:
    radial-gradient(90% 140% at 12% 0%, hsl(var(--h) 85% 55% / .20), transparent 62%),
    linear-gradient(180deg, rgba(16,21,36,.86), rgba(8,11,20,.76));
  box-shadow: 0 30px 80px -40px #000;
  margin-bottom: 2rem;
}
.conf__tag { font: 500 .66rem/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--text-mute); }
.conf__name {
  font-family: var(--disp); font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.02;
  margin: .5rem 0 .2rem;
  color: hsl(var(--h) 90% 76%);
  text-shadow: 0 0 36px hsl(var(--h) 90% 60% / .45);
}
.conf__sub { color: var(--text-dim); font-size: 1.02rem; max-width: 52ch; margin-bottom: 1.2rem; }
.conf__chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem .72rem; border-radius: 999px;
  border: 1px solid hsl(var(--ch, 210) 70% 60% / .4);
  background: hsl(var(--ch, 210) 70% 55% / .12);
  color: hsl(var(--ch, 210) 80% 78%);
}
.conf__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.attrs { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1.6rem 0 0; }
.attr { border: 1px solid var(--line); border-radius: var(--r); padding: .8rem .9rem; background: rgba(4,6,12,.45); }
.attr dt { font: 500 .64rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); margin-bottom: .4rem; }
.attr dd { margin: 0; font: 700 1.3rem/1 var(--disp); color: var(--text); }
.attr i { display: block; height: 2px; margin-top: .55rem; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.attr i b { display: block; height: 100%; background: var(--sys); box-shadow: 0 0 8px var(--sys-glow); }

.abilgroup { margin-bottom: 2.2rem; }
.abilgroup__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.abilgroup__glyph { font-size: 1.2rem; color: hsl(var(--h) 85% 70%); filter: drop-shadow(0 0 10px hsl(var(--h) 85% 60% / .6)); }
.abilgroup__name { font: 700 .8rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--h) 85% 76%); }
.abilgroup__rule { flex: 1; height: 1px; background: linear-gradient(90deg, hsl(var(--h) 85% 60% / .4), transparent); }

.abils { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.abil {
  border: 1px solid var(--line); border-left: 2px solid hsl(var(--h) 85% 60% / .55);
  border-radius: var(--r); padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(14,19,33,.7), rgba(8,11,20,.5));
  transition: .25s;
}
.abil:hover { border-color: var(--line-2); background: linear-gradient(180deg, rgba(18,24,42,.8), rgba(10,14,26,.6)); }
.abil__top { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-bottom: .5rem; }
.abil__name { font: 700 1.04rem/1.25 var(--disp); letter-spacing: .02em; }
.abil__type { font: 500 .6rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; }
.abil__eff { margin: 0 0 .6rem; font-size: .95rem; color: var(--text-dim); }
.abil__eff::first-letter { text-transform: uppercase; }
.abil__meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.tag {
  font: 500 .6rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .5rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--text-mute);
}
.abil__tail { margin: .6rem 0 0; font: 400 .72rem/1.5 var(--mono); color: var(--text-mute); }

/* ------------------------------------------------------- 14. toolbars */
.toolbar { display: flex; align-items: flex-end; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.field { display: grid; gap: .35rem; }
.field--grow { flex: 1 1 260px; }
.field > span { font: 500 .62rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }
.field select, .field input {
  background: rgba(10,14,26,.8); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: 400 .84rem/1 var(--mono); padding: .72rem .7rem; width: 100%;
}
.field input::placeholder { color: var(--text-mute); }

/* ------------------------------------------------------ 15. contracts */
.board { display: grid; gap: var(--sp); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.contract {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(16,21,36,.74), rgba(8,11,20,.58));
  padding: 1.3rem 1.3rem 1.1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.contract::before {
  content: ''; position: absolute; top: 0; left: 1.3rem; right: 1.3rem; height: 2px;
  background: linear-gradient(90deg, var(--rank), transparent);
}
.contract__id { font: 500 .62rem/1 var(--mono); letter-spacing: .2em; color: var(--text-mute); }
.contract__title { font: 700 1.12rem/1.3 var(--disp); margin: 0; }
.contract__rows { display: grid; gap: .3rem; margin: .3rem 0 .2rem; }
.contract__row { display: grid; grid-template-columns: 5.6rem 1fr; gap: .7rem; font-size: .92rem; }
.contract__row dt { font: 500 .62rem/1.7 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.contract__row dd { margin: 0; color: var(--text); }
.contract__note {
  margin: auto 0 0; padding-top: .8rem; border-top: 1px dashed var(--line);
  font: 400 .8rem/1.6 var(--mono); color: var(--text-dim);
}
.badge {
  align-self: flex-start;
  font: 700 .62rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  padding: .4rem .6rem; border-radius: var(--r-sm);
  border: 1px solid var(--rank); color: var(--rank);
  background: color-mix(in srgb, var(--rank) 12%, transparent);
}
.badge--risk { border-color: var(--blood); color: #ff95a6; background: rgba(217,70,95,.12); }

/* -------------------------------------------------------- 16. kitchen */
.dish { display: grid; gap: var(--sp); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.plate {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    radial-gradient(100% 80% at 80% 0%, rgba(232,195,122,.12), transparent 65%),
    linear-gradient(180deg, rgba(16,21,36,.76), rgba(8,11,20,.6));
  padding: 1.4rem;
}
.plate h3 { font-size: 1.22rem; margin-bottom: .6rem; color: #f3e2c0; }
.plate__with { color: var(--text-dim); font-size: .96rem; }
.plate__buff {
  margin: 1rem 0 0; padding: .75rem .9rem;
  border: 1px solid rgba(232,195,122,.3); border-radius: var(--r);
  background: rgba(232,195,122,.08);
  font: 400 .8rem/1.6 var(--mono); color: #f0dcb4;
}
.plate__quip { margin: .9rem 0 0; font-style: italic; color: var(--text-dim); font-size: .95rem; }

/* ---------------------------------------------------------- 17. codex */
.codex { margin: 0; }
.codex > div {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
  display: grid; grid-template-columns: minmax(150px, 15rem) 1fr; gap: 1.4rem;
}
.codex dt { font: 700 .8rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sys); }
.codex dd { margin: 0; color: var(--text-dim); }
.codex > div.is-hidden { display: none; }

.prose { max-width: 66ch; }
.prose strong { color: #fff; }
.trylist { padding-left: 1.2rem; color: var(--text-dim); }
.trylist li { margin-bottom: .45rem; }

/* --------------------------------------------------- 18. notifications */
.notes {
  position: fixed; top: 4.6rem; right: clamp(.6rem, 2vw, 1.4rem);
  z-index: 60; display: grid; gap: .55rem; width: min(330px, calc(100vw - 1.6rem));
  pointer-events: none;
}
.note {
  position: relative;
  background: linear-gradient(180deg, rgba(10,22,40,.96), rgba(7,14,28,.94));
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .75rem .9rem;
  font: 400 .78rem/1.55 var(--mono); color: #bcdcf8;
  box-shadow: 0 0 0 1px rgba(108,192,255,.08), 0 20px 44px -22px #000, inset 0 0 30px rgba(108,192,255,.07);
  animation: noteIn .35s cubic-bezier(.2,.8,.2,1) both;
}
.note.is-out { animation: noteOut .35s ease both; }
.note b { color: #fff; font-weight: 700; }
.note--rank { border-color: var(--gold); color: #f5e4bd; box-shadow: 0 0 0 1px rgba(232,195,122,.18), 0 22px 50px -22px #000, inset 0 0 34px rgba(232,195,122,.1); }
.note--shade { border-color: rgba(183,156,255,.45); color: #d6c9ff; }
@keyframes noteIn  { from { opacity: 0; transform: translateX(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes noteOut { to { opacity: 0; transform: translateX(26px) scale(.97); height: 0; padding-block: 0; margin-bottom: -.55rem; } }

/* --------------------------------------------------------- 19. shade */
.shade {
  position: fixed; left: clamp(.8rem, 2vw, 1.6rem); bottom: clamp(.8rem, 2vw, 1.6rem);
  z-index: 55; background: none; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
}
.shade__orb {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #3b2a66, #0a0714 70%);
  border: 1px solid rgba(183,156,255,.4);
  box-shadow: 0 0 26px rgba(120,80,220,.4), inset 0 0 18px rgba(0,0,0,.9);
  animation: breathe 5.5s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.shade:hover .shade__orb { border-color: rgba(183,156,255,.9); box-shadow: 0 0 36px rgba(140,100,255,.6), inset 0 0 18px rgba(0,0,0,.9); }
.shade__tip {
  position: absolute; left: 58px; bottom: 2px; width: max-content; max-width: min(320px, 70vw);
  text-align: left;
  background: rgba(10,8,22,.96); border: 1px solid rgba(183,156,255,.4); border-radius: var(--r);
  padding: .7rem .85rem; font: 400 .76rem/1.6 var(--mono); color: #d6c9ff;
  box-shadow: 0 18px 44px -20px #000;
  animation: fade .3s ease both;
}

/* --------------------------------------------------------- 20. footer */
.foot {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  padding: 2rem clamp(1rem, 3vw, 2rem) 3rem;
  max-width: var(--maxw); margin: 0 auto;
  font-size: .86rem; color: var(--text-mute);
}
.foot p { max-width: 80ch; margin: 0 0 .5rem; }
.foot b { color: var(--text-dim); }
.foot__sig { font: 400 .72rem/1.6 var(--mono); letter-spacing: .08em; }

.noscript {
  position: relative; z-index: 3; margin: 1rem auto; max-width: 60ch;
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 1rem;
  font: 400 .84rem/1.7 var(--mono); color: #bcdcf8; background: rgba(10,22,40,.9);
}

/* ------------------------------------------------------- 21. responsive */
@media (max-width: 920px) {
  .navtoggle { display: block; order: 3; margin-left: auto; }
  .rankchip { order: 2; margin-left: auto; }
  .nav {
    order: 4; width: 100%; margin: 0;
    display: none; flex-direction: column; gap: 0;
    padding-top: .6rem; border-top: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .8rem .4rem; font-size: .8rem; }
  .nav a.is-active::after { left: .4rem; right: auto; width: 1.4rem; }
  .topbar { flex-wrap: wrap; }
  .codex > div { grid-template-columns: 1fr; gap: .45rem; }
  .ladder li { grid-template-columns: 1.1rem 1fr; }
  .ladder .b { grid-column: 2; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .shade__tip { left: auto; right: 0; bottom: 56px; }
  .notes { top: auto; bottom: 5.4rem; }
  .contract__row { grid-template-columns: 1fr; gap: 0; }
}
@media print { .topbar, .notes, .shade, .grain, .vignette, .boot { display: none !important; } body::before { display: none; } }