/* ธีมมินิมอล น่ารัก โทนฟ้า-ขาว (รองรับทั้ง PC และมือถือ) */
:root {
  --sky-25: #f7fbff;
  --sky-50: #eef6ff;
  --sky-100: #ddeeff;
  --sky-200: #c3e0ff;
  --sky-300: #9ccdff;
  --sky-400: #6db4ff;
  --sky-500: #3f97f5;
  --sky-600: #2b7bd6;
  --ink: #1d3b66;
  --ink-2: #3f5d88;
  --muted: #7d93b5;
  --line: #e3eefb;
  --white: #ffffff;
  --pink: #ffb8cf;
  --ok: #3cbf8a;
  --warn: #f2a93b;
  --bad: #ef6b7c;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --shadow: 0 6px 24px -8px rgba(63, 151, 245, 0.25), 0 2px 6px -2px rgba(29, 59, 102, 0.06);
  --shadow-lg: 0 18px 50px -18px rgba(63, 151, 245, 0.45);
  --font-display: 'Mali', 'Anuphan', system-ui, sans-serif;
  --font-body: 'Anuphan', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--sky-100), transparent 60%),
    radial-gradient(900px 400px at -10% 10%, #f0f7ff, transparent 60%),
    var(--sky-25);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.55;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--sky-600); text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.25; letter-spacing: -0.005em; }
.hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--sky-300); outline-offset: 2px; border-radius: 10px; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.brand img { width: 38px; height: 38px; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 500; }
.nav a:hover { background: var(--sky-50); }
.nav a.active { background: var(--sky-100); color: var(--sky-600); }
.spacer { flex: 1; }
.balance-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px;
  border-radius: 999px; background: var(--sky-50); border: 1px solid var(--sky-100); font-weight: 600;
}
.balance-pill .plus { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-500); color: #fff; font-weight: 700; }

/* ---------- Buttons / inputs ---------- */
.btn {
  border: 0; cursor: pointer; border-radius: 999px; padding: 11px 22px; font-weight: 600;
  background: var(--sky-500); color: #fff; box-shadow: 0 6px 16px -6px rgba(63, 151, 245, 0.7);
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { background: var(--sky-600); }
.btn:active { transform: scale(0.97); }
.btn:disabled { background: var(--sky-200); box-shadow: none; cursor: not-allowed; }
.btn.ghost { background: var(--white); color: var(--sky-600); border: 1.5px solid var(--sky-200); box-shadow: none; }
.btn.ghost:hover { background: var(--sky-50); }
.btn.block { width: 100%; padding: 14px; font-size: 1.05rem; }
.btn.sm { padding: 7px 14px; font-size: 0.9rem; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.input {
  width: 100%; padding: 13px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--sky-100); background: var(--white); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { border-color: var(--sky-400); box-shadow: 0 0 0 4px var(--sky-50); }
.input.err { border-color: var(--bad); }
.hint { font-size: 0.82rem; color: var(--muted); }
.row { display: flex; gap: 10px; }
.row > .input { flex: 1; }

/* ---------- Layout ---------- */
main { max-width: 1120px; margin: 0 auto; padding: 28px 20px 120px; }
.card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 24px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 4px 16px; }
.section-title h2 { font-size: 1.35rem; }
.section-title span { color: var(--muted); font-size: 0.92rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 32px; padding: 40px 44px;
  background: linear-gradient(135deg, #7cc0ff 0%, #4fa3f7 55%, #3f8ff0 100%); color: #fff;
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 20px; box-shadow: var(--shadow-lg);
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.16);
}
.hero::before { width: 320px; height: 320px; right: -80px; top: -120px; }
.hero::after { width: 180px; height: 180px; left: 38%; bottom: -110px; }
.hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.hero p { margin: 12px 0 22px; opacity: 0.92; max-width: 30em; }
.hero .btn { background: #fff; color: var(--sky-600); box-shadow: 0 8px 20px -8px rgba(0, 40, 100, 0.4); }
.hero-art { justify-self: center; width: min(240px, 100%); animation: float 4.5s ease-in-out infinite; position: relative; z-index: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Game grid ---------- */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.game-card {
  cursor: pointer; border: 1px solid var(--line); background: var(--white); border-radius: var(--r-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 14px; text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
}
.game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--sky-200); }
.game-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; }
.game-card h3 { font-size: 1.08rem; }
.game-card .from { font-size: 0.85rem; color: var(--muted); }

/* ---------- Game page ---------- */
.game-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.game-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.game-head .game-icon { width: 72px; height: 72px; font-size: 34px; }
.back { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); margin-bottom: 14px; cursor: pointer; background: none; border: 0; padding: 0; }
.step { margin-bottom: 26px; }
.step-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 12px; }
.step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--sky-100); color: var(--sky-600); display: grid; place-items: center; font-size: 0.9rem; font-weight: 700; }
.pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pkg {
  cursor: pointer; border: 1.5px solid var(--sky-100); border-radius: var(--r-md); background: var(--white);
  padding: 16px 14px; text-align: left; display: flex; flex-direction: column; gap: 4px; transition: all 0.15s;
}
.pkg:hover { border-color: var(--sky-300); }
.pkg.sel { border-color: var(--sky-500); background: var(--sky-50); box-shadow: 0 0 0 4px rgba(109, 180, 255, 0.2); }
.pkg .name { font-weight: 600; }
.pkg .price { color: var(--sky-600); font-weight: 700; font-size: 1.05rem; }
.summary { position: sticky; top: 92px; }
.summary h3 { font-size: 1.1rem; margin-bottom: 14px; }
.sum-line { display: flex; justify-content: space-between; padding: 7px 0; color: var(--ink-2); }
.sum-line.total { border-top: 1.5px dashed var(--sky-100); margin-top: 8px; padding-top: 14px; font-weight: 700; color: var(--ink); font-size: 1.15rem; }
.sum-line.disc span:last-child { color: var(--ok); }
.coupon-ok { color: var(--ok); font-size: 0.86rem; margin-top: 6px; }
.coupon-err { color: var(--bad); font-size: 0.86rem; margin-top: 6px; }

