/* jili7 mobile-first interface */
:root {
  font-size: 62.5%;
  --pg82-primary: #ffcc33;
  --pg82-gold: #ffd700;
  --pg82-purple: #9932cc;
  --pg82-teal: #00695c;
  --pg82-bg: #1e1e1e;
  --pg82-bg-soft: #28222f;
  --pg82-panel: #121616;
  --pg82-text: #fff9dd;
  --pg82-muted: #c5c2b9;
  --pg82-line: rgba(255, 204, 51, .24);
  --pg82-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .38);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body {
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--pg82-text);
  background:
    radial-gradient(circle at 20% 4%, rgba(153, 50, 204, .32), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(0, 105, 92, .42), transparent 30rem),
    linear-gradient(145deg, #151515 0%, var(--pg82-bg) 54%, #0c2421 100%);
  font-size: 1.5rem;
  line-height: 1.5rem;
}
a { color: var(--pg82-gold); text-decoration: none; }
a:hover { color: #fff3a0; }
img { max-width: 100%; display: block; }
.pg82-shell { width: min(100%, 430px); margin: 0 auto; min-height: 100vh; background: rgba(30, 30, 30, .68); box-shadow: 0 0 5rem rgba(0,0,0,.45); }
.pg82-container { width: calc(100% - 2.4rem); margin: 0 auto; }
.pg82-wrapper { padding: 1.4rem; }
.pg82-header { position: sticky; top: 0; z-index: 1000; background: rgba(18, 22, 22, .96); border-bottom: .1rem solid var(--pg82-line); backdrop-filter: blur(1.2rem); }
.pg82-topbar { height: 6.4rem; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; }
.pg82-brand { display: flex; align-items: center; gap: .8rem; min-width: 0; color: var(--pg82-text); font-weight: 900; letter-spacing: .04em; }
.pg82-logo { width: 3.2rem; height: 3.2rem; border-radius: .9rem; box-shadow: 0 0 1.4rem rgba(255, 204, 51, .35); }
.pg82-brand-text { font-size: 1.8rem; text-transform: uppercase; }
.pg82-header-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.pg82-btn, .pg82-icon-btn { min-height: 4.4rem; border: 0; cursor: pointer; font-weight: 900; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.pg82-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.25rem; border-radius: 999px; color: #171717; background: linear-gradient(135deg, var(--pg82-primary), var(--pg82-gold)); box-shadow: 0 .8rem 1.8rem rgba(255, 204, 51, .22); }
.pg82-btn:hover, .pg82-icon-btn:hover, .pg82-bottom-item:hover { transform: translateY(-.2rem) scale(1.02); }
.pg82-btn-secondary { color: var(--pg82-text); background: linear-gradient(135deg, var(--pg82-purple), #5a1d7b); box-shadow: 0 .8rem 1.8rem rgba(153, 50, 204, .25); }
.pg82-menu-btn { width: 4.4rem; border-radius: 1.2rem; background: rgba(255,255,255,.08); color: var(--pg82-primary); border: .1rem solid var(--pg82-line); }
.pg82-menu { position: fixed; inset: 0 0 auto 0; z-index: 9999; transform: translateY(-110%); transition: transform .28s ease; background: rgba(12, 20, 20, .98); border-bottom: .1rem solid var(--pg82-line); padding: 7.2rem 1.4rem 2rem; }
.pg82-menu.pg82-menu-open { transform: translateY(0); }
.pg82-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pg82-menu-link { min-height: 4.8rem; display: flex; align-items: center; gap: .8rem; padding: 1rem; border-radius: 1.4rem; background: rgba(255,255,255,.06); border: .1rem solid rgba(255,255,255,.08); color: var(--pg82-text); font-weight: 800; }
.pg82-menu-link.pg82-is-active { background: rgba(255,204,51,.16); border-color: var(--pg82-primary); }
.pg82-desktop-nav { display: none; }
.pg82-main { padding: 1.2rem 0 9rem; }
.pg82-hero { padding: 1.4rem 0 1rem; }
.pg82-kicker { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: 999px; background: rgba(0,105,92,.35); color: #cafff5; font-weight: 900; font-size: 1.2rem; border: .1rem solid rgba(0,105,92,.7); }
.pg82-title { font-size: 3rem; line-height: 3.4rem; margin: 1.2rem 0 .8rem; letter-spacing: -.04em; }
.pg82-lead { color: var(--pg82-muted); font-size: 1.55rem; line-height: 2.35rem; }
.pg82-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.4rem 0; }
.pg82-slider { position: relative; overflow: hidden; border-radius: 2rem; min-height: 16.6rem; border: .1rem solid var(--pg82-line); box-shadow: var(--pg82-shadow); background: #0d1414; }
.pg82-slide { display: none; position: relative; cursor: pointer; }
.pg82-slide.pg82-is-active { display: block; }
.pg82-slide img { width: 100%; height: 18rem; object-fit: cover; }
.pg82-slide-caption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: 1rem; border-radius: 1.4rem; background: rgba(0,0,0,.62); font-weight: 900; }
.pg82-dots { display: flex; justify-content: center; gap: .6rem; margin: 1rem 0; }
.pg82-dot { width: .9rem; height: .9rem; border-radius: 50%; border: 0; background: #808080; }
.pg82-dot.pg82-is-active { width: 2.2rem; border-radius: 999px; background: var(--pg82-gold); }
.pg82-section { margin: 1.6rem 0; padding: 1.4rem; border-radius: 2rem; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)); border: .1rem solid rgba(255,255,255,.08); box-shadow: 0 1rem 2rem rgba(0,0,0,.18); }
.pg82-section-alt { background: linear-gradient(145deg, rgba(0,105,92,.24), rgba(153,50,204,.18)); }
.pg82-section h2 { margin: .2rem 0 1rem; font-size: 2.2rem; line-height: 2.7rem; }
.pg82-section h3 { margin: 1rem 0 .6rem; font-size: 1.7rem; line-height: 2.2rem; color: var(--pg82-primary); }
.pg82-text { color: var(--pg82-muted); line-height: 2.35rem; }
.pg82-highlight { color: var(--pg82-gold); font-weight: 900; }
.pg82-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.pg82-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.pg82-card { border-radius: 1.6rem; padding: 1.1rem; background: rgba(18, 22, 22, .74); border: .1rem solid rgba(255,255,255,.08); }
.pg82-stat { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: .1rem solid rgba(255,255,255,.08); }
.pg82-game-category { margin: 1.6rem 0; }
.pg82-category-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.pg82-category-head h2 { margin: 0; font-size: 2rem; text-transform: capitalize; }
.pg82-game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.pg82-game-card { min-height: 10rem; border-radius: 1.4rem; padding: .6rem; background: rgba(255,255,255,.055); border: .1rem solid rgba(255,255,255,.07); color: var(--pg82-text); text-align: center; font-size: 1.1rem; line-height: 1.35rem; font-weight: 800; }
.pg82-game-card img { width: 5.2rem; height: 5.2rem; object-fit: cover; border-radius: 1.2rem; margin: 0 auto .5rem; }
.pg82-link-list { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.pg82-text-link { color: #ffe477; font-weight: 900; text-decoration: underline; text-underline-offset: .3rem; }
.pg82-steps { counter-reset: pg82step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.pg82-step { position: relative; padding: 1.1rem 1.1rem 1.1rem 4.4rem; border-radius: 1.4rem; background: rgba(255,255,255,.055); }
.pg82-step::before { counter-increment: pg82step; content: counter(pg82step); position: absolute; left: 1rem; top: 1rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; color: #111; background: var(--pg82-primary); font-weight: 900; }
.pg82-footer { padding: 2rem 1.2rem 9rem; background: #101515; border-top: .1rem solid var(--pg82-line); }
.pg82-footer-logo { display: flex; align-items: center; gap: .9rem; font-weight: 900; font-size: 1.8rem; }
.pg82-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.2rem 0; }
.pg82-footer-link { color: var(--pg82-text); padding: .8rem; border-radius: 1rem; background: rgba(255,255,255,.055); }
.pg82-partner-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.pg82-partner { padding: .6rem .9rem; border-radius: 999px; color: #111; background: var(--pg82-primary); font-weight: 900; font-size: 1.1rem; }
.pg82-copy { color: var(--pg82-muted); font-size: 1.2rem; }
.pg82-bottom-nav { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1000; width: min(100%, 430px); height: 6.2rem; display: flex; justify-content: space-around; align-items: center; background: #00695c; border-top: .2rem solid var(--pg82-gold); box-shadow: 0 -1rem 2rem rgba(0,0,0,.35); }
.pg82-bottom-item { min-width: 6rem; min-height: 6rem; border: 0; background: transparent; color: #d8fff8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; font-size: 1.05rem; font-weight: 900; cursor: pointer; transition: transform .2s ease, color .2s ease; }
.pg82-bottom-item i, .pg82-bottom-item .material-icons, .pg82-bottom-item ion-icon { font-size: 2.4rem; line-height: 2.4rem; }
.pg82-bottom-item.pg82-is-active { color: var(--pg82-gold); }
.pg82-badge { position: absolute; margin-left: 2.2rem; margin-top: -3rem; background: var(--pg82-purple); color: #fff; border-radius: 999px; padding: .1rem .45rem; font-size: .9rem; }
.pg82-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 1.2rem; }
.pg82-table th, .pg82-table td { padding: .9rem; border-bottom: .1rem solid rgba(255,255,255,.08); text-align: left; }
.pg82-table th { color: #111; background: var(--pg82-primary); }
@media (min-width: 769px) {
  .pg82-shell { max-width: 1180px; width: 100%; }
  .pg82-container { max-width: 1100px; }
  .pg82-bottom-nav { display: none; }
  .pg82-main { padding-bottom: 4rem; }
  .pg82-menu-btn { display: none; }
  .pg82-desktop-nav { display: flex; gap: .8rem; margin-left: 1rem; }
  .pg82-desktop-nav a { color: var(--pg82-text); font-weight: 800; }
  .pg82-game-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .pg82-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  main { padding-bottom: 80px; }
  .pg82-header-actions .pg82-btn { padding: .85rem .9rem; font-size: 1.2rem; }
}