/* DFHubVN ocean-galaxy theme */
:root {
  --bg-1: #091a28; --bg-2: #10283a;
  --panel: rgba(17, 39, 56, .94); --panel-soft: rgba(24, 51, 69, .94);
  --line: rgba(105, 202, 225, .2); --text: #edf8f7; --muted: #a9c3ca;
  --cyan: #68d7e8; --purple: #80d9ef; --orange: #f2d48d;
  --green: #71dbc2; --red: #ff91b5;
  --shadow: 0 22px 52px rgba(1, 12, 22, .38);
}
html { color-scheme: dark; }
body {
  color: #edf8f7 !important;
  background-color: #081a29 !important;
  background-image: linear-gradient(rgba(5, 19, 31, .3), rgba(7, 24, 37, .48)), url('assets/dfhubvn-tactical-overlay.svg?v=20261005'), url('assets/dfhubvn-ocean-galaxy.webp?v=20261005') !important;
  background-position: center top, center top, center top !important;
  background-size: cover, cover, cover !important;
  background-attachment: fixed, fixed, fixed !important;
}
body::before { background-image: radial-gradient(rgba(119, 223, 239, .09) .7px, transparent .7px) !important; background-size: 30px 30px !important; mask-image: linear-gradient(to bottom, #0007, transparent 78%) !important; }
.page-bg { opacity: 0 !important; }

.site-header, .sidebar, .category-panel {
  color: #edf8f7 !important; background: rgba(10, 29, 44, .93) !important;
  border-color: rgba(98, 192, 216, .24) !important; box-shadow: 0 10px 32px rgba(0, 9, 18, .3) !important;
}
.brand-name { color: #effafa !important; text-transform: none !important; letter-spacing: .025em !important; }
.brand-wrap small, .category-panel small { color: #adc6cf !important; }
.brand-main::before { filter: drop-shadow(0 0 11px rgba(90, 218, 240, .38)) !important; }
.menu-trigger { color: #8fe5ed !important; border-color: rgba(105, 205, 224, .35) !important; background: rgba(26, 57, 74, .92) !important; border-radius: 12px !important; }
.menu-lines span { background: linear-gradient(90deg, #72ddec, #b4eff0) !important; }

.primary-btn, .secondary-btn, .ghost-btn, .promo-button, .auth-submit, .social-btn, .account-cta {
  color: #06202c !important; border: 1px solid rgba(188, 248, 248, .7) !important;
  border-radius: 12px !important; background: linear-gradient(115deg, #62d9e6, #76cfe0 58%, #9ae8dc) !important;
  box-shadow: 0 8px 22px rgba(26, 158, 187, .2) !important;
}
.primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover, .promo-button:hover, .auth-submit:hover, .social-btn:hover, .account-cta:hover {
  color: #061c29 !important; border-color: #e0ffff !important; filter: brightness(1.08) !important;
  background: linear-gradient(115deg, #8ae9ef, #91e2eb 58%, #b9f2df) !important;
}
.promo-banner {
  border-color: rgba(93, 191, 214, .34) !important;
  background: linear-gradient(120deg, #0c2539, #12374d 58%, #164356) !important;
  box-shadow: 0 24px 70px rgba(0, 8, 19, .4), inset 0 0 0 1px rgba(160, 236, 246, .045) !important;
}
.promo-banner::before { background: radial-gradient(ellipse at 12% 10%, rgba(78, 207, 226, .17), transparent 40%), linear-gradient(100deg, rgba(7, 25, 40, .45), rgba(11, 40, 57, .24) 55%, rgba(14, 46, 60, .06)) !important; }
.promo-banner::after { background: repeating-linear-gradient(0deg, rgba(207,248,250,.012) 0, rgba(207,248,250,.012) 1px, transparent 1px, transparent 6px) !important; }
.promo-copy, .promo-copy p, .promo-copy h1, .promo-copy .promo-metrics, .promo-copy .promo-trust-copy { color: #f0fbf8 !important; }
.promo-kicker, .eyebrow, .shop-eyebrow { color: #8fe8eb !important; }
.promo-copy h1 em { background: linear-gradient(95deg, #8cecf0, #c0f2e8 64%, #f3e4b4) !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 0 !important; }
.promo-trust-copy>span, .promo-trust-copy strong { color: #d7f4f1 !important; }
.promo-visual { background: linear-gradient(140deg, #b9eaf4, #4ca9cf 55%, #174b75) !important; }
.promo-visual::before { background: linear-gradient(90deg, rgba(8,26,40,.08), rgba(11,39,55,.04)) !important; }

.bottom-dock { color: #d9eeef !important; background: rgba(11, 31, 47, .96) !important; border-color: rgba(98, 192, 216, .24) !important; box-shadow: 0 -8px 30px rgba(0, 9, 18, .3) !important; }
.dock-item.active, .dock-item:hover { color: #86e1eb !important; }
.dock-item.center-action { color: #06202c !important; background: linear-gradient(135deg, #62d9e6, #80d8da) !important; border-color: #c4f6f4 !important; }
.site-footer, .page-shell .site-footer { color: #9ebdc4 !important; border-color: rgba(98, 192, 216, .18) !important; }

.catalog-block, .shop-detail, .subpage-head, .digital-service, .service-flow article, .event-item, .wheel-panel, .checkin-panel, .prize-card, .drama-feature, .news-article, .quick-news article, .shop-game-card, .shop-service-card, .shop-service-content, .bypass-console, .bypass-install, .bypass-steps {
  color: #eaf7f4 !important; border-color: rgba(99, 184, 204, .25) !important;
  background-color: rgba(15, 37, 53, .93) !important;
  box-shadow: inset 0 1px 0 rgba(225, 250, 250, .055), 0 14px 36px rgba(0, 9, 20, .27) !important;
}
.shop-game-card, .shop-service-card, .digital-service, .event-item, .prize-card, .service-flow article, .shop-product-tile, .valorant-vp-package {
  border-radius: 14px !important; background-image: linear-gradient(145deg, rgba(25,53,70,.96), rgba(13,34,50,.98) 65%, rgba(16,43,56,.98)) !important;
}
.shop-game-card strong, .shop-service-card strong, .shop-product-info h4, .digital-service h3, .event-item h3 { color: #effaf5 !important; }
.shop-game-card small, .shop-price-note, .service-description, .shop-product-info p { color: #afc8cc !important; }
.shop-game-card:before, .shop-service-card:before, .digital-service:after, .event-item:after, .prize-card:after { background: linear-gradient(90deg, #54c5dd, #88e4dd, #f2d48d) !important; }
.shop-search, input, select, textarea { color: #edf8f7 !important; border-color: rgba(105, 192, 208, .33) !important; background-color: rgba(9, 28, 43, .92) !important; }
.shop-search input { background: transparent !important; }
.shop-search input::placeholder, input::placeholder, textarea::placeholder { color: #91adb4 !important; }
.shop-search:focus-within, input:focus, select:focus, textarea:focus { border-color: #70d8e4 !important; box-shadow: 0 0 0 3px rgba(93, 205, 222, .13) !important; }
.shop-all, .shop-back, .shop-price-reference, .text-link, .news-read { color: #85dfe7 !important; }
.shop-price, .shop-product-price, .robux-cost strong, .valorant-vp-package>strong, .shop-price-item strong { color: #f0d282 !important; }
.shop-game-card:hover, .shop-game-card.is-selected, .shop-service-card:hover, .shop-service-card.is-selected { color: #efffff !important; border-color: #75d9e4 !important; background: linear-gradient(125deg, #17617a, #167b8b 62%, #318d87) !important; box-shadow: 0 9px 28px rgba(30, 160, 185, .18) !important; }
.section-title-row h2, .shop-section-heading h1, .news-heading h1 { color: #f0faf7 !important; }
.category-header h2, .category-item, .category-list .text, .category-item .arrow { color: #deeff0 !important; }
.category-item:hover, .category-item.active { color: #a8f0ef !important; background: linear-gradient(110deg, rgba(37,113,131,.42), rgba(35,82,100,.48)) !important; }
.shop-section-heading, .news-heading { border-color: rgba(99, 184, 204, .22) !important; }
.shop-service-chevron { width: 20px !important; height: 20px !important; object-fit: contain; transition: transform .18s ease; }
.shop-service-toggle[aria-expanded="true"] .shop-service-chevron { transform: rotate(180deg); }

/* Make the galaxy artwork visible while preserving readable surfaces. */
.shop-price, .shop-product-price, .robux-cost strong, .valorant-vp-package>strong, .shop-price-item strong { color: #8fe8f4 !important; }
.shop-game-card:before, .shop-service-card:before, .digital-service:after, .event-item:after, .prize-card:after { background: linear-gradient(90deg, #4fc7eb, #73e4ef, #a8dbff) !important; }
.promo-copy h1 em { background: linear-gradient(95deg, #70e2f4, #b5f3fa 64%, #c5ddff) !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.promo-banner { background: linear-gradient(120deg, rgba(8, 28, 50, .91), rgba(10, 57, 85, .84) 58%, rgba(14, 75, 104, .78)) !important; }
.promo-banner::before { background: radial-gradient(ellipse at 12% 10%, rgba(78, 207, 226, .19), transparent 40%), linear-gradient(100deg, rgba(7, 25, 40, .28), rgba(11, 40, 57, .12) 55%, rgba(14, 46, 60, .02)) !important; }
.promo-visual { background: linear-gradient(140deg, #b9eaf4, #4ca9cf 55%, #174b75) !important; box-shadow: 0 0 44px rgba(76, 191, 231, .22) !important; }
.category-item:hover, .category-item.active { background: linear-gradient(110deg, rgba(37, 113, 151, .4), rgba(35, 82, 125, .45)) !important; }

/* Carry the ocean tactical map texture into the three hero actions. */
.promo-actions--three .promo-button {
  color: #e9fbff !important;
  border-color: rgba(119, 221, 248, .68) !important;
  background-color: #0d3554 !important;
  background-image: linear-gradient(110deg, rgba(7, 39, 65, .76), rgba(16, 85, 119, .68)), url('assets/dfhubvn-tactical-overlay.svg?v=20261005-buttons') !important;
  background-position: center, 84% 39% !important;
  background-size: cover, 360px 225px !important;
  box-shadow: inset 0 1px 0 rgba(211, 249, 255, .16), 0 8px 24px rgba(0, 12, 30, .26), 0 0 18px rgba(52, 177, 220, .1) !important;
}
.promo-actions--three .promo-button::before { color: #baf2ff !important; }
.promo-actions--three .promo-button--community svg { stroke: #a8efff !important; filter: drop-shadow(0 0 6px rgba(91, 206, 244, .34)) !important; }
.promo-actions--three .promo-button--vyage img { filter: brightness(1.22) drop-shadow(0 0 7px rgba(91, 206, 244, .34)) !important; }
.promo-actions--three .promo-button:hover {
  color: #f5fdff !important;
  border-color: #b0efff !important;
  background-image: linear-gradient(110deg, rgba(10, 65, 99, .7), rgba(22, 115, 151, .62)), url('assets/dfhubvn-tactical-overlay.svg?v=20261005-buttons') !important;
  box-shadow: inset 0 1px 0 rgba(230, 251, 255, .22), 0 8px 24px rgba(0, 12, 30, .3), 0 0 22px rgba(68, 195, 233, .2) !important;
}

/* Bright cartoon coastal scene. Keep movement on desktop only. */
.promo-visual { isolation:isolate !important; background:url('assets/dfhubvn-cartoon-coast-v2.webp?v=20261005') center 56%/cover no-repeat !important; box-shadow:inset 0 0 0 1px rgba(184,239,255,.25),0 0 44px rgba(52,167,219,.18) !important; }
.promo-visual::before { z-index:2 !important; background:linear-gradient(90deg,rgba(4,35,64,.28),rgba(6,48,77,.06) 44%,transparent 75%),linear-gradient(0deg,rgba(4,32,54,.18),transparent 44%) !important; }
.promo-visual::after { content:none !important; display:none !important; background:none !important; }
.promo-visual .promo-squad { position:absolute; z-index:3; right:-7%; bottom:-6%; width:min(90%,760px); height:auto; object-fit:contain; transform-origin:60% 82%; filter:drop-shadow(0 15px 24px rgba(7,46,71,.22)); will-change:transform; }
.promo-wind { display:none; }
@media (min-width:981px) {
  .promo-visual .promo-squad { animation:dfhubvn-squad-breeze 9s cubic-bezier(.42,0,.58,1) infinite; }
  .promo-wind { position:absolute; z-index:2; display:block; width:156px; height:48px; pointer-events:none; opacity:0; transform:rotate(-18deg); animation:dfhubvn-wind-drift 6.4s cubic-bezier(.42,0,.58,1) infinite; }
  .promo-wind::before,.promo-wind::after { content:""; position:absolute; right:0; height:1.5px; border-radius:99px; background:linear-gradient(90deg,transparent,rgba(224,250,255,.7)); box-shadow:0 0 9px rgba(186,242,255,.45); }
  .promo-wind::before { top:16px; width:100%; }
  .promo-wind::after { top:29px; width:67%; }
  .promo-wind--one { top:18%; left:44%; }
  .promo-wind--two { top:37%; left:28%; width:110px; animation-delay:2s; }
}
@keyframes dfhubvn-squad-breeze {
  0%,100% { transform:translate3d(0,2px,0) rotate(-.22deg); }
  50% { transform:translate3d(-4px,-6px,0) rotate(.34deg); }
}
@keyframes dfhubvn-wind-drift {
  0% { opacity:0; transform:translate3d(-20px,6px,0) rotate(-18deg); }
  38% { opacity:.75; }
  72% { opacity:.58; }
  100% { opacity:0; transform:translate3d(32px,-8px,0) rotate(-18deg); }
}
@media (prefers-reduced-motion:reduce) { .promo-visual .promo-squad { animation:none !important; transform:none !important; opacity:1 !important; } .promo-wind { animation:none !important; display:none !important; } }