/* Abidjan est Doux — sign-in screen, shop, leaderboards, challenges and multiplayer UI.
   Uses the game's own colour tokens (defined in index.html). */

/* ---------- sign-in ---------- */
#auth{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;overflow:auto;
  background:radial-gradient(120% 80% at 70% 0%,#1d4a5c 0%,var(--night) 55%),var(--night)}
#auth::before{content:"";position:fixed;inset:auto -10% -30% -10%;height:60%;background:radial-gradient(60% 60% at 50% 0%,#f28c2833,transparent 70%);pointer-events:none}
.au-card{position:relative;width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:18px;padding:24px 22px 18px;box-shadow:0 24px 60px #0009}
.au-brand b{display:block;font-family:var(--display);font-size:clamp(30px,8vw,40px);line-height:1;color:var(--orange-2);letter-spacing:.5px}
.au-brand small{display:block;margin-top:6px;color:var(--ink-2);font-size:13px}
.au-lang{position:absolute;top:14px;right:14px;display:flex;gap:4px}
.au-lang button{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700}
.au-lang button[aria-pressed="true"]{background:var(--orange);color:#1b0f02;border-color:var(--orange)}
#auth h2{margin:22px 0 6px;font-size:20px}
.au-sub{margin:0 0 14px;color:var(--ink-2);line-height:1.45}
.au-f{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-weight:600;font-size:13px;border:0;padding:0}
.au-f legend{padding:0;margin-bottom:6px}
.au-f input,.au-f select{background:#0b2531;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:12px;font:inherit;font-size:16px}
.au-f input:focus,.au-f select:focus{outline:2px solid var(--orange-2);outline-offset:1px}
.au-f small,.au-dob small{color:var(--ink-2);font-weight:400;font-size:12px;line-height:1.4}
.au-dob{display:grid;grid-template-columns:1fr 1.4fr 1.3fr;gap:8px}
.au-dob legend,.au-dob small{grid-column:1/-1}
#auCode{letter-spacing:.5em;text-align:center;font-size:24px;font-weight:800}
.au-check{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:13px;line-height:1.4}
.au-check input{margin-top:2px;width:18px;height:18px;accent-color:var(--orange)}
.au-go{width:100%;margin-top:6px}
.au-err{margin:8px 0 0;color:var(--danger);font-weight:600;font-size:13px}
.au-row{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.au-or{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--ink-2);font-size:12px}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--line)}
.au-legal{margin:16px 0 0;font-size:11.5px;color:var(--ink-2);line-height:1.5}
#auth a{color:var(--orange-2)}
.au-bar{height:8px;border-radius:99px;background:#0b2531;overflow:hidden;margin:14px 0}
.au-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));transition:width .2s}
.linkish{background:none;border:0;color:var(--orange-2);padding:6px 0;font-weight:600;font-size:13px}
.linkish:disabled{color:var(--ink-2)}

