/* GEGABYTE Premium — separate optional stylesheet */
:root { --lime:#e5ff00; --purple:#b84bff; --cyan:#35d9ff; }
body {background:radial-gradient(ellipse at 50% 0%,#20114a 0%,#0b0a22 53%,#09091b 100%);}
.topbar {background:rgba(11,9,31,.97);border-bottom:2px solid #c84aff;box-shadow:0 3px 18px #bc31ff55;}
.nav-wrap {max-width:1500px;gap:30px;}
.topbar nav a {position:relative;transition:color .2s ease;}
.topbar nav a:hover {color:#e5ff00;}
.topbar nav a::after {content:"";position:absolute;left:0;right:100%;bottom:-12px;height:2px;background:#e5ff00;box-shadow:0 0 10px #e5ff00;transition:right .2s;}
.topbar nav a:hover::after {right:0;}
.search-icon,.login-link,.cart-link {border:1px solid #44316d;background:#181130;}
.hero {position:relative;border-bottom:2px solid #ad42ff;box-shadow:0 9px 35px #8b27cf2b;}
.hero-inner {max-width:1500px;}
.hero-copy {position:relative;}
.hero-copy::before {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0% 45%,#682bb51c,transparent 75%);}
.hero .eyebrow {color:#fff;text-shadow:2px 3px #0b071b;}
.hero h1 {letter-spacing:-.012em;text-shadow:3px 5px #060319,0 0 24px #ddff0038;}
.hero-desc {color:#f1ebff;}
.hero-feature {isolation:isolate;}
.hero-feature::after {content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,#10102a 0%,#10102a9e 7%,transparent 34%);}
.hero-feature .ribbon {border:2px solid #ffb6ee;border-radius:6px;box-shadow:0 0 20px #f938caaa,3px 4px 0 #4b0a59;}
.hero-game-name {color:#ffdf00;-webkit-text-stroke:1px #6215b5;background:linear-gradient(150deg,#261050ed,#120c36ed);border:3px solid #e24bff;border-radius:18px;padding:15px 20px;box-shadow:0 0 0 4px #120725b8,0 0 28px #d03bffb5,inset 0 0 20px #6b1ce2;transform:rotate(-2deg);text-shadow:4px 5px #170647,0 0 12px #ff61ec;}
.btn {transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;}
.btn.lime {box-shadow:0 0 0 2px #b3d400,0 0 19px #d9ff008a;}
.btn.outline {box-shadow:0 0 0 1px #ff71ff,0 0 18px #e63bff66;}
.btn:hover {transform:translateY(-3px);}
.quick-grid {gap:14px;}
.quick-grid a {position:relative;overflow:hidden;border-radius:15px;min-height:95px;box-shadow:inset 0 0 15px #9039ed1a,0 0 14px #ae37ff40;transition:transform .2s,box-shadow .2s;}
.quick-grid a:hover {transform:translateY(-4px);box-shadow:0 0 23px #c44bff8c;}
.quick-grid a span {filter:drop-shadow(0 0 7px #e35bff77);}
.section-title {margin-top:30px;margin-bottom:20px;}
.section-title h2 {letter-spacing:.015em;text-shadow:0 0 13px #b34cff44;}
.section-title a {border:1px solid #536bd0;border-radius:100px;padding:9px 16px;background:#111332;transition:border-color .2s,box-shadow .2s;}
.section-title a:hover {border-color:#40d9ff;box-shadow:0 0 13px #3cdcff77;}
.game-grid {gap:18px;}
.game-art {border:2px solid #bd49ff;border-radius:15px;box-shadow:0 0 0 1px #6d2699,0 0 15px #c041ff55;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.game-art img {transition:transform .35s ease;}
.game-card:hover .game-art {transform:translateY(-5px);border-color:#e99bff;box-shadow:0 0 25px #cb47ffb0;}
.game-card:hover .game-art img {transform:scale(1.055);}
.game-card strong {font-size:15px;letter-spacing:.01em;}
.game-pill {box-shadow:0 0 10px #e5ff0066;}
.panel {border-radius:19px;box-shadow:0 0 17px #b840f63b;}
.promo-grid .panel {transition:box-shadow .2s;}
.promo-grid .panel:hover {box-shadow:0 0 23px #b840f66e;}
.newsletter {box-shadow:0 0 20px #b840f653;}
@media (min-width:801px) {
 .hero-inner {min-height:455px;grid-template-columns:46% 54%;}
 .hero-copy {padding:50px 14px 46px 48px;display:flex;flex-direction:column;justify-content:center;}
 .hero-feature {min-height:455px;background-position:center 44%;padding:36px 38px;}
 .hero-game-name {font-size:clamp(42px,5vw,75px);max-width:340px;margin:15px 0 24px;}
 .hero .eyebrow {font-size:clamp(27px,2.7vw,38px);}
 .hero h1 {font-size:clamp(44px,4.3vw,70px);}
}
@media (max-width:800px) {
 .hero-feature {background-position:center 42%;}
 .hero-game-name {font-size:clamp(35px,8vw,62px);max-width:330px;padding:12px 18px;}
 .hero-copy {padding:35px 22px;}
 .game-grid {gap:13px;}
 .quick-grid a {min-height:78px;}
}
@media (max-width:520px) {
 .hero-feature {min-height:275px;}
 .hero-game-name {max-width:230px;font-size:39px;}
 .hero-feature .ribbon {font-size:16px;}
 .game-grid {gap:11px;}
 .game-card strong {font-size:13px;}
 .section-title a {padding:7px 9px;}
}
@media (prefers-reduced-motion:reduce) { .game-art,.game-art img,.btn,.quick-grid a,.topbar nav a,.topbar nav a::after {transition:none!important;} }

/* GEGABYTE Premium Category Icons */

.quick-grid > a > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 16px;
    background: rgba(174, 73, 255, 0.12);
    border: 1px solid rgba(174, 73, 255, 0.35);
    transition: all 0.25s ease;
}

.quick-grid > a > span .gb-icon {
    width: 34px;
    height: 34px;
    stroke-width: 1.8;
}

/* Individual icon colours */

.quick-grid > a:nth-child(1) .gb-icon {
    color: #ce67ff;
}

.quick-grid > a:nth-child(2) .gb-icon {
    color: #ffcc00;
}

.quick-grid > a:nth-child(3) .gb-icon {
    color: #00d9ff;
}

.quick-grid > a:nth-child(4) .gb-icon {
    color: #ff64c8;
}

/* Hover effects */

.quick-grid > a:hover > span {
    transform: translateY(-3px) scale(1.06);
    background: rgba(174, 73, 255, 0.22);
    box-shadow: 0 0 22px rgba(174, 73, 255, 0.35);
}

/* Mobile adjustments */

@media (max-width: 600px) {
    .quick-grid > a > span {
        width: 52px;
        height: 52px;
    }

    .quick-grid > a > span .gb-icon {
        width: 28px;
        height: 28px;
    }
}
 
/* GEGABYTE Arcade Card Improvements */