@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

:root{
  --bg-1:#0f0a24;
  --bg-2:#1a0f3a;
  --panel-1:rgba(48, 24, 110, .72);
  --panel-2:rgba(74, 38, 155, .70);
  --panel-3:rgba(24, 12, 64, .58);
  --border:rgba(200,180,255,.42);
  --border-strong:rgba(210,190,255,.62);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.30);
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --tab-h: 40px;

  --text: rgba(255,255,255,.92);
  --text-dim: rgba(255,255,255,.74);
  --text-faint: rgba(255,255,255,.56);

  --accent: rgba(136, 255, 248, .55);
  --accent-strong: rgba(136, 255, 248, .95);
}

*{box-sizing:border-box}
html,body{height:100%
  background: url('assets/images/backgrounds/website-backdrop.png') center/cover no-repeat fixed;
}
html{
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(140,90,255,.22), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(90,255,220,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  overscroll-behavior-y: none;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: transparent;
  overscroll-behavior-y: none;
}

/* dotted backdrop removed */
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:0;background:none;}

.page{
  min-height:100vh;
  min-height:100svh;
  width:100%;
  /* Side margins are responsive:
     - ~5% on phones/smaller screens
     - ~15% on very large screens (shows more background)
  */
  padding:28px 3vw 44px;
}

/* Large screens: show more dotted background (bigger side margins)
   Target: ~15% whitespace on each side on big displays. */
@media (min-width: 1500px){
  .page{ padding-left: 15vw; padding-right: 15vw; }
}

