/* ===== self-hosted fonts (offline-ready) ===== */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/sora-400.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/sora-600.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/sora-800.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/chakrapetch-600.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/chakrapetch-700.woff2') format('woff2');}

:root{
  --emoji:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji";
  --font:'Sora',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,var(--emoji),sans-serif;
  --display:'Chakra Petch','Sora',system-ui,var(--emoji),sans-serif;
  --bg:#0a0e1a;
  --bg2:#0f1626;
  --glass:rgba(22,30,52,.62);
  --glass-line:rgba(255,255,255,.10);
  --accent:#2ee27a;
  --accent-d:#12a45a;
  --gold:#ffc23e;
  --red:#ff5b5b;
  --text:#eef3ff;
  --muted:#8b97bd;
  --radius:20px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --shadow:0 16px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--font);
  background:radial-gradient(130% 100% at 50% -10%,#1a2647 0%,var(--bg) 55%);
  color:var(--text);overflow:hidden;user-select:none;-webkit-user-select:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
#app{position:fixed;inset:0;max-width:600px;margin:0 auto;overflow:hidden;}

.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-line);}

.screen{position:absolute;inset:0;display:none;flex-direction:column;
  padding:calc(18px + var(--safe-t)) 16px calc(18px + var(--safe-b));animation:fade .28s ease;}
.screen.active{display:flex;}
.list-screen{overflow:hidden;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* logo */
.logo{font-weight:900;font-size:46px;letter-spacing:2px;line-height:.88;text-align:center;
  text-shadow:0 6px 30px rgba(46,226,122,.25);}
.logo span{display:block;color:var(--accent);}
/* Kurdish tagline بگەڕێ: Arabic script MUST NOT inherit letter-spacing (breaks ligatures) nor the
   logo's tight line-height (.88 scalps the high marks of ڕ/ێ — that's the "half-eaten" bug).
   Rendered with self-hosted Noto Sans Arabic: system fallbacks misplace the small-v mark UNDER
   the ڕ (especially with synthetic bold) — Noto positions Kurdish marks correctly. */
@font-face{font-family:"Noto Kurdish";src:url("../assets/fonts/noto-sans-arabic-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;}
.logo .ku{letter-spacing:0;font-size:.62em;line-height:1.55;font-weight:700;margin-top:2px;
  font-family:"Noto Kurdish",var(--font);}
.logo.small{font-size:22px;letter-spacing:1px;text-align:left;}
.logo.small span{display:inline;color:var(--accent);margin-left:6px;}
.logo.small .ku{letter-spacing:0;font-size:.95em;line-height:1.55;margin-left:9px;font-family:"Noto Kurdish",var(--font);}
/* sign-in/up card: brand centred */
.auth-card .logo.small{text-align:center;}

/* splash + opening animation */
#screen-splash{align-items:center;justify-content:center;overflow:hidden;}
#screen-splash::before{content:"";position:absolute;width:140vmax;height:140vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(46,226,122,.18),transparent 60%);animation:splashGlow 2.4s ease-out forwards;}
@keyframes splashGlow{0%{transform:scale(.2);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:.5;}}
.splash-inner{position:relative;z-index:1;}
#screen-splash .logo{animation:splashLogo .85s cubic-bezier(.2,1.35,.4,1) both, logoPulse 2.2s ease-in-out .85s infinite;}
@keyframes splashLogo{0%{opacity:0;transform:scale(.55) translateY(14px);filter:blur(6px);}100%{opacity:1;transform:none;filter:none;}}
@keyframes logoPulse{0%,100%{text-shadow:0 6px 30px rgba(46,226,122,.3);}50%{text-shadow:0 8px 50px rgba(46,226,122,.65);}}
.tagline{color:var(--muted);margin-top:16px;letter-spacing:2px;font-size:12px;text-transform:uppercase;
  animation:splashFadeUp .7s ease .55s both;}
@keyframes splashFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.spinner{width:34px;height:34px;border:3px solid var(--glass-line);border-top-color:var(--accent);
  border-radius:50%;margin:30px auto 0;opacity:0;animation:spin 1s linear infinite, splashFadeOp .6s ease .95s forwards;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes splashFadeOp{to{opacity:1;}}

/* buttons */
.btn{border:0;border-radius:14px;padding:14px 18px;font-size:16px;font-weight:800;color:var(--text);
  background:rgba(255,255,255,.07);cursor:pointer;transition:transform .08s,filter .15s;}
.btn:active{transform:scale(.97);}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#042414;
  box-shadow:0 5px 16px rgba(46,226,122,.2);}   /* softened ~30% — premium, not loud */
.btn.ghost{background:transparent;border:1px solid var(--glass-line);color:var(--muted);}
.btn.tiny{padding:8px 12px;font-size:13px;}
.small-link{margin-top:auto;align-self:center;}

/* auth */
#screen-auth{align-items:center;justify-content:center;}
.auth-card{width:100%;max-width:390px;border-radius:24px;padding:28px 22px;box-shadow:var(--shadow);
  margin:auto 0;}   /* auto vertical margins = dead-centre in the column flex, on every phone */
.auth-card .logo{margin-bottom:22px;}
.tabs{display:flex;background:rgba(0,0,0,.25);border-radius:13px;padding:4px;margin-bottom:18px;}
.tab{flex:1;border:0;background:transparent;color:var(--muted);font-weight:800;padding:11px;border-radius:10px;cursor:pointer;}
.tab.active{background:rgba(255,255,255,.10);color:var(--text);}
.auth-form{display:none;flex-direction:column;gap:12px;}
.auth-form.active{display:flex;}
.auth-form input,.add-friend input{background:rgba(0,0,0,.25);border:1px solid var(--glass-line);border-radius:13px;
  padding:15px;color:var(--text);font-size:16px;outline:none;}
.auth-form input:focus,.add-friend input:focus{border-color:var(--accent);}
.auth-error{color:var(--red);font-size:13px;min-height:18px;text-align:center;margin:10px 0;}
/* ===== animated auth backdrop: curving road + a small squad looping along it ===== */
#screen-auth{overflow:hidden;}   /* .screen is already position:absolute inset:0 — don't override it */
/* a fixed 400x800 "stage" (the same coordinate space as the road path + car offset-paths),
   centred and scaled up to cover the screen — keeps the cars glued to the road at any size */
.auth-bg{position:absolute;left:calc(50% - 200px);top:calc(50% - 400px);width:400px;height:800px;
  pointer-events:none;transform:scale(max(calc(100vw / 400px), calc(100vh / 800px)));transform-origin:center;}
.auth-bg svg{position:absolute;inset:0;width:400px;height:800px;opacity:.9;}
/* the squad: a white ARROW leads (just like the player) and coloured CIRCLES follow (like friends) */
.abg-car{display:block;position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;
  offset-path:path("M 430 720 C 290 750 150 650 190 530 C 225 425 60 370 95 255 C 130 145 320 150 355 30");
  offset-rotate:auto 90deg;animation:abgDrive 14s linear infinite;
  box-shadow:0 0 10px currentColor;background:currentColor;}
.abg-car.c1{color:#2ee27a;animation-delay:0s;}
.abg-car.c2{color:#4cc2ff;animation-delay:-1.1s;width:11px;height:11px;}
.abg-car.c3{color:#ff9d3d;animation-delay:-2.1s;width:11px;height:11px;}
.abg-car.c4{color:#ffffff;animation-delay:-3s;width:17px;height:17px;border-radius:0;
  clip-path:polygon(50% 0%, 88% 100%, 50% 76%, 12% 100%);
  box-shadow:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.9));}
@keyframes abgDrive{from{offset-distance:0%}to{offset-distance:100%}}
.auth-card{position:relative;z-index:2;}
/* ===== social sign-in ===== */
.social-auth{margin-bottom:4px;}
.social-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:8px;
  background:#fff;color:#1b1f27;font-weight:700;border:0;}
.social-btn.apple{background:#0c0e13;color:#fff;border:1px solid var(--glass-line);}
.or-div{display:flex;align-items:center;gap:10px;margin:12px 0 10px;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;}
.or-div::before,.or-div::after{content:"";flex:1;height:1px;background:var(--glass-line);}
/* ===== Erbil geofence: outside the city = a blocking full-screen card, no way around it ===== */
#geofence{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,7,16,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
#geofence.show{display:flex;}
.gf-card{width:100%;max-width:340px;border-radius:24px;padding:30px 24px;text-align:center;box-shadow:var(--shadow);
  animation:piUp .3s cubic-bezier(.2,.8,.25,1);}
.gf-ic{font-size:52px;margin-bottom:12px;}
.gf-card h2{font-family:var(--display);font-weight:700;font-size:24px;margin:0 0 8px;}
.gf-sub{font-size:16px;color:var(--text);margin:0 0 6px;}
.gf-small{font-size:12px;color:var(--muted);margin:0 0 18px;}

/* ===== first-time tutorial ===== */
#tutorial{position:fixed;inset:0;z-index:1150;display:none;align-items:center;justify-content:center;padding:22px;
  background:rgba(4,7,16,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
#tutorial.show{display:flex;}
.tut-card{width:100%;max-width:360px;border-radius:22px;padding:22px;box-shadow:var(--shadow);}
.tut-viewport{overflow:hidden;}
.tut-track{display:flex;width:500%;transition:transform .32s cubic-bezier(.2,.8,.25,1);}
.tut-slide{width:20%;flex:0 0 20%;text-align:center;padding:8px 6px;}
.tut-ic{font-size:46px;margin:6px 0 10px;}
.tut-slide h2{font-family:var(--display);font-weight:700;font-size:21px;margin:0 0 8px;}
.tut-slide p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 6px;}
.tut-pv{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.tut-pv-btn{padding:11px;border-radius:12px;border:1px solid var(--glass-line);background:rgba(0,0,0,.25);
  color:var(--text);font-weight:700;font-size:14px;cursor:pointer;}
.tut-pv-btn.active{border-color:var(--accent);background:rgba(46,226,122,.14);}
.tut-pv-hint{font-size:12px!important;}
.tut-dots{display:flex;justify-content:center;gap:7px;margin:14px 0;}
.tut-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:.2s;}
.tut-dots i.on{background:var(--accent);width:18px;border-radius:4px;}
.link-btn{background:none;border:0;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;
  padding:4px;align-self:center;text-decoration:underline;}
.link-btn:active{color:var(--text);}

/* topbar */
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.topbar h1{font-size:23px;margin:0;}

/* ===== menu ===== */
.profile-header{display:flex;align-items:center;gap:14px;border-radius:var(--radius);padding:14px;margin-bottom:16px;box-shadow:var(--shadow);}
.ph-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:30px;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));flex-shrink:0;border:2px solid rgba(255,255,255,.15);}
.ph-info{flex:1;min-width:0;}
.ph-name{font-weight:900;font-size:19px;}
.ph-level{display:flex;align-items:center;gap:8px;margin-top:6px;}
.lvl-badge{background:var(--gold);color:#3a2600;font-weight:900;font-size:12px;padding:3px 9px;border-radius:20px;}
.xp-bar{flex:1;height:9px;background:rgba(0,0,0,.3);border-radius:6px;overflow:hidden;min-width:60px;}
.xp-bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .5s;}
.xp-text{font-size:11px;color:var(--muted);white-space:nowrap;}
.ph-coins{font-weight:900;font-size:16px;color:var(--gold);white-space:nowrap;display:flex;align-items:center;gap:5px;}
.coin{display:inline-block;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold) 70%,#d6951a);
  box-shadow:inset 0 0 0 2px rgba(150,90,0,.35),0 1px 3px rgba(0,0,0,.4);flex-shrink:0;}

.hero-card{position:relative;border-radius:var(--radius);padding:22px;display:flex;align-items:center;
  margin-bottom:14px;overflow:hidden;cursor:pointer;min-height:120px;box-shadow:var(--shadow);
  border:1px solid rgba(46,226,122,.35);}
.hero-card:active{transform:scale(.99);}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(120% 140% at 85% 20%,rgba(46,226,122,.34),transparent 60%),
  linear-gradient(135deg,#15351f,#0e2018);}
.hero-text{position:relative;flex:1;display:flex;flex-direction:column;gap:4px;}
.hero-text .t{font-size:24px;font-weight:900;}
.hero-text .s{font-size:13px;color:#bfe9cf;}
.hero-go{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#042414;font-size:22px;}

.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.menu-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  border-radius:18px;padding:16px;color:var(--text);cursor:pointer;transition:transform .08s;}
.menu-card:active{transform:scale(.97);}
.menu-card .ico{font-size:24px;}
.menu-card .t{font-weight:800;font-size:16px;}
.menu-card .s{font-size:12px;color:var(--muted);}

/* ===== bottom nav (Instagram-style) ===== */
/* Instagram-style FLOATING pill nav: detached glassy capsule, icon-only tabs, soft highlight
   pill on the active tab. Shrinks + fades while you play; grows back the moment you touch it. */
#bottomnav{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%) scale(1);
  z-index:1000;display:none;align-items:center;gap:4px;padding:8px 10px;border-radius:999px;
  background:rgba(13,17,27,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform .35s cubic-bezier(.34,1.2,.4,1),opacity .35s ease,background .35s ease;
  transform-origin:50% 100%;}
#bottomnav.show{display:flex;}
/* idle while playing → compact + more transparent (Instagram behaviour) */
#bottomnav.mini{transform:translateX(-50%) scale(.82);opacity:.75;background:rgba(13,17,27,.5);}
.nav-btn{background:none;border:0;color:var(--muted);display:flex;align-items:center;justify-content:center;
  width:52px;height:44px;border-radius:999px;cursor:pointer;
  transition:background .3s cubic-bezier(.34,1.2,.4,1),color .25s,transform .1s;}
.nav-btn:active{transform:scale(.9);}
.nav-btn .ni{font-size:22px;line-height:1;position:relative;display:flex;}
.nav-btn .nl{display:none;}
.nav-btn.active{background:rgba(255,255,255,.14);color:#fff;}
.nav-btn.active .ni{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}

/* ===== bottom sheets (open over the live map) ===== */
.sheet-screen{position:fixed;left:0;right:0;bottom:0;max-width:600px;margin:0 auto;height:74vh;z-index:950;
  display:flex;flex-direction:column;background:rgba(13,19,33,.975);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-line);border-radius:24px 24px 0 0;box-shadow:0 -18px 55px rgba(0,0,0,.55);
  transform:translateY(112%);transition:transform .34s cubic-bezier(.2,.85,.2,1);
  padding:12px 16px calc(76px + var(--safe-b));overflow:hidden;will-change:transform;}
.sheet-screen.open{transform:translateY(0);}
.sheet-grab{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);}
.sheet-screen .topbar{margin:12px 0 16px;}
.sheet-screen .topbar h1{flex:1;}
.sheet-x{width:36px;height:36px;border-radius:50%;border:0;color:#fff;font-size:15px;cursor:pointer;background:rgba(255,255,255,.08);}
.sheet-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* hide the map controls while a sheet is open, leaving a clean map peek up top */
#app.sheet-open .hud,#app.sheet-open .social-bar,#app.sheet-open .right-controls{opacity:0;pointer-events:none;transition:opacity .2s;}

/* hud logo */
.hud-logo{pointer-events:none;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.5px;border-radius:12px;padding:10px 12px;}
.hud-logo span{color:var(--accent);margin-left:3px;}
.pb-coins{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--gold);font-weight:800;margin-top:12px;}

/* squad sheet must float above the bottom nav when open */
#squad-sheet{z-index:1050;}

/* backdrop behind sheets — blocks the map & top controls, tap to close */
#sheet-backdrop{position:fixed;inset:0;z-index:940;display:none;background:rgba(4,7,16,.4);
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);}
#app.sheet-open #sheet-backdrop{display:block;}

