/* Compete: the player card, the badge shelf, challenges, the ladder and the
   squad, plus the small points strip the dashboard paints. Tokens only, so it
   follows the day and night themes with the rest of the app. */

#socialRoot [hidden]{display:none!important}
#socialRoot .sub{color:var(--mute);font-size:13px;line-height:1.55}
.soc-wrap{display:grid;gap:14px}
.soc-loading,.soc-empty{color:var(--mute);font-size:13px;line-height:1.55}
.soc-err{color:var(--bad);font-size:13px;line-height:1.55}
.soc-note{color:var(--mute);font-size:13.5px;line-height:1.6;max-width:62ch}
.soc-note b{color:var(--ink)}

/* the one line that says what this screen costs, which is nothing */
.soc-free{
  border:1px dashed rgba(34,217,122,.45);background:rgba(34,217,122,.08);
  border-radius:var(--r);padding:12px 15px;color:var(--ink);
  font:700 13px/1.55 var(--mono);
}

.soc-mini{padding:7px 12px;font-size:12.5px;border-radius:9px}
.soc-mini.on{border-color:var(--hot);color:var(--hot);background:rgba(255,90,31,.12)}
.soc-row{display:flex;gap:8px;flex-wrap:wrap}

/* --------------------------------------------------------------- the card */
.soc-id{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.soc-idtext{min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.soc-id .soc-mini{margin-left:auto}
.soc-av{
  width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;
  font:900 18px/1 var(--mono);letter-spacing:-.5px;color:#fff;
  background:linear-gradient(135deg,var(--hot),var(--grape));box-shadow:0 10px 26px rgba(255,90,31,.28);
}
.soc-av.sm{width:38px;height:38px;border-radius:12px;font-size:13px;box-shadow:none}
.soc-handle{font:900 22px/1.1 var(--mono);letter-spacing:-.8px;overflow-wrap:anywhere}

.soc-handleset{display:grid;gap:10px;margin-bottom:16px;max-width:420px}
.soc-handleset label,.soc-form label{
  display:grid;gap:5px;font:800 9.5px/1 var(--mono);letter-spacing:1.2px;
  text-transform:uppercase;color:var(--mute);
}
.soc-handleset input,.soc-form input,.soc-form select{
  width:100%;min-width:0;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  font:600 14px/1.4 var(--sans);
}
.soc-handleset input:focus,.soc-form input:focus,.soc-form select:focus{outline:2px solid var(--hot);outline-offset:1px}

.soc-score{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.soc-big{display:flex;flex-direction:column;align-items:flex-start;min-width:120px}
.soc-big b{
  font:900 46px/1 var(--mono);letter-spacing:-2px;
  background:linear-gradient(120deg,var(--hot),var(--hot2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.soc-big small{font:800 9.5px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--mute);margin-top:7px}
.soc-prog{flex:1;min-width:190px}
.soc-progtop{display:flex;justify-content:space-between;gap:10px;font:800 11px/1 var(--mono);color:var(--ink);margin-bottom:7px}
.soc-progtop span:last-child{color:var(--mute)}
.soc-prog .bar{height:9px;border-radius:5px}
.soc-prog .sub{margin-top:7px}
.soc-stats{margin-bottom:6px}
.soc-stats .stat b{font-size:19px}

.soc-break{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.soc-break summary{cursor:pointer;font:800 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--mute);padding:4px 0}
.soc-break summary:hover{color:var(--hot)}
.soc-brk{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.soc-brk:last-child{border-bottom:0}
.soc-brk-l{min-width:0}
.soc-brk-l b{display:block;font-size:13.5px}
.soc-brk-l small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.soc-brk-p{font:900 15px/1 var(--mono);color:var(--hot);white-space:nowrap}

/* ------------------------------------------------------------------ badges */
.soc-badgecount{margin-bottom:12px}
.soc-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.soc-badge{
  position:relative;display:flex;flex-direction:column;gap:6px;padding:13px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.soc-badge:hover{transform:translateY(-2px);border-color:var(--hot);box-shadow:0 12px 26px rgba(255,90,31,.14)}
.soc-badge b{font:800 13px/1.25 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.soc-badge small{color:var(--mute);font-size:11.5px;line-height:1.45}
.soc-bicon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,90,31,.14);border:1px solid rgba(255,90,31,.3)}
.soc-bicon svg{display:block}
.soc-glyph{font:800 19px/1 var(--mono);color:var(--hot)}
.soc-when{font:800 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--good)}
/* tiers, as worker/points.js names them: bronze, silver, gold, legend */
.soc-badge.t-silver .soc-bicon{background:rgba(46,168,255,.14);border-color:rgba(46,168,255,.34)}
.soc-badge.t-silver .soc-glyph{color:var(--cool)}
.soc-badge.t-gold .soc-bicon{background:rgba(255,162,77,.18);border-color:rgba(255,162,77,.42)}
.soc-badge.t-gold .soc-glyph{color:var(--hot2)}
.soc-badge.t-legend .soc-bicon{background:rgba(157,107,255,.16);border-color:rgba(157,107,255,.4)}
.soc-badge.t-legend .soc-glyph{color:var(--grape)}

.soc-badge.locked{opacity:.52;border-style:dashed}
.soc-badge.locked .soc-bicon{background:var(--panel);border-color:var(--line);filter:grayscale(1)}
.soc-badge.locked .soc-glyph{color:var(--dim)}
.soc-badge.locked:hover{opacity:.85;border-color:var(--cool);box-shadow:none;transform:none}
.soc-lockword{font:800 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)}

.soc-badge.fresh{border-color:var(--good);box-shadow:0 0 0 1px var(--good),0 14px 30px rgba(34,217,122,.2);animation:soc-pop .7s ease 2}
@keyframes soc-pop{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-3px) scale(1.035)}}

/* the celebration: a strip that fades itself out, never a blocking dialog */
.soc-cheer{
  display:flex;align-items:center;gap:12px;margin-bottom:13px;padding:11px 14px;border-radius:12px;
  border:1px solid rgba(34,217,122,.45);background:rgba(34,217,122,.1);
}
.soc-cheer.on{animation:soc-cheer-in .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes soc-cheer-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.soc-cheer-icons{display:flex;gap:6px;align-items:center}
.soc-cheer-icons .soc-glyph{color:var(--good);font-size:22px}
.soc-cheer-text b{display:block;font:900 14px/1.2 var(--mono);color:var(--good)}
.soc-cheer-text small{display:block;color:var(--ink);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}

/* ------------------------------------------------- challenges and the board */
.soc-forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:14px 0 16px}
.soc-form{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:14px;display:grid;gap:10px;align-content:start}
.soc-form>b{font:800 10px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--hot)}
.soc-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.soc-form .sub{margin-top:2px}

.soc-list{display:grid;gap:10px}
.soc-item{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:13px}
.soc-item.done{opacity:.8;border-style:dashed}
.soc-itop{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.soc-ihead{min-width:0;flex:1}
.soc-ihead>b{display:block;font:800 15px/1.25 var(--mono);overflow-wrap:anywhere}
.soc-itags{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.soc-itags .pill{background:var(--panel);border:1px solid var(--line);color:var(--mute)}
.soc-itags .pill.hot,.soc-itags .pill.cool,.soc-itags .pill.good{color:inherit}
.soc-iops{display:flex;gap:6px;flex-wrap:wrap}

.soc-board,.soc-lt{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:grid;gap:2px}
.soc-brow{
  display:grid;grid-template-columns:34px 1fr auto 62px;gap:10px;align-items:center;
  padding:9px 8px;border-radius:9px;
}
.soc-brow:nth-child(odd){background:var(--panel)}
.soc-brow.you{background:rgba(255,90,31,.12);box-shadow:inset 0 0 0 1px rgba(255,90,31,.35)}
.soc-rank{font:900 14px/1 var(--mono);color:var(--mute);text-align:center}
.soc-brow:first-child .soc-rank{color:var(--hot)}
.soc-who{min-width:0;font:800 13.5px/1.2 var(--mono);overflow-wrap:anywhere;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.soc-who i{font:800 8.5px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--hot);font-style:normal;border:1px solid rgba(255,90,31,.4);border-radius:999px;padding:4px 7px}
.soc-el{display:flex;align-items:center;gap:6px;font:700 11px/1 var(--mono);color:var(--mute);white-space:nowrap}
.soc-sc{font:900 15px/1 var(--mono);color:var(--ink);text-align:right}

/* ------------------------------------------------------------------ ladder */
.soc-scopes{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.soc-week{margin-bottom:8px}
.soc-ladderbox .srow{margin-top:12px;border-top:1px solid var(--line);border-bottom:0;padding-top:14px}

/* ------------------------------------------------------------------- squad */
.soc-invites{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:12px;margin-bottom:12px;display:grid;gap:8px}
.soc-invites>b{font:800 10px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--mute)}
.soc-invite{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:13.5px;overflow-wrap:anywhere}

.soc-friend{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:11px;align-items:center;
  padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);
}
.soc-fwho{min-width:0}
.soc-fwho b{display:block;font:800 14px/1.2 var(--mono);overflow-wrap:anywhere}
.soc-fwho small{display:block;color:var(--mute);font-size:12px;margin-top:3px}
.soc-fel{display:flex;align-items:center}
.soc-fops{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.soc-reasons{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.soc-reasons small{width:100%;color:var(--mute);font-size:12px}

/* --------------------------------------------------------- dashboard strip */
#dashPoints .soc-hero{margin-bottom:16px}
.soc-herorow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.soc-herorow .soc-big b{font-size:34px}
.soc-herorow .soc-prog{min-width:170px}
.soc-herobadges{display:flex;gap:7px;flex-wrap:wrap}
.soc-hb{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:rgba(255,90,31,.14);border:1px solid rgba(255,90,31,.3);
}
.soc-hb svg{display:block}
.soc-hb .soc-glyph{font-size:16px}

/* ------------------------------------------------------------------ phones */
@media(max-width:560px){
  .soc-big b{font-size:38px}
  .soc-score{gap:14px}
  .soc-shelf{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
  .soc-brow{grid-template-columns:26px 1fr 56px;gap:8px;padding:9px 6px}
  .soc-el{display:none}
  .soc-friend{grid-template-columns:auto 1fr;row-gap:9px}
  .soc-fel{display:none}
  .soc-fops{grid-column:1/-1;justify-content:flex-start}
  .soc-id .soc-mini{margin-left:0}
  .soc-two{grid-template-columns:1fr}
  .soc-herorow{gap:12px}
  .soc-herorow .soc-big b{font-size:30px}
}