/* 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)}