/* ===== POI editor modal ===== */
#poi-edit-modal{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,7,16,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#poi-edit-modal.show{display:flex;}
#poi-edit-modal .crop-card{max-width:360px;}
#poi-edit-modal input,#poi-edit-modal select,#poi-edit-modal textarea{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--glass-line);
  border-radius:12px;padding:12px;color:var(--text);font-size:15px;outline:none;margin-bottom:10px;}
#poi-edit-modal textarea{resize:none;font-family:var(--font);}
.pe-img{width:100px;height:100px;border-radius:50%;margin:0 auto 12px;background:rgba(255,255,255,.06);background-size:cover;
  background-position:center;display:grid;place-items:center;color:var(--muted);font-size:12px;border:2px solid var(--glass-line);}
.pe-loc{font-size:12px;color:var(--muted);text-align:center;margin-bottom:14px;}

/* ===== POI info card (tap a place) ===== */
#poi-info-modal{position:fixed;inset:0;z-index:1300;display:none;align-items:flex-end;justify-content:center;
  background:rgba(4,7,16,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
#poi-info-modal.show{display:flex;animation:piFade .18s ease;}
@keyframes piFade{from{opacity:0}to{opacity:1}}
.pi-card{position:relative;width:100%;max-width:440px;border-radius:22px 22px 0 0;overflow:hidden;
  box-shadow:var(--shadow);animation:piUp .26s cubic-bezier(.2,.8,.25,1);}
@keyframes piUp{from{transform:translateY(60px)}to{transform:translateY(0)}}
.pi-photo{height:148px;background-size:cover;background-position:center;
  background-image:linear-gradient(120deg,rgba(46,226,122,.25),rgba(76,194,255,.2));}
.pi-photo.none{height:54px;}
.pi-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(8,12,22,.6);color:#fff;font-size:15px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.pi-body{padding:16px 18px 20px;}
.pi-type{font-size:12px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;}
.pi-name{margin:2px 0 4px;font-family:var(--display);font-weight:700;font-size:23px;}
.pi-meta{font-size:13px;color:var(--muted);margin-bottom:10px;}
.pi-desc{font-size:14px;line-height:1.5;color:var(--text);margin:0 0 14px;}

/* ===== photo crop modal ===== */
#crop-modal{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,7,16,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#crop-modal.show{display:flex;}
.crop-card{width:100%;max-width:340px;border-radius:22px;padding:22px;text-align:center;box-shadow:var(--shadow);}
.crop-card h2{margin:0 0 16px;font-family:var(--display);font-weight:700;font-size:20px;}
.crop-frame{width:272px;height:272px;max-width:78vw;max-height:78vw;margin:0 auto;border-radius:50%;overflow:hidden;
  position:relative;background:#000;touch-action:none;cursor:grab;border:3px solid rgba(255,255,255,.25);}
.crop-frame:active{cursor:grabbing;}
.crop-frame img{position:absolute;top:0;left:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;will-change:transform;}
.crop-zoom{display:flex;align-items:center;gap:10px;margin:16px 0 4px;color:var(--muted);font-weight:800;}
.crop-zoom input[type=range]{flex:1;accent-color:var(--accent);}
.crop-hint{font-size:12px;color:var(--muted);margin-bottom:16px;}
.crop-actions{display:flex;gap:10px;}
.crop-actions .btn{flex:1;}

/* radio button on the map (pulses while playing) */
#btn-radio.playing{background:linear-gradient(135deg,var(--accent),var(--accent-d))!important;color:#042414;
  animation:radioPulse 1.6s ease-in-out infinite;}
@keyframes radioPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,226,122,.5);}50%{box-shadow:0 0 0 8px rgba(46,226,122,0);}}

/* ===== settings ===== */
.set-privacy{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;}
.set-pv{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  text-align:left;background:var(--glass);border:1px solid var(--glass-line);border-radius:15px;padding:13px 14px;cursor:pointer;color:var(--text);}
.set-pv .spi{grid-row:1 / 3;font-size:22px;text-align:center;}
.set-pv .spt{font-weight:800;font-size:15px;}
.set-pv .spd{font-size:12px;color:var(--muted);}
.set-pv.active{border-color:var(--accent);background:rgba(46,226,122,.10);}
.set-pv.active .spt{color:var(--accent);}

.radio-box{border-radius:16px;padding:14px;margin-bottom:8px;}
.radio-now{display:flex;align-items:center;gap:12px;}
.radio-play{width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--accent),var(--accent-d));
  color:#042414;font-size:18px;font-weight:900;cursor:pointer;flex-shrink:0;}
.radio-meta{flex:1;min-width:0;}
.radio-name{font-weight:800;}
.radio-sub{font-size:12px;color:var(--muted);}
.radio-vol{display:flex;align-items:center;gap:10px;margin:14px 0 6px;color:var(--muted);}
.radio-vol input[type=range]{flex:1;accent-color:var(--accent);}
.radio-stations{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.radio-st{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.22);border:1px solid var(--glass-line);
  border-radius:12px;padding:11px 13px;cursor:pointer;font-weight:700;}
