/* Tom's Friend Space (js/top8.js) */
#top8Mount { font-size: 11px; }
.t8-count { margin: 2px 0 6px; font: bold 13px var(--font-head); color: var(--text); }
.t8-n { color: var(--hot-text); }
.t8-tabs { margin: 0 0 6px; font-size: 10px; line-height: 1.8; }
.t8-tabs a { font-weight: bold; color: var(--link); white-space: nowrap; }
.t8-tabs a.on { color: var(--hot-text); text-decoration: none; }
.t8-snap { white-space: nowrap; }
.t8-drama { margin: 0 0 6px; padding: 3px 6px; background: #ffffcc; border: 1px dashed var(--accent); color: #c00; font-weight: bold; }
.t8-msg { margin: 4px 0 6px; color: var(--muted); }
.t8-err { color: #c00; }
.t8-hand { font-style: italic; }
.t8-fine { margin: 6px 0 0; color: var(--muted); font-size: 10px; }

.t8-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.t8-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 4px 2px; background: none; border: 0; text-align: center; color: var(--text); font: inherit; }
button.t8-cell:hover .t8-name { color: var(--link-hover); text-decoration: underline; }
button.t8-cell:focus-visible { outline: 2px dotted var(--accent); }
.t8-pic { position: relative; width: 84px; max-width: 100%; aspect-ratio: 1; border: 1px solid #999; background: #fff; }
.t8-ava { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.t8-name { margin-top: 3px; color: var(--link); font-weight: bold; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t8-bal { font-weight: bold; font-size: 10px; white-space: nowrap; }
.t8-pct { color: var(--muted); font-size: 9px; }
.t8-badge { position: absolute; right: -4px; bottom: -4px; min-width: 18px; padding: 0 3px; background: var(--head-bg); color: var(--head-text); border: 1px solid #fff; font: bold 9px/14px Arial, sans-serif; }
.t8-crown { position: absolute; left: 50%; top: -11px; transform: translateX(-50%) rotate(-8deg); color: #e8a400; font: 18px/1 Arial, sans-serif; text-shadow: 0 0 2px #fff, 1px 1px 0 #7a5200; }

/* placeholders: grey silhouettes, no numbers */
.t8-ph .t8-pic { background: #ddd; overflow: hidden; }
.t8-sil { position: absolute; inset: 0; }
.t8-sil::before { content: ""; position: absolute; left: 33%; top: 16%; width: 34%; height: 34%; border-radius: 50%; background: #aaa; }
.t8-sil::after { content: ""; position: absolute; left: 18%; top: 56%; width: 64%; height: 60%; border-radius: 45% 45% 0 0; background: #aaa; }
.t8-ph .t8-name { color: var(--muted); }
.t8-ph .t8-bal { color: var(--muted); font-weight: normal; font-style: italic; }

/* friend request */
.t8-req label { display: block; font-weight: bold; margin-bottom: 4px; }
.t8-req-row { display: flex; gap: 4px; }
.t8-req input { flex: 1; min-width: 0; font: 11px var(--font); padding: 3px 4px; border: 1px solid #7f9db9; }
.t8-result { margin-top: 6px; }
.t8-result p { margin: 3px 0; }
.t8-glitter { font: bold 16px var(--font-head); background: linear-gradient(90deg, #ff3cac, #ffd700, #2bd2ff, #ff3cac); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: t8-glit 2s linear infinite; }
@keyframes t8-glit { to { background-position: 300% 0; } }

/* view all */
.t8-tablewrap { max-height: 360px; overflow: auto; border: 1px solid var(--box-border); }
.t8-table { width: 100%; border-collapse: separate; border-spacing: 1px; font-size: 10px; }
.t8-table th { position: sticky; top: 0; background: #b1d0f0; color: #336699; text-align: left; padding: 2px 4px; }
.t8-table td { background: #d5e8fb; padding: 2px 4px; white-space: nowrap; }
.t8-table tr.t8-in td { background: #ffcc99; }

.t8-pop code { font: 10px/1.3 "Courier New", monospace; word-break: break-all; }
.t8-pop p { margin: 0 0 6px; }

@media (max-width: 720px) {
  .t8-grid { gap: 8px 4px; }
  .t8-pic { width: 72px; }
  .t8-name { font-size: 10px; }
}
@media (max-width: 360px) {
  .t8-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .t8-glitter { animation: none; background-position: 0 0; }
}