/* Orchid Oasis Games — styles.css (en-MY) */
:root{
  --bg:#0f1121;
  --panel:#161a2f;
  --brand:#9b5de5; /* orchid */
  --brand-2:#00c2a8; /* teal */
  --text:#e9eaf2;
  --muted:#a9acc1;
  --line:#262b4a;
  --focus: #ffd166;
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:16px}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(155,93,229,.25), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(0,194,168,.18), transparent 50%),
    var(--bg);
  line-height:1.6;
}

/* Utility */
.oo-btn{
  display:inline-block;
  padding:.8rem 1.1rem;
  background: linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  text-decoration:none;
  border:none;
  border-radius: var(--radius);
  font-weight:600;
  cursor:pointer;
}
.oo-btn--ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
}
.oo-link{color:var(--brand-2); text-decoration:none; font-weight:600; align-self: center;}
.oo-link:hover{text-decoration:underline}
.o-h1{font-size:clamp(2rem,4vw,3rem); line-height:1.2; margin:.5rem 0 1rem}
.o-h2{font-size:clamp(1.5rem,3vw,2rem); margin:0 0 1rem}
.o-h3{font-size:1.25rem; margin:.5rem 0}
.o-h4{font-size:1.125rem; margin:.25rem 0}
.o-h6{font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}

.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
.oo-header{position:sticky;top:0;z-index:50;background:rgba(15,17,33,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.oo-nav{display:flex;align-items:center;justify-content:space-between;gap:16px; max-width:1200px; margin:0 auto; padding:12px 16px}
.oo-menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.oo-menu a{color:var(--text); text-decoration:none; padding:8px 10px; border-radius:10px}
.oo-menu a:hover{background:rgba(255,255,255,.06)}
.oo-burger{display:none}
/* Global link enhancement */
a{color:var(--brand-2); text-underline-offset:3px}
a:hover{color:#b3fff3}

/* Global logo sizing */
.oo-logo img{width:120px;height:44px;object-fit:cover;object-position:center;display:block}

/* Hero */
.o-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;max-width:1200px;margin:32px auto;padding:0 16px}
.o-sub{color:var(--muted);max-width:60ch}
.o-cta{display:flex;gap:12px;margin-top:12px}
.o-hero img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.3)}

/* Highlights */
.o-highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1200px;margin:24px auto;padding:0 16px}
.o-card{background:var(--panel); border:1px solid var(--line); padding:16px; border-radius:var(--radius)}

/* How it works */
.o-how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:24px auto;padding:0 16px}
.o-how__step{background:linear-gradient(180deg,rgba(0,194,168,.08),transparent),var(--panel); border:1px solid var(--line); padding:16px;border-radius:var(--radius)}

/* Game grid */
.o-grid{max-width:1200px;margin:24px auto;padding:0 16px}
.o-gamegrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0}
.o-gamecard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.o-gamecard a{display:block; color:var(--text); text-decoration:none}
.o-gamecard img{display:block;width:100%;height:auto}
.o-gamecard__title{display:block;padding:12px 14px;font-weight:600}
.o-grid__cta{margin-top:12px}

/* Home FAQ */
.o-faq{max-width:1200px;margin:24px auto;padding:0 16px}
.o-accordion{display:grid;gap:10px}
.o-accordion details{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.o-accordion summary{cursor:pointer;font-weight:600;list-style:none}
.o-accordion summary::-webkit-details-marker{display:none}
.o-accordion details[open]{background:linear-gradient(180deg,rgba(0,194,168,.06),transparent),var(--panel)}
.o-accordion p{color:var(--muted);margin:8px 0 0}

/* Footer */
.oo-footer{border-top:1px solid var(--line);margin-top:40px;background:rgba(0,0,0,.2)}
.oo-footer__top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;max-width:1200px;margin:0 auto;padding:24px 16px}
.oo-footer__links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.oo-help__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.oo-footer__bottom{max-width:1200px;margin:0 auto;padding:12px 16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.oo-footnote{color:var(--muted)}

/* FAQ page */
.o-article{
  background:linear-gradient(180deg, rgba(155,93,229,.07), transparent 70%), var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  margin:24px auto;
  text-align:center;
}
.o-article p{margin:0 auto; color:var(--muted)}

/* Pretty links inside content */
.o-article a{color:var(--brand-2); text-decoration:none; font-weight:600; position:relative}
.o-article a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform:scaleX(.2); transform-origin:left; transition:transform .25s ease;
}
.o-article a:hover::after{transform:scaleX(1)}

/* Cookie banner */
#cookieBanner{position:fixed;inset:auto 12px 12px 12px; z-index:60}
.oo-cookie__content{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;max-width:360px}
.oo-age__actions,.oo-cookie__actions{display:flex;gap:10px;margin-top:10px}
.is-hidden{display:none!important}

/* Age Gate (blocking) */
#ageGate{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  z-index:1000;
}
#ageGate.is-visible{display:flex}
.oo-age__card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;max-width:420px;width:calc(100% - 32px)}
body.no-scroll{overflow:hidden}

/* Accessibility */
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* Responsive */
@media (max-width: 960px){
  .o-hero{grid-template-columns:1fr}
  .o-highlights{grid-template-columns:repeat(2,1fr)}
  .o-how{grid-template-columns:1fr}
  .o-gamegrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .oo-nav{position:relative}
  .oo-menu{display:none}
  .oo-burger{display:inline-flex;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:transparent}
  .oo-header.is-open .oo-burger{background:rgba(255,255,255,.06)}
  .oo-header.is-open #navMenu{display:flex;flex-direction:column;gap:6px;position:absolute;right:16px;top:56px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;width:min(80vw,260px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .oo-header.is-open #navMenu a{display:block}
  .o-gamegrid{grid-template-columns:1fr}
}
/* Footer: Get help logos */
.oo-footer__help{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.oo-footer__help .oo-h6{
  margin:0;
}

.copyright-box{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:10px;
  align-items:center;
}

.copyright-box a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  background: rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  min-height:64px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.copyright-box a:hover,
.copyright-box a:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  outline: none;
}

.copyright-box img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:40px !important; /* перекрываем inline-стили высоты */
  object-fit:contain;
  filter: grayscale(100%) opacity(.9);
  transition: transform .2s ease, filter .2s ease;
}

.copyright-box a:hover img,
.copyright-box a:focus-visible img{
  filter: grayscale(0%) opacity(1);
  transform: scale(1.04);
}

/* Тёмный фон футера: делаем ссылки читабельнее при фокусе с клавиатуры */
.copyright-box a:focus-visible{
  box-shadow: 0 0 0 3px var(--focus);
}

/* Адаптив */
@media (max-width: 1024px){
  .copyright-box{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  .copyright-box{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .copyright-box{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}