.radio-st .rs-ic{color:var(--muted);}
.radio-st.sel{border-color:var(--accent);color:var(--accent);}
.radio-st.sel .rs-ic{color:var(--accent);}

/* tappable rows (open profile) */
.row.tappable{cursor:pointer;transition:transform .08s,border-color .15s;}
.row.tappable:active{transform:scale(.985);border-color:var(--accent);}
.row.req{gap:8px;}
.row.req .btn.tiny{flex-shrink:0;}

/* nav badge */
.nav-badge{display:none;position:absolute;top:-4px;right:-8px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;}
.nav-btn .ni{position:relative;}

/* ===== admin panel ===== */
.admin-row{display:flex;align-items:center;gap:12px;border-radius:14px;padding:13px 14px;margin-bottom:8px;}
.admin-row .ar-info{flex:1;}
.admin-row .sub{font-size:12px;color:var(--muted);}
.admin-poi{border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;margin-bottom:8px;}
.admin-poi input,.admin-poi select{background:rgba(0,0,0,.25);border:1px solid var(--glass-line);border-radius:12px;
  padding:12px;color:var(--text);font-size:15px;outline:none;}
.ar-hint{font-size:12px;color:var(--muted);}
.admin-prow{display:flex;align-items:center;gap:8px;}
.admin-prow .name{flex:1;min-width:0;}
.admin-prow .btn.tiny{flex-shrink:0;}

/* admin movement joystick */
#admin-joystick{position:absolute;left:24px;bottom:calc(110px + var(--safe-b));width:128px;height:128px;border-radius:50%;
  background:rgba(11,16,28,.55);border:1px solid var(--glass-line);backdrop-filter:blur(6px);z-index:820;display:none;touch-action:none;}
#admin-joystick.show{display:block;}
#admin-joy-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));box-shadow:0 4px 14px rgba(0,0,0,.5);}

/* ===== chat / DMs ===== */
#chat-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.14);background:var(--panel2);}
.chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px;-webkit-overflow-scrolling:touch;}
.chat-bubble{max-width:78%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.35;word-break:break-word;}
.chat-bubble.them{align-self:flex-start;background:var(--panel2);border-bottom-left-radius:5px;}
.chat-bubble.me{align-self:flex-end;background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#042414;border-bottom-right-radius:5px;}
.chat-input{display:flex;gap:8px;padding-top:10px;}
.chat-input input{flex:1;background:rgba(0,0,0,.25);border:1px solid var(--glass-line);border-radius:22px;padding:12px 16px;color:var(--text);font-size:15px;outline:none;}
.chat-input input:focus{border-color:var(--accent);}
.chat-input .btn{width:48px;flex-shrink:0;padding:0;border-radius:50%;}
.chat-empty{color:var(--muted);text-align:center;margin:auto;padding:30px;}
.chat-row .sub .unread{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#042414;font-size:11px;font-weight:800;line-height:18px;text-align:center;margin-left:6px;}

/* other-player profile actions */
.up-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.up-actions .btn{width:100%;}

.about-box{border-radius:16px;padding:18px;text-align:center;}
.about-box .logo{font-size:24px;}
.about-sub{color:var(--muted);font-size:13px;margin-top:8px;}

/* ===== game / map ===== */
#screen-game{padding:0;}
#map{position:absolute;inset:0;background:#0a0e1a;z-index:1;transition:transform .4s ease;}
/* 3D racing-game tilt: the world angles while the player marker (outside #map) stays upright */
/* ===== 3D racing-game driving view ===== */
/* Premium racing-game 3D GPS HUD: the dark navy world tilts forward and OVERFILLS the screen so
   it's the full-screen background (no floating card / no void). The tilted plane is scaled up
   past the viewport edges; the distance dissolves into the #atmos haze layer (below). */
/* The navy Leaflet map tilts forward and OVERFILLS the screen (scaled past the edges) so it's the
   full-screen background — no floating card. The distance dissolves into the #atmos haze. */
#map.tilt3d{transform:perspective(820px) rotateX(58deg) scale(2.8);transform-origin:50% 70%;
  background:#0a0e1c;}
/* navy behind everything so the full screen reads as one continuous world */
#app.view3d #screen-game{background:linear-gradient(to bottom,#141d36 0%,#0c1226 30%,#070a16 70%,#04060e 100%);}
/* soft navy ground + glow on the white road network so it reads like a nav-app drive view */
#map.tilt3d{transition:transform .14s linear;}   /* short = smooth bearing-follow, not laggy */
#map.tilt3d .leaflet-tile-pane{filter:brightness(.95) contrast(1.02) saturate(.85);transition:filter .4s ease;}
#map.tilt3d .leaflet-overlay-pane{filter:drop-shadow(0 0 3px rgba(230,240,255,.9)) drop-shadow(0 0 8px rgba(150,180,255,.4));}
/* atmospheric depth: a screen-space navy haze that fades the distant roads into the "horizon" so
   there's no hard map edge. Sits over the tilted map but under the HUD; bottom stays clear. */
#atmos{position:absolute;inset:0;z-index:2;pointer-events:none;display:none;}
/* Drive view now uses the Mapbox GL map (#map3d) which has its own sky+fog — hide Leaflet effects */
#app.view3d #fog,#app.view3d #map-vignette,#app.view3d #atmos{display:none;}
/* full-screen Mapbox GL drive map: above the Leaflet map, below the HUD/player */
#map3d{position:fixed;inset:0;z-index:600;display:none;background:#0a0e1c;}
/* hide the Mapbox wordmark/attribution on the game map (note: Mapbox ToS normally wants it shown) */
#map3d .mapboxgl-ctrl-logo,#map3d .mapboxgl-ctrl-attrib,#map3d .mapboxgl-ctrl-bottom-left,#map3d .mapboxgl-ctrl-bottom-right{display:none!important;}
#app.view3d #map3d{display:block;}
#map3d canvas{outline:none;}
/* subtle horizon glow at the top — soft gradient so the far distance fades nicely, not to black */
#app.view3d #map3d::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,rgba(72,96,140,.38) 0%,rgba(46,60,92,.16) 12%,rgba(46,60,92,0) 30%);}
/* Drive: the player arrow is a WORLD-ANCHORED Mapbox marker (.m3d-player) pinned to the real GPS
   spot — the old screen-fixed overlay marker is hidden entirely so it can never drift/confuse. */
#app.view3d #player-marker{display:none;}
.m3d-player{pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(120,235,160,.9)) drop-shadow(0 3px 6px rgba(0,0,0,.85));}
/* sponsored business pin: the megaphone sponsor icon in a pulsing gold glow ring */
/* with a real company logo the pin fills the whole circle (white backing so dark logos read) */
.m3d-sponsor.has-logo{background-size:cover!important;background-color:#fff!important;}
.m3d-sponsor{width:calc(52px*var(--pinscale,1));height:calc(52px*var(--pinscale,1));border-radius:50%;background-size:74%;background-repeat:no-repeat;background-position:center;background-color:#101623;
  border:3px solid #ffcf5a;cursor:pointer;display:grid;place-items:center;font-size:calc(23px*var(--pinscale,1));
  transform-origin:bottom center;transition:transform .3s cubic-bezier(.2,1.5,.4,1);
  animation:spPulse 2.2s ease-in-out infinite;}
.m3d-sponsor.near:not(.found){animation:poiHop 1.15s ease-in-out infinite,spPulse 2.2s ease-in-out infinite;}
/* visited sponsor: the dark pin circle flips to white so you can see who you've collected */
.m3d-sponsor.found{background-color:#f5f7fb;}
/* clickable link inside sponsor offer texts (reward card + info card) */
.sp-link{color:#4cc2ff;font-weight:800;text-decoration:underline;}
/* sponsor logo inside a Goals-row badge */
.sp-b-img{display:block;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;}
/* tappable Goals rows + card images that open the sponsor's website */
.dc-poi.tappable{cursor:pointer;}
.dc-poi.tappable:active{filter:brightness(1.35);}
.row.ach.tappable{cursor:pointer;}
#pi-photo{position:relative;}
#pi-photo.linked,#sp-logo.linked{cursor:pointer;}
.pi-visit{position:absolute;right:10px;bottom:10px;background:rgba(8,14,26,.82);padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:800;color:#4cc2ff;pointer-events:none;}

/* toasts must sit ABOVE the blocking gates — at z1000 the "not verified yet" / "email sent"
   toasts rendered behind the verification gate's blurred backdrop and looked like dead buttons */
#toast{z-index:4500!important;}
/* the tutorial must sit ABOVE the out-of-Erbil geofence card — a new player abroad got a
   permanently untappable tutorial underneath it and could never finish onboarding */
#tutorial{z-index:1360!important;}
/* the tutorial carousel is translated with translateX(-N%) — in RTL the flex row lays out
   backwards and sliding went off the end of the track (blank slides). Keep the rail LTR. */
[dir="rtl"] .tut-viewport,[dir="rtl"] .tut-track{direction:ltr;}
[dir="rtl"] .tut-slide{direction:rtl;}
/* RTL: these five set text-align:left explicitly and beat the generic rtl rule */
[dir="rtl"] .ach-cat,[dir="rtl"] .set-pv,[dir="rtl"] .shop-door,[dir="rtl"] .pf-chip,[dir="rtl"] .menu-card{text-align:right;}
/* RTL: latin-only fields (email, password, friend/squad codes, urls) must stay LTR or the
   caret and punctuation scramble as you type */
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="password"],[dir="rtl"] .add-friend input,
[dir="rtl"] #squad-join-code,[dir="rtl"] #admin-radio-url,[dir="rtl"] #admin-radio-name{direction:ltr;text-align:left;}
/* RTL: absolutely-positioned decorations that were pinned to the right edge */
[dir="rtl"] .pi-close{right:auto;left:12px;}
[dir="rtl"] .pi-visit{right:auto;left:10px;}
[dir="rtl"] .nav-badge{right:auto;left:-6px;}
[dir="rtl"] .ward-lock{right:auto;left:8px;}
[dir="rtl"] .aw-lock{right:auto;left:2px;}

/* NEVER set `position` on .m3d-player — Mapbox positions its markers via
   .mapboxgl-marker{position:absolute} and our rule (same specificity, loaded later) overrode it,
   which threw the arrow to the left edge of the screen. */
/* the arrow gets a warm glow at night so it reads as "lights on" */
#map3d.is-night .m3d-player svg{filter:drop-shadow(0 0 6px rgba(255,225,160,.75));}

/* ===== PORTRAIT GLUE (owner's call: "even if they tilt, nothing happens") =====
   Rotating the phone re-lays-out NOTHING — the page counter-rotates and stays glued to the
   device like a native portrait-locked app. Because the layout box never changes shape
   (width:100vh × height:100vw = exactly the portrait pixels), the 3D map never reallocates
   its backbuffer — which is the thing that crash-looped iOS Safari on rotate. Installed
   Androids are additionally OS-locked via manifest "orientation":"portrait" and never get
   here. Direction classes come from the tiny glue() detector in app.js; if some device
   renders a direction upside-down, swap the cw/ccw transforms below. */
/* geometry (width/height/top/left) is set in js from MEASURED pixels — ios vh/vw units lie
   when the toolbars collapse and squeezed the first version into a corner. css only rotates. */
html.glue-ccw body{transform:rotate(-90deg);transform-origin:left top;}
html.glue-cw body{transform:rotate(90deg);transform-origin:left top;}

/* ============== driver stat card (the profile flex slot) ============== */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px;}
.stat-tile{border-radius:16px;padding:11px 8px 9px;text-align:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05);}
.stat-tile.hero{grid-column:1/-1;padding:14px 10px 11px;
  background:radial-gradient(ellipse 75% 95% at 50% 100%,rgba(46,226,122,.13),transparent 72%),rgba(255,255,255,.045);}
.st-num{font-family:var(--display);font-weight:700;font-size:23px;line-height:1;letter-spacing:.5px;}
.stat-tile.hero .st-num{font-size:34px;}
.st-num i{font-style:normal;font-size:11px;font-weight:600;color:var(--muted);margin-left:4px;letter-spacing:0;}
.st-num.naughty{color:#ff6a5e;text-shadow:0 0 14px rgba(255,80,60,.35);}
.st-lbl{font-size:11px;color:var(--muted);margin-top:6px;font-weight:600;}
[dir="rtl"] .st-num i{margin-left:0;margin-right:4px;}
/* tap a stat → global/friends board for it */
.stat-tile.tappable{cursor:pointer;transition:transform .1s ease;}
.stat-tile.tappable:active{transform:scale(.96);}
#sb-modal{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(4,8,16,.6);backdrop-filter:blur(6px);}
#sb-modal.show{display:flex;}
.sb-card{width:100%;max-width:380px;border-radius:22px;padding:16px;box-shadow:var(--shadow);}
.sb-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;margin-bottom:10px;}
.sb-head .sb-x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:20px;padding:2px 8px;cursor:pointer;}
[dir="rtl"] .sb-head .sb-x{margin-left:0;margin-right:auto;}
.sb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;}
.sb-tab{border:0;border-radius:12px;padding:9px 0;font-weight:700;font-size:13px;
  background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;}
