:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --accent: #f59e0b;
  --bg: #0b0f19;
  --card-bg: #151c2c;
  --card-hover: #1e283d;
  --border: #26334d;
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #0ea5e9;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Prompt", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  background: radial-gradient(circle at 50% -20%, #182e69 0, #080f20 37%, #050913 100%);
}

.navbar {
  background: rgba(21, 28, 44, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Shared slide-out navigation for customer-facing pages */
.nav-brand-group { display:flex; align-items:center; gap:14px; min-width:0; }
.payment-review-ticker { width:min(58vw,760px); margin-left:auto; overflow:hidden; white-space:nowrap; color:#ff3f52; font-size:15px; font-weight:800; letter-spacing:.01em; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.payment-review-ticker span { display:inline-block; min-width:max-content; padding-left:100%; animation:paymentTicker 13s linear infinite; }
@keyframes paymentTicker { from { transform:translateX(0); } to { transform:translateX(-100%); } }
.slip-rejection-modal[hidden] { display:none; }
.slip-rejection-modal { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; width:100vw; height:100dvh; padding:20px; }
.slip-rejection-backdrop { position:fixed; inset:0; z-index:0; background:rgba(1,5,14,.84); backdrop-filter:blur(7px); animation:slipModalFade .2s ease-out both; }
.slip-rejection-dialog { position:relative; z-index:1; width:100%; max-width:470px; max-height:calc(100dvh - 40px); overflow-y:auto; padding:30px; border:1px solid rgba(255,83,103,.5); border-radius:18px; background:linear-gradient(145deg,#1a2233,#101725); box-shadow:0 24px 80px rgba(0,0,0,.58),0 0 35px rgba(239,68,68,.1); text-align:center; animation:slipModalPop .28s cubic-bezier(.2,.85,.3,1.2) both; }
@keyframes slipModalFade { from { opacity:0; } to { opacity:1; } }
@keyframes slipModalPop { from { opacity:0; transform:translateY(22px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
.slip-rejection-icon { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px; border:2px solid #ff5367; border-radius:50%; color:#fff; background:rgba(239,68,68,.18); font-size:31px; font-weight:900; }
.slip-rejection-dialog h2 { margin-bottom:8px; color:#fff; font-size:26px; }
.slip-rejection-dialog > p { color:#aebdd3; }
.slip-rejection-reason { margin:20px 0 14px; padding:15px 17px; border-left:4px solid #ff5367; border-radius:9px; background:rgba(239,68,68,.1); text-align:left; }
.slip-rejection-reason span { display:block; margin-bottom:4px; color:#ff8795; font-size:12px; font-weight:800; letter-spacing:.04em; }
.slip-rejection-reason strong { display:block; color:#fff; line-height:1.65; overflow-wrap:anywhere; }
.slip-rejection-help { margin-bottom:19px; font-size:13px; }
.slip-rejection-dialog .btn { width:100%; }
body.modal-open { overflow:hidden; }
.menu-trigger { width:42px; height:42px; flex:0 0 42px; display:grid; align-content:center; justify-items:center; gap:5px; border:1px solid var(--border); border-radius:12px; color:#fff; background:#111b30; cursor:pointer; }
.menu-trigger:hover,.menu-trigger[aria-expanded="true"] { border-color:#6888ff; background:#17264a; }
.menu-trigger span { width:19px; height:2px; border-radius:2px; background:currentColor; transition:transform .18s,opacity .18s; }
.menu-trigger[aria-expanded="true"] span:first-child { transform:translateY(7px) rotate(45deg); }
.menu-trigger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-trigger[aria-expanded="true"] span:last-child { transform:translateY(-7px) rotate(-45deg); }
.site-menu-backdrop { position:fixed; inset:0; z-index:500; background:rgba(1,5,14,.68); opacity:0; visibility:hidden; transition:opacity .2s,visibility .2s; }
.site-menu-backdrop.is-open { opacity:1; visibility:visible; }
.site-menu-drawer { position:fixed; z-index:501; inset:0 auto 0 0; width:min(340px,88vw); padding:22px 18px; overflow-y:auto; background:#0c1425; border-right:1px solid #2a3c60; box-shadow:18px 0 60px rgba(0,0,0,.42); transform:translateX(-105%); transition:transform .22s ease; }
.site-menu-drawer.is-open { transform:translateX(0); }
.site-menu-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 4px 18px; border-bottom:1px solid var(--border); }
.site-menu-head img { width:190px; height:42px; object-fit:contain; object-position:left center; }
.site-menu-close { width:38px; height:38px; border:1px solid var(--border); border-radius:10px; color:#fff; background:#131f35; font-size:23px; cursor:pointer; }
.site-menu-label { margin:20px 8px 8px; color:#8fa7ce; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.site-menu-links { display:grid; gap:5px; }
.site-menu-links a { display:flex; align-items:center; gap:12px; min-height:46px; padding:10px 12px; border-radius:10px; color:#e8eefc; text-decoration:none; font-size:15px; }
.site-menu-links a:hover,.site-menu-links a:focus-visible { outline:none; background:#182847; color:#fff; }
.site-menu-icon { width:26px; text-align:center; color:#84adff; font-size:18px; }
.site-menu-contact { margin-top:18px; border-top:1px solid var(--border); padding-top:12px; }
.line-contact-icon,.contact-channel-icon { display:block; width:25px!important; height:25px!important; max-width:25px!important; max-height:25px!important; flex:0 0 25px; object-fit:contain; }
.line-friend-widget { position:fixed; z-index:480; right:16px; bottom:22px; width:132px; height:48px; transition:left .3s ease,top .3s ease; }
.line-friend-widget.is-dragging { transition:none; }
.line-friend-widget-card { width:100%;height:100%;overflow:hidden;border:1px solid #49d891;border-radius:999px;background:linear-gradient(135deg,#0a3c36,#102b38);box-shadow:0 8px 22px #0009,inset 0 1px #ffffff24;transition:background .2s ease,box-shadow .2s ease; }
.line-friend-widget:hover .line-friend-widget-card,.line-friend-widget:focus-within .line-friend-widget-card { background:linear-gradient(135deg,#075046,#143b48);box-shadow:0 10px 25px #0009,0 0 0 3px #06c75524; }
.line-friend-widget.is-dragging .line-friend-widget-card { box-shadow:0 16px 32px #000b; }
.line-friend-widget-link { display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:6px;color:#fff;text-decoration:none;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none; }
.line-friend-widget.is-dragging .line-friend-widget-link { cursor:grabbing; }
.line-friend-widget-icon { display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:#fff; }
.line-friend-widget-icon img { display:block;width:29px;height:29px;aspect-ratio:1;object-fit:contain; }
.line-friend-widget-copy { display:flex;flex-direction:column;gap:1px;white-space:nowrap;line-height:1.15;min-width:0; }
.line-friend-widget-copy strong { font-size:11px; font-weight:800; }
.line-friend-widget-copy small { color:#a8ffd0; font-size:10px; font-weight:700; }
.line-friend-widget :focus-visible { outline:3px solid #c9ffe1; outline-offset:3px; }
@media (max-width:600px) { .line-friend-widget { right:12px;bottom:14px;width:48px;height:48px; }.line-friend-widget-card { border-radius:50%; }.line-friend-widget-link { justify-content:center;padding:6px; }.line-friend-widget-icon { width:34px;height:34px; }.line-friend-widget-icon img { width:28px;height:28px; }.line-friend-widget-copy { display:none; } }
@media (prefers-reduced-motion:reduce) { .line-friend-widget,.line-friend-widget-card { transition:none; animation:none; } }
.policy-page { max-width:900px; }
.policy-page h1 { margin:8px 0 10px; font-size:clamp(26px,4vw,36px); }
.policy-updated,.policy-intro { color:var(--text-muted); margin-bottom:18px; }
.policy-notice { padding:14px 16px; margin:18px 0 24px; border:1px solid #8a691b; border-radius:12px; color:#ffe7a0; background:rgba(245,158,11,.1); }
.policy-section { padding:20px; margin:14px 0; border:1px solid var(--border); border-radius:14px; background:rgba(21,28,44,.88); }
.policy-section h2 { margin-bottom:8px; font-size:19px; }
.policy-section p,.policy-section li { color:#c5d0e2; line-height:1.75; }
.policy-section ul { padding-left:22px; }
.history-empty { padding:20px; border:1px dashed #334764; border-radius:12px; color:var(--text-muted); text-align:center; }
.history-item { background:#10192a; border:1px solid var(--border); border-radius:13px; padding:16px; margin:12px 0; }
.history-item h2 { font-size:17px; margin-bottom:6px; }
.history-item p { color:var(--text-muted); margin:3px 0; }
.history-actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.history-actions button { border:1px solid var(--border); border-radius:9px; padding:9px 13px; color:#fff; background:#121e34; cursor:pointer; }
@media(max-width:600px) {
  .navbar { padding:12px 14px; }
  .nav-brand-group { gap:9px; }
  .brand img { width:170px; height:42px; }
  .menu-trigger { width:38px; height:38px; flex-basis:38px; }
  .navbar:has(.payment-review-ticker) { flex-wrap:wrap; }
  .payment-review-ticker { order:2; width:100%; margin:7px 0 0; font-size:13px; }
  .payment-review-ticker span { animation-duration:11s; }
  .slip-rejection-dialog { padding:25px 18px; border-radius:15px; }
  .slip-rejection-dialog h2 { font-size:23px; }
}

.brand {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand { display:inline-flex; align-items:center; }
.brand img { display:block; width:220px; height:48px; object-fit:contain; object-position:left center; animation:brandFloat 3.4s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes brandFloat { 0%, 100% { transform:translateY(0) scale(1); } 38% { transform:translateY(-4px) scale(1.012, .99); } 54% { transform:translateY(-1px) scale(.995, 1.008); } 68% { transform:translateY(-3px) scale(1.005, .997); } }
@media (prefers-reduced-motion: reduce) { .brand img,.slip-rejection-backdrop,.slip-rejection-dialog { animation:none; }.payment-review-ticker span { padding-left:0; animation:none; } }
.brand span { color: var(--accent); }

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  margin-left: 16px;
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }

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

/* Hero Section */
.hero {
  text-align: center;
  padding: 30px 10px;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}
.hero p {
  color: var(--text-muted);
  font-size: 15px;
}

/* Steps Progress */
.step-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.step-number {
  background: var(--primary);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.step-title {
  font-size: 18px;
  font-weight: 700;
}

/* Game Grid */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
.game-item {
  background: #0f1624;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.game-item:hover {
  border-color: var(--primary);
  background: var(--card-hover);
  transform: translateY(-2px);
}
.game-item.selected {
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.1);
}
.game-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 8px;
}
.game-name {
  font-size: 13px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Package Grid */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.package-item {
  background: #0f1624;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.package-item:hover {
  border-color: var(--primary);
  background: var(--card-hover);
}
.package-item.selected {
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.1);
}
.pkg-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.pkg-price { font-size: 18px; font-weight: 800; color: var(--accent); }

/* Form Controls */
.form-group {
  margin-bottom: 16px;
}
label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
input, select {
  width: 100%;
  background: #0f1624;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-size: 15px;
  outline: none;
}
input:focus, select:focus {
  border-color: var(--primary);
}
input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.contact-hint {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Buttons */
.btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-accent { background: var(--accent); color: #000; }
.btn-accent:hover { background: #d97706; }

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
}
.badge-PENDING_PAYMENT { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid #f59e0b; }
.badge-PAYMENT_VERIFYING { background: rgba(14, 165, 233, 0.2); color: #38bdf8; border: 1px solid #0ea5e9; }
.badge-PAID { background: rgba(99, 102, 241, 0.2); color: #818cf8; border: 1px solid #6366f1; }
.badge-TOPUP_PROCESSING { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid #a855f7; }
.badge-SUCCESS { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid #10b981; }
.badge-FAILED { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid #ef4444; }
.badge-REFUND_REQUIRED { background: rgba(239, 68, 68, 0.3); color: #fca5a5; border: 1px solid #f87171; }
.badge-CANCELLED { background: rgba(100, 116, 139, 0.2); color: #94a3b8; border: 1px solid #64748b; }

/* QR Code & Slip Box */
.qr-container {
  text-align: center;
  background: #fff;
  color: #000;
  border-radius: 12px;
  padding: 20px;
  margin: 16px 0;
}
.qr-image {
  max-width: 220px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.qr-instructions {
  font-size: 13px;
  color: #475569;
  margin-top: 10px;
}

/* Upload Dropzone */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
  background: #0f1624;
}
.dropzone:hover {
  border-color: var(--primary);
}
.slip-preview {
  max-width: 200px;
  max-height: 250px;
  border-radius: 8px;
  margin: 12px auto;
  display: none;
}

/* Customer dashboard refresh */
.navbar { padding: 14px max(24px, calc((100% - 1560px) / 2)); background: rgba(6, 14, 30, .9); }
.brand { font-size: 25px; font-style: italic; letter-spacing: -.5px; }
.brand b { color: #a95cff; font-size: 31px; transform: rotate(-12deg); }
.brand span { background: linear-gradient(90deg,#7f61ff,#28b3ff); -webkit-background-clip:text; color:transparent; }
.nav-links { display:flex; align-items:center; gap: 12px; }
.nav-links a { margin:0; padding:10px 13px; font-weight:700; }
.nav-links a.active { color:#fff; border-bottom:3px solid #6b61ff; }
.nav-links .login-link { border-radius:999px; color:#fff; background:linear-gradient(90deg,#7256f5,#279df7); padding:10px 18px; }
.container { max-width: 1560px; padding: 14px 24px 38px; }
.hero { width:min(78%,1220px); height:clamp(220px,21vw,315px); min-height:0; padding:0; border:1px solid #274478; border-radius:16px; margin:0 auto 14px 0; overflow:hidden; position:relative; background:#08152e; box-shadow:0 16px 42px rgba(0,0,0,.22); }
.hero-copy { position:relative; z-index:2; max-width:610px; }
.eyebrow { color:#82b6ff; font-size:13px; font-weight:800; letter-spacing:.08em; }
.hero h1 { font-size:44px; line-height:1.15; margin:9px 0 12px; letter-spacing:-1px; }
.hero h1 em { font-style:normal; background:linear-gradient(90deg,#c394ff,#40baff); -webkit-background-clip:text; color:transparent; }
.hero p { font-size:16px; color:#d5e2f8; }
.hero-pills { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.hero-pills span { background:rgba(18,49,97,.82); border:1px solid #30558a; padding:9px 13px; border-radius:999px; font-size:13px; font-weight:700; }
.hero-art { width:100%; height:100%; margin:0; overflow:hidden; position:relative; }
.banner-track { display:flex; width:100%; height:100%; transform:translateX(0); transition:transform .65s cubic-bezier(.22,.75,.25,1); will-change:transform; }
.banner-track.is-dragging { transition:none; cursor:grabbing; }
.hero-art img.banner-slide { display:block; flex:0 0 100%; width:100%; height:100%; object-fit:cover; object-position:center; cursor:grab; user-select:none; -webkit-user-drag:none; touch-action:pan-y; }
.banner-dots { position:absolute; z-index:3; left:50%; bottom:12px; display:flex; gap:8px; transform:translateX(-50%); padding:6px 9px; border-radius:999px; background:rgba(3,10,24,.5); backdrop-filter:blur(5px); }
.banner-dots button { width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.55); cursor:pointer; transition:width .25s,background .25s; }
.banner-dots button.is-active { width:25px; background:#fff; }
@media (prefers-reduced-motion: reduce) { .banner-track { transition:none; } }
.flash-sale-section { margin:14px 0 18px; padding:20px; border:1px solid rgba(255,91,57,.5); border-radius:17px; background:linear-gradient(115deg,rgba(44,17,29,.94),rgba(12,22,44,.96) 55%,rgba(9,21,43,.96)); box-shadow:0 12px 34px rgba(0,0,0,.18); }
.flash-sale-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.flash-sale-kicker { color:#ff9c82; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.flash-sale-heading h2 { margin-top:2px; color:#fff; font-size:24px; line-height:1.2; font-weight:900; }
.flash-sale-heading > a { color:#ffc1ae; font-weight:700; text-decoration:none; white-space:nowrap; }
.flash-sale-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:12px; }
.flash-sale-card { display:flex; align-items:center; gap:12px; min-width:0; padding:11px; border:1px solid rgba(255,141,110,.28); border-radius:13px; color:inherit; text-decoration:none; background:rgba(6,16,34,.78); transition:transform .18s,border-color .18s,background .18s; }
.flash-sale-card:hover,.flash-sale-card:focus-visible { transform:translateY(-2px); border-color:#ff765a; outline:none; background:rgba(37,34,59,.96); }
.flash-sale-image-wrap { position:relative; flex:0 0 62px; width:62px; height:62px; }
.flash-sale-image-wrap img { width:100%; height:100%; border-radius:10px; object-fit:cover; background:#15213a; }
.flash-sale-badge { position:absolute; top:-6px; left:-7px; padding:2px 6px; border-radius:999px; color:#fff; background:#f04438; font-size:10px; line-height:1.5; font-weight:900; }
.flash-sale-copy { min-width:0; display:grid; gap:3px; }
.flash-sale-game { color:#9eb3d2; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flash-sale-product { color:#fff; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flash-sale-prices { display:flex; align-items:baseline; gap:8px; }
.flash-sale-prices b { color:#ff785d; font-size:17px; }
.flash-sale-prices del { color:#91a0b9; font-size:12px; }
.flash-sale-empty { grid-column:1/-1; padding:16px; border:1px dashed rgba(255,141,110,.4); border-radius:12px; color:#c3cfe1; text-align:center; }
.flash-sale-stock,.pkg-flash-stock { color:#ffc1ae;font-size:11px;font-weight:700; }
.flash-sale-time,.pkg-flash-time { display:grid;gap:4px;min-width:0;margin-top:4px; }
.flash-sale-time-head { display:flex;justify-content:space-between;align-items:center;gap:7px;color:#b7c8df;font-size:10px;line-height:1.3; }
.flash-sale-countdown-label,.pkg-flash-countdown-label { color:#ffd166;font-size:10px;font-weight:800;white-space:nowrap; }
.flash-sale-energy-track,.pkg-flash-energy-track { position:relative;isolation:isolate;display:block;overflow:visible;width:100%;height:7px;border:1px solid rgba(148,163,184,.28);border-radius:999px;background:#070d19;box-shadow:inset 0 1px 3px rgba(0,0,0,.7); }
.flash-sale-energy-fill,.pkg-flash-energy-fill { position:relative;display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#34d399,#a3e635 55%,#facc15);box-shadow:0 0 9px rgba(52,211,153,.75);transition:width .8s linear,background .5s,box-shadow .5s; }
.flash-sale-energy-fill::before,.pkg-flash-energy-fill::before { content:"";position:absolute;z-index:2;right:-6px;top:-7px;width:15px;height:19px;border-radius:55% 45% 52% 48%;background:radial-gradient(ellipse at 50% 72%,#fff7ad 0 13%,#fff 14% 23%,#ffec65 27% 43%,#ff8a24 55%,rgba(255,52,15,.08) 76%,transparent 78%);filter:drop-shadow(0 0 4px #ff9b24) drop-shadow(0 0 8px rgba(255,56,20,.8));transform-origin:50% 85%;animation:flashFlameDance .24s ease-in-out infinite alternate; }
.flash-sale-energy-fill::after,.pkg-flash-energy-fill::after { content:"";position:absolute;z-index:1;right:-4px;top:-5px;width:11px;height:16px;background:linear-gradient(155deg,#fff9b0 5%,#ffd52e 37%,#ff6a1a 72%,transparent 74%);clip-path:polygon(48% 0,78% 27%,66% 43%,100% 57%,71% 100%,24% 91%,0 63%,30% 48%,22% 29%);filter:drop-shadow(0 0 5px #ff681e);animation:flashFlameFlicker .18s steps(2,end) infinite alternate; }
.flash-sale-time[data-energy="medium"] .flash-sale-energy-fill,.pkg-flash-time[data-energy="medium"] .pkg-flash-energy-fill { background:linear-gradient(90deg,#facc15,#fb923c);box-shadow:0 0 9px rgba(251,146,60,.72); }
.flash-sale-time[data-energy="low"] .flash-sale-energy-fill,.pkg-flash-time[data-energy="low"] .pkg-flash-energy-fill { background:linear-gradient(90deg,#fb7185,#ef4444);box-shadow:0 0 10px rgba(239,68,68,.8); }
.flash-sale-time[data-energy="low"] .flash-sale-energy-fill::before,.pkg-flash-time[data-energy="low"] .pkg-flash-energy-fill::before { animation-duration:.13s;width:17px;height:22px;top:-9px; }
.flash-sale-time[data-energy="low"] .flash-sale-countdown-label,.pkg-flash-time[data-energy="low"] .pkg-flash-countdown-label { color:#ff8068;animation:flashUrgencyPulse .7s ease-in-out infinite alternate; }
.pkg-flash-energy-track { height:6px; }
@keyframes flashFlameDance { from { transform:rotate(-8deg) scale(.9,.94); } to { transform:rotate(9deg) scale(1.08,1.12); } }
@keyframes flashFlameFlicker { from { opacity:.78;transform:scale(.88) rotate(-7deg); } to { opacity:1;transform:scale(1.12) rotate(8deg); } }
@keyframes flashUrgencyPulse { from { text-shadow:0 0 0 rgba(255,91,57,0); } to { text-shadow:0 0 9px rgba(255,91,57,.75); } }
@media(prefers-reduced-motion:reduce) { .flash-sale-energy-fill,.pkg-flash-energy-fill,.flash-sale-energy-fill::before,.pkg-flash-energy-fill::before,.flash-sale-energy-fill::after,.pkg-flash-energy-fill::after,.flash-sale-time[data-energy="low"] .flash-sale-countdown-label,.pkg-flash-time[data-energy="low"] .pkg-flash-countdown-label { animation:none!important;transition:none!important; } }
.pkg-flash-badge { display:inline-flex;width:max-content;margin-top:6px;padding:3px 7px;border-radius:999px;color:#fff;background:#d94828;font-size:10px;font-weight:900; }
.order-flash-sale-notice { margin:0 0 10px;padding:8px 10px;border:1px solid rgba(255,112,82,.55);border-radius:9px;color:#ffc1ae;background:rgba(124,45,18,.24);font-size:13px;font-weight:800; }
.order-flash-sale-notice[hidden] { display:none!important; }
.package-item .pkg-price del { color:#8ca0bb;font-size:12px;font-weight:500;margin-right:4px; }
.game-sidebar, .service-sidebar { border:1px solid #243e6d; background:rgba(9,21,43,.88); border-radius:13px; }
.content-layout { display:grid; grid-template-columns:220px minmax(0,1fr) 260px; gap:14px; align-items:start; }
.game-sidebar, .service-sidebar { padding:17px; position:sticky; top:78px; }
.game-sidebar h2, .service-sidebar h2 { font-size:16px; margin-bottom:16px; }
.game-sidebar p { color:#b8c9e5; padding:10px; font-size:13px; }.game-sidebar .sidebar-active { color:#fff; background:linear-gradient(90deg,#4b3ac7,#244a9b); border-radius:8px; font-weight:700; }
.service-sidebar p { padding:12px 0 12px 42px; position:relative; border-bottom:1px solid #20365b; font-size:14px; }.service-sidebar p:before { content:'✦'; position:absolute; left:7px; top:14px; color:#80b4ff; font-size:22px; }.service-sidebar .online { color:#32e5a0; font-weight:800; padding-top:16px; }.online small { display:block; margin-left:15px; }
.step-card { padding:20px; margin-bottom:14px; border-radius:13px; background:linear-gradient(145deg,rgba(15,33,65,.94),rgba(7,17,35,.94)); border-color:#294a7c; box-shadow:none; }
.step-header { margin-bottom:15px; }.step-number { width:27px; height:27px; background:linear-gradient(135deg,#7c63fc,#229cf3); }.step-title { font-size:17px; }.step-title small { display:block; color:var(--text-muted); font-size:12px; font-weight:400; }
.game-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:13px; }.game-item { padding:9px; text-align:left; background:#0a1831; border:1px solid #2a518b; }.game-img { width:100%; height:100px; margin-bottom:7px; border-radius:8px; }.game-item.selected { border-color:#8c72ff; box-shadow:0 0 0 2px rgba(114,92,255,.26); background:#162c58; }
.package-item { background:#0a1831; border:1px solid #2a518b; }.package-item.selected { border-color:#8c72ff; background:#162c58; }.pkg-price { color:#62baff; }
.checkout-card { border-color:#5a54cc; background:linear-gradient(110deg,#111e51,#171253); }.btn-primary { background:linear-gradient(90deg,#7155f5,#2a9eff); }.btn-primary:hover { background:linear-gradient(90deg,#8068ff,#40aaff); transform:translateY(-1px); }
.back-link { display:inline-block; color:#a9caff; text-decoration:none; font-weight:700; margin:4px 0 14px; }
.game-page-container { max-width:1120px; }
.selected-game-banner { min-height:160px; display:flex; align-items:center; gap:22px; padding:24px 30px; border:1px solid #284a80; border-radius:14px; background:linear-gradient(115deg,#111f49,#122c5d); margin-bottom:14px; }
.selected-game-banner img { width:112px; height:112px; object-fit:cover; border-radius:14px; border:1px solid #5486ca; background:#0b1730; }.selected-game-banner h1 { font-size:30px; margin:5px 0; }.selected-game-banner p { color:var(--text-muted); }
.game-order-layout { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:14px; }.packages-card { min-height:250px; }.checkout-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:17px; font-weight:700; }.checkout-row strong { font-size:28px; color:#6dc0ff; }.order-error { display:none; color:var(--danger); font-size:14px; margin-top:10px; }
.selected-game-copy { min-width:0; }
.game-trust-row { display:flex;flex-wrap:wrap;gap:8px;margin-top:15px; }
.game-trust-row span { padding:6px 10px;border:1px solid #ffffff1f;border-radius:999px;background:#07122666;color:#c7d8ef;font-size:12px;font-weight:700; }
.step-title small { margin-top:3px; }
.package-item { appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer; }
.package-item:focus-visible { outline:3px solid #a9caff;outline-offset:3px; }
.checkout-row > span { display:grid;gap:4px; }
.checkout-row small { color:#9fb2ce;font-size:12px;font-weight:500; }
.checkout-assurance { margin:12px 0 0;color:#98aac4;text-align:center;font-size:12px; }

/* RoV order page: a focused navy, gold and ember-red treatment. */
body[data-page="game"][data-game-theme="rov"] { background:radial-gradient(circle at 75% 10%,#17355e 0,transparent 32%),radial-gradient(circle at 12% 35%,#4d1d1c55 0,transparent 28%),#050b15; }
body[data-page="game"][data-game-theme="rov"] .selected-game-banner { position:relative;overflow:hidden;min-height:190px;border-color:#caa65b88;background:linear-gradient(112deg,#481815 0,#132b4d 46%,#071426 100%);box-shadow:0 18px 45px #0007; }
body[data-page="game"][data-game-theme="rov"] .selected-game-banner::after { content:'';position:absolute;inset:-70% -10% auto 52%;height:240%;background:linear-gradient(105deg,transparent,#e4bd6440,transparent);transform:rotate(12deg);pointer-events:none; }
body[data-page="game"][data-game-theme="rov"] .selected-game-banner img { z-index:1;width:132px;height:132px;border:2px solid #e2bd69;box-shadow:0 0 0 5px #07111b77,0 12px 30px #0008; }
body[data-page="game"][data-game-theme="rov"] .selected-game-copy { z-index:1; }
body[data-page="game"][data-game-theme="rov"] .selected-game-banner h1 { font-size:clamp(30px,5vw,48px);letter-spacing:-.035em;text-shadow:0 3px 18px #000; }
body[data-page="game"][data-game-theme="rov"] .eyebrow { color:#f5d88c;letter-spacing:.06em; }
body[data-page="game"][data-game-theme="rov"] .step-card { border-color:#304e72;background:linear-gradient(145deg,#0d213cfa,#081525fa);box-shadow:0 12px 32px #0003; }
body[data-page="game"][data-game-theme="rov"] .step-number { color:#26190a;background:linear-gradient(135deg,#f5dd91,#bc7b26);box-shadow:0 5px 16px #d1943540; }
body[data-page="game"][data-game-theme="rov"] input:focus,body[data-page="game"][data-game-theme="rov"] select:focus { border-color:#d7ad55;box-shadow:0 0 0 3px #d7ad5524; }
body[data-page="game"][data-game-theme="rov"] .package-item { position:relative;min-height:112px;border-color:#355a83;border-radius:15px;background:linear-gradient(145deg,#102845,#09182b);transition:transform .18s,border-color .18s,box-shadow .18s; }
body[data-page="game"][data-game-theme="rov"] .package-item { display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px;min-height:124px;overflow:hidden; }
body[data-page="game"][data-game-theme="rov"] .pkg-art-wrap { display:grid;place-items:center;width:76px;height:76px; }
body[data-page="game"][data-game-theme="rov"] .pkg-art { display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px #0008); }
body[data-page="game"][data-game-theme="rov"] .pkg-copy { min-width:0; }
body[data-page="game"][data-game-theme="rov"] .package-item:hover { transform:translateY(-3px);border-color:#bd9853;box-shadow:0 12px 22px #0005; }
body[data-page="game"][data-game-theme="rov"] .package-item.selected { border-color:#f0c96c;background:linear-gradient(145deg,#253e62,#4c271d);box-shadow:0 0 0 2px #f0c96c33,0 12px 25px #0006; }
body[data-page="game"][data-game-theme="rov"] .package-item.selected::after { content:'✓ เลือกแล้ว';position:absolute;right:11px;top:10px;color:#ffe6a9;font-size:10px;font-weight:800; }
body[data-page="game"][data-game-theme="rov"] .pkg-price { color:#f6ca68;font-size:20px; }
@media (max-width:600px) { body[data-page="game"][data-game-theme="rov"] .package-item { grid-template-columns:56px minmax(0,1fr);gap:7px;min-height:120px;padding:10px; } body[data-page="game"][data-game-theme="rov"] .pkg-art-wrap { width:56px;height:56px; } body[data-page="game"][data-game-theme="rov"] .pkg-price { font-size:17px; } }
body[data-page="game"][data-game-theme="rov"] .checkout-card { position:sticky;bottom:12px;z-index:5;border-color:#b98c3c;background:linear-gradient(110deg,#351915f5,#132b4df5);box-shadow:0 16px 40px #0009;backdrop-filter:blur(12px); }
body[data-page="game"][data-game-theme="rov"] .checkout-row strong { color:#ffd36e; }
body[data-page="game"][data-game-theme="rov"] .btn-primary { background:linear-gradient(90deg,#c6842d,#efc662 48%,#c17928);color:#1e1508;box-shadow:0 8px 20px #c98a3145;font-weight:900; }
body[data-page="game"][data-game-theme="rov"] .btn-primary:hover { background:linear-gradient(90deg,#d99738,#ffdc7a,#d38b32); }
body[data-page="game"][data-game-theme="rov"] .order-error { padding:10px 12px;border:1px solid #ff645866;border-radius:9px;background:#481516;color:#ffb3ad;text-align:center; }

/* PUBG Mobile: tactical navy surfaces with UC gold as the primary accent. */
body[data-page="game"][data-game-theme="pubg"] { background:radial-gradient(circle at 82% 9%,#bd8b2728 0,transparent 27%),radial-gradient(circle at 4% 38%,#154e7952 0,transparent 30%),#050b14; }
body[data-page="game"][data-game-theme="pubg"] .game-page-container { max-width:1220px;padding-bottom:120px; }
body[data-page="game"][data-game-theme="pubg"] .selected-game-banner { position:relative;overflow:hidden;min-height:190px;border-color:#bd914b99;background:linear-gradient(112deg,#102d4d 0,#0b1b2f 45%,#302416 100%);box-shadow:0 18px 45px #0008; }
body[data-page="game"][data-game-theme="pubg"] .selected-game-banner::before { content:'UC';position:absolute;right:6%;top:50%;transform:translateY(-50%);color:#f1cb7952;font-size:clamp(90px,14vw,170px);font-weight:1000;letter-spacing:-.08em;line-height:1;pointer-events:none; }
body[data-page="game"][data-game-theme="pubg"] .selected-game-banner::after { content:'';position:absolute;inset:-100% -6% auto 54%;height:290%;background:linear-gradient(105deg,transparent,#ffe9a83c,transparent);transform:rotate(9deg);pointer-events:none; }
body[data-page="game"][data-game-theme="pubg"] .selected-game-banner img { position:relative;z-index:1;width:132px;height:132px;border:2px solid #d7b66e;box-shadow:0 0 0 5px #070f1877,0 14px 32px #0009; }
body[data-page="game"][data-game-theme="pubg"] .selected-game-copy { position:relative;z-index:1; }
body[data-page="game"][data-game-theme="pubg"] .selected-game-banner h1 { font-size:clamp(30px,5vw,48px);letter-spacing:-.035em;text-shadow:0 3px 18px #000; }
body[data-page="game"][data-game-theme="pubg"] .eyebrow { color:#efcb80;letter-spacing:.055em; }
body[data-page="game"][data-game-theme="pubg"] .game-trust-row span { border-color:#e7bd6240;background:#0a1927cc;color:#f4dfae; }
body[data-page="game"][data-game-theme="pubg"] .step-card { border-color:#334c68;background:linear-gradient(145deg,#101e30fa,#09131ffa);box-shadow:0 12px 32px #0004; }
body[data-page="game"][data-game-theme="pubg"] .step-number { color:#261b09;background:linear-gradient(135deg,#f8dd95,#b98431);box-shadow:0 5px 16px #c998454d; }
body[data-page="game"][data-game-theme="pubg"] input:focus,body[data-page="game"][data-game-theme="pubg"] select:focus { border-color:#d5ad5f;box-shadow:0 0 0 3px #d5ad5f25; }
body[data-page="game"][data-game-theme="pubg"] .package-grid { gap:14px; }
body[data-page="game"][data-game-theme="pubg"] .package-item { position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px;min-height:138px;overflow:hidden;padding:14px;border-color:#365575;border-radius:16px;background:linear-gradient(145deg,#122b45,#091727 68%,#241d13);box-shadow:inset 0 1px #79b8e522,0 10px 24px #0004;transition:transform .18s,border-color .18s,box-shadow .18s; }
body[data-page="game"][data-game-theme="pubg"] .package-item::before { content:'';position:absolute;right:-28px;top:-35px;width:105px;height:105px;border-radius:50%;background:#d5a84f18;filter:blur(4px); }
body[data-page="game"][data-game-theme="pubg"] .package-item:hover { transform:translateY(-3px);border-color:#d5ad5f;box-shadow:0 13px 28px #0007,0 0 24px #ba8d3520; }
body[data-page="game"][data-game-theme="pubg"] .package-item.selected { border-color:#f1ca78;background:linear-gradient(145deg,#183b5c,#463619);box-shadow:0 0 0 2px #e5bc6638,0 13px 28px #0008; }
body[data-page="game"][data-game-theme="pubg"] .package-item.selected::after { content:'✓ เลือกแล้ว';position:absolute;right:10px;top:9px;color:#ffe6a8;font-size:10px;font-weight:900; }
body[data-page="game"][data-game-theme="pubg"] .pkg-art-wrap { position:relative;z-index:1;width:92px;height:80px;flex:0 0 80px; }
body[data-page="game"][data-game-theme="pubg"] .pkg-art { width:92px;height:80px;filter:drop-shadow(0 9px 8px #000a); }
body[data-page="game"][data-game-theme="pubg"] .pkg-copy { position:relative;z-index:1; }
body[data-page="game"][data-game-theme="pubg"] .pkg-name { color:#f8f2e5;font-size:16px;font-weight:850; }
body[data-page="game"][data-game-theme="pubg"] .pkg-price { color:#f2c66d;font-size:21px;text-shadow:0 0 18px #d6a34842; }
body[data-page="game"][data-game-theme="pubg"] .checkout-card { position:sticky;bottom:12px;z-index:10;border-color:#bd914b;background:linear-gradient(110deg,#102b47f2,#111b28f2 50%,#392713f2);box-shadow:0 18px 45px #000b;backdrop-filter:blur(14px); }
body[data-page="game"][data-game-theme="pubg"] .checkout-row strong { color:#f5ca71; }
body[data-page="game"][data-game-theme="pubg"] .btn-primary { background:linear-gradient(90deg,#a86f20,#f0c465 50%,#bd842e);color:#201507;box-shadow:0 8px 22px #c4913e45;font-weight:900; }
body[data-page="game"][data-game-theme="pubg"] .btn-primary:hover { background:linear-gradient(90deg,#bd812b,#ffdc83,#d49a3e); }

/* Genshin Impact: luminous sky palette, clearly separated currencies and soft character art. */
body[data-page="game"][data-game-theme="genshin"] { position:relative;background:#07101e; }
body[data-page="game"][data-game-theme="genshin"]::before { content:'';position:fixed;z-index:0;inset:-24px;background:linear-gradient(#07101ee8,#0b1323ed),url('/images/games/genshin-background.webp') center 18%/cover no-repeat;filter:blur(7px);opacity:.78;pointer-events:none; }
body[data-page="game"][data-game-theme="genshin"] .navbar,body[data-page="game"][data-game-theme="genshin"] .game-page-container { position:relative;z-index:1; }
body[data-page="game"][data-game-theme="genshin"] .game-page-container { max-width:1220px;padding-bottom:120px; }
body[data-page="game"][data-game-theme="genshin"] .selected-game-banner { position:relative;overflow:hidden;min-height:205px;padding-right:245px;border-color:#91bcdf99;background:linear-gradient(110deg,#102947f2 0,#273056e8 53%,#795d79c9);box-shadow:0 18px 48px #0008,inset 0 1px #dff5ff25; }
body[data-page="game"][data-game-theme="genshin"] .selected-game-banner::before { content:'';position:absolute;inset:0;background:radial-gradient(circle at 74% 30%,#d3c4ff52,transparent 28%),linear-gradient(105deg,transparent 45%,#d5f6ff20);pointer-events:none; }
body[data-page="game"][data-game-theme="genshin"] .selected-game-banner::after { content:'';position:absolute;z-index:1;right:20px;bottom:-54px;width:218px;height:245px;background:url('/images/games/genshin-paimon.webp') center bottom/contain no-repeat;filter:drop-shadow(0 13px 18px #07101ea8);pointer-events:none; }
body[data-page="game"][data-game-theme="genshin"] .selected-game-banner > img { position:relative;z-index:2;width:132px;height:132px;border:2px solid #c8eaff;box-shadow:0 0 0 5px #0a152477,0 14px 32px #0008; }
body[data-page="game"][data-game-theme="genshin"] .selected-game-copy { position:relative;z-index:2; }
body[data-page="game"][data-game-theme="genshin"] .selected-game-banner h1 { font-size:clamp(30px,5vw,46px);letter-spacing:-.035em;text-shadow:0 3px 18px #000; }
body[data-page="game"][data-game-theme="genshin"] .eyebrow { color:#d9eaff;letter-spacing:.055em; }
body[data-page="game"][data-game-theme="genshin"] .game-trust-row span { border-color:#c9eaff40;background:#101a38bb;color:#e6efff; }
body[data-page="game"][data-game-theme="genshin"] .step-card { border-color:#40587a;background:linear-gradient(145deg,#101e33ed,#101426ed);box-shadow:0 13px 34px #0005,inset 0 1px #d9f2ff12;backdrop-filter:blur(11px); }
body[data-page="game"][data-game-theme="genshin"] .step-number { color:#18203b;background:linear-gradient(135deg,#e7f7ff,#aaa6f6);box-shadow:0 5px 18px #9cbfed5e; }
body[data-page="game"][data-game-theme="genshin"] input:focus,body[data-page="game"][data-game-theme="genshin"] select:focus { border-color:#9dcff0;box-shadow:0 0 0 3px #9dcff028; }
body[data-page="game"][data-game-theme="genshin"] .package-group { border-color:#526986;background:linear-gradient(145deg,#0b1d31dc,#13182bd9);box-shadow:inset 0 1px #e6f8ff12,0 14px 30px #0003; }
body[data-page="game"][data-game-theme="genshin"] .package-group-genesis { border-color:#55c8e27d;background:linear-gradient(145deg,#0a2e42d9,#101b32df); }
body[data-page="game"][data-game-theme="genshin"] .package-group-chronal { border-color:#8c7ce27d;background:linear-gradient(145deg,#201b49dc,#111b37df); }
body[data-page="game"][data-game-theme="genshin"] .package-group-genesis .package-group-heading strong { color:#92ecff; }
body[data-page="game"][data-game-theme="genshin"] .package-group-chronal .package-group-heading strong { color:#c4b8ff; }
body[data-page="game"][data-game-theme="genshin"] .package-item { position:relative;display:flex;align-items:center;gap:13px;min-height:142px;overflow:hidden;padding:14px;border-color:#466584;border-radius:16px;background:linear-gradient(145deg,#13304b,#11172d);box-shadow:inset 0 1px #bde8ff1e,0 10px 22px #0004;transition:transform .18s,border-color .18s,box-shadow .18s; }
body[data-page="game"][data-game-theme="genshin"] .package-item:hover { transform:translateY(-3px);border-color:#afdff4;box-shadow:0 13px 28px #0007,0 0 26px #97cdf021; }
body[data-page="game"][data-game-theme="genshin"] .package-item.selected { border-color:#f2d6a0;background:linear-gradient(145deg,#243b55,#4f3c55);box-shadow:0 0 0 2px #d9c2ff35,0 13px 28px #0008; }
body[data-page="game"][data-game-theme="genshin"] .package-item.selected::after { content:'✓ เลือกแล้ว';position:absolute;right:10px;top:9px;color:#fff0c7;font-size:10px;font-weight:900; }
body[data-page="game"][data-game-theme="genshin"] .pkg-art-wrap { position:relative;z-index:1;width:100px;height:88px;flex:0 0 100px; }
body[data-page="game"][data-game-theme="genshin"] .pkg-art { width:100px;height:88px;filter:drop-shadow(0 8px 10px #0008); }
body[data-page="game"][data-game-theme="genshin"] .pkg-copy { position:relative;z-index:1; }
body[data-page="game"][data-game-theme="genshin"] .pkg-name { color:#f2f7ff;font-size:14px;line-height:1.45; }
body[data-page="game"][data-game-theme="genshin"] .pkg-price { color:#aee9ff;font-size:20px;text-shadow:0 0 17px #69cbe75c; }
body[data-page="game"][data-game-theme="genshin"] .package-type-chronal .pkg-price { color:#c9bdff;text-shadow:0 0 17px #9182ea60; }
body[data-page="game"][data-game-theme="genshin"] .package-group-genshin-special { border-color:#d2ad6f70;background:linear-gradient(145deg,#362d3fd6,#17192bdc); }
body[data-page="game"][data-game-theme="genshin"] .package-group-genshin-special .package-subgrid { grid-template-columns:minmax(260px,420px); }
body[data-page="game"][data-game-theme="genshin"] .package-type-welkin { min-height:165px;border-color:#d8bc82;background:linear-gradient(145deg,#44344c,#1b2842); }
body[data-page="game"][data-game-theme="genshin"] .package-type-welkin .pkg-art-wrap { height:118px; }
body[data-page="game"][data-game-theme="genshin"] .package-type-welkin .pkg-art { height:118px; }
body[data-page="game"][data-game-theme="genshin"] .pkg-special-badge { background:linear-gradient(90deg,#8068d7,#d59fc7); }
body[data-page="game"][data-game-theme="genshin"] .checkout-card { position:sticky;bottom:12px;z-index:10;border-color:#9c91de;background:linear-gradient(110deg,#152a45f2,#242143f2 48%,#513951f2);box-shadow:0 18px 45px #000b;backdrop-filter:blur(15px); }
body[data-page="game"][data-game-theme="genshin"] .checkout-row strong { color:#c9ebff; }
body[data-page="game"][data-game-theme="genshin"] .btn-primary { background:linear-gradient(90deg,#687bd8,#9a88e5 50%,#cf9fc8);color:#fff;box-shadow:0 8px 23px #8780df4d;font-weight:900; }
body[data-page="game"][data-game-theme="genshin"] .btn-primary:hover { background:linear-gradient(90deg,#758ce9,#ac9af4,#e2b1da); }

/* Free Fire: ember-orange identity, separated special packs and sticky checkout. */
body[data-page="game"][data-game-theme="freefire"] { background:radial-gradient(circle at 82% 8%,#ff8a1f24 0,transparent 29%),radial-gradient(circle at 5% 36%,#b8201833 0,transparent 31%),#070b11; }
body[data-page="game"][data-game-theme="freefire"] .game-page-container { max-width:1220px;padding-bottom:120px; }
body[data-page="game"][data-game-theme="freefire"] .selected-game-banner { position:relative;overflow:hidden;min-height:190px;border-color:#ff9d3c88;background:linear-gradient(110deg,#521a12 0,#241712 38%,#101b2c 100%);box-shadow:0 18px 45px #0008; }
body[data-page="game"][data-game-theme="freefire"] .selected-game-banner::after { content:'';position:absolute;inset:-90% -8% auto 50%;height:270%;background:linear-gradient(105deg,transparent,#ffb34848,transparent);transform:rotate(10deg);pointer-events:none; }
body[data-page="game"][data-game-theme="freefire"] .selected-game-banner img { z-index:1;width:132px;height:132px;border:2px solid #ffac4b;box-shadow:0 0 0 5px #150d0877,0 14px 32px #0009; }
body[data-page="game"][data-game-theme="freefire"] .selected-game-copy { z-index:1; }
body[data-page="game"][data-game-theme="freefire"] .selected-game-banner h1 { font-size:clamp(30px,5vw,48px);letter-spacing:-.035em;text-shadow:0 3px 18px #000; }
body[data-page="game"][data-game-theme="freefire"] .eyebrow { color:#ffc66d;letter-spacing:.05em; }
body[data-page="game"][data-game-theme="freefire"] .game-trust-row span { border-color:#ffb14b3b;background:#2d120dcc;color:#ffe1b1; }
body[data-page="game"][data-game-theme="freefire"] .step-card { border-color:#5b3b2d;background:linear-gradient(145deg,#151d2afa,#0b111afa);box-shadow:0 12px 32px #0004; }
body[data-page="game"][data-game-theme="freefire"] .step-number { color:#251207;background:linear-gradient(135deg,#ffd376,#f47724);box-shadow:0 5px 16px #ef762d4f; }
body[data-page="game"][data-game-theme="freefire"] input:focus,body[data-page="game"][data-game-theme="freefire"] select:focus { border-color:#ff9f3d;box-shadow:0 0 0 3px #ff9f3d26; }
.package-grid-grouped { display:block; }
.package-group + .package-group { margin-top:24px; }
.package-group { padding:16px;border:1px solid #293a52;border-radius:17px;background:#08111ed1; }
.package-group-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px; }
.package-group-heading > div { display:flex;align-items:center;gap:9px; }
.package-group-heading strong { color:#fff;font-size:18px; }
.package-group-heading small { color:#91a5c0;font-size:12px;text-align:right; }
.package-subgrid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
body[data-page="game"][data-game-theme="freefire"] .package-group-featured { border-color:#d66a2c88;background:linear-gradient(145deg,#3a1711cc,#15131acc);box-shadow:inset 0 1px #ffbb6b20,0 12px 28px #0003; }
body[data-page="game"][data-game-theme="freefire"] .package-item { position:relative;display:flex;align-items:center;gap:12px;min-height:145px;padding:14px;border-color:#4d78a8;border-radius:15px;background:linear-gradient(145deg,#15335a,#091b35);box-shadow:inset 0 1px #7dc8ff22,0 10px 22px #0004;transition:transform .18s,border-color .18s,box-shadow .18s; }
body[data-page="game"][data-game-theme="freefire"] .package-item:hover { transform:translateY(-3px);border-color:#ff993b;box-shadow:0 12px 24px #0006; }
body[data-page="game"][data-game-theme="freefire"] .package-item.selected { border-color:#ffb148;background:linear-gradient(145deg,#3d2418,#642319);box-shadow:0 0 0 2px #ffad4638,0 13px 26px #0007; }
body[data-page="game"][data-game-theme="freefire"] .package-item.selected::after { content:'✓ เลือกแล้ว';position:absolute;right:11px;bottom:10px;color:#ffe2a9;font-size:10px;font-weight:900; }
body[data-page="game"][data-game-theme="freefire"] .package-item-featured { min-height:190px;padding:38px 14px 14px;flex-direction:column;justify-content:flex-end;text-align:center;border-color:#a64c2f;background:linear-gradient(145deg,#391811,#1b1720); }
.pkg-art-wrap { display:flex;align-items:center;justify-content:center;width:160px;height:105px;flex:0 0 105px;margin-inline:auto; }
.pkg-art { display:block;width:160px;height:105px;object-fit:contain;filter:drop-shadow(0 9px 10px #0008); }
.pkg-copy { display:grid;gap:5px;min-width:0; }
body[data-page="game"][data-game-theme="freefire"] .package-item-featured .pkg-art-wrap { width:160px;height:105px;flex-basis:105px; }
body[data-page="game"][data-game-theme="freefire"] .package-item-featured .pkg-art { width:160px;height:105px; }
body[data-page="game"][data-game-theme="freefire"] .package-type-booyah { grid-column:1/-1;min-height:165px;display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr);padding:20px 28px;text-align:left;background:linear-gradient(100deg,#4b2608,#231409 46%,#1b1718);border-color:#e6a22e; }
body[data-page="game"][data-game-theme="freefire"] .package-type-booyah .pkg-art-wrap { width:160px;height:105px; }
body[data-page="game"][data-game-theme="freefire"] .package-type-booyah .pkg-art { width:160px;height:105px; }
body[data-page="game"][data-game-theme="freefire"] .package-type-booyah .pkg-copy { align-content:center; }
.pkg-special-badge { position:absolute;left:12px;top:10px;padding:4px 8px;border-radius:999px;background:linear-gradient(90deg,#e44b27,#ff982f);color:#fff;font-size:10px;font-weight:900;letter-spacing:.03em;box-shadow:0 5px 12px #0005; }
body[data-page="game"][data-game-theme="freefire"] .pkg-price { color:#ffae43;font-size:20px; }
body[data-page="game"][data-game-theme="freefire"] .package-item-featured .pkg-name { font-size:16px; }
body[data-page="game"][data-game-theme="freefire"] .package-group:not(.package-group-featured) { border-color:#2878bd;background:linear-gradient(145deg,#0b2340,#07131f);box-shadow:inset 0 1px #70c7ff28,0 0 35px #188cff12; }
body[data-page="game"][data-game-theme="freefire"] .package-group:not(.package-group-featured) .package-group-heading strong { color:#76c9ff; }
body[data-page="game"][data-game-theme="freefire"] .package-group:not(.package-group-featured) .pkg-price { color:#5fc5ff;text-shadow:0 0 18px #179fff55; }
body[data-page="game"][data-game-theme="freefire"] .checkout-card { position:sticky;bottom:12px;z-index:10;border-color:#e16d2d;background:linear-gradient(110deg,#35130ff2,#241319f2 48%,#142239f2);box-shadow:0 18px 45px #000b;backdrop-filter:blur(14px); }
body[data-page="game"][data-game-theme="freefire"] .checkout-row strong { color:#ffb047; }
body[data-page="game"][data-game-theme="freefire"] .btn-primary { background:linear-gradient(90deg,#e84d26,#ff9d32 52%,#f06b25);color:#fff;box-shadow:0 8px 22px #f06a344b;font-weight:900; }
body[data-page="game"][data-game-theme="freefire"] .btn-primary:hover { background:linear-gradient(90deg,#f65b30,#ffb148,#ff7c2e); }
body[data-page="game"][data-game-theme="freefire"] .order-error { padding:10px 12px;border:1px solid #ff645866;border-radius:9px;background:#481516;color:#ffb3ad;text-align:center; }
.game-guide { margin-top:28px; padding:clamp(30px,5vw,62px) clamp(22px,6vw,72px); border:0; border-top:1px solid rgba(255,255,255,.12); border-radius:0; background:#0d0d10; color:#c9c9cf; font-size:17px; line-height:2; }
.game-guide[hidden] { display:none; }
.game-guide-kicker { display:flex; align-items:center; gap:17px; margin-bottom:25px; color:#f7f7f8; font-size:20px; font-weight:800; }
.game-guide-kicker::before { content:''; width:5px; height:28px; flex:0 0 5px; border-radius:999px; background:#ff1748; box-shadow:0 0 18px rgba(255,23,72,.28); }
.game-guide h2 { margin:0 0 25px; color:#fff; font-size:clamp(26px,3.4vw,38px); font-weight:900; line-height:1.5; letter-spacing:-.025em; }
.game-guide h3 { margin:44px 0 18px; color:#fff; font-size:clamp(22px,2.5vw,29px); font-weight:850; line-height:1.55; letter-spacing:-.015em; }
.game-guide p { margin:0 0 23px; }
.game-guide strong { color:#f5f5f7; }
.game-guide ul, .game-guide ol { margin:0 0 21px; padding-left:31px; }
.game-guide li { margin-bottom:16px; padding-left:6px; }
.guide-steps { padding-left:34px !important; }
.guide-steps li { margin-bottom:20px; padding-left:5px; }
.guide-steps li > strong { color:#fff; }
.guide-steps li > span { color:#c9c9cf; }
.guide-steps li > span::before { content:' — '; }
.guide-notice { margin:19px 0; padding:14px 18px; border-left:4px solid #ff1748; border-radius:0 7px 7px 0; background:rgba(255,23,72,.07); color:#e4d2d7; }
.guide-signoff { margin:38px 0 0 !important; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); color:#fff; text-align:left; font-size:19px; }
body[data-page="catalog"] .catalog-layout { grid-template-columns:220px minmax(0,1fr) 260px; }
@media (max-width: 1050px) { .content-layout { grid-template-columns:1fr; }.game-sidebar,.service-sidebar { display:none; }.hero-art { width:100%; }.container { max-width:900px; } }
@media (max-width: 650px) { .navbar { padding:12px 16px; }.brand { font-size:18px; }.brand img { width:165px; height:38px; }.nav-links a:not(.login-link) { display:none; }.container { padding:12px; }.hero { width:100%; height:190px; }.flash-sale-section { padding:15px 12px; margin:12px 0; }.flash-sale-heading h2 { font-size:21px; }.flash-sale-heading > a { font-size:12px; }.flash-sale-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.flash-sale-card { align-items:flex-start; flex-direction:column; gap:8px; padding:9px; }.flash-sale-image-wrap { width:48px; height:48px; flex-basis:48px; }.flash-sale-product { max-width:100%; }.game-grid { grid-template-columns:repeat(2,1fr); }.hero-pills span { font-size:11px; }.game-order-layout { grid-template-columns:1fr; }.selected-game-banner { padding:18px; gap:14px; }.selected-game-banner img { width:75px; height:75px; }.selected-game-banner h1 { font-size:23px; } }

/* Small-screen layout: keep customer pages inside the viewport without changing desktop styling. */
@media (max-width: 650px) {
  html, body { max-width:100%; }
  body { overflow-x:hidden; }
  .navbar { min-height:62px; padding:10px 12px; gap:8px; }
  .nav-brand-group { gap:8px; }
  .brand img { width:min(165px,52vw); height:36px; }
  .container { width:100%; max-width:100%; padding:12px 12px 24px; }
  .hero { width:100%; height:auto; min-height:0; aspect-ratio:2.1 / 1; }
  .hero-art { width:100%; }
  .benefits { grid-template-columns:1fr; gap:8px; }
  .content-layout, body[data-page="catalog"] .catalog-layout { display:block; }
  .purchase-flow { min-width:0; }
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .game-item { min-width:0; padding:8px; }
  .game-img { height:auto; aspect-ratio:1 / 1; }
  .game-name { font-size:12px; }
  .game-order-layout { grid-template-columns:minmax(0,1fr); gap:10px; }
  .step-card { min-width:0; padding:16px; margin-bottom:12px; }
  .step-title { font-size:16px; }
  .package-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .package-subgrid { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .package-group { padding:11px; }
  .package-group-heading { display:block; }
  .package-group-heading small { display:block;margin-top:5px;text-align:left; }
  body[data-page="game"][data-game-theme="freefire"] .package-item { min-height:170px;flex-direction:column;justify-content:flex-end;text-align:center; }
  body[data-page="game"][data-game-theme="freefire"] .package-type-booyah { grid-template-columns:1fr;grid-column:1/-1;min-height:220px;text-align:center; }
  body[data-page="game"][data-game-theme="freefire"] .package-type-booyah .pkg-copy { justify-items:center; }
  body[data-page="game"][data-game-theme="pubg"] .package-item { grid-template-columns:1fr;justify-items:center;min-height:190px;padding:13px 9px;text-align:center; }
  body[data-page="game"][data-game-theme="pubg"] .pkg-art-wrap { width:122px;height:86px; }
  body[data-page="game"][data-game-theme="pubg"] .pkg-art { width:122px;height:86px; }
  body[data-page="game"][data-game-theme="pubg"] .pkg-name { font-size:14px; }
  body[data-page="game"][data-game-theme="pubg"] .pkg-price { font-size:18px; }
  body[data-page="game"][data-game-theme="genshin"] .selected-game-banner { min-height:190px;padding-right:110px; }
  body[data-page="game"][data-game-theme="genshin"] .selected-game-banner::after { right:-22px;bottom:-35px;width:132px;height:172px;opacity:.72; }
  body[data-page="game"][data-game-theme="genshin"] .package-subgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="game"][data-game-theme="genshin"] .package-item { min-height:190px;flex-direction:column;justify-content:flex-end;text-align:center;padding:12px 9px; }
  body[data-page="game"][data-game-theme="genshin"] .pkg-art-wrap { width:128px;height:96px;flex-basis:96px; }
  body[data-page="game"][data-game-theme="genshin"] .pkg-art { width:128px;height:96px; }
  body[data-page="game"][data-game-theme="genshin"] .package-group-genshin-special .package-subgrid { grid-template-columns:1fr; }
  .pkg-art-wrap { width:138px;height:94px;flex-basis:94px; }
  .pkg-art { width:138px;height:94px; }
  .package-item { min-width:0; padding:11px; }
  .pkg-name { overflow-wrap:anywhere; font-size:13px; }
  .pkg-price { font-size:16px; }
  .selected-game-banner { min-height:0; padding:15px; gap:12px; }
  .selected-game-banner img { width:64px; height:64px; flex:0 0 64px; }
  .selected-game-banner h1 { font-size:clamp(19px,6vw,24px); overflow-wrap:anywhere; }
  .selected-game-banner p { font-size:13px; }
  .checkout-row { gap:10px; font-size:15px; }
  .checkout-row strong { font-size:23px; white-space:nowrap; }
  .game-guide { margin-top:20px; padding:27px 18px; font-size:15px; line-height:1.9; }
  .game-guide-kicker { gap:12px; margin-bottom:21px; font-size:17px; }
  .game-guide-kicker::before { height:24px; }
  .game-guide h2 { margin-bottom:22px; font-size:24px; line-height:1.5; }
  .game-guide h3 { margin-top:36px; margin-bottom:16px; font-size:20px; line-height:1.55; }
  .game-guide p { margin-bottom:20px; }
  .game-guide li { margin-bottom:14px; }
  .game-guide ul, .game-guide ol { padding-left:24px; }
  .guide-steps { padding-left:25px !important; }
  .order-heading { align-items:flex-start !important; gap:10px; flex-wrap:wrap; }
  .order-heading h2 { font-size:18px !important; }
  .order-search-row { display:grid !important; grid-template-columns:minmax(0,1fr) auto; gap:8px !important; }
  .order-search-row input { min-width:0; }
  .order-search-row .btn { padding:10px 13px !important; }
  .order-summary { padding:13px !important; }
  .order-summary-row { align-items:flex-start !important; gap:10px; }
  .order-summary-row > :last-child { min-width:0; max-width:62%; text-align:right; overflow-wrap:anywhere; }
  #dispAmount { font-size:20px !important; }
  .dropzone { padding:20px 12px; overflow-wrap:anywhere; }
  .policy-section { padding:15px; }
  input, select, textarea, button { max-width:100%; }
}

@media (max-width: 380px) {
  .game-grid, .package-grid, .package-subgrid { grid-template-columns:minmax(0,1fr); }
  .selected-game-banner { align-items:flex-start; }
  .selected-game-banner img { width:54px; height:54px; flex-basis:54px; }
  .order-search-row { grid-template-columns:minmax(0,1fr); }
  .order-search-row .btn { width:100% !important; }
  body[data-page="game"][data-game-theme="freefire"] .package-type-booyah { grid-column:auto; }
}

/* Storefront: one clear game picker, with working search and navigation. */
body[data-page="catalog"] .container { max-width:1240px;padding:24px 24px 100px; }
body[data-page="catalog"] .hero { width:100%;height:auto;aspect-ratio:3.8/1;margin-bottom:28px;border-radius:20px; }
body[data-page="catalog"] .hero-art { position:absolute;inset:0; }
body[data-page="catalog"] .catalog-layout { display:block;scroll-margin-top:110px; }
body[data-page="catalog"] .game-step { padding:28px;border:1px solid #273650;border-radius:20px;background:rgba(13,24,43,.8); }
.storefront-heading { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px; }
.storefront-kicker { font-size:11px;letter-spacing:.15em;color:#8fa9e6;font-weight:800; }
.storefront-track-link { padding:10px 13px;border:1px solid #354560;border-radius:10px;color:#d4dfff;text-decoration:none;font-size:13px;white-space:nowrap; }
.storefront-track-link:hover { border-color:#8c91ff;background:#1c2943; }
.storefront-heading h1 { font-size:clamp(24px,3vw,32px);margin:6px 0;letter-spacing:-.02em; }
.storefront-heading p { color:#a3b3cb;font-size:14px; }
.storefront-search { display:grid;gap:6px;width:280px;max-width:100%;flex-shrink:0;font-size:12px;color:#b9c8df; }
.storefront-search input { width:100%;padding:13px 15px;min-height:46px;border:1px solid #3c506f;border-radius:12px;background:#091325;color:#fff;font:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s; }
.storefront-search input:focus { outline:none;border-color:#8c91ff;box-shadow:0 0 0 3px #777bff26; }
.storefront-count { color:#91a5c2;font-size:12px;margin-bottom:14px; }
body[data-page="catalog"] .game-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px; }
body[data-page="catalog"] .game-item { display:block;padding:10px;border-radius:16px;background:#101e34;border:1px solid #2a3d59;color:#fff;text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
body[data-page="catalog"] .game-item:hover { transform:translateY(-4px);border-color:#7c87d9;box-shadow:0 12px 25px #0004; }
body[data-page="catalog"] .game-item:focus-visible { outline:3px solid #99b9ff;outline-offset:4px; }
body[data-page="catalog"] .game-img { display:block;width:100%;height:auto;aspect-ratio:1.3/1;object-fit:cover;border-radius:10px;margin-bottom:12px; }
body[data-page="catalog"] .game-name { font-size:15px;margin:0 3px 8px; }
.game-card-meta { display:flex;justify-content:space-between;gap:8px;margin:0 3px 4px;font-size:12px;color:#9bb1d2; }
.game-card-meta span { color:#9babff; }
.storefront-empty { grid-column:1/-1;padding:30px 10px;text-align:center;color:#a3b3cb; }
.storefront-help { display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;padding:20px;font-size:13px;color:#91a5c2; }
.storefront-help a { color:#bfccff;text-decoration:none; }.storefront-help a:hover { text-decoration:underline; }
.storefront-footer { display:grid;grid-template-columns:1.2fr 1fr .82fr;gap:34px 54px;margin-top:26px;padding:30px 34px 22px;border-top:1px solid #263852;color:#8fa3c1;font-size:12px;line-height:1.75; }
.storefront-footer-brand img { display:block;width:150px;height:38px;margin-bottom:13px;object-fit:contain;object-position:left center; }
.storefront-footer-brand p { max-width:390px; }
.storefront-footer h2 { margin:2px 0 10px;color:#dce7fa;font-size:13px;letter-spacing:.02em; }
.storefront-footer ol { margin:0;padding-left:19px; }
.storefront-footer li { padding-left:3px; }
.storefront-footer nav { display:grid;gap:5px; }
.storefront-footer a { color:#adc3e7;text-decoration:none;transition:color .18s; }
.storefront-footer a:hover { color:#fff; }
.storefront-footer-bottom { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:17px;border-top:1px solid #ffffff0d;color:#71839f;font-size:11px; }
.storefront-footer-bottom > span:last-child { display:flex;flex-wrap:wrap;gap:10px 18px; }
.flash-sale-section[hidden] { display:none!important; }

/* Flash Sale banner: darker panel with a restrained animated ember frame. */
.flash-sale-section { position:relative;isolation:isolate;overflow:hidden;border:1px solid #812f25;background:linear-gradient(118deg,#100d15 0%,#080e1c 52%,#0b1120 100%);box-shadow:inset 0 0 34px #c3321810,0 14px 36px #0007;animation:flashSaleFireGlow 3.8s ease-in-out infinite; }
.flash-sale-section::before { content:"";position:absolute;z-index:0;inset:-2px;border-radius:inherit;padding:1.5px;background:conic-gradient(from 0deg,transparent 0deg 60deg,#ff512f 100deg,#ffd267 125deg,#fa3c24 155deg,transparent 190deg 260deg,#ff6b31 305deg,transparent 340deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:flashSaleFireRotate 7s linear infinite;pointer-events:none; }
.flash-sale-section::after { content:"";position:absolute;z-index:0;top:0;left:-42%;width:34%;height:2px;background:linear-gradient(90deg,transparent,#ff9b45,#fff1ad,#ff3d24,transparent);filter:blur(1px);box-shadow:0 0 12px #ff572e,0 0 24px #ff4b2e;animation:flashSaleEmberSweep 4.6s ease-in-out infinite;pointer-events:none; }
.flash-sale-heading,.flash-sale-grid { position:relative;z-index:1; }
.flash-sale-heading h2 { display:flex;align-items:center;min-height:54px;margin-top:2px; }
.flash-sale-title-art { display:block;width:min(320px,48vw);height:auto;max-height:76px;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 12px #ff4b2c55); }
@keyframes flashSaleFireRotate { to { transform:rotate(360deg); } }
@keyframes flashSaleEmberSweep { 0% { left:-42%;opacity:0; } 12% { opacity:1; } 72% { left:108%;opacity:.9; } 100% { left:108%;opacity:0; } }
@keyframes flashSaleFireGlow { 0%,100% { border-color:#743024;box-shadow:inset 0 0 30px #c332180c,0 12px 30px #0006,0 0 7px #f04c2914; } 50% { border-color:#d14c2f;box-shadow:inset 0 0 38px #ed4d1d18,0 14px 36px #0008,0 0 18px #f0522b38; } }
@media(max-width:650px) { .flash-sale-title-art { width:min(245px,58vw);max-height:60px; }.flash-sale-heading h2 { min-height:46px; } }
@media(prefers-reduced-motion:reduce) { .flash-sale-section,.flash-sale-section::before,.flash-sale-section::after { animation:none; } }

/* Decorative character collage: visual atmosphere only, never another game control. */
.storefront-heading { position:relative;isolation:isolate;min-height:230px;overflow:hidden;padding:28px;border:1px solid #314463;border-radius:18px;background:linear-gradient(110deg,#0a162b 0%,#101d37 47%,#171c34 100%);box-shadow:inset 0 1px 0 #ffffff0d; }
.storefront-heading::before { content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 73% 40%,#723b573b,transparent 30%),radial-gradient(circle at 93% 30%,#8650373d,transparent 27%),linear-gradient(90deg,transparent 0 37%,#1928474d); }
.storefront-heading::after { content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#09152ce8 0%,#09152cbf 31%,#09152c24 61%,#09152c66 100%); }
.storefront-heading-copy,.storefront-search { position:relative;z-index:3; }
.storefront-heading-copy { align-self:flex-start;max-width:390px; }
.storefront-search { align-self:flex-end;margin-top:auto; }
.storefront-character-scene { position:absolute;z-index:-1;inset:0 0 0 35%;overflow:hidden;pointer-events:none; }
.storefront-scene-glow { position:absolute;right:4%;bottom:-45%;width:72%;height:100%;border-radius:50%;background:#fc725924;filter:blur(35px); }
.scene-character { position:absolute;bottom:-24px;width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 14px 16px #000b); }
.scene-pubg-back { right:36%;height:67%;opacity:.5;filter:grayscale(.45) drop-shadow(0 12px 14px #000c); }
.scene-rov-back { right:24%;height:61%;opacity:.7; }
.scene-freefire { right:14%;height:91%; }
.scene-pubg-front { right:-1%;height:101%;opacity:.9; }
.scene-rov-front { right:43%;height:98%; }
.flash-sale-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.flash-sale-card { min-height:104px;padding:14px; }
.flash-sale-image-wrap { flex-basis:68px;width:68px;height:68px; }
.flash-sale-copy { flex:1; }
@media(max-width:650px) {
  body[data-page="catalog"] .container { padding:16px 14px 100px; }
  body[data-page="catalog"] .hero { aspect-ratio:2.3/1;border-radius:14px;margin-bottom:18px; }
  body[data-page="catalog"] .game-step { padding:18px 14px;border-radius:16px; }
  .storefront-heading { align-items:stretch;flex-direction:column;gap:18px; }.storefront-search { width:100%; }
  body[data-page="catalog"] .game-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  body[data-page="catalog"] .game-item { padding:8px; }.storefront-help { align-items:center;flex-direction:column;gap:12px; }
  body[data-page="catalog"] .game-name { font-size:13px; }
  .storefront-footer { grid-template-columns:1fr;gap:22px;margin-top:18px;padding:25px 7px 18px; }
  .storefront-footer-bottom { align-items:flex-start;flex-direction:column;gap:8px; }
  .storefront-heading { min-height:315px;padding:20px 18px;display:block; }
  .storefront-heading-copy { max-width:100%; }
  .storefront-search { position:absolute;left:18px;right:18px;bottom:18px;width:auto; }
  .storefront-character-scene { inset:91px 0 66px 0;opacity:.78; }
  .scene-character { bottom:-17px; }
  .scene-pubg-back,.scene-rov-back { display:none; }
  .scene-rov-front { left:4%;right:auto;height:96%; }
  .scene-freefire { left:37%;right:auto;height:91%; }
  .scene-pubg-front { right:1%;height:101%; }
  .flash-sale-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flash-sale-card { min-height:0;padding:10px; }
  .flash-sale-image-wrap { width:52px;height:52px;flex-basis:52px; }
}
@media(min-width:651px) and (max-width:900px) { .storefront-heading { min-height:245px;padding:22px; }.storefront-heading-copy { max-width:320px; }.storefront-character-scene { left:31%; }.scene-pubg-back,.scene-rov-back { opacity:.35; }.scene-rov-front { right:42%; }.scene-freefire { right:12%; } }
@media(max-width:380px) { .flash-sale-grid { grid-template-columns:1fr; }.flash-sale-card { flex-direction:row;align-items:center; } }
@media(prefers-reduced-motion:reduce) { body[data-page="catalog"] .game-item { transition:none; } }

/* Subtle game-art atmosphere for the storefront; keep the content layer crisp. */
body[data-page="catalog"] {
  position:relative;
  isolation:isolate;
  background:#070d1a;
}
body[data-page="catalog"]::before {
  content:"";
  position:fixed;
  z-index:-2;
  inset:-18px;
  pointer-events:none;
  background-image:url('/images/banners/levelup-collage-wide.webp');
  background-position:center 12%;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(10px) saturate(.72);
  transform:scale(1.035);
  opacity:.42;
}
body[data-page="catalog"]::after {
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,11,24,.56),rgba(5,11,24,.73) 48%,rgba(5,11,24,.9)),
    linear-gradient(90deg,rgba(5,11,24,.34),transparent 50%,rgba(5,11,24,.34));
}
@media(max-width:650px) {
  body[data-page="catalog"]::before {
    background-image:url('/images/banners/levelup-collage-mobile.webp');
    background-position:center 8%;
    filter:blur(8px) saturate(.68);
    opacity:.38;
  }
  body[data-page="catalog"]::after {
    background:linear-gradient(180deg,rgba(5,11,24,.62),rgba(5,11,24,.77) 48%,rgba(5,11,24,.93));
  }
}

/* Flash Sale offers drift continuously; the viewport remains manually scrollable. */
.flash-sale-actions { display:flex;align-items:center;gap:8px; }
.flash-sale-scroll-button { display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,164,127,.42);border-radius:50%;background:#101a2b;color:#ffd0be;font-size:17px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s; }
.flash-sale-scroll-button:hover { background:#3a2025;border-color:#ff765a;transform:translateY(-1px); }
.flash-sale-scroll-button:focus-visible { outline:2px solid #ffd0be;outline-offset:2px; }
.flash-sale-viewport { overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(255,118,90,.55) transparent;scroll-behavior:auto;cursor:grab;touch-action:pan-x; }
.flash-sale-viewport.is-dragging { cursor:grabbing;user-select:none; }
.flash-sale-grid { display:flex;width:max-content;min-width:100%;gap:12px;padding:2px 1px 10px; }
.flash-sale-card { flex:0 0 clamp(300px,31vw,520px); }
.flash-sale-viewport { max-width:100%;min-width:0; }
.flash-sale-card img { -webkit-user-drag:none;user-select:none; }
.flash-sale-empty { width:100%; }
@media(max-width:650px) {
  .flash-sale-actions { gap:6px; }
  .flash-sale-scroll-button { width:30px;height:30px; }
  .flash-sale-grid { gap:9px; }
  .flash-sale-card { flex-basis:min(84vw,380px); }
}
@media(prefers-reduced-motion:reduce) { .flash-sale-scroll-button { transition:none; } }
#uidCorrectionSection[hidden], #uidCorrectionForm[hidden] { display:none!important; }
#uidCorrectionSection {margin:16px 0;padding:20px;border:1px solid #6074b4;border-radius:14px;}
#uidCorrectionSection input {display:block;width:100%;margin:10px 0 14px;}

.uid-label-row { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px; }
.uid-label-row label { margin:0; }
.uid-help-button { flex:0 0 32px;width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid #7daaff;border-radius:50%;background:#172a49;color:#d8e8ff;font-size:19px;font-weight:800;line-height:1;cursor:pointer; }
.uid-help-button:hover { background:#284c7b;border-color:#9ad8ff; }
.uid-help-button:focus-visible,.uid-help-close:focus-visible { outline:3px solid #65d7ff;outline-offset:3px; }
.uid-help-button[hidden] { display:none; }
.uid-help-modal[hidden] { display:none; }
.uid-help-modal { position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:18px; }
.uid-help-backdrop { position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(2,7,17,.82);backdrop-filter:blur(5px);cursor:pointer; }
.uid-help-dialog { position:relative;z-index:1;width:min(100%,720px);max-height:calc(100dvh - 36px);overflow:auto;padding:16px;border:1px solid #51698e;border-radius:18px;background:linear-gradient(145deg,#1b2941,#0d1728);box-shadow:0 24px 80px #000a; }
.uid-help-dialog-header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px; }
.uid-help-dialog-header h2 { margin:0;color:#fff;font-size:20px; }
.uid-help-close { flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid #445671;border-radius:12px;background:#101c30;color:#fff;font-size:28px;line-height:1;cursor:pointer; }
.uid-help-dialog img { display:block;width:100%;height:auto;border-radius:10px; }
.uid-help-dialog p { margin:12px 2px 2px;color:#d4e4f8;line-height:1.65; }
@media(max-width:480px) { .uid-help-modal { padding:10px; }.uid-help-dialog { max-height:calc(100dvh - 20px);padding:12px;border-radius:14px; }.uid-help-dialog-header h2 { font-size:17px; } }

/* Mobile fit pass: prevent wide controls and content from forcing horizontal overflow. */
@media (max-width:650px) {
  body { min-width:0; }
  img, svg, video { max-width:100%; }
  .navbar > *, .nav-brand-group, .flash-sale-heading > *, .flash-sale-actions,
  .selected-game-copy, .step-card, .form-group, .checkout-row > *,
  .order-heading > *, .order-summary-row > * { min-width:0; }

  .storefront-track-link {
    flex:0 0 auto;
    max-width:112px;
    padding:8px 10px;
    overflow:hidden;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .flash-sale-section { padding:14px 12px; }
  .flash-sale-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:10px;
    margin-bottom:12px;
  }
  .flash-sale-heading > div:first-child { min-width:0; }
  .flash-sale-title-art { width:min(230px,72vw);max-width:100%; }
  .flash-sale-actions { width:100%;min-width:0; }
  .flash-sale-actions > a {
    min-width:0;
    margin-left:auto;
    padding:7px 9px;
    border:1px solid rgba(255,164,127,.3);
    border-radius:9px;
    color:#ffc1ae;
    font-size:12px;
    font-weight:800;
    line-height:1.25;
    text-align:center;
    text-decoration:none;
    white-space:normal;
  }
  .flash-sale-scroll-button { flex:0 0 32px;width:32px;height:32px; }
  .flash-sale-viewport { width:100%; }
  .flash-sale-grid { min-width:0;max-width:none; }
  .flash-sale-card {
    flex-basis:min(82vw,340px);
    max-width:calc(100vw - 54px);
    flex-direction:row;
    align-items:center;
  }
  .flash-sale-product, .flash-sale-game { max-width:100%; }
  .flash-sale-time-head { align-items:flex-start;flex-wrap:wrap; }
  .flash-sale-countdown-label { white-space:normal;text-align:right; }

  .selected-game-banner { align-items:center; }
  body[data-page="game"] .selected-game-banner > img,
  body[data-page="game"][data-game-theme="rov"] .selected-game-banner > img,
  body[data-page="game"][data-game-theme="pubg"] .selected-game-banner > img,
  body[data-page="game"][data-game-theme="freefire"] .selected-game-banner > img,
  body[data-page="game"][data-game-theme="genshin"] .selected-game-banner > img {
    width:72px;height:72px;flex:0 0 72px;
  }
  .game-trust-row { gap:6px; }
  .game-trust-row span { font-size:10px;white-space:normal; }
  .checkout-row { align-items:flex-start;flex-wrap:wrap; }
  .checkout-row strong { margin-left:auto; }
  .btn { white-space:normal;overflow-wrap:anywhere; }
  .payment-channel-detail, .order-summary-row { overflow-wrap:anywhere; }
  .copy-btn { margin:6px 0 0; }
  .policy-page, .game-page-container { min-width:0; }
}

@media (max-width:380px) {
  .navbar { align-items:center; }
  .brand img { width:min(145px,45vw); }
  .storefront-track-link { max-width:92px;padding:8px;font-size:11px; }
  .flash-sale-title-art { width:min(205px,75vw); }
  .flash-sale-actions > a { font-size:11px; }
  .flash-sale-card { flex-basis:calc(100vw - 52px);max-width:calc(100vw - 52px); }
  body[data-page="game"] .selected-game-banner { align-items:flex-start;flex-wrap:wrap; }
  body[data-page="game"] .selected-game-banner > img,
  body[data-page="game"][data-game-theme="rov"] .selected-game-banner > img,
  body[data-page="game"][data-game-theme="pubg"] .selected-game-banner > img,
  body[data-page="game"][data-game-theme="freefire"] .selected-game-banner > img,
  body[data-page="game"][data-game-theme="genshin"] .selected-game-banner > img {
    width:60px;height:60px;flex-basis:60px;
  }
  .checkout-row strong { width:100%;margin:6px 0 0; }
}
@media(prefers-reduced-motion:reduce) { .uid-help-backdrop { backdrop-filter:none; } }