.player-activity { position: relative; width: min(100%, 420px); margin: 26px auto 0; padding: 18px; border: 2px solid #111; border-radius: 0; background: #d9d9d9; box-shadow: inset 3px 3px #fff, inset -3px -3px #555, inset 6px 6px #c6c6c6, 3px 3px #111; text-align: left; color: #242424; }
.player-activity__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.player-activity__heading h2 { max-width: 140px; font-size: 14px; line-height: 1.35; }
.player-activity__heading > span { color: #4a4a4a; font-size: 11px; line-height: 1.5; text-align: right; }
.player-activity__status { color: #414141; font-size: 12px; line-height: 1.6; }
.player-activity__status a { color: #145b31; text-decoration: underline; text-underline-offset: 3px; }
.player-activity__calendar { display: grid; grid-template-columns: 21px repeat(var(--activity-weeks, 14), minmax(0, 1fr)); grid-template-rows: 17px repeat(7, auto); gap: 3px; width: 100%; }
.player-activity__month { overflow: hidden; color: #4a4a4a; font-size: 10px; line-height: 14px; white-space: nowrap; align-self: start; }
.player-activity__weekday { color: #4a4a4a; font-size: 10px; align-self: center; line-height: 1; }
.player-activity [data-level="0"] { background: #8b8b8b; }
.player-activity [data-level="1"] { background: #205b37; }
.player-activity [data-level="2"] { background: #27884b; }
.player-activity [data-level="3"] { background: #24b965; }
.player-activity [data-level="4"] { background: #6be195; }
.player-activity [data-level="unknown"] { background: #c6c6c6; border-color: #737373; border-style: dashed; }
.player-activity__day { display: block; width: 100%; min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid #37373780; border-radius: 0; cursor: pointer; touch-action: manipulation; }
.player-activity__day:hover { outline: 1px solid #242424; outline-offset: 1px; }
.player-activity__day:focus-visible { outline: 2px solid #111; outline-offset: 1px; position: relative; z-index: 1; }
.player-activity__summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; margin-top: 16px; font-size: 11px; line-height: 1.5; }
.player-activity__summary strong { font-weight: 700; color: #242424; }
.player-activity__summary span { color: #414141; }
.player-activity__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 9px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 10px; line-height: 1.4; color: #414141; }
.player-activity__legend li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.player-activity__legend i { display: inline-block; width: 10px; height: 10px; border: 1px solid #37373780; border-radius: 0; }
.player-activity__note { margin-top: 12px; color: #4a4a4a; font-size: 10px; line-height: 1.6; }
.player-activity__tooltip { position: absolute; z-index: 5; width: max-content; max-width: calc(100% - 16px); padding: 9px 11px; border: 2px solid #111; border-radius: 0; background: #d9d9d9; color: #242424; box-shadow: inset 2px 2px #fff, inset -2px -2px #555, 2px 2px #111; pointer-events: none; font-size: 11px; line-height: 1.5; }
.player-activity__tooltip strong, .player-activity__tooltip span { display: block; }
.player-activity__tooltip span { color: #414141; }
.player-activity__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 360px) { .player-activity { padding: 13px; } .player-activity__calendar { gap: 2px; } .player-activity__heading { gap: 8px; } }