/* Online: profilo (nome + immagine), classifica globale, stanze e lobby */
#modal.profile-edit .modal-box { width: min(94vw, 640px); }
.pe-l { display: block; margin: 8px 0 4px; font-size: clamp(13px, 2.3vh, 17px); color: #f2cf86; text-align: left; } .pe-l small { opacity: .7; }
.pe-in { width: 100%; box-sizing: border-box; padding: .5em .7em; font: inherit; font-size: clamp(16px, 3vh, 22px); color: #fff; background: #120c06; border: 3px solid var(--bronze, #8a6a2e); border-radius: 10px; outline: none; }
.pe-in:focus { border-color: #f2cf86; }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(48px, 9vh, 64px), 1fr)); gap: 8px; max-height: 38vh; overflow-y: auto; padding: 4px; }
.avp { position: relative; padding: 0; aspect-ratio: 1; border-radius: 10px; border: 3px solid #3a2d1e; background: #120c06; cursor: pointer; overflow: hidden; }
.avp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avp.on { border-color: #f2cf86; box-shadow: 0 0 0 2px #f2cf86, 0 0 14px rgba(242, 207, 134, .8); }
.avp.lock { opacity: .35; filter: grayscale(1); cursor: default; }
.pe-err { min-height: 1.2em; margin: 6px 0 0; color: #ff8a8a; font-size: clamp(12px, 2vh, 15px); }
.lb-msg { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: clamp(16px, 3vh, 22px); color: #cdb88a; line-height: 1.5; }
.lb-list .lb-msg { position: static; padding: 24px 0; }
.lb-retry { position: absolute; left: 0; right: 0; top: 58%; display: flex; justify-content: center; }

/* pulsante ONLINE accanto a PLAY */
.playrow { position: relative; display: flex; justify-content: center; }
.coop-btn { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: clamp(10px, 2vw, 22px); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .35em .8em .4em; border-radius: 12px; border: 4px solid var(--ink, #1a1007); cursor: pointer; font-family: var(--font); font-size: clamp(11px, 2.2vh, 16px); color: #fff; -webkit-text-stroke: 3px var(--ink, #1a1007); paint-order: stroke fill; background: linear-gradient(#5fd0ff, #2a7be0 60%, #1b4fa8); box-shadow: 0 5px 0 #123a7a, 0 5px 0 3px var(--ink, #1a1007), inset 0 3px 0 rgba(255, 255, 255, .5); }
.coop-btn .ico { width: clamp(22px, 4.6vh, 34px); height: clamp(22px, 4.6vh, 34px); }
.coop-btn:active { transform: translateY(calc(-50% + 4px)); box-shadow: 0 1px 0 #123a7a, 0 1px 0 3px var(--ink, #1a1007); }

/* modale online + lobby */
#modal.online .modal-box { width: min(94vw, 560px); }
.on-sub { margin: 4px 0 10px; font-size: clamp(13px, 2.4vh, 17px); line-height: 1.4; color: #e8d6a8; } .on-sub em { color: #ff8a8a; font-style: normal; }
.on-row { display: flex; gap: 10px; justify-content: center; align-items: stretch; margin: 6px 0; }
.on-code { width: 9em; text-align: center; letter-spacing: 4px; text-transform: uppercase; }
.on-or { margin: 6px 0; font-size: clamp(11px, 2vh, 14px); color: #b79c66; text-transform: uppercase; letter-spacing: 2px; }
.on-open { margin-top: 8px; text-align: left; } .on-open small { color: #b79c66; }
.on-list { display: flex; flex-direction: column; gap: 5px; max-height: 20vh; overflow-y: auto; margin-top: 4px; } .on-list i { color: #8a7650; font-style: normal; font-size: 14px; }
.on-r { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 4px 10px; border-radius: 8px; border: 2px solid #3a2d1e; background: linear-gradient(rgba(70, 52, 28, .9), rgba(32, 22, 10, .95)); color: #f2cf86; cursor: pointer; font: inherit; text-align: left; }
.on-r img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; } .on-r span { color: #cdb88a; font-size: 13px; } .on-r em { font-style: normal; color: #7dff9a; }
.lob-code { letter-spacing: 6px; color: #ffd36b; }
.lob-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.lob-p { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; border: 2px solid #3a2d1e; background: linear-gradient(rgba(70, 52, 28, .9), rgba(32, 22, 10, .95)); text-align: left; }
.lob-p img { width: 48px; height: 48px; border-radius: 8px; border: 2px solid var(--bronze, #8a6a2e); object-fit: cover; }
.lob-p b { display: block; font-size: clamp(15px, 2.8vh, 20px); } .lob-p small { color: #cdb88a; }
.lob-p em { font-style: normal; font-size: 11px; background: #f2cf86; color: #1a1007; border-radius: 4px; padding: 1px 5px; margin-left: 4px; } .lob-p em.h { background: #6ab4ff; }
.lob-p.wait { justify-content: center; opacity: .7; animation: pulse 1.4s ease-in-out infinite; }
.on-wait { align-self: center; color: #cdb88a; }

/* ───── lobby sulla Home (fino a 5 giocatori), PRONTO, eroi gia' scelti ───── */
.lob-p .lob-s { margin-left: auto; font-style: normal; font-family: var(--font); font-size: clamp(11px, 2vh, 14px); color: #8c7a58; letter-spacing: 1px; }
.lob-p.rdy { border-color: #4cd964; box-shadow: 0 0 10px rgba(76,217,100,.35); } .lob-p.rdy .lob-s { color: #7dff95; }
.lob-code { cursor: default; }
#screen-home .stage.lob { width: min(64vw, 820px); }
#screen-home .stage.lob .hero-cv { inset: 0 auto 0 30%; width: 40%; height: 100%; }
.lside { position: absolute; top: 4%; bottom: 0; width: 29%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2%; pointer-events: none; }
.lside.l { left: 0; } .lside.r { right: 0; }
.lh { position: relative; flex: 1 1 0; min-height: 0; max-height: 58%; }
.lh-cv { position: absolute; inset: 0 0 18% 0; width: 100%; height: 82%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.lh-n, .lh-s, .lme { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font); text-transform: uppercase; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; line-height: 1; }
.lh-n { bottom: 8%; font-size: clamp(10px, 2.3vh, 16px); color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lh-s { bottom: -6%; font-style: normal; font-size: clamp(8px, 1.7vh, 12px); color: #cdb88a; }
.lh.rdy .lh-s { color: #7dff95; }
.lh.rdy .lh-cv { filter: drop-shadow(0 0 12px #4cd964) drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.lme { bottom: -9%; font-size: clamp(10px, 2.2vh, 15px); color: #ffd35a; } .lme.rdy { color: #7dff95; }
#screen-home .play-btn.on { background: linear-gradient(#cfffa8, #3fdc5c 55%, #1f9c3a); box-shadow: 0 9px 0 #14702a, 0 9px 0 5px var(--ink), inset 0 4px 0 rgba(255,255,255,.7), 0 0 40px #3fdc5c88; }
#screen-home .play-btn.dim { filter: grayscale(.8) brightness(.7); animation: none; }
.hm-online.on { border-color: #7dff95; color: #d9ffe0; box-shadow: 0 0 14px rgba(76,217,100,.55); }
.modesel [hidden] { display: none; }
.card.taken { filter: grayscale(.85) brightness(.6); }
.card .tk { position: absolute; z-index: 3; left: 50%; top: 38%; transform: translateX(-50%) rotate(-8deg); padding: 2px 8px; border-radius: 4px; background: #ff7a2f; color: #fff; font-family: var(--font); font-size: clamp(9px, 1.8vh, 13px); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-transform: uppercase; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; filter: none; }

/* ───── profilo di un giocatore (dalla classifica) ───── */
.lb[data-p] { cursor: pointer; } .lb[data-p]:hover { filter: brightness(1.15); }
#modal.player .modal-box { width: min(760px, 100%); max-height: 94vh; overflow-y: auto; }
.pf-me { font-style: normal; font-size: 11px; background: #f2cf86; color: #1a1007; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.pf-t { text-align: center; margin: 6px 0 2px !important; font-size: clamp(12px, 2.4vh, 18px) !important; letter-spacing: 2px; }
.pf-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 2vw, 22px); }
.pf-h { flex: 1 1 0; max-width: 220px; display: flex; flex-direction: column; align-items: center; }
.pf-st { position: relative; width: 100%; height: clamp(90px, 31vh, 250px); }
.pf-disc { position: absolute; left: 50%; bottom: 4%; width: 78%; height: 11%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--rc) 55%, #fff) 0%, var(--rc) 48%, transparent 72%); box-shadow: 0 0 22px var(--rc); }
.pf-cv { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.pf-tier { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-family: var(--font); font-size: clamp(11px, 2.2vh, 16px); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pf-tier .tieremb-svg { height: clamp(30px, 8vh, 56px); width: auto; }
.pf-h small { color: #cdb88a; font-size: clamp(10px, 1.9vh, 13px); text-transform: uppercase; letter-spacing: 1px; }
.pf-none { color: #cdb88a; text-align: center; padding: 20px 8px; }