.play-online[hidden] { display: none !important; }
/* Use the same window edges, pink header, and pixel type as enrollment. */
.play-online { min-width: 0; margin: 0 0 24px; border: 1px solid #b7bac6; border-radius: 0; background: #fff; color: #07133f; box-shadow: 3px 3px 0 #d9dce4; }
.play-online summary { display: flex; align-items: center; gap: 10px; padding: 12px 10px; background: #fff0f7; cursor: pointer; list-style: none; }
.play-online summary::-webkit-details-marker { display: none; }
.play-online summary::after { content: '+'; display: grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; border: 1px solid #4965a829; border-radius: 50%; background: #ffffffcc; color: #4965a8; font: 700 22px/1 'Barlow Semi Condensed', Arial, sans-serif; flex: none; }
.play-online[open] summary::after { content: '−'; }
.play-online-beacon { width: 8px; height: 8px; border: 1px solid #628d7d; background: #9bcab2; box-shadow: 1px 1px 0 #fff; flex: none; }
.play-online-copy { display: grid; gap: 4px; margin-right: auto; }
.play-online-copy strong { font: 400 16px/1.2 'Easy Pixel', sans-serif; }
.play-online-copy small { color: #69728e; font: 500 12px/1.3 'Barlow Semi Condensed', Arial, sans-serif; }
.play-online-preview { display: flex; padding-left: 7px; flex: none; }
.play-online-preview img { width: 26px; height: 26px; border: 2px solid #fff0f7; border-radius: 50%; object-fit: cover; object-position: top; margin-left: -7px; background: #e5eaf4; }
.play-online-body { border-top: 1px solid #d9dce4; padding: 12px 10px 10px; background: #fffaff; }
.play-online-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; max-height: 280px; overflow-y: auto; padding: 3px; }
.play-online-roster a { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 9px 4px; border: 1px solid transparent; border-radius: 0; background: transparent; color: #293657; text-decoration: none; }
.play-online-roster a:hover { background: #fff0f7; border-color: #e6ccdc; box-shadow: 2px 2px 0 #e9dce5; }
.play-online-roster img { width: 44px; height: 44px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; object-position: top; background: #e5eaf4; box-shadow: 1px 2px 0 #d9dce4; }
.play-online-roster span { max-width: 100%; overflow-wrap: anywhere; text-align: center; font: 600 13px/1.25 'Barlow Semi Condensed', Arial, sans-serif; }
.play-online-status { margin: 10px 3px 0; padding-top: 8px; border-top: 1px solid #ebe4ec; font: 400 12px/1.4 'Barlow Semi Condensed', Arial, sans-serif; color: #69728e; }
.play-online summary:focus-visible, .play-online a:focus-visible { outline: 2px solid #4965a8; outline-offset: -3px; }
@media(max-width: 420px) { .play-online-preview img { width: 21px; height: 21px; } .play-online summary { gap: 8px; } .play-online-copy strong { font-size: 15px; } }
.play-player-search { display: flex; align-items: center; gap: 6px; margin: 0 3px 5px; }
.play-player-search input { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #b7bac6; border-radius: 0; background: #fff; color: #07133f; padding: 8px 10px; font: 400 14px/1.4 'Barlow Semi Condensed', Arial, sans-serif; box-shadow: inset 1px 1px 0 #e8e9ef; }
.play-player-search button, .play-player-pagination button { flex: none; border: 1px solid #cdbbc8; border-radius: 0; background: #fff0f7; color: #4965a8; box-shadow: 2px 2px 0 #e3dce3; padding: 6px 9px; font: 600 13px/1.3 'Barlow Semi Condensed', Arial, sans-serif; cursor: pointer; }
.play-player-search button[hidden], .play-player-pagination[hidden] { display: none; }
.play-player-search-hint { margin: 0 3px 10px; color: #69728e; font: 400 12px/1.3 'Barlow Semi Condensed', Arial, sans-serif; }
.play-player-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 12px 3px 2px; }
.play-player-pagination span { min-width: 38px; text-align: center; color: #69728e; font: 600 13px/1.3 'Barlow Semi Condensed', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.play-player-pagination button:disabled { opacity: .4; cursor: default; box-shadow: none; }
.play-online :is(input, button):focus-visible { outline: 2px solid #4965a8; outline-offset: 2px; }
.play-player-presence { color: #818394; font: 400 11px/1 'Barlow Semi Condensed', Arial, sans-serif; margin-top: -3px; }
.play-player-presence.is-online { color: #437b63; }
.play-player-presence::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 4px; background: #b7bac6; vertical-align: 1px; }
.play-player-presence.is-online::before { background: #88bca2; }
/* Ten players fit as two rows on desktop and adapt to narrow screens. */
.play-online-roster { grid-template-columns: repeat(5, minmax(0, 1fr)); max-height: none; overflow: visible; }
@media(max-width: 560px) { .play-online-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }