/* animesh.net "Index" look: palettes (six + Ultra), base, header, Colours menu.
   Shared by index.html and /essays/. Palette choice is kept in localStorage
   (home:palette, home:ultra) by assets/theme/index-look.js. */
/* Palettes: ground / text / game names, then the same three for Ultra. */
html                         { --ground:#e4ff3a; --fg:#111111; --name:#111111; --u-ground:#111111; --u-fg:#e4ff3a; --u-name:#e4ff3a; }
html[data-palette="violet"]  { --ground:#f2f2f2; --fg:#000000; --name:#000000; --u-ground:#4801ff; --u-fg:#ffffff; --u-name:#ffffff; }
html[data-palette="signal"]  { --ground:#f2f2f2; --fg:#111111; --name:#e04300; --u-ground:#ff4d00; --u-fg:#111111; --u-name:#111111; }
html[data-palette="mint"]    { --ground:#bff0d8; --fg:#13172e; --name:#13172e; --u-ground:#d6246e; --u-fg:#ffffff; --u-name:#ffffff; }
html[data-palette="cobalt"]  { --ground:#ffffff; --fg:#0b1a66; --name:#1f3fff; --u-ground:#1f3fff; --u-fg:#ffffff; --u-name:#ffffff; }
html[data-palette="night"]   { --ground:#121214; --fg:#ededed; --name:#d4ff3a; --u-ground:#ff3d7f; --u-fg:#121214; --u-name:#121214; }
html                   { --g:var(--ground);   --f:var(--fg);   --n:var(--name);   --dot:var(--u-ground); }
html[data-ultra="on"]  { --g:var(--u-ground); --f:var(--u-fg); --n:var(--u-name); --dot:var(--ground); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--g); color: var(--f);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 1.5;
  transition: background-color .5s, color .5s;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wide { font-family: 'Archivo', 'Arial Black', sans-serif; font-stretch: 125%; font-variation-settings: 'wdth' 125; text-transform: uppercase; }

/* ---- top bar ---- */
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.top-left { display: flex; flex-direction: column; gap: 8px; }
.logo-top { font-weight: 600; font-size: 22px; line-height: .85; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 14px; font-weight: 600; }
.nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover, .nav a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.nav .num { font-size: 12px; margin-right: 10px; }
.controls { position: relative; display: flex; gap: 8px; align-items: center; }
.pill {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--f);
  background: transparent; color: var(--f); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.pill:hover, .pill[aria-expanded="true"], .pill[aria-pressed="true"] { background: var(--f); color: var(--g); }
.pill .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dot); border: 1.5px solid currentColor; }
.menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 5;
  width: min(280px, calc(100vw - 32px)); padding: 8px; border-radius: 16px;
  background: var(--g); border: 1.5px solid var(--f); display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.menu[hidden] { display: none; }
.swatch {
  font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 10px; border-radius: 10px;
  border: 1.5px solid transparent; background: transparent; color: var(--f); cursor: pointer;
  display: flex; align-items: center; gap: 10px; text-align: left;
}
.swatch:hover { border-color: var(--f); }
.swatch[aria-pressed="true"] { background: var(--f); color: var(--g); }
.swatch i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; }