@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ══ CUSTOM THEME (color picker) ══ */
.wf-wrap {
  --wf-bg:     #1a0a2e;
  --wf-card:   #240d3e;
  --wf-card2:  #2d1050;
  --wf-border: rgba(255,255,255,0.08);
  --wf-text:   #ffffff;
  --wf-muted:  rgba(255,255,255,0.42);
  --wf-gold:   #f5c842;
  --wf-green:  #2ecc71;
}

/* ══ BASE ══ */
.wf-wrap {
  font-family: 'Sarabun', sans-serif;
  background: var(--wf-bg);
  width: 100%; max-width: 100%; box-sizing: border-box;
  overflow: hidden; border-radius: 16px; margin: 0;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  border: 1px solid var(--wf-border);
}
.wf-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wf-green); flex-shrink: 0;
  animation: wf-pulse 1.4s ease-in-out infinite;
}
.wf-bank-logo {
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wf-bank-logo img { width:100%; height:100%; object-fit:cover; }
.wf-phone-sub { font-size:9px; opacity:.45; font-family:'JetBrains Mono',monospace; }
.wf-status { font-size:10px; font-weight:600; padding:2px 9px; border-radius:20px; display:inline-block; margin-top:4px; }
.wf-status.done    { background:rgba(46,204,113,0.15); color:var(--wf-green); border:1px solid rgba(46,204,113,0.3); }
.wf-status.pending { background:rgba(255,180,0,0.12); color:#ffd700; border:1px solid rgba(255,180,0,0.25); animation:wf-blink 1.2s infinite; }

/* ══ BIG WIN BADGE — ไฟวิ่งทอง (ใช้ร่วมกัน) ══ */
.wf-bigwin-banner {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(90deg,#7c3f00,#c8860a,#f5c842,#c8860a,#7c3f00);
  background-size:200% 100%;
  animation:wf-gold-slide 1.8s linear infinite;
  padding:3px 0; text-align:center;
}
.wf-e-bigbadge, .wf-c-bigbadge {
  display:inline-block; margin-top:5px;
  background:linear-gradient(90deg,#7c3f00,#c8860a,#f5c842,#c8860a,#7c3f00);
  background-size:200% 100%;
  animation:wf-gold-slide 1.8s linear infinite;
  border-radius:4px; padding:2px 10px;
}
.wf-f-bigbadge {
  margin-top:6px; width:100%;
  background:linear-gradient(90deg,#7c3f00,#c8860a,#f5c842,#c8860a,#7c3f00);
  background-size:200% 100%;
  animation:wf-gold-slide 1.8s linear infinite;
  border-radius:4px; padding:3px 6px; text-align:center;
}
.wf-bw-text { font-size:10px; font-weight:800; color:#000; letter-spacing:.06em; white-space:nowrap; }

/* ══ EFFECTS (20 แบบ) ══ */
/* 1 none – ไม่มีเอฟเฟกต์ */
/* 2 glow-gold */
.wf-fx-glow-gold .wf-card.big-win { box-shadow:0 0 18px rgba(245,200,66,.45); }
/* 3 glow-green */
.wf-fx-glow-green .wf-card { box-shadow:0 0 8px rgba(46,204,113,.2); }
/* 4 border-pulse */
.wf-fx-border-pulse .wf-card.big-win { animation:wf-card-in .4s cubic-bezier(.34,1.4,.64,1), wf-border-pulse 2s ease-in-out infinite; }
/* 5 card-rise */
.wf-fx-card-rise .wf-card { transition:transform .2s; }
.wf-fx-card-rise .wf-card:hover { transform:translateY(-3px); }
/* 6 shimmer */
.wf-fx-shimmer .wf-card.big-win::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);
  background-size:200% 100%; animation:wf-shimmer 2.5s linear infinite;
}
/* 7 fade-in */
.wf-fx-fade-in .wf-card { animation:wf-fade-in .5s ease; }
/* 8 bounce-in */
.wf-fx-bounce-in .wf-card { animation:wf-bounce-in .5s cubic-bezier(.34,1.6,.64,1); }
/* 9 slide-left */
.wf-fx-slide-left .wf-card { animation:wf-card-in .4s cubic-bezier(.34,1.4,.64,1); }
/* 10 slide-down */
.wf-fx-slide-down .wf-card { animation:wf-slide-down .4s cubic-bezier(.34,1.4,.64,1); }
/* 11 zoom-in */
.wf-fx-zoom-in .wf-card { animation:wf-zoom-in .35s ease; }
/* 12 flip-x */
.wf-fx-flip-x .wf-card { animation:wf-flip-x .4s ease; }
/* 13 big-glow-pulse */
.wf-fx-big-glow .wf-card.big-win { animation:wf-card-in .4s cubic-bezier(.34,1.4,.64,1), wf-glow-pulse 2s ease-in-out infinite; }
/* 14 rainbow-border */
.wf-fx-rainbow .wf-card.big-win { border:2px solid transparent; background-clip:padding-box; animation:wf-card-in .4s, wf-rainbow 3s linear infinite; }
/* 15 neon-text */
.wf-fx-neon-text .wf-card.big-win .wf-amount { animation:wf-neon-flicker 2s linear infinite; }
/* 16 card-bg-flash */
.wf-fx-bg-flash .wf-card.big-win { animation:wf-card-in .4s cubic-bezier(.34,1.4,.64,1), wf-bg-flash 3s ease-in-out infinite; }
/* 17 scale-logo */
.wf-fx-scale-logo .wf-card.big-win .wf-bank-logo { animation:wf-scale-logo 1.5s ease-in-out infinite; }
/* 18 status-glow */
.wf-fx-status-glow .wf-status.done { box-shadow:0 0 8px rgba(46,204,113,.6); }
/* 19 card-shadow */
.wf-fx-card-shadow .wf-card { box-shadow:0 4px 20px rgba(0,0,0,.5); }
/* 20 gold-border-big */
.wf-fx-gold-border .wf-card.big-win { border:2px solid var(--wf-gold) !important; }

/* ══ STYLE A : Neon Bar ══ */
.wf-style-a .wf-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.wf-style-a .wf-title  { font-size:13px; font-weight:700; color:var(--wf-text); display:flex; align-items:center; gap:8px; margin:0; }
.wf-style-a .wf-list   { padding:0 10px 12px; display:flex; flex-direction:column; gap:5px; }
.wf-style-a .wf-card   { display:flex; align-items:center; gap:10px; background:var(--wf-card); border-radius:10px; padding:9px 12px; border-left:3px solid transparent; position:relative; overflow:hidden; }
.wf-style-a .wf-card.big-win { border-left-color:var(--wf-gold); padding-bottom:20px; }
.wf-style-a .wf-bank-logo { width:34px; height:34px; border-radius:8px; }
.wf-style-a .wf-info   { flex:1; min-width:0; }
.wf-style-a .wf-name   { font-size:12px; font-weight:700; color:var(--wf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-style-a .wf-sub    { font-size:9px; color:var(--wf-muted); font-family:'JetBrains Mono',monospace; margin-top:1px; }
.wf-style-a .wf-bar-track { height:3px; border-radius:2px; background:rgba(255,255,255,.08); margin-top:4px; overflow:hidden; }
.wf-style-a .wf-bar    { height:100%; width:0; border-radius:2px; }
.wf-style-a .wf-right  { text-align:right; flex-shrink:0; }
.wf-style-a .wf-amount { font-size:13px; font-weight:700; color:var(--wf-text); font-family:'JetBrains Mono',monospace; }
.wf-style-a .wf-card.big-win .wf-amount { color:var(--wf-gold); }

/* ══ STYLE B : Glass Card (ไม่มีเอฟเฟกต์ในตัวการ์ดเลย) ══ */
.wf-style-b .wf-header { display:flex; align-items:center; padding:14px 18px 10px; }
.wf-style-b .wf-title  { font-size:14px; font-weight:700; color:rgba(255,255,255,0.9); display:flex; align-items:center; gap:8px; margin:0; }
.wf-style-b .wf-list   { padding:0 12px 14px; display:flex; flex-direction:column; gap:8px; }
.wf-style-b .wf-card   { display:flex; align-items:center; gap:12px; background:var(--wf-card); border-radius:12px; padding:11px 14px; border:1px solid var(--wf-border); position:relative; overflow:hidden; }
.wf-style-b .wf-card.big-win { border-color:rgba(245,200,66,0.25); padding-bottom:28px; }
.wf-style-b .wf-bank-logo { width:40px; height:40px; border-radius:10px; }
.wf-style-b .wf-info   { flex:1; min-width:0; }
.wf-style-b .wf-name   { font-size:13px; font-weight:600; color:rgba(255,255,255,0.9); }
.wf-style-b .wf-time   { font-size:10px; color:var(--wf-muted); margin-top:2px; }
.wf-style-b .wf-ref    { font-size:10px; color:var(--wf-gold); opacity:.7; font-family:'JetBrains Mono',monospace; margin-top:1px; }
.wf-style-b .wf-right  { text-align:right; flex-shrink:0; }
.wf-style-b .wf-amount { font-size:14px; font-weight:700; color:var(--wf-text); font-family:'JetBrains Mono',monospace; line-height:1.2; }
.wf-style-b .wf-amt-unit { font-size:10px; opacity:.6; display:block; }
.wf-style-b .wf-card.big-win .wf-amount { color:var(--wf-gold); }

/* ══ STYLE C : Timeline Feed ══ */
.wf-style-c .wf-header { display:flex; align-items:center; padding:13px 18px; }
.wf-style-c .wf-title  { font-size:13px; font-weight:700; color:var(--wf-text); display:flex; align-items:center; gap:8px; margin:0; }
.wf-style-c .wf-list   { padding:0 14px 14px; display:flex; flex-direction:column; }
.wf-style-c .wf-card   { display:flex; gap:12px; position:relative; }
.wf-style-c .wf-card + .wf-card { border-top:1px solid rgba(255,255,255,.06); padding-top:10px; margin-top:2px; }
.wf-style-c .wf-card:last-child { padding-bottom:4px; }
.wf-style-c .wf-tl-left   { display:flex; flex-direction:column; align-items:center; width:40px; flex-shrink:0; }
.wf-style-c .wf-bank-logo { width:40px; height:40px; border-radius:10px; }
.wf-style-c .wf-tl-line   { width:2px; flex:1; margin-top:4px; border-radius:1px; background:rgba(255,255,255,.1); min-height:10px; }
.wf-style-c .wf-card:last-child .wf-tl-line { display:none; }
.wf-style-c .wf-body      { flex:1; min-width:0; padding:6px 0 10px; }
.wf-style-c .wf-c-top     { display:flex; align-items:flex-start; gap:8px; }
.wf-style-c .wf-c-left    { flex:1; min-width:0; }
.wf-style-c .wf-c-right   { text-align:right; flex-shrink:0; }
.wf-style-c .wf-name      { font-size:13px; font-weight:700; color:var(--wf-text); }
.wf-style-c .wf-meta      { font-size:10px; color:var(--wf-muted); font-family:'JetBrains Mono',monospace; margin-top:2px; }
.wf-style-c .wf-amount    { font-size:15px; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--wf-text); line-height:1; }
.wf-style-c .wf-c-thb     { font-size:9px; color:var(--wf-muted); margin-top:1px; }
.wf-style-c .wf-card.big-win .wf-amount { color:var(--wf-gold); }

/* ══ STYLE E : Flip Ticker ══
   tier 0 (ร้อย) + tier 1 (พัน) = สีเขียว | tier 2 (หมื่น+) = ทอง
*/
.wf-style-e .wf-header { display:flex; align-items:center; padding:12px 16px 10px; }
.wf-style-e .wf-title  { font-size:13px; font-weight:700; color:var(--wf-text); display:flex; align-items:center; gap:8px; margin:0; }
.wf-style-e .wf-list   { padding:0 10px 12px; display:flex; flex-direction:column; gap:6px; }
.wf-style-e .wf-card   { border-radius:10px; overflow:hidden; position:relative; background:var(--wf-card); }
.wf-style-e .wf-card.big-win { outline:2px solid rgba(245,200,66,0.5); }
.wf-style-e .wf-tier-bar { height:3px; width:100%; }
.wf-style-e .wf-inner  { display:flex; align-items:center; gap:10px; padding:9px 12px; }
.wf-style-e .wf-bank-logo { width:36px; height:36px; border-radius:8px; }
.wf-style-e .wf-info   { flex:1; min-width:0; }
.wf-style-e .wf-name   { font-size:12px; font-weight:700; color:var(--wf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-style-e .wf-time   { font-size:9px; color:var(--wf-muted); font-family:'JetBrains Mono',monospace; margin-top:2px; }
.wf-style-e .wf-right  { text-align:right; flex-shrink:0; }
.wf-style-e .wf-amount { font-size:14px; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--wf-text); line-height:1; }
.wf-style-e .wf-thb    { font-size:9px; color:var(--wf-muted); margin-top:1px; }
.wf-style-e .wf-card.big-win .wf-amount { color:var(--wf-gold); }

/* ══ STYLE F : Split Panel ══ */
.wf-style-f .wf-header { display:flex; align-items:center; padding:12px 18px 10px; }
.wf-style-f .wf-title  { font-size:13px; font-weight:700; color:var(--wf-text); display:flex; align-items:center; gap:8px; margin:0; }
.wf-style-f .wf-list   { padding:0 12px 14px; display:flex; flex-direction:column; gap:7px; }
.wf-style-f .wf-card   { display:flex; border-radius:12px; overflow:hidden; min-height:66px; border:2px solid transparent; transition:border-color .3s; }
.wf-style-f .wf-card.big-win { border-color:var(--wf-gold); box-shadow:0 0 0 1px rgba(245,200,66,.3), 0 4px 20px rgba(245,200,66,.15); }
.wf-style-f .wf-panel-left  { flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--wf-card); }
.wf-style-f .wf-bank-logo   { width:38px; height:38px; border-radius:9px; }
.wf-style-f .wf-meta  { min-width:0; flex:1; }
.wf-style-f .wf-name  { font-size:12px; font-weight:700; color:var(--wf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-style-f .wf-phone { font-size:9px; color:var(--wf-muted); font-family:'JetBrains Mono',monospace; margin-top:2px; }
.wf-style-f .wf-ftime { font-size:9px; color:var(--wf-muted); font-family:'JetBrains Mono',monospace; margin-top:1px; }
.wf-style-f .wf-ref   { font-size:9px; color:rgba(245,200,66,.65); font-family:'JetBrains Mono',monospace; margin-top:1px; }
.wf-style-f .wf-sep   { width:1px; flex-shrink:0; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.15) 0,rgba(255,255,255,.15) 4px,transparent 4px,transparent 8px); }
.wf-style-f .wf-panel-right { width:136px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; background:var(--wf-card2); text-align:center; }
.wf-style-f .wf-amount { font-size:15px; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--wf-text); line-height:1.1; }
.wf-style-f .wf-card.big-win .wf-amount { color:var(--wf-gold); }
.wf-style-f .wf-unit  { font-size:9px; color:var(--wf-muted); margin-top:2px; }

/* ══ KEYFRAMES ══ */
@keyframes wf-pulse        { 0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,.6)} 50%{box-shadow:0 0 0 5px rgba(46,204,113,0)} }
@keyframes wf-blink        { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes wf-gold-slide   { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes wf-card-in      { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes wf-slide-down   { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes wf-fade-in      { from{opacity:0} to{opacity:1} }
@keyframes wf-bounce-in    { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes wf-zoom-in      { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes wf-flip-x       { from{opacity:0;transform:rotateX(-20deg)} to{opacity:1;transform:rotateX(0)} }
@keyframes wf-shimmer      { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes wf-border-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(245,200,66,.5)} 50%{box-shadow:0 0 0 6px rgba(245,200,66,0)} }
@keyframes wf-glow-pulse   { 0%,100%{box-shadow:0 0 10px rgba(245,200,66,.3)} 50%{box-shadow:0 0 25px rgba(245,200,66,.7)} }
@keyframes wf-rainbow      { 0%{border-color:#f5c842} 25%{border-color:#2ecc71} 50%{border-color:#3498db} 75%{border-color:#e91e63} 100%{border-color:#f5c842} }
@keyframes wf-neon-flicker { 0%,100%{text-shadow:0 0 8px #f5c842} 50%{text-shadow:0 0 20px #f5c842,0 0 40px #f5c842} }
@keyframes wf-bg-flash     { 0%,100%{background:var(--wf-card)} 50%{background:rgba(245,200,66,.08)} }
@keyframes wf-scale-logo   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

@media(max-width:480px){
  .wf-style-f .wf-panel-right { width:110px; }
  .wf-style-f .wf-amount { font-size:13px; }
  .wf-style-a .wf-card { padding:7px 9px; }
}