.profile-compact{display:inline-flex;align-items:center;gap:.7rem;padding:.55rem .9rem;border-radius:100px;margin-bottom:1.4rem;cursor:pointer;color:var(--text);font-weight:700;font-size:.9rem;width:max-content;max-width:100%}
.profile-compact img{width:28px;height:28px;border-radius:50%;border:2px solid var(--accent-warm);background:var(--surface)}
.profile-compact strong{color:var(--accent-warm);font-size:.78rem;margin-left:.2rem}
.form-error{min-height:1rem;color:var(--danger);font-size:.82rem;font-weight:600;margin-top:-.75rem}
.multiplayer-layout{display:flex}
.mp-side-panel{width:45%;display:flex;flex-direction:column;border-left:1px solid var(--border);min-width:0}
.opponent-card{margin:1rem 1rem 0;padding:1rem;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:.7rem;flex-shrink:0}
.opponent-top{display:flex;align-items:center;gap:.85rem;min-width:0}
.opponent-avatar{width:52px;height:52px;border-radius:50%;border:2px solid var(--accent-warm);background:var(--surface);flex-shrink:0}
.opponent-top h3{font-size:1rem;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.opponent-top p{color:var(--text-dim);font-size:.8rem;margin-top:.15rem}
.opponent-score-row{display:flex;align-items:flex-end;gap:.2rem;line-height:1}
.opponent-score-row span{font-size:3rem;font-weight:800;color:var(--accent-warm);letter-spacing:-1px}
.opponent-score-row small{font-size:1rem;color:var(--text-dim);padding-bottom:.35rem}
.mp-messages{padding-top:.8rem}
#btn-new-match.secondary-btn{width:auto;max-width:none;padding:.65rem 1.3rem;font-size:.9rem}
body.dark .profile-compact{color:var(--text)}
body.dark .opponent-top h3{color:var(--text)}
#screen-multiplayer .mp-static-score{display:none!important}

/* Compact mobile header fixes */
@media(max-width:700px){
  .top-bar{padding:.75rem .85rem;gap:.55rem;align-items:center;position:relative;z-index:20}
  .logo{font-size:1.18rem;letter-spacing:-.7px;white-space:nowrap;flex-shrink:0}
  .top-right{gap:.35rem;justify-content:flex-end;min-width:0;flex:1}
  .top-right .online-badge{order:5;padding:.35rem .5rem;font-size:0;border-radius:999px;gap:.25rem;max-width:42px;overflow:hidden}
  .top-right .online-badge #online-count{font-size:.72rem}
  .top-right .online-badge::after{content:''}
  .top-right .icon-btn{padding:.45rem .55rem;min-width:36px;min-height:36px;border-radius:10px;font-size:.78rem;line-height:1;white-space:nowrap}
  #btn-profile-top{font-size:0;position:relative;width:36px;padding:.45rem 0}
  #btn-profile-top::before{content:'👤';font-size:1rem}
  #btn-dark-toggle{font-size:0;position:relative;width:36px;padding:.45rem 0}
  #btn-dark-toggle::before{content:'☾';font-size:1rem}
  body.dark #btn-dark-toggle::before{content:'☀';font-size:.95rem}
  #btn-leaderboard{width:36px;padding:.45rem 0;font-size:.95rem}
  .hero{padding:2.2rem 1rem 1.6rem}
  .hero-title{font-size:clamp(2.25rem,12vw,3.5rem);letter-spacing:-1.2px}
  .hero-sub{font-size:.95rem;max-width:100%;margin-bottom:1.6rem}
  .profile-compact{padding:.45rem .65rem;font-size:.8rem;margin-bottom:.85rem;gap:.45rem;max-width:100%}
  .profile-compact img{width:24px;height:24px}
  .profile-compact strong{display:none}
  .footer,.how-it-works,.safety-section{margin-left:1rem;margin-right:1rem;padding-left:0;padding-right:0}
  .safety-section{padding:1.2rem;margin-top:1rem}
}

@media(max-width:900px){
  .multiplayer-layout{flex-direction:column}
  .mp-side-panel{width:100%;height:45%;border-left:none;border-top:1px solid var(--border)}
  .opponent-card{margin:.8rem .8rem 0;padding:.8rem;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem}
  .opponent-score-row span{font-size:2rem}
  .opponent-card .np-badge{justify-self:end}
  .mp-messages{min-height:140px}
  .chat-top-bar{padding:.55rem .75rem;gap:.4rem;min-height:54px}
  .logo-sm{font-size:1rem;letter-spacing:-.5px;white-space:nowrap}
  .connection-status{font-size:.72rem;gap:.3rem;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .chat-top-actions{gap:.35rem;min-width:0}
  .chat-top-actions .np-badge{padding:.32rem .45rem;font-size:.68rem;white-space:nowrap;max-width:62px;overflow:hidden;text-overflow:ellipsis}
  .chat-top-actions .icon-btn{padding:.42rem .5rem;min-width:34px;min-height:34px;border-radius:10px;font-size:.75rem;line-height:1}
  #btn-dark-toggle-chat,#btn-mp-dark{font-size:0;position:relative;width:34px;padding:.42rem 0}
  #btn-dark-toggle-chat::before,#btn-mp-dark::before{content:'☾';font-size:1rem}
  body.dark #btn-dark-toggle-chat::before,body.dark #btn-mp-dark::before{content:'☀';font-size:.95rem}
  #btn-settings-chat{width:34px;padding:.42rem 0;font-size:.9rem}
}
@media(max-width:600px){
  .profile-compact{margin-bottom:1rem}
  .opponent-card{grid-template-columns:1fr;align-items:start}
  .opponent-card .np-badge{justify-self:start}
  .mp-side-panel{height:50%}
}
@media(max-width:380px){
  .top-bar{padding:.65rem .65rem}
  .logo{font-size:1rem}
  .top-right{gap:.25rem}
  .top-right .icon-btn,#btn-profile-top,#btn-dark-toggle,#btn-leaderboard{width:32px;min-width:32px;min-height:32px;border-radius:9px}
  .top-right .online-badge{display:none}
  .chat-top-actions .np-badge{display:none}
}