/* Online Game Hub: dedicated homepage stylesheet. No competing homepage styles. */
:root{color-scheme:dark;--teal:#13b7a9;--bg:#151b25;--panel:#242c39;--gold:#f5c65d}
*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.45}
a{color:inherit}button,input{font:inherit}.wrap{width:min(1520px,96%);margin:0 auto}
.site-header{background:#10151e;border-bottom:3px solid var(--teal);position:relative;z-index:10}
.site-header .nav{width:min(1520px,96%);margin:auto;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand.header-logo-link{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.ogh-brand-copy{display:flex;flex-direction:column;gap:3px}.ogh-brand-name{font-weight:800;color:var(--gold);font-size:clamp(20px,2.2vw,28px);line-height:1.1}.ogh-header-subtitle{color:#dbe3e9;letter-spacing:.25px;font-size:clamp(10px,1.1vw,12px)}
.desktop-nav{display:flex;align-items:center;gap:28px}.desktop-nav a{text-decoration:none;font-weight:600;font-size:13px}.desktop-nav a:hover,.mobile-menu a:hover{color:var(--teal)}
.menu-btn{display:none;color:#fff;background:none;border:1px solid #435163;border-radius:8px;padding:6px 12px;font-size:24px;cursor:pointer}.mobile-menu{display:none}
.appyn-hero{background:#102136 url('/assets/images/hero/online-games-hub-banner.webp') center/cover no-repeat;position:relative;text-align:center;border-bottom:1px solid #1cb7aa;padding:64px 16px 57px}
.appyn-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,15,29,.3),rgba(6,19,35,.35),rgba(5,15,29,.3));pointer-events:none}
.appyn-hero-inner{max-width:910px;margin:auto;position:relative;z-index:1}.directory-title{font-size:clamp(32px,4.5vw,55px);font-weight:800;letter-spacing:-.7px;line-height:1.15;margin:0 0 20px;color:#fff}
.ogh-hero-subtitle{font-size:clamp(14px,1.4vw,18px);line-height:1.65;color:#e5edf3;margin:0 auto 30px;max-width:820px}
.directory-search{display:flex;align-items:center;max-width:635px;margin:auto;border-radius:80px;background:#f5f6f8;overflow:hidden;height:51px;box-shadow:0 4px 24px #0005}
#gameSearch{flex:1;min-width:0;height:100%;padding:0 22px;background:transparent;border:0;outline:0;color:#172334;font-size:15px}
#searchBtn{flex-shrink:0;height:43px;margin-right:4px;padding:0 22px;border-radius:50px;border:0;background:var(--teal);color:#fff;font-weight:700;cursor:pointer}
.directory-section{background:#1b222e;padding:0 0 48px}.directory-section>.wrap{width:min(1520px,99%);margin:auto}.latest-games-heading{font-size:20px;padding:18px 8px 13px;margin:0 0 11px;border-bottom:1px solid #343d4a;font-weight:700}
.hybrid-games-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px}
.hybrid-game-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;background:#282f3b;border:1px solid #34404f;border-bottom:2px solid var(--teal);padding:8px 6px 11px;border-radius:11px;min-width:0;transition:transform .15s,border-color .15s}
.hybrid-game-card:hover{transform:translateY(-3px);border-color:var(--teal)}.hybrid-game-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.hybrid-game-card[hidden]{display:none!important}
.hybrid-logo-wrap{display:block;aspect-ratio:1;width:100%;background:#111620;border-radius:9px;overflow:hidden}.hybrid-logo-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.hybrid-game-name{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-weight:750;font-size:clamp(13px,1.05vw,16px);line-height:1.35;color:#fff}
.directory-empty{padding:24px;text-align:center}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
footer{background:#0f151d;border-top:1px solid #2a3944;color:#cad5df;padding:32px 0 18px}footer .wrap{width:min(1150px,94%)}.footer-menus{display:flex;justify-content:center;gap:75px;flex-wrap:wrap}.footer-menus h4{color:#fff;margin:0 0 9px;font-size:14px}.footer-links{display:grid;gap:7px}.footer-links a{font-size:13px;text-decoration:none}.footer-links a:hover{color:var(--teal)}.responsible{text-align:center;margin:23px auto;color:#b8c2cd;font-size:12px}.footer-bottom{border-top:1px solid #25313c;padding-top:15px;display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-size:12px;color:#9eabb7}
@media(max-width:1100px){.hybrid-games-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:780px){.hybrid-games-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.desktop-nav{display:none}.menu-btn{display:block}.mobile-menu.open{display:block;background:#101a26;padding:5px 3% 12px;border-top:1px solid #293847}.mobile-menu a{display:block;padding:12px;text-decoration:none;border-bottom:1px solid #293847}.appyn-hero{padding:47px 14px 43px}}
@media(max-width:540px){.site-header .nav{min-height:75px}.ogh-brand-name{font-size:23px}.ogh-header-subtitle{font-size:10.5px}.appyn-hero{padding:38px 16px 36px}.directory-title{font-size:30px;margin-bottom:14px}.ogh-hero-subtitle{font-size:14px;margin-bottom:22px}.directory-search{height:49px}.hybrid-games-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.hybrid-game-card{padding:6px 5px 9px;gap:7px}.hybrid-game-name{font-size:13.5px}.latest-games-heading{font-size:17px}.footer-menus{gap:30px}}
@media(max-width:340px){.hybrid-game-name{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hybrid-game-card{transition:none}}

/* Compact footer links, adapted from supplied IC7 example */
.ogh-compact-footer{padding:18px 0 12px}
.ogh-compact-footer .ogh-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:0 0 12px}
.ogh-compact-footer .ogh-footer-links a{font-size:12px;color:#c9d2dd;text-decoration:none}
.ogh-compact-footer .ogh-footer-links a:hover,.ogh-compact-footer .ogh-footer-links a:focus-visible{color:var(--teal);text-decoration:underline}
.ogh-compact-footer .responsible{margin:10px auto;font-size:11px;line-height:1.5}
.ogh-compact-footer .footer-bottom{padding-top:10px;gap:8px 16px;font-size:11px}
@media(max-width:540px){.ogh-compact-footer{padding:15px 0 10px}.ogh-compact-footer .ogh-footer-links{gap:7px 13px}.ogh-compact-footer .ogh-footer-links a{font-size:11.5px}.ogh-compact-footer .footer-bottom{font-size:10px}}

/* Corrected source-reference compact footer, scoped to homepage */
.ogh-compact-footer{padding:17px 0 10px!important;border-top:1px solid rgba(255,255,255,.07);background:rgba(3,5,9,.76)}
.ogh-compact-footer .footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:7px 15px;margin:0 0 11px;padding:0}
.ogh-compact-footer .footer-links a{font-size:11.5px;color:rgba(255,255,255,.65);text-decoration:none;white-space:nowrap}
.ogh-compact-footer .footer-links a:hover,.ogh-compact-footer .footer-links a:focus-visible{color:#fff;text-decoration:underline}
.ogh-compact-footer .footer-bottom{padding-top:9px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:10.5px;color:rgba(255,255,255,.45);text-align:center}
@media(max-width:520px){.ogh-compact-footer .footer-links{gap:7px 12px}.ogh-compact-footer .footer-links a{font-size:11px}.ogh-compact-footer .footer-bottom{font-size:10.5px}}
/* Hero image intentionally referenced relative to this CSS, with dark overlay preserving legibility */
html body .appyn-hero{background-color:#0c1b31!important;background-image:linear-gradient(90deg,rgba(3,12,27,.16),rgba(3,12,27,.52) 34%,rgba(3,12,27,.52) 66%,rgba(3,12,27,.16)),url('assets/images/hero/online-games-hub-banner.webp')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important}
html body .appyn-hero:before{background:rgba(2,9,22,.12)!important}

/* FINAL LOCK: screenshot-style responsive gaming hero */
html body .appyn-hero{background:#061729 url('/assets/images/hero/online-games-hub-banner.webp') center center/cover no-repeat!important;min-height:395px;display:flex;align-items:center;justify-content:center;padding:58px 18px 64px!important;border-bottom:1px solid #0ccbbd}
html body .appyn-hero:before{background:linear-gradient(90deg,rgba(3,13,30,.2),rgba(3,13,30,.35) 31%,rgba(3,13,30,.35) 69%,rgba(3,13,30,.2))!important}
html body .appyn-hero-inner{width:min(860px,100%);max-width:860px}
html body .directory-title{font-size:clamp(32px,4.1vw,58px);margin-bottom:17px}
html body .ogh-hero-subtitle{max-width:770px;font-size:clamp(14px,1.33vw,18px);line-height:1.55;margin-bottom:26px}
html body .directory-search{max-width:690px;height:57px;box-shadow:0 10px 35px rgba(0,0,0,.23)}
html body #searchBtn{height:49px;padding:0 23px;border-radius:50px;background:#12bda9}
html body .ogh-compact-footer{padding:17px 0 10px!important}
html body .ogh-compact-footer .footer-links{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;gap:7px 15px!important;margin:0 0 11px!important}
html body .ogh-compact-footer .footer-links a{font-size:11.5px!important;color:rgba(255,255,255,.68);white-space:nowrap}
html body .ogh-compact-footer .footer-bottom{display:flex!important;justify-content:center!important;padding-top:9px;font-size:10.5px}
@media(max-width:780px){html body .appyn-hero{min-height:330px;padding:40px 15px 44px!important;background-position:center center!important}}
@media(max-width:540px){html body .appyn-hero{min-height:305px;padding:31px 14px 35px!important;background-position:center center!important}html body .directory-title{font-size:29px;margin-bottom:14px}html body .ogh-hero-subtitle{font-size:13px;line-height:1.55;margin-bottom:19px}html body .directory-search{height:49px}html body #searchBtn{height:43px;padding:0 15px}html body .hybrid-games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}html body .hybrid-game-name{font-size:13.5px}}

/* FINAL HERO VISIBILITY FIX - 2026-10-30: remove duplicated dark overlays */
html body .appyn-hero {
  background-image: url('/assets/images/hero/online-games-hub-banner.webp') !important;
  background-color: #061729 !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}
html body .appyn-hero::before,
html body .appyn-hero::after {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
/* Readable hero content without obscuring the banner artwork. */
html body .appyn-hero-inner {
  position: relative; z-index: 1;
  filter: none !important;
}

/* MOBILE HERO: use a portrait composition of the existing gaming artwork.
   Desktop background and all hero text/search controls remain unchanged. */
@media (max-width: 780px) {
  html body .appyn-hero {
    background-image: url('/assets/images/hero/online-games-hub-mobile.webp') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: #05142b !important;
    min-height: 415px !important;
    padding: 54px 16px 57px !important;
  }
  html body .appyn-hero::before, html body .appyn-hero::after {
    background: transparent !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
  html body .appyn-hero-inner { position: relative; z-index: 2; }
}
@media (max-width: 390px) {
  html body .appyn-hero { min-height: 430px !important; padding: 47px 14px 50px !important; }
}

/* MOBILE HERO TEXT READABILITY — final controlled overlay (2026-10-30).
   Only applies to homepage mobile hero; keeps desktop and the artwork intact. */
@media (max-width: 780px) {
  html body .appyn-hero {
    position: relative !important;
    isolation: isolate !important;
    filter: none !important;
  }
  html body .appyn-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom,
      rgba(3, 12, 27, .12) 0%,
      rgba(3, 12, 27, .52) 23%,
      rgba(3, 12, 27, .80) 42%,
      rgba(3, 12, 27, .84) 65%,
      rgba(3, 12, 27, .50) 82%,
      rgba(3, 12, 27, .10) 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }
  html body .appyn-hero::after {
    content: none !important;
    display: none !important;
  }
  html body .appyn-hero-inner {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    filter: none !important;
  }
  html body .appyn-hero .directory-title {
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.90), 0 1px 2px rgba(0,0,0,.90) !important;
  }
  html body .appyn-hero .ogh-hero-subtitle {
    color: #f4f8ff !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 2px 7px rgba(0,0,0,.95) !important;
  }
  html body .appyn-hero .directory-search {
    position: relative !important;
    z-index: 2 !important;
    background: #fff !important;
    box-shadow: 0 5px 22px rgba(0,0,0,.45) !important;
  }
}

/* COMPACT MOBILE HERO — FINAL: keep artwork, typography and search */
@media (max-width: 780px) {
  html body .appyn-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 24px 14px 26px !important;
    display: flex !important;
    align-items: center !important;
  }
  html body .appyn-hero .directory-title {
    font-size: clamp(25px, 6.6vw, 30px) !important;
    line-height: 1.15 !important;
    margin: 0 0 9px !important;
  }
  html body .appyn-hero .ogh-hero-subtitle {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 auto 14px !important;
    max-width: 540px !important;
  }
  html body .appyn-hero .directory-search {
    height: 46px !important;
    margin: 0 auto !important;
  }
  html body .appyn-hero #searchBtn { height: 40px !important; }
}
@media (max-width: 390px) {
  html body .appyn-hero { min-height: 0 !important; height: auto !important; padding: 19px 12px 22px !important; }
  html body .appyn-hero .directory-title { font-size: 25px !important; }
  html body .appyn-hero .ogh-hero-subtitle { font-size: 12px !important; }
}

/* 2026-10-30: Medium mobile hero, keeping existing hero artwork and contrast */
@media (max-width: 780px) {
  html body .appyn-hero { min-height: 300px !important; height: auto !important; padding: 39px 15px 42px !important; }
  html body .appyn-hero .directory-title { margin-bottom: 13px !important; }
  html body .appyn-hero .ogh-hero-subtitle { margin-bottom: 20px !important; }
}
@media (max-width: 390px) {
  html body .appyn-hero { min-height: 290px !important; height: auto !important; padding: 35px 13px 38px !important; }
}