*{box-sizing:border-box}
:root{
  --bg:#FBF3E2;--card:#fff;--ink:#26332B;--mut:#7A7263;--line:#F0E2C4;
  --green:#0B6B4A;--green2:#0E8A5F;--deep:#063F2B;
  --saffron:#F59E0B;--amber:#FF8A00;--cream:#FFF8EC;--soft:#E7F6EE;--danger:#dc2626;
  --grad-green:linear-gradient(135deg,#0B6B4A,#0E8A5F);
  --grad-gold:linear-gradient(135deg,#FF8A00,#F59E0B);
  --grad-head:linear-gradient(120deg,#063F2B 0%,#0B6B4A 55%,#0E8A5F 100%);
  --shadow:0 8px 22px rgba(120,72,0,.10),0 2px 6px rgba(120,72,0,.06);
  --shadow-sm:0 3px 10px rgba(120,72,0,.08);
}
html,body{margin:0;padding:0;background:#EFE3CB;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink)}
a{color:var(--green)}
button{font-family:inherit}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--grad-head);color:#fff;padding:12px 14px 13px;box-shadow:0 4px 16px rgba(6,63,43,.35);border-bottom:3px solid var(--saffron)}
.toprow{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.logo{font-size:30px;line-height:1;background:rgba(255,255,255,.14);border:2px solid rgba(245,158,11,.85);border-radius:14px;padding:5px 7px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.top h1{margin:0;font-size:19px;letter-spacing:.2px;white-space:nowrap}
.top p{margin:1px 0 0;font-size:10.5px;opacity:.85;line-height:1.25}
.top-pills{display:flex;gap:6px;flex-shrink:0}
.pillbtn{display:flex;align-items:center;gap:5px;border:0;cursor:pointer;border-radius:999px;padding:6px 11px;font-size:13px;font-weight:800;color:#3A2A00;background:linear-gradient(135deg,#FFD97A,#F59E0B);box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .12s}
.pillbtn:active{transform:scale(.93)}
.pillbtn.flamep{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.45);box-shadow:none;cursor:default}
.flame{display:inline-block;animation:flicker 1.7s ease-in-out infinite;transform-origin:50% 90%}

/* ---------- Layout: mobile bottom nav, desktop left sidebar ---------- */
.layout{max-width:1080px;margin:0 auto}
.main{padding-bottom:92px}
.side{display:none}
.bottom{position:fixed;left:0;bottom:0;width:100%;background:rgba(255,255,255,.97);border-top:1px solid var(--line);display:flex;z-index:30;padding:4px 4px 6px;box-shadow:0 -4px 16px rgba(120,72,0,.08)}
.bottom button{flex:1;border:0;background:transparent;padding:7px 2px 5px;cursor:pointer;color:#8A8172;font-size:11px;border-radius:14px;transition:background .2s,color .2s}
.bottom button span{display:block;font-size:20px;line-height:1.15}
.bottom button.on{color:var(--green);font-weight:700;background:#FFF1CF}
.bottom button.on span{animation:bounceIn .38s cubic-bezier(.2,.7,.3,1.5)}
@media(min-width:900px){
  .bottom{display:none}
  .main{padding-bottom:24px}
  .layout{display:flex;gap:18px;align-items:flex-start;padding:0 16px}
  .side{display:flex;flex-direction:column;gap:6px;width:210px;flex-shrink:0;position:sticky;top:86px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow-sm);margin-top:16px}
  .side button{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:11px 12px;border-radius:12px;cursor:pointer;font-size:15px;color:#5c5546;text-align:left}
  .side button span{font-size:19px}
  .side button.on{background:#FFF1CF;color:var(--green);font-weight:700}
  .main{flex:1;min-width:0}
}

/* ---------- Views & cards ---------- */
.view{display:none;padding:16px 0}
.view.active{display:block;animation:viewIn .38s cubic-bezier(.2,.7,.3,1) both}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.view.active .card,.view.active .chatitem,.view.active .menuitem{animation:cardIn .5s cubic-bezier(.2,.7,.3,1) both}
.view.active .card:nth-child(2),.view.active .chatitem:nth-child(2){animation-delay:.05s}
.view.active .card:nth-child(3),.view.active .chatitem:nth-child(3){animation-delay:.1s}
.view.active .card:nth-child(4){animation-delay:.15s}
.view.active .card:nth-child(5){animation-delay:.2s}
.card h2{margin:0 0 6px;font-size:17px}
.card h3{margin:0 0 6px;font-size:15px}
.card.match{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(100deg,var(--green2),var(--saffron)) border-box;border:1.5px solid transparent;box-shadow:var(--shadow)}
.mut{color:var(--mut);font-size:13px;line-height:1.5}
.small{font-size:12px;color:var(--mut)}
label{display:block;font-size:13px;font-weight:600;margin:10px 0 6px}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=datetime-local],select,textarea{width:100%;padding:11px 12px;border:1.5px solid #E3D3AC;border-radius:12px;font-size:15px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--saffron);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid #E3D3AC;background:#fff;border-radius:999px;padding:8px 12px;font-size:14px;cursor:pointer;transition:transform .12s,background .2s,border-color .2s}
.chip:active{transform:scale(.92)}
.chip.on{background:var(--grad-green);color:#fff;border-color:transparent;animation:pop .28s cubic-bezier(.2,.7,.3,1.4)}
.chip.locked{background:#FFF6DE;color:#92400e}
.btn{display:block;width:100%;padding:12px;border:0;border-radius:14px;background:var(--grad-green);color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-top:10px;box-shadow:0 4px 12px rgba(11,107,74,.30);transition:transform .12s,box-shadow .2s,filter .2s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.965)}
.btn.secondary{background:#fff;color:var(--green);border:1.5px solid var(--green);box-shadow:none}
.btn.gold{background:var(--grad-gold);color:#3A2A00;box-shadow:0 4px 12px rgba(245,158,11,.35)}
.btn.danger{background:#dc2626;box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.small{width:auto;display:inline-block;padding:8px 12px;font-size:13px;margin:0}
.linkbtn{background:none;border:0;color:var(--green);font-weight:600;cursor:pointer;font-size:13px;padding:4px}
.row{display:flex;gap:10px;align-items:center}
.row.space{justify-content:space-between}
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#0E8A5F,#0B6B4A);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex-shrink:0;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--saffron),var(--shadow-sm)}
.avatar.sm{width:38px;height:38px;font-size:16px}
.pill{display:inline-block;background:var(--soft);color:#065f46;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:600;margin:2px 2px 0 0}
.pill.gold{background:#FEF3C7;color:#92400e}
.pill.grey{background:#F5EEDA;color:#6B6250}
.pill.red{background:#FEE2E2;color:#991b1b}
.balance{font-size:28px;font-weight:800}
.progress{height:10px;background:#F1E4C3;border-radius:99px;overflow:hidden;margin:8px 0}
.progress i{display:block;height:100%;background:var(--grad-gold);border-radius:99px;transition:width .9s cubic-bezier(.2,.7,.3,1)}
.progress.xp{height:7px}
.progress.xp i{background:var(--grad-green)}
.progress.mini{height:7px;margin:5px 0 2px}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{flex:1;padding:10px;border:1.5px solid #E3D3AC;background:#fff;border-radius:12px;cursor:pointer;font-weight:600;transition:transform .12s}
.tab:active{transform:scale(.96)}
.tab.on{background:var(--grad-green);color:#fff;border-color:transparent}
.banner{background:linear-gradient(120deg,#FFF7E0,#FFEDBE);border:1px solid #F6D47C;border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:104px;background:#14342A;color:#fff;padding:11px 14px;border-radius:12px;font-size:14px;z-index:60;max-width:480px;width:calc(100% - 32px);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:toastIn .3s cubic-bezier(.2,.7,.3,1.3) both;border:1px solid rgba(245,158,11,.5)}
.hidden{display:none!important}

/* ---------- Auth ---------- */
.authwrap{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:28px 14px;background:var(--bg)}
.authcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;max-width:430px;width:100%;box-shadow:var(--shadow);text-align:left;animation:cardIn .5s cubic-bezier(.2,.7,.3,1) both}
.authcard h1{margin:8px 0 2px;font-size:26px;color:var(--deep)}
.authcard .logo{display:inline-block}

/* ---------- More / menu screen ---------- */
.menuhead{font-size:12px;font-weight:800;letter-spacing:.8px;color:#A08C5F;margin:16px 2px 8px}
.menuitem{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 14px;margin-bottom:8px;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);transition:transform .12s;font-size:15px}
.menuitem:active{transform:scale(.98)}
.menuitem .mi-ic{font-size:21px;width:30px;text-align:center}
.menuitem .mi-sub{display:block;font-size:12px;color:var(--mut);font-weight:400}
.menuitem .mi-arrow{margin-left:auto;color:#C9B98F;font-size:18px}

/* ---------- Chat ---------- */
.chatlist{display:flex;flex-direction:column;gap:10px}
.chatitem{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow-sm);transition:transform .12s}
.chatitem:active{transform:scale(.98)}
.msgs{display:flex;flex-direction:column;gap:8px;margin:12px 0;min-height:200px}
.msg{max-width:82%;padding:10px 12px;border-radius:16px;font-size:14px;line-height:1.45;animation:msgIn .3s ease both;box-shadow:var(--shadow-sm)}
.msg.me{margin-left:auto;background:var(--grad-green);color:#fff;border-bottom-right-radius:4px}
.msg.them{margin-right:auto;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.giftm{margin-right:auto;background:#FFFBEB;border:1px solid #FDE68A;text-align:center}
.msg .mtime{display:block;font-size:10px;opacity:.65;margin-top:4px}
.msg audio{max-width:200px;height:34px}
.wavebars{display:flex;gap:3px;align-items:flex-end;height:22px;margin:6px 0}
.wavebars i{width:3px;background:currentColor;border-radius:2px;opacity:.7}
.sendrow{display:flex;gap:8px}
.sendrow input{flex:1}
.sendrow button{padding:11px 14px;border:0;border-radius:12px;background:var(--grad-green);color:#fff;font-weight:700;cursor:pointer;transition:transform .12s}
.sendrow button:active{transform:scale(.94)}
.sendrow button.rec{background:#dc2626;animation:pulseDot 1.2s infinite}
.helperbox{background:#FFF6DE;border:1px dashed #EBD28A;border-radius:12px;padding:9px 11px;margin-top:10px;font-size:13px}

/* ---------- Rooms ---------- */
.seatgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.seat{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center;font-size:12px}
.seat .avatar{margin:0 auto 5px}
.seat.host{border-color:var(--saffron);background:#FFF6DE}
.seat .role{font-weight:700;color:#92400e;font-size:11px}
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#EF4444;margin-right:5px;animation:pulseDot 1.3s ease-in-out infinite;vertical-align:1px}
.hostbar{background:var(--cream);border:1px dashed #EBD28A;border-radius:12px;padding:9px 11px;margin-top:10px}

/* ---------- Daily / streak / missions ---------- */
.weekrow{display:flex;gap:6px;margin:8px 0 4px}
.daydot{flex:1;text-align:center}
.daydot i{display:block;width:30px;height:30px;margin:0 auto;border-radius:50%;background:#F1E4C3;color:#A08C5F;font-style:normal;font-size:13px;font-weight:800;line-height:30px}
.daydot.done i{background:var(--grad-gold);color:#3A2A00;box-shadow:0 2px 8px rgba(245,158,11,.45)}
.daydot span{font-size:10px;color:var(--mut)}
.mission{padding:9px 0;border-bottom:1px dashed #EFE0B8}
.mission:last-child{border-bottom:0}

/* ---------- Quick actions / packs ---------- */
.quickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick{border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:14px;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);transition:transform .12s}
.quick:active{transform:scale(.96)}
.quick b{display:block;font-size:22px;margin-bottom:4px}
.packgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pack{border:1.5px solid var(--line);border-radius:16px;padding:14px;text-align:center;background:var(--cream)}
.pack.hero{background:linear-gradient(#FFFBEB,#FFFBEB) padding-box,linear-gradient(120deg,var(--amber),var(--saffron)) border-box;border:2px solid transparent}
.ledger-row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px dashed #EFE0B8;font-size:13px}
.ledger-row:last-child{border-bottom:0}
.pos{color:#0B6B4A;font-weight:700}.neg{color:#b45309;font-weight:700}

/* ---------- Modal / sheet / call ---------- */
.modal{position:fixed;inset:0;background:rgba(20,30,20,.55);display:none;align-items:flex-end;justify-content:center;z-index:40}
.modal.open{display:flex}
.modal.open .sheet{animation:sheetUp .32s cubic-bezier(.2,.7,.3,1) both}
.sheet{background:#fff;width:100%;max-width:520px;border-radius:22px 22px 0 0;padding:16px 16px 22px;max-height:84vh;overflow:auto}
.giftgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.gift{border:1.5px solid var(--line);border-radius:16px;padding:14px;text-align:center;cursor:pointer;background:var(--cream);transition:transform .12s,border-color .2s;font-size:14px}
.gift:active{transform:scale(.94);border-color:var(--saffron)}
.gift b{font-size:26px;display:block}
#callOverlay{position:fixed;inset:0;background:linear-gradient(160deg,#0E8A5F,#063F2B);z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}
.callbox{background:rgba(255,255,255,.97);border-radius:24px;padding:26px 22px;max-width:360px;width:100%;text-align:center;box-shadow:var(--shadow)}

/* ---------- Splash / confetti / burst ---------- */
#splash{position:fixed;inset:0;z-index:100;background:linear-gradient(160deg,#0E8A5F 0%,#0B6B4A 45%,#063F2B 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:24px;transition:opacity .35s;cursor:pointer}
#splash.hide{opacity:0;pointer-events:none}
.splash-logo{font-size:74px;line-height:1;animation:splashPop .85s cubic-bezier(.2,.7,.3,1.5) both;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
#splash h1{margin:14px 0 4px;font-size:34px;letter-spacing:.3px;animation:fadeUp .6s .25s both}
#splash p{margin:0;font-size:15px;opacity:.92;animation:fadeUp .6s .45s both}
#splash .splash-tag{margin-top:10px;font-size:12.5px;background:rgba(245,158,11,.22);border:1px solid rgba(245,158,11,.7);color:#FFE1A1;border-radius:999px;padding:5px 12px;animation:fadeUp .6s .65s both}
#confetti,#burst{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#confetti{z-index:90}
#burst{z-index:85}
.confetti-piece{position:absolute;top:-16px;border-radius:2px;animation:confettiFall ease-in both}
.burst-emoji{position:absolute;left:50%;bottom:130px;font-size:27px;animation:burstUp 1.05s ease-out both;text-shadow:0 2px 8px rgba(0,0,0,.2)}

@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes bounceIn{0%{transform:translateY(0)}35%{transform:translateY(-5px) scale(1.12)}70%{transform:translateY(1px)}100%{transform:translateY(0)}}
@keyframes flicker{0%,100%{transform:scale(1) rotate(-2deg)}30%{transform:scale(1.12) rotate(2.5deg)}55%{transform:scale(.96) rotate(-1deg)}80%{transform:scale(1.08) rotate(1.5deg)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5);opacity:1}50%{box-shadow:0 0 0 5px rgba(239,68,68,0);opacity:.75}}
@keyframes splashPop{0%{transform:scale(.3) rotate(-14deg);opacity:0}60%{transform:scale(1.15) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes sheetUp{from{transform:translateY(46px);opacity:.4}to{transform:none;opacity:1}}
@keyframes confettiFall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx,0),105vh) rotate(var(--rot,540deg))}}
@keyframes burstUp{0%{transform:translate(-50%,0) scale(.5);opacity:0}18%{opacity:1}100%{transform:translate(calc(-50% + var(--dx,0)),var(--dy,-190px)) scale(1.15);opacity:0}}

@media(max-width:360px){.view{padding:12px 0}.balance{font-size:24px}.msg{max-width:88%}.top h1{font-size:17px}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}