/* ---------- Wallet ---------- */
.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.amt { cursor: pointer; border: 1.5px solid var(--sky-100); border-radius: var(--r-sm); background: #fff; padding: 12px 6px; font-weight: 600; }
.amt.sel { border-color: var(--sky-500); background: var(--sky-50); color: var(--sky-600); }
.qr-box { text-align: center; background: var(--sky-50); border-radius: var(--r-md); padding: 18px; margin-top: 14px; }
.qr-box img { width: 220px; height: 220px; border-radius: 14px; background: #fff; padding: 8px; }
.qr-box .pp { font-weight: 700; color: var(--ink-2); margin-top: 8px; }
.drop {
  border: 2px dashed var(--sky-200); border-radius: var(--r-md); padding: 28px 16px; text-align: center; cursor: pointer;
  background: var(--sky-25); transition: all 0.15s; display: block;
}
.drop:hover, .drop.over { border-color: var(--sky-400); background: var(--sky-50); }
.drop img { max-width: 160px; max-height: 220px; border-radius: 10px; margin-top: 10px; }
.drop .big { font-size: 34px; }

/* ---------- List / history ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.item .meta { flex: 1; min-width: 0; }
.item .meta b { display: block; }
.item .meta small { color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.badge.success { background: #e3f7ee; color: #20936a; }
.badge.processing, .badge.pending { background: #fff4e0; color: #b9791b; }
.badge.refunded, .badge.failed { background: #ffe9ec; color: #c74658; }
.amt-plus { color: var(--ok); font-weight: 700; }
.amt-minus { color: var(--ink-2); font-weight: 700; }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.empty img { width: 110px; opacity: 0.9; }
.tabs { display: inline-flex; background: var(--sky-50); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.tabs button { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--muted); }
.tabs button.on { background: #fff; color: var(--sky-600); box-shadow: var(--shadow); }

/* ---------- Modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(29, 59, 102, 0.32); backdrop-filter: blur(4px); z-index: 60; display: grid; place-items: center; padding: 16px; animation: fade 0.18s ease; }
.modal { width: min(420px, 100%); background: #fff; border-radius: 28px; padding: 28px; box-shadow: var(--shadow-lg); animation: pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3); position: relative; }
.modal .mascot { width: 76px; display: block; margin: -2px auto 8px; }
.modal h2 { text-align: center; margin-bottom: 18px; }
.modal form { display: flex; flex-direction: column; gap: 14px; }
.modal .x { position: absolute; right: 16px; top: 14px; border: 0; background: var(--sky-50); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: var(--muted); }
.confirm-row { display: flex; justify-content: space-between; padding: 6px 0; }
.confirm-row span:first-child { color: var(--muted); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.92) translateY(10px); } }

/* ---------- Toast ---------- */
.toasts { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100% - 32px)); }
.toast { background: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow-lg); border-left: 5px solid var(--sky-400); animation: pop 0.2s ease; font-weight: 500; }
.toast.ok { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }

/* ---------- Mobile bottom nav ---------- */
.bottom-nav, .buybar { display: none; }
.footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 30px 0 10px; }
.mock-banner { background: #fff4e0; color: #9a6514; text-align: center; font-size: 0.82rem; padding: 6px; }

@media (max-width: 900px) {
  .game-layout, .wallet-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .nav, .topbar .login-btn-desk { display: none; }
  .topbar-inner { padding: 10px 16px; }
  main { padding: 18px 14px 130px; }
  .hero { grid-template-columns: 1fr; padding: 28px 24px; border-radius: 26px; text-align: left; }
  .hero-art { width: 130px; position: absolute; right: 10px; top: 14px; opacity: 0.95; }
  .hero h1 { padding-right: 110px; }
  .games { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .game-card { padding: 14px; }
  .game-icon { width: 54px; height: 54px; font-size: 26px; border-radius: 16px; }
  .pkgs { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 18px; border-radius: 20px; }
  .amounts { grid-template-columns: repeat(3, 1fr); }
  /* แถบชำระเงินลอยเหนือเมนูล่างบนมือถือ */
  .buybar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 12px; right: 12px; bottom: 88px; z-index: 35;
    background: #fff; border-radius: 20px; padding: 10px 10px 10px 18px;
    box-shadow: var(--shadow-lg); border: 1px solid var(--sky-100);
  }
  .buybar small { display: block; color: var(--muted); font-size: 0.75rem; }
  .buybar b { font-size: 1.15rem; }
  main:has(.buybar) { padding-bottom: 200px; }
  .bottom-nav {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
    background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); border-radius: 22px;
    box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom) * 0.5);
  }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 16px; color: var(--muted); font-size: 0.74rem; font-weight: 600; }
  .bottom-nav a .ic { font-size: 1.25rem; line-height: 1; }
  .bottom-nav a.active { background: var(--sky-50); color: var(--sky-600); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}