/* Screens owned by the social area: party lobby and start, rooms, challenges, new challenge, challenge face-off,
   friends and the invite / room landings. Every class here starts with soc- (all CSS files load on every screen).
   Reads tokens.css; shared parts (.btn, .card, .cine, .item, .seg, .sheet) live in app.css. */

/* ---------- Shared bits ---------- */
.soc-group { margin-top: var(--s8); }
.soc-group > .h3, .soc-requests > .h3 { margin-bottom: var(--s2); }
.soc-err { color: var(--danger); font-size: var(--fs-sm); margin-top: var(--s2); }
.soc-score { font: 700 var(--fs-xl)/1 var(--font-display); min-width: 2.5ch; text-align: right; }
.soc-sub-btn { display: flex; margin: var(--s2) auto 0; justify-content: center; gap: var(--s2); }
.soc-sub-btn svg { width: 20px; height: 20px; }
.soc-foot { text-align: center; }
/* Cinerama trio with the projector glow behind it. */
.soc-hero { position: relative; margin: var(--s6) 0 var(--s5); }
.soc-hero::before {
  content: ""; position: absolute; inset: -20px -10px -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 40%, rgba(196, 45, 83, .22), rgba(13, 20, 36, 0) 70%);
}
.soc-hero .cine-panel { min-height: 132px; }
.soc-hero .cine-panel .film { font-size: 2.4rem; }
/* Mini trio icon (three tiny lit cards). */
.soc-mini { display: flex; gap: 4px; align-items: center; flex: none; }
.soc-mini i { width: 18px; height: 30px; border-radius: 5px; background: var(--cyan); box-shadow: 0 3px 0 var(--cyan-edge); }
.soc-mini i:nth-child(2) { width: 22px; height: 36px; background: var(--red); box-shadow: 0 3px 0 var(--red-edge); }
.soc-mini i:nth-child(3) { background: var(--gold); box-shadow: 0 3px 0 var(--gold-edge); }

/* ---------- Party start (/party) ---------- */
.soc-lead { margin-top: var(--s6); }
.soc-copy { margin: var(--s3) auto 0; max-width: 34ch; }
.soc-host { margin-top: var(--s6); }
.soc-join { margin-top: var(--s8); display: grid; gap: var(--s3); }
.soc-join input { text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-display); font-weight: 700; }
.soc-join input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 600; }

/* ---------- Party lobby (/party/:id) ---------- */
.soc-trio { margin-top: var(--s4); }
.soc-trio .cine-panel { min-height: 148px; padding-bottom: var(--s6); font: inherit; border: 0; }
button.cine-panel { cursor: pointer; }
button.cine-panel:active { filter: brightness(.94); }
.soc-trio .cine-panel .film { font-size: var(--fs-lg); }
.soc-q { font: 700 2.6rem/1 var(--font-display); }
.soc-empty { animation: soc-pulse 1.8s ease-in-out infinite; }
@keyframes soc-pulse { 50% { box-shadow: 0 var(--edge) 0 var(--edgec), 0 0 36px color-mix(in srgb, var(--face) 60%, transparent); } }
@media (prefers-reduced-motion: reduce) { .soc-empty { animation: none; } }
.soc-by { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); }
.soc-by .avatar { width: 32px; height: 32px; font-size: var(--fs-xs); border: 3px solid var(--bg); }
.soc-status { margin-top: var(--s8); text-align: center; font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--text-2); }
.soc-status.ok { color: var(--good); }
.soc-status.bad { color: var(--danger); }
.soc-code { margin-top: var(--s5); text-align: center; }
.soc-code-big { font: 700 clamp(2.4rem, 12vw, 3.2rem)/1.1 var(--font-display); letter-spacing: .14em; margin: var(--s2) 0 var(--s4); user-select: all; -webkit-user-select: all; }
.soc-code-actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); }
.soc-code-actions .btn:last-child { width: 56px; padding: 0; }
.soc-members { display: flex; align-items: center; justify-content: center; gap: var(--s3); width: 100%; min-height: var(--tap); margin-top: var(--s5); border-radius: var(--radius); }
.soc-members:active { background: var(--bg-raised); }
.soc-stack { display: flex; }
.soc-stack .avatar, .soc-wait .avatar { width: 36px; height: 36px; font-size: var(--fs-sm); border: 3px solid var(--bg); }
.soc-stack .avatar + .avatar { margin-left: -10px; }
.soc-stack-n { font-weight: 800; }
.soc-wait { display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 60px; color: var(--text-2); font-weight: 700; }
.soc-board-h { margin-bottom: var(--s2); }
.soc-board .item { padding-left: var(--s3); padding-right: var(--s3); }
.soc-board .soc-me { background: var(--bg-card); border-radius: var(--radius); border-bottom-color: transparent; }
.soc-party > .cine { margin-top: var(--s4); }
/* Film picker sheet: the search box takes the slot's colour. */
.soc-film-search { margin-top: var(--s4); border-width: 2px; }
.soc-film-search.opening { border-color: var(--cyan); }
.soc-film-search.trick { border-color: var(--red); }
.soc-film-search.final { border-color: var(--gold); }
.soc-hint { padding: var(--s4) 0; }
.soc-film { padding-left: var(--s2); padding-right: var(--s2); }

/* ---------- Screening Room ---------- */
.soc-room-meta { margin-top: calc(var(--s2) * -1); }
.soc-room-meta b { color: var(--text); letter-spacing: .08em; }
.soc-party-banner {
  display: flex; align-items: center; gap: var(--s4); margin-top: var(--s5);
  padding: var(--s4) var(--s5); border-radius: var(--radius-lg); text-decoration: none;
  background: var(--red-tint); border: 1.5px solid var(--red); box-shadow: 0 4px 0 var(--red-edge);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.soc-party-banner:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--red-edge); }
