/* =========================================================
   PUBG Myanmar — tactical dark theme
   Old variable names (--purple, --pink …) are kept so every
   existing view/inline style picks up the new palette.
   ========================================================= */
/* Self-hosted fonts (SIL OFL) — no Google Fonts request needed */
@font-face { font-family: "Teko"; font-weight: 500; font-display: swap; src: url("/fonts/teko-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Teko"; font-weight: 600 700; font-display: swap; src: url("/fonts/teko-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 400 500; font-display: swap; src: url("/fonts/rajdhani-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 600; font-display: swap; src: url("/fonts/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700 900; font-display: swap; src: url("/fonts/rajdhani-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Myanmar"; font-weight: 400 500; font-display: swap; src: url("/fonts/noto-sans-myanmar-myanmar-400-normal.woff2") format("woff2"); unicode-range: U+1000-109F, U+200C-200D, U+25CC, U+A9E0-A9FF, U+AA60-AA7F; }
@font-face { font-family: "Noto Sans Myanmar"; font-weight: 600; font-display: swap; src: url("/fonts/noto-sans-myanmar-myanmar-600-normal.woff2") format("woff2"); unicode-range: U+1000-109F, U+200C-200D, U+25CC, U+A9E0-A9FF, U+AA60-AA7F; }
@font-face { font-family: "Noto Sans Myanmar"; font-weight: 700 900; font-display: swap; src: url("/fonts/noto-sans-myanmar-myanmar-700-normal.woff2") format("woff2"); unicode-range: U+1000-109F, U+200C-200D, U+25CC, U+A9E0-A9FF, U+AA60-AA7F; }

:root {
  --accent: #ff8a00;          /* primary fill (orange)            */
  --accent-2: #ff4d1a;        /* hot end of gradients             */
  --yellow: #f5c518;          /* HUD yellow – highlights & prices */
  --purple: var(--accent);
  --purple-dark: #ffb347;     /* used as text on dark → keep light */
  --pink: var(--accent-2);
  --pink-dark: var(--yellow);
  --cyan: #3fd0c9;
  --gold: var(--yellow);
  --dark: #07090b;
  --dark-2: #11161b;
  --bg: #0a0d10;
  --card: #12171c;
  --card-2: #1a2027;
  --text: #ebe7df;
  --muted: #8e97a1;
  --border: #29313a;
  --green: #3ddc84;
  --red: #ff5252;
  --amber: #ffb020;
  --warn-bg: rgba(245,197,24,.09);
  --warn-text: #f5c518;
  --radius: 4px;
  --cut: 12px;
  --font-display: "Teko", "Rajdhani", "Noto Sans Myanmar", sans-serif;
  --font-body: "Rajdhani", "Noto Sans Myanmar", "Pyidaungsu", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(255,138,0,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(63,208,201,.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}
/* faint tactical grid over everything */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
body > * { position: relative; z-index: 1; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
a { color: var(--yellow); text-decoration: none; }
a:hover { color: #fff; }
h1, h2, h3 { line-height: 1.2; font-weight: 700; }
h1, h2 { font-family: var(--font-display); letter-spacing: .02em; }
h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 600; margin: 18px 0 8px; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); font-weight: 600; margin: 0 0 6px; }
img { max-width: 100%; }
code { background: var(--card-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; color: var(--yellow); }
hr { border: 0; border-top: 1px solid var(--border); }
::selection { background: var(--accent); color: #111; }

/* ---------- header ---------- */
.site-header {
  background: rgba(7,9,11,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--yellow) 50%, var(--accent) 80%, transparent);
  opacity: .8;
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); line-height: 1; }
.brand:hover { color: var(--text); }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-text b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--yellow); letter-spacing: .04em; line-height: 1; padding-top: 4px; height: 1.45rem; overflow: visible; display: flex; align-items: center; }
.brand-text small { font-size: .62rem; font-weight: 700; letter-spacing: .42em; color: var(--muted); margin-top: 3px; }
.brand span { color: var(--yellow); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--border); cursor: pointer; padding: 9px 8px;
  flex-direction: column; gap: 4px; z-index: 30;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--yellow); transition: transform .2s, opacity .2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.main-nav a {
  color: var(--text); font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 12px; position: relative;
}
.main-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--yellow); transform: scaleX(0); transition: transform .2s; }
.main-nav a:hover { color: var(--yellow); }
.main-nav a:hover::after { transform: scaleX(1); }
.btn-nav {
  background: linear-gradient(135deg, var(--yellow), var(--accent)); color: #111 !important; margin-left: 6px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding: 8px 20px !important; font-weight: 700;
}
.btn-nav::after { display: none; }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #07090b;
    flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden;
    border-bottom: 1px solid var(--border); box-shadow: 0 16px 30px rgba(0,0,0,.6);
    transition: max-height .25s ease;
  }
  .main-nav.open { max-height: 520px; }
  .main-nav a { padding: 14px 20px; border-top: 1px solid var(--border); width: 100%; }
  .main-nav a::after { display: none; }
  .btn-nav { margin: 0; clip-path: none; text-align: center; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 13px 30px; font-weight: 700; cursor: pointer; border: none;
  font-size: 1.05rem; text-align: center; touch-action: manipulation; font-family: var(--font-body);
  letter-spacing: .08em; text-transform: uppercase; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .12s, filter .15s, box-shadow .15s;
}
.btn-primary { background: linear-gradient(135deg, var(--yellow), var(--accent) 60%, var(--accent-2)); color: #111; }
.btn-primary:hover { color: #111; filter: brightness(1.1); transform: translateY(-1px); }
.btn-outline { background: rgba(255,255,255,.03); color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow); }
.btn-outline:hover { background: rgba(245,197,24,.1); color: var(--yellow); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.btn-small { padding: 7px 14px; border-radius: 2px; border: none; font-weight: 700; cursor: pointer; font-size: .82rem; font-family: inherit; letter-spacing: .03em; }
.btn-approve { background: var(--green); color: #07130c; }
.btn-reject { background: var(--red); color: #fff; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 56px; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,13,16,.96) 30%, rgba(10,13,16,.55) 65%, rgba(10,13,16,.2)),
    url("/img/hero-bg.svg") right center / cover no-repeat;
}
.hero-wrap { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 36px; position: relative; z-index: 1; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .28em;
  color: var(--yellow); text-transform: uppercase;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--yellow); }
.hero h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); margin: 12px 0 14px; line-height: 1.02; text-transform: uppercase; }
.hero h1 .accent { color: var(--yellow); display: block; }
.hero h1 .mm { display: block; max-width: 30em; font-family: "Noto Sans Myanmar", var(--font-body); text-transform: none; font-size: .42em; line-height: 1.6; color: var(--text); font-weight: 600; margin-top: 8px; }
.hero .lead { font-size: 1.08rem; color: #b9c0c8; max-width: 540px; }
.cta-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 0; margin-top: 30px; border: 1px solid var(--border); background: rgba(7,9,11,.6); width: fit-content; }
.hero-stats div { padding: 10px 20px; border-right: 1px solid var(--border); }
.hero-stats div:last-child { border-right: 0; }
.hero-stats b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--yellow); line-height: 1; font-weight: 600; }
.hero-stats span { font-size: .72rem; letter-spacing: .15em; color: var(--muted); text-transform: uppercase; }