.frame{
  width:100%;
  border-radius: var(--radius-xl);
  padding:16px;
  background: linear-gradient(180deg, rgba(24, 10, 52, .88), rgba(16, 6, 40, .86));
  box-shadow: var(--shadow);
  border: 1px solid rgba(210,190,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


.header{
  display:flex;
  align-items:center;
  justify-content:center;
  /* Reduced height by ~25% */
  height: calc(var(--vh, 1vh) * 30);
  min-height: 165px;
  max-height: 390px;
  border-radius: var(--radius-xl);
  position: relative;
  overflow:hidden;
  background: url('/assets/images/company-banner.png') center / cover no-repeat;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
.header::after{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(900px 420px at 50% 65%, rgba(0,0,0,.25), rgba(0,0,0,.45));
}
.header .brand{ position: relative; z-index: 1; }


.brand{
  font-weight:800;
  letter-spacing:.4px;
  font-size:28px;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.tabs{
  position: sticky;
  top: 0;
  z-index: 220;
  display:flex;
  flex-direction: row;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap: nowrap;
  padding: 10px 10px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}



.tab{
  flex:1;
  height: var(--tab-h);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align: center;
  line-height: 1.1;
  padding: 0 12px;
  white-space: normal;
  text-decoration:none;
  color: var(--text);
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
  user-select:none;
}
.tab:hover{ transform: translateY(-1px); }
.tab:active{ transform: translateY(0px); }
.tab[aria-current="page"],
.tab.is-active{
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.22);
  background: rgba(255,255,255,.92);
  color: #0b0620;
}

.content{
  border-radius: var(--radius-xl);
  background: rgba(18, 8, 44, .72);
  border: 1px solid rgba(210,190,255,.16);
  padding:14px;
  min-height: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* Sections */
.section{
  margin: 18px 0;
}

.section + .section{ border-top: 1px solid rgba(255,255,255,.08); }

/* If a section visually continues into the next one, remove the divider */
.section.no-divider-after + .section{ border-top: none; }

/* Use on a section when you DON'T want a divider above the next section */
.section.no-divider-after + .section{ border-top: none; }

.section-title{
  margin: 0 0 10px;
  padding-left: 36px;
  color: var(--text);
  text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.title--big{ font-size:22px; font-weight:900; }
.title--medium{ font-size:18px; font-weight:850; }
.title--small{ font-size:14px; font-weight:800; opacity:.92; }
.title--none{ display:none; }

.card{
  border-radius: var(--radius-lg);
  background: rgba(14, 6, 34, .86);
  border: 1px solid rgba(210,190,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
  overflow:hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


.card.pad{ padding:14px; }

.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height: 120px;
  padding: 18px;
  color: rgba(20,10,45,.92);
  font-weight:900;
  background:
    linear-gradient(180deg, rgba(255,210,80,.95), rgba(235,190,60,.92));
}

/* Home: Game banner + Logo block (30% of screen height) */
.hero-banner{
  height: calc(var(--vh, 1vh) * 30);
  min-height: 220px;
  max-height: 520px;
  position: relative;
  display:flex;
  align-items: flex-start;
  justify-content: center;
  padding-right: 0;
}

.appstores-download{
  position:absolute;
  right: 14px;
  bottom: 14px;
  /* Keep the combined badge from ever taking over the banner */
  width: clamp(140px, 18vw, 240px);
  max-width: min(calc(100% - 28px), 320px);
  max-height: 42%;
  height:auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
@media (max-width: 720px){
  .hero-banner{ padding-right: 20px; }
}

/* Download stack inside the hero banner (right side, iOS above Android) */
.download-stack{
  position: absolute;
  right: 14px;
  top: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  pointer-events: auto;
  /* Compute a width that always fits vertically inside the banner */
  --dlW: min(120px, calc(((100% - 12px) / 2) / 1.42));
}

.download-group{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.store-qr{ background:none; padding:0; width: var(--dlW); }
.store-qr img{ width:100%; height:auto; display:block; }

.badge{
  display: inline-flex;
  text-decoration: none;
}

.badge-wrap{
  width: 190px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}
.badge-wrap img{
  height: 100%;
  width: auto;
  display: block;
  transform: translateX(0);
}
.badge--android .badge-wrap img{
  transform: translateX(-50%);
}

.store-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  color: #0b0620;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.95);
  white-space: nowrap;
}

/* On phones: hide QR and keep the black store buttons tucked into the lower-right corner */
@media (max-width: 720px){
  .store-qr{ background:none; padding:0; }
  .download-stack{ right: 12px; bottom: 12px; gap: 10px; }
  .download-group{
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    gap: 6px;
  }
  .store-link{ align-self: flex-end; }
}
.store-link:hover{ filter: brightness(1.03); }

@media (max-width: 680px){
  /* Slightly more compact on small phones */
  .download-stack{ right: 10px; bottom: 10px; gap: 8px; }
  .badge-wrap{ width: 170px; height: 40px; }
  .store-link{ height: 32px; }
}

.textbox{
  min-height:120px;
  padding:16px;
  color: var(--text);
  background: rgba(0,0,0,.18);
}
.textbox p{ margin:0; color: var(--text-dim); line-height:1.55; }

/* Screenshot gallery */
.gallery-wrap{
  position:relative;
  overflow: visible;
}
.gallery-nav{
  position:absolute;
  z-index: 50;
  top:50%;
  transform: translateY(-50%);
  width:76px;
  height:76px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.95);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}
.gallery-nav:hover{ background: rgba(0,0,0,.28); }
.gallery-nav:active{ transform: translateY(-50%) scale(.98); }
.gallery-nav:focus-visible{
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}
.gallery-nav--left{
  left: -38px;
}
.gallery-nav--right{
  right: -38px;
}

.gallery{
  position: relative;
  z-index: 1;
  display:flex;
  gap:12px;
  overflow:auto;
  padding: 10px 40px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar{ height: 10px; }
.gallery::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
.gallery-item{
  appearance:none;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  width: 210px; /* ~25% smaller */
  border: 1px solid rgba(255,255,255,.14);
  padding: 0;
  scroll-snap-align: start;
  border-radius: 18px;
  background: #f7edd1;
  position:relative;
  overflow:hidden;
}
.gallery-item:focus-visible{
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}
.gallery-item img{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.gallery-item span{
  position:absolute;
  inset:auto 10px 10px 10px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.88);
  font-weight:800;
  font-size:12px;
  text-align:center;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 24px;
  z-index: 1000;
}
.lightbox.is-open{ display:flex; }
.lightbox-inner{
  width:min(920px, 100%);
  max-height: 88vh;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  background: rgba(20,10,45,.9);
  position:relative;
}
.lightbox-img{
  width:100%;
  height:100%;
  max-height: 88vh;
  object-fit:contain;
  display:block;
  background: rgba(0,0,0,.25);
}
.lightbox-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  font-size: 22px;
  font-weight: 900;
  cursor:pointer;
}
.lightbox-close:hover{ background: rgba(0,0,0,.45); }
.lightbox-close:focus-visible{
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

/* Image section container (wraps tightly around the image, left-aligned) */
.image-wrap{
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  background: rgba(255,255,255,.08);
}


/* Image section placeholder */
.image-block{
  width: min(1100px, 100%);
  min-height: 260px;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(180deg, rgba(255,210,80,.95), rgba(235,190,60,.92));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color: rgba(20,10,45,.92);
}




/* If you use an actual <img> inside a section, give it class="section-image" */
.section-image{
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  min-height: 260px;
  height: auto;
  display:block;
  object-fit: cover;
  border-radius: 18px;
}







/* Top-of-screen shadow hint (inserted by JS) */
.scroll-shadow-top{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 44px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 150;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
.scroll-shadow-top.is-visible{ opacity: 1; }

/* Bottom-of-screen shadow hint (inserted by JS) */
.scroll-shadow-bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 140;
  background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
}
.scroll-shadow-bottom.is-visible{ opacity: 1; }

/* QR + text */
.qr-row{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:12px;
  align-items:stretch;
}
.qr{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.qr img{ width:100%; height:100%; object-fit:cover; }

/* small helpers */
.note{ color: var(--text-faint); font-size:12px; margin: 10px 0 0; }

/* Privacy language dropdown */
.language-bar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin: 0 0 12px;
}
.language-bar label{
  color: var(--text-dim);
  font-weight: 800;
  font-size: 13px;
}
.language-select{
  height: 40px;
  border-radius: 999px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: var(--text);
  font-weight: 800;
  outline: none;
}
.language-select:focus-visible{
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

@media (max-width: 420px){
  :root{ --tab-h: 38px; }
  .brand{ font-size:24px; }

  /* On very small screens, tighten the gallery nav padding a bit */
  .gallery{ padding-left: 44px; padding-right: 44px; }
  .gallery-nav{ width:34px; height:34px; }
}


/* Subtle build/version marker (for deploy verification) */
.version-badge{
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  padding: 6px 8px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  user-select: none;
}


/* Store badge buttons (black official buttons) */
.store-badge{ display:inline-flex; align-items:center; justify-content:center; width: var(--dlW); max-width: 100%; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.store-badge img{ width:100%; height:auto; display:block; }
@media (max-width: 560px){
  .store-badge{ width: 190px; }
}


/* Match store badge width to QR code width */
.store-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 160px;
  max-width: 100%;
}
.store-badge img{
  display:block;
  width:100%;
  height:auto;
}


html, body {
  background: url('/assets/images/background/main-bg.png') center center / cover no-repeat fixed;
}

.download-panel {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  max-height: calc(100% - 24px);
}


.store-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.store-qr, .store-badge {
  width: 112px;
}

.store-qr img, .store-badge img {
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .store-qr { display: none; }
}

.hero-banner img{width:100%;height:100%;object-fit:cover;display:block;border-radius: var(--radius-lg);}

.hero-banner{ overflow:hidden; }
.hero-banner__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.download-stack{ position:absolute; z-index:2; }

.text-spacer{
  margin: 18px 0;
  text-align: center;
  opacity: .35;
  letter-spacing: .2em;
}


.card--transparent{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


.gallery-item--padded{
  background: #f7edd1;
}
.gallery-item--padded img{
  inset: 22%;
  object-fit: contain;
}




/* --- v29 fixes --- */

/* Game banner: flush, rounded only top */
.game-banner-wrap { padding: 0 !important; overflow: hidden; }
.game-banner-img { display:block; width:100%; height:auto; margin:0 !important; border-radius: 16px 16px 0 0 !important; }

/* Screenshot gallery: hard square tiles, never crop image */
.gallery-wrap { position: relative; overflow: visible; }
#screenshotGallery { position: relative; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; }
#screenshotGallery { display: flex; gap: 16px; align-items: stretch; padding: 6px 0; }

/* IMPORTANT: apply sizing to the actual item element (buttons) */
#screenshotGallery .gallery-item {
  height: 25vh;                 /* 25% of viewport height */
  width: 25vh;                  /* square tiles */
  flex: 0 0 auto;
  background: #f7edd1;          /* flat beige behind everything */
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Images: contain inside tile (no crop) */
#screenshotGallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* NeedsMarginAndBackground: inset the image within the tile */
/* Overlay nav buttons pinned to gallery sides */
.gallery-nav-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  line-height: 1;
  border: none;
  cursor: pointer;
  z-index: 999;                 /* always on top */
  background: rgba(0,0,0,0.35);
  color: #fff;
  backdrop-filter: blur(4px);
}
.gallery-nav-left { left: -36px; }
.gallery-nav-right { right: -36px; }


/* === GALLERY STRICT MODEL v30 === */
.gallery-wrap-fixed {
  position: relative;
  height: 25vh;
  overflow: visible;
}

#screenshotGallery {
  height: 25vh;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
}

#screenshotGallery .gallery-item {
  width: 25vh;
  height: 25vh;
  flex: 0 0 auto;
  background: #f7edd1;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

#screenshotGallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 52px;
  border: none;
  cursor: pointer;
  z-index: 9999;
}

.overlay-left { left: -36px; }
.overlay-right { right: -36px; }






/* NeedsMarginAndBackground: keep foreground limited to inner box */
#screenshotGallery .gallery-item.needs-margin .shot-fg{
  width:auto !important;
  height:auto !important;
  max-width:56% !important;
  max-height:56% !important;
  object-fit:contain !important;
}






/* === Screenshot squares (v34) === */
:root{ --shotSize: 25vh; } /* same visible height for all */

.gallery-wrap-fixed{ height: var(--shotSize); }

#screenshotGallery{
  height: var(--shotSize);
  display:flex;
  align-items:center;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
}

#screenshotGallery .gallery-item{
  width: var(--shotSize);
  height: var(--shotSize);
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
}

#screenshotGallery .gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop to perfect square */
  object-position: center;
  display:block;
}

/* === Gallery arrow images (v35) === */
.gallery-arrow{
  background: transparent !important;
  width: 96px;
  height: 96px;
  padding: 0;
  border: none;
}
.gallery-arrow-img{
  width: 100%;
  height: 100%;
  display:block;
}
/* Move arrows inward so they're never cut off */
.overlay-left{ left: 12px !important; }
.overlay-right{ right: 12px !important; }


/* === Game banner edge-to-edge (v36) === */
#gameBanner, .game-banner, .game-hero, .guessbox-banner, .game-banner-container{
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden;
}

#gameBanner img, .game-banner img, .game-hero img, .guessbox-banner img, .game-banner-container img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 16px 16px 0 0 !important;
}