.soc-party-banner .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.soc-party-banner b { font: 700 var(--fs-lg)/1.2 var(--font-display); }
.soc-party-banner .grow span { color: var(--text-2); font-size: var(--fs-sm); }
.soc-room .link-btn svg { width: 20px; height: 20px; margin-right: 4px; }

/* ---------- Challenges tab ---------- */
.soc-challenges .btn-lg { margin-top: var(--s2); }
.soc-turns { display: grid; gap: var(--s3); }
.soc-turn {
  display: flex; align-items: center; gap: var(--s4); padding: var(--s4); text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 4px 0 #0a1020;
}
.soc-turn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0a1020; }
.soc-turn .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.soc-turn-who { font: 700 var(--fs-lg)/1.2 var(--font-display); overflow-wrap: anywhere; }
.soc-turn-sub { color: var(--text-2); font-size: var(--fs-sm); }
.soc-result { display: grid; justify-items: end; gap: 2px; flex: none; }
.soc-result b { font: 700 var(--fs-lg)/1 var(--font-display); }
.soc-result span { font-size: var(--fs-xs); font-weight: 800; color: var(--text-2); }
.soc-result.won span { color: var(--good); }
.soc-result.lost span { color: var(--danger); }

/* ---------- New challenge ---------- */
.soc-new-head { margin-bottom: var(--s3); }
.soc-new-head .link-btn svg { width: 20px; height: 20px; margin-right: 6px; }
.soc-new #fq-wrap { margin-bottom: var(--s3); }
.soc-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s3) var(--s2); }
.soc-pick > .empty { grid-column: 1 / -1; }
.soc-friend { display: grid; justify-items: center; gap: var(--s2); padding: var(--s2) 0; border-radius: var(--radius); min-width: 0; }
.soc-friend .avatar { box-shadow: 0 4px 0 #0a1020; transition: box-shadow var(--dur-fast), transform var(--dur-fast); }
.soc-friend[aria-checked="true"] .avatar { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--gold); }
.soc-friend-name { font-size: var(--fs-sm); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-friend[aria-checked="true"] .soc-friend-name { color: var(--text); font-weight: 800; }
.soc-new-h { margin: var(--s6) 0 var(--s3); }
.soc-new-note { margin-top: var(--s5); }

/* ---------- Challenge face-off (/challenge/:id) and invite landing ---------- */
.soc-vs-who { display: flex; justify-content: center; margin-top: var(--s4); }
.soc-vs-who .avatar, .soc-side .avatar { box-shadow: 0 5px 0 #0a1020; }
.soc-vs-head { margin: var(--s4) 0 var(--s2); }
.soc-vs .soc-hero + .label { margin-top: var(--s2); }
.soc-vs .label + .faint { margin-top: var(--s3); }
.soc-final { font-size: clamp(2.4rem, 11vw, 3.4rem); margin-top: var(--s4); }
.soc-final.won { color: var(--good); }
.soc-final.lost { color: var(--danger); }
.soc-final.draw { color: var(--gold); }
.soc-faceoff { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s2); margin: var(--s6) 0 var(--s3); }
.soc-side { display: grid; justify-items: center; gap: var(--s2); font-weight: 800; font-size: var(--fs-sm); max-width: 96px; }
.soc-side span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.soc-side.me span { color: var(--text); }
.soc-scores { display: flex; align-items: baseline; justify-content: center; gap: var(--s2); font-family: var(--font-display); }
.soc-scores b { font-size: clamp(2.2rem, 11vw, 3.2rem); line-height: 1; }
.soc-scores b.them { color: var(--text-2); }
.soc-scores i { font-style: normal; font-weight: 700; color: var(--text-2); font-size: var(--fs-sm); }
.soc-lines { display: grid; gap: var(--s2); margin: var(--s5) 0 var(--s3); }
.soc-line { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--bg-card); border-radius: var(--radius); }
.soc-line span { color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; }

/* ---------- Friends tab ---------- */
.soc-requests { margin-top: var(--s6); }
.soc-requests + .h3 { margin-top: var(--s6); }
.soc-frow { display: flex; align-items: center; gap: var(--s1); border-bottom: 1px solid var(--line); }
.soc-frow:last-child { border-bottom: 0; }
.soc-frow > .item { border-bottom: 0; }
.soc-friends .soc-party-banner { margin-top: var(--s2); }
.soc-rooms-h { margin: var(--s6) 0 var(--s1); }
.soc-me-handle { margin-top: var(--s2); }
.soc-me-handle b { color: var(--text); }
.soc-me-handle a { color: var(--cyan); font-weight: 700; }

/* ---------- Landings (/i/:code, /r/:code) ---------- */
.soc-brand { text-align: center; font: 700 var(--fs-lg)/1.2 var(--font-display); margin-top: var(--s2); }
.soc-landing .soc-hero, .soc-landing .error-box { margin-top: var(--s8); }

/* ---------- Wider screens: the column grows to 560-600 px, so give the trio and scores more room ---------- */
@media (min-width: 760px) {
  /* The outer panels lean out of the column under perspective; inset the trio so they stay inside. */
  .soc-trio, .soc-hero .cine, .soc-party > .cine { padding: 0 var(--s5); }
  .soc-trio .cine-panel { min-height: 160px; }
  .soc-trio .cine-panel .film { font-size: var(--fs-xl); }
  .soc-hero .cine-panel { min-height: 164px; }
  .soc-pick { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}