/* =================================================================
   YUM! CUSTOM ICON SYSTEM
   - Replaces emojis with consistent vector icons
   - Inherit color via currentColor (mask technique)
   - Sized via font-size (1em x 1em)
   ================================================================= */

.icn {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
}

/* Brand-tinted icons (gold by default, can be overridden) */
.icn-gold   { color: var(--gold); }
.icn-red    { color: var(--accent); }
.icn-green  { color: var(--green); }
.icn-white  { color: var(--white); }
.icn-muted  { color: var(--muted); }

/* ---- DICE (single) — 5-pip face, used as small icon */
.icn-dice {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='2'/><circle cx='8' cy='8' r='1.6' fill='black'/><circle cx='16' cy='8' r='1.6' fill='black'/><circle cx='12' cy='12' r='1.6' fill='black'/><circle cx='8' cy='16' r='1.6' fill='black'/><circle cx='16' cy='16' r='1.6' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='2'/><circle cx='8' cy='8' r='1.6' fill='black'/><circle cx='16' cy='8' r='1.6' fill='black'/><circle cx='12' cy='12' r='1.6' fill='black'/><circle cx='8' cy='16' r='1.6' fill='black'/><circle cx='16' cy='16' r='1.6' fill='black'/></svg>");
}

/* ---- DICE STACK (two dice — used for branding/lobby) */
.icn-dice-stack {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2' y='10' width='12' height='12' rx='2.4' fill='black'/><rect x='10' y='2' width='12' height='12' rx='2.4' fill='black'/><circle cx='5.5' cy='13.5' r='1.1' fill='white'/><circle cx='10.5' cy='18.5' r='1.1' fill='white'/><circle cx='13.5' cy='5.5' r='1.1' fill='white'/><circle cx='18.5' cy='10.5' r='1.1' fill='white'/><circle cx='16' cy='8' r='1.1' fill='white'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2' y='10' width='12' height='12' rx='2.4' fill='black'/><rect x='10' y='2' width='12' height='12' rx='2.4' fill='black'/><circle cx='5.5' cy='13.5' r='1.1' fill='white'/><circle cx='10.5' cy='18.5' r='1.1' fill='white'/><circle cx='13.5' cy='5.5' r='1.1' fill='white'/><circle cx='18.5' cy='10.5' r='1.1' fill='white'/><circle cx='16' cy='8' r='1.1' fill='white'/></svg>");
}

/* ---- TROPHY */
.icn-trophy {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 3h10v2h3v3a4 4 0 0 1-4 4h-.3a5 5 0 0 1-3.7 3.9V18h3v3H9v-3h3v-2.1A5 5 0 0 1 8.3 12H8a4 4 0 0 1-4-4V5h3V3zm0 4H6v1a2 2 0 0 0 1.5 1.94A8.5 8.5 0 0 1 7 7zm10 0v.5c0 .9-.18 1.78-.5 2.43A2 2 0 0 0 18 8V7h-1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 3h10v2h3v3a4 4 0 0 1-4 4h-.3a5 5 0 0 1-3.7 3.9V18h3v3H9v-3h3v-2.1A5 5 0 0 1 8.3 12H8a4 4 0 0 1-4-4V5h3V3zm0 4H6v1a2 2 0 0 0 1.5 1.94A8.5 8.5 0 0 1 7 7zm10 0v.5c0 .9-.18 1.78-.5 2.43A2 2 0 0 0 18 8V7h-1z'/></svg>");
}

/* ---- SOUND ON / OFF */
.icn-sound-on {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.06a7 7 0 0 1 0 13.48v2.06a9 9 0 0 0 0-17.6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.06a7 7 0 0 1 0 13.48v2.06a9 9 0 0 0 0-17.6z'/></svg>");
}
.icn-sound-off {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 9v6h4l5 4V5L7 9H3zm17.7 2 2.3-2.3-1.4-1.4-2.3 2.3-2.3-2.3-1.4 1.4 2.3 2.3-2.3 2.3 1.4 1.4 2.3-2.3 2.3 2.3 1.4-1.4-2.3-2.3z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 9v6h4l5 4V5L7 9H3zm17.7 2 2.3-2.3-1.4-1.4-2.3 2.3-2.3-2.3-1.4 1.4 2.3 2.3-2.3 2.3 1.4 1.4 2.3-2.3 2.3 2.3 1.4-1.4-2.3-2.3z'/></svg>");
}