.sb-tab.sel{background:rgba(46,226,122,.16);color:#fff;}
.sb-list{max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:6px;}
.sb-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;
  background:rgba(255,255,255,.04);cursor:pointer;}
.sb-row .sb-rank{width:30px;text-align:center;font-weight:800;font-size:13px;color:var(--muted);flex:none;}
.sb-row .sb-name{flex:1;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-row .sb-val{font-family:var(--display);font-weight:700;font-size:14px;}
.sb-row.sb-me{background:rgba(46,226,122,.14);box-shadow:inset 0 0 0 1px rgba(46,226,122,.35);}
.sb-empty{text-align:center;color:var(--muted);padding:18px 0;font-size:13px;}

/* ============== LOCALIZATION ============== */
.lang-row{display:flex;gap:8px;}
.lang-row .lang-btn{flex:1;}
/* 🌐 language circle on the sign-in card */
.auth-card{position:relative;}
#auth-lang{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:18px;cursor:pointer;z-index:5;}
[dir="rtl"] #auth-lang{right:auto;left:10px;}
#auth-lang-pop{position:absolute;top:52px;right:10px;display:none;flex-direction:column;gap:4px;
  padding:8px;border-radius:14px;z-index:6;min-width:150px;}
[dir="rtl"] #auth-lang-pop{right:auto;left:10px;}
#auth-lang-pop.show{display:flex;}
#auth-lang-pop button{background:rgba(255,255,255,.05);border:none;border-radius:10px;padding:9px 12px;
  color:var(--text);font-weight:700;cursor:pointer;text-align:center;font-size:14px;}
#auth-lang-pop button:active{background:rgba(255,255,255,.14);}
/* RTL (Sorani / Arabic): flex layouts flip automatically with dir; these cover the text bits */
[dir="rtl"] .sheet-scroll,[dir="rtl"] .gate-card,[dir="rtl"] .list{text-align:right;}
[dir="rtl"] .section-label,[dir="rtl"] .ch-lbl{text-align:right;}
[dir="rtl"] .row .name{text-align:right;}
[dir="rtl"] #pi-desc,[dir="rtl"] .sp-offer,[dir="rtl"] .gate-text{direction:rtl;}

/* ============== GRAND PRIX (bi-weekly km race) ============== */
#gp-banner{margin:0 14px 10px;padding:12px 16px;border-radius:16px;text-align:center;
  border:1px solid rgba(255,211,77,.35);background:linear-gradient(120deg,rgba(255,200,60,.12),rgba(255,255,255,.03));}
.gp-count{font-weight:900;font-size:18px;letter-spacing:.5px;}
.gp-prize{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.4;}
/* the champion's crown — winner-only avatar decoration, deliberately louder than anything money can buy */
.dec-gpcrown{box-shadow:0 0 0 3px #ffd700,0 0 22px rgba(255,215,0,.95),0 0 44px rgba(255,190,0,.55)!important;
  animation:gpPulse 1.8s ease-in-out infinite;}
@keyframes gpPulse{0%,100%{box-shadow:0 0 0 3px #ffd700,0 0 22px rgba(255,215,0,.95),0 0 44px rgba(255,190,0,.55)}
  50%{box-shadow:0 0 0 4px #ffe45c,0 0 34px rgba(255,220,60,1),0 0 60px rgba(255,190,0,.8)}}
.dec-gpcrown .dec-orbit{animation-duration:6s;}
@keyframes spPulse{0%,100%{box-shadow:0 0 10px rgba(255,207,90,.5),0 3px 8px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 24px rgba(255,207,90,.95),0 3px 8px rgba(0,0,0,.6)}}
/* sponsor arrival reward card */
#sponsor-card{position:fixed;inset:0;z-index:1250;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,7,16,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#sponsor-card.show{display:flex;}
.sp-card{max-width:340px;width:100%;border-radius:22px;padding:24px;text-align:center;box-shadow:var(--shadow);
  animation:piUp .3s cubic-bezier(.2,.8,.25,1);}
.sp-logo{width:84px;height:84px;border-radius:50%;margin:0 auto 12px;background-size:cover;background-position:center;
  background-color:#101623;border:3px solid #ffcf5a;box-shadow:0 0 18px rgba(255,207,90,.7);display:grid;place-items:center;font-size:36px;}
.sp-title{font-size:17px;margin-bottom:6px;}
.sp-offer{font-family:var(--display);font-weight:700;font-size:22px;color:#ffcf5a;margin-bottom:6px;}
.sp-sticker{font-size:13px;color:var(--muted);margin-bottom:14px;}
.sp-codelbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.sp-code{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.12em;color:#fff;
  background:rgba(255,207,90,.12);border:1px dashed rgba(255,207,90,.5);border-radius:12px;padding:8px 10px;margin:6px 0 16px;}
/* other players in the 3D world: name above a coloured dot — gray, orange = friend, green = squad */
.m3d-rp-wrap{display:flex;flex-direction:column;align-items:center;cursor:pointer;}
.m3d-rp-name{display:flex;align-items:center;gap:4px;margin-bottom:2px;white-space:nowrap;max-width:130px;}
.m3d-rp-nm{font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000,0 0 5px #000;
  overflow:hidden;text-overflow:ellipsis;max-width:92px;}
.m3d-rp-lv{font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000,0 0 5px #000;flex:none;}
.m3d-rp{width:16px;height:16px;border-radius:50%;background:#9aa6b8;border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.55);cursor:pointer;}
.m3d-rp.rel-friend{background:#ff9d3d;}
.m3d-rp.rel-squad{background:#2ee27a;}
/* squad ping in the 3D world */
.m3d-ping{font-size:26px;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7));}
/* landmark pins in the 3D Mapbox world (minimal, matches the 2D dots) */
.m3d-poi{width:calc(30px*var(--pinscale,1));height:calc(30px*var(--pinscale,1));border-radius:50%;background:rgba(18,26,42,.85);border:2px solid rgba(255,255,255,.55);
  display:grid;place-items:center;font-size:calc(15px*var(--pinscale,1));background-size:cover;background-position:center;
  box-shadow:0 2px 7px rgba(0,0,0,.6);cursor:pointer;transition:transform .3s cubic-bezier(.2,1.5,.4,1);transform-origin:bottom center;}
/* DISCOVERED POI = green, and it STAYS green regardless of distance (persistent "found" state) */
.m3d-poi.found{background:rgba(20,60,42,.9);border-color:#2fe08a;box-shadow:0 2px 7px rgba(0,0,0,.6),0 0 12px rgba(47,224,138,.6);}
/* proximity: within ~300m an UNDISCOVERED pin does a happy little hop-hop loop.
   Once found it stops bouncing for good and sits still at its spot. */
.m3d-poi.near:not(.found){animation:poiHop 1.15s ease-in-out infinite;}
/* custom PNG POI — bare transparent art, no circle/frame (more immersive) */
.m3d-poi-img{width:calc(62px*var(--pinscale,1));height:calc(62px*var(--pinscale,1));background-size:contain;background-position:center;background-repeat:no-repeat;
  cursor:pointer;transform-origin:bottom center;transition:transform .3s cubic-bezier(.2,1.5,.4,1),filter .5s ease;
  filter:grayscale(1) brightness(.88) drop-shadow(0 4px 6px rgba(0,0,0,.55));}   /* undiscovered = gray */
.m3d-poi-img.found{filter:grayscale(0) drop-shadow(0 4px 6px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(47,224,138,.7));}   /* discovered = true colours */
.m3d-poi-img.near:not(.found){animation:poiHop 1.15s ease-in-out infinite;}
@keyframes poiHop{0%,100%{transform:scale(1.4) translateY(-4px)}50%{transform:scale(1.4) translateY(-16px)}}
/* bottom-nav Profile tab = the player's own picture (photo or chosen avatar) */
.nav-av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background-size:cover;background-position:center;font-size:14px;vertical-align:middle;
  border:1.5px solid rgba(255,255,255,.4);box-shadow:0 1px 3px rgba(0,0,0,.35);}
/* POIs standing on the citadel hill: icon rides ~a hill-height above its ground anchor */
.pin-lift{transform:translateY(calc(-76px * var(--pinscale,1)));}
/* discovery fireworks: a one-shot burst of coloured sparks shooting UP above the icon */
.fw-burst{position:absolute;inset:0;pointer-events:none;z-index:6;}
.fw-burst i{position:absolute;left:50%;top:12%;width:7px;height:7px;border-radius:50%;
  animation:fwShoot 1s ease-out forwards;box-shadow:0 0 8px currentColor;}
@keyframes fwShoot{from{transform:translate(-50%,-50%) scale(1);opacity:1}
  to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3);opacity:0}}
/* 3D = other players become simple coloured dots: general=gray, friend=orange, squad=green */
#app.view3d .player-mark .pm-name{display:none;}
#app.view3d .player-mark .pm-face{width:18px;height:18px;font-size:0;color:transparent;
  background-image:none!important;background:#9aa6b8!important;border:2px solid rgba(255,255,255,.85);}
#app.view3d .player-mark.rel-friend .pm-face{background:#ff9d3d!important;}
#app.view3d .player-mark.rel-squad .pm-face{background:#2ee27a!important;}
/* POI logos "pop out" in 3D: counter-rotate the marker against the map tilt so it stands
   upright facing the camera (billboard), anchored to its ground point, with a cast shadow
   under it for depth — like a racing game's immersive map banners instead of flat ground stickers */
#app.view3d .poi-mark{transform:translate(-50%,-100%) rotateX(-52deg) scale(1.14);
  transform-origin:50% 100%;transition:transform .35s ease;padding-bottom:18px;}
#app.view3d .poi-mark .pm-pin{filter:drop-shadow(0 6px 7px rgba(0,0,0,.5));}
/* thin pole the icon stands on, rising from the ground point */
#app.view3d .poi-mark::before{content:"";position:absolute;left:50%;bottom:0;width:3px;height:20px;
  transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,.15));
  box-shadow:0 0 4px rgba(0,0,0,.4);}
/* soft shadow puddle where the pole meets the ground */
#app.view3d .poi-mark::after{content:"";position:absolute;left:50%;bottom:-3px;width:22px;height:7px;
  transform:translateX(-50%);border-radius:50%;background:rgba(0,0,0,.34);filter:blur(2px);z-index:-1;}
