/* Lobby (elegir nombre y sala) y chat. Mismo lenguaje visual que style.css: letra de píxeles y acento verde. */

/* ---------- lobby ---------- */
#lobby { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(560px, 100%); }
#lobby[hidden] { display: none; }
#lb-namebox { display: flex; align-items: center; gap: 10px; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
#lb-name { width: 12em; background: rgba(0,0,0,.55); color: #fff; border: 3px solid rgba(255,255,255,.7); padding: 8px 10px; font: 600 1rem var(--font-body); text-align: center; }
#lb-name:focus { outline: 3px solid var(--accent2); outline-offset: 2px; }
#lb-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; width: 100%; }
.lb-room { display: flex; flex-direction: column; gap: 6px; align-items: center; background: var(--accent); color: #0b1a0c; border: 0; padding: 12px 14px; cursor: pointer; box-shadow: 4px 4px 0 #000; font-family: var(--font-pixel); }
.lb-room:hover:not(:disabled) { filter: brightness(1.08); }
.lb-room:disabled { background: #6c7a73; cursor: not-allowed; }
.lb-room b { font-size: 1.05rem; text-transform: uppercase; }
.lb-room span { font: 500 .78rem/1.35 var(--font-body); }
.lb-room i { font-style: normal; font-size: .7rem; opacity: .8; }
#lb-solo, #reload { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); font-family: var(--font-pixel); font-size: .75rem; padding: 8px 14px; cursor: pointer; }
#lb-solo:hover, #reload:hover { background: rgba(255,255,255,.15); }
#reload { background: var(--accent); color: #0b1a0c; border: 0; font-weight: 700; font-size: 1rem; padding: 12px 24px; text-transform: uppercase; box-shadow: 4px 4px 0 #000; }
#reload[hidden] { display: none; }
#lb-err { color: #ff9a8a; min-height: 1.2em; }

/* ---------- chat ---------- */
#chat { left: 10px; bottom: 76px; width: min(440px, 62%); font-family: var(--font-body); text-shadow: none; }
#chatlog { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; max-height: 150px; overflow: hidden; }
#chat.open #chatlog { max-height: 260px; }
#chatlog div { align-self: flex-start; max-width: 100%; background: rgba(0,0,0,.42); color: #fff; padding: 2px 8px; font-size: 13px; line-height: 1.35; border-radius: 3px; word-break: break-word; transition: opacity .8s; }
#chatlog div.old { opacity: 0; }
#chat.open #chatlog div.old { opacity: 1; }
#chatlog b { margin-right: 6px; }
#chatlog .sys { color: #ffd25a; font-style: italic; }
#chatin { pointer-events: auto; width: 100%; margin-top: 4px; background: rgba(0,0,0,.7); color: #fff; border: 2px solid rgba(255,255,255,.55); padding: 5px 8px; font: 14px var(--font-body); }
#chatin[hidden] { display: none; }
#chatin:focus { outline: none; border-color: var(--accent2); }
@media (pointer: coarse) { #chat { bottom: 140px; } }

/* ---------- PvP: vida, daño, muerte, marcador ---------- */
#hp { left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 8px; background: rgba(0,0,0,.45); border: 2px solid rgba(0,0,0,.6); }
#hp[hidden] { display: none; }
#hpbar { width: 150px; height: 14px; border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.5); }
#hpfill { display: block; height: 100%; width: 100%; background: #6fd36b; transition: width .12s, background .2s; }
#hpnum { min-width: 2.2em; text-align: right; }
#pvpflash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; background: radial-gradient(ellipse at center, rgba(190,0,0,0) 30%, rgba(190,0,0,.75) 100%); }
#deadscr { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(60,0,0,.55); color: #fff; font-family: var(--font-pixel); text-align: center; pointer-events: none; }
#deadscr[hidden] { display: none; }
#deadscr h3 { margin: 0; font-size: clamp(1.4rem, 5vw, 2.4rem); text-transform: uppercase; text-shadow: 3px 3px 0 #000; color: #ff7a6a; }
#deadscr p { margin: 0; font-size: clamp(.8rem, 2vw, 1rem); text-shadow: 2px 2px 0 #000; }
#score { left: 50%; top: 18%; transform: translateX(-50%); min-width: min(380px, 80%); background: rgba(0,0,0,.72); border: 2px solid rgba(255,255,255,.5); padding: 10px 14px; font-family: var(--font-body); z-index: 5; }
#score[hidden] { display: none; }
#score table { width: 100%; border-collapse: collapse; font-size: 14px; }
#score th { text-align: left; color: var(--accent2); font: 600 11px var(--font-pixel); text-transform: uppercase; padding: 2px 6px 6px; }
#score th:nth-child(n+2), #score td:nth-child(n+2) { text-align: right; width: 5.5em; }
#score td { padding: 3px 6px; color: #fff; text-shadow: none; }
#score tr.me td { color: #ffe27a; font-weight: 600; }
@media (pointer: coarse) { #hp { bottom: 74px; } }