/* ---------- shop, leaderboards, achievements, challenges (inside the phone) ---------- */
.btn.danger{background:var(--danger);color:#fff}
.btn.ghost.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.shop-bal b{font-size:18px}
.chips.tabs{margin:8px 0 12px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.chips.scroll .chip{flex:0 0 auto}
.pass-card{background:linear-gradient(135deg,#3a0ca3,#ff5ea8);border-radius:16px;padding:16px;margin:4px 0 12px;color:#fff;box-shadow:0 8px 24px #0006}
.pass-card b{font-family:var(--display);font-size:24px}
.pass-card small{display:block;opacity:.9;margin-top:2px;font-weight:700}
.pass-card ul{margin:10px 0 0;padding-left:18px;line-height:1.6}
.pos{color:var(--green)}.neg{color:var(--danger)}
ol.lb{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:4px}
ol.lb li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;background:var(--panel-2);border-radius:10px;padding:8px 10px}
ol.lb li.me{outline:2px solid var(--orange)}
ol.lb .rk{font-weight:800;color:var(--gold);text-align:center}
ol.lb li:nth-child(1) .rk::before{content:"🥇"}ol.lb li:nth-child(2) .rk::before{content:"🥈"}ol.lb li:nth-child(3) .rk::before{content:"🥉"}
ol.lb li:nth-child(-n+3) .rk{font-size:0}ol.lb li:nth-child(-n+3) .rk::before{font-size:18px}
ol.lb .nm small{color:var(--ink-2)}
.pass-dot{color:var(--pink);font-style:normal}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:8px}
.ach{background:var(--panel-2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:3px;opacity:.5;filter:grayscale(1)}
.ach.on{opacity:1;filter:none;outline:1px solid var(--gold)}
.ach .ic{font-size:24px}.ach small{color:var(--ink-2);font-size:11.5px;line-height:1.35}.ach em{font-style:normal;color:var(--gold);font-weight:700;font-size:12px}

/* ---------- multiplayer ---------- */
#mpTags{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.mp-tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;will-change:transform;white-space:nowrap}
.mp-tag b{font-size:12px;font-weight:800;padding:2px 8px;border-radius:99px;background:#0c2230cc;color:#fff;border:1px solid #ffffff33}
.mp-tag.pass b::after{content:" ★";color:var(--pink)}
.mp-tag.nt-gold b{background:linear-gradient(180deg,#ffe08a,#c9a227);color:#3b2a00;border-color:#fff3}
.mp-tag.nt-wax b{background:repeating-linear-gradient(45deg,#e63946 0 6px,#f4d35e 6px 12px,#2a9d8f 12px 18px);color:#fff;text-shadow:0 1px 2px #000}
.mp-tag.nt-neon b{background:#120018;color:#ff8fd0;border-color:#ff5ea8;box-shadow:0 0 10px #ff5ea8aa}
.mp-tag.nt-pass b{background:linear-gradient(135deg,#3a0ca3,#ff5ea8)}
.mp-say{max-width:220px;white-space:normal;text-align:center;background:#fff;color:#111;font-size:12px;font-weight:600;padding:5px 9px;border-radius:12px 12px 12px 3px;box-shadow:0 4px 12px #0006}
#mpUI{position:absolute;left:12px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:7}
.mp-btn{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:8px 12px;font-weight:800;box-shadow:0 6px 18px #0007}
.mp-btn.ping{animation:mpPing 1.2s infinite;border-color:var(--orange)}
@keyframes mpPing{50%{box-shadow:0 0 0 6px #f28c2855}}
#mpChat{position:absolute;left:0;bottom:46px;width:min(340px,calc(100vw - 24px));max-height:min(60vh,460px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px #000a;overflow:hidden}
#mpChat header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
#mpChat header small{color:var(--ink-2);flex:1}
.mp-x{background:none;border:0;font-size:20px;line-height:1}
#mpLog{list-style:none;margin:0;padding:8px 12px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:6px;font-size:13px;min-height:90px}
#mpLog li.me b{color:var(--orange-2)}
#mpLog b{color:var(--gold)}
.mp-emotes{display:flex;gap:4px;overflow-x:auto;padding:6px 10px;border-top:1px solid var(--line)}
.mp-emotes .chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;font-size:16px;padding:4px 8px}
.mp-emotes .chip small{font-size:10px}
#mpForm{display:flex;gap:6px;padding:8px 10px}
#mpForm input{flex:1;min-width:0;background:#0b2531;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:9px;font:inherit;font-size:16px}
#mpChat .mini{margin:0;padding:0 12px 10px}
body.in-intro #mpUI,body.in-intro #mpTags,body.in-studio #mpUI,body.in-map #mpUI,body.in-selfie #mpUI,body.in-wheel #mpUI{display:none!important}

#chJ{margin:10px 0}
#chJ input{flex:1;min-width:0;background:#0b2531;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px;font:inherit;font-size:16px;letter-spacing:.15em}
#chJ input::placeholder{letter-spacing:0;color:var(--ink-2)}

/* ---------- players' own music apps (js/music.js) ----------
   Open: a card near the top of the screen. Minimised: a round button the player can drag
   anywhere (it starts just left of the wallet). The music keeps playing either way. */
.sp-dock{--sp-c:#1db954;--sp-fg:#000;position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);z-index:60;
  width:min(380px,calc(100vw - 24px));background:#121212;color:#fff;border-radius:14px;box-shadow:0 10px 30px #0008;overflow:hidden;border:1px solid color-mix(in srgb,var(--sp-c) 45%,transparent)}
.sp-dock[hidden]{display:none}
.sp-bar{display:flex;align-items:center;gap:6px;padding:6px 8px}
.sp-logo{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sp-c);color:var(--sp-fg);font-weight:700;flex:none}
.sp-title{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-btn{background:#ffffff14;color:#fff;border:0;border-radius:8px;padding:6px 9px;font:inherit;font-size:12px;min-height:32px;min-width:32px;cursor:pointer;flex:none}
.sp-btn[aria-pressed="true"]{background:color-mix(in srgb,var(--sp-c) 30%,transparent)}
.sp-note{margin:0;padding:6px 10px 8px;font-size:12px;line-height:1.4;color:#e8e8e8;background:#ffffff0d}
.sp-note a{color:var(--sp-c);font-weight:700;white-space:nowrap}
.sp-frame iframe{display:block;width:100%;border:0}
.sp-dock.min{transform:none;width:auto;border-radius:50%;padding:0;border:2px solid var(--sp-c);touch-action:none;user-select:none;-webkit-user-select:none}
.sp-dock.min .sp-bar{padding:5px;cursor:grab}
.sp-dock.min .sp-title,.sp-dock.min .sp-btn,.sp-dock.min .sp-note{display:none}
.sp-dock.min .sp-logo{width:34px;height:34px;animation:spPulse 2.4s ease-in-out infinite}
.sp-dock.min .sp-frame{height:0;width:0;overflow:hidden}
@keyframes spPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--sp-c) 25%,transparent)}}
@media (prefers-reduced-motion:reduce){.sp-dock.min .sp-logo{animation:none}}
.mu-head{display:flex;gap:10px;align-items:center;font-size:13px;line-height:1.4;margin:0 0 8px}
.mu-full{margin:0 0 10px;padding:9px 11px;border-radius:10px;background:#ffffff10;font-size:12.5px;line-height:1.45}
.mu-full a{color:inherit;text-decoration:underline;white-space:nowrap}

/* ---------- sponsored artist song now playing in the club (js/net/clubpromo.js) ---------- */
.promo-now{position:fixed;left:50%;top:calc(132px + env(safe-area-inset-top));transform:translateX(-50%);z-index:55;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
  min-width:min(300px,calc(100vw - 24px));max-width:calc(100vw - 24px);padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,#2a0c3a,#0c2230);color:#fff;border:1px solid #ff5ea866;box-shadow:0 10px 30px #0008}
.promo-now[hidden]{display:none}
.promo-now .pn-tag{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#ff9fcf}
.promo-now b{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promo-now small{grid-column:1;color:#cfe0e6;font-size:12.5px}
.promo-now .btn{grid-column:2;grid-row:2/4;align-self:center}

/* ---------- map: an emoji per kind of place (js/v10.js) ---------- */
.pin i.emo{width:24px;height:24px;margin-left:-12px;margin-top:-12px;display:grid;place-items:center;font-size:13px;font-style:normal;line-height:1;border-width:2px}
.pin.sel i.emo,.pin.target i.emo{width:32px;height:32px;margin-left:-16px;margin-top:-16px;font-size:17px}
.dot.emo{display:inline-grid;place-items:center;width:22px;height:22px;font-size:12px;line-height:1;border-radius:50%;flex:none}
.chip .dot.emo{width:20px;height:20px;font-size:11px}

/* ---------- quick buttons: mute and hide-the-screen (js/v10.js) ---------- */
#qbar{position:fixed;right:12px;top:200px;z-index:40;display:flex;gap:6px}
#qbar[hidden]{display:none}
#qbar .qb{width:40px;height:40px;border-radius:50%;border:1px solid var(--line,#2b5668);background:#0c2230d9;color:#fff;font-size:18px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px #0008;padding:0}
#qbar .qb[aria-pressed="true"]{background:#f28c28;color:#1b0f02;border-color:#f28c28}
body.hud-off #hudL,body.hud-off #hudR,body.hud-off #ctx,body.hud-off #hint,body.hud-off #dock,body.hud-off #mpUI,body.hud-off #mpTags,
body.hud-off #bubbles,body.hud-off #tipCard,body.hud-off #navArrow,body.hud-off #promoNow,body.hud-off #promoTicker,body.hud-off .sp-dock.min,body.hud-off #banner{display:none!important}
/* ---------- "playing now" notice for players elsewhere (js/net/clubpromo.js) ---------- */
.promo-ticker{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:8px;
  max-width:calc(100vw - 24px);padding:8px 8px 8px 14px;border-radius:99px;background:#2a0c3af2;color:#fff;border:1px solid #ff5ea866;box-shadow:0 8px 24px #0008;font-size:13px}
.promo-ticker[hidden]{display:none}
.promo-ticker span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promo-ticker .x{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;padding:0 6px}
/* V12: nothing floats over the map (top bar, promos, music dock, tour, tips, ride arrows) */
body.in-map #qbar,body.in-map .promo-ticker,body.in-map .promo-now,body.in-map .sp-dock,body.in-map #tour,body.in-map #dip,body.in-map #warnCard,body.in-map #rideBar,body.in-map #rideDir,body.in-map #navArrow,body.in-map #mpTags,body.in-map #decor,body.in-map #selfieUI,body.in-map #chatP,body.in-map #micMeter,body.in-map #soundBtn,body.in-map #exitBtn,body.in-map #dirTxt{display:none!important}
body.in-map{overflow:hidden;overscroll-behavior:none}
body.in-map .mv-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}