/* ═══════════════════════════════════════════════════════════════════
   LI GAMING BD — LEGAL / INFO PAGES  (pro 3D)
   Privacy Policy · FAQ · Contact Us · Data Deletion
   Same raised-slate + gold/green/blue 3D language as the main site.
   Loaded AFTER each page's inline \3c style>.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --lp-gold: linear-gradient(180deg, #ffe58f 0%, #f7bd16 54%, #d98f00 100%);
  --lp-green: linear-gradient(180deg, #6ff0a0 0%, #22c55e 55%, #15803d 100%);
  --lp-blue: linear-gradient(180deg, #62adff 0%, #327ff2 55%, #2058c8 100%);
  --lp-raise: linear-gradient(180deg, #363e5b 0%, #282e46 100%);
  --lp-sunk: linear-gradient(180deg, #121626 0%, #181d2d 100%);
  --lp-panel: linear-gradient(180deg, #2d3347 0%, #20263a 46%, #191e2e 100%);
  --lp-ledge: #10131f;
  --lp-muted: #98a3bd;
  --lp-display: 'Sora', 'Outfit', 'Inter', system-ui, sans-serif;
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lp-sheen { 0%, 55% { left: -70%; } 100% { left: 150%; } }

.pp-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

html body {
  min-height: 100vh;
  color: #e8ecf6;
  background:
    radial-gradient(70% 38% at 50% 0%, rgba(247, 189, 22, .13), rgba(247, 189, 22, 0) 72%),
    radial-gradient(90% 60% at 50% 18%, #1c2338 0%, #0d111d 62%, #070a12 100%) fixed;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
html body .wrap { width: min(920px, calc(100% - 28px)); padding-bottom: 12px; }

/* ── header bar ── */
html body .top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 20px;
  padding: 14px 18px;
  border-radius: 26px;
  background: var(--lp-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: lp-rise .5s cubic-bezier(.2, .85, .25, 1) both;
}
html body .logo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: 20px;
  object-fit: contain;
  background: linear-gradient(180deg, #3f4768 0%, #272d46 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  filter: none;
}
html body .top h1 {
  margin: 0;
  font: 800 clamp(22px, 5.4vw, 36px)/1.12 var(--lp-display);
  letter-spacing: -.02em;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #ffeab0 42%, #f7bd16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}
html body .top .sub { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--lp-muted); }

/* ── content card ── */
html body .card {
  position: relative;
  margin: 0 0 28px;
  padding: 26px 24px;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  color: #c9d2e6;
  background: var(--lp-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: lp-rise .55s .08s cubic-bezier(.2, .85, .25, 1) both;
}
html body .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  background: radial-gradient(60% 100% at 16% 0%, rgba(247, 189, 22, .13), transparent 72%);
  pointer-events: none;
}
html body .card > * { position: relative; }
html body .card p,
html body .card li { font-size: 14px; line-height: 1.75; color: #b9c3da; }
html body .card strong { color: #fff; }
html body .card a { color: #ffd466; font-weight: 600; text-underline-offset: 3px; }

html body .card h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 10px;
  font: 800 18px/1.3 var(--lp-display);
  letter-spacing: -.01em;
  color: #fff;
}
html body .card h2:first-child { margin-top: 0; }
html body .lp-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font: 800 14px/1 var(--lp-display);
  color: #2a1a00;
  background: var(--lp-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}
html body .card ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
html body .card ul li {
  position: relative;
  padding: 12px 14px 12px 40px;
  border-radius: 16px;
  background: var(--lp-sunk);
  box-shadow: none;
}
html body .card ul li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 19px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--lp-gold);
  box-shadow: none;
}

html body .notice {
  display: block;
  margin: 18px 0;
  padding: 15px 17px;
  border: 0;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #d8f6e8;
  background: linear-gradient(180deg, rgba(34, 197, 150, .16), rgba(34, 197, 150, .07));
  box-shadow: inset 0 0 0 1px rgba(34, 197, 150, .3);
}
html body .notice strong { color: #6ee7a0; }

/* back / action buttons */
html body .back,
html body .action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
  padding: 0 22px;
  height: 52px;
  border: 0;
  border-radius: 17px;
  overflow: hidden;
  font: 800 14px/1 var(--lp-display);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, box-shadow .14s ease;
}
html body .back { color: #fff; background: var(--lp-raise); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
html body .card a.back { color: #fff; font-weight: 800; }
html body .action { color: #fff; background: var(--lp-green); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
html body .card a.action { color: #fff; font-weight: 800; }
html body .action::after { content: ""; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); animation: lp-sheen 3.6s ease-in-out infinite; pointer-events: none; }
html body .back:hover,
html body .action:hover { transform: translateY(-2px); }
html body .back:active,
html body .action:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
html body .back .pp-i,
html body .action .pp-i { width: 18px; height: 18px; stroke-width: 2.4; }

/* ── FAQ ── */
html body .faq {
  position: relative;
  margin: 0 0 12px;
  padding: 15px 16px 15px 62px;
  border: 0;
  border-radius: 20px;
  background: var(--lp-raise);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
html body .faq:last-child { border-bottom: 0; }
html body .faq::before {
  content: "Q";
  position: absolute;
  left: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font: 800 14px/1 var(--lp-display);
  color: #2a1a00;
  background: var(--lp-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}
html body .faq .q { margin: 0 0 6px; font: 700 15px/1.4 var(--lp-display); color: #fff; }
html body .faq .a { font-size: 13.5px; line-height: 1.7; color: #aeb9d2; }

/* ── Contact ── */
html body .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html body .contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: var(--lp-raise);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
html body .contact-item .icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  font-size: 22px;
  color: #fff;
  background: var(--lp-green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
html body .contact-item:nth-child(2) .icon { background: var(--lp-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
html body .contact-item .icon .pp-i { width: 24px; height: 24px; stroke-width: 2; }
html body .contact-item .label { font: 800 10px/1.2 'Inter', sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: #ffd466; }
html body .contact-item .value { margin-top: 4px; font: 700 15px/1.3 var(--lp-display); color: #fff; word-break: break-word; }
html body .note {
  margin-top: 20px;
  padding: 14px 16px;
  border: 0;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: #b9c3da;
  background: var(--lp-sunk);
  box-shadow: none;
}
html body .note strong { color: #ffd466; }
html body .contact-grid + .action { width: 100%; }

/* ── footer ── */
html body .footer { padding: 4px 0 40px; text-align: center; font-size: 12px; color: #7b86a3; }
html body .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
html body .footer-links .sep { display: none; }
html body .footer-links a {
  padding: 10px 16px;
  border-radius: 999px;
  font: 700 12.5px/1 'Inter', sans-serif;
  color: #e8ecf6;
  text-decoration: none;
  background: var(--lp-raise);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .14s ease;
}
html body .footer-links a:hover { transform: translateY(-2px); color: #ffd466; }
html body .footer-links a:active { transform: translateY(2px); }

@media (max-width: 650px) {
  html body .top { padding: 12px 14px; gap: 13px; border-radius: 22px; }
  html body .logo { width: 56px; height: 56px; border-radius: 18px; }
  html body .card { padding: 20px 16px; border-radius: 24px; }
  html body .contact-grid { grid-template-columns: 1fr; }
  html body .back, html body .action { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html body .top, html body .card, html body .action::after { animation: none !important; }
}