/* Flick games — /arcade/paperball, /arcade/biro-boxing, /arcade/accro.
   Loaded after arcade-game.css. These three pages have no playable board, so
   the only thing they add to a rules page is a plan of the playing area,
   drawn to the numbers in the rules module (ops/backend/services/games/kinds/
   paperball.py, biroboxing.py, accro.py). Change a constant there and the
   matching SVG coordinate has to change here by hand. */

.flick-fig { margin: 0; max-width: 700px; }
.flick-fig--tall { max-width: 380px; }
.flick-fig svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(12px, 3vw, 20px);
  border: 1px solid #8A6A32;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 24%),
    linear-gradient(135deg, #1A1622, #0F0D14 55%, #17131D);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(234, 212, 145, .28);
}
.flick-fig figcaption {
  margin-top: .85rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--cat-text-3);
  max-width: 62ch;
}
.flick-fig figcaption b { color: var(--cat-text-2); font-weight: 600; }

/* Every stroke is a screen pixel wide whatever the drawing's scale, so a
   1200-unit pitch and a 420-unit corridor are inked with the same pen. */
.flick-fig svg * { vector-effect: non-scaling-stroke; }
.fk-surface { fill: rgba(255, 255, 255, .03); stroke: none; }
.fk-line { fill: none; stroke: rgba(243, 242, 240, .5); stroke-width: 1.5px; }
.fk-dash { fill: none; stroke: rgba(243, 242, 240, .34); stroke-width: 1.25px; stroke-dasharray: 5 5; }
.fk-goal { fill: rgba(234, 212, 145, .14); stroke: #EAD491; stroke-width: 2px; }
.fk-post { fill: #EAD491; stroke: none; }
.fk-a { fill: #EAD491; stroke: #8A6A32; stroke-width: 1px; }
.fk-b { fill: var(--cat-accent); stroke: rgba(255, 255, 255, .45); stroke-width: 1px; }
.fk-ball { fill: #F3F2F0; stroke: #928E86; stroke-width: 1px; }
.fk-solid { fill: rgba(243, 242, 240, .13); stroke: rgba(243, 242, 240, .5); stroke-width: 1.5px; }
.fk-mark { fill: none; stroke: #EAD491; stroke-width: 1.5px; }
.fk-num {
  font-family: var(--cat-mono);
  font-weight: 500;
  fill: var(--cat-text-2);
}

.fk-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: .85rem 0 0;
  padding: 0;
  font-size: .84rem;
  color: var(--cat-text-2);
}
.fk-key li { display: flex; align-items: center; gap: .45rem; }
.fk-key i {
  flex: none;
  width: .7rem;
  height: .7rem;
  border-radius: 2px;
  background: #EAD491;
}
.fk-key i.b { background: var(--cat-accent); }
.fk-key i.ball { border-radius: 50%; background: #F3F2F0; }
.fk-key i.ring { border-radius: 50%; background: none; border: 1.5px solid #EAD491; }
.fk-key i.dash { height: 0; border-radius: 0; background: none; border-top: 1.5px dashed rgba(243, 242, 240, .6); }
.fk-key i.solid { background: rgba(243, 242, 240, .13); border: 1px solid rgba(243, 242, 240, .5); }