/* Presentation of the three homepage VIP frames only. */
#gkCategories > .gkv-luxe-heading { display: none; }

@property --gk-vip-gold-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes gkVipGoldSweep {
  from { --gk-vip-gold-angle: 0deg; }
  to { --gk-vip-gold-angle: 360deg; }
}
@keyframes gkVipGoldBreath {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (min-width: 901px) {
  #gkCategories {
    box-sizing: border-box;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 26px;
    padding: 28px 24px 60px;
    background: linear-gradient(145deg, #171717, #090909);
    border: 1px solid #b18b3233;
    border-radius: 22px;
    box-shadow: 0 12px 30px #0002;
    overflow: visible;
    align-items: start;
  }
  #gkCategories > .gkv-luxe-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 0 6px;
    color: #e2bd68;
    font: 700 22px/1.6 Tahoma, Arial, sans-serif;
    text-align: center;
  }
  #gkCategories > .gkv-luxe-heading::before,
  #gkCategories > .gkv-luxe-heading::after {
    content: '';
    width: min(15%, 130px);
    height: 1px;
    background: #b39550;
    opacity: .65;
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot] {
    --gk-vip-rim: #d6b369;
    --gk-vip-shade: #171717;
    --gk-vip-ink: #e9c67b;
    --gk-vip-highlight: #242424;
    --gk-vip-face: #101010;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    height: 400px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 1px solid #b49652;
    border-radius: 18px;
    background: #101010 !important;
    background-image: none !important;
    overflow: visible !important;
    box-shadow: 0 8px 20px #0005;
    filter: none;
    transform: none;
    transition: box-shadow .25s ease;
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot]:hover {
    transform: none;
    filter: none;
    box-shadow: 0 10px 26px #0006, 0 0 12px #d3a64c1a;
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot][hidden] { display: none !important; }
  #gkCategories > .gk-category-card[data-gk-vip-slot]::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 3;
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 2px;
    border: 0;
    border-radius: inherit;
    background: conic-gradient(from var(--gk-vip-gold-angle), transparent 0deg, transparent 262deg, #a77a2b 291deg, #e9c571 317deg, #fff2be 334deg, #ffe49a 340deg, transparent 356deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 4px #e9bc5b90);
    transform: none;
    pointer-events: none;
    animation: gkVipGoldSweep 4s linear infinite, gkVipGoldBreath 4s ease-in-out infinite;
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot='2']::before { animation-delay: -1.3s, -1.3s; }
  #gkCategories > .gk-category-card[data-gk-vip-slot='3']::before { animation-delay: -2.6s, -2.6s; }
  #gkCategories > .gk-category-card[data-gk-vip-slot]::after {
    content: 'VIP';
    display: block !important;
    position: absolute;
    z-index: 4;
    inset: 14px 14px auto auto;
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 4px 12px;
    margin: 0;
    border: 1px solid #c9a85c;
    border-radius: 20px;
    background: #0b0b0bd9;
    color: #e7c372;
    font: 700 12px/1.4 Arial, sans-serif;
    text-align: center;
    transform: none;
    pointer-events: none;
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot] [data-vip-cover] {
    inset: 2px;
    z-index: 1;
    border-radius: 15px;
    overflow: hidden;
    background: linear-gradient(145deg, #202020, #0b0b0b);
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot] [data-vip-cover]:empty::after { color: #cfb478; font-size: 14px; }
  #gkCategories > .gk-category-card[data-gk-vip-slot] .gkv-cover,
  #gkCategories > .gk-category-card[data-gk-vip-slot] .gkv-cover > img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot] .gkv-cover-controls { right: 10px; bottom: 12px; }
  #gkCategories > .gk-category-card[data-gk-vip-slot] .gkv-card-tint { display: none !important; }
  #gkCategories > .gk-category-card[data-gk-vip-slot] .gkv-card-copy {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    bottom: auto; left: 0; right: auto;
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot] > .gk-category-content {
    position: static !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    overflow: visible;
    pointer-events: none;
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot] [data-vip-open] {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    left: 50%; right: auto; top: auto; bottom: -30px;
    width: 60px; height: 60px; min-width: 0; min-height: 0;
    padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #d6b369;
    border-radius: 50%;
    background: linear-gradient(145deg, #242424, #0c0c0c);
    color: #e9c67b;
    box-shadow: inset 0 0 0 2px #ffffff08, 0 4px 10px #0005;
    transform: translateX(-50%);
    transform-origin: center;
    pointer-events: auto;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  #gkCategories > .gk-category-card[data-gk-vip-slot] [data-vip-open]::before { width: 26px; height: 26px; }
  #gkCategories > .gk-category-card[data-gk-vip-slot] [data-vip-open]:hover { transform: translateX(-50%) scale(1.04); box-shadow: 0 0 12px #d6b36935, 0 4px 10px #0005; }
  #gkCategories > .gk-category-card[data-gk-vip-slot] [data-vip-open]:focus-visible { outline: 2px solid #f2d38c; outline-offset: 5px; }
  #gkCategories > .gk-category-card[data-gk-vip-slot] .gkv-card-logo { padding: 12%; background: transparent; }
}

@media (min-width: 901px) and (max-width: 950px) {
  #gkCategories { column-gap: 20px; padding-right: 18px; padding-left: 18px; }
  #gkCategories > .gk-category-card[data-gk-vip-slot] { height: 390px; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  #gkCategories > .gk-category-card[data-gk-vip-slot]::before { animation: none; opacity: .8; }
  #gkCategories > .gk-category-card[data-gk-vip-slot],
  #gkCategories > .gk-category-card[data-gk-vip-slot] [data-vip-open] { transition: none; }
}