@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800;900&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap");
:root{
  --bg:#0a0a0a;
  --panel:#141414;
  --panel2:#1a1a1a;
  --gold:#d4af37;
  --gold2:#f0d78c;
  --gold3:#ffe9a8;
  --gold-dark:#a67c00;
  --gold-darker:#6a5010;
  --gold-dim:rgba(212,175,55,.15);
  --line:rgba(212,175,55,.22);
  --g08:rgba(212,175,55,.08);--g10:rgba(212,175,55,.10);--g12:rgba(212,175,55,.12);
  --g15:rgba(212,175,55,.15);--g18:rgba(212,175,55,.18);--g20:rgba(212,175,55,.20);
  --g22:rgba(212,175,55,.22);--g25:rgba(212,175,55,.25);--g28:rgba(212,175,55,.28);
  --g30:rgba(212,175,55,.30);--g35:rgba(212,175,55,.35);--g40:rgba(212,175,55,.40);
  --g42:rgba(212,175,55,.42);--g45:rgba(212,175,55,.45);--g50:rgba(212,175,55,.50);
  --g55:rgba(212,175,55,.55);--g70:rgba(212,175,55,.70);
  --text:#f5f5f5;
  --muted:#9ca3af;
  --danger:#f87171;
  --ok:#4ade80;
  --radius:14px;
  --nav-h:64px;
}
*{box-sizing:border-box;font-family:inherit}
:root{--font:"Prompt","Noto Sans Thai",Tahoma,"Segoe UI",sans-serif}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);min-height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea,optgroup,.btn,a,table,th,td,label,span,p,div,h1,h2,h3,h4,h5,h6{font-family:inherit}
input,select,textarea,button{font-size:16px} /* กัน iOS zoom + ใช้ฟอนต์เดียว */
a{color:var(--gold);text-decoration:none}
.wrap{max-width:480px;margin:0 auto;padding:12px 14px calc(var(--nav-h) + 20px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 14px}
.brand{font-weight:800;font-size:18px;color:var(--gold2);letter-spacing:.02em}
.credit-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.14),var(--g12) 50%,rgba(0,0,0,.2));
  border:1px solid var(--g40);color:var(--gold2);padding:6px 12px;border-radius:999px;
  font-weight:800;font-size:13px;
  box-shadow:0 3px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.panel h2,.panel h3{margin:0 0 10px;font-size:15px;color:var(--gold2)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:14px 16px;border:0;border-radius:16px;font-weight:800;cursor:pointer;font-size:14px;
  position:relative;overflow:hidden;
  transform:translateY(0);
  transition:transform .12s ease,box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
    0 6px 0 rgba(0,0,0,.4),
    0 12px 18px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 8px rgba(0,0,0,.35);
}
.btn::before{display:none!important;content:none!important}
.btn:active{
  transform:translateY(3px);
  box-shadow:
    0 2px 0 rgba(0,0,0,.3),
    0 4px 10px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.15);
}
.btn-gold{
  background:linear-gradient(180deg,var(--gold3) 0%,var(--gold2) 25%,var(--gold) 70%,var(--gold-dark) 100%)!important;
  color:#1a1200!important;
  border:1px solid rgba(255,230,150,.55)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.btn-gold:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-outline{
  background:linear-gradient(180deg,#5a4d32 0%,#3d3424 35%,#2a2418 70%,#1c1810 100%)!important;
  background-color:#3d3424!important;
  border:1px solid var(--g70)!important;
  color:#f3e6b8!important;
  box-shadow:
    0 6px 0 rgba(0,0,0,.45),
    0 12px 18px rgba(0,0,0,.36),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 10px rgba(0,0,0,.45)!important;
}
.btn-danger{
  background:linear-gradient(180deg,#8b3030 0%,#6b1c1c 40%,#4a1010 100%)!important;
  background-color:#6b1c1c!important;
  color:#fecaca!important;
  border:1px solid rgba(248,113,113,.55)!important;
  box-shadow:
    0 6px 0 rgba(60,0,0,.45),
    0 12px 18px rgba(0,0,0,.36),
    inset 0 2px 0 rgba(255,180,180,.28),
    inset 0 -3px 10px rgba(0,0,0,.4)!important;
}
.form-control{width:100%;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#0f0f0f;color:#fff;font-size:14px;margin-bottom:10px}
.form-control:focus{outline:none;border-color:var(--gold)}
label.lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.grid-2 .btn{min-height:48px;height:100%;box-sizing:border-box}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lotto-card{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;color:var(--text);transition:.15s}
.lotto-card:active{transform:scale(.98)}
.lotto-card .name{font-weight:700;font-size:13px;color:var(--gold2)}
.lotto-card .sub{font-size:11px;color:var(--muted);margin-top:4px}
.msg{padding:10px 12px;border-radius:10px;margin-bottom:12px;font-size:13px}
.msg.ok{background:rgba(74,222,128,.12);color:var(--ok);border:1px solid rgba(74,222,128,.3)}
.msg.err{background:rgba(248,113,113,.12);color:var(--danger);border:1px solid rgba(248,113,113,.3)}
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);display:flex;z-index:50;max-width:480px;margin:0 auto;
  background:linear-gradient(180deg,rgba(30,28,22,.92),rgba(10,10,10,.96));
  border-top:1px solid var(--g28);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 -8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:10px;font-weight:700}
.bottom-nav a.active{color:var(--gold2);text-shadow:0 0 12px rgba(240,215,140,.35)}
.bottom-nav svg{width:22px;height:22px}
.page-title{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.page-title h1{margin:0;font-size:18px;color:var(--gold2);flex:1}
.back{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),var(--g12) 45%,rgba(0,0,0,.28));
  border:1px solid var(--g45);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold2);font-size:20px;font-weight:800;text-decoration:none;
  position:relative;overflow:hidden;
  box-shadow:
    0 4px 0 rgba(0,0,0,.3),
    0 8px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.back::before{
  content:"";position:absolute;left:10%;right:10%;top:0;height:45%;
  border-radius:10px 10px 40% 40%;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
  pointer-events:none;
}
.back:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.table{width:100%;border-collapse:collapse;font-size:12px}
.table th,.table td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.table th{color:var(--muted);font-weight:600}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.badge-open{background:rgba(74,222,128,.15);color:var(--ok)}
.badge-closed{background:rgba(156,163,175,.15);color:var(--muted)}
.badge-won{background:var(--g20);color:var(--gold2)}
.badge-lost{background:rgba(248,113,113,.15);color:var(--danger)}
.badge-pending{background:rgba(251,191,36,.15);color:#fbbf24}
.hero{background:linear-gradient(135deg,#1a1508 0%,#0a0a0a 60%);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px}
.hero .t{font-size:12px;color:var(--muted)}
.hero .v{font-size:28px;font-weight:800;color:var(--gold2);margin-top:4px}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:4px}
.tabs button{
  flex:0 0 auto;padding:8px 12px;border-radius:999px;font-weight:700;font-size:12px;cursor:pointer;
  border:1px solid var(--g30);color:var(--muted);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.22));
  box-shadow:0 3px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tabs button.on{
  color:#1a1200;border-color:rgba(255,230,150,.5);
  background:linear-gradient(180deg,var(--gold3),var(--gold) 70%,var(--gold-dark));
  box-shadow:0 3px 0 rgba(120,80,0,.35),inset 0 1px 0 rgba(255,255,255,.4);
}
.muted{color:var(--muted);font-size:12px}
.center{text-align:center}


/* ===== Glass raised — เติมสีเต็มกรอบ + เงานูน ===== */
.glass-raise, .quick a, .lt-item, .cat-tabs a, .prov-card, .game-card, .lotto-card {
  position:relative;
  overflow:hidden;
  border:1px solid var(--g42) !important;
  /* พื้นทึบเต็มกรอบ + ไฮไลต์กระจกทับด้านบน */
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 28%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #2c2414 0%, #1a160e 45%, #0c0a07 100%) !important;
  background-color:#14110b !important;
  box-shadow:
    0 5px 0 rgba(0,0,0,.38),
    0 12px 20px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 6px rgba(0,0,0,.35) !important;
  transition:transform .12s ease, box-shadow .12s ease;
}
.sec-head {
  position:relative;overflow:hidden;
  border:1px solid var(--g40) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, #3a2e14 0%, #1f180c 100%) !important;
  box-shadow:
    0 4px 0 rgba(0,0,0,.32),
    0 8px 14px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.home-banner, .hero, .panel {
  position:relative;overflow:hidden;
  border:1px solid var(--g35) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 40%),
    linear-gradient(135deg, #2a1f0c 0%, #12100a 55%, #0a0906 100%) !important;
  box-shadow:
    0 6px 0 rgba(0,0,0,.3),
    0 12px 22px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.side-bets-fab {
  box-shadow:
    -4px 4px 16px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.2) !important;
}
.quick a:active, .lt-item:active, .prov-card:active, .game-card:active, .lotto-card:active, .cat-tabs a:active {
  transform:translateY(2px);
  box-shadow:
    0 2px 0 rgba(0,0,0,.3),
    0 4px 10px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.lt-item.disabled, .lt-item.disabled:active {
  transform:none !important;
  filter:grayscale(.45);
  opacity:.45;
  box-shadow:none !important;
}
.cat-tabs a.on {
  background:linear-gradient(180deg,var(--gold3),var(--gold) 70%,var(--gold-dark)) !important;
  color:#1a1200 !important;
  border-color:rgba(255,230,150,.55) !important;
  box-shadow:0 4px 0 rgba(120,80,0,.35), inset 0 1px 0 rgba(255,255,255,.45) !important;
}



/* ===== Mobile slide menu ===== */
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.m-menu-btn{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:12px;
  border:1px solid var(--g50)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.3))!important;
  color:var(--gold2)!important;font-size:22px;font-weight:900;line-height:1;
  cursor:pointer;flex-shrink:0;
  box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25);
  -webkit-appearance:none;appearance:none;
}
.m-drawer-overlay{
  position:fixed!important;left:0!important;top:0!important;right:0!important;bottom:0!important;
  z-index:9998!important;
  background:rgba(0,0,0,.6)!important;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease;
}
.m-drawer-overlay.show{opacity:1!important;display:block!important}
.m-drawer-overlay[hidden]{display:none!important}
.m-drawer{
  position:fixed!important;left:0!important;top:0!important;bottom:0!important;
  z-index:9999!important;
  width:min(86vw,300px)!important;
  max-width:300px;
  background:linear-gradient(180deg,#16130e 0%,#0c0b09 100%)!important;
  border-right:1px solid var(--g35)!important;
  box-shadow:12px 0 40px rgba(0,0,0,.55)!important;
  transform:translateX(-110%);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  display:flex!important;flex-direction:column!important;
  padding:0;visibility:visible;
}
.m-drawer.open{transform:translateX(0)!important}
.m-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 16px 14px;border-bottom:1px solid var(--g18);
}
.m-drawer-title{font-size:16px;font-weight:900;color:var(--gold2)}
.m-drawer-sub{font-size:11px;color:#8a8070;margin-top:2px}
.m-drawer-close{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--g30);
  background:rgba(0,0,0,.3);color:var(--gold2);font-size:16px;cursor:pointer;
}
.m-drawer-credit{
  margin:12px 14px;padding:12px 14px;border-radius:14px;
  background:var(--g10);border:1px solid var(--g28);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:#9a8b6a;font-weight:700;
}
.m-drawer-credit strong{font-size:16px;color:#ffe9a0;font-weight:900}
.m-drawer-nav{flex:1;overflow-y:auto;padding:6px 10px 12px;display:flex;flex-direction:column;gap:4px;-webkit-overflow-scrolling:touch}
.m-drawer-nav a{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:12px;
  color:#d4cbb8;font-size:14px;font-weight:700;text-decoration:none;
  border:1px solid transparent;
}
.m-drawer-nav a:active{background:var(--g12);color:var(--gold2)}
.m-drawer-nav .ico{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);font-size:16px;flex-shrink:0;
}
.m-drawer-foot{padding:12px 14px 20px;border-top:1px solid var(--g12);display:flex;flex-direction:column;gap:8px}
.m-drawer-line{
  text-align:center;padding:12px;border-radius:12px;font-weight:800;font-size:13px;text-decoration:none;
  background:linear-gradient(180deg,#06c755,#048b3a);color:#fff;
}
.m-drawer-logout{
  text-align:center;padding:12px;border-radius:12px;font-weight:800;font-size:13px;text-decoration:none;
  background:rgba(248,113,113,.12);color:#fca5a5;border:1px solid rgba(248,113,113,.35);
}
@media (min-width:1024px){
  .m-menu-btn,.m-drawer,.m-drawer-overlay{display:none!important}
}