/* Orbitron for the name holder, from Google Fonts. The browser negotiates WOFF2
   itself, so no local file is needed. To make the project self-contained, drop
   orbitron-600.woff2 into vendor/orbitron/ and replace this with an @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

/* ==========================================================================
   CARD FORGE :: card view

   The card is a fixed box measured in the artwork's own units, where 1 unit is
   1px, then scaled with a transform. That gives one coordinate system: every
   position in card.js is a number copied out of the SVG.

   Static art is a background image on an absolutely-positioned layer, so each
   SVG's <style> block stays isolated and the DOM is a handful of divs rather
   than hundreds of paths.

   Content is live HTML in slots. Nothing is baked into the artwork, so there are
   no glyphs to hide and nothing to draw over.
   ========================================================================== */

@media (max-width: 860px) {
}

/* ---------------------------------------------------------------- the card */

/* the card box and its scaled fit wrapper */
.card-fit {
  position: relative;
  flex: none;
}
.card {
  position: relative;
  transform-origin: top left;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.55));
}
.card > .layer {
  position: absolute;
}

/* Generated placeholder art (see placeholder.js): fills the picture window the way a
   background image would. TEMPORARY, and remove with it. */
.art-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

/* The window bevel: a translucent black ring, masked to the window outline so it
   darkens whatever artwork is underneath rather than painting over it. Keeping
   the transparency here (as a background colour) means the SVG is just a shape. */