/* === Theme overrides (v38) === */
:root{
  --panel-bg: rgba(245, 232, 201, 0.92);   /* sand beige */
  --panel-border: rgba(120, 92, 45, 0.35);
  --text-main: #111;
  --text-muted: rgba(0,0,0,0.65);
  --accent: #b98a2b;
}

html, body{
  color: var(--text-main) !important;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  text-shadow: none !important;
}

/* Panels / cards */
.panel, .card, .content-panel, .section, section{
  background: var(--panel-bg) !important;
  border-color: var(--panel-border) !important;
  color: var(--text-main) !important;
}

/* Text */
h1,h2,h3,h4,h5,h6, p, li, nav, .nav, .tabs, .tabs a, .nav a{
  color: var(--text-main) !important;
  text-shadow: none !important;
}
a{ color: #1a4f8a !important; }
a:hover{ color: #163f6f !important; }

/* Remove grey tint/overlay on main banner */
.main-banner::before, .top-banner::before, .banner::before, header::before{
  content: none !important;
}
.main-banner, .top-banner, .banner, header .banner{
  filter: none !important;
  background: transparent !important;
}



/* === Layout/Theme overrides (v39) === */

/* 1) Remove any grey overlay/tint on company banner */
.main-banner, .top-banner, .banner, header .banner, header{
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
}
.main-banner::before, .top-banner::before, .banner::before, header::before,
.main-banner::after, .top-banner::after, .banner::after, header::after{
  content: none !important;
  display: none !important;
}

/* 6) Main content panel brighter for readability */
:root{
  --panel-bg: rgba(252, 243, 222, 0.94) !important;
  --panel-border: rgba(120, 92, 45, 0.22) !important;
}

/* 2) Game banner flush to its holder (no inset margins) */
.game-banner, #gameBanner, .guessbox-banner, .game-hero,
.game-banner-holder, .banner-holder, .game-banner-panel{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.game-banner img, #gameBanner img, .guessbox-banner img, .game-hero img{
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 16px 16px 0 0 !important; /* top corners only */
}
.game-banner, #gameBanner, .guessbox-banner, .game-hero{
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
}

/* 3) Make square holder containers transparent */
.screenshot-gallery-container, #screenshotSection, .screenshot-section, .gallery-panel, .gallery-wrapper,
.section-holder, .sections-holder, .section-wrapper, .section-panel,
.game-banner-holder, .banner-holder, .game-banner-panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 4) Sections should be fluent (no inner boxes) */
section, .section, .content-panel section,
.section-box, .section-card, .section-block{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 5) No divider lines anywhere */
hr, .divider, .divider-line{
  display: none !important;
}
.section-title, .panel-title, .content-title{
  border-bottom: none !important;
}