/* smply.gg/soulverse: the Soulverse mod's page, drawn with the mod's own UI.
   The colours are the mod's (soulverse.js sets the --sv-* values from soulverse-data.js, read out of the mod's
   source; the ones here are only what shows before it runs), and its pieces are the mod's: the 9x8 SOUL heart as
   the menus' cursor, their notched arrows and arrow signs, buttons and switches (SoulverseWidgets, the menus'
   toggles), hover-text boxes (SoulverseWidgets.tooltipBody/Frame), the F4 quirk cards (QuirkListScreen), the
   footer's key hints and progress squares (SoulverseScreen), and the backdrop and stage (SoulverseBackdrop,
   SoulverseScreen.extractBackground), drawn by soulverse.js the way the game draws them.
   As in the mod, one pixel of the art is one pixel of the font it sits by: 16 px text has 1 px pixels, 32 px text 2 px.
   The pixel fonts are on a 16 px grid, so text is 16 or 32 px and line heights whole pixels: anything else blurs them. */

@font-face { font-family: "Determination Mono"; src: url("/assets/soulverse/font/determination_mono.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Determination Sans"; src: url("/assets/soulverse/font/determination_sans.ttf") format("truetype"); font-display: block; }

:root {
  --soul: #ff0000;            /* the chosen SOUL (the menus' Startup Theme) */
  --glow: #ff0000;            /* the same, but crimson for Hate's near-black, as the mod's glows are */
  --sv-selected: #ffffff; --sv-unselected: #8a8c9a; --sv-description: #a9abbc; --sv-label: #c9cbd6;
  --sv-divider: #3a3d55; --sv-hint-key: #8c8fa6; --sv-hint-label: #5d6078;
  --sv-dot-current: #ffffff; --sv-dot-done: #9095bc; --sv-dot-todo: #3d4058;
  --sv-top: #0a0b26; --sv-bottom: #04040f;
  --sv-panel: #0a0a1c; --sv-panel-hi: #14143a; --sv-outline: #4a4e78; --sv-outline-off: #2a2c3c; --sv-outline-hi: #ffffff; --sv-handle: #b4b6c8;
  --q-text: #f0f0f8; --q-faint: #a8abc0; --q-dim: #6e7186; --q-cost: #ff9a8a; --q-active: #e8c46a; --q-toggle: #7fd49a; --q-passive: #9fb8e8;
  --mono: "Determination Mono", ui-monospace, monospace;
  --sans: "Determination Sans", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }   /* (no grey box flashing on a tapped button) */
[hidden] { display: none !important; }   /* (over the display a button or row has of its own) */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--sv-bottom); color: var(--sv-description);
  font: 16px/24px var(--sans);
  -webkit-font-smoothing: none; font-smooth: never;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
}
/* the mod's scrollbar (SoulverseWidgets' widget/scroller): a dark track, 40% black, and a light handle edged in black with the
   inventory scroller's grip, three short lines across its middle; white while held or pointed at. The page's own and every list's.
   (Browsers that can't draw one, Firefox, get its colours: the standard scrollbar-color, which Chrome would take over this.) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .4); }
::-webkit-scrollbar-corner { background: rgba(0, 0, 0, .4); }
::-webkit-scrollbar-thumb {
  min-height: 24px; border: 1px solid rgba(0, 0, 0, .6); border-radius: 0;
  background: linear-gradient(#e6e7ef, #e6e7ef) center calc(50% - 2px) / 6px 1px no-repeat,
    linear-gradient(#e6e7ef, #e6e7ef) center / 6px 1px no-repeat,
    linear-gradient(#e6e7ef, #e6e7ef) center calc(50% + 2px) / 6px 1px no-repeat,
    var(--sv-handle);
}
::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(#e6e7ef, #e6e7ef) calc(50% - 2px) center / 1px 6px no-repeat,
    linear-gradient(#e6e7ef, #e6e7ef) center / 1px 6px no-repeat,
    linear-gradient(#e6e7ef, #e6e7ef) calc(50% + 2px) center / 1px 6px no-repeat,
    var(--sv-handle);
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: #d8dae6; }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
  html, .quirk-results, .code { scrollbar-color: var(--sv-handle) rgba(0, 0, 0, .4); }
}
img, svg, canvas, .pic, .tile-icon i { image-rendering: pixelated; }   /* pixel art scaled up stays sharp, never smoothed */
svg { shape-rendering: crispEdges; }
a { color: var(--sv-selected); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--glow); }
b, strong { color: var(--sv-selected); font-weight: normal; }
p { margin: 0 0 16px; }
ul { margin: 0 0 16px; padding: 0; }
/* keys in running text: the footer's key colour, as the game writes them */
kbd, code { font: 16px/24px var(--mono); color: var(--sv-label); }
code { white-space: nowrap; }
::selection { background: var(--soul); color: #000; }
:focus-visible { outline: 1px solid var(--sv-outline-hi); outline-offset: 2px; }

/* hidden until soulverse.js has laid the page out (see the page's head) */
.loading .bar, .loading main, .loading .foot { visibility: hidden; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: #000; color: #fff; padding: 8px 16px; font-family: var(--mono); }
.skip:focus { left: 8px; }

/* the menus' animated backdrop (SoulverseBackdrop), drawn by soulverse.js a game pixel several screen pixels */
.backdrop { position: fixed; left: 0; top: 0; z-index: -1; display: block; }

/* ---------- the heart cursor: the menus' 9x8 SOUL ---------- */
/* the heart cursor: a real 9x8 heart (soulverse.js puts one in each place it goes), shown on the chosen row */
.cursor-heart { position: absolute; display: block; opacity: 0; color: var(--soul); pointer-events: none; }
.cursor-heart svg { display: block; width: 100%; height: 100%; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(4, 4, 15, .9); border-bottom: 1px solid var(--sv-divider); }
.bar-in { max-width: 1184px; margin: 0 auto; padding: 0 16px; height: 56px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 8px; font: 16px/24px var(--mono); color: var(--sv-selected); text-decoration: none; white-space: nowrap; text-shadow: 1px 1px 0 #404040; }
.heart-icon { display: inline-block; width: 18px; height: 16px; flex: none; }
.heart-icon svg, [data-heart] svg { display: block; width: 100%; height: 100%; }
.links { display: flex; list-style: none; margin: 0 0 0 16px; padding: 0; }
/* menu rows (extractPlainOption): the chosen one white with the heart before it, the rest grey, a shadow a font pixel down */
.links a, .menu-item {
  position: relative; display: block; padding: 4px 8px 4px 20px;
  font: 16px/24px var(--mono); color: var(--sv-unselected); text-decoration: none; white-space: nowrap;
  text-shadow: 1px 1px 0 #222327;
}
.links a .cursor-heart { left: 6px; top: 12px; width: 9px; height: 8px; }
.links a:hover, .links a.here, .menu-item:hover, .menu-item:focus-visible { color: var(--sv-selected); text-shadow: 1px 1px 0 #404040; }
.links a:hover .cursor-heart, .links a.here .cursor-heart, .menu-item:hover .cursor-heart, .menu-item:focus-visible .cursor-heart { opacity: 1; }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* buttons (SoulverseWidgets.button): a dark panel with a 1 px outline; highlighted, a lighter panel outlined in white,
   with the SOUL at its left on wide ones */
.button, .menu-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 2px 12px;
  font: 16px/24px var(--mono); color: var(--sv-selected); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: color-mix(in srgb, var(--sv-panel) 75%, transparent); border: 1px solid var(--sv-outline);
  text-shadow: 1px 1px 0 #404040;
}
.button .cursor-heart { left: 6px; top: calc(50% - 4px); width: 9px; height: 8px; }
.button:hover, .button:focus-visible, .menu-btn:hover, .button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--sv-panel-hi) 75%, transparent); border-color: var(--sv-outline-hi); outline: none;
}
.button.wide { padding-left: 24px; padding-right: 16px; }
.button.wide:hover .cursor-heart, .button.wide:focus-visible .cursor-heart, .button.wide[aria-pressed="true"] .cursor-heart { opacity: 1; }

.bar-in .menu-btn { display: none; }   /* the phones' menu button */

