/*
 * Eternity Showdown — Global Chat Readability
 * Opaque chat surfaces + high-contrast text for lobby, DMs, PMs, and rooms.
 * Loaded after custom.css and before eternity-battle-ui.css via head-custom.html.
 */

/* ── Design tokens ── */
:root {
	/* Soft pastel blue — matches Eternity light room / teal glass (not harsh white) */
	--et-chat-bg: #d9eaf6;
	--et-chat-bg-dark: #12101f;
	--et-chat-surface: #e8f4fb;
	--et-chat-surface-dark: #1a1628;
	--et-chat-border: rgba(56, 140, 180, 0.28);
	--et-chat-border-dark: rgba(148, 163, 184, 0.22);
	--et-chat-text: #1e3a5f;
	--et-chat-text-muted: #3d5a75;
	--et-chat-text-dark: #e2e8f0;
	--et-chat-text-muted-dark: #cbd5e1;
	--et-chat-name: #0c4a6e;
	--et-chat-name-dark: #bfdbfe;
	--et-chat-link: #0369a1;
	--et-chat-link-dark: #93c5fd;
	--et-chat-timestamp: #5a7a96;
	--et-chat-timestamp-dark: #94a3b8;
}

/* ── Opaque chat surfaces (override PS semi-transparent rgba backgrounds) ── */
.chat-log,
.chat-log-add,
.pm-log,
.pm-log-add,
.readable-bg,
.ps-room .chat-log,
.ps-room .chat-log-add,
.ps-room-light .chat-log,
.ps-room-light .chat-log-add,
.mini-window-contents .chat-log,
.mini-window-contents .chat-log-add {
	background: var(--et-chat-bg) !important;
	color: var(--et-chat-text) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

html.dark .chat-log,
html.dark .chat-log-add,
html.dark .pm-log,
html.dark .pm-log-add,
html.dark .readable-bg,
.dark .chat-log,
.dark .chat-log-add,
.dark .pm-log,
.dark .pm-log-add,
.dark .readable-bg,
.dark .ps-room .chat-log,
.dark .ps-room .chat-log-add,
.dark .ps-room-light .chat-log,
.dark .ps-room-light .chat-log-add,
.dark .mini-window-contents .chat-log,
.dark .mini-window-contents .chat-log-add,
html.dark .ps-room.ps-room-light .chat-log,
html.dark .ps-room.ps-room-light .chat-log-add,
.dark .ps-room.ps-room-light .chat-log,
.dark .ps-room.ps-room-light .chat-log-add {
	background: var(--et-chat-bg-dark) !important;
	color: var(--et-chat-text-dark) !important;
}

/* Room shell — keep sidebar/chat panels readable over Eternity bg image */
.ps-room.ps-room-light,
.ps-room-light {
	background: rgba(217, 234, 246, 0.96) !important;
	color: var(--et-chat-text) !important;
}

html.dark .ps-room.ps-room-light,
html.dark .ps-room-light,
.dark .ps-room.ps-room-light,
.dark .ps-room-light {
	background: rgba(18, 16, 31, 0.97) !important;
	color: var(--et-chat-text-dark) !important;
}

.ps-room.ps-room-opaque,
.ps-room-opaque {
	background: var(--et-chat-bg) !important;
	color: var(--et-chat-text) !important;
}

html.dark .ps-room.ps-room-opaque,
.dark .ps-room-opaque {
	background: var(--et-chat-bg-dark) !important;
	color: var(--et-chat-text-dark) !important;
}

/* ── Chat lines ── */
.chat-log .chat,
.chat-log .notice,
.pm-log .chat,
.pm-log .notice,
.message-log .chat,
.message-log .notice {
	color: var(--et-chat-text-muted) !important;
	line-height: 1.45 !important;
}

html.dark .chat-log .chat,
html.dark .chat-log .notice,
html.dark .pm-log .chat,
html.dark .pm-log .notice,
html.dark .message-log .chat,
html.dark .message-log .notice,
.dark .chat-log .chat,
.dark .chat-log .notice,
.dark .pm-log .chat,
.dark .pm-log .notice,
.dark .message-log .chat,
.dark .message-log .notice {
	color: var(--et-chat-text-muted-dark) !important;
}

/* Usernames in chat lines.
 * Never force `color` with !important here: /customcolor hex (custom.css) and
 * BattleLog hash/inline styles must win. Font-weight only. */
.chat-log .chat > strong,
.chat-log .chat > .username,
.pm-log .chat > strong,
.pm-log .chat > .username,
.message-log .chat > strong {
	font-weight: 700 !important;
}

/* Message body */
.chat-log .chat > em,
.chat-log .chat > q,
.pm-log .chat > em,
.pm-log .chat > q,
.message-log .chat > em,
.message-log .chat > q {
	color: var(--et-chat-text) !important;
}

html.dark .chat-log .chat > em,
html.dark .chat-log .chat > q,
html.dark .pm-log .chat > em,
html.dark .pm-log .chat > q,
html.dark .message-log .chat > em,
html.dark .message-log .chat > q,
.dark .chat-log .chat > em,
.dark .battle-log .chat > em,
.dark .chat-log .chat > q,
.dark .battle-log .chat > q,
.dark .pm-log .chat > em,
.dark .pm-log .chat > q,
.dark .message-log .chat > em,
.dark .message-log .chat > q {
	color: var(--et-chat-text-dark) !important;
}

/* Battle log navy glass: pastel light → dark em/q; dark theme → light em/q */
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat em,
html:not(.dark) body:not(.dark) .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat q {
	color: #243f5c !important;
}

html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat em,
html.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat q,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat em,
body.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat q,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat em,
.dark .ps-room.ps-room-light[id^="room-battle-"] .battle-log .message-log .chat q {
	color: #e2e8f0 !important;
}

/* Timestamps & meta */
.chat-log .chat small,
.pm-log .chat small,
.message-log .chat small,
.chat-log .notice small,
.pm-log .notice small {
	color: var(--et-chat-timestamp) !important;
}

html.dark .chat-log .chat small,
html.dark .pm-log .chat small,
html.dark .message-log .chat small,
.dark .chat-log .chat small,
.dark .pm-log .chat small,
.dark .message-log .chat small {
	color: var(--et-chat-timestamp-dark) !important;
}

/* Own messages */
.chat-log .chat.mine,
.pm-log .chat.mine {
	background: rgba(148, 163, 184, 0.14) !important;
}

html.dark .chat-log .chat.mine,
html.dark .pm-log .chat.mine,
.dark .chat-log .chat.mine,
.dark .pm-log .chat.mine {
	background: rgba(168, 85, 247, 0.12) !important;
}

/* Links */
.chat-log a,
.pm-log a,
.message-log a,
.readable-bg a {
	color: var(--et-chat-link) !important;
}

.chat-log a:hover,
.pm-log a:hover,
.message-log a:hover {
	color: #1d4ed8 !important;
}

html.dark .chat-log a,
html.dark .pm-log a,
html.dark .message-log a,
.dark .chat-log a,
.dark .pm-log a,
.dark .message-log a {
	color: var(--et-chat-link-dark) !important;
}

html.dark .chat-log a:hover,
html.dark .pm-log a:hover,
.dark .chat-log a:hover,
.dark .pm-log a:hover {
	color: #bfdbfe !important;
}

/* ── Chat input bar ── */
.chat-log-add,
.pm-log-add {
	border-color: var(--et-chat-border) !important;
	background: var(--et-chat-surface) !important;
}

html.dark .chat-log-add,
html.dark .pm-log-add,
.dark .chat-log-add,
.dark .pm-log-add {
	border-color: var(--et-chat-border-dark) !important;
	background: var(--et-chat-surface-dark) !important;
}

.chat-log-add .textbox,
.pm-log-add .textbox,
.chatbox textarea.textbox {
	color: var(--et-chat-text) !important;
	background: #ffffff !important;
	border-color: var(--et-chat-border) !important;
}

html.dark .chat-log-add .textbox,
html.dark .pm-log-add .textbox,
.dark .chat-log-add .textbox,
.dark .pm-log-add .textbox,
html.dark .chatbox textarea.textbox,
.dark .chatbox textarea.textbox {
	color: var(--et-chat-text-dark) !important;
	background: rgba(0, 0, 0, 0.35) !important;
	border-color: var(--et-chat-border-dark) !important;
}

/* Chatbox name prefix: do not override inline /customcolor (BattleLog.usernameColor). */
/* PS recorta el label a 73px; reservar sitio para nicks de hasta 18 chars. */
.chatbox {
	margin-left: 148px !important;
	margin-right: 4px !important;
	box-sizing: border-box;
}
.chatbox.nolabel {
	margin-left: 6px !important;
}
.chatbox label {
	width: 140px !important;
	margin-left: -146px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

/*
 * Battle rooms: do NOT use the negative-margin label trick.
 * It collides with absolute left offsets (userlist / battle column) and leaves a
 * phantom 148px gap before the username. Use flex instead.
 */
.ps-room[id^="room-battle-"] > .chat-log-add .chatbox {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	margin-left: 4px !important;
	margin-right: 4px !important;
}
.ps-room[id^="room-battle-"] > .chat-log-add .chatbox.nolabel {
	margin-left: 4px !important;
}
.ps-room[id^="room-battle-"] > .chat-log-add .chatbox label {
	float: none !important;
	position: static !important;
	display: block !important;
	margin-left: 0 !important;
	width: auto !important;
	max-width: 140px;
	flex: 0 0 auto;
	padding-top: 4px;
	text-align: right;
}
.ps-room[id^="room-battle-"] > .chat-log-add .chatbox .textbox,
.ps-room[id^="room-battle-"] > .chat-log-add .chatbox pre.textbox,
.ps-room[id^="room-battle-"] > .chat-log-add .chatbox textarea.textbox {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

/* Textbox + log fill room/panel width — scoped to rooms/PMs, NOT .ps-popup overlays. */
.ps-room .chatbox .textbox,
.ps-room .chatbox pre.textbox,
.ps-room .chatbox textarea.textbox,
.ps-room > .chat-log-add .textbox,
.ps-room > .chat-log-add pre.textbox,
.ps-room > .battle-log-add .textbox,
.ps-room > .battle-log-add pre.textbox,
.mini-window-contents .chat-log-add .textbox,
.mini-window-contents .chat-log-add pre.textbox,
.pm-log-add .textbox,
.pm-log-add pre.textbox {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}
.chat-log,
.battle-log,
.chat-log-add:not(.et-spec-compose),
.battle-log-add {
	right: 0 !important;
	width: auto !important;
	box-sizing: border-box;
}
.userlist .button.et-userlist-battleopts {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	font-size: 9pt;
	padding: 3px 4px;
}

/*
 * Origen de conexión (cliente Eternity vs sim): punto de color en el popup
 * de perfil (.userdetails). Ya no se pinta en la userlist (rompía layout
 * sin rango).
 */
.userdetails .eternity-client-origin {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 3px 0 2px;
	color: #9aa3b2;
	font-size: 8pt;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.userdetails .eternity-client-origin .eternity-client-sym {
	display: inline-block;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	border-radius: 50%;
	font-size: 0 !important;
	line-height: 0;
	vertical-align: middle;
}
.userdetails .eternity-client-origin .eternity-client-sym[data-origin="custom"],
.userdetails .eternity-client-origin[data-origin="custom"] .eternity-client-sym {
	background: #2dd4bf;
	box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.45);
}
.userdetails .eternity-client-origin .eternity-client-sym[data-origin="hub"],
.userdetails .eternity-client-origin[data-origin="hub"] .eternity-client-sym {
	background: transparent;
	border: 1.5px solid #c4b5fd;
	box-shadow: none;
}
.userdetails .eternity-client-origin .eternity-client-sym[data-origin="mixed"],
.userdetails .eternity-client-origin[data-origin="mixed"] .eternity-client-sym {
	background: linear-gradient(90deg, #2dd4bf 50%, transparent 50%);
	border: 1.5px solid #c4b5fd;
	box-shadow: none;
}
.dark .userdetails .eternity-client-origin,
html.dark .userdetails .eternity-client-origin,
.ps-popup .userdetails .eternity-client-origin {
	color: #a8b0c0;
}

/* Legacy userlist selectors kept inert (dot removed from list markup). */
.userlist li button.userbutton > .eternity-client-sym {
	display: none !important;
}

/*
 * Userlist (incl. battle modal .ps-popup): never force name colors.
 * Staff ranks render as <strong style="color:…">; baseCustom used to set
 * .ps-popup strong { color:#DDD !important } which made mods look white+outlined.
 * Soften stock dark text-shadow so hash/custom colors stay clean.
 */
.ps-popup .userlist strong,
.ps-popup .userlist span,
.ps-popup .userlist em:not(.group),
.userlist li button.userbutton strong,
.userlist li button.userbutton span,
.userlist li button.userbutton em:not(.group) {
	text-shadow: none;
}
.dark .userlist strong,
.dark .userlist span,
html.dark .userlist strong,
html.dark .userlist span {
	text-shadow: none;
}
/*
 * Away (/away): PS mute gray (#888888) must beat /customcolor rules from custom.css
 * (those use color + -webkit-text-fill-color !important, including [data-away] blocks).
 * Loaded after custom.css — same/higher specificity + later cascade wins.
 */
.userlist li[id*="-userlist-user-"] .userbutton[data-away],
.userlist li[id*="-userlist-user-"] .userbutton[data-away] em:not(.group),
.userlist li[id*="-userlist-user-"] .userbutton[data-away] strong,
.userlist li[id*="-userlist-user-"] .userbutton[data-away] span,
[id*="userlist-user-"] button.username[data-away],
[id*="userlist-user-"] .username[data-away],
[class*="userlist-user-"] .username[data-away],
.userlist .userbutton[data-away],
.userlist .userbutton[data-away] em:not(.group),
.userlist .userbutton[data-away] strong,
.userlist .userbutton[data-away] span {
	color: #888888 !important;
	-webkit-text-fill-color: #888888 !important;
	-moz-text-fill-color: #888888 !important;
}
.userlist .userbutton[data-away] {
	opacity: 0.92;
}

/* Chat usernames while away (strong wraps .username; custom.css paints strong !important) */
.chat-log [class*="chatmessage-"]:has(.username[data-away]) > strong,
.chat-log [class*="chatmessage-"]:has(.username[data-away]) strong,
.pm-log [class*="chatmessage-"]:has(.username[data-away]) > strong,
.pm-log [class*="chatmessage-"]:has(.username[data-away]) strong,
.message-log [class*="chatmessage-"]:has(.username[data-away]) strong,
.chat-log [class*="chatmessage-"] .username[data-away],
.chat-log [class*="chatmessage-"] .username[data-away] *,
.pm-log [class*="chatmessage-"] .username[data-away],
.pm-log [class*="chatmessage-"] .username[data-away] *,
.message-log [class*="chatmessage-"] .username[data-away],
.message-log [class*="chatmessage-"] .username[data-away] *,
.chat-log .username[data-away],
.chat-log .username[data-away] *,
.pm-log .username[data-away],
.pm-log .username[data-away] * {
	color: #888888 !important;
	-webkit-text-fill-color: #888888 !important;
	-moz-text-fill-color: #888888 !important;
}

/* ── Infoboxes (rules, join notices, broadcasts) — not roomintros ── */
.infobox:not(.infobox-roomintro):not(.infobox-staffintro) {
	background: rgba(248, 250, 252, 0.96) !important;
	color: var(--et-chat-text) !important;
	border-color: var(--et-chat-border) !important;
}

html.dark .infobox:not(.infobox-roomintro):not(.infobox-staffintro),
.dark .infobox:not(.infobox-roomintro):not(.infobox-staffintro) {
	background: rgba(26, 22, 40, 0.96) !important;
	color: var(--et-chat-text-dark) !important;
	border-color: var(--et-chat-border-dark) !important;
}

.infobox:not(.infobox-roomintro):not(.infobox-staffintro) strong {
	color: inherit !important;
}

/*
 * Roomintros / staffintros: solo el contenido (estilo Destiny) — sin “showdown box”
 * (borde/fondo/padding del .infobox de PS). El server envuelve con .infobox.infobox-roomintro.
 * Tamaño natural de la imagen/contenido; max-width:100% solo para no desbordar.
 */
.infobox.infobox-roomintro,
.infobox.infobox-staffintro,
.infobox-roomintro,
.infobox-staffintro,
.infobox-roomintro .infobox-limited,
.infobox-staffintro .infobox-limited {
	background: transparent !important;
	border: none !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 4px !important;
	box-shadow: none !important;
	outline: none !important;
	color: inherit !important;
	overflow: visible !important;
}

html.dark .infobox.infobox-roomintro,
html.dark .infobox.infobox-staffintro,
html.dark .infobox-roomintro,
html.dark .infobox-staffintro,
html.dark .infobox-roomintro .infobox-limited,
html.dark .infobox-staffintro .infobox-limited,
.dark .infobox.infobox-roomintro,
.dark .infobox.infobox-staffintro,
.dark .infobox-roomintro,
.dark .infobox-staffintro,
.dark .infobox-roomintro .infobox-limited,
.dark .infobox-staffintro .infobox-limited {
	background: transparent !important;
	border: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	color: inherit !important;
}

.infobox-roomintro > div,
.infobox-staffintro > div {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Evitar overflow horizontal; no forzar width:100% ni tope de altura agresivo */
.infobox-roomintro img,
.infobox-staffintro img,
.infobox.infobox-roomintro img,
.infobox.infobox-staffintro img {
	max-width: 100% !important;
	height: auto !important;
}

/* Section headers in chat logs (battle log h2 styled in eternity-battle-ui.css) */
.chat-log h2,
.pm-log h2 {
	font-size: 10pt !important;
	font-weight: 700 !important;
	margin: 10px 0 6px !important;
	padding: 5px 10px !important;
	border-color: var(--et-chat-border) !important;
	background: rgba(148, 163, 184, 0.12) !important;
	color: var(--et-chat-text) !important;
}

html.dark .chat-log h2,
html.dark .pm-log h2,
.dark .chat-log h2,
.dark .pm-log h2 {
	background: rgba(168, 85, 247, 0.14) !important;
	border-color: var(--et-chat-border-dark) !important;
	color: var(--et-chat-text-dark) !important;
}

/* ── PM windows & news ── */
.pm-window h3,
.newsentry,
.newsentry h4,
.newsentry p {
	color: inherit;
}

html.dark .pm-window h3,
html.dark .newsentry,
.dark .pm-window h3,
.dark .newsentry {
	color: var(--et-chat-text-dark) !important;
}

html.dark .newsentry h4,
.dark .newsentry h4 {
	color: #f1f5f9 !important;
}

html.dark .newsentry small.date,
.dark .newsentry small.date {
	color: var(--et-chat-timestamp-dark) !important;
}

/* ── Highlights & system messages ── */
.highlighted,
.chat.highlighted {
	background: rgba(250, 204, 21, 0.22) !important;
}

html.dark .highlighted,
html.dark .chat.highlighted,
.dark .highlighted,
.dark .chat.highlighted {
	background: rgba(34, 211, 238, 0.16) !important;
}

.message-error,
.message-throttle-notice {
	color: #b91c1c !important;
}

html.dark .message-error,
html.dark .message-throttle-notice,
.dark .message-error,
.dark .message-throttle-notice {
	color: #fca5a5 !important;
}

.message-pm {
	color: #15803d !important;
}

html.dark .message-pm,
.dark .message-pm {
	color: #86efac !important;
}

.message-announce,
.broadcast-green,
.broadcast-blue,
.broadcast-red {
	color: #ffffff !important;
}

/* ── /dt utilichart blocks (chat + battle log + replays) ── */
html.dark .chat-log .utilichart,
html.dark .battle-log .utilichart,
html.dark .pm-log .utilichart,
html.dark .message .utilichart,
html.dark .chat .utilichart,
html.dark .notice .utilichart,
html.dark .infobox .utilichart,
.dark .chat-log .utilichart,
.dark .battle-log .utilichart,
.dark .pm-log .utilichart,
.dark .message .utilichart,
.dark .chat .utilichart,
.dark .notice .utilichart,
.dark .infobox .utilichart {
	color: var(--et-chat-text-dark) !important;
}

html.dark .chat-log .utilichart,
html.dark .battle-log .chat .message .utilichart,
html.dark .battle-log .message-log .chat .message .utilichart,
html.dark .pm-log .utilichart,
html.dark .message .utilichart,
html.dark .chat .utilichart,
html.dark .notice .utilichart,
html.dark .infobox .utilichart,
html[data-theme="dark"] .chat-log .utilichart,
html[data-theme="dark"] .battle-log .utilichart,
html[data-theme="dark"] .message .utilichart,
html[data-theme="dark"] .chat .utilichart,
.dark .chat-log .utilichart,
.dark .battle-log .chat .message .utilichart,
.dark .battle-log .message-log .chat .message .utilichart,
.dark .pm-log .utilichart,
.dark .message .utilichart,
.dark .chat .utilichart,
.dark .notice .utilichart,
.dark .infobox .utilichart {
	background: rgba(22, 18, 36, 0.97) !important;
	border: 1px solid rgba(148, 163, 184, 0.26) !important;
	border-radius: 10px !important;
	margin: 6px 0 !important;
	padding: 4px 6px 6px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.26) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

html.dark .chat-log .utilichart .result,
html.dark .battle-log .utilichart .result,
html.dark .battle-log .utilichart li.result,
html.dark .battle-log .chat .utilichart .result,
html.dark .battle-log .chat .utilichart li.result,
html.dark .battle-log .message-log .chat .utilichart .result,
html.dark .battle-log .message-log .chat .utilichart li.result,
html.dark .pm-log .utilichart .result,
html.dark .message .utilichart .result,
html.dark .chat .utilichart .result,
html.dark .notice .utilichart .result,
html.dark .infobox .utilichart .result,
html[data-theme="dark"] .utilichart .result,
html[data-theme="dark"] .utilichart li.result,
.dark .chat-log .utilichart .result,
.dark .battle-log .utilichart .result,
.dark .battle-log .utilichart li.result,
.dark .battle-log .chat .utilichart .result,
.dark .battle-log .chat .utilichart li.result,
.dark .pm-log .utilichart .result,
.dark .message .utilichart .result,
.dark .chat .utilichart .result,
.dark .notice .utilichart .result,
.dark .infobox .utilichart .result {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	height: auto !important;
	contain: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

html.dark .utilichart h3,
html.dark .utilichart .resultheader h3,
html.dark .dexentry h3,
.dark .utilichart h3,
.dark .utilichart .resultheader h3,
.dark .dexentry h3 {
	background: rgba(168, 85, 247, 0.22) !important;
	color: #f1f5f9 !important;
	border-color: rgba(148, 163, 184, 0.28) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html.dark .utilichart .col,
html.dark .utilichart .namecol,
html.dark .utilichart .pokemonnamecol,
html.dark .utilichart .movenamecol,
html.dark .utilichart .statcol,
html.dark .utilichart .bstcol,
html.dark .utilichart .labelcol,
html.dark .utilichart .widelabelcol,
html.dark .utilichart .pplabelcol,
html.dark .utilichart .itemdesccol,
html.dark .utilichart .abilitydesccol,
html.dark .utilichart .movedesccol,
html.dark .utilichart b,
html.dark .utilichart small,
html[data-theme="dark"] .utilichart .col,
html[data-theme="dark"] .utilichart .statcol,
html[data-theme="dark"] .utilichart .bstcol,
.dark .utilichart .col,
.dark .utilichart .namecol,
.dark .utilichart .pokemonnamecol,
.dark .utilichart .movenamecol,
.dark .utilichart .statcol,
.dark .utilichart .bstcol,
.dark .utilichart .labelcol,
.dark .utilichart .widelabelcol,
.dark .utilichart .pplabelcol,
.dark .utilichart .itemdesccol,
.dark .utilichart .abilitydesccol,
.dark .utilichart .movedesccol,
.dark .utilichart b,
.dark .utilichart small {
	color: #e2e8f0 !important;
	-webkit-text-fill-color: #e2e8f0 !important;
}

html.dark .utilichart .labelcol em,
html.dark .utilichart .widelabelcol em,
html.dark .utilichart .pplabelcol em,
html.dark .utilichart .statcol em,
html.dark .utilichart .bstcol em,
html.dark .utilichart .stattitlecol,
html.dark .utilichart small,
.dark .utilichart .labelcol em,
.dark .utilichart .widelabelcol em,
.dark .utilichart .pplabelcol em,
.dark .utilichart .statcol em,
.dark .utilichart .bstcol em,
.dark .utilichart .stattitlecol,
.dark .utilichart small {
	color: #94a3b8 !important;
}

html.dark .utilichart a,
.dark .utilichart a {
	color: var(--et-chat-link-dark) !important;
}

html.dark .battle-log .message,
html.dark .battle-log div.battle-history .message,
.dark .battle-log .message,
.dark .battle-log div.battle-history .message {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* TTS: small volume icon to the right of chat usernames on /tts lines */
.chat .et-tts-icon,
.battle-log .et-tts-icon,
.pm-log .et-tts-icon {
	display: inline-block;
	font-size: 12px;
	width: 13px;
	height: 13px;
	line-height: 1;
	margin: 0 2px 0 3px;
	vertical-align: middle;
	opacity: 0.75;
	cursor: help;
	color: inherit;
	speak: none;
}
.chat .et-tts-icon:hover,
.battle-log .et-tts-icon:hover,
.pm-log .et-tts-icon:hover {
	opacity: 1;
}

/*
 * Compact native <audio controls> for /tts chat clips only.
 * Scoped by src path so roomintro/staffintro (/show, etc.) stay full size.
 */
.chat-log audio[src*="/tts/"],
.battle-log audio[src*="/tts/"],
.pm-log audio[src*="/tts/"],
.chat audio[src*="/tts/"] {
	display: inline-block;
	height: 30px;
	max-width: 240px;
	width: 240px;
	vertical-align: middle;
	transform: scale(0.85);
	transform-origin: left center;
	/* reclaim layout space left by scale(0.85) */
	margin: 2px calc(-240px * 0.15) 2px 0;
}
.dark .chat-log audio[src*="/tts/"],
.dark .battle-log audio[src*="/tts/"],
.dark .pm-log audio[src*="/tts/"],
.dark .chat audio[src*="/tts/"] {
	color-scheme: dark;
}

/* Hide native volume / mute on TTS players (Chromium). Firefox: volume forced in JS. */
audio[src*="/tts/"]::-webkit-media-controls-volume-control-container,
audio[src*="/tts/"]::-webkit-media-controls-volume-slider,
audio[src*="/tts/"]::-webkit-media-controls-mute-button {
	display: none !important;
}

/* ── Eternity FM dock — v20260820fmstyle ────────────────────────────── */
#eternity-radio-dock {
	position: fixed;
	z-index: 99990;
	bottom: 16px;
	right: 16px;
	width: 400px;
	max-width: calc(100vw - 16px);
	background: linear-gradient(165deg, #1c1528 0%, #141018 55%, #12101a 100%);
	border: 1px solid rgba(167, 139, 250, .32);
	border-radius: 12px;
	box-shadow:
		0 14px 40px rgba(0, 0, 0, .72),
		0 0 0 1px rgba(0, 0, 0, .45),
		inset 0 1px 0 rgba(255, 255, 255, .06);
	color: #f1f5f9;
	font-family: inherit;
	user-select: none;
	overflow: hidden;
	transition: box-shadow .2s ease;
}
#eternity-radio-dock[hidden] { display: none !important; }
/* Minimizado: fuera de pantalla, SIN display:none (YouTube pausa el iframe si no es visible). */
#eternity-radio-dock.et-jam-dock--parked {
	position: fixed !important;
	left: -10000px !important;
	top: 0 !important;
	width: 400px !important;
	height: 225px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	z-index: -1 !important;
	box-shadow: none !important;
	border: 0 !important;
}

.et-jam-dock__chassis { display: flex; flex-direction: column; position: relative; }

/* Detalles de chasis (sutiles) */
.et-jam-dock__screw {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #5b6472, #2a2f3a);
	border: 1px solid rgba(0, 0, 0, .55);
	position: absolute;
	opacity: .55;
}
.et-jam-dock__screw--tl { top: 6px; left: 7px; }
.et-jam-dock__screw--tr { top: 6px; right: 7px; }
.et-jam-dock__screw--bl { bottom: 6px; left: 7px; }
.et-jam-dock__screw--br { bottom: 6px; right: 7px; }
.et-jam-dock__handle {
	height: 5px;
	background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 2px, transparent 2px, transparent 7px);
	opacity: .85;
}
.et-jam-dock__stripe {
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, #7c3aed 18%, #c084fc 50%, #7c3aed 82%, transparent 100%);
	opacity: .9;
}

.et-jam-dock__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 10px;
	background: linear-gradient(180deg, rgba(56, 30, 96, .95) 0%, rgba(28, 18, 48, .98) 100%);
	border-bottom: 1px solid rgba(167, 139, 250, .14);
	cursor: move;
}
.et-jam-dock__brand {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	color: #e9d5ff;
	flex: 1;
	text-align: center;
	text-shadow: 0 0 18px rgba(192, 132, 252, .35);
}
.et-jam-dock__freq {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #c4b5fd;
	opacity: .75;
	font-variant-numeric: tabular-nums;
}
.et-jam-dock__room {
	font-size: 10px;
	color: #94a3b8;
	max-width: 72px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: .85;
}
.et-jam-dock__leds { display: flex; gap: 5px; align-items: center; font-size: 8px; letter-spacing: .04em; }
.et-jam-dock__led,
.et-jam-dock__live {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .38);
	border: 1px solid rgba(255, 255, 255, .06);
	color: #94a3b8;
	font-weight: 600;
}
.et-jam-dock__live i,
.et-jam-dock__led i {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4b5563;
}
#eternity-radio-dock.et-jam-dock--standby .et-jam-dock__live i { background: #f59e0b; box-shadow: 0 0 5px #f59e0b; }
#eternity-radio-dock.et-jam-dock--playing .et-jam-dock__live i,
#eternity-radio-dock.et-jam-dock--parked .et-jam-dock__live i,
#eternity-radio-dock.et-jam-dock--playing .et-jam-dock__led i { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.et-jam-dock__led--pwr i { background: #22c55e !important; box-shadow: 0 0 5px #22c55e !important; }
.et-jam-dock__min {
	border: 0;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 2px 4px;
	margin-left: 2px;
	border-radius: 4px;
	flex-shrink: 0;
}
.et-jam-dock__min:hover { color: #fca5a5; background: rgba(248, 113, 113, .12); }
.et-jam-dock__skip {
	border: 0;
	background: rgba(167, 139, 250, .14);
	color: #e9d5ff;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 3px 7px;
	margin-left: auto;
	border-radius: 4px;
	flex-shrink: 0;
}
.et-jam-dock__skip:hover { color: #fff; background: rgba(167, 139, 250, .32); }
.et-jam-dock__skip.et-jam-skip--active { background: rgba(167, 139, 250, .38); color: #fff; }

.et-jam-dock__lcd {
	padding: 10px 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.et-jam-dock__screen {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #050508;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .55),
		0 0 24px rgba(88, 28, 135, .12);
}
#eternity-radio-player,
#eternity-radio-player iframe,
#eternity-radio-player > div {
	position: absolute !important;
	inset: 0 !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	border: 0;
	display: block;
	box-sizing: border-box;
}
.et-radio-shield { position: absolute; inset: 0; z-index: 2; background: transparent; }
/* Unmute por gesto global (sin overlay "Pulsa para oír"). */

.et-jam-dock__now {
	display: flex;
	gap: 10px;
	align-items: center;
	min-height: 48px;
}
.et-jam-dock__art {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
	background: #0f0f14;
}
.et-jam-dock__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.et-jam-dock__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #f8fafc;
}
.et-jam-dock__meta {
	font-size: 11px;
	line-height: 1.3;
	color: #94a3b8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.et-jam-dock__eq {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 26px;
	width: 100%;
	padding: 4px 6px 2px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, .28);
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: 6px;
}
.et-jam-dock__eq span {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	background: rgba(100, 116, 139, .55);
	border-radius: 2px 2px 0 0;
	height: 4px;
	transform-origin: bottom center;
}
/* Barras EQ: on-air con player activo (muted autoplay cuenta; no depende del gesto unmute) */
#eternity-radio-dock.et-jam-dock--eq-live .et-jam-dock__eq span {
	background: linear-gradient(180deg, #e9d5ff 0%, #a78bfa 55%, #7c3aed 100%);
	animation: etEqBar 0.9s ease-in-out infinite alternate;
}
#eternity-radio-dock.et-jam-dock--eq-live .et-jam-dock__eq span:nth-child(6n+1) { animation-duration: 0.7s; animation-delay: 0.00s; }
#eternity-radio-dock.et-jam-dock--eq-live .et-jam-dock__eq span:nth-child(6n+2) { animation-duration: 0.5s; animation-delay: 0.10s; }
#eternity-radio-dock.et-jam-dock--eq-live .et-jam-dock__eq span:nth-child(6n+3) { animation-duration: 0.8s; animation-delay: 0.05s; }
#eternity-radio-dock.et-jam-dock--eq-live .et-jam-dock__eq span:nth-child(6n+4) { animation-duration: 0.6s; animation-delay: 0.20s; }
#eternity-radio-dock.et-jam-dock--eq-live .et-jam-dock__eq span:nth-child(6n+5) { animation-duration: 0.9s; animation-delay: 0.15s; }
#eternity-radio-dock.et-jam-dock--eq-live .et-jam-dock__eq span:nth-child(6n)   { animation-duration: 0.55s; animation-delay: 0.08s; }
@keyframes etEqBar {
	from { height: 3px; }
	to   { height: 20px; }
}

.et-jam-dock__request {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px 6px;
	border-top: 1px solid rgba(167, 139, 250, .12);
	background: rgba(0, 0, 0, .18);
	cursor: default;
}
.et-jam-dock__request-input {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	padding: 5px 8px;
	border-radius: 6px;
	border: 1px solid rgba(167, 139, 250, .28);
	background: rgba(15, 10, 24, .92);
	color: #f8fafc;
	user-select: text;
	cursor: text;
}
.et-jam-dock__request-input::placeholder { color: rgba(203, 213, 225, .55); }
.et-jam-dock__request-btn {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid rgba(167, 139, 250, .35);
	background: linear-gradient(180deg, rgba(124, 58, 237, .85), rgba(76, 29, 149, .95));
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.et-jam-dock__request-btn:hover {
	background: linear-gradient(180deg, rgba(139, 92, 246, .95), rgba(91, 33, 182, .98));
}
.et-jam-dock__request-preview {
	padding: 0 10px 8px;
	font-size: 11px;
	line-height: 1.35;
	color: rgba(226, 232, 240, .82);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: text;
	cursor: default;
}
.et-jam-dock__request-preview[hidden] { display: none !important; }
.et-jam-dock__request-preview--ok { color: #bbf7d0; }
.et-jam-dock__request-preview--link { color: #c4b5fd; }
.et-jam-dock__request-preview--pending { color: #fde68a; }
.et-jam-dock__request-preview--warn { color: #fca5a5; }

/* Pill */
#eternity-radio-pill {
	position: fixed;
	z-index: 99989;
	bottom: 16px;
	right: 16px;
	background: linear-gradient(135deg, #2e1065, #1e1b4b);
	color: #e9d5ff;
	border: 1px solid rgba(167, 139, 250, .5);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
	user-select: none;
	white-space: nowrap;
}
#eternity-radio-pill[hidden] { display: none !important; }
#eternity-radio-pill i {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4b5563;
}
#eternity-radio-pill.et-jam-pill--live i { background: #22c55e; box-shadow: 0 0 5px #22c55e; animation: etRadioPulse 1.2s ease-in-out infinite; }
#eternity-radio-pill.et-jam-pill--standby i { background: #f59e0b; }
.et-jam-pill__close {
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, .5);
	cursor: pointer;
	font-size: 14px;
	padding: 0 0 0 4px;
	line-height: 1;
}
.et-jam-pill__close:hover { color: #f87171; }
.et-jam-pill__skip {
	border: 0;
	background: transparent;
	color: rgba(233, 213, 255, .85);
	cursor: pointer;
	font-size: 12px;
	padding: 0 2px 0 6px;
	line-height: 1;
}
.et-jam-pill__skip:hover { color: #fff; }
.et-jam-pill__skip.et-jam-skip--active { color: #f5d0fe; }

@keyframes etRadioPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .4; }
}
.et-jam-dock--dragging,
.et-jam-pill--dragging { opacity: .85; cursor: grabbing !important; }

/* ── Eternity FM special: «se fue la luz» (YT w0h4YNI_aHI) ───────────
   Debe ganar a body::before de custom.css (banner brillante) y a las
   reglas .ps-room-light / .chat-log de este mismo archivo (más específicas). */
#eternity-fm-special-bg.eternity-fm-special-bg {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	display: none;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	filter: brightness(0.55) contrast(1.12) saturate(0.75);
}
html.eternity-fm-special #eternity-fm-special-bg,
body.eternity-fm-special #eternity-fm-special-bg {
	display: block;
}

/* Apaga el banner/fondo brillante de custom.css (body::before z-index:-1) */
html.eternity-fm-special body::before,
html.eternity-fm-special.dark body::before,
html.dark.eternity-fm-special body::before,
body.eternity-fm-special::before,
body.eternity-fm-special.dark::before,
.dark body.eternity-fm-special::before {
	display: none !important;
	content: none !important;
	background: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

html.eternity-fm-special,
html.eternity-fm-special body,
html.eternity-fm-special.dark,
html.eternity-fm-special.dark body,
body.eternity-fm-special {
	background: #000 !important;
	background-image: none !important;
	color: #9a8f8a !important;
	/* glow rojo sutil tipo ojos de Freddy */
	box-shadow: inset 0 0 120px rgba(120, 0, 0, 0.35) !important;
}

/*
 * Durante el tema especial: ocultar TODA la UI que tapa el fondo (Inicio,
 * salas .ps-room, roomlist, PMs, tabs, overlays). Solo quedan el GIF de
 * fondo y el dock/pill de FM (con skip). Al quitar .eternity-fm-special se restaura.
 */
html.eternity-fm-special #header,
html.eternity-fm-special .header,
html.eternity-fm-special .maintabbarbottom,
html.eternity-fm-special .tabbar,
html.eternity-fm-special .tabbar.maintabbar,
html.eternity-fm-special .roomtabbar,
html.eternity-fm-special .ps-room,
html.eternity-fm-special .ps-room.ps-room-light,
html.eternity-fm-special .ps-room.ps-room-opaque,
html.eternity-fm-special .mainmenuwrapper,
html.eternity-fm-special .leftmenu,
html.eternity-fm-special .rightmenu,
html.eternity-fm-special .mainmenu,
html.eternity-fm-special .mainmenufooter,
html.eternity-fm-special .mainmenu-footer,
html.eternity-fm-special .mainmenu-left,
html.eternity-fm-special .mainmenu-right,
html.eternity-fm-special .mainmenu-mini-windows,
html.eternity-fm-special .menugroup,
html.eternity-fm-special .roomlist,
html.eternity-fm-special .pm-box,
html.eternity-fm-special .pm-window,
html.eternity-fm-special .mini-window,
html.eternity-fm-special .ps-overlay,
html.eternity-fm-special #lobby-join-prompt,
html.eternity-fm-special .lobby-join-prompt,
html.eternity-fm-special .newsentry,
html.eternity-fm-special .ladder {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Por si algún hijo queda con visibility forzada / stacking encima del GIF */
html.eternity-fm-special .ps-room *,
html.eternity-fm-special .mainmenuwrapper *,
html.eternity-fm-special .header *,
html.eternity-fm-special #header * {
	pointer-events: none !important;
}

/* Dock / pill FM siempre interactivo y por encima del fondo (skip incluido) */
html.eternity-fm-special #eternity-radio-dock,
html.eternity-fm-special #eternity-radio-pill,
html.eternity-fm-special #eternity-radio-dock *,
html.eternity-fm-special #eternity-radio-pill * {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}
html.eternity-fm-special #eternity-radio-dock,
html.eternity-fm-special #eternity-radio-pill {
	position: fixed !important;
	z-index: 2147483000 !important;
	display: block !important;
	filter: saturate(0.55) brightness(0.85);
	box-shadow: 0 0 24px rgba(100, 0, 0, 0.45);
}
/* Parked debe seguir fuera de pantalla (no “revivir” con opacity del tema especial) */
html.eternity-fm-special #eternity-radio-dock.et-jam-dock--parked {
	left: -10000px !important;
	top: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	z-index: -1 !important;
	filter: none;
	box-shadow: none;
}
html.eternity-fm-special #eternity-radio-dock[hidden],
html.eternity-fm-special #eternity-radio-pill[hidden] {
	display: none !important;
}
html.eternity-fm-special .et-jam-dock__skip,
html.eternity-fm-special .et-jam-pill__skip {
	background: rgba(180, 40, 40, .35) !important;
	color: #fecaca !important;
}

/* ── Eternity FM panel (view-radio-[sala]) — v20260822fmpanel ───────── */
.ps-room[id^="room-view-radio-"] .page-html-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 28px 20px 48px;
	box-sizing: border-box;
	min-height: calc(100vh - 100px);
	background:
		radial-gradient(ellipse 85% 55% at 50% -8%, rgba(124, 58, 237, 0.2), transparent 58%),
		radial-gradient(ellipse 55% 45% at 100% 100%, rgba(59, 130, 246, 0.1), transparent 52%);
}

.et-fm-panel.et-fm-queue {
	width: 100%;
	max-width: 560px;
	margin: 0;
	padding: 0 !important;
	border-radius: 18px;
	background: linear-gradient(165deg, rgba(28, 21, 40, 0.94) 0%, rgba(16, 14, 24, 0.98) 100%);
	border: 1px solid rgba(167, 139, 250, 0.32);
	box-shadow:
		0 24px 56px rgba(0, 0, 0, 0.58),
		0 0 0 1px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: #f1f5f9;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.4;
}

.et-fm-qhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(180deg, rgba(76, 29, 149, 0.55) 0%, rgba(30, 18, 52, 0.92) 100%);
	border-bottom: 1px solid rgba(167, 139, 250, 0.18);
}
.et-fm-qhead__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}
.et-fm-qhead__live i {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #64748b;
	box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.25);
}
.et-fm-panel--live .et-fm-qhead__live i {
	background: #22c55e;
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.65);
	animation: etRadioPulse 1.4s ease-in-out infinite;
}
.et-fm-panel--standby .et-fm-qhead__live i {
	background: #f59e0b;
	box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.et-fm-qhead__titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.et-fm-qbrand {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #f3e8ff;
	text-shadow: 0 0 20px rgba(192, 132, 252, 0.35);
}
.et-fm-qroom {
	font-size: 12px;
	color: #cbd5e1;
	opacity: 0.9;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.et-fm-qhead__acts {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.et-fm-panel .button.et-fm-qbtn,
.et-fm-panel a.button.et-fm-qbtn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 6px 12px !important;
	margin: 0 !important;
	border-radius: 8px !important;
	border: 1px solid rgba(167, 139, 250, 0.38) !important;
	background: rgba(124, 58, 237, 0.24) !important;
	color: #ede9fe !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.et-fm-panel .button.et-fm-qbtn:hover,
.et-fm-panel a.button.et-fm-qbtn:hover {
	background: rgba(139, 92, 246, 0.38) !important;
	border-color: rgba(196, 181, 253, 0.55) !important;
	color: #fff !important;
}
.et-fm-panel .button.et-fm-qbtn:active,
.et-fm-panel a.button.et-fm-qbtn:active {
	transform: scale(0.97);
}
.et-fm-panel .button.et-fm-qbtn--ghost {
	background: rgba(15, 23, 42, 0.35) !important;
	border-color: rgba(148, 163, 184, 0.28) !important;
	color: #cbd5e1 !important;
	min-width: 32px;
	padding: 6px 8px !important;
}
.et-fm-panel .button.et-fm-qbtn--ghost:hover {
	background: rgba(51, 65, 85, 0.45) !important;
	color: #f8fafc !important;
}
.et-fm-panel .button.et-fm-qbtn--danger {
	background: rgba(127, 29, 29, 0.45) !important;
	border-color: rgba(248, 113, 113, 0.45) !important;
	color: #fecaca !important;
}
.et-fm-panel .button.et-fm-qbtn--danger:hover {
	background: rgba(185, 28, 28, 0.55) !important;
	color: #fff !important;
}
.et-fm-panel .button.et-fm-qbtn--skip {
	background: rgba(88, 28, 135, 0.42) !important;
}
.et-fm-panel .button.et-fm-qbtn--icon {
	min-width: 30px;
	min-height: 30px;
	padding: 4px 8px !important;
	font-size: 16px !important;
	line-height: 1 !important;
}
.et-fm-panel .button.et-fm-qbtn--link {
	background: rgba(30, 58, 138, 0.35) !important;
	border-color: rgba(96, 165, 250, 0.4) !important;
	color: #bfdbfe !important;
}

.et-fm-now {
	padding: 16px;
	border-bottom: 1px solid rgba(167, 139, 250, 0.12);
}
.et-fm-now__hero {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.et-fm-now__art {
	width: 120px;
	height: 90px;
	object-fit: cover;
	border-radius: 12px;
	flex-shrink: 0;
	border: 1px solid rgba(167, 139, 250, 0.28);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	background: #0f0f14;
}
.et-fm-now__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.et-fm-now__tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #c4b5fd;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(124, 58, 237, 0.22);
	border: 1px solid rgba(167, 139, 250, 0.25);
	width: fit-content;
}
.et-fm-now__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #f8fafc;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.et-fm-now__by {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 12px;
	color: #94a3b8;
}
.et-fm-now__channel {
	color: #cbd5e1;
}
.et-fm-now__requester {
	color: #a78bfa;
}
.et-fm-now__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
.et-fm-now__empty {
	text-align: center;
	padding: 28px 16px;
}
.et-fm-now__empty--mini {
	padding: 12px 0;
}
.et-fm-now__empty-icon {
	display: block;
	font-size: 28px;
	margin-bottom: 8px;
	opacity: 0.55;
}
.et-fm-now__empty-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: #e2e8f0;
}
.et-fm-now__empty-sub {
	margin: 0;
	font-size: 13px;
	color: #94a3b8;
}

.et-fm-qlist {
	padding: 14px 16px 6px;
}
.et-fm-qlist__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.et-fm-qlist__label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #c4b5fd;
}
.et-fm-qlist__count {
	font-size: 11px;
	font-weight: 700;
	color: #e9d5ff;
	background: rgba(124, 58, 237, 0.28);
	border: 1px solid rgba(167, 139, 250, 0.3);
	border-radius: 999px;
	padding: 2px 8px;
	font-variant-numeric: tabular-nums;
}
.et-fm-qrows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 240px;
	overflow-y: auto;
	padding-right: 2px;
	scrollbar-width: thin;
	scrollbar-color: rgba(167, 139, 250, 0.45) transparent;
}
.et-fm-qrows::-webkit-scrollbar {
	width: 6px;
}
.et-fm-qrows::-webkit-scrollbar-thumb {
	background: rgba(167, 139, 250, 0.45);
	border-radius: 999px;
}
.et-fm-qrow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(15, 10, 24, 0.55);
	border: 1px solid rgba(148, 163, 184, 0.12);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.et-fm-qrow:hover {
	background: rgba(30, 22, 48, 0.75);
	border-color: rgba(167, 139, 250, 0.22);
}
.et-fm-qrow--dragging {
	opacity: 0.55;
}
.et-fm-qrow--over {
	border-color: rgba(167, 139, 250, 0.55) !important;
	background: rgba(76, 29, 149, 0.28) !important;
}
.et-fm-qrow__grip {
	flex: 0 0 14px;
	color: #64748b;
	font-size: 11px;
	line-height: 1;
	cursor: grab;
	user-select: none;
	text-align: center;
}
.et-fm-queue--manage .et-fm-qrow__grip:hover {
	color: #c4b5fd;
}
.et-fm-qrow__grip--spacer {
	cursor: default;
	opacity: 0;
}
.et-fm-qrow__n {
	flex: 0 0 22px;
	font-size: 12px;
	font-weight: 700;
	color: #a78bfa;
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.et-fm-qrow__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.et-fm-qrow__title {
	font-size: 13px;
	font-weight: 600;
	color: #f1f5f9;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.et-fm-qrow__by {
	font-size: 11px;
	color: #94a3b8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.et-fm-qempty {
	padding: 20px 12px;
	text-align: center;
	color: #94a3b8;
	font-size: 13px;
}
.et-fm-qempty--mini {
	padding: 12px;
	font-size: 12px;
	border-radius: 10px;
	background: rgba(15, 10, 24, 0.4);
	border: 1px dashed rgba(148, 163, 184, 0.2);
}

.et-fm-request {
	padding: 14px 16px 12px;
	border-top: 1px solid rgba(167, 139, 250, 0.14);
	background: rgba(0, 0, 0, 0.18);
}
.et-fm-request__label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #c4b5fd;
}
.et-fm-request__row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
.et-fm-request__input {
	flex: 1;
	min-width: 0;
	font-size: 13px !important;
	padding: 9px 12px !important;
	border-radius: 10px !important;
	border: 1px solid rgba(167, 139, 250, 0.32) !important;
	background: rgba(15, 10, 24, 0.88) !important;
	color: #f8fafc !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}
.et-fm-request__input::placeholder {
	color: rgba(203, 213, 225, 0.5) !important;
}
.et-fm-request__input:focus {
	outline: none;
	border-color: rgba(196, 181, 253, 0.65) !important;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22) !important;
}
.et-fm-request__btn {
	flex: 0 0 auto;
	min-width: 72px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid rgba(167, 139, 250, 0.45);
	background: linear-gradient(180deg, rgba(139, 92, 246, 0.92), rgba(91, 33, 182, 0.98));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.1s ease;
}
.et-fm-request__btn:hover {
	filter: brightness(1.08);
}
.et-fm-request__btn:active {
	transform: scale(0.98);
}
.et-fm-request__preview {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.35;
	color: rgba(226, 232, 240, 0.85);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.et-fm-request__preview[hidden] { display: none !important; }
.et-fm-request__preview--ok { color: #bbf7d0; }
.et-fm-request__preview--link { color: #c4b5fd; }
.et-fm-request__preview--pending { color: #fde68a; }
.et-fm-request__preview--warn { color: #fca5a5; }

.et-fm-qfoot {
	margin: 0;
	padding: 0 16px 14px;
	font-size: 11px;
	color: #64748b;
	text-align: center;
}
.et-fm-qfoot code {
	font-size: 10px;
	color: #94a3b8;
	background: rgba(15, 10, 24, 0.5);
	padding: 1px 5px;
	border-radius: 4px;
}

@media (max-width: 520px) {
	.ps-room[id^="room-view-radio-"] .page-html-container {
		padding: 12px 10px 32px;
	}
	.et-fm-now__hero {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.et-fm-now__art {
		width: 100%;
		max-width: 280px;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.et-fm-now__body {
		align-items: center;
	}
	.et-fm-now__acts {
		justify-content: center;
	}
	.et-fm-request__row {
		flex-direction: column;
	}
	.et-fm-request__btn {
		min-height: 40px;
	}
}

/* ── Pinned chat message (QoL) — WhatsApp-like slim header ──
   .chat-log / .userlist are position:absolute in .ps-room. A pin bar in normal
   flow as a room sibling paints in the left 145px (userlist column) and is
   covered on the right by the opaque chat-log. Pin must be position:absolute
   aligned to .chat-log (left: 146px when .hasuserlist), never in the userlist. */
.chat-log > .eternity-pin-bar,
.battle-log > .eternity-pin-bar,
.ps-room > .eternity-pin-bar,
.mini-window-contents > .eternity-pin-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	padding: 0 10px 0 12px;
	margin: 0;
	box-sizing: border-box;
	background: rgba(26, 22, 40, 0.96);
	color: var(--et-chat-text-dark, #e2e8f0);
	border: 0;
	border-bottom: 1px solid rgba(148, 163, 184, 0.18);
	border-left: 3px solid rgba(148, 163, 184, 0.45);
	border-radius: 0;
	font-size: 13px;
	line-height: 1.25;
	box-shadow: none;
}
.ps-room-light > .eternity-pin-bar,
.mini-window-contents > .eternity-pin-bar {
	background: rgba(232, 244, 251, 0.98);
	color: var(--et-chat-text, #1e3a5f);
	border-bottom-color: rgba(56, 140, 180, 0.22);
	border-left-color: rgba(56, 140, 180, 0.45);
}
html.dark .ps-room-light > .eternity-pin-bar,
html.dark .mini-window-contents > .eternity-pin-bar,
.dark .ps-room-light > .eternity-pin-bar,
.dark .mini-window-contents > .eternity-pin-bar {
	background: rgba(26, 22, 40, 0.96);
	color: var(--et-chat-text-dark, #e2e8f0);
	border-bottom-color: rgba(148, 163, 184, 0.18);
	border-left-color: rgba(148, 163, 184, 0.45);
}
.chat-log > .eternity-pin-bar,
.battle-log > .eternity-pin-bar {
	position: sticky;
	top: 0;
	z-index: 6;
}
.ps-room > .eternity-pin-bar,
.mini-window-contents > .eternity-pin-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 6;
}
.ps-room:has(> .chat-log.hasuserlist) > .eternity-pin-bar {
	left: 146px;
}
.userlist .eternity-pin-bar {
	display: none !important;
}
.eternity-pin-icon {
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 1;
	opacity: 0.8;
	filter: grayscale(0.15);
}
.eternity-pin-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	overflow: hidden;
}
.eternity-pin-author {
	flex: 0 1 auto;
	max-width: 38%;
	font-weight: 600;
	color: var(--et-chat-name-dark, #bfdbfe);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ps-room-light > .eternity-pin-bar .eternity-pin-author {
	color: var(--et-chat-name, #0c4a6e);
}
html.dark .ps-room-light > .eternity-pin-bar .eternity-pin-author,
.dark .ps-room-light > .eternity-pin-bar .eternity-pin-author {
	color: var(--et-chat-name-dark, #bfdbfe);
}
.eternity-pin-text {
	flex: 1 1 auto;
	min-width: 0;
	opacity: 0.88;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: none;
}
.eternity-pin-clear {
	flex: 0 0 auto;
	margin: 0;
	padding: 2px 4px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 18px;
	line-height: 1;
	opacity: 0.5;
	cursor: pointer;
}
.eternity-pin-clear:hover,
.eternity-pin-clear:focus-visible {
	opacity: 0.95;
	background: rgba(148, 163, 184, 0.14);
	outline: none;
}

/* Chat input must share the chat column offset when a userlist is present.
   Normal rooms: userlist at left:0 → input at 146px. */
.ps-room:has(> .chat-log.hasuserlist) > .chat-log-add {
	left: 146px !important;
}

/*
 * SPECTATOR: left rail = userlist; combat = arena+controls+compose; right = log/registros.
 * Compose sits between userlist and the right log panel.
 * --et-spec-chat-w / --et-spec-ulist-w set per-room from panel-battle.tsx
 */
.ps-room.et-spectator > .battle-log {
	top: 0 !important;
	bottom: 0 !important;
	right: 0 !important;
	border-left: 1px solid rgba(34, 211, 238, 0.18);
}
.ps-room.et-spectator > .chat-log-add.et-spec-compose {
	left: var(--et-spec-ulist-w, 146px) !important;
	/* Measured live from .battle-log left edge (see syncSpectatorComposeWidth) */
	right: var(--et-spec-chat-w, 340px) !important;
	width: auto !important;
	max-width: none !important;
	bottom: 0 !important;
	z-index: 4;
	box-sizing: border-box;
	border-right: 1px solid rgba(34, 211, 238, 0.18);
}

/* Lobby / roomlist card — v20260822roomcover-subrooms */
#room-rooms .roomlist a.blocklink[href="/lobby"],
.roomlist a.blocklink[href="/lobby"] {
	background-image:
		linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .65)),
		url("https://i.ibb.co/0WgjLv4/GEN10.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
	border-radius: 10px !important;
	box-sizing: border-box !important;
	color: #fff !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	min-height: 80px !important;
	margin-bottom: 2px !important;
	overflow: hidden !important;
	padding: 20px 15px !important;
	position: relative !important;
	white-space: normal !important;
	z-index: 0 !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

/* Keep subrooms visible under lobby cover (and any roomcover card) */
#room-rooms .roomlist a.blocklink[href="/lobby"] + .subrooms,
.roomlist a.blocklink[href="/lobby"] + .subrooms,
.roomlist .subrooms {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	z-index: 2 !important;
	pointer-events: auto !important;
}

#room-rooms .roomlist a.blocklink[href="/lobby"] > strong,
.roomlist a.blocklink[href="/lobby"] > strong {
	text-transform: uppercase !important;
	font-weight: 600 !important;
	letter-spacing: 1.2px !important;
	font-size: 0.85rem !important;
	width: calc(100% - 40px) !important;
	color: #fff !important;
}

#room-rooms .roomlist a.blocklink[href="/lobby"] .users,
.roomlist a.blocklink[href="/lobby"] .users {
	position: absolute !important;
	top: 12px !important;
	right: 14px !important;
	float: none !important;
	font-size: 0.7rem !important;
	font-weight: 600 !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	color: #fff !important;
	opacity: 0.95;
}

#room-rooms .roomlist a.blocklink[href="/lobby"]::after,
.roomlist a.blocklink[href="/lobby"]::after {
	content: "" !important;
	display: block !important;
	width: 100% !important;
	height: 2px !important;
	background-color: rgba(255, 255, 255, 0.4) !important;
	margin: 1px 0 !important;
	flex: 0 0 auto;
}

#room-rooms .roomlist a.blocklink[href="/lobby"] > small:not(.users),
.roomlist a.blocklink[href="/lobby"] > small:not(.users) {
	font-size: 0.75rem !important;
	opacity: 0.90 !important;
	font-weight: normal !important;
	text-transform: none !important;
	color: #fff !important;
}

#room-rooms .roomlist a.blocklink[href="/lobby"]:hover,
.roomlist a.blocklink[href="/lobby"]:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
	z-index: 0 !important;
}

/* Nightclub / party mode (Destiny-compatible: .chat.party + sala) */
.nightclub-announce-start,
.nightclub-announce-end {
	background: #000 !important;
	color: #fff !important;
	font-size: 16pt !important;
	padding: 10px 14px !important;
	text-align: center !important;
	text-shadow: 0 0 10px #ff2bd6, 0 0 14px #2bfff6 !important;
	border-radius: 8px !important;
	margin: 6px 0 !important;
}
.notice.party,
.chat.party,
.chat.mine.party,
.ps-room.eternity-nightclub-on .chat-log .chat,
.ps-room.eternity-nightclub-on .chat-log .chat.mine,
.ps-room.eternity-nightclub-on .chat-log .notice,
.ps-room.eternity-nightclub-on .battle-log .chat {
	background: #000 !important;
	color: #fff !important;
	text-shadow: 0 0 10px, 0 0 10px, 0 0 10px !important;
	font-family: Verdana, sans-serif !important;
	animation: et-nc-hue 3.2s ease-in-out infinite alternate;
}
.chat.party a,
.ps-room.eternity-nightclub-on .chat-log .chat a,
.ps-room.eternity-nightclub-on .battle-log .chat a {
	color: wheat !important;
}
.ps-room.eternity-nightclub-on .chat-log,
.ps-room.eternity-nightclub-on .battle-log {
	background: #050508 !important;
}
.ps-room.eternity-nightclub-on .chat-log-add,
.ps-room.eternity-nightclub-on .battle-log-add {
	background: rgba(0, 0, 0, 0.72) !important;
	border-top-color: rgba(255, 43, 214, 0.35) !important;
}
@keyframes et-nc-hue {
	0% { text-shadow: 0 0 8px #ff2bd6, 0 0 14px #2bfff6; }
	50% { text-shadow: 0 0 10px #ffea00, 0 0 16px #ff2bd6; }
	100% { text-shadow: 0 0 8px #2bfff6, 0 0 14px #7cff6b; }
}

/* Profile badges: shared tray (not per-badge chips), ~6 visible then carousel */
.userdetails .userbadges {
	--et-badge-cell: 28px;
	--et-badge-gap: 5px;
	--et-badge-visible: 6;
	display: flex !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	gap: var(--et-badge-gap) !important;
	justify-content: flex-start !important;
	align-items: center !important;
	margin: 4px 0 2px !important;
	box-sizing: border-box !important;
	padding: 3px 4px !important;
	max-width: min(100%, calc(
		var(--et-badge-visible) * var(--et-badge-cell)
		+ (var(--et-badge-visible) - 1) * var(--et-badge-gap)
		+ 8px
	)) !important;
	line-height: 1 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-behavior: smooth !important;
	border-radius: 6px !important;
	/* Light: one shared tray behind all medals */
	background: rgba(15, 23, 42, 0.07) !important;
	border: none !important;
	/* Hide native scrollbar; dashed frame hints overflow instead */
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	-webkit-overflow-scrolling: touch !important;
}
.userdetails .userbadges::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}
.userdetails .userbadges.et-badges-carousel {
	/* Discontinuous frame (not a scrollbar thumb) when >6 medals */
	border: 1px dashed rgba(0, 0, 0, 0.28) !important;
}
.userdetails .userbadges .userbadge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--et-badge-cell) !important;
	height: var(--et-badge-cell) !important;
	min-width: var(--et-badge-cell) !important;
	flex: 0 0 var(--et-badge-cell) !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	cursor: default !important;
}
.userdetails .userbadges .userbadge-name {
	display: none !important;
}
.userdetails .userbadges img {
	float: none !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	width: 18px !important;
	height: 18px !important;
	object-fit: contain !important;
	border-radius: 0 !important;
	background: transparent !important;
	border: none !important;
	/* Light theme (default / body without .dark): dark silhouette */
	filter: brightness(0) !important;
}
.userdetails .userbadges .userbadge-icon {
	flex: 0 0 auto !important;
	display: inline-block !important;
	width: 18px !important;
	height: 18px !important;
	font-family: remixicon !important;
	font-size: 16px !important;
	line-height: 18px !important;
	text-align: center !important;
	color: #1e293b !important;
	opacity: 1 !important;
	font-style: normal !important;
	-webkit-font-smoothing: antialiased !important;
}
/* Dark theme: body.dark (PS) / html.dark — shared light tray + light icons */
.dark .userdetails .userbadges,
html.dark .userdetails .userbadges,
body.dark .userdetails .userbadges {
	background: rgba(255, 255, 255, 0.1) !important;
}
.dark .userdetails .userbadges.et-badges-carousel,
html.dark .userdetails .userbadges.et-badges-carousel,
body.dark .userdetails .userbadges.et-badges-carousel {
	border-color: rgba(255, 255, 255, 0.28) !important;
}
.dark .userdetails .userbadges img,
html.dark .userdetails .userbadges img,
body.dark .userdetails .userbadges img {
	filter: brightness(0) invert(1) !important;
}
.dark .userdetails .userbadges .userbadge-icon,
html.dark .userdetails .userbadges .userbadge-icon,
body.dark .userdetails .userbadges .userbadge-icon {
	color: #f1f5f9 !important;
}

/*
 * Medallas vs popupbg personalizado (luminancia efectiva, no solo body.dark).
 * Clases puestas por eternity-popupbg-contrast.js sobre .ps-popup.
 */
.ps-popup.eternity-popupbg-dark .userdetails .userbadges,
.ps-popup.eternity-popupbg-dark .userdetails .userbadges.et-badges-carousel {
	background: rgba(255, 255, 255, 0.12) !important;
}
.ps-popup.eternity-popupbg-dark .userdetails .userbadges.et-badges-carousel {
	border-color: rgba(255, 255, 255, 0.3) !important;
}
.ps-popup.eternity-popupbg-dark .userdetails .userbadges img {
	filter: brightness(0) invert(1) !important;
}
.ps-popup.eternity-popupbg-dark .userdetails .userbadges .userbadge-icon {
	color: #f8fafc !important;
}
.ps-popup.eternity-popupbg-light .userdetails .userbadges,
.ps-popup.eternity-popupbg-light .userdetails .userbadges.et-badges-carousel {
	background: rgba(15, 23, 42, 0.1) !important;
}
.ps-popup.eternity-popupbg-light .userdetails .userbadges.et-badges-carousel {
	border-color: rgba(0, 0, 0, 0.3) !important;
}
.ps-popup.eternity-popupbg-light .userdetails .userbadges img {
	filter: brightness(0) !important;
}
.ps-popup.eternity-popupbg-light .userdetails .userbadges .userbadge-icon {
	color: #0f172a !important;
}

/* Fondo de ficha de usuario (/popupbg) — imagen estática o degradado animado */
.ps-popup.et-userpopup-hasbg {
	position: absolute;
	overflow: hidden;
	background-color: #0a0e14 !important;
	background-image: none !important;
	color: #f1f5f9;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
}
.ps-popup.et-userpopup-hasbg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background-image: var(--et-popup-bg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.ps-popup.et-userpopup-hasbg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(10, 12, 20, 0.32), rgba(8, 10, 16, 0.55));
}
.ps-popup.et-userpopup-hasbg > * {
	position: relative;
	z-index: 1;
}
.ps-popup.et-userpopup-hasbg.et-userpopup-anim::before {
	inset: -20%;
	background-size: 280% 280%;
	animation: et-popupbg-shift 14s ease-in-out infinite;
}
.ps-popup.et-userpopup-hasbg.et-userpopup-anim-conic::before {
	inset: -40%;
	background-size: 100% 100%;
	animation: et-popupbg-spin 18s linear infinite;
}
@keyframes et-popupbg-shift {
	0% { background-position: 0% 40%; filter: hue-rotate(0deg); }
	50% { background-position: 100% 60%; filter: hue-rotate(28deg); }
	100% { background-position: 0% 40%; filter: hue-rotate(0deg); }
}
@keyframes et-popupbg-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.ps-popup.et-userpopup-hasbg.et-userpopup-anim::before,
	.ps-popup.et-userpopup-hasbg.et-userpopup-anim-conic::before {
		animation: none;
		inset: 0;
		filter: none;
		transform: none;
		background-size: cover;
	}
}
.ps-popup.et-userpopup-hasbg .usergroup,
.ps-popup.et-userpopup-hasbg .userstatus,
.ps-popup.et-userpopup-hasbg .rooms,
.ps-popup.et-userpopup-hasbg .offline,
.ps-popup.et-userpopup-hasbg a,
.ps-popup.et-userpopup-hasbg strong {
	color: #f8fafc !important;
}
.ps-popup.et-userpopup-hasbg .button {
	text-shadow: none;
}

/*
 * Solo fichas de usuario. No tocar .ps-popup global: width:fit-content /
 * width:auto estira el popup al viewport, captura todos los clics y
 * deja la UI congelada.
 *
 * Ancho fijo acotado (no min 340 + max-content de chips en una fila):
 * el bot con ~10 salas expandía el popup. El nombre va en su propia
 * fila (sin compartir ancho con los iconos) para no truncar a «Mella…».
 */
.ps-popup[id^="room-user-"],
.ps-popup[id^="room-viewuser-"] {
	width: min(300px, calc(100vw - 16px));
	max-width: min(300px, calc(100vw - 16px));
	min-width: 0;
	box-sizing: border-box;
}
.ps-popup[id^="room-user-"] > .pad,
.ps-popup[id^="room-viewuser-"] > .pad {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: 8px;
	padding-right: 8px;
}
.userdetails.et-userpopup {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
	padding: 2px 0 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}
.et-userpopup__head {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	min-width: 0;
}
/* Name and action icons on separate rows so long single-token
 * names (e.g. MellamanAlex) are never ellipsized beside the buttons. */
.et-userpopup__idtop {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	width: 100%;
	min-width: 0;
}
.et-userpopup__idtop > strong {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	font-size: 11pt;
	line-height: 1.25;
	overflow: visible;
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
	padding-top: 2px;
}
.et-userpopup__idtop > strong > a {
	display: inline;
	overflow: visible;
	white-space: nowrap;
	max-width: none;
}
.et-userpopup__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	align-self: flex-end;
	margin-left: 0;
	gap: 4px;
}
.et-userpopup__iconbtn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border-radius: 8px;
	border: 1px solid rgba(128, 128, 128, 0.35);
	background: rgba(128, 128, 128, 0.12);
	color: inherit;
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: none;
	background-image: none;
}
.et-userpopup__iconbtn i {
	margin: 0;
	font-size: 16px;
	line-height: 1;
	width: 1em;
	height: 1em;
	display: block;
}
.et-userpopup__iconbtn:hover,
.et-userpopup__iconbtn:focus-visible {
	background: rgba(128, 128, 128, 0.22);
	outline: none;
}
.et-userpopup__iconbtn:disabled {
	opacity: 0.38;
	cursor: default;
}
.dark .et-userpopup__iconbtn,
html.dark .et-userpopup__iconbtn {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.08);
	color: #e8eef6;
}
.dark .et-userpopup__iconbtn:hover,
html.dark .et-userpopup__iconbtn:hover,
.dark .et-userpopup__iconbtn:focus-visible,
html.dark .et-userpopup__iconbtn:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}
.ps-popup.et-userpopup-hasbg .et-userpopup__iconbtn {
	color: #f8fafc;
	text-shadow: none;
	border-color: rgba(248, 250, 252, 0.22);
	background: rgba(15, 18, 28, 0.42);
}
@media (pointer: coarse) {
	.et-userpopup__iconbtn {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}
	.et-userpopup__iconbtn i {
		font-size: 18px;
	}
}
.userdetails.et-userpopup img.trainersprite,
.et-userpopup__head > .trainersprite {
	float: none !important;
	margin: 0 !important;
	width: 80px;
	height: 80px;
	flex: 0 0 80px;
	object-fit: contain;
}
.et-userpopup__id {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}
.et-userpopup__id .usergroup {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.et-userpopup__id .eternity-client-origin {
	margin: 1px 0 0;
}
.et-userpopup__id .userbadges {
	margin: 6px 0 0 !important;
	max-width: 100% !important;
}
.et-userpopup__rooms {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px solid rgba(128, 128, 128, 0.22);
	font-size: 9pt;
	line-height: 1.35;
	min-width: 0;
}
.et-userpopup__roomsec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.et-userpopup__roomsec-label {
	font-size: 8pt;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.68;
	line-height: 1.2;
}
.et-userpopup__roomsum {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 3px 2px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
	box-shadow: none;
}
.et-userpopup__roomsum .et-userpopup__roomsec-label {
	opacity: 0.78;
}
.et-userpopup__roomsum-meta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	opacity: 0.88;
	font-size: 8.5pt;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.et-userpopup__roomsum-caret {
	opacity: 0.7;
	font-size: 8pt;
	line-height: 1;
}
.et-userpopup__roomsum:hover .et-userpopup__roomsec-label,
.et-userpopup__roomsum:hover .et-userpopup__roomsum-meta {
	opacity: 1;
}
.et-userpopup__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	max-height: none;
	overflow: visible;
}
.et-userpopup__roomsec--many .et-userpopup__chips {
	max-height: 7.2em;
	overflow-x: hidden;
	overflow-y: auto;
}
.et-userpopup__chip {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	max-width: 100%;
	margin: 0;
	padding: 1px 7px;
	border-radius: 999px;
	border: 1px solid rgba(100, 90, 140, 0.28);
	background: rgba(124, 92, 180, 0.12);
	color: inherit;
	font: inherit;
	font-size: 8pt;
	font-weight: 650;
	line-height: 1.35;
	cursor: pointer;
	text-align: left;
	box-shadow: none;
	background-image: none;
	min-height: 0;
	height: auto;
}
.et-userpopup__chip:hover,
.et-userpopup__chip:focus {
	filter: brightness(1.06);
	outline: none;
}
.et-userpopup__chip:focus-visible {
	box-shadow: 0 0 0 2px rgba(124, 92, 180, 0.35);
}
.et-userpopup__chip--private {
	border-color: rgba(13, 148, 136, 0.32);
	background: rgba(20, 184, 166, 0.12);
}
.et-userpopup__chip--battle {
	border-color: rgba(217, 119, 6, 0.35);
	background: rgba(245, 158, 11, 0.14);
}
.et-userpopup__chip--here {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	font-weight: 750;
}
.et-userpopup__chiprank {
	opacity: 0.72;
	font-weight: 800;
	flex: 0 0 auto;
}
.et-userpopup__chipname {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dark .et-userpopup__chip,
html.dark .et-userpopup__chip {
	border-color: rgba(196, 181, 253, 0.28);
	background: rgba(139, 92, 246, 0.18);
	color: #ede9fe;
}
.dark .et-userpopup__chip--private,
html.dark .et-userpopup__chip--private {
	border-color: rgba(94, 234, 212, 0.28);
	background: rgba(45, 212, 191, 0.16);
	color: #ccfbf1;
}
.dark .et-userpopup__chip--battle,
html.dark .et-userpopup__chip--battle {
	border-color: rgba(253, 186, 116, 0.32);
	background: rgba(251, 146, 60, 0.18);
	color: #ffedd5;
}
.ps-popup.et-userpopup-hasbg .et-userpopup__chip {
	color: #f8fafc;
	text-shadow: none;
	background: rgba(15, 18, 28, 0.42);
	border-color: rgba(248, 250, 252, 0.22);
}
.ps-popup.et-userpopup-hasbg .et-userpopup__chip--private {
	background: rgba(13, 148, 136, 0.28);
}
.ps-popup.et-userpopup-hasbg .et-userpopup__chip--battle {
	background: rgba(217, 119, 6, 0.3);
}
.et-userpopup__foot {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 2px;
}
.et-userpopup__foot .buttonbar {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 6px;
	justify-content: stretch;
	text-align: left !important;
	margin: 0 !important;
}
.et-userpopup__foot .buttonbar .button {
	flex: 1 1 auto;
	min-width: 0;
}
.et-userpopup__foot hr {
	margin: 2px 0 0;
	border: 0;
	border-top: 1px solid rgba(128, 128, 128, 0.28);
}
.dark .et-userpopup__rooms,
html.dark .et-userpopup__rooms {
	border-top-color: rgba(255, 255, 255, 0.12);
}
.dark .et-userpopup__foot hr,
html.dark .et-userpopup__foot hr {
	border-top-color: rgba(255, 255, 255, 0.14);
}
.ps-popup .volume input[type="range"] {
	width: 150px;
	max-width: 100%;
}
.ps-popup .eternity-qol-volume-mini {
	max-width: 220px;
}

.et-useropts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.et-useropts__row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.et-useropts__sec {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border: 1px solid rgba(128, 128, 128, 0.22);
	border-radius: 10px;
}
.et-useropts__sec-title {
	font-size: 8pt;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.68;
	line-height: 1.2;
}
.et-useropts__btn.button {
	flex: 1 1 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	min-height: 30px;
	margin: 0;
	padding: 5px 8px;
	border-radius: 8px;
	font-size: 9pt;
	line-height: 1.2;
	text-align: center;
	box-shadow: none;
}
.et-useropts__btn.button i {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
	opacity: 0.88;
}
.et-useropts__btn.button span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.et-useropts__btn.button small {
	opacity: 0.72;
	font-weight: 600;
}
.et-useropts__btn--undo.button {
	border-color: rgba(16, 185, 129, 0.45);
	background: rgba(16, 185, 129, 0.14);
	color: inherit;
}
.et-useropts__btn--danger.button {
	border-color: rgba(239, 68, 68, 0.35);
}
.dark .et-useropts__sec,
html.dark .et-useropts__sec {
	border-color: rgba(255, 255, 255, 0.12);
}
.dark .et-useropts__btn--undo.button,
html.dark .et-useropts__btn--undo.button {
	border-color: rgba(52, 211, 153, 0.4);
	background: rgba(16, 185, 129, 0.18);
	color: #d1fae5;
}
.dark .et-useropts__btn--danger.button,
html.dark .et-useropts__btn--danger.button {
	border-color: rgba(248, 113, 113, 0.38);
}
@media (pointer: coarse) {
	.et-useropts__btn.button {
		min-height: 36px;
		font-size: 10pt;
	}
}