#app.view3d .poi-mark .pm-lbl{background:rgba(10,18,28,.72);padding:1px 7px;border-radius:7px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
#btn-view{font-family:var(--display);font-weight:700;font-size:15px;}
#btn-view.on{background:linear-gradient(135deg,var(--accent),var(--accent-d))!important;color:#042414;}
#fog{position:absolute;inset:0;z-index:650;pointer-events:none;}
/* compass — shown only in Drive view; the dial rotates with the camera bearing (needle = north) */
#compass-n{display:none;position:absolute;left:14px;bottom:120px;z-index:805;width:42px;height:42px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle at 50% 35%,rgba(22,30,52,.9),rgba(6,10,20,.92));
  border:1px solid rgba(180,200,240,.28);box-shadow:0 2px 9px rgba(0,0,0,.55);}
#app.view3d #compass-n{display:block;}
#compass-n .cn-dial{position:absolute;inset:0;display:grid;place-items:center;transition:transform .15s linear;}
#compass-n .cn-needle{position:absolute;top:4px;left:50%;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid #ff5b6e;}
#compass-n span{font-family:var(--display);font-weight:700;font-size:12px;color:#eaf1ff;margin-top:9px;}
#app.sheet-open #compass-n{display:none;}
/* build-version badge — always visible so we can confirm which version is running */
#ver{position:absolute;left:8px;bottom:84px;z-index:805;pointer-events:none;
  font:700 10px/1 monospace;color:rgba(120,135,160,.8);background:rgba(8,12,20,.45);
  padding:3px 6px;border-radius:6px;letter-spacing:.05em;}
/* clear-route chip — hidden until a route is active (UI toggles .show) */
#clear-route{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:760;display:none;
  padding:9px 16px;border:1px solid rgba(35,201,255,.4);border-radius:999px;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:13px;color:#eaf6ff;
  background:rgba(10,22,38,.78);box-shadow:0 3px 12px rgba(0,0,0,.5);}
#clear-route.show{display:block;animation:piFade .18s ease;}
#app.sheet-open #clear-route{display:none;}
.leaflet-control-attribution{background:rgba(7,10,20,.6)!important;color:#6b769c!important;font-size:9px!important;}
.leaflet-control-attribution a{color:#8b97bd!important;}

#player-marker{position:absolute;left:50%;top:50%;z-index:700;pointer-events:none;
  transform:translate(-50%,-50%);}
/* facing-direction arrow — a soft rounded chevron hugging the avatar edge, rotates with heading */
#player-arrow{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%) rotate(0rad);
  transform-origin:center;pointer-events:none;transition:transform .15s ease;color:var(--accent);}
#player-arrow svg{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:22px;height:15px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));}
#player-icon{display:block;}
#player-icon .player-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-size:24px;background-size:cover;background-position:center;
  border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.6);overflow:hidden;}
/* soft glow ring under the player */
#player-marker::before{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;
  transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(46,226,122,.32),transparent 70%);}

/* map theme: moody dark tiles + a soft glow on the white road network + edge vignette */
/* make the light Positron map a little grayer (desaturate + dim) so white roads pop on it */
#map .leaflet-tile{filter:saturate(.5) contrast(1.02) brightness(.84);}
#map .leaflet-overlay-pane{filter:drop-shadow(0 0 2px rgba(255,255,255,.45));}
#map-vignette{position:absolute;inset:0;z-index:750;pointer-events:none;
  background:radial-gradient(125% 90% at 50% 44%,transparent 54%,rgba(2,4,10,.5) 100%);}

/* live GPS status overlay */
#geo-overlay{position:absolute;inset:0;z-index:820;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at 50% 42%,rgba(46,226,122,.12),rgba(5,8,16,.92) 62%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#geo-overlay.show{display:flex;}
#geo-overlay .geo-card{text-align:center;max-width:340px;}
#geo-overlay .geo-ic{font-size:46px;margin-bottom:6px;}
#geo-overlay .spinner{margin:0 auto 18px;}
#geo-overlay .geo-t{font-family:var(--display);font-weight:700;font-size:22px;margin-bottom:8px;}
#geo-overlay .geo-s{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:18px;}
#geo-overlay .btn{min-width:140px;}

