/*
 * GamesFree colour icons
 * Clean outline symbols with a restrained multi-colour treatment.
 */
.portal-color-icon {
  --icon-main: #54a8ff;
  --icon-accent: #9ed8ff;
  display: block;
  width: 21px;
  height: 21px;
  overflow: visible;
  color: var(--icon-main) !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22));
  transform-origin: center;
  transition: color .16s ease, filter .16s ease, transform .16s ease;
}

.portal-color-icon--blue { --icon-main: #54a8ff; --icon-accent: #a9dcff; }
.portal-color-icon--mint { --icon-main: #43d6a2; --icon-accent: #9af0d1; }
.portal-color-icon--yellow { --icon-main: #ffbd3e; --icon-accent: #ffe28c; }
.portal-color-icon--coral { --icon-main: #ff7167; --icon-accent: #ffaaa3; }
.portal-color-icon--violet { --icon-main: #a77cff; --icon-accent: #d1bcff; }

/* Iconify header family: Solar Bold Duotone, with Streamline Plump Color dice (CC BY 4.0). */
.portal-iconify {
  --iconify-soft: #8fbffa;
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
  color: #54a8ff !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .28));
  transform-origin: 50% 50%;
  transition: color .16s ease, filter .16s ease, transform .16s ease;
  will-change: transform, filter;
}
.portal-iconify--blue { color: #4fa5ff !important; --iconify-soft: #a8d8ff; }
.portal-iconify--mint { color: #29d89b !important; --iconify-soft: #9af0d1; }
.portal-iconify--yellow { color: #ffb31a !important; --iconify-soft: #ffe18b; }
.portal-iconify--coral { color: #ff5f57 !important; --iconify-soft: #ffaaa4; }
.portal-iconify--violet { color: #9b72ff !important; --iconify-soft: #d4c1ff; }
.site-header__actions .portal-iconify.portal-iconify--blue { color: #4fa5ff !important; }
.site-header__actions .portal-iconify.portal-iconify--mint { color: #29d89b !important; }
.site-header__actions .portal-iconify.portal-iconify--yellow { color: #ffb31a !important; }
.site-header__actions .portal-iconify.portal-iconify--coral { color: #ff5f57 !important; }
.site-header__actions .portal-iconify.portal-iconify--violet { color: #9b72ff !important; }
.site-header .portal-account .portal-iconify { color: #fff !important; }
.portal-light .site-header__actions .portal-install .portal-iconify--mint { color: #159b72 !important; }
.site-header .portal-icon-button .portal-iconify { width: 23px !important; height: 23px !important; }
.site-header .portal-account .portal-iconify { width: 25px !important; height: 25px !important; }
.portal-install .portal-iconify { width: 21px !important; height: 21px !important; }
.site-header [data-icon-motion]:hover .portal-iconify,
.site-header [data-icon-motion]:focus-visible .portal-iconify {
  --iconify-soft: #ffd27a;
  color: #ff970f !important;
  filter: drop-shadow(0 0 5px rgba(255, 151, 15, .78)) drop-shadow(0 0 11px rgba(255, 113, 0, .38));
  transform: translateY(-1px) scale(1.06);
}
.site-header .portal-icon-button[data-icon-motion]:hover,
.site-header .portal-icon-button[data-icon-motion]:focus-visible,
.site-header .portal-install[data-icon-motion]:hover,
.site-header .portal-install[data-icon-motion]:focus-visible {
  border-color: rgba(255, 151, 15, .72) !important;
  background: rgba(255, 126, 0, .1) !important;
  box-shadow: 0 0 0 1px rgba(255, 151, 15, .08), 0 0 16px rgba(255, 112, 0, .2);
}
.site-header [data-icon-motion].is-icon-animating .portal-iconify {
  --iconify-soft: #ffd27a;
  color: #ff970f !important;
}
.site-header .portal-icon-button.is-icon-animating,
.site-header .portal-install.is-icon-animating {
  border-color: rgba(255, 151, 15, .9) !important;
  background: rgba(255, 126, 0, .14) !important;
  box-shadow: 0 0 18px rgba(255, 112, 0, .32);
}
.site-header .portal-account[data-icon-motion]:hover,
.site-header .portal-account[data-icon-motion]:focus-visible,
.site-header .portal-account.is-icon-animating {
  box-shadow: 0 0 0 2px rgba(255, 199, 85, .24), 0 0 20px rgba(255, 126, 0, .62) !important;
}
.site-header .portal-account[data-icon-motion]:hover .portal-iconify,
.site-header .portal-account[data-icon-motion]:focus-visible .portal-iconify,
.site-header .portal-account.is-icon-animating .portal-iconify { color: #fff !important; }

@keyframes portal-dice-roll {
  0% { transform: rotate(0) translateY(0) scale(1); }
  24% { transform: rotate(115deg) translateY(-5px) scale(1.18); filter: drop-shadow(0 0 8px rgba(255, 151, 15, .9)); }
  52% { transform: rotate(275deg) translateY(1px) scale(.94); filter: drop-shadow(0 0 13px rgba(255, 111, 0, .82)); }
  78% { transform: rotate(590deg) translateY(-3px) scale(1.12); filter: drop-shadow(0 0 9px rgba(255, 181, 45, .92)); }
  100% { transform: rotate(720deg) translateY(0) scale(1); }
}
@keyframes portal-fire-on {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 3px rgba(255, 95, 87, .45)); }
  28% { transform: translateY(-2px) rotate(-4deg) scale(1.13); filter: drop-shadow(0 0 9px rgba(255, 117, 35, .95)); }
  55% { transform: translateY(0) rotate(3deg) scale(1.04); filter: drop-shadow(0 0 6px rgba(255, 190, 35, .85)); }
  78% { transform: translateY(-1px) rotate(-2deg) scale(1.1); filter: drop-shadow(0 0 10px rgba(255, 77, 46, .95)); }
}
@keyframes portal-grid-pop {
  0% { transform: scale(1) rotate(0); }
  45% { transform: scale(.76) rotate(90deg); }
  72% { transform: scale(1.16) rotate(180deg); }
  100% { transform: scale(1) rotate(180deg); }
}
@keyframes portal-menu-snap {
  0%, 100% { transform: scaleX(1); }
  38% { transform: scaleX(.62) scaleY(1.15); }
  70% { transform: scaleX(1.12) scaleY(.92); }
}
@keyframes portal-theme-spin { to { transform: rotate(360deg) scale(1.05); } }
@keyframes portal-download-drop {
  0% { transform: translateY(0); }
  45% { transform: translateY(5px) scale(.92); }
  68% { transform: translateY(-2px) scale(1.08); }
  100% { transform: translateY(0); }
}
@keyframes portal-book-open {
  0%, 100% { transform: perspective(80px) rotateY(0); }
  50% { transform: perspective(80px) rotateY(-28deg) scale(1.08); }
}
@keyframes portal-people-pulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18); }
  68% { transform: scale(.96); }
}
@keyframes portal-user-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px) scale(1.08); }
  70% { transform: translateY(1px) scale(.98); }
}
.is-icon-animating[data-icon-motion="dice"] .portal-iconify { animation: portal-dice-roll .58s cubic-bezier(.2,.75,.24,1); }
.is-icon-animating[data-icon-motion="flame"] .portal-iconify { animation: portal-fire-on .7s ease-in-out 2; }
.is-icon-animating[data-icon-motion="grid"] .portal-iconify { animation: portal-grid-pop .48s ease-out; }
.is-icon-animating[data-icon-motion="menu"] .portal-iconify { animation: portal-menu-snap .42s ease-out; }
.is-icon-animating[data-icon-motion="theme"] .portal-iconify { animation: portal-theme-spin .5s ease-out; }
.is-icon-animating[data-icon-motion="download"] .portal-iconify { animation: portal-download-drop .52s ease-out; }
.is-icon-animating[data-icon-motion="book"] .portal-iconify { animation: portal-book-open .55s ease-out; }
.is-icon-animating[data-icon-motion="people"] .portal-iconify { animation: portal-people-pulse .5s ease-out; }
.is-icon-animating[data-icon-motion="user"] .portal-iconify { animation: portal-user-bounce .48s ease-out; }

.portal-color-icon__glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-color-icon__glyph > * { vector-effect: non-scaling-stroke; }

/* Header icons get one small secondary-colour detail; sidebar icons stay pure outline. */
.portal-color-icon__accent {
  fill: var(--icon-accent);
  stroke: #2b2432;
  stroke-width: 1;
}

a:hover .portal-color-icon,
button:hover .portal-color-icon,
a:focus-visible .portal-color-icon,
button:focus-visible .portal-color-icon {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3));
  transform: translateY(-1px) scale(1.05);
}

.portal-sidebar__icon {
  display: grid !important;
  place-items: center;
  width: 24px !important;
  min-width: 24px;
  height: 26px;
  flex: 0 0 24px !important;
  overflow: visible;
  color: inherit !important;
}

.portal-sidebar__icon .portal-color-icon { width: 20px; height: 20px; }
.portal-sidebar a.is-active .portal-color-icon {
  filter: drop-shadow(0 2px 5px rgba(255, 189, 62, .32));
  transform: scale(1.08);
}
.portal-sidebar a.is-active .portal-color-icon--blue,
.portal-sidebar a.is-active .portal-color-icon--mint,
.portal-sidebar a.is-active .portal-color-icon--coral,
.portal-sidebar a.is-active .portal-color-icon--violet { color: #ffbd3e !important; }
.portal-sidebar a,
.portal-sidebar__category-placeholder { overflow: visible; }

.site-header .portal-icon-button .portal-color-icon { width: 21px !important; height: 21px !important; }
.site-header .portal-account .portal-color-icon { width: 23px !important; height: 23px !important; }
.portal-install .portal-color-icon { width: 20px !important; height: 20px !important; }
.portal-search__icon .portal-color-icon { width: 19px; height: 19px; }
.portal-game-control .portal-color-icon { width: 20px !important; height: 20px !important; }
.portal-account-avatar .portal-color-icon,
.portal-account-avatar-choice .portal-color-icon { width: 24px !important; height: 24px !important; }
.portal-site-footer__play-icon .portal-color-icon { width: 20px; height: 20px; }

html.portal-light .portal-color-icon { filter: drop-shadow(0 1px 1px rgba(39, 31, 48, .15)); }
html.portal-light a:hover .portal-color-icon,
html.portal-light button:hover .portal-color-icon { filter: drop-shadow(0 3px 4px rgba(45, 31, 51, .2)); }

@media (min-width: 1200px) {
  .portal-sidebar a,
  .portal-sidebar__category-placeholder { padding-right: 8px; padding-left: 8px; }
  .portal-sidebar a > span.portal-sidebar__icon,
  .portal-sidebar__category-placeholder > span.portal-sidebar__icon { flex-basis: 24px !important; }
}

@media (max-width: 767px) {
  .site-header .portal-icon-button .portal-iconify { width: 21px !important; height: 21px !important; }
  .portal-install .portal-iconify { width: 18px !important; height: 18px !important; }
  .site-header .portal-icon-button .portal-color-icon { width: 20px !important; height: 20px !important; }
  .portal-install .portal-color-icon { width: 19px !important; height: 19px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-color-icon,
  .portal-iconify { transition: none; animation: none !important; }
  a:hover .portal-color-icon,
  button:hover .portal-color-icon { transform: none; }
}