.hero-card { display: flex; justify-content: center; }
.drop-crate { position: relative; width: min(340px, 80vw); aspect-ratio: 1; }
.drop-crate .ring { position: absolute; inset: 0; border: 1px solid rgba(245,197,24,.28); border-radius: 50%; }
.drop-crate .ring.r2 { inset: 14%; border-style: dashed; animation: spin 26s linear infinite; }
.drop-crate .ring.r3 { inset: 30%; border-color: rgba(255,138,0,.35); }
.drop-crate .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(245,197,24,.28), transparent 22%);
  animation: spin 4s linear infinite; mask: radial-gradient(circle, #000 69%, transparent 70%);
}
.drop-crate .cross::before, .drop-crate .cross::after { content: ""; position: absolute; background: rgba(245,197,24,.3); }
.drop-crate .cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.drop-crate .cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.drop-crate .coin { position: absolute; inset: 31%; animation: float 3.4s ease-in-out infinite; filter: drop-shadow(0 0 28px rgba(255,170,0,.55)); }
.drop-crate .tag {
  position: absolute; font-family: var(--font-display); font-size: 1rem; letter-spacing: .12em; color: var(--yellow);
  background: rgba(7,9,11,.85); border: 1px solid rgba(245,197,24,.4); padding: 2px 10px;
}
.drop-crate .t1 { top: 8%; right: -2%; }
.drop-crate .t2 { bottom: 10%; left: -4%; color: var(--green); border-color: rgba(61,220,132,.4); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 820px) {
  .hero { padding: 40px 0; }
  .hero-wrap { grid-template-columns: 1fr; text-align: left; }
  .hero-card { order: -1; }
  .drop-crate { width: min(190px, 52vw); }
  .drop-crate .tag { font-size: .85rem; }
  .hero::before { background: linear-gradient(180deg, rgba(10,13,16,.7), rgba(10,13,16,.97) 45%), url("/img/hero-bg.svg") right top / cover no-repeat; }
  .hero-stats { width: 100%; }
  .hero-stats div { flex: 1; }
}

/* hazard stripe divider */
.hazard { height: 8px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 12px, #111 12px 24px); opacity: .85; }

/* ---------- sections ---------- */
.why, .packages, .seo-content, .steps { padding: 52px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.section-head h2 { text-transform: uppercase; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .grid-4 { grid-template-columns: 1fr; } }

.panel, .feature, .stat-card, .order-form, .order-feed-item, .data-table, .auth-form-card {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--card);
  border: 1px solid var(--border);
}
.feature { padding: 22px 20px; text-align: left; position: relative; }
.feature::before { content: ""; position: absolute; left: -1px; top: -1px; width: 16px; height: 16px; border-left: 2px solid var(--yellow); border-top: 2px solid var(--yellow); }
.feature::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); }
.feature .icon { width: 42px; height: 42px; display: grid; place-items: center; background: rgba(245,197,24,.1); color: var(--yellow); font-size: 1.3rem; margin-bottom: 12px; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.feature h3 { margin: 4px 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; letter-spacing: .04em; text-transform: uppercase; }
.feature p { margin: 0; color: var(--muted); font-size: .95rem; }
.stat-card { padding: 18px; text-align: left; }
.stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--yellow); line-height: 1.1; }

/* steps */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; counter-reset: s; }
@media (max-width: 800px) { .step-grid { grid-template-columns: 1fr; } }
.step { padding: 20px 20px 20px 74px; position: relative; border: 1px solid var(--border); background: var(--card); }
.step::before { counter-increment: s; content: "0" counter(s); position: absolute; left: 18px; top: 14px; font-family: var(--font-display); font-size: 2.6rem; color: var(--yellow); line-height: 1; }
.step h3 { margin: 0 0 4px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ---------- UC icon ---------- */
.uc-ico {
  display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; flex: none;
  background: url("/img/uc.svg") center / contain no-repeat;
}
.uc-lg { width: 2.2rem; height: 2.2rem; }

/* ---------- package cards (home) ---------- */
.package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; margin-top: 24px; }
.package-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #1b2229, #12171c); border: 1px solid var(--border);
  padding: 22px 12px 16px; text-align: center; color: var(--text);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .15s, border-color .15s, background .15s;
}
.package-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 70px at 50% 0, rgba(245,197,24,.16), transparent 70%); opacity: .6; transition: opacity .15s; }
.package-card:hover { transform: translateY(-4px); border-color: var(--yellow); color: var(--text); }
.package-card:hover::before { opacity: 1; }
.package-card .uc-ico { width: 46px; height: 46px; margin-bottom: 4px; position: relative; }
.package-diamond { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1; position: relative; }
.package-diamond em { font-style: normal; color: var(--yellow); font-size: .7em; margin-left: 3px; }
.package-price { color: var(--yellow); font-weight: 700; font-size: 1rem; position: relative; }
.package-buy { font-size: .72rem; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; margin-top: 4px; position: relative; }
.package-card:hover .package-buy { color: var(--yellow); }
.package-card.hot::after { content: "HOT"; position: absolute; top: 8px; right: 10px; font-size: .64rem; font-weight: 800; letter-spacing: .12em; color: #111; background: var(--yellow); padding: 1px 6px; }

.seo-content p { color: #b9c0c8; max-width: 820px; }
.muted { color: var(--muted); }

/* ---------- live orders feed ---------- */
.latest-orders { padding: 12px 0 52px; }
.order-feed { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.order-feed-item { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-left: 3px solid var(--yellow); }
.order-feed-icon { font-size: 1.3rem; display: grid; place-items: center; }
.order-feed-body { flex: 1; min-width: 0; }
.order-feed-line { font-size: .98rem; }
.order-feed-line strong { color: var(--yellow); font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; letter-spacing: .03em; }
.order-feed-time { font-size: .78rem; color: var(--muted); margin-top: 1px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255,82,82,.7); animation: pulse 1.6s infinite; margin-right: 6px; vertical-align: 2px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(255,82,82,0); } 100% { box-shadow: 0 0 0 0 rgba(255,82,82,0); } }

/* ---------- order page ---------- */
.page-head { padding: 26px 0 4px; }
.page-head h1 { margin: 8px 0 4px; }
.order-page h1 { margin-bottom: 6px; }
.notice { padding: 12px 16px; background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--yellow); margin: 14px 0; }
.notice.error { background: rgba(255,82,82,.08); border-color: rgba(255,82,82,.35); border-left-color: var(--red); color: #ff8a8a; }
.notice.success { background: rgba(61,220,132,.08); border-color: rgba(61,220,132,.35); border-left-color: var(--green); color: var(--green); }
.order-form { padding: 26px; margin-top: 16px; position: relative; }
@media (max-width: 480px) { .order-form { padding: 16px; } }
.field-group { margin-bottom: 24px; }
.field-group > label { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 12px; font-size: 1.02rem; letter-spacing: .02em; }
.package-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.package-select-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--card-2); border: 1px solid var(--border); color: var(--text); padding: 14px 6px 12px;
  cursor: pointer; font-size: .95rem; font-family: inherit; min-height: 64px; touch-action: manipulation; position: relative;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color .12s, background .12s;
}
.package-select-btn .uc-ico { width: 30px; height: 30px; margin-bottom: 2px; }
.package-select-btn .psb-amt { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; font-weight: 500; }
.package-select-btn .psb-amt em { font-style: normal; color: var(--yellow); font-size: .75em; }
.package-select-btn:hover { border-color: rgba(245,197,24,.6); }
.package-select-btn.selected { border-color: var(--yellow); background: linear-gradient(180deg, rgba(245,197,24,.18), rgba(255,138,0,.06)); box-shadow: inset 0 0 0 1px var(--yellow); }
.package-select-btn.selected::after { content: "✔"; position: absolute; top: 4px; right: 8px; color: var(--yellow); font-size: .8rem; }
.package-select-btn small { color: var(--yellow); font-weight: 700; }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=url], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 2px; font-size: 1rem; font-family: inherit;
  background: #0c1014; color: var(--text); font-weight: 600;
}
input::placeholder, textarea::placeholder { color: #5d6670; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(245,197,24,.15); }
.order-summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px dashed var(--border); margin: 10px 0 18px; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
#order-total { color: var(--yellow); font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: .02em; }

.pid-row { display: flex; gap: 8px; }
.pid-row input { flex: 1; font-size: 1.15rem; letter-spacing: .08em; }
.btn-check {
  flex: none; border: 1px solid var(--yellow); background: rgba(245,197,24,.1); color: var(--yellow); font-weight: 700;
  font-family: inherit; padding: 0 16px; cursor: pointer; font-size: .92rem;
}
.btn-check:hover { background: rgba(245,197,24,.2); }
.pid-result { min-height: 1.4em; margin-top: 8px; font-size: .95rem; }
.pid-result.ok { color: var(--green); }
.pid-result.ok b { color: #fff; }
.pid-result.bad { color: var(--red); }
.pid-result.warn { color: var(--amber); }
.pid-result.wait { color: var(--muted); }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--muted); border-top-color: var(--yellow); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }

