.cts-player-panel
{
	box-sizing: border-box;
	width: min(28rem, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
	max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	margin: auto;
	padding: clamp(1rem, 4vw, 1.75rem);
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--cts-player-surface, #101d2a);
	color: var(--cts-player-text, #f4f7fa);
	border: 1px solid var(--cts-player-border, #466075);
	border-radius: var(--cts-player-radius, 1rem);
	font: 1rem/1.5 var(--cts-player-font, system-ui, sans-serif);
	text-align: left;
	color-scheme: dark;
}
.cts-player-panel::backdrop { background: #030911c9; }
.cts-player-panel *, .cts-player-panel *::before, .cts-player-panel *::after { box-sizing: border-box; }
.cts-player-panel [hidden] { display: none !important; }
.cts-player-panel__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.cts-player-panel__title { font: inherit; font-weight: 750; font-size: 1.3rem; margin: 0; }
.cts-player-panel button, .cts-player-panel a
{
	font: inherit;
	min-height: 44px;
	padding: .65rem .85rem;
	border: 1px solid var(--cts-player-border, #466075);
	border-radius: .5rem;
	background: transparent;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.cts-player-panel button:focus-visible, .cts-player-panel a:focus-visible { outline: 3px solid var(--cts-player-accent, #8ee3d6); outline-offset: 3px; }
.cts-player-panel button:disabled { opacity: .6; cursor: wait; }
.cts-player-panel__status { margin-block: 1.25rem; }
.cts-player-panel__card { text-align: center; padding: 1rem 0; border-block: 1px solid var(--cts-player-border, #466075); }
.cts-player-panel__initials { display: inline-grid; place-items: center; min-width: 4.5rem; min-height: 4.5rem; border: 2px solid var(--cts-player-accent, #8ee3d6); border-radius: .6rem; color: var(--cts-player-accent, #8ee3d6); font: 700 1.5rem/1 monospace; letter-spacing: .12em; }
.cts-player-panel__name { margin: .75rem 0 .2rem; font-size: 1.3rem; overflow-wrap: anywhere; }
.cts-player-panel__handle, .cts-player-panel__privacy { margin: .2rem 0; overflow-wrap: anywhere; }
.cts-player-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.cts-player-panel__account { border-color: var(--cts-player-accent, #8ee3d6) !important; }
.cts-player-panel__note { color: var(--cts-player-muted, #c0cfdb); font-size: .875rem; margin: 1rem 0 0; }
@media (prefers-reduced-motion: reduce) { .cts-player-panel { scroll-behavior: auto; } }