:root{
  /* palette sampled from the GTA IV street screenshot */
  --c-bg:#0e1312;          /* deep shadow */
  --c-panel:#16201e;       /* dark teal-asphalt */
  --c-panel2:#1d2a28;
  --c-panel3:#2d4b49;      /* teal shade from the buildings */
  --c-text:#e3f0ec;        /* hazy sky white */
  --c-muted:#92af9e;       /* sunlit asphalt teal-grey */
  --c-accent:#7fbcb0;      /* teal from the roofs and sunlit asphalt */
  --c-accent-text:#0c1514;
  --c-teal:#92af9e;
  --c-brick:#a8433c;       /* brick / tail-light red */
  --g-accent:linear-gradient(135deg,#a9d9cf 0%,#7fbcb0 50%,#4f899d 100%);
  --g-haze:linear-gradient(135deg,rgba(146,175,158,.12),rgba(127,188,176,.05));
  --line:rgba(227,240,236,.08);
  --line2:rgba(227,240,236,.14);
  --r-lg:16px;
  --r-md:12px;
  --r-sm:9px;
}

/* ---------- Background: Liberty City haze — teal daylight glow + sky haze on deep teal ---------- */
body{
  background-color:var(--c-bg) !important;
  background-image:
    radial-gradient(1000px 560px at 15% -10%, rgba(227,251,251,.10), transparent 62%),
    radial-gradient(800px 500px at 100% 0%, rgba(146,175,158,.12), transparent 60%),
    radial-gradient(700px 460px at 90% 100%, rgba(127,188,176,.06), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(168,67,60,.08), transparent 65%) !important;
  background-attachment:fixed !important;
  color:var(--c-text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Surfaces: soft glass panels, large radius, hairline borders ---------- */
.header__content, .footer__content, .content, .side, .description,
.game-offer__window, .game-offer__description, .character-games, .character-guides,
.adv-block, .game-banner, .eg-character{
  background:linear-gradient(180deg, var(--c-panel2), var(--c-panel)) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -18px rgba(0,0,0,.7) !important;
  background-image:none;
}
.header{
  background:linear-gradient(180deg,#1a2523,#121a19) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6) !important;
}
.header__content{ background:transparent !important; border:none !important; box-shadow:none !important; }

/* ---------- Typography ---------- */
h1, h2, h3, .title, .catalog__title{
  font-family:'Inter',system-ui,'Segoe UI',Roboto,Arial,sans-serif !important;
  letter-spacing:-.02em;
  color:#fff !important;
}
h1{ font-weight:800 !important; }
h2, .game-offer__description h2, .description h2{ font-weight:800 !important; }
.game-offer__description h2, .description h2{
  position:relative;
  padding-bottom:10px !important;
}
.game-offer__description h2::after, .description h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:44px; height:3px; border-radius:3px;
  background:var(--g-accent);
}
.game-offer__description h3, .description h3{ font-weight:700 !important; color:#fff !important; }
.game-offer__description p, .description p, .game-offer__description li, .description li{ color:#cfe0da; line-height:1.7; }
.game-offer__description a, .description a{
  color:var(--c-accent) !important;
  text-decoration:none;
  border-bottom:1px solid rgba(127,188,176,.35);
  transition:border-color .15s, color .15s;
}
.game-offer__description a:hover, .description a:hover{ color:#a9d9cf !important; border-bottom-color:#a9d9cf; }

/* ---------- Menu: colors only — shape, size and position stay from the template ---------- */
.header .menu ul li a{
  color:var(--c-text) !important;
  transition:background-color .18s, color .18s !important;
}
.header .menu ul li a:hover{
  background-color:rgba(127,188,176,.12) !important;
  color:#fff !important;
}
.header .menu ul li.active > a{
  background-color:rgba(127,188,176,.18) !important;
  color:var(--c-accent) !important;
}
.menu-icon{ width:20px; height:20px; }

/* ---------- Search ---------- */
.header input[type="text"], .header input[type="search"], .search input{
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--line2) !important;
  border-radius:999px !important;
  color:var(--c-text) !important;
  transition:border-color .18s, box-shadow .18s;
}
.header input[type="text"]:focus, .header input[type="search"]:focus, .search input:focus{
  border-color:rgba(127,188,176,.6) !important;
  box-shadow:0 0 0 4px rgba(127,188,176,.12) !important;
  outline:none;
}
.btn-search{
  background:var(--g-accent) !important;
  color:var(--c-accent-text) !important;
  border:none !important;
  border-radius:999px !important;
}

/* ---------- Game window + Play button ---------- */
.game-offer__window{ overflow:hidden; }
.game-offer__window .btn, .game-offer__window button, .btn-play, .play-btn{
  background:var(--g-accent) !important;
  color:var(--c-accent-text) !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  box-shadow:0 10px 30px -8px rgba(79,137,157,.65), 0 0 0 6px rgba(127,188,176,.12) !important;
  transition:transform .18s, box-shadow .18s, filter .18s !important;
}
.game-offer__window .btn:hover, .game-offer__window button:hover, .btn-play:hover, .play-btn:hover{
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.05);
  box-shadow:0 16px 36px -8px rgba(79,137,157,.75), 0 0 0 8px rgba(127,188,176,.16) !important;
}

/* ---------- Game cards ---------- */
.game-card{
  background:var(--c-panel2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s !important;
}
.game-card .thumb img{ border-radius:0 !important; transition:transform .35s; }
.game-card:hover{
  transform:translateY(-4px);
  border-color:rgba(127,188,176,.55) !important;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(127,188,176,.35) !important;
}
.game-card:hover .thumb img{ transform:scale(1.06); }

/* ---------- Pagination ---------- */
.pagination li, .pagination li a{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  color:var(--c-text) !important;
}
.pagination li.active, .pagination li.active a, .pagination li a:hover{
  background:var(--g-accent) !important;
  color:var(--c-accent-text) !important;
  border-color:transparent !important;
}

/* ---------- Lists ---------- */
.game-offer__description ul, .description ul{ list-style:none !important; padding-left:2px !important; }
.game-offer__description ul > li, .description ul > li{ position:relative; padding-left:22px !important; }
.game-offer__description ul > li::before, .description ul > li::before{
  content:""; position:absolute; left:3px; top:.68em;
  width:7px; height:7px; border-radius:50%;
  background:var(--g-accent);
  box-shadow:0 0 0 3px rgba(127,188,176,.15);
}
.game-offer__description ol, .description ol{ padding-left:24px !important; }
.game-offer__description ol > li::marker, .description ol > li::marker{ color:var(--c-accent); font-weight:700; }

/* ---------- Tables ---------- */
.game-offer__description table, .description table{
  width:100%;
  border-collapse:separate !important; border-spacing:0;
  background:rgba(255,255,255,.02) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md); overflow:hidden;
}
.game-offer__description th, .description th{
  background:rgba(127,188,176,.08) !important;
  color:#a9d9cf !important;
  font-weight:700; font-size:.88em; text-align:left;
}
.game-offer__description td, .description td, .game-offer__description th, .description th{
  padding:11px 14px !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
}
.game-offer__description tr:last-child td, .description tr:last-child td{ border-bottom:none !important; }
.game-offer__description tr:hover td, .description tr:hover td{ background:rgba(255,255,255,.025) !important; }
.game-offer__description td:first-child, .description td:first-child{ color:#fff; font-weight:600; }

/* ---------- Content blocks ---------- */
.pp-tip{
  background:linear-gradient(135deg, rgba(127,188,176,.12), rgba(255,149,0,.04)) !important;
  border:1px solid rgba(127,188,176,.25) !important;
  border-radius:var(--r-md) !important;
  color:var(--c-text) !important;
  position:relative;
}
.pp-tip b{ color:#a9d9cf !important; }
.pp-quote{
  background:var(--g-haze) !important;
  border:1px solid var(--line) !important;
  border-left:3px solid var(--c-teal) !important;
  border-radius:var(--r-md) !important;
  color:#d7e2ea !important;
  font-style:italic;
}
.pp-faq-item{
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  transition:border-color .18s, background .18s;
}
.pp-faq-item:hover{ border-color:rgba(127,188,176,.3) !important; background:rgba(255,255,255,.045) !important; }
.pp-faq-item h3::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--c-brick); margin-right:10px; vertical-align:middle; }
.pp-faq-item h3{ color:#fff !important; font-size:1.02em !important; }
.pp-controls{
  background:rgba(0,0,0,.25) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
}
.pp-controls ul > li::before{ display:none !important; }
.pp-controls ul > li{ padding-left:2px !important; }
.pp-controls li b{
  display:inline-block;
  min-width:26px; text-align:center;
  background:rgba(255,255,255,.08) !important;
  border:1px solid var(--line2);
  border-bottom-width:3px;
  color:#fff !important;
  border-radius:8px;
  padding:2px 9px;
  margin-right:8px;
  font-size:.86em; font-weight:700;
}

/* ---------- Character cards ---------- */
.eg-pill{
  background:rgba(127,188,176,.1) !important;
  border:1px solid rgba(127,188,176,.3) !important;
  color:#a9d9cf !important;
  border-radius:999px !important;
  font-size:.78em; font-weight:600;
}
.eg-character h2::after{ display:none; }

/* ---------- Footer ---------- */
.footer__content{ border-radius:var(--r-lg) var(--r-lg) 0 0 !important; }
.footer a{ color:var(--c-muted) !important; transition:color .15s; }
.footer a:hover{ color:var(--c-accent) !important; }

/* ---------- Details ---------- */
::selection{ background:rgba(127,188,176,.85); color:#141005; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--c-bg); }
::-webkit-scrollbar-thumb{ background:#2d4b49; border-radius:10px; border:2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover{ background:#7fbcb0; }