/* ============================================================
   GAURIS TAVA CRUSH — Casual-Game UI System
   Glossy, chunky, tactile. Royal-Match / Candy-Crush energy.
   Brand: red #C52127 · gold #D4AF37 · black · white
   ============================================================ */
:root{
  --red:#d62b2b; --red-hi:#ff6a5a; --red-deep:#9d1518; --red-shadow:#6e0d10;
  --gold:#ffd24d; --gold-hi:#ffe9a8; --gold-mid:#e0a92e; --gold-deep:#a06f15; --gold-shadow:#6e4a0c;
  --cream:#fff3d6; --cream-deep:#f4dca6;
  --wood:#7a4a22; --wood-deep:#4a2c14;
  --ink:#3a2210;            /* warm dark outline */
  --green:#5db33a; --green-deep:#3a7a22;
  --blue:#3d7fd6; --blue-deep:#274f8c;
  --r-lg:26px; --r-md:18px; --r-sm:13px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.34,1.56,.64,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* the [hidden] attribute must always win over display:flex/grid component rules */
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:'Poppins',system-ui,sans-serif;
  color:#fff7e8;
  position:fixed;inset:0;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(140% 70% at 50% 118%, rgba(0,0,0,.55), transparent 55%),
    radial-gradient(90% 50% at 50% -8%, rgba(255,210,120,.18), transparent 60%),
    linear-gradient(180deg,#c0332f 0%,#a3231f 30%,#7e3a1c 56%,#5c3417 78%,#43260f 100%);
}
/* warm tiled-floor + grain texture so it never reads as a flat AI gradient */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mask:linear-gradient(180deg,transparent 0%,#000 50%);
}

/* ---------- Screens ---------- */
.screen{position:fixed;inset:0;display:none;flex-direction:column;z-index:1;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;transform:translateY(16px) scale(.99);transition:opacity .45s var(--ease-soft),transform .45s var(--ease-soft)}
.screen.active{display:flex;opacity:1;transform:none}
.pad{padding:20px 16px calc(104px + var(--safe-b))}
.muted{color:#e9c9a0}

/* chunky outlined headings */
.screen-head{font-family:'Fredoka',sans-serif;font-weight:600;font-size:26px;letter-spacing:.3px;
  text-align:center;margin:18px 0 20px;color:#fff;
  -webkit-text-stroke:3px var(--red-deep);paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(110,13,16,.4),0 5px 9px rgba(0,0,0,.35)}
.sub-head{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;margin:26px 4px 14px;color:var(--gold-hi);
  -webkit-text-stroke:1.5px var(--wood-deep);paint-order:stroke fill;text-shadow:0 2px 4px rgba(0,0,0,.5)}

/* ============================================================
   PLAQUE — the signature gold-framed cream panel
   ============================================================ */
.plaque{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid) 55%,var(--gold-deep));
  border-radius:var(--r-lg);padding:5px;
  box-shadow:0 7px 0 var(--gold-shadow),0 12px 20px rgba(0,0,0,.45),
             inset 0 2px 1px rgba(255,255,255,.7);
}
.plaque-body{
  background:linear-gradient(180deg,var(--red-deep),var(--red-shadow));
  border-radius:20px;padding:12px 14px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.45),inset 0 -2px 2px rgba(255,120,80,.25);
}
.glass{ /* legacy alias -> plaque look */
  background:linear-gradient(180deg,var(--red-deep),var(--red-shadow));
  border:5px solid transparent;border-radius:var(--r-lg);
  box-shadow:0 7px 0 var(--red-shadow),0 12px 22px rgba(0,0,0,.45),
             inset 0 2px 2px rgba(255,140,100,.3);
  background-clip:padding-box;
  outline:5px solid var(--gold-mid);outline-offset:-5px;
}

/* ============================================================
   BUTTONS — pressable 3D candy buttons
   ============================================================ */
.btn{border:0;cursor:pointer;font-family:'Baloo 2',sans-serif;font-weight:800;
  color:#fff;font-size:17px;letter-spacing:.4px;border-radius:var(--r-md);
  padding:15px 26px;position:relative;
  -webkit-text-stroke:0;text-shadow:0 2px 0 rgba(0,0,0,.28);
  transition:transform .08s ease, box-shadow .08s ease, filter .2s}
