/* ===== โปรแกรมสลับเลข ===== */
:root{
  --df-primary:#b3122a; --df-primary-d:#7a0c1c;
  --df-gold:#d4af37; --df-gold-d:#a8841f;
  --df-nav:#3d0b14; --df-card:#fffdf6;
}
.df-reverse{background:var(--df-card);border-radius:18px;padding:26px;box-shadow:0 10px 30px rgba(0,0,0,.16);border:1px solid rgba(212,175,55,.35);position:relative;overflow:hidden}
.df-reverse::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--df-gold),var(--df-primary),var(--df-gold))}
.df-reverse h3{margin:0 0 6px;color:var(--df-primary-d);font-size:20px}
.df-rev-hint{margin:0 0 16px;color:#6c5847;font-size:14.5px;line-height:1.7}
.df-rev-bar{display:flex;gap:10px}
.df-rev-bar input{flex:1;padding:15px 18px;border:2px solid #ead9b0;border-radius:12px;font-size:20px;font-weight:800;letter-spacing:4px;text-align:center;outline:none}
.df-rev-bar input:focus{border-color:var(--df-gold)}
.df-rev-bar button{background:linear-gradient(135deg,var(--df-primary),var(--df-primary-d));color:#fff;border:0;padding:0 26px;border-radius:12px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(122,12,28,.3);transition:.15s}
.df-rev-bar button:hover{transform:translateY(-2px)}
.df-rev-result{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.df-chip{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:42px;padding:0 12px;background:linear-gradient(135deg,var(--df-primary),var(--df-primary-d));color:#fff;border-radius:10px;font-weight:800;font-size:18px;letter-spacing:1px;box-shadow:0 3px 8px rgba(122,12,28,.3)}
.df-empty{padding:16px;text-align:center;color:#9a8463;background:#fbf3df;border-radius:12px;width:100%}
.df-lucky{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--df-gold),var(--df-gold-d));padding:12px 20px;border-radius:14px;box-shadow:0 4px 14px rgba(168,132,31,.3)}
.df-lucky-label{color:#3d0b14;font-weight:700;font-size:14px}
.df-lucky-num{background:#3d0b14;color:#ffe082;font-weight:900;font-size:22px;padding:6px 14px;border-radius:10px;letter-spacing:2px}
@media(max-width:600px){.df-reverse{padding:18px}.df-rev-bar{flex-direction:column}.df-rev-bar button{padding:13px}}