/* Spider Solitaire 444 UI v1.3.0: local SVG icons, lite video, footer, privacy page. */
.ui-icon {
  --ui-icon-url: none;
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background-color: currentColor;
  -webkit-mask: var(--ui-icon-url) center / contain no-repeat;
  mask: var(--ui-icon-url) center / contain no-repeat;
  vertical-align: middle;
  pointer-events: none;
}
.ui-icon-menu { --ui-icon-url: url('/icons/menu.svg'); }
.ui-icon-undo { --ui-icon-url: url('/icons/undo.svg'); }
.ui-icon-moves { --ui-icon-url: url('/icons/moves.svg'); }
.ui-icon-new-deal { --ui-icon-url: url('/icons/new-deal.svg'); }
.ui-icon-replay { --ui-icon-url: url('/icons/replay.svg'); }
.ui-icon-help { --ui-icon-url: url('/icons/help.svg'); }
.ui-icon-statistics { --ui-icon-url: url('/icons/statistics.svg'); }
.ui-icon-settings { --ui-icon-url: url('/icons/settings.svg'); }
.ui-icon-home { --ui-icon-url: url('/icons/home.svg'); }
.ui-icon-cards-1 { --ui-icon-url: url('/icons/cards-1.svg'); }
.ui-icon-cards-2 { --ui-icon-url: url('/icons/cards-2.svg'); }
.ui-icon-cards-4 { --ui-icon-url: url('/icons/cards-4.svg'); }
.ui-icon-close { --ui-icon-url: url('/icons/close.svg'); }
.ui-icon-play { --ui-icon-url: url('/icons/play.svg'); }

#navport .ui-icon {
  width: 24px;
  height: 24px;
  margin: 15px auto;
  color: #fff;
}
#navland .ui-icon,
#navland a.sidenav-trigger .ui-icon {
  width: 28px;
  height: 28px;
  margin: 13px auto;
  color: #fff;
}
.sidenav li > a > .ui-icon {
  float: left;
  width: 24px;
  height: 24px;
  margin: 12px 32px 0 0;
  color: rgba(0, 0, 0, .54);
}
.modal h4 .modal-close .ui-icon {
  width: 24px;
  height: 24px;
  color: #4d5c6e;
}
.player-rank {
  display: inline-block;
  width: 30px;
  height: 46px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 600;
  line-height: 46px;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 -4 164 168' preserveAspectRatio='xMinYMid' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 67.64L31.15 120.56L5.53 120.56L11.3 140.53L5.53 160L154.98 159.25L149.7 140.53L154.98 120.56L128.85 120.56L160 67.64L119.81 0L40.19 0L0 67.64Z' fill='rgb(249,168,37)' stroke='rgb(33,33,33)' stroke-width='4' stroke-opacity='0.8' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center;
}
#navland .player-rank { height: 50px; line-height: 50px; }
@media (max-width: 767px) {
  #navport .player-rank { line-height: 2.4em; }
}

.art-wrapper .art-content .game-figure picture,
.art-wrapper .art-content .game-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.youtube-lite {
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #172f31;
  box-shadow: 0 5px 16px rgba(34, 79, 81, .12);
}
.youtube-lite-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.youtube-lite-button picture,
.youtube-lite-button img,
.youtube-lite iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.youtube-lite-button img {
  object-fit: cover;
  filter: brightness(.78);
  transition: filter .2s ease;
}
.youtube-lite-button:hover img,
.youtube-lite-button:focus-visible img { filter: brightness(.62); }
.youtube-lite-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 52px;
  border-radius: 14px;
  color: #fff;
  background: #ce1312;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .32);
}
.youtube-lite-play .ui-icon { width: 28px; height: 28px; margin-left: 3px; }
.youtube-lite iframe { border: 0; }

.art-wrapper footer.site-footer .f-content {
  padding: 1.5rem 1rem 1rem;
  margin: 0 auto;
  width: 64%;
  max-width: 980px;
}
.footer-links,
.footer-games {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem 1rem;
  margin-bottom: .9rem;
}
.footer-links a,
.footer-games a {
  color: #224f51;
  font-weight: 600;
  text-decoration: none;
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-games a:hover,
.footer-games a:focus-visible {
  color: #34485e;
  text-decoration: underline;
}
.footer-games {
  padding-top: .75rem;
  border-top: 1px solid rgba(52, 72, 94, .16);
}
.site-footer .share-box {
  display: flex;
  justify-content: center;
  margin: .8rem 0;
}
.site-footer .share-box ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}
.site-footer .share-box li {
  float: none;
  width: 32px;
  padding: 0;
}
.art-wrapper footer.site-footer .f-content .copy {
  margin: 0 auto;
  width: 100%;
  padding-bottom: .25rem;
  color: #34485e;
  font-size: .9rem;
  text-align: center;
}

.privacy-page { user-select: text; }
.privacy-page .art-wrapper { min-height: 100%; border-top: 0; padding-top: 1px; }
.privacy-page .privacy-list {
  margin: 0 0 1rem 1.3rem;
  color: #3e4d5a;
  line-height: 1.65;
}
.privacy-page .privacy-list li { margin-bottom: .45rem; }
.privacy-page .privacy-meta { color: #607080; font-size: .95rem; }

@media (max-width: 768px) {
  .art-wrapper footer.site-footer .f-content { width: 100%; }
  .footer-links, .footer-games { gap: .5rem .8rem; }
}