.card > .layer.bevel {
  background-color: rgba(0, 0, 0, 0.45);
  -webkit-mask-image: url('/assets/window-edge.svg');
  mask-image: url('/assets/window-edge.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ------------------------------------------------------------------- slots */

.slot {
  position: absolute;
  box-sizing: border-box;
  font-family: var(--font);
}
.slot.value {
  display: grid;
  place-items: center;
  font-family: 'Bungee', var(--font);
  font-weight: 400;
  line-height: 1;
  /* Bungee's digits sit below the optical centre of these chips; nudge them up.
     In em, so the lift scales with the number. */
  transform: translateY(-0.03em);

  /* Countersunk into the chip rather than printed on it.
     The artwork is lit from the north-west, so inside a recess the wall that FACES
     the light is the lower-right one: it catches the light, while the upper-left
     wall falls into shadow. That is the opposite of raised lettering, which is why
     this reads as pressed in rather than sitting on top. The fill is a shade down
     from paper so the glyph sits below the surface, and the tight dark halo
     suggests the lip of the hole. */
  color: #dfe1e4;
  text-shadow:
    0.05em 0.05em 0 rgba(255, 255, 255, 0.16),
    -0.045em -0.045em 0.04em rgba(0, 0, 0, 0.55),
    0 0 0.14em rgba(0, 0, 0, 0.28);
}
/* The name holder, rebuilt from SVG/Name.svg in pure CSS.
 *
 * Reference geometry is 61.1 x 7.62 with 4px type, so every measurement below is
 * that figure divided by 4 and expressed in em: the tag is 1.905em tall, the
 * plate radius 0.355em, the rule 0.0625em. Set one font-size and the whole thing
 * scales, which is how the placement page resizes it.
 */
.slot.name {
  /* an explicit line height: `normal` is the font's own answer, which differs by renderer */
  line-height: 1.2;
  --name-rule: 0.1em;                         /* the gradient rule's thickness */
  font-family: 'Orbitron', 'Bungee', var(--font);
  font-weight: 600;
  /* lifted towards white: these colours also fill the picture, and several of the
     keyword colours are too dark to read on the near-black plate unaided */
  color: color-mix(in srgb, var(--name-hi, #fbb040) 72%, #fff);
  white-space: nowrap;
}

/* The plate: near-black fill inside a yellow-to-orange rule.
 *
 * The rule's thickness is --name-rule, and nothing else. It is painted as a
 * gradient background with the dark fill inset over it by exactly that amount,
 * rather than using a transparent border with background-clip: two layers where
 * one of them is a shorthand keyword is easy to get subtly wrong, and impossible
 * to eyeball when it goes wrong.
 */
.name-tag__plate {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 82.42%;                              /* 50.35 / 61.1 */
  border-radius: 0.355em;                     /* 1.42 / 4 */
  /* dark at the top of the plate, the card's own colour at the bottom */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--name-hi, #fbb040) 62%, #000) 0%,
    color-mix(in srgb, var(--name-hi, #fbb040) 78%, #000) 30%,
    var(--name-hi, #fbb040) 100%
  );
}
.name-tag__plate::after {
  content: '';
  position: absolute;
  inset: var(--name-rule);
  border-radius: calc(0.355em - var(--name-rule));
  background: #231f20;
}

.name-tag__text {
  position: absolute;
  left: 0;
  /* the plate's own width, not the holder's: the stripes overhang to the right and
     would push a centred name off the plate */
  width: 82.42%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* the three slanted bars that overhang the plate's right edge */
.name-tag__slashes {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3.45em;                              /* 13.8 / 4 */
}
.name-tag__slashes i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.68em;
  background: var(--name-hi, #fbb040);
  border-radius: 0.1em;
  transform: skewX(-30deg);                   /* the bars lean right */
}
.name-tag__slashes i:nth-child(1) { left: 0.26em; }
.name-tag__slashes i:nth-child(2) { left: 1.24em; }
.name-tag__slashes i:nth-child(3) { left: 2.22em; }
.slot.text {
  font-weight: 500;
  line-height: 1.45;
  /* Ctrl+Enter in the editor writes a newline, and HTML would collapse it into a
     space. pre-wrap keeps the breaks the author typed and still wraps long lines. */
  white-space: pre-wrap;
  color: #1f1c1d;
  overflow: hidden;
  /* Inline tags are pulled 0.3em out of their box, so a tag at either end of a line
     reaches past the text box and overflow: hidden cuts its point off.
     Room is given on both sides without moving the text: content-box sizing keeps
     `width` as the text's own measure, the padding adds outside it, and the negative
     margin shifts the box back so the first glyph still starts where it did. */
  box-sizing: content-box;
  padding: 0 0.4em;
  margin-left: -0.4em;
}
/* A bare X in the effect text becomes the VARIABLE mark: the symbol sits on the
   baseline and is sized to the text rather than to a tag, so it reads as a word. */
.slot.text .inline-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.7em;
  height: 0.8em;
  vertical-align: -0.05em;   /* another half pixel up, measured at 1x */
  font-weight: 700;
  color: inherit;
}
.slot.text .inline-symbol svg {
  height: 0.8em;
  width: auto;
  display: block;
}
.slot.text .inline-symbol i {
  font-size: 0.8em;
}

/* the real keyword tag, styled entirely by styles.css */
/* The tag's height relative to the body text -- the one dial for how heavy tags
   read. At 1.5em the tag's type was 0.81x the body and looked shrunken; at 2em it
   was 1.08x and dominated the line. 1.6em lands at 0.86x. */
.slot.text .tag {
  --tag-h: 1.8em;
  vertical-align: middle;
  /* The tag's shape and inset are exactly as designed -- only its position in the
     line changes. Its pointed ends are empty wedges, so the visible banner stops
     well short of the box on each side and the tag reads as floating away from the
     words around it. Pulling the box in by less than the wedge's depth closes that
     gap without the point touching a glyph.

     The block margin is vertical breathing room. A line holding a tag is exactly as
     tall as the tag -- it is an inline-flex, so it sets the line box -- which leaves
     consecutive tagged lines touching. 0.4 units each side is about a screen pixel
     between them at 1x. */
  margin: 0.4px -0.3em;
}
.slot.trigger,
.slot.faction {
  display: grid;
  place-items: center;
}
/* an inline <svg> keeps its aspect ratio (xMidYMid meet), so this fits the box */
.slot.trigger svg,
.slot.faction svg {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}
.slot.trigger i,
.slot.faction i {
  font-size: 1em;        /* the slot's own font-size is set to its height */
  line-height: 1;
}

/* The same countersunk lighting as the cost and power numbers, applied to the
   trigger's symbol.
   text-shadow does not reach inside an SVG, so this uses drop-shadow, which
   follows the drawn outline of the symbol instead of a text box. Light still comes
   from the north-west: the lower-right edge catches it, the upper-left falls into
   shadow -- the inside of a recess, not the top of a raised shape. */
.slot.trigger svg,
.slot.trigger i,
.slot.faction svg,
.slot.faction i {
  filter:
    drop-shadow(0.03em 0.03em 0 rgba(255, 255, 255, 0.12))
    drop-shadow(-0.028em -0.028em 0.02em rgba(0, 0, 0, 0.4));
}

/* ================================================================ editing */

/* Everything clickable on the card says so, and lights up on hover. */
.card .editable {
  cursor: pointer;
}
.card .slot.text.editable {
  cursor: text;
}
.card .editable:focus-visible {
  outline: 2px solid rgba(251, 176, 64, 0.55);
  outline-offset: 3px;
}

/* The field that opens over an edited element. It is positioned in screen
   coordinates because the card itself is transform-scaled. */
.card-field {
  position: fixed;
  z-index: 40;
  box-sizing: border-box;
  padding: 6px;
  background: var(--ink-800);
  border: 1px solid var(--amber);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}
.card-field__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  min-height: 30px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: 3px;
  resize: none;
  outline: none;
}
.card-field__input:focus {
  border-color: var(--amber-dim);
}
.card-field--multi .card-field__input {
  min-height: 92px;
  font-size: 12px;
}

/* the <keyword> menu, hung off the bottom of the field */
.kw-menu {
  position: absolute;
  left: 6px;
  right: 6px;
  top: calc(100% - 2px);
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--ink-700);
  border: 1px solid var(--amber-dim);
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.kw-menu[hidden] {
  display: none;
}
.kw-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  color: var(--tag-color, var(--text));
  background: transparent;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
}
.kw-menu__item:hover,
.kw-menu__item:focus-visible,
.kw-menu__item.is-active {
  /* the row's own keyword colour, so the highlight matches the icon in it */
  background: color-mix(in srgb, var(--tag-color, var(--amber)) 22%, transparent);
  outline: none;
}
/* the keyboard highlight carries an edge, so it reads as "this is what Enter
   will pick" rather than as a stray hover */
.kw-menu__item.is-active {
  box-shadow: inset 2px 0 0 var(--tag-color, var(--amber));
}
.kw-menu__glyph {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: none;
}
.kw-menu__glyph svg {
  height: 14px;
  width: auto;
  display: block;
}
.kw-menu__glyph i {
  font-size: 12px;
}

/* the trigger picker, grouped the same way the keywords page groups them */
.picker-group {
  margin-bottom: 14px;
}
.picker-group:last-child {
  margin-bottom: 0;
}
.picker-group__title {
  margin: 0 0 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}

/* The cost and power palette.
   The digits are the same .picker-cell the symbol picker uses, so a choice looks the
   same wherever it is offered. Only the frame is local: a small anchored panel
   instead of a dialog, because there are eleven of them and they belong beside the
   number they change. */
.card-numbers {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
}
.card-numbers__title {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--amber);
}
/* narrower than the symbol grid, so eleven digits make two rows */
.card-numbers .picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 44px);
  gap: 5px;
}
.card-numbers .picker-cell {
  padding: 5px 3px;
}
.card-numbers .picker-cell .glyph {
  width: 26px;
  height: 26px;
  font-family: 'Bungee', var(--font);
  font-size: 0.95rem;
}

/* whether the card you are looking at is in the store */

/*
 * The faction's mark on a card.
 *
 * The box is the card's picture window -- the same percentages the band's indicator cards
 * use -- and the mark is aligned to its right edge, so a card shows its faction in the
 * same place and at the same relative size as its indicator.
 */
.card-faction-mark {
  position: absolute;
  left: 11.464%;   /* the picture window, in the card's own units */
  top: 7.637%;
  width: 77.066%;
  height: 55.539%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

/*
 * The mark itself: the same treatment the band's indicator cards give it.
 *
 * Black, at 45% -- so it darkens whatever colour is behind it instead of painting a colour
 * of its own -- and pushed a quarter of its own size past the window's right and bottom
 * edges, so it straddles the picture rather than sitting in the middle of it.
 *
 * Both sizes are set. Font Awesome sizes a glyph from `font-size` while an SVG fills its
 * box, so a rule that sets only width and height draws the two kinds at different sizes.
 * The window is 55.539% of 193.92 units = 107.7 units tall, and 85% of that is 91.5.
 */
.card-faction-mark .faction-mark {
  width: 85%;
  height: 85%;
  font-size: 91.5px;
  transform: translate(25%, 25%);
  filter: brightness(0) opacity(0.45);
}