index.css

/* Generics (ITCSS) */

* { box-sizing: border-box; }

html {
  /* FAQ: Makes `1.0rem` equal `10px` */
  /* SEE: http://snook.ca/archives/html_and_css/font-size-with-rem */
  font-size: 62.5%;
}

body,
input, select, textarea, button {
  color: black;
  font: 1.8rem/1.5 "Georgia", Times, serif;
}
/* FAQ: Styling `<select>` elements it outside the scope of the prototype */
input, textarea {
  border: 1px solid black;
}

:focus {
  outline: 3px dotted black;
  outline-offset: 2px;
}

/* Elements (ITCSS) */

/* Elements: Content Sectioning */

header * { margin: 0; }

/* Elements: Forms */

/* RFE: For non-pointer devices (via media query), show `[title]` attributes as content */
label {
  display: block;
}
label::after {
  content: ":";
  margin-left: 0.05em;
}
input[type="checkbox"] + label::after { display: none; }

fieldset { padding: 0; margin: 0; border: none; }
legend,
[data-replaced-tag="legend"] {
  width: 100%;

  font-weight: bold;
  text-align: center;
}
/* FAQ: Using `padding`, because `margin` is ineffectual on Chrome 76 and Safari 12 */
fieldset + fieldset legend,
fieldset + [data-replaced-tag="fieldset"] [data-replaced-tag="legend"] { padding: 0.5em 0; }

/* Components (ITCSS) */
/* Components: Card */

.c-card {
  width: 25rem;
  min-height: 35rem;
  padding: 1rem;
  position: relative; /* For absolutely-positioned children */

  border: 1px solid black;
  border-radius: 1rem;
}
.c-card[data-value="earth"] { background-color: darkseagreen; }
.c-card[data-value="water"] { background-color: lightblue; }
.c-card[data-value="air"]   { background-color: lightyellow; }
.c-card[data-value="fire"]  { background-color: indianred }

.c-card__name,
.c-card__figure,
.c-card__desc,
.c-card__metadata {
  display: block;
  width: 100%;
}

.c-card__name {
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}

.c-card__figure {
  height: 10rem;

  border: 1px solid black;
  border-radius: 1rem;

  background: white none center/contain no-repeat;
}
/* FAQ: I would use SVG, but https://icons8.com wants my money */
/* RFE: Use 2x and 4x resolution as necessary (skipping for prototype) */
/* RFE: I could be efficient if `attr()` was available for all properties… */
.c-card__figure[data-value="hat"] { background-image: url("https://cdn.glitch.com/0c7dcc43-4038-42ed-81f7-4e43f6f1a133%2Fhat.png?v=1566530255300"); }
.c-card__figure[data-value="glove"] { background-image: url("https://cdn.glitch.com/0c7dcc43-4038-42ed-81f7-4e43f6f1a133%2Fglove.png?v=1566530251563"); }
.c-card__figure[data-value="boot"] { background-image: url("https://cdn.glitch.com/0c7dcc43-4038-42ed-81f7-4e43f6f1a133%2Fboot.png?v=1566530218139"); }
.c-card__figure[data-value="mask"] { background-image: url("https://cdn.glitch.com/0c7dcc43-4038-42ed-81f7-4e43f6f1a133%2Fmask.png?v=1566530258770"); }

.c-card__desc {
  margin: 0.5rem 0;
  /* FAQ: Avoiding `var` and `calc` to reduce prototype complexity */
  /* WARN: Without `calc`, may break if user changes font size via browser settings (not zoom) */
  height: 74px; /* line-height * font-size * line count (3) */
  resize: none;

  font-size: 1.6rem;
  text-align: center;
}

.c-card__attr-list {
  display: flex;
  flex-flow: row wrap;
}
.c-card__attr,
/* HACK: Prevent stretch of dangling attribute by adding invisible final one */
.c-card__attr-list::after {
  flex-grow: 3; /* that of `…-key` + that of `…-value` */
  flex-basis: 50%;
}
.c-card__attr-list::after { content: ""; }

.c-card__attr {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.c-card__attr-key,
.c-card__attr-value {
  flex-basis: 0;
}
/* Move input to end of box */
.c-card__attr .c-card__attr-key   { order: 1; }
.c-card__attr .c-card__attr-value { order: 2; }
.c-card__attr .c-card__attr-input { order: 3; }

.c-card__attr-key { flex-grow: 2; text-align: right; }
.c-card__attr-key::after { margin-right: 0.25em; }

.c-card__attr-value { flex-grow: 1; text-align: left; }
/* FAQ: Add positive sign for positive values (negative values already have sign) */
.c-card__attr-value.is-positive::before { content: "+"; }

.c-card__attr-input {
  width: 100%;
}

/* Components: Card: Options */

/* Move card options to above card */
.c-card--opts-count-1 {
  /* FAQ: Avoiding `var` to reduce prototype complexity */
  /* WARN: Without `calc`, may break if user changes font size via browser settings (not zoom) */
  margin-top: calc( 31px + 0.5em ); /* computed height + vert. margin */
}
.c-card--opts-list {
  width: 100%;
  position: absolute; /* WARN: Causes child form elements to need `tabindex="-1"` */
  bottom: 100%;
  left: 0;

  text-align: center;
}
.c-card__opt-toggle { margin: 0.25em 0; }
.c-card__opt-toggle > * { display: inline-block; vertical-align: middle; }

/* Trumps (ITCSS) */
/* Trumps: Scope: Card Preview */

.s-card-preview #card-ident label,
.s-card-preview #card-attr input,
.s-card-preview select,
.s-card-preview legend,
.s-card-preview [data-replaced-tag="legend"] { display: none; }

.s-card-preview input,
.s-card-preview textarea { border: none; background: transparent; }

.s-card-preview textarea { overflow: hidden; }