/*!
 * arena apps stylesheet - arenaapps.click
 * Prefix: pge8- | Palette: #228B22 #00FF7F #87CEFA #32CD32 #2E4057
 * Mobile-first responsive layout, root font 62.5%, touch targets >=44px.
 */
:root {
  --pge8-primary:#228B22; --pge8-accent:#00FF7F; --pge8-sky:#87CEFA; --pge8-lime:#32CD32;
  --pge8-deep:#2E4057; --pge8-bg:#0f1c14; --pge8-bg-alt:#14271c; --pge8-card:#1a3024;
  --pge8-border:#2a4a36; --pge8-text:#eafaf0; --pge8-text-dim:#a8c9b5; --pge8-gold:#ffd76b;
  --pge8-shadow:0 0.4rem 1.6rem rgba(0,0,0,0.45); --pge8-radius:1.2rem;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { font-size:62.5%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.5rem; line-height:1.5rem; color:var(--pge8-text);
  background:linear-gradient(135deg,#0a160e 0%,var(--pge8-bg) 60%,#0f2618 100%);
  min-height:100vh; overflow-x:hidden;
}
a { color:var(--pge8-accent); text-decoration:none; }
img { max-width:100%; display:block; }
h1,h2,h3,h4 { line-height:1.3; font-weight:700; }
p { line-height:1.5rem; }

/* Layout container */
.pge8-wrapper { width:100%; max-width:430px; margin:0 auto; padding:0 1.2rem; position:relative; }
@media (min-width:769px) { .pge8-wrapper { max-width:720px; padding:0 2rem; } }
.pge8-container { padding:2rem 0; }

/* Header */
.pge8-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:linear-gradient(90deg,#0a160e 0%,#143a20 50%,#0a160e 100%);
  border-bottom:0.2rem solid var(--pge8-lime); box-shadow:0 0.2rem 0.8rem rgba(0,0,0,0.55);
}
.pge8-header-inner {
  max-width:430px; margin:0 auto; padding:0.8rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:0.8rem;
}
.pge8-logo { display:flex; align-items:center; gap:0.6rem; color:var(--pge8-text); font-weight:800; font-size:1.6rem; }
.pge8-logo img { width:2.8rem; height:2.8rem; border-radius:0.6rem; }
.pge8-logo .pge8-logo-mark { color:var(--pge8-accent); text-shadow:0 0 0.6rem var(--pge8-accent); }
.pge8-header-actions { display:flex; align-items:center; gap:0.6rem; }
.pge8-btn {
  display:inline-flex; align-items:center; gap:0.4rem; padding:0.7rem 1.2rem;
  border-radius:2rem; font-weight:700; font-size:1.3rem; min-height:3.6rem; cursor:pointer; border:0;
  transition:transform 0.15s ease,box-shadow 0.15s ease,filter 0.15s ease;
}
.pge8-btn:focus-visible { outline:0.2rem solid var(--pge8-sky); outline-offset:0.2rem; }
.pge8-btn:active { transform:scale(0.96); }
.pge8-btn-primary {
  background:linear-gradient(135deg,var(--pge8-lime),var(--pge8-primary));
  color:#04140a; box-shadow:0 0.4rem 1.2rem rgba(50,205,50,0.35);
}
.pge8-btn-secondary { background:transparent; color:var(--pge8-accent); border:0.15rem solid var(--pge8-accent); }
.pge8-btn-ghost { background:rgba(0,255,127,0.12); color:var(--pge8-text); }
.pge8-menu-toggle {
  background:transparent; border:0.1rem solid var(--pge8-border); color:var(--pge8-text);
  width:3.6rem; height:3.6rem; border-radius:0.8rem; font-size:1.8rem;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}

/* Mobile expandable menu */
.pge8-mobile-menu {
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:linear-gradient(160deg,#07140c,#102a1a); padding:6rem 1.2rem 2.4rem;
  transform:translateY(-100%); transition:transform 0.32s ease;
  border-bottom:0.2rem solid var(--pge8-primary); box-shadow:var(--pge8-shadow);
}
.pge8-mobile-menu.pge8-menu-open { transform:translateY(0); }
.pge8-mobile-menu ul { list-style:none; display:grid; gap:0.6rem; }
.pge8-mobile-menu a {
  display:flex; align-items:center; gap:0.8rem; padding:1rem 1.2rem; border-radius:1rem;
  background:rgba(0,255,127,0.08); color:var(--pge8-text); font-weight:600; border:0.1rem solid var(--pge8-border);
}
.pge8-mobile-menu a:hover { background:rgba(0,255,127,0.18); }

/* Hero carousel */
.pge8-hero { position:relative; margin-top:6rem; border-radius:var(--pge8-radius); overflow:hidden; box-shadow:var(--pge8-shadow); }
.pge8-hero-slide { display:none; position:relative; cursor:pointer; }
.pge8-hero-slide.pge8-slide-active { display:block; }
.pge8-hero-slide img { width:100%; height:18rem; object-fit:cover; }
.pge8-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,22,14,0.25) 30%,rgba(10,22,14,0.85) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem; gap:0.6rem;
}
.pge8-hero-title { font-size:2rem; color:#fff; font-weight:800; }
.pge8-hero-sub { font-size:1.25rem; color:var(--pge8-accent); font-weight:600; }
.pge8-hero-cta {
  align-self:flex-start; background:linear-gradient(135deg,var(--pge8-gold),#ff7e3d);
  color:#241400; padding:0.6rem 1.2rem; border-radius:1.6rem; font-weight:700; font-size:1.2rem;
}
.pge8-hero-dots { position:absolute; bottom:0.8rem; right:1.2rem; display:flex; gap:0.5rem; }
.pge8-hero-dot { width:0.8rem; height:0.8rem; border-radius:50%; background:rgba(255,255,255,0.4); border:0; cursor:pointer; }
.pge8-hero-dot.pge8-dot-active { background:var(--pge8-accent); box-shadow:0 0 0.4rem var(--pge8-accent); }

/* Section heading */
.pge8-section { padding:2rem 0; }
.pge8-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; gap:0.8rem; }
.pge8-section-title { font-size:1.8rem; color:var(--pge8-accent); display:flex; align-items:center; gap:0.6rem; }
.pge8-section-more { font-size:1.2rem; color:var(--pge8-sky); }

/* Filter chips */
.pge8-filter-bar { display:flex; gap:0.6rem; overflow-x:auto; padding-bottom:0.6rem; scrollbar-width:none; }
.pge8-filter-bar::-webkit-scrollbar { display:none; }
.pge8-filter-chip {
  padding:0.5rem 1rem; border-radius:1.4rem; background:rgba(0,255,127,0.08);
  color:var(--pge8-text-dim); border:0.1rem solid var(--pge8-border);
  font-size:1.2rem; font-weight:600; white-space:nowrap; cursor:pointer;
}
.pge8-filter-chip.pge8-chip-active {
  background:linear-gradient(135deg,var(--pge8-lime),var(--pge8-primary));
  color:#04140a; border-color:transparent;
}

/* Game grid */
.pge8-category-block { margin-bottom:2rem; }
.pge8-category-head {
  display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem;
  font-size:1.5rem; color:var(--pge8-gold); font-weight:700;
}
.pge8-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; }
@media (min-width:431px) { .pge8-grid { grid-template-columns:repeat(4,1fr); } }
.pge8-game-card {
  background:var(--pge8-card); border:0.1rem solid var(--pge8-border); border-radius:1rem;
  padding:0.6rem; text-align:center; transition:transform 0.18s ease,box-shadow 0.18s ease; cursor:pointer;
}
.pge8-game-card:hover { transform:translateY(-0.2rem); box-shadow:0 0.4rem 1.2rem rgba(50,205,50,0.25); }
.pge8-game-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:0.8rem; margin-bottom:0.4rem; }
.pge8-game-card-name {
  font-size:1.1rem; color:var(--pge8-text); font-weight:600; line-height:1.25; min-height:2.8rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Promo banner */
.pge8-promo-banner {
  background:linear-gradient(135deg,var(--pge8-primary),var(--pge8-deep));
  border:0.15rem solid var(--pge8-lime); border-radius:var(--pge8-radius);
  padding:1.4rem; margin:1.6rem 0;
  display:flex; flex-direction:column; gap:0.8rem; color:var(--pge8-text);
}
.pge8-promo-banner h3 { font-size:1.6rem; color:var(--pge8-gold); }
.pge8-promo-banner p { font-size:1.25rem; color:var(--pge8-text-dim); }

/* Feature / info cards */
.pge8-card {
  background:var(--pge8-card); border:0.1rem solid var(--pge8-border);
  border-radius:var(--pge8-radius); padding:1.4rem; margin-bottom:1.2rem; box-shadow:var(--pge8-shadow);
}
.pge8-card h2,.pge8-card h3 { color:var(--pge8-accent); margin-bottom:0.8rem; }
.pge8-card p { color:var(--pge8-text-dim); margin-bottom:0.8rem; }
.pge8-card ul { list-style:none; display:grid; gap:0.6rem; }
.pge8-card li { display:flex; gap:0.6rem; align-items:flex-start; color:var(--pge8-text-dim); }
.pge8-card li i { color:var(--pge8-lime); margin-top:0.2rem; }

/* Inline promo link */
.pge8-link-inline { color:var(--pge8-gold); font-weight:700; border-bottom:0.15rem dashed var(--pge8-gold); }
.pge8-link-inline:hover { color:#ffe7a8; }

/* Testimonials */
.pge8-testimonials { display:grid; gap:1rem; }
.pge8-testimonial {
  background:linear-gradient(135deg,rgba(0,255,127,0.08),rgba(46,64,87,0.5));
  border-left:0.4rem solid var(--pge8-lime); padding:1.2rem; border-radius:0.8rem;
}
.pge8-testimonial p { font-style:italic; color:var(--pge8-text); }
.pge8-testimonial-author { font-size:1.1rem; color:var(--pge8-sky); margin-top:0.6rem; font-weight:600; }

/* Payment / tile grid */
.pge8-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:0.8rem; }
.pge8-tile {
  background:rgba(0,255,127,0.06); border:0.1rem solid var(--pge8-border);
  border-radius:1rem; padding:1rem; text-align:center; color:var(--pge8-text);
}
.pge8-tile i { font-size:2.2rem; color:var(--pge8-lime); margin-bottom:0.4rem; }
.pge8-tile strong { display:block; font-size:1.3rem; color:var(--pge8-gold); }
.pge8-tile span { font-size:1.1rem; color:var(--pge8-text-dim); }

/* FAQ */
.pge8-faq-item { background:var(--pge8-card); border:0.1rem solid var(--pge8-border); border-radius:0.8rem; padding:1rem 1.2rem; margin-bottom:0.8rem; }
.pge8-faq-item h4 { color:var(--pge8-accent); font-size:1.3rem; margin-bottom:0.4rem; }
.pge8-faq-item p { color:var(--pge8-text-dim); font-size:1.2rem; }

/* Footer */
.pge8-footer {
  background:#06130b; border-top:0.2rem solid var(--pge8-primary);
  padding:2rem 0 7rem; margin-top:2rem; color:var(--pge8-text-dim);
}
.pge8-footer-cta { display:flex; flex-wrap:wrap; gap:0.6rem; margin:1rem 0; }
.pge8-footer-links { display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; margin:1rem 0; }
.pge8-footer-links a { color:var(--pge8-text-dim); font-size:1.2rem; padding:0.4rem 0; }
.pge8-footer-links a:hover { color:var(--pge8-accent); }
.pge8-footer-copy { border-top:0.1rem solid var(--pge8-border); padding-top:1rem; font-size:1.1rem; color:#6f8c7c; text-align:center; }

/* Back to top */
.pge8-back-top {
  position:fixed; bottom:7.5rem; right:1.2rem; z-index:999;
  width:3.6rem; height:3.6rem; border-radius:50%;
  background:linear-gradient(135deg,var(--pge8-lime),var(--pge8-primary));
  color:#04140a; border:0; cursor:pointer; box-shadow:var(--pge8-shadow); font-size:1.6rem;
}

/* Mobile bottom nav */
.pge8-bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:1000; height:6rem;
  background:linear-gradient(90deg,#07140c,#143a20,#07140c);
  border-top:0.15rem solid var(--pge8-lime); box-shadow:0 -0.2rem 0.8rem rgba(0,0,0,0.55);
  display:flex; align-items:stretch; justify-content:space-around;
}
.pge8-bottom-nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.2rem;
  background:transparent; border:0; color:var(--pge8-text-dim); cursor:pointer;
  min-width:6rem; min-height:6rem; padding:0.4rem; transition:color 0.15s ease,transform 0.15s ease;
}
.pge8-bottom-nav-item i,.pge8-bottom-nav-item .material-icons-outlined { font-size:2.2rem; }
.pge8-bottom-nav-item span { font-size:1rem; }
.pge8-bottom-nav-item:hover { color:var(--pge8-accent); transform:translateY(-0.1rem); }
.pge8-bottom-nav-item.pge8-nav-active { color:var(--pge8-gold); }
.pge8-bottom-nav-item:focus-visible { outline:0.2rem solid var(--pge8-sky); outline-offset:-0.2rem; }
.pge8-bottom-nav-item.pge8-nav-promo {
  background:linear-gradient(135deg,rgba(0,255,127,0.18),rgba(50,205,50,0.18));
  color:var(--pge8-accent);
}

/* Desktop hide + mobile spacing */
@media (min-width:769px) {
  .pge8-bottom-nav { display:none; }
  .pge8-footer { padding-bottom:2rem; }
  .pge8-back-top { bottom:2rem; }
}
@media (max-width:768px) { main.pge8-main { padding-bottom:8rem; } }

/* Utility */
.pge8-text-center { text-align:center; }
.pge8-mt-1 { margin-top:1rem; }
.pge8-mt-2 { margin-top:2rem; }
.pge8-hidden { display:none !important; }
.pge8-tag {
  display:inline-block; padding:0.2rem 0.8rem; border-radius:1rem;
  background:rgba(0,255,127,0.15); color:var(--pge8-accent); font-size:1.1rem; font-weight:600;
}