.btn::after{content:"";position:absolute;left:8%;right:8%;top:6px;height:34%;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.btn:active{transform:translateY(5px)}
.btn-primary{background:linear-gradient(180deg,var(--red-hi),var(--red) 55%,var(--red-deep));
  box-shadow:0 6px 0 var(--red-shadow),0 11px 16px rgba(0,0,0,.4)}
.btn-primary:active{box-shadow:0 1px 0 var(--red-shadow),0 4px 8px rgba(0,0,0,.4)}
.btn-gold{background:linear-gradient(180deg,#ffe79a,var(--gold) 55%,var(--gold-mid));color:#5a3a00;
  text-shadow:0 1px 0 rgba(255,255,255,.5);box-shadow:0 6px 0 var(--gold-deep),0 11px 16px rgba(0,0,0,.4)}
.btn-gold:active{box-shadow:0 1px 0 var(--gold-deep),0 4px 8px rgba(0,0,0,.4)}
.btn-green{background:linear-gradient(180deg,#86d85f,var(--green) 55%,var(--green-deep));
  box-shadow:0 6px 0 #2c5e18,0 11px 16px rgba(0,0,0,.4)}
.btn-green:active{box-shadow:0 1px 0 #2c5e18,0 4px 8px rgba(0,0,0,.4)}
.btn-ghost{background:linear-gradient(180deg,#9a6a3a,#6b4423);box-shadow:0 5px 0 #3d2310,0 9px 14px rgba(0,0,0,.4)}
.btn-ghost:active{box-shadow:0 1px 0 #3d2310}
.btn-lg{padding:17px 34px;font-size:19px;width:min(330px,84vw)}
.btn-sm{padding:10px 16px;font-size:14px;border-radius:13px}
.btn-sm::after{top:4px}
.btn-block{width:100%;display:block}
.btn:disabled{filter:grayscale(.5) brightness(.8);pointer-events:none}
.link-back{background:none;border:0;color:#f4dca6;margin-top:14px;font-size:15px;cursor:pointer;font-weight:600}

/* ============ SPLASH ============ */
.splash{align-items:center;justify-content:center;text-align:center}
.splash-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.float-food{position:absolute;width:54px;height:54px;opacity:0;
  animation:floatUp linear infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
@keyframes floatUp{0%{transform:translateY(112vh) rotate(0);opacity:0}
  10%{opacity:.9}90%{opacity:.9}100%{transform:translateY(-22vh) rotate(380deg);opacity:0}}
.splash-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;animation:popIn .7s var(--ease) both}
@keyframes popIn{from{opacity:0;transform:translateY(34px) scale(.85)}to{opacity:1;transform:none}}
.splash-logo{width:150px;height:150px;object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));animation:bob 3s ease-in-out infinite}
.game-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(42px,12vw,64px);line-height:.94;
  letter-spacing:.5px;margin-top:16px;color:#ffe9a8;
  -webkit-text-stroke:4px var(--red-deep);paint-order:stroke fill;
  text-shadow:0 4px 0 var(--red-shadow),0 8px 14px rgba(0,0,0,.45)}
.game-title span{display:block;color:#fff;-webkit-text-stroke:4px var(--gold-deep)}
.tagline{font-family:'Baloo 2',sans-serif;font-weight:600;font-size:17px;letter-spacing:4px;color:#fff;
  margin:12px 0 32px;text-transform:uppercase;
  -webkit-text-stroke:1.5px var(--wood-deep);paint-order:stroke fill;text-shadow:0 3px 6px rgba(0,0,0,.5)}
.splash-actions{display:flex;flex-direction:column;gap:16px;align-items:center}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ============ AUTH ============ */
.auth{align-items:center;justify-content:center;padding:20px}
.auth-card{width:min(420px,92vw);padding:24px 20px;text-align:center}
.auth-logo{width:84px;height:84px;object-fit:contain;margin-bottom:6px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.auth-tabs{display:flex;background:rgba(0,0,0,.32);border-radius:var(--r-md);padding:5px;margin:14px 0 20px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.auth-tab{flex:1;background:none;border:0;color:#e9c9a0;padding:12px;border-radius:13px;font-weight:800;
  font-family:'Baloo 2';cursor:pointer;transition:.25s}
.auth-tab.active{background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));color:#5a3a00;
  box-shadow:0 3px 0 var(--gold-deep)}
.auth-form{display:none;flex-direction:column;gap:14px;text-align:left}
.auth-form.active{display:flex;animation:popIn .35s var(--ease)}
.field label{font-size:13px;color:#f4dca6;font-weight:700;margin-bottom:6px;display:block}
.field input{width:100%;background:#fff7e8;border:3px solid var(--gold-mid);border-radius:14px;
  padding:13px 15px;color:#3a2210;font-size:16px;font-family:'Poppins';font-weight:600;outline:none;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.15);transition:border .2s,box-shadow .2s}
.field input::placeholder{color:#b89a72}
.field input:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(214,43,43,.25)}
.otp-row{display:flex;gap:8px;align-items:stretch}.otp-row input{flex:1}
.dev-otp{font-size:13px;color:#5a3a00;font-weight:700}
.dev-otp:not(:empty){padding:9px 12px;background:var(--gold-hi);border-radius:10px}

/* ============ MODE SELECT ============ */
.mode{padding:24px 16px calc(40px + var(--safe-b));overflow-y:auto}
.continue-prompt{padding:20px;text-align:center;margin:0 auto 20px;max-width:520px;width:100%}
.continue-prompt p{font-family:'Baloo 2';font-weight:700;font-size:17px;margin-bottom:6px}
.continue-prompt .row{display:flex;gap:12px;justify-content:center;margin-top:14px}
.mode-cards{display:grid;gap:18px;max-width:780px;margin:0 auto;width:100%}
@media(min-width:760px){.mode-cards{grid-template-columns:1fr 1fr}}
.mode-card{position:relative;padding:20px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#fff6e2,#f0d9a8);
  box-shadow:0 8px 0 var(--gold-deep),0 14px 26px rgba(0,0,0,.45),inset 0 3px 2px rgba(255,255,255,.8);
  outline:5px solid var(--gold-mid);outline-offset:-5px;color:#4a2c14;
  transition:transform .25s var(--ease)}
.mode-card:active{transform:scale(.97)}
.mode-card.veg{background:linear-gradient(180deg,#eafbe0,#c7e9ab)}
.mode-card.nonveg{background:linear-gradient(180deg,#ffe7e0,#f6c0b2)}
.mode-badge{position:absolute;top:14px;right:14px;font-family:'Baloo 2';font-weight:800;font-size:13px;
  padding:6px 14px;border-radius:20px;letter-spacing:1px;color:#fff;
  background:linear-gradient(180deg,#86d85f,var(--green-deep));box-shadow:0 3px 0 #2c5e18}
.mode-badge.gold{background:linear-gradient(180deg,#ffe79a,var(--gold-mid));color:#5a3a00;box-shadow:0 3px 0 var(--gold-deep)}
.mode-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px}
.mode-icons img{width:100%;aspect-ratio:1;animation:bob 3s ease-in-out infinite;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.25))}
.mode-icons img:nth-child(2){animation-delay:.3s}.mode-icons img:nth-child(3){animation-delay:.6s}.mode-icons img:nth-child(4){animation-delay:.9s}
.mode-card h3{font-family:'Fredoka';font-weight:700;font-size:30px;color:#5a2218;
  -webkit-text-stroke:1px rgba(0,0,0,.12);paint-order:stroke fill}
.mode-card.veg h3{color:#356018}
.mode-card p{font-weight:600;font-size:14.5px;margin:2px 0 12px;color:#6b4423}
.mode-list{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.mode-list li{background:rgba(74,44,20,.12);font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:20px;color:#4a2c14}

/* ============ GAME ============ */
.game{padding:12px 10px calc(14px + var(--safe-b));align-items:center}
.hud{display:flex;align-items:stretch;justify-content:center;gap:10px;width:min(640px,98vw);margin-bottom:14px}
.hud .plaque{flex:1}
.hud-row{display:flex;justify-content:space-around;gap:8px}
.hud-mini{display:flex;flex-direction:column;align-items:center;flex:1}
.hud-k{font-family:'Baloo 2';font-weight:700;font-size:11px;letter-spacing:1px;color:var(--gold-hi);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.hud-k.gold{color:#fff}
.hud-v{font-family:'Fredoka';font-weight:600;font-size:24px;line-height:1;margin-top:2px;color:#fff;
  -webkit-text-stroke:2px var(--red-shadow);paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.hud-v.gold{color:var(--gold);-webkit-text-stroke:2px var(--wood-deep)}
.hud-v.sm{font-size:20px}
.medallion{width:78px;height:78px;border-radius:50%;flex:0 0 auto;align-self:center;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid) 60%,var(--gold-deep));padding:5px;
  box-shadow:0 7px 0 var(--gold-shadow),0 12px 18px rgba(0,0,0,.5),inset 0 2px 1px rgba(255,255,255,.7)}
.medallion img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff;
  box-shadow:inset 0 0 0 3px var(--red-deep)}

/* targets bar */
.targets{width:min(640px,98vw);margin-bottom:12px}
.targets-inner{display:flex;align-items:center;gap:12px;padding:9px 14px}
.targets-label{font-family:'Baloo 2';font-weight:800;font-size:13px;letter-spacing:1px;color:var(--gold-hi);
  text-shadow:0 1px 2px rgba(0,0,0,.5);flex:0 0 auto}
.mode-pill{font-family:'Baloo 2';font-weight:800;font-size:11px;letter-spacing:.5px;color:#fff;flex:0 0 auto;
  padding:4px 10px;border-radius:12px;background:linear-gradient(180deg,#86d85f,var(--green-deep));box-shadow:0 2px 0 #2c5e18}
.mode-pill.nonveg{background:linear-gradient(180deg,var(--red-hi),var(--red-deep));box-shadow:0 2px 0 var(--red-shadow)}
.hud-v.low{color:#ff8a7a;-webkit-text-stroke-color:var(--red-shadow);animation:pulseLow 1s ease-in-out infinite}
@keyframes pulseLow{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.targets-row{display:flex;gap:10px;justify-content:flex-end;flex:1}
.target-chip{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.28);border-radius:14px;
  padding:5px 11px 5px 6px;outline:2px solid rgba(255,210,77,.45);outline-offset:-2px;transition:.3s var(--ease)}
.target-chip img{width:30px;height:30px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.target-chip b{font-family:'Fredoka';font-weight:600;font-size:16px;color:#fff;
  -webkit-text-stroke:1.5px var(--red-shadow);paint-order:stroke fill}
.target-chip.done{background:linear-gradient(180deg,#86d85f,var(--green-deep));outline-color:#fff}
.target-chip.done b{color:#fff;-webkit-text-stroke:2.5px var(--green-deep)}
.target-chip.done::after{content:"✓";font-weight:800;color:#fff;margin-left:1px}
.target-chip.bump{transform:scale(1.18)}

.board-wrap{position:relative;width:min(640px,98vw);aspect-ratio:1;padding:9px;border-radius:30px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid) 55%,var(--gold-deep));
  box-shadow:0 10px 0 var(--gold-shadow),0 18px 34px rgba(0,0,0,.5),inset 0 2px 2px rgba(255,255,255,.6)}
#board{width:100%;height:100%;border-radius:22px;touch-action:none;display:block;
  background:linear-gradient(180deg,#5a2f2c,#3d1f1d);box-shadow:inset 0 4px 16px rgba(0,0,0,.6)}
.combo-pop{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(.5);
  font-family:'Fredoka';font-weight:600;font-size:38px;color:#ffe9a8;z-index:3;
  -webkit-text-stroke:3.5px var(--red-deep);paint-order:stroke fill;
  text-shadow:0 5px 0 var(--red-shadow),0 8px 14px rgba(0,0,0,.6);opacity:0;pointer-events:none;white-space:nowrap}
.combo-pop.show{animation:combo 1.05s var(--ease)}
@keyframes combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}
  70%{opacity:1;transform:translate(-50%,-52%) scale(1)}100%{opacity:0;transform:translate(-50%,-64%) scale(.95)}}
.game-foot{display:flex;justify-content:space-between;align-items:center;width:min(640px,98vw);margin-top:14px}
.last-gain{font-family:'Fredoka';font-weight:600;font-size:22px;color:var(--gold-hi);min-width:60px;text-align:center;
  -webkit-text-stroke:2.5px var(--wood-deep);paint-order:stroke fill}

/* ============ REWARDS ============ */
.token-balance{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;margin-bottom:20px}
.token-balance span{font-family:'Baloo 2';font-weight:700;font-size:16px}
.token-balance strong{font-family:'Fredoka';font-weight:600;font-size:30px;color:var(--gold);
  -webkit-text-stroke:2.5px var(--wood-deep);paint-order:stroke fill}
.reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.reward{background:linear-gradient(180deg,#fff6e2,#f0d9a8);border-radius:var(--r-md);padding:16px 14px;
  text-align:center;display:flex;flex-direction:column;gap:8px;color:#4a2c14;
  box-shadow:0 6px 0 var(--gold-deep),0 11px 18px rgba(0,0,0,.4),inset 0 2px 2px rgba(255,255,255,.7);
  outline:4px solid var(--gold-mid);outline-offset:-4px}
.reward .r-icon{font-size:38px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
.reward h4{font-family:'Baloo 2';font-weight:800;font-size:15.5px}
.reward .r-cost{font-family:'Fredoka';font-weight:700;font-size:22px;color:#9d6a14}
.reward small{color:#6b4423;font-size:12px;font-weight:600;min-height:30px}
.history-list,.lb-list{display:flex;flex-direction:column;gap:9px}
.history-item{display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(180deg,var(--red-deep),var(--red-shadow));border-radius:var(--r-sm);
  padding:13px 15px;font-size:13.5px;font-weight:600;outline:3px solid var(--gold-mid);outline-offset:-3px}
.history-item .code{font-family:'Baloo 2';font-weight:800;color:var(--gold-hi)}
.badge{font-family:'Baloo 2';font-weight:700;font-size:11px;padding:4px 10px;border-radius:12px;
  background:rgba(0,0,0,.3);text-transform:capitalize}
.badge.fulfilled{background:var(--green);color:#fff}
.badge.pending{background:var(--gold-mid);color:#5a3a00}
.badge.cancelled{background:#7a4a22}

/* ============ LEADERBOARD ============ */
.seg{display:flex;background:rgba(0,0,0,.32);border-radius:var(--r-md);padding:5px;margin-bottom:18px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.seg-btn{flex:1;background:none;border:0;color:#e9c9a0;padding:12px;border-radius:13px;font-weight:800;
  font-family:'Baloo 2';cursor:pointer;font-size:14px;transition:.25s}
.seg-btn.active{background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));color:#5a3a00;box-shadow:0 3px 0 var(--gold-deep)}
.lb-row{display:flex;align-items:center;gap:12px;border-radius:var(--r-sm);padding:12px 15px;
  background:linear-gradient(180deg,var(--red-deep),var(--red-shadow));outline:3px solid var(--gold-mid);outline-offset:-3px}
.lb-rank{font-family:'Fredoka';font-weight:600;font-size:22px;width:38px;text-align:center;color:#e9c9a0;
  -webkit-text-stroke:2px var(--wood-deep);paint-order:stroke fill}
.lb-row:nth-child(1){background:linear-gradient(180deg,#f0b73e,#b5781a);outline-color:#ffe9a8}
.lb-row:nth-child(1) .lb-rank,.lb-row:nth-child(2) .lb-rank,.lb-row:nth-child(3) .lb-rank{color:#fff}
.lb-row:nth-child(2){background:linear-gradient(180deg,#9aa6b0,#5d6975)}
.lb-row:nth-child(3){background:linear-gradient(180deg,#cd7f43,#8a5023)}
.lb-name{flex:1;font-family:'Baloo 2';font-weight:700;font-size:15px}
.lb-name small{display:block;color:#f0d9a8;font-weight:600;font-size:11.5px}
.lb-stat{text-align:right;font-size:12px;font-weight:600}
.lb-stat b{font-family:'Fredoka';font-weight:700;font-size:19px;color:var(--gold-hi)}

/* ============ PROFILE ============ */
.profile-card{padding:24px;text-align:center}
.avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 10px;color:#fff;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid) 60%,var(--gold-deep));
  display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:34px;
  box-shadow:0 6px 0 var(--gold-shadow),0 10px 16px rgba(0,0,0,.5),inset 0 0 0 4px var(--red-deep);
  -webkit-text-stroke:2px var(--red-deep);paint-order:stroke fill}
.profile-card h3{font-family:'Baloo 2';font-weight:800;font-size:22px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:18px}
@media(max-width:430px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:rgba(0,0,0,.28);border-radius:var(--r-sm);padding:13px 6px;outline:2px solid rgba(255,210,77,.4);outline-offset:-2px}
.stat span{font-family:'Fredoka';font-weight:600;font-size:24px;color:var(--gold-hi);display:block;
  -webkit-text-stroke:2px var(--wood-deep);paint-order:stroke fill}
.stat label{font-size:10.5px;font-weight:700;color:#f0d9a8}
.ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:430px){.ach-grid{grid-template-columns:repeat(3,1fr)}}
.ach{text-align:center;border-radius:var(--r-sm);padding:14px 6px;filter:grayscale(1);opacity:.45;transition:.35s var(--ease);
  background:linear-gradient(180deg,#fff6e2,#f0d9a8);color:#4a2c14;outline:3px solid #b89a72;outline-offset:-3px}
.ach.unlocked{filter:none;opacity:1;outline-color:var(--gold-mid);
  box-shadow:0 5px 0 var(--gold-deep),0 8px 14px rgba(0,0,0,.35)}
.ach .a-ic{font-size:28px}
.ach small{display:block;font-size:10.5px;font-weight:700;margin-top:5px;line-height:1.2}

/* ============ BOTTOM NAV (chunky circular boosters) ============ */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;align-items:flex-end;
  padding:10px 8px calc(12px + var(--safe-b));
  background:linear-gradient(180deg,rgba(120,40,30,.0),#7e3a1c 38%,#5c3417);
  border-top:4px solid var(--gold-mid)}
.nav-btn{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.nav-ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#9a6a3a,#5b3318);box-shadow:0 4px 0 #3d2310,inset 0 2px 2px rgba(255,255,255,.25);
  transition:transform .12s ease}
.nav-btn svg{width:26px;height:26px;fill:#f0d9a8}
.nav-btn span{font-family:'Baloo 2';font-weight:700;font-size:10.5px;color:#f0d9a8}
.nav-btn.active .nav-ico{background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 4px 0 var(--gold-deep),inset 0 2px 2px rgba(255,255,255,.6);transform:translateY(-4px) scale(1.06)}
.nav-btn.active svg{fill:var(--red-deep)}
.nav-btn.active span{color:#fff}

/* ============ FABS ============ */
.fab-stack{position:fixed;right:14px;bottom:calc(94px + var(--safe-b));z-index:35;display:flex;flex-direction:column;gap:14px}
.fab{width:58px;height:58px;border-radius:50%;border:0;font-size:26px;cursor:pointer;position:relative;
  background:linear-gradient(180deg,var(--red-hi),var(--red) 55%,var(--red-deep));
  box-shadow:0 6px 0 var(--red-shadow),0 10px 16px rgba(0,0,0,.45),inset 0 2px 1px rgba(255,255,255,.4);
  animation:bob 3s ease-in-out infinite}
.fab:active{transform:translateY(4px)}
.fab.gold{background:linear-gradient(180deg,#ffe79a,var(--gold) 55%,var(--gold-mid));box-shadow:0 6px 0 var(--gold-deep),0 10px 16px rgba(0,0,0,.45);animation-delay:.5s}
.fab-dot{position:absolute;top:-3px;right:-3px;width:18px;height:18px;border-radius:50%;
  background:#3ad17a;border:3px solid #5c3417;box-shadow:0 0 0 1px #3ad17a}

/* ============ MODALS / TOAST ============ */
.modal-root{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(40,10,8,.7);backdrop-filter:blur(3px)}
.modal-root.show{display:flex}
.modal{width:min(410px,92vw);position:relative;text-align:center;padding:28px 24px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff6e2,#f0d9a8);color:#4a2c14;
  box-shadow:0 10px 0 var(--gold-deep),0 18px 34px rgba(0,0,0,.55),inset 0 3px 2px rgba(255,255,255,.8);
  outline:6px solid var(--gold-mid);outline-offset:-6px;animation:popIn .4s var(--ease)}
.modal h3{font-family:'Fredoka';font-weight:600;font-size:26px;margin-bottom:6px;color:#9d1518}
.modal p{color:#6b4423;margin-bottom:18px;font-size:14.5px;font-weight:600}
.modal .close-x{position:absolute;top:10px;right:14px;background:none;border:0;color:#9d6a14;font-size:30px;font-weight:800;cursor:pointer;line-height:1}
.toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-b));transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg,#fff6e2,#f0d9a8);color:#4a2c14;padding:14px 22px;border-radius:16px;
  font-family:'Baloo 2';font-weight:700;font-size:14.5px;z-index:80;opacity:0;pointer-events:none;
  transition:.35s var(--ease);max-width:90vw;
  box-shadow:0 6px 0 var(--gold-deep),0 12px 20px rgba(0,0,0,.5);outline:4px solid var(--gold-mid);outline-offset:-4px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error{background:linear-gradient(180deg,#ffd0c8,#f0a294);outline-color:var(--red);color:#7a1417}
.toast.success{background:linear-gradient(180deg,#d6f5c0,#a7dd7e);outline-color:var(--green-deep);color:#2c5e18}

/* win stats */
.win-stats{display:flex;gap:10px;justify-content:center;margin:6px 0 18px}
.win-stats div{flex:1;background:rgba(74,44,20,.12);border-radius:14px;padding:12px 6px;outline:2px solid rgba(212,175,55,.4);outline-offset:-2px}
.win-stats b{display:block;font-family:'Fredoka';font-weight:600;font-size:24px;color:#9d6a14}
.win-stats span{font-size:11px;font-weight:700;color:#6b4423}

/* daily streak */
.streak-row{display:flex;gap:7px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.streak-day{width:46px;text-align:center;border-radius:12px;padding:9px 0;font-size:11px;font-weight:700;
  background:rgba(74,44,20,.12);color:#6b4423;outline:2px solid rgba(74,44,20,.18);outline-offset:-2px}
.streak-day.done{background:linear-gradient(180deg,#86d85f,var(--green));color:#fff;outline-color:var(--green-deep)}
.streak-day.today{outline:3px solid var(--red);outline-offset:-3px;color:#9d1518}
.streak-day b{display:block;font-family:'Fredoka';font-weight:700;font-size:17px}

/* spin wheel */
.wheel-wrap{position:relative;width:250px;height:250px;margin:0 auto 18px}
.wheel{width:100%;height:100%;border-radius:50%;border:8px solid var(--gold-mid);
  transition:transform 4.5s cubic-bezier(.16,1,.3,1);box-shadow:0 0 0 5px var(--wood-deep),0 8px 18px rgba(0,0,0,.5)}
.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:2;
  border-left:15px solid transparent;border-right:15px solid transparent;border-top:28px solid var(--red);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}

.spinner{width:38px;height:38px;border:4px solid rgba(255,210,77,.3);border-top-color:var(--gold);
  border-radius:50%;animation:spin .8s linear infinite;margin:34px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;color:#f0d9a8;font-weight:600;padding:30px;font-size:14.5px}

/* ============================================================
   ★★★  PREMIUM OVERHAUL LAYER  (UI/UX only — overrides above)
   ============================================================ */

/* ---- in-app scroll screens clear the fixed app bar + bottom nav ---- */
.screen.pad{padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(108px + var(--safe-b))}
.screen.mode.pad{padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(108px + var(--safe-b))}

/* ============ TOP APP BAR ============ */
.app-bar{position:fixed;top:0;left:0;right:0;z-index:45;display:flex;align-items:center;justify-content:space-between;
  padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;
  background:linear-gradient(180deg,rgba(140,20,24,.96),rgba(110,13,16,.82) 70%,transparent);
  backdrop-filter:blur(8px)}
.app-bar-brand{display:flex;align-items:center;gap:8px}
.app-bar-brand img{width:34px;height:34px;border-radius:9px;object-fit:contain;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.app-bar-brand span{font-family:'Baloo 2';font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.app-bar-actions{display:flex;align-items:center;gap:10px}
.coin-pill{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.28);border-radius:16px;padding:5px 12px 5px 9px;
  outline:2px solid var(--gold-mid);outline-offset:-2px}
.coin-pill .coin-ico{font-size:15px}
.coin-pill b{font-family:'Fredoka';font-weight:600;font-size:16px;color:var(--gold-hi)}
.icon-btn{position:relative;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#9a6a3a,#5b3318);box-shadow:0 3px 0 #3d2310,inset 0 2px 1px rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;transition:transform .1s}
.icon-btn:active{transform:translateY(3px);box-shadow:0 0 0 #3d2310}
.icon-btn svg{width:20px;height:20px;fill:#ffe9a8}
.icon-btn.ghost{background:rgba(0,0,0,.15);box-shadow:none;color:#9d1518;font-size:18px;width:34px;height:34px}
.badge-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:linear-gradient(180deg,#ff6a5a,#c52127);color:#fff;font-family:'Baloo 2';font-weight:800;font-size:11px;
  display:flex;align-items:center;justify-content:center;border:2px solid #6e0d10}

/* ============ NOTIFICATION CENTER ============ */
.sheet-root{position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end}
.sheet-backdrop{position:absolute;inset:0;background:rgba(20,6,4,.55);backdrop-filter:blur(2px);animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.notif-panel{position:relative;width:min(360px,88vw);height:100%;overflow-y:auto;
  background:linear-gradient(180deg,#2a1012,#1a0a0b);box-shadow:-12px 0 40px rgba(0,0,0,.5);
  padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + var(--safe-b));
  border-left:3px solid var(--gold-mid);animation:slideIn .3s var(--ease-soft)}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.notif-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.notif-head h3{font-family:'Baloo 2';font-weight:800;font-size:19px;color:#fff}
.notif-list{display:flex;flex-direction:column;gap:10px}
.notif-item{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:.2s}
.notif-item.unread{background:rgba(255,210,77,.1);border-color:rgba(255,210,77,.3)}
.notif-item.unread::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#3ad17a;margin-left:-4px;margin-top:4px}
.notif-item .ni-ico{font-size:24px;flex:0 0 auto}
.notif-item .ni-body b{display:block;font-family:'Baloo 2';font-weight:700;font-size:14px;color:#fff}
.notif-item .ni-body small{color:#e9c9a0;font-size:12px;line-height:1.35}
.notif-empty{text-align:center;padding:50px 20px;color:#c8a06a}
.notif-empty .ne-ico{font-size:48px;opacity:.6;display:block;margin-bottom:10px}

/* ============ HOME DASHBOARD ============ */
.home{gap:0}
.hero-card{position:relative;overflow:hidden;border-radius:20px;padding:18px 26px 270px 22px;margin-bottom:16px;
  background:linear-gradient(150deg,#e6453b,#9d1518 70%);
  box-shadow:0 10px 0 var(--red-shadow),0 16px 30px rgba(0,0,0,.45),inset 0 2px 2px rgba(255,150,120,.4);
  outline:4px solid rgba(255,210,77,.55);outline-offset:-4px}
.hero-glow{position:absolute;top:-90px;right:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,120,.18),transparent 62%);pointer-events:none;filter:blur(6px)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative;z-index:1}
.hero-top>div:first-child{flex:1;min-width:0}
.hero-hi{font-size:14px;color:#ffd9c8;font-weight:600}
.hero-name{font-family:'Fredoka';font-weight:600;font-size:26px;color:#fff;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-text-stroke:1.5px var(--red-shadow);paint-order:stroke fill}
.hero-avatar{flex:0 0 auto;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka';font-weight:600;font-size:24px;color:#7a1417;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 4px 0 var(--gold-deep),inset 0 0 0 3px rgba(255,255,255,.85)}
.hero-stats{display:flex;gap:10px;margin:16px 0;position:relative;z-index:1}
.hero-stat{flex:1;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.22);border-radius:14px;padding:10px 8px}
.hero-stat .hs-ico{font-size:20px}
.hero-stat b{font-family:'Fredoka';font-weight:600;font-size:20px;color:#fff;display:block;line-height:1}
.hero-stat small{font-size:10px;color:#ffd9c8}
.btn-play-big{font-size:20px;padding:16px;position:relative;z-index:1;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.home-card{position:relative;display:flex;align-items:center;gap:10px;padding:14px;border:0;cursor:pointer;text-align:left;
  border-radius:18px;color:#4a2c14;background:linear-gradient(180deg,#fff6e2,#f0d9a8);
  box-shadow:0 6px 0 var(--gold-deep),0 10px 16px rgba(0,0,0,.35);outline:3px solid var(--gold-mid);outline-offset:-3px;transition:transform .1s}
.home-card:active{transform:translateY(4px);box-shadow:0 2px 0 var(--gold-deep)}
.home-card .hc-ico{font-size:30px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
.home-card .hc-text b{display:block;font-family:'Baloo 2';font-weight:800;font-size:15px}
.home-card .hc-text small{font-size:11.5px;color:#7a5226;font-weight:600}
.home-card .hc-dot{position:absolute;top:9px;right:9px;width:12px;height:12px;border-radius:50%;background:#3ad17a;border:2px solid #fff;box-shadow:0 0 10px #3ad17a}
.spin-card .hc-ico{animation:wobble 3s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

.home-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:16px;margin-bottom:8px;
  background:linear-gradient(180deg,var(--red-deep),var(--red-shadow));outline:3px solid var(--gold-mid);outline-offset:-3px}
.home-row-l{display:flex;align-items:center;gap:10px}
.home-row .hc-ico{font-size:26px}
.home-row .hc-text b{font-family:'Baloo 2';font-weight:700;font-size:14px;color:#fff}
.home-row .hc-text small{font-size:12px;color:#f0d9a8; padding-left: 10px}
.streak-pips{display:flex;gap:5px}
.streak-pips i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.streak-pips i.on{background:linear-gradient(180deg,#86d85f,var(--green));box-shadow:0 0 8px rgba(122,200,90,.6)}

.home-featured,.home-ach{margin-bottom:4px}
.offer-banner{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:16px 18px;border-radius:18px;
  background:linear-gradient(120deg,#1c1c22,#3a2410);outline:3px solid var(--gold-mid);outline-offset:-3px;
  box-shadow:0 8px 18px rgba(0,0,0,.4)}
.offer-text b{display:block;font-family:'Baloo 2';font-weight:800;font-size:15px;color:var(--gold-hi)}
.offer-text small{font-size:12px;color:#e9c9a0}
.offer-ico{font-size:34px}

/* ============ SLIM HUD + BIGGER BOARD ============ */
.game{padding:8px 8px calc(10px + var(--safe-b))}
.hud{gap:8px;margin-bottom:8px;width:min(560px,98vw)}
.hud .plaque{padding:3px}
.hud .plaque-body{padding:7px 10px;border-radius:15px}
.hud-k{font-size:9.5px}
.hud-v{font-size:21px;-webkit-text-stroke-width:1.8px}
.hud-v.gold{-webkit-text-stroke-width:1.8px}
.medallion{width:58px;height:58px;padding:4px;box-shadow:0 5px 0 var(--gold-shadow),0 8px 14px rgba(0,0,0,.45),inset 0 2px 1px rgba(255,255,255,.7)}
.board-wrap{width:min(96vw,calc(100vh - 280px));max-width:560px;padding:8px;border-radius:26px}
@media(min-height:780px){.board-wrap{width:min(96vw,calc(100vh - 300px))}}

/* ============ LEVEL PROGRESS BAR ============ */
.level-bar{display:flex;align-items:center;gap:10px;width:min(560px,98vw);margin-bottom:8px;
  background:rgba(0,0,0,.26);border-radius:14px;padding:6px 12px;outline:2px solid rgba(255,210,77,.4);outline-offset:-2px}
.level-bar-tag{font-family:'Baloo 2';font-weight:800;font-size:11px;letter-spacing:.5px;color:var(--gold-hi);flex:0 0 auto}
.level-bar-tag b{font-family:'Fredoka';font-weight:600;font-size:14px;color:#fff}
.level-bar-track{flex:1;height:11px;border-radius:7px;background:rgba(0,0,0,.4);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.level-bar-fill{height:100%;width:0;border-radius:7px;
  background:linear-gradient(90deg,#86d85f,#5db33a);box-shadow:0 0 8px rgba(122,200,90,.6);
  transition:width .5s var(--ease-soft);position:relative}
.level-bar-fill::after{content:"";position:absolute;inset:0 0 50% 0;background:rgba(255,255,255,.3);border-radius:7px 7px 0 0}
.level-bar-pct{font-family:'Fredoka';font-weight:600;font-size:12px;color:#fff;flex:0 0 auto;min-width:34px;text-align:right}

/* ============ TARGET BAR (progress + states) ============ */
.targets{display:flex;align-items:center;gap:10px;width:min(560px,98vw);margin-bottom:10px;
  background:linear-gradient(180deg,var(--red-deep),var(--red-shadow));border-radius:16px;padding:7px 12px;
  box-shadow:0 5px 0 var(--red-shadow),inset 0 2px 2px rgba(255,140,100,.25);outline:3px solid var(--gold-mid);outline-offset:-3px}
.targets-row{display:flex;gap:10px;justify-content:center;flex:1;flex-wrap:wrap}
.target-chip{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 6px;border-radius:12px;
  background:rgba(0,0,0,.25);min-width:52px;position:relative;transition:.3s var(--ease)}
.target-chip .tc-img{position:relative;width:32px;height:32px}
.target-chip .tc-img img{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.target-chip .tc-count{font-family:'Fredoka';font-weight:600;font-size:12px;color:#fff;line-height:1}
.target-chip .tc-count i{color:var(--gold-hi);font-style:normal}
.target-prog{width:100%;height:5px;border-radius:3px;background:rgba(0,0,0,.4);overflow:hidden}
.target-prog span{display:block;height:100%;background:linear-gradient(90deg,#ffe9a8,var(--gold));transition:width .4s var(--ease-soft)}
.target-chip.done{background:linear-gradient(180deg,#86d85f,var(--green-deep));box-shadow:0 0 16px rgba(122,200,90,.55)}
.target-chip.done .tc-count{color:#fff}
.target-chip .tc-check{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#86d85f,var(--green-deep));border:2px solid #fff;color:#fff;font-size:12px;font-weight:800;
  display:none;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.target-chip.done .tc-check{display:flex;animation:pop .4s var(--ease)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
.target-chip.bump{animation:bump .35s var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.target-chip.glow{animation:tglow .6s ease}
@keyframes tglow{0%,100%{box-shadow:0 0 0 rgba(255,210,77,0)}50%{box-shadow:0 0 22px rgba(255,210,77,.9)}}

/* flying collectible (tile -> target) */
.fly-collect{position:fixed;z-index:75;width:40px;height:40px;pointer-events:none;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));transition:transform .6s cubic-bezier(.5,0,.6,1),opacity .6s}

/* ============ FLOATING SCORE FEEDBACK ============ */
.score-float-layer{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.score-float{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-family:'Fredoka';font-weight:600;white-space:nowrap;color:#fff;
  -webkit-text-stroke:3px var(--red-shadow);paint-order:stroke fill;
  text-shadow:0 0 14px rgba(255,210,77,.8),0 3px 6px rgba(0,0,0,.5);animation:floatScore 1.1s var(--ease-soft) forwards}
.score-float.big{color:var(--gold-hi);-webkit-text-stroke-color:var(--wood-deep)}
@keyframes floatScore{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}
  25%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}
  75%{opacity:1;transform:translate(-50%,-120%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-170%) scale(.95)}}

/* ============ CONFETTI ============ */
.confetti-layer{position:fixed;inset:0;z-index:65;pointer-events:none;overflow:hidden}
.confetti-pc{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;opacity:.95;animation:confFall linear forwards}
@keyframes confFall{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(105vh) rotate(720deg)}}

/* ============ BOTTOM NAV (refined + center play) ============ */
.bottom-nav{padding:6px 8px calc(8px + var(--safe-b));align-items:center;
  background:linear-gradient(180deg,rgba(120,40,30,0),#6e0d10 45%,#4a0a0c);border-top:3px solid var(--gold-mid)}
.nav-btn{gap:3px;padding:2px;transition:transform .12s}
.nav-ico{width:46px;height:46px;border-radius:15px;background:linear-gradient(180deg,#7a4a22,#4a2c14);box-shadow:0 3px 0 #2c1808}
.nav-btn svg{width:23px;height:23px}
.nav-btn span:last-child{font-size:10px}
.nav-btn.active{transform:translateY(-2px)}
.nav-btn.active .nav-ico{background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 3px 0 var(--gold-deep),0 0 16px rgba(255,210,77,.5)}
.nav-btn.active svg{fill:var(--red-deep)}
.nav-btn.active span:last-child{color:#fff}
.nav-btn-play .nav-ico.play{width:60px;height:60px;border-radius:50%;margin-top:-22px;
  background:linear-gradient(180deg,var(--red-hi),var(--red-deep));box-shadow:0 5px 0 var(--red-shadow),0 0 20px rgba(255,90,80,.5),inset 0 2px 2px rgba(255,255,255,.35);
  border:3px solid var(--gold-mid)}
.nav-btn-play .nav-ico.play svg{width:30px;height:30px;fill:#fff}
.nav-btn-play.active .nav-ico.play{background:linear-gradient(180deg,var(--red-hi),var(--red-deep))}
.nav-btn-play.active svg{fill:#fff}

/* ============ REWARDS — coupon cards ============ */
.reward-grid{grid-template-columns:1fr 1fr;gap:14px}
.reward{position:relative;overflow:hidden;padding:0;gap:0;background:linear-gradient(180deg,#fff8ea,#f3ddae)}
.reward .coupon-top{position:relative;padding:18px 12px 12px;text-align:center;background:linear-gradient(150deg,#e6453b,#9d1518);color:#fff}
.reward .coupon-top .r-icon{font-size:40px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.reward .coupon-top h4{font-family:'Baloo 2';font-weight:800;font-size:15px;margin-top:4px;color:#fff}
.reward .coupon-top .tag{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#ffd9c8;font-weight:700}
.reward .coupon-rip{height:0;border-top:3px dashed rgba(157,21,24,.4);position:relative}
.reward .coupon-rip::before,.reward .coupon-rip::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 50%, #43260f 60%, transparent 61%)}
.reward .coupon-rip::before{left:-9px}.reward .coupon-rip::after{right:-9px}
.reward .coupon-bot{padding:12px;display:flex;flex-direction:column;gap:8px;align-items:center}
.reward .coupon-bot small{color:#6b4423;font-size:11.5px;font-weight:600;text-align:center;min-height:28px}
.reward .r-cost{font-family:'Fredoka';font-weight:700;font-size:22px;color:#9d6a14}

/* ============ PROFILE — chef rank + progress ring ============ */
.profile-hero{display:flex;flex-direction:column;align-items:center;padding:24px 20px 20px;text-align:center}
.rank-ring{position:relative;width:120px;height:120px;margin-bottom:10px}
.rank-ring svg{width:120px;height:120px;transform:rotate(-90deg)}
.rank-ring .ring-bg{fill:none;stroke:rgba(0,0,0,.3);stroke-width:9}
.rank-ring .ring-fg{fill:none;stroke:url(#ringGrad);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease-soft)}
.rank-ring .ring-avatar{position:absolute;inset:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka';font-weight:600;font-size:38px;color:#fff;
  background:linear-gradient(180deg,var(--red-hi),var(--red-deep));box-shadow:inset 0 0 0 3px var(--gold-mid)}
.chef-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:18px;font-family:'Baloo 2';font-weight:800;font-size:13px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));color:#5a3a00;box-shadow:0 3px 0 var(--gold-deep);margin-bottom:4px}
.chef-badge.bronze{background:linear-gradient(180deg,#e6a36b,#a4632f);color:#fff}
.chef-badge.silver{background:linear-gradient(180deg,#dfe6ec,#9aa6b0);color:#33414d}
.chef-badge.gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));color:#5a3a00}
.chef-badge.master{background:linear-gradient(180deg,#ff7a5a,#9d1518);color:#fff}
.rank-progress-text{font-size:12px;color:#f0d9a8;margin-top:2px}

/* ============ ACHIEVEMENTS — states ============ */
.ach{position:relative}
.ach.unlocked .a-ic{animation:achPulse 2.5s ease-in-out infinite}
@keyframes achPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ach .a-state{display:block;font-size:9px;font-weight:800;margin-top:3px;letter-spacing:.5px;text-transform:uppercase}
.ach.unlocked .a-state{color:var(--green-deep)}
.ach .a-lock{position:absolute;top:6px;right:8px;font-size:12px;opacity:.6}

/* ============ COLORED SPINNER + SKELETONS ============ */
.spinner{width:46px;height:46px;border:none;margin:40px auto;border-radius:50%;
  background:conic-gradient(from 0deg, var(--gold), var(--red), var(--gold-hi), var(--gold));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 0);
  animation:spin .7s linear infinite;box-shadow:0 0 18px rgba(255,210,77,.35)}
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:14px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-card{height:150px;margin:0}
.sk-row{height:62px;margin-bottom:9px}

/* ============ LUCKY SPIN (premium) ============ */
.spin-stage{position:relative;width:280px;height:280px;margin:6px auto 20px}
.spin-stage .wheel{border:0;box-shadow:0 0 0 8px var(--gold-mid),0 0 0 13px var(--wood-deep),0 12px 30px rgba(0,0,0,.55)}
.spin-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;z-index:3;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 4px 0 var(--gold-deep),inset 0 0 0 3px #fff;
  display:flex;align-items:center;justify-content:center;font-size:24px}
.spin-stage .wheel-pointer{top:-14px;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid var(--red);z-index:4}
.win-stars{display:flex;justify-content:center;gap:8px;margin:4px 0 12px}
.win-stars .star{font-size:38px;filter:grayscale(1) brightness(.7);opacity:.5;transform:scale(.6);transition:.1s}
.win-stars .star.lit{filter:none;opacity:1;color:#ffd24d;animation:starPop .5s var(--ease) both}
@keyframes starPop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1) rotate(0)}}