/* Invite friends + Weekend Cup sheets (js/social.js), inside the lobby sheet. */
.sheet-card.soc h3 { display: flex; align-items: baseline; gap: 8px; margin: calc(var(--u) * 3.4) 0 calc(var(--u) * 1.4); font-size: calc(var(--u) * 3); }
.sheet-card.soc h3 small { font-size: 0.7em; font-weight: 700; opacity: 0.6; }
.soc-row { display: flex; gap: calc(var(--u) * 1.6); justify-content: center; flex-wrap: wrap; }
.soc-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: calc(var(--u) * 1.2) 0; }
.soc-empty { text-align: center; padding: calc(var(--u) * 2) 0; }
.soc-code { display: grid; justify-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 3) calc(var(--u) * 2); margin: calc(var(--u) * 1.6) 0;
  border-radius: calc(var(--u) * 4); color: #fff; background: linear-gradient(130deg, #5b6cff, #9a5cff 60%, #ff6fb1); box-shadow: 0 8px 20px rgba(110, 90, 255, 0.35); }
.soc-code small { font-weight: 800; opacity: 0.9; }
.soc-code b { font-size: calc(var(--u) * 8); letter-spacing: 0.18em; font-weight: 900; line-height: 1; text-shadow: 0 3px 0 rgba(40, 20, 120, 0.35); }
.soc-mss { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.6); }
.soc-ms { display: grid; justify-items: center; gap: 4px; padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 2.4); background: rgba(90, 110, 180, 0.08); }
.soc-ms span { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.soc-ms.got { background: rgba(60, 190, 110, 0.14); }
.soc-ms.got b::after { content: ' ✓'; color: #23a35a; }
.soc-claim { display: block; width: 100%; margin-top: calc(var(--u) * 2.4); }
.soc-friends { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.2); }
.soc-friends li { display: grid; grid-template-columns: minmax(0, 1fr) 30% auto; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.4) calc(var(--u) * 2); border-radius: calc(var(--u) * 2); background: rgba(90, 110, 180, 0.07); }
.soc-friends b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-friends small { font-weight: 800; opacity: 0.75; }
.soc-prog { height: 8px; border-radius: 99px; background: rgba(90, 110, 180, 0.18); overflow: hidden; }
.soc-prog i { display: block; height: 100%; background: linear-gradient(90deg, #4fd18b, #2fb46c); border-radius: inherit; }
.soc-redeem { margin-top: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 2.4) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3); border: 2px dashed rgba(90, 110, 180, 0.3); }
.soc-redeem h3 { margin-top: 0; }
.soc-redeem input { width: 9em; text-align: center; text-transform: uppercase; letter-spacing: 0.18em; font: 900 calc(var(--u) * 3.2) / 1 inherit; font-family: inherit;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 2); border: 2px solid rgba(90, 110, 180, 0.35); background: #fff; color: #23314d; }
.soc-welcome { display: grid; justify-items: center; text-align: center; gap: 6px; }
.soc-welcome img { width: calc(var(--u) * 18); animation: pop 0.5s cubic-bezier(.3,1.6,.5,1) both; }

.cup-head { display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2.6) calc(var(--u) * 3); margin: calc(var(--u) * 2) 0 calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 4); color: #fff; background: linear-gradient(120deg, #3c4a8f, #5a3fa8); box-shadow: 0 8px 20px rgba(60, 60, 160, 0.3); }
.cup-head.live { background: linear-gradient(120deg, #ff7a2f, #ff3f6c 55%, #a04dff); box-shadow: 0 8px 22px rgba(255, 80, 90, 0.4); }
.cup-head img { width: calc(var(--u) * 11); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); }
.cup-head > div { flex: 1; display: grid; }
.cup-head b { font-size: calc(var(--u) * 4.2); font-weight: 900; }
.cup-head small { font-weight: 800; opacity: 0.95; }
.cup-head.live small::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; vertical-align: 1px; }
.cup-rules { font-size: calc(var(--u) * 2.3); line-height: 1.45; }
.cup-me { display: flex; align-items: center; justify-content: space-around; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2.2); margin-top: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 3); background: rgba(90, 110, 180, 0.08); text-align: center; }
.cup-me > div { display: grid; }
.cup-me small { font-weight: 800; opacity: 0.65; }
.cup-me b { font-size: calc(var(--u) * 4); font-weight: 900; }
.cup-need { text-align: center; margin-top: 6px; }
.cup-claim { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 2.4); margin-top: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 3); background: linear-gradient(170deg, #fff4cf, #fff 70%); box-shadow: 0 0 0 3px #ffc83d; }
.cup-claim > div { flex: 1; display: grid; }
.cup-claim .soc-chips { justify-content: flex-start; }
.cup-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cup-top li { display: grid; grid-template-columns: calc(var(--u) * 6) minmax(0, 1fr) auto calc(var(--u) * 10); align-items: center; gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 2); background: rgba(90, 110, 180, 0.06); }
.cup-top li.me { background: rgba(79, 124, 255, 0.15); box-shadow: inset 0 0 0 2px #4f7cff; }
.cup-top i { font-style: normal; font-weight: 900; text-align: center; }
.cup-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cup-top small { opacity: 0.6; font-weight: 700; }
.cup-top em { font-style: normal; font-weight: 900; text-align: right; color: #e2442b; }
.cup-champs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2.4); justify-content: center; }
.cup-rw { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cup-rw li { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 2); background: rgba(90, 110, 180, 0.06); }
.cup-rw .soc-chips { margin: 0; justify-content: flex-end; }