/* map markers (Leaflet divIcons) */
.poi-divicon,.bot-divicon,.ping-divicon{background:transparent!important;border:0!important;}
.poi-mark{display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%);white-space:nowrap;}
.poi-mark .pm-pin{display:block;line-height:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));}
.poi-mark .pm-img{display:block;width:40px;height:40px;border-radius:50%;background-size:cover;background-position:center;
  border:3px solid #fff;box-shadow:0 3px 7px rgba(0,0,0,.6);}
.poi-mark .pm-lbl{margin-top:2px;font-size:11px;font-weight:800;color:#eaf6ff;
  text-shadow:0 1px 4px #000,0 0 6px #000;}
/* other players shown as their profile-picture circle */
.player-mark{transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;}
/* smaller so a crowded map (many players) stays readable */
.player-mark .pm-face{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  background-size:cover;background-position:center;border:2px solid var(--ring,#4cc2ff);box-shadow:0 2px 6px rgba(0,0,0,.6);overflow:hidden;}
.player-mark .pm-name{margin-top:2px;font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap;opacity:.85;}

.bot-mark{transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;}
.bot-mark .bd{width:14px;height:14px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5);}
.bot-mark.squad .bd{box-shadow:0 0 0 3px rgba(255,194,62,.8);}
.bot-mark .bn{margin-top:2px;font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap;}
.ping-mark{transform:translate(-50%,-100%);font-size:24px;position:relative;display:flex;flex-direction:column;align-items:center;}
.ping-mark .pulse{position:absolute;top:6px;width:16px;height:16px;border-radius:50%;background:var(--gold);
  animation:ping 1.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(.6);opacity:.9;}100%{transform:scale(3);opacity:0;}}
.ping-mark .plbl{font-size:11px;font-weight:800;color:var(--gold);text-shadow:0 1px 3px #000;}

/* HUD */
.hud{position:absolute;top:calc(12px + var(--safe-t));left:0;right:0;display:flex;align-items:center;gap:10px;padding:0 12px;z-index:800;pointer-events:none;}
.hud-back{pointer-events:auto;width:44px;height:44px;border-radius:14px;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;}
.hud-area{pointer-events:none;border-radius:12px;padding:9px 14px;font-weight:800;font-size:14px;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hud-readouts{margin-left:auto;display:flex;gap:8px;}
.hud-item{border-radius:13px;padding:6px 13px;text-align:center;min-width:60px;}
.hud-item span{font-size:20px;font-weight:900;}
.hud-item small{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.hud-item.lvl{display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:center;}
.hud-item.lvl span{font-size:14px;}
.xp-mini{width:46px;height:5px;background:rgba(0,0,0,.4);border-radius:4px;overflow:hidden;}
.xp-mini>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));}

/* social bar */
.social-bar{position:absolute;left:0;right:0;top:calc(68px + var(--safe-t));display:flex;justify-content:center;
  gap:8px;padding:0 12px;z-index:800;pointer-events:none;flex-wrap:wrap;}
.privacy{display:flex;border-radius:13px;padding:4px;pointer-events:auto;}
.pv-btn{border:0;background:transparent;color:#fff;width:38px;height:34px;border-radius:9px;font-size:15px;cursor:pointer;opacity:.5;}
.pv-btn.active{background:var(--accent);color:#042414;opacity:1;}
.social-act{pointer-events:auto;border:0;color:#fff;font-weight:800;border-radius:13px;padding:0 14px;height:42px;font-size:13px;cursor:pointer;}
.social-act.armed{background:var(--gold)!important;color:#3a2600;}
.social-act.disabled{opacity:.45;}
.leader-tag{font-size:11px;color:var(--gold);font-weight:800;margin-left:4px;}
.member .promote{padding:6px 10px;font-size:12px;}

/* right controls */
.right-controls{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:800;}
/* collapsed by default: the tool stack folds into the ☰ button; tap to expand with a spring */
.rc-items{display:flex;flex-direction:column;gap:10px;max-height:0;opacity:0;overflow:hidden;
  pointer-events:none;transition:max-height .38s cubic-bezier(.34,1.2,.4,1),opacity .25s ease;}
.right-controls.open .rc-items{max-height:320px;opacity:1;pointer-events:auto;}
.rc-items .rc-btn{transform:translateY(-10px) scale(.85);transition:transform .34s cubic-bezier(.34,1.4,.4,1);}
.right-controls.open .rc-items .rc-btn{transform:none;}
.right-controls.open .rc-items .rc-btn:nth-child(2){transition-delay:.04s;}
.right-controls.open .rc-items .rc-btn:nth-child(3){transition-delay:.08s;}
.right-controls.open .rc-items .rc-btn:nth-child(4){transition-delay:.12s;}
.right-controls.open .rc-items .rc-btn:nth-child(5){transition-delay:.16s;}
/* category filter panel */
#poi-filter{position:absolute;right:70px;top:50%;transform:translateY(-50%);z-index:810;display:none;
  flex-direction:column;gap:6px;padding:12px;border-radius:16px;width:180px;}
#poi-filter.show{display:flex;}
.pf-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}
.pf-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--glass-line);
  background:rgba(0,0,0,.25);color:var(--text);font-weight:700;font-size:13px;cursor:pointer;text-align:left;}
.pf-chip.off{opacity:.35;}
#app.sheet-open #poi-filter{display:none;}
#rc-toggle{transition:transform .3s cubic-bezier(.34,1.2,.4,1),background .3s;}
.right-controls.open #rc-toggle{transform:rotate(90deg);background:rgba(46,226,122,.2);}
.rc-btn{width:48px;height:48px;border-radius:14px;border:0;color:#fff;font-size:22px;font-weight:800;cursor:pointer;}
/* the Drive-world (City/Classic) toggle only makes sense in Drive view */
#btn-3dstyle{display:none;}
#app.view3d #btn-3dstyle{display:block;}
.rc-btn:active{transform:scale(.95);}

/* touch controls */
.touch-controls{position:absolute;left:0;right:0;bottom:calc(20px + var(--safe-b));display:flex;
  justify-content:space-between;padding:0 18px;z-index:800;pointer-events:none;}
.touch-controls .steer,.touch-controls .pedals{display:flex;gap:14px;}
.tbtn{pointer-events:auto;width:76px;height:76px;border-radius:22px;border:0;font-weight:900;font-size:15px;color:#fff;cursor:pointer;touch-action:none;}
.tbtn:active{filter:brightness(1.4);}
.tbtn.gas{background:linear-gradient(135deg,var(--accent),var(--accent-d))!important;color:#042414;}
.tbtn.brake{background:linear-gradient(135deg,#ff7a7a,#d83b3b)!important;}

/* overlays / sheets */
.overlay{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;
  background:rgba(4,7,16,.55);backdrop-filter:blur(3px);z-index:900;}
.overlay.show{display:flex;}
.sheet{border-radius:var(--radius) var(--radius) 0 0;padding:22px 18px calc(26px + var(--safe-b));width:100%;max-width:600px;box-shadow:var(--shadow);}
.sheet-head{display:flex;align-items:center;margin-bottom:14px;}
.sheet-head h2{margin:0;flex:1;}
.sheet-close{border:0;background:rgba(255,255,255,.08);color:var(--text);width:34px;height:34px;border-radius:50%;font-size:15px;cursor:pointer;}
.sheet .hint{color:var(--muted);font-size:13px;margin-bottom:14px;line-height:1.5;}
.sheet .squad-code{font-size:32px;font-weight:900;letter-spacing:6px;color:var(--gold);text-align:center;margin:6px 0;}
.sheet .squad-actions{display:flex;gap:10px;}
.sheet .squad-actions input{flex:1;background:rgba(0,0,0,.25);border:1px solid var(--glass-line);border-radius:13px;padding:13px;color:var(--text);font-size:16px;text-transform:uppercase;letter-spacing:2px;}
.sheet .member{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--glass-line);}
.sheet .member .dot{width:12px;height:12px;border-radius:50%;}

/* ===== profile screen ===== */
.profile-big{border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:16px;box-shadow:var(--shadow);}
.pb-avatar{width:92px;height:92px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:48px;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));border:3px solid rgba(255,255,255,.18);}
.pb-name{font-size:22px;font-weight:900;}
.pb-level{display:flex;align-items:center;gap:10px;margin:12px 0 6px;}
.pb-level .xp-bar{height:11px;}
.pb-xptext{font-size:12px;color:var(--muted);}
.section-label{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:6px 0 10px;}
.section-label .muted-note{text-transform:none;font-weight:600;opacity:.8;}
.upload-tile{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:16px;
  font-weight:800;cursor:pointer;margin-bottom:8px;}
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;overflow-y:auto;padding-bottom:10px;}
.av-tile{position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:18px;background:rgba(255,255,255,.04);
  cursor:pointer;display:grid;place-items:center;padding:6px;}
.av-tile .av-face{width:100%;height:100%;border-radius:14px;display:grid;place-items:center;font-size:30px;}
.av-tile.locked .av-face{filter:grayscale(1) brightness(.5);}
.av-tile.locked{cursor:default;}
.av-tile.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,226,122,.25);}
.av-lock{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;
  background:rgba(8,12,22,.55);border-radius:16px;}

/* ===== lists ===== */
.list-screen .list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch;}
.seg{display:flex;border-radius:13px;padding:4px;margin-bottom:14px;}
.seg-btn{flex:1;border:0;background:transparent;color:var(--muted);font-weight:800;padding:11px;border-radius:10px;cursor:pointer;}
.seg-btn.active{background:rgba(255,255,255,.10);color:var(--text);}
.row{display:flex;align-items:center;gap:12px;background:var(--glass);backdrop-filter:blur(10px);
  border:1px solid var(--glass-line);border-radius:15px;padding:12px 14px;}
.row .rank{width:24px;font-weight:900;color:var(--muted);text-align:center;}
.row .rank.gold{color:#ffd34d;}.row .rank.silver{color:#cdd6e6;}.row .rank.bronze{color:#e0975a;}
.row .name{font-weight:800;flex:1;min-width:0;}
.row .sub{font-size:11px;color:var(--muted);font-weight:600;}
.row .val{font-weight:900;color:var(--gold);text-align:right;}
.row.me{border-color:var(--accent);background:rgba(46,226,122,.10);}
.row-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:19px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.14);}

.ach{opacity:.5;}
.ach.unlocked{opacity:1;border-color:rgba(46,226,122,.4);}
.ach .badge{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:rgba(0,0,0,.25);}
.ach.unlocked .badge{background:linear-gradient(135deg,var(--accent),var(--accent-d));}
.ach .meta{flex:1;}
.ach .meta .name{font-weight:800;}
.ach .meta .desc{font-size:12px;color:var(--muted);}
.ach .tick{color:var(--accent);font-weight:900;font-size:20px;}
.ach-progress{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.ach-progress .bar{flex:1;height:10px;background:rgba(0,0,0,.3);border-radius:6px;overflow:hidden;}
.ach-progress .bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .4s;}
.ach-progress span{font-size:13px;color:var(--muted);font-weight:800;}

.friend-code-box{border-radius:15px;padding:14px;margin-bottom:14px;}
.fc-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.fc-row{display:flex;align-items:center;gap:10px;margin-top:6px;}
.fc-row code{font-size:26px;font-weight:900;letter-spacing:4px;color:var(--gold);flex:1;}
.add-friend{display:flex;gap:10px;margin-bottom:8px;}
.add-friend input{flex:1;text-transform:uppercase;letter-spacing:2px;}
.add-friend-msg{font-size:13px;min-height:18px;color:var(--muted);margin-bottom:10px;}
.empty{color:var(--muted);text-align:center;padding:40px 20px;font-size:14px;}

/* toast */
#toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%) translateY(20px);
  background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--glass-line);color:var(--text);
  padding:12px 18px;border-radius:30px;font-weight:800;font-size:14px;opacity:0;pointer-events:none;
  transition:.3s;z-index:1000;max-width:90%;text-align:center;box-shadow:var(--shadow);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast .ach-pop{color:var(--gold);}

/* ===== level-up celebration ===== */
#levelup{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,rgba(46,226,122,.16),rgba(4,7,16,.82) 60%);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow:hidden;}
#levelup.show{display:flex;animation:fade .25s ease;}
.lu-card{position:relative;text-align:center;animation:lu-pop .55s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes lu-pop{0%{transform:scale(.4);opacity:0;}60%{opacity:1;}100%{transform:scale(1);opacity:1;}}
.lu-rings{position:absolute;left:50%;top:54px;transform:translate(-50%,-50%);}
.lu-rings span{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;animation:lu-ring 1.8s ease-out infinite;}
.lu-rings span:nth-child(2){animation-delay:.5s;border-color:var(--gold);}
.lu-rings span:nth-child(3){animation-delay:1s;}
@keyframes lu-ring{0%{transform:scale(.4);opacity:.8;}100%{transform:scale(2.4);opacity:0;}}
.lu-badge{position:relative;width:108px;height:108px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(from 0deg,var(--accent),var(--gold),var(--accent));
  box-shadow:0 0 40px rgba(46,226,122,.6);animation:lu-spin 6s linear infinite;}
.lu-badge::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#0c1424;}
@keyframes lu-spin{to{transform:rotate(360deg);}}
.lu-num{position:relative;font-family:var(--display);font-weight:700;font-size:48px;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5);z-index:1;}
.lu-title{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:4px;
  background:linear-gradient(135deg,#5cffa6,var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lu-reward{color:var(--gold);font-weight:800;margin-top:8px;font-size:16px;}
.lu-unlock{color:var(--muted);font-size:14px;margin-top:6px;min-height:18px;}
.lu-tap{color:var(--muted);font-size:12px;margin-top:20px;opacity:.7;letter-spacing:1px;}
.lu-confetti{position:absolute;inset:0;pointer-events:none;}
.lu-confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.95;
  animation:lu-fall linear forwards;}
@keyframes lu-fall{0%{transform:translateY(-20px) rotate(0);opacity:1;}100%{transform:translateY(105vh) rotate(720deg);opacity:.9;}}

/* ===== typography pass (Chakra Petch = motorsport/dashboard display) ===== */
.logo{font-family:var(--display);font-weight:700;letter-spacing:3px;}
.logo span{background:linear-gradient(135deg,#5cffa6,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.topbar h1,.sheet-head h2,.hero-text .t{font-family:var(--display);font-weight:700;letter-spacing:.5px;}
.lvl-badge,.ph-coins,#toast{font-family:var(--display);}
/* HUD dashboard numerals */
.hud-item span,#hud-speed{font-family:var(--display);font-weight:700;letter-spacing:.5px;font-variant-numeric:tabular-nums;}
.hud-item.lvl span{font-size:15px;}
#hud-speed{font-size:22px;}
.squad-code,.fc-row code,.row .val,.row .rank{font-family:var(--display);font-variant-numeric:tabular-nums;}
.tbtn.gas,.tbtn.brake{font-family:var(--display);letter-spacing:1px;}

/* ===== subtle polish ===== */
.menu-card,.hero-card,.rc-btn,.hud-back,.social-act{transition:transform .1s ease,box-shadow .2s ease,background .2s ease;}
.menu-card{box-shadow:0 8px 28px rgba(0,0,0,.28);}
.menu-card:hover{box-shadow:0 12px 34px rgba(0,0,0,.4);}
.menu-card .ico{filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));}
.hero-card:hover .hero-go{transform:translateX(3px);}
.hero-go{transition:transform .2s ease;box-shadow:0 6px 18px rgba(46,226,122,.45);}
/* glossy sheen on the hero */
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);pointer-events:none;}
/* animated XP fills get a soft glow */
.xp-bar>div,.xp-mini>div,.ach-progress .bar>div{box-shadow:0 0 10px rgba(46,226,122,.5);}
/* nicer focus on inputs */
.auth-form input:focus,.add-friend input:focus,.sheet .squad-actions input:focus{box-shadow:0 0 0 3px rgba(46,226,122,.18);}
/* press feedback on tappable glass controls */
.rc-btn:active,.hud-back:active,.social-act:active,.pv-btn:active{filter:brightness(1.3);}