/* ---- PLAYERS (group) */
.icn-players {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='9' cy='8' r='3.4'/><circle cx='17' cy='9' r='2.6'/><path d='M2 19c.5-3.4 3.4-5.6 7-5.6s6.5 2.2 7 5.6v1H2v-1zm14-5c2.6 0 5 1.6 5.5 4l.5.6V20h-5v-.7c0-1.7-.7-3.3-1.9-4.3.3 0 .6-.1.9-.1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='9' cy='8' r='3.4'/><circle cx='17' cy='9' r='2.6'/><path d='M2 19c.5-3.4 3.4-5.6 7-5.6s6.5 2.2 7 5.6v1H2v-1zm14-5c2.6 0 5 1.6 5.5 4l.5.6V20h-5v-.7c0-1.7-.7-3.3-1.9-4.3.3 0 .6-.1.9-.1z'/></svg>");
}

/* ---- BOT (robot head) */
.icn-bot {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M11 2h2v2.1a6 6 0 0 1 5 5.9v6a4 4 0 0 1-4 4h-6a4 4 0 0 1-4-4v-6a6 6 0 0 1 5-5.9V2zm-2 9a1.6 1.6 0 1 0 0 3.2A1.6 1.6 0 0 0 9 11zm6 0a1.6 1.6 0 1 0 0 3.2A1.6 1.6 0 0 0 15 11zM2 12h1v4H2zm19 0h1v4h-1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M11 2h2v2.1a6 6 0 0 1 5 5.9v6a4 4 0 0 1-4 4h-6a4 4 0 0 1-4-4v-6a6 6 0 0 1 5-5.9V2zm-2 9a1.6 1.6 0 1 0 0 3.2A1.6 1.6 0 0 0 9 11zm6 0a1.6 1.6 0 1 0 0 3.2A1.6 1.6 0 0 0 15 11zM2 12h1v4H2zm19 0h1v4h-1z'/></svg>");
}

/* ---- BOLT (lightning) */
.icn-bolt {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/></svg>");
}

/* ---- ORB (crystal ball / predict) */
.icn-orb {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='11' r='7'/><path d='M5 19h14v2H5z'/><circle cx='9.5' cy='8.5' r='1.6' fill='white'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='11' r='7'/><path d='M5 19h14v2H5z'/><circle cx='9.5' cy='8.5' r='1.6' fill='white'/></svg>");
}

/* ---- CAMERA */
.icn-camera {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 4l-2 2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-3l-2-2H9zm3 4a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 4l-2 2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-3l-2-2H9zm3 4a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/></svg>");
}

/* ---- CLIPBOARD (history/scoresheet) */
.icn-clipboard {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 2h6a2 2 0 0 1 2 2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2-2zm0 2v2h6V4H9zm-2 6h10v2H7v-2zm0 4h10v2H7v-2zm0 4h7v2H7v-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 2h6a2 2 0 0 1 2 2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2-2zm0 2v2h6V4H9zm-2 6h10v2H7v-2zm0 4h10v2H7v-2zm0 4h7v2H7v-2z'/></svg>");
}

/* ---- REFRESH (rematch) */
.icn-refresh {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 4V1L7 6l5 5V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 4V1L7 6l5 5V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-8z'/></svg>");
}

/* ---- GAMEPAD */
.icn-gamepad {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 6h10a5 5 0 0 1 5 5v4a3 3 0 0 1-5.6 1.5L15 14H9l-1.4 2.5A3 3 0 0 1 2 15v-4a5 5 0 0 1 5-5zm-1 4v2H4v2h2v2h2v-2h2v-2H8v-2H6zm10 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm2 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 6h10a5 5 0 0 1 5 5v4a3 3 0 0 1-5.6 1.5L15 14H9l-1.4 2.5A3 3 0 0 1 2 15v-4a5 5 0 0 1 5-5zm-1 4v2H4v2h2v2h2v-2h2v-2H8v-2H6zm10 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm2 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
}

/* ---- CLOSE (X) */
.icn-close {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/></svg>");
}

/* ---- CHECK */
.icn-check {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
}

/* ---- KEY */
.icn-key {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M14 2a6 6 0 0 0-5.7 7.85L2 16.16V21h4.84l1.17-1.17V18h2v-2h2v-2.16A6 6 0 1 0 14 2zm2 6a1.4 1.4 0 1 1 0-2.8 1.4 1.4 0 0 1 0 2.8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M14 2a6 6 0 0 0-5.7 7.85L2 16.16V21h4.84l1.17-1.17V18h2v-2h2v-2.16A6 6 0 1 0 14 2zm2 6a1.4 1.4 0 1 1 0-2.8 1.4 1.4 0 0 1 0 2.8z'/></svg>");
}

/* ---- TAP (finger pointer) */
.icn-tap {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 11.2V5a2 2 0 1 1 4 0v6.2l1.4-.6a2 2 0 0 1 2.6 1.9V18a4 4 0 0 1-4 4h-3.2a4 4 0 0 1-3-1.4l-3.5-4 1.4-1.3a2 2 0 0 1 2.4-.3L9 16.4V11.2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 11.2V5a2 2 0 1 1 4 0v6.2l1.4-.6a2 2 0 0 1 2.6 1.9V18a4 4 0 0 1-4 4h-3.2a4 4 0 0 1-3-1.4l-3.5-4 1.4-1.3a2 2 0 0 1 2.4-.3L9 16.4V11.2z'/></svg>");
}