/* the menus' switch (SoulverseMenuScreen.extractToggle), two screen pixels a switch pixel beside 16 px words */
.switch-row { display: inline-flex; align-items: center; padding: 4px; background: none; border: 0; cursor: pointer; font: 16px/24px var(--mono); color: var(--sv-unselected); }
.switch-row .label { margin-right: 10px; text-shadow: 1px 1px 0 #222327; }
.switch-row:hover .label, .switch-row:focus-visible .label { color: var(--sv-selected); }
.switch { position: relative; display: block; width: 44px; height: 18px; background: #3a3d55;
  clip-path: polygon(2px 0, 42px 0, 42px 2px, 44px 2px, 44px 16px, 42px 16px, 42px 18px, 2px 18px, 2px 16px, 0 16px, 0 2px, 2px 2px);
  transition: background .2s; }
.switch i { position: absolute; left: 6px; top: 4px; width: 14px; height: 10px; background: #8a8c9a; transition: left .2s cubic-bezier(.4, 0, .6, 1), background .2s; }
.switch-row:hover .switch i, .switch-row:focus-visible .switch i { background: #c8cada; }
.switch-row .word { min-width: 40px; margin-left: 18px; text-align: left; color: var(--sv-description); }
.switch-row:hover .word { color: var(--sv-selected); }
.switch-row[aria-checked="true"] .switch { background: #2e9e58; }
.switch-row[aria-checked="true"] .switch i { left: 24px; background: #ffffff; }
.switch-row[aria-checked="true"] .word { color: #6be38a; }

/* ---------- the stage: spotlight, the floor's glow and ripples, the floating SOUL (drawn by soulverse.js) ---------- */
.stage { position: relative; margin: 0 auto; }
.stage canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.stage .stage-back { z-index: 0; }
.stage .stage-front { z-index: 5; }

/* ---------- hero: the main menu ---------- */
.hero { min-height: calc(100vh - 56px); padding: 48px 16px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo { margin: 0; line-height: 0; }
.logo img { width: 512px; height: 156px; }          /* the mod's animated logo in the SOUL's colour, 4 screen pixels a logo pixel */
.subtitle { margin: 8px 0 0; font: 16px/24px var(--mono); color: var(--sv-description); }
.hero-stage { width: 560px; height: 393px; margin-top: 8px; }   /* (soulverse.js works it out the same way) */
.hero-heart { position: absolute; left: 50%; top: 32px; width: 144px; height: 144px; margin-left: -72px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 6; }
.typed { margin: 16px 0 8px; min-height: 40px; font: 32px/40px var(--mono); color: var(--sv-selected); text-shadow: 2px 2px 0 #404040; }
.lead { max-width: 560px; margin: 0 0 24px; color: var(--sv-description); }
/* the main menu's rows: options a size up from descriptions (32 px, 2 px pixels, so a 2 px heart) */
.menu-list { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: min(100%, 448px); margin-bottom: 32px; }
/* each row centred on its own words (the heart's room on both sides, so the words are in the middle) */
/* as the menus' wide buttons (SoulverseWidgets.button): each row a panel with its outline, all as wide, the words in the middle;
   chosen, the lighter panel outlined in white with the SOUL at its left */
.menu-item { font: 32px/40px var(--mono); padding: 6px 48px; text-align: center; text-shadow: 2px 2px 0 #222327;
  background: color-mix(in srgb, var(--sv-panel) 75%, transparent); border: 1px solid var(--sv-outline); }
.menu-item .cursor-heart { left: 16px; top: calc(50% - 8px); width: 18px; height: 16px; }
.menu-item:hover, .menu-item:focus-visible { text-shadow: 2px 2px 0 #404040; outline: none;
  background: color-mix(in srgb, var(--sv-panel-hi) 75%, transparent); border-color: var(--sv-outline-hi); }
.status { display: inline-flex; align-items: center; gap: 8px; margin: auto 0 0; font: 16px/24px var(--mono); color: var(--sv-label); }
.status.tip { padding: 5px 13px 5px 0; }
.status .dot { width: 8px; height: 8px; background: #ffd75e; }

/* ---------- hover-text boxes (SoulverseWidgets.tooltipBody/Frame): a dark body, corners rounded in two steps, a light
   edge darkening downwards, a dark line round the outside and a gleam along its top. soulverse.js paints it as the
   mod does and sets it as --tip (and --tip-active / -toggle / -passive, edged in the F4 quirk colours). ---------- */
.tip {
  border-style: solid; border-width: 3px 3px 3px 18px; border-image: var(--tip) 3 3 3 18 fill / 3px 3px 3px 18px stretch;
  padding: 21px 21px 21px 6px;   /* 24 px all round with the borders */
}
.tip.active { border-image-source: var(--tip-active); }
.tip.toggle { border-image-source: var(--tip-toggle); }
.tip.passive { border-image-source: var(--tip-passive); }
/* a popup (SoulverseWidgets popup/background): near-black with a 2 px white edge */
.popup { background: rgba(0, 0, 0, .92); border: 2px solid var(--sv-outline-hi); padding: 22px; }
/* a plain frame (the menus' text fields and sliders): the panel with its outline */
.frame { background: color-mix(in srgb, var(--sv-panel) 72%, transparent); border: 1px solid var(--sv-outline); }

/* ---------- sections ---------- */
.section { padding: 80px 0; }
.wrap { max-width: 1184px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 880px; }
/* titles (extractTitle): white with Minecraft's shadow (a font pixel down and right, a quarter as bright), typed out */
.title { margin: 0 0 16px; min-height: 40px; font: 32px/40px var(--mono); color: var(--sv-selected); text-shadow: 2px 2px 0 #404040; }
#teaser .title { text-align: center; }   /* over the middle of its video */
/* a title with a switch beside it */
.title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; }
.title-row .title { margin: 0; }
/* descriptions (extractDescription): a short divider over them, then the description grey */
.intro { position: relative; max-width: 720px; margin: 0 0 32px; padding-top: 8px; color: var(--sv-description); }
.intro::before, .soul-desc::before { content: ""; position: absolute; left: 0; top: 0; width: min(100%, var(--rule, 360px)); height: 1px; background: var(--sv-divider); }   /* as long as the heading over it (--rule) */
.sub { margin: 40px 0 16px; font: 16px/24px var(--mono); color: var(--sv-label); }
.small { color: var(--q-dim); }
h3 { margin: 0 0 8px; font: 16px/24px var(--mono); color: var(--q-text); text-shadow: 1px 1px 0 #3c3c3e; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; }
.tile p { margin: 0; color: var(--q-faint); }
/* a tile's way on, under its words: a link as the datapack section's */
.tile p.tile-link { margin-top: auto; padding-top: 16px; color: var(--sv-description); }

/* a quirk tile (QuirkListScreen's): dark with a faint white edge; white-edged while it's the one looked at */
.tile-icon { display: block; width: 53px; height: 53px; margin-bottom: 16px; flex: none; background: rgba(16, 16, 24, .75); border: 1px solid rgba(255, 255, 255, .31); }
.tile:hover .tile-icon, .quirk.open .tile-icon, .quirk:hover .tile-icon { background: rgba(24, 24, 38, .88); border-color: var(--q-text); }
.tile-icon i { display: block; width: 51px; height: 51px; background-repeat: no-repeat; background-size: auto 51px; }
.tile-icon img { display: block; width: 48px; height: 48px; margin: 1px; }
/* the vessel's face fills its 8x8 to the edge (the quirk pictures have room round them): 5 px a pixel, with a margin */
.tile-icon img[src$="vessel-face.png"] { width: 40px; height: 40px; margin: 5px 6px 6px 5px; }

.video-box { padding: 0; line-height: 0; }
.video-box video, .clip video { display: block; width: 100%; height: auto; background: #000; }

/* ---------- the SOUL ring ---------- */
.soul-browser { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 32px; align-items: start; }
.ring-side { align-self: start; }   /* stays at the top of its column */
.ring-stage { width: 560px; height: 336px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ring { position: absolute; inset: 0; z-index: 1; outline: none; }
.ring:focus-visible { outline: 1px solid var(--sv-outline-hi); outline-offset: -1px; }
.ring button { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.ring button svg, .ring .outline svg { display: block; width: 100%; height: 100%; }
.ring button.gone { pointer-events: none; }
.ring-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.ring-name { min-width: 224px; text-align: center; font: 32px/40px var(--mono); color: var(--sv-selected); }
/* the menus' notched arrows (PixelArt.arrow), two screen pixels a pixel beside 32 px words */
.arrow { width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--sv-unselected); display: grid; place-items: center; }
.arrow svg { width: 10px; height: 18px; display: block; }
.arrow:hover, .arrow:focus-visible { color: var(--sv-selected); }

/* the footer's key hints (extractFooter): keys light grey, their words darker, arrows as the game's little signs */
.hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 16px 0 0; font: 16px/24px var(--mono); }
.hint { display: inline-flex; align-items: center; gap: 11px; }
.hint .key { display: inline-flex; align-items: center; color: var(--sv-hint-key); }
.hint .key svg { display: inline-block; margin-right: 1px; }
.hint .label { color: var(--sv-hint-label); }

.soul-panel { min-height: 432px; }   /* (then as tall as the tallest SOUL's, set by soulverse.js) */
.soul-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.soul-head h3 { margin: 0; font: 32px/40px var(--mono); }   /* its colour and shadow (a quarter as bright) set by soulverse.js */
/* small labels (the F4 cards' words under a tile): on a dark strip */
.tag { display: inline-block; padding: 0 6px; font: 16px/24px var(--mono); color: var(--q-faint); background: rgba(0, 0, 0, .63); }
.tag.locked { color: var(--q-cost); }
.soul-desc { position: relative; margin: 0 0 24px; padding-top: 8px; color: var(--sv-description); }
.soul-desc.small { padding-top: 0; color: var(--q-dim); }
.soul-desc.small::before { content: none; }
.song { margin: -8px 0 24px; }
.quirks { display: grid; gap: 8px; list-style: none; margin: 0; }
.no-quirks { color: var(--q-dim); }

/* a quirk (the F4 quirk list's card): a hover-text box edged in its kind's colour, its tile, its name white, its kind
   in that colour at the right, the short words faint; opened, its details under a faint line */
.quirk { padding-top: 13px; padding-bottom: 13px; }
.quirk > button {
  display: grid; grid-template-columns: 53px minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%;
  padding: 0; text-align: left; color: inherit; font: inherit; background: none; border: 0; cursor: pointer;
}
.quirk .tile-icon { margin: 0; }
.quirk .pic { display: block; width: 51px; height: 51px; background-repeat: no-repeat; background-size: auto 51px; }
.quirk .name { display: block; font: 16px/24px var(--mono); color: var(--q-text); text-shadow: 1px 1px 0 #3c3c3e; }
.quirk .short { display: block; color: var(--q-faint); }
.kind { font: 16px/24px var(--mono); white-space: nowrap; align-self: start; }
.kind.active { color: var(--q-active); text-shadow: 1px 1px 0 #3a311a; }
.kind.passive { color: var(--q-passive); text-shadow: 1px 1px 0 #282e3a; }
.kind.toggle { color: var(--q-toggle); text-shadow: 1px 1px 0 #203526; }
.quirk .more { display: none; margin-top: 16px; }
.quirk.open .more { display: block; }
.more .line { height: 1px; background: rgba(200, 202, 216, .25); margin-bottom: 4px; }
.more .heading { display: block; margin-bottom: 4px; font: 16px/24px var(--mono); color: var(--q-dim); }
.more p { margin: 0; color: var(--q-text); }
.more .who { display: block; margin-top: 8px; color: var(--q-faint); }

.quirk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0 0 24px; align-items: stretch; }   /* a row's cards all as tall as its tallest */
.quirk-grid .quirk > button { align-items: start; grid-template-columns: 53px minmax(0, 1fr); row-gap: 4px; }
.quirk-grid .quirk .kind { grid-column: 2; justify-self: start; }   /* in the narrow cards the kind goes under the words, so they get the width */
#everyone .quirk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* the four every ghost has, two by two */

.note { display: flex; gap: 24px; align-items: flex-start; margin-top: 24px; }
.note .tile-icon { margin: 0; }
.note p { margin: 0; color: var(--q-faint); }

/* ---------- how it plays ---------- */
.steps { display: grid; gap: 48px; }
.step { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.step.flip .clip { order: 2; }
.clip { padding: 0; line-height: 0; }
/* character creation's progress squares (5 px, 12 apart; two screen pixels a pixel): this step in the SOUL's colour
   (as creation's current square takes the chosen SOUL's), those before it lighter, those after dark */
.dots { display: flex; gap: 14px; margin-bottom: 16px; }
.dots i { display: block; width: 10px; height: 10px; background: var(--sv-dot-todo); }
.dots i.done { background: var(--sv-dot-done); }
.dots i.now { background: var(--soul); }
.step-text p { color: var(--sv-description); }
.step-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.step-card p { color: var(--q-faint); }
.step-card > :last-child { margin-bottom: 0; }
.hearts-list { list-style: none; }
.hearts-list li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.hearts-list li .cursor-heart { left: 0; top: 8px; width: 9px; height: 8px; opacity: 1; }

/* ---------- servers ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.split .tip p, .split .tip li { color: var(--q-faint); }
.split h3:not(:first-child) { margin-top: 24px; }
.split .tip > :last-child { margin-bottom: 0; }
/* (twelve: two even rows of six across the page, three or two a row on smaller screens) */
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0 0 16px; }
.chips li { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; text-align: center; font: 16px/24px var(--mono); color: var(--sv-selected); background: color-mix(in srgb, var(--sv-panel) 75%, transparent); border: 1px solid var(--sv-outline); text-shadow: 1px 1px 0 #404040; }

/* ---------- your own SOULs ---------- */
#datapacks .tip p, #datapacks .tip li { color: var(--q-faint); }
#datapacks .downloads { margin: 16px 0 0; }
.example-soul { padding: 0; }
/* the heart beside the name, at the name's size (two screen pixels a heart pixel, as by 32 px words); the file's path under both */
.example-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 16px 16px 0; }
.example-head > span:last-child { display: contents; }
.example-path { grid-column: 1 / -1; }
.example-heart { display: block; width: 18px; height: 16px; flex: none; }
.example-heart svg { display: block; width: 100%; height: 100%; }
.example-name { display: block; font: 32px/40px var(--mono); }
.example-path { display: block; font: 16px/24px var(--mono); color: var(--sv-hint-key); overflow-wrap: anywhere; }
.example-soul .code { margin: 0; background: none; border: 0; tab-size: 4; }

/* ---------- questions ---------- */
.faq { margin-bottom: 8px; padding-top: 5px; padding-bottom: 9px; }
.faq summary { position: relative; padding: 8px 0 4px 30px; cursor: pointer; list-style: none; font: 16px/24px var(--mono); color: var(--sv-unselected); text-shadow: 1px 1px 0 #222327; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .cursor-heart { left: 0; top: 12px; width: 18px; height: 16px; }   /* two screen pixels a heart pixel */
/* the dropdowns' arrow, as the guide's: at the right, a quarter turn down while open */
.faq summary { padding-right: 24px; }
.faq summary .fold-arrow { position: absolute; right: 0; top: 11px; width: 10px; height: 18px; color: var(--sv-unselected); transition: transform .15s; }
.faq summary .fold-arrow svg { display: block; width: 100%; height: 100%; }
.faq[open] summary .fold-arrow, .faq summary:hover .fold-arrow { color: var(--sv-selected); }
.faq[open] summary .fold-arrow { transform: rotate(90deg); }
/* a divider alone under a heading (the line a description would have under it) */
.intro.rule-only { margin-bottom: 24px; padding-top: 0; height: 1px; }
.faq[open] summary, .faq summary:hover { color: var(--sv-selected); text-shadow: 1px 1px 0 #404040; }
.faq[open] summary .cursor-heart, .faq summary:hover .cursor-heart, .faq summary:focus-visible .cursor-heart { opacity: 1; }
.faq p { margin: 8px 0 0 30px; color: var(--q-faint); }

/* ---------- the datapack guide (made from the mod's docs/SOUL_DATAPACKS.md) ---------- */
.guide-page .bar-in .menu-btn { display: none !important; }
.guide h1.title { margin-bottom: 16px; }
.guide .back { margin: 0 0 16px; font: 16px/24px var(--mono); }
.guide .back a { color: var(--sv-hint-key); text-decoration: none; }
.guide .back a:hover { color: var(--sv-selected); }
.guide .intro p { margin: 0 0 16px; }
.guide .intro p:last-child { margin-bottom: 0; }
.guide-part { margin-top: 56px; }
.guide-part h3 { margin-top: 24px; }
.guide p { color: var(--sv-description); }
.guide p code, .guide li code { white-space: normal; overflow-wrap: anywhere; }   /* long paths in a sentence wrap, so a phone doesn't scroll sideways */
.downloads { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.contents { margin: 32px 0 0; }
.contents ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; }
.contents li { margin: 0; break-inside: avoid; }
.contents a { display: block; position: relative; padding: 4px 0 4px 20px; font: 16px/24px var(--mono); color: var(--sv-unselected); text-decoration: none; text-shadow: 1px 1px 0 #222327; }
.contents a .cursor-heart { left: 0; top: 12px; width: 9px; height: 8px; }
.contents a:hover, .contents a:focus-visible { color: var(--sv-selected); }
.contents a:hover .cursor-heart, .contents a:focus-visible .cursor-heart { opacity: 1; }
/* the steps, and their dropdowns (closed until wanted; the heart cursor and the menus' notched arrow, turned down when open) */
.guide-part .dots { margin-bottom: 8px; }
.guide-part > p, .guide-part > .code, .guide-part > .example-soul, .guide-part > ol, .guide-part > ul { margin-bottom: 16px; }
.fold { margin: 0 0 8px; padding-top: 5px; padding-bottom: 9px; }
.fold summary { position: relative; padding: 8px 24px 4px 30px; cursor: pointer; list-style: none; font: 16px/24px var(--mono); color: var(--sv-unselected); text-shadow: 1px 1px 0 #222327; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary .cursor-heart { left: 0; top: 12px; width: 18px; height: 16px; }
.fold summary .fold-arrow { position: absolute; right: 0; top: 11px; width: 10px; height: 18px; color: var(--sv-unselected); transition: transform .15s; }
.fold summary .fold-arrow svg { display: block; width: 100%; height: 100%; }
.fold[open] summary, .fold summary:hover, .fold summary:focus-visible { color: var(--sv-selected); text-shadow: 1px 1px 0 #404040; }
.fold[open] summary .cursor-heart, .fold summary:hover .cursor-heart, .fold summary:focus-visible .cursor-heart { opacity: 1; }
.fold[open] summary .fold-arrow { transform: rotate(90deg); color: var(--sv-selected); }   /* (a quarter turn keeps every pixel whole) */
.fold-body { padding: 16px 0 4px; }
.fold-body > :last-child { margin-bottom: 0; }
.fold-body .table { margin-left: -6px; }
.guide .example-soul { margin-bottom: 16px; }
.guide .example-soul + .fold { margin-top: 0; }

/* code and folder trees in a frame, tables in a hover-text box (wide ones scroll sideways on phones) */
.code { margin: 0 0 16px; padding: 16px; overflow-x: auto; font: 16px/24px var(--mono); color: var(--sv-label); white-space: pre; tab-size: 4; }
.code code { white-space: pre; }
.table { margin: 0 0 16px; overflow-x: auto; padding: 13px 13px 13px 0; }
.table table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 4px 12px 8px; font: 16px/24px var(--mono); color: var(--sv-label); border-bottom: 1px solid var(--sv-divider); white-space: nowrap; }
.table td { padding: 8px 12px; vertical-align: top; color: var(--q-faint); border-bottom: 1px solid rgba(58, 61, 85, .5); }
.table tr:last-child td { border-bottom: 0; }
.table td code { white-space: normal; overflow-wrap: break-word; }   /* long paths and JSON wrap, so a table fits its box */
.table td:first-child { min-width: 160px; }
/* a field a SOUL must have: in the yellow the mod asks "ARE YOU SURE?" in */
.table tr.required td:first-child code { color: #ffe98a; text-shadow: 1px 1px 0 #403a22; }
.must { font: 16px/24px var(--mono); color: #ffe98a; text-shadow: 1px 1px 0 #403a22; }
.table .must { margin-left: 2px; }
.must-key { margin: 0 0 12px; color: var(--q-faint); }
.table .with-pic { display: inline-flex; align-items: center; gap: 8px; }
.table .mini { display: block; flex: none; width: 34px; height: 34px; background: rgba(16, 16, 24, .75); border: 1px solid rgba(255, 255, 255, .31); }
.table .mini i { display: block; width: 34px; height: 34px; background-repeat: no-repeat; image-rendering: pixelated; }
.guide .wrap.narrow { max-width: 1040px; }   /* room for the SOULs' quirks in three columns */
.soul-quirks table { table-layout: fixed; }   /* (the quirks' cell its full width, so the columns are the same in every row) */
.soul-quirks th:nth-child(1) { width: 172px; }
.soul-quirks th:nth-child(2) { width: 120px; }
/* each quirk with its picture, on the same columns in every row (wide enough for the longest, mark_of_retribution), so the
   pictures line up down the table whatever the names' lengths */
.soul-quirks td:last-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px 8px; }
.soul-quirks td:last-child code { white-space: nowrap; }
.table .soul-name { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--q-text); }
.table .soul-name svg { width: 18px; height: 16px; display: block; }
.table .soul-name .aside { color: var(--sv-selected); }   /* ("not offered": plain words, not the SOUL's name) */
.steps-list { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: step; }
.steps-list li { position: relative; padding-left: 32px; margin-bottom: 8px; counter-increment: step; color: var(--sv-description); }
.steps-list li::before { content: counter(step); position: absolute; left: 0; top: 0; font: 16px/24px var(--mono); color: var(--sv-label); }
@media (max-width: 600px) {
  .contents ol { columns: 1; }
  /* a phone: each SOUL a block of its own (its name, its pack, then its quirks one a line) instead of a table too wide */
  .soul-quirks { padding-right: 3px; }
  .soul-quirks table, .soul-quirks tbody, .soul-quirks tr, .soul-quirks td { display: block; width: auto; }
  .soul-quirks thead { display: none; }
  .soul-quirks tr { padding: 12px 0; border-bottom: 1px solid rgba(58, 61, 85, .5); }
  .soul-quirks tr:last-child { border-bottom: 0; }
  .soul-quirks td { border: 0; padding: 0 12px; min-width: 0; }
  .soul-quirks td:nth-child(2) { margin: 0 0 8px 26px; color: var(--q-dim); }
  .soul-quirks td:last-child { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the Data Pack Generator (and the guide's TRY A NUMBER): the menus' text fields, slider and lists ---------- */
.gen-callout { margin: 0 0 24px; }
.gen-callout p { color: var(--q-faint); }
.guide .by-hand { margin: 0 0 8px; color: var(--sv-label); }
.place-try { margin: 0 0 16px; }
.place-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 16px; }
.place-try .place-head { margin: 0; }
.place-try > h3:first-child { margin-top: 0; }
.place-head h3, .guide-part .place-head h3 { margin: 0; }
.place-head .say { margin: 0; }
.place-head .switch-row { margin-right: -4px; }
.place-try .ring-row { margin-top: 12px; }
.say { margin: 8px 0 0; color: var(--q-faint); }
.say:empty { display: none; }
.say .warn, .warn { color: var(--q-cost); }
.say .dim, .dim { color: var(--q-dim); }
.field-label { display: block; margin: 16px 0 4px; font: 16px/24px var(--mono); color: var(--sv-label); text-shadow: 1px 1px 0 #222327; }
/* a text field (the menus' EditBox): the panel with its outline, white edged while typed in */
.field { display: block; width: 100%; height: 30px; margin: 0; padding: 2px 8px; font: 16px/24px var(--mono); color: var(--sv-selected);
  background: color-mix(in srgb, var(--sv-panel) 80%, transparent); border: 1px solid var(--sv-outline); border-radius: 0; outline: none; }
.field::placeholder { color: var(--sv-hint-label); }
.field:focus { border-color: var(--sv-outline-hi); }
.field:disabled { color: var(--q-dim); border-color: var(--sv-outline-off); }
.field.num { width: 88px; flex: none; -moz-appearance: textfield; }
.field.hex { width: 104px; flex: none; text-transform: uppercase; }
.gen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gen-row .field.grow { flex: 1 1 200px; width: auto; }
.button:disabled { color: var(--q-dim); cursor: not-allowed; text-shadow: none; }
.button:disabled:hover { background: color-mix(in srgb, var(--sv-panel) 75%, transparent); border-color: var(--sv-outline); }
.button:disabled .cursor-heart { opacity: 0 !important; }
/* the colour: its swatch, a frame you click for the browser's picker */
.swatch { display: block; flex: none; line-height: 0; }
.swatch input { display: block; width: 56px; height: 30px; padding: 3px; margin: 0; cursor: pointer; border: 1px solid var(--sv-outline); background: color-mix(in srgb, var(--sv-panel) 80%, transparent); -webkit-appearance: none; appearance: none; }
.swatch input:hover, .swatch input:focus-visible { border-color: var(--sv-outline-hi); outline: none; }
.swatch input::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input::-webkit-color-swatch { border: 0; }
.swatch input::-moz-color-swatch { border: 0; }
/* the slider (the menus' AbstractSliderButton): a frame for the track, a light handle */
.slider { flex: 1 1 200px; min-width: 0; height: 30px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 30px; background: color-mix(in srgb, var(--sv-panel) 80%, transparent); border: 1px solid var(--sv-outline); }
.slider::-moz-range-track { height: 28px; background: color-mix(in srgb, var(--sv-panel) 80%, transparent); border: 1px solid var(--sv-outline); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 28px; background: var(--sv-handle); border: 1px solid #000; border-radius: 0; }
.slider::-moz-range-thumb { width: 8px; height: 28px; background: var(--sv-handle); border: 1px solid #000; border-radius: 0; box-sizing: border-box; }
.slider:hover::-webkit-slider-runnable-track, .slider:focus-visible::-webkit-slider-runnable-track { border-color: var(--sv-outline-hi); }
.slider:hover::-moz-range-track, .slider:focus-visible::-moz-range-track { border-color: var(--sv-outline-hi); }
.slider:hover::-webkit-slider-thumb, .slider:focus-visible::-webkit-slider-thumb { background: #ffffff; }
.slider:focus-visible { outline: none; }
/* the ring as a row of hearts (two screen pixels a heart pixel): yours lifted, with a mark under it */
.ring-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; min-height: 40px; margin: 8px 0 0; padding: 4px 0; }
.ring-row span { position: relative; display: block; width: 18px; height: 16px; flex: none; }
.ring-row svg { display: block; width: 100%; height: 100%; }
/* the SOUL it's about: twice the size, squeezed in between its two neighbours */
.ring-row .mine { color: var(--sv-selected); }
.ring-row span.big { width: 36px; height: 32px; margin: 0 6px; }
.ring-row .yours { cursor: pointer; }

/* three parts, each under a title of its own as the guide's steps are: the SOULs, the one being made (its file beside it), the download */
.gen-part { margin: 0 0 56px; }
.gen-part:last-child { margin-bottom: 0; }
.gen-souls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gen-make { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 16px; align-items: start; }
.gen-file { position: sticky; top: 72px; min-width: 0; }
/* each field a row: its name on the left, what's chosen on the right, a divider between */
.gen-edit .must-key { margin: 0 0 8px; color: var(--q-faint); }
.gen-field { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 8px 16px; padding: 20px 0; border-top: 1px solid var(--sv-divider); }
.gen-field h3 { margin: 3px 0 0; }
.gen-field.done h3 { color: var(--sv-selected); }
.gen-control { min-width: 0; }
.gen-more { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--sv-divider); }
/* the pack's SOULs as a row of buttons: the chosen one in the highlighted button's panel */
.gen-souls { list-style: none; margin: 0; display: contents; }
.gen-souls li { display: flex; align-items: stretch; border: 1px solid var(--sv-outline); background: color-mix(in srgb, var(--sv-panel) 75%, transparent); }
.gen-souls li.on { background: color-mix(in srgb, var(--sv-panel-hi) 75%, transparent); border-color: var(--sv-outline-hi); }
.gen-soul { min-width: 0; max-width: 280px; display: flex; align-items: center; gap: 12px; padding: 6px 12px; text-align: left; cursor: pointer; font: 16px/24px var(--mono);
  background: none; border: 0; color: var(--sv-unselected); }
.gen-soul:focus-visible { outline: 1px solid var(--sv-outline-hi); outline-offset: -1px; }
.gen-soul .heart { display: block; width: 18px; height: 16px; flex: none; }
.gen-soul .heart svg { display: block; width: 100%; height: 100%; }
.gen-soul-words { min-width: 0; }
.gen-soul-name, .gen-soul-id { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-soul-name { color: var(--q-text); }
.gen-soul-id { color: var(--sv-hint-key); }
#gAdd, #gReset { align-self: stretch; }
.gen-confirm { margin-top: 12px; max-width: 560px; padding: 14px; }
.gen-confirm p { margin: 0 0 12px; color: var(--sv-selected); }
.gen-remove { flex: none; min-width: 32px; padding: 0 8px; font: 16px/24px var(--mono); color: var(--sv-unselected); background: none; border: 0; border-left: 1px solid var(--sv-outline-off); cursor: pointer; }
.gen-remove:hover, .gen-remove:focus-visible { color: var(--sv-selected); outline: none; }
.gen-remove.sure { color: var(--q-cost); }
.quirk-chosen .gen-remove { border: 1px solid transparent; align-self: center; }
.quirk-chosen .gen-remove:hover, .quirk-chosen .gen-remove:focus-visible { border-color: var(--sv-outline); }
/* the download: the pack's name and namespace, then what's in it and the buttons */
.gen-pack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; }
.gen-pack-fields .field-label:first-child { margin-top: 0; }
.gen-pack-files h3 { margin-bottom: 8px; }
.gen-downloads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* the download to take: the whole row, a size up, lit as a chosen button with the SOUL at its side */
.gen-downloads .primary { flex: 1 0 100%; min-height: 48px; font: 32px/40px var(--mono); padding-left: 40px; text-shadow: 2px 2px 0 #404040;
  background: color-mix(in srgb, var(--sv-panel-hi) 85%, transparent); border: 2px solid var(--sv-outline-hi); }
.gen-downloads .primary .cursor-heart { left: 12px; top: calc(50% - 8px); width: 18px; height: 16px; opacity: 1; }
.gen-downloads .primary:disabled { color: var(--q-dim); border-color: var(--sv-outline); text-shadow: none; }
.gen-downloads .button:not(.primary) { flex: 1 1 200px; }
/* what's left to do before downloading: a title in white capitals, then a line for each thing, in the menus' type */
.todo { margin-top: 16px; }
.todo-title { margin: 0 0 4px; font: 16px/24px var(--mono); color: var(--sv-selected); text-shadow: 1px 1px 0 #404040; }
.todo-list { list-style: none; margin: 0; }
.todo-list li, .todo-done { margin: 0; font: 16px/24px var(--mono); color: var(--sv-description); }
.todo-list li::before { content: "* "; color: var(--q-cost); }
.todo-list b { color: var(--sv-selected); }
.todo-done { color: #6be38a; }
/* the pack's icon: 64 by 64 shown twice the size, sharp; its drop zone beside it; the cut to a square in a popup */
.icon-row { display: flex; align-items: stretch; gap: 8px; }
.pack-icon { flex: none; width: 130px; height: 130px; padding: 0; display: block; }
.pack-icon canvas { display: block; width: 128px; height: 128px; image-rendering: pixelated; }
.icon-drop { flex: 1; min-height: 130px; }
.icon-crop { margin-top: 12px; padding: 14px; }
.icon-crop .say { margin: 0 0 12px; }
.crop-stage { position: relative; margin: 0 auto 12px; touch-action: none; cursor: crosshair; user-select: none; }
.crop-stage canvas { display: block; width: 100%; height: 100%; }
.crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; }
.crop-stage { overflow: hidden; }
.icon-crop .slider { width: 100%; margin-bottom: 12px; }
button.link { padding: 0; border: 0; background: none; font: inherit; color: var(--sv-selected); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
/* under the download: what each of the three is, and where it goes */
.gen-explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.gen-explain p, .gen-explain li { color: var(--q-faint); }
.gen-explain .tip > :last-child { margin-bottom: 0; }
.gen-explain .tip { display: flex; flex-direction: column; }
.gen-explain .best { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sv-divider); }
.steps-list.plain li { padding-left: 0; }
.steps-list.plain li::before { content: none; }
@media (max-width: 600px) { .gen-downloads .primary { font: 16px/24px var(--mono); padding-left: 28px; text-shadow: 1px 1px 0 #404040; } .gen-downloads .primary .cursor-heart { left: 8px; top: calc(50% - 4px); width: 9px; height: 8px; } }
/* quirks: the search, its results in a popup under it, the chosen ones as a list */
.quirk-search { position: relative; }
.quirk-results { position: absolute; left: 0; right: 0; top: 34px; z-index: 15; max-height: 384px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; }
.quirk-results li, .quirk-chosen li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px; }
.quirk-results li[data-q] { cursor: pointer; }
.quirk-results li[aria-selected="true"], .quirk-results li[data-q]:hover { background: var(--sv-panel-hi); outline: 1px solid var(--sv-outline); }
.quirk-results li.none, .quirk-chosen li.none { display: block; color: var(--q-dim); }
.quirk-chosen { list-style: none; margin: 8px 0 0; }
.quirk-chosen li { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 8px 0; border-bottom: 1px solid rgba(58, 61, 85, .5); }
.quirk-chosen li:last-child { border-bottom: 0; }
.gen .mini { display: block; width: 36px; height: 36px; background: rgba(16, 16, 24, .75); border: 1px solid rgba(255, 255, 255, .31); }
.gen .mini i { display: block; width: 34px; height: 34px; background-repeat: no-repeat; image-rendering: pixelated; }
.q-words { min-width: 0; }
.q-name { font: 16px/24px var(--mono); color: var(--q-text); margin-right: 12px; }
.q-kind { font: 16px/24px var(--mono); white-space: nowrap; }
.q-kind.active { color: var(--q-active); } .q-kind.toggle { color: var(--q-toggle); } .q-kind.passive { color: var(--q-passive); }
.q-short { display: block; color: var(--q-faint); }
/* the sound: a frame to drop it on (anywhere on the generator does), lit while a file is dragged over */
.drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 16px; text-align: center; cursor: pointer; color: var(--q-faint); }
.drop[hidden] { display: none; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop:hover, .drop:focus-within, .drop.over { border-color: var(--sv-outline-hi); color: var(--sv-selected); background: color-mix(in srgb, var(--sv-panel-hi) 80%, transparent); }
.sound-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sound-file[hidden] { display: none; }
.sound-name { flex: 1 1 160px; min-width: 0; font: 16px/24px var(--mono); color: var(--q-text); overflow-wrap: anywhere; }
/* the file as it is, a new field lit as it comes in; under it the packs' files */
.example-name.empty, .gen-soul-name.empty { color: var(--q-dim); }
.code .line.example { color: var(--q-dim); }
/* the guide's file so far: a line each, the step's own lit in the SOUL's colour */
.soul-so-far { margin: 0 0 16px; }
.soul-so-far > .say { margin: 0 0 8px; }
.place-try .soul-so-far { margin: 16px 0 0; }
.json-step .code .line { display: block; padding: 0 8px; margin: 0 -8px; }
.json-step .code .line.fresh { color: var(--sv-selected); background: color-mix(in srgb, var(--lit, #ff8800) 22%, transparent); box-shadow: inset 2px 0 0 var(--lit, #ff8800); }
.guide .json-step { margin-bottom: 0; }
.code .line { display: inline; }
.code .line.new { animation: line-in 1.2s steps(6); }
@keyframes line-in { from { background: color-mix(in srgb, var(--glow) 35%, transparent); } to { background: transparent; } }
.gen-file .example-path { overflow-wrap: normal; }
.gen-file .example-soul { margin-bottom: 0; }   /* (so it follows the form down to its very end) */
.gen-more .switch-row { margin-left: -4px; }
.gen-convert { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--sv-divider); }
.gen-convert .drop { margin: 8px 0; }
.gen-tree { padding: 16px; font: 16px/24px var(--mono); }
.gen-tree .tree-zip { margin: 0; color: var(--q-text); }
.gen-tree .tree-zip ~ .tree-zip { margin-top: 16px; }
.gen-tree ul { list-style: none; margin: 0; padding-left: 16px; }
.gen-tree li { color: var(--sv-hint-key); overflow-wrap: anywhere; }
.gen-tree li.here { color: var(--sv-selected); }
@media (max-width: 1100px) {
  .gen-make { grid-template-columns: minmax(0, 1fr); }
  .gen-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gen-explain .tip:first-child { grid-column: 1 / -1; }
  .gen-file { position: static; }
}
@media (max-width: 760px) {
  .gen-field { grid-template-columns: minmax(0, 1fr); }
  .gen-explain { grid-template-columns: minmax(0, 1fr); }
  .gen-pack { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ring-row { gap: 6px 5px; }
  .ring-row span { width: 9px; height: 8px; }
  .ring-row span.big { width: 18px; height: 16px; margin: 0 4px; }
}

/* ---------- the character creator (/soulverse/character/), as the game's: one wide stage, the title over it, the figure on its grass in
   the middle, the step's choices round its feet (tiles, the ring of hearts, the parts), the vessel's rows at the left, a SOUL's
   CONFIRM and BACK at the right, the progress squares and the keys along the bottom ---------- */
.creator { position: relative; height: 780px; overflow: hidden; outline: none; user-select: none; -webkit-user-select: none; background: color-mix(in srgb, var(--sv-panel) 70%, transparent); }
.cc-stage { position: absolute; inset: 0; }
.cc-stage canvas { position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: pixelated; }
.cc-stage .stage-back { z-index: 0; }
.cc-stage .stage-front { z-index: 5; }
.cc-stage .fig-holder { position: absolute; left: 50%; top: 480px; z-index: 2; transform: translate(-50%, -100%); }
.cc-title { position: absolute; left: 50%; top: 28px; z-index: 6; transform: translateX(-50%); margin: 0; white-space: nowrap; text-align: center;
  font: 32px/40px var(--mono); color: var(--sv-selected); text-shadow: 2px 2px 0 #404040; pointer-events: none; }
.creator[data-step="confirm"] .cc-title { left: 40px; transform: none; text-align: left; }
.cc-title .cc-sub-name { display: block; margin-top: 8px; font: 16px/24px var(--mono); color: var(--sv-selected); text-shadow: 1px 1px 0 #404040; }
.cc-title .cc-sub { display: block; width: 560px; max-width: calc(100vw - 64px); margin: 0 auto; white-space: normal; font: 16px/24px var(--sans); color: var(--sv-description); text-shadow: none; }
.cc-left { position: absolute; left: 32px; top: 112px; z-index: 6; width: 340px; }
.creator[data-step="confirm"] .cc-left { top: 136px; }
.cc-right { position: absolute; right: 64px; top: 380px; z-index: 6; display: flex; flex-direction: column; gap: 4px; }
/* after Yes: the file offered on the right, the figure gone over to the left */
.creator[data-step="export"] .cc-right { right: 56px; top: 50%; transform: translateY(-50%); width: 420px; }
.cc-export .cc-name { margin: 0 0 8px; }
.cc-export .cc-desc { margin: 0 0 16px; max-width: none; }
.cc-export .cc-gallery-q { margin-top: 24px; }
.cc-export .cc-again { margin-top: 24px; }
.cc-feet { position: absolute; left: 50%; top: 520px; width: min(680px, 100% - 32px); transform: translateX(-50%); text-align: center; }
/* (with nothing round the feet, the words go under the platform: clear of the grass and rock) */
.creator[data-step="intro"] .cc-feet, .creator[data-step="name"] .cc-feet { top: 596px; }
.creator[data-step="confirm"] .cc-feet { top: 576px; }
.cc-bottom { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 24px; }
.cc-dots { display: flex; gap: 8px; }
.cc-dots button { width: 8px; height: 8px; padding: 0; border: 0; background: var(--sv-dot-todo); cursor: pointer; background-clip: content-box; box-sizing: content-box; padding: 4px; margin: -4px; }
.cc-dots button.done { background-color: var(--sv-dot-done); }
.cc-dots button.now { background-color: var(--dot-now, var(--sv-dot-current)); filter: drop-shadow(0 0 3px var(--dot-now, transparent)); }   /* (lit in the SOUL's colour once there's one) */
.cc-dots button:not(:disabled):hover, .cc-dots button:focus-visible { background-color: #ffffff; outline: none; }
.cc-dots button:disabled { cursor: default; }
.cc-hints { position: absolute; right: 0; display: flex; gap: 16px; }
.cc-key { padding: 0; background: none; border: 0; font: 16px/24px var(--mono); color: var(--sv-hint-label); cursor: pointer; }
.cc-key b { font-weight: normal; color: var(--sv-hint-key); margin-right: 6px; }
button.cc-key:hover b, button.cc-key:hover { color: var(--sv-selected); }
.cc-type { position: absolute; left: 50%; top: 40px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cc-say, .cc-desc, .cc-reaction { margin: 8px auto 0; max-width: 560px; color: var(--sv-description); }
.cc-say { font: 16px/24px var(--mono); color: var(--sv-hint-key); }
.cc-reaction { font: 16px/24px var(--mono); color: var(--sv-selected); }
.cc-name { margin: 8px 0 0; font: 32px/40px var(--mono); color: var(--sv-selected); text-shadow: 2px 2px 0 #404040; }
/* an option in the game's rows: the heart before it while it's pointed at */
.cc-option { position: relative; padding: 4px 8px 4px 28px; background: none; border: 0; cursor: pointer; text-align: left;
  font: 16px/24px var(--mono); color: var(--sv-unselected); text-shadow: 1px 1px 0 #222327; }
.cc-option .cursor-heart { left: 4px; top: calc(50% - 8px); width: 18px; height: 16px; }   /* (in the middle of its line) */
.cc-option:hover, .cc-option:focus-visible { color: var(--sv-selected); outline: none; }
.cc-option:hover .cursor-heart, .cc-option:focus-visible .cursor-heart { opacity: 1; }
.cc-answers { display: flex; justify-content: center; gap: 24px; margin-top: 8px; }
.cc-import { display: inline-block; margin-top: 88px; overflow: hidden; }
/* a file dragged over the creator: where to let go */
.creator.dropping::after { content: "DROP YOUR CHARACTER FILE HERE"; position: absolute; inset: 12px; z-index: 20; display: grid; place-items: center;
  font: 32px/40px var(--mono); color: var(--sv-selected); text-shadow: 2px 2px 0 #404040; background: rgba(4, 4, 15, .82); border: 2px dashed var(--sv-outline-hi); pointer-events: none; }
.cc-import input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cc-import ~ .cc-say { margin-top: 0; font-family: var(--sans); }
/* the style: two tiles at the feet, a face on each */
.cc-tiles { display: flex; justify-content: center; gap: 220px; margin-top: -40px; }
.cc-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer; font: 16px/24px var(--mono); color: var(--sv-unselected); }
.cc-tile .cc-face { display: block; padding: 3px; background: rgba(16, 16, 24, .75); border: 1px solid rgba(255, 255, 255, .31); }
.cc-tile canvas { display: block; width: 40px; height: 40px; image-rendering: pixelated; }
.cc-tile.on { color: var(--sv-selected); text-shadow: 1px 1px 0 #404040; }
.cc-tile.on .cc-face { border: 2px solid #fff; padding: 6px; }
.cc-tile.on canvas { width: 56px; height: 56px; }
.cc-race-heart { display: block; width: 27px; height: 24px; filter: drop-shadow(0 0 4px currentColor); }
.cc-race-heart svg { display: block; width: 100%; height: 100%; }
.cc-tile.on .cc-race-heart { width: 45px; height: 40px; }
.cc-races .cc-tile { min-width: 120px; justify-content: flex-end; height: 72px; }
/* the vessel's rows: the part and what it is now under it, the heart before the chosen one; its colours under it when opened */
.cc-rows { list-style: none; margin: 0; }
.cc-rows li { margin: 0 0 4px; }
.cc-row { position: relative; display: grid; grid-template-columns: 1fr auto; width: 100%; padding: 4px 8px 4px 28px; background: none; border: 0; cursor: pointer; text-align: left; }
.cc-row .cursor-heart { left: 4px; top: 8px; width: 18px; height: 16px; }   /* (by the row's name, its first line) */
.cc-row-name { font: 16px/24px var(--mono); color: var(--sv-unselected); text-shadow: 1px 1px 0 #222327; }
.cc-row-value { grid-column: 1; font: 16px/24px var(--sans); color: var(--sv-hint-key); }
.cc-row-open { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 24px; height: 24px; display: grid; place-items: center; color: var(--sv-unselected); }
.cc-row-open svg { width: 8px; height: 14px; display: block; transition: transform .15s; }
.cc-rows li.on .cc-row-name, .cc-row:hover .cc-row-name { color: var(--sv-selected); text-shadow: 1px 1px 0 #404040; }
.cc-rows li.on .cursor-heart, .cc-row:hover .cursor-heart { opacity: 1; }
.cc-continue { margin-top: 24px; }
/* the ways on (CONTINUE, CONFIRM, the export's YES, ENTER) in yellow, to stand out from the choices */
.cc-continue .cc-row-name, .cc-option.go, #cNext, #cNext b { color: #ffe98a; }
.cc-continue:hover .cc-row-name, .cc-option.go:hover, .cc-option.go:focus-visible, #cNext:hover, #cNext:hover b { color: #fff4c2; }
.cc-more { padding: 4px 8px 8px 28px; display: flex; flex-direction: column; gap: 6px; }
.cc-slider { display: grid; grid-template-columns: 88px minmax(0, 1fr) 48px; align-items: center; gap: 8px; font: 16px/24px var(--mono); color: var(--sv-hint-key); }
.cc-slider em { font-style: normal; text-align: right; color: var(--sv-description); }
.cc-slider .slider { height: 18px; }
.cc-slider .slider::-webkit-slider-runnable-track { height: 18px; }
.cc-slider .slider::-webkit-slider-thumb { height: 16px; width: 6px; }
.slider.rainbow::-webkit-slider-runnable-track { background: linear-gradient(90deg, #0ff, #00f, #f0f, #f00, #ff0, #0f0, #0ff); }
.cc-colours { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font: 16px/24px var(--mono); color: var(--sv-hint-key); }
.cc-colours > span { width: 92px; }
.cc-colours .c-swatch { width: 18px; height: 18px; padding: 0; cursor: pointer; border: 1px solid var(--sv-outline); }
.cc-colours .c-swatch:hover, .cc-colours .c-swatch[aria-pressed="true"] { border: 2px solid #fff; }
.cc-colours .c-own input { width: 32px; height: 18px; padding: 1px; }
.cc-lookup .field { flex: 1 1 140px; width: auto; }
.cc-upload { position: relative; overflow: hidden; }
.cc-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* the parts round the feet: the chosen one in a white frame, its neighbours either side, the figure with each on */
.cc-carousel { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.cc-part { padding: 4px; background: rgba(16, 16, 24, .75); border: 1px solid rgba(255, 255, 255, .31); cursor: pointer; line-height: 0; }
.cc-part { position: relative; }
.cc-part-fig { position: relative; display: block; }
.cc-part.on { border: 2px solid #fff; padding: 8px; }
/* (a preview: only its part of the figure) */
.fig.only-head .cube:not([data-p="head"]), .fig.only-body .cube:not([data-p="body"]), .fig.only-legs .cube:not([data-p="legs"]) { display: none; }
.cc-part .fig-heart, .cc-part .fig-tag { display: none; }
.cc-carousel .arrow { width: 32px; height: 40px; }
.cc-carousel ~ .cc-name { font: 16px/24px var(--mono); text-shadow: 1px 1px 0 #404040; }
/* the ring of hearts round the feet: the chosen one in front, twice the size */
.cc-ring { position: relative; width: 620px; max-width: 100%; height: 200px; margin: -130px auto 0; pointer-events: none; }   /* (round the grass: its middle the platform's) */
.cc-heart { position: absolute; left: 0; top: 0; padding: 0; background: none; border: 0; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 0 4px currentColor); }
.cc-heart svg { display: block; width: 100%; height: 100%; }
.cc-heart.outline { filter: none; }   /* (the chosen one's place on the ring: its outline; the SOUL itself is in the chest) */
.cc-ring-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.cc-ring-nav .cc-name { min-width: 240px; margin: 0; }
.cc-extra { margin-top: 8px; }
/* a SOUL's page: its quirks' tiles round the feet, the one looked at in a white frame */
.cc-quirks { display: flex; justify-content: center; gap: 8px; margin-top: -12px; }
.cc-quirk { cursor: pointer; padding: 0; margin: 0; }
.cc-quirk.on { border: 2px solid #fff; }
.cc-quirks + .cc-name { font: 16px/24px var(--mono); }
/* yes or no: a heart each by the feet, the SOUL's and a white one */
.cc-yesno { position: relative; display: flex; justify-content: center; align-items: center; gap: 200px; height: 40px; margin-top: 0; }
.cc-yesno .cc-heart { position: static; width: 27px; height: 24px; }
.cc-yesno .cc-heart.big { width: 36px; height: 32px; }
.cc-summary { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; margin: 0 0 16px; font: 16px/24px var(--mono); }
.cc-summary dt { color: var(--sv-hint-key); }
.cc-summary dd { margin: 0; color: var(--sv-selected); }
.cc-summary hr { grid-column: 1 / -1; width: 100%; border: 0; border-top: 1px solid var(--sv-divider); margin: 8px 0; }
.creator .tile-icon i { display: block; width: 34px; height: 34px; background-repeat: no-repeat; image-rendering: pixelated; }
.creator .tile-icon { width: 36px; height: 36px; margin: 0; }
.creator .cc-quirk.on.tile-icon { width: 46px; height: 46px; display: grid; place-items: center; }
.creator .mini { display: block; flex: none; width: 36px; height: 36px; background: rgba(16, 16, 24, .75); border: 1px solid rgba(255, 255, 255, .31); }
@media (max-width: 760px) {
  .creator { height: auto; padding-bottom: 48px; }
  .cc-stage { position: relative; inset: auto; height: 420px; }
  .cc-stage .fig-holder { top: 330px; }
  .cc-title { position: relative; left: auto; top: auto; transform: none; margin: -400px 0 360px; padding: 0 16px; white-space: normal; font: 16px/24px var(--mono); }
  .creator[data-step="confirm"] .cc-title { left: auto; }
  .cc-left, .cc-right, .cc-feet { position: relative; left: auto; right: auto; top: auto; width: auto; transform: none; margin: 0 16px; }
  .creator[data-step] .cc-feet { top: auto; }
  .creator[data-step="confirm"] .cc-left { top: auto; }
  .cc-right { flex-direction: row; justify-content: center; }
  .creator[data-step="export"] .cc-right { top: auto; transform: none; width: auto; display: block; }
  .cc-tiles { gap: 48px; margin-top: 0; }
  .cc-ring { margin-top: -90px; height: 140px; }
  .cc-name { font: 16px/24px var(--mono); }
  .cc-hints { display: none; }
}

/* the figure (CSS 3D, --s screen pixels a skin pixel) */
.fig { position: relative; width: calc(var(--s) * 16); height: calc(var(--s) * 32); perspective: calc(var(--s) * 140); --skin: none; --heart: #fff; }
.fig-scale { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d; }
.fig-turn { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(25deg); }
.cube { position: absolute; transform-style: preserve-3d; }
.face { position: absolute; display: block; background-image: var(--skin); background-size: calc(var(--s) * 64) calc(var(--s) * 64); background-repeat: no-repeat;
  image-rendering: pixelated; backface-visibility: hidden; }
.fig-heart { position: absolute; left: calc(var(--s) * 5.75); top: calc(var(--s) * 10.25); width: calc(var(--s) * 4.5); height: calc(var(--s) * 4);
  transform: translateZ(calc(var(--s) * 2.5)); color: var(--heart);   /* (on the chest: just over the shirt's second layer, 2.25 out, glow and all) */
  opacity: 0; transition: opacity .25s; backface-visibility: hidden; pointer-events: none; }
/* (its glow: flat over the figure where the heart is, as light added to what's under it; soulverse.js puts it there each frame) */
.fig-glow { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--heart) 60%, transparent), transparent); transition: opacity .25s; }
.fig.heart-on .fig-glow { opacity: 1; animation: chest-beat 1.4s ease-in-out infinite; }
.fig-heart svg { position: relative; display: block; width: 100%; height: 100%; }
.fig.heart-on .fig-heart { opacity: 1; }
@keyframes chest-beat { 50% { opacity: .55; } }
/* the name tag over the head, as in the world: the SOUL's heart before the name on a dark box */
.fig-tag { position: absolute; left: 50%; bottom: calc(var(--s) * 35); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; background: rgba(0, 0, 0, .62); font: 16px/24px var(--mono); color: #fff; text-shadow: 1px 1px 0 #3f3f3f; white-space: nowrap; pointer-events: none; }
.fig-tag .tag-heart { display: block; width: 9px; height: 8px; color: var(--tag-heart, #fff); }
/* (in creation the tag as the game draws it there: a size up, a heart pixel two screen pixels) */
.creator .fig-tag { gap: 12px; padding: 6px 14px; font: 32px/40px var(--mono); text-shadow: 2px 2px 0 #3f3f3f; }
.creator .fig-tag .tag-heart { width: 18px; height: 16px; }
.fig-tag .tag-heart svg { display: block; width: 100%; height: 100%; }
.fig-tag.empty .tag-name { color: #8a8c9a; font-style: italic; text-shadow: none; }

/* the gallery: a row of figures, the arrows either side; one pointed at shows its SOUL and name */
.gallery { position: relative; display: flex; align-items: center; }
.gallery-arrow { position: absolute; top: 50%; margin-top: -60px; z-index: 2; width: 40px; height: 120px; padding: 0; display: grid; place-items: center; background: none; border: 1px solid transparent; cursor: pointer; color: var(--sv-unselected); }
.gallery-arrow .arrow { pointer-events: none; }
.gallery-arrow:hover:not(:disabled), .gallery-arrow:focus-visible { color: var(--sv-selected); border-color: var(--sv-outline); outline: none; }
.gallery-arrow:disabled { opacity: .3; cursor: default; }
#galPrev { right: 100%; margin-right: 8px; }
#galNext { left: 100%; margin-left: 8px; }
.gallery-track { flex: 1; display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
/* (tall enough for the name tag over the head, inside the card) */
.gal-card { flex: none; scroll-snap-align: start; width: 152px; height: 280px; display: grid; place-items: end center; padding-bottom: 16px; outline: none;
  background: color-mix(in srgb, var(--sv-panel) 75%, transparent); border: 1px solid var(--sv-outline); }
.gal-card:hover, .gal-card:focus-visible { border-color: #fff; background: color-mix(in srgb, var(--sv-panel-hi) 75%, transparent); }
.gal-card .fig-tag { font-size: 16px; }
@media (max-width: 980px) {
  .creator { grid-template-columns: minmax(0, 1fr); }
  .creator-stage { min-height: 420px; }
}
@media (max-width: 600px) {
  .creator-stage { min-height: 340px; }
  .c-row { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .c-more { padding-left: 0; }
  .c-num { min-width: 0; }
  .step-title, .c-name { font: 16px/24px var(--mono); text-shadow: 1px 1px 0 #404040; }
  .gal-card { width: 136px; }
  #galPrev { right: auto; left: 0; margin: -60px 0 0; }
  #galNext { left: auto; right: 0; margin: -60px 0 0; }
}

/* ---------- the permissions (/soulverse/permissions/): a table a group, yes in green and no in grey ---------- */
.perms { margin: 0 0 16px; }
.perms table { table-layout: fixed; }
.perms th:nth-child(1), .perms td:nth-child(1) { width: 34%; }
.perms th:nth-child(3), .perms td:nth-child(3), .perms th:nth-child(4), .perms td:nth-child(4) { width: 104px; text-align: center; }
.perms td code { white-space: normal; overflow-wrap: anywhere; color: var(--sv-selected); }
.perm-yes { font: 16px/24px var(--mono); color: #6be38a; }
.perm-no { font: 16px/24px var(--mono); color: var(--q-dim); }
.permissions .sub { margin-top: 32px; }
@media (max-width: 600px) {
  .perms th:nth-child(3), .perms td:nth-child(3), .perms th:nth-child(4), .perms td:nth-child(4) { width: 72px; }
  .perms th:nth-child(1), .perms td:nth-child(1) { width: 40%; }
  .perms table, .perms thead, .perms tbody, .perms tr, .perms td { font-size: 16px; }
}

/* ---------- the made packs (/soulverse/packs/): a box a pack, its icon and words, then a row a SOUL ---------- */
.made-packs { list-style: none; margin: 16px 0 0; display: flex; flex-direction: column; gap: 16px; }
.made-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.made-icon { display: block; width: 64px; height: 64px; flex: none; image-rendering: pixelated; border: 1px solid var(--sv-outline); }
.made-words { flex: 1 1 240px; min-width: 0; }
.made-words h3 { margin: 0; }
.made-words .say { margin: 4px 0 0; }
.made-souls { list-style: none; margin: 16px 0 0; }
.made-souls > li { padding: 12px 0; border-top: 1px solid var(--sv-divider); }
.made-soul { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.made-soul .heart { display: block; width: 18px; height: 16px; flex: none; }
.made-soul .heart svg { display: block; width: 100%; height: 100%; }
.made-name { font: 16px/24px var(--mono); }
.made-soul .say { margin: 0; flex: 1 1 auto; }
.made-souls > li > .say { margin: 4px 0 0 30px; }
.made-quirks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 0 30px; color: var(--q-faint); }
.made-quirks .with-pic { display: inline-flex; align-items: center; gap: 8px; }
.made .mini { display: block; flex: none; width: 36px; height: 36px; background: rgba(16, 16, 24, .75); border: 1px solid rgba(255, 255, 255, .31); }
.made .mini i { display: block; width: 34px; height: 34px; background-repeat: no-repeat; image-rendering: pixelated; }
.made-souls .fold { margin: 8px 0 0 22px; }
.made-souls .fold .code { margin: 0; }

/* ---------- footer ---------- */
.foot { padding: 32px 0 48px; border-top: 1px solid var(--sv-divider); background: rgba(4, 4, 15, .9); }
.foot-in p { margin: 0 0 8px; color: var(--sv-hint-key); }
.foot-in p:first-child { display: flex; align-items: center; gap: 8px; font: 16px/24px var(--mono); color: var(--sv-label); }
.foot-in .small { color: var(--sv-hint-label); }

/* ---------- smaller screens ---------- */
@media (max-width: 1160px) {
  .soul-browser { grid-template-columns: minmax(0, 1fr); }
  .soul-panel { min-height: 0; }
}
@media (max-width: 980px) {
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .links { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; margin: 0; padding: 8px 16px 16px; background: rgba(4, 4, 15, .97); border-bottom: 1px solid var(--sv-divider); }
  .links.open { display: flex; }
  .bar-in .menu-btn { display: inline-flex; margin-left: auto; }
  .bar-end { margin-left: 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step, .split, .step-row { grid-template-columns: minmax(0, 1fr); }
  .step.flip .clip { order: 0; }
  .quirk-grid, #everyone .quirk-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .logo img { width: 256px; height: 78px; }         /* 2 screen pixels a logo pixel */
  .bar-end .button { display: none; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stage { width: 336px; height: 247px; }
  /* the status in two lines: what it is, then the game it's for */
  .status-text { display: flex; flex-direction: column; align-items: center; }
  .status .sep { display: none; }
  .hero-heart { top: 24px; width: 96px; height: 96px; margin-left: -48px; }
  .typed { font: 16px/24px var(--mono); text-shadow: 1px 1px 0 #404040; min-height: 24px; }
  .menu-list { width: min(100%, 288px); }
  .menu-item { font: 16px/24px var(--mono); padding: 6px 28px; text-shadow: 1px 1px 0 #222327; }
  .menu-item .cursor-heart { left: 10px; top: calc(50% - 4px); width: 9px; height: 8px; }
  .ring-stage { width: 336px; height: 280px; }
  .ring-name { min-width: 0; flex: 1; }
  .tip { padding: 13px 13px 13px 6px; }
  .popup { padding: 14px; }
  .quirk > button { grid-template-columns: 53px minmax(0, 1fr); }
  .quirk .kind { grid-column: 2; justify-self: start; }
  .section { padding: 56px 0; }
  .hints { display: none; }
}
@media (max-width: 400px) {
  .brand span:last-child { display: none; }
}
/* touch screens (html.touch, set by soulverse.js on the first touch): a tapped thing stays "hovered" until the next tap, which
   left heart cursors and lit rows behind; there the heart shows only on the row really chosen (the section you're in, an open
   question). By touch, not by (hover: none): some desktops report that with a mouse plugged in, and lost their hover hearts. */
html.touch .links a:not(.here):hover .cursor-heart,
html.touch .menu-item:hover .cursor-heart,
html.touch .button.wide:not([aria-pressed="true"]):hover .cursor-heart,
html.touch .contents a:hover .cursor-heart,
html.touch .faq:not([open]) summary:hover .cursor-heart,
html.touch .fold:not([open]) summary:hover .cursor-heart { opacity: 0; }
html.touch .links a:not(.here):hover,
html.touch .menu-item:hover,
html.touch .faq:not([open]) summary:hover,
html.touch .fold:not([open]) summary:hover,
html.touch .contents a:hover { color: var(--sv-unselected); text-shadow: 1px 1px 0 #222327; }
html.touch .menu-item:hover { text-shadow: 2px 2px 0 #222327; background: color-mix(in srgb, var(--sv-panel) 75%, transparent); border-color: var(--sv-outline); }
html.touch .button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--sv-panel) 75%, transparent); border-color: var(--sv-outline); }
html.touch .tile:hover .tile-icon,
html.touch .quirk:not(.open):hover .tile-icon { background: rgba(16, 16, 24, .75); border-color: rgba(255, 255, 255, .31); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}