/* Aetas — de spelerspagina (assets/player.js). Bouwt op style.css: dezelfde kleuren,
   tegels en tabellen; hier alleen wat die pagina extra heeft. */

.pf-head { margin-bottom: 0; }
.pf-head h1 { overflow-wrap: anywhere; }
.pf-sec { margin-top: 2.25rem; }
.pf-sec h2 { margin-bottom: .9rem; }

/* ratinggrafiek */
.pf-chart-box { position: relative; padding: .5rem; overflow: hidden; }
.pf-chart { display: block; width: 100%; height: auto; touch-action: pan-y; }
.pf-grid { stroke: var(--edge-soft); stroke-width: 1; }
.pf-axis { fill: var(--off); font-size: 11px; font-variant-numeric: tabular-nums; }
.pf-line { fill: none; stroke: var(--brons); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pf-dot { fill: var(--brons); stroke: #1a1712; stroke-width: 2; }
.pf-dot--reset { fill: #1a1712; stroke: var(--brons); }
.pf-dot--hover { fill: var(--text); stroke: #1a1712; }
.pf-cross { stroke: var(--dimmer); stroke-width: 1; stroke-dasharray: 3 3; }
.pf-hit { fill: transparent; cursor: crosshair; }
.pf-tip {
  position: absolute;
  top: .4rem;
  padding: .35rem .55rem;
  background: var(--inner);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}
.pf-tip__d { display: block; color: var(--dimmer); font-size: .78rem; }

/* laatste potjes: kaartjes in plaats van een brede tabel, dan past het ook op een telefoon */
.pf-matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--edge-soft); border: 1px solid var(--edge-soft); }
.pf-match { background: var(--panel); padding: .7rem .9rem .8rem 1rem; border-left: 3px solid var(--warn); }
.pf-match--won { border-left-color: var(--good); }
.pf-match__top { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pf-match__res { font-weight: 700; text-transform: capitalize; }
.pf-match__delta { font-variant-numeric: tabular-nums; color: var(--dim); }
.pf-match__date { margin-left: auto; color: var(--off); font-size: .85rem; }
.pf-match__meta { margin: .2rem 0 0; color: var(--dim); font-size: .9rem; }
.pf-match__who { margin: .25rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.pf-match__who > span:first-child {
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: var(--off); margin-right: .25rem;
}
.pf-civ { color: var(--off); font-size: .82rem; }
.pf-who--gone { color: var(--off); font-style: italic; }

.profile .tiles { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .profile .tiles { grid-template-columns: repeat(3, 1fr); } }
.pf-match:last-child:nth-child(odd) { grid-column: 1 / -1; }

.pf-cols { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

@media (min-width: 900px) {
  .pf-matches { grid-template-columns: 1fr 1fr; }
}