/* ===== design-system pass (v82): one rhythm across every panel =====
   radii: rows/inputs/segments 14px · sheets/cards 24px · headings 20px · labels 12px */
.topbar h1{font-size:20px;}
.sheet-head h2{font-size:20px;}
.sheet-screen .topbar{margin:10px 0 14px;}
.row,.seg,.admin-poi,.upload-tile{border-radius:14px;}
.row{padding:12px 14px;}
.row .sub{font-size:12px;}
.section-label{font-size:12px;letter-spacing:.9px;margin:18px 2px 10px;}
.sheet-scroll>.section-label:first-child,.list-screen .section-label:first-of-type{margin-top:4px;}
.seg{margin-bottom:12px;}
.list-screen .list{gap:9px;}
.profile-big{border-radius:24px;}
/* unread dot on the collapsed tools button */
#rc-toggle{position:relative;}
#rc-toggle.has-unread::after{content:"";position:absolute;top:7px;right:7px;width:9px;height:9px;
  border-radius:50%;background:#ff4d5e;box-shadow:0 0 6px rgba(255,77,94,.8);}

/* ============== GOALS HUB (categories / challenges / discover / stickers) ============== */
.hidden{display:none!important;}
.ach-cats{display:flex;flex-direction:column;gap:10px;}
.ach-cat{border-radius:17px;padding:15px 16px;display:flex;align-items:center;gap:14px;text-align:left;
  border:1px solid rgba(255,255,255,.08);cursor:pointer;color:var(--text);font-family:inherit;width:100%;}
.ach-cat:active{filter:brightness(1.25);}
.ac-i{font-size:30px;line-height:1;}
.ac-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.ac-n{font-weight:800;font-size:15px;}
.ac-s{font-size:12px;color:var(--muted);font-weight:700;}
.ac-go{font-size:20px;color:var(--muted);font-weight:800;}
.ach-cat.locked{opacity:.55;cursor:default;}
.ach-cat.locked:active{filter:none;}
#ach-back{margin-bottom:10px;}
.bar.slim{height:7px;background:rgba(0,0,0,.32);border-radius:5px;overflow:hidden;margin:6px 0;}
.bar.slim>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:5px;transition:width .35s;}
/* challenges */
.ch-lbl{font-size:11px;letter-spacing:.09em;color:var(--muted);font-weight:800;margin:16px 2px 8px;text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ch-bonus{font-size:10.5px;color:var(--gold);letter-spacing:.02em;text-transform:none;}
.ch-bonus.on::after{content:" \2713";}
.ch-row{display:flex;align-items:center;gap:12px;border-radius:15px;padding:11px 13px;margin-bottom:8px;}
.ch-row.done{opacity:.72;}
.ch-i{font-size:24px;line-height:1;}
.ch-m{flex:1;min-width:0;}
.ch-t{font-size:13.5px;font-weight:700;}
.ch-p{font-size:11px;color:var(--muted);}
.ch-r{font-weight:800;font-size:12.5px;color:var(--gold);white-space:nowrap;}
.ch-row.done .ch-r{color:var(--accent);font-size:18px;}
/* login streak strip */
.streak-strip{display:flex;gap:6px;border-radius:14px;padding:10px;justify-content:space-between;}
.ss-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:10px;padding:7px 2px;
  background:rgba(0,0,0,.22);}
.ss-day b{font-size:11px;color:var(--muted);}
.ss-day span{font-size:11px;font-weight:800;}
.ss-day.done{background:rgba(46,226,122,.16);outline:1px solid rgba(46,226,122,.35);}
.ss-day.done b{color:var(--accent);}
.ss-day.now{background:rgba(255,211,77,.15);outline:2px solid rgba(255,211,77,.6);}
.ss-day.now b{color:var(--gold);}
/* discover erbil */
.disc-cat{border-radius:15px;padding:12px 14px;margin-bottom:10px;}
.dc-head{display:flex;justify-content:space-between;font-weight:800;font-size:13.5px;}
.dc-count{color:var(--muted);font-size:12px;}
.dc-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.dc-poi{font-size:11.5px;padding:4px 9px;border-radius:9px;background:rgba(0,0,0,.25);color:var(--muted);}
.dc-poi.got{background:rgba(46,226,122,.14);color:var(--accent);font-weight:700;}
.dc-empty{font-size:12.5px;color:var(--muted);padding:10px 4px;}
/* sticker album */
.stk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.stk{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:13px;padding:10px 4px;
  background:rgba(0,0,0,.25);}
.stk-e{font-size:26px;line-height:1;filter:grayscale(1) brightness(.55);}
.stk-e i{display:block;width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;}
.stk-n{font-size:9.5px;color:var(--muted);text-align:center;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stk.got{background:rgba(46,226,122,.1);outline:1px solid rgba(46,226,122,.3);}
.stk.got .stk-e{filter:none;}
.stk.got .stk-n{color:var(--text);}
/* daily welcome popup */
#daily-pop{position:fixed;inset:0;z-index:1240;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,7,16,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#daily-pop.show{display:flex;}
.dp-card{max-width:360px;width:100%;border-radius:22px;padding:20px;animation:piUp .3s cubic-bezier(.2,.8,.25,1);}
.dp-title{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.14em;text-align:center;margin-bottom:12px;
  color:var(--gold);}
.dp-reward{text-align:center;font-size:13.5px;margin:10px 0 2px;}
.dp-lbl{font-size:11px;letter-spacing:.09em;color:var(--muted);font-weight:800;margin:12px 2px 6px;text-transform:uppercase;}
.dp-ch{margin-bottom:14px;}
.dp-row{display:flex;align-items:center;gap:9px;padding:7px 4px;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.05);}
.dp-row:last-child{border-bottom:0;}
.dp-t{flex:1;}
.dp-x{color:var(--gold);font-weight:800;font-size:11.5px;white-space:nowrap;}
/* arrow colour swatches (settings) */
.arrow-colors{border-radius:15px;padding:12px;display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px;align-items:center;}
.aw{position:relative;width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);
  display:grid;place-items:center;cursor:pointer;}
.aw-dot{width:22px;height:22px;border-radius:50%;display:block;box-shadow:0 0 8px rgba(0,0,0,.4);}
.aw.sel{border-color:var(--accent);box-shadow:0 0 10px rgba(46,226,122,.5);}
.aw.locked .aw-dot{filter:grayscale(.75) brightness(.55);}
.aw-lock{position:absolute;right:-3px;bottom:-3px;font-size:12px;}
.aw-hint{flex-basis:100%;font-size:11px;color:var(--muted);}

