/* Brass and Ink icons, Keyhole Games v01 (2026-10-24). Built by brand/icons/build_icons.py; do not hand-edit.
   UI icon:  <svg class="ki" aria-hidden="true"><use href="/assets/icons/icons.svg#ki-play"/></svg> beside a text label,
             or role="img" aria-label="Play" on the <svg> when it stands alone.
   Plaque:   <img class="kp" src="/assets/icons/plaques/cylinder.svg" alt="" width="96" height="96"> inside <span class="kp-wrap">. */
:root { --ki-accent: #e3a72f; --ki-mask-go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle class='ki-a' fill='none' cx='5.75' cy='12' r='2.9'/%3E%3Cpath d='M8.65 12H20.5M16 7.5l4.5 4.5-4.5 4.5'/%3E%3C/svg%3E"); --ki-mask-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath class='ki-a' fill='none' d='M7.5 4.8v14.4a.9.9 0 0 0 1.37.77l11.3-7.2a.9.9 0 0 0 0-1.54L8.87 4.03A.9.9 0 0 0 7.5 4.8Z'/%3E%3Cpath fill='currentColor' stroke='none' d='M10.85 10.85A1.46 1.46 0 1 1 12.35 10.85L13.22 14.10H9.97Z'/%3E%3C/svg%3E"); --ki-mask-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.6 7.1 12 13l8.4-5.9'/%3E%3Ccircle class='ki-a' fill='none' cx='12' cy='13.6' r='2.6'/%3E%3C/svg%3E"); --ki-mask-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath class='ki-a' fill='none' d='M8.5 10.5h-2A1.5 1.5 0 0 0 5 12v7a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-7a1.5 1.5 0 0 0-1.5-1.5h-2'/%3E%3Cpath d='M12 14.5v-11M8 7.5l4-4 4 4'/%3E%3C/svg%3E"); }
.ki { width: 1.5rem; height: 1.5rem; flex: none; display: inline-block; vertical-align: middle; overflow: visible; }
.ki-16 { width: 16px; height: 16px; } .ki-20 { width: 20px; height: 20px; } .ki-24 { width: 24px; height: 24px; } .ki-32 { width: 32px; height: 32px; }
/* On brass grounds the brass fill would vanish: ink it lightly instead. */
.btn.gold .ki, .on-brass .ki { --ki-accent: rgba(42, 28, 4, 0.18); }
/* An empty rating star, an unpicked tag: no brass. */
.ki-plain { --ki-accent: transparent; }

/* Gold buttons: the Go glyph (or Play) replaces the Hunt crosshair. Masked so it takes the button's ink colour. */
.btn.gold.ki-go::after, .btn.gold.ki-play::after, .btn.gold.ki-email::after, .btn.gold.ki-share::after {
  content: ""; position: absolute; right: 0.9rem; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%);
  background: currentColor; -webkit-mask: var(--ki-mask-go) center / contain no-repeat; mask: var(--ki-mask-go) center / contain no-repeat; opacity: 0.9; }
.btn.gold.ki-play::after { -webkit-mask-image: var(--ki-mask-play); mask-image: var(--ki-mask-play); }
.btn.gold.ki-email::after { -webkit-mask-image: var(--ki-mask-email); mask-image: var(--ki-mask-email); }
.btn.gold.ki-share::after { -webkit-mask-image: var(--ki-mask-share); mask-image: var(--ki-mask-share); }

/* Plaques: a slow light sweep on hover and focus; static in Calm mode and under reduced motion. */
.kp-wrap { position: relative; display: inline-block; line-height: 0; border-radius: 19%; overflow: hidden; }
.kp { display: block; width: 96px; height: 96px; }
.kp-64 { width: 64px; height: 64px; } .kp-80 { width: 80px; height: 80px; }
.kp-wrap::after { content: ""; position: absolute; inset: 6% 6% 6% 6%; border-radius: 19%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 251, 232, 0.55) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; opacity: 0; }
a:hover .kp-wrap::after, a:focus-visible .kp-wrap::after, .kp-wrap:hover::after { opacity: 1; animation: kp-sweep 1.6s ease-in-out 1 forwards; }
@keyframes kp-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .kp-wrap::after { animation: none !important; opacity: 0 !important; } }
html.calm .kp-wrap::after, html[data-calm="on"] .kp-wrap::after, .calm .kp-wrap::after { animation: none !important; opacity: 0 !important; }