/* ---- DOOR (exit/lobby) */
.icn-door {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M5 3h11a2 2 0 0 1 2 2v6h-2V5H5v14h11v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm12 8 4 4-4 4v-3h-7v-2h7v-3z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M5 3h11a2 2 0 0 1 2 2v6h-2V5H5v14h11v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm12 8 4 4-4 4v-3h-7v-2h7v-3z'/></svg>");
}

/* ---- FLAME */
.icn-flame {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2s4 4 4 8a4 4 0 0 1-1 2.7c1.5.7 3 2.3 3 5.3a6 6 0 0 1-12 0c0-2 .8-3.5 2-5 0 0 1 2 2 2 0-3 0-7 2-13z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2s4 4 4 8a4 4 0 0 1-1 2.7c1.5.7 3 2.3 3 5.3a6 6 0 0 1-12 0c0-2 .8-3.5 2-5 0 0 1 2 2 2 0-3 0-7 2-13z'/></svg>");
}

/* ---- HANDSHAKE */
.icn-handshake {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M5 8 1 12l5 5 1.5-1.5L8 16l3 3a2 2 0 0 0 3-3l3 3a2 2 0 0 0 3-3l-1-1 2-2-4-4-3 3a2 2 0 0 0-3 0L9 9 5 8zm14 0-3.5 3.5L17 13l4-4-2-1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M5 8 1 12l5 5 1.5-1.5L8 16l3 3a2 2 0 0 0 3-3l3 3a2 2 0 0 0 3-3l-1-1 2-2-4-4-3 3a2 2 0 0 0-3 0L9 9 5 8zm14 0-3.5 3.5L17 13l4-4-2-1z'/></svg>");
}

/* ---- EYE */
.icn-eye {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 5C7 5 2.7 8.1 1 12c1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 5C7 5 2.7 8.1 1 12c1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/></svg>");
}

/* ---- SEARCH */
.icn-search {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M10 4a6 6 0 0 1 4.7 9.7l5.3 5.3-1.4 1.4-5.3-5.3A6 6 0 1 1 10 4zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M10 4a6 6 0 0 1 4.7 9.7l5.3 5.3-1.4 1.4-5.3-5.3A6 6 0 1 1 10 4zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/></svg>");
}

/* ---- HOME */
.icn-home {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/></svg>");
}

/* ---- STAR */
.icn-star {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='m12 2 2.9 6.9L22 10l-5.5 4.7L18.1 22 12 18.3 5.9 22l1.6-7.3L2 10l7.1-1.1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='m12 2 2.9 6.9L22 10l-5.5 4.7L18.1 22 12 18.3 5.9 22l1.6-7.3L2 10l7.1-1.1z'/></svg>");
}

/* ---- DIAMOND (gem) */
.icn-gem {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 3h12l4 6-10 12L2 9l4-6zm.5 2L4 8.5h4L9 5H6.5zm5 0L10 8.5h4L13 5h-1.5zm5 0L15 8.5h5L17.5 5h-1zM4.4 10.5l6.6 8-2-8H4.4zm6 0 1.6 6.5 1.6-6.5h-3.2zm5 0-2 8 6.6-8h-4.6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6 3h12l4 6-10 12L2 9l4-6zm.5 2L4 8.5h4L9 5H6.5zm5 0L10 8.5h4L13 5h-1.5zm5 0L15 8.5h5L17.5 5h-1zM4.4 10.5l6.6 8-2-8H4.4zm6 0 1.6 6.5 1.6-6.5h-3.2zm5 0-2 8 6.6-8h-4.6z'/></svg>");
}

/* ---- TARGET */
.icn-target {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='5' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='1.6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='5' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='12' r='1.6'/></svg>");
}

/* ---- GIFT */
.icn-gift {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 7h-3.4a3 3 0 0 0-4.6-3.7A3 3 0 0 0 7.4 7H4a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h7v9h2v-9h7a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zm-6-2a1 1 0 1 1 0 2h-1V6a1 1 0 0 1 1-1zm-4 0a1 1 0 0 1 1 1v1h-1a1 1 0 1 1 0-2zM4 14h7v6H6a2 2 0 0 1-2-2v-4zm9 0h7v4a2 2 0 0 1-2 2h-5v-6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 7h-3.4a3 3 0 0 0-4.6-3.7A3 3 0 0 0 7.4 7H4a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h7v9h2v-9h7a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zm-6-2a1 1 0 1 1 0 2h-1V6a1 1 0 0 1 1-1zm-4 0a1 1 0 0 1 1 1v1h-1a1 1 0 1 1 0-2zM4 14h7v6H6a2 2 0 0 1-2-2v-4zm9 0h7v4a2 2 0 0 1-2 2h-5v-6z'/></svg>");
}

