/*
  Underspire kit: components.
  The skin of the whole site, for the game and for the forum. A raised plate (a key, a chip, a badge),
  a sunken well (a field), a window (a panel, in gump.css), a pixel lamp, and headings in the pixel
  face. Everything is drawn in whole pixels: a black line of 2 pixels, a lit edge and a dark edge of
  2 pixels inside it, corners cut in steps. Nothing in here is a flat outline.
*/

.pagehead::after { content: ""; flex: 1 0 100%; height: 4px; margin-top: .5rem; background: linear-gradient(90deg, var(--brass-lo) 0 4px, transparent 4px 8px) 0 0 / 8px 4px repeat-x; }

/* ------------------------------------------------------------------ keys and fields */

/* A key is a raised plate, banded in two tones as the 16-bit games drew them. Pointed at, it comes up
   to heat. Pressed, the light swaps sides and the word sinks 2 pixels. */
.btn, .plaque {
  --s: 2px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 2.5rem;
  padding: .3rem 1.1rem .4rem;
  font: 400 16px/1.1 var(--pixel);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--brass-hi);
  text-shadow: 2px 2px 0 #000;
  cursor: pointer;
  background: linear-gradient(var(--plate-a) 0 50%, var(--plate-b) 50% 100%);
  border: 0;
  border-radius: 0;
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo);
}
.btn:hover, .plaque:hover {
  color: var(--heat-ink);
  text-shadow: none;
  background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-5), inset -2px -2px 0 2px #b0561a;
}
.btn:active, .plaque:active {
  padding-top: calc(.3rem + 2px);
  padding-bottom: calc(.4rem - 2px);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #b0561a, inset -2px -2px 0 2px var(--heat-5);
}
/* The key is clipped to its steps, which would clip an outline, so focus is a ring inside it. */
.btn:focus-visible, .plaque:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--arc); }
.btn-primary, .plaque-primary {
  color: var(--heat-5);
  background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #ffb067, inset -2px -2px 0 2px #5e220a;
}
.btn-danger {
  color: #ffd9cf;
  background: linear-gradient(#7c3427 0 50%, #652a1f 50% 100%);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #d98b76, inset -2px -2px 0 2px #2c0f09;
}
.btn-quiet, .btn-quiet:hover, .btn-quiet:active { background: none; clip-path: none; box-shadow: none; text-shadow: none; color: var(--brass); padding-top: .3rem; padding-bottom: .4rem; }
.btn-quiet:hover { color: var(--heat-4); background: #ffffff0a; }
.btn-small { min-height: 2.1rem; padding: .2rem .8rem .3rem; }
.btn-small:active { padding-top: calc(.2rem + 2px); padding-bottom: calc(.3rem - 2px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.linkish { padding: 0; font: inherit; color: var(--brass); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; }
/* The big key of an old game site is the same plate, longer, for the one or two things a page most wants done. */
.plaque { min-height: 3.1rem; padding: .45rem 2rem .55rem; letter-spacing: .12em; }

label { display: block; margin: 0 0 .4rem; font: 400 16px/1.3 var(--pixel); letter-spacing: .02em; color: var(--brass); }

/* A field is a well sunk into the window: the dark edge is above and left, the light edge below and right.
   In focus the light edge comes up to heat. */
.input, select.input, textarea.input {
  display: block;
  width: 100%;
  padding: .6rem .85rem;
  font: 400 15px/1.5 var(--read);
  color: var(--ink);
  background: linear-gradient(#000 0, #0c0b0a 6px) #0c0b0a;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
  caret-color: var(--heat-3);
}
.input:focus { box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--heat-3); }
.input::placeholder { color: var(--ink-faint); opacity: 1; }
/* Short fields that take the game's own words (a handle, a command, a finder) are typed in the pixel face. */
.input-px { font: 400 16px/1.4 var(--pixel); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--heat-3); }
.field { margin-bottom: 1.1rem; }
/* One line of agreement: a box and the words it agrees to, which may carry links. */
.field.field-check label { display: flex; align-items: flex-start; gap: .8rem; margin: 0; font: 400 .9375rem/1.5 var(--read); color: var(--ink); cursor: pointer; }
.field.field-check input[type="checkbox"] { flex: none; width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; }
.field-pair, .poll-edit-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1.2rem; }
.input.input-fit, select.input.input-fit { width: auto; min-width: 14rem; max-width: 100%; }
.btn-block { display: flex; width: 100%; }
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inline-field { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.inline-field label { margin: 0; }
@media (max-width: 560px) {
  .inline-field { grid-template-columns: 1fr; }
  .btn, .plaque { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
}
.form-errors { margin-bottom: 1rem; padding: .8rem 1rem; font: 400 14px/1.5 var(--read); color: var(--rust); background: var(--rust-bg); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #b8705c, inset -2px -2px 0 2px #4a1f15; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

/* ------------------------------------------------------------------ chips, lamps, badges */

/* A chip, a prefix and a badge are small raised plates. A colour is five numbers: two tones, a lit
   edge, a dark edge and the word. */
.chip, .prefix, .badge, .tag {
  --c-a: #35302a;
  --c-b: #2b2722;
  --c-hi: #6c624f;
  --c-lo: #1a1713;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .02rem .5rem .12rem;
  font: 400 16px/1.25 var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-shadow: 2px 2px 0 #000;
  background: linear-gradient(var(--c-a) 0 50%, var(--c-b) 50% 100%);
  border: 0;
  border-radius: 0;
  vertical-align: .1em;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--c-hi), inset -2px -2px 0 2px var(--c-lo);
}
.prefix { margin-right: .35rem; }
.tag-staff { --c-a: #1f4540; --c-b: #18362f; --c-hi: #6fbfb2; --c-lo: #0a1d1a; color: #b8ece0; }
.tag-mentor { --c-a: #5f3c14; --c-b: #4a2f10; --c-hi: #d99a4a; --c-lo: #26150a; color: var(--ember-hi); }
.chip-new { --c-a: #c26a18; --c-b: #a65a14; --c-hi: #ffc27a; --c-lo: #4d2606; color: var(--heat-5); }
.chip-pin, .chip-announce, .prefix-brass { --c-a: #5a4a2c; --c-b: #483a22; --c-hi: #c9a86a; --c-lo: #2a2010; color: var(--brass-hi); }
.chip-wait, .prefix-ember { --c-a: #5f3c14; --c-b: #4a2f10; --c-hi: #d99a4a; --c-lo: #26150a; color: var(--ember-hi); }
.prefix-plain { }
.prefix-arc { --c-a: #1f4540; --c-b: #18362f; --c-hi: #6fbfb2; --c-lo: #0a1d1a; color: #b8ece0; }
.prefix-rust { --c-a: #5a2a20; --c-b: #47211a; --c-hi: #c9806c; --c-lo: #230e0a; color: var(--rust); }
.badge-administrators { --c-a: #6a4a16; --c-b: #543a10; --c-hi: #e6b25a; --c-lo: #2a1c06; color: #ffe2a8; }
.badge-moderators { --c-a: #1f4540; --c-b: #18362f; --c-hi: #6fbfb2; --c-lo: #0a1d1a; color: #b8ece0; }
.badge-mentors { --c-a: #2a3a5e; --c-b: #212e4c; --c-hi: #7f98cf; --c-lo: #0e1426; color: #c9d8f4; }

/* The lamp is a flame in five rows of pixels. Dark, it is a cold outline. Lit, it takes the bands of heat
   and wavers by a row. */
.lamp {
  --f1: #2a2620;
  --f2: #342f28;
  --f3: #3b362e;
  --f4: #423c32;
  --f5: #2a2620;
  position: relative;
  display: inline-block;
  width: .75rem;
  height: 1rem;
  flex: none;
  vertical-align: middle;
}
.lamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--f5), var(--f5)) 3px 0 / 3px 3px no-repeat,
    linear-gradient(var(--f4), var(--f4)) 3px 3px / 3px 3px no-repeat,
    linear-gradient(var(--f3), var(--f3)) 0 6px / 9px 3px no-repeat,
    linear-gradient(var(--f2), var(--f2)) 0 9px / 9px 3px no-repeat,
    linear-gradient(var(--f1), var(--f1)) 3px 12px / 3px 3px no-repeat;
}
.lamp-on { --f1: var(--heat-1); --f2: var(--heat-2); --f3: var(--heat-3); --f4: var(--heat-4); --f5: var(--heat-5); }
.lamp-on::before { filter: drop-shadow(0 0 5px #ff741acc); animation: lamp-waver 1.1s steps(1) infinite; }
@keyframes lamp-waver {
  0% { transform: translateY(0); }
  30% { transform: translateY(1px); }
  55% { transform: translateY(0); opacity: .92; }
  80% { transform: translateY(1px); opacity: 1; }
}
html[data-fx="calm"] .lamp-on::before { animation: none; }

/* ------------------------------------------------------------------ seals as avatars */

.sigil { display: inline-block; flex: none; line-height: 0; filter: drop-shadow(0 2px 0 #000a); }
.sigil svg { display: block; width: 100%; height: 100%; }
/* A profile picture shows in the same place and size as a seal, in a square of its own. */
.sigil.has-picture img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; background: #1b1b1a; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--brass-lo); }
/* The mark is 16 art pixels across, so it is drawn at a whole multiple of 16 and the pixels stay square. */
.sigil-xs { width: 40px; height: 40px; }
.sigil-sm { width: 60px; height: 60px; }
.sigil-md { width: 80px; height: 80px; }
.sigil-lg { width: 120px; height: 120px; }
.sigil-xl { width: 160px; height: 160px; }
.sigil .so { fill: #000; }
.sigil .sh, .sigil .sb { fill: var(--mh); }
.sigil .sm, .sigil .sn { fill: var(--mm); }
.sigil .sl, .sigil .sk { fill: var(--ml); }
.sigil .sf { fill: #16120d; }
.metal-brass { --mh: #f0d8a4; --mm: #d5b174; --ml: #6f5a37; }
.metal-copper { --mh: #f2b890; --mm: #d18a5c; --ml: #81492b; }
.metal-verdigris { --mh: #bdeedb; --mm: #84c7b0; --ml: #3f7767; }
.metal-silver { --mh: #f4f8f6; --mm: #cfd7d4; --ml: #797773; }
.metal-iron { --mh: #cbd8e8; --mm: #98a9bd; --ml: #4d5c70; }
.metal-bronze { --mh: #e2c48d; --mm: #bf9a62; --ml: #6a5230; }
.metal-gold { --mh: #fff0b0; --mm: #f2c969; --ml: #8d6d1f; }

/* ------------------------------------------------------------------ page headings */

.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.4rem; }
h1 { font: 400 32px/1.15 var(--pixel); color: var(--heat-4); text-shadow: 3px 3px 0 #000; text-wrap: balance; overflow-wrap: anywhere; }
.lede { margin-top: .35rem; font: 400 1rem/1.5 var(--read); color: var(--ink-dim); }
.notice-line { padding: 1.1rem; color: var(--ink-dim); }
.panel.empty p { padding: 1.1rem; color: var(--ink-dim); }
.notice-line { display: flex; align-items: center; gap: .6rem; font: 400 14px/1.4 var(--read); }
.flashes { margin-bottom: 1.2rem; }
.flash { padding: .7rem 1rem; margin-bottom: .5rem; font: 400 14px/1.45 var(--read); color: var(--ink); background: #16211f; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--arc-dim), inset -2px -2px 0 2px #0b1513; }
.flash-error { background: var(--rust-bg); color: var(--rust); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #b8705c, inset -2px -2px 0 2px #4a1f15; }

/* ------------------------------------------------------------------ symbol plates */

/* A symbol in a sunken square, on a raised plate. A page tints it (new posts, hover) from its own rules.
   The small size is drawn at full size where the forum has always drawn it. */
.emblem-sm { width: 2.3rem; height: 2.3rem; }
.emblem {
  --s: 3px;
  position: relative;
  display: block;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--brass-hi);
  background: linear-gradient(var(--plate-a) 0 50%, var(--plate-b) 50% 100%);
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo);
}
.emblem::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: radial-gradient(circle at 50% 44%, #1c1a17 0, #0b0a09 78%);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
}
.emblem::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: #ffffff0d;
  transition: background-color 160ms ease-out;
}
/* The picture is 16 pixels of art shown at 48 screen pixels (64 on the large plate), in the middle of the well. */
.emblem svg {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  filter: drop-shadow(2px 2px 0 #000);
}
.emblem-lg { width: 5.6rem; height: 5.6rem; }
.emblem-lg svg { width: 64px; height: 64px; margin: -32px 0 0 -32px; }

/* ------------------------------------------------------------------ the Great House crests */

/* A shield is 31 by 36 pixels of art, drawn at a whole multiple of that so the pixels stay square. */
.crest { display: inline-block; flex: none; vertical-align: middle; image-rendering: pixelated; shape-rendering: crispEdges; filter: drop-shadow(0 3px 0 #000a); }
.crest-1 { width: 31px; height: 36px; }
.crest-2 { width: 62px; height: 72px; }
.crest-3 { width: 93px; height: 108px; }
.crest-4 { width: 124px; height: 144px; }
.crest-5 { width: 155px; height: 180px; }
.crest-6 { width: 186px; height: 216px; }
.crest-8 { width: 248px; height: 288px; }

/* A patron saint's emblem is 20 pixels square, shown at a whole multiple of that. A planet's mark is
   11 pixels square, shown at twice that, in the colour of the text it stands in. */
.saint { display: inline-block; flex: none; vertical-align: middle; image-rendering: pixelated; shape-rendering: crispEdges; filter: drop-shadow(0 3px 0 #000a); }
.saint-1 { width: 20px; height: 20px; }
.saint-2 { width: 40px; height: 40px; }
.saint-3 { width: 60px; height: 60px; }
.saint-4 { width: 80px; height: 80px; }
.saint-5 { width: 100px; height: 100px; }
.saint-6 { width: 120px; height: 120px; }
.saint-8 { width: 160px; height: 160px; }
.planet { display: inline-block; flex: none; width: 22px; height: 22px; vertical-align: -5px; fill: currentColor; shape-rendering: crispEdges; }