/* Una misma imagen en tu nivel y en los perfiles de otros jugadores. */
.pf-lv .pf-level-bg {
  background:linear-gradient(90deg,rgba(9,18,24,.88),rgba(9,18,24,.25)),
    linear-gradient(0deg,rgba(9,18,24,.88),transparent 65%),
    url('../icons/level-pitch-v98.jpg') center 62% / cover no-repeat;
}
.pf-lv-cuerpo { text-shadow:0 1px 4px rgba(0,0,0,.35); }

/* Pantallas de conversación: cabecera, historial desplazable y compositor fijo. */
.modal-overlay.chat-screen {
  padding:0; align-items:stretch; background:var(--court); backdrop-filter:none;
  z-index:180; height:100vh; height:100dvh; overflow:hidden;
}
.chat-screen .modal.chat-screen-panel {
  display:flex; flex-direction:column; width:100%; max-width:100%; min-height:0;
  height:100%; max-height:none; margin:0; padding:0; border:0;
  border-radius:0 !important; background:var(--court); box-shadow:none; overflow:hidden;
}
.chat-screen-head {
  display:flex; align-items:center; gap:14px; flex:none; border-bottom:1px solid var(--line);
  padding:calc(14px + env(safe-area-inset-top,0px)) max(18px,calc((100vw - 760px)/2));
  background:var(--paper);
}
.chat-screen .chat-back {
  position:static; display:grid; place-items:center; flex:none; width:44px; height:44px;
  margin:0; border:1px solid var(--line); border-radius:50%; color:var(--ink);
  background:transparent; font-size:16px; cursor:pointer;
}
.chat-heading { min-width:0; flex:1; }
.chat-heading small { display:block; color:var(--stone); font-size:10px; letter-spacing:.1em; margin-bottom:4px; }
.chat-heading h3 { color:var(--ink); font-family:var(--font-body); font-size:18px; line-height:1.35; margin:0; overflow-wrap:anywhere; }
.chat-screen-messages, .chat-screen .community-chat-messages {
  flex:1; min-height:0; max-height:none; margin:0; display:flex; flex-direction:column;
  gap:12px; overflow-y:auto; overscroll-behavior:contain;
  padding:24px max(18px,calc((100vw - 760px)/2)); background:var(--court) !important;
}
.chat-screen .chat-bubble { max-width:82%; width:fit-content; flex-shrink:0; padding:12px 16px; line-height:1.55; font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-screen .chat-bubble-me { align-self:flex-end; border-radius:16px 16px 4px 16px; }
.chat-screen .chat-bubble-other { align-self:flex-start; border-radius:16px 16px 16px 4px; }
.chat-screen .chat-author { font-size:11px; margin-bottom:5px; }
.chat-screen .chat-composer {
  display:flex; flex:none; gap:10px; align-items:center; border-top:1px solid var(--line);
  padding:14px max(18px,calc((100vw - 760px)/2)) calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--paper) !important;
}
.chat-screen .chat-composer input {
  flex:1; width:0; min-width:0; min-height:48px; padding:12px 16px; border:1px solid var(--line);
  border-radius:24px; background:var(--court); color:var(--ink); font:inherit; font-size:16px;
}
.chat-screen .chat-composer button { flex:none; display:grid; place-items:center; padding:0; min-width:48px; width:48px; height:48px; border-radius:50%; }
.chat-screen :is(.chat-back,input,button):focus-visible { outline:2px solid var(--cone); outline-offset:3px; }
.chat-screen #community-chat-status, .chat-screen .chat-match-summary {
  flex:none; max-height:26dvh; overflow-y:auto; margin:0; border-bottom:1px solid var(--line);
  padding:10px max(18px,calc((100vw - 760px)/2)); background:var(--paper);
}
.chat-screen #community-chat-status .btn { font-size:12px; min-height:36px; padding:8px 12px; }
.chat-screen #community-chat-status small { font-size:11px; }
@media(max-width:520px) {
  .chat-screen-head { gap:12px; }
  .chat-heading h3 { font-size:17px; }
  .chat-screen .chat-bubble { max-width:88%; }
  .pf-lv .pf-level-bg { background-position:center,center,65% 62%; }
}