/* ============== STICKER SHOWCASE (3 best on the profile) ============== */
.sc-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.sc-slot{border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1px solid rgba(255,255,255,.08);cursor:pointer;color:var(--text);font-family:inherit;}
.sc-slot.empty .sc-face{opacity:.4;}
.sc-slot.sel{border-color:var(--accent);box-shadow:0 0 10px rgba(46,226,122,.35);}
.sc-face{font-size:26px;line-height:1;display:inline-grid;place-items:center;}
.sc-face i{display:inline-block;width:28px;height:28px;border-radius:50%;background-size:cover;background-position:center;}
.sc-slot .sc-name{font-size:10.5px;font-weight:700;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-strip{margin-top:8px;padding:9px;border-radius:14px;display:flex;gap:6px;overflow-x:auto;border:1px solid rgba(255,255,255,.08);}
.sc-pick{background:rgba(255,255,255,.06);border:none;border-radius:11px;font-size:22px;padding:6px 9px;cursor:pointer;flex:none;}
.sc-pick i{display:inline-block;width:24px;height:24px;border-radius:50%;background-size:cover;background-position:center;}
.sc-pick.sc-clear{font-size:15px;color:var(--muted);align-self:center;}
/* public profile: the 3 showcased stickers under the stats */
.pb-showcase{display:flex;justify-content:center;gap:14px;margin-top:12px;}
.sc-mini{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:76px;}
.sc-mini .sc-face{font-size:24px;}
.sc-mini .sc-name{font-size:10px;font-weight:700;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ============== SQUAD VOICE CHAT ============== */
.voice-box{border-radius:16px;padding:14px;margin-top:14px;border:1px solid rgba(255,255,255,.08);}
.vc-row{display:flex;align-items:center;gap:8px;font-size:14px;}
.vc-live{width:9px;height:9px;border-radius:50%;background:#2ee27a;box-shadow:0 0 8px rgba(46,226,122,.9);
  animation:vcPulse 1.6s ease-in-out infinite;}
@keyframes vcPulse{0%,100%{opacity:1}50%{opacity:.35}}
.vc-btns{display:flex;gap:8px;margin-top:10px;}
.vc-btns .btn{flex:1;}
/* floating pill on the map while in voice */
#voice-pill{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:820;
  display:none;align-items:center;gap:10px;padding:7px 12px;border-radius:999px;}
#voice-pill.show{display:flex;}
#voice-pill button{background:none;border:none;font-size:19px;cursor:pointer;padding:2px;line-height:1;}
#voice-pill #vp-mute.muted{filter:grayscale(1) brightness(1.4);}
#voice-pill #vp-count{font-size:13px;font-weight:800;color:var(--text);}


/* ============== GATES: legal / verify-email / safety ============== */
.legal-note{margin-top:14px;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5;}
.link-btn.inline{display:inline;padding:0;font-size:inherit;color:var(--accent);text-decoration:underline;background:none;border:none;cursor:pointer;font-family:inherit;}
.gate{position:fixed;inset:0;z-index:1350;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,7,16,.8);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.gate.show{display:flex;}
.gate-card{width:100%;max-width:420px;border-radius:22px;padding:22px;box-shadow:var(--shadow);
  animation:piUp .3s cubic-bezier(.2,.8,.25,1);}
.gate-emoji{font-size:44px;line-height:1;margin-bottom:10px;}
.gate-title{font-family:var(--display);font-size:20px;margin-bottom:8px;}
.gate-text{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:16px;}
.gate-btns{display:flex;gap:10px;margin-top:14px;}
.gate-btns .btn{flex:1;}
.gate-btns.col{flex-direction:column;}
.gate-btns.col .link-btn{align-self:center;}
.legal-tabs{display:flex;gap:8px;margin-bottom:12px;}
.legal-tabs .tab{flex:1;}
.legal-body{max-height:48vh;overflow-y:auto;font-size:12.5px;color:var(--muted);line-height:1.65;
  padding-right:6px;-webkit-overflow-scrolling:touch;}
.legal-body h3{color:var(--text);font-size:15px;margin-bottom:10px;}
.legal-body p{margin-bottom:9px;}
.legal-body b{color:var(--text);}


/* ============== BLOCK & REPORT ============== */
.up-mod-row{flex-basis:100%;display:flex;justify-content:center;gap:22px;margin-top:4px;}
.link-btn.danger{color:var(--text);opacity:.85;text-decoration:none;font-size:12.5px;background:none;border:none;cursor:pointer;font-family:inherit;font-weight:700;}
.report-reasons{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;}
.rp-chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:11px;
  padding:8px 11px;font-size:12.5px;color:var(--text);cursor:pointer;font-family:inherit;font-weight:600;}
.rp-chip.sel{background:rgba(255,107,122,.18);border-color:#ff6b7a;color:#ff9aa5;}
#report-note{width:100%;min-height:56px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.25);color:var(--text);padding:10px;font-family:inherit;font-size:13px;resize:none;}
.report-block-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:10px;cursor:pointer;}
.report-block-row input{accent-color:var(--accent);width:16px;height:16px;}
#report-send:disabled{opacity:.45;}
.report-row .sub-inline{font-size:11px;color:var(--muted);font-weight:600;}
.report-row .sub b{color:#ff9aa5;}


/* ============== CHAT REPLIES + ABOUT + DELETE ============== */
#chat-reply-bar{display:none;align-items:center;gap:8px;margin:0 12px 6px;padding:8px 12px;border-radius:12px;
  font-size:12.5px;color:var(--muted);border-left:3px solid var(--accent);}
#chat-reply-bar.show{display:flex;}
#chat-reply-bar span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#chat-reply-bar button{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;}
.chat-bubble{touch-action:pan-y;transition:transform .15s ease;}
.chat-quote{font-size:11.5px;color:var(--muted);border-left:2px solid var(--accent);padding:3px 8px;margin-bottom:5px;
  border-radius:6px;background:rgba(255,255,255,.05);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;}
.about-box.tappable{cursor:pointer;}
.about-box.tappable:active{filter:brightness(1.2);}
.danger-btn{color:#ff6b7a;border-color:rgba(255,107,122,.35);}
.btn.danger-solid{background:#e5484d;color:#fff;font-weight:800;border:none;}

/* ============== MARKETPLACE + COSMETICS ============== */
.shop-door{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,215,80,.35);
  background:linear-gradient(120deg,rgba(255,200,60,.14),rgba(255,255,255,.04));cursor:pointer;margin-bottom:14px;color:var(--text);text-align:left;}
.shop-door-ico{font-size:28px;}
.shop-door-txt{flex:1;display:flex;flex-direction:column;line-height:1.25;}
.shop-door-txt b{font-size:16px;}
.shop-door-txt small{color:var(--muted);font-size:12px;}
.shop-door-coins{font-weight:800;display:flex;align-items:center;gap:4px;}
.shop-balance{margin-left:auto;margin-right:8px;padding:6px 12px;border-radius:999px;font-weight:800;display:flex;align-items:center;gap:5px;font-size:14px;}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px;}
.shop-item{border-radius:18px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.shop-item .shop-meta b{font-size:13px;}
.shop-prev{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;box-shadow:0 0 10px rgba(0,0,0,.35);}
.shop-prev.aw-dot{border-radius:50%;width:36px;height:36px;margin:8px;}
.shop-owned{color:var(--accent);font-weight:800;font-size:13px;padding:6px 0;}
.shop-buy{min-width:86px;}
.shop-buy:disabled{opacity:.45;}
/* wardrobe (Edit Profile - equip owned cosmetics) */
.ward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ward-tile{position:relative;border:2px solid transparent;border-radius:16px;background:rgba(255,255,255,.04);padding:10px 6px;
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--text);}
.ward-tile.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,226,122,.25);}
.ward-tile.locked{opacity:.55;}
.ward-prev{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.08);}
.ward-name{font-size:11px;color:var(--muted);line-height:1.15;}
.ward-lock{position:absolute;top:6px;right:8px;font-size:12px;}
/* card styles - applied to .profile-big AND shop/wardrobe previews */
.cbg-ocean{background:linear-gradient(160deg,#0a3d62,#123f74,#0a2540)!important;}
.cbg-sunset{background:linear-gradient(160deg,#c1440e,#8e2f4f,#3d1e5f)!important;}
.cbg-forest{background:linear-gradient(160deg,#14532d,#1d7a45,#0b2e1a)!important;}
.cbg-royal{background:linear-gradient(160deg,#4c1d95,#6d28d9,#2e1065)!important;}
.cbg-gold{background:linear-gradient(160deg,#92600a,#d4a017,#6b4404)!important;}
.cbg-neon{background:linear-gradient(120deg,#0f0c29,#24243e)!important;position:relative;overflow:hidden;}
.cbg-neon::before{content:"";position:absolute;inset:-40%;background:conic-gradient(#ff2fd6,#2fe0ff,#7cff4d,#ff2fd6);
  filter:blur(46px);opacity:.4;animation:neonspin 6s linear infinite;pointer-events:none;}
@keyframes neonspin{to{transform:rotate(1turn);}}
.cbg-aurora{background:linear-gradient(200deg,#01121f,#03253c)!important;position:relative;overflow:hidden;}
.cbg-aurora::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 15%,rgba(64,224,160,.5) 35%,rgba(90,140,255,.45) 55%,rgba(190,80,255,.4) 70%,transparent 88%);
  filter:blur(18px);animation:aurora 7s ease-in-out infinite alternate;pointer-events:none;}
@keyframes aurora{from{transform:translateX(-22%) skewX(-8deg);}to{transform:translateX(22%) skewX(8deg);}}
.profile-big>*{position:relative;z-index:1;}   /* keep text above the glow layers */
/* avatar decorations */
.pb-avatar{position:relative;}
.dec-ring{box-shadow:0 0 0 3px #17ffe0,0 0 18px #17ffe0,0 0 34px rgba(23,255,224,.45)!important;}
.dec-gold{box-shadow:0 0 0 3px #ffd700,0 0 18px rgba(255,215,0,.8),0 0 34px rgba(255,190,0,.4)!important;}
.dec-orbit{position:absolute;inset:-14px;animation:orbit 5s linear infinite;pointer-events:none;}
.dec-orbit i{position:absolute;font-style:normal;font-size:20px;left:50%;top:50%;}
.dec-orbit i:nth-child(1){transform:translate(-50%,-50%) rotate(0deg) translateY(-58px);}
.dec-orbit i:nth-child(2){transform:translate(-50%,-50%) rotate(120deg) translateY(-58px);}
.dec-orbit i:nth-child(3){transform:translate(-50%,-50%) rotate(240deg) translateY(-58px);}
@keyframes orbit{to{transform:rotate(1turn);}}
.dec-crown .dec-orbit{animation-duration:8s;}
.ward-prev.dec-fire,.ward-prev.dec-stars,.ward-prev.dec-crown,
.shop-prev.dec-fire,.shop-prev.dec-stars,.shop-prev.dec-crown{box-shadow:none;}
/* rainbow arrow - swatch preview + smooth hue drift on the real arrow */
.rainbow-dot{background:conic-gradient(#ff004c,#ff9d00,#ffee00,#2fe36b,#2fb3ff,#8b5bff,#ff004c);animation:rbspin 3s linear infinite;}
@keyframes rbspin{to{filter:hue-rotate(1turn);}}
.m3d-player path{transition:fill 1.6s ease;}   /* the "slight animation" between rainbow steps */

/* coloured display names (marketplace) - applied on leaderboard, profile cards, in-game labels */
.nc-sky{color:#4cc2ff!important;}
.nc-lime{color:#7cff4d!important;}
.nc-pink{color:#ff5bd0!important;}
.nc-crimson{color:#ff4d5e!important;}
.nc-gold,.nc-rainbow{background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent!important;text-shadow:none!important;}
.nc-gold{background-image:linear-gradient(90deg,#f6d365,#ffb700,#fff3b0,#ffb700,#f6d365);animation:ncshimmer 2.6s linear infinite;}
.nc-rainbow{background-image:linear-gradient(90deg,#ff004c,#ff9d00,#ffee00,#2fe36b,#2fb3ff,#8b5bff,#ff004c);
  background-size:300% auto;animation:ncshimmer 3.5s linear infinite;}
@keyframes ncshimmer{to{background-position:-200% center;}}
.shop-prev-name{font-weight:900;font-size:24px;background-color:rgba(255,255,255,.07);}