/* ============ Smack & Snack — Customer App Prototype ============ */
:root{
  --red:#E01F26;
  --red-dark:#B01218;
  --red-soft:#FDEBEC;
  --gold:#F5B301;
  --ink:#24170f;
  --muted:#8a7a6e;
  --cream:#FFF8F2;
  --card:#ffffff;
  --line:#f0e4da;
  --radius:18px;
  --shadow:0 6px 18px rgba(36,23,15,.08);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
input{font:inherit}
body{
  font-family:"Poppins",sans-serif;color:var(--ink);
  background:#8f0e13 radial-gradient(1100px 750px at 50% -10%, #e02128, #8f0e13);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 16px;
}
body::after{
  content:"rewards.smackandsnack.com";position:fixed;left:0;right:0;bottom:12px;
  text-align:center;font-size:12px;letter-spacing:.06em;color:rgba(255,246,216,.55);
  pointer-events:none;
}
h1,h2,h3,.fredoka{font-family:"Fredoka",sans-serif}

/* ---------- Device frame ---------- */
.device{
  position:relative;width:min(420px,100%);height:min(840px,calc(100vh - 64px));
  border-radius:32px;box-shadow:0 30px 80px rgba(0,0,0,.45);flex:none;
}
.device__notch{display:none}
.app{
  position:relative;width:100%;height:100%;background:var(--cream);
  border-radius:32px;overflow:hidden;display:flex;flex-direction:column;
}
.statusbar{display:none}
.statusbar__icons{display:flex;gap:6px;align-items:center}
.app.dark-status .statusbar{color:#fff}

/* ---------- Screens ---------- */
.screens{flex:1;position:relative;overflow:hidden}
.screen{
  position:absolute;inset:0;display:none;flex-direction:column;
  padding-top:20px;background:var(--cream);
}
.screen.is-active{display:flex;animation:fadein .22s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.spacer{height:110px}

/* ---------- Splash ---------- */
.screen--splash{
  background:linear-gradient(178deg,var(--red) 0%,var(--red-dark) 90%);
  color:#fff;padding-top:0;
}
.splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px;text-align:center;gap:14px}
.splash__logo{width:190px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25))}
.splash__mascot{width:110px;margin-top:-4px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.splash__head{font-size:38px;line-height:1.05;font-weight:700}
.splash__sub{font-size:13.5px;opacity:.92;line-height:1.55;max-width:300px}
.splash__sub b{color:var(--gold)}

/* ---------- Buttons ---------- */
.btn{
  display:block;width:100%;padding:15px;border-radius:16px;font-weight:700;
  font-size:15.5px;text-align:center;transition:transform .08s ease;
}
.btn:active{transform:scale(.97)}
.btn--white{background:#fff;color:var(--red)}
.btn--ghost{border:2px solid rgba(255,255,255,.75);color:#fff}
.btn--red{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(224,31,38,.35)}
.btn--outline-red{border:2px solid var(--red);color:var(--red);width:auto}
.btn--grow{flex:1;width:auto}
.link-fwd{color:#fff;font-weight:600;font-size:14px;opacity:.9;padding:6px}
.link-sm{color:var(--red);font-weight:600;font-size:13px}

/* ---------- App header ---------- */
.apphead{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 8px;gap:10px;min-height:56px;
}
.apphead__logo{height:30px}
.apphead__title{font-size:22px;font-weight:600;flex:1}
.apphead__right{display:flex;gap:8px;align-items:center}
.iconbtn{
  width:40px;height:40px;border-radius:13px;background:#fff;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;position:relative;
  font-size:18px;font-weight:700;color:var(--ink);flex:none;
}
.iconbtn--light{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.iconbtn--float{position:absolute;top:12px;left:14px;z-index:5}
.badge{
  position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;
  min-width:19px;height:19px;border-radius:10px;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.coinpill{
  display:flex;align-items:center;gap:5px;background:#fff;box-shadow:var(--shadow);
  border-radius:20px;padding:8px 12px;font-size:14px;font-weight:700;
}
.coinpill--dark{background:rgba(0,0,0,.35);color:#fff;box-shadow:none}
.coin{font-size:14px}
.coin--lg{font-size:22px}

/* ---------- Home ---------- */
.hello{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 12px;gap:10px}
.hello__hi{font-size:21px;font-weight:600}
.hello__sub{font-size:12px;color:var(--muted)}
.checkin{
  background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:8px 12px;
  font-size:11px;line-height:1.5;text-align:center;color:var(--muted);flex:none;
}
.checkin b{color:var(--red);font-size:12px}
.checkin.done{opacity:.55}

.coinscard{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin:0 16px 14px;padding:16px 18px;border-radius:var(--radius);text-align:left;
  background:linear-gradient(120deg,var(--red),var(--red-dark));color:#fff;
  box-shadow:0 10px 26px rgba(224,31,38,.35);width:calc(100% - 32px);
}
.coinscard__left{display:flex;flex-direction:column;gap:2px}
.coinscard__label{font-size:10px;letter-spacing:.14em;opacity:.85;font-weight:700}
.coinscard__value{font-family:"Fredoka";font-size:34px;font-weight:700;line-height:1}
.coinscard__tier{font-size:11.5px;background:rgba(255,255,255,.18);border-radius:9px;padding:3px 8px;width:max-content;margin-top:4px}
.coinscard__right{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:1}
.coinscard__next{font-size:10.5px;opacity:.9;text-align:right}
.tierbar{width:100%;max-width:120px;height:7px;border-radius:5px;background:rgba(255,255,255,.25);overflow:hidden}
.tierbar--light{background:#f3e6da;max-width:none}
.tierbar__fill{height:100%;width:5%;background:var(--gold);border-radius:5px;transition:width .5s ease}

.gamebanner{
  display:flex;align-items:center;gap:12px;margin:0 16px 14px;padding:14px 16px;
  border-radius:var(--radius);width:calc(100% - 32px);text-align:left;color:#fff;
  background:linear-gradient(120deg,#2b1a4e,#5b2a86);box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.gamebanner__mascot{width:52px;flex:none;animation:bob 2.2s ease-in-out infinite}
.gamebanner__txt{display:flex;flex-direction:column;flex:1;gap:1px}
.gamebanner__txt b{font-family:"Fredoka";font-size:17px}
.gamebanner__txt span{font-size:11.5px;opacity:.85}
.gamebanner__txt em{font-size:10.5px;font-style:normal;color:var(--gold);font-weight:600}
.gamebanner__play{
  background:var(--gold);color:#3d2c00;font-weight:800;font-size:12px;
  border-radius:12px;padding:10px 12px;flex:none;
}

.duo{display:flex;gap:12px;margin:0 16px 6px}
.duocard{
  flex:1;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px;display:flex;flex-direction:column;gap:2px;text-align:left;
}
.duocard__ico{font-size:20px;margin-bottom:4px}
.duocard b{font-size:13.5px}
.duocard span:last-child{font-size:11px;color:var(--muted)}

.secthead{
  display:flex;align-items:center;justify-content:space-between;
  font-size:16.5px;font-weight:600;padding:16px 16px 10px;
}
.hcards{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 8px;scrollbar-width:none}
.hcards::-webkit-scrollbar{display:none}
.hcard{
  flex:none;width:150px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:10px;display:flex;flex-direction:column;gap:4px;text-align:left;
}
.hcard img{width:100%;height:96px;object-fit:contain}
.hcard b{font-size:12.5px;line-height:1.25}
.hcard .price{color:var(--red);font-weight:700;font-size:13px}

.reorder{padding:0 16px}
.reorder__empty{
  background:#fff;border:1.5px dashed var(--line);border-radius:var(--radius);
  padding:18px;font-size:12.5px;color:var(--muted);text-align:center;
}
.reordercard{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:13px 14px;display:flex;align-items:center;gap:10px;margin-bottom:10px;width:100%;
}
.reordercard__txt{flex:1;text-align:left}
.reordercard__txt b{font-size:13px;display:block}
.reordercard__txt span{font-size:11px;color:var(--muted)}
.reordercard .link-sm{flex:none}

/* ---------- Menu ---------- */
.chips{display:flex;gap:8px;padding:4px 16px 10px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:9px 14px;border-radius:20px;background:#fff;box-shadow:var(--shadow);
  font-size:13px;font-weight:600;color:var(--muted);
}
.chip.is-on{background:var(--red);color:#fff}
.menugrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 16px}
.mcard{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:10px;display:flex;flex-direction:column;gap:3px;text-align:left;position:relative;
}
.mcard img{width:100%;height:104px;object-fit:contain}
.mcard__emoji{height:104px;display:flex;align-items:center;justify-content:center;font-size:52px;border-radius:12px;background:var(--red-soft)}
.mcard b{font-size:12.5px;line-height:1.25;min-height:31px}
.mcard .price{color:var(--red);font-weight:700;font-size:13.5px}
.mcard .coins-earn{font-size:10px;color:var(--muted)}
.mcard__add{
  position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:10px;
  background:var(--red);color:#fff;font-size:18px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(224,31,38,.4);
}
.mcard__tag{
  position:absolute;top:8px;left:8px;background:var(--gold);color:#3d2c00;
  font-size:9.5px;font-weight:800;border-radius:8px;padding:3px 7px;z-index:2;
}

/* ---------- Item sheet ---------- */
.itemhero{
  background:linear-gradient(178deg,var(--red),var(--red-dark));
  display:flex;align-items:center;justify-content:center;height:250px;position:relative;flex:none;
}
.itemhero img{height:200px;object-fit:contain;border-radius:18px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.3))}
.itemhero .bigemoji{font-size:110px}
.itembody{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:var(--cream);border-radius:26px 26px 0 0;margin-top:-24px;position:relative}
.itembody h2{font-size:22px;font-weight:600}
.itemdesc{font-size:13px;color:var(--muted);line-height:1.55}
.sizes{display:flex;gap:10px}
.size{
  flex:1;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px;
  display:flex;flex-direction:column;gap:2px;text-align:center;font-weight:600;font-size:13px;
}
.size em{font-style:normal;font-size:11px;color:var(--muted);font-weight:500}
.size b{color:var(--red)}
.size.is-on{border-color:var(--red);background:var(--red-soft)}
.opt-head{font-size:14px;font-weight:600;margin-bottom:8px}
.sauceopts{display:flex;gap:8px;flex-wrap:wrap}
.sauceopt{
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px 11px;
  font-size:12px;font-weight:600;
}
.sauceopt.is-on{border-color:var(--red);background:var(--red-soft);color:var(--red)}
.qtyrow{display:flex;gap:12px;align-items:center;margin-top:auto;padding-top:8px}
.qty{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:8px 14px}
.qty button{font-size:20px;font-weight:700;color:var(--red);width:22px}
.qty b{font-size:16px;min-width:16px;text-align:center}

/* ---------- Cart ---------- */
.fulfil{display:flex;gap:8px;margin:4px 16px 10px;background:#fff;border-radius:16px;padding:5px;box-shadow:var(--shadow)}
.fulfil__opt{flex:1;padding:11px;border-radius:12px;font-weight:700;font-size:13.5px;color:var(--muted)}
.fulfil__opt.is-on{background:var(--red);color:#fff}
.fulfil__detail{margin:0 16px 12px;font-size:12px;color:var(--muted);background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);line-height:1.6}
.fulfil__detail b{color:var(--ink)}
.cartitems{display:flex;flex-direction:column;gap:10px;padding:0 16px}
.cartitem{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:11px 13px;display:flex;align-items:center;gap:11px;
}
.cartitem img{width:46px;height:46px;object-fit:contain;flex:none}
.cartitem .ci-emoji{width:46px;height:46px;border-radius:12px;background:var(--red-soft);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.cartitem__txt{flex:1}
.cartitem__txt b{font-size:13px;display:block}
.cartitem__txt span{font-size:11px;color:var(--muted)}
.cartitem__price{font-weight:700;font-size:13.5px;color:var(--red)}
.cartitem__x{color:var(--muted);font-size:16px;padding:4px 2px 4px 8px}
.cartempty{padding:26px;text-align:center;color:var(--muted);font-size:13px}
.promo{margin:12px 16px 0}
.voucherbtn{
  width:100%;background:#fff;border:1.5px dashed var(--gold);border-radius:14px;
  padding:12px;font-size:12.5px;font-weight:600;text-align:left;display:flex;justify-content:space-between;
}
.voucherbtn.applied{border-style:solid;background:#FFF7E0}
.totals{margin:12px 16px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.totals .trow{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.totals .trow.grand{font-size:15.5px;font-weight:700;color:var(--ink);border-top:1.5px solid var(--line);padding-top:9px;margin-top:3px}
.totals .trow .off{color:#1d9e57;font-weight:600}
.paycard{
  margin:0 16px;background:#111;color:#fff;border-radius:14px;padding:13px 16px;
  display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;
}
.paycard__alt{font-size:11px;font-weight:500;opacity:.75}
.earnnote{margin:12px 16px 0;text-align:center;font-size:12px;color:var(--muted)}
.earnnote b{color:var(--red)}
#placeOrder{width:calc(100% - 32px)}

/* ---------- Tracking ---------- */
.trackhero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px 6px;text-align:center}
.trackhero img{width:110px;animation:bob 2.4s ease-in-out infinite}
.trackhero h2{font-size:23px;font-weight:600}
.trackhero p{font-size:12.5px;color:var(--muted)}
.trackcoins{
  background:#FFF7E0;border:1.5px solid var(--gold);color:#7a5b00;border-radius:14px;
  padding:9px 16px;font-size:13px;font-weight:700;margin-top:6px;
}
.tracksteps{list-style:none;margin:18px 26px;display:flex;flex-direction:column;gap:0}
.tracksteps li{
  position:relative;padding:0 0 26px 34px;font-size:14px;
}
.tracksteps li::before{
  content:"";position:absolute;left:9px;top:22px;bottom:2px;width:2.5px;background:var(--line);
}
.tracksteps li:last-child::before{display:none}
.tracksteps li::after{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2.5px solid var(--line);
}
.tracksteps li.done::after{background:var(--red);border-color:var(--red);content:"✓";color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.tracksteps li.done::before{background:var(--red)}
.tracksteps li b{display:block;font-size:14px}
.tracksteps li span{font-size:11.5px;color:var(--muted)}

/* ---------- Scan ---------- */
.scancard{
  margin:8px 16px;background:#fff;border-radius:22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px;text-align:center;
}
.scancard__hint{font-size:13px;color:var(--muted);line-height:1.5}
#qrCanvas{border-radius:10px}
.scancard__id{font-family:"Fredoka";font-size:19px;letter-spacing:.06em}
.scancard__sub{font-size:11px;color:var(--muted)}
.ordiv{display:flex;align-items:center;gap:10px;margin:16px 26px;color:var(--muted);font-size:11.5px}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1.5px;background:var(--line)}
.receiptform{margin:0 16px;display:flex;flex-direction:column;gap:10px}
.receiptform input{
  padding:14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;
  font-size:14px;outline:none;text-transform:uppercase;
}
.receiptform input:focus{border-color:var(--red)}
.receiptform__note{font-size:11px;color:var(--muted);text-align:center}
.receiptresult{
  background:#E9F9EF;border:1.5px solid #1d9e57;color:#136b3a;border-radius:14px;
  padding:13px;font-size:13px;text-align:center;font-weight:600;line-height:1.5;
}

/* ---------- Rewards ---------- */
.wallet{
  margin:4px 16px 6px;background:linear-gradient(120deg,var(--red),var(--red-dark));color:#fff;
  border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 10px 26px rgba(224,31,38,.35);
}
.wallet__label{font-size:10px;letter-spacing:.14em;font-weight:700;opacity:.85}
.wallet__value{font-family:"Fredoka";font-size:40px;font-weight:700;display:flex;align-items:center;gap:8px;line-height:1}
.wallet__tier{display:flex;flex-direction:column;gap:5px;font-size:12px;margin-top:6px}
.wallet__next{font-size:10.5px;opacity:.9}
.rewardsgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
.rcard{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;
  display:flex;flex-direction:column;gap:5px;text-align:left;
}
.rcard__emoji{font-size:34px}
.rcard img{height:70px;object-fit:contain;align-self:center}
.rcard b{font-size:12.5px;line-height:1.3;min-height:31px}
.rcard__cost{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.rcard__cost span{font-weight:800;font-size:13px;color:#8a6a00}
.rcard__go{
  background:var(--red);color:#fff;font-size:10.5px;font-weight:800;border-radius:9px;padding:6px 9px;
}
.rcard.locked{opacity:.55}
.rcard.locked .rcard__go{background:#cbb9ac}
.vouchers{padding:0 16px;display:flex;flex-direction:column;gap:10px}
.voucher{
  background:#FFF7E0;border:1.5px dashed var(--gold);border-radius:14px;padding:12px 14px;
  display:flex;align-items:center;gap:10px;font-size:12.5px;
}
.voucher b{flex:1}
.voucher code{font-family:"Fredoka";font-size:13px;background:#fff;border-radius:8px;padding:4px 8px}
.earnlist{list-style:none;padding:0 16px;display:flex;flex-direction:column;gap:9px}
.earnlist li{
  background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:11px 14px;
  display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);line-height:1.45;
}
.earnlist li span{font-size:20px;flex:none}
.earnlist li b{color:var(--ink);font-size:12.5px}
.tiers{display:flex;flex-direction:column;gap:9px;padding:0 16px}
.tiercard{
  background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;
  display:flex;flex-direction:column;gap:1px;font-size:12px;
}
.tiercard b{font-size:13.5px}
.tiercard span{color:var(--muted);font-size:11px}
.tiercard em{font-style:normal;color:var(--red);font-weight:600;font-size:11.5px}

/* ---------- Game ---------- */
.screen--game{background:linear-gradient(178deg,#2b1a4e,#150b28);padding-top:52px}
.screen--game .statusbar{color:#fff}
.game{flex:1;display:flex;flex-direction:column;position:relative;padding-bottom:96px}
.game__top{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;color:#fff;gap:8px}
.game__stats{display:flex;gap:14px;font-size:13px;font-weight:600;background:rgba(0,0,0,.35);border-radius:14px;padding:8px 14px}
#gameCanvas{flex:1;width:100%;touch-action:none}
.game__overlay{
  position:absolute;inset:52px 0 0;background:rgba(21,11,40,.88);backdrop-filter:blur(4px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:#fff;text-align:center;padding:30px;z-index:5;
}
.game__overlay[hidden]{display:none}
.game__mascot{width:110px;animation:bob 2.2s ease-in-out infinite}
.game__overlay h2{font-size:32px;font-weight:700}
.game__overlay p{font-size:13px;opacity:.9;line-height:1.6}
.game__daily b{color:var(--gold)}
.game__overlay .btn{max-width:200px}
.game__result{
  background:rgba(255,255,255,.1);border-radius:16px;padding:14px 22px;font-size:14px;line-height:1.7;
}
.game__result b{color:var(--gold);font-size:19px}

/* ---------- Locations ---------- */
.loccard{
  margin:8px 16px 6px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px 16px;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted);
}
.loccard__map{
  height:86px;border-radius:12px;background:linear-gradient(120deg,#e8f2e9,#d7e8db);
  display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:8px;
}
.loccard b{color:var(--ink);font-size:15px}
.loccard__hours{font-size:11.5px}
.loccard__row{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.open{color:#1d9e57;font-weight:700;font-size:12px}

/* ---------- Profile ---------- */
.profcard{
  margin:4px 16px 12px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;display:flex;gap:14px;align-items:center;
}
.profcard__avatar{
  width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex:none;
}
.profcard b{display:block;font-size:15.5px}
.profcard span{font-size:12px;color:var(--muted)}
.refer{
  margin:0 16px;background:#FFF7E0;border-radius:var(--radius);padding:14px 16px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;color:#7a5b00;
}
.refer b{font-size:13.5px;color:#5c4400}
.refer__code{
  background:#fff;border:1.5px dashed var(--gold);border-radius:12px;padding:10px 12px;
  font-family:"Fredoka";font-size:13px;font-weight:600;flex:none;
}
.orders{padding:0 16px;display:flex;flex-direction:column;gap:10px}
.ordercard{
  background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;
  display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);
}
.ordercard b{color:var(--ink);font-size:12.5px;display:block}
.ordercard .oc-right{text-align:right;flex:none}
.ordercard .oc-right b{color:var(--red)}
.settings{padding:0 16px;display:flex;flex-direction:column;gap:9px}
.setrow{
  background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:13px 14px;
  display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;
}
.switch{appearance:none;width:42px;height:24px;border-radius:13px;background:#e4d6ca;position:relative;transition:.2s;cursor:pointer}
.switch:checked{background:var(--red)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.switch:checked::after{left:21px}

/* ---------- Tab bar ---------- */
.tabbar{
  position:absolute;bottom:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-around;align-items:flex-end;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1.5px solid var(--line);padding:8px 6px 22px;
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:600;color:var(--muted);width:62px;
}
.tab span{font-size:20px;filter:grayscale(1);opacity:.65}
.tab.is-on{color:var(--red)}
.tab.is-on span{filter:none;opacity:1}
.tab--play{margin-top:-26px}
.tab__playbtn{
  width:54px;height:54px;border-radius:50%;background:linear-gradient(140deg,var(--red),var(--red-dark));
  display:flex;align-items:center;justify-content:center;font-size:24px !important;
  box-shadow:0 8px 20px rgba(224,31,38,.45);filter:none !important;opacity:1 !important;color:#fff;
}

/* ---------- Toast ---------- */
.toast{
  position:absolute;left:50%;bottom:110px;transform:translateX(-50%);z-index:70;
  background:#24170f;color:#fff;border-radius:14px;padding:12px 18px;
  font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.35);
  animation:toastin .25s ease;white-space:nowrap;
}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

@media (max-height:900px){
  body{padding:10px}
  .device{}
}

/* ---------- Embedded (iframe) mode ---------- */
body.embed{padding:0;background:transparent}
body.embed .device{
  width:100%;height:100dvh;border-radius:0;padding:0;box-shadow:none;transform:none;
}
body.embed .device__notch{display:none}
body.embed .app{border-radius:0}
body.embed .statusbar{display:none}
body.embed .screen{padding-top:20px}
body.embed .game__overlay{inset:20px 0 0}

/* ---------- Fase 1 MVP additions ---------- */
.phoneform{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.phonefield{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.4);border-radius:16px;padding:4px 4px 4px 14px;
}
.phonefield__cc{font-size:14px;font-weight:600;color:#fff;flex:none}
.phonefield input{
  flex:1;background:none;border:0;outline:none;color:#fff;font-size:17px;
  font-weight:600;padding:12px 10px 12px 0;min-width:0;
}
.phonefield input::placeholder{color:rgba(255,255,255,.55)}
.otpinput{
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);
  border-radius:16px;color:#fff;font-family:"Fredoka";font-size:28px;letter-spacing:.4em;
  text-align:center;padding:12px;outline:none;width:100%;
}
.otpinput::placeholder{color:rgba(255,255,255,.45);letter-spacing:.2em}
.splash__legal{font-size:10.5px;opacity:.7;max-width:280px;line-height:1.5}
.menunote{margin:14px 22px;text-align:center;font-size:12px;color:var(--muted);line-height:1.55}
.nextreward{padding:0 16px}
.nextreward__card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px 16px;display:flex;gap:14px;align-items:center;
}
.nextreward__emoji{font-size:34px;flex:none;width:48px;text-align:center}
.nextreward__emoji img{width:48px;height:48px;object-fit:contain}
.nextreward__txt{flex:1;display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--muted)}
.nextreward__txt b{font-size:14px;color:var(--ink)}
.demobanner{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--gold);color:#3d2c00;font-size:10px;font-weight:800;
  border-radius:0 0 10px 10px;padding:4px 12px;letter-spacing:.08em;
}
body.embed .demobanner{top:0}
body.embed::after{display:none}

.tab__img{width:22px;height:22px;border-radius:8px;object-fit:cover;display:block}
.tab.is-on .tab__img{box-shadow:0 0 0 2px var(--red)}
.scancard__bigico{font-size:40px}

img.coinimg{width:1em !important;height:1em !important;vertical-align:-.12em;display:inline-block}
img.coinimg--lg{width:32px !important;height:32px !important;vertical-align:-4px}
.profcard__avatar{background:var(--red-soft)}
.profcard__avatar img{width:42px;height:42px;object-fit:contain}

.textinput{
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);
  border-radius:16px;color:#fff;font-family:"Poppins";font-size:15px;font-weight:600;
  padding:13px 14px;outline:none;width:100%;
}
.textinput::placeholder{color:rgba(255,255,255,.55)}
.editform{display:flex;flex-direction:column;gap:10px;margin:0 16px}
.editform label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.editform input{
  background:#fff;border:1.5px solid #eadfd2;border-radius:14px;padding:11px 13px;
  font-family:"Poppins";font-size:14.5px;font-weight:500;color:var(--ink);outline:none;
}
.editform input:focus{border-color:var(--red)}
.editform .btn{margin-top:4px}
.editform__note{font-size:11px;color:var(--muted);text-align:center;margin-top:2px}
.walletbtn{
  display:block;margin:14px auto 0;background:#000;color:#fff;border:0;border-radius:14px;
  font-family:"Poppins";font-size:14.5px;font-weight:600;padding:13px 22px;cursor:pointer;
}

.amt-pos{color:#1c9c4f}
.amt-neg{color:var(--red)}

.deletelink{display:block;margin:0 auto 8px;background:none;border:0;color:var(--muted);
  font-family:"Poppins";font-size:12.5px;text-decoration:underline;cursor:pointer}

.confirmcard{
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35);
  border-radius:16px;padding:16px 20px;display:flex;flex-direction:column;gap:4px;
  width:100%;max-width:300px;color:#fff;text-align:center;
}
.confirmcard b{font-family:"Fredoka";font-size:18px}
.confirmcard span{font-size:13px;opacity:.85;word-break:break-all}