/* ===== บ้านหวย (BAAN HUAY) — bright festive theme ===== */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&family=Mali:wght@500;600;700&display=swap');

:root{
  /* bright surfaces */
  --bg-0:#fff4e8;          /* page */
  --bg-1:#fffdfb;          /* app column */
  --paper:#ffffff;         /* card */
  --paper-2:#fff7ef;       /* tinted card */
  --ink:#2a1730;           /* primary text (deep plum) */
  --ink-2:#7a6a86;         /* secondary */
  --ink-3:#a99fb3;         /* muted */
  --line:#f0e3ef;          /* hairline */
  --line-2:#e7d8e6;

  /* vivid brand palette */
  --red-1:#ff5a7a; --red-2:#ff2e57; --red-3:#e01244; --red-4:#a8092f;
  --pink:#ff4fa3;
  --orange-1:#ffb24d; --orange-2:#ff8a3d;
  --amber:#ffc220;
  --green-1:#36d98a; --green-2:#15b86c; --green-3:#0a8f50;
  --blue-1:#56b4ff; --blue-2:#2f8fe8;
  --purple-1:#a981ff; --purple-2:#7c4dff;
  --teal:#23c6c6;

  /* gradients */
  --grad-red:linear-gradient(135deg,#ff6a8b 0%,#ff2e57 55%,#e01244 100%);
  --grad-sun:linear-gradient(135deg,#ffd23e 0%,#ff8a3d 100%);
  --grad-green:linear-gradient(135deg,#4ee79b 0%,#15b86c 100%);
  --grad-purple:linear-gradient(135deg,#b18bff 0%,#7c4dff 100%);
  --grad-festive:linear-gradient(120deg,#ff5a7a,#ff8a3d 45%,#ffc220);

  /* gold tokens (for 3D coin/flag rims in icons.css) */
  --gold-1:#fff3cf; --gold-2:#f6c344; --gold-3:#e0a724; --gold-4:#b9831a; --gold-deep:#7c5610;
  --gold-grad:linear-gradient(177deg,#fff3cc 2%,#ffd76b 30%,#eab02f 60%,#c98e1f 86%,#a06f17);
  --line-strong:rgba(224,167,36,.5);
  --bg-2:#fff; --bg-3:#fff7ef; --bg-4:#fff1f4;
  --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--ink-3);

  --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:32px;
  --shadow:0 12px 30px -12px rgba(170,60,120,.28);
  --shadow-soft:0 6px 18px -8px rgba(120,60,110,.22);
  --font:'Kanit',system-ui,sans-serif;
  --display:'Mali','Kanit',cursive;
  --maxw:460px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  background:
    radial-gradient(50% 35% at 10% 2%, rgba(124,77,255,.18), transparent 60%),
    radial-gradient(45% 30% at 92% 0%, rgba(255,46,87,.16), transparent 60%),
    radial-gradient(55% 35% at 50% 100%, rgba(54,217,138,.15), transparent 60%),
    radial-gradient(40% 30% at 85% 95%, rgba(86,180,255,.14), transparent 60%),
    var(--bg-0);
}
#root{min-height:100vh;display:flex;justify-content:center;align-items:stretch;}

.app{
  position:relative;width:100%;max-width:var(--maxw);min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 26% at 50% 0%, #fff 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#fffdfb,#fff4ef);
  box-shadow:0 0 0 1px var(--line), 0 0 60px rgba(150,70,120,.14);
  overflow:hidden;
}
/* sparkle layer */
.app::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(2px 2px at 12% 14%, #ffd23e, transparent),
    radial-gradient(2px 2px at 82% 9%, #ff6a8b, transparent),
    radial-gradient(1.5px 1.5px at 67% 22%, #56b4ff, transparent),
    radial-gradient(2px 2px at 28% 30%, #a981ff, transparent),
    radial-gradient(1.5px 1.5px at 91% 34%, #36d98a, transparent);
  animation:twinkle 3.2s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.35;}50%{opacity:.7;}}
.app > *{position:relative;z-index:1;}

/* typography helpers */
.display{font-family:var(--display);}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.t-red{color:var(--red-2);} .t-green{color:var(--green-2);} .t-gold{color:var(--gold-3);}
.grad-text{background:var(--grad-red);-webkit-background-clip:text;background-clip:text;color:transparent;}
.muted{color:var(--ink-3);} .dim{color:var(--ink-2);}
.row{display:flex;align-items:center;} .between{justify-content:space-between;}

.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.scroll::-webkit-scrollbar{width:0;}

/* buttons */
.btn{font-family:var(--font);font-weight:700;font-size:16px;border:none;cursor:pointer;border-radius:16px;
  padding:15px 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  transition:transform .08s,filter .15s,box-shadow .15s;white-space:nowrap;letter-spacing:.01em;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-red{color:#fff;background:var(--grad-red);box-shadow:0 10px 22px -8px rgba(255,46,87,.6),inset 0 1px 0 rgba(255,255,255,.35);}
.btn-sun{color:#5a2e00;background:var(--grad-sun);box-shadow:0 10px 22px -8px rgba(255,138,61,.55),inset 0 1px 0 rgba(255,255,255,.5);}
.btn-green{color:#fff;background:var(--grad-green);box-shadow:0 10px 22px -8px rgba(21,184,108,.55),inset 0 1px 0 rgba(255,255,255,.35);}
.btn-purple{color:#fff;background:var(--grad-purple);box-shadow:0 10px 22px -8px rgba(124,77,255,.55),inset 0 1px 0 rgba(255,255,255,.3);}
.btn-ghost{color:var(--red-2);background:#fff;border:2px solid var(--line-2);}
.btn-soft{color:var(--ink);background:var(--paper-2);border:1px solid var(--line-2);}
.btn-sm{padding:10px 14px;font-size:14px;border-radius:13px;width:auto;}

/* cards / inputs */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);}
.field{width:100%;background:#fff;border:2px solid var(--line-2);border-radius:15px;color:var(--ink);
  font-family:var(--font);font-size:16px;padding:14px 14px 14px 46px;outline:none;transition:border .15s,box-shadow .15s;}
.field:focus{border-color:var(--red-1);box-shadow:0 0 0 4px rgba(255,90,122,.14);}
.field::placeholder{color:var(--ink-3);}
.field-wrap{position:relative;}
.field-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--red-2);display:flex;}
.label{font-size:12.5px;color:var(--ink-2);font-weight:600;margin:0 0 7px 3px;letter-spacing:.02em;}

/* chips */
.chip{border:2px solid var(--line-2);background:#fff;color:var(--ink-2);border-radius:13px;padding:11px 6px;
  font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
  transition:all .12s;white-space:nowrap;}
.chip.on{border-color:transparent;color:#fff;background:var(--grad-red);box-shadow:0 6px 14px -6px rgba(255,46,87,.5);}

/* topbar */
.topbar{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;position:relative;z-index:3;}
.topbar .ttl{flex:1;text-align:center;font-weight:700;font-size:18px;color:var(--ink);}
.iconbtn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line-2);background:#fff;color:var(--red-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;box-shadow:var(--shadow-soft);}

/* bottom nav */
.bnav{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:#fff;
  border-top:1px solid var(--line);padding:9px 6px calc(9px + env(safe-area-inset-bottom));
  position:relative;z-index:5;box-shadow:0 -8px 24px -14px rgba(150,70,120,.3);}
.bnav button{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-3);font-family:var(--font);font-size:11px;font-weight:600;padding:4px 0;white-space:nowrap;}
.bnav button.on{color:var(--red-2);}
/* full-image bottom nav */
.bnav-img{position:relative;width:100%;z-index:5;flex:0 0 auto;line-height:0;
  filter:drop-shadow(0 -6px 14px rgba(150,70,120,.18));}
.bnav-img > img{width:100%;display:block;}
.bnav-hit{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);}
.bnav-hit button{background:none;border:none;cursor:pointer;padding:0;}
.bnav-hit button:active{transform:scale(.94);}
.bnav .fab{margin-top:-32px;}
.fab-orb{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--grad-red);box-shadow:0 12px 24px -6px rgba(255,46,87,.6),inset 0 2px 3px rgba(255,255,255,.4),0 0 0 4px #fff;}

/* screen transition */
.screen-enter{animation:scrIn .3s cubic-bezier(.22,.8,.3,1);}
@keyframes scrIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.divider{height:1px;background:var(--line);margin:14px 0;}
.page-head{position:relative;z-index:8;background:linear-gradient(180deg,#fff7ef 80%,rgba(255,247,239,0));}
.empty{text-align:center;color:var(--ink-3);padding:40px 0;font-size:14px;}

/* sheets / modals */
.sheet-back{position:fixed;inset:0;background:rgba(60,20,50,.4);z-index:60;display:flex;align-items:flex-end;
  justify-content:center;animation:fade .2s;}
.sheet{width:100%;max-width:var(--maxw);background:#fff;border-top-left-radius:28px;border-top-right-radius:28px;
  border:1px solid var(--line);border-bottom:none;padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  animation:sheetUp .3s cubic-bezier(.22,.8,.3,1);max-height:92vh;overflow-y:auto;box-shadow:0 -20px 50px -20px rgba(150,70,120,.4);}
.sheet .grab{width:42px;height:5px;border-radius:3px;background:var(--line-2);margin:8px auto 14px;}
.modal-back{position:fixed;inset:0;background:rgba(60,20,50,.45);z-index:70;display:flex;align-items:center;
  justify-content:center;padding:24px;animation:fade .2s;}
.modal{width:100%;max-width:360px;background:#fff;border-radius:26px;padding:28px 22px;text-align:center;
  box-shadow:0 30px 60px -18px rgba(80,20,60,.5);animation:popIn .26s cubic-bezier(.22,1.2,.4,1);}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:none;}}
@keyframes popIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}

/* toast */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:90;background:#fff;
  border:2px solid var(--line-2);color:var(--ink);padding:12px 20px;border-radius:16px;font-weight:600;font-size:14.5px;
  box-shadow:0 16px 36px -12px rgba(120,40,90,.4);animation:toastIn .25s;max-width:88%;text-align:center;}
.toast.err{border-color:var(--red-1);color:var(--red-3);}
.toast.ok{border-color:var(--green-1);color:var(--green-3);}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px);}to{opacity:1;transform:translate(-50%,0);}}

/* success ring */
.ok-ring{width:80px;height:80px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--grad-green);box-shadow:0 14px 30px -8px rgba(21,184,108,.55);}