/* Split-flap cards. Size comes from font-size on .flaps. */
@font-face {
  font-family: 'Flap';
  src: url('fonts/barlow-700.woff2') format('woff2');
  font-weight: 700;
  font-display: block;
}
.flaps {
  display: inline-flex;
  gap: var(--flap-gap, 0.07em);
  line-height: 1;
  font-family: 'Flap', 'Barlow', 'DIN Alternate', 'Arial Narrow', sans-serif;
  font-weight: 700;
  vertical-align: middle;
}
.flap {
  position: relative;
  display: inline-block;
  width: var(--flap-w, 0.74em);
  height: var(--flap-h, 1.06em);
  perspective: 3.2em;
  border-radius: var(--flap-r, 0.075em);
  color: #231f1b;
  box-shadow: 0 0.03em 0.04em rgba(40, 12, 0, 0.35), 0 0.08em 0.16em -0.04em rgba(40, 12, 0, 0.35);
}
.fh {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fh-t {
  top: 0;
  border-radius: var(--flap-r, 0.075em) var(--flap-r, 0.075em) 0 0;
  transform-origin: 50% 100%;
  background: linear-gradient(#f8ebd0, #f0e0bf);
}
.fh-b {
  bottom: 0;
  border-radius: 0 0 var(--flap-r, 0.075em) var(--flap-r, 0.075em);
  transform-origin: 50% 0;
  background: linear-gradient(#ead8b2, #e1cca2);
}
.fh b {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--flap-glyph, 0.86em);
  letter-spacing: 0;
}
.fh-t b { top: 0; }
.fh-b b { bottom: 0; }
.fh i {
  position: absolute;
  inset: 0;
  background: #1a0a00;
  opacity: 0;
  pointer-events: none;
}
.fl { z-index: 2; }
.hinge {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: rgba(35, 31, 27, 0.38);
  box-shadow: 0 1px 0 rgba(255, 246, 228, 0.5);
}
.hinge::before,
.hinge::after {
  content: '';
  position: absolute;
  top: -0.055em;
  width: 0.05em;
  height: 0.11em;
  border-radius: 0.02em;
  background: linear-gradient(90deg, #6d6760, #c9c3ba 50%, #6d6760);
}
.hinge::before { left: -0.025em; }
.hinge::after { right: -0.025em; }
.flap.blank .fh b { opacity: 0; }

/* the dark window the cards sit in */
.flap-window {
  display: inline-flex;
  padding: var(--win-pad, 0.07em);
  border-radius: var(--win-r, 0.14em);
  background: linear-gradient(#4a1a03, #6e2905 50%, #8e3807);
  box-shadow: inset 0 0.03em 0.08em rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 200, 160, 0.35);
}

/* orange leather */
.leather {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 196, 142, 0.22), rgba(255, 196, 142, 0) 60%),
    linear-gradient(#de5d22, #d9541e 50%, #c84a16);
  box-shadow: inset 0 1px 0 rgba(255, 214, 180, 0.65), inset 0 -2px 3px rgba(106, 31, 0, 0.35);
}
.leather::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='11'/%3E%3CfeDiffuseLighting surfaceScale='1.4' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='270' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  pointer-events: none;
}

/* blank flaps sit a shade lower than lettered ones */
.flap[data-ch=' '] .fh { filter: brightness(0.93); }