/* Match panel: guild check results */
.match-panel{
  background:linear-gradient(180deg, rgba(38,45,55,.52), rgba(18,22,28,.40));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1px solid var(--border);
  border-top-color:rgba(255,255,255,.19);
  border-radius:14px;padding:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.5),
    /* Contact shadow: tight and dark, right under the edge. This is
       the one that says the card is sitting ON something. */
    0 2px 3px rgba(0,0,0,.45),
    /* Cast shadow: wide and soft, saying how far above it sits. */
    0 20px 40px -16px rgba(0,0,0,.9);
}
/* Everything inside a panel sits over a translucent card over a
   photograph, so it gets the same treatment the standings sides got:
   each glyph given its own edge, and the tone split so labels recede
   and values carry. */
.match-panel{text-shadow:0 1px 2px rgba(0,0,0,.55);}
.match-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.match-tier{font-weight:700;font-size:.95rem;color:#f2f6fa;}
.team-cols{display:grid;grid-template-columns:1fr;gap:10px;}
.team-col{
  border:1px solid var(--border);border-radius:10px;padding:10px;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.team-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 6px 0 currentColor;
}
.dot-red{background:radial-gradient(circle at 30% 30%, #ff9a9a, var(--red));color:var(--red);}
.dot-blue{background:radial-gradient(circle at 30% 30%, #b8cdff, var(--blue));color:var(--blue);}
.dot-green{background:radial-gradient(circle at 30% 30%, #b3ecce, var(--green));color:var(--green);}
.dot-pending{background:#4b5563;box-shadow:none;}
/* inline-flex on a span inside the cell, deliberately not flex on the
   <td>. A cell told to be a flex container stops being a table cell:
   the row wraps it in an anonymous one, and with align-items:center no
   item offers a baseline, so the flex box synthesises one from its own
   bottom edge. That bottom then lined up with the text baseline of the
   other three columns, which pushed this one up and stretched the row.
   The dot is a bare span and only gets its 10px by being a flex item,
   so the flex moves inward rather than away. */
.server-cell{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;}
.team-name{font-weight:600;font-size:.88rem;color:#f2f6fa;}
/* Chips carry their own dark-on-light text, and a drop shadow meant for
   light-on-dark only muddies them. */
.rank-badge,.pin-badge,.tag{text-shadow:none;}
.pin-badge{
  display:inline-block;margin-top:2px;margin-bottom:6px;
  background:var(--accent-soft);color:var(--accent);
  border-radius:6px;padding:3px 9px;font-size:.78rem;font-weight:700;
}
.team-stats{display:flex;gap:12px;flex-wrap:wrap;font-size:.78rem;color:#8d97a6;margin-bottom:8px;}
.panel-note{color:#8d97a6;font-size:.78rem;font-style:italic;}