/* ---- COIN (money) */
.icn-coin {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='9'/><path d='M11 6h2v2.1c1.7.3 3 1.5 3 3.4h-2c0-.7-.7-1.5-2-1.5s-2 .8-2 1.5.7 1.5 2 1.5c2.3 0 4 1.3 4 3.4 0 1.6-1.2 2.9-3 3.3V20h-2v-1.3a3.6 3.6 0 0 1-3-3.4h2c0 .7.8 1.5 2 1.5s2-.8 2-1.5-.8-1.5-2-1.5c-2 0-4-1.3-4-3.4 0-1.7 1.3-3 3-3.3V6z' fill='white'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='9'/><path d='M11 6h2v2.1c1.7.3 3 1.5 3 3.4h-2c0-.7-.7-1.5-2-1.5s-2 .8-2 1.5.7 1.5 2 1.5c2.3 0 4 1.3 4 3.4 0 1.6-1.2 2.9-3 3.3V20h-2v-1.3a3.6 3.6 0 0 1-3-3.4h2c0 .7.8 1.5 2 1.5s2-.8 2-1.5-.8-1.5-2-1.5c-2 0-4-1.3-4-3.4 0-1.7 1.3-3 3-3.3V6z' fill='white'/></svg>");
}

/* ---- SPARKLE */
.icn-sparkle {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 13.5 9 21 10l-7 1.5L13 21l-1-9.5L3 10l9-1z'/><path d='M5 4 6 7 3 8l3 1 1 3 1-3 3-1-3-1z' opacity='.7'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 13.5 9 21 10l-7 1.5L13 21l-1-9.5L3 10l9-1z'/><path d='M5 4 6 7 3 8l3 1 1 3 1-3 3-1-3-1z' opacity='.7'/></svg>");
}

/* ---- WARNING */
.icn-warn {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 1 21h22zm0 5 7 12H5zm-1 5h2v4h-2zm0 5h2v2h-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 1 21h22zm0 5 7 12H5zm-1 5h2v4h-2zm0 5h2v2h-2z'/></svg>");
}

/* ---- MEDAL */
.icn-medal {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 2h10l-2 6H9zm-1 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0zm6-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 2h10l-2 6H9zm-1 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0zm6-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/></svg>");
}

/* ---- FLAG (finish) */
.icn-flag {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M5 3h2v18H5zm3 0h11l-2 4 2 4H8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M5 3h2v18H5zm3 0h11l-2 4 2 4H8z'/></svg>");
}

/* ---- SKULL (defeat) */
.icn-skull {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a8 8 0 0 0-5 14.3V19a1 1 0 0 0 1 1h2v-2h4v2h2a1 1 0 0 0 1-1v-2.7A8 8 0 0 0 12 2zm-3 8a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a8 8 0 0 0-5 14.3V19a1 1 0 0 0 1 1h2v-2h4v2h2a1 1 0 0 0 1-1v-2.7A8 8 0 0 0 12 2zm-3 8a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/></svg>");
}

/* ---- VOLCANO (jackpot) */
.icn-volcano {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 4h6v3l5 13H4l5-13V4zm2 2v2h2V6h-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 4h6v3l5 13H4l5-13V4zm2 2v2h2V6h-2z'/></svg>");
}

/* ---- PALETTE (style) */
.icn-palette {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3a9 9 0 0 0 0 18c1.7 0 3-1.3 3-3v-1a2 2 0 0 1 2-2h2a2 2 0 0 0 2-2A8 8 0 0 0 12 3zM7 9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5-2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3a9 9 0 0 0 0 18c1.7 0 3-1.3 3-3v-1a2 2 0 0 1 2-2h2a2 2 0 0 0 2-2A8 8 0 0 0 12 3zM7 9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5-2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z'/></svg>");
}

/* ---- LOGO BRAND DICE (full color, NOT a mask — used for the YUM main logo) */
.yum-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  vertical-align: middle;
}
.yum-brand-logo .yum-brand-mark {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(245,166,35,0.45));
}
.yum-brand-logo .yum-brand-text {
  font-family: 'Bebas Neue', cursive;
  letter-spacing: 0.18em;
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* Ensure brand wordmark stays gold on contexts that already glow */
header h1.yum-brand-logo .yum-brand-text {
  filter: drop-shadow(0 0 18px rgba(245,166,35,0.5));
}

/* Slightly larger brand for splash titles */
.yum-brand-logo--xl .yum-brand-mark {
  width: 1.25em;
  height: 1.25em;
}