.auth-page { max-width: 440px; padding-top: 32px; padding-bottom: 60px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { font-weight: 600; font-size: .92rem; margin-top: 6px; color: var(--muted); letter-spacing: .03em; }
.divider { text-align: center; color: var(--muted); margin: 18px 0; position: relative; }

/* ---------- payment methods ---------- */
.pay-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
@media (max-width: 480px) { .pay-method-grid { grid-template-columns: repeat(2, 1fr); } }
.pay-method-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 18px 10px 14px;
  border: 1px solid var(--border); background: var(--card-2); cursor: pointer;
  transition: border-color .15s, background .15s; user-select: none; text-align: center; min-height: 90px;
}
.pay-method-item:hover { border-color: rgba(245,197,24,.6); }
.pay-method-item input[type=radio] { display: none; }
.pay-method-item.pay-method-selected { border-color: var(--yellow); background: rgba(245,197,24,.1); box-shadow: inset 0 0 0 1px var(--yellow); }
.pay-method-icon { line-height: 1; margin-bottom: 2px; }
.pm-badge { display: inline-block; padding: 4px 10px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: #fff; }
.pm-badge.kbz     { background: #005baa; }
.pm-badge.wave    { background: #f6c700; color: #111; }
.pm-badge.aya     { background: #c0002a; }
.pm-badge.uab     { background: #1a5276; }
.pm-badge.generic { background: var(--accent); color: #111; }
.pay-method-name   { font-weight: 700; font-size: .9rem; color: var(--text); }
.pay-method-bal    { font-size: .8rem; color: var(--yellow); font-weight: 700; }
.pay-method-detail { font-size: .75rem; color: var(--muted); }
.pay-info-box { margin-top: 4px; }
.pay-info-inner { padding: 14px 18px; background: #0c1014; border: 1px dashed rgba(245,197,24,.5); color: var(--text); font-size: 1rem; line-height: 1.8; }
.pay-info-inner strong { color: var(--yellow); }

.wallet-balance-card {
  position: relative; overflow: hidden; color: #fff; padding: 24px; margin: 16px 0 28px;
  background: linear-gradient(120deg, #1d2329, #12171c 60%); border: 1px solid var(--border); border-left: 4px solid var(--yellow);
}
.wallet-balance-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; background: url("/img/uc.svg") center / contain no-repeat; opacity: .12; }
.balance-amount { font-family: var(--font-display); font-size: clamp(2.2rem, 7vw, 2.8rem); font-weight: 600; margin-top: 4px; color: var(--yellow); line-height: 1; }

.file-upload { position: relative; }
.file-upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-upload-label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 36px 20px; cursor: pointer; text-align: center;
  border: 2px dashed var(--border); background: #0c1014; transition: border-color .15s;
}
.file-upload-label:hover { border-color: var(--yellow); }
.file-upload-icon { color: var(--yellow); }
.file-upload-icon svg { display: block; }
.file-upload-text { display: flex; flex-direction: column; gap: 4px; }
.file-upload-text strong { color: var(--text); font-size: .98rem; font-weight: 600; }
.file-upload-text small { color: var(--muted); }
.file-upload.has-file .file-upload-label { display: none; }
.file-upload-preview { display: flex; align-items: center; gap: 12px; padding: 16px; border: 2px dashed var(--border); background: #0c1014; }
.file-upload-preview img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--border); }
.file-upload-preview span { font-size: .88rem; color: var(--muted); word-break: break-all; }

/* ---------- tables / admin ---------- */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 16px; overflow: hidden; min-width: 480px; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: .93rem; }
.data-table th { background: #0c1014; color: var(--muted); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.data-table tr:hover td { background: rgba(255,255,255,.015); }
.data-table td.actions-cell { white-space: normal; }
.actions-cell .action-btns { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 260px; }
.user-panel { width: 100%; }
.badge { padding: 3px 9px; font-size: .72rem; font-weight: 800; white-space: nowrap; letter-spacing: .08em; border: 1px solid currentColor; }
.badge-completed, .badge-approved { background: rgba(61,220,132,.1); color: var(--green); }
.badge-processing, .badge-pending, .badge-awaiting_payment { background: rgba(255,176,32,.1); color: var(--amber); }
.badge-failed, .badge-cancelled, .badge-rejected, .badge-refunded { background: rgba(255,82,82,.1); color: var(--red); }
.badge-partial { background: rgba(63,208,201,.1); color: var(--cyan); }

.admin-tabs { display: flex; gap: 6px; margin: 16px 0 24px; flex-wrap: wrap; }
.admin-tabs a { padding: 8px 16px; background: var(--card); border: 1px solid var(--border); color: var(--text); font-weight: 600; }
.admin-tabs a:hover { border-color: var(--yellow); color: var(--yellow); }
.admin-tabs a.active { background: linear-gradient(135deg, var(--yellow), var(--accent)); color: #111; border-color: transparent; }

.container.admin-wide { max-width: 1400px; }
.data-table td.select-cell, .data-table th.select-cell { width: 34px; text-align: center; padding-left: 10px; padding-right: 10px; }
.data-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--yellow); }
.bulk-actions-bar { display: flex; align-items: center; gap: 10px; margin: 14px 0; min-height: 34px; }
.bulk-actions-bar .btn-small[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- PWA bar ---------- */
.pwa-install-bar {
  position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 9999; display: flex; align-items: center; gap: 12px;
  background: #0f1418; border: 1px solid var(--border); border-top: 2px solid var(--yellow);
  padding: 10px 12px; box-shadow: 0 14px 40px rgba(0,0,0,.6); max-width: 460px; margin: 0 auto; animation: pwaSlideUp .35s ease;
}
@keyframes pwaSlideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pwa-install-icon img { display: block; }
.pwa-install-text { flex: 1; font-size: .88rem; line-height: 1.35; }
.pwa-install-sub { color: var(--muted); font-size: .78rem; }
.pwa-install-btn { background: var(--yellow); color: #111; border: none; padding: 8px 14px; font-weight: 800; font-size: .85rem; cursor: pointer; white-space: nowrap; font-family: inherit; }
.pwa-install-close { background: none; border: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; align-self: flex-start; }
@media (max-width: 480px) { .pwa-install-bar { left: 8px; right: 8px; bottom: 10px; padding: 8px 10px; } }

/* ---------- footer ---------- */
.site-footer { background: #06080a; color: var(--muted); margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--border); position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 8px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 12px, #111 12px 24px); opacity: .7; }
.footer-wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; padding-bottom: 30px; }
@media (max-width: 700px) { .footer-wrap { grid-template-columns: 1fr; } }
.footer-wrap h4 { color: var(--text); font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.footer-wrap a { display: block; color: var(--muted); margin-bottom: 6px; }
.footer-wrap a:hover { color: var(--yellow); }
.footer-bottom { border-top: 1px solid var(--border); padding: 16px 20px; text-align: center; font-size: .85rem; color: #616a73; }
.footer-love { font-size: 1rem; color: var(--yellow); font-weight: 600; margin: 10px 0 6px; }
.footer-gnk-link { display: inline-flex !important; align-items: center; font-size: .85rem; margin-top: 4px; }
.footer-note { font-size: .78rem; color: #5b636b; max-width: 420px; }

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .why, .packages, .seo-content, .steps { padding: 36px 0; }
  .btn { width: 100%; }
  .cta-row .btn { width: auto; flex: 1 1 auto; }
  .hero-stats div { padding: 8px 12px; }
  .hero-stats b { font-size: 1.35rem; }
}

/* ---------- login modal ---------- */
.order-page-locked { filter: blur(4px); pointer-events: none; user-select: none; }
.login-modal-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: loginModalFade .25s ease;
}
@keyframes loginModalFade { from { opacity: 0; } to { opacity: 1; } }
.login-modal-card {
  position: relative; width: 100%; max-width: 400px; background: #0f1418; border: 1px solid var(--border); border-top: 3px solid var(--yellow);
  padding: 32px 28px 24px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: loginModalPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes loginModalPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.login-modal-close { position: absolute; top: 12px; right: 12px; background: var(--card-2); border: 1px solid var(--border); width: 32px; height: 32px; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; }
.login-modal-icon { width: 64px; height: 64px; margin: 0 auto 14px; background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.4); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.login-modal-card h2 { font-size: 1.6rem; margin: 0 0 6px; }
.login-modal-sub { color: var(--muted); font-size: .92rem; margin: 0 0 14px; }
.login-modal-badges { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.login-modal-badges span { background: var(--card-2); border: 1px solid var(--border); color: var(--yellow); font-size: .78rem; font-weight: 700; padding: 4px 10px; }
.login-modal-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .78rem; margin: 14px 0; letter-spacing: .2em; }
.login-modal-divider::before, .login-modal-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-modal-dismiss { background: none; border: none; color: var(--muted); font-size: .88rem; margin-top: 14px; cursor: pointer; text-decoration: underline; font-family: inherit; }
.login-modal-terms { font-size: .74rem; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }
@media (max-width: 480px) { .login-modal-card { padding: 26px 20px 20px; } }

.social-login-row { display: flex; justify-content: center; margin: 10px 0; }
.social-login-row > div { max-width: 100%; }

/* Generic white boxes coming from older inline styles */
details, fieldset { border-color: var(--border); }
table { color: inherit; }
pre { background: #0c1014 !important; color: #d7dde3 !important; border: 1px solid var(--border); }

/* ---------- product categories (order page + home) ---------- */
.cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; cursor: pointer;
  background: var(--card-2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-weight: 700; font-size: .92rem; letter-spacing: .02em;
}
.cat-tab:hover { border-color: rgba(245,197,24,.6); }
.cat-tab.active { background: linear-gradient(135deg, var(--yellow), var(--accent)); color: #111; border-color: transparent; }
.cat-tab .uc-ico { width: 18px; height: 18px; }
.item-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.item-btn { min-height: 96px; justify-content: center; }
.item-ico { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.psb-name { font-weight: 700; font-size: .92rem; line-height: 1.25; text-align: center; }
#quantity[readonly] { opacity: .6; }
.item-card .item-ico { font-size: 2.2rem; position: relative; margin-bottom: 4px; }
.item-card .package-diamond { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; }
.home-cat { margin: 26px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; letter-spacing: .05em; text-transform: uppercase; color: var(--yellow); }
.cat-panel[hidden] { display: none !important; }
#items { scroll-margin-top: 90px; }

/* =========================================================
   BATTLE ROYALE THEME v2 — military stencil, drop-zone map,
   HUD compass, loot rarity, kill feed. All art is original.
   ========================================================= */
@font-face { font-family: "Black Ops One"; font-weight: 400; font-display: swap; src: url("/fonts/black-ops-one-latin-400-normal.woff2") format("woff2"); }
:root {
  --yellow: #f2a900;
  --accent: #f28c00;
  --accent-2: #d9481c;
  --bg: #0b0d0a;
  --card: #141811;
  --card-2: #1b2017;
  --border: #2b3326;
  --text: #ece6d6;
  --muted: #98a08a;
  --olive: #5d6a39;
  --zone: #3d8bff;
  --r-common: #a3ab9a;
  --r-rare: #3d8bff;
  --r-epic: #a768ff;
  --r-legend: #f2a900;
  --font-display: "Black Ops One", "Teko", "Noto Sans Myanmar", sans-serif;
  --font-num: "Teko", "Rajdhani", sans-serif;
}
body {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(242,169,0,.09), transparent 60%),
    radial-gradient(900px 600px at -12% 108%, rgba(93,106,57,.18), transparent 60%),
    var(--bg);
}
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.95rem); }
.kicker { color: var(--yellow); }
.brand-text b { font-family: "Black Ops One", var(--font-display); font-weight: 400; font-size: 1.55rem; letter-spacing: .06em; }
.main-nav a { font-family: "Rajdhani", sans-serif; }
.btn { font-family: "Black Ops One", var(--font-body); font-weight: 400; letter-spacing: .06em; }
.btn-primary { background: linear-gradient(135deg, #ffc21a, var(--yellow) 45%, var(--accent)); color: #121212; box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset; }
.site-header::after { background: linear-gradient(90deg, transparent, var(--olive) 15%, var(--yellow) 50%, var(--olive) 85%, transparent); }

/* ---------- HERO: drop zone ---------- */
.br-hero { padding: 0 0 58px; min-height: 560px; }
.br-hero::before {
  background:
    linear-gradient(95deg, rgba(11,13,10,.97) 28%, rgba(11,13,10,.72) 55%, rgba(11,13,10,.25)),
    linear-gradient(0deg, rgba(11,13,10,1), transparent 30%),
    url("/img/zone-map.svg") right center / cover no-repeat;
}
.br-hero .hero-wrap { padding-top: 44px; grid-template-columns: 1.1fr .9fr; }
.br-hero h1 { font-size: clamp(2.4rem, 6.2vw, 4.2rem); line-height: 1; margin: 14px 0 12px; text-transform: uppercase; }
.br-hero h1 .accent { color: var(--yellow); display: block; }
.br-hero h1 .accent2 { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--yellow); }
.hero-mm { font-family: "Noto Sans Myanmar", var(--font-body); font-weight: 700; font-size: 1.12rem; margin: 0 0 8px; color: var(--text); }
.br-hero .lead { color: #b9bfae; }

/* HUD compass strip */
.hud-compass { position: relative; height: 34px; overflow: hidden; border-bottom: 1px solid rgba(236,230,214,.08); background: rgba(0,0,0,.35); -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.hud-compass-track { position: absolute; top: 0; left: 0; display: flex; align-items: center; height: 34px; white-space: nowrap; animation: compass 40s linear infinite; }
.hud-compass-track span, .hud-compass-track i { display: inline-block; width: 58px; text-align: center; font-style: normal; font-family: var(--font-num); letter-spacing: .08em; }
.hud-compass-track span { color: var(--text); font-size: 1.15rem; }
.hud-compass-track i { color: rgba(236,230,214,.38); font-size: .9rem; }
.hud-compass-needle { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid var(--yellow); }
@keyframes compass { to { transform: translateX(-50%); } }

/* HUD stats */
.hud-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hud-stat { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(236,230,214,.12); border-left: 3px solid var(--yellow); }
.hud-ico { font-size: 1.35rem; }
.hud-stat b { display: block; font-family: var(--font-num); font-size: 1.55rem; line-height: 1; color: var(--yellow); font-weight: 600; }
.hud-stat small { font-size: .7rem; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }

/* Airdrop art */
.hero-art { position: relative; height: 460px; }
.zone-ring { position: absolute; left: 50%; top: 58%; width: 380px; height: 380px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid rgba(61,139,255,.7); background: radial-gradient(circle, transparent 60%, rgba(61,139,255,.14)); animation: zone 6s ease-in-out infinite; }
.zone-ring.safe { width: 190px; height: 190px; top: 70%; border: 2px solid rgba(255,255,255,.8); background: none; animation: none; }
@keyframes zone { 50% { transform: translate(-50%, -50%) scale(.94); } }
.airdrop { position: absolute; left: 50%; top: 0; width: 250px; transform: translateX(-50%); filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); animation: drop 5s ease-in-out infinite; }
@keyframes drop { 0%, 100% { transform: translate(-50%, 0) rotate(-3deg); } 50% { transform: translate(-50%, 16px) rotate(3deg); } }
.hud-tag { position: absolute; font-family: var(--font-num); font-size: 1.05rem; letter-spacing: .12em; padding: 3px 12px; background: rgba(0,0,0,.72); border: 1px solid rgba(236,230,214,.2); color: var(--text); }
.tag-drop { top: 8px; left: 0; color: #ff5a4a; border-color: rgba(255,90,74,.45); }
.tag-loot { top: 46%; right: 0; color: var(--yellow); border-color: rgba(242,169,0,.5); }
.tag-zone { bottom: 26px; left: 6%; color: #8fb8ff; border-color: rgba(61,139,255,.5); }
.blink { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a4a; margin-right: 8px; vertical-align: 1px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 820px) {
  .br-hero { min-height: 0; }
  .br-hero .hero-wrap { grid-template-columns: 1fr; padding-top: 18px; }
  .hero-art { order: -1; height: 290px; }
  .airdrop { width: 170px; }
  .zone-ring { width: 250px; height: 250px; }
  .zone-ring.safe { width: 120px; height: 120px; }
  .br-hero::before { background: linear-gradient(180deg, rgba(11,13,10,.55), rgba(11,13,10,.97) 48%), url("/img/zone-map.svg") center top / cover no-repeat; }
}
.hazard { background: repeating-linear-gradient(-45deg, var(--yellow) 0 12px, #151515 12px 24px); }

/* ---------- Loot rarity cards ---------- */
.loot { --r: var(--r-common); border-top: 3px solid var(--r) !important; }
.loot-common { --r: var(--r-common); }
.loot-rare { --r: var(--r-rare); }
.loot-epic { --r: var(--r-epic); }
.loot-legendary { --r: var(--r-legend); }
.loot::before { background: radial-gradient(140px 90px at 50% 0, color-mix(in srgb, var(--r) 30%, transparent), transparent 72%) !important; opacity: .9 !important; }
.loot:hover { border-color: var(--r) !important; box-shadow: 0 0 0 1px var(--r), 0 10px 28px color-mix(in srgb, var(--r) 25%, transparent); }
.loot-tier { position: absolute; top: 8px; left: 12px; font-family: var(--font-num); font-size: .78rem; letter-spacing: .16em; color: var(--r); }
.loot-legendary .uc-ico, .loot-legendary .item-ico { filter: drop-shadow(0 0 10px rgba(242,169,0,.6)); }
.package-card { padding-top: 30px; }
.package-card.hot::after { background: #ff5a4a; color: #fff; content: "HOT DROP"; }
.package-buy { font-family: var(--font-num); font-size: .95rem; letter-spacing: .18em; }
.home-cat { font-family: "Black Ops One", var(--font-display); font-weight: 400; }

/* ---------- Steps ---------- */
.step { padding: 22px 20px 20px; }
.step::before { display: none; }
.step-tag { display: inline-block; font-family: "Black Ops One", var(--font-display); font-size: 1.35rem; color: #111; background: var(--yellow); padding: 2px 12px; margin-bottom: 10px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* ---------- Kill feed ---------- */
.killfeed .order-feed-item {
  display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.2)); border: 1px solid rgba(236,230,214,.08); border-left: 3px solid var(--yellow); padding: 9px 14px;
}
.kf-player { font-family: var(--font-num); font-size: 1.2rem; letter-spacing: .05em; color: #fff; }
.kf-weapon { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.kf-weapon .uc-ico { width: 20px; height: 20px; }
.kf-loot { color: var(--yellow); font-family: var(--font-num); font-size: 1.25rem; font-weight: 500; letter-spacing: .03em; }
.killfeed .order-feed-time { margin: 0; font-size: .78rem; color: var(--muted); }
@media (max-width: 560px) {
  .killfeed .order-feed-item { grid-template-columns: auto 1fr auto; row-gap: 2px; }
  .killfeed .kf-weapon { display: none; }
  .killfeed .order-feed-time { grid-column: 1 / 3; }
}

/* ---------- Gear features ---------- */
.gear-ico { width: 52px; height: 52px; margin-bottom: 10px; }
.feature h3 { font-family: "Black Ops One", var(--font-display); font-weight: 400; font-size: 1.15rem; }

/* ---------- Order page: loadout ---------- */
.order-form { border-top: 3px solid var(--yellow); }
.field-group > label { font-family: "Rajdhani", "Noto Sans Myanmar", sans-serif; font-size: 1.08rem; }
.package-select-btn.selected { box-shadow: inset 0 0 0 1px var(--yellow), 0 0 18px rgba(242,169,0,.25); }
.cat-tab { font-family: "Rajdhani", "Noto Sans Myanmar", sans-serif; }
#order-total { font-family: var(--font-num); }
.stat-num, .balance-amount { font-family: var(--font-num); }
.package-diamond, .package-select-btn .psb-amt { font-family: var(--font-num); font-weight: 600; }
.package-select-btn .psb-amt { font-size: 1.6rem; }
.item-card .package-diamond { font-family: var(--font-body); }

/* =========================================================
   v3 — circle spotlight hero (clean charcoal + yellow pills)
   ========================================================= */
:root {
  --yellow: #ffc400;
  --font-display: "Teko", "Noto Sans Myanmar", sans-serif;
  --charcoal: #1f2022;
}
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.4rem); }
.home-cat, .feature h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; }
.btn { font-family: "Rajdhani", "Noto Sans Myanmar", sans-serif; font-weight: 700; }

/* nav pills */
.main-nav a.btn-nav-login, .main-nav a.btn-nav {
  border-radius: 999px; clip-path: none; padding: 7px 22px !important; margin-left: 8px; font-weight: 700;
}
.main-nav a.btn-nav-login { background: var(--yellow); color: #111 !important; }
.main-nav a.btn-nav { background: #2a2b2e; color: #fff !important; border: 1px solid #3a3b3f; }
.main-nav a.btn-nav-login::after, .main-nav a.btn-nav::after { display: none; }
@media (max-width: 820px) { .main-nav a.btn-nav-login, .main-nav a.btn-nav { border-radius: 0; margin: 0; text-align: center; } }

/* hero */
.cs-hero { padding: 0; min-height: 640px; overflow: hidden; border-bottom: 0;
  background: radial-gradient(900px 600px at 70% 45%, #2c2d30, #1b1c1e 60%, #131415); }
.cs-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/img/zone-map.svg") center / cover no-repeat; opacity: .16; filter: grayscale(1); }
.cs-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cs-ring { position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.cs-ring.r1 { width: 900px; height: 900px; left: 50%; top: 50%; transform: translate(-30%, -52%); }
.cs-ring.r2 { width: 1300px; height: 1300px; left: 50%; top: 50%; transform: translate(-40%, -50%); border-color: rgba(255,255,255,.06); }
.cs-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; min-height: 560px; padding-top: 30px; }
.cs-over { display: block; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .9rem; color: #fff; margin-bottom: 6px; }
.cs-title { font-size: clamp(3rem, 7.4vw, 5.6rem); line-height: .9; margin: 0 0 18px; color: #fff; letter-spacing: .05em; }
.cs-title span { color: var(--yellow); }
.cs-title b { font-weight: 600; color: #fff; }
.cs-sub { color: #c9c9c4; font-size: 1.08rem; max-width: 470px; margin: 0 0 26px; font-weight: 600; }
.cs-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cs-play { display: inline-flex; align-items: center; gap: 14px; background: #fff; color: #111; font-weight: 800; letter-spacing: .08em;
  padding: 6px 6px 6px 24px; border-radius: 999px; font-size: 1rem; transition: transform .12s, box-shadow .15s; }
.cs-play:hover { color: #111; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,196,0,.25); }
.cs-play-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: .9rem; padding-left: 3px; }
.cs-ghost { padding: 12px 26px; border-radius: 999px; border: 1px solid #45464b; color: #fff; font-weight: 800; letter-spacing: .08em; }
.cs-ghost:hover { border-color: var(--yellow); color: var(--yellow); }

.cs-art { position: relative; height: 560px; display: flex; align-items: flex-end; justify-content: center; }
.cs-circle { position: absolute; left: 50%; top: 52%; width: 430px; height: 430px; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: radial-gradient(circle at 50% 40%, #3a3b3f, #242528 70%); box-shadow: 0 0 0 14px rgba(255,255,255,.03); }
.cs-figure { position: relative; height: 560px; max-width: none; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6));
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.cs-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: rgba(20,21,22,.85); border: 1px solid #3a3b3f; font-weight: 800; letter-spacing: .06em; font-size: .85rem; backdrop-filter: blur(6px); }
.cs-chip.c1 { top: 24%; right: 4%; color: var(--yellow); }
.cs-chip.c2 { bottom: 18%; left: 2%; color: var(--green); }

.cs-rail { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cs-left { left: 26px; color: #6d6e72; font-weight: 700; font-size: .85rem; }
.cs-left .on { color: var(--yellow); }
.cs-left i { width: 1px; height: 90px; background: linear-gradient(var(--yellow) 30%, #3a3b3f 30%); }
.cs-right { right: 26px; }
.cs-right a { color: #bfbfba; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #3a3b3f; }
.cs-right a:hover { color: #111; background: var(--yellow); border-color: var(--yellow); }
.cs-right::before, .cs-right::after { content: ""; width: 1px; height: 60px; background: #3a3b3f; }

.cs-bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 16px; padding-bottom: 22px; border-top: 1px solid rgba(255,255,255,.08); }
.cs-pay-label { color: #8a8b8f; font-weight: 700; letter-spacing: .16em; font-size: .8rem; margin-right: 6px; }
.cs-bottom .pm-badge { border-radius: 999px; padding: 5px 14px; font-size: .78rem; }
.cs-live { margin-left: auto; color: #c9c9c4; font-weight: 700; letter-spacing: .14em; font-size: .8rem; }

@media (max-width: 900px) {
  .cs-hero { min-height: 0; }
  .cs-wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 16px; }
  .cs-art { order: -1; height: 360px; }
  .cs-figure { height: 360px; }
  .cs-circle { width: 280px; height: 280px; }
  .cs-rail { display: none; }
  .cs-live { margin-left: 0; width: 100%; }
}

/* =========================================================
   v4 — full-width banner hero (owner-supplied artwork)
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.banner-hero { position: relative; background: #0d0e10; line-height: 0; }
.banner-hero picture, .banner-img { display: block; width: 100%; height: auto; }
.banner-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.banner-bar { position: relative; z-index: 1; margin-top: -8px; }
.banner-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 14px; }
.bb-text b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: #fff; }
.bb-text span { color: #c9c9c4; font-weight: 600; }
.bb-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bb-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; padding-bottom: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.bb-pay .pm-badge { border-radius: 999px; padding: 5px 14px; font-size: .78rem; }
@media (max-width: 640px) {
  .banner-img { aspect-ratio: 800 / 667; object-fit: cover; }
  .bb-text b { font-size: 1.5rem; }
  .bb-cta { width: 100%; }
  .bb-cta .cs-play { flex: 1; justify-content: space-between; }
  .cs-live { margin-left: 0; width: 100%; }
}
/* keep side gutters on content sections (their vertical padding rules override .container) */
.container.packages, .container.why, .container.steps, .container.latest-orders, .container.seo-content { padding-left: 20px; padding-right: 20px; }
@media (max-width: 480px) { .container.packages, .container.why, .container.steps, .container.latest-orders, .container.seo-content { padding-left: 16px; padding-right: 16px; } }

/* =========================================================
   v5 — framed banner + intro card + step cards
   ========================================================= */
.bn-hero { position: relative; padding: 22px 0 10px; }
.bn-band { position: absolute; left: 0; right: 0; top: 0; height: 330px; z-index: 0;
  background: linear-gradient(180deg, #17140c, #120f08 70%, #0f0d09); border-bottom: 1px solid rgba(255,196,0,.12); }
.bn-band::after { content: ""; position: absolute; inset: 0; background: url("/img/zone-map.svg") center / cover no-repeat; opacity: .12; filter: grayscale(1); }
.bn-wrap { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.bn-frame { display: block; }
.bn-img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid rgba(255,196,0,.25);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.03); }

.bn-card { margin: 22px 20px 0; padding: 28px 30px; border-radius: 20px;
  background: linear-gradient(135deg, #1d1f23, #15171a 60%, #1a1712); border: 1px solid #34363b;
  box-shadow: 0 18px 40px rgba(0,0,0,.45); position: relative; overflow: hidden; }
.bn-card::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,196,0,.14), transparent 70%); }
.bn-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,196,0,.45);
  background: rgba(255,196,0,.08); color: #ffe08a; font-weight: 800; font-size: .78rem; letter-spacing: .1em; }
.bn-title { font-family: "Noto Sans Myanmar", "Rajdhani", sans-serif; text-transform: none; letter-spacing: 0; font-weight: 700;
  font-size: clamp(1.45rem, 3.4vw, 2.1rem); line-height: 1.5; margin: 14px 0 6px; color: #fff; }
.bn-title em { font-style: normal; color: var(--yellow); }
.bn-sub { color: #c9c9c4; max-width: 640px; margin: 0 0 22px; font-weight: 500; }
.bn-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.bn-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 999px; font-weight: 700;
  font-family: "Noto Sans Myanmar", "Rajdhani", sans-serif; font-size: 1rem; transition: transform .12s, box-shadow .15s, background .15s; }
.bn-btn.primary { background: linear-gradient(135deg, #ffd23f, #ffb300); color: #151515; box-shadow: 0 8px 22px rgba(255,179,0,.35); }
.bn-btn.primary:hover { color: #151515; transform: translateY(-2px); }
.bn-btn.ghost { border: 1.5px solid #5a5c62; color: #fff; }
.bn-btn.ghost:hover { border-color: var(--yellow); color: var(--yellow); }

.bn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 20px 0; }
.bn-step { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: #16181b; border: 1px solid #2c2e33; }
.bn-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(135deg, #ffd23f, #ffb300); color: #151515; box-shadow: 0 4px 12px rgba(255,179,0,.3); }
.bn-step b { display: block; font-family: "Noto Sans Myanmar", "Rajdhani", sans-serif; font-size: 1rem; color: #fff; }
.bn-step small { color: var(--muted); font-size: .82rem; }

@media (max-width: 900px) { .bn-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .bn-hero { padding-top: 14px; }
  .bn-band { height: 260px; }
  .bn-wrap { padding: 0 14px; }
  .bn-img { aspect-ratio: 800 / 667; object-fit: cover; border-radius: 16px; }
  .bn-card { margin: 16px 0 0; padding: 22px 18px; }
  .bn-steps { margin: 14px 0 0; gap: 10px; }
  .bn-step { padding: 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .bn-btn { flex: 1; }
}

/* =========================================================
   v6 — mobile polish (≤640px): compact header, full banner
   message, stacked buttons, compact steps, 3-col UC grid,
   swipeable item rows, 2-col features
   ========================================================= */
@media (max-width: 640px) {
  /* header */
  .nav-wrap { padding: 10px 14px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-text b { font-size: 1.25rem; height: auto; padding-top: 2px; line-height: 1.1; }
  .brand-text small { font-size: .55rem; letter-spacing: .36em; }
  .nav-toggle { padding: 7px 6px; }

  /* banner + intro */
  .bn-img { aspect-ratio: 900 / 413; object-fit: cover; }
  .bn-band { height: 200px; }
  .bn-card { padding: 18px 16px; border-radius: 16px; }
  .bn-pill { font-size: .66rem; padding: 5px 10px; letter-spacing: .06em; }
  .bn-title { font-size: 1.28rem; line-height: 1.55; margin: 10px 0 4px; }
  .bn-sub { font-size: .9rem; margin-bottom: 16px; }
  .bn-cta { flex-direction: column; gap: 10px; }
  .bn-btn { width: 100%; white-space: nowrap; padding: 12px 18px; font-size: .98rem; }

  /* steps: compact 2×2 */
  .bn-steps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bn-step { flex-direction: row; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; }
  .bn-num { width: 26px; height: 26px; font-size: .85rem; }
  .bn-step b { font-size: .86rem; line-height: 1.4; }
  .bn-step small { display: none; }

  /* section rhythm */
  .why, .packages, .steps { padding-top: 26px; padding-bottom: 26px; }
  .latest-orders { padding-bottom: 26px; }
  .section-head { margin-bottom: 0; }
  .section-head > p { display: none; }
  .home-cat { font-size: 1.2rem; margin-top: 18px; }

  /* UC packages: 3 compact columns */
  .package-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
  .package-card { padding: 20px 4px 10px; gap: 2px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
  .package-card .uc-ico { width: 30px; height: 30px; margin-bottom: 2px; }
  .package-diamond { font-size: 1.35rem; }
  .package-price { font-size: .78rem; }
  .package-buy { display: none; }
  .loot-tier { top: 5px; left: 7px; font-size: .58rem; letter-spacing: .1em; }
  .package-card.hot::after { font-size: .5rem; top: 5px; right: 5px; padding: 1px 4px; content: "HOT"; }

  /* item categories: swipeable rows */
  .package-grid.item-row { display: grid; grid-auto-flow: column; grid-auto-columns: 40%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .package-grid.item-row::-webkit-scrollbar { display: none; }
  .item-row .package-card { scroll-snap-align: start; }
  .item-card .item-ico { font-size: 1.6rem; }
  .item-card .package-diamond { font-size: .84rem; min-height: 2.6em; line-height: 1.25; padding: 0 4px; }

  /* features: 2 columns */
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .feature { padding: 14px 12px; }
  .gear-ico { width: 34px; height: 34px; margin-bottom: 6px; }
  .feature h3 { font-size: 1.05rem; }
  .feature p { font-size: .8rem; line-height: 1.5; }

  /* kill feed */
  .killfeed .order-feed-item { padding: 8px 10px; column-gap: 8px; }
  .kf-player { font-size: 1rem; }
  .kf-loot { font-size: 1.05rem; }

  /* footer */
  .site-footer { padding-top: 30px; margin-top: 30px; }
  .footer-wrap { gap: 18px; }
}
@media (max-width: 640px) {
  .bn-img { aspect-ratio: auto; object-fit: fill; }
  .footer-wrap { grid-template-columns: 1fr 1fr; }
  .footer-wrap > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { font-size: .75rem; }
}
/* order page — mobile */
@media (max-width: 640px) {
  .page-head { padding-top: 14px; }
  .page-head h1 { font-size: 1.9rem; margin: 4px 0 2px; }
  .page-head p { font-size: .88rem; margin: 0; }
  .order-form { padding: 16px 12px; margin-top: 12px; }
  .cat-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 10px; padding: 0 12px; }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab { flex: none; padding: 7px 12px; font-size: .85rem; border-radius: 999px; }
  .package-select-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .item-grid { grid-template-columns: repeat(2, 1fr); }
  .package-select-btn { min-height: 0; padding: 10px 2px 8px; clip-path: none; border-radius: 10px; }
  .package-select-btn .uc-ico { width: 22px; height: 22px; }
  .package-select-btn .psb-amt { font-size: 1.2rem; }
  .package-select-btn small { font-size: .7rem; }
  .item-btn { min-height: 0; }
  .item-ico { font-size: 1.2rem; }
  .psb-name { font-size: .8rem; }
  .field-group { margin-bottom: 18px; }
  .field-group > label { margin-bottom: 8px; font-size: .98rem; }
  .pay-method-item { min-height: 72px; padding: 12px 6px 10px; }
  #order-total { font-size: 1.6rem; }
}

/* tutorial links (YouTube if set in admin, otherwise the on-site guide) */
.tut-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.tut-btn.yt { background: #ff0000; color: #fff; box-shadow: 0 3px 10px rgba(255,0,0,.3); }
.tut-btn.yt:hover { color: #fff; filter: brightness(1.1); }
.tut-btn.guide { background: rgba(255,196,0,.1); color: var(--yellow); border: 1px solid rgba(255,196,0,.4); }
.tut-btn.guide:hover { background: rgba(255,196,0,.18); color: var(--yellow); }

/* ---------- help / policy pages ---------- */
.info-page { max-width: 900px; padding-bottom: 20px; }
.info-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 18px; }
.info-tabs a { padding: 7px 14px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: .88rem; }
.info-tabs a:hover { border-color: var(--yellow); color: var(--yellow); }
.info-tabs a.active { background: var(--yellow); border-color: var(--yellow); color: #111; }
.prose { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; line-height: 1.85; }
.prose section { scroll-margin-top: 90px; margin-bottom: 26px; }
.prose section:last-child { margin-bottom: 0; }
.prose h2 { font-family: "Noto Sans Myanmar", "Rajdhani", sans-serif; text-transform: none; letter-spacing: 0; font-size: 1.3rem; font-weight: 700; color: var(--yellow); margin: 22px 0 10px; }
.prose > h2:first-child, .prose section:first-child h2 { margin-top: 0; }
.prose ol, .prose ul { padding-left: 22px; margin: 0 0 12px; }
.prose li { margin-bottom: 6px; }
.prose p { margin: 0 0 12px; }
.prose .tip { background: rgba(255,196,0,.07); border: 1px solid rgba(255,196,0,.25); border-radius: 12px; padding: 12px 14px; font-size: .95rem; }
.how-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 6px 0 16px; }
.how-steps div { background: var(--card-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; line-height: 1.4; }
.how-steps span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: #111; font-weight: 800; font-size: .85rem; margin-bottom: 6px; }
.how-steps b { display: block; font-size: .95rem; }
.how-steps small { color: var(--muted); font-size: .78rem; }
.status-table { display: grid; gap: 8px; }
.status-table div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.status-table p { margin: 0; }
.status-table .badge { justify-self: start; }
.prose details { border: 1px solid var(--border); border-radius: 12px; padding: 0 16px; margin-bottom: 10px; background: var(--card-2); }
.prose details[open] { border-color: rgba(255,196,0,.4); }
.prose summary { cursor: pointer; padding: 14px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; color: var(--yellow); font-weight: 800; }
.prose details[open] summary::after { content: "–"; }
.prose details p { color: #c9c9c4; padding-bottom: 14px; margin: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.contact-card { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--border); color: var(--text); }
.contact-card:hover { border-color: var(--yellow); color: var(--text); }
.c-ico { font-size: 1.6rem; margin-bottom: 4px; }
.contact-card small { color: var(--yellow); font-weight: 700; font-size: .95rem; }
.contact-card em { font-style: normal; color: var(--muted); font-size: .82rem; }
.info-help { margin: 18px 0 0; color: var(--muted); font-size: .92rem; text-align: center; }
.footer-wrap { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .footer-wrap { grid-template-columns: 1fr 1fr; } .footer-wrap > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .how-steps { grid-template-columns: 1fr 1fr; }
  .status-table div { grid-template-columns: 1fr; gap: 4px; }
  .contact-grid { grid-template-columns: 1fr; }
  .prose { padding: 18px 16px; }
  .info-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .info-tabs::-webkit-scrollbar { display: none; }
  .info-tabs a { flex: none; }
}
.main-nav a.nav-mm { font-family: "Noto Sans Myanmar", "Rajdhani", sans-serif; letter-spacing: 0; text-transform: none; font-size: .92rem; }