/* Materials and print. Contemporary monochrome ink on dark stock, one muted gold accent. */
:root {
  --ink: #e3e3e1;
  --muted: #a5a6a7;
  --accent: #bcaa70;
  --stock: #222426;
  --page: #0c0e10;
  --card-line: #8a8c8e35;
  --card-shadow: 0 1px 0 #45484a, 0 2px 0 #383b3d, 0 3px 0 #2d3032, 0 4px 0 #1b1d1f,
    0 6px 5px -3px #0009, 0 16px 23px -12px #000b;
  --card-hover-shadow: 0 1px 0 #45484a, 0 2px 0 #383b3d, 0 3px 0 #2d3032, 0 4px 0 #1b1d1f,
    0 10px 10px -5px #0009, 0 22px 28px -12px #000b;
  --piece-shadow: 0 1px 0 #45484a, 0 2px 0 #272a2c, 0 3px 3px -1px #000a;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' opacity='.12' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  --table-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' opacity='.035' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

body {
  color: #d5dad7;
  background-color: var(--page);
  background-image: var(--table-grain);
  overflow-x: clip;
}

/* Uncoated stock with a visible edge and a small contact shadow. */
.playing-card {
  color: var(--ink);
  background-color: var(--stock);
  background-image: var(--grain);
  border: 1px solid #65676945;
  border-radius: 5px;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease;
}
.card-wrapper { border-radius: 5px; }
.card-wrapper.is-hovered .playing-card,
.card-wrapper:focus-visible .playing-card { box-shadow: var(--card-hover-shadow); }
.card-wrapper.is-dragging .playing-card { box-shadow: var(--card-shadow); }

.tc-title {
  color: var(--accent);
  font-family: var(--font-title);
  font-size: calc(var(--card-w) * .058);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.card-front .tc-title { font-size: calc(var(--card-w) * .105); line-height: 1.15; }
.tc-type-line {
  color: #bbc6c1;
  font-size: calc(var(--card-w) * .030);
  font-weight: 500;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.tc-tagline { color: #bec7c5; font-size: calc(var(--card-w) * .0425); line-height: 1.55; }
.tc-footer { color: #96a3a4; font-size: calc(var(--card-w) * .024); line-height: 1.5; }
.tc-card-num { color: #aebbb8; }

/* The reverse is the same stock, printed with the longer account. */
.card-back { --card-w: 300px; padding: 22px; }
.card-back .tc-header { min-height: 0; margin-bottom: 10px; }
.card-back .tc-title { font-size: 17px; line-height: 1.35; letter-spacing: .1em; }
.card-back .card-front .tc-title { font-size: calc(var(--card-w) * .105); line-height: 1.15; }
.tc-type-line { font-size: 9px; }
.card-back .tc-text-box { margin-top: 11px; padding: 12px 0 14px; }
.card-back .dossier-description { color: #c1cbc7; font-size: 12.5px; line-height: 1.6; }
.card-back .spec-label { color: #95a5a6; font-size: 8.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.card-back .spec-val { color: #d2d9d2; font-size: 11px; line-height: 1.45; }
.card-back .spec-item.is-command .spec-val { font-family: var(--font-mono); font-size: 10px; color: #c9d2cb; }
.btn-launch { color: #d8dcda; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.btn-launch:hover { color: #fff; }
.btn-launch:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }
.card-back .tc-footer { font-size: 8.5px; }
.card-back a { -webkit-user-drag: none; }

/* Identity and controls share the stock, at the height of one small piece. */
.title-card .playing-card, .title-face {
  padding: 8px 18px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--grain), #202326;
  box-shadow: var(--piece-shadow);
}
.title-card h1, .title-face h1 {
  color: #b0b7bb;
  font: 500 12px/1.3 var(--font-title);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.title-card.is-hovered .playing-card, .title-card:focus-visible .playing-card { box-shadow: var(--piece-shadow); }
.title-face.title-reverse { flex-direction: row; gap: 7px; padding: 7px 8px 7px 12px; }
.title-face.title-reverse p {
  color: #afb8be;
  font: 500 9px/1.3 var(--font-title);
  letter-spacing: .12em;
  white-space: nowrap;
  text-transform: uppercase;
}
.title-email { display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; flex-shrink: 0; color: #afb8be; -webkit-user-drag: none; }
.title-email svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.title-email:hover { color: #dedfdc; }

.table-token, .size-token {
  color: #cacbcc;
  background: var(--grain), #2b2e30;
  border: 1px solid #65676945;
  border-radius: 3px;
  box-shadow: var(--piece-shadow);
}
.table-token { font-size: 9.5px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; }
.size-token input { border-radius: 0; background: #111315; box-shadow: inset 0 1px 2px #0008, 0 1px 0 #ffffff15; }
.size-token input::-webkit-slider-thumb {
  appearance: none; width: 10px; height: 16px; border-radius: 1px;
  background: var(--grain), #444b4f; border: 1px solid #626a6e55;
  box-shadow: 0 1px 0 #343b3f, 0 2px 2px #0005;
}
.size-token input::-moz-range-thumb {
  width: 10px; height: 16px; border-radius: 1px;
  background: var(--grain), #444b4f; border: 1px solid #626a6e55;
  box-shadow: 0 1px 0 #343b3f, 0 2px 2px #0005;
}
.sound-token svg { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-token[aria-pressed="false"] .sound-waves { display: none; }
.sound-token[aria-pressed="true"] .sound-muted { display: none; }

.deck-error { color: #c9ced0; }
.footer-inner, .footer-links a {
  color: #777c80;
  font-size: 10px;
  letter-spacing: .055em;
  text-shadow: 0 -1px 0 #000, 0 1px 0 #ffffff0c;
}
.footer-inner { transform: rotate(-.15deg); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: #b3b7ba; }

@media (max-width: 760px) {
  .title-card .playing-card, .title-face { padding: 8px 12px; }
  .title-card h1, .title-face h1 { font-size: 11px; }
  .title-face.title-reverse { gap: 5px; padding: 7px 5px 7px 9px; }
  .title-face.title-reverse p { font-size: 8px; letter-spacing: .09em; }
  .title-email { width: 18px; }
  .footer-inner, .footer-links a { font-size: 8px; letter-spacing: .045em; }
}