/* pod — Play or Die · MULTIPLAYER styles — RapidLoop pro brand (consistent with styles.css + www.rapidloop.ai) */
:root{
  --mp-bg:#070b1a; --mp-surf:#0f1730; --mp-surf2:#121b38; --mp-line:rgba(255,255,255,.09); --mp-line2:rgba(255,255,255,.14);
  --mp-cyan:#3de0ff; --mp-blue:#5ea0ff; --mp-purple:#9a6bff; --mp-muted:#9aa6c9; --mp-muted2:#6f7ba3; --mp-ink:#eef2ff;
  --mp-good:#39d98a; --mp-bad:#ff5e7e; --mp-gold:#ffd25e;
  --mp-grad:linear-gradient(135deg,#3de0ff 0%,#5ea0ff 45%,#9a6bff 100%);
  --mp-grad-soft:linear-gradient(135deg,rgba(61,224,255,.16),rgba(154,107,255,.16));
  --mp-panel:linear-gradient(180deg,#0f1730,#121b38);
  --mp-shadow:0 24px 60px -24px rgba(4,10,30,.85);
  --mp-display:"Space Grotesk","Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
body.mp{margin:0;background:radial-gradient(1100px 600px at 50% -12%,#101a38 0%,var(--mp-bg) 62%);
  color:var(--mp-ink);font-family:"Nunito",system-ui,sans-serif;min-height:100dvh;height:auto;
  overflow-y:auto;overscroll-behavior-y:contain;   /* ⚠️ override styles.css body{overflow:hidden} (SP fits-screen) so the lobby can SCROLL */
  padding-bottom:env(safe-area-inset-bottom)}
/* RapidLoop-style blurred accent orbs behind the lobby chrome */
/* accent orbs — the radial-gradient already fades softly, so NO filter:blur (an 80px blur on 520px fixed layers
   kept the GPU warm the whole time the player sat in the lobby — a top battery drain). */
body.mp::before,body.mp::after{content:"";position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0}
body.mp::before{background:radial-gradient(circle,rgba(27,105,255,.26),transparent 72%);top:-170px;right:-150px}
body.mp::after{background:radial-gradient(circle,rgba(123,59,255,.20),transparent 72%);bottom:-190px;left:-170px}
h1,h2{font-family:var(--mp-display);letter-spacing:-.02em;margin:0}
b{font-weight:800}

/* top bar */
.mp-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:rgba(7,11,26,.95);border-bottom:1px solid var(--mp-line)}   /* solid-ish; dropped live backdrop-blur (battery) */
.mp-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;margin-right:auto;min-width:0}
.mp-online{font-size:.6rem;letter-spacing:.22em;color:var(--mp-cyan);border:1px solid #24506b;
  padding:2px 7px;border-radius:999px;background:#0e2233}
.mp-byrl{font-family:var(--mp-display);font-size:.6rem;color:var(--mp-muted2);white-space:nowrap;font-weight:600}
.mp-byrl i{font-style:normal;color:var(--mp-cyan)}
.mp-byrl b{color:var(--mp-purple);font-weight:700}
@media (max-width:479px){.mp-byrl{display:none}}
.mp-back{background:rgba(255,255,255,.05);border:1px solid var(--mp-line2);color:#cfe0ff;width:34px;height:34px;
  border-radius:10px;font-size:1.1rem;cursor:pointer}
.mp-me{display:flex;align-items:center;gap:7px;background:var(--mp-surf);border:1px solid var(--mp-line2);
  border-radius:999px;padding:3px 11px 3px 4px}
.mp-me__pic{border-radius:50%;object-fit:cover;background:#0b1020;width:26px;height:26px}
.mp-me__name{font-weight:700;font-size:.82rem;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-me__out{background:none;border:none;color:var(--mp-muted);cursor:pointer;font-size:.95rem;padding:2px 4px}
.mp-me__pic[src=""],.mp-me__pic:not([src]){background:var(--mp-grad)}

.mp-main{max-width:640px;margin:0 auto;padding:16px 14px 28px;position:relative;z-index:1}
.mp-view{animation:mpIn .25s ease}
@keyframes mpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* cards / buttons — RapidLoop pattern: panel gradient, pill buttons, glow */
.mp-card{background:var(--mp-panel);border:1px solid var(--mp-line);border-radius:18px;padding:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;font-family:var(--mp-display);
  font-weight:700;border-radius:999px;padding:11px 18px;border:1px solid var(--mp-line2);
  background:rgba(255,255,255,.04);color:var(--mp-ink);cursor:pointer;font-size:.92rem;text-decoration:none;
  transition:transform .18s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.mp-btn:hover:not(:disabled){background:rgba(255,255,255,.09);transform:translateY(-2px)}
.mp-btn:active:not(:disabled){transform:translateY(0)}
.mp-btn--primary{background:var(--mp-grad);color:#05122a;border:none;box-shadow:0 12px 30px -10px rgba(94,160,255,.6)}
.mp-btn--primary:hover:not(:disabled){background:var(--mp-grad);box-shadow:0 18px 40px -10px rgba(94,160,255,.75)}
.mp-btn--ghost{background:transparent}
.mp-btn--big{width:100%;padding:14px;font-size:1.02rem}
.mp-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.mp-input{font-family:inherit;background:rgba(255,255,255,.04);border:1px solid var(--mp-line2);color:var(--mp-ink);
  border-radius:12px;padding:12px 14px;font-size:1rem;width:100%;transition:border-color .2s,background .2s}
.mp-input:focus{outline:none;border-color:var(--mp-cyan);background:rgba(255,255,255,.06)}
.mp-input::placeholder{color:var(--mp-muted2)}
.mp-lbl{display:block;font-family:var(--mp-display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mp-cyan);font-weight:600;margin:0 0 6px}
.mp-note{font-size:.78rem;color:var(--mp-muted);margin:8px 0 0}
.mp-hint{font-size:.76rem;color:var(--mp-muted);text-align:center;margin:14px 4px 0;line-height:1.5}

/* login */
.mp-login{text-align:center;max-width:390px;margin:5vh auto 0}
.mp-login__pod{border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #0b1020,0 0 22px rgba(94,160,255,.4)}
.mp-login h1{margin:10px 0 2px}
.mp-login__tag{color:#c7d2ee;margin:2px 0 4px}
.mp-login__memo{font-size:.76rem;color:var(--mp-muted);margin-bottom:16px}
/* (.mp-gbtn/.mp-or/.mp-guest__row removed — Google sign-in is gone; the guest flow uses npod.css .np-or/.np-guestrow) */
/* OTP login */
.mp-otp{display:flex;flex-direction:column;gap:10px;text-align:left;margin-top:6px}
.mp-otp .mp-lbl{text-align:center;text-transform:none;letter-spacing:.02em;font-size:.85rem;color:#c7d2ee;line-height:1.5;font-family:"Nunito",system-ui,sans-serif}
.mp-otp .mp-note{text-align:center}
.mp-input--code{text-align:center;font-size:1.8rem;letter-spacing:.5em;font-weight:800;padding-left:.5em}
.mp-otp__foot{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.mp-linkbtn{background:none;border:none;color:var(--mp-blue);font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer;padding:4px}
.mp-linkbtn:disabled{color:var(--mp-muted);cursor:default}
.mp-linkbtn:hover:not(:disabled){text-decoration:underline}

/* lobby browser */
.mp-rowhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mp-rowhead h2{font-size:1.35rem}
.mp-rowhead__actions{display:flex;gap:8px}
.mp-list{display:flex;flex-direction:column;gap:10px}
.mp-empty{color:var(--mp-muted);text-align:center;padding:26px;border:1px dashed var(--mp-line2);border-radius:14px}
.mp-lobby{display:flex;align-items:center;gap:12px;background:var(--mp-panel);border:1px solid var(--mp-line);
  border-radius:16px;padding:13px 15px;position:relative;overflow:hidden;
  transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease}
.mp-lobby::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--mp-grad);opacity:.55}
.mp-lobby:hover{transform:translateY(-2px);border-color:var(--mp-line2);box-shadow:var(--mp-shadow)}
.mp-lobby__main{flex:1;min-width:0}
.mp-lobby__name{font-weight:800;font-size:1.02rem;display:flex;align-items:center;gap:7px}
.mp-lobby__sub{font-size:.78rem;color:var(--mp-muted);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.mp-lobby__cd{color:var(--mp-gold);font-weight:800}
/* the roster of players in each lobby (names) — clamped to one tidy line */
.mp-lobby__roster{font-size:.72rem;color:#9fb3d6;font-weight:600;margin:3px 0 1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-lobby--live .mp-lobby__roster{color:#c7d6f0}
/* a running game stays listed (locked) — a live pulse; the 30s post-game window shows "waiting for next game" */
.mp-lobby__cd--live{color:#ff7d9b;display:inline-flex;align-items:center;gap:3px}
.mp-lobby__cd--live::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 8px #ff4d6d;animation:liveDot 1.1s ease-in-out infinite}
@keyframes liveDot{50%{opacity:.35;transform:scale(.8)}}
.mp-lobby__cd--ended{color:#7fe6c4;font-weight:800}
.mp-lobby--live{opacity:.9}
.mp-lobby--live::before{background:linear-gradient(#ff4d6d,#a0304a);opacity:.8}
.mp-lobby--ended::before{background:linear-gradient(#3de0b0,#1f9e75);opacity:.8}
.mp-pill{font-size:.68rem;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--mp-line2);color:#bcd}
.mp-badge{font-size:.72rem;padding:3px 9px;border-radius:999px;background:#0e2233;border:1px solid #24506b;color:var(--mp-cyan)}

/* create modal */
.mp-modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(4,8,20,.74);backdrop-filter:blur(5px)}
.mp-modal[hidden]{display:none}
.mp-modal__box{width:100%;max-width:400px}
.mp-levels{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:6px 0 4px}
.mp-lv{padding:10px;border:1px solid var(--mp-line);border-radius:12px;background:rgba(255,255,255,.04);cursor:pointer;text-align:left;
  color:var(--mp-ink);font-family:inherit;transition:border-color .2s,background .2s}
.mp-lv b{display:block}
.mp-lv small{color:var(--mp-muted);font-size:.72rem}
.mp-lv.is-on{border-color:var(--mp-blue);background:var(--mp-grad-soft);box-shadow:0 0 0 2px rgba(94,160,255,.3) inset}
.mp-lv--insane.is-on{border-color:var(--mp-bad);box-shadow:0 0 0 2px rgba(255,94,126,.35) inset}
.mp-field{margin:12px 0}

/* players */
.mp-players{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.mp-pl{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--mp-line);
  border-radius:12px;padding:9px 12px}
.mp-pl__pic{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--mp-grad)}
.mp-pl__name{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-pl__tag{font-size:.66rem;padding:2px 7px;border-radius:999px;background:#0e2233;border:1px solid #24506b;color:var(--mp-cyan)}
.mp-pl__dot{width:8px;height:8px;border-radius:50%;background:#39456b}
.mp-pl__dot.on{background:var(--mp-good);box-shadow:0 0 8px var(--mp-good)}
.mp-wait__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mp-wait__meta{display:flex;gap:6px;margin-top:6px}
.mp-waiting{color:var(--mp-muted);text-align:center;margin:0 0 10px}
.mp-wait__foot{margin-top:6px;display:flex;flex-direction:column;gap:8px}
#hostCtl{display:flex;flex-direction:column;gap:8px}

/* countdown */
.mp-count{text-align:center;margin:14px 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.mp-count__n{font-family:"Merriweather",serif;font-weight:900;font-size:2.6rem;
  background:var(--mp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.mp-count__lbl{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mp-muted)}
.mp-count--sm .mp-count__n{font-size:1.8rem}

/* ===== GAME ===== */
.mp-view--game{padding-top:6px}
.mp-score{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.mp-score::-webkit-scrollbar{display:none}
.mp-sc{display:flex;align-items:center;gap:7px;background:var(--mp-surf);border:1px solid var(--mp-line);
  border-radius:999px;padding:5px 12px 5px 5px;flex:0 0 auto;transition:transform .2s}
.mp-sc.lead{border-color:var(--mp-gold);box-shadow:0 0 0 1px var(--mp-gold) inset}
.mp-sc.me{background:#13233f}
.mp-sc__pic{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--mp-grad)}
/* per-player colour on the scoreboard disc — matches each rival's chat-tile glow */
.mp-sc.pc-0 .mp-sc__pic{background:linear-gradient(135deg,#43e0a0,#1f9e75)}
.mp-sc.pc-1 .mp-sc__pic{background:linear-gradient(135deg,#ff8a3d,#d45f1a)}
.mp-sc.pc-2 .mp-sc__pic{background:linear-gradient(135deg,#ff5db1,#c72d84)}
.mp-sc.pc-3 .mp-sc__pic{background:linear-gradient(135deg,#35d6d6,#199e9e)}
.mp-sc__name{font-weight:700;font-size:.82rem;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-sc__pts{font-weight:900;font-size:1rem;min-width:1.2em;text-align:center}
.mp-sc.bump{animation:scBump .4s ease}
@keyframes scBump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* (LEGACY MP GAME VIEW removed — .mp-round-, .mp-play, .mp-cur-, .mp-your__lbl, .mp-tiles-, .mp-tile,
   .mp-feed-, .mp-kbd, .mp-krow, .mp-key- — the game view reuses the single-player chat-duel layout from
   styles.css (.tiles/.key/.chat) since v6x; nothing in npod mp.html/mp.js builds these. This also deletes
   the local `@keyframes shake` that collided with styles.css's app-shake — SP shakeX/shake win everywhere now.) */
@keyframes pulseLow{50%{opacity:.5}}   /* kept: the connect loader's Milo (.mp-loader img) pulses with it */

/* game over ranking */
.mp-over{text-align:center}
.mp-over__crown{font-size:2.4rem}
.mp-rank{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.mp-rk{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid var(--mp-line);
  border-radius:12px;padding:10px 14px}
.mp-rk.first{border-color:var(--mp-gold);box-shadow:0 0 18px rgba(255,210,94,.22)}
.mp-rk__pos{font-family:"Merriweather",serif;font-weight:900;width:1.4em;color:var(--mp-muted)}
.mp-rk.first .mp-rk__pos{color:var(--mp-gold)}
.mp-rk__name{flex:1;text-align:left;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-rk__pts{font-weight:900}
.mp-over__foot{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* leaderboard */
.mp-tabs{display:flex;gap:8px;margin-bottom:12px}
.mp-tab{flex:1;padding:9px;border-radius:999px;border:1px solid var(--mp-line2);background:rgba(255,255,255,.04);
  color:#cdd8f5;font-family:var(--mp-display);font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.mp-tab.is-on{background:var(--mp-grad);color:#05122a;border-color:transparent}
.mp-brow{display:flex;align-items:center;gap:12px;background:var(--mp-panel);border:1px solid var(--mp-line);
  border-radius:12px;padding:9px 13px}
.mp-brow__pos{font-family:"Merriweather",serif;font-weight:900;width:1.6em;text-align:center;color:var(--mp-muted)}
.mp-brow:nth-child(1) .mp-brow__pos{color:var(--mp-gold)}
.mp-brow__name{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-brow__stat{font-weight:900}
.mp-brow__sub{font-size:.72rem;color:var(--mp-muted)}

/* toast */
.mp-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:#0d1730;border:1px solid var(--mp-line2);backdrop-filter:blur(8px);
  color:#eaf0ff;padding:10px 16px;border-radius:12px;z-index:50;font-weight:700;font-size:.88rem;
  box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:88vw;text-align:center}
.mp-toast[hidden]{display:none}
.mp-toast.bad{border-color:var(--mp-bad);color:#ffd0da}
.mp-toast.good{border-color:var(--mp-good);color:#c9ffe6}

.mp-loader{text-align:center;color:var(--mp-muted);margin-top:14vh;position:relative;z-index:1}
.mp-loader img{border-radius:50%;opacity:.9;animation:pulseLow 1.4s infinite}

/* ============ GAME VIEW — reuse single-player chat-duel layout (styles.css) ============ */
body.mp[data-view="game"]{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.mp[data-view="game"] .mp-main{flex:1;min-height:0;max-width:none;padding:0;display:flex;flex-direction:column}
#v-game{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:720px;margin:0 auto}
#v-game .chat{flex:1;min-height:0;position:relative}
#v-game .dock{flex:0 0 auto}
#v-game .hud{flex:0 0 auto}
/* the live multiplayer scoreboard strip (sits under the HUD) */
#mpScoreboard{padding:5px 14px 7px;border-bottom:1px solid var(--mp-line);flex:0 0 auto}
#mpScoreboard .mp-sc__pic{display:grid;place-items:center;font-size:.72rem;font-weight:900;color:#08122b;text-transform:uppercase}

/* top-bar music toggle — bright cyan SVG glyph so it's clearly visible on the dark bar */
.mp-music{background:rgba(61,224,255,.12);border:1px solid rgba(61,224,255,.4);color:#5fe6ff;width:34px;height:34px;
  border-radius:10px;cursor:pointer;line-height:1;display:grid;place-items:center}
.mp-music svg{display:block;filter:drop-shadow(0 0 4px rgba(61,224,255,.5))}
.mp-music:hover{border-color:rgba(61,224,255,.75);color:#a8f2ff}
.mp-music.is-off{opacity:.55;filter:grayscale(1);background:rgba(255,255,255,.04);border-color:var(--mp-line2);color:#8ea6c8}
.mp-music:active{transform:translateY(1px)}

/* ===== v61 parity polish ===== */
/* 🔥 INSANE badge in the game HUD (base .hud__mode is display:none in styles.css) */
#mpMode:not([hidden]){display:block;animation:insanePulse 1.8s ease-in-out infinite}
/* waiting-room level rules */
.mp-wait__rules{font-size:.74rem;color:var(--mp-muted);margin-top:6px}
/* game-over: reason + your-rank lines */
.mp-over__reason{color:#c7d2ee;margin:2px 0 6px;font-size:.92rem}
.mp-over__you{color:var(--mp-muted);font-size:.82rem;margin:2px 0 10px}
/* game-over rank rows: medal accents + initial disc + highlight me */
.mp-rk__pic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.72rem;
  color:#08122b;text-transform:uppercase;background:var(--mp-grad);flex:0 0 auto}
.mp-rk.me{box-shadow:0 0 0 1px var(--mp-blue) inset}
.mp-rk.first{border-color:var(--mp-gold);box-shadow:0 0 16px rgba(255,210,94,.22)}
.mp-rk.second{border-color:#c8d2e0}
.mp-rk.third{border-color:#cd8b5c}
.mp-rk__pos{min-width:1.6em;text-align:center}

/* clearer level badge + version tag */
.mp-badge--insane{background:#3a1220;border-color:#7a2a3a;color:#ff8fa3}
.mp-ver{text-align:center;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mp-muted);opacity:.7;margin-top:16px;font-weight:700}

/* ===== keyboard ALWAYS visible in MP → compact the rest so chat + meaning still show ===== */
#v-game .hud__def{display:-webkit-box !important}   /* always show the current word's meaning near the word */
#v-game .chat{flex:1 1 auto;min-height:0}
@media (max-height:760px){
  #v-game .hud{padding:8px 14px 2px}
  #v-game .hud__timer{width:84px;height:84px}
  #v-game .hud__value{font-size:1.5rem}
  #v-game .tile{height:44px}
  #v-game .key{height:40px}
  #v-game .kbd{gap:5px;margin-top:6px}
  #v-game .kbd__act{height:32px}
  #mpScoreboard{padding:3px 12px 5px}
}
@media (max-height:620px){
  #v-game .hud__timer{width:66px;height:66px}
  #v-game .hud__value{font-size:1.2rem}
  #v-game .hud__def{-webkit-line-clamp:1}
  #v-game .tile{height:38px}
  #v-game .key{height:34px;font-size:.9rem}
  #v-game .kbd__act{height:28px;font-size:.7rem}
}

/* new-word feedback: flash the live word + pulse the ring when the keyword changes (someone scored / round reset) */
#mpLiveWord.flash{ animation: mpWordFlash .6s ease; }
@keyframes mpWordFlash{ 0%{ color:#7fe8ff; text-shadow:0 0 14px rgba(61,224,255,.85);} 55%{ color:#7fe8ff; text-shadow:0 0 22px rgba(61,224,255,1);} 100%{ color:inherit; text-shadow:none; } }
#mpTimerWrap.ringpulse{ animation: mpRingPulse .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes mpRingPulse{ 0%{ transform:scale(1);} 50%{ transform:scale(1.09); filter:drop-shadow(0 0 9px rgba(61,224,255,.6)); } 100%{ transform:scale(1); filter:none; } }

/* vs-Pod mode badges */
.mp-badge--pod{ background:linear-gradient(135deg,#3a2a5e,#241838); border-color:rgba(160,120,255,.45); color:#cbb6ff }
.hud__mode--pod{ background:linear-gradient(135deg,#7a5cff,#a06bff); color:#fff; box-shadow:0 0 12px rgba(150,110,255,.5) }
/* lobby host line + team scoreboard + background-music toggle */
.mp-lobby__host{ font-size:.72rem; color:var(--muted,#8892b0); font-weight:600; margin-top:1px }
.mp-sc--team .mp-sc__name{ font-size:.8rem }
.mp-bg{ opacity:.5 } .mp-bg.is-on{ opacity:1; filter:drop-shadow(0 0 6px rgba(120,220,255,.6)) }
/* Milo's face inline in badges/messages (the pod's avatar everywhere) */
.mp-milo{ width:15px; height:15px; border-radius:50%; object-fit:cover; vertical-align:-3px; margin-right:1px }
.hud__mode--pod .mp-milo{ width:14px; height:14px; vertical-align:-2px }
.sys .mp-milo{ width:16px; height:16px; vertical-align:-3px }

/* the pod WORDMARK (P·Milo·D) inline wherever "pod" is a label — reads clean on any background */
.pod-wm{ font-size:.92em; vertical-align:-.04em; letter-spacing:-.01em }
.pod-wm .wm-o{ width:.66em; height:.66em; margin:0 .04em }
/* on the coloured mode pills, drop the cyan gradient-clip for a crisp solid mark */
.mp-badge .pod-wm, .mp-badge--pod .pod-wm, .hud__mode--pod .pod-wm{ -webkit-text-fill-color:#fff; color:#fff }
.mp-lv .pod-wm{ -webkit-text-fill-color:#fff; color:#fff }
/* the in-game "vs pod" HUD chip — a tidy pill (Milo is the "o", so no separate face) */
.hud__mode--pod{ display:inline-flex; align-items:center; gap:3px; padding:2px 9px; border-radius:999px }
/* vs-pod showcase card: Milo's face is the mode icon */
.rl-mode__milo{ width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 4px;
  box-shadow:0 0 0 2px rgba(160,120,255,.55), 0 0 13px rgba(150,110,255,.45) }
.rl-mode--pod{ border-color:rgba(160,120,255,.4) }
.rl-mode--pod::before{ background:linear-gradient(135deg,#7a5cff,#a06bff); opacity:.9 }
.rl-mode--pod b{ display:inline-flex; align-items:center; justify-content:center; gap:3px }
@media (max-width:440px){ .rl-mode__milo{ width:30px; height:30px } }

/* =================================================================================
   RapidLoop brand & marketing — lobby chrome ONLY (never rendered inside the game)
   ================================================================================= */
.rl-lock{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--mp-ink)}
.rl-lock svg{display:block;flex:0 0 auto}
.rl-lock__t{text-align:left}
.rl-lock__name{font-family:var(--mp-display);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;line-height:1.05;display:block}
.rl-lock__name span{color:var(--mp-cyan)}
.rl-lock__name b{color:var(--mp-purple);margin-left:2px}
.rl-lock__slogan{display:block;font-family:var(--mp-display);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--mp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;margin-top:2px}
/* (.rl-grad/.rl-eyebrow removed — only the deleted marketing block used them) */

/* login teaser band */
.rl-band{max-width:390px;margin:14px auto 0;text-align:center;background:var(--mp-panel);border:1px solid var(--mp-line);
  border-radius:18px;padding:16px;position:relative;overflow:hidden}
.rl-band::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--mp-grad)}
.rl-band .rl-lock{justify-content:center}
.rl-band p{font-size:.8rem;color:var(--mp-muted);line-height:1.55;margin:10px 0 12px}
.rl-band p b{color:var(--mp-ink)}

/* (the full .rl-mkt marketing block — .rl-cards/.rl-card, .rl-stats/.rl-stat, .rl-ctas, .rl-contact —
   was removed: npod's lobby browser dropped that section; only .rl-band (login teaser), .rl-modes and
   the .rl-sitefoot lockup remain in mp.html) */

/* site footer (lobby screens only — hidden while loading and in-game) */
.rl-sitefoot{max-width:640px;margin:26px auto 0;padding:22px 14px calc(26px + env(safe-area-inset-bottom));
  border-top:1px solid var(--mp-line);text-align:center;position:relative;z-index:1}
.rl-sitefoot .rl-lock{justify-content:center}
/* (.rl-sitefoot__tag/__links/__bar removed — the footer's link row is npod.css .np-footlinks now) */
body.mp[data-view="loading"] .rl-sitefoot,body.mp[data-view="game"] .rl-sitefoot{display:none}

/* ===== lobby-browser elevation: 3-modes showcase · player pips · rich empty state ===== */
.rl-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.rl-mode{background:var(--mp-panel);border:1px solid var(--mp-line);border-radius:14px;padding:12px 10px;text-align:center;
  position:relative;overflow:hidden;transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease}
.rl-mode::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--mp-grad);opacity:.75}
.rl-mode:hover{transform:translateY(-2px);border-color:var(--mp-line2);box-shadow:var(--mp-shadow)}
.rl-mode__ico{font-size:1.5rem;display:block;margin-bottom:3px;line-height:1}
.rl-mode b{font-family:var(--mp-display);font-size:.84rem;display:block}
.rl-mode small{color:var(--mp-muted);font-size:.66rem;line-height:1.3;display:block;margin-top:2px}
@media (max-width:440px){ .rl-mode small{display:none} .rl-mode{padding:10px 6px} .rl-mode__ico{font-size:1.35rem} }

.mp-lobby__pips{display:inline-flex;gap:3px;align-items:center}
.mp-lobby__pips i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.mp-lobby__pips i.on{background:var(--mp-grad);box-shadow:0 0 6px rgba(94,160,255,.5)}
.mp-lobby__join{flex:0 0 auto}

.mp-empty--rich{display:flex;flex-direction:column;align-items:center;gap:6px;border-style:solid;border-color:var(--mp-line);
  background:var(--mp-panel)}
.mp-empty--rich img{border-radius:50%;box-shadow:0 0 0 2px #0b1020,0 0 16px rgba(94,160,255,.35);margin-bottom:2px}
.mp-empty--rich b{color:var(--mp-ink);font-family:var(--mp-display);font-size:1.02rem}
.mp-empty--rich span{font-size:.8rem;max-width:22rem}

@media (prefers-reduced-motion:reduce){
  .mp-btn,.mp-lobby,.rl-mode{transition:none}
  .mp-btn:hover:not(:disabled),.mp-lobby:hover,.rl-mode:hover{transform:none}
}
