/* =============================================================================
   social.css - Amis, clan, ligue, chat, fil du monde
   ============================================================================= */
#social-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(5, 6, 10, 0.75); backdrop-filter: blur(6px); animation: fadeIn 0.2s ease-out; z-index: 150; }
.soc-card { width: 560px; max-width: 96vw; height: min(720px, 92vh); height: min(720px, 92dvh); max-height: 92dvh; padding: 0; gap: 0; border-color: #38bdf8; box-shadow: 0 10px 40px rgba(56, 189, 248, 0.28); overflow: hidden; }
.soc-head { padding: 16px 18px 12px; border-bottom-color: #38bdf8 !important; margin: 0; }
.soc-title { margin: 0; color: #7dd3fc; font-size: 1.25rem; }
.soc-tabs { display: flex; gap: 6px; padding: 10px 12px 0; background: #11172a; }
.soc-tab { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 6px; border: 0; border-radius: 12px 12px 0 0; background: #1a2138; color: #94a3b8; font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.soc-tab:hover { background: #222c4a; color: #e2e8f0; }
.soc-tab.active { background: #0d1224; color: #7dd3fc; box-shadow: inset 0 -3px 0 #38bdf8; }
.soc-tab-ic { font-size: 1.1rem; }
.soc-tab-dot { display: none; position: absolute; top: 6px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px #11172a; }
.soc-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px; background: #0d1224; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }

/* boutons */
.soc-btn { min-height: 40px; padding: 8px 14px; border: 1px solid #2d3a5e; border-radius: 10px; background: #1a2138; color: #e2e8f0; font: inherit; font-weight: 700; cursor: pointer; transition: transform .1s, background .15s; }
.soc-btn:hover:not(:disabled):not(.primary) { background: #26325a; }
.soc-btn.primary:hover:not(:disabled) { filter: brightness(1.1); }
.soc-btn:active:not(:disabled) { transform: scale(.97); }
.soc-btn:disabled { opacity: .55; cursor: default; }
.soc-btn.primary { background: linear-gradient(180deg, #38bdf8, #0ea5e9); color: #04202e; border-color: #38bdf8; }
.soc-btn.ok { background: #14532d; border-color: #22c55e; color: #bbf7d0; }
.soc-btn.danger { background: #3b1219; border-color: #ef4444; color: #fecaca; }
.soc-btn.small { min-height: 34px; padding: 5px 10px; font-size: .85rem; }
.soc-ic-btn { position: relative; min-width: 40px; min-height: 40px; border: 1px solid #2d3a5e; border-radius: 10px; background: #1a2138; color: #e2e8f0; font-size: 1.05rem; cursor: pointer; }
.soc-ic-btn:hover { background: #26325a; }
.soc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #ef4444; color: #fff; font-size: .72rem; font-weight: 800; }
.soc-ic-btn .soc-count { position: absolute; top: -5px; right: -5px; margin: 0; }

/* blocs */
.soc-section { background: #121a30; border: 1px solid #222a44; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.soc-section h4 { margin: 0; font-size: .95rem; color: #cbd5e1; }
.soc-small { font-size: .9rem; }
.soc-small summary { cursor: pointer; font-weight: 700; color: #cbd5e1; padding: 2px 0; }
.soc-muted { color: #8b97b3; }
.soc-label { font-size: .8rem; color: #8b97b3; font-weight: 700; margin-top: 4px; }
.soc-input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 8px 12px; border: 1px solid #2d3a5e; border-radius: 10px; background: #0a0f1e; color: #e2e8f0; font: inherit; font-size: 16px; }
.soc-input:focus { outline: 2px solid #38bdf8; outline-offset: 1px; }
.soc-tag-in { width: 90px; flex: none; text-transform: uppercase; text-align: center; }
.soc-form-row { display: flex; gap: 8px; align-items: stretch; }
.soc-form-row > .soc-input { flex: 1; min-width: 0; }
.soc-empty { text-align: center; color: #8b97b3; padding: 18px 8px; }
.soc-empty-ic { font-size: 2rem; }
.soc-hero { text-align: center; padding: 8px 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.soc-hero-ic { font-size: 2.6rem; }
.soc-hero h3 { margin: 0; color: #7dd3fc; font-size: 1.2rem; }
.soc-hero p { margin: 0; color: #cbd5e1; max-width: 420px; }
.soc-bullets { list-style: none; margin: 4px 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; color: #cbd5e1; max-width: 420px; }
.soc-choice { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; width: 100%; }
.soc-choice .soc-btn { flex: 1 1 160px; min-height: 46px; }

/* lignes */
.soc-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 10px; }
.soc-row + .soc-row { border-top: 1px solid #1b2440; }
.soc-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.soc-row-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.soc-row-main small { flex-basis: 100%; }
.soc-desc-s { color: #aab4cc; }
.soc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #475569; }
.soc-dot.on { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.soc-tag { display: inline-block; padding: 1px 7px; border-radius: 8px; background: #26325a; color: #7dd3fc; font-size: .75rem; font-weight: 800; letter-spacing: .5px; }
.soc-role { flex: none; font-size: .72rem; padding: 2px 7px; border-radius: 8px; background: #1a2138; color: #94a3b8; }
.soc-role.r-leader { background: #4a3708; color: #fde68a; }
.soc-role.r-officer { background: #1e3a5f; color: #bae6fd; }
.soc-today { flex: none; font-size: .78rem; color: #8b97b3; }
.soc-menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px 8px 22px; }
.soc-clan-head { display: flex; align-items: center; gap: 12px; }
.soc-clan-emoji { font-size: 2.2rem; line-height: 1; flex: none; }
.soc-clan-emoji.sm { font-size: 1.5rem; }
.soc-clan-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.soc-clan-name small { flex-basis: 100%; }
.soc-desc { color: #cbd5e1; font-style: italic; }
.soc-subtabs { display: flex; gap: 6px; }
.soc-subtab { flex: 1; min-height: 40px; padding: 6px; border: 1px solid #222a44; border-radius: 10px; background: #121a30; color: #94a3b8; font: inherit; font-weight: 700; cursor: pointer; }
.soc-subtab.active { background: #1e3a5f; color: #e0f2fe; border-color: #38bdf8; }
.soc-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.soc-emoji { min-height: 42px; border: 2px solid transparent; border-radius: 10px; background: #1a2138; font-size: 1.4rem; cursor: pointer; }
.soc-emoji.sel { border-color: #38bdf8; background: #1e3a5f; }

/* mission */
.soc-mission { background: linear-gradient(135deg, #14304a, #1b2a52); border: 1px solid #2f5f8f; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.soc-mission-off { background: #121a30; border-color: #222a44; }
.soc-mission-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.soc-pin { min-height: 32px; padding: 3px 11px; border: 1px solid #2f5f8f; border-radius: 16px; background: rgba(56, 189, 248, .1); color: #bae6fd; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.soc-pin.on { background: rgba(250, 204, 21, .16); border-color: #facc15; color: #fde68a; }
.soc-pin:active { transform: scale(.95); }
.soc-mission-h { font-size: .78rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #7dd3fc; }
.soc-mission-t { font-size: 1.05rem; font-weight: 800; }
.soc-mission-d { color: #cbd5e1; font-size: .92rem; }
.soc-mission-row { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; font-weight: 700; }
.soc-mission-row.soc-muted { font-weight: 500; font-size: .8rem; }
.soc-bar { height: 12px; border-radius: 6px; background: #0a0f1e; overflow: hidden; }
.soc-bar.sm { height: 6px; flex-basis: 100%; margin-top: 3px; }
.soc-bar-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #0ea5e9, #38bdf8); transition: width .5s ease; }
.soc-bar-fill.done { background: linear-gradient(90deg, #16a34a, #4ade80); }

/* ligue */
.soc-league-top { display: flex; align-items: center; gap: 12px; }
.soc-div { font-size: 2.6rem; line-height: 1; }
.soc-row.rank { padding: 7px 6px; }
.soc-row.rank.me { background: #16294a; outline: 1px solid #2f5f8f; }
.soc-row.rank.up { box-shadow: inset 3px 0 0 #22c55e; }
.soc-row.rank.down { box-shadow: inset 3px 0 0 #ef4444; }
.soc-rk { flex: none; width: 28px; text-align: center; font-weight: 800; }
.soc-rk-r { flex: none; font-size: .85rem; font-weight: 700; color: #cbd5e1; }
.soc-zone { flex: none; }

/* chat */
.soc-chat { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.soc-body:has(> .soc-chat) { overflow: hidden; }          /* c'est la liste de messages qui défile, pas toute la fenêtre */
.soc-chat > * { flex-shrink: 0; }
.soc-chat > .soc-msgs { flex: 1 1 0; min-height: 60px; max-height: none; }
.soc-chat-head { display: flex; align-items: center; gap: 10px; }
.soc-chat-title { display: flex; flex-direction: column; }
.soc-back { min-width: 40px; min-height: 40px; border: 1px solid #2d3a5e; border-radius: 10px; background: #1a2138; color: #e2e8f0; font-size: 1.1rem; cursor: pointer; }
.soc-msgs { flex: 1; min-height: 180px; max-height: 46dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #0a0f1e; border: 1px solid #1b2440; border-radius: 12px; overscroll-behavior: contain; }
.soc-msg { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.soc-msg.mine { justify-content: flex-end; }
.soc-bubble { max-width: 82%; padding: 6px 10px; border-radius: 12px; background: #1a2138; display: flex; flex-direction: column; gap: 1px; word-break: break-word; }
.soc-msg.mine .soc-bubble { background: #0e4a6e; }
.soc-msg:not(.mine) .soc-bubble { cursor: pointer; }
.soc-msg-from { font-size: .72rem; font-weight: 800; color: #7dd3fc; }
.soc-msg-text.q { font-weight: 800; color: #fde68a; }
.soc-msg-time { font-size: .65rem; color: #7c88a6; align-self: flex-end; }
.soc-msg-menu { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px; }
.soc-sys { text-align: center; font-size: .75rem; color: #7c88a6; }
.soc-quick { flex-wrap: wrap; gap: 6px; }
.soc-chip { min-height: 34px; padding: 4px 12px; border: 1px solid #2d3a5e; border-radius: 17px; background: #1a2138; color: #e2e8f0; font: inherit; font-size: .85rem; cursor: pointer; }
.soc-chip:hover { background: #26325a; }
.soc-input-row { display: flex; gap: 6px; }
.soc-send { min-width: 48px; border: 0; border-radius: 10px; background: #0ea5e9; color: #04202e; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.soc-quick-note { text-align: center; }

/* badge sur les boutons de navigation */
.btn-social { position: relative; }
.soc-badge { display: none; position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 800; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: none; }
html.soc-new .btn-social { animation: socPulse 1.8s ease-in-out infinite; }
@keyframes socPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .7); } 50% { box-shadow: 0 0 0 9px rgba(56, 189, 248, 0); } }

/* fil du monde */
#world-feed { position: fixed; left: 12px; bottom: 90px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(280px, calc(100vw - 24px)); pointer-events: none; }
.wf-card { position: relative; pointer-events: auto; background: rgba(13, 18, 36, .92); border: 1px solid #2f5f8f; border-radius: 14px; padding: 8px 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); backdrop-filter: blur(4px); animation: wfIn .35s ease-out; transition: opacity .4s, transform .4s; }
.wf-card.out { opacity: 0; transform: translateX(-16px); }
@keyframes wfIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.wf-top { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; line-height: 1.25; color: #e2e8f0; }
.wf-ic { font-size: 1.3rem; line-height: 1; }
.wf-react { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.wf-r { display: inline-flex; align-items: center; gap: 2px; min-height: 30px; min-width: 30px; padding: 2px 4px; border: 1px solid #2d3a5e; border-radius: 15px; background: #1a2138; color: #e2e8f0; font-size: .95rem; cursor: pointer; justify-content: center; }
.wf-r i { font-style: normal; font-size: .72rem; font-weight: 800; color: #7dd3fc; }
.wf-r.has { border-color: #38bdf8; }
.wf-r.mine { background: #1e3a5f; border-color: #7dd3fc; }
.wf-r:active { transform: scale(.92); }
.wf-burst { position: absolute; font-size: 1.3rem; pointer-events: none; opacity: 0; animation: wfBurst 1.1s ease-out forwards; }
@keyframes wfBurst { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,-50px)) scale(1.4); } }
.wf-say { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wf-q { border: 1px solid #2d3a5e; background: #1a2138; color: #e2e8f0; border-radius: 12px; padding: 3px 8px; font-size: .75rem; cursor: pointer; }
.wf-q:active { transform: scale(.94); }
.wf-bubbles { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; pointer-events: none; }
.wf-bubble { background: #f8fafc; color: #0f172a; border-radius: 14px 14px 14px 4px; padding: 5px 10px; font-size: .8rem; box-shadow: 0 4px 12px rgba(0,0,0,.35); animation: wfIn .3s ease-out; transition: opacity .4s; }
.wf-bubble.out { opacity: 0; }

/* tablettes / téléphones */
@media (max-width: 680px) {
  .soc-card { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border-width: 0; }
  .soc-tab-tx { font-size: .85rem; }
  .soc-msgs { max-height: none; }
  #world-feed { bottom: 150px; left: 8px; width: min(250px, 60vw); }
}
@media (max-height: 560px) {
  .soc-body:has(> .soc-chat) { padding: 8px 10px; }
  .soc-chat { gap: 6px; }
  .soc-chat-title small { display: none; }
  .soc-back, .soc-ic-btn { min-width: 36px; min-height: 36px; }
  .soc-quick { flex-wrap: nowrap; overflow-x: auto; }
  .soc-tab { min-height: 34px; }
}
@media (max-height: 520px) {
  .soc-card { height: 100dvh; max-height: 100dvh; width: min(640px, 100vw); border-radius: 0; }
  .soc-head { padding: 8px 14px; }
  .soc-tab { min-height: 36px; padding: 4px; }
  #world-feed { bottom: 70px; width: 230px; }
  .wf-react { margin-top: 3px; } .wf-r { min-height: 26px; }
}
/* Mobile : le cadran d'événement passe AU-DESSUS du joystick (z 700) et des boutons d'action, mais sous les fenêtres */
body.touch-ui #world-feed { z-index: 845; bottom: calc(var(--safe-bottom, 10px) + 200px); left: calc(var(--safe-left, 10px) + 8px); }
body.touch-ui .wf-r { min-height: 30px; min-width: 30px; padding: 1px 3px; font-size: .95rem; }
body.touch-ui .wf-react { gap: 3px; }
body.touch-ui .wf-q { padding: 7px 11px; font-size: .8rem; }
@media (max-height: 500px) and (max-width: 1024px) {
  body.touch-ui #world-feed { bottom: auto; top: calc(var(--safe-top, 10px) + 84px); width: min(240px, 38vw); }
}
@media (prefers-reduced-motion: reduce) { .wf-card, .wf-burst, html.soc-new .btn-social { animation: none; } }

.soc-league-top > div:not(.soc-div) { display: flex; flex-direction: column; }
@media (max-width: 1024px) { #social-overlay { z-index: 2500; } }

/* mission de clan épinglée (en jeu) */
#pinned-mission { display: none; position: fixed; z-index: 55; right: 460px; top: 66px; width: 250px; box-sizing: border-box; padding: 8px 10px 9px; border-radius: 12px; cursor: pointer;
  background: rgba(13, 18, 36, .9); border: 1px solid #2f5f8f; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); backdrop-filter: blur(4px); color: #e2e8f0; font-size: .8rem; user-select: none; -webkit-tap-highlight-color: transparent; }
body.session-active #pinned-mission.on { display: block; animation: wfIn .3s ease-out; }
.pm-top { display: flex; align-items: center; gap: 6px; }
.pm-t { flex: 1; min-width: 0; font-weight: 800; color: #7dd3fc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-r { font-size: .72rem; font-weight: 700; color: #94a3b8; white-space: nowrap; }
.pm-x { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #cbd5e1; font-size: .65rem; cursor: pointer; line-height: 1; }
.pm-bar { height: 8px; margin: 6px 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pm-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #0ea5e9, #38bdf8); transition: width .5s ease; }
.pm-bar i.done { background: linear-gradient(90deg, #16a34a, #4ade80); }
.pm-row { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: .76rem; }
.pm-pct { color: #fde68a; }
@media (max-width: 1024px) {
  #pinned-mission { right: auto; left: 8px; top: calc(var(--drawer-top) + 50px); width: min(52vw, 210px); z-index: 820; }
}
@media (max-height: 500px) and (max-width: 1024px) {
  #pinned-mission { top: calc(var(--drawer-top) + 50px); }
}

/* défi de clan épinglé : flèche de repli (mobile uniquement) */
.pm-arrow { display: none; }
@media (max-width: 1024px) {
  #pinned-mission { transition: transform .25s ease; }
  .pm-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: -26px; width: 26px; height: 44px; margin-top: -22px;
    padding: 0; border: 1px solid #2f5f8f; border-left: 0; border-radius: 0 12px 12px 0; background: rgba(13, 18, 36, .92); color: #7dd3fc; font-size: 1.4rem; font-weight: 800; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #pinned-mission.pm-tucked { transform: translateX(calc(-100% - 8px)); box-shadow: none; }
}

/* fiche de consultation d'un clan (depuis le profil d'un joueur) */
.soc-clancard-ov { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 6, 10, .72); backdrop-filter: blur(4px); animation: fadeIn .15s ease-out; }
.soc-clancard { width: min(420px, 100%); max-height: 86vh; overflow-y: auto; box-sizing: border-box; padding: 16px; border-radius: 16px; background: #10162b; border: 1px solid #2f5f8f; box-shadow: 0 20px 50px rgba(0, 0, 0, .7); color: #e2e8f0; display: flex; flex-direction: column; gap: 10px; }
.scc-top { display: flex; align-items: center; gap: 10px; }
.scc-emoji { font-size: 2.2rem; line-height: 1; }
.scc-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scc-tt b { font-size: 1.05rem; overflow-wrap: anywhere; }
.scc-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #cbd5e1; cursor: pointer; font-size: .9rem; }
.scc-desc { margin: 0; color: #cbd5e1; font-size: .88rem; overflow-wrap: anywhere; }
.scc-h { font-weight: 800; font-size: .8rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.scc-members { display: flex; flex-wrap: wrap; gap: 6px; }
.scc-m { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; font-weight: 700; }
.scc-m.me { border-color: #facc15; color: #fde68a; }

/* 👥 contribution des membres au défi */
.soc-contrib { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 6px; }
.soc-contrib > summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: #7dd3fc; list-style: none; }
.soc-contrib > summary::-webkit-details-marker { display: none; }
.soc-contrib > summary::after { content: ' ▾'; }
.soc-contrib[open] > summary::after { content: ' ▴'; }
.soc-contrib-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.soc-contrib-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 2px 6px; font-size: .82rem; }
.soc-contrib-row .cr-rank { text-align: center; color: #94a3b8; font-weight: 700; }
.soc-contrib-row .cr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-contrib-row .cr-val { font-weight: 700; color: #e2e8f0; }
.soc-contrib-row .soc-bar.sm { grid-column: 2 / 4; margin: 0; }
.soc-contrib-row.me .cr-name { color: #fde047; font-weight: 800; }
.soc-contrib-row.zero { opacity: .55; }