/* ============================================================
   sutham-phones.css - clay scene primitives + phone device + screens
   (adapted from the Sutham claymorphism showcase)
   Relies on color vars defined in sutham-site.css :root
   ============================================================ */

/* ===== BACKGROUND SCENERY ===== */
.cloud{position:absolute;filter:drop-shadow(0 14px 18px rgba(120,160,180,.18));}
.cloud .puff{position:absolute;background:linear-gradient(165deg,#fff,#eaf4f8);border-radius:50%;box-shadow:inset 0 6px 8px rgba(255,255,255,.9),inset 0 -10px 14px rgba(180,205,220,.35);}

.tree{position:absolute;filter:drop-shadow(0 22px 22px rgba(70,120,90,.22));}
.tree .trunk{position:absolute;left:50%;transform:translateX(-50%);bottom:0;background:linear-gradient(160deg,#c89a6a,#a5764a);border-radius:22px;box-shadow:inset 0 5px 6px rgba(255,255,255,.35),inset 0 -8px 10px rgba(110,75,40,.4);}
.tree .leaf{position:absolute;background:radial-gradient(circle at 36% 30%,#8fd6a2,#5aa776);border-radius:50%;box-shadow:inset 0 8px 10px rgba(255,255,255,.5),inset 0 -14px 18px rgba(50,120,80,.4);}

/* ===== PHONE ===== */
.phone{
  position:relative;width:336px;height:700px;padding:13px;border-radius:56px;flex:none;
  background:linear-gradient(155deg,#fdfcf5 0%,#efe9d8 100%);
  box-shadow:
    0 60px 70px -30px rgba(50,95,75,.5),
    0 30px 40px -25px rgba(60,110,140,.35),
    inset 0 4px 6px rgba(255,255,255,.95),
    inset 0 -10px 16px rgba(150,140,110,.32),
    inset 0 0 0 2px rgba(255,255,255,.4);
}
.phone.bob{animation:bob 7s ease-in-out infinite;}
.phone-screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:var(--clay-screen);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);display:flex;flex-direction:column;}
.island{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:104px;height:30px;background:#20322a;border-radius:16px;z-index:40;box-shadow:inset 0 2px 3px rgba(255,255,255,.12),inset 0 -3px 5px rgba(0,0,0,.5);}

.statusbar{height:50px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 6px;font-family:'Nunito';font-weight:800;font-size:14px;color:var(--ink);z-index:30;}
.statusbar .icons{display:flex;align-items:center;gap:6px;}
.statusbar .bars{display:flex;align-items:flex-end;gap:2px;height:11px;}
.statusbar .bars i{width:3px;background:var(--ink);border-radius:2px;display:block;}
.statusbar .bars i:nth-child(1){height:4px}.statusbar .bars i:nth-child(2){height:6px}
.statusbar .bars i:nth-child(3){height:8px}.statusbar .bars i:nth-child(4){height:11px}
.batt{width:22px;height:11px;border-radius:3px;border:1.6px solid var(--ink);position:relative;}
.batt::before{content:"";position:absolute;inset:1.5px;right:5px;background:var(--ink);border-radius:1px;}
.batt::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:var(--ink);border-radius:0 1px 1px 0;}

/* phone bottom nav (renamed from .nav to avoid clashing with site nav) */
.pbar{flex:none;margin:0 14px 16px;height:62px;border-radius:26px;display:flex;align-items:center;justify-content:space-around;
  background:linear-gradient(160deg,#fff,#eef1e6);
  box-shadow:0 10px 18px -8px rgba(70,110,90,.3),inset 0 3px 4px rgba(255,255,255,.95),inset 0 -6px 9px rgba(120,150,130,.16);z-index:20;}
.pbar .ni{width:18px;height:18px;border-radius:50%;background:#c8d2ca;}
.pbar .ni.sq{border-radius:6px;}
.pbar .ni.active{width:46px;height:46px;border-radius:16px;background:linear-gradient(160deg,#7ccb95,#4ba673);
  box-shadow:0 8px 14px -4px rgba(50,130,85,.6),inset 0 3px 4px rgba(255,255,255,.6),inset 0 -5px 8px rgba(30,90,55,.4);
  display:flex;align-items:center;justify-content:center;}
.pbar .ni.active::after{content:"";width:20px;height:20px;border-radius:6px;background:#fff;}

.screen-body{flex:1;min-height:0;position:relative;}

/* ---------- SCREEN 1 : MAP ---------- */
.map{position:absolute;inset:0;background:radial-gradient(70% 55% at 30% 24%,#e9f5e6,transparent 60%),linear-gradient(170deg,#e3f0e0,#d2e8d4);}
.road{position:absolute;background:#f4f8f1;border-radius:40px;box-shadow:inset 0 1px 2px rgba(255,255,255,.8);}
.block{position:absolute;border-radius:14px;background:linear-gradient(160deg,#e7efe0,#d3e2cf);box-shadow:0 5px 8px -3px rgba(80,120,95,.4),inset 0 2px 3px rgba(255,255,255,.85),inset 0 -4px 6px rgba(110,150,120,.25);}
.park{position:absolute;border-radius:18px;background:linear-gradient(160deg,#cfe9c8,#b6dcae);box-shadow:inset 0 2px 4px rgba(255,255,255,.7),inset 0 -4px 7px rgba(90,150,90,.3);}

.pin{position:absolute;width:38px;height:38px;transform:translate(-50%,-100%);filter:drop-shadow(0 6px 5px rgba(60,90,70,.4));}
.pin .head{width:38px;height:38px;border-radius:50% 50% 50% 12px;transform:rotate(45deg);box-shadow:inset 0 4px 5px rgba(255,255,255,.6),inset 0 -7px 10px rgba(0,0,0,.22);}
.pin .dot{position:absolute;top:11px;left:11px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:inset 0 -2px 3px rgba(0,0,0,.18);}
.pin.green .head{background:linear-gradient(160deg,#7ccb95,#4ba673);}
.pin.blue .head{background:linear-gradient(160deg,#8fc0ee,#3f7fc4);}
.pin.red .head{background:linear-gradient(160deg,#f0a59a,#dd6b5c);}

.userdot{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);}
.userdot .core{position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;background:linear-gradient(160deg,#9cc8f3,#4a86cf);border:3px solid #fff;box-shadow:0 3px 6px rgba(50,110,180,.5);z-index:2;}
.userdot .ring{position:absolute;inset:-8px;border-radius:50%;background:rgba(99,160,230,.35);animation:pulse 2.6s ease-out infinite;}

.map-topbar{position:absolute;top:12px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;z-index:12;}
.p-brand{display:flex;align-items:center;gap:9px;}
.p-brand .nm{font-family:'Fredoka';font-weight:700;font-size:26px;color:var(--green-ink);letter-spacing:-.5px;}
.p-dot{width:9px;height:9px;border-radius:50%;flex:none;align-self:flex-end;margin:0 0 6px 3px;background:linear-gradient(160deg,#7ccb95,#3f9263);box-shadow:0 2px 5px -1px rgba(50,130,85,.55),inset 0 1px 1px rgba(255,255,255,.6);}
.map-icon-btn{width:40px;height:40px;border-radius:15px;background:linear-gradient(160deg,#fff,#eef1e6);box-shadow:0 7px 12px -5px rgba(70,110,90,.4),inset 0 2px 3px rgba(255,255,255,.9),inset 0 -4px 6px rgba(120,150,130,.2);display:flex;align-items:center;justify-content:center;}
.map-icon-btn span{width:18px;height:18px;border-radius:50%;border:3px solid var(--green-deep);}

.map-card{position:absolute;left:16px;right:16px;bottom:78px;padding:14px 16px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(238,244,232,.8));backdrop-filter:blur(8px);box-shadow:0 16px 26px -10px rgba(60,110,85,.45),inset 0 3px 4px rgba(255,255,255,.95),inset 0 -6px 9px rgba(120,150,130,.18);display:flex;align-items:center;gap:13px;z-index:12;}
.map-card .gdot{width:16px;height:16px;border-radius:50%;background:linear-gradient(160deg,#7ccb95,#4ba673);box-shadow:inset 0 2px 2px rgba(255,255,255,.6),0 3px 5px rgba(50,130,85,.4);flex:none;}
.map-card .ttl{font-family:'Nunito';font-weight:800;font-size:14.5px;color:var(--ink);white-space:nowrap;}
.map-card .sub{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-top:1px;}
.map-card .dist{margin-left:auto;font-family:'Fredoka';font-weight:600;font-size:18px;color:var(--green-deep);}

.scan-btn{position:absolute;left:16px;right:16px;bottom:18px;height:50px;border:none;border-radius:20px;font-family:'Fredoka';font-weight:600;font-size:17px;color:#1d5237;background:linear-gradient(160deg,#aee5bf,#79cf99);box-shadow:0 12px 20px -6px rgba(60,160,100,.6),inset 0 3px 4px rgba(255,255,255,.85),inset 0 -6px 9px rgba(40,120,75,.35);display:flex;align-items:center;justify-content:center;gap:9px;z-index:12;cursor:pointer;}
.scan-btn .cam{width:19px;height:16px;border-radius:5px;border:2.6px solid #1d5237;position:relative;}
.scan-btn .cam::before{content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;border-radius:50%;border:2.2px solid #1d5237;}

/* ---------- SCREEN 2 : SCAN RESULT ---------- */
.scan-screen{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 0%,#effaf2,#e6f5ec);padding:6px 18px 0;display:flex;flex-direction:column;gap:13px;overflow:hidden;}
.scan-head{display:flex;align-items:center;justify-content:center;position:relative;height:30px;}
.scan-head .t{font-family:'Fredoka';font-weight:600;font-size:18px;color:var(--green-ink);}

.result-card{border-radius:26px;padding:18px 16px 16px;text-align:center;background:linear-gradient(160deg,#fff,#eef6ec);box-shadow:0 16px 26px -10px rgba(60,130,90,.4),inset 0 3px 4px rgba(255,255,255,.95),inset 0 -7px 11px rgba(120,160,130,.2);}
.bottle{width:66px;height:104px;margin:2px auto 12px;position:relative;filter:drop-shadow(0 10px 10px rgba(70,140,170,.3));}
.bottle .body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:52px;height:78px;border-radius:22px 22px 20px 20px;background:linear-gradient(155deg,rgba(190,225,240,.95),rgba(135,190,225,.9));box-shadow:inset 0 4px 6px rgba(255,255,255,.8),inset -8px 0 12px rgba(70,130,170,.3),inset 0 -8px 12px rgba(60,120,160,.3);}
.bottle .label{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:52px;height:26px;background:linear-gradient(160deg,#fff,#eaf3f7);box-shadow:inset 0 2px 3px rgba(255,255,255,.9);}
.bottle .neck{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:22px;height:18px;background:linear-gradient(155deg,#bfe1f0,#9ec8e2);border-radius:6px 6px 3px 3px;}
.bottle .cap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:16px;border-radius:7px;background:linear-gradient(160deg,#9bd3ad,#5aa877);box-shadow:inset 0 3px 3px rgba(255,255,255,.6),inset 0 -4px 5px rgba(40,110,70,.4);}
.result-card .obj{font-family:'Fredoka';font-weight:700;font-size:24px;color:var(--green-ink);}
.conf-row{display:flex;align-items:center;gap:10px;margin-top:12px;}
.conf-bar{flex:1;height:13px;border-radius:8px;background:#dfeadf;box-shadow:inset 0 2px 3px rgba(90,130,100,.25);overflow:hidden;}
.conf-bar i{display:block;height:100%;width:94%;border-radius:8px;background:linear-gradient(90deg,#7ccb95,#4ba673);box-shadow:inset 0 2px 2px rgba(255,255,255,.6);}
.conf-row .pct{font-family:'Fredoka';font-weight:600;font-size:14px;color:var(--green-deep);white-space:nowrap;}

.bin-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:24px;background:linear-gradient(160deg,#eaf3fd,#d6e8fa);box-shadow:0 14px 22px -10px rgba(60,110,170,.4),inset 0 3px 4px rgba(255,255,255,.9),inset 0 -6px 10px rgba(90,140,200,.22);}
.bin-circle{width:52px;height:52px;border-radius:50%;flex:none;background:linear-gradient(160deg,#9cc6f1,#3f7fc4);box-shadow:inset 0 4px 5px rgba(255,255,255,.6),inset 0 -7px 10px rgba(30,80,140,.45),0 6px 10px -3px rgba(50,110,180,.5);display:flex;align-items:center;justify-content:center;}
.bin-circle::after{content:"";width:22px;height:22px;border-radius:6px 6px 8px 8px;background:rgba(255,255,255,.85);box-shadow:inset 0 -3px 4px rgba(40,90,150,.3);}
.bin-card .bt{font-family:'Fredoka';font-weight:600;font-size:18px;color:var(--blue-deep);}
.bin-card .bs{font-size:12.5px;font-weight:700;color:#6a89ab;margin-top:1px;}

.amber-strip{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:18px;background:linear-gradient(160deg,#fceecb,#f6dd9d);box-shadow:0 10px 16px -8px rgba(180,140,40,.45),inset 0 3px 4px rgba(255,255,255,.85),inset 0 -5px 8px rgba(190,150,40,.3);}
.amber-strip .loc{width:14px;height:14px;border-radius:50% 50% 50% 2px;transform:rotate(45deg);background:linear-gradient(160deg,#f4c25b,#d99a2a);flex:none;}
.amber-strip .at{font-family:'Nunito';font-weight:800;font-size:13.5px;color:#8a5e10;}
.amber-strip .at b{font-family:'Fredoka';font-weight:600;}

.btn-row{display:flex;gap:12px;margin-top:2px;}
.pbtn{flex:1;height:50px;border:none;border-radius:18px;font-family:'Fredoka';font-weight:600;font-size:15px;cursor:pointer;}
.pbtn.solid{color:#1d5237;background:linear-gradient(160deg,#aee5bf,#79cf99);box-shadow:0 12px 18px -6px rgba(60,160,100,.55),inset 0 3px 4px rgba(255,255,255,.85),inset 0 -6px 9px rgba(40,120,75,.35);}
.pbtn.ghost{color:var(--green-deep);background:linear-gradient(160deg,#f3f7ee,#e6ede0);box-shadow:inset 0 0 0 2px rgba(108,193,138,.55),inset 0 3px 4px rgba(255,255,255,.9),0 8px 12px -8px rgba(70,110,90,.3);}

/* ---------- SCREEN 3 : LEADERBOARD ---------- */
.lb{position:absolute;inset:0;background:radial-gradient(80% 50% at 50% 0%,#fdfaf0,#f5efe0);padding:6px 16px 0;display:flex;flex-direction:column;}
.lb-head{text-align:center;height:32px;display:flex;align-items:center;justify-content:center;}
.lb-head .t{font-family:'Fredoka';font-weight:600;font-size:18px;color:#8a5e10;}
.lb-sub{text-align:center;font-size:12px;font-weight:700;color:#b39456;margin-top:-2px;margin-bottom:10px;}
.filters{display:flex;gap:9px;justify-content:center;margin-bottom:14px;}
.fpill{padding:8px 17px;border-radius:15px;font-family:'Fredoka';font-weight:500;font-size:13.5px;}
.fpill.on{color:#8a5e10;background:linear-gradient(160deg,#fbe6bb,#f3cf73);box-shadow:0 9px 14px -6px rgba(190,150,40,.5),inset 0 3px 4px rgba(255,255,255,.8),inset 0 -5px 7px rgba(190,150,40,.3);}
.fpill.off{color:#9a8a66;background:linear-gradient(160deg,#fdfaf2,#f0ebdc);box-shadow:inset 0 3px 4px rgba(255,255,255,.9),inset 0 -4px 6px rgba(170,155,120,.2);}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:9px;margin-bottom:16px;}
.col{display:flex;flex-direction:column;align-items:center;gap:7px;width:82px;}
.col .av{width:40px;height:40px;border-radius:14px;box-shadow:inset 0 3px 4px rgba(255,255,255,.7),inset 0 -5px 8px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:700;font-size:17px;color:#fff;}
.col .city{font-family:'Nunito';font-weight:800;font-size:12.5px;color:var(--ink);}
.col .bins{font-family:'Fredoka';font-weight:600;font-size:14px;}
.bar{width:100%;border-radius:18px 18px 8px 8px;display:flex;align-items:flex-start;justify-content:center;padding-top:9px;font-family:'Fredoka';font-weight:700;font-size:22px;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.18);}
.bar.gold{height:104px;background:linear-gradient(160deg,#f8d978,#e6b53f);box-shadow:0 14px 20px -8px rgba(200,150,30,.6),inset 0 4px 5px rgba(255,255,255,.7),inset 0 -8px 12px rgba(160,110,20,.4);}
.bar.silver{height:78px;background:linear-gradient(160deg,#e6ebef,#c2ccd4);box-shadow:0 14px 20px -8px rgba(120,140,160,.5),inset 0 4px 5px rgba(255,255,255,.85),inset 0 -8px 12px rgba(110,130,150,.35);color:#5a6b78;text-shadow:none;}
.bar.bronze{height:60px;background:linear-gradient(160deg,#edb98a,#cf915c);box-shadow:0 14px 20px -8px rgba(170,110,60,.5),inset 0 4px 5px rgba(255,255,255,.6),inset 0 -8px 12px rgba(140,85,40,.4);}
.av.gold{background:linear-gradient(160deg,#f8d978,#e0a82f);}.av.silver{background:linear-gradient(160deg,#dfe5ea,#b6c0c9);color:#5a6b78;}.av.bronze{background:linear-gradient(160deg,#e7b387,#cd8a52);}
.col .bins.gold{color:#c98a25;}.col .bins.silver{color:#7d8a95;}.col .bins.bronze{color:#b06f3d;}
.rows{display:flex;flex-direction:column;gap:9px;}
.lrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:18px;}
.lrow .rk{font-family:'Fredoka';font-weight:600;font-size:15px;width:18px;}
.lrow .rav{width:30px;height:30px;border-radius:11px;flex:none;box-shadow:inset 0 2px 3px rgba(255,255,255,.6),inset 0 -3px 5px rgba(0,0,0,.15);}
.lrow .rcity{font-family:'Nunito';font-weight:800;font-size:14px;color:var(--ink);display:flex;align-items:center;}
.lrow .rbins{margin-left:auto;font-family:'Fredoka';font-weight:600;font-size:14px;}
.lrow.me{background:linear-gradient(160deg,#fbeabf,#f4d27a);box-shadow:0 10px 16px -8px rgba(190,150,40,.45),inset 0 3px 4px rgba(255,255,255,.8),inset 0 -5px 8px rgba(190,150,40,.28);}
.lrow.me .rk,.lrow.me .rbins{color:#a8751a;}
.badge-you{margin-left:7px;font-family:'Nunito';font-weight:900;font-size:10px;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:9px;color:#fff;background:linear-gradient(160deg,#f0b94e,#d8932a);box-shadow:inset 0 1px 2px rgba(255,255,255,.5);}
.lrow.ghost{background:linear-gradient(160deg,#f1f7ec,#e6efde);box-shadow:inset 0 3px 4px rgba(255,255,255,.85),inset 0 -4px 6px rgba(120,160,125,.18);}
.lrow.ghost .rcity{color:var(--green-deep);}
.lrow.ghost .rfirst{margin-left:auto;font-family:'Fredoka';font-weight:600;font-size:13px;color:var(--green-deep);}
.lrow.ghost .rav{background:linear-gradient(160deg,#d6ecd6,#bcdfbd);}

/* floating scan popup */
.scan-pop{position:absolute;width:226px;padding:15px 16px;border-radius:24px;z-index:60;background:linear-gradient(160deg,#fff,#eef6ec);box-shadow:0 26px 40px -14px rgba(40,110,75,.5),inset 0 3px 4px rgba(255,255,255,.95),inset 0 -6px 10px rgba(110,160,125,.2),inset 0 0 0 2.5px rgba(108,193,138,.65);}
.scan-pop.bob{animation:bob 6s ease-in-out infinite;}
.scan-pop .ph{display:flex;align-items:center;gap:9px;}
.scan-pop .spark{width:26px;height:26px;flex:none;border-radius:10px;background:linear-gradient(160deg,#7ccb95,#4ba673);box-shadow:inset 0 2px 3px rgba(255,255,255,.6),inset 0 -4px 5px rgba(30,90,55,.4),0 5px 9px -3px rgba(50,130,85,.5);position:relative;}
.scan-pop .spark::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:900;}
.scan-pop .pt{font-family:'Fredoka';font-weight:600;font-size:14.5px;color:var(--green-ink);line-height:1.15;}
.scan-pop .pill{margin-top:12px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Fredoka';font-weight:600;font-size:14px;color:#fff;background:linear-gradient(160deg,#8fc0ee,#3f7fc4);box-shadow:inset 0 3px 4px rgba(255,255,255,.45),inset 0 -5px 7px rgba(30,80,140,.4),0 8px 13px -5px rgba(50,110,180,.5);}
.scan-pop .pill .bd{width:12px;height:12px;border-radius:4px;background:rgba(255,255,255,.9);}
.scan-pop .tail{position:absolute;bottom:-13px;left:42px;width:26px;height:26px;background:#eef6ec;transform:rotate(45deg);border-radius:0 0 9px 0;box-shadow:6px 6px 10px -4px rgba(40,110,75,.4);border-right:2.5px solid rgba(108,193,138,.65);border-bottom:2.5px solid rgba(108,193,138,.65);}

@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes pulse{0%{transform:scale(.7);opacity:.55}80%,100%{transform:scale(1.7);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .phone.bob,.scan-pop.bob,.userdot .